diff --git a/apps/react-admin/.dockerignore b/apps/react-admin/.dockerignore
new file mode 100644
index 000000000..1046b8e45
--- /dev/null
+++ b/apps/react-admin/.dockerignore
@@ -0,0 +1,4 @@
+.github
+.vscode/
+dist/
+node_modules/
diff --git a/apps/react-admin/.env b/apps/react-admin/.env
new file mode 100644
index 000000000..19c1d9f4b
--- /dev/null
+++ b/apps/react-admin/.env
@@ -0,0 +1 @@
+VITE_GLOB_APP_TITLE = Vite React TS Template
diff --git a/apps/react-admin/.env.development b/apps/react-admin/.env.development
new file mode 100644
index 000000000..8a1166a28
--- /dev/null
+++ b/apps/react-admin/.env.development
@@ -0,0 +1,12 @@
+VITE_APP_BASE_API=
+VITE_APP_HOMEPAGE=/dashboard/workbench
+VITE_APP_BASE_PATH=/
+# VITE_GLOB_CLIENT_ID=react-admin-client
+# VITE_GLOB_CLIENT_SECRET=''
+# VITE_GLOB_SCOPE="openid email address phone profile offline_access miwen-abp-application"
+# VITE_PROXY_API=http://192.168.31.246:30001
+
+VITE_GLOB_CLIENT_ID=vue-admin-client
+VITE_GLOB_CLIENT_SECRET=1q2w3e*
+VITE_GLOB_SCOPE="openid email address phone profile offline_access lingyun-abp-application"
+VITE_PROXY_API=http://124.223.5.95:30001
\ No newline at end of file
diff --git a/apps/react-admin/.env.production b/apps/react-admin/.env.production
new file mode 100644
index 000000000..42140e5bc
--- /dev/null
+++ b/apps/react-admin/.env.production
@@ -0,0 +1,3 @@
+VITE_APP_BASE_API=/api
+VITE_APP_HOMEPAGE=/dashboard/workbench
+VITE_APP_BASE_PATH=/
diff --git a/apps/react-admin/.gitignore b/apps/react-admin/.gitignore
new file mode 100644
index 000000000..6df0aabe7
--- /dev/null
+++ b/apps/react-admin/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# vite 打包分析产物
+stats.html
+
+# 取消上层忽略
+!.vscode/
\ No newline at end of file
diff --git a/apps/react-admin/.vscode/extensions.json b/apps/react-admin/.vscode/extensions.json
new file mode 100644
index 000000000..bc8a17487
--- /dev/null
+++ b/apps/react-admin/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+	"recommendations": [
+		"biomejs.biome",
+		"bradlc.vscode-tailwindcss",
+		"lokalise.i18n-ally"
+	]
+}
diff --git a/apps/react-admin/.vscode/settings.json b/apps/react-admin/.vscode/settings.json
new file mode 100644
index 000000000..b05ff2ed1
--- /dev/null
+++ b/apps/react-admin/.vscode/settings.json
@@ -0,0 +1,35 @@
+{
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit",
+    "source.organizeImports.biome": "explicit"
+  },
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ],
+  "npm.packageManager": "pnpm",
+  "i18n-ally.localesPaths": ["src/locales/lang"],
+  "i18n-ally.enabledParsers": ["json"],
+  "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
+  "i18n-ally.keystyle": "flat",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.sourceLanguage": "en_US",
+  "i18n-ally.displayLanguage": "zh_CN",
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  }
+}
diff --git a/apps/react-admin/Dockerfile b/apps/react-admin/Dockerfile
new file mode 100644
index 000000000..615a02da9
--- /dev/null
+++ b/apps/react-admin/Dockerfile
@@ -0,0 +1,24 @@
+# Stage 1: build stage
+FROM node:22-alpine as build-stage
+# make the 'app' folder the current working directory
+WORKDIR /app
+# config node options
+ENV NODE_OPTIONS=--max_old_space_size=8192
+# config pnpm, install dependencies
+COPY package.json pnpm-lock.yaml* ./
+RUN npm install pnpm@9.x -g && \
+    pnpm install --frozen-lockfile
+# copy project files and folders to the current working directory (i.e. 'app' folder)
+COPY . ./
+# build the project
+RUN pnpm build
+RUN echo "build successful  🎉 🎉 🎉"
+
+
+# Stage 2: production stage
+FROM nginx:latest as production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
+RUN echo "deploy to nginx successful  🎉 🎉 🎉"
+
diff --git a/apps/react-admin/LICENSE b/apps/react-admin/LICENSE
new file mode 100644
index 000000000..ceb73cc97
--- /dev/null
+++ b/apps/react-admin/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 d3george
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/apps/react-admin/README.md b/apps/react-admin/README.md
new file mode 100644
index 000000000..56f71dadd
--- /dev/null
+++ b/apps/react-admin/README.md
@@ -0,0 +1,132 @@
+<div align="center"> 
+<br> 
+<br>
+<img src="./src/assets/images/logo.png" height="140" />
+<h3> Slash Admin </h3>
+  <p>
+    <p style="font-size: 14px">
+      Slash Admin is a modern admin dashboard template built with React 18, Vite, Ant Design, and TypeScript. It is designed to help developers quickly create powerful admin management systems.
+    </p>
+    <br />
+    <br />
+    <a href="https://admin.slashspaces.com/">Preview</a>
+    ·
+    <a href="https://discord.gg/fXemAXVNDa">Discord</a>
+    ·
+    <a href="https://docs-admin.slashspaces.com/">Document</a>
+    <br />
+    <br />
+    <a href="https://trendshift.io/repositories/6387" target="_blank"><img src="https://trendshift.io/api/badge/repositories/6387" alt="d3george%2Fslash-admin | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</div>
+
+**English** | [中文](./README.zh-CN.md)
+
+##  Sponsor
+<div style="display: flex; gap: 50px"> 
+  <img style="width:300px" src="https://d3george.github.io/github-static/pay/weixin.jpg" >
+  <img style="width:280px" src="https://d3george.github.io/github-static/pay/buymeacoffee.png" />
+</div>
+
+## Preview
++ https://admin.slashspaces.com/
+
+|![login.png](https://d3george.github.io/github-static/slash-admin/login.jpeg)|![login_dark.png](https://d3george.github.io/github-static/slash-admin/login_dark.jpeg)
+| ----------------------------------------------------------------- | ------------------------------------------------------------------- |
+|![analysis.png](https://d3george.github.io/github-static/slash-admin/analysis.png)|![workbench.png](https://d3george.github.io/github-static/slash-admin/workbench.png)
+
+## Features
+
+- Built using React 18 hooks.
+- Powered by Vite for rapid development and hot module replacement.
+- Integrates Ant Design, providing a rich set of UI components and design patterns.
+- Written in TypeScript, offering type safety and an improved development experience.
+- Responsive design, adapting to various screen sizes and devices.
+- Flexible routing configuration, supporting nested routes.
+- Integrated access control based on user roles.
+- Supports internationalization for easy language switching.
+- Includes common admin features like user management, role management, and permission management.
+- Customizable themes and styles to meet your branding needs.
+- Mocking solution based on MSW and Faker.js.
+- State management using Zustand.
+- Data fetching using React-Query.
+
+## Quick Start
+
+### Get the Project Code
+
+```bash
+git clone https://github.com/d3george/slash-admin.git
+```
+
+### Install Dependencies
+
+In the project's root directory, run the following command to install project dependencies:
+
+```bash
+pnpm install
+```
+
+### Start the Development Server
+
+Run the following command to start the development server:
+
+```bash
+pnpm dev
+```
+
+Visit [http://localhost:3001](http://localhost:3001) to view your application.
+
+### Build for Production
+
+Run the following command to build the production version:
+
+```bash
+pnpm build
+```
+
+## Docker deployment
+
+
+### Build image and Run container
+#### build image
+Enter the project root directory in the terminal and execute the following command to build the Docker image:
+```
+docker build -t your-image-name .
+```
+Make sure to replace `your-image-name` with your own image name 
+
+#### run container
+Run your application in the Docker container using the following command:
+```
+docker run -p 3001:80 your-image-name
+```
+This will run your application on port `80`(exposed in `Dockerfile`) of the container and map it to port `3001` on your host.
+
+Now you can access http://localhost:3001 to view the deployed applications.
+
+### use docker-compose.yaml
+Enter the project root directory in the terminal and execute the following command to start Docker Compose:
+```
+docker-compose up -d
+```
+Docker Compose will build an image based on the configuration defined by 'docker-compose. yaml' and run the container in the background.
+
+After the container runs successfully, it can also be accessed through http://localhost:3001 To view the deployed applications.
+
+
+## Git Contribution submission specification
+
+reference[.commitlint.config.js](./commitlint.config.js)
+
+- `feat` new features
+- `fix`  fix the
+- `docs` documentation or comments
+- `style` code format (changes that do not affect code execution)
+- `refactor` refactor
+- `perf` performance optimization
+- `revert` revert commit
+- `test` test related
+- `chore` changes in the construction process or auxiliary tools
+- `ci` modify CI configuration and scripts
+- `types` type definition file changes
+- `wip` in development
diff --git a/apps/react-admin/README.zh-CN.md b/apps/react-admin/README.zh-CN.md
new file mode 100644
index 000000000..5f9ff89c1
--- /dev/null
+++ b/apps/react-admin/README.zh-CN.md
@@ -0,0 +1,131 @@
+<div align="center"> 
+<br> 
+<br>
+<img src="./src/assets/images/logo.png" height="140" />
+<h3> Slash Admin </h3>
+  <p>
+    <p style="font-size: 14px">
+      Slash Admin 是一款现代化的后台管理模板，基于 React 18、Vite、Ant Design 和 TypeScript 构建。它旨在帮助开发人员快速搭建功能强大的后台管理系统。
+    </p>
+    <br />
+    <br />
+    <a href="https://admin.slashspaces.com/">Preview</a>
+    ·
+    <a href="https://discord.gg/fXemAXVNDa">Discord</a>
+    ·
+    <a href="https://docs-admin.slashspaces.com/">Document</a>
+    <br />
+    <br />
+    <a href="https://trendshift.io/repositories/6387" target="_blank"><img src="https://trendshift.io/api/badge/repositories/6387" alt="d3george%2Fslash-admin | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</div>
+
+**中文** | [English](./README.md)
+
+## 赞助 
+<div style="display: flex; gap: 50px"> 
+  <img style="width:300px" src="https://d3george.github.io/github-static/pay/weixin.jpg" >
+  <img style="width:280px" src="https://d3george.github.io/github-static/pay/buymeacoffee.png" />
+</div>
+
+
+## 预览
++ https://admin.slashspaces.com/
+
+|![login.png](https://d3george.github.io/github-static/slash-admin/login.jpeg)|![login_dark.png](https://d3george.github.io/github-static/slash-admin/login_dark.jpeg)
+| ----------------------------------------------------------------- | ------------------------------------------------------------------- |
+|![analysis.png](https://d3george.github.io/github-static/slash-admin/analysis.png)|![workbench.png](https://d3george.github.io/github-static/slash-admin/workbench.png)
+## 特性
+
+- 使用 React 18 hooks 进行构建。
+- 基于 Vite 进行快速开发和热模块替换。
+- 集成 Ant Design，提供丰富的 UI 组件和设计模式。
+- 使用 TypeScript 编写，提供类型安全性和更好的开发体验。
+- 响应式设计，适应各种屏幕尺寸和设备。
+- 灵活的路由配置，支持多级嵌套路由。
+- 集成权限管理，根据用户角色控制页面访问权限。
+- 集成国际化支持，轻松切换多语言。
+- 集成常见的后台管理功能，如用户管理、角色管理、权限管理等。
+- 可定制的主题和样式，以满足您的品牌需求。
+- 基于 MSW 和 Faker.js 的Mock方案
+- 使用 Zustand 进行状态管理
+- 使用 React-Query 进行数据获取
+
+## 快速开始
+
+### 获取项目代码
+
+```bash
+git clone https://github.com/d3george/slash-admin.git
+```
+
+### 安装依赖
+
+在项目根目录下运行以下命令安装项目依赖：
+
+```bash
+pnpm install
+```
+
+### 启动开发服务器
+
+运行以下命令以启动开发服务器：
+
+```bash
+pnpm dev
+```
+
+访问 [http://localhost:3001](http://localhost:3001) 查看您的应用程序。
+
+### 构建生产版本
+
+运行以下命令以构建生产版本：
+
+```bash
+pnpm build
+```
+
+构建后的文件将位于 `dist` 目录中。
+
+## 容器化部署
+
+### 构建镜像并运行容器
+#### 构建镜像
+在终端中进入项目根目录，并执行以下命令来构建 Docker 镜像:
+```
+docker build -t your-image-name .
+```
+确保将 `your-image-name` 替换为你自己的镜像名称
+
+#### 运行容器
+使用以下命令在 Docker 容器中运行你的应用：
+```
+docker run -p 3001:80 your-image-name
+```
+这将在容器的端口 `80` (暴露在`Dockerfile`中) 上运行你的应用，并将其映射到你主机的端口 `3001` 上。
+
+现在，你可以通过访问 http://localhost:3001 来查看部署的应用。
+
+
+### 使用docker-compose.yaml
+在终端中进入项目根目录，并执行以下命令来启动 Docker Compose：
+```
+docker-compose up -d
+```
+Docker Compose 根据`docker-compose.yaml`定义的配置构建镜像并在后台运行容器.
+
+容器运行成功后，同样可以通过访问 http://localhost:3001来查看部署的应用。
+
+参考[.commitlint.config.js](./commitlint.config.js)
+
+- `feat` 新功能
+- `fix` 修复bug
+- `docs` 文档注释
+- `style` 代码格式(不影响代码运行的变动)
+- `refactor` 重构
+- `perf` 性能优化
+- `revert` 回滚commit
+- `test` 测试相关
+- `chore` 构建过程或辅助工具的变动
+- `ci` 修改CI配置、脚本
+- `types` 类型定义文件修改
+- `wip` 开发中
diff --git a/apps/react-admin/biome.json b/apps/react-admin/biome.json
new file mode 100644
index 000000000..47ef3986f
--- /dev/null
+++ b/apps/react-admin/biome.json
@@ -0,0 +1,44 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true,
+		"defaultBranch": "main"
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"ignore": ["public", ".vscode", "src/api/gen"]
+	},
+	"formatter": {
+		"enabled": true,
+		"lineWidth": 120,
+		"indentStyle": "tab"
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noExplicitAny": "off"
+			},
+			"a11y": {
+				"useKeyWithClickEvents": "off"
+			},
+			"complexity": {
+				"noForEach": "off"
+			},
+			"correctness": {
+				"useExhaustiveDependencies": "off"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		}
+	}
+}
diff --git a/apps/react-admin/docker-compose.yaml b/apps/react-admin/docker-compose.yaml
new file mode 100644
index 000000000..c34a48a4f
--- /dev/null
+++ b/apps/react-admin/docker-compose.yaml
@@ -0,0 +1,7 @@
+services:
+  slash:
+    build:
+      context: .
+    ports:
+      - "3001:80"
+    restart: always
diff --git a/apps/react-admin/index.html b/apps/react-admin/index.html
new file mode 100644
index 000000000..aca743b1f
--- /dev/null
+++ b/apps/react-admin/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Slash Admin</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/react-admin/lefthook.yml b/apps/react-admin/lefthook.yml
new file mode 100644
index 000000000..2a7a0f6e1
--- /dev/null
+++ b/apps/react-admin/lefthook.yml
@@ -0,0 +1,26 @@
+# SKIP CI in commit message to skip hooks
+skip_output:
+  - meta
+  - success
+  - summary
+
+pre-commit:
+  parallel: true
+  commands:
+    format:
+      glob: "*.{js,jsx,ts,tsx,json,md}"
+      run: npx @biomejs/biome format --write --no-errors-on-unmatched {staged_files}
+      stage_fixed: true
+    lint:
+      glob: "*.{js,jsx,ts,tsx}"
+      run: npx @biomejs/biome lint --no-errors-on-unmatched {staged_files}
+    check-types:
+      glob: "*.{ts,tsx}"
+      run: npx tsc --noEmit
+
+commit-msg:
+  commands:
+    commitlint:
+      run: npx commitlint --edit {1}
+      # 允许空提交信息
+      skip: merge|rebase
diff --git a/apps/react-admin/openapi-ts.config.ts b/apps/react-admin/openapi-ts.config.ts
new file mode 100644
index 000000000..13571810d
--- /dev/null
+++ b/apps/react-admin/openapi-ts.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from "@hey-api/openapi-ts";
+import { defaultPlugins } from "@hey-api/openapi-ts";
+export default defineConfig({
+	client: "@hey-api/client-axios",
+	input: "http://192.168.31.246:30001/swagger/v1/swagger.json",
+	output: {
+		format: "biome",
+		lint: "biome",
+		path: "src/api/gen",
+	},
+	plugins: [
+		...defaultPlugins,
+		{
+			enums: "typescript",
+			name: "@hey-api/typescript",
+		},
+	],
+});
diff --git a/apps/react-admin/package.json b/apps/react-admin/package.json
new file mode 100644
index 000000000..47f2243e5
--- /dev/null
+++ b/apps/react-admin/package.json
@@ -0,0 +1,117 @@
+{
+	"name": "slash-admin",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"homepage": "https://github.com/d3george/slash-admin",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc && vite build",
+		"preview": "vite preview",
+		"preinstall": "lefthook install",
+		"gen-api": "openapi-ts"
+	},
+	"dependencies": {
+		"@ant-design/cssinjs": "^1.17.2",
+		"@ant-design/icons": "^5.2.6",
+		"@ant-design/pro-table": "^3.18.3",
+		"@fullcalendar/common": "^5.11.5",
+		"@fullcalendar/core": "^6.1.9",
+		"@fullcalendar/daygrid": "^6.1.9",
+		"@fullcalendar/interaction": "^6.1.9",
+		"@fullcalendar/list": "^6.1.9",
+		"@fullcalendar/react": "^6.1.9",
+		"@fullcalendar/timegrid": "^6.1.9",
+		"@fullcalendar/timeline": "^6.1.9",
+		"@hey-api/client-axios": "^0.2.12",
+		"@iconify/react": "^4.1.1",
+		"@microsoft/signalr": "^8.0.7",
+		"@tanstack/react-query": "^5.50.1",
+		"@tanstack/react-query-devtools": "^5.50.1",
+		"@vanilla-extract/css": "^1.17.0",
+		"@vanilla-extract/vite-plugin": "^4.0.19",
+		"@vercel/analytics": "^1.2.2",
+		"@vitejs/plugin-react": "^4.1.0",
+		"antd": "^5.9.3",
+		"apexcharts": "^3.43.0",
+		"autosuggest-highlight": "^3.3.4",
+		"axios": "^1.5.1",
+		"classnames": "^2.3.2",
+		"clsx": "^2.1.1",
+		"color": "^4.2.3",
+		"dayjs": "^1.11.10",
+		"defu": "^6.1.4",
+		"framer-motion": "^10.16.4",
+		"highlight.js": "^11.9.0",
+		"i18next": "^23.5.1",
+		"i18next-browser-languagedetector": "^7.1.0",
+		"json-edit-react": "^1.19.2",
+		"nprogress": "^0.2.0",
+		"numeral": "^2.0.6",
+		"ramda": "^0.29.1",
+		"react": "18.2.0",
+		"react-apexcharts": "^1.4.1",
+		"react-beautiful-dnd": "^13.1.1",
+		"react-dom": "18.2.0",
+		"react-error-boundary": "^4.0.13",
+		"react-helmet-async": "^2.0.5",
+		"react-i18next": "^13.2.2",
+		"react-icons": "^4.11.0",
+		"react-markdown": "^8.0.7",
+		"react-organizational-chart": "^2.2.1",
+		"react-quill": "^2.0.0",
+		"react-router": "^7.0.2",
+		"react-use": "^17.4.0",
+		"rehype-highlight": "^6.0.0",
+		"rehype-raw": "^6.1.1",
+		"remark-gfm": "^3.0.1",
+		"reset-css": "^5.0.2",
+		"screenfull": "^6.0.2",
+		"simplebar-react": "^3.2.4",
+		"sonner": "^1.7.0",
+		"styled-components": "^6.0.9",
+		"tailwind-merge": "^2.5.4",
+		"zustand": "^4.4.3"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "1.9.4",
+		"@commitlint/cli": "^17.7.2",
+		"@commitlint/config-conventional": "^17.7.0",
+		"@faker-js/faker": "^8.1.0",
+		"@hey-api/openapi-ts": "^0.59.1",
+		"@types/autosuggest-highlight": "^3.2.0",
+		"@types/color": "^3.0.4",
+		"@types/nprogress": "^0.2.1",
+		"@types/numeral": "^2.0.3",
+		"@types/ramda": "^0.29.6",
+		"@types/react": "^18.2.28",
+		"@types/react-beautiful-dnd": "^13.1.6",
+		"@types/react-dom": "^18.2.13",
+		"@types/styled-components": "^5.1.28",
+		"autoprefixer": "^10.4.16",
+		"axios-mock-adapter": "^2.1.0",
+		"lefthook": "^1.8.2",
+		"msw": "^2.4.9",
+		"postcss": "^8.4.31",
+		"postcss-import": "^15.1.0",
+		"postcss-nesting": "^11.3.0",
+		"rollup-plugin-visualizer": "^5.9.2",
+		"tailwindcss": "^3.3.3",
+		"ts-node": "^10.9.1",
+		"typescript": "^5.2.2",
+		"vite": "^5.4.9",
+		"vite-plugin-svg-icons": "^2.0.1",
+		"vite-tsconfig-paths": "^5.0.1",
+		"vitest": "^2.1.8"
+	},
+	"engines": {
+		"node": "20.*"
+	},
+	"packageManager": "pnpm@9.1.0",
+	"msw": {
+		"workerDirectory": "public"
+	},
+	"commitlint": {
+		"extends": ["@commitlint/config-conventional"]
+	}
+}
diff --git a/apps/react-admin/postcss.config.js b/apps/react-admin/postcss.config.js
new file mode 100644
index 000000000..a5a8f1524
--- /dev/null
+++ b/apps/react-admin/postcss.config.js
@@ -0,0 +1,8 @@
+export default {
+	plugins: {
+		"postcss-import": {},
+		"tailwindcss/nesting": "postcss-nesting",
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};
diff --git a/apps/react-admin/public/mockServiceWorker.js b/apps/react-admin/public/mockServiceWorker.js
new file mode 100644
index 000000000..8241ef8cc
--- /dev/null
+++ b/apps/react-admin/public/mockServiceWorker.js
@@ -0,0 +1,295 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const PACKAGE_VERSION = '2.6.4'
+const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+self.addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener('message', async function (event) {
+  const clientId = event.source.id
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
+      })
+      break
+    }
+
+    case 'MOCK_DEACTIVATE': {
+      activeClientIds.delete(clientId)
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+self.addEventListener('fetch', function (event) {
+  const { request } = event
+
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  // Generate unique request ID.
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId))
+})
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event)
+  const response = await getResponse(event, client, requestId)
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    ;(async function () {
+      const responseClone = response.clone()
+
+      sendToClient(
+        client,
+        {
+          type: 'RESPONSE',
+          payload: {
+            requestId,
+            isMockedResponse: IS_MOCKED_RESPONSE in response,
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            body: responseClone.body,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+          },
+        },
+        [responseClone.body],
+      )
+    })()
+  }
+
+  return response
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event
+
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = request.clone()
+
+  function passthrough() {
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    headers.delete('accept', 'msw/passthrough')
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const requestBuffer = await request.arrayBuffer()
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        url: request.url,
+        mode: request.mode,
+        method: request.method,
+        headers: Object.fromEntries(request.headers.entries()),
+        cache: request.cache,
+        credentials: request.credentials,
+        destination: request.destination,
+        integrity: request.integrity,
+        redirect: request.redirect,
+        referrer: request.referrer,
+        referrerPolicy: request.referrerPolicy,
+        body: requestBuffer,
+        keepalive: request.keepalive,
+      },
+    },
+    [requestBuffer],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'PASSTHROUGH': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(
+      message,
+      [channel.port2].concat(transferrables.filter(Boolean)),
+    )
+  })
+}
+
+async function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
+}
diff --git a/apps/react-admin/src/App.tsx b/apps/react-admin/src/App.tsx
new file mode 100644
index 000000000..fdf7414a3
--- /dev/null
+++ b/apps/react-admin/src/App.tsx
@@ -0,0 +1,44 @@
+import { Helmet } from "react-helmet-async";
+
+import Logo from "@/assets/images/logo.png";
+import Router from "@/router/index";
+
+import { MotionLazy } from "./components/animate/motion-lazy";
+import Toast from "./components/toast";
+import { AntdAdapter } from "./theme/adapter/antd.adapter";
+import { ThemeProvider } from "./theme/theme-provider";
+import { useEffect } from "react";
+
+import { useSetLocale } from "./store/localeI18nStore";
+import { useTranslation } from "react-i18next";
+import { getStringItem } from "./utils/storage";
+import { LocalEnum, StorageEnum } from "#/enum";
+import { useSessions } from "./hooks/abp/use-sessions";
+
+function App() {
+	const { i18n } = useTranslation();
+	const setLocale = useSetLocale();
+	const defaultLng = getStringItem(StorageEnum.I18N) || LocalEnum.en_US;
+	useSessions();
+	useEffect(() => {
+		async function initializeI18n() {
+			await setLocale(defaultLng as LocalEnum, i18n);
+		}
+		initializeI18n(); //触发abp语言包加载
+	}, [defaultLng, i18n, setLocale]);
+	return (
+		<ThemeProvider adapters={[AntdAdapter]}>
+			<MotionLazy>
+				<Helmet>
+					<title>Slash Admin</title>
+					<link rel="icon" href={Logo} />
+				</Helmet>
+				<Toast />
+
+				<Router />
+			</MotionLazy>
+		</ThemeProvider>
+	);
+}
+
+export default App;
diff --git a/apps/react-admin/src/_mock/assets.js b/apps/react-admin/src/_mock/assets.js
new file mode 100644
index 000000000..2c248bfd5
--- /dev/null
+++ b/apps/react-admin/src/_mock/assets.js
@@ -0,0 +1,610 @@
+import useUserStore from "@/store/userStore";
+import { faker } from "@faker-js/faker";
+
+import { BasicStatus, PermissionType } from "#/enum";
+/**
+ * Organization data mock
+ */
+export const ORG_LIST = [
+	{
+		id: "1",
+		name: "East China Branch",
+		status: "enable",
+		desc: faker.lorem.words(),
+		order: 1,
+		children: [
+			{
+				id: "1-1",
+				name: "R&D Department",
+				status: "disable",
+				desc: "",
+				order: 1,
+			},
+			{
+				id: "1-2",
+				name: "Marketing Department",
+				status: "enable",
+				desc: "",
+				order: 2,
+			},
+			{
+				id: "1-3",
+				name: "Finance Department",
+				status: "enable",
+				desc: "",
+				order: 3,
+			},
+		],
+	},
+	{
+		id: "2",
+		name: "South China Branch",
+		status: "enable",
+		desc: faker.lorem.words(),
+		order: 2,
+		children: [
+			{
+				id: "2-1",
+				name: "R&D Department",
+				status: "disable",
+				desc: "",
+				order: 1,
+			},
+			{
+				id: "2-2",
+				name: "Marketing Department",
+				status: "enable",
+				desc: "",
+				order: 2,
+			},
+			{
+				id: "2-3",
+				name: "Finance Department",
+				status: "enable",
+				desc: "",
+				order: 3,
+			},
+		],
+	},
+];
+
+/**
+ * User permission mock
+ */
+const DASHBOARD_PERMISSION = {
+	id: "9100714781927703",
+	parentId: "",
+	label: "sys.menu.dashboard",
+	name: "Dashboard",
+	icon: "ic-analysis",
+	type: PermissionType.CATALOGUE,
+	route: "dashboard",
+	order: 1,
+	children: [
+		{
+			id: "8426999229400979",
+			parentId: "9100714781927703",
+			label: "sys.menu.workbench",
+			name: "Workbench",
+			type: PermissionType.MENU,
+			route: "workbench",
+			component: "/dashboard/workbench/index.tsx",
+		},
+		{
+			id: "9710971640510357",
+			parentId: "9100714781927703",
+			label: "sys.menu.analysis",
+			name: "Analysis",
+			type: PermissionType.MENU,
+			route: "analysis",
+			component: "/dashboard/analysis/index.tsx",
+		},
+	],
+};
+const MANAGEMENT_PERMISSION = {
+	id: "0901673425580518",
+	parentId: "",
+	label: "sys.menu.management",
+	name: "Management",
+	icon: "ic-management",
+	type: PermissionType.CATALOGUE,
+	route: "management",
+	order: 2,
+	children: [
+		{
+			id: "2781684678535711",
+			parentId: "0901673425580518",
+			label: "sys.menu.user.index",
+			name: "User",
+			type: PermissionType.CATALOGUE,
+			route: "user",
+			children: [
+				{
+					id: "4754063958766648",
+					parentId: "2781684678535711",
+					label: "sys.menu.user.profile",
+					name: "Profile",
+					type: PermissionType.MENU,
+					route: "profile",
+					component: "/management/user/profile/index.tsx",
+				},
+				{
+					id: "2516598794787938",
+					parentId: "2781684678535711",
+					label: "sys.menu.user.account",
+					name: "Account",
+					type: PermissionType.MENU,
+					route: "account",
+					component: "/management/user/account/index.tsx",
+				},
+			],
+		},
+		{
+			id: "0249937641030250",
+			parentId: "0901673425580518",
+			label: "sys.menu.system.index",
+			name: "System",
+			type: PermissionType.CATALOGUE,
+			route: "system",
+			children: [
+				{
+					id: "1985890042972842",
+					parentId: "0249937641030250",
+					label: "sys.menu.system.organization",
+					name: "Organization",
+					type: PermissionType.MENU,
+					route: "organization",
+					component: "/management/system/organization/index.tsx",
+				},
+				{
+					id: "4359580910369984",
+					parentId: "0249937641030250",
+					label: "sys.menu.system.permission",
+					name: "Permission",
+					type: PermissionType.MENU,
+					route: "permission",
+					component: "/management/system/permission/index.tsx",
+				},
+				{
+					id: "1689241785490759",
+					parentId: "0249937641030250",
+					label: "sys.menu.system.role",
+					name: "Role",
+					type: PermissionType.MENU,
+					route: "role",
+					component: "/management/system/role/index.tsx",
+				},
+				{
+					id: "0157880245365433",
+					parentId: "0249937641030250",
+					label: "sys.menu.system.user",
+					name: "User",
+					type: PermissionType.MENU,
+					route: "user",
+					component: "/management/system/user/index.tsx",
+				},
+				{
+					id: "0157880245365434",
+					parentId: "0249937641030250",
+					label: "sys.menu.system.user_detail",
+					name: "User Detail",
+					type: PermissionType.MENU,
+					route: "user/:id",
+					component: "/management/system/user/detail.tsx",
+					hide: true,
+				},
+			],
+		},
+	],
+};
+const COMPONENTS_PERMISSION = {
+	id: "2271615060673773",
+	parentId: "",
+	label: "sys.menu.components",
+	name: "Components",
+	icon: "solar:widget-5-bold-duotone",
+	type: PermissionType.CATALOGUE,
+	route: "components",
+	order: 3,
+	children: [
+		{
+			id: "2478488238255411",
+			parentId: "2271615060673773",
+			label: "sys.menu.icon",
+			name: "Icon",
+			type: PermissionType.MENU,
+			route: "icon",
+			component: "/components/icon/index.tsx",
+		},
+		{
+			id: "6755238352318767",
+			parentId: "2271615060673773",
+			label: "sys.menu.animate",
+			name: "Animate",
+			type: PermissionType.MENU,
+			route: "animate",
+			component: "/components/animate/index.tsx",
+		},
+		{
+			id: "9992476513546805",
+			parentId: "2271615060673773",
+			label: "sys.menu.scroll",
+			name: "Scroll",
+			type: PermissionType.MENU,
+			route: "scroll",
+			component: "/components/scroll/index.tsx",
+		},
+		{
+			id: "1755562695856395",
+			parentId: "2271615060673773",
+			label: "sys.menu.markdown",
+			name: "Markdown",
+			type: PermissionType.MENU,
+			route: "markdown",
+			component: "/components/markdown/index.tsx",
+		},
+		{
+			id: "2122547769468069",
+			parentId: "2271615060673773",
+			label: "sys.menu.editor",
+			name: "Editor",
+			type: PermissionType.MENU,
+			route: "editor",
+			component: "/components/editor/index.tsx",
+		},
+		{
+			id: "2501920741714350",
+			parentId: "2271615060673773",
+			label: "sys.menu.i18n",
+			name: "Multi Language",
+			type: PermissionType.MENU,
+			route: "i18n",
+			component: "/components/multi-language/index.tsx",
+		},
+		{
+			id: "2013577074467956",
+			parentId: "2271615060673773",
+			label: "sys.menu.upload",
+			name: "upload",
+			type: PermissionType.MENU,
+			route: "Upload",
+			component: "/components/upload/index.tsx",
+		},
+		{
+			id: "7749726274771764",
+			parentId: "2271615060673773",
+			label: "sys.menu.chart",
+			name: "Chart",
+			type: PermissionType.MENU,
+			route: "chart",
+			component: "/components/chart/index.tsx",
+		},
+		{
+			id: "2013577074467957",
+			parentId: "2271615060673773",
+			label: "sys.menu.toast",
+			name: "Toast",
+			type: PermissionType.MENU,
+			route: "toast",
+			component: "/components/toast/index.tsx",
+		},
+	],
+};
+const FUNCTIONS_PERMISSION = {
+	id: "8132044808088488",
+	parentId: "",
+	label: "sys.menu.functions",
+	name: "functions",
+	icon: "solar:plain-2-bold-duotone",
+	type: PermissionType.CATALOGUE,
+	route: "functions",
+	order: 4,
+	children: [
+		{
+			id: "3667930780705750",
+			parentId: "8132044808088488",
+			label: "sys.menu.clipboard",
+			name: "Clipboard",
+			type: PermissionType.MENU,
+			route: "clipboard",
+			component: "/functions/clipboard/index.tsx",
+		},
+		{
+			id: "3667930780705751",
+			parentId: "8132044808088488",
+			label: "sys.menu.token_expired",
+			name: "Token Expired",
+			type: PermissionType.MENU,
+			route: "token-expired",
+			component: "/functions/token-expired/index.tsx",
+		},
+	],
+};
+const MENU_LEVEL_PERMISSION = {
+	id: "0194818428516575",
+	parentId: "",
+	label: "sys.menu.menulevel.index",
+	name: "Menu Level",
+	icon: "ic-menulevel",
+	type: PermissionType.CATALOGUE,
+	route: "menu-level",
+	order: 5,
+	children: [
+		{
+			id: "0144431332471389",
+			parentId: "0194818428516575",
+			label: "sys.menu.menulevel.1a",
+			name: "Menu Level 1a",
+			type: PermissionType.MENU,
+			route: "menu-level-1a",
+			component: "/menu-level/menu-level-1a/index.tsx",
+		},
+		{
+			id: "7572529636800586",
+			parentId: "0194818428516575",
+			label: "sys.menu.menulevel.1b.index",
+			name: "Menu Level 1b",
+			type: PermissionType.CATALOGUE,
+			route: "menu-level-1b",
+			children: [
+				{
+					id: "3653745576583237",
+					parentId: "7572529636800586",
+					label: "sys.menu.menulevel.1b.2a",
+					name: "Menu Level 2a",
+					type: PermissionType.MENU,
+					route: "menu-level-2a",
+					component: "/menu-level/menu-level-1b/menu-level-2a/index.tsx",
+				},
+				{
+					id: "4873136353891364",
+					parentId: "7572529636800586",
+					label: "sys.menu.menulevel.1b.2b.index",
+					name: "Menu Level 2b",
+					type: PermissionType.CATALOGUE,
+					route: "menu-level-2b",
+					children: [
+						{
+							id: "4233029726998055",
+							parentId: "4873136353891364",
+							label: "sys.menu.menulevel.1b.2b.3a",
+							name: "Menu Level 3a",
+							type: PermissionType.MENU,
+							route: "menu-level-3a",
+							component: "/menu-level/menu-level-1b/menu-level-2b/menu-level-3a/index.tsx",
+						},
+						{
+							id: "3298034742548454",
+							parentId: "4873136353891364",
+							label: "sys.menu.menulevel.1b.2b.3b",
+							name: "Menu Level 3b",
+							type: PermissionType.MENU,
+							route: "menu-level-3b",
+							component: "/menu-level/menu-level-1b/menu-level-2b/menu-level-3b/index.tsx",
+						},
+					],
+				},
+			],
+		},
+	],
+};
+const ERRORS_PERMISSION = {
+	id: "9406067785553476",
+	parentId: "",
+	label: "sys.menu.error.index",
+	name: "Error",
+	icon: "bxs:error-alt",
+	type: PermissionType.CATALOGUE,
+	route: "error",
+	order: 6,
+	children: [
+		{
+			id: "8557056851997154",
+			parentId: "9406067785553476",
+			label: "sys.menu.error.403",
+			name: "403",
+			type: PermissionType.MENU,
+			route: "403",
+			component: "/sys/error/Page403.tsx",
+		},
+		{
+			id: "5095669208159005",
+			parentId: "9406067785553476",
+			label: "sys.menu.error.404",
+			name: "404",
+			type: PermissionType.MENU,
+			route: "404",
+			component: "/sys/error/Page404.tsx",
+		},
+		{
+			id: "0225992135973772",
+			parentId: "9406067785553476",
+			label: "sys.menu.error.500",
+			name: "500",
+			type: PermissionType.MENU,
+			route: "500",
+			component: "/sys/error/Page500.tsx",
+		},
+	],
+};
+const OTHERS_PERMISSION = [
+	{
+		id: "3981225257359246",
+		parentId: "",
+		label: "sys.menu.calendar",
+		name: "Calendar",
+		icon: "solar:calendar-bold-duotone",
+		type: PermissionType.MENU,
+		route: "calendar",
+		component: "/sys/others/calendar/index.tsx",
+	},
+	{
+		id: "3513985683886393",
+		parentId: "",
+		label: "sys.menu.kanban",
+		name: "kanban",
+		icon: "solar:clipboard-bold-duotone",
+		type: PermissionType.MENU,
+		route: "kanban",
+		component: "/sys/others/kanban/index.tsx",
+	},
+	{
+		id: "5455837930804461",
+		parentId: "",
+		label: "sys.menu.disabled",
+		name: "Disabled",
+		icon: "ic_disabled",
+		type: PermissionType.MENU,
+		route: "disabled",
+		status: BasicStatus.DISABLE,
+		component: "/sys/others/calendar/index.tsx",
+	},
+	{
+		id: "7728048658221587",
+		parentId: "",
+		label: "sys.menu.label",
+		name: "Label",
+		icon: "ic_label",
+		type: PermissionType.MENU,
+		route: "label",
+		newFeature: true,
+		component: "/sys/others/blank.tsx",
+	},
+	{
+		id: "5733704222120995",
+		parentId: "",
+		label: "sys.menu.frame",
+		name: "Frame",
+		icon: "ic_external",
+		type: PermissionType.CATALOGUE,
+		route: "frame",
+		children: [
+			{
+				id: "9884486809510480",
+				parentId: "5733704222120995",
+				label: "sys.menu.external_link",
+				name: "External Link",
+				type: PermissionType.MENU,
+				route: "external_link",
+				hideTab: true,
+				component: "/sys/others/iframe/external-link.tsx",
+				frameSrc: "https://ant.design/",
+			},
+			{
+				id: "9299640886731819",
+				parentId: "5733704222120995",
+				label: "sys.menu.iframe",
+				name: "Iframe",
+				type: PermissionType.MENU,
+				route: "frame",
+				component: "/sys/others/iframe/index.tsx",
+				frameSrc: "https://ant.design/",
+			},
+		],
+	},
+	{
+		id: "0941594969900756",
+		parentId: "",
+		label: "sys.menu.blank",
+		name: "Disabled",
+		icon: "ic_blank",
+		type: PermissionType.MENU,
+		route: "blank",
+		component: "/sys/others/blank.tsx",
+	},
+];
+
+export const PERMISSION_LIST = [
+	DASHBOARD_PERMISSION,
+	MANAGEMENT_PERMISSION,
+	COMPONENTS_PERMISSION,
+	FUNCTIONS_PERMISSION,
+	MENU_LEVEL_PERMISSION,
+	ERRORS_PERMISSION,
+	...OTHERS_PERMISSION,
+];
+
+/**
+ * User role mock
+ */
+const ADMIN_ROLE = {
+	id: "4281707933534332",
+	name: "Admin",
+	label: "admin",
+	status: BasicStatus.ENABLE,
+	order: 1,
+	desc: "Super Admin",
+	permission: PERMISSION_LIST,
+};
+const TEST_ROLE = {
+	id: "9931665660771476",
+	name: "Test",
+	label: "test",
+	status: BasicStatus.ENABLE,
+	order: 2,
+	desc: "test",
+	permission: [DASHBOARD_PERMISSION, COMPONENTS_PERMISSION, FUNCTIONS_PERMISSION],
+};
+export const ROLE_LIST = [ADMIN_ROLE, TEST_ROLE];
+
+/**
+ * User data mock
+ */
+export const DEFAULT_USER = {
+	id: "b34719e1-ce46-457e-9575-99505ecee828",
+	username: "admin",
+	email: faker.internet.email(),
+	avatar: faker.image.avatarGitHub(),
+	createdAt: faker.date.anytime(),
+	updatedAt: faker.date.recent(),
+	password: "1q2w3E*",
+	role: ADMIN_ROLE,
+	permissions: ADMIN_ROLE.permission,
+	desc: "",
+	homePath: "/",
+	token: "/",
+	realName: "",
+	userId: "",
+};
+export const TEST_USER = {
+	id: "efaa20ea-4dc5-47ee-a200-8a899be29494",
+	username: "test",
+	password: "1q2w3E*",
+	email: faker.internet.email(),
+	avatar: faker.image.avatarGitHub(),
+	createdAt: faker.date.anytime(),
+	updatedAt: faker.date.recent(),
+	role: TEST_ROLE,
+	permissions: TEST_ROLE.permission,
+	desc: "",
+	homePath: "/",
+	token: "/",
+	realName: "",
+	userId: "",
+};
+export const USER_LIST = [DEFAULT_USER, TEST_USER];
+
+// * Hot update, updating user permissions, only effective in the development environment
+if (import.meta.hot) {
+	import.meta.hot.accept((newModule) => {
+		if (!newModule) return;
+
+		const { DEFAULT_USER, TEST_USER, PERMISSION_LIST } = newModule;
+
+		const {
+			userInfo,
+			actions: { setUserInfo },
+		} = useUserStore.getState();
+
+		if (!userInfo?.username) return;
+
+		const newUserInfo = userInfo.username === DEFAULT_USER.username ? DEFAULT_USER : TEST_USER;
+
+		setUserInfo(newUserInfo);
+
+		console.log("[HMR] User permissions updated:", {
+			username: newUserInfo.username,
+			permissions: newUserInfo.permissions,
+		});
+	});
+}
diff --git a/apps/react-admin/src/_mock/handlers/_demo.js b/apps/react-admin/src/_mock/handlers/_demo.js
new file mode 100644
index 000000000..b73a9c976
--- /dev/null
+++ b/apps/react-admin/src/_mock/handlers/_demo.js
@@ -0,0 +1,9 @@
+import { http, HttpResponse } from "msw";
+
+import { DemoApi } from "@/api/services/demoService";
+
+const mockTokenExpired = http.post(`/api${DemoApi.TOKEN_EXPIRED}`, () => {
+	return new HttpResponse(null, { status: 401 });
+});
+
+export default [mockTokenExpired];
diff --git a/apps/react-admin/src/_mock/handlers/_org.js b/apps/react-admin/src/_mock/handlers/_org.js
new file mode 100644
index 000000000..12892dc40
--- /dev/null
+++ b/apps/react-admin/src/_mock/handlers/_org.js
@@ -0,0 +1,14 @@
+import { http, HttpResponse } from "msw";
+
+import { ORG_LIST } from "@/_mock/assets";
+import { OrgApi } from "@/api/services/orgService";
+
+const orgList = http.get(`/api${OrgApi.Org}`, () => {
+	return HttpResponse.json({
+		status: 0,
+		message: "",
+		data: ORG_LIST,
+	});
+});
+
+export default [orgList];
diff --git a/apps/react-admin/src/_mock/handlers/_user.js b/apps/react-admin/src/_mock/handlers/_user.js
new file mode 100644
index 000000000..8c764f9c7
--- /dev/null
+++ b/apps/react-admin/src/_mock/handlers/_user.js
@@ -0,0 +1,46 @@
+import { faker } from "@faker-js/faker";
+import { http, HttpResponse, delay } from "msw";
+
+import { UserApi } from "@/api/services/userService";
+
+import { USER_LIST } from "../assets";
+
+const signIn = http.post(`/api${UserApi.SignIn}`, async ({ request }) => {
+	const { username, password } = await request.json();
+
+	const user = USER_LIST.find((item) => item.username === username);
+
+	if (!user || user.password !== password) {
+		return HttpResponse.json({
+			status: 10001,
+			message: "Incorrect username or password.",
+		});
+	}
+
+	return HttpResponse.json({
+		status: 0,
+		message: "",
+		data: {
+			user,
+			accessToken: faker.string.uuid(),
+			refreshToken: faker.string.uuid(),
+		},
+	});
+});
+
+const userList = http.get("/api/user", async () => {
+	await delay(1000);
+	return HttpResponse.json(
+		Array.from({ length: 10 }).map(() => ({
+			fullname: faker.person.fullName(),
+			email: faker.internet.email(),
+			avatar: faker.image.avatarGitHub(),
+			address: faker.location.streetAddress(),
+		})),
+		{
+			status: 200,
+		},
+	);
+});
+
+export default [signIn, userList];
diff --git a/apps/react-admin/src/_mock/index.js b/apps/react-admin/src/_mock/index.js
new file mode 100644
index 000000000..c0961ce09
--- /dev/null
+++ b/apps/react-admin/src/_mock/index.js
@@ -0,0 +1,10 @@
+import { setupWorker } from "msw/browser";
+
+import demoMockApi from "./handlers/_demo";
+import orgMockApi from "./handlers/_org";
+import userMockApi from "./handlers/_user";
+
+const handlers = [...userMockApi, ...orgMockApi, ...demoMockApi];
+const worker = setupWorker(...handlers);
+
+export default worker;
diff --git a/apps/react-admin/src/_mock/utils.js b/apps/react-admin/src/_mock/utils.js
new file mode 100644
index 000000000..7b6b4d888
--- /dev/null
+++ b/apps/react-admin/src/_mock/utils.js
@@ -0,0 +1,9 @@
+import { faker } from "@faker-js/faker";
+
+export const fakeAvatars = (count) => {
+	const result = [];
+	for (let index = 0; index < count; index += 1) {
+		result.push(faker.image.avatarGitHub());
+	}
+	return result;
+};
diff --git a/apps/react-admin/src/api/abp-core/abp.ts b/apps/react-admin/src/api/abp-core/abp.ts
new file mode 100644
index 000000000..471ccc11d
--- /dev/null
+++ b/apps/react-admin/src/api/abp-core/abp.ts
@@ -0,0 +1,26 @@
+import type { ApplicationConfigurationDto, ApplicationLocalizationDto } from "#/abp-core";
+import requestClient from "../request";
+
+/**
+ * 获取应用程序配置信息
+ */
+export function getConfigApi(options?: {
+	includeLocalizationResources?: boolean;
+}): Promise<ApplicationConfigurationDto> {
+	return requestClient.get<ApplicationConfigurationDto>("/api/abp/application-configuration", {
+		params: options,
+	});
+}
+
+/**
+ * 获取应用程序语言
+ * @returns 本地化配置
+ */
+export function getLocalizationApi(options: {
+	cultureName: string;
+	onlyDynamics?: boolean;
+}): Promise<ApplicationLocalizationDto> {
+	return requestClient.get<ApplicationLocalizationDto>("/api/abp/application-localization", {
+		params: options,
+	});
+}
diff --git a/apps/react-admin/src/api/abp-core/index.ts b/apps/react-admin/src/api/abp-core/index.ts
new file mode 100644
index 000000000..581df1d3a
--- /dev/null
+++ b/apps/react-admin/src/api/abp-core/index.ts
@@ -0,0 +1,2 @@
+export * from "./abp";
+// export * from './menu';
diff --git a/apps/react-admin/src/api/abp-core/menu.ts b/apps/react-admin/src/api/abp-core/menu.ts
new file mode 100644
index 000000000..b2fb90201
--- /dev/null
+++ b/apps/react-admin/src/api/abp-core/menu.ts
@@ -0,0 +1,9 @@
+// import type { RouteRecordStringComponent } from '@vben/types';
+// import requestClient from '../request';
+
+/**
+ * 获取用户所有菜单
+ */
+// export async function getAllMenusApi() {
+//   return requestClient.get<RouteRecordStringComponent[]>('/menu/all');
+// }
diff --git a/apps/react-admin/src/api/account/account.ts b/apps/react-admin/src/api/account/account.ts
new file mode 100644
index 000000000..8710dd7f1
--- /dev/null
+++ b/apps/react-admin/src/api/account/account.ts
@@ -0,0 +1,28 @@
+import type { ListResultDto } from "#/abp-core";
+import type {
+	GetTwoFactorProvidersInput,
+	TwoFactorProvider,
+	SendEmailSigninCodeDto,
+	SendPhoneSigninCodeDto,
+} from "#/account/account";
+import requestClient from "@/api/request";
+
+/**
+ * Get available two-factor authentication providers
+ */
+export const getTwoFactorProvidersApi = (input: GetTwoFactorProvidersInput) =>
+	requestClient.get<ListResultDto<TwoFactorProvider>>("/api/account/two-factor-providers", {
+		params: input,
+	});
+
+/**
+ * Send sign-in verification email
+ */
+export const sendEmailSigninCodeApi = (input: SendEmailSigninCodeDto) =>
+	requestClient.post("/api/account/email/send-signin-code", input);
+
+/**
+ * Send sign-in verification SMS
+ */
+export const sendPhoneSigninCodeApi = (input: SendPhoneSigninCodeDto) =>
+	requestClient.post("/api/account/phone/send-signin-code", input);
diff --git a/apps/react-admin/src/api/account/index.ts b/apps/react-admin/src/api/account/index.ts
new file mode 100644
index 000000000..64a674984
--- /dev/null
+++ b/apps/react-admin/src/api/account/index.ts
@@ -0,0 +1,4 @@
+export * from "./token";
+export * from "./user";
+export * from "./my-session";
+export * from "./account";
diff --git a/apps/react-admin/src/api/account/my-session.ts b/apps/react-admin/src/api/account/my-session.ts
new file mode 100644
index 000000000..03fddc84e
--- /dev/null
+++ b/apps/react-admin/src/api/account/my-session.ts
@@ -0,0 +1,23 @@
+import type { IdentitySessionDto } from "#/management/identity/sessions";
+import type { PagedResultDto } from "#/abp-core";
+import requestClient from "@/api/request";
+
+export interface GetMySessionsInput {
+	filter?: string;
+	maxResultCount?: number;
+	skipCount?: number;
+}
+
+/**
+ * Get current user's sessions
+ */
+export const getSessionsApi = (input?: GetMySessionsInput) =>
+	requestClient.get<PagedResultDto<IdentitySessionDto>>("/api/account/my-profile/sessions", {
+		params: input,
+	});
+
+/**
+ * Revoke a session
+ */
+export const revokeSessionApi = (sessionId: string) =>
+	requestClient.delete(`/api/account/my-profile/sessions/${sessionId}/revoke`);
diff --git a/apps/react-admin/src/api/account/profile.ts b/apps/react-admin/src/api/account/profile.ts
new file mode 100644
index 000000000..221bb3761
--- /dev/null
+++ b/apps/react-admin/src/api/account/profile.ts
@@ -0,0 +1,68 @@
+import type {
+	ProfileDto,
+	UpdateProfileDto,
+	ChangePasswordInput,
+	TwoFactorEnabledDto,
+	AuthenticatorDto,
+	VerifyAuthenticatorCodeInput,
+	AuthenticatorRecoveryCodeDto,
+	SendEmailConfirmCodeDto,
+	ConfirmEmailInput,
+} from "#/account/profile";
+import requestClient from "@/api/request";
+
+/**
+ * Get profile information
+ */
+export const getApi = () => requestClient.get<ProfileDto>("/api/account/my-profile");
+
+/**
+ * Update profile information
+ */
+export const updateApi = (input: UpdateProfileDto) => requestClient.put<ProfileDto>("/api/account/my-profile", input);
+
+/**
+ * Change password
+ */
+export const changePasswordApi = (input: ChangePasswordInput) =>
+	requestClient.post("/api/account/my-profile/change-password", input);
+
+/**
+ * Get two-factor authentication status
+ */
+export const getTwoFactorEnabledApi = () =>
+	requestClient.get<TwoFactorEnabledDto>("/api/account/my-profile/two-factor");
+
+/**
+ * Set two-factor authentication status
+ */
+export const changeTwoFactorEnabledApi = (input: TwoFactorEnabledDto) =>
+	requestClient.put("/api/account/my-profile/change-two-factor", input);
+
+/**
+ * Get authenticator configuration
+ */
+export const getAuthenticatorApi = () => requestClient.get<AuthenticatorDto>("/api/account/my-profile/authenticator");
+
+/**
+ * Verify authenticator code
+ */
+export const verifyAuthenticatorCodeApi = (input: VerifyAuthenticatorCodeInput) =>
+	requestClient.post<AuthenticatorRecoveryCodeDto>("/api/account/my-profile/verify-authenticator-code", input);
+
+/**
+ * Reset authenticator
+ */
+export const resetAuthenticatorApi = () => requestClient.post("/api/account/my-profile/reset-authenticator");
+
+/**
+ * Send email confirmation link
+ */
+export const sendEmailConfirmLinkApi = (input: SendEmailConfirmCodeDto) =>
+	requestClient.post("/api/account/my-profile/send-email-confirm-link", input);
+
+/**
+ * Confirm email
+ */
+export const confirmEmailApi = (input: ConfirmEmailInput) =>
+	requestClient.put("/api/account/my-profile/confirm-email", input);
diff --git a/apps/react-admin/src/api/account/token.ts b/apps/react-admin/src/api/account/token.ts
new file mode 100644
index 000000000..7cc52222f
--- /dev/null
+++ b/apps/react-admin/src/api/account/token.ts
@@ -0,0 +1,63 @@
+import type { OAuthTokenResult, PasswordTokenRequestModel, RefreshTokenRequestModel, TokenResult } from "#/account";
+import requestClient from "../request";
+
+/**
+ * 用户登录
+ * @param request 参数
+ * @returns 用户token
+ */
+export async function loginApi(request: PasswordTokenRequestModel): Promise<TokenResult> {
+	const clientId = import.meta.env.VITE_GLOB_CLIENT_ID;
+	const clientSecret = import.meta.env.VITE_GLOB_CLIENT_SECRET;
+	const scope = import.meta.env.VITE_GLOB_SCOPE;
+	const result = await requestClient.post<OAuthTokenResult>(
+		"/connect/token",
+		{
+			client_id: clientId,
+			client_secret: clientSecret,
+			grant_type: "password",
+			password: request.password,
+			scope: scope,
+			username: request.username,
+		},
+		{
+			headers: {
+				"Content-Type": "application/x-www-form-urlencoded",
+			},
+			timeout: 30_000,
+		},
+	);
+	return {
+		accessToken: result.access_token,
+		expiresIn: result.expires_in,
+		refreshToken: result.refresh_token,
+		tokenType: result.token_type,
+	};
+}
+
+export async function refreshToken(request: RefreshTokenRequestModel): Promise<TokenResult> {
+	const clientId = import.meta.env.VITE_GLOB_CLIENT_ID;
+	const clientSecret = import.meta.env.VITE_GLOB_CLIENT_SECRET;
+	const scope = import.meta.env.VITE_GLOB_SCOPE;
+	const result = await requestClient.post<OAuthTokenResult>(
+		"/connect/token",
+		{
+			client_id: clientId,
+			client_secret: clientSecret,
+			grant_type: "refresh_token",
+			refresh_token: request.refreshToken,
+			scope: scope,
+		},
+		{
+			headers: {
+				"Content-Type": "application/x-www-form-urlencoded",
+			},
+		},
+	);
+	return {
+		accessToken: result.access_token,
+		expiresIn: result.expires_in,
+		refreshToken: result.refresh_token,
+		tokenType: result.token_type,
+	};
+}
diff --git a/apps/react-admin/src/api/account/user.ts b/apps/react-admin/src/api/account/user.ts
new file mode 100644
index 000000000..d72c325e2
--- /dev/null
+++ b/apps/react-admin/src/api/account/user.ts
@@ -0,0 +1,17 @@
+import type { OAuthUserInfo, UserInfo } from "#/account";
+import requestClient from "../request";
+
+/**
+ * 获取用户信息
+ */
+export async function getUserInfoApi(): Promise<UserInfo> {
+	const result = await requestClient.get<OAuthUserInfo>("/connect/userinfo");
+	return {
+		...result,
+		emailVerified: result.email_verified,
+		givenName: result.given_name,
+		phoneNumberVerified: result.phone_number_verified,
+		preferredUsername: result.preferred_username,
+		uniqueName: result.unique_name,
+	};
+}
diff --git a/apps/react-admin/src/api/apiClient.ts b/apps/react-admin/src/api/apiClient.ts
new file mode 100644
index 000000000..2d78e9d46
--- /dev/null
+++ b/apps/react-admin/src/api/apiClient.ts
@@ -0,0 +1,98 @@
+import axios, { type AxiosRequestConfig, type AxiosError, type AxiosResponse } from "axios";
+
+import { t } from "@/locales/i18n";
+import userStore, { useUserToken } from "@/store/userStore";
+
+import { toast } from "sonner";
+//TODO rm
+// 创建 axios 实例
+const axiosInstance = axios.create({
+	baseURL: import.meta.env.VITE_APP_BASE_API,
+	timeout: 50000,
+	headers: { "Content-Type": "application/json;charset=utf-8" },
+});
+
+// 请求拦截
+axiosInstance.interceptors.request.use(
+	(config) => {
+		// 在请求被发送之前做些什么
+		const { accessToken } = useUserToken();
+		config.headers.Authorization = `${accessToken}`;
+		return config;
+	},
+	(error) => {
+		// 请求错误时做些什么
+		return Promise.reject(error);
+	},
+);
+
+// 响应拦截
+axiosInstance.interceptors.response.use(
+	(res: AxiosResponse<any>) => {
+		const { data, status, headers } = res;
+
+		if (headers._abpwrapresult === "true") {
+			const { code, result, message, details } = data;
+			const hasSuccess = data && Reflect.has(data, "code") && code === "0";
+			if (hasSuccess) {
+				return result;
+			}
+			const content = details || message;
+
+			throw new Error(content);
+		}
+
+		if (status >= 200 && status < 400) {
+			return data;
+		}
+
+		// 业务请求错误
+		throw new Error(t("sys.api.apiRequestFailed"));
+	},
+	(error: AxiosError<any>) => {
+		const { response, message } = error || {};
+
+		const errMsg = response?.data?.message || message || t("sys.api.errorMessage");
+		toast.error(errMsg, {
+			position: "top-center",
+		});
+
+		const status = response?.status;
+		if (status === 401) {
+			userStore.getState().actions.clearUserInfoAndToken();
+		}
+		return Promise.reject(error);
+	},
+);
+
+class APIClient {
+	get<T = any>(config: AxiosRequestConfig): Promise<T> {
+		return this.request({ ...config, method: "GET" });
+	}
+
+	post<T = any>(config: AxiosRequestConfig): Promise<T> {
+		return this.request({ ...config, method: "POST" });
+	}
+
+	put<T = any>(config: AxiosRequestConfig): Promise<T> {
+		return this.request({ ...config, method: "PUT" });
+	}
+
+	delete<T = any>(config: AxiosRequestConfig): Promise<T> {
+		return this.request({ ...config, method: "DELETE" });
+	}
+
+	request<T = any>(config: AxiosRequestConfig): Promise<T> {
+		return new Promise((resolve, reject) => {
+			axiosInstance
+				.request<any, AxiosResponse<any>>(config)
+				.then((res: AxiosResponse<any>) => {
+					resolve(res as unknown as Promise<T>);
+				})
+				.catch((e: Error | AxiosError) => {
+					reject(e);
+				});
+		});
+	}
+}
+export default new APIClient();
diff --git a/apps/react-admin/src/api/gen/index.ts b/apps/react-admin/src/api/gen/index.ts
new file mode 100644
index 000000000..eae885d0e
--- /dev/null
+++ b/apps/react-admin/src/api/gen/index.ts
@@ -0,0 +1,3 @@
+// This file is auto-generated by @hey-api/openapi-ts
+export * from "./sdk.gen";
+export * from "./types.gen";
diff --git a/apps/react-admin/src/api/gen/sdk.gen.ts b/apps/react-admin/src/api/gen/sdk.gen.ts
new file mode 100644
index 000000000..17c8a751c
--- /dev/null
+++ b/apps/react-admin/src/api/gen/sdk.gen.ts
@@ -0,0 +1,6212 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { createClient, createConfig, type OptionsLegacyParser, formDataBodySerializer } from "@hey-api/client-axios";
+import type {
+	AbpApiDefinitionGetData,
+	AbpApiDefinitionGetError,
+	AbpApiDefinitionGetResponse,
+	AbpApplicationConfigurationGetData,
+	AbpApplicationConfigurationGetError,
+	AbpApplicationConfigurationGetResponse,
+	AbpApplicationLocalizationGetData,
+	AbpApplicationLocalizationGetError,
+	AbpApplicationLocalizationGetResponse,
+	AbpTenantFindTenantByNameData,
+	AbpTenantFindTenantByNameError,
+	AbpTenantFindTenantByNameResponse,
+	AbpTenantFindTenantByIdData,
+	AbpTenantFindTenantByIdError,
+	AbpTenantFindTenantByIdResponse,
+	AccountRegisterData,
+	AccountRegisterError,
+	AccountRegisterResponse,
+	AccountResetPasswordData,
+	AccountResetPasswordError,
+	AccountResetPasswordResponse,
+	AccountSendPhoneSigninCodeData,
+	AccountSendPhoneSigninCodeError,
+	AccountSendPhoneSigninCodeResponse,
+	AccountSendEmailSigninCodeData,
+	AccountSendEmailSigninCodeError,
+	AccountSendEmailSigninCodeResponse,
+	AccountSendPhoneRegisterCodeData,
+	AccountSendPhoneRegisterCodeError,
+	AccountSendPhoneRegisterCodeResponse,
+	AccountSendPhoneResetPasswordCodeData,
+	AccountSendPhoneResetPasswordCodeError,
+	AccountSendPhoneResetPasswordCodeResponse,
+	AccountGetTwoFactorProvidersData,
+	AccountGetTwoFactorProvidersError,
+	AccountGetTwoFactorProvidersResponse,
+	AccountRegister1Data,
+	AccountRegister1Error,
+	AccountRegister1Response,
+	AccountSendPasswordResetCodeData,
+	AccountSendPasswordResetCodeError,
+	AccountSendPasswordResetCodeResponse,
+	AccountVerifyPasswordResetTokenData,
+	AccountVerifyPasswordResetTokenError,
+	AccountVerifyPasswordResetTokenResponse,
+	AccountResetPassword1Data,
+	AccountResetPassword1Error,
+	AccountResetPassword1Response,
+	AuditLogDeleteData,
+	AuditLogDeleteError,
+	AuditLogDeleteResponse,
+	AuditLogGetData,
+	AuditLogGetError,
+	AuditLogGetResponse,
+	AuditLogGetListData,
+	AuditLogGetListError,
+	AuditLogGetListResponse,
+	BackgroundJobActionAddActionData,
+	BackgroundJobActionAddActionError,
+	BackgroundJobActionAddActionResponse,
+	BackgroundJobActionGetActionsData,
+	BackgroundJobActionGetActionsError,
+	BackgroundJobActionGetActionsResponse,
+	BackgroundJobActionDeleteActionData,
+	BackgroundJobActionDeleteActionError,
+	BackgroundJobActionDeleteActionResponse,
+	BackgroundJobActionUpdateActionData,
+	BackgroundJobActionUpdateActionError,
+	BackgroundJobActionUpdateActionResponse,
+	BackgroundJobActionGetDefinitionsData,
+	BackgroundJobActionGetDefinitionsError,
+	BackgroundJobActionGetDefinitionsResponse,
+	BackgroundJobInfoCreateData,
+	BackgroundJobInfoCreateError,
+	BackgroundJobInfoCreateResponse,
+	BackgroundJobInfoGetListData,
+	BackgroundJobInfoGetListError,
+	BackgroundJobInfoGetListResponse,
+	BackgroundJobInfoDeleteData,
+	BackgroundJobInfoDeleteError,
+	BackgroundJobInfoDeleteResponse,
+	BackgroundJobInfoGetData,
+	BackgroundJobInfoGetError,
+	BackgroundJobInfoGetResponse,
+	BackgroundJobInfoUpdateData,
+	BackgroundJobInfoUpdateError,
+	BackgroundJobInfoUpdateResponse,
+	BackgroundJobInfoPauseData,
+	BackgroundJobInfoPauseError,
+	BackgroundJobInfoPauseResponse,
+	BackgroundJobInfoResumeData,
+	BackgroundJobInfoResumeError,
+	BackgroundJobInfoResumeResponse,
+	BackgroundJobInfoTriggerData,
+	BackgroundJobInfoTriggerError,
+	BackgroundJobInfoTriggerResponse,
+	BackgroundJobInfoStopData,
+	BackgroundJobInfoStopError,
+	BackgroundJobInfoStopResponse,
+	BackgroundJobInfoStartData,
+	BackgroundJobInfoStartError,
+	BackgroundJobInfoStartResponse,
+	BackgroundJobInfoBulkStopData,
+	BackgroundJobInfoBulkStopError,
+	BackgroundJobInfoBulkStopResponse,
+	BackgroundJobInfoBulkStartData,
+	BackgroundJobInfoBulkStartError,
+	BackgroundJobInfoBulkStartResponse,
+	BackgroundJobInfoBulkTriggerData,
+	BackgroundJobInfoBulkTriggerError,
+	BackgroundJobInfoBulkTriggerResponse,
+	BackgroundJobInfoBulkResumeData,
+	BackgroundJobInfoBulkResumeError,
+	BackgroundJobInfoBulkResumeResponse,
+	BackgroundJobInfoBulkPauseData,
+	BackgroundJobInfoBulkPauseError,
+	BackgroundJobInfoBulkPauseResponse,
+	BackgroundJobInfoBulkDeleteData,
+	BackgroundJobInfoBulkDeleteError,
+	BackgroundJobInfoBulkDeleteResponse,
+	BackgroundJobInfoGetDefinitionsData,
+	BackgroundJobInfoGetDefinitionsError,
+	BackgroundJobInfoGetDefinitionsResponse,
+	BackgroundJobInfoGetAvailableFieldsData,
+	BackgroundJobInfoGetAvailableFieldsError,
+	BackgroundJobInfoGetAvailableFieldsResponse,
+	BackgroundJobInfoSearchData,
+	BackgroundJobInfoSearchError,
+	BackgroundJobInfoSearchResponse,
+	BackgroundJobLogDeleteData,
+	BackgroundJobLogDeleteError,
+	BackgroundJobLogDeleteResponse,
+	BackgroundJobLogGetData,
+	BackgroundJobLogGetError,
+	BackgroundJobLogGetResponse,
+	BackgroundJobLogGetListData,
+	BackgroundJobLogGetListError,
+	BackgroundJobLogGetListResponse,
+	BackupHandleData,
+	BackupHandleError,
+	BackupHandleResponse,
+	BulkCancelHandleData,
+	BulkCancelHandleError,
+	BulkCancelHandleResponse,
+	BulkDeleteHandleData,
+	BulkDeleteHandleError,
+	BulkDeleteHandleResponse,
+	BulkRetryHandleData,
+	BulkRetryHandleError,
+	BulkRetryHandleResponse,
+	CacheGetKeysData,
+	CacheGetKeysError,
+	CacheGetKeysResponse,
+	CacheGetValueData,
+	CacheGetValueError,
+	CacheGetValueResponse,
+	CacheSetData,
+	CacheSetError,
+	CacheSetResponse,
+	CacheRefreshData,
+	CacheRefreshError,
+	CacheRefreshResponse,
+	CacheRemoveData,
+	CacheRemoveError,
+	CacheRemoveResponse,
+	CancelHandleData,
+	CancelHandleError,
+	CancelHandleResponse,
+	ChatGetMyGroupMessageData,
+	ChatGetMyGroupMessageError,
+	ChatGetMyGroupMessageResponse,
+	ChatGetMyChatMessageData,
+	ChatGetMyChatMessageError,
+	ChatGetMyChatMessageResponse,
+	ChatGetMyLastChatMessageData,
+	ChatGetMyLastChatMessageError,
+	ChatGetMyLastChatMessageResponse,
+	ChatSendMessageData,
+	ChatSendMessageError,
+	ChatSendMessageResponse,
+	ClaimChangeAvatarData,
+	ClaimChangeAvatarError,
+	ClaimChangeAvatarResponse,
+	ClaimTypeCreateData,
+	ClaimTypeCreateError,
+	ClaimTypeCreateResponse,
+	ClaimTypeGetListData,
+	ClaimTypeGetListError,
+	ClaimTypeGetListResponse,
+	ClaimTypeDeleteData,
+	ClaimTypeDeleteError,
+	ClaimTypeDeleteResponse,
+	ClaimTypeGetData,
+	ClaimTypeGetError,
+	ClaimTypeGetResponse,
+	ClaimTypeUpdateData,
+	ClaimTypeUpdateError,
+	ClaimTypeUpdateResponse,
+	ClaimTypeGetAllListData,
+	ClaimTypeGetAllListError,
+	ClaimTypeGetAllListResponse,
+	DataCreateData,
+	DataCreateError,
+	DataCreateResponse,
+	DataGetListData,
+	DataGetListError,
+	DataGetListResponse,
+	DataCreateItemData,
+	DataCreateItemError,
+	DataCreateItemResponse,
+	DataDeleteData,
+	DataDeleteError,
+	DataDeleteResponse,
+	DataGetData,
+	DataGetError,
+	DataGetResponse,
+	DataUpdateData,
+	DataUpdateError,
+	DataUpdateResponse,
+	DataDeleteItemData,
+	DataDeleteItemError,
+	DataDeleteItemResponse,
+	DataUpdateItemData,
+	DataUpdateItemError,
+	DataUpdateItemResponse,
+	DataGet1Data,
+	DataGet1Error,
+	DataGet1Response,
+	DataGetAllData,
+	DataGetAllError,
+	DataGetAllResponse,
+	DataMoveData,
+	DataMoveError,
+	DataMoveResponse,
+	DeleteHandleData,
+	DeleteHandleError,
+	DeleteHandleResponse,
+	GetHandleData,
+	GetHandleError,
+	GetHandleResponse,
+	DeleteHandle1Data,
+	DeleteHandle1Error,
+	DeleteHandle1Response,
+	GetHandle1Data,
+	GetHandle1Error,
+	GetHandle1Response,
+	DeleteByDefinitionHandleData,
+	DeleteByDefinitionHandleError,
+	DeleteByDefinitionHandleResponse,
+	DeleteByDefinitionAndVersionHandleData,
+	DeleteByDefinitionAndVersionHandleError,
+	DeleteByDefinitionAndVersionHandleResponse,
+	DispatchHandleData,
+	DispatchHandleError,
+	DispatchHandleResponse,
+	DispatchHandle1Data,
+	DispatchHandle1Error,
+	DispatchHandle1Response,
+	DispatchHandle2Data,
+	DispatchHandle2Error,
+	DispatchHandle2Response,
+	DispatchEndpointHandleData,
+	DispatchEndpointHandleError,
+	DispatchEndpointHandleResponse,
+	DispatchEndpointHandle1Data,
+	DispatchEndpointHandle1Error,
+	DispatchEndpointHandle1Response,
+	DynamicClaimsRefreshData,
+	DynamicClaimsRefreshError,
+	DynamicClaimsRefreshResponse,
+	EditionCreateData,
+	EditionCreateError,
+	EditionCreateResponse,
+	EditionGetListData,
+	EditionGetListError,
+	EditionGetListResponse,
+	EditionDeleteData,
+	EditionDeleteError,
+	EditionDeleteResponse,
+	EditionGetData,
+	EditionGetError,
+	EditionGetResponse,
+	EditionUpdateData,
+	EditionUpdateError,
+	EditionUpdateResponse,
+	EntityChangesGetData,
+	EntityChangesGetError,
+	EntityChangesGetResponse,
+	EntityChangesGetListData,
+	EntityChangesGetListError,
+	EntityChangesGetListResponse,
+	EntityChangesGetWithUsernameData,
+	EntityChangesGetWithUsernameError,
+	EntityChangesGetWithUsernameResponse,
+	EntityChangesGetWithUsername1Data,
+	EntityChangesGetWithUsername1Error,
+	EntityChangesGetWithUsername1Response,
+	EntityTypeInfoGetData,
+	EntityTypeInfoGetError,
+	EntityTypeInfoGetResponse,
+	EntityTypeInfoGetListData,
+	EntityTypeInfoGetListError,
+	EntityTypeInfoGetListResponse,
+	ExecuteHandleData,
+	ExecuteHandleError,
+	ExecuteHandleResponse,
+	ExecuteHandle1Data,
+	ExecuteHandle1Error,
+	ExecuteHandle1Response,
+	ExecuteHandle2Data,
+	ExecuteHandle2Error,
+	ExecuteHandle2Response,
+	ExportHandleData,
+	ExportHandleError,
+	ExportHandleResponse,
+	FeatureDefinitionCreateData,
+	FeatureDefinitionCreateError,
+	FeatureDefinitionCreateResponse,
+	FeatureDefinitionGetListData,
+	FeatureDefinitionGetListError,
+	FeatureDefinitionGetListResponse,
+	FeatureDefinitionDeleteData,
+	FeatureDefinitionDeleteError,
+	FeatureDefinitionDeleteResponse,
+	FeatureDefinitionGetData,
+	FeatureDefinitionGetError,
+	FeatureDefinitionGetResponse,
+	FeatureDefinitionUpdateData,
+	FeatureDefinitionUpdateError,
+	FeatureDefinitionUpdateResponse,
+	FeatureGroupDefinitionCreateData,
+	FeatureGroupDefinitionCreateError,
+	FeatureGroupDefinitionCreateResponse,
+	FeatureGroupDefinitionGetListData,
+	FeatureGroupDefinitionGetListError,
+	FeatureGroupDefinitionGetListResponse,
+	FeatureGroupDefinitionDeleteData,
+	FeatureGroupDefinitionDeleteError,
+	FeatureGroupDefinitionDeleteResponse,
+	FeatureGroupDefinitionGetData,
+	FeatureGroupDefinitionGetError,
+	FeatureGroupDefinitionGetResponse,
+	FeatureGroupDefinitionUpdateData,
+	FeatureGroupDefinitionUpdateError,
+	FeatureGroupDefinitionUpdateResponse,
+	FeaturesGetData,
+	FeaturesGetError,
+	FeaturesGetResponse,
+	FeaturesUpdateData,
+	FeaturesUpdateError,
+	FeaturesUpdateResponse,
+	FeaturesDeleteData,
+	FeaturesDeleteError,
+	FeaturesDeleteResponse,
+	FeedbackCreateData,
+	FeedbackCreateError,
+	FeedbackCreateResponse,
+	FeedbackGetListData,
+	FeedbackGetListError,
+	FeedbackGetListResponse,
+	FeedbackDeleteData,
+	FeedbackDeleteError,
+	FeedbackDeleteResponse,
+	FeedbackGetData,
+	FeedbackGetError,
+	FeedbackGetResponse,
+	FeedbackAttachmentGetData,
+	FeedbackAttachmentGetError,
+	FeedbackAttachmentGetResponse,
+	FeedbackAttachmentDeleteData,
+	FeedbackAttachmentDeleteError,
+	FeedbackAttachmentDeleteResponse,
+	FeedbackAttachmentUploadData,
+	FeedbackAttachmentUploadError,
+	FeedbackAttachmentUploadResponse,
+	GetHandle2Data,
+	GetHandle2Error,
+	GetHandle2Response,
+	GetHandle3Data,
+	GetHandle3Error,
+	GetHandle3Response,
+	GetHandle4Data,
+	GetHandle4Error,
+	GetHandle4Response,
+	GetHandle5Data,
+	GetHandle5Error,
+	GetHandle5Response,
+	GetHandle6Data,
+	GetHandle6Error,
+	GetHandle6Response,
+	GetHandle7Data,
+	GetHandle7Error,
+	GetHandle7Response,
+	GetByDefinitionAndVersionHandleData,
+	GetByDefinitionAndVersionHandleError,
+	GetByDefinitionAndVersionHandleResponse,
+	GetByVersionIdHandleData,
+	GetByVersionIdHandleError,
+	GetByVersionIdHandleResponse,
+	GroupGetData,
+	GroupGetError,
+	GroupGetResponse,
+	GroupSearchData,
+	GroupSearchError,
+	GroupSearchResponse,
+	HistoryHandleData,
+	HistoryHandleError,
+	HistoryHandleResponse,
+	IdentitySessionsGetSessionsData,
+	IdentitySessionsGetSessionsError,
+	IdentitySessionsGetSessionsResponse,
+	IdentitySessionsRevokeSessionData,
+	IdentitySessionsRevokeSessionError,
+	IdentitySessionsRevokeSessionResponse,
+	ImportHandleData,
+	ImportHandleError,
+	ImportHandleResponse,
+	LanguageGetByNameData,
+	LanguageGetByNameError,
+	LanguageGetByNameResponse,
+	LanguageDeleteData,
+	LanguageDeleteError,
+	LanguageDeleteResponse,
+	LanguageUpdateData,
+	LanguageUpdateError,
+	LanguageUpdateResponse,
+	LanguageCreateData,
+	LanguageCreateError,
+	LanguageCreateResponse,
+	LanguageGetListData,
+	LanguageGetListError,
+	LanguageGetListResponse,
+	LayoutCreateData,
+	LayoutCreateError,
+	LayoutCreateResponse,
+	LayoutGetListData,
+	LayoutGetListError,
+	LayoutGetListResponse,
+	LayoutDeleteData,
+	LayoutDeleteError,
+	LayoutDeleteResponse,
+	LayoutGetData,
+	LayoutGetError,
+	LayoutGetResponse,
+	LayoutUpdateData,
+	LayoutUpdateError,
+	LayoutUpdateResponse,
+	LayoutGetAllListData,
+	LayoutGetAllListError,
+	LayoutGetAllListResponse,
+	ListHandleData,
+	ListHandleError,
+	ListHandleResponse,
+	ListHandle1Data,
+	ListHandle1Error,
+	ListHandle1Response,
+	ListHandle2Data,
+	ListHandle2Error,
+	ListHandle2Response,
+	ListHandle3Data,
+	ListHandle3Error,
+	ListHandle3Response,
+	SaveHandleData,
+	SaveHandleError,
+	SaveHandleResponse,
+	ListHandle4Data,
+	ListHandle4Error,
+	ListHandle4Response,
+	ListHandle5Data,
+	ListHandle5Error,
+	ListHandle5Response,
+	ListHandle6Data,
+	ListHandle6Error,
+	ListHandle6Response,
+	ListHandle7Data,
+	ListHandle7Error,
+	ListHandle7Response,
+	PostHandleData,
+	PostHandleError,
+	PostHandleResponse,
+	UpdateHandleData,
+	UpdateHandleError,
+	UpdateHandleResponse,
+	ListAllHandleData,
+	ListAllHandleError,
+	ListAllHandleResponse,
+	ListByDefinitionVersionIdsHandleData,
+	ListByDefinitionVersionIdsHandleError,
+	ListByDefinitionVersionIdsHandleResponse,
+	ListByProviderHandleData,
+	ListByProviderHandleError,
+	ListByProviderHandleResponse,
+	LoggingGetData,
+	LoggingGetError,
+	LoggingGetResponse,
+	LoggingGetListData,
+	LoggingGetListError,
+	LoggingGetListResponse,
+	LoginLoginData,
+	LoginLoginError,
+	LoginLoginResponse,
+	LoginLogoutData,
+	LoginLogoutError,
+	LoginLogoutResponse,
+	LoginCheckPasswordData,
+	LoginCheckPasswordError,
+	LoginCheckPasswordResponse,
+	MenuGetCurrentUserMenuListData,
+	MenuGetCurrentUserMenuListError,
+	MenuGetCurrentUserMenuListResponse,
+	MenuGetData,
+	MenuGetError,
+	MenuGetResponse,
+	MenuUpdateData,
+	MenuUpdateError,
+	MenuUpdateResponse,
+	MenuDeleteData,
+	MenuDeleteError,
+	MenuDeleteResponse,
+	MenuGetAllData,
+	MenuGetAllError,
+	MenuGetAllResponse,
+	MenuGetListData,
+	MenuGetListError,
+	MenuGetListResponse,
+	MenuCreateData,
+	MenuCreateError,
+	MenuCreateResponse,
+	MenuSetUserMenusData,
+	MenuSetUserMenusError,
+	MenuSetUserMenusResponse,
+	MenuGetUserMenuListData,
+	MenuGetUserMenuListError,
+	MenuGetUserMenuListResponse,
+	MenuSetUserStartupData,
+	MenuSetUserStartupError,
+	MenuSetUserStartupResponse,
+	MenuGetUserMenuList1Data,
+	MenuGetUserMenuList1Error,
+	MenuGetUserMenuList1Response,
+	MenuSetRoleMenusData,
+	MenuSetRoleMenusError,
+	MenuSetRoleMenusResponse,
+	MenuGetRoleMenuListData,
+	MenuGetRoleMenuListError,
+	MenuGetRoleMenuListResponse,
+	MenuSetRoleStartupData,
+	MenuSetRoleStartupError,
+	MenuSetRoleStartupResponse,
+	MenuGetRoleMenuList1Data,
+	MenuGetRoleMenuList1Error,
+	MenuGetRoleMenuList1Response,
+	MyFeedbackGetMyFeedbacksData,
+	MyFeedbackGetMyFeedbacksError,
+	MyFeedbackGetMyFeedbacksResponse,
+	MyFriendCreateData,
+	MyFriendCreateError,
+	MyFriendCreateResponse,
+	MyFriendDeleteData,
+	MyFriendDeleteError,
+	MyFriendDeleteResponse,
+	MyFriendGetListData,
+	MyFriendGetListError,
+	MyFriendGetListResponse,
+	MyFriendAddRequestData,
+	MyFriendAddRequestError,
+	MyFriendAddRequestResponse,
+	MyFriendGetData,
+	MyFriendGetError,
+	MyFriendGetResponse,
+	MyFriendGetAllListData,
+	MyFriendGetAllListError,
+	MyFriendGetAllListResponse,
+	MyNotificationMarkReadStateData,
+	MyNotificationMarkReadStateError,
+	MyNotificationMarkReadStateResponse,
+	MyNotificationDeleteData,
+	MyNotificationDeleteError,
+	MyNotificationDeleteResponse,
+	MyNotificationGetData,
+	MyNotificationGetError,
+	MyNotificationGetResponse,
+	MyNotificationGetListData,
+	MyNotificationGetListError,
+	MyNotificationGetListResponse,
+	MySubscriptionGetAllListData,
+	MySubscriptionGetAllListError,
+	MySubscriptionGetAllListResponse,
+	MySubscriptionGetListData,
+	MySubscriptionGetListError,
+	MySubscriptionGetListResponse,
+	MySubscriptionSubscribeData,
+	MySubscriptionSubscribeError,
+	MySubscriptionSubscribeResponse,
+	MySubscriptionUnSubscribeData,
+	MySubscriptionUnSubscribeError,
+	MySubscriptionUnSubscribeResponse,
+	MySubscriptionIsSubscribedData,
+	MySubscriptionIsSubscribedError,
+	MySubscriptionIsSubscribedResponse,
+	NotificationSendData,
+	NotificationSendError,
+	NotificationSendResponse,
+	NotificationSend1Data,
+	NotificationSend1Error,
+	NotificationSend1Response,
+	NotificationGetAssignableNotifiersData,
+	NotificationGetAssignableNotifiersError,
+	NotificationGetAssignableNotifiersResponse,
+	NotificationGetAssignableTemplatesData,
+	NotificationGetAssignableTemplatesError,
+	NotificationGetAssignableTemplatesResponse,
+	NotificationDefinitionCreateData,
+	NotificationDefinitionCreateError,
+	NotificationDefinitionCreateResponse,
+	NotificationDefinitionGetListData,
+	NotificationDefinitionGetListError,
+	NotificationDefinitionGetListResponse,
+	NotificationDefinitionDeleteData,
+	NotificationDefinitionDeleteError,
+	NotificationDefinitionDeleteResponse,
+	NotificationDefinitionGetData,
+	NotificationDefinitionGetError,
+	NotificationDefinitionGetResponse,
+	NotificationDefinitionUpdateData,
+	NotificationDefinitionUpdateError,
+	NotificationDefinitionUpdateResponse,
+	NotificationGroupDefinitionCreateData,
+	NotificationGroupDefinitionCreateError,
+	NotificationGroupDefinitionCreateResponse,
+	NotificationGroupDefinitionGetListData,
+	NotificationGroupDefinitionGetListError,
+	NotificationGroupDefinitionGetListResponse,
+	NotificationGroupDefinitionDeleteData,
+	NotificationGroupDefinitionDeleteError,
+	NotificationGroupDefinitionDeleteResponse,
+	NotificationGroupDefinitionGetData,
+	NotificationGroupDefinitionGetError,
+	NotificationGroupDefinitionGetResponse,
+	NotificationGroupDefinitionUpdateData,
+	NotificationGroupDefinitionUpdateError,
+	NotificationGroupDefinitionUpdateResponse,
+	OpenIddictApplicationGetData,
+	OpenIddictApplicationGetError,
+	OpenIddictApplicationGetResponse,
+	OpenIddictApplicationUpdateData,
+	OpenIddictApplicationUpdateError,
+	OpenIddictApplicationUpdateResponse,
+	OpenIddictApplicationDeleteData,
+	OpenIddictApplicationDeleteError,
+	OpenIddictApplicationDeleteResponse,
+	OpenIddictApplicationGetListData,
+	OpenIddictApplicationGetListError,
+	OpenIddictApplicationGetListResponse,
+	OpenIddictApplicationCreateData,
+	OpenIddictApplicationCreateError,
+	OpenIddictApplicationCreateResponse,
+	OpenIddictAuthorizationDeleteData,
+	OpenIddictAuthorizationDeleteError,
+	OpenIddictAuthorizationDeleteResponse,
+	OpenIddictAuthorizationGetData,
+	OpenIddictAuthorizationGetError,
+	OpenIddictAuthorizationGetResponse,
+	OpenIddictAuthorizationGetListData,
+	OpenIddictAuthorizationGetListError,
+	OpenIddictAuthorizationGetListResponse,
+	OpenIddictScopeCreateData,
+	OpenIddictScopeCreateError,
+	OpenIddictScopeCreateResponse,
+	OpenIddictScopeGetListData,
+	OpenIddictScopeGetListError,
+	OpenIddictScopeGetListResponse,
+	OpenIddictScopeDeleteData,
+	OpenIddictScopeDeleteError,
+	OpenIddictScopeDeleteResponse,
+	OpenIddictScopeGetData,
+	OpenIddictScopeGetError,
+	OpenIddictScopeGetResponse,
+	OpenIddictScopeUpdateData,
+	OpenIddictScopeUpdateError,
+	OpenIddictScopeUpdateResponse,
+	OpenIddictTokenDeleteData,
+	OpenIddictTokenDeleteError,
+	OpenIddictTokenDeleteResponse,
+	OpenIddictTokenGetData,
+	OpenIddictTokenGetError,
+	OpenIddictTokenGetResponse,
+	OpenIddictTokenGetListData,
+	OpenIddictTokenGetListError,
+	OpenIddictTokenGetListResponse,
+	OrganizationUnitsCreateData,
+	OrganizationUnitsCreateError,
+	OrganizationUnitsCreateResponse,
+	OrganizationUnitsGetListData,
+	OrganizationUnitsGetListError,
+	OrganizationUnitsGetListResponse,
+	OrganizationUnitsDeleteData,
+	OrganizationUnitsDeleteError,
+	OrganizationUnitsDeleteResponse,
+	OrganizationUnitsGetData,
+	OrganizationUnitsGetError,
+	OrganizationUnitsGetResponse,
+	OrganizationUnitsUpdateData,
+	OrganizationUnitsUpdateError,
+	OrganizationUnitsUpdateResponse,
+	OrganizationUnitsFindChildrenData,
+	OrganizationUnitsFindChildrenError,
+	OrganizationUnitsFindChildrenResponse,
+	OrganizationUnitsGetRootData,
+	OrganizationUnitsGetRootError,
+	OrganizationUnitsGetRootResponse,
+	OrganizationUnitsGetLastChildOrNullData,
+	OrganizationUnitsGetLastChildOrNullError,
+	OrganizationUnitsGetLastChildOrNullResponse,
+	OrganizationUnitsGetAllListData,
+	OrganizationUnitsGetAllListError,
+	OrganizationUnitsGetAllListResponse,
+	OrganizationUnitsGetRoleNamesData,
+	OrganizationUnitsGetRoleNamesError,
+	OrganizationUnitsGetRoleNamesResponse,
+	OrganizationUnitsGetUnaddedRolesData,
+	OrganizationUnitsGetUnaddedRolesError,
+	OrganizationUnitsGetUnaddedRolesResponse,
+	OrganizationUnitsGetRolesData,
+	OrganizationUnitsGetRolesError,
+	OrganizationUnitsGetRolesResponse,
+	OrganizationUnitsAddRolesData,
+	OrganizationUnitsAddRolesError,
+	OrganizationUnitsAddRolesResponse,
+	OrganizationUnitsGetUnaddedUsersData,
+	OrganizationUnitsGetUnaddedUsersError,
+	OrganizationUnitsGetUnaddedUsersResponse,
+	OrganizationUnitsGetUsersData,
+	OrganizationUnitsGetUsersError,
+	OrganizationUnitsGetUsersResponse,
+	OrganizationUnitsAddUsersData,
+	OrganizationUnitsAddUsersError,
+	OrganizationUnitsAddUsersResponse,
+	OrganizationUnitsMoveData,
+	OrganizationUnitsMoveError,
+	OrganizationUnitsMoveResponse,
+	OrganizationUnitEntityRuleGetData,
+	OrganizationUnitEntityRuleGetError,
+	OrganizationUnitEntityRuleGetResponse,
+	OrganizationUnitEntityRuleCreateData,
+	OrganizationUnitEntityRuleCreateError,
+	OrganizationUnitEntityRuleCreateResponse,
+	OrganizationUnitEntityRuleUpdateData,
+	OrganizationUnitEntityRuleUpdateError,
+	OrganizationUnitEntityRuleUpdateResponse,
+	OssContainerCreateData,
+	OssContainerCreateError,
+	OssContainerCreateResponse,
+	OssContainerDeleteData,
+	OssContainerDeleteError,
+	OssContainerDeleteResponse,
+	OssContainerGetData,
+	OssContainerGetError,
+	OssContainerGetResponse,
+	OssContainerGetListData,
+	OssContainerGetListError,
+	OssContainerGetListResponse,
+	OssContainerGetObjectListData,
+	OssContainerGetObjectListError,
+	OssContainerGetObjectListResponse,
+	OssManagementSettingGetAllForCurrentTenantData,
+	OssManagementSettingGetAllForCurrentTenantError,
+	OssManagementSettingGetAllForCurrentTenantResponse,
+	OssManagementSettingGetAllForGlobalData,
+	OssManagementSettingGetAllForGlobalError,
+	OssManagementSettingGetAllForGlobalResponse,
+	OssObjectCreateData,
+	OssObjectCreateError,
+	OssObjectCreateResponse,
+	OssObjectDeleteData,
+	OssObjectDeleteError,
+	OssObjectDeleteResponse,
+	OssObjectGetData,
+	OssObjectGetError,
+	OssObjectGetResponse,
+	OssObjectUploadData,
+	OssObjectUploadError,
+	OssObjectUploadResponse,
+	OssObjectBulkDeleteData,
+	OssObjectBulkDeleteError,
+	OssObjectBulkDeleteResponse,
+	OssObjectGetContentData,
+	OssObjectGetContentError,
+	OssObjectGetContentResponse,
+	PackageCreateData,
+	PackageCreateError,
+	PackageCreateResponse,
+	PackageGetListData,
+	PackageGetListError,
+	PackageGetListResponse,
+	PackageDeleteData,
+	PackageDeleteError,
+	PackageDeleteResponse,
+	PackageGetData,
+	PackageGetError,
+	PackageGetResponse,
+	PackageUpdateData,
+	PackageUpdateError,
+	PackageUpdateResponse,
+	PackageUploadBlobData,
+	PackageUploadBlobError,
+	PackageUploadBlobResponse,
+	PackageRemoveBlobData,
+	PackageRemoveBlobError,
+	PackageRemoveBlobResponse,
+	PackageDownloadBlobData,
+	PackageDownloadBlobError,
+	PackageDownloadBlobResponse,
+	PackageGetLatestData,
+	PackageGetLatestError,
+	PackageGetLatestResponse,
+	PackageGetLatest1Data,
+	PackageGetLatest1Error,
+	PackageGetLatest1Response,
+	PermissionDefinitionCreateData,
+	PermissionDefinitionCreateError,
+	PermissionDefinitionCreateResponse,
+	PermissionDefinitionGetListData,
+	PermissionDefinitionGetListError,
+	PermissionDefinitionGetListResponse,
+	PermissionDefinitionDeleteData,
+	PermissionDefinitionDeleteError,
+	PermissionDefinitionDeleteResponse,
+	PermissionDefinitionGetData,
+	PermissionDefinitionGetError,
+	PermissionDefinitionGetResponse,
+	PermissionDefinitionUpdateData,
+	PermissionDefinitionUpdateError,
+	PermissionDefinitionUpdateResponse,
+	PermissionGroupDefinitionCreateData,
+	PermissionGroupDefinitionCreateError,
+	PermissionGroupDefinitionCreateResponse,
+	PermissionGroupDefinitionGetListData,
+	PermissionGroupDefinitionGetListError,
+	PermissionGroupDefinitionGetListResponse,
+	PermissionGroupDefinitionDeleteData,
+	PermissionGroupDefinitionDeleteError,
+	PermissionGroupDefinitionDeleteResponse,
+	PermissionGroupDefinitionGetData,
+	PermissionGroupDefinitionGetError,
+	PermissionGroupDefinitionGetResponse,
+	PermissionGroupDefinitionUpdateData,
+	PermissionGroupDefinitionUpdateError,
+	PermissionGroupDefinitionUpdateResponse,
+	PermissionsGetData,
+	PermissionsGetError,
+	PermissionsGetResponse,
+	PermissionsUpdateData,
+	PermissionsUpdateError,
+	PermissionsUpdateResponse,
+	PrivateFilesUploadData,
+	PrivateFilesUploadError,
+	PrivateFilesUploadResponse,
+	PrivateFilesDeleteData,
+	PrivateFilesDeleteError,
+	PrivateFilesDeleteResponse,
+	PrivateFilesUpload1Data,
+	PrivateFilesUpload1Error,
+	PrivateFilesUpload1Response,
+	PrivateFilesGetListData,
+	PrivateFilesGetListError,
+	PrivateFilesGetListResponse,
+	PrivateFilesGetData,
+	PrivateFilesGetError,
+	PrivateFilesGetResponse,
+	PrivateFilesGet1Data,
+	PrivateFilesGet1Error,
+	PrivateFilesGet1Response,
+	PrivateFilesGet2Data,
+	PrivateFilesGet2Error,
+	PrivateFilesGet2Response,
+	PrivateFilesGet3Data,
+	PrivateFilesGet3Error,
+	PrivateFilesGet3Response,
+	PrivateFilesGet4Data,
+	PrivateFilesGet4Error,
+	PrivateFilesGet4Response,
+	PrivateFilesGet5Data,
+	PrivateFilesGet5Error,
+	PrivateFilesGet5Response,
+	PrivateFilesGet6Data,
+	PrivateFilesGet6Error,
+	PrivateFilesGet6Response,
+	PrivateFilesGet7Data,
+	PrivateFilesGet7Error,
+	PrivateFilesGet7Response,
+	PrivateFilesGetShareListData,
+	PrivateFilesGetShareListError,
+	PrivateFilesGetShareListResponse,
+	PrivateFilesShareData,
+	PrivateFilesShareError,
+	PrivateFilesShareResponse,
+	ProfileGetSessionsData,
+	ProfileGetSessionsError,
+	ProfileGetSessionsResponse,
+	ProfileRevokeSessionData,
+	ProfileRevokeSessionError,
+	ProfileRevokeSessionResponse,
+	ProfileGetTwoFactorEnabledData,
+	ProfileGetTwoFactorEnabledError,
+	ProfileGetTwoFactorEnabledResponse,
+	ProfileChangeTwoFactorEnabledData,
+	ProfileChangeTwoFactorEnabledError,
+	ProfileChangeTwoFactorEnabledResponse,
+	ProfileSendChangePhoneNumberCodeData,
+	ProfileSendChangePhoneNumberCodeError,
+	ProfileSendChangePhoneNumberCodeResponse,
+	ProfileChangePhoneNumberData,
+	ProfileChangePhoneNumberError,
+	ProfileChangePhoneNumberResponse,
+	ProfileSendEmailConfirmLinkData,
+	ProfileSendEmailConfirmLinkError,
+	ProfileSendEmailConfirmLinkResponse,
+	ProfileConfirmEmailData,
+	ProfileConfirmEmailError,
+	ProfileConfirmEmailResponse,
+	ProfileGetAuthenticatorData,
+	ProfileGetAuthenticatorError,
+	ProfileGetAuthenticatorResponse,
+	ProfileVerifyAuthenticatorCodeData,
+	ProfileVerifyAuthenticatorCodeError,
+	ProfileVerifyAuthenticatorCodeResponse,
+	ProfileResetAuthenticatorData,
+	ProfileResetAuthenticatorError,
+	ProfileResetAuthenticatorResponse,
+	ProfileGetData,
+	ProfileGetError,
+	ProfileGetResponse,
+	ProfileUpdateData,
+	ProfileUpdateError,
+	ProfileUpdateResponse,
+	ProfileChangePasswordData,
+	ProfileChangePasswordError,
+	ProfileChangePasswordResponse,
+	PublicFilesUploadData,
+	PublicFilesUploadError,
+	PublicFilesUploadResponse,
+	PublicFilesDeleteData,
+	PublicFilesDeleteError,
+	PublicFilesDeleteResponse,
+	PublicFilesUpload1Data,
+	PublicFilesUpload1Error,
+	PublicFilesUpload1Response,
+	PublicFilesGetListData,
+	PublicFilesGetListError,
+	PublicFilesGetListResponse,
+	PublicFilesGetData,
+	PublicFilesGetError,
+	PublicFilesGetResponse,
+	PublicFilesGet1Data,
+	PublicFilesGet1Error,
+	PublicFilesGet1Response,
+	PublicFilesGet2Data,
+	PublicFilesGet2Error,
+	PublicFilesGet2Response,
+	PublicFilesGet3Data,
+	PublicFilesGet3Error,
+	PublicFilesGet3Response,
+	PublicFilesGet4Data,
+	PublicFilesGet4Error,
+	PublicFilesGet4Response,
+	PublicFilesGet5Data,
+	PublicFilesGet5Error,
+	PublicFilesGet5Response,
+	PublicFilesGet6Data,
+	PublicFilesGet6Error,
+	PublicFilesGet6Response,
+	PublicFilesGet7Data,
+	PublicFilesGet7Error,
+	PublicFilesGet7Response,
+	PublishHandleData,
+	PublishHandleError,
+	PublishHandleResponse,
+	ResourceGetByNameData,
+	ResourceGetByNameError,
+	ResourceGetByNameResponse,
+	ResourceDeleteData,
+	ResourceDeleteError,
+	ResourceDeleteResponse,
+	ResourceUpdateData,
+	ResourceUpdateError,
+	ResourceUpdateResponse,
+	ResourceCreateData,
+	ResourceCreateError,
+	ResourceCreateResponse,
+	ResourceGetListData,
+	ResourceGetListError,
+	ResourceGetListResponse,
+	RestoreHandleData,
+	RestoreHandleError,
+	RestoreHandleResponse,
+	RetractHandleData,
+	RetractHandleError,
+	RetractHandleResponse,
+	RetryHandleData,
+	RetryHandleError,
+	RetryHandleResponse,
+	RevertHandleData,
+	RevertHandleError,
+	RevertHandleResponse,
+	RoleGetOrganizationUnitsData,
+	RoleGetOrganizationUnitsError,
+	RoleGetOrganizationUnitsResponse,
+	RoleSetOrganizationUnitsData,
+	RoleSetOrganizationUnitsError,
+	RoleSetOrganizationUnitsResponse,
+	RoleRemoveOrganizationUnitsData,
+	RoleRemoveOrganizationUnitsError,
+	RoleRemoveOrganizationUnitsResponse,
+	RoleGetClaimsData,
+	RoleGetClaimsError,
+	RoleGetClaimsResponse,
+	RoleAddClaimData,
+	RoleAddClaimError,
+	RoleAddClaimResponse,
+	RoleUpdateClaimData,
+	RoleUpdateClaimError,
+	RoleUpdateClaimResponse,
+	RoleDeleteClaimData,
+	RoleDeleteClaimError,
+	RoleDeleteClaimResponse,
+	RoleGetAllListData,
+	RoleGetAllListError,
+	RoleGetAllListResponse,
+	RoleGetListData,
+	RoleGetListError,
+	RoleGetListResponse,
+	RoleCreateData,
+	RoleCreateError,
+	RoleCreateResponse,
+	RoleGetData,
+	RoleGetError,
+	RoleGetResponse,
+	RoleUpdateData,
+	RoleUpdateError,
+	RoleUpdateResponse,
+	RoleDeleteData,
+	RoleDeleteError,
+	RoleDeleteResponse,
+	RoleEntityRuleGetData,
+	RoleEntityRuleGetError,
+	RoleEntityRuleGetResponse,
+	RoleEntityRuleCreateData,
+	RoleEntityRuleCreateError,
+	RoleEntityRuleCreateResponse,
+	RoleEntityRuleUpdateData,
+	RoleEntityRuleUpdateError,
+	RoleEntityRuleUpdateResponse,
+	SecurityLogDeleteData,
+	SecurityLogDeleteError,
+	SecurityLogDeleteResponse,
+	SecurityLogGetData,
+	SecurityLogGetError,
+	SecurityLogGetResponse,
+	SecurityLogGetListData,
+	SecurityLogGetListError,
+	SecurityLogGetListResponse,
+	SettingSetCurrentTenantData,
+	SettingSetCurrentTenantError,
+	SettingSetCurrentTenantResponse,
+	SettingSetGlobalData,
+	SettingSetGlobalError,
+	SettingSetGlobalResponse,
+	SettingGetAllForGlobalData,
+	SettingGetAllForGlobalError,
+	SettingGetAllForGlobalResponse,
+	SettingGetAllForCurrentTenantData,
+	SettingGetAllForCurrentTenantError,
+	SettingGetAllForCurrentTenantResponse,
+	SettingSendTestEmailData,
+	SettingSendTestEmailError,
+	SettingSendTestEmailResponse,
+	SettingDefinitionCreateData,
+	SettingDefinitionCreateError,
+	SettingDefinitionCreateResponse,
+	SettingDefinitionGetListData,
+	SettingDefinitionGetListError,
+	SettingDefinitionGetListResponse,
+	SettingDefinitionDeleteOrRestoreData,
+	SettingDefinitionDeleteOrRestoreError,
+	SettingDefinitionDeleteOrRestoreResponse,
+	SettingDefinitionGetData,
+	SettingDefinitionGetError,
+	SettingDefinitionGetResponse,
+	SettingDefinitionUpdateData,
+	SettingDefinitionUpdateError,
+	SettingDefinitionUpdateResponse,
+	StaticFilesUploadData,
+	StaticFilesUploadError,
+	StaticFilesUploadResponse,
+	StaticFilesGetData,
+	StaticFilesGetError,
+	StaticFilesGetResponse,
+	StaticFilesGet1Data,
+	StaticFilesGet1Error,
+	StaticFilesGet1Response,
+	StaticFilesGet2Data,
+	StaticFilesGet2Error,
+	StaticFilesGet2Response,
+	StaticFilesGet3Data,
+	StaticFilesGet3Error,
+	StaticFilesGet3Response,
+	StaticFilesGet4Data,
+	StaticFilesGet4Error,
+	StaticFilesGet4Response,
+	StaticFilesGet5Data,
+	StaticFilesGet5Error,
+	StaticFilesGet5Response,
+	StaticFilesGet6Data,
+	StaticFilesGet6Error,
+	StaticFilesGet6Response,
+	StaticFilesGet7Data,
+	StaticFilesGet7Error,
+	StaticFilesGet7Response,
+	TenantGetData,
+	TenantGetError,
+	TenantGetResponse,
+	TenantUpdateData,
+	TenantUpdateError,
+	TenantUpdateResponse,
+	TenantDeleteData,
+	TenantDeleteError,
+	TenantDeleteResponse,
+	TenantGet1Data,
+	TenantGet1Error,
+	TenantGet1Response,
+	TenantGetListData,
+	TenantGetListError,
+	TenantGetListResponse,
+	TenantCreateData,
+	TenantCreateError,
+	TenantCreateResponse,
+	TenantGetConnectionStringData,
+	TenantGetConnectionStringError,
+	TenantGetConnectionStringResponse,
+	TenantDeleteConnectionStringData,
+	TenantDeleteConnectionStringError,
+	TenantDeleteConnectionStringResponse,
+	TenantGetConnectionString1Data,
+	TenantGetConnectionString1Error,
+	TenantGetConnectionString1Response,
+	TenantSetConnectionStringData,
+	TenantSetConnectionStringError,
+	TenantSetConnectionStringResponse,
+	TextSetTextData,
+	TextSetTextError,
+	TextSetTextResponse,
+	TextRestoreToDefaultData,
+	TextRestoreToDefaultError,
+	TextRestoreToDefaultResponse,
+	TextGetByCultureKeyData,
+	TextGetByCultureKeyError,
+	TextGetByCultureKeyResponse,
+	TextGetListData,
+	TextGetListError,
+	TextGetListResponse,
+	TextTemplateContentGetData,
+	TextTemplateContentGetError,
+	TextTemplateContentGetResponse,
+	TextTemplateContentGet1Data,
+	TextTemplateContentGet1Error,
+	TextTemplateContentGet1Response,
+	TextTemplateContentRestoreToDefaultData,
+	TextTemplateContentRestoreToDefaultError,
+	TextTemplateContentRestoreToDefaultResponse,
+	TextTemplateContentUpdateData,
+	TextTemplateContentUpdateError,
+	TextTemplateContentUpdateResponse,
+	TextTemplateDefinitionCreateData,
+	TextTemplateDefinitionCreateError,
+	TextTemplateDefinitionCreateResponse,
+	TextTemplateDefinitionGetListData,
+	TextTemplateDefinitionGetListError,
+	TextTemplateDefinitionGetListResponse,
+	TextTemplateDefinitionDeleteData,
+	TextTemplateDefinitionDeleteError,
+	TextTemplateDefinitionDeleteResponse,
+	TextTemplateDefinitionGetByNameData,
+	TextTemplateDefinitionGetByNameError,
+	TextTemplateDefinitionGetByNameResponse,
+	TextTemplateDefinitionUpdateData,
+	TextTemplateDefinitionUpdateError,
+	TextTemplateDefinitionUpdateResponse,
+	ThemeSettingGetData,
+	ThemeSettingGetError,
+	ThemeSettingGetResponse,
+	ThemeSettingChangeData,
+	ThemeSettingChangeError,
+	ThemeSettingChangeResponse,
+	TriggerHandleData,
+	TriggerHandleError,
+	TriggerHandleResponse,
+	TriggerEndpointHandleData,
+	TriggerEndpointHandleError,
+	TriggerEndpointHandleResponse,
+	TriggerEndpointHandle1Data,
+	TriggerEndpointHandle1Error,
+	TriggerEndpointHandle1Response,
+	UserGetOrganizationUnitsData,
+	UserGetOrganizationUnitsError,
+	UserGetOrganizationUnitsResponse,
+	UserSetOrganizationUnitsData,
+	UserSetOrganizationUnitsError,
+	UserSetOrganizationUnitsResponse,
+	UserRemoveOrganizationUnitsData,
+	UserRemoveOrganizationUnitsError,
+	UserRemoveOrganizationUnitsResponse,
+	UserGetClaimsData,
+	UserGetClaimsError,
+	UserGetClaimsResponse,
+	UserAddClaimData,
+	UserAddClaimError,
+	UserAddClaimResponse,
+	UserUpdateClaimData,
+	UserUpdateClaimError,
+	UserUpdateClaimResponse,
+	UserDeleteClaimData,
+	UserDeleteClaimError,
+	UserDeleteClaimResponse,
+	UserChangePasswordData,
+	UserChangePasswordError,
+	UserChangePasswordResponse,
+	UserChangeTwoFactorEnabledData,
+	UserChangeTwoFactorEnabledError,
+	UserChangeTwoFactorEnabledResponse,
+	UserLockData,
+	UserLockError,
+	UserLockResponse,
+	UserUnLockData,
+	UserUnLockError,
+	UserUnLockResponse,
+	UserGetData,
+	UserGetError,
+	UserGetResponse,
+	UserUpdateData,
+	UserUpdateError,
+	UserUpdateResponse,
+	UserDeleteData,
+	UserDeleteError,
+	UserDeleteResponse,
+	UserGetListData,
+	UserGetListError,
+	UserGetListResponse,
+	UserCreateData,
+	UserCreateError,
+	UserCreateResponse,
+	UserGetRolesData,
+	UserGetRolesError,
+	UserGetRolesResponse,
+	UserUpdateRolesData,
+	UserUpdateRolesError,
+	UserUpdateRolesResponse,
+	UserGetAssignableRolesData,
+	UserGetAssignableRolesError,
+	UserGetAssignableRolesResponse,
+	UserFindByUsernameData,
+	UserFindByUsernameError,
+	UserFindByUsernameResponse,
+	UserFindByEmailData,
+	UserFindByEmailError,
+	UserFindByEmailResponse,
+	UserFavoriteMenuCreateData,
+	UserFavoriteMenuCreateError,
+	UserFavoriteMenuCreateResponse,
+	UserFavoriteMenuGetListData,
+	UserFavoriteMenuGetListError,
+	UserFavoriteMenuGetListResponse,
+	UserFavoriteMenuUpdateData,
+	UserFavoriteMenuUpdateError,
+	UserFavoriteMenuUpdateResponse,
+	UserFavoriteMenuCreateMyFavoriteMenuData,
+	UserFavoriteMenuCreateMyFavoriteMenuError,
+	UserFavoriteMenuCreateMyFavoriteMenuResponse,
+	UserFavoriteMenuGetMyFavoriteMenuListData,
+	UserFavoriteMenuGetMyFavoriteMenuListError,
+	UserFavoriteMenuGetMyFavoriteMenuListResponse,
+	UserFavoriteMenuUpdateMyFavoriteMenuData,
+	UserFavoriteMenuUpdateMyFavoriteMenuError,
+	UserFavoriteMenuUpdateMyFavoriteMenuResponse,
+	UserFavoriteMenuDeleteData,
+	UserFavoriteMenuDeleteError,
+	UserFavoriteMenuDeleteResponse,
+	UserFavoriteMenuDeleteMyFavoriteMenuData,
+	UserFavoriteMenuDeleteMyFavoriteMenuError,
+	UserFavoriteMenuDeleteMyFavoriteMenuResponse,
+	UserGroupApplyJoinGroupData,
+	UserGroupApplyJoinGroupError,
+	UserGroupApplyJoinGroupResponse,
+	UserGroupGetGroupUsersData,
+	UserGroupGetGroupUsersError,
+	UserGroupGetGroupUsersResponse,
+	UserGroupGetMyGroupsData,
+	UserGroupGetMyGroupsError,
+	UserGroupGetMyGroupsResponse,
+	UserGroupGroupAcceptUserData,
+	UserGroupGroupAcceptUserError,
+	UserGroupGroupAcceptUserResponse,
+	UserGroupGroupRemoveUserData,
+	UserGroupGroupRemoveUserError,
+	UserGroupGroupRemoveUserResponse,
+	UserLookupFindByIdData,
+	UserLookupFindByIdError,
+	UserLookupFindByIdResponse,
+	UserLookupFindByUserNameData,
+	UserLookupFindByUserNameError,
+	UserLookupFindByUserNameResponse,
+	UserLookupSearchData,
+	UserLookupSearchError,
+	UserLookupSearchResponse,
+	UserLookupGetCountData,
+	UserLookupGetCountError,
+	UserLookupGetCountResponse,
+	UserSettingGetAllForCurrentUserData,
+	UserSettingGetAllForCurrentUserError,
+	UserSettingGetAllForCurrentUserResponse,
+	UserSettingSetCurrentUserData,
+	UserSettingSetCurrentUserError,
+	UserSettingSetCurrentUserResponse,
+	WebhookDefinitionCreateData,
+	WebhookDefinitionCreateError,
+	WebhookDefinitionCreateResponse,
+	WebhookDefinitionGetListData,
+	WebhookDefinitionGetListError,
+	WebhookDefinitionGetListResponse,
+	WebhookDefinitionDeleteData,
+	WebhookDefinitionDeleteError,
+	WebhookDefinitionDeleteResponse,
+	WebhookDefinitionGetData,
+	WebhookDefinitionGetError,
+	WebhookDefinitionGetResponse,
+	WebhookDefinitionUpdateData,
+	WebhookDefinitionUpdateError,
+	WebhookDefinitionUpdateResponse,
+	WebhookGroupDefinitionCreateData,
+	WebhookGroupDefinitionCreateError,
+	WebhookGroupDefinitionCreateResponse,
+	WebhookGroupDefinitionGetListData,
+	WebhookGroupDefinitionGetListError,
+	WebhookGroupDefinitionGetListResponse,
+	WebhookGroupDefinitionDeleteAysncData,
+	WebhookGroupDefinitionDeleteAysncError,
+	WebhookGroupDefinitionDeleteAysncResponse,
+	WebhookGroupDefinitionGetData,
+	WebhookGroupDefinitionGetError,
+	WebhookGroupDefinitionGetResponse,
+	WebhookGroupDefinitionUpdateData,
+	WebhookGroupDefinitionUpdateError,
+	WebhookGroupDefinitionUpdateResponse,
+	WebhookPublishPublishData,
+	WebhookPublishPublishError,
+	WebhookPublishPublishResponse,
+	WebhookSendRecordGetData,
+	WebhookSendRecordGetError,
+	WebhookSendRecordGetResponse,
+	WebhookSendRecordDeleteData,
+	WebhookSendRecordDeleteError,
+	WebhookSendRecordDeleteResponse,
+	WebhookSendRecordDeleteManyData,
+	WebhookSendRecordDeleteManyError,
+	WebhookSendRecordDeleteManyResponse,
+	WebhookSendRecordGetListData,
+	WebhookSendRecordGetListError,
+	WebhookSendRecordGetListResponse,
+	WebhookSendRecordResendData,
+	WebhookSendRecordResendError,
+	WebhookSendRecordResendResponse,
+	WebhookSendRecordResendManyData,
+	WebhookSendRecordResendManyError,
+	WebhookSendRecordResendManyResponse,
+	WebhookSubscriptionCreateData,
+	WebhookSubscriptionCreateError,
+	WebhookSubscriptionCreateResponse,
+	WebhookSubscriptionGetListData,
+	WebhookSubscriptionGetListError,
+	WebhookSubscriptionGetListResponse,
+	WebhookSubscriptionDeleteData,
+	WebhookSubscriptionDeleteError,
+	WebhookSubscriptionDeleteResponse,
+	WebhookSubscriptionGetData,
+	WebhookSubscriptionGetError,
+	WebhookSubscriptionGetResponse,
+	WebhookSubscriptionUpdateData,
+	WebhookSubscriptionUpdateError,
+	WebhookSubscriptionUpdateResponse,
+	WebhookSubscriptionDeleteManyData,
+	WebhookSubscriptionDeleteManyError,
+	WebhookSubscriptionDeleteManyResponse,
+	WebhookSubscriptionGetAllAvailableWebhooksData,
+	WebhookSubscriptionGetAllAvailableWebhooksError,
+	WebhookSubscriptionGetAllAvailableWebhooksResponse,
+} from "./types.gen";
+
+export const client = createClient(createConfig());
+
+export const abpApiDefinitionGet = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<AbpApiDefinitionGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<AbpApiDefinitionGetResponse, AbpApiDefinitionGetError, ThrowOnError>({
+		...options,
+		url: "/api/abp/api-definition",
+	});
+};
+
+export const abpApplicationConfigurationGet = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<AbpApplicationConfigurationGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		AbpApplicationConfigurationGetResponse,
+		AbpApplicationConfigurationGetError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/abp/application-configuration",
+	});
+};
+
+export const abpApplicationLocalizationGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<AbpApplicationLocalizationGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		AbpApplicationLocalizationGetResponse,
+		AbpApplicationLocalizationGetError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/abp/application-localization",
+	});
+};
+
+export const abpTenantFindTenantByName = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<AbpTenantFindTenantByNameData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		AbpTenantFindTenantByNameResponse,
+		AbpTenantFindTenantByNameError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/abp/multi-tenancy/tenants/by-name/{name}",
+	});
+};
+
+export const abpTenantFindTenantById = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<AbpTenantFindTenantByIdData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<AbpTenantFindTenantByIdResponse, AbpTenantFindTenantByIdError, ThrowOnError>({
+		...options,
+		url: "/api/abp/multi-tenancy/tenants/by-id/{id}",
+	});
+};
+
+export const accountRegister = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<AccountRegisterData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<AccountRegisterResponse, AccountRegisterError, ThrowOnError>({
+		...options,
+		url: "/api/account/phone/register",
+	});
+};
+
+export const accountResetPassword = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<AccountResetPasswordData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<AccountResetPasswordResponse, AccountResetPasswordError, ThrowOnError>({
+		...options,
+		url: "/api/account/phone/reset-password",
+	});
+};
+
+export const accountSendPhoneSigninCode = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<AccountSendPhoneSigninCodeData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		AccountSendPhoneSigninCodeResponse,
+		AccountSendPhoneSigninCodeError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/account/phone/send-signin-code",
+	});
+};
+
+export const accountSendEmailSigninCode = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<AccountSendEmailSigninCodeData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		AccountSendEmailSigninCodeResponse,
+		AccountSendEmailSigninCodeError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/account/email/send-signin-code",
+	});
+};
+
+export const accountSendPhoneRegisterCode = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<AccountSendPhoneRegisterCodeData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		AccountSendPhoneRegisterCodeResponse,
+		AccountSendPhoneRegisterCodeError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/account/phone/send-register-code",
+	});
+};
+
+export const accountSendPhoneResetPasswordCode = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<AccountSendPhoneResetPasswordCodeData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		AccountSendPhoneResetPasswordCodeResponse,
+		AccountSendPhoneResetPasswordCodeError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/account/phone/send-password-reset-code",
+	});
+};
+
+export const accountGetTwoFactorProviders = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<AccountGetTwoFactorProvidersData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		AccountGetTwoFactorProvidersResponse,
+		AccountGetTwoFactorProvidersError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/account/two-factor-providers",
+	});
+};
+
+export const accountRegister1 = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<AccountRegister1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<AccountRegister1Response, AccountRegister1Error, ThrowOnError>({
+		...options,
+		url: "/api/account/register",
+	});
+};
+
+export const accountSendPasswordResetCode = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<AccountSendPasswordResetCodeData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		AccountSendPasswordResetCodeResponse,
+		AccountSendPasswordResetCodeError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/account/send-password-reset-code",
+	});
+};
+
+export const accountVerifyPasswordResetToken = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<AccountVerifyPasswordResetTokenData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		AccountVerifyPasswordResetTokenResponse,
+		AccountVerifyPasswordResetTokenError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/account/verify-password-reset-token",
+	});
+};
+
+export const accountResetPassword1 = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<AccountResetPassword1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<AccountResetPassword1Response, AccountResetPassword1Error, ThrowOnError>({
+		...options,
+		url: "/api/account/reset-password",
+	});
+};
+
+export const auditLogDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<AuditLogDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<AuditLogDeleteResponse, AuditLogDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/auditing/audit-log/{id}",
+	});
+};
+
+export const auditLogGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<AuditLogGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<AuditLogGetResponse, AuditLogGetError, ThrowOnError>({
+		...options,
+		url: "/api/auditing/audit-log/{id}",
+	});
+};
+
+export const auditLogGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<AuditLogGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<AuditLogGetListResponse, AuditLogGetListError, ThrowOnError>({
+		...options,
+		url: "/api/auditing/audit-log",
+	});
+};
+
+export const backgroundJobActionAddAction = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackgroundJobActionAddActionData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		BackgroundJobActionAddActionResponse,
+		BackgroundJobActionAddActionError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/task-management/background-jobs/actions/{jobId}",
+	});
+};
+
+export const backgroundJobActionGetActions = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackgroundJobActionGetActionsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		BackgroundJobActionGetActionsResponse,
+		BackgroundJobActionGetActionsError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/task-management/background-jobs/actions/{jobId}",
+	});
+};
+
+export const backgroundJobActionDeleteAction = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackgroundJobActionDeleteActionData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		BackgroundJobActionDeleteActionResponse,
+		BackgroundJobActionDeleteActionError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/task-management/background-jobs/actions/{id}",
+	});
+};
+
+export const backgroundJobActionUpdateAction = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackgroundJobActionUpdateActionData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		BackgroundJobActionUpdateActionResponse,
+		BackgroundJobActionUpdateActionError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/task-management/background-jobs/actions/{id}",
+	});
+};
+
+export const backgroundJobActionGetDefinitions = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<BackgroundJobActionGetDefinitionsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		BackgroundJobActionGetDefinitionsResponse,
+		BackgroundJobActionGetDefinitionsError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/task-management/background-jobs/actions/definitions",
+	});
+};
+
+export const backgroundJobInfoCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<BackgroundJobInfoCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<BackgroundJobInfoCreateResponse, BackgroundJobInfoCreateError, ThrowOnError>({
+		...options,
+		url: "/api/task-management/background-jobs",
+	});
+};
+
+export const backgroundJobInfoGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<BackgroundJobInfoGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<BackgroundJobInfoGetListResponse, BackgroundJobInfoGetListError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/task-management/background-jobs",
+		},
+	);
+};
+
+export const backgroundJobInfoDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackgroundJobInfoDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		BackgroundJobInfoDeleteResponse,
+		BackgroundJobInfoDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/task-management/background-jobs/{id}",
+	});
+};
+
+export const backgroundJobInfoGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackgroundJobInfoGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<BackgroundJobInfoGetResponse, BackgroundJobInfoGetError, ThrowOnError>({
+		...options,
+		url: "/api/task-management/background-jobs/{id}",
+	});
+};
+
+export const backgroundJobInfoUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackgroundJobInfoUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<BackgroundJobInfoUpdateResponse, BackgroundJobInfoUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/task-management/background-jobs/{id}",
+	});
+};
+
+export const backgroundJobInfoPause = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackgroundJobInfoPauseData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<BackgroundJobInfoPauseResponse, BackgroundJobInfoPauseError, ThrowOnError>({
+		...options,
+		url: "/api/task-management/background-jobs/{id}/pause",
+	});
+};
+
+export const backgroundJobInfoResume = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackgroundJobInfoResumeData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<BackgroundJobInfoResumeResponse, BackgroundJobInfoResumeError, ThrowOnError>({
+		...options,
+		url: "/api/task-management/background-jobs/{id}/resume",
+	});
+};
+
+export const backgroundJobInfoTrigger = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackgroundJobInfoTriggerData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<BackgroundJobInfoTriggerResponse, BackgroundJobInfoTriggerError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/task-management/background-jobs/{id}/trigger",
+		},
+	);
+};
+
+export const backgroundJobInfoStop = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackgroundJobInfoStopData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<BackgroundJobInfoStopResponse, BackgroundJobInfoStopError, ThrowOnError>({
+		...options,
+		url: "/api/task-management/background-jobs/{id}/stop",
+	});
+};
+
+export const backgroundJobInfoStart = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackgroundJobInfoStartData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<BackgroundJobInfoStartResponse, BackgroundJobInfoStartError, ThrowOnError>({
+		...options,
+		url: "/api/task-management/background-jobs/{id}/start",
+	});
+};
+
+export const backgroundJobInfoBulkStop = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<BackgroundJobInfoBulkStopData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		BackgroundJobInfoBulkStopResponse,
+		BackgroundJobInfoBulkStopError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/task-management/background-jobs/bulk-stop",
+	});
+};
+
+export const backgroundJobInfoBulkStart = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<BackgroundJobInfoBulkStartData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		BackgroundJobInfoBulkStartResponse,
+		BackgroundJobInfoBulkStartError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/task-management/background-jobs/bulk-start",
+	});
+};
+
+export const backgroundJobInfoBulkTrigger = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<BackgroundJobInfoBulkTriggerData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		BackgroundJobInfoBulkTriggerResponse,
+		BackgroundJobInfoBulkTriggerError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/task-management/background-jobs/bulk-trigger",
+	});
+};
+
+export const backgroundJobInfoBulkResume = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<BackgroundJobInfoBulkResumeData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		BackgroundJobInfoBulkResumeResponse,
+		BackgroundJobInfoBulkResumeError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/task-management/background-jobs/bulk-resume",
+	});
+};
+
+export const backgroundJobInfoBulkPause = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<BackgroundJobInfoBulkPauseData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		BackgroundJobInfoBulkPauseResponse,
+		BackgroundJobInfoBulkPauseError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/task-management/background-jobs/bulk-pause",
+	});
+};
+
+export const backgroundJobInfoBulkDelete = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<BackgroundJobInfoBulkDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		BackgroundJobInfoBulkDeleteResponse,
+		BackgroundJobInfoBulkDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/task-management/background-jobs/bulk-delete",
+	});
+};
+
+export const backgroundJobInfoGetDefinitions = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<BackgroundJobInfoGetDefinitionsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		BackgroundJobInfoGetDefinitionsResponse,
+		BackgroundJobInfoGetDefinitionsError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/task-management/background-jobs/definitions",
+	});
+};
+
+export const backgroundJobInfoGetAvailableFields = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<BackgroundJobInfoGetAvailableFieldsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		BackgroundJobInfoGetAvailableFieldsResponse,
+		BackgroundJobInfoGetAvailableFieldsError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/task-management/background-jobs/available-fields",
+	});
+};
+
+export const backgroundJobInfoSearch = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<BackgroundJobInfoSearchData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<BackgroundJobInfoSearchResponse, BackgroundJobInfoSearchError, ThrowOnError>({
+		...options,
+		url: "/api/task-management/background-jobs/search",
+	});
+};
+
+export const backgroundJobLogDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackgroundJobLogDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<BackgroundJobLogDeleteResponse, BackgroundJobLogDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/task-management/background-jobs/logs/{id}",
+	});
+};
+
+export const backgroundJobLogGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackgroundJobLogGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<BackgroundJobLogGetResponse, BackgroundJobLogGetError, ThrowOnError>({
+		...options,
+		url: "/api/task-management/background-jobs/logs/{id}",
+	});
+};
+
+export const backgroundJobLogGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<BackgroundJobLogGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<BackgroundJobLogGetListResponse, BackgroundJobLogGetListError, ThrowOnError>({
+		...options,
+		url: "/api/task-management/background-jobs/logs",
+	});
+};
+
+export const backupHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BackupHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<BackupHandleResponse, BackupHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-definitions/backup",
+	});
+};
+
+export const bulkCancelHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BulkCancelHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<BulkCancelHandleResponse, BulkCancelHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-instances/bulk/cancel",
+	});
+};
+
+export const bulkDeleteHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BulkDeleteHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<BulkDeleteHandleResponse, BulkDeleteHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-instances/bulk",
+	});
+};
+
+export const bulkRetryHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<BulkRetryHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<BulkRetryHandleResponse, BulkRetryHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-instances/bulk/retry",
+	});
+};
+
+export const cacheGetKeys = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<CacheGetKeysData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<CacheGetKeysResponse, CacheGetKeysError, ThrowOnError>({
+		...options,
+		url: "/api/caching-management/cache/keys",
+	});
+};
+
+export const cacheGetValue = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<CacheGetValueData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<CacheGetValueResponse, CacheGetValueError, ThrowOnError>({
+		...options,
+		url: "/api/caching-management/cache/value",
+	});
+};
+
+export const cacheSet = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<CacheSetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<CacheSetResponse, CacheSetError, ThrowOnError>({
+		...options,
+		url: "/api/caching-management/cache/set",
+	});
+};
+
+export const cacheRefresh = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<CacheRefreshData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<CacheRefreshResponse, CacheRefreshError, ThrowOnError>({
+		...options,
+		url: "/api/caching-management/cache/refresh",
+	});
+};
+
+export const cacheRemove = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<CacheRemoveData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<CacheRemoveResponse, CacheRemoveError, ThrowOnError>({
+		...options,
+		url: "/api/caching-management/cache/remove",
+	});
+};
+
+export const cancelHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<CancelHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<CancelHandleResponse, CancelHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-instances/{id}/cancel",
+	});
+};
+
+export const chatGetMyGroupMessage = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ChatGetMyGroupMessageData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ChatGetMyGroupMessageResponse, ChatGetMyGroupMessageError, ThrowOnError>({
+		...options,
+		url: "/api/im/chat/group/messages",
+	});
+};
+
+export const chatGetMyChatMessage = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ChatGetMyChatMessageData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ChatGetMyChatMessageResponse, ChatGetMyChatMessageError, ThrowOnError>({
+		...options,
+		url: "/api/im/chat/my-messages",
+	});
+};
+
+export const chatGetMyLastChatMessage = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ChatGetMyLastChatMessageData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ChatGetMyLastChatMessageResponse, ChatGetMyLastChatMessageError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/im/chat/my-last-messages",
+		},
+	);
+};
+
+export const chatSendMessage = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ChatSendMessageData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<ChatSendMessageResponse, ChatSendMessageError, ThrowOnError>({
+		...options,
+		url: "/api/im/chat/send-message",
+	});
+};
+
+export const claimChangeAvatar = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ClaimChangeAvatarData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<ClaimChangeAvatarResponse, ClaimChangeAvatarError, ThrowOnError>({
+		...options,
+		url: "/api/account/my-claim/change-avatar",
+	});
+};
+
+export const claimTypeCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ClaimTypeCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<ClaimTypeCreateResponse, ClaimTypeCreateError, ThrowOnError>({
+		...options,
+		url: "/api/identity/claim-types",
+	});
+};
+
+export const claimTypeGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ClaimTypeGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ClaimTypeGetListResponse, ClaimTypeGetListError, ThrowOnError>({
+		...options,
+		url: "/api/identity/claim-types",
+	});
+};
+
+export const claimTypeDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ClaimTypeDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<ClaimTypeDeleteResponse, ClaimTypeDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/identity/claim-types/{id}",
+	});
+};
+
+export const claimTypeGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ClaimTypeGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ClaimTypeGetResponse, ClaimTypeGetError, ThrowOnError>({
+		...options,
+		url: "/api/identity/claim-types/{id}",
+	});
+};
+
+export const claimTypeUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ClaimTypeUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<ClaimTypeUpdateResponse, ClaimTypeUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/identity/claim-types/{id}",
+	});
+};
+
+export const claimTypeGetAllList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ClaimTypeGetAllListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ClaimTypeGetAllListResponse, ClaimTypeGetAllListError, ThrowOnError>({
+		...options,
+		url: "/api/identity/claim-types/actived-list",
+	});
+};
+
+export const dataCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<DataCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<DataCreateResponse, DataCreateError, ThrowOnError>({
+		...options,
+		url: "/api/platform/datas",
+	});
+};
+
+export const dataGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<DataGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<DataGetListResponse, DataGetListError, ThrowOnError>({
+		...options,
+		url: "/api/platform/datas",
+	});
+};
+
+export const dataCreateItem = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DataCreateItemData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<DataCreateItemResponse, DataCreateItemError, ThrowOnError>({
+		...options,
+		url: "/api/platform/datas/{id}/items",
+	});
+};
+
+export const dataDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DataDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<DataDeleteResponse, DataDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/platform/datas/{id}",
+	});
+};
+
+export const dataGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DataGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<DataGetResponse, DataGetError, ThrowOnError>({
+		...options,
+		url: "/api/platform/datas/{id}",
+	});
+};
+
+export const dataUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DataUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<DataUpdateResponse, DataUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/platform/datas/{id}",
+	});
+};
+
+export const dataDeleteItem = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DataDeleteItemData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<DataDeleteItemResponse, DataDeleteItemError, ThrowOnError>({
+		...options,
+		url: "/api/platform/datas/{id}/items/{name}",
+	});
+};
+
+export const dataUpdateItem = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DataUpdateItemData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<DataUpdateItemResponse, DataUpdateItemError, ThrowOnError>({
+		...options,
+		url: "/api/platform/datas/{id}/items/{name}",
+	});
+};
+
+export const dataGet1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DataGet1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<DataGet1Response, DataGet1Error, ThrowOnError>({
+		...options,
+		url: "/api/platform/datas/by-name/{name}",
+	});
+};
+
+export const dataGetAll = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<DataGetAllData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<DataGetAllResponse, DataGetAllError, ThrowOnError>({
+		...options,
+		url: "/api/platform/datas/all",
+	});
+};
+
+export const dataMove = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DataMoveData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<DataMoveResponse, DataMoveError, ThrowOnError>({
+		...options,
+		url: "/api/platform/datas/{id}/move",
+	});
+};
+
+export const deleteHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DeleteHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<DeleteHandleResponse, DeleteHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-instances/{id}",
+	});
+};
+
+export const getHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<GetHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<GetHandleResponse, GetHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-instances/{id}",
+	});
+};
+
+export const deleteHandle1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DeleteHandle1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<DeleteHandle1Response, DeleteHandle1Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/webhook-definitions/{id}",
+	});
+};
+
+export const getHandle1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<GetHandle1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<GetHandle1Response, GetHandle1Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/webhook-definitions/{id}",
+	});
+};
+
+export const deleteByDefinitionHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DeleteByDefinitionHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		DeleteByDefinitionHandleResponse,
+		DeleteByDefinitionHandleError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/v{apiVersion}/workflow-definitions/{definitionId}",
+	});
+};
+
+export const deleteByDefinitionAndVersionHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DeleteByDefinitionAndVersionHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		DeleteByDefinitionAndVersionHandleResponse,
+		DeleteByDefinitionAndVersionHandleError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/v{apiVersion}/workflow-definitions/{definitionId}/{versionOptions}",
+	});
+};
+
+export const dispatchHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DispatchHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<DispatchHandleResponse, DispatchHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflows/{workflowDefinitionId}/dispatch",
+	});
+};
+
+export const dispatchHandle1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DispatchHandle1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<DispatchHandle1Response, DispatchHandle1Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-instances/{workflowInstanceId}/dispatch",
+	});
+};
+
+export const dispatchHandle2 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DispatchHandle2Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<DispatchHandle2Response, DispatchHandle2Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/signals/{signalName}/dispatch",
+	});
+};
+
+export const dispatchEndpointHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DispatchEndpointHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<DispatchEndpointHandleResponse, DispatchEndpointHandleError, ThrowOnError>({
+		...options,
+		url: "/signals/dispatch/{token}",
+	});
+};
+
+export const dispatchEndpointHandle1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<DispatchEndpointHandle1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<DispatchEndpointHandle1Response, DispatchEndpointHandle1Error, ThrowOnError>({
+		...options,
+		url: "/signals/dispatch/{token}",
+	});
+};
+
+export const dynamicClaimsRefresh = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<DynamicClaimsRefreshData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<DynamicClaimsRefreshResponse, DynamicClaimsRefreshError, ThrowOnError>({
+		...options,
+		url: "/api/account/dynamic-claims/refresh",
+	});
+};
+
+export const editionCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<EditionCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<EditionCreateResponse, EditionCreateError, ThrowOnError>({
+		...options,
+		url: "/api/saas/editions",
+	});
+};
+
+export const editionGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<EditionGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<EditionGetListResponse, EditionGetListError, ThrowOnError>({
+		...options,
+		url: "/api/saas/editions",
+	});
+};
+
+export const editionDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<EditionDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<EditionDeleteResponse, EditionDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/saas/editions/{id}",
+	});
+};
+
+export const editionGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<EditionGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<EditionGetResponse, EditionGetError, ThrowOnError>({
+		...options,
+		url: "/api/saas/editions/{id}",
+	});
+};
+
+export const editionUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<EditionUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<EditionUpdateResponse, EditionUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/saas/editions/{id}",
+	});
+};
+
+export const entityChangesGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<EntityChangesGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<EntityChangesGetResponse, EntityChangesGetError, ThrowOnError>({
+		...options,
+		url: "/api/auditing/entity-changes/{id}",
+	});
+};
+
+export const entityChangesGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<EntityChangesGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<EntityChangesGetListResponse, EntityChangesGetListError, ThrowOnError>({
+		...options,
+		url: "/api/auditing/entity-changes",
+	});
+};
+
+export const entityChangesGetWithUsername = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<EntityChangesGetWithUsernameData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		EntityChangesGetWithUsernameResponse,
+		EntityChangesGetWithUsernameError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/auditing/entity-changes/with-username/{id}",
+	});
+};
+
+export const entityChangesGetWithUsername1 = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<EntityChangesGetWithUsername1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		EntityChangesGetWithUsername1Response,
+		EntityChangesGetWithUsername1Error,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/auditing/entity-changes/with-username",
+	});
+};
+
+export const entityTypeInfoGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<EntityTypeInfoGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<EntityTypeInfoGetResponse, EntityTypeInfoGetError, ThrowOnError>({
+		...options,
+		url: "/api/data-protection-management/entity-type-infos/{id}",
+	});
+};
+
+export const entityTypeInfoGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<EntityTypeInfoGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<EntityTypeInfoGetListResponse, EntityTypeInfoGetListError, ThrowOnError>({
+		...options,
+		url: "/api/data-protection-management/entity-type-infos",
+	});
+};
+
+export const executeHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ExecuteHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<ExecuteHandleResponse, ExecuteHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflows/{workflowDefinitionId}/execute",
+	});
+};
+
+export const executeHandle1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ExecuteHandle1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<ExecuteHandle1Response, ExecuteHandle1Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-instances/{workflowInstanceId}/execute",
+	});
+};
+
+export const executeHandle2 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ExecuteHandle2Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<ExecuteHandle2Response, ExecuteHandle2Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/signals/{signalName}/execute",
+	});
+};
+
+export const exportHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ExportHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<ExportHandleResponse, ExportHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-definitions/{workflowDefinitionId}/{versionOptions}/export",
+	});
+};
+
+export const featureDefinitionCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<FeatureDefinitionCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<FeatureDefinitionCreateResponse, FeatureDefinitionCreateError, ThrowOnError>({
+		...options,
+		url: "/api/feature-management/definitions",
+	});
+};
+
+export const featureDefinitionGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<FeatureDefinitionGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<FeatureDefinitionGetListResponse, FeatureDefinitionGetListError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/feature-management/definitions",
+		},
+	);
+};
+
+export const featureDefinitionDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<FeatureDefinitionDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		FeatureDefinitionDeleteResponse,
+		FeatureDefinitionDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/feature-management/definitions/{name}",
+	});
+};
+
+export const featureDefinitionGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<FeatureDefinitionGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<FeatureDefinitionGetResponse, FeatureDefinitionGetError, ThrowOnError>({
+		...options,
+		url: "/api/feature-management/definitions/{name}",
+	});
+};
+
+export const featureDefinitionUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<FeatureDefinitionUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<FeatureDefinitionUpdateResponse, FeatureDefinitionUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/feature-management/definitions/{name}",
+	});
+};
+
+export const featureGroupDefinitionCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<FeatureGroupDefinitionCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		FeatureGroupDefinitionCreateResponse,
+		FeatureGroupDefinitionCreateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/feature-management/definitions/groups",
+	});
+};
+
+export const featureGroupDefinitionGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<FeatureGroupDefinitionGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		FeatureGroupDefinitionGetListResponse,
+		FeatureGroupDefinitionGetListError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/feature-management/definitions/groups",
+	});
+};
+
+export const featureGroupDefinitionDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<FeatureGroupDefinitionDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		FeatureGroupDefinitionDeleteResponse,
+		FeatureGroupDefinitionDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/feature-management/definitions/groups/{name}",
+	});
+};
+
+export const featureGroupDefinitionGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<FeatureGroupDefinitionGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		FeatureGroupDefinitionGetResponse,
+		FeatureGroupDefinitionGetError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/feature-management/definitions/groups/{name}",
+	});
+};
+
+export const featureGroupDefinitionUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<FeatureGroupDefinitionUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		FeatureGroupDefinitionUpdateResponse,
+		FeatureGroupDefinitionUpdateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/feature-management/definitions/groups/{name}",
+	});
+};
+
+export const featuresGet = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<FeaturesGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<FeaturesGetResponse, FeaturesGetError, ThrowOnError>({
+		...options,
+		url: "/api/feature-management/features",
+	});
+};
+
+export const featuresUpdate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<FeaturesUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<FeaturesUpdateResponse, FeaturesUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/feature-management/features",
+	});
+};
+
+export const featuresDelete = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<FeaturesDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<FeaturesDeleteResponse, FeaturesDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/feature-management/features",
+	});
+};
+
+export const feedbackCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<FeedbackCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<FeedbackCreateResponse, FeedbackCreateError, ThrowOnError>({
+		...options,
+		url: "/api/platform/feedbacks",
+	});
+};
+
+export const feedbackGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<FeedbackGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<FeedbackGetListResponse, FeedbackGetListError, ThrowOnError>({
+		...options,
+		url: "/api/platform/feedbacks",
+	});
+};
+
+export const feedbackDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<FeedbackDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<FeedbackDeleteResponse, FeedbackDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/platform/feedbacks/{id}",
+	});
+};
+
+export const feedbackGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<FeedbackGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<FeedbackGetResponse, FeedbackGetError, ThrowOnError>({
+		...options,
+		url: "/api/platform/feedbacks/{id}",
+	});
+};
+
+export const feedbackAttachmentGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<FeedbackAttachmentGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<FeedbackAttachmentGetResponse, FeedbackAttachmentGetError, ThrowOnError>({
+		...options,
+		url: "/api/platform/feedbacks/{FeedbackId}/attachments/{Name}",
+	});
+};
+
+export const feedbackAttachmentDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<FeedbackAttachmentDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		FeedbackAttachmentDeleteResponse,
+		FeedbackAttachmentDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/platform/feedbacks/{FeedbackId}/attachments/{Name}",
+	});
+};
+
+export const feedbackAttachmentUpload = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<FeedbackAttachmentUploadData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		FeedbackAttachmentUploadResponse,
+		FeedbackAttachmentUploadError,
+		ThrowOnError
+	>({
+		...options,
+		...formDataBodySerializer,
+		headers: {
+			"Content-Type": null,
+			...options?.headers,
+		},
+		url: "/api/platform/feedbacks/attachments/upload",
+	});
+};
+
+export const getHandle2 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<GetHandle2Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<GetHandle2Response, GetHandle2Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-registry/{id}/{versionOptions}",
+	});
+};
+
+export const getHandle3 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<GetHandle3Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<GetHandle3Response, GetHandle3Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-instances/{id}/execution-log",
+	});
+};
+
+export const getHandle4 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<GetHandle4Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<GetHandle4Response, GetHandle4Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/version",
+	});
+};
+
+export const getHandle5 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<GetHandle5Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<GetHandle5Response, GetHandle5Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/scripting/javascript/type-definitions/{workflowDefinitionId}",
+	});
+};
+
+export const getHandle6 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<GetHandle6Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<GetHandle6Response, GetHandle6Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/designer/runtime-select-list",
+	});
+};
+
+export const getHandle7 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<GetHandle7Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<GetHandle7Response, GetHandle7Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-instances/{workflowInstanceId}/activity-stats/{activityId}",
+	});
+};
+
+export const getByDefinitionAndVersionHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<GetByDefinitionAndVersionHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		GetByDefinitionAndVersionHandleResponse,
+		GetByDefinitionAndVersionHandleError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/v{apiVersion}/workflow-definitions/{workflowDefinitionId}/{versionOptions}",
+	});
+};
+
+export const getByVersionIdHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<GetByVersionIdHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<GetByVersionIdHandleResponse, GetByVersionIdHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-definitions/{versionId}",
+	});
+};
+
+export const groupGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<GroupGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<GroupGetResponse, GroupGetError, ThrowOnError>({
+		...options,
+		url: "/api/im/groups/{groupId}",
+	});
+};
+
+export const groupSearch = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<GroupSearchData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<GroupSearchResponse, GroupSearchError, ThrowOnError>({
+		...options,
+		url: "/api/im/groups/search",
+	});
+};
+
+export const historyHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<HistoryHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<HistoryHandleResponse, HistoryHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-definitions/{definitionId}/history",
+	});
+};
+
+export const identitySessionsGetSessions = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<IdentitySessionsGetSessionsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		IdentitySessionsGetSessionsResponse,
+		IdentitySessionsGetSessionsError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/sessions",
+	});
+};
+
+export const identitySessionsRevokeSession = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<IdentitySessionsRevokeSessionData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		IdentitySessionsRevokeSessionResponse,
+		IdentitySessionsRevokeSessionError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/sessions/{sessionId}/revoke",
+	});
+};
+
+export const importHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ImportHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<ImportHandleResponse, ImportHandleError, ThrowOnError>({
+		...options,
+		...formDataBodySerializer,
+		headers: {
+			"Content-Type": null,
+			...options?.headers,
+		},
+		url: "/v{apiVersion}/workflow-definitions/{workflowDefinitionId}/import",
+	});
+};
+
+export const languageGetByName = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<LanguageGetByNameData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<LanguageGetByNameResponse, LanguageGetByNameError, ThrowOnError>({
+		...options,
+		url: "/api/localization/languages/{name}",
+	});
+};
+
+export const languageDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<LanguageDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<LanguageDeleteResponse, LanguageDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/localization/languages/{name}",
+	});
+};
+
+export const languageUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<LanguageUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<LanguageUpdateResponse, LanguageUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/localization/languages/{name}",
+	});
+};
+
+export const languageCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<LanguageCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<LanguageCreateResponse, LanguageCreateError, ThrowOnError>({
+		...options,
+		url: "/api/localization/languages",
+	});
+};
+
+export const languageGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<LanguageGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<LanguageGetListResponse, LanguageGetListError, ThrowOnError>({
+		...options,
+		url: "/api/abp/localization/languages",
+	});
+};
+
+export const layoutCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<LayoutCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<LayoutCreateResponse, LayoutCreateError, ThrowOnError>({
+		...options,
+		url: "/api/platform/layouts",
+	});
+};
+
+export const layoutGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<LayoutGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<LayoutGetListResponse, LayoutGetListError, ThrowOnError>({
+		...options,
+		url: "/api/platform/layouts",
+	});
+};
+
+export const layoutDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<LayoutDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<LayoutDeleteResponse, LayoutDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/platform/layouts/{id}",
+	});
+};
+
+export const layoutGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<LayoutGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<LayoutGetResponse, LayoutGetError, ThrowOnError>({
+		...options,
+		url: "/api/platform/layouts/{id}",
+	});
+};
+
+export const layoutUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<LayoutUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<LayoutUpdateResponse, LayoutUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/platform/layouts/{id}",
+	});
+};
+
+export const layoutGetAllList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<LayoutGetAllListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<LayoutGetAllListResponse, LayoutGetAllListError, ThrowOnError>({
+		...options,
+		url: "/api/platform/layouts/all",
+	});
+};
+
+export const listHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ListHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ListHandleResponse, ListHandleError, ThrowOnError>({
+		...options,
+		url: "/v{version}/workflow-storage-providers",
+	});
+};
+
+export const listHandle1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ListHandle1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ListHandle1Response, ListHandle1Error, ThrowOnError>({
+		...options,
+		url: "/v{version}/workflow-providers",
+	});
+};
+
+export const listHandle2 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ListHandle2Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ListHandle2Response, ListHandle2Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-instances",
+	});
+};
+
+export const listHandle3 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ListHandle3Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ListHandle3Response, ListHandle3Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-definitions",
+	});
+};
+
+export const saveHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<SaveHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<SaveHandleResponse, SaveHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-definitions",
+	});
+};
+
+export const listHandle4 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ListHandle4Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ListHandle4Response, ListHandle4Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-channels",
+	});
+};
+
+export const listHandle5 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ListHandle5Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ListHandle5Response, ListHandle5Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/features",
+	});
+};
+
+export const listHandle6 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ListHandle6Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ListHandle6Response, ListHandle6Error, ThrowOnError>({
+		...options,
+		url: "/v{version}/activities",
+	});
+};
+
+export const listHandle7 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ListHandle7Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ListHandle7Response, ListHandle7Error, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/webhook-definitions",
+	});
+};
+
+export const postHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PostHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<PostHandleResponse, PostHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/webhook-definitions",
+	});
+};
+
+export const updateHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UpdateHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<UpdateHandleResponse, UpdateHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/webhook-definitions",
+	});
+};
+
+export const listAllHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ListAllHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ListAllHandleResponse, ListAllHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-registry",
+	});
+};
+
+export const listByDefinitionVersionIdsHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ListByDefinitionVersionIdsHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		ListByDefinitionVersionIdsHandleResponse,
+		ListByDefinitionVersionIdsHandleError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/v{apiVersion}/workflow-registry/by-definition-version-ids",
+	});
+};
+
+export const listByProviderHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ListByProviderHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ListByProviderHandleResponse, ListByProviderHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-registry/by-provider/{providerName}",
+	});
+};
+
+export const loggingGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<LoggingGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<LoggingGetResponse, LoggingGetError, ThrowOnError>({
+		...options,
+		url: "/api/auditing/logging/{id}",
+	});
+};
+
+export const loggingGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<LoggingGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<LoggingGetListResponse, LoggingGetListError, ThrowOnError>({
+		...options,
+		url: "/api/auditing/logging",
+	});
+};
+
+export const loginLogin = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<LoginLoginData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<LoginLoginResponse, LoginLoginError, ThrowOnError>({
+		...options,
+		url: "/api/account/login",
+	});
+};
+
+export const loginLogout = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<LoginLogoutData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<LoginLogoutResponse, LoginLogoutError, ThrowOnError>({
+		...options,
+		url: "/api/account/logout",
+	});
+};
+
+export const loginCheckPassword = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<LoginCheckPasswordData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<LoginCheckPasswordResponse, LoginCheckPasswordError, ThrowOnError>({
+		...options,
+		url: "/api/account/check-password",
+	});
+};
+
+export const menuGetCurrentUserMenuList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MenuGetCurrentUserMenuListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		MenuGetCurrentUserMenuListResponse,
+		MenuGetCurrentUserMenuListError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/platform/menus/by-current-user",
+	});
+};
+
+export const menuGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MenuGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MenuGetResponse, MenuGetError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/{id}",
+	});
+};
+
+export const menuUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MenuUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<MenuUpdateResponse, MenuUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/{id}",
+	});
+};
+
+export const menuDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MenuDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<MenuDeleteResponse, MenuDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/{id}",
+	});
+};
+
+export const menuGetAll = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MenuGetAllData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MenuGetAllResponse, MenuGetAllError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/all",
+	});
+};
+
+export const menuGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MenuGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MenuGetListResponse, MenuGetListError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus",
+	});
+};
+
+export const menuCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MenuCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<MenuCreateResponse, MenuCreateError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus",
+	});
+};
+
+export const menuSetUserMenus = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MenuSetUserMenusData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<MenuSetUserMenusResponse, MenuSetUserMenusError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/by-user",
+	});
+};
+
+export const menuGetUserMenuList = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MenuGetUserMenuListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MenuGetUserMenuListResponse, MenuGetUserMenuListError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/by-user",
+	});
+};
+
+export const menuSetUserStartup = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MenuSetUserStartupData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<MenuSetUserStartupResponse, MenuSetUserStartupError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/startup/{id}/by-user",
+	});
+};
+
+export const menuGetUserMenuList1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MenuGetUserMenuList1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MenuGetUserMenuList1Response, MenuGetUserMenuList1Error, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/by-user/{userId}/{framework}",
+	});
+};
+
+export const menuSetRoleMenus = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MenuSetRoleMenusData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<MenuSetRoleMenusResponse, MenuSetRoleMenusError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/by-role",
+	});
+};
+
+export const menuGetRoleMenuList = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MenuGetRoleMenuListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MenuGetRoleMenuListResponse, MenuGetRoleMenuListError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/by-role",
+	});
+};
+
+export const menuSetRoleStartup = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MenuSetRoleStartupData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<MenuSetRoleStartupResponse, MenuSetRoleStartupError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/startup/{id}/by-role",
+	});
+};
+
+export const menuGetRoleMenuList1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MenuGetRoleMenuList1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MenuGetRoleMenuList1Response, MenuGetRoleMenuList1Error, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/by-role/{role}/{framework}",
+	});
+};
+
+export const myFeedbackGetMyFeedbacks = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MyFeedbackGetMyFeedbacksData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MyFeedbackGetMyFeedbacksResponse, MyFeedbackGetMyFeedbacksError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/platform/my-feedbacks",
+		},
+	);
+};
+
+export const myFriendCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MyFriendCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<MyFriendCreateResponse, MyFriendCreateError, ThrowOnError>({
+		...options,
+		url: "/api/im/my-friends",
+	});
+};
+
+export const myFriendDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MyFriendDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<MyFriendDeleteResponse, MyFriendDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/im/my-friends",
+	});
+};
+
+export const myFriendGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MyFriendGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MyFriendGetListResponse, MyFriendGetListError, ThrowOnError>({
+		...options,
+		url: "/api/im/my-friends",
+	});
+};
+
+export const myFriendAddRequest = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MyFriendAddRequestData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<MyFriendAddRequestResponse, MyFriendAddRequestError, ThrowOnError>({
+		...options,
+		url: "/api/im/my-friends/add-request",
+	});
+};
+
+export const myFriendGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MyFriendGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MyFriendGetResponse, MyFriendGetError, ThrowOnError>({
+		...options,
+		url: "/api/im/my-friends/{friendId}",
+	});
+};
+
+export const myFriendGetAllList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MyFriendGetAllListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MyFriendGetAllListResponse, MyFriendGetAllListError, ThrowOnError>({
+		...options,
+		url: "/api/im/my-friends/all",
+	});
+};
+
+export const myNotificationMarkReadState = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MyNotificationMarkReadStateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		MyNotificationMarkReadStateResponse,
+		MyNotificationMarkReadStateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/my-notifilers/mark-read-state",
+	});
+};
+
+export const myNotificationDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MyNotificationDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<MyNotificationDeleteResponse, MyNotificationDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/notifications/my-notifilers/{id}",
+	});
+};
+
+export const myNotificationGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MyNotificationGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MyNotificationGetResponse, MyNotificationGetError, ThrowOnError>({
+		...options,
+		url: "/api/notifications/my-notifilers/{id}",
+	});
+};
+
+export const myNotificationGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MyNotificationGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MyNotificationGetListResponse, MyNotificationGetListError, ThrowOnError>({
+		...options,
+		url: "/api/notifications/my-notifilers",
+	});
+};
+
+export const mySubscriptionGetAllList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MySubscriptionGetAllListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MySubscriptionGetAllListResponse, MySubscriptionGetAllListError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/notifications/my-subscribes/all",
+		},
+	);
+};
+
+export const mySubscriptionGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MySubscriptionGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<MySubscriptionGetListResponse, MySubscriptionGetListError, ThrowOnError>({
+		...options,
+		url: "/api/notifications/my-subscribes",
+	});
+};
+
+export const mySubscriptionSubscribe = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<MySubscriptionSubscribeData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<MySubscriptionSubscribeResponse, MySubscriptionSubscribeError, ThrowOnError>({
+		...options,
+		url: "/api/notifications/my-subscribes",
+	});
+};
+
+export const mySubscriptionUnSubscribe = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MySubscriptionUnSubscribeData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		MySubscriptionUnSubscribeResponse,
+		MySubscriptionUnSubscribeError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/my-subscribes",
+	});
+};
+
+export const mySubscriptionIsSubscribed = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<MySubscriptionIsSubscribedData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		MySubscriptionIsSubscribedResponse,
+		MySubscriptionIsSubscribedError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/my-subscribes/is-subscribed/{Name}",
+	});
+};
+
+export const notificationSend = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<NotificationSendData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<NotificationSendResponse, NotificationSendError, ThrowOnError>({
+		...options,
+		url: "/api/notifications/send",
+	});
+};
+
+export const notificationSend1 = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<NotificationSend1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<NotificationSend1Response, NotificationSend1Error, ThrowOnError>({
+		...options,
+		url: "/api/notifications/send/template",
+	});
+};
+
+export const notificationGetAssignableNotifiers = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<NotificationGetAssignableNotifiersData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		NotificationGetAssignableNotifiersResponse,
+		NotificationGetAssignableNotifiersError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/assignables",
+	});
+};
+
+export const notificationGetAssignableTemplates = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<NotificationGetAssignableTemplatesData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		NotificationGetAssignableTemplatesResponse,
+		NotificationGetAssignableTemplatesError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/assignable-templates",
+	});
+};
+
+export const notificationDefinitionCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<NotificationDefinitionCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		NotificationDefinitionCreateResponse,
+		NotificationDefinitionCreateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/definitions/notifications",
+	});
+};
+
+export const notificationDefinitionGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<NotificationDefinitionGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		NotificationDefinitionGetListResponse,
+		NotificationDefinitionGetListError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/definitions/notifications",
+	});
+};
+
+export const notificationDefinitionDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<NotificationDefinitionDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		NotificationDefinitionDeleteResponse,
+		NotificationDefinitionDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/definitions/notifications/{name}",
+	});
+};
+
+export const notificationDefinitionGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<NotificationDefinitionGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		NotificationDefinitionGetResponse,
+		NotificationDefinitionGetError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/definitions/notifications/{name}",
+	});
+};
+
+export const notificationDefinitionUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<NotificationDefinitionUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		NotificationDefinitionUpdateResponse,
+		NotificationDefinitionUpdateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/definitions/notifications/{name}",
+	});
+};
+
+export const notificationGroupDefinitionCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<NotificationGroupDefinitionCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		NotificationGroupDefinitionCreateResponse,
+		NotificationGroupDefinitionCreateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/definitions/groups",
+	});
+};
+
+export const notificationGroupDefinitionGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<NotificationGroupDefinitionGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		NotificationGroupDefinitionGetListResponse,
+		NotificationGroupDefinitionGetListError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/definitions/groups",
+	});
+};
+
+export const notificationGroupDefinitionDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<NotificationGroupDefinitionDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		NotificationGroupDefinitionDeleteResponse,
+		NotificationGroupDefinitionDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/definitions/groups/{name}",
+	});
+};
+
+export const notificationGroupDefinitionGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<NotificationGroupDefinitionGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		NotificationGroupDefinitionGetResponse,
+		NotificationGroupDefinitionGetError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/definitions/groups/{name}",
+	});
+};
+
+export const notificationGroupDefinitionUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<NotificationGroupDefinitionUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		NotificationGroupDefinitionUpdateResponse,
+		NotificationGroupDefinitionUpdateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/notifications/definitions/groups/{name}",
+	});
+};
+
+export const openIddictApplicationGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OpenIddictApplicationGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<OpenIddictApplicationGetResponse, OpenIddictApplicationGetError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/openiddict/applications/{id}",
+		},
+	);
+};
+
+export const openIddictApplicationUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OpenIddictApplicationUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		OpenIddictApplicationUpdateResponse,
+		OpenIddictApplicationUpdateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/openiddict/applications/{id}",
+	});
+};
+
+export const openIddictApplicationDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OpenIddictApplicationDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		OpenIddictApplicationDeleteResponse,
+		OpenIddictApplicationDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/openiddict/applications/{id}",
+	});
+};
+
+export const openIddictApplicationGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OpenIddictApplicationGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OpenIddictApplicationGetListResponse,
+		OpenIddictApplicationGetListError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/openiddict/applications",
+	});
+};
+
+export const openIddictApplicationCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OpenIddictApplicationCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		OpenIddictApplicationCreateResponse,
+		OpenIddictApplicationCreateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/openiddict/applications",
+	});
+};
+
+export const openIddictAuthorizationDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OpenIddictAuthorizationDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		OpenIddictAuthorizationDeleteResponse,
+		OpenIddictAuthorizationDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/openiddict/authorizations/{id}",
+	});
+};
+
+export const openIddictAuthorizationGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OpenIddictAuthorizationGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OpenIddictAuthorizationGetResponse,
+		OpenIddictAuthorizationGetError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/openiddict/authorizations/{id}",
+	});
+};
+
+export const openIddictAuthorizationGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OpenIddictAuthorizationGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OpenIddictAuthorizationGetListResponse,
+		OpenIddictAuthorizationGetListError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/openiddict/authorizations",
+	});
+};
+
+export const openIddictScopeCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OpenIddictScopeCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<OpenIddictScopeCreateResponse, OpenIddictScopeCreateError, ThrowOnError>({
+		...options,
+		url: "/api/openiddict/scopes",
+	});
+};
+
+export const openIddictScopeGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OpenIddictScopeGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<OpenIddictScopeGetListResponse, OpenIddictScopeGetListError, ThrowOnError>({
+		...options,
+		url: "/api/openiddict/scopes",
+	});
+};
+
+export const openIddictScopeDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OpenIddictScopeDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<OpenIddictScopeDeleteResponse, OpenIddictScopeDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/openiddict/scopes/{id}",
+	});
+};
+
+export const openIddictScopeGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OpenIddictScopeGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<OpenIddictScopeGetResponse, OpenIddictScopeGetError, ThrowOnError>({
+		...options,
+		url: "/api/openiddict/scopes/{id}",
+	});
+};
+
+export const openIddictScopeUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OpenIddictScopeUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<OpenIddictScopeUpdateResponse, OpenIddictScopeUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/openiddict/scopes/{id}",
+	});
+};
+
+export const openIddictTokenDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OpenIddictTokenDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<OpenIddictTokenDeleteResponse, OpenIddictTokenDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/openiddict/tokens/{id}",
+	});
+};
+
+export const openIddictTokenGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OpenIddictTokenGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<OpenIddictTokenGetResponse, OpenIddictTokenGetError, ThrowOnError>({
+		...options,
+		url: "/api/openiddict/tokens/{id}",
+	});
+};
+
+export const openIddictTokenGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OpenIddictTokenGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<OpenIddictTokenGetListResponse, OpenIddictTokenGetListError, ThrowOnError>({
+		...options,
+		url: "/api/openiddict/tokens",
+	});
+};
+
+export const organizationUnitsCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OrganizationUnitsCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<OrganizationUnitsCreateResponse, OrganizationUnitsCreateError, ThrowOnError>({
+		...options,
+		url: "/api/identity/organization-units",
+	});
+};
+
+export const organizationUnitsGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OrganizationUnitsGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<OrganizationUnitsGetListResponse, OrganizationUnitsGetListError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/identity/organization-units",
+		},
+	);
+};
+
+export const organizationUnitsDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OrganizationUnitsDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		OrganizationUnitsDeleteResponse,
+		OrganizationUnitsDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/organization-units/{id}",
+	});
+};
+
+export const organizationUnitsGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OrganizationUnitsGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<OrganizationUnitsGetResponse, OrganizationUnitsGetError, ThrowOnError>({
+		...options,
+		url: "/api/identity/organization-units/{id}",
+	});
+};
+
+export const organizationUnitsUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OrganizationUnitsUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<OrganizationUnitsUpdateResponse, OrganizationUnitsUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/identity/organization-units/{id}",
+	});
+};
+
+export const organizationUnitsFindChildren = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OrganizationUnitsFindChildrenData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OrganizationUnitsFindChildrenResponse,
+		OrganizationUnitsFindChildrenError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/organization-units/find-children",
+	});
+};
+
+export const organizationUnitsGetRoot = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OrganizationUnitsGetRootData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<OrganizationUnitsGetRootResponse, OrganizationUnitsGetRootError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/identity/organization-units/root-node",
+		},
+	);
+};
+
+export const organizationUnitsGetLastChildOrNull = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OrganizationUnitsGetLastChildOrNullData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OrganizationUnitsGetLastChildOrNullResponse,
+		OrganizationUnitsGetLastChildOrNullError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/organization-units/last-children",
+	});
+};
+
+export const organizationUnitsGetAllList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OrganizationUnitsGetAllListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OrganizationUnitsGetAllListResponse,
+		OrganizationUnitsGetAllListError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/organization-units/all",
+	});
+};
+
+export const organizationUnitsGetRoleNames = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OrganizationUnitsGetRoleNamesData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OrganizationUnitsGetRoleNamesResponse,
+		OrganizationUnitsGetRoleNamesError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/organization-units/{id}/role-names",
+	});
+};
+
+export const organizationUnitsGetUnaddedRoles = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OrganizationUnitsGetUnaddedRolesData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OrganizationUnitsGetUnaddedRolesResponse,
+		OrganizationUnitsGetUnaddedRolesError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/organization-units/{id}/unadded-roles",
+	});
+};
+
+export const organizationUnitsGetRoles = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OrganizationUnitsGetRolesData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OrganizationUnitsGetRolesResponse,
+		OrganizationUnitsGetRolesError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/organization-units/{id}/roles",
+	});
+};
+
+export const organizationUnitsAddRoles = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OrganizationUnitsAddRolesData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		OrganizationUnitsAddRolesResponse,
+		OrganizationUnitsAddRolesError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/organization-units/{id}/roles",
+	});
+};
+
+export const organizationUnitsGetUnaddedUsers = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OrganizationUnitsGetUnaddedUsersData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OrganizationUnitsGetUnaddedUsersResponse,
+		OrganizationUnitsGetUnaddedUsersError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/organization-units/{id}/unadded-users",
+	});
+};
+
+export const organizationUnitsGetUsers = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OrganizationUnitsGetUsersData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OrganizationUnitsGetUsersResponse,
+		OrganizationUnitsGetUsersError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/organization-units/{id}/users",
+	});
+};
+
+export const organizationUnitsAddUsers = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OrganizationUnitsAddUsersData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		OrganizationUnitsAddUsersResponse,
+		OrganizationUnitsAddUsersError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/organization-units/{id}/users",
+	});
+};
+
+export const organizationUnitsMove = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OrganizationUnitsMoveData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<OrganizationUnitsMoveResponse, OrganizationUnitsMoveError, ThrowOnError>({
+		...options,
+		url: "/api/identity/organization-units/{id}/move",
+	});
+};
+
+export const organizationUnitEntityRuleGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OrganizationUnitEntityRuleGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OrganizationUnitEntityRuleGetResponse,
+		OrganizationUnitEntityRuleGetError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/data-protection-management/entity-rule/organization-units",
+	});
+};
+
+export const organizationUnitEntityRuleCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OrganizationUnitEntityRuleCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		OrganizationUnitEntityRuleCreateResponse,
+		OrganizationUnitEntityRuleCreateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/data-protection-management/entity-rule/organization-units",
+	});
+};
+
+export const organizationUnitEntityRuleUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OrganizationUnitEntityRuleUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		OrganizationUnitEntityRuleUpdateResponse,
+		OrganizationUnitEntityRuleUpdateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/data-protection-management/entity-rule/organization-units/{id}",
+	});
+};
+
+export const ossContainerCreate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OssContainerCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<OssContainerCreateResponse, OssContainerCreateError, ThrowOnError>({
+		...options,
+		url: "/api/oss-management/containes/{name}",
+	});
+};
+
+export const ossContainerDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OssContainerDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<OssContainerDeleteResponse, OssContainerDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/oss-management/containes/{name}",
+	});
+};
+
+export const ossContainerGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OssContainerGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<OssContainerGetResponse, OssContainerGetError, ThrowOnError>({
+		...options,
+		url: "/api/oss-management/containes/{name}",
+	});
+};
+
+export const ossContainerGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OssContainerGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<OssContainerGetListResponse, OssContainerGetListError, ThrowOnError>({
+		...options,
+		url: "/api/oss-management/containes",
+	});
+};
+
+export const ossContainerGetObjectList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OssContainerGetObjectListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OssContainerGetObjectListResponse,
+		OssContainerGetObjectListError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/oss-management/containes/objects",
+	});
+};
+
+export const ossManagementSettingGetAllForCurrentTenant = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OssManagementSettingGetAllForCurrentTenantData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OssManagementSettingGetAllForCurrentTenantResponse,
+		OssManagementSettingGetAllForCurrentTenantError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/setting-management/oss-management/by-current-tenant",
+	});
+};
+
+export const ossManagementSettingGetAllForGlobal = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OssManagementSettingGetAllForGlobalData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		OssManagementSettingGetAllForGlobalResponse,
+		OssManagementSettingGetAllForGlobalError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/setting-management/oss-management/by-global",
+	});
+};
+
+export const ossObjectCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OssObjectCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<OssObjectCreateResponse, OssObjectCreateError, ThrowOnError>({
+		...options,
+		...formDataBodySerializer,
+		headers: {
+			"Content-Type": null,
+			...options?.headers,
+		},
+		url: "/api/oss-management/objects",
+	});
+};
+
+export const ossObjectDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OssObjectDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<OssObjectDeleteResponse, OssObjectDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/oss-management/objects",
+	});
+};
+
+export const ossObjectGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OssObjectGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<OssObjectGetResponse, OssObjectGetError, ThrowOnError>({
+		...options,
+		url: "/api/oss-management/objects",
+	});
+};
+
+export const ossObjectUpload = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OssObjectUploadData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<OssObjectUploadResponse, OssObjectUploadError, ThrowOnError>({
+		...options,
+		...formDataBodySerializer,
+		headers: {
+			"Content-Type": null,
+			...options?.headers,
+		},
+		url: "/api/oss-management/objects/upload",
+	});
+};
+
+export const ossObjectBulkDelete = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<OssObjectBulkDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<OssObjectBulkDeleteResponse, OssObjectBulkDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/oss-management/objects/bulk-delete",
+	});
+};
+
+export const ossObjectGetContent = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<OssObjectGetContentData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<OssObjectGetContentResponse, OssObjectGetContentError, ThrowOnError>({
+		...options,
+		url: "/api/oss-management/objects/download",
+	});
+};
+
+export const packageCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PackageCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<PackageCreateResponse, PackageCreateError, ThrowOnError>({
+		...options,
+		url: "/api/platform/packages",
+	});
+};
+
+export const packageGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PackageGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PackageGetListResponse, PackageGetListError, ThrowOnError>({
+		...options,
+		url: "/api/platform/packages",
+	});
+};
+
+export const packageDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PackageDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<PackageDeleteResponse, PackageDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/platform/packages/{id}",
+	});
+};
+
+export const packageGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PackageGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PackageGetResponse, PackageGetError, ThrowOnError>({
+		...options,
+		url: "/api/platform/packages/{id}",
+	});
+};
+
+export const packageUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PackageUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<PackageUpdateResponse, PackageUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/platform/packages/{id}",
+	});
+};
+
+export const packageUploadBlob = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PackageUploadBlobData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<PackageUploadBlobResponse, PackageUploadBlobError, ThrowOnError>({
+		...options,
+		...formDataBodySerializer,
+		headers: {
+			"Content-Type": null,
+			...options?.headers,
+		},
+		url: "/api/platform/packages/{id}/blob",
+	});
+};
+
+export const packageRemoveBlob = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PackageRemoveBlobData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<PackageRemoveBlobResponse, PackageRemoveBlobError, ThrowOnError>({
+		...options,
+		url: "/api/platform/packages/{id}/blob/{Name}",
+	});
+};
+
+export const packageDownloadBlob = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PackageDownloadBlobData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PackageDownloadBlobResponse, PackageDownloadBlobError, ThrowOnError>({
+		...options,
+		url: "/api/platform/packages/{id}/blob/{Name}",
+	});
+};
+
+export const packageGetLatest = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PackageGetLatestData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PackageGetLatestResponse, PackageGetLatestError, ThrowOnError>({
+		...options,
+		url: "/api/platform/packages/{Name}/latest",
+	});
+};
+
+export const packageGetLatest1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PackageGetLatest1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PackageGetLatest1Response, PackageGetLatest1Error, ThrowOnError>({
+		...options,
+		url: "/api/platform/packages/{Name}/latest/{Version}",
+	});
+};
+
+export const permissionDefinitionCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PermissionDefinitionCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		PermissionDefinitionCreateResponse,
+		PermissionDefinitionCreateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/permission-management/definitions",
+	});
+};
+
+export const permissionDefinitionGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PermissionDefinitionGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		PermissionDefinitionGetListResponse,
+		PermissionDefinitionGetListError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/permission-management/definitions",
+	});
+};
+
+export const permissionDefinitionDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PermissionDefinitionDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		PermissionDefinitionDeleteResponse,
+		PermissionDefinitionDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/permission-management/definitions/{name}",
+	});
+};
+
+export const permissionDefinitionGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PermissionDefinitionGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PermissionDefinitionGetResponse, PermissionDefinitionGetError, ThrowOnError>({
+		...options,
+		url: "/api/permission-management/definitions/{name}",
+	});
+};
+
+export const permissionDefinitionUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PermissionDefinitionUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		PermissionDefinitionUpdateResponse,
+		PermissionDefinitionUpdateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/permission-management/definitions/{name}",
+	});
+};
+
+export const permissionGroupDefinitionCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PermissionGroupDefinitionCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		PermissionGroupDefinitionCreateResponse,
+		PermissionGroupDefinitionCreateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/permission-management/definitions/groups",
+	});
+};
+
+export const permissionGroupDefinitionGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PermissionGroupDefinitionGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		PermissionGroupDefinitionGetListResponse,
+		PermissionGroupDefinitionGetListError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/permission-management/definitions/groups",
+	});
+};
+
+export const permissionGroupDefinitionDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PermissionGroupDefinitionDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		PermissionGroupDefinitionDeleteResponse,
+		PermissionGroupDefinitionDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/permission-management/definitions/groups/{name}",
+	});
+};
+
+export const permissionGroupDefinitionGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PermissionGroupDefinitionGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		PermissionGroupDefinitionGetResponse,
+		PermissionGroupDefinitionGetError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/permission-management/definitions/groups/{name}",
+	});
+};
+
+export const permissionGroupDefinitionUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PermissionGroupDefinitionUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		PermissionGroupDefinitionUpdateResponse,
+		PermissionGroupDefinitionUpdateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/permission-management/definitions/groups/{name}",
+	});
+};
+
+export const permissionsGet = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PermissionsGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PermissionsGetResponse, PermissionsGetError, ThrowOnError>({
+		...options,
+		url: "/api/permission-management/permissions",
+	});
+};
+
+export const permissionsUpdate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PermissionsUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<PermissionsUpdateResponse, PermissionsUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/permission-management/permissions",
+	});
+};
+
+export const privateFilesUpload = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PrivateFilesUploadData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<PrivateFilesUploadResponse, PrivateFilesUploadError, ThrowOnError>({
+		...options,
+		...formDataBodySerializer,
+		headers: {
+			"Content-Type": null,
+			...options?.headers,
+		},
+		url: "/api/files/private",
+	});
+};
+
+export const privateFilesDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PrivateFilesDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<PrivateFilesDeleteResponse, PrivateFilesDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/files/private",
+	});
+};
+
+export const privateFilesUpload1 = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PrivateFilesUpload1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<PrivateFilesUpload1Response, PrivateFilesUpload1Error, ThrowOnError>({
+		...options,
+		...formDataBodySerializer,
+		headers: {
+			"Content-Type": null,
+			...options?.headers,
+		},
+		url: "/api/files/private/upload",
+	});
+};
+
+export const privateFilesGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PrivateFilesGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PrivateFilesGetListResponse, PrivateFilesGetListError, ThrowOnError>({
+		...options,
+		url: "/api/files/private/search",
+	});
+};
+
+export const privateFilesGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PrivateFilesGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PrivateFilesGetResponse, PrivateFilesGetError, ThrowOnError>({
+		...options,
+		url: "/api/files/private/{Name}",
+	});
+};
+
+export const privateFilesGet1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PrivateFilesGet1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PrivateFilesGet1Response, PrivateFilesGet1Error, ThrowOnError>({
+		...options,
+		url: "/api/files/private/{Name}/{Process}",
+	});
+};
+
+export const privateFilesGet2 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PrivateFilesGet2Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PrivateFilesGet2Response, PrivateFilesGet2Error, ThrowOnError>({
+		...options,
+		url: "/api/files/private/p/{Path}/{Name}",
+	});
+};
+
+export const privateFilesGet3 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PrivateFilesGet3Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PrivateFilesGet3Response, PrivateFilesGet3Error, ThrowOnError>({
+		...options,
+		url: "/api/files/private/p/{Path}/{Name}/{Process}",
+	});
+};
+
+export const privateFilesGet4 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PrivateFilesGet4Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PrivateFilesGet4Response, PrivateFilesGet4Error, ThrowOnError>({
+		...options,
+		url: "/api/files/private/t/{TenantId}/{Name}",
+	});
+};
+
+export const privateFilesGet5 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PrivateFilesGet5Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PrivateFilesGet5Response, PrivateFilesGet5Error, ThrowOnError>({
+		...options,
+		url: "/api/files/private/t/{TenantId}/{Name}/{Process}",
+	});
+};
+
+export const privateFilesGet6 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PrivateFilesGet6Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PrivateFilesGet6Response, PrivateFilesGet6Error, ThrowOnError>({
+		...options,
+		url: "/api/files/private/t/{TenantId}/p/{Path}/{Name}",
+	});
+};
+
+export const privateFilesGet7 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PrivateFilesGet7Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PrivateFilesGet7Response, PrivateFilesGet7Error, ThrowOnError>({
+		...options,
+		url: "/api/files/private/t/{TenantId}/p/{Path}/{Name}/{Process}",
+	});
+};
+
+export const privateFilesGetShareList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PrivateFilesGetShareListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PrivateFilesGetShareListResponse, PrivateFilesGetShareListError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/files/private/share",
+		},
+	);
+};
+
+export const privateFilesShare = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PrivateFilesShareData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<PrivateFilesShareResponse, PrivateFilesShareError, ThrowOnError>({
+		...options,
+		url: "/api/files/private/share",
+	});
+};
+
+export const profileGetSessions = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ProfileGetSessionsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ProfileGetSessionsResponse, ProfileGetSessionsError, ThrowOnError>({
+		...options,
+		url: "/api/account/my-profile/sessions",
+	});
+};
+
+export const profileRevokeSession = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ProfileRevokeSessionData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<ProfileRevokeSessionResponse, ProfileRevokeSessionError, ThrowOnError>({
+		...options,
+		url: "/api/account/my-profile/sessions/{sessionId}/revoke",
+	});
+};
+
+export const profileGetTwoFactorEnabled = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ProfileGetTwoFactorEnabledData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		ProfileGetTwoFactorEnabledResponse,
+		ProfileGetTwoFactorEnabledError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/account/my-profile/two-factor",
+	});
+};
+
+export const profileChangeTwoFactorEnabled = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ProfileChangeTwoFactorEnabledData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		ProfileChangeTwoFactorEnabledResponse,
+		ProfileChangeTwoFactorEnabledError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/account/my-profile/change-two-factor",
+	});
+};
+
+export const profileSendChangePhoneNumberCode = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ProfileSendChangePhoneNumberCodeData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		ProfileSendChangePhoneNumberCodeResponse,
+		ProfileSendChangePhoneNumberCodeError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/account/my-profile/send-phone-number-change-code",
+	});
+};
+
+export const profileChangePhoneNumber = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ProfileChangePhoneNumberData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<ProfileChangePhoneNumberResponse, ProfileChangePhoneNumberError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/account/my-profile/change-phone-number",
+		},
+	);
+};
+
+export const profileSendEmailConfirmLink = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ProfileSendEmailConfirmLinkData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		ProfileSendEmailConfirmLinkResponse,
+		ProfileSendEmailConfirmLinkError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/account/my-profile/send-email-confirm-link",
+	});
+};
+
+export const profileConfirmEmail = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ProfileConfirmEmailData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<ProfileConfirmEmailResponse, ProfileConfirmEmailError, ThrowOnError>({
+		...options,
+		url: "/api/account/my-profile/confirm-email",
+	});
+};
+
+export const profileGetAuthenticator = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ProfileGetAuthenticatorData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ProfileGetAuthenticatorResponse, ProfileGetAuthenticatorError, ThrowOnError>({
+		...options,
+		url: "/api/account/my-profile/authenticator",
+	});
+};
+
+export const profileVerifyAuthenticatorCode = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ProfileVerifyAuthenticatorCodeData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		ProfileVerifyAuthenticatorCodeResponse,
+		ProfileVerifyAuthenticatorCodeError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/account/my-profile/verify-authenticator-code",
+	});
+};
+
+export const profileResetAuthenticator = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ProfileResetAuthenticatorData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		ProfileResetAuthenticatorResponse,
+		ProfileResetAuthenticatorError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/account/my-profile/reset-authenticator",
+	});
+};
+
+export const profileGet = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ProfileGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ProfileGetResponse, ProfileGetError, ThrowOnError>({
+		...options,
+		url: "/api/account/my-profile",
+	});
+};
+
+export const profileUpdate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ProfileUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<ProfileUpdateResponse, ProfileUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/account/my-profile",
+	});
+};
+
+export const profileChangePassword = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ProfileChangePasswordData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<ProfileChangePasswordResponse, ProfileChangePasswordError, ThrowOnError>({
+		...options,
+		url: "/api/account/my-profile/change-password",
+	});
+};
+
+export const publicFilesUpload = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PublicFilesUploadData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<PublicFilesUploadResponse, PublicFilesUploadError, ThrowOnError>({
+		...options,
+		...formDataBodySerializer,
+		headers: {
+			"Content-Type": null,
+			...options?.headers,
+		},
+		url: "/api/files/public",
+	});
+};
+
+export const publicFilesDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PublicFilesDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<PublicFilesDeleteResponse, PublicFilesDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/files/public",
+	});
+};
+
+export const publicFilesUpload1 = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PublicFilesUpload1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<PublicFilesUpload1Response, PublicFilesUpload1Error, ThrowOnError>({
+		...options,
+		...formDataBodySerializer,
+		headers: {
+			"Content-Type": null,
+			...options?.headers,
+		},
+		url: "/api/files/public/upload",
+	});
+};
+
+export const publicFilesGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<PublicFilesGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PublicFilesGetListResponse, PublicFilesGetListError, ThrowOnError>({
+		...options,
+		url: "/api/files/public/search",
+	});
+};
+
+export const publicFilesGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PublicFilesGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PublicFilesGetResponse, PublicFilesGetError, ThrowOnError>({
+		...options,
+		url: "/api/files/public/{Name}",
+	});
+};
+
+export const publicFilesGet1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PublicFilesGet1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PublicFilesGet1Response, PublicFilesGet1Error, ThrowOnError>({
+		...options,
+		url: "/api/files/public/{Name}/{Process}",
+	});
+};
+
+export const publicFilesGet2 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PublicFilesGet2Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PublicFilesGet2Response, PublicFilesGet2Error, ThrowOnError>({
+		...options,
+		url: "/api/files/public/p/{Path}/{Name}",
+	});
+};
+
+export const publicFilesGet3 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PublicFilesGet3Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PublicFilesGet3Response, PublicFilesGet3Error, ThrowOnError>({
+		...options,
+		url: "/api/files/public/p/{Path}/{Name}/{Process}",
+	});
+};
+
+export const publicFilesGet4 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PublicFilesGet4Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PublicFilesGet4Response, PublicFilesGet4Error, ThrowOnError>({
+		...options,
+		url: "/api/files/public/t/{TenantId}/{Name}",
+	});
+};
+
+export const publicFilesGet5 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PublicFilesGet5Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PublicFilesGet5Response, PublicFilesGet5Error, ThrowOnError>({
+		...options,
+		url: "/api/files/public/t/{TenantId}/{Name}/{Process}",
+	});
+};
+
+export const publicFilesGet6 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PublicFilesGet6Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PublicFilesGet6Response, PublicFilesGet6Error, ThrowOnError>({
+		...options,
+		url: "/api/files/public/t/{TenantId}/p/{Path}/{Name}",
+	});
+};
+
+export const publicFilesGet7 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PublicFilesGet7Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<PublicFilesGet7Response, PublicFilesGet7Error, ThrowOnError>({
+		...options,
+		url: "/api/files/public/t/{TenantId}/p/{Path}/{Name}/{Process}",
+	});
+};
+
+export const publishHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<PublishHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<PublishHandleResponse, PublishHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-definitions/{workflowDefinitionId}/publish",
+	});
+};
+
+export const resourceGetByName = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ResourceGetByNameData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ResourceGetByNameResponse, ResourceGetByNameError, ThrowOnError>({
+		...options,
+		url: "/api/localization/resources/{name}",
+	});
+};
+
+export const resourceDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ResourceDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<ResourceDeleteResponse, ResourceDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/localization/resources/{name}",
+	});
+};
+
+export const resourceUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<ResourceUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<ResourceUpdateResponse, ResourceUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/localization/resources/{name}",
+	});
+};
+
+export const resourceCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ResourceCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<ResourceCreateResponse, ResourceCreateError, ThrowOnError>({
+		...options,
+		url: "/api/localization/resources",
+	});
+};
+
+export const resourceGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ResourceGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ResourceGetListResponse, ResourceGetListError, ThrowOnError>({
+		...options,
+		url: "/api/abp/localization/resources",
+	});
+};
+
+export const restoreHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RestoreHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<RestoreHandleResponse, RestoreHandleError, ThrowOnError>({
+		...options,
+		...formDataBodySerializer,
+		headers: {
+			"Content-Type": null,
+			...options?.headers,
+		},
+		url: "/v{apiVersion}/workflow-definitions/restore",
+	});
+};
+
+export const retractHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RetractHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<RetractHandleResponse, RetractHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-definitions/{workflowDefinitionId}/retract",
+	});
+};
+
+export const retryHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RetryHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<RetryHandleResponse, RetryHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-instances/{id}/retry",
+	});
+};
+
+export const revertHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RevertHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<RevertHandleResponse, RevertHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflow-definitions/{definitionId}/revert/{version}",
+	});
+};
+
+export const roleGetOrganizationUnits = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RoleGetOrganizationUnitsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<RoleGetOrganizationUnitsResponse, RoleGetOrganizationUnitsError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/identity/roles/{id}/organization-units",
+		},
+	);
+};
+
+export const roleSetOrganizationUnits = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RoleSetOrganizationUnitsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<RoleSetOrganizationUnitsResponse, RoleSetOrganizationUnitsError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/identity/roles/{id}/organization-units",
+		},
+	);
+};
+
+export const roleRemoveOrganizationUnits = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RoleRemoveOrganizationUnitsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		RoleRemoveOrganizationUnitsResponse,
+		RoleRemoveOrganizationUnitsError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/roles/{id}/organization-units/{ouId}",
+	});
+};
+
+export const roleGetClaims = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RoleGetClaimsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<RoleGetClaimsResponse, RoleGetClaimsError, ThrowOnError>({
+		...options,
+		url: "/api/identity/roles/{id}/claims",
+	});
+};
+
+export const roleAddClaim = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RoleAddClaimData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<RoleAddClaimResponse, RoleAddClaimError, ThrowOnError>({
+		...options,
+		url: "/api/identity/roles/{id}/claims",
+	});
+};
+
+export const roleUpdateClaim = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RoleUpdateClaimData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<RoleUpdateClaimResponse, RoleUpdateClaimError, ThrowOnError>({
+		...options,
+		url: "/api/identity/roles/{id}/claims",
+	});
+};
+
+export const roleDeleteClaim = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RoleDeleteClaimData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<RoleDeleteClaimResponse, RoleDeleteClaimError, ThrowOnError>({
+		...options,
+		url: "/api/identity/roles/{id}/claims",
+	});
+};
+
+export const roleGetAllList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<RoleGetAllListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<RoleGetAllListResponse, RoleGetAllListError, ThrowOnError>({
+		...options,
+		url: "/api/identity/roles/all",
+	});
+};
+
+export const roleGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<RoleGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<RoleGetListResponse, RoleGetListError, ThrowOnError>({
+		...options,
+		url: "/api/identity/roles",
+	});
+};
+
+export const roleCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<RoleCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<RoleCreateResponse, RoleCreateError, ThrowOnError>({
+		...options,
+		url: "/api/identity/roles",
+	});
+};
+
+export const roleGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RoleGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<RoleGetResponse, RoleGetError, ThrowOnError>({
+		...options,
+		url: "/api/identity/roles/{id}",
+	});
+};
+
+export const roleUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RoleUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<RoleUpdateResponse, RoleUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/identity/roles/{id}",
+	});
+};
+
+export const roleDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RoleDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<RoleDeleteResponse, RoleDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/identity/roles/{id}",
+	});
+};
+
+export const roleEntityRuleGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RoleEntityRuleGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<RoleEntityRuleGetResponse, RoleEntityRuleGetError, ThrowOnError>({
+		...options,
+		url: "/api/data-protection-management/entity-rule/roles",
+	});
+};
+
+export const roleEntityRuleCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<RoleEntityRuleCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<RoleEntityRuleCreateResponse, RoleEntityRuleCreateError, ThrowOnError>({
+		...options,
+		url: "/api/data-protection-management/entity-rule/roles",
+	});
+};
+
+export const roleEntityRuleUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<RoleEntityRuleUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<RoleEntityRuleUpdateResponse, RoleEntityRuleUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/data-protection-management/entity-rule/roles/{id}",
+	});
+};
+
+export const securityLogDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<SecurityLogDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<SecurityLogDeleteResponse, SecurityLogDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/auditing/security-log/{id}",
+	});
+};
+
+export const securityLogGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<SecurityLogGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<SecurityLogGetResponse, SecurityLogGetError, ThrowOnError>({
+		...options,
+		url: "/api/auditing/security-log/{id}",
+	});
+};
+
+export const securityLogGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<SecurityLogGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<SecurityLogGetListResponse, SecurityLogGetListError, ThrowOnError>({
+		...options,
+		url: "/api/auditing/security-log",
+	});
+};
+
+export const settingSetCurrentTenant = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<SettingSetCurrentTenantData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<SettingSetCurrentTenantResponse, SettingSetCurrentTenantError, ThrowOnError>({
+		...options,
+		url: "/api/setting-management/settings/change-current-tenant",
+	});
+};
+
+export const settingSetGlobal = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<SettingSetGlobalData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<SettingSetGlobalResponse, SettingSetGlobalError, ThrowOnError>({
+		...options,
+		url: "/api/setting-management/settings/change-global",
+	});
+};
+
+export const settingGetAllForGlobal = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<SettingGetAllForGlobalData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<SettingGetAllForGlobalResponse, SettingGetAllForGlobalError, ThrowOnError>({
+		...options,
+		url: "/api/setting-management/settings/by-global",
+	});
+};
+
+export const settingGetAllForCurrentTenant = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<SettingGetAllForCurrentTenantData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		SettingGetAllForCurrentTenantResponse,
+		SettingGetAllForCurrentTenantError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/setting-management/settings/by-current-tenant",
+	});
+};
+
+export const settingSendTestEmail = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<SettingSendTestEmailData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<SettingSendTestEmailResponse, SettingSendTestEmailError, ThrowOnError>({
+		...options,
+		url: "/api/setting-management/settings/send-test-email",
+	});
+};
+
+export const settingDefinitionCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<SettingDefinitionCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<SettingDefinitionCreateResponse, SettingDefinitionCreateError, ThrowOnError>({
+		...options,
+		url: "/api/setting-management/settings/definitions",
+	});
+};
+
+export const settingDefinitionGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<SettingDefinitionGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<SettingDefinitionGetListResponse, SettingDefinitionGetListError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/setting-management/settings/definitions",
+		},
+	);
+};
+
+export const settingDefinitionDeleteOrRestore = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<SettingDefinitionDeleteOrRestoreData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		SettingDefinitionDeleteOrRestoreResponse,
+		SettingDefinitionDeleteOrRestoreError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/setting-management/settings/definitions/{name}",
+	});
+};
+
+export const settingDefinitionGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<SettingDefinitionGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<SettingDefinitionGetResponse, SettingDefinitionGetError, ThrowOnError>({
+		...options,
+		url: "/api/setting-management/settings/definitions/{name}",
+	});
+};
+
+export const settingDefinitionUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<SettingDefinitionUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<SettingDefinitionUpdateResponse, SettingDefinitionUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/setting-management/settings/definitions/{name}",
+	});
+};
+
+export const staticFilesUpload = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<StaticFilesUploadData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<StaticFilesUploadResponse, StaticFilesUploadError, ThrowOnError>({
+		...options,
+		...formDataBodySerializer,
+		headers: {
+			"Content-Type": null,
+			...options?.headers,
+		},
+		url: "/api/files/static",
+	});
+};
+
+export const staticFilesGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<StaticFilesGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<StaticFilesGetResponse, StaticFilesGetError, ThrowOnError>({
+		...options,
+		url: "/api/files/static/{Bucket}/{Name}",
+	});
+};
+
+export const staticFilesGet1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<StaticFilesGet1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<StaticFilesGet1Response, StaticFilesGet1Error, ThrowOnError>({
+		...options,
+		url: "/api/files/static/{Bucket}/{Name}/{Process}",
+	});
+};
+
+export const staticFilesGet2 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<StaticFilesGet2Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<StaticFilesGet2Response, StaticFilesGet2Error, ThrowOnError>({
+		...options,
+		url: "/api/files/static/{Bucket}/p/{Path}/{Name}",
+	});
+};
+
+export const staticFilesGet3 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<StaticFilesGet3Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<StaticFilesGet3Response, StaticFilesGet3Error, ThrowOnError>({
+		...options,
+		url: "/api/files/static/{Bucket}/p/{Path}/{Name}/{Process}",
+	});
+};
+
+export const staticFilesGet4 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<StaticFilesGet4Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<StaticFilesGet4Response, StaticFilesGet4Error, ThrowOnError>({
+		...options,
+		url: "/api/files/static/t/{TenantId}/{Bucket}/{Name}",
+	});
+};
+
+export const staticFilesGet5 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<StaticFilesGet5Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<StaticFilesGet5Response, StaticFilesGet5Error, ThrowOnError>({
+		...options,
+		url: "/api/files/static/t/{TenantId}/{Bucket}/{Name}/{Process}",
+	});
+};
+
+export const staticFilesGet6 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<StaticFilesGet6Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<StaticFilesGet6Response, StaticFilesGet6Error, ThrowOnError>({
+		...options,
+		url: "/api/files/static/t/{TenantId}/{Bucket}/p/{Path}/{Name}",
+	});
+};
+
+export const staticFilesGet7 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<StaticFilesGet7Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<StaticFilesGet7Response, StaticFilesGet7Error, ThrowOnError>({
+		...options,
+		url: "/api/files/static/t/{TenantId}/{Bucket}/p/{Path}/{Name}/{Process}",
+	});
+};
+
+export const tenantGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TenantGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<TenantGetResponse, TenantGetError, ThrowOnError>({
+		...options,
+		url: "/api/saas/tenants/{id}",
+	});
+};
+
+export const tenantUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TenantUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<TenantUpdateResponse, TenantUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/saas/tenants/{id}",
+	});
+};
+
+export const tenantDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TenantDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<TenantDeleteResponse, TenantDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/saas/tenants/{id}",
+	});
+};
+
+export const tenantGet1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TenantGet1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<TenantGet1Response, TenantGet1Error, ThrowOnError>({
+		...options,
+		url: "/api/saas/tenants/by-name/{name}",
+	});
+};
+
+export const tenantGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<TenantGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<TenantGetListResponse, TenantGetListError, ThrowOnError>({
+		...options,
+		url: "/api/saas/tenants",
+	});
+};
+
+export const tenantCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<TenantCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<TenantCreateResponse, TenantCreateError, ThrowOnError>({
+		...options,
+		url: "/api/saas/tenants",
+	});
+};
+
+export const tenantGetConnectionString = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TenantGetConnectionStringData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		TenantGetConnectionStringResponse,
+		TenantGetConnectionStringError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/saas/tenants/{id}/connection-string/{name}",
+	});
+};
+
+export const tenantDeleteConnectionString = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TenantDeleteConnectionStringData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		TenantDeleteConnectionStringResponse,
+		TenantDeleteConnectionStringError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/saas/tenants/{id}/connection-string/{name}",
+	});
+};
+
+export const tenantGetConnectionString1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TenantGetConnectionString1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		TenantGetConnectionString1Response,
+		TenantGetConnectionString1Error,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/saas/tenants/{id}/connection-string",
+	});
+};
+
+export const tenantSetConnectionString = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TenantSetConnectionStringData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		TenantSetConnectionStringResponse,
+		TenantSetConnectionStringError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/saas/tenants/{id}/connection-string",
+	});
+};
+
+export const textSetText = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<TextSetTextData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<TextSetTextResponse, TextSetTextError, ThrowOnError>({
+		...options,
+		url: "/api/localization/texts",
+	});
+};
+
+export const textRestoreToDefault = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TextRestoreToDefaultData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<TextRestoreToDefaultResponse, TextRestoreToDefaultError, ThrowOnError>({
+		...options,
+		url: "/api/localization/texts/restore-to-default",
+	});
+};
+
+export const textGetByCultureKey = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TextGetByCultureKeyData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<TextGetByCultureKeyResponse, TextGetByCultureKeyError, ThrowOnError>({
+		...options,
+		url: "/api/abp/localization/texts/by-culture-key",
+	});
+};
+
+export const textGetList = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TextGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<TextGetListResponse, TextGetListError, ThrowOnError>({
+		...options,
+		url: "/api/abp/localization/texts",
+	});
+};
+
+export const textTemplateContentGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TextTemplateContentGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<TextTemplateContentGetResponse, TextTemplateContentGetError, ThrowOnError>({
+		...options,
+		url: "/api/text-templating/templates/content/{Name}",
+	});
+};
+
+export const textTemplateContentGet1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TextTemplateContentGet1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<TextTemplateContentGet1Response, TextTemplateContentGet1Error, ThrowOnError>({
+		...options,
+		url: "/api/text-templating/templates/content/{Culture}/{Name}",
+	});
+};
+
+export const textTemplateContentRestoreToDefault = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TextTemplateContentRestoreToDefaultData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		TextTemplateContentRestoreToDefaultResponse,
+		TextTemplateContentRestoreToDefaultError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/text-templating/templates/content/{name}/restore-to-default",
+	});
+};
+
+export const textTemplateContentUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TextTemplateContentUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		TextTemplateContentUpdateResponse,
+		TextTemplateContentUpdateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/text-templating/templates/content/{name}",
+	});
+};
+
+export const textTemplateDefinitionCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<TextTemplateDefinitionCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		TextTemplateDefinitionCreateResponse,
+		TextTemplateDefinitionCreateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/text-templating/template/definitions",
+	});
+};
+
+export const textTemplateDefinitionGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<TextTemplateDefinitionGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		TextTemplateDefinitionGetListResponse,
+		TextTemplateDefinitionGetListError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/text-templating/template/definitions",
+	});
+};
+
+export const textTemplateDefinitionDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TextTemplateDefinitionDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		TextTemplateDefinitionDeleteResponse,
+		TextTemplateDefinitionDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/text-templating/template/definitions/{name}",
+	});
+};
+
+export const textTemplateDefinitionGetByName = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TextTemplateDefinitionGetByNameData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		TextTemplateDefinitionGetByNameResponse,
+		TextTemplateDefinitionGetByNameError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/text-templating/template/definitions/{name}",
+	});
+};
+
+export const textTemplateDefinitionUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TextTemplateDefinitionUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		TextTemplateDefinitionUpdateResponse,
+		TextTemplateDefinitionUpdateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/text-templating/template/definitions/{name}",
+	});
+};
+
+export const themeSettingGet = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ThemeSettingGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<ThemeSettingGetResponse, ThemeSettingGetError, ThrowOnError>({
+		...options,
+		url: "/api/platform/theme/vue-vben-admin",
+	});
+};
+
+export const themeSettingChange = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<ThemeSettingChangeData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<ThemeSettingChangeResponse, ThemeSettingChangeError, ThrowOnError>({
+		...options,
+		url: "/api/platform/theme/vue-vben-admin/change",
+	});
+};
+
+export const triggerHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TriggerHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<TriggerHandleResponse, TriggerHandleError, ThrowOnError>({
+		...options,
+		url: "/v{apiVersion}/workflows/trigger",
+	});
+};
+
+export const triggerEndpointHandle = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TriggerEndpointHandleData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<TriggerEndpointHandleResponse, TriggerEndpointHandleError, ThrowOnError>({
+		...options,
+		url: "/signals/trigger/{token}",
+	});
+};
+
+export const triggerEndpointHandle1 = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<TriggerEndpointHandle1Data, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<TriggerEndpointHandle1Response, TriggerEndpointHandle1Error, ThrowOnError>({
+		...options,
+		url: "/signals/trigger/{token}",
+	});
+};
+
+export const userGetOrganizationUnits = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserGetOrganizationUnitsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserGetOrganizationUnitsResponse, UserGetOrganizationUnitsError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/identity/users/{id}/organization-units",
+		},
+	);
+};
+
+export const userSetOrganizationUnits = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserSetOrganizationUnitsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<UserSetOrganizationUnitsResponse, UserSetOrganizationUnitsError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/identity/users/{id}/organization-units",
+		},
+	);
+};
+
+export const userRemoveOrganizationUnits = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserRemoveOrganizationUnitsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		UserRemoveOrganizationUnitsResponse,
+		UserRemoveOrganizationUnitsError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/users/{id}/organization-units/{ouId}",
+	});
+};
+
+export const userGetClaims = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserGetClaimsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserGetClaimsResponse, UserGetClaimsError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/{id}/claims",
+	});
+};
+
+export const userAddClaim = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserAddClaimData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<UserAddClaimResponse, UserAddClaimError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/{id}/claims",
+	});
+};
+
+export const userUpdateClaim = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserUpdateClaimData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<UserUpdateClaimResponse, UserUpdateClaimError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/{id}/claims",
+	});
+};
+
+export const userDeleteClaim = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserDeleteClaimData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<UserDeleteClaimResponse, UserDeleteClaimError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/{id}/claims",
+	});
+};
+
+export const userChangePassword = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserChangePasswordData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<UserChangePasswordResponse, UserChangePasswordError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/change-password",
+	});
+};
+
+export const userChangeTwoFactorEnabled = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserChangeTwoFactorEnabledData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		UserChangeTwoFactorEnabledResponse,
+		UserChangeTwoFactorEnabledError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/identity/users/change-two-factor",
+	});
+};
+
+export const userLock = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserLockData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<UserLockResponse, UserLockError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/{id}/lock/{seconds}",
+	});
+};
+
+export const userUnLock = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserUnLockData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<UserUnLockResponse, UserUnLockError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/{id}/unlock",
+	});
+};
+
+export const userGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserGetResponse, UserGetError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/{id}",
+	});
+};
+
+export const userUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<UserUpdateResponse, UserUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/{id}",
+	});
+};
+
+export const userDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<UserDeleteResponse, UserDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/{id}",
+	});
+};
+
+export const userGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserGetListResponse, UserGetListError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users",
+	});
+};
+
+export const userCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<UserCreateResponse, UserCreateError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users",
+	});
+};
+
+export const userGetRoles = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserGetRolesData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserGetRolesResponse, UserGetRolesError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/{id}/roles",
+	});
+};
+
+export const userUpdateRoles = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserUpdateRolesData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<UserUpdateRolesResponse, UserUpdateRolesError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/{id}/roles",
+	});
+};
+
+export const userGetAssignableRoles = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserGetAssignableRolesData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserGetAssignableRolesResponse, UserGetAssignableRolesError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/assignable-roles",
+	});
+};
+
+export const userFindByUsername = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserFindByUsernameData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserFindByUsernameResponse, UserFindByUsernameError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/by-username/{userName}",
+	});
+};
+
+export const userFindByEmail = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserFindByEmailData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserFindByEmailResponse, UserFindByEmailError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/by-email/{email}",
+	});
+};
+
+export const userFavoriteMenuCreate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserFavoriteMenuCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<UserFavoriteMenuCreateResponse, UserFavoriteMenuCreateError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/favorites/{userId}",
+	});
+};
+
+export const userFavoriteMenuGetList = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserFavoriteMenuGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserFavoriteMenuGetListResponse, UserFavoriteMenuGetListError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/favorites/{userId}",
+	});
+};
+
+export const userFavoriteMenuUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserFavoriteMenuUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<UserFavoriteMenuUpdateResponse, UserFavoriteMenuUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/favorites/{userId}",
+	});
+};
+
+export const userFavoriteMenuCreateMyFavoriteMenu = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserFavoriteMenuCreateMyFavoriteMenuData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		UserFavoriteMenuCreateMyFavoriteMenuResponse,
+		UserFavoriteMenuCreateMyFavoriteMenuError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/platform/menus/favorites/my-favorite-menus",
+	});
+};
+
+export const userFavoriteMenuGetMyFavoriteMenuList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserFavoriteMenuGetMyFavoriteMenuListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		UserFavoriteMenuGetMyFavoriteMenuListResponse,
+		UserFavoriteMenuGetMyFavoriteMenuListError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/platform/menus/favorites/my-favorite-menus",
+	});
+};
+
+export const userFavoriteMenuUpdateMyFavoriteMenu = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserFavoriteMenuUpdateMyFavoriteMenuData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		UserFavoriteMenuUpdateMyFavoriteMenuResponse,
+		UserFavoriteMenuUpdateMyFavoriteMenuError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/platform/menus/favorites/my-favorite-menus",
+	});
+};
+
+export const userFavoriteMenuDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserFavoriteMenuDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<UserFavoriteMenuDeleteResponse, UserFavoriteMenuDeleteError, ThrowOnError>({
+		...options,
+		url: "/api/platform/menus/favorites/{userId}/{MenuId}",
+	});
+};
+
+export const userFavoriteMenuDeleteMyFavoriteMenu = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserFavoriteMenuDeleteMyFavoriteMenuData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		UserFavoriteMenuDeleteMyFavoriteMenuResponse,
+		UserFavoriteMenuDeleteMyFavoriteMenuError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/platform/menus/favorites/my-favorite-menus/{MenuId}",
+	});
+};
+
+export const userGroupApplyJoinGroup = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserGroupApplyJoinGroupData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<UserGroupApplyJoinGroupResponse, UserGroupApplyJoinGroupError, ThrowOnError>({
+		...options,
+		url: "/api/im/user-groups/join",
+	});
+};
+
+export const userGroupGetGroupUsers = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserGroupGetGroupUsersData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserGroupGetGroupUsersResponse, UserGroupGetGroupUsersError, ThrowOnError>({
+		...options,
+		url: "/api/im/user-groups",
+	});
+};
+
+export const userGroupGetMyGroups = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserGroupGetMyGroupsData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserGroupGetMyGroupsResponse, UserGroupGetMyGroupsError, ThrowOnError>({
+		...options,
+		url: "/api/im/user-groups/me",
+	});
+};
+
+export const userGroupGroupAcceptUser = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserGroupGroupAcceptUserData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<UserGroupGroupAcceptUserResponse, UserGroupGroupAcceptUserError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/im/user-groups/accept",
+		},
+	);
+};
+
+export const userGroupGroupRemoveUser = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserGroupGroupRemoveUserData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<UserGroupGroupRemoveUserResponse, UserGroupGroupRemoveUserError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/im/user-groups/remove",
+		},
+	);
+};
+
+export const userLookupFindById = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserLookupFindByIdData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserLookupFindByIdResponse, UserLookupFindByIdError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/lookup/{id}",
+	});
+};
+
+export const userLookupFindByUserName = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<UserLookupFindByUserNameData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserLookupFindByUserNameResponse, UserLookupFindByUserNameError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/identity/users/lookup/by-username/{userName}",
+		},
+	);
+};
+
+export const userLookupSearch = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserLookupSearchData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserLookupSearchResponse, UserLookupSearchError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/lookup/search",
+	});
+};
+
+export const userLookupGetCount = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserLookupGetCountData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<UserLookupGetCountResponse, UserLookupGetCountError, ThrowOnError>({
+		...options,
+		url: "/api/identity/users/lookup/count",
+	});
+};
+
+export const userSettingGetAllForCurrentUser = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserSettingGetAllForCurrentUserData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		UserSettingGetAllForCurrentUserResponse,
+		UserSettingGetAllForCurrentUserError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/setting-management/settings/by-current-user",
+	});
+};
+
+export const userSettingSetCurrentUser = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<UserSettingSetCurrentUserData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		UserSettingSetCurrentUserResponse,
+		UserSettingSetCurrentUserError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/setting-management/settings/change-current-user",
+	});
+};
+
+export const webhookDefinitionCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<WebhookDefinitionCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<WebhookDefinitionCreateResponse, WebhookDefinitionCreateError, ThrowOnError>({
+		...options,
+		url: "/api/webhooks/definitions",
+	});
+};
+
+export const webhookDefinitionGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<WebhookDefinitionGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<WebhookDefinitionGetListResponse, WebhookDefinitionGetListError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/webhooks/definitions",
+		},
+	);
+};
+
+export const webhookDefinitionDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<WebhookDefinitionDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		WebhookDefinitionDeleteResponse,
+		WebhookDefinitionDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/definitions/{name}",
+	});
+};
+
+export const webhookDefinitionGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<WebhookDefinitionGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<WebhookDefinitionGetResponse, WebhookDefinitionGetError, ThrowOnError>({
+		...options,
+		url: "/api/webhooks/definitions/{name}",
+	});
+};
+
+export const webhookDefinitionUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<WebhookDefinitionUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<WebhookDefinitionUpdateResponse, WebhookDefinitionUpdateError, ThrowOnError>({
+		...options,
+		url: "/api/webhooks/definitions/{name}",
+	});
+};
+
+export const webhookGroupDefinitionCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<WebhookGroupDefinitionCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		WebhookGroupDefinitionCreateResponse,
+		WebhookGroupDefinitionCreateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/definitions/groups",
+	});
+};
+
+export const webhookGroupDefinitionGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<WebhookGroupDefinitionGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		WebhookGroupDefinitionGetListResponse,
+		WebhookGroupDefinitionGetListError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/definitions/groups",
+	});
+};
+
+export const webhookGroupDefinitionDeleteAysnc = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<WebhookGroupDefinitionDeleteAysncData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		WebhookGroupDefinitionDeleteAysncResponse,
+		WebhookGroupDefinitionDeleteAysncError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/definitions/groups/{name}",
+	});
+};
+
+export const webhookGroupDefinitionGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<WebhookGroupDefinitionGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		WebhookGroupDefinitionGetResponse,
+		WebhookGroupDefinitionGetError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/definitions/groups/{name}",
+	});
+};
+
+export const webhookGroupDefinitionUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<WebhookGroupDefinitionUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		WebhookGroupDefinitionUpdateResponse,
+		WebhookGroupDefinitionUpdateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/definitions/groups/{name}",
+	});
+};
+
+export const webhookPublishPublish = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<WebhookPublishPublishData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<WebhookPublishPublishResponse, WebhookPublishPublishError, ThrowOnError>({
+		...options,
+		url: "/api/webhooks/publish",
+	});
+};
+
+export const webhookSendRecordGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<WebhookSendRecordGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<WebhookSendRecordGetResponse, WebhookSendRecordGetError, ThrowOnError>({
+		...options,
+		url: "/api/webhooks/send-attempts/{id}",
+	});
+};
+
+export const webhookSendRecordDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<WebhookSendRecordDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		WebhookSendRecordDeleteResponse,
+		WebhookSendRecordDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/send-attempts/{id}",
+	});
+};
+
+export const webhookSendRecordDeleteMany = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<WebhookSendRecordDeleteManyData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		WebhookSendRecordDeleteManyResponse,
+		WebhookSendRecordDeleteManyError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/send-attempts/delete-many",
+	});
+};
+
+export const webhookSendRecordGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<WebhookSendRecordGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<WebhookSendRecordGetListResponse, WebhookSendRecordGetListError, ThrowOnError>(
+		{
+			...options,
+			url: "/api/webhooks/send-attempts",
+		},
+	);
+};
+
+export const webhookSendRecordResend = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<WebhookSendRecordResendData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<WebhookSendRecordResendResponse, WebhookSendRecordResendError, ThrowOnError>({
+		...options,
+		url: "/api/webhooks/send-attempts/{id}/resend",
+	});
+};
+
+export const webhookSendRecordResendMany = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<WebhookSendRecordResendManyData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		WebhookSendRecordResendManyResponse,
+		WebhookSendRecordResendManyError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/send-attempts/resend-many",
+	});
+};
+
+export const webhookSubscriptionCreate = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<WebhookSubscriptionCreateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).post<
+		WebhookSubscriptionCreateResponse,
+		WebhookSubscriptionCreateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/subscriptions",
+	});
+};
+
+export const webhookSubscriptionGetList = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<WebhookSubscriptionGetListData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		WebhookSubscriptionGetListResponse,
+		WebhookSubscriptionGetListError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/subscriptions",
+	});
+};
+
+export const webhookSubscriptionDelete = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<WebhookSubscriptionDeleteData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		WebhookSubscriptionDeleteResponse,
+		WebhookSubscriptionDeleteError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/subscriptions/{id}",
+	});
+};
+
+export const webhookSubscriptionGet = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<WebhookSubscriptionGetData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<WebhookSubscriptionGetResponse, WebhookSubscriptionGetError, ThrowOnError>({
+		...options,
+		url: "/api/webhooks/subscriptions/{id}",
+	});
+};
+
+export const webhookSubscriptionUpdate = <ThrowOnError extends boolean = false>(
+	options: OptionsLegacyParser<WebhookSubscriptionUpdateData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).put<
+		WebhookSubscriptionUpdateResponse,
+		WebhookSubscriptionUpdateError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/subscriptions/{id}",
+	});
+};
+
+export const webhookSubscriptionDeleteMany = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<WebhookSubscriptionDeleteManyData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).delete<
+		WebhookSubscriptionDeleteManyResponse,
+		WebhookSubscriptionDeleteManyError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/subscriptions/delete-many",
+	});
+};
+
+export const webhookSubscriptionGetAllAvailableWebhooks = <ThrowOnError extends boolean = false>(
+	options?: OptionsLegacyParser<WebhookSubscriptionGetAllAvailableWebhooksData, ThrowOnError>,
+) => {
+	return (options?.client ?? client).get<
+		WebhookSubscriptionGetAllAvailableWebhooksResponse,
+		WebhookSubscriptionGetAllAvailableWebhooksError,
+		ThrowOnError
+	>({
+		...options,
+		url: "/api/webhooks/subscriptions/availables",
+	});
+};
diff --git a/apps/react-admin/src/api/gen/types.gen.ts b/apps/react-admin/src/api/gen/types.gen.ts
new file mode 100644
index 000000000..9ee442ddb
--- /dev/null
+++ b/apps/react-admin/src/api/gen/types.gen.ts
@@ -0,0 +1,13569 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+export type AbpLoginResult = {
+	result?: LoginResultType;
+	readonly description?: string | null;
+};
+
+export type ActionApiDescriptionModel = {
+	uniqueName?: string | null;
+	name?: string | null;
+	httpMethod?: string | null;
+	url?: string | null;
+	supportedVersions?: Array<string> | null;
+	parametersOnMethod?: Array<MethodParameterApiDescriptionModel> | null;
+	parameters?: Array<ParameterApiDescriptionModel> | null;
+	returnValue?: ReturnValueApiDescriptionModel;
+	allowAnonymous?: boolean | null;
+	implementFrom?: string | null;
+};
+
+export type ActivityBlueprintModel = {
+	id?: string | null;
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	type?: string | null;
+	parentId?: string | null;
+	persistWorkflow?: boolean;
+	loadWorkflowContext?: boolean;
+	saveWorkflowContext?: boolean;
+	inputProperties?: Variables;
+	outputProperties?: Variables;
+	x?: number | null;
+	y?: number | null;
+};
+
+export type ActivityDefinition = {
+	activityId?: string | null;
+	type?: string | null;
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	x?: number | null;
+	y?: number | null;
+	persistWorkflow?: boolean;
+	loadWorkflowContext?: boolean;
+	saveWorkflowContext?: boolean;
+	properties?: Array<ActivityDefinitionProperty> | null;
+	propertyStorageProviders?: {
+		[key: string]: string;
+	} | null;
+};
+
+export type ActivityDefinitionProperty = {
+	name?: string | null;
+	syntax?: string | null;
+	expressions?: {
+		[key: string]: string;
+	} | null;
+};
+
+export type ActivityDescriptor = {
+	type?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	category?: string | null;
+	traits?: ActivityTraits;
+	outcomes?: Array<string> | null;
+	/**
+	 * @deprecated
+	 */
+	properties?: Array<ActivityInputDescriptor> | null;
+	inputProperties?: Array<ActivityInputDescriptor> | null;
+	outputProperties?: Array<ActivityOutputDescriptor> | null;
+	customAttributes?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type ActivityEventCount = {
+	eventName?: string | null;
+	count?: number;
+};
+
+export type ActivityFault = {
+	message?: string | null;
+};
+
+export type ActivityInputDescriptor = {
+	name?: string | null;
+	type?: Type;
+	uiHint?: string | null;
+	label?: string | null;
+	hint?: string | null;
+	options?: unknown;
+	category?: string | null;
+	order?: number;
+	defaultValue?: unknown;
+	defaultSyntax?: string | null;
+	supportedSyntaxes?: Array<string> | null;
+	isReadOnly?: boolean | null;
+	isBrowsable?: boolean | null;
+	isDesignerCritical?: boolean;
+	defaultWorkflowStorageProvider?: string | null;
+	disableWorkflowProviderSelection?: boolean;
+	considerValuesAsOutcomes?: boolean;
+};
+
+export type ActivityOutputDescriptor = {
+	name?: string | null;
+	type?: Type;
+	hint?: string | null;
+	isBrowsable?: boolean | null;
+	defaultWorkflowStorageProvider?: string | null;
+	disableWorkflowProviderSelection?: boolean;
+};
+
+export type ActivityScope = {
+	activityId?: string | null;
+	variables?: Variables;
+};
+
+export type ActivityStats = {
+	eventCounts?: Array<ActivityEventCount> | null;
+	fault?: ActivityFault;
+	averageExecutionTime?: Duration;
+	fastestExecutionTime?: Duration;
+	slowestExecutionTime?: Duration;
+	lastExecutedAt?: Instant;
+};
+
+export enum ActivityTraits {
+	Action = 1,
+	Trigger = 2,
+	Job = 4,
+}
+
+export type ApiVersion = {
+	groupVersion?: string | null;
+	readonly majorVersion?: number | null;
+	readonly minorVersion?: number | null;
+	readonly status?: string | null;
+};
+
+export type ApplicationApiDescriptionModel = {
+	modules?: {
+		[key: string]: ModuleApiDescriptionModel;
+	} | null;
+	types?: {
+		[key: string]: TypeApiDescriptionModel;
+	} | null;
+};
+
+export type ApplicationAuthConfigurationDto = {
+	grantedPolicies?: {
+		[key: string]: boolean;
+	} | null;
+};
+
+export type ApplicationConfigurationDto = {
+	localization?: ApplicationLocalizationConfigurationDto;
+	auth?: ApplicationAuthConfigurationDto;
+	setting?: ApplicationSettingConfigurationDto;
+	currentUser?: CurrentUserDto;
+	features?: ApplicationFeatureConfigurationDto;
+	globalFeatures?: ApplicationGlobalFeatureConfigurationDto;
+	multiTenancy?: MultiTenancyInfoDto;
+	currentTenant?: CurrentTenantDto;
+	timing?: TimingDto;
+	clock?: ClockDto;
+	objectExtensions?: ObjectExtensionsDto;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type ApplicationFeatureConfigurationDto = {
+	values?: {
+		[key: string]: string | null;
+	} | null;
+};
+
+export type ApplicationGlobalFeatureConfigurationDto = {
+	enabledFeatures?: Array<string> | null;
+};
+
+export type ApplicationLocalizationConfigurationDto = {
+	values?: {
+		[key: string]: {
+			[key: string]: string;
+		};
+	} | null;
+	resources?: {
+		[key: string]: ApplicationLocalizationResourceDto;
+	} | null;
+	languages?: Array<LanguageInfo> | null;
+	currentCulture?: CurrentCultureDto;
+	defaultResourceName?: string | null;
+	languagesMap?: {
+		[key: string]: Array<NameValue>;
+	} | null;
+	languageFilesMap?: {
+		[key: string]: Array<NameValue>;
+	} | null;
+};
+
+export type ApplicationLocalizationDto = {
+	resources?: {
+		[key: string]: ApplicationLocalizationResourceDto;
+	} | null;
+	currentCulture?: CurrentCultureDto;
+};
+
+export type ApplicationLocalizationResourceDto = {
+	texts?: {
+		[key: string]: string;
+	} | null;
+	baseResources?: Array<string> | null;
+};
+
+export type ApplicationSettingConfigurationDto = {
+	values?: {
+		[key: string]: string | null;
+	} | null;
+};
+
+export type Assembly = {
+	readonly definedTypes?: Array<TypeInfo> | null;
+	readonly exportedTypes?: Array<Type> | null;
+	/**
+	 * @deprecated
+	 */
+	readonly codeBase?: string | null;
+	entryPoint?: MethodInfo;
+	readonly fullName?: string | null;
+	readonly imageRuntimeVersion?: string | null;
+	readonly isDynamic?: boolean;
+	readonly location?: string | null;
+	readonly reflectionOnly?: boolean;
+	readonly isCollectible?: boolean;
+	readonly isFullyTrusted?: boolean;
+	readonly customAttributes?: Array<CustomAttributeData> | null;
+	/**
+	 * @deprecated
+	 */
+	readonly escapedCodeBase?: string | null;
+	manifestModule?: Module;
+	readonly modules?: Array<Module> | null;
+	/**
+	 * @deprecated
+	 */
+	readonly globalAssemblyCache?: boolean;
+	readonly hostContext?: number;
+	securityRuleSet?: SecurityRuleSet;
+};
+
+export type AuditLogActionDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	serviceName?: string | null;
+	methodName?: string | null;
+	parameters?: string | null;
+	executionTime?: string;
+	executionDuration?: number;
+};
+
+export type AuditLogDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	applicationName?: string | null;
+	userId?: string | null;
+	userName?: string | null;
+	tenantId?: string | null;
+	tenantName?: string | null;
+	impersonatorUserId?: string | null;
+	impersonatorTenantId?: string | null;
+	executionTime?: string;
+	executionDuration?: number;
+	clientIpAddress?: string | null;
+	clientName?: string | null;
+	clientId?: string | null;
+	correlationId?: string | null;
+	browserInfo?: string | null;
+	httpMethod?: string | null;
+	url?: string | null;
+	exceptions?: string | null;
+	comments?: string | null;
+	httpStatusCode?: number | null;
+	entityChanges?: Array<EntityChangeDto> | null;
+	actions?: Array<AuditLogActionDto> | null;
+};
+
+export type AuthenticatorDto = {
+	isAuthenticated?: boolean;
+	sharedKey?: string | null;
+	authenticatorUri?: string | null;
+};
+
+export type AuthenticatorRecoveryCodeDto = {
+	recoveryCodes?: Array<string> | null;
+};
+
+export type BackgroundJobActionCreateDto = {
+	isEnabled?: boolean;
+	paramters?: {
+		[key: string]: unknown;
+	} | null;
+	name: string;
+};
+
+export type BackgroundJobActionDefinitionDto = {
+	name?: string | null;
+	type?: JobActionType;
+	displayName?: string | null;
+	description?: string | null;
+	paramters?: Array<BackgroundJobActionParamterDto> | null;
+};
+
+export type BackgroundJobActionDto = {
+	id?: string;
+	jobId?: string | null;
+	name?: string | null;
+	isEnabled?: boolean;
+	paramters?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type BackgroundJobActionParamterDto = {
+	name?: string | null;
+	required?: boolean;
+	displayName?: string | null;
+	description?: string | null;
+};
+
+export type BackgroundJobActionUpdateDto = {
+	isEnabled?: boolean;
+	paramters?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type BackgroundJobDefinitionDto = {
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	paramters?: Array<BackgroundJobParamterDto> | null;
+};
+
+export type BackgroundJobInfoBatchInput = {
+	jobIds?: Array<string> | null;
+};
+
+export type BackgroundJobInfoCreateDto = {
+	isEnabled?: boolean;
+	args?: {
+		[key: string]: unknown;
+	} | null;
+	description?: string | null;
+	jobType?: JobType;
+	cron?: string | null;
+	maxTryCount?: number;
+	maxCount?: number;
+	interval?: number;
+	priority?: JobPriority;
+	lockTimeOut?: number;
+	name: string;
+	group: string;
+	type: string;
+	nodeName?: string | null;
+	beginTime: string;
+	endTime?: string | null;
+	source?: JobSource;
+};
+
+export type BackgroundJobInfoDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string | null;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	concurrencyStamp?: string | null;
+	name?: string | null;
+	group?: string | null;
+	type?: string | null;
+	result?: string | null;
+	args?: {
+		[key: string]: unknown;
+	} | null;
+	status?: JobStatus;
+	description?: string | null;
+	beginTime?: string;
+	endTime?: string | null;
+	lastRunTime?: string | null;
+	nextRunTime?: string | null;
+	jobType?: JobType;
+	cron?: string | null;
+	triggerCount?: number;
+	tryCount?: number;
+	maxTryCount?: number;
+	maxCount?: number;
+	isAbandoned?: boolean;
+	isEnabled?: boolean;
+	interval?: number;
+	priority?: JobPriority;
+	source?: JobSource;
+	lockTimeOut?: number;
+};
+
+export type BackgroundJobInfoUpdateDto = {
+	isEnabled?: boolean;
+	args?: {
+		[key: string]: unknown;
+	} | null;
+	description?: string | null;
+	jobType?: JobType;
+	cron?: string | null;
+	maxTryCount?: number;
+	maxCount?: number;
+	interval?: number;
+	priority?: JobPriority;
+	lockTimeOut?: number;
+	concurrencyStamp?: string | null;
+};
+
+export type BackgroundJobLogDto = {
+	id?: number;
+	jobName?: string | null;
+	jobGroup?: string | null;
+	jobType?: string | null;
+	message?: string | null;
+	runTime?: string;
+	exception?: string | null;
+};
+
+export type BackgroundJobParamterDto = {
+	name?: string | null;
+	required?: boolean;
+	displayName?: string | null;
+	description?: string | null;
+};
+
+export type BeforeMiniStateDto = {
+	menuCollapsed?: boolean | null;
+	menuSplit?: boolean | null;
+	menuMode?: string | null;
+	menuType?: string | null;
+};
+
+export type BlockingActivity = {
+	activityId?: string | null;
+	activityType?: string | null;
+	tag?: string | null;
+};
+
+export type BulkCancelWorkflowsRequest = {
+	workflowInstanceIds?: Array<string> | null;
+};
+
+export type BulkDeleteOssObjectInput = {
+	bucket: string;
+	path?: string | null;
+	objects: Array<string>;
+};
+
+export type BulkDeleteWorkflowsRequest = {
+	workflowInstanceIds?: Array<string> | null;
+};
+
+export type BulkRetryWorkflowsRequest = {
+	workflowInstanceIds?: Array<string> | null;
+};
+
+export type CacheKeysDto = {
+	nextMarker?: string | null;
+	keys?: Array<string> | null;
+};
+
+export type CacheRefreshInput = {
+	key: string;
+	absoluteExpiration?: string | null;
+	slidingExpiration?: string | null;
+};
+
+export type CacheSetInput = {
+	key: string;
+	value?: string | null;
+	absoluteExpiration?: string | null;
+	slidingExpiration?: string | null;
+};
+
+export type CacheValueDto = {
+	type?: string | null;
+	size?: number;
+	expiration?: string | null;
+	values?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export enum CallingConventions {
+	Standard = 1,
+	VarArgs = 2,
+	Any = 3,
+	HasThis = 32,
+	ExplicitThis = 64,
+}
+
+export type ChangeAvatarInput = {
+	avatarUrl?: string | null;
+};
+
+export type ChangePasswordInput = {
+	currentPassword?: string | null;
+	newPassword: string;
+};
+
+export type ChangePhoneNumberInput = {
+	newPhoneNumber: string;
+	code: string;
+};
+
+export type ChatMessage = {
+	tenantId?: string | null;
+	groupId?: string | null;
+	messageId?: string | null;
+	formUserId?: string;
+	formUserName?: string | null;
+	toUserId?: string | null;
+	content?: string | null;
+	sendTime?: string;
+	isAnonymous?: boolean;
+	messageType?: MessageType;
+	source?: MessageSourceType;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type ChatMessageSendResultDto = {
+	messageId?: string | null;
+};
+
+export type ClockDto = {
+	kind?: string | null;
+};
+
+export type CollectedWorkflow = {
+	workflowInstanceId?: string | null;
+	workflowInstance?: WorkflowInstance;
+	activityId?: string | null;
+};
+
+export type ConfirmEmailInput = {
+	confirmToken: string;
+};
+
+export type ConnectionDefinition = {
+	sourceActivityId?: string | null;
+	targetActivityId?: string | null;
+	outcome?: string | null;
+};
+
+export type ConnectionModel = {
+	sourceActivityId?: string | null;
+	targetActivityId?: string | null;
+	outcome?: string | null;
+};
+
+export type ConstructorInfo = {
+	readonly name?: string | null;
+	declaringType?: Type;
+	reflectedType?: Type;
+	module?: Module;
+	readonly customAttributes?: Array<CustomAttributeData> | null;
+	readonly isCollectible?: boolean;
+	readonly metadataToken?: number;
+	attributes?: MethodAttributes;
+	methodImplementationFlags?: MethodImplAttributes;
+	callingConvention?: CallingConventions;
+	readonly isAbstract?: boolean;
+	readonly isConstructor?: boolean;
+	readonly isFinal?: boolean;
+	readonly isHideBySig?: boolean;
+	readonly isSpecialName?: boolean;
+	readonly isStatic?: boolean;
+	readonly isVirtual?: boolean;
+	readonly isAssembly?: boolean;
+	readonly isFamily?: boolean;
+	readonly isFamilyAndAssembly?: boolean;
+	readonly isFamilyOrAssembly?: boolean;
+	readonly isPrivate?: boolean;
+	readonly isPublic?: boolean;
+	readonly isConstructedGenericMethod?: boolean;
+	readonly isGenericMethod?: boolean;
+	readonly isGenericMethodDefinition?: boolean;
+	readonly containsGenericParameters?: boolean;
+	methodHandle?: RuntimeMethodHandle;
+	readonly isSecurityCritical?: boolean;
+	readonly isSecuritySafeCritical?: boolean;
+	readonly isSecurityTransparent?: boolean;
+	memberType?: MemberTypes;
+};
+
+export type ControllerApiDescriptionModel = {
+	controllerName?: string | null;
+	controllerGroupName?: string | null;
+	isRemoteService?: boolean;
+	isIntegrationService?: boolean;
+	apiVersion?: string | null;
+	type?: string | null;
+	interfaces?: Array<ControllerInterfaceApiDescriptionModel> | null;
+	actions?: {
+		[key: string]: ActionApiDescriptionModel;
+	} | null;
+};
+
+export type ControllerInterfaceApiDescriptionModel = {
+	type?: string | null;
+	name?: string | null;
+	methods?: Array<InterfaceMethodApiDescriptionModel> | null;
+};
+
+export type CurrentCultureDto = {
+	displayName?: string | null;
+	englishName?: string | null;
+	threeLetterIsoLanguageName?: string | null;
+	twoLetterIsoLanguageName?: string | null;
+	isRightToLeft?: boolean;
+	cultureName?: string | null;
+	name?: string | null;
+	nativeName?: string | null;
+	dateTimeFormat?: DateTimeFormatDto;
+};
+
+export type CurrentTenantDto = {
+	id?: string | null;
+	name?: string | null;
+	isAvailable?: boolean;
+};
+
+export type CurrentUserDto = {
+	isAuthenticated?: boolean;
+	id?: string | null;
+	tenantId?: string | null;
+	impersonatorUserId?: string | null;
+	impersonatorTenantId?: string | null;
+	impersonatorUserName?: string | null;
+	impersonatorTenantName?: string | null;
+	userName?: string | null;
+	name?: string | null;
+	surName?: string | null;
+	email?: string | null;
+	emailVerified?: boolean;
+	phoneNumber?: string | null;
+	phoneNumberVerified?: boolean;
+	roles?: Array<string> | null;
+	sessionId?: string | null;
+};
+
+export type CustomAttributeData = {
+	attributeType?: Type;
+	constructor?: ConstructorInfo;
+	readonly constructorArguments?: Array<CustomAttributeTypedArgument> | null;
+	readonly namedArguments?: Array<CustomAttributeNamedArgument> | null;
+};
+
+export type CustomAttributeNamedArgument = {
+	memberInfo?: MemberInfo;
+	typedValue?: CustomAttributeTypedArgument;
+	readonly memberName?: string | null;
+	readonly isField?: boolean;
+};
+
+export type CustomAttributeTypedArgument = {
+	argumentType?: Type;
+	value?: unknown;
+};
+
+export type DataAccessFilterGroup = {
+	groups?: Array<DataAccessFilterGroup> | null;
+	rules?: Array<DataAccessFilterRule> | null;
+	logic?: DataAccessFilterLogic;
+};
+
+export enum DataAccessFilterLogic {
+	And = 0,
+	Or = 1,
+}
+
+export enum DataAccessFilterOperate {
+	Equal = 1,
+	NotEqual = 2,
+	Less = 3,
+	LessOrEqual = 4,
+	Greater = 5,
+	GreaterOrEqual = 6,
+	StartsWith = 7,
+	EndsWith = 8,
+	Contains = 9,
+	NotContains = 10,
+}
+
+export type DataAccessFilterRule = {
+	field?: string | null;
+	value?: unknown;
+	operate?: DataAccessFilterOperate;
+	isLeft?: boolean;
+};
+
+export enum DataAccessOperation {
+	Read = 0,
+	Write = 1,
+	Delete = 2,
+}
+
+export type DataCreateDto = {
+	name: string;
+	displayName: string;
+	description?: string | null;
+	parentId?: string | null;
+};
+
+export type DataDto = {
+	id?: string;
+	name?: string | null;
+	code?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	parentId?: string | null;
+	items?: Array<DataItemDto> | null;
+};
+
+export type DataItemCreateDto = {
+	displayName: string;
+	defaultValue?: string | null;
+	description?: string | null;
+	allowBeNull?: boolean;
+	valueType?: ValueType;
+	name: string;
+};
+
+export type DataItemDto = {
+	id?: string;
+	name?: string | null;
+	displayName?: string | null;
+	defaultValue?: string | null;
+	description?: string | null;
+	allowBeNull?: boolean;
+	valueType?: ValueType;
+};
+
+export type DataItemUpdateDto = {
+	displayName: string;
+	defaultValue?: string | null;
+	description?: string | null;
+	allowBeNull?: boolean;
+	valueType?: ValueType;
+};
+
+export type DataMoveDto = {
+	parentId?: string | null;
+};
+
+export type DataUpdateDto = {
+	name: string;
+	displayName: string;
+	description?: string | null;
+};
+
+export type DateTimeFormatDto = {
+	calendarAlgorithmType?: string | null;
+	dateTimeFormatLong?: string | null;
+	shortDatePattern?: string | null;
+	fullDateTimePattern?: string | null;
+	dateSeparator?: string | null;
+	shortTimePattern?: string | null;
+	longTimePattern?: string | null;
+};
+
+export type DispatchSignalRequest = {
+	workflowInstanceId?: string | null;
+	correlationId?: string | null;
+	input?: unknown;
+};
+
+export type DispatchSignalResponse = {
+	startedWorkflows?: Array<CollectedWorkflow> | null;
+};
+
+export type DispatchWorkflowDefinitionRequestModel = {
+	activityId?: string | null;
+	correlationId?: string | null;
+	contextId?: string | null;
+	input?: unknown;
+};
+
+export type DispatchWorkflowDefinitionResponseModel = {
+	workflowInstanceId?: string | null;
+	activityId?: string | null;
+};
+
+export type DispatchWorkflowInstanceRequestModel = {
+	activityId?: string | null;
+	input?: WorkflowInput;
+};
+
+export type DispatchWorkflowInstanceResponseModel = {
+	[key: string]: unknown;
+};
+
+export type Duration = {
+	readonly days?: number;
+	readonly nanosecondOfDay?: number;
+	readonly hours?: number;
+	readonly minutes?: number;
+	readonly seconds?: number;
+	readonly milliseconds?: number;
+	readonly subsecondTicks?: number;
+	readonly subsecondNanoseconds?: number;
+	readonly bclCompatibleTicks?: number;
+	readonly totalDays?: number;
+	readonly totalHours?: number;
+	readonly totalMinutes?: number;
+	readonly totalSeconds?: number;
+	readonly totalMilliseconds?: number;
+	readonly totalTicks?: number;
+	readonly totalNanoseconds?: number;
+};
+
+export enum DynamicComparison {
+	Equal = 0,
+	NotEqual = 1,
+	LessThan = 2,
+	LessThanOrEqual = 3,
+	GreaterThan = 4,
+	GreaterThanOrEqual = 5,
+	StartsWith = 6,
+	NotStartsWith = 7,
+	EndsWith = 8,
+	NotEndsWith = 9,
+	Contains = 10,
+	NotContains = 11,
+	Null = 12,
+	NotNull = 13,
+}
+
+export enum DynamicLogic {
+	And = 0,
+	Or = 1,
+}
+
+export type DynamicParamter = {
+	field: string;
+	logic?: DynamicLogic;
+	comparison?: DynamicComparison;
+	value?: unknown;
+	type?: string | null;
+};
+
+export type DynamicParamterDto = {
+	name?: string | null;
+	description?: string | null;
+	type?: string | null;
+	javaScriptType?: string | null;
+	availableComparator?: Array<DynamicComparison> | null;
+	options?: Array<ParamterOptionDto> | null;
+};
+
+export type DynamicQueryable = {
+	paramters?: Array<DynamicParamter> | null;
+};
+
+export type EditionCreateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	displayName: string;
+};
+
+export type EditionDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	displayName?: string | null;
+	concurrencyStamp?: string | null;
+};
+
+export type EditionUpdateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	displayName: string;
+	concurrencyStamp?: string | null;
+};
+
+export type EntityChangeDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	changeTime?: string;
+	changeType?: EntityChangeType;
+	entityTenantId?: string | null;
+	entityId?: string | null;
+	entityTypeFullName?: string | null;
+	propertyChanges?: Array<EntityPropertyChangeDto> | null;
+};
+
+export enum EntityChangeType {
+	Created = 0,
+	Updated = 1,
+	Deleted = 2,
+}
+
+export type EntityChangeWithUsernameDto = {
+	entityChange?: EntityChangeDto;
+	userName?: string | null;
+};
+
+export type EntityExtensionDto = {
+	properties?: {
+		[key: string]: ExtensionPropertyDto;
+	} | null;
+	configuration?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type EntityPropertyChangeDto = {
+	id?: string;
+	newValue?: string | null;
+	originalValue?: string | null;
+	propertyName?: string | null;
+	propertyTypeFullName?: string | null;
+};
+
+export type EntityPropertyInfoDto = {
+	id?: string;
+	name?: string | null;
+	displayName?: string | null;
+	typeFullName?: string | null;
+	valueRange?: Array<string> | null;
+};
+
+export type EntityTypeInfoDto = {
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	name?: string | null;
+	displayName?: string | null;
+	typeFullName?: string | null;
+	isAuditEnabled?: boolean;
+	properties?: Array<EntityPropertyInfoDto> | null;
+};
+
+export enum EventAttributes {
+	None = 0,
+	SpecialName = 512,
+	RTSpecialName = 1024,
+}
+
+export type EventInfo = {
+	readonly name?: string | null;
+	declaringType?: Type;
+	reflectedType?: Type;
+	module?: Module;
+	readonly customAttributes?: Array<CustomAttributeData> | null;
+	readonly isCollectible?: boolean;
+	readonly metadataToken?: number;
+	memberType?: MemberTypes;
+	attributes?: EventAttributes;
+	readonly isSpecialName?: boolean;
+	addMethod?: MethodInfo;
+	removeMethod?: MethodInfo;
+	raiseMethod?: MethodInfo;
+	readonly isMulticast?: boolean;
+	eventHandlerType?: Type;
+};
+
+export type ExecuteSignalRequest = {
+	workflowInstanceId?: string | null;
+	correlationId?: string | null;
+	input?: unknown;
+};
+
+export type ExecuteSignalResponse = {
+	startedWorkflows?: Array<CollectedWorkflow> | null;
+};
+
+export type ExecuteWorkflowDefinitionRequestModel = {
+	activityId?: string | null;
+	correlationId?: string | null;
+	contextId?: string | null;
+	input?: unknown;
+};
+
+export type ExecuteWorkflowDefinitionResponseModel = {
+	executed?: boolean;
+	activityId?: string | null;
+	workflowInstance?: WorkflowInstance;
+};
+
+export type ExecuteWorkflowInstanceRequest = {
+	workflowInstanceId?: string | null;
+	activityId?: string | null;
+	input?: WorkflowInput;
+};
+
+export type ExecuteWorkflowInstanceResponseModel = {
+	executed?: boolean;
+	activityId?: string | null;
+	workflowInstance?: WorkflowInstance;
+};
+
+export type ExtensionEnumDto = {
+	fields?: Array<ExtensionEnumFieldDto> | null;
+	localizationResource?: string | null;
+};
+
+export type ExtensionEnumFieldDto = {
+	name?: string | null;
+	value?: unknown;
+};
+
+export type ExtensionPropertyApiCreateDto = {
+	isAvailable?: boolean;
+};
+
+export type ExtensionPropertyApiDto = {
+	onGet?: ExtensionPropertyApiGetDto;
+	onCreate?: ExtensionPropertyApiCreateDto;
+	onUpdate?: ExtensionPropertyApiUpdateDto;
+};
+
+export type ExtensionPropertyApiGetDto = {
+	isAvailable?: boolean;
+};
+
+export type ExtensionPropertyApiUpdateDto = {
+	isAvailable?: boolean;
+};
+
+export type ExtensionPropertyAttributeDto = {
+	typeSimple?: string | null;
+	config?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type ExtensionPropertyDto = {
+	type?: string | null;
+	typeSimple?: string | null;
+	displayName?: LocalizableStringDto;
+	api?: ExtensionPropertyApiDto;
+	ui?: ExtensionPropertyUiDto;
+	attributes?: Array<ExtensionPropertyAttributeDto> | null;
+	configuration?: {
+		[key: string]: unknown;
+	} | null;
+	defaultValue?: unknown;
+};
+
+export type ExtensionPropertyUiDto = {
+	onTable?: ExtensionPropertyUiTableDto;
+	onCreateForm?: ExtensionPropertyUiFormDto;
+	onEditForm?: ExtensionPropertyUiFormDto;
+	lookup?: ExtensionPropertyUiLookupDto;
+};
+
+export type ExtensionPropertyUiFormDto = {
+	isVisible?: boolean;
+};
+
+export type ExtensionPropertyUiLookupDto = {
+	url?: string | null;
+	resultListPropertyName?: string | null;
+	displayPropertyName?: string | null;
+	valuePropertyName?: string | null;
+	filterParamName?: string | null;
+};
+
+export type ExtensionPropertyUiTableDto = {
+	isVisible?: boolean;
+};
+
+export type FeatureDefinitionCreateDto = {
+	displayName: string;
+	parentName?: string | null;
+	description?: string | null;
+	defaultValue?: string | null;
+	isVisibleToClients?: boolean;
+	isAvailableToHost?: boolean;
+	allowedProviders?: Array<string> | null;
+	valueType: string;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name: string;
+	groupName: string;
+};
+
+export type FeatureDefinitionDto = {
+	groupName?: string | null;
+	name?: string | null;
+	parentName?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	defaultValue?: string | null;
+	isVisibleToClients?: boolean;
+	isAvailableToHost?: boolean;
+	isStatic?: boolean;
+	allowedProviders?: Array<string> | null;
+	valueType?: string | null;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type FeatureDefinitionUpdateDto = {
+	displayName: string;
+	parentName?: string | null;
+	description?: string | null;
+	defaultValue?: string | null;
+	isVisibleToClients?: boolean;
+	isAvailableToHost?: boolean;
+	allowedProviders?: Array<string> | null;
+	valueType: string;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	concurrencyStamp?: string | null;
+};
+
+export type FeatureDto = {
+	name?: string | null;
+	displayName?: string | null;
+	value?: string | null;
+	provider?: FeatureProviderDto;
+	description?: string | null;
+	valueType?: IStringValueType;
+	depth?: number;
+	parentName?: string | null;
+};
+
+export type FeatureGroupDefinitionCreateDto = {
+	displayName: string;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name: string;
+};
+
+export type FeatureGroupDefinitionDto = {
+	name?: string | null;
+	displayName?: string | null;
+	isStatic?: boolean;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type FeatureGroupDefinitionUpdateDto = {
+	displayName: string;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	concurrencyStamp?: string | null;
+};
+
+export type FeatureGroupDto = {
+	name?: string | null;
+	displayName?: string | null;
+	features?: Array<FeatureDto> | null;
+};
+
+export type FeatureProviderDto = {
+	name?: string | null;
+	key?: string | null;
+};
+
+export type FeedbackAttachmentDto = {
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	name?: string | null;
+	url?: string | null;
+	size?: number;
+};
+
+export type FeedbackAttachmentTempFileCreateDto = {
+	path?: string | null;
+	id?: string | null;
+};
+
+export type FeedbackAttachmentTempFileDto = {
+	path?: string | null;
+	id?: string | null;
+	size?: number;
+};
+
+export type FeedbackCommentDto = {
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	content?: string | null;
+};
+
+export type FeedbackCreateDto = {
+	content: string;
+	category: string;
+	attachments?: Array<FeedbackAttachmentTempFileCreateDto> | null;
+};
+
+export type FeedbackDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	content?: string | null;
+	category?: string | null;
+	status?: FeedbackStatus;
+	comments?: Array<FeedbackCommentDto> | null;
+	attachments?: Array<FeedbackAttachmentDto> | null;
+};
+
+export enum FeedbackStatus {
+	Created = 1,
+	InProgress = 2,
+	Closed = 3,
+	Resolved = 4,
+}
+
+export enum FieldAttributes {
+	PrivateScope = 0,
+	Private = 1,
+	FamANDAssem = 2,
+	Assembly = 3,
+	Family = 4,
+	FamORAssem = 5,
+	Public = 6,
+	FieldAccessMask = 7,
+	Static = 16,
+	InitOnly = 32,
+	Literal = 64,
+	NotSerialized = 128,
+	HasFieldRVA = 256,
+	SpecialName = 512,
+	RTSpecialName = 1024,
+	HasFieldMarshal = 4096,
+	PinvokeImpl = 8192,
+	HasDefault = 32768,
+	ReservedMask = 38144,
+}
+
+export type FieldInfo = {
+	readonly name?: string | null;
+	declaringType?: Type;
+	reflectedType?: Type;
+	module?: Module;
+	readonly customAttributes?: Array<CustomAttributeData> | null;
+	readonly isCollectible?: boolean;
+	readonly metadataToken?: number;
+	memberType?: MemberTypes;
+	attributes?: FieldAttributes;
+	fieldType?: Type;
+	readonly isInitOnly?: boolean;
+	readonly isLiteral?: boolean;
+	/**
+	 * @deprecated
+	 */
+	readonly isNotSerialized?: boolean;
+	readonly isPinvokeImpl?: boolean;
+	readonly isSpecialName?: boolean;
+	readonly isStatic?: boolean;
+	readonly isAssembly?: boolean;
+	readonly isFamily?: boolean;
+	readonly isFamilyAndAssembly?: boolean;
+	readonly isFamilyOrAssembly?: boolean;
+	readonly isPrivate?: boolean;
+	readonly isPublic?: boolean;
+	readonly isSecurityCritical?: boolean;
+	readonly isSecuritySafeCritical?: boolean;
+	readonly isSecurityTransparent?: boolean;
+	fieldHandle?: RuntimeFieldHandle;
+};
+
+export type FileShareDto = {
+	url?: string | null;
+	maxAccessCount?: number;
+	expirationTime?: string | null;
+};
+
+export type FileShareInput = {
+	name: string;
+	path?: string | null;
+	maxAccessCount?: number;
+	expirationTime?: string | null;
+	roles?: Array<string> | null;
+	users?: Array<string> | null;
+};
+
+export type FindTenantResultDto = {
+	success?: boolean;
+	tenantId?: string | null;
+	name?: string | null;
+	normalizedName?: string | null;
+	isActive?: boolean;
+};
+
+export enum GenericParameterAttributes {
+	None = 0,
+	Covariant = 1,
+	Contravariant = 2,
+	VarianceMask = 3,
+	ReferenceTypeConstraint = 4,
+	NotNullableValueTypeConstraint = 8,
+	DefaultConstructorConstraint = 16,
+	SpecialConstraintMask = 28,
+}
+
+export type GetFeatureListResultDto = {
+	groups?: Array<FeatureGroupDto> | null;
+};
+
+export type GetListByDynamicQueryableInput = {
+	maxResultCount?: number;
+	skipCount?: number;
+	sorting?: string | null;
+	queryable: DynamicQueryable;
+};
+
+export type GetPermissionListResultDto = {
+	entityDisplayName?: string | null;
+	groups?: Array<PermissionGroupDto> | null;
+};
+
+export type Group = {
+	id?: string | null;
+	name?: string | null;
+	avatarUrl?: string | null;
+	allowAnonymous?: boolean;
+	allowSendMessage?: boolean;
+	maxUserLength?: number;
+	groupUserCount?: number;
+};
+
+export type GroupAcceptUserDto = {
+	userId: string;
+	groupId: number;
+	allowAccept?: boolean;
+	rejectReason?: string | null;
+};
+
+export type GroupRemoveUserDto = {
+	userId: string;
+	groupId: number;
+};
+
+export type GroupUserCard = {
+	tenantId?: string | null;
+	userId?: string;
+	userName?: string | null;
+	avatarUrl?: string | null;
+	nickName?: string | null;
+	age?: number;
+	sex?: Sex;
+	sign?: string | null;
+	description?: string | null;
+	birthday?: string | null;
+	online?: boolean;
+	groupId?: number;
+	isAdmin?: boolean;
+	isSuperAdmin?: boolean;
+};
+
+export type HeaderSettingDto = {
+	bgColor?: string | null;
+	fixed?: boolean;
+	show?: boolean;
+	theme?: string | null;
+	showFullScreen?: boolean;
+	useLockPage?: boolean;
+	showDoc?: boolean;
+	showNotice?: boolean;
+	showSearch?: boolean;
+};
+
+export enum HttpStatusCode {
+	Continue = 100,
+	SwitchingProtocols = 101,
+	Processing = 102,
+	EarlyHints = 103,
+	OK = 200,
+	Created = 201,
+	Accepted = 202,
+	NonAuthoritativeInformation = 203,
+	NoContent = 204,
+	ResetContent = 205,
+	PartialContent = 206,
+	MultiStatus = 207,
+	AlreadyReported = 208,
+	IMUsed = 226,
+	MultipleChoices = 300,
+	Ambiguous = 301,
+	MovedPermanently = 302,
+	Moved = 303,
+	Found = 304,
+	Redirect = 305,
+	SeeOther = 306,
+	RedirectMethod = 307,
+	NotModified = 308,
+	UseProxy = 400,
+	Unused = 401,
+	TemporaryRedirect = 402,
+	RedirectKeepVerb = 403,
+	PermanentRedirect = 404,
+	BadRequest = 405,
+	Unauthorized = 406,
+	PaymentRequired = 407,
+	Forbidden = 408,
+	NotFound = 409,
+	MethodNotAllowed = 410,
+	NotAcceptable = 411,
+	ProxyAuthenticationRequired = 412,
+	RequestTimeout = 413,
+	Conflict = 414,
+	Gone = 415,
+	LengthRequired = 416,
+	PreconditionFailed = 417,
+	RequestEntityTooLarge = 421,
+	RequestUriTooLong = 422,
+	UnsupportedMediaType = 423,
+	RequestedRangeNotSatisfiable = 424,
+	ExpectationFailed = 426,
+	MisdirectedRequest = 428,
+	UnprocessableEntity = 429,
+	UnprocessableContent = 431,
+	Locked = 451,
+	FailedDependency = 500,
+	UpgradeRequired = 501,
+	PreconditionRequired = 502,
+	TooManyRequests = 503,
+	RequestHeaderFieldsTooLarge = 504,
+	UnavailableForLegalReasons = 505,
+	InternalServerError = 506,
+	NotImplemented = 507,
+	BadGateway = 508,
+	ServiceUnavailable = 510,
+	GatewayTimeout = 511,
+}
+
+export type IanaTimeZone = {
+	timeZoneName?: string | null;
+};
+
+export type IBookmark = {
+	[key: string]: unknown;
+};
+
+export type ICustomAttributeProvider = {
+	[key: string]: unknown;
+};
+
+export type IdentityClaimDto = {
+	id?: string;
+	claimType?: string | null;
+	claimValue?: string | null;
+};
+
+export type IdentityClaimTypeCreateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	required?: boolean;
+	regex?: string | null;
+	regexDescription?: string | null;
+	description?: string | null;
+	name: string;
+	isStatic?: boolean;
+	valueType?: IdentityClaimValueType;
+};
+
+export type IdentityClaimTypeDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	name?: string | null;
+	required?: boolean;
+	isStatic?: boolean;
+	regex?: string | null;
+	regexDescription?: string | null;
+	description?: string | null;
+	valueType?: IdentityClaimValueType;
+};
+
+export type IdentityClaimTypeUpdateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	required?: boolean;
+	regex?: string | null;
+	regexDescription?: string | null;
+	description?: string | null;
+};
+
+export enum IdentityClaimValueType {
+	String = 0,
+	Int = 1,
+	Boolean = 2,
+	DateTime = 3,
+}
+
+export type IdentityRoleAddOrRemoveOrganizationUnitDto = {
+	organizationUnitIds: Array<string>;
+};
+
+export type IdentityRoleClaimCreateDto = {
+	claimType: string;
+	claimValue: string;
+};
+
+export type IdentityRoleClaimUpdateDto = {
+	claimType: string;
+	claimValue: string;
+	newClaimValue: string;
+};
+
+export type IdentityRoleCreateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name: string;
+	isDefault?: boolean;
+	isPublic?: boolean;
+};
+
+export type IdentityRoleDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	name?: string | null;
+	isDefault?: boolean;
+	isStatic?: boolean;
+	isPublic?: boolean;
+	concurrencyStamp?: string | null;
+};
+
+export type IdentityRoleUpdateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name: string;
+	isDefault?: boolean;
+	isPublic?: boolean;
+	concurrencyStamp?: string | null;
+};
+
+export type IdentitySessionDto = {
+	id?: string;
+	sessionId?: string | null;
+	device?: string | null;
+	deviceInfo?: string | null;
+	userId?: string;
+	clientId?: string | null;
+	ipAddresses?: string | null;
+	signedIn?: string;
+	lastAccessed?: string | null;
+};
+
+export type IdentitySessionDto_1 = {
+	id?: string;
+	sessionId?: string | null;
+	device?: string | null;
+	deviceInfo?: string | null;
+	clientId?: string | null;
+	ipAddresses?: string | null;
+	signedIn?: string;
+	lastAccessed?: string | null;
+};
+
+export type IdentityUserClaimCreateDto = {
+	claimType: string;
+	claimValue?: string | null;
+};
+
+export type IdentityUserClaimUpdateDto = {
+	claimType: string;
+	claimValue?: string | null;
+	newClaimValue?: string | null;
+};
+
+export type IdentityUserCreateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	userName: string;
+	name?: string | null;
+	surname?: string | null;
+	email: string;
+	phoneNumber?: string | null;
+	isActive?: boolean;
+	lockoutEnabled?: boolean;
+	roleNames?: Array<string> | null;
+	password: string;
+};
+
+export type IdentityUserDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	isDeleted?: boolean;
+	deleterId?: string | null;
+	deletionTime?: string | null;
+	tenantId?: string | null;
+	userName?: string | null;
+	name?: string | null;
+	surname?: string | null;
+	email?: string | null;
+	emailConfirmed?: boolean;
+	phoneNumber?: string | null;
+	phoneNumberConfirmed?: boolean;
+	isActive?: boolean;
+	lockoutEnabled?: boolean;
+	accessFailedCount?: number;
+	lockoutEnd?: string | null;
+	concurrencyStamp?: string | null;
+	entityVersion?: number;
+	lastPasswordChangeTime?: string | null;
+};
+
+export type IdentityUserOrganizationUnitUpdateDto = {
+	organizationUnitIds: Array<string>;
+};
+
+export type IdentityUserSetPasswordInput = {
+	password: string;
+};
+
+export type IdentityUserUpdateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	userName: string;
+	name?: string | null;
+	surname?: string | null;
+	email: string;
+	phoneNumber?: string | null;
+	isActive?: boolean;
+	lockoutEnabled?: boolean;
+	roleNames?: Array<string> | null;
+	password?: string | null;
+	concurrencyStamp?: string | null;
+};
+
+export type IdentityUserUpdateRolesDto = {
+	roleNames: Array<string>;
+};
+
+export type Instant = {
+	[key: string]: unknown;
+};
+
+export type IntellisenseContext = {
+	activityTypeName?: string | null;
+	propertyName?: string | null;
+};
+
+export type InterfaceMethodApiDescriptionModel = {
+	name?: string | null;
+	parametersOnMethod?: Array<MethodParameterApiDescriptionModel> | null;
+	returnValue?: ReturnValueApiDescriptionModel;
+};
+
+export type IntPtr = {
+	[key: string]: unknown;
+};
+
+export type IOutputFormatter = {
+	[key: string]: unknown;
+};
+
+export type IRemoteStreamContent = {
+	readonly fileName?: string | null;
+	readonly contentType?: string | null;
+	readonly contentLength?: number | null;
+};
+
+export type IStringValueType = {
+	readonly name?: string | null;
+	readonly properties?: {
+		[key: string]: unknown;
+	} | null;
+	validator?: IValueValidator;
+};
+
+export type IValueValidator = {
+	readonly name?: string | null;
+	readonly properties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export enum JobActionType {
+	Successed = 0,
+	Completed = 1,
+	Failed = -1,
+}
+
+export enum JobPriority {
+	Low = 5,
+	BelowNormal = 10,
+	Normal = 15,
+	AboveNormal = 20,
+	High = 25,
+}
+
+export enum JobSource {
+	User = 0,
+	System = 10,
+	None = -1,
+}
+
+export enum JobStatus {
+	Completed = 0,
+	Queuing = 5,
+	Running = 10,
+	FailedRetry = 15,
+	Paused = 20,
+	Stopped = 30,
+	None = -1,
+}
+
+export enum JobType {
+	Once = 0,
+	Period = 1,
+	Persistent = 2,
+}
+
+export type JToken = Array<JToken>;
+
+export type LanguageCreateDto = {
+	displayName: string;
+	cultureName: string;
+	uiCultureName?: string | null;
+};
+
+export type LanguageDto = {
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	cultureName?: string | null;
+	uiCultureName?: string | null;
+	displayName?: string | null;
+	twoLetterISOLanguageName?: string | null;
+};
+
+export type LanguageDto_1 = {
+	cultureName?: string | null;
+	uiCultureName?: string | null;
+	displayName?: string | null;
+	twoLetterISOLanguageName?: string | null;
+};
+
+export type LanguageInfo = {
+	cultureName?: string | null;
+	uiCultureName?: string | null;
+	displayName?: string | null;
+	readonly twoLetterISOLanguageName?: string | null;
+};
+
+export type LanguageUpdateDto = {
+	displayName: string;
+};
+
+export type LastChatMessage = {
+	avatarUrl?: string | null;
+	object?: string | null;
+	tenantId?: string | null;
+	groupId?: string | null;
+	messageId?: string | null;
+	formUserId?: string;
+	formUserName?: string | null;
+	toUserId?: string | null;
+	content?: string | null;
+	sendTime?: string;
+	readonly isAnonymous?: boolean;
+	messageType?: MessageType;
+	source?: MessageSourceType;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type LayoutCreateDto = {
+	name: string;
+	displayName: string;
+	description?: string | null;
+	path: string;
+	redirect?: string | null;
+	dataId?: string;
+	framework: string;
+};
+
+export type LayoutDto = {
+	id?: string;
+	path?: string | null;
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	redirect?: string | null;
+	meta?: {
+		[key: string]: unknown;
+	} | null;
+	framework?: string | null;
+	dataId?: string;
+};
+
+export enum LayoutKind {
+	Sequential = 0,
+	Explicit = 2,
+	Auto = 3,
+}
+
+export type LayoutUpdateDto = {
+	name: string;
+	displayName: string;
+	description?: string | null;
+	path: string;
+	redirect?: string | null;
+};
+
+export type ListResultDtoOfBackgroundJobActionDefinitionDto = {
+	items?: Array<BackgroundJobActionDefinitionDto> | null;
+};
+
+export type ListResultDtoOfBackgroundJobActionDto = {
+	items?: Array<BackgroundJobActionDto> | null;
+};
+
+export type ListResultDtoOfBackgroundJobDefinitionDto = {
+	items?: Array<BackgroundJobDefinitionDto> | null;
+};
+
+export type ListResultDtoOfDataDto = {
+	items?: Array<DataDto> | null;
+};
+
+export type ListResultDtoOfDynamicParamterDto = {
+	items?: Array<DynamicParamterDto> | null;
+};
+
+export type ListResultDtoOfEntityChangeWithUsernameDto = {
+	items?: Array<EntityChangeWithUsernameDto> | null;
+};
+
+export type ListResultDtoOfFeatureDefinitionDto = {
+	items?: Array<FeatureDefinitionDto> | null;
+};
+
+export type ListResultDtoOfFeatureGroupDefinitionDto = {
+	items?: Array<FeatureGroupDefinitionDto> | null;
+};
+
+export type ListResultDtoOfGroup = {
+	items?: Array<Group> | null;
+};
+
+export type ListResultDtoOfIdentityClaimDto = {
+	items?: Array<IdentityClaimDto> | null;
+};
+
+export type ListResultDtoOfIdentityClaimTypeDto = {
+	items?: Array<IdentityClaimTypeDto> | null;
+};
+
+export type ListResultDtoOfIdentityRoleDto = {
+	items?: Array<IdentityRoleDto> | null;
+};
+
+export type ListResultDtoOfLanguageDto = {
+	items?: Array<LanguageDto_1> | null;
+};
+
+export type ListResultDtoOfLastChatMessage = {
+	items?: Array<LastChatMessage> | null;
+};
+
+export type ListResultDtoOfLayoutDto = {
+	items?: Array<LayoutDto> | null;
+};
+
+export type ListResultDtoOfMenuDto = {
+	items?: Array<MenuDto> | null;
+};
+
+export type ListResultDtoOfMyFileShareDto = {
+	items?: Array<MyFileShareDto> | null;
+};
+
+export type ListResultDtoOfNameValue = {
+	items?: Array<NameValue> | null;
+};
+
+export type ListResultDtoOfNotificationDefinitionDto = {
+	items?: Array<NotificationDefinitionDto> | null;
+};
+
+export type ListResultDtoOfNotificationGroupDefinitionDto = {
+	items?: Array<NotificationGroupDefinitionDto> | null;
+};
+
+export type ListResultDtoOfNotificationGroupDto = {
+	items?: Array<NotificationGroupDto> | null;
+};
+
+export type ListResultDtoOfNotificationTemplateDto = {
+	items?: Array<NotificationTemplateDto> | null;
+};
+
+export type ListResultDtoOfOrganizationUnitDto = {
+	items?: Array<OrganizationUnitDto> | null;
+};
+
+export type ListResultDtoOfOssObjectDto = {
+	items?: Array<OssObjectDto> | null;
+};
+
+export type ListResultDtoOfPermissionDefinitionDto = {
+	items?: Array<PermissionDefinitionDto> | null;
+};
+
+export type ListResultDtoOfPermissionGroupDefinitionDto = {
+	items?: Array<PermissionGroupDefinitionDto> | null;
+};
+
+export type ListResultDtoOfResourceDto = {
+	items?: Array<ResourceDto_1> | null;
+};
+
+export type ListResultDtoOfSettingDefinitionDto = {
+	items?: Array<SettingDefinitionDto> | null;
+};
+
+export type ListResultDtoOfString = {
+	items?: Array<string> | null;
+};
+
+export type ListResultDtoOfTenantConnectionStringDto = {
+	items?: Array<TenantConnectionStringDto> | null;
+};
+
+export type ListResultDtoOfTextDifferenceDto = {
+	items?: Array<TextDifferenceDto> | null;
+};
+
+export type ListResultDtoOfTextTemplateDefinitionDto = {
+	items?: Array<TextTemplateDefinitionDto> | null;
+};
+
+export type ListResultDtoOfUserData = {
+	items?: Array<UserData> | null;
+};
+
+export type ListResultDtoOfUserFavoriteMenuDto = {
+	items?: Array<UserFavoriteMenuDto> | null;
+};
+
+export type ListResultDtoOfUserFriend = {
+	items?: Array<UserFriend> | null;
+};
+
+export type ListResultDtoOfUserSubscreNotificationDto = {
+	items?: Array<UserSubscreNotificationDto> | null;
+};
+
+export type ListResultDtoOfWebhookAvailableGroupDto = {
+	items?: Array<WebhookAvailableGroupDto> | null;
+};
+
+export type ListResultDtoOfWebhookDefinitionDto = {
+	items?: Array<WebhookDefinitionDto> | null;
+};
+
+export type ListResultDtoOfWebhookGroupDefinitionDto = {
+	items?: Array<WebhookGroupDefinitionDto> | null;
+};
+
+export type LocalizableStringDto = {
+	name?: string | null;
+	resource?: string | null;
+};
+
+export type LogDto = {
+	timeStamp?: string;
+	level?: LogLevel;
+	message?: string | null;
+	fields?: LogFieldDto;
+	exceptions?: Array<LogExceptionDto> | null;
+};
+
+export type LogExceptionDto = {
+	depth?: number;
+	class?: string | null;
+	message?: string | null;
+	source?: string | null;
+	stackTrace?: string | null;
+	hResult?: number;
+	helpURL?: string | null;
+};
+
+export type LogFieldDto = {
+	id?: string | null;
+	machineName?: string | null;
+	environment?: string | null;
+	application?: string | null;
+	context?: string | null;
+	actionId?: string | null;
+	actionName?: string | null;
+	requestId?: string | null;
+	requestPath?: string | null;
+	connectionId?: string | null;
+	correlationId?: string | null;
+	clientId?: string | null;
+	userId?: string | null;
+	processId?: number;
+	threadId?: number;
+};
+
+export enum LoginResultType {
+	Success = 1,
+	InvalidUserNameOrPassword = 2,
+	NotAllowed = 3,
+	LockedOut = 4,
+	RequiresTwoFactor = 5,
+}
+
+export enum LogLevel {
+	Trace = 0,
+	Debug = 1,
+	Information = 2,
+	Warning = 3,
+	Error = 4,
+	Critical = 5,
+	None = 6,
+}
+
+export type MemberInfo = {
+	memberType?: MemberTypes;
+	readonly name?: string | null;
+	declaringType?: Type;
+	reflectedType?: Type;
+	module?: Module;
+	readonly customAttributes?: Array<CustomAttributeData> | null;
+	readonly isCollectible?: boolean;
+	readonly metadataToken?: number;
+};
+
+export enum MemberTypes {
+	Constructor = 1,
+	Event = 2,
+	Field = 4,
+	Method = 8,
+	Property = 16,
+	TypeInfo = 32,
+	Custom = 64,
+	NestedType = 128,
+	All = 191,
+}
+
+export type MenuCreateDto = {
+	parentId?: string | null;
+	name: string;
+	displayName: string;
+	description?: string | null;
+	path: string;
+	redirect?: string | null;
+	component: string;
+	isPublic?: boolean;
+	meta?: {
+		[key: string]: unknown;
+	} | null;
+	layoutId: string;
+};
+
+export type MenuDto = {
+	id?: string;
+	path?: string | null;
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	redirect?: string | null;
+	meta?: {
+		[key: string]: unknown;
+	} | null;
+	code?: string | null;
+	component?: string | null;
+	framework?: string | null;
+	parentId?: string | null;
+	layoutId?: string;
+	isPublic?: boolean;
+	startup?: boolean;
+};
+
+export type MenuSettingDto = {
+	bgColor?: string | null;
+	fixed?: boolean;
+	collapsed?: boolean;
+	canDrag?: boolean;
+	show?: boolean;
+	hidden?: boolean;
+	split?: boolean;
+	menuWidth?: number;
+	mode?: string | null;
+	type?: string | null;
+	theme?: string | null;
+	topMenuAlign?: string | null;
+	trigger?: string | null;
+	accordion?: boolean;
+	closeMixSidebarOnChange?: boolean;
+	collapsedShowTitle?: boolean;
+	mixSideTrigger?: string | null;
+	mixSideFixed?: boolean;
+};
+
+export type MenuUpdateDto = {
+	parentId?: string | null;
+	name: string;
+	displayName: string;
+	description?: string | null;
+	path: string;
+	redirect?: string | null;
+	component: string;
+	isPublic?: boolean;
+	meta?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export enum MessageSourceType {
+	User = 0,
+	System = 10,
+}
+
+export enum MessageState {
+	Send = 0,
+	Read = 1,
+	ReCall = 10,
+	Failed = 50,
+	BackTo = 100,
+}
+
+export enum MessageType {
+	Text = 0,
+	Image = 10,
+	Link = 20,
+	Video = 30,
+	Voice = 40,
+	File = 50,
+	Notifier = 100,
+}
+
+export enum MethodAttributes {
+	PrivateScope = 0,
+	ReuseSlot = 1,
+	Private = 2,
+	FamANDAssem = 3,
+	Assembly = 4,
+	Family = 5,
+	FamORAssem = 6,
+	Public = 7,
+	MemberAccessMask = 8,
+	UnmanagedExport = 16,
+	Static = 32,
+	Final = 64,
+	Virtual = 128,
+	HideBySig = 256,
+	NewSlot = 512,
+	VtableLayoutMask = 1024,
+	CheckAccessOnOverride = 2048,
+	Abstract = 4096,
+	SpecialName = 8192,
+	RTSpecialName = 16384,
+	PinvokeImpl = 32768,
+	HasSecurity = 53248,
+}
+
+export type MethodBase = {
+	memberType?: MemberTypes;
+	readonly name?: string | null;
+	declaringType?: Type;
+	reflectedType?: Type;
+	module?: Module;
+	readonly customAttributes?: Array<CustomAttributeData> | null;
+	readonly isCollectible?: boolean;
+	readonly metadataToken?: number;
+	attributes?: MethodAttributes;
+	methodImplementationFlags?: MethodImplAttributes;
+	callingConvention?: CallingConventions;
+	readonly isAbstract?: boolean;
+	readonly isConstructor?: boolean;
+	readonly isFinal?: boolean;
+	readonly isHideBySig?: boolean;
+	readonly isSpecialName?: boolean;
+	readonly isStatic?: boolean;
+	readonly isVirtual?: boolean;
+	readonly isAssembly?: boolean;
+	readonly isFamily?: boolean;
+	readonly isFamilyAndAssembly?: boolean;
+	readonly isFamilyOrAssembly?: boolean;
+	readonly isPrivate?: boolean;
+	readonly isPublic?: boolean;
+	readonly isConstructedGenericMethod?: boolean;
+	readonly isGenericMethod?: boolean;
+	readonly isGenericMethodDefinition?: boolean;
+	readonly containsGenericParameters?: boolean;
+	methodHandle?: RuntimeMethodHandle;
+	readonly isSecurityCritical?: boolean;
+	readonly isSecuritySafeCritical?: boolean;
+	readonly isSecurityTransparent?: boolean;
+};
+
+export enum MethodImplAttributes {
+	IL = 0,
+	Managed = 1,
+	Native = 2,
+	OPTIL = 3,
+	CodeTypeMask = 4,
+	Runtime = 8,
+	ManagedMask = 16,
+	Unmanaged = 32,
+	NoInlining = 64,
+	ForwardRef = 128,
+	Synchronized = 256,
+	NoOptimization = 512,
+	PreserveSig = 4096,
+	AggressiveInlining = 65535,
+}
+
+export type MethodInfo = {
+	readonly name?: string | null;
+	declaringType?: Type;
+	reflectedType?: Type;
+	module?: Module;
+	readonly customAttributes?: Array<CustomAttributeData> | null;
+	readonly isCollectible?: boolean;
+	readonly metadataToken?: number;
+	attributes?: MethodAttributes;
+	methodImplementationFlags?: MethodImplAttributes;
+	callingConvention?: CallingConventions;
+	readonly isAbstract?: boolean;
+	readonly isConstructor?: boolean;
+	readonly isFinal?: boolean;
+	readonly isHideBySig?: boolean;
+	readonly isSpecialName?: boolean;
+	readonly isStatic?: boolean;
+	readonly isVirtual?: boolean;
+	readonly isAssembly?: boolean;
+	readonly isFamily?: boolean;
+	readonly isFamilyAndAssembly?: boolean;
+	readonly isFamilyOrAssembly?: boolean;
+	readonly isPrivate?: boolean;
+	readonly isPublic?: boolean;
+	readonly isConstructedGenericMethod?: boolean;
+	readonly isGenericMethod?: boolean;
+	readonly isGenericMethodDefinition?: boolean;
+	readonly containsGenericParameters?: boolean;
+	methodHandle?: RuntimeMethodHandle;
+	readonly isSecurityCritical?: boolean;
+	readonly isSecuritySafeCritical?: boolean;
+	readonly isSecurityTransparent?: boolean;
+	memberType?: MemberTypes;
+	returnParameter?: ParameterInfo;
+	returnType?: Type;
+	returnTypeCustomAttributes?: ICustomAttributeProvider;
+};
+
+export type MethodParameterApiDescriptionModel = {
+	name?: string | null;
+	typeAsString?: string | null;
+	type?: string | null;
+	typeSimple?: string | null;
+	isOptional?: boolean;
+	defaultValue?: unknown;
+};
+
+export type Module = {
+	assembly?: Assembly;
+	readonly fullyQualifiedName?: string | null;
+	readonly name?: string | null;
+	readonly mdStreamVersion?: number;
+	readonly moduleVersionId?: string;
+	readonly scopeName?: string | null;
+	moduleHandle?: ModuleHandle;
+	readonly customAttributes?: Array<CustomAttributeData> | null;
+	readonly metadataToken?: number;
+};
+
+export type ModuleApiDescriptionModel = {
+	rootPath?: string | null;
+	remoteServiceName?: string | null;
+	controllers?: {
+		[key: string]: ControllerApiDescriptionModel;
+	} | null;
+};
+
+export type ModuleExtensionDto = {
+	entities?: {
+		[key: string]: EntityExtensionDto;
+	} | null;
+	configuration?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type ModuleHandle = {
+	readonly mdStreamVersion?: number;
+};
+
+export type MultiTabsSettingDto = {
+	cache?: boolean;
+	show?: boolean;
+	showQuick?: boolean;
+	canDrag?: boolean;
+	showRedo?: boolean;
+	showFold?: boolean;
+};
+
+export type MultiTenancyInfoDto = {
+	isEnabled?: boolean;
+};
+
+export enum MultiTenancySides {
+	Tenant = 1,
+	Host = 2,
+	Both = 3,
+}
+
+export type MyFileShareDto = {
+	name?: string | null;
+	path?: string | null;
+	roles?: Array<string> | null;
+	users?: Array<string> | null;
+	mD5?: string | null;
+	url?: string | null;
+	accessCount?: number;
+	maxAccessCount?: number;
+	expirationTime?: string;
+};
+
+export type MyFriendAddRequestDto = {
+	friendId: string;
+	remarkName?: string | null;
+};
+
+export type MyFriendCreateDto = {
+	friendId: string;
+};
+
+export type NameValue = {
+	name?: string | null;
+	value?: string | null;
+};
+
+export enum NotificationContentType {
+	Text = 0,
+	Html = 1,
+	Markdown = 2,
+	Json = 3,
+}
+
+export type NotificationData = {
+	readonly type?: string | null;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type NotificationDefinitionCreateDto = {
+	template?: string | null;
+	displayName: string;
+	description?: string | null;
+	allowSubscriptionToClients?: boolean;
+	notificationLifetime?: NotificationLifetime;
+	notificationType?: NotificationType;
+	contentType?: NotificationContentType;
+	providers?: Array<string> | null;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name: string;
+	groupName: string;
+};
+
+export type NotificationDefinitionDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name?: string | null;
+	isStatic?: boolean;
+	groupName?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	allowSubscriptionToClients?: boolean | null;
+	notificationLifetime?: NotificationLifetime;
+	notificationType?: NotificationType;
+	contentType?: NotificationContentType;
+	providers?: Array<string> | null;
+	template?: string | null;
+};
+
+export type NotificationDefinitionUpdateDto = {
+	template?: string | null;
+	displayName: string;
+	description?: string | null;
+	allowSubscriptionToClients?: boolean;
+	notificationLifetime?: NotificationLifetime;
+	notificationType?: NotificationType;
+	contentType?: NotificationContentType;
+	providers?: Array<string> | null;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type NotificationDto = {
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	lifetime?: NotificationLifetime;
+	type?: NotificationType;
+	contentType?: NotificationContentType;
+};
+
+export type NotificationGroupDefinitionCreateDto = {
+	displayName: string;
+	description?: string | null;
+	allowSubscriptionToClients?: boolean;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name: string;
+};
+
+export type NotificationGroupDefinitionDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	isStatic?: boolean;
+	allowSubscriptionToClients?: boolean;
+};
+
+export type NotificationGroupDefinitionUpdateDto = {
+	displayName: string;
+	description?: string | null;
+	allowSubscriptionToClients?: boolean;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type NotificationGroupDto = {
+	name?: string | null;
+	displayName?: string | null;
+	notifications?: Array<NotificationDto> | null;
+};
+
+export enum NotificationLifetime {
+	Persistent = 0,
+	OnlyOne = 1,
+}
+
+export type NotificationMarkReadStateInput = {
+	idList: Array<number>;
+	state?: NotificationReadState;
+};
+
+export enum NotificationReadState {
+	Read = 0,
+	UnRead = 1,
+}
+
+export type NotificationSendDto = {
+	name: string;
+	data?: {
+		[key: string]: unknown;
+	} | null;
+	culture?: string | null;
+	toUsers?: Array<UserIdentifier> | null;
+	severity?: NotificationSeverity;
+};
+
+export enum NotificationSeverity {
+	Success = 0,
+	Info = 10,
+	Warn = 20,
+	Error = 30,
+	Fatal = 40,
+}
+
+export type NotificationTemplateDto = {
+	name?: string | null;
+	description?: string | null;
+	title?: string | null;
+	content?: string | null;
+	culture?: string | null;
+};
+
+export type NotificationTemplateSendDto = {
+	name: string;
+	data?: {
+		[key: string]: unknown;
+	} | null;
+	culture?: string | null;
+	toUsers?: Array<UserIdentifier> | null;
+	severity?: NotificationSeverity;
+};
+
+export enum NotificationType {
+	Application = 0,
+	System = 10,
+	User = 20,
+	ServiceCallback = 30,
+}
+
+export type ObjectExtensionsDto = {
+	modules?: {
+		[key: string]: ModuleExtensionDto;
+	} | null;
+	enums?: {
+		[key: string]: ExtensionEnumDto;
+	} | null;
+};
+
+export type OkObjectResult = {
+	value?: unknown;
+	formatters?: Array<IOutputFormatter> | null;
+	contentTypes?: Array<string> | null;
+	declaredType?: Type;
+	statusCode?: number | null;
+};
+
+export type OpenIddictApplicationCreateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	clientSecret?: string | null;
+	clientType?: string | null;
+	consentType?: string | null;
+	displayName?: string | null;
+	displayNames?: {
+		[key: string]: string;
+	} | null;
+	endpoints?: Array<string> | null;
+	grantTypes?: Array<string> | null;
+	responseTypes?: Array<string> | null;
+	scopes?: Array<string> | null;
+	postLogoutRedirectUris?: Array<string> | null;
+	properties?: {
+		[key: string]: string;
+	} | null;
+	redirectUris?: Array<string> | null;
+	requirements?: Array<string> | null;
+	applicationType?: string | null;
+	clientUri?: string | null;
+	logoUri?: string | null;
+	clientId: string;
+};
+
+export type OpenIddictApplicationDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	clientId?: string | null;
+	clientType?: string | null;
+	consentType?: string | null;
+	displayName?: string | null;
+	displayNames?: {
+		[key: string]: string;
+	} | null;
+	endpoints?: Array<string> | null;
+	grantTypes?: Array<string> | null;
+	responseTypes?: Array<string> | null;
+	scopes?: Array<string> | null;
+	postLogoutRedirectUris?: Array<string> | null;
+	properties?: {
+		[key: string]: string;
+	} | null;
+	redirectUris?: Array<string> | null;
+	requirements?: Array<string> | null;
+	applicationType?: string | null;
+	clientUri?: string | null;
+	logoUri?: string | null;
+	settings?: string | null;
+	jsonWebKeySet?: string | null;
+	concurrencyStamp?: string | null;
+};
+
+export type OpenIddictApplicationUpdateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	clientSecret?: string | null;
+	clientType?: string | null;
+	consentType?: string | null;
+	displayName?: string | null;
+	displayNames?: {
+		[key: string]: string;
+	} | null;
+	endpoints?: Array<string> | null;
+	grantTypes?: Array<string> | null;
+	responseTypes?: Array<string> | null;
+	scopes?: Array<string> | null;
+	postLogoutRedirectUris?: Array<string> | null;
+	properties?: {
+		[key: string]: string;
+	} | null;
+	redirectUris?: Array<string> | null;
+	requirements?: Array<string> | null;
+	applicationType?: string | null;
+	clientUri?: string | null;
+	logoUri?: string | null;
+	concurrencyStamp?: string | null;
+};
+
+export type OpenIddictAuthorizationDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	concurrencyStamp?: string | null;
+	applicationId?: string | null;
+	creationDate?: string | null;
+	properties?: {
+		[key: string]: string;
+	} | null;
+	scopes?: Array<string> | null;
+	status?: string | null;
+	subject?: string | null;
+	type?: string | null;
+};
+
+export type OpenIddictScopeCreateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	description?: string | null;
+	descriptions?: {
+		[key: string]: string;
+	} | null;
+	displayName?: string | null;
+	displayNames?: {
+		[key: string]: string;
+	} | null;
+	name: string;
+	properties?: {
+		[key: string]: string;
+	} | null;
+	resources?: Array<string> | null;
+};
+
+export type OpenIddictScopeDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	concurrencyStamp?: string | null;
+	description?: string | null;
+	descriptions?: {
+		[key: string]: string;
+	} | null;
+	displayName?: string | null;
+	displayNames?: {
+		[key: string]: string;
+	} | null;
+	name?: string | null;
+	properties?: {
+		[key: string]: string;
+	} | null;
+	resources?: Array<string> | null;
+};
+
+export type OpenIddictScopeUpdateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	description?: string | null;
+	descriptions?: {
+		[key: string]: string;
+	} | null;
+	displayName?: string | null;
+	displayNames?: {
+		[key: string]: string;
+	} | null;
+	name: string;
+	properties?: {
+		[key: string]: string;
+	} | null;
+	resources?: Array<string> | null;
+	concurrencyStamp?: string | null;
+};
+
+export type OpenIddictTokenDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	concurrencyStamp?: string | null;
+	applicationId?: string | null;
+	authorizationId?: string | null;
+	creationDate?: string | null;
+	expirationDate?: string | null;
+	payload?: string | null;
+	properties?: string | null;
+	redemptionDate?: string | null;
+	referenceId?: string | null;
+	status?: string | null;
+	subject?: string | null;
+	type?: string | null;
+};
+
+export type OptionDto = {
+	name?: string | null;
+	value?: string | null;
+};
+
+export type OrganizationUnitAddRoleDto = {
+	roleIds: Array<string>;
+};
+
+export type OrganizationUnitAddUserDto = {
+	userIds: Array<string>;
+};
+
+export type OrganizationUnitCreateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	displayName: string;
+	parentId?: string | null;
+};
+
+export type OrganizationUnitDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	parentId?: string | null;
+	code?: string | null;
+	displayName?: string | null;
+};
+
+export type OrganizationUnitEntityRuleCreateDto = {
+	isEnabled?: boolean;
+	operation: DataAccessOperation;
+	filterGroup: DataAccessFilterGroup;
+	allowProperties?: Array<string> | null;
+	entityTypeId: string;
+	orgId: string;
+	orgCode: string;
+};
+
+export type OrganizationUnitEntityRuleDto = {
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	tenantId?: string | null;
+	isEnabled?: boolean;
+	operation?: DataAccessOperation;
+	filterGroup?: DataAccessFilterGroup;
+	entityTypeId?: string;
+	entityTypeFullName?: string | null;
+	allowProperties?: Array<string> | null;
+	orgId?: string;
+	orgCode?: string | null;
+};
+
+export type OrganizationUnitEntityRuleUpdateDto = {
+	isEnabled?: boolean;
+	operation: DataAccessOperation;
+	filterGroup: DataAccessFilterGroup;
+	allowProperties?: Array<string> | null;
+};
+
+export type OrganizationUnitMoveDto = {
+	parentId?: string | null;
+};
+
+export type OrganizationUnitUpdateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	displayName?: string | null;
+};
+
+export type OssContainerDto = {
+	name?: string | null;
+	size?: number;
+	creationDate?: string;
+	lastModifiedDate?: string | null;
+	metadata?: {
+		[key: string]: string;
+	} | null;
+};
+
+export type OssContainersResultDto = {
+	prefix?: string | null;
+	marker?: string | null;
+	nextMarker?: string | null;
+	maxKeys?: number;
+	containers?: Array<OssContainerDto> | null;
+};
+
+export type OssObjectDto = {
+	isFolder?: boolean;
+	path?: string | null;
+	name?: string | null;
+	size?: number;
+	mD5?: string | null;
+	creationDate?: string | null;
+	lastModifiedDate?: string | null;
+	metadata?: {
+		[key: string]: string;
+	} | null;
+};
+
+export type OssObjectsResultDto = {
+	bucket?: string | null;
+	prefix?: string | null;
+	delimiter?: string | null;
+	marker?: string | null;
+	nextMarker?: string | null;
+	maxKeys?: number;
+	objects?: Array<OssObjectDto> | null;
+};
+
+export type PackageBlobDto = {
+	id?: number;
+	creationTime?: string;
+	creatorId?: string | null;
+	name?: string | null;
+	url?: string | null;
+	size?: number | null;
+	summary?: string | null;
+	createdAt?: string;
+	updatedAt?: string | null;
+	license?: string | null;
+	authors?: string | null;
+	shA256?: string | null;
+	contentType?: string | null;
+	downloadCount?: number;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type PackageCreateDto = {
+	note: string;
+	description?: string | null;
+	forceUpdate?: boolean;
+	authors?: string | null;
+	level?: PackageLevel;
+	name: string;
+	version: string;
+};
+
+export type PackageDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	concurrencyStamp?: string | null;
+	name?: string | null;
+	note?: string | null;
+	version?: string | null;
+	description?: string | null;
+	forceUpdate?: boolean;
+	authors?: string | null;
+	level?: PackageLevel;
+	blobs?: Array<PackageBlobDto> | null;
+};
+
+export enum PackageLevel {
+	Resource = 0,
+	Full = 1,
+	None = -1,
+}
+
+export type PackageUpdateDto = {
+	note: string;
+	description?: string | null;
+	forceUpdate?: boolean;
+	authors?: string | null;
+	level?: PackageLevel;
+	concurrencyStamp?: string | null;
+};
+
+export type PagedListOfWorkflowBlueprintModel = {
+	items?: Array<WorkflowBlueprintModel> | null;
+	page?: number | null;
+	pageSize?: number | null;
+	totalCount?: number;
+};
+
+export type PagedListOfWorkflowBlueprintSummaryModel = {
+	items?: Array<WorkflowBlueprintSummaryModel> | null;
+	page?: number | null;
+	pageSize?: number | null;
+	totalCount?: number;
+};
+
+export type PagedListOfWorkflowDefinitionSummaryModel = {
+	items?: Array<WorkflowDefinitionSummaryModel> | null;
+	page?: number | null;
+	pageSize?: number | null;
+	totalCount?: number;
+};
+
+export type PagedListOfWorkflowExecutionLogRecord = {
+	items?: Array<WorkflowExecutionLogRecord> | null;
+	page?: number | null;
+	pageSize?: number | null;
+	totalCount?: number;
+};
+
+export type PagedListOfWorkflowInstanceSummaryModel = {
+	items?: Array<WorkflowInstanceSummaryModel> | null;
+	page?: number | null;
+	pageSize?: number | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfAuditLogDto = {
+	items?: Array<AuditLogDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfBackgroundJobInfoDto = {
+	items?: Array<BackgroundJobInfoDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfBackgroundJobLogDto = {
+	items?: Array<BackgroundJobLogDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfChatMessage = {
+	items?: Array<ChatMessage> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfDataDto = {
+	items?: Array<DataDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfEditionDto = {
+	items?: Array<EditionDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfEntityChangeDto = {
+	items?: Array<EntityChangeDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfEntityTypeInfoDto = {
+	items?: Array<EntityTypeInfoDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfFeedbackDto = {
+	items?: Array<FeedbackDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfGroup = {
+	items?: Array<Group> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfGroupUserCard = {
+	items?: Array<GroupUserCard> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfIdentityClaimTypeDto = {
+	items?: Array<IdentityClaimTypeDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfIdentityRoleDto = {
+	items?: Array<IdentityRoleDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfIdentitySessionDto = {
+	items?: Array<IdentitySessionDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfIdentitySessionDto_1 = {
+	items?: Array<IdentitySessionDto_1> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfIdentityUserDto = {
+	items?: Array<IdentityUserDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfLayoutDto = {
+	items?: Array<LayoutDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfLogDto = {
+	items?: Array<LogDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfMenuDto = {
+	items?: Array<MenuDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfOpenIddictApplicationDto = {
+	items?: Array<OpenIddictApplicationDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfOpenIddictAuthorizationDto = {
+	items?: Array<OpenIddictAuthorizationDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfOpenIddictScopeDto = {
+	items?: Array<OpenIddictScopeDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfOpenIddictTokenDto = {
+	items?: Array<OpenIddictTokenDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfOrganizationUnitDto = {
+	items?: Array<OrganizationUnitDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfPackageDto = {
+	items?: Array<PackageDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfSecurityLogDto = {
+	items?: Array<SecurityLogDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfTenantDto = {
+	items?: Array<TenantDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfUserFriend = {
+	items?: Array<UserFriend> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfUserNotificationDto = {
+	items?: Array<UserNotificationDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfUserSubscreNotificationDto = {
+	items?: Array<UserSubscreNotificationDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfWebhookSendRecordDto = {
+	items?: Array<WebhookSendRecordDto> | null;
+	totalCount?: number;
+};
+
+export type PagedResultDtoOfWebhookSubscriptionDto = {
+	items?: Array<WebhookSubscriptionDto> | null;
+	totalCount?: number;
+};
+
+export type ParameterApiDescriptionModel = {
+	nameOnMethod?: string | null;
+	name?: string | null;
+	jsonName?: string | null;
+	type?: string | null;
+	typeSimple?: string | null;
+	isOptional?: boolean;
+	defaultValue?: unknown;
+	constraintTypes?: Array<string> | null;
+	bindingSourceId?: string | null;
+	descriptorName?: string | null;
+};
+
+export enum ParameterAttributes {
+	None = 0,
+	In = 1,
+	Out = 2,
+	Lcid = 4,
+	Retval = 8,
+	Optional = 16,
+	HasDefault = 4096,
+	HasFieldMarshal = 8192,
+	Reserved3 = 16384,
+	Reserved4 = 32768,
+	ReservedMask = 61440,
+}
+
+export type ParameterInfo = {
+	attributes?: ParameterAttributes;
+	member?: MemberInfo;
+	readonly name?: string | null;
+	parameterType?: Type;
+	readonly position?: number;
+	readonly isIn?: boolean;
+	readonly isLcid?: boolean;
+	readonly isOptional?: boolean;
+	readonly isOut?: boolean;
+	readonly isRetval?: boolean;
+	readonly defaultValue?: unknown;
+	readonly rawDefaultValue?: unknown;
+	readonly hasDefaultValue?: boolean;
+	readonly customAttributes?: Array<CustomAttributeData> | null;
+	readonly metadataToken?: number;
+};
+
+export type ParamterOptionDto = {
+	key?: string | null;
+	value?: unknown;
+};
+
+export type PermissionDefinitionCreateDto = {
+	displayName: string;
+	parentName?: string | null;
+	isEnabled?: boolean;
+	multiTenancySide?: MultiTenancySides;
+	providers?: Array<string> | null;
+	stateCheckers?: string | null;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name: string;
+	groupName: string;
+};
+
+export type PermissionDefinitionDto = {
+	name?: string | null;
+	parentName?: string | null;
+	displayName?: string | null;
+	groupName?: string | null;
+	isEnabled?: boolean;
+	isStatic?: boolean;
+	multiTenancySide?: MultiTenancySides;
+	providers?: Array<string> | null;
+	stateCheckers?: string | null;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type PermissionDefinitionUpdateDto = {
+	displayName: string;
+	parentName?: string | null;
+	isEnabled?: boolean;
+	multiTenancySide?: MultiTenancySides;
+	providers?: Array<string> | null;
+	stateCheckers?: string | null;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	concurrencyStamp?: string | null;
+};
+
+export type PermissionGrantInfoDto = {
+	name?: string | null;
+	displayName?: string | null;
+	parentName?: string | null;
+	isGranted?: boolean;
+	allowedProviders?: Array<string> | null;
+	grantedProviders?: Array<ProviderInfoDto> | null;
+};
+
+export type PermissionGroupDefinitionCreateDto = {
+	displayName: string;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name: string;
+};
+
+export type PermissionGroupDefinitionDto = {
+	name?: string | null;
+	displayName?: string | null;
+	isStatic?: boolean;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type PermissionGroupDefinitionUpdateDto = {
+	displayName: string;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	concurrencyStamp?: string | null;
+};
+
+export type PermissionGroupDto = {
+	name?: string | null;
+	displayName?: string | null;
+	displayNameKey?: string | null;
+	displayNameResource?: string | null;
+	permissions?: Array<PermissionGrantInfoDto> | null;
+};
+
+export type PhoneRegisterDto = {
+	phoneNumber: string;
+	name?: string | null;
+	userName?: string | null;
+	emailAddress?: string | null;
+	password: string;
+	code: string;
+};
+
+export type PhoneResetPasswordDto = {
+	phoneNumber: string;
+	newPassword: string;
+	code: string;
+};
+
+export type ProblemDetails = {
+	type?: string | null;
+	title?: string | null;
+	status?: number | null;
+	detail?: string | null;
+	instance?: string | null;
+	[key: string]: (unknown | string | number) | undefined;
+};
+
+export type ProfileDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	userName?: string | null;
+	email?: string | null;
+	name?: string | null;
+	surname?: string | null;
+	phoneNumber?: string | null;
+	isExternal?: boolean;
+	hasPassword?: boolean;
+	concurrencyStamp?: string | null;
+};
+
+export type ProjectConfigDto = {
+	permissionCacheType?: number;
+	showSettingButton?: boolean;
+	showDarkModeToggle?: boolean;
+	settingButtonPosition?: string | null;
+	permissionMode?: string | null;
+	sessionTimeoutProcessing?: number;
+	grayMode?: boolean;
+	colorWeak?: boolean;
+	themeColor?: string | null;
+	fullContent?: boolean;
+	contentMode?: string | null;
+	showLogo?: boolean;
+	showFooter?: boolean;
+	headerSetting?: HeaderSettingDto;
+	menuSetting?: MenuSettingDto;
+	multiTabsSetting?: MultiTabsSettingDto;
+	transitionSetting?: TransitionSettingDto;
+	openKeepAlive?: boolean;
+	lockTime?: number;
+	showBreadCrumb?: boolean;
+	showBreadCrumbIcon?: boolean;
+	useErrorHandle?: boolean;
+	useOpenBackTop?: boolean;
+	canEmbedIFramePage?: boolean;
+	closeMessageOnSwitch?: boolean;
+	removeAllHttpPending?: boolean;
+};
+
+export type PropertyApiDescriptionModel = {
+	name?: string | null;
+	jsonName?: string | null;
+	type?: string | null;
+	typeSimple?: string | null;
+	isRequired?: boolean;
+	minLength?: number | null;
+	maxLength?: number | null;
+	minimum?: string | null;
+	maximum?: string | null;
+	regex?: string | null;
+};
+
+export enum PropertyAttributes {
+	None = 0,
+	SpecialName = 512,
+	RTSpecialName = 1024,
+	HasDefault = 4096,
+	Reserved2 = 8192,
+	Reserved3 = 16384,
+	Reserved4 = 32768,
+	ReservedMask = 62464,
+}
+
+export type PropertyInfo = {
+	readonly name?: string | null;
+	declaringType?: Type;
+	reflectedType?: Type;
+	module?: Module;
+	readonly customAttributes?: Array<CustomAttributeData> | null;
+	readonly isCollectible?: boolean;
+	readonly metadataToken?: number;
+	memberType?: MemberTypes;
+	propertyType?: Type;
+	attributes?: PropertyAttributes;
+	readonly isSpecialName?: boolean;
+	readonly canRead?: boolean;
+	readonly canWrite?: boolean;
+	getMethod?: MethodInfo;
+	setMethod?: MethodInfo;
+};
+
+export type ProviderInfoDto = {
+	providerName?: string | null;
+	providerKey?: string | null;
+};
+
+export type RegisterDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	userName: string;
+	emailAddress: string;
+	password: string;
+	appName: string;
+};
+
+export type RemoteServiceErrorInfo = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	data?: {
+		[key: string]: unknown;
+	} | null;
+	validationErrors?: Array<RemoteServiceValidationErrorInfo> | null;
+};
+
+export type RemoteServiceErrorResponse = {
+	error?: RemoteServiceErrorInfo;
+};
+
+export type RemoteServiceValidationErrorInfo = {
+	message?: string | null;
+	members?: Array<string> | null;
+};
+
+export type ResetPasswordDto = {
+	userId?: string;
+	resetToken: string;
+	password: string;
+};
+
+export type ResourceCreateDto = {
+	enable?: boolean;
+	displayName?: string | null;
+	description?: string | null;
+	defaultCultureName?: string | null;
+	name: string;
+};
+
+export type ResourceDto = {
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	enable?: boolean;
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	defaultCultureName?: string | null;
+};
+
+export type ResourceDto_1 = {
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+};
+
+export type ResourceUpdateDto = {
+	enable?: boolean;
+	displayName?: string | null;
+	description?: string | null;
+	defaultCultureName?: string | null;
+};
+
+export type RetryWorkflowRequest = {
+	runImmediately?: boolean;
+};
+
+export type ReturnValueApiDescriptionModel = {
+	type?: string | null;
+	typeSimple?: string | null;
+};
+
+export type RoleEntityRuleCreateDto = {
+	isEnabled?: boolean;
+	operation: DataAccessOperation;
+	filterGroup: DataAccessFilterGroup;
+	allowProperties?: Array<string> | null;
+	entityTypeId: string;
+	roleId: string;
+	roleName: string;
+};
+
+export type RoleEntityRuleDto = {
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	tenantId?: string | null;
+	isEnabled?: boolean;
+	operation?: DataAccessOperation;
+	filterGroup?: DataAccessFilterGroup;
+	entityTypeId?: string;
+	entityTypeFullName?: string | null;
+	allowProperties?: Array<string> | null;
+	roleId?: string;
+	roleName?: string | null;
+};
+
+export type RoleEntityRuleUpdateDto = {
+	isEnabled?: boolean;
+	operation: DataAccessOperation;
+	filterGroup: DataAccessFilterGroup;
+	allowProperties?: Array<string> | null;
+};
+
+export type RoleMenuInput = {
+	roleName: string;
+	menuIds: Array<string>;
+};
+
+export type RoleMenuStartupInput = {
+	roleName: string;
+};
+
+export type RuntimeFieldHandle = {
+	value?: IntPtr;
+};
+
+export type RuntimeMethodHandle = {
+	value?: IntPtr;
+};
+
+export type RuntimeSelectListContextHolder = {
+	providerTypeName?: string | null;
+	context?: unknown;
+};
+
+export type RuntimeTypeHandle = {
+	value?: IntPtr;
+};
+
+export type SaveWebhookDefinitionRequest = {
+	id?: string | null;
+	path: string;
+	name: string;
+	description?: string | null;
+	payloadTypeName?: string | null;
+	isEnabled?: boolean;
+};
+
+export type SaveWorkflowDefinitionRequest = {
+	workflowDefinitionId?: string | null;
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	tag?: string | null;
+	channel?: string | null;
+	variables?: string | null;
+	contextOptions?: WorkflowContextOptions;
+	isSingleton?: boolean;
+	persistenceBehavior?: WorkflowPersistenceBehavior;
+	deleteCompletedInstances?: boolean;
+	publish?: boolean;
+	activities?: Array<ActivityDefinition> | null;
+	connections?: Array<ConnectionDefinition> | null;
+	customAttributes?: string | null;
+};
+
+export type ScheduledActivity = {
+	activityId?: string | null;
+	input?: unknown;
+};
+
+export type SecurityLogDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	applicationName?: string | null;
+	identity?: string | null;
+	action?: string | null;
+	userId?: string | null;
+	userName?: string | null;
+	tenantName?: string | null;
+	clientId?: string | null;
+	correlationId?: string | null;
+	clientIpAddress?: string | null;
+	browserInfo?: string | null;
+	creationTime?: string;
+};
+
+export enum SecurityRuleSet {
+	None = 0,
+	Level1 = 1,
+	Level2 = 2,
+}
+
+export type SendChangePhoneNumberCodeInput = {
+	newPhoneNumber: string;
+};
+
+export type SendEmailConfirmCodeDto = {
+	email: string;
+	appName: string;
+	returnUrl?: string | null;
+	returnUrlHash?: string | null;
+};
+
+export type SendEmailSigninCodeDto = {
+	emailAddress: string;
+};
+
+export type SendPasswordResetCodeDto = {
+	email: string;
+	appName: string;
+	returnUrl?: string | null;
+	returnUrlHash?: string | null;
+};
+
+export type SendPhoneRegisterCodeDto = {
+	phoneNumber: string;
+};
+
+export type SendPhoneResetPasswordCodeDto = {
+	phoneNumber: string;
+};
+
+export type SendPhoneSigninCodeDto = {
+	phoneNumber: string;
+};
+
+export type SendTestEmailInput = {
+	emailAddress: string;
+};
+
+export type SetTextInput = {
+	resourceName: string;
+	key: string;
+	cultureName: string;
+	value?: string | null;
+};
+
+export type SettingDefinitionCreateDto = {
+	displayName: string;
+	description?: string | null;
+	defaultValue?: string | null;
+	isVisibleToClients?: boolean;
+	providers?: Array<string> | null;
+	isInherited?: boolean;
+	isEncrypted?: boolean;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name: string;
+};
+
+export type SettingDefinitionDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	defaultValue?: string | null;
+	isVisibleToClients?: boolean;
+	providers?: Array<string> | null;
+	isInherited?: boolean;
+	isEncrypted?: boolean;
+	isStatic?: boolean;
+};
+
+export type SettingDefinitionUpdateDto = {
+	displayName: string;
+	description?: string | null;
+	defaultValue?: string | null;
+	isVisibleToClients?: boolean;
+	providers?: Array<string> | null;
+	isInherited?: boolean;
+	isEncrypted?: boolean;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type SettingDetailsDto = {
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	value?: string | null;
+	defaultValue?: string | null;
+	isEncrypted?: boolean;
+	valueType?: ValueType_1;
+	slot?: string | null;
+	options?: Array<OptionDto> | null;
+	providers?: Array<string> | null;
+	requiredFeatures?: Array<string> | null;
+	requiredPermissions?: Array<string> | null;
+};
+
+export type SettingDto = {
+	displayName?: string | null;
+	description?: string | null;
+	details?: Array<SettingDetailsDto> | null;
+};
+
+export type SettingGroupDto = {
+	displayName?: string | null;
+	description?: string | null;
+	settings?: Array<SettingDto> | null;
+};
+
+export type SettingGroupResult = {
+	readonly items?: Array<SettingGroupDto> | null;
+};
+
+export enum Sex {
+	Male = 0,
+	Female = 1,
+	Other = 2,
+}
+
+export type SimpleException = {
+	type?: Type;
+	message?: string | null;
+	stackTrace?: string | null;
+	innerException?: SimpleException;
+	data?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export enum SortBy {
+	Ascending = 0,
+	Descending = 1,
+}
+
+export type StructLayoutAttribute = {
+	readonly typeId?: unknown;
+	value?: LayoutKind;
+};
+
+export type SubscriptionsGetByNameDto = {
+	name: string;
+};
+
+export type TenantConnectionStringCreateOrUpdate = {
+	name: string;
+	value: string;
+};
+
+export type TenantConnectionStringDto = {
+	name?: string | null;
+	value?: string | null;
+};
+
+export type TenantCreateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name: string;
+	isActive?: boolean;
+	editionId?: string | null;
+	enableTime?: string | null;
+	disableTime?: string | null;
+	adminEmailAddress: string;
+	adminPassword: string;
+	useSharedDatabase?: boolean;
+	defaultConnectionString?: string | null;
+	connectionStrings?: {
+		[key: string]: string;
+	} | null;
+};
+
+export type TenantDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	name?: string | null;
+	normalizedName?: string | null;
+	editionId?: string | null;
+	editionName?: string | null;
+	isActive?: boolean;
+	enableTime?: string | null;
+	disableTime?: string | null;
+	concurrencyStamp?: string | null;
+};
+
+export type TenantUpdateDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name: string;
+	isActive?: boolean;
+	editionId?: string | null;
+	enableTime?: string | null;
+	disableTime?: string | null;
+	concurrencyStamp?: string | null;
+};
+
+export type TextDifferenceDto = {
+	cultureName?: string | null;
+	key?: string | null;
+	value?: string | null;
+	resourceName?: string | null;
+	targetCultureName?: string | null;
+	targetValue?: string | null;
+};
+
+export type TextDto = {
+	key?: string | null;
+	value?: string | null;
+	cultureName?: string | null;
+	resourceName?: string | null;
+};
+
+export type TextTemplateContentDto = {
+	name?: string | null;
+	content?: string | null;
+	culture?: string | null;
+};
+
+export type TextTemplateContentUpdateDto = {
+	culture?: string | null;
+	content: string;
+};
+
+export type TextTemplateDefinitionCreateDto = {
+	displayName: string;
+	defaultCultureName?: string | null;
+	localizationResourceName?: string | null;
+	isInlineLocalized?: boolean;
+	isLayout?: boolean;
+	layout?: string | null;
+	renderEngine?: string | null;
+	name: string;
+};
+
+export type TextTemplateDefinitionDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name?: string | null;
+	displayName?: string | null;
+	defaultCultureName?: string | null;
+	localizationResourceName?: string | null;
+	renderEngine?: string | null;
+	isInlineLocalized?: boolean;
+	isLayout?: boolean;
+	layout?: string | null;
+	isStatic?: boolean;
+	concurrencyStamp?: string | null;
+};
+
+export type TextTemplateDefinitionUpdateDto = {
+	displayName: string;
+	defaultCultureName?: string | null;
+	localizationResourceName?: string | null;
+	isInlineLocalized?: boolean;
+	isLayout?: boolean;
+	layout?: string | null;
+	renderEngine?: string | null;
+	concurrencyStamp?: string | null;
+};
+
+export type TextTemplateRestoreInput = {
+	culture?: string | null;
+};
+
+export type ThemeSettingDto = {
+	darkMode?: string | null;
+	projectConfig?: ProjectConfigDto;
+	beforeMiniInfo?: BeforeMiniStateDto;
+};
+
+export type TimeSpan = {
+	ticks?: number;
+	readonly days?: number;
+	readonly hours?: number;
+	readonly milliseconds?: number;
+	readonly microseconds?: number;
+	readonly nanoseconds?: number;
+	readonly minutes?: number;
+	readonly seconds?: number;
+	readonly totalDays?: number;
+	readonly totalHours?: number;
+	readonly totalMilliseconds?: number;
+	readonly totalMicroseconds?: number;
+	readonly totalNanoseconds?: number;
+	readonly totalMinutes?: number;
+	readonly totalSeconds?: number;
+};
+
+export type TimeZone = {
+	iana?: IanaTimeZone;
+	windows?: WindowsTimeZone;
+};
+
+export type TimingDto = {
+	timeZone?: TimeZone;
+};
+
+export type TransitionSettingDto = {
+	enable?: boolean;
+	basicTransition?: string | null;
+	openPageLoading?: boolean;
+	openNProgress?: boolean;
+};
+
+export type TriggerWorkflowsRequestModel = {
+	activityType?: string | null;
+	bookmark?: IBookmark;
+	correlationId?: string | null;
+	workflowInstanceId?: string | null;
+	contextId?: string | null;
+	input?: unknown;
+	dispatch?: boolean;
+};
+
+export type TwoFactorEnabledDto = {
+	enabled?: boolean;
+};
+
+export type TwoFactorEnabledDto_1 = {
+	enabled?: boolean;
+};
+
+export type Type = {
+	readonly name?: string | null;
+	readonly customAttributes?: Array<CustomAttributeData> | null;
+	readonly isCollectible?: boolean;
+	readonly metadataToken?: number;
+	readonly isInterface?: boolean;
+	memberType?: MemberTypes;
+	readonly namespace?: string | null;
+	readonly assemblyQualifiedName?: string | null;
+	readonly fullName?: string | null;
+	assembly?: Assembly;
+	module?: Module;
+	readonly isNested?: boolean;
+	declaringType?: Type;
+	declaringMethod?: MethodBase;
+	reflectedType?: Type;
+	underlyingSystemType?: Type;
+	readonly isTypeDefinition?: boolean;
+	readonly isArray?: boolean;
+	readonly isByRef?: boolean;
+	readonly isPointer?: boolean;
+	readonly isConstructedGenericType?: boolean;
+	readonly isGenericParameter?: boolean;
+	readonly isGenericTypeParameter?: boolean;
+	readonly isGenericMethodParameter?: boolean;
+	readonly isGenericType?: boolean;
+	readonly isGenericTypeDefinition?: boolean;
+	readonly isSZArray?: boolean;
+	readonly isVariableBoundArray?: boolean;
+	readonly isByRefLike?: boolean;
+	readonly isFunctionPointer?: boolean;
+	readonly isUnmanagedFunctionPointer?: boolean;
+	readonly hasElementType?: boolean;
+	readonly genericTypeArguments?: Array<Type> | null;
+	readonly genericParameterPosition?: number;
+	genericParameterAttributes?: GenericParameterAttributes;
+	attributes?: TypeAttributes;
+	readonly isAbstract?: boolean;
+	readonly isImport?: boolean;
+	readonly isSealed?: boolean;
+	readonly isSpecialName?: boolean;
+	readonly isClass?: boolean;
+	readonly isNestedAssembly?: boolean;
+	readonly isNestedFamANDAssem?: boolean;
+	readonly isNestedFamily?: boolean;
+	readonly isNestedFamORAssem?: boolean;
+	readonly isNestedPrivate?: boolean;
+	readonly isNestedPublic?: boolean;
+	readonly isNotPublic?: boolean;
+	readonly isPublic?: boolean;
+	readonly isAutoLayout?: boolean;
+	readonly isExplicitLayout?: boolean;
+	readonly isLayoutSequential?: boolean;
+	readonly isAnsiClass?: boolean;
+	readonly isAutoClass?: boolean;
+	readonly isUnicodeClass?: boolean;
+	readonly isCOMObject?: boolean;
+	readonly isContextful?: boolean;
+	readonly isEnum?: boolean;
+	readonly isMarshalByRef?: boolean;
+	readonly isPrimitive?: boolean;
+	readonly isValueType?: boolean;
+	readonly isSignatureType?: boolean;
+	readonly isSecurityCritical?: boolean;
+	readonly isSecuritySafeCritical?: boolean;
+	readonly isSecurityTransparent?: boolean;
+	structLayoutAttribute?: StructLayoutAttribute;
+	typeInitializer?: ConstructorInfo;
+	typeHandle?: RuntimeTypeHandle;
+	readonly guid?: string;
+	baseType?: Type;
+	/**
+	 * @deprecated
+	 */
+	readonly isSerializable?: boolean;
+	readonly containsGenericParameters?: boolean;
+	readonly isVisible?: boolean;
+};
+
+export type TypeApiDescriptionModel = {
+	baseType?: string | null;
+	isEnum?: boolean;
+	enumNames?: Array<string> | null;
+	enumValues?: Array<unknown> | null;
+	genericArguments?: Array<string> | null;
+	properties?: Array<PropertyApiDescriptionModel> | null;
+};
+
+export enum TypeAttributes {
+	NotPublic = 0,
+	AutoLayout = 1,
+	AnsiClass = 2,
+	Class = 3,
+	Public = 4,
+	NestedPublic = 5,
+	NestedPrivate = 6,
+	NestedFamily = 7,
+	NestedAssembly = 8,
+	NestedFamANDAssem = 16,
+	VisibilityMask = 24,
+	NestedFamORAssem = 32,
+	SequentialLayout = 128,
+	ExplicitLayout = 256,
+	LayoutMask = 1024,
+	Interface = 2048,
+	ClassSemanticsMask = 4096,
+	Abstract = 8192,
+	Sealed = 16384,
+	SpecialName = 65536,
+	RTSpecialName = 131072,
+	Import = 196608,
+	Serializable = 262144,
+	WindowsRuntime = 264192,
+	UnicodeClass = 1048576,
+	AutoClass = 12582912,
+}
+
+export type TypeInfo = {
+	readonly name?: string | null;
+	readonly customAttributes?: Array<CustomAttributeData> | null;
+	readonly isCollectible?: boolean;
+	readonly metadataToken?: number;
+	readonly isInterface?: boolean;
+	memberType?: MemberTypes;
+	readonly namespace?: string | null;
+	readonly assemblyQualifiedName?: string | null;
+	readonly fullName?: string | null;
+	assembly?: Assembly;
+	module?: Module;
+	readonly isNested?: boolean;
+	declaringType?: Type;
+	declaringMethod?: MethodBase;
+	reflectedType?: Type;
+	underlyingSystemType?: Type;
+	readonly isTypeDefinition?: boolean;
+	readonly isArray?: boolean;
+	readonly isByRef?: boolean;
+	readonly isPointer?: boolean;
+	readonly isConstructedGenericType?: boolean;
+	readonly isGenericParameter?: boolean;
+	readonly isGenericTypeParameter?: boolean;
+	readonly isGenericMethodParameter?: boolean;
+	readonly isGenericType?: boolean;
+	readonly isGenericTypeDefinition?: boolean;
+	readonly isSZArray?: boolean;
+	readonly isVariableBoundArray?: boolean;
+	readonly isByRefLike?: boolean;
+	readonly isFunctionPointer?: boolean;
+	readonly isUnmanagedFunctionPointer?: boolean;
+	readonly hasElementType?: boolean;
+	readonly genericTypeArguments?: Array<Type> | null;
+	readonly genericParameterPosition?: number;
+	genericParameterAttributes?: GenericParameterAttributes;
+	attributes?: TypeAttributes;
+	readonly isAbstract?: boolean;
+	readonly isImport?: boolean;
+	readonly isSealed?: boolean;
+	readonly isSpecialName?: boolean;
+	readonly isClass?: boolean;
+	readonly isNestedAssembly?: boolean;
+	readonly isNestedFamANDAssem?: boolean;
+	readonly isNestedFamily?: boolean;
+	readonly isNestedFamORAssem?: boolean;
+	readonly isNestedPrivate?: boolean;
+	readonly isNestedPublic?: boolean;
+	readonly isNotPublic?: boolean;
+	readonly isPublic?: boolean;
+	readonly isAutoLayout?: boolean;
+	readonly isExplicitLayout?: boolean;
+	readonly isLayoutSequential?: boolean;
+	readonly isAnsiClass?: boolean;
+	readonly isAutoClass?: boolean;
+	readonly isUnicodeClass?: boolean;
+	readonly isCOMObject?: boolean;
+	readonly isContextful?: boolean;
+	readonly isEnum?: boolean;
+	readonly isMarshalByRef?: boolean;
+	readonly isPrimitive?: boolean;
+	readonly isValueType?: boolean;
+	readonly isSignatureType?: boolean;
+	readonly isSecurityCritical?: boolean;
+	readonly isSecuritySafeCritical?: boolean;
+	readonly isSecurityTransparent?: boolean;
+	structLayoutAttribute?: StructLayoutAttribute;
+	typeInitializer?: ConstructorInfo;
+	typeHandle?: RuntimeTypeHandle;
+	readonly guid?: string;
+	baseType?: Type;
+	/**
+	 * @deprecated
+	 */
+	readonly isSerializable?: boolean;
+	readonly containsGenericParameters?: boolean;
+	readonly isVisible?: boolean;
+	readonly genericTypeParameters?: Array<Type> | null;
+	readonly declaredConstructors?: Array<ConstructorInfo> | null;
+	readonly declaredEvents?: Array<EventInfo> | null;
+	readonly declaredFields?: Array<FieldInfo> | null;
+	readonly declaredMembers?: Array<MemberInfo> | null;
+	readonly declaredMethods?: Array<MethodInfo> | null;
+	readonly declaredNestedTypes?: Array<TypeInfo> | null;
+	readonly declaredProperties?: Array<PropertyInfo> | null;
+	readonly implementedInterfaces?: Array<Type> | null;
+};
+
+export type UpdateFeatureDto = {
+	name?: string | null;
+	value?: string | null;
+};
+
+export type UpdateFeaturesDto = {
+	features?: Array<UpdateFeatureDto> | null;
+};
+
+export type UpdatePermissionDto = {
+	name?: string | null;
+	isGranted?: boolean;
+};
+
+export type UpdatePermissionsDto = {
+	permissions?: Array<UpdatePermissionDto> | null;
+};
+
+export type UpdateProfileDto = {
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	userName?: string | null;
+	email?: string | null;
+	name?: string | null;
+	surname?: string | null;
+	phoneNumber?: string | null;
+	concurrencyStamp?: string | null;
+};
+
+export type UpdateSettingDto = {
+	name: string;
+	value?: string | null;
+};
+
+export type UpdateSettingsDto = {
+	settings?: Array<UpdateSettingDto> | null;
+};
+
+export type UserData = {
+	id?: string;
+	tenantId?: string | null;
+	userName?: string | null;
+	name?: string | null;
+	surname?: string | null;
+	isActive?: boolean;
+	email?: string | null;
+	emailConfirmed?: boolean;
+	phoneNumber?: string | null;
+	phoneNumberConfirmed?: boolean;
+	readonly extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type UserFavoriteMenuCreateDto = {
+	menuId: string;
+	color?: string | null;
+	aliasName?: string | null;
+	icon?: string | null;
+	framework: string;
+};
+
+export type UserFavoriteMenuDto = {
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	lastModificationTime?: string | null;
+	lastModifierId?: string | null;
+	menuId?: string;
+	userId?: string;
+	aliasName?: string | null;
+	color?: string | null;
+	framework?: string | null;
+	name?: string | null;
+	displayName?: string | null;
+	path?: string | null;
+	icon?: string | null;
+};
+
+export type UserFavoriteMenuUpdateDto = {
+	menuId: string;
+	color?: string | null;
+	aliasName?: string | null;
+	icon?: string | null;
+	concurrencyStamp?: string | null;
+};
+
+export type UserFriend = {
+	tenantId?: string | null;
+	userId?: string;
+	userName?: string | null;
+	avatarUrl?: string | null;
+	nickName?: string | null;
+	age?: number;
+	sex?: Sex;
+	sign?: string | null;
+	description?: string | null;
+	birthday?: string | null;
+	online?: boolean;
+	friendId?: string;
+	black?: boolean;
+	specialFocus?: boolean;
+	dontDisturb?: boolean;
+	remarkName?: string | null;
+};
+
+export type UserIdentifier = {
+	userId?: string;
+	userName?: string | null;
+};
+
+export type UserJoinGroupDto = {
+	groupId: number;
+	joinInfo: string;
+};
+
+export type UserLoginInfo = {
+	userNameOrEmailAddress: string;
+	password: string;
+	rememberMe?: boolean;
+};
+
+export type UserMenuInput = {
+	userId: string;
+	menuIds: Array<string>;
+};
+
+export type UserMenuStartupInput = {
+	userId?: string;
+};
+
+export type UserNotificationDto = {
+	name?: string | null;
+	id?: string | null;
+	data?: NotificationData;
+	creationTime?: string;
+	type?: NotificationType;
+	lifetime?: NotificationLifetime;
+	severity?: NotificationSeverity;
+	state?: NotificationReadState;
+	contentType?: NotificationContentType;
+};
+
+export type UserSubscreNotificationDto = {
+	name?: string | null;
+};
+
+export type UserSubscriptionsResult = {
+	isSubscribed?: boolean;
+};
+
+export enum ValueType {
+	String = 0,
+	Numeic = 1,
+	Boolean = 2,
+	Date = 3,
+	DateTime = 4,
+	Array = 5,
+	Object = 6,
+}
+
+export enum ValueType_1 {
+	String = 0,
+	Number = 1,
+	Boolean = 2,
+	Date = 3,
+	Array = 4,
+	Option = 5,
+	Object = 10,
+}
+
+export type Variables = {
+	readonly data?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type VerifyAuthenticatorCodeInput = {
+	authenticatorCode: string;
+};
+
+export type VerifyPasswordResetTokenInput = {
+	userId?: string;
+	resetToken: string;
+};
+
+export type VersionOptions = {
+	readonly isLatest?: boolean;
+	readonly isLatestOrPublished?: boolean;
+	readonly isPublished?: boolean;
+	readonly isDraft?: boolean;
+	readonly allVersions?: boolean;
+	readonly version?: number;
+};
+
+export type WebhookAvailableDto = {
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+};
+
+export type WebhookAvailableGroupDto = {
+	name?: string | null;
+	displayName?: string | null;
+	webhooks?: Array<WebhookAvailableDto> | null;
+};
+
+export type WebhookDefinition = {
+	id?: string | null;
+	tenantId?: string | null;
+	name?: string | null;
+	path?: string | null;
+	description?: string | null;
+	payloadTypeName?: string | null;
+	isEnabled?: boolean;
+};
+
+export type WebhookDefinitionCreateDto = {
+	displayName: string;
+	description?: string | null;
+	isEnabled?: boolean;
+	requiredFeatures?: Array<string> | null;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	groupName: string;
+	name: string;
+};
+
+export type WebhookDefinitionDto = {
+	groupName?: string | null;
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	isEnabled?: boolean;
+	isStatic?: boolean;
+	requiredFeatures?: Array<string> | null;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type WebhookDefinitionUpdateDto = {
+	displayName: string;
+	description?: string | null;
+	isEnabled?: boolean;
+	requiredFeatures?: Array<string> | null;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	concurrencyStamp?: string | null;
+};
+
+export type WebhookEventRecordDto = {
+	id?: string;
+	tenantId?: string | null;
+	webhookName?: string | null;
+	data?: string | null;
+	creationTime?: string;
+};
+
+export type WebhookGroupDefinitionCreateDto = {
+	displayName: string;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	name: string;
+};
+
+export type WebhookGroupDefinitionDto = {
+	name?: string | null;
+	displayName?: string | null;
+	isStatic?: boolean;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type WebhookGroupDefinitionUpdateDto = {
+	displayName: string;
+	extraProperties?: {
+		[key: string]: unknown;
+	} | null;
+	concurrencyStamp?: string | null;
+};
+
+export type WebhookPublishInput = {
+	webhookName: string;
+	data: string;
+	sendExactSameData?: boolean;
+	header?: WebhooksHeaderInput;
+	tenantIds?: Array<string> | null;
+};
+
+export type WebhookSendRecordDeleteManyInput = {
+	recordIds?: Array<string> | null;
+};
+
+export type WebhookSendRecordDto = {
+	id?: string;
+	tenantId?: string | null;
+	webhookEventId?: string;
+	webhookSubscriptionId?: string;
+	response?: string | null;
+	responseStatusCode?: HttpStatusCode;
+	creationTime?: string;
+	lastModificationTime?: string | null;
+	sendExactSameData?: boolean;
+	requestHeaders?: {
+		[key: string]: string;
+	} | null;
+	responseHeaders?: {
+		[key: string]: string;
+	} | null;
+	webhookEvent?: WebhookEventRecordDto;
+};
+
+export type WebhookSendRecordResendManyInput = {
+	recordIds?: Array<string> | null;
+};
+
+export type WebhooksHeaderInput = {
+	useOnlyGivenHeaders?: boolean;
+	headers?: {
+		[key: string]: string;
+	} | null;
+};
+
+export type WebhookSubscriptionCreateInput = {
+	webhookUri: string;
+	secret?: string | null;
+	description?: string | null;
+	timeoutDuration?: number | null;
+	isActive?: boolean;
+	tenantId?: string | null;
+	webhooks?: Array<string> | null;
+	headers?: {
+		[key: string]: string;
+	} | null;
+};
+
+export type WebhookSubscriptionDeleteManyInput = {
+	recordIds?: Array<string> | null;
+};
+
+export type WebhookSubscriptionDto = {
+	id?: string;
+	creationTime?: string;
+	creatorId?: string | null;
+	tenantId?: string | null;
+	webhookUri?: string | null;
+	secret?: string | null;
+	isActive?: boolean;
+	description?: string | null;
+	webhooks?: Array<string> | null;
+	headers?: {
+		[key: string]: string;
+	} | null;
+	concurrencyStamp?: string | null;
+	timeoutDuration?: number | null;
+};
+
+export type WebhookSubscriptionUpdateInput = {
+	webhookUri: string;
+	secret?: string | null;
+	description?: string | null;
+	timeoutDuration?: number | null;
+	isActive?: boolean;
+	tenantId?: string | null;
+	webhooks?: Array<string> | null;
+	headers?: {
+		[key: string]: string;
+	} | null;
+	concurrencyStamp?: string | null;
+};
+
+export type WindowsTimeZone = {
+	timeZoneId?: string | null;
+};
+
+export type WorkflowBlueprintModel = {
+	id?: string | null;
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	type?: string | null;
+	parentId?: string | null;
+	persistWorkflow?: boolean;
+	loadWorkflowContext?: boolean;
+	saveWorkflowContext?: boolean;
+	inputProperties?: Variables;
+	outputProperties?: Variables;
+	x?: number | null;
+	y?: number | null;
+	activities?: Array<ActivityBlueprintModel> | null;
+	connections?: Array<ConnectionModel> | null;
+	version?: number;
+	tenantId?: string | null;
+	isSingleton?: boolean;
+	isEnabled?: boolean;
+	isPublished?: boolean;
+	isLatest?: boolean;
+	isDisabled?: boolean;
+	variables?: Variables;
+	contextOptions?: WorkflowContextOptions;
+	persistenceBehavior?: WorkflowPersistenceBehavior;
+	deleteCompletedInstances?: boolean;
+	customAttributes?: Variables;
+};
+
+export type WorkflowBlueprintSummaryModel = {
+	id?: string | null;
+	versionId?: string | null;
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	version?: number;
+	tenantId?: string | null;
+	isSingleton?: boolean;
+	isPublished?: boolean;
+	isLatest?: boolean;
+	isDisabled?: boolean;
+};
+
+export enum WorkflowContextFidelity {
+	Burst = 0,
+	Activity = 1,
+}
+
+export type WorkflowContextOptions = {
+	contextType?: Type;
+	contextFidelity?: WorkflowContextFidelity;
+};
+
+export type WorkflowDefinition = {
+	id?: string | null;
+	definitionId?: string | null;
+	readonly versionId?: string | null;
+	tenantId?: string | null;
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	channel?: string | null;
+	version?: number;
+	variables?: Variables;
+	customAttributes?: Variables;
+	contextOptions?: WorkflowContextOptions;
+	isSingleton?: boolean;
+	persistenceBehavior?: WorkflowPersistenceBehavior;
+	deleteCompletedInstances?: boolean;
+	isPublished?: boolean;
+	isLatest?: boolean;
+	tag?: string | null;
+	createdAt?: Instant;
+	activities?: Array<ActivityDefinition> | null;
+	connections?: Array<ConnectionDefinition> | null;
+};
+
+export enum WorkflowDefinitionOrderBy {
+	Name = 0,
+	Description = 1,
+	CreatedAt = 2,
+}
+
+export type WorkflowDefinitionSummaryModel = {
+	id?: string | null;
+	definitionId?: string | null;
+	tenantId?: string | null;
+	name?: string | null;
+	displayName?: string | null;
+	description?: string | null;
+	version?: number;
+	isSingleton?: boolean;
+	persistenceBehavior?: WorkflowPersistenceBehavior;
+	isPublished?: boolean;
+	isLatest?: boolean;
+	customAttributes?: Variables;
+	createdAt?: Instant;
+};
+
+export type WorkflowDefinitionVersionModel = {
+	id?: string | null;
+	definitionId?: string | null;
+	version?: number;
+	isLatest?: boolean;
+	isPublished?: boolean;
+	createdAt?: Instant;
+};
+
+export type WorkflowExecutionLogRecord = {
+	id?: string | null;
+	readonly tenantId?: string | null;
+	workflowInstanceId?: string | null;
+	activityId?: string | null;
+	activityType?: string | null;
+	timestamp?: Instant;
+	eventName?: string | null;
+	message?: string | null;
+	source?: string | null;
+	data?: {
+		[key: string]: JToken;
+	} | null;
+};
+
+export type WorkflowFault = {
+	exception?: SimpleException;
+	message?: string | null;
+	faultedActivityId?: string | null;
+	activityInput?: unknown;
+	resuming?: boolean;
+};
+
+export type WorkflowInput = {
+	input?: unknown;
+	storageProviderName?: string | null;
+};
+
+export type WorkflowInputReference = {
+	providerName?: string | null;
+};
+
+export type WorkflowInstance = {
+	id?: string | null;
+	definitionId?: string | null;
+	definitionVersionId?: string | null;
+	tenantId?: string | null;
+	version?: number;
+	workflowStatus?: WorkflowStatus;
+	correlationId?: string | null;
+	contextType?: string | null;
+	contextId?: string | null;
+	name?: string | null;
+	createdAt?: Instant;
+	lastExecutedAt?: Instant;
+	finishedAt?: Instant;
+	cancelledAt?: Instant;
+	faultedAt?: Instant;
+	variables?: Variables;
+	input?: WorkflowInputReference;
+	output?: WorkflowOutputReference;
+	activityData?: {
+		[key: string]: {
+			[key: string]: unknown;
+		};
+	} | null;
+	metadata?: {
+		[key: string]: unknown;
+	} | null;
+	blockingActivities?: Array<BlockingActivity> | null;
+	fault?: WorkflowFault;
+	faults?: Array<WorkflowFault> | null;
+	scheduledActivities?: Array<ScheduledActivity> | null;
+	scopes?: Array<ActivityScope> | null;
+	currentActivity?: ScheduledActivity;
+	lastExecutedActivityId?: string | null;
+};
+
+export enum WorkflowInstanceOrderBy {
+	Started = 0,
+	LastExecuted = 1,
+	Finished = 2,
+}
+
+export type WorkflowInstanceSummaryModel = {
+	id?: string | null;
+	definitionId?: string | null;
+	definitionVersionId?: string | null;
+	tenantId?: string | null;
+	version?: number;
+	workflowStatus?: WorkflowStatus;
+	correlationId?: string | null;
+	contextType?: string | null;
+	contextId?: string | null;
+	name?: string | null;
+	createdAt?: Instant;
+	lastExecutedAt?: Instant;
+	finishedAt?: Instant;
+	cancelledAt?: Instant;
+	faultedAt?: Instant;
+	metadata?: {
+		[key: string]: unknown;
+	} | null;
+};
+
+export type WorkflowOutputReference = {
+	providerName?: string | null;
+	activityId?: string | null;
+};
+
+export enum WorkflowPersistenceBehavior {
+	Suspended = 0,
+	WorkflowBurst = 1,
+	WorkflowPassCompleted = 2,
+	ActivityExecuted = 3,
+}
+
+export type WorkflowProviderDescriptor = {
+	name?: string | null;
+	displayName?: string | null;
+};
+
+export enum WorkflowStatus {
+	Idle = 0,
+	Running = 1,
+	Finished = 2,
+	Suspended = 3,
+	Faulted = 4,
+	Cancelled = 5,
+}
+
+export type WorkflowStorageDescriptor = {
+	name?: string | null;
+	displayName?: string | null;
+};
+
+export type WrapResult = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: unknown;
+};
+
+export type WrapResultOfAbpLoginResult = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: AbpLoginResult;
+};
+
+export type WrapResultOfApplicationConfigurationDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ApplicationConfigurationDto;
+};
+
+export type WrapResultOfApplicationLocalizationDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ApplicationLocalizationDto;
+};
+
+export type WrapResultOfAuditLogDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: AuditLogDto;
+};
+
+export type WrapResultOfAuthenticatorDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: AuthenticatorDto;
+};
+
+export type WrapResultOfAuthenticatorRecoveryCodeDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: AuthenticatorRecoveryCodeDto;
+};
+
+export type WrapResultOfBackgroundJobActionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: BackgroundJobActionDto;
+};
+
+export type WrapResultOfBackgroundJobInfoDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: BackgroundJobInfoDto;
+};
+
+export type WrapResultOfBackgroundJobLogDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: BackgroundJobLogDto;
+};
+
+export type WrapResultOfBoolean = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: boolean;
+};
+
+export type WrapResultOfCacheKeysDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: CacheKeysDto;
+};
+
+export type WrapResultOfCacheValueDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: CacheValueDto;
+};
+
+export type WrapResultOfChatMessageSendResultDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ChatMessageSendResultDto;
+};
+
+export type WrapResultOfDataDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: DataDto;
+};
+
+export type WrapResultOfEditionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: EditionDto;
+};
+
+export type WrapResultOfEntityChangeDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: EntityChangeDto;
+};
+
+export type WrapResultOfEntityChangeWithUsernameDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: EntityChangeWithUsernameDto;
+};
+
+export type WrapResultOfEntityTypeInfoDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: EntityTypeInfoDto;
+};
+
+export type WrapResultOfFeatureDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: FeatureDefinitionDto;
+};
+
+export type WrapResultOfFeatureGroupDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: FeatureGroupDefinitionDto;
+};
+
+export type WrapResultOfFeedbackAttachmentTempFileDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: FeedbackAttachmentTempFileDto;
+};
+
+export type WrapResultOfFeedbackDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: FeedbackDto;
+};
+
+export type WrapResultOfFileShareDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: FileShareDto;
+};
+
+export type WrapResultOfFindTenantResultDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: FindTenantResultDto;
+};
+
+export type WrapResultOfGetFeatureListResultDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: GetFeatureListResultDto;
+};
+
+export type WrapResultOfGetPermissionListResultDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: GetPermissionListResultDto;
+};
+
+export type WrapResultOfGroup = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: Group;
+};
+
+export type WrapResultOfIdentityClaimTypeDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: IdentityClaimTypeDto;
+};
+
+export type WrapResultOfIdentityRoleDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: IdentityRoleDto;
+};
+
+export type WrapResultOfIdentityUserDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: IdentityUserDto;
+};
+
+export type WrapResultOfInt64 = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: number;
+};
+
+export type WrapResultOfLanguageDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: LanguageDto;
+};
+
+export type WrapResultOfLayoutDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: LayoutDto;
+};
+
+export type WrapResultOfListResultDtoOfBackgroundJobActionDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfBackgroundJobActionDefinitionDto;
+};
+
+export type WrapResultOfListResultDtoOfBackgroundJobActionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfBackgroundJobActionDto;
+};
+
+export type WrapResultOfListResultDtoOfBackgroundJobDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfBackgroundJobDefinitionDto;
+};
+
+export type WrapResultOfListResultDtoOfDataDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfDataDto;
+};
+
+export type WrapResultOfListResultDtoOfDynamicParamterDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfDynamicParamterDto;
+};
+
+export type WrapResultOfListResultDtoOfEntityChangeWithUsernameDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfEntityChangeWithUsernameDto;
+};
+
+export type WrapResultOfListResultDtoOfFeatureDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfFeatureDefinitionDto;
+};
+
+export type WrapResultOfListResultDtoOfFeatureGroupDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfFeatureGroupDefinitionDto;
+};
+
+export type WrapResultOfListResultDtoOfGroup = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfGroup;
+};
+
+export type WrapResultOfListResultDtoOfIdentityClaimDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfIdentityClaimDto;
+};
+
+export type WrapResultOfListResultDtoOfIdentityClaimTypeDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfIdentityClaimTypeDto;
+};
+
+export type WrapResultOfListResultDtoOfIdentityRoleDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfIdentityRoleDto;
+};
+
+export type WrapResultOfListResultDtoOfLanguageDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfLanguageDto;
+};
+
+export type WrapResultOfListResultDtoOfLastChatMessage = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfLastChatMessage;
+};
+
+export type WrapResultOfListResultDtoOfLayoutDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfLayoutDto;
+};
+
+export type WrapResultOfListResultDtoOfMenuDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfMenuDto;
+};
+
+export type WrapResultOfListResultDtoOfMyFileShareDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfMyFileShareDto;
+};
+
+export type WrapResultOfListResultDtoOfNameValue = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfNameValue;
+};
+
+export type WrapResultOfListResultDtoOfNotificationDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfNotificationDefinitionDto;
+};
+
+export type WrapResultOfListResultDtoOfNotificationGroupDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfNotificationGroupDefinitionDto;
+};
+
+export type WrapResultOfListResultDtoOfNotificationGroupDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfNotificationGroupDto;
+};
+
+export type WrapResultOfListResultDtoOfNotificationTemplateDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfNotificationTemplateDto;
+};
+
+export type WrapResultOfListResultDtoOfOrganizationUnitDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfOrganizationUnitDto;
+};
+
+export type WrapResultOfListResultDtoOfOssObjectDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfOssObjectDto;
+};
+
+export type WrapResultOfListResultDtoOfPermissionDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfPermissionDefinitionDto;
+};
+
+export type WrapResultOfListResultDtoOfPermissionGroupDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfPermissionGroupDefinitionDto;
+};
+
+export type WrapResultOfListResultDtoOfResourceDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfResourceDto;
+};
+
+export type WrapResultOfListResultDtoOfSettingDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfSettingDefinitionDto;
+};
+
+export type WrapResultOfListResultDtoOfString = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfString;
+};
+
+export type WrapResultOfListResultDtoOfTenantConnectionStringDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfTenantConnectionStringDto;
+};
+
+export type WrapResultOfListResultDtoOfTextDifferenceDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfTextDifferenceDto;
+};
+
+export type WrapResultOfListResultDtoOfTextTemplateDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfTextTemplateDefinitionDto;
+};
+
+export type WrapResultOfListResultDtoOfUserData = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfUserData;
+};
+
+export type WrapResultOfListResultDtoOfUserFavoriteMenuDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfUserFavoriteMenuDto;
+};
+
+export type WrapResultOfListResultDtoOfUserFriend = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfUserFriend;
+};
+
+export type WrapResultOfListResultDtoOfUserSubscreNotificationDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfUserSubscreNotificationDto;
+};
+
+export type WrapResultOfListResultDtoOfWebhookAvailableGroupDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfWebhookAvailableGroupDto;
+};
+
+export type WrapResultOfListResultDtoOfWebhookDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfWebhookDefinitionDto;
+};
+
+export type WrapResultOfListResultDtoOfWebhookGroupDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ListResultDtoOfWebhookGroupDefinitionDto;
+};
+
+export type WrapResultOfLogDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: LogDto;
+};
+
+export type WrapResultOfMenuDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: MenuDto;
+};
+
+export type WrapResultOfNotificationDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: NotificationDefinitionDto;
+};
+
+export type WrapResultOfNotificationGroupDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: NotificationGroupDefinitionDto;
+};
+
+export type WrapResultOfOpenIddictApplicationDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: OpenIddictApplicationDto;
+};
+
+export type WrapResultOfOpenIddictAuthorizationDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: OpenIddictAuthorizationDto;
+};
+
+export type WrapResultOfOpenIddictScopeDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: OpenIddictScopeDto;
+};
+
+export type WrapResultOfOpenIddictTokenDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: OpenIddictTokenDto;
+};
+
+export type WrapResultOfOrganizationUnitDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: OrganizationUnitDto;
+};
+
+export type WrapResultOfOrganizationUnitEntityRuleDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: OrganizationUnitEntityRuleDto;
+};
+
+export type WrapResultOfOssContainerDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: OssContainerDto;
+};
+
+export type WrapResultOfOssContainersResultDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: OssContainersResultDto;
+};
+
+export type WrapResultOfOssObjectDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: OssObjectDto;
+};
+
+export type WrapResultOfOssObjectsResultDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: OssObjectsResultDto;
+};
+
+export type WrapResultOfPackageBlobDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PackageBlobDto;
+};
+
+export type WrapResultOfPackageDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PackageDto;
+};
+
+export type WrapResultOfPagedResultDtoOfAuditLogDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfAuditLogDto;
+};
+
+export type WrapResultOfPagedResultDtoOfBackgroundJobInfoDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfBackgroundJobInfoDto;
+};
+
+export type WrapResultOfPagedResultDtoOfBackgroundJobLogDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfBackgroundJobLogDto;
+};
+
+export type WrapResultOfPagedResultDtoOfChatMessage = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfChatMessage;
+};
+
+export type WrapResultOfPagedResultDtoOfDataDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfDataDto;
+};
+
+export type WrapResultOfPagedResultDtoOfEditionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfEditionDto;
+};
+
+export type WrapResultOfPagedResultDtoOfEntityChangeDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfEntityChangeDto;
+};
+
+export type WrapResultOfPagedResultDtoOfEntityTypeInfoDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfEntityTypeInfoDto;
+};
+
+export type WrapResultOfPagedResultDtoOfFeedbackDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfFeedbackDto;
+};
+
+export type WrapResultOfPagedResultDtoOfGroup = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfGroup;
+};
+
+export type WrapResultOfPagedResultDtoOfGroupUserCard = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfGroupUserCard;
+};
+
+export type WrapResultOfPagedResultDtoOfIdentityClaimTypeDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfIdentityClaimTypeDto;
+};
+
+export type WrapResultOfPagedResultDtoOfIdentityRoleDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfIdentityRoleDto;
+};
+
+export type WrapResultOfPagedResultDtoOfIdentitySessionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfIdentitySessionDto;
+};
+
+export type WrapResultOfPagedResultDtoOfIdentitySessionDto_1 = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfIdentitySessionDto_1;
+};
+
+export type WrapResultOfPagedResultDtoOfIdentityUserDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfIdentityUserDto;
+};
+
+export type WrapResultOfPagedResultDtoOfLayoutDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfLayoutDto;
+};
+
+export type WrapResultOfPagedResultDtoOfLogDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfLogDto;
+};
+
+export type WrapResultOfPagedResultDtoOfMenuDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfMenuDto;
+};
+
+export type WrapResultOfPagedResultDtoOfOpenIddictApplicationDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfOpenIddictApplicationDto;
+};
+
+export type WrapResultOfPagedResultDtoOfOpenIddictAuthorizationDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfOpenIddictAuthorizationDto;
+};
+
+export type WrapResultOfPagedResultDtoOfOpenIddictScopeDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfOpenIddictScopeDto;
+};
+
+export type WrapResultOfPagedResultDtoOfOpenIddictTokenDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfOpenIddictTokenDto;
+};
+
+export type WrapResultOfPagedResultDtoOfOrganizationUnitDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfOrganizationUnitDto;
+};
+
+export type WrapResultOfPagedResultDtoOfPackageDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfPackageDto;
+};
+
+export type WrapResultOfPagedResultDtoOfSecurityLogDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfSecurityLogDto;
+};
+
+export type WrapResultOfPagedResultDtoOfTenantDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfTenantDto;
+};
+
+export type WrapResultOfPagedResultDtoOfUserFriend = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfUserFriend;
+};
+
+export type WrapResultOfPagedResultDtoOfUserNotificationDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfUserNotificationDto;
+};
+
+export type WrapResultOfPagedResultDtoOfUserSubscreNotificationDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfUserSubscreNotificationDto;
+};
+
+export type WrapResultOfPagedResultDtoOfWebhookSendRecordDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfWebhookSendRecordDto;
+};
+
+export type WrapResultOfPagedResultDtoOfWebhookSubscriptionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PagedResultDtoOfWebhookSubscriptionDto;
+};
+
+export type WrapResultOfPermissionDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PermissionDefinitionDto;
+};
+
+export type WrapResultOfPermissionGroupDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: PermissionGroupDefinitionDto;
+};
+
+export type WrapResultOfProfileDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ProfileDto;
+};
+
+export type WrapResultOfResourceDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ResourceDto;
+};
+
+export type WrapResultOfRoleEntityRuleDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: RoleEntityRuleDto;
+};
+
+export type WrapResultOfSecurityLogDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: SecurityLogDto;
+};
+
+export type WrapResultOfSettingDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: SettingDefinitionDto;
+};
+
+export type WrapResultOfSettingGroupResult = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: SettingGroupResult;
+};
+
+export type WrapResultOfTenantConnectionStringDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: TenantConnectionStringDto;
+};
+
+export type WrapResultOfTenantDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: TenantDto;
+};
+
+export type WrapResultOfTextDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: TextDto;
+};
+
+export type WrapResultOfTextTemplateContentDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: TextTemplateContentDto;
+};
+
+export type WrapResultOfTextTemplateDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: TextTemplateDefinitionDto;
+};
+
+export type WrapResultOfThemeSettingDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: ThemeSettingDto;
+};
+
+export type WrapResultOfTwoFactorEnabledDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: TwoFactorEnabledDto;
+};
+
+export type WrapResultOfUserData = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: UserData;
+};
+
+export type WrapResultOfUserFavoriteMenuDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: UserFavoriteMenuDto;
+};
+
+export type WrapResultOfUserFriend = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: UserFriend;
+};
+
+export type WrapResultOfUserNotificationDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: UserNotificationDto;
+};
+
+export type WrapResultOfUserSubscriptionsResult = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: UserSubscriptionsResult;
+};
+
+export type WrapResultOfWebhookDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: WebhookDefinitionDto;
+};
+
+export type WrapResultOfWebhookGroupDefinitionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: WebhookGroupDefinitionDto;
+};
+
+export type WrapResultOfWebhookSendRecordDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: WebhookSendRecordDto;
+};
+
+export type WrapResultOfWebhookSubscriptionDto = {
+	code?: string | null;
+	message?: string | null;
+	details?: string | null;
+	result?: WebhookSubscriptionDto;
+};
+
+export type AbpApiDefinitionGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		IncludeTypes?: boolean;
+	};
+};
+
+export type AbpApiDefinitionGetResponse = ApplicationApiDescriptionModel;
+
+export type AbpApiDefinitionGetError = RemoteServiceErrorResponse;
+
+export type AbpApplicationConfigurationGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		IncludeLocalizationResources?: boolean;
+	};
+};
+
+export type AbpApplicationConfigurationGetResponse = WrapResultOfApplicationConfigurationDto;
+
+export type AbpApplicationConfigurationGetError = WrapResult;
+
+export type AbpApplicationLocalizationGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		CultureName: string;
+		OnlyDynamics?: boolean;
+	};
+};
+
+export type AbpApplicationLocalizationGetResponse = WrapResultOfApplicationLocalizationDto;
+
+export type AbpApplicationLocalizationGetError = WrapResult;
+
+export type AbpTenantFindTenantByNameData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type AbpTenantFindTenantByNameResponse = WrapResultOfFindTenantResultDto;
+
+export type AbpTenantFindTenantByNameError = WrapResult;
+
+export type AbpTenantFindTenantByIdData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type AbpTenantFindTenantByIdResponse = WrapResultOfFindTenantResultDto;
+
+export type AbpTenantFindTenantByIdError = WrapResult;
+
+export type AccountRegisterData = {
+	body?: PhoneRegisterDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type AccountRegisterResponse = WrapResult;
+
+export type AccountRegisterError = WrapResult;
+
+export type AccountResetPasswordData = {
+	body?: PhoneResetPasswordDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type AccountResetPasswordResponse = WrapResult;
+
+export type AccountResetPasswordError = WrapResult;
+
+export type AccountSendPhoneSigninCodeData = {
+	body?: SendPhoneSigninCodeDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type AccountSendPhoneSigninCodeResponse = WrapResult;
+
+export type AccountSendPhoneSigninCodeError = WrapResult;
+
+export type AccountSendEmailSigninCodeData = {
+	body?: SendEmailSigninCodeDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type AccountSendEmailSigninCodeResponse = WrapResult;
+
+export type AccountSendEmailSigninCodeError = WrapResult;
+
+export type AccountSendPhoneRegisterCodeData = {
+	body?: SendPhoneRegisterCodeDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type AccountSendPhoneRegisterCodeResponse = WrapResult;
+
+export type AccountSendPhoneRegisterCodeError = WrapResult;
+
+export type AccountSendPhoneResetPasswordCodeData = {
+	body?: SendPhoneResetPasswordCodeDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type AccountSendPhoneResetPasswordCodeResponse = WrapResult;
+
+export type AccountSendPhoneResetPasswordCodeError = WrapResult;
+
+export type AccountGetTwoFactorProvidersData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		UserId: string;
+	};
+};
+
+export type AccountGetTwoFactorProvidersResponse = WrapResultOfListResultDtoOfNameValue;
+
+export type AccountGetTwoFactorProvidersError = WrapResult;
+
+export type AccountRegister1Data = {
+	body?: RegisterDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type AccountRegister1Response = WrapResultOfIdentityUserDto;
+
+export type AccountRegister1Error = WrapResult;
+
+export type AccountSendPasswordResetCodeData = {
+	body?: SendPasswordResetCodeDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type AccountSendPasswordResetCodeResponse = WrapResult;
+
+export type AccountSendPasswordResetCodeError = WrapResult;
+
+export type AccountVerifyPasswordResetTokenData = {
+	body?: VerifyPasswordResetTokenInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type AccountVerifyPasswordResetTokenResponse = WrapResultOfBoolean;
+
+export type AccountVerifyPasswordResetTokenError = WrapResult;
+
+export type AccountResetPassword1Data = {
+	body?: ResetPasswordDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type AccountResetPassword1Response = WrapResult;
+
+export type AccountResetPassword1Error = WrapResult;
+
+export type AuditLogDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type AuditLogDeleteResponse = WrapResult;
+
+export type AuditLogDeleteError = WrapResult;
+
+export type AuditLogGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type AuditLogGetResponse = WrapResultOfAuditLogDto;
+
+export type AuditLogGetError = WrapResult;
+
+export type AuditLogGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		ApplicationName?: string;
+		ClientId?: string;
+		ClientIpAddress?: string;
+		CorrelationId?: string;
+		EndTime?: string;
+		HasException?: boolean;
+		HttpMethod?: string;
+		HttpStatusCode?: HttpStatusCode;
+		MaxExecutionDuration?: number;
+		MaxResultCount?: number;
+		MinExecutionDuration?: number;
+		SkipCount?: number;
+		Sorting?: string;
+		StartTime?: string;
+		Url?: string;
+		UserId?: string;
+		UserName?: string;
+	};
+};
+
+export type AuditLogGetListResponse = WrapResultOfPagedResultDtoOfAuditLogDto;
+
+export type AuditLogGetListError = WrapResult;
+
+export type BackgroundJobActionAddActionData = {
+	body?: BackgroundJobActionCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		jobId: string;
+	};
+};
+
+export type BackgroundJobActionAddActionResponse = WrapResultOfBackgroundJobActionDto;
+
+export type BackgroundJobActionAddActionError = WrapResult;
+
+export type BackgroundJobActionGetActionsData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		jobId: string;
+	};
+};
+
+export type BackgroundJobActionGetActionsResponse = WrapResultOfListResultDtoOfBackgroundJobActionDto;
+
+export type BackgroundJobActionGetActionsError = WrapResult;
+
+export type BackgroundJobActionDeleteActionData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type BackgroundJobActionDeleteActionResponse = WrapResult;
+
+export type BackgroundJobActionDeleteActionError = WrapResult;
+
+export type BackgroundJobActionUpdateActionData = {
+	body?: BackgroundJobActionUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type BackgroundJobActionUpdateActionResponse = WrapResultOfBackgroundJobActionDto;
+
+export type BackgroundJobActionUpdateActionError = WrapResult;
+
+export type BackgroundJobActionGetDefinitionsData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Type?: JobActionType;
+	};
+};
+
+export type BackgroundJobActionGetDefinitionsResponse = WrapResultOfListResultDtoOfBackgroundJobActionDefinitionDto;
+
+export type BackgroundJobActionGetDefinitionsError = WrapResult;
+
+export type BackgroundJobInfoCreateData = {
+	body?: BackgroundJobInfoCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type BackgroundJobInfoCreateResponse = WrapResultOfBackgroundJobInfoDto;
+
+export type BackgroundJobInfoCreateError = WrapResult;
+
+export type BackgroundJobInfoGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		BeginCreationTime?: string;
+		BeginLastRunTime?: string;
+		BeginTime?: string;
+		EndCreationTime?: string;
+		EndLastRunTime?: string;
+		EndTime?: string;
+		Filter?: string;
+		Group?: string;
+		IsAbandoned?: boolean;
+		JobType?: JobType;
+		MaxResultCount?: number;
+		Name?: string;
+		Priority?: JobPriority;
+		SkipCount?: number;
+		Sorting?: string;
+		Source?: JobSource;
+		Status?: JobStatus;
+		Type?: string;
+	};
+};
+
+export type BackgroundJobInfoGetListResponse = WrapResultOfPagedResultDtoOfBackgroundJobInfoDto;
+
+export type BackgroundJobInfoGetListError = WrapResult;
+
+export type BackgroundJobInfoDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type BackgroundJobInfoDeleteResponse = WrapResult;
+
+export type BackgroundJobInfoDeleteError = WrapResult;
+
+export type BackgroundJobInfoGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type BackgroundJobInfoGetResponse = WrapResultOfBackgroundJobInfoDto;
+
+export type BackgroundJobInfoGetError = WrapResult;
+
+export type BackgroundJobInfoUpdateData = {
+	body?: BackgroundJobInfoUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type BackgroundJobInfoUpdateResponse = WrapResultOfBackgroundJobInfoDto;
+
+export type BackgroundJobInfoUpdateError = WrapResult;
+
+export type BackgroundJobInfoPauseData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type BackgroundJobInfoPauseResponse = WrapResult;
+
+export type BackgroundJobInfoPauseError = WrapResult;
+
+export type BackgroundJobInfoResumeData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type BackgroundJobInfoResumeResponse = WrapResult;
+
+export type BackgroundJobInfoResumeError = WrapResult;
+
+export type BackgroundJobInfoTriggerData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type BackgroundJobInfoTriggerResponse = WrapResult;
+
+export type BackgroundJobInfoTriggerError = WrapResult;
+
+export type BackgroundJobInfoStopData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type BackgroundJobInfoStopResponse = WrapResult;
+
+export type BackgroundJobInfoStopError = WrapResult;
+
+export type BackgroundJobInfoStartData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type BackgroundJobInfoStartResponse = WrapResult;
+
+export type BackgroundJobInfoStartError = WrapResult;
+
+export type BackgroundJobInfoBulkStopData = {
+	body?: BackgroundJobInfoBatchInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type BackgroundJobInfoBulkStopResponse = WrapResult;
+
+export type BackgroundJobInfoBulkStopError = WrapResult;
+
+export type BackgroundJobInfoBulkStartData = {
+	body?: BackgroundJobInfoBatchInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type BackgroundJobInfoBulkStartResponse = WrapResult;
+
+export type BackgroundJobInfoBulkStartError = WrapResult;
+
+export type BackgroundJobInfoBulkTriggerData = {
+	body?: BackgroundJobInfoBatchInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type BackgroundJobInfoBulkTriggerResponse = WrapResult;
+
+export type BackgroundJobInfoBulkTriggerError = WrapResult;
+
+export type BackgroundJobInfoBulkResumeData = {
+	body?: BackgroundJobInfoBatchInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type BackgroundJobInfoBulkResumeResponse = WrapResult;
+
+export type BackgroundJobInfoBulkResumeError = WrapResult;
+
+export type BackgroundJobInfoBulkPauseData = {
+	body?: BackgroundJobInfoBatchInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type BackgroundJobInfoBulkPauseResponse = WrapResult;
+
+export type BackgroundJobInfoBulkPauseError = WrapResult;
+
+export type BackgroundJobInfoBulkDeleteData = {
+	body?: BackgroundJobInfoBatchInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type BackgroundJobInfoBulkDeleteResponse = WrapResult;
+
+export type BackgroundJobInfoBulkDeleteError = WrapResult;
+
+export type BackgroundJobInfoGetDefinitionsData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type BackgroundJobInfoGetDefinitionsResponse = WrapResultOfListResultDtoOfBackgroundJobDefinitionDto;
+
+export type BackgroundJobInfoGetDefinitionsError = WrapResult;
+
+export type BackgroundJobInfoGetAvailableFieldsData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type BackgroundJobInfoGetAvailableFieldsResponse = WrapResultOfListResultDtoOfDynamicParamterDto;
+
+export type BackgroundJobInfoGetAvailableFieldsError = WrapResult;
+
+export type BackgroundJobInfoSearchData = {
+	body?: GetListByDynamicQueryableInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type BackgroundJobInfoSearchResponse = WrapResultOfPagedResultDtoOfBackgroundJobInfoDto;
+
+export type BackgroundJobInfoSearchError = WrapResult;
+
+export type BackgroundJobLogDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: number;
+	};
+};
+
+export type BackgroundJobLogDeleteResponse = WrapResult;
+
+export type BackgroundJobLogDeleteError = WrapResult;
+
+export type BackgroundJobLogGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: number;
+	};
+};
+
+export type BackgroundJobLogGetResponse = WrapResultOfBackgroundJobLogDto;
+
+export type BackgroundJobLogGetError = WrapResult;
+
+export type BackgroundJobLogGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		BeginRunTime?: string;
+		EndRunTime?: string;
+		Filter?: string;
+		Group?: string;
+		HasExceptions?: boolean;
+		JobId?: string;
+		MaxResultCount?: number;
+		Name?: string;
+		SkipCount?: number;
+		Sorting?: string;
+		Type?: string;
+	};
+};
+
+export type BackgroundJobLogGetListResponse = WrapResultOfPagedResultDtoOfBackgroundJobLogDto;
+
+export type BackgroundJobLogGetListError = WrapResult;
+
+export type BackupHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+	query?: {
+		ids?: string;
+		version?: VersionOptions;
+	};
+};
+
+export type BackupHandleResponse = unknown;
+
+export type BackupHandleError = ProblemDetails;
+
+export type BulkCancelHandleData = {
+	body?: BulkCancelWorkflowsRequest;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+};
+
+export type BulkCancelHandleResponse = unknown;
+
+export type BulkCancelHandleError = unknown;
+
+export type BulkDeleteHandleData = {
+	body?: BulkDeleteWorkflowsRequest;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+};
+
+export type BulkDeleteHandleResponse = unknown;
+
+export type BulkDeleteHandleError = unknown;
+
+export type BulkRetryHandleData = {
+	body?: BulkRetryWorkflowsRequest;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+};
+
+export type BulkRetryHandleResponse = unknown;
+
+export type BulkRetryHandleError = unknown;
+
+export type CacheGetKeysData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		Marker?: string;
+		Prefix?: string;
+	};
+};
+
+export type CacheGetKeysResponse = WrapResultOfCacheKeysDto;
+
+export type CacheGetKeysError = WrapResult;
+
+export type CacheGetValueData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		Key: string;
+	};
+};
+
+export type CacheGetValueResponse = WrapResultOfCacheValueDto;
+
+export type CacheGetValueError = WrapResult;
+
+export type CacheSetData = {
+	body?: CacheSetInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type CacheSetResponse = WrapResult;
+
+export type CacheSetError = WrapResult;
+
+export type CacheRefreshData = {
+	body?: CacheRefreshInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type CacheRefreshResponse = WrapResult;
+
+export type CacheRefreshError = WrapResult;
+
+export type CacheRemoveData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		Key: string;
+	};
+};
+
+export type CacheRemoveResponse = WrapResult;
+
+export type CacheRemoveError = WrapResult;
+
+export type CancelHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		id: string;
+	};
+};
+
+export type CancelHandleResponse = unknown;
+
+export type CancelHandleError = ProblemDetails;
+
+export type ChatGetMyGroupMessageData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		Filter?: string;
+		GroupId: number;
+		MaxResultCount?: number;
+		MessageType?: MessageType;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type ChatGetMyGroupMessageResponse = WrapResultOfPagedResultDtoOfChatMessage;
+
+export type ChatGetMyGroupMessageError = WrapResult;
+
+export type ChatGetMyChatMessageData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		Filter?: string;
+		MaxResultCount?: number;
+		MessageType?: MessageType;
+		ReceiveUserId: string;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type ChatGetMyChatMessageResponse = WrapResultOfPagedResultDtoOfChatMessage;
+
+export type ChatGetMyChatMessageError = WrapResult;
+
+export type ChatGetMyLastChatMessageData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		MaxResultCount?: number;
+		Sorting?: string;
+		State?: MessageState;
+	};
+};
+
+export type ChatGetMyLastChatMessageResponse = WrapResultOfListResultDtoOfLastChatMessage;
+
+export type ChatGetMyLastChatMessageError = WrapResult;
+
+export type ChatSendMessageData = {
+	body?: ChatMessage;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ChatSendMessageResponse = WrapResultOfChatMessageSendResultDto;
+
+export type ChatSendMessageError = WrapResult;
+
+export type ClaimChangeAvatarData = {
+	body?: ChangeAvatarInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ClaimChangeAvatarResponse = WrapResult;
+
+export type ClaimChangeAvatarError = WrapResult;
+
+export type ClaimTypeCreateData = {
+	body?: IdentityClaimTypeCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ClaimTypeCreateResponse = WrapResultOfIdentityClaimTypeDto;
+
+export type ClaimTypeCreateError = WrapResult;
+
+export type ClaimTypeGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type ClaimTypeGetListResponse = WrapResultOfPagedResultDtoOfIdentityClaimTypeDto;
+
+export type ClaimTypeGetListError = WrapResult;
+
+export type ClaimTypeDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type ClaimTypeDeleteResponse = WrapResult;
+
+export type ClaimTypeDeleteError = WrapResult;
+
+export type ClaimTypeGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type ClaimTypeGetResponse = WrapResultOfIdentityClaimTypeDto;
+
+export type ClaimTypeGetError = WrapResult;
+
+export type ClaimTypeUpdateData = {
+	body?: IdentityClaimTypeUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type ClaimTypeUpdateResponse = WrapResultOfIdentityClaimTypeDto;
+
+export type ClaimTypeUpdateError = WrapResult;
+
+export type ClaimTypeGetAllListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ClaimTypeGetAllListResponse = WrapResultOfListResultDtoOfIdentityClaimTypeDto;
+
+export type ClaimTypeGetAllListError = WrapResult;
+
+export type DataCreateData = {
+	body?: DataCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type DataCreateResponse = WrapResultOfDataDto;
+
+export type DataCreateError = WrapResult;
+
+export type DataGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type DataGetListResponse = WrapResultOfPagedResultDtoOfDataDto;
+
+export type DataGetListError = WrapResult;
+
+export type DataCreateItemData = {
+	body?: DataItemCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type DataCreateItemResponse = WrapResult;
+
+export type DataCreateItemError = WrapResult;
+
+export type DataDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type DataDeleteResponse = WrapResult;
+
+export type DataDeleteError = WrapResult;
+
+export type DataGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type DataGetResponse = WrapResultOfDataDto;
+
+export type DataGetError = WrapResult;
+
+export type DataUpdateData = {
+	body?: DataUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type DataUpdateResponse = WrapResultOfDataDto;
+
+export type DataUpdateError = WrapResult;
+
+export type DataDeleteItemData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+		name: string;
+	};
+};
+
+export type DataDeleteItemResponse = WrapResult;
+
+export type DataDeleteItemError = WrapResult;
+
+export type DataUpdateItemData = {
+	body?: DataItemUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+		name: string;
+	};
+};
+
+export type DataUpdateItemResponse = WrapResult;
+
+export type DataUpdateItemError = WrapResult;
+
+export type DataGet1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type DataGet1Response = WrapResultOfDataDto;
+
+export type DataGet1Error = WrapResult;
+
+export type DataGetAllData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type DataGetAllResponse = WrapResultOfListResultDtoOfDataDto;
+
+export type DataGetAllError = WrapResult;
+
+export type DataMoveData = {
+	body?: DataMoveDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type DataMoveResponse = WrapResultOfDataDto;
+
+export type DataMoveError = WrapResult;
+
+export type DeleteHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		id: string;
+	};
+};
+
+export type DeleteHandleResponse = void;
+
+export type DeleteHandleError = ProblemDetails;
+
+export type GetHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		id: string;
+	};
+};
+
+export type GetHandleResponse = WorkflowInstance;
+
+export type GetHandleError = unknown;
+
+export type DeleteHandle1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		id: string;
+	};
+};
+
+export type DeleteHandle1Response = unknown;
+
+export type DeleteHandle1Error = ProblemDetails;
+
+export type GetHandle1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		id: string;
+	};
+};
+
+export type GetHandle1Response = WebhookDefinition;
+
+export type GetHandle1Error = ProblemDetails;
+
+export type DeleteByDefinitionHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		definitionId: string;
+	};
+};
+
+export type DeleteByDefinitionHandleResponse = unknown;
+
+export type DeleteByDefinitionHandleError = unknown;
+
+export type DeleteByDefinitionAndVersionHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		definitionId: string;
+		versionOptions: VersionOptions;
+	};
+};
+
+export type DeleteByDefinitionAndVersionHandleResponse = unknown;
+
+export type DeleteByDefinitionAndVersionHandleError = unknown;
+
+export type DispatchHandleData = {
+	body?: DispatchWorkflowDefinitionRequestModel;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		workflowDefinitionId: string;
+	};
+};
+
+export type DispatchHandleResponse = DispatchWorkflowDefinitionResponseModel;
+
+export type DispatchHandleError = ProblemDetails;
+
+export type DispatchHandle1Data = {
+	body?: DispatchWorkflowInstanceRequestModel;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		workflowInstanceId: string;
+	};
+};
+
+export type DispatchHandle1Response = DispatchWorkflowInstanceResponseModel;
+
+export type DispatchHandle1Error = ProblemDetails;
+
+export type DispatchHandle2Data = {
+	body?: DispatchSignalRequest;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		signalName: string;
+	};
+};
+
+export type DispatchHandle2Response = DispatchSignalResponse;
+
+export type DispatchHandle2Error = unknown;
+
+export type DispatchEndpointHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		token: string;
+	};
+};
+
+export type DispatchEndpointHandleResponse = unknown;
+
+export type DispatchEndpointHandleError = unknown;
+
+export type DispatchEndpointHandle1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		token: string;
+	};
+};
+
+export type DispatchEndpointHandle1Response = unknown;
+
+export type DispatchEndpointHandle1Error = unknown;
+
+export type DynamicClaimsRefreshData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type DynamicClaimsRefreshResponse = WrapResult;
+
+export type DynamicClaimsRefreshError = WrapResult;
+
+export type EditionCreateData = {
+	body?: EditionCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type EditionCreateResponse = WrapResultOfEditionDto;
+
+export type EditionCreateError = WrapResult;
+
+export type EditionGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type EditionGetListResponse = WrapResultOfPagedResultDtoOfEditionDto;
+
+export type EditionGetListError = WrapResult;
+
+export type EditionDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type EditionDeleteResponse = WrapResult;
+
+export type EditionDeleteError = WrapResult;
+
+export type EditionGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type EditionGetResponse = WrapResultOfEditionDto;
+
+export type EditionGetError = WrapResult;
+
+export type EditionUpdateData = {
+	body?: EditionUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type EditionUpdateResponse = WrapResultOfEditionDto;
+
+export type EditionUpdateError = WrapResult;
+
+export type EntityChangesGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type EntityChangesGetResponse = WrapResultOfEntityChangeDto;
+
+export type EntityChangesGetError = WrapResult;
+
+export type EntityChangesGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		AuditLogId?: string;
+		ChangeType?: EntityChangeType;
+		EndTime?: string;
+		EntityId?: string;
+		EntityTypeFullName?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+		StartTime?: string;
+	};
+};
+
+export type EntityChangesGetListResponse = WrapResultOfPagedResultDtoOfEntityChangeDto;
+
+export type EntityChangesGetListError = WrapResult;
+
+export type EntityChangesGetWithUsernameData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type EntityChangesGetWithUsernameResponse = WrapResultOfEntityChangeWithUsernameDto;
+
+export type EntityChangesGetWithUsernameError = WrapResult;
+
+export type EntityChangesGetWithUsername1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		EntityId?: string;
+		EntityTypeFullName?: string;
+	};
+};
+
+export type EntityChangesGetWithUsername1Response = WrapResultOfListResultDtoOfEntityChangeWithUsernameDto;
+
+export type EntityChangesGetWithUsername1Error = WrapResult;
+
+export type EntityTypeInfoGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type EntityTypeInfoGetResponse = WrapResultOfEntityTypeInfoDto;
+
+export type EntityTypeInfoGetError = WrapResult;
+
+export type EntityTypeInfoGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		IsAuditEnabled?: boolean;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type EntityTypeInfoGetListResponse = WrapResultOfPagedResultDtoOfEntityTypeInfoDto;
+
+export type EntityTypeInfoGetListError = WrapResult;
+
+export type ExecuteHandleData = {
+	body?: ExecuteWorkflowDefinitionRequestModel;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		workflowDefinitionId: string;
+	};
+};
+
+export type ExecuteHandleResponse = ExecuteWorkflowDefinitionResponseModel;
+
+export type ExecuteHandleError = ProblemDetails;
+
+export type ExecuteHandle1Data = {
+	body?: ExecuteWorkflowInstanceRequest;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		workflowInstanceId: string;
+	};
+};
+
+export type ExecuteHandle1Response = ExecuteWorkflowInstanceResponseModel;
+
+export type ExecuteHandle1Error = ProblemDetails;
+
+export type ExecuteHandle2Data = {
+	body?: ExecuteSignalRequest;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		signalName: string;
+	};
+};
+
+export type ExecuteHandle2Response = ExecuteSignalResponse;
+
+export type ExecuteHandle2Error = unknown;
+
+export type ExportHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		versionOptions: VersionOptions;
+		workflowDefinitionId: string;
+	};
+};
+
+export type ExportHandleResponse = unknown;
+
+export type ExportHandleError = ProblemDetails;
+
+export type FeatureDefinitionCreateData = {
+	body?: FeatureDefinitionCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type FeatureDefinitionCreateResponse = WrapResultOfFeatureDefinitionDto;
+
+export type FeatureDefinitionCreateError = WrapResult;
+
+export type FeatureDefinitionGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		GroupName?: string;
+	};
+};
+
+export type FeatureDefinitionGetListResponse = WrapResultOfListResultDtoOfFeatureDefinitionDto;
+
+export type FeatureDefinitionGetListError = WrapResult;
+
+export type FeatureDefinitionDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type FeatureDefinitionDeleteResponse = WrapResult;
+
+export type FeatureDefinitionDeleteError = WrapResult;
+
+export type FeatureDefinitionGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type FeatureDefinitionGetResponse = WrapResultOfFeatureDefinitionDto;
+
+export type FeatureDefinitionGetError = WrapResult;
+
+export type FeatureDefinitionUpdateData = {
+	body?: FeatureDefinitionUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type FeatureDefinitionUpdateResponse = WrapResultOfFeatureDefinitionDto;
+
+export type FeatureDefinitionUpdateError = WrapResult;
+
+export type FeatureGroupDefinitionCreateData = {
+	body?: FeatureGroupDefinitionCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type FeatureGroupDefinitionCreateResponse = WrapResultOfFeatureGroupDefinitionDto;
+
+export type FeatureGroupDefinitionCreateError = WrapResult;
+
+export type FeatureGroupDefinitionGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+	};
+};
+
+export type FeatureGroupDefinitionGetListResponse = WrapResultOfListResultDtoOfFeatureGroupDefinitionDto;
+
+export type FeatureGroupDefinitionGetListError = WrapResult;
+
+export type FeatureGroupDefinitionDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type FeatureGroupDefinitionDeleteResponse = WrapResult;
+
+export type FeatureGroupDefinitionDeleteError = WrapResult;
+
+export type FeatureGroupDefinitionGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type FeatureGroupDefinitionGetResponse = WrapResultOfFeatureGroupDefinitionDto;
+
+export type FeatureGroupDefinitionGetError = WrapResult;
+
+export type FeatureGroupDefinitionUpdateData = {
+	body?: FeatureGroupDefinitionUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type FeatureGroupDefinitionUpdateResponse = WrapResultOfFeatureGroupDefinitionDto;
+
+export type FeatureGroupDefinitionUpdateError = WrapResult;
+
+export type FeaturesGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		providerKey?: string;
+		providerName?: string;
+	};
+};
+
+export type FeaturesGetResponse = WrapResultOfGetFeatureListResultDto;
+
+export type FeaturesGetError = WrapResult;
+
+export type FeaturesUpdateData = {
+	body?: UpdateFeaturesDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		providerKey?: string;
+		providerName?: string;
+	};
+};
+
+export type FeaturesUpdateResponse = WrapResult;
+
+export type FeaturesUpdateError = WrapResult;
+
+export type FeaturesDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		providerKey?: string;
+		providerName?: string;
+	};
+};
+
+export type FeaturesDeleteResponse = WrapResult;
+
+export type FeaturesDeleteError = WrapResult;
+
+export type FeedbackCreateData = {
+	body?: FeedbackCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type FeedbackCreateResponse = WrapResultOfFeedbackDto;
+
+export type FeedbackCreateError = WrapResult;
+
+export type FeedbackGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Category?: string;
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+		Status?: FeedbackStatus;
+	};
+};
+
+export type FeedbackGetListResponse = WrapResultOfPagedResultDtoOfFeedbackDto;
+
+export type FeedbackGetListError = WrapResult;
+
+export type FeedbackDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type FeedbackDeleteResponse = WrapResult;
+
+export type FeedbackDeleteError = WrapResult;
+
+export type FeedbackGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type FeedbackGetResponse = WrapResultOfFeedbackDto;
+
+export type FeedbackGetError = WrapResult;
+
+export type FeedbackAttachmentGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		FeedbackId: string;
+		Name: string;
+	};
+};
+
+export type FeedbackAttachmentGetResponse = IRemoteStreamContent;
+
+export type FeedbackAttachmentGetError = RemoteServiceErrorResponse;
+
+export type FeedbackAttachmentDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		FeedbackId: string;
+		Name: string;
+	};
+};
+
+export type FeedbackAttachmentDeleteResponse = WrapResult;
+
+export type FeedbackAttachmentDeleteError = WrapResult;
+
+export type FeedbackAttachmentUploadData = {
+	body?: {
+		File?: IRemoteStreamContent;
+	};
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type FeedbackAttachmentUploadResponse = WrapResultOfFeedbackAttachmentTempFileDto;
+
+export type FeedbackAttachmentUploadError = WrapResult;
+
+export type GetHandle2Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		id: string;
+		versionOptions: VersionOptions;
+	};
+};
+
+export type GetHandle2Response = PagedListOfWorkflowBlueprintModel;
+
+export type GetHandle2Error = unknown;
+
+export type GetHandle3Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		id: string;
+	};
+	query?: {
+		page?: number;
+		pageSize?: number;
+	};
+};
+
+export type GetHandle3Response = PagedListOfWorkflowExecutionLogRecord;
+
+export type GetHandle3Error = unknown;
+
+export type GetHandle4Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+};
+
+export type GetHandle4Response = unknown;
+
+export type GetHandle4Error = unknown;
+
+export type GetHandle5Data = {
+	body?: IntellisenseContext;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		workflowDefinitionId: string;
+	};
+	query?: {
+		version?: VersionOptions;
+	};
+};
+
+export type GetHandle5Response = Blob | File;
+
+export type GetHandle5Error = unknown;
+
+export type GetHandle6Data = {
+	body?: RuntimeSelectListContextHolder;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+};
+
+export type GetHandle6Response = OkObjectResult;
+
+export type GetHandle6Error = unknown;
+
+export type GetHandle7Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		activityId: string;
+		apiVersion: string;
+		workflowInstanceId: string;
+	};
+};
+
+export type GetHandle7Response = ActivityStats;
+
+export type GetHandle7Error = unknown;
+
+export type GetByDefinitionAndVersionHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		versionOptions: VersionOptions;
+		workflowDefinitionId: string;
+	};
+};
+
+export type GetByDefinitionAndVersionHandleResponse = WorkflowDefinition;
+
+export type GetByDefinitionAndVersionHandleError = ProblemDetails;
+
+export type GetByVersionIdHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		versionId: string;
+	};
+};
+
+export type GetByVersionIdHandleResponse = WorkflowDefinition;
+
+export type GetByVersionIdHandleError = ProblemDetails;
+
+export type GroupGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		groupId: string;
+	};
+};
+
+export type GroupGetResponse = WrapResultOfGroup;
+
+export type GroupGetError = WrapResult;
+
+export type GroupSearchData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type GroupSearchResponse = WrapResultOfPagedResultDtoOfGroup;
+
+export type GroupSearchError = WrapResult;
+
+export type HistoryHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		definitionId: string;
+	};
+};
+
+export type HistoryHandleResponse = Array<WorkflowDefinitionVersionModel>;
+
+export type HistoryHandleError = unknown;
+
+export type IdentitySessionsGetSessionsData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		ClientId?: string;
+		Device?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+		UserId?: string;
+	};
+};
+
+export type IdentitySessionsGetSessionsResponse = WrapResultOfPagedResultDtoOfIdentitySessionDto;
+
+export type IdentitySessionsGetSessionsError = WrapResult;
+
+export type IdentitySessionsRevokeSessionData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		sessionId: string;
+	};
+};
+
+export type IdentitySessionsRevokeSessionResponse = WrapResult;
+
+export type IdentitySessionsRevokeSessionError = WrapResult;
+
+export type ImportHandleData = {
+	body?: {
+		ContentType?: string;
+		ContentDisposition?: string;
+		Headers?: {
+			[key: string]: Array<string>;
+		};
+		Length?: number;
+		Name?: string;
+		FileName?: string;
+	};
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		workflowDefinitionId: string;
+	};
+};
+
+export type ImportHandleResponse = unknown;
+
+export type ImportHandleError = unknown;
+
+export type LanguageGetByNameData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type LanguageGetByNameResponse = WrapResultOfLanguageDto;
+
+export type LanguageGetByNameError = WrapResult;
+
+export type LanguageDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type LanguageDeleteResponse = WrapResult;
+
+export type LanguageDeleteError = WrapResult;
+
+export type LanguageUpdateData = {
+	body?: LanguageUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type LanguageUpdateResponse = WrapResultOfLanguageDto;
+
+export type LanguageUpdateError = WrapResult;
+
+export type LanguageCreateData = {
+	body?: LanguageCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type LanguageCreateResponse = WrapResultOfLanguageDto;
+
+export type LanguageCreateError = WrapResult;
+
+export type LanguageGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+	};
+};
+
+export type LanguageGetListResponse = WrapResultOfListResultDtoOfLanguageDto;
+
+export type LanguageGetListError = WrapResult;
+
+export type LayoutCreateData = {
+	body?: LayoutCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type LayoutCreateResponse = WrapResultOfLayoutDto;
+
+export type LayoutCreateError = WrapResult;
+
+export type LayoutGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		Framework?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type LayoutGetListResponse = WrapResultOfPagedResultDtoOfLayoutDto;
+
+export type LayoutGetListError = WrapResult;
+
+export type LayoutDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type LayoutDeleteResponse = WrapResult;
+
+export type LayoutDeleteError = WrapResult;
+
+export type LayoutGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type LayoutGetResponse = WrapResultOfLayoutDto;
+
+export type LayoutGetError = WrapResult;
+
+export type LayoutUpdateData = {
+	body?: LayoutUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type LayoutUpdateResponse = WrapResultOfLayoutDto;
+
+export type LayoutUpdateError = WrapResult;
+
+export type LayoutGetAllListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type LayoutGetAllListResponse = WrapResultOfListResultDtoOfLayoutDto;
+
+export type LayoutGetAllListError = WrapResult;
+
+export type ListHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		version: string;
+	};
+};
+
+export type ListHandleResponse = Array<WorkflowStorageDescriptor>;
+
+export type ListHandleError = unknown;
+
+export type ListHandle1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		version: string;
+	};
+};
+
+export type ListHandle1Response = Array<WorkflowProviderDescriptor>;
+
+export type ListHandle1Error = unknown;
+
+export type ListHandle2Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+	query?: {
+		correlationId?: string;
+		orderBy?: WorkflowInstanceOrderBy;
+		page?: number;
+		pageSize?: number;
+		searchTerm?: string;
+		status?: WorkflowStatus;
+		workflow?: string;
+	};
+};
+
+export type ListHandle2Response = PagedListOfWorkflowInstanceSummaryModel;
+
+export type ListHandle2Error = unknown;
+
+export type ListHandle3Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+	query?: {
+		ids?: string;
+		orderBy?: WorkflowDefinitionOrderBy;
+		page?: number;
+		pageSize?: number;
+		searchTerm?: string;
+		sortBy?: SortBy;
+		version?: VersionOptions;
+	};
+};
+
+export type ListHandle3Response = PagedListOfWorkflowDefinitionSummaryModel;
+
+export type ListHandle3Error = unknown;
+
+export type SaveHandleData = {
+	body?: SaveWorkflowDefinitionRequest;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: ApiVersion;
+	};
+};
+
+export type SaveHandleResponse = WorkflowDefinition;
+
+export type SaveHandleError = unknown;
+
+export type ListHandle4Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+};
+
+export type ListHandle4Response = unknown;
+
+export type ListHandle4Error = unknown;
+
+export type ListHandle5Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+};
+
+export type ListHandle5Response = unknown;
+
+export type ListHandle5Error = unknown;
+
+export type ListHandle6Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		version: string;
+	};
+};
+
+export type ListHandle6Response = Array<ActivityDescriptor>;
+
+export type ListHandle6Error = unknown;
+
+export type ListHandle7Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+};
+
+export type ListHandle7Response = Array<WebhookDefinition>;
+
+export type ListHandle7Error = unknown;
+
+export type PostHandleData = {
+	body?: SaveWebhookDefinitionRequest;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: ApiVersion;
+	};
+};
+
+export type PostHandleResponse = WebhookDefinition;
+
+export type PostHandleError = unknown;
+
+export type UpdateHandleData = {
+	body?: SaveWebhookDefinitionRequest;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: ApiVersion;
+	};
+};
+
+export type UpdateHandleResponse = WebhookDefinition;
+
+export type UpdateHandleError = ProblemDetails;
+
+export type ListAllHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+	query?: {
+		version?: VersionOptions;
+	};
+};
+
+export type ListAllHandleResponse = Array<WorkflowBlueprintSummaryModel>;
+
+export type ListAllHandleError = unknown;
+
+export type ListByDefinitionVersionIdsHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+	query?: {
+		ids?: string;
+	};
+};
+
+export type ListByDefinitionVersionIdsHandleResponse = PagedListOfWorkflowBlueprintSummaryModel;
+
+export type ListByDefinitionVersionIdsHandleError = unknown;
+
+export type ListByProviderHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		providerName: string;
+	};
+	query?: {
+		page?: number;
+		pageSize?: number;
+		version?: VersionOptions;
+	};
+};
+
+export type ListByProviderHandleResponse = PagedListOfWorkflowBlueprintSummaryModel;
+
+export type ListByProviderHandleError = unknown;
+
+export type LoggingGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type LoggingGetResponse = WrapResultOfLogDto;
+
+export type LoggingGetError = WrapResult;
+
+export type LoggingGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Application?: string;
+		Context?: string;
+		CorrelationId?: string;
+		EndTime?: string;
+		Environment?: string;
+		HasException?: boolean;
+		Level?: LogLevel;
+		MachineName?: string;
+		MaxResultCount?: number;
+		ProcessId?: number;
+		RequestId?: string;
+		RequestPath?: string;
+		SkipCount?: number;
+		Sorting?: string;
+		StartTime?: string;
+		ThreadId?: number;
+	};
+};
+
+export type LoggingGetListResponse = WrapResultOfPagedResultDtoOfLogDto;
+
+export type LoggingGetListError = WrapResult;
+
+export type LoginLoginData = {
+	body?: UserLoginInfo;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type LoginLoginResponse = WrapResultOfAbpLoginResult;
+
+export type LoginLoginError = WrapResult;
+
+export type LoginLogoutData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type LoginLogoutResponse = WrapResult;
+
+export type LoginLogoutError = WrapResult;
+
+export type LoginCheckPasswordData = {
+	body?: UserLoginInfo;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type LoginCheckPasswordResponse = WrapResultOfAbpLoginResult;
+
+export type LoginCheckPasswordError = WrapResult;
+
+export type MenuGetCurrentUserMenuListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Framework?: string;
+	};
+};
+
+export type MenuGetCurrentUserMenuListResponse = WrapResultOfListResultDtoOfMenuDto;
+
+export type MenuGetCurrentUserMenuListError = WrapResult;
+
+export type MenuGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type MenuGetResponse = WrapResultOfMenuDto;
+
+export type MenuGetError = WrapResult;
+
+export type MenuUpdateData = {
+	body?: MenuUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type MenuUpdateResponse = WrapResultOfMenuDto;
+
+export type MenuUpdateError = WrapResult;
+
+export type MenuDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type MenuDeleteResponse = WrapResult;
+
+export type MenuDeleteError = WrapResult;
+
+export type MenuGetAllData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		Framework?: string;
+		LayoutId?: string;
+		ParentId?: string;
+		Reverse?: boolean;
+		Sorting?: string;
+	};
+};
+
+export type MenuGetAllResponse = WrapResultOfListResultDtoOfMenuDto;
+
+export type MenuGetAllError = WrapResult;
+
+export type MenuGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		Framework?: string;
+		LayoutId?: string;
+		MaxResultCount?: number;
+		ParentId?: string;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type MenuGetListResponse = WrapResultOfPagedResultDtoOfMenuDto;
+
+export type MenuGetListError = WrapResult;
+
+export type MenuCreateData = {
+	body?: MenuCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type MenuCreateResponse = WrapResultOfMenuDto;
+
+export type MenuCreateError = WrapResult;
+
+export type MenuSetUserMenusData = {
+	body?: UserMenuInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type MenuSetUserMenusResponse = WrapResult;
+
+export type MenuSetUserMenusError = WrapResult;
+
+export type MenuGetUserMenuListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		Framework?: string;
+		Roles?: Array<string>;
+		UserId: string;
+	};
+};
+
+export type MenuGetUserMenuListResponse = WrapResultOfListResultDtoOfMenuDto;
+
+export type MenuGetUserMenuListError = WrapResult;
+
+export type MenuSetUserStartupData = {
+	body?: UserMenuStartupInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type MenuSetUserStartupResponse = WrapResult;
+
+export type MenuSetUserStartupError = WrapResult;
+
+export type MenuGetUserMenuList1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		framework: string;
+		userId: string;
+	};
+};
+
+export type MenuGetUserMenuList1Response = WrapResultOfListResultDtoOfMenuDto;
+
+export type MenuGetUserMenuList1Error = WrapResult;
+
+export type MenuSetRoleMenusData = {
+	body?: RoleMenuInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type MenuSetRoleMenusResponse = WrapResult;
+
+export type MenuSetRoleMenusError = WrapResult;
+
+export type MenuGetRoleMenuListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		Framework?: string;
+		Role: string;
+	};
+};
+
+export type MenuGetRoleMenuListResponse = WrapResultOfListResultDtoOfMenuDto;
+
+export type MenuGetRoleMenuListError = WrapResult;
+
+export type MenuSetRoleStartupData = {
+	body?: RoleMenuStartupInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type MenuSetRoleStartupResponse = WrapResult;
+
+export type MenuSetRoleStartupError = WrapResult;
+
+export type MenuGetRoleMenuList1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		framework: string;
+		role: string;
+	};
+};
+
+export type MenuGetRoleMenuList1Response = WrapResultOfListResultDtoOfMenuDto;
+
+export type MenuGetRoleMenuList1Error = WrapResult;
+
+export type MyFeedbackGetMyFeedbacksData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Category?: string;
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+		Status?: FeedbackStatus;
+	};
+};
+
+export type MyFeedbackGetMyFeedbacksResponse = WrapResultOfPagedResultDtoOfFeedbackDto;
+
+export type MyFeedbackGetMyFeedbacksError = WrapResult;
+
+export type MyFriendCreateData = {
+	body?: MyFriendCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type MyFriendCreateResponse = WrapResult;
+
+export type MyFriendCreateError = WrapResult;
+
+export type MyFriendDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		FriendId: string;
+	};
+};
+
+export type MyFriendDeleteResponse = WrapResult;
+
+export type MyFriendDeleteError = WrapResult;
+
+export type MyFriendGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type MyFriendGetListResponse = WrapResultOfPagedResultDtoOfUserFriend;
+
+export type MyFriendGetListError = WrapResult;
+
+export type MyFriendAddRequestData = {
+	body?: MyFriendAddRequestDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type MyFriendAddRequestResponse = WrapResult;
+
+export type MyFriendAddRequestError = WrapResult;
+
+export type MyFriendGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		friendId: string;
+	};
+};
+
+export type MyFriendGetResponse = WrapResultOfUserFriend;
+
+export type MyFriendGetError = WrapResult;
+
+export type MyFriendGetAllListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Sorting?: string;
+	};
+};
+
+export type MyFriendGetAllListResponse = WrapResultOfListResultDtoOfUserFriend;
+
+export type MyFriendGetAllListError = WrapResult;
+
+export type MyNotificationMarkReadStateData = {
+	body?: NotificationMarkReadStateInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type MyNotificationMarkReadStateResponse = WrapResult;
+
+export type MyNotificationMarkReadStateError = WrapResult;
+
+export type MyNotificationDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: number;
+	};
+};
+
+export type MyNotificationDeleteResponse = WrapResult;
+
+export type MyNotificationDeleteError = WrapResult;
+
+export type MyNotificationGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: number;
+	};
+};
+
+export type MyNotificationGetResponse = WrapResultOfUserNotificationDto;
+
+export type MyNotificationGetError = WrapResult;
+
+export type MyNotificationGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		MaxResultCount?: number;
+		ReadState?: NotificationReadState;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type MyNotificationGetListResponse = WrapResultOfPagedResultDtoOfUserNotificationDto;
+
+export type MyNotificationGetListError = WrapResult;
+
+export type MySubscriptionGetAllListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type MySubscriptionGetAllListResponse = WrapResultOfListResultDtoOfUserSubscreNotificationDto;
+
+export type MySubscriptionGetAllListError = WrapResult;
+
+export type MySubscriptionGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type MySubscriptionGetListResponse = WrapResultOfPagedResultDtoOfUserSubscreNotificationDto;
+
+export type MySubscriptionGetListError = WrapResult;
+
+export type MySubscriptionSubscribeData = {
+	body?: SubscriptionsGetByNameDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type MySubscriptionSubscribeResponse = WrapResult;
+
+export type MySubscriptionSubscribeError = WrapResult;
+
+export type MySubscriptionUnSubscribeData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		Name: string;
+	};
+};
+
+export type MySubscriptionUnSubscribeResponse = WrapResult;
+
+export type MySubscriptionUnSubscribeError = WrapResult;
+
+export type MySubscriptionIsSubscribedData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+	};
+};
+
+export type MySubscriptionIsSubscribedResponse = WrapResultOfUserSubscriptionsResult;
+
+export type MySubscriptionIsSubscribedError = WrapResult;
+
+export type NotificationSendData = {
+	body?: NotificationSendDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type NotificationSendResponse = WrapResult;
+
+export type NotificationSendError = WrapResult;
+
+export type NotificationSend1Data = {
+	body?: NotificationTemplateSendDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type NotificationSend1Response = WrapResult;
+
+export type NotificationSend1Error = WrapResult;
+
+export type NotificationGetAssignableNotifiersData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type NotificationGetAssignableNotifiersResponse = WrapResultOfListResultDtoOfNotificationGroupDto;
+
+export type NotificationGetAssignableNotifiersError = WrapResult;
+
+export type NotificationGetAssignableTemplatesData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type NotificationGetAssignableTemplatesResponse = WrapResultOfListResultDtoOfNotificationTemplateDto;
+
+export type NotificationGetAssignableTemplatesError = WrapResult;
+
+export type NotificationDefinitionCreateData = {
+	body?: NotificationDefinitionCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type NotificationDefinitionCreateResponse = WrapResultOfNotificationDefinitionDto;
+
+export type NotificationDefinitionCreateError = WrapResult;
+
+export type NotificationDefinitionGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		AllowSubscriptionToClients?: boolean;
+		ContentType?: NotificationContentType;
+		Filter?: string;
+		GroupName?: string;
+		NotificationLifetime?: NotificationLifetime;
+		NotificationType?: NotificationType;
+		Template?: string;
+	};
+};
+
+export type NotificationDefinitionGetListResponse = WrapResultOfListResultDtoOfNotificationDefinitionDto;
+
+export type NotificationDefinitionGetListError = WrapResult;
+
+export type NotificationDefinitionDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type NotificationDefinitionDeleteResponse = WrapResult;
+
+export type NotificationDefinitionDeleteError = WrapResult;
+
+export type NotificationDefinitionGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type NotificationDefinitionGetResponse = WrapResultOfNotificationDefinitionDto;
+
+export type NotificationDefinitionGetError = WrapResult;
+
+export type NotificationDefinitionUpdateData = {
+	body?: NotificationDefinitionUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type NotificationDefinitionUpdateResponse = WrapResultOfNotificationDefinitionDto;
+
+export type NotificationDefinitionUpdateError = WrapResult;
+
+export type NotificationGroupDefinitionCreateData = {
+	body?: NotificationGroupDefinitionCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type NotificationGroupDefinitionCreateResponse = WrapResultOfNotificationGroupDefinitionDto;
+
+export type NotificationGroupDefinitionCreateError = WrapResult;
+
+export type NotificationGroupDefinitionGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+	};
+};
+
+export type NotificationGroupDefinitionGetListResponse = WrapResultOfListResultDtoOfNotificationGroupDefinitionDto;
+
+export type NotificationGroupDefinitionGetListError = WrapResult;
+
+export type NotificationGroupDefinitionDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type NotificationGroupDefinitionDeleteResponse = WrapResult;
+
+export type NotificationGroupDefinitionDeleteError = WrapResult;
+
+export type NotificationGroupDefinitionGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type NotificationGroupDefinitionGetResponse = WrapResultOfNotificationGroupDefinitionDto;
+
+export type NotificationGroupDefinitionGetError = WrapResult;
+
+export type NotificationGroupDefinitionUpdateData = {
+	body?: NotificationGroupDefinitionUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type NotificationGroupDefinitionUpdateResponse = WrapResultOfNotificationGroupDefinitionDto;
+
+export type NotificationGroupDefinitionUpdateError = WrapResult;
+
+export type OpenIddictApplicationGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OpenIddictApplicationGetResponse = WrapResultOfOpenIddictApplicationDto;
+
+export type OpenIddictApplicationGetError = WrapResult;
+
+export type OpenIddictApplicationUpdateData = {
+	body?: OpenIddictApplicationUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OpenIddictApplicationUpdateResponse = WrapResultOfOpenIddictApplicationDto;
+
+export type OpenIddictApplicationUpdateError = WrapResult;
+
+export type OpenIddictApplicationDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OpenIddictApplicationDeleteResponse = WrapResult;
+
+export type OpenIddictApplicationDeleteError = WrapResult;
+
+export type OpenIddictApplicationGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type OpenIddictApplicationGetListResponse = WrapResultOfPagedResultDtoOfOpenIddictApplicationDto;
+
+export type OpenIddictApplicationGetListError = WrapResult;
+
+export type OpenIddictApplicationCreateData = {
+	body?: OpenIddictApplicationCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type OpenIddictApplicationCreateResponse = WrapResultOfOpenIddictApplicationDto;
+
+export type OpenIddictApplicationCreateError = WrapResult;
+
+export type OpenIddictAuthorizationDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OpenIddictAuthorizationDeleteResponse = WrapResult;
+
+export type OpenIddictAuthorizationDeleteError = WrapResult;
+
+export type OpenIddictAuthorizationGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OpenIddictAuthorizationGetResponse = WrapResultOfOpenIddictAuthorizationDto;
+
+export type OpenIddictAuthorizationGetError = WrapResult;
+
+export type OpenIddictAuthorizationGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		BeginCreationTime?: string;
+		ClientId?: string;
+		EndCreationTime?: string;
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+		Status?: string;
+		Subject?: string;
+		Type?: string;
+	};
+};
+
+export type OpenIddictAuthorizationGetListResponse = WrapResultOfPagedResultDtoOfOpenIddictAuthorizationDto;
+
+export type OpenIddictAuthorizationGetListError = WrapResult;
+
+export type OpenIddictScopeCreateData = {
+	body?: OpenIddictScopeCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type OpenIddictScopeCreateResponse = WrapResultOfOpenIddictScopeDto;
+
+export type OpenIddictScopeCreateError = WrapResult;
+
+export type OpenIddictScopeGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type OpenIddictScopeGetListResponse = WrapResultOfPagedResultDtoOfOpenIddictScopeDto;
+
+export type OpenIddictScopeGetListError = WrapResult;
+
+export type OpenIddictScopeDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OpenIddictScopeDeleteResponse = WrapResult;
+
+export type OpenIddictScopeDeleteError = WrapResult;
+
+export type OpenIddictScopeGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OpenIddictScopeGetResponse = WrapResultOfOpenIddictScopeDto;
+
+export type OpenIddictScopeGetError = WrapResult;
+
+export type OpenIddictScopeUpdateData = {
+	body?: OpenIddictScopeUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OpenIddictScopeUpdateResponse = WrapResultOfOpenIddictScopeDto;
+
+export type OpenIddictScopeUpdateError = WrapResult;
+
+export type OpenIddictTokenDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OpenIddictTokenDeleteResponse = WrapResult;
+
+export type OpenIddictTokenDeleteError = WrapResult;
+
+export type OpenIddictTokenGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OpenIddictTokenGetResponse = WrapResultOfOpenIddictTokenDto;
+
+export type OpenIddictTokenGetError = WrapResult;
+
+export type OpenIddictTokenGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		AuthorizationId?: string;
+		BeginCreationTime?: string;
+		BeginExpirationDate?: string;
+		ClientId?: string;
+		EndCreationTime?: string;
+		EndExpirationDate?: string;
+		Filter?: string;
+		MaxResultCount?: number;
+		ReferenceId?: string;
+		SkipCount?: number;
+		Sorting?: string;
+		Status?: string;
+		Subject?: string;
+		Type?: string;
+	};
+};
+
+export type OpenIddictTokenGetListResponse = WrapResultOfPagedResultDtoOfOpenIddictTokenDto;
+
+export type OpenIddictTokenGetListError = WrapResult;
+
+export type OrganizationUnitsCreateData = {
+	body?: OrganizationUnitCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type OrganizationUnitsCreateResponse = WrapResultOfOrganizationUnitDto;
+
+export type OrganizationUnitsCreateError = WrapResult;
+
+export type OrganizationUnitsGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type OrganizationUnitsGetListResponse = WrapResultOfPagedResultDtoOfOrganizationUnitDto;
+
+export type OrganizationUnitsGetListError = WrapResult;
+
+export type OrganizationUnitsDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OrganizationUnitsDeleteResponse = WrapResult;
+
+export type OrganizationUnitsDeleteError = WrapResult;
+
+export type OrganizationUnitsGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OrganizationUnitsGetResponse = WrapResultOfOrganizationUnitDto;
+
+export type OrganizationUnitsGetError = WrapResult;
+
+export type OrganizationUnitsUpdateData = {
+	body?: OrganizationUnitUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OrganizationUnitsUpdateResponse = WrapResultOfOrganizationUnitDto;
+
+export type OrganizationUnitsUpdateError = WrapResult;
+
+export type OrganizationUnitsFindChildrenData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		Id: string;
+		Recursive?: boolean;
+	};
+};
+
+export type OrganizationUnitsFindChildrenResponse = WrapResultOfListResultDtoOfOrganizationUnitDto;
+
+export type OrganizationUnitsFindChildrenError = WrapResult;
+
+export type OrganizationUnitsGetRootData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type OrganizationUnitsGetRootResponse = WrapResultOfListResultDtoOfOrganizationUnitDto;
+
+export type OrganizationUnitsGetRootError = WrapResult;
+
+export type OrganizationUnitsGetLastChildOrNullData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		parentId?: string;
+	};
+};
+
+export type OrganizationUnitsGetLastChildOrNullResponse = WrapResultOfOrganizationUnitDto;
+
+export type OrganizationUnitsGetLastChildOrNullError = WrapResult;
+
+export type OrganizationUnitsGetAllListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type OrganizationUnitsGetAllListResponse = WrapResultOfListResultDtoOfOrganizationUnitDto;
+
+export type OrganizationUnitsGetAllListError = WrapResult;
+
+export type OrganizationUnitsGetRoleNamesData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OrganizationUnitsGetRoleNamesResponse = WrapResultOfListResultDtoOfString;
+
+export type OrganizationUnitsGetRoleNamesError = WrapResult;
+
+export type OrganizationUnitsGetUnaddedRolesData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+	query?: {
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type OrganizationUnitsGetUnaddedRolesResponse = WrapResultOfPagedResultDtoOfIdentityRoleDto;
+
+export type OrganizationUnitsGetUnaddedRolesError = WrapResult;
+
+export type OrganizationUnitsGetRolesData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+	query?: {
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type OrganizationUnitsGetRolesResponse = WrapResultOfPagedResultDtoOfIdentityRoleDto;
+
+export type OrganizationUnitsGetRolesError = WrapResult;
+
+export type OrganizationUnitsAddRolesData = {
+	body?: OrganizationUnitAddRoleDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OrganizationUnitsAddRolesResponse = WrapResult;
+
+export type OrganizationUnitsAddRolesError = WrapResult;
+
+export type OrganizationUnitsGetUnaddedUsersData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+	query?: {
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type OrganizationUnitsGetUnaddedUsersResponse = WrapResultOfPagedResultDtoOfIdentityUserDto;
+
+export type OrganizationUnitsGetUnaddedUsersError = WrapResult;
+
+export type OrganizationUnitsGetUsersData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+	query?: {
+		ExtraProperties?: {
+			[key: string]: unknown;
+		};
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type OrganizationUnitsGetUsersResponse = WrapResultOfPagedResultDtoOfIdentityUserDto;
+
+export type OrganizationUnitsGetUsersError = WrapResult;
+
+export type OrganizationUnitsAddUsersData = {
+	body?: OrganizationUnitAddUserDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OrganizationUnitsAddUsersResponse = WrapResult;
+
+export type OrganizationUnitsAddUsersError = WrapResult;
+
+export type OrganizationUnitsMoveData = {
+	body?: OrganizationUnitMoveDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OrganizationUnitsMoveResponse = WrapResult;
+
+export type OrganizationUnitsMoveError = WrapResult;
+
+export type OrganizationUnitEntityRuleGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		EntityTypeId: string;
+		Operation: DataAccessOperation;
+		OrgCode: string;
+	};
+};
+
+export type OrganizationUnitEntityRuleGetResponse = WrapResultOfOrganizationUnitEntityRuleDto;
+
+export type OrganizationUnitEntityRuleGetError = WrapResult;
+
+export type OrganizationUnitEntityRuleCreateData = {
+	body?: OrganizationUnitEntityRuleCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type OrganizationUnitEntityRuleCreateResponse = WrapResultOfOrganizationUnitEntityRuleDto;
+
+export type OrganizationUnitEntityRuleCreateError = WrapResult;
+
+export type OrganizationUnitEntityRuleUpdateData = {
+	body?: OrganizationUnitEntityRuleUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type OrganizationUnitEntityRuleUpdateResponse = WrapResultOfOrganizationUnitEntityRuleDto;
+
+export type OrganizationUnitEntityRuleUpdateError = WrapResult;
+
+export type OssContainerCreateData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type OssContainerCreateResponse = WrapResultOfOssContainerDto;
+
+export type OssContainerCreateError = WrapResult;
+
+export type OssContainerDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type OssContainerDeleteResponse = WrapResult;
+
+export type OssContainerDeleteError = WrapResult;
+
+export type OssContainerGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type OssContainerGetResponse = WrapResultOfOssContainerDto;
+
+export type OssContainerGetError = WrapResult;
+
+export type OssContainerGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Marker?: string;
+		MaxResultCount?: number;
+		Prefix?: string;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type OssContainerGetListResponse = WrapResultOfOssContainersResultDto;
+
+export type OssContainerGetListError = WrapResult;
+
+export type OssContainerGetObjectListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Bucket?: string;
+		Delimiter?: string;
+		EncodingType?: string;
+		Marker?: string;
+		MaxResultCount?: number;
+		MD5?: boolean;
+		Prefix?: string;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type OssContainerGetObjectListResponse = WrapResultOfOssObjectsResultDto;
+
+export type OssContainerGetObjectListError = WrapResult;
+
+export type OssManagementSettingGetAllForCurrentTenantData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type OssManagementSettingGetAllForCurrentTenantResponse = WrapResultOfSettingGroupResult;
+
+export type OssManagementSettingGetAllForCurrentTenantError = WrapResult;
+
+export type OssManagementSettingGetAllForGlobalData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type OssManagementSettingGetAllForGlobalResponse = WrapResultOfSettingGroupResult;
+
+export type OssManagementSettingGetAllForGlobalError = WrapResult;
+
+export type OssObjectCreateData = {
+	body?: {
+		Bucket?: string;
+		Path?: string;
+		FileName?: string;
+		Overwrite?: boolean;
+		File?: IRemoteStreamContent;
+		ExpirationTime?: TimeSpan;
+	};
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type OssObjectCreateResponse = WrapResultOfOssObjectDto;
+
+export type OssObjectCreateError = WrapResult;
+
+export type OssObjectDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		Bucket: string;
+		MD5?: boolean;
+		Object: string;
+		Path?: string;
+	};
+};
+
+export type OssObjectDeleteResponse = WrapResult;
+
+export type OssObjectDeleteError = WrapResult;
+
+export type OssObjectGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		Bucket: string;
+		MD5?: boolean;
+		Object: string;
+		Path?: string;
+	};
+};
+
+export type OssObjectGetResponse = WrapResultOfOssObjectDto;
+
+export type OssObjectGetError = WrapResult;
+
+export type OssObjectUploadData = {
+	body?: {
+		Bucket?: string;
+		Path?: string;
+		ChunkSize: number;
+		CurrentChunkSize: number;
+		ChunkNumber: number;
+		TotalChunks: number;
+		File?: IRemoteStreamContent;
+		TotalSize: number;
+		FileName: string;
+	};
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type OssObjectUploadResponse = WrapResult;
+
+export type OssObjectUploadError = WrapResult;
+
+export type OssObjectBulkDeleteData = {
+	body?: BulkDeleteOssObjectInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type OssObjectBulkDeleteResponse = WrapResult;
+
+export type OssObjectBulkDeleteError = WrapResult;
+
+export type OssObjectGetContentData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		Bucket: string;
+		MD5?: boolean;
+		Object: string;
+		Path?: string;
+	};
+};
+
+export type OssObjectGetContentResponse = IRemoteStreamContent;
+
+export type OssObjectGetContentError = RemoteServiceErrorResponse;
+
+export type PackageCreateData = {
+	body?: PackageCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type PackageCreateResponse = WrapResultOfPackageDto;
+
+export type PackageCreateError = WrapResult;
+
+export type PackageGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Authors?: string;
+		Description?: string;
+		Filter?: string;
+		ForceUpdate?: boolean;
+		MaxResultCount?: number;
+		Name?: string;
+		Note?: string;
+		SkipCount?: number;
+		Sorting?: string;
+		Version?: string;
+	};
+};
+
+export type PackageGetListResponse = WrapResultOfPagedResultDtoOfPackageDto;
+
+export type PackageGetListError = WrapResult;
+
+export type PackageDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type PackageDeleteResponse = WrapResult;
+
+export type PackageDeleteError = WrapResult;
+
+export type PackageGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type PackageGetResponse = WrapResultOfPackageDto;
+
+export type PackageGetError = WrapResult;
+
+export type PackageUpdateData = {
+	body?: PackageUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type PackageUpdateResponse = WrapResultOfPackageDto;
+
+export type PackageUpdateError = WrapResult;
+
+export type PackageUploadBlobData = {
+	body?: {
+		Name: string;
+		Size?: number;
+		Summary?: string;
+		ContentType?: string;
+		CreatedAt?: string;
+		UpdatedAt?: string;
+		License?: string;
+		Authors?: string;
+		File: IRemoteStreamContent;
+	};
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type PackageUploadBlobResponse = WrapResultOfPackageBlobDto;
+
+export type PackageUploadBlobError = WrapResult;
+
+export type PackageRemoveBlobData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+		Name: string;
+	};
+};
+
+export type PackageRemoveBlobResponse = WrapResult;
+
+export type PackageRemoveBlobError = WrapResult;
+
+export type PackageDownloadBlobData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+		Name: string;
+	};
+};
+
+export type PackageDownloadBlobResponse = IRemoteStreamContent;
+
+export type PackageDownloadBlobError = RemoteServiceErrorResponse;
+
+export type PackageGetLatestData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+	};
+	query?: {
+		Version?: string;
+	};
+};
+
+export type PackageGetLatestResponse = WrapResultOfPackageDto;
+
+export type PackageGetLatestError = WrapResult;
+
+export type PackageGetLatest1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		Version: string;
+	};
+};
+
+export type PackageGetLatest1Response = WrapResultOfPackageDto;
+
+export type PackageGetLatest1Error = WrapResult;
+
+export type PermissionDefinitionCreateData = {
+	body?: PermissionDefinitionCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type PermissionDefinitionCreateResponse = WrapResultOfPermissionDefinitionDto;
+
+export type PermissionDefinitionCreateError = WrapResult;
+
+export type PermissionDefinitionGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		GroupName?: string;
+	};
+};
+
+export type PermissionDefinitionGetListResponse = WrapResultOfListResultDtoOfPermissionDefinitionDto;
+
+export type PermissionDefinitionGetListError = WrapResult;
+
+export type PermissionDefinitionDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type PermissionDefinitionDeleteResponse = WrapResult;
+
+export type PermissionDefinitionDeleteError = WrapResult;
+
+export type PermissionDefinitionGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type PermissionDefinitionGetResponse = WrapResultOfPermissionDefinitionDto;
+
+export type PermissionDefinitionGetError = WrapResult;
+
+export type PermissionDefinitionUpdateData = {
+	body?: PermissionDefinitionUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type PermissionDefinitionUpdateResponse = WrapResultOfPermissionDefinitionDto;
+
+export type PermissionDefinitionUpdateError = WrapResult;
+
+export type PermissionGroupDefinitionCreateData = {
+	body?: PermissionGroupDefinitionCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type PermissionGroupDefinitionCreateResponse = WrapResultOfPermissionGroupDefinitionDto;
+
+export type PermissionGroupDefinitionCreateError = WrapResult;
+
+export type PermissionGroupDefinitionGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+	};
+};
+
+export type PermissionGroupDefinitionGetListResponse = WrapResultOfListResultDtoOfPermissionGroupDefinitionDto;
+
+export type PermissionGroupDefinitionGetListError = WrapResult;
+
+export type PermissionGroupDefinitionDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type PermissionGroupDefinitionDeleteResponse = WrapResult;
+
+export type PermissionGroupDefinitionDeleteError = WrapResult;
+
+export type PermissionGroupDefinitionGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type PermissionGroupDefinitionGetResponse = WrapResultOfPermissionGroupDefinitionDto;
+
+export type PermissionGroupDefinitionGetError = WrapResult;
+
+export type PermissionGroupDefinitionUpdateData = {
+	body?: PermissionGroupDefinitionUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type PermissionGroupDefinitionUpdateResponse = WrapResultOfPermissionGroupDefinitionDto;
+
+export type PermissionGroupDefinitionUpdateError = WrapResult;
+
+export type PermissionsGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		providerKey?: string;
+		providerName?: string;
+	};
+};
+
+export type PermissionsGetResponse = WrapResultOfGetPermissionListResultDto;
+
+export type PermissionsGetError = WrapResult;
+
+export type PermissionsUpdateData = {
+	body?: UpdatePermissionsDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		providerKey?: string;
+		providerName?: string;
+	};
+};
+
+export type PermissionsUpdateResponse = WrapResult;
+
+export type PermissionsUpdateError = WrapResult;
+
+export type PrivateFilesUploadData = {
+	body?: {
+		Path?: string;
+		Object?: string;
+		Overwrite?: boolean;
+		File: IRemoteStreamContent;
+	};
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type PrivateFilesUploadResponse = WrapResultOfOssObjectDto;
+
+export type PrivateFilesUploadError = WrapResult;
+
+export type PrivateFilesDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		Name: string;
+		Path?: string;
+		Process?: string;
+		TenantId?: string;
+	};
+};
+
+export type PrivateFilesDeleteResponse = WrapResult;
+
+export type PrivateFilesDeleteError = WrapResult;
+
+export type PrivateFilesUpload1Data = {
+	body?: {
+		Bucket?: string;
+		Path?: string;
+		ChunkSize: number;
+		CurrentChunkSize: number;
+		ChunkNumber: number;
+		TotalChunks: number;
+		File?: IRemoteStreamContent;
+		TotalSize: number;
+		FileName: string;
+	};
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type PrivateFilesUpload1Response = WrapResult;
+
+export type PrivateFilesUpload1Error = WrapResult;
+
+export type PrivateFilesGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		MaxResultCount?: number;
+		Path?: string;
+	};
+};
+
+export type PrivateFilesGetListResponse = WrapResultOfListResultDtoOfOssObjectDto;
+
+export type PrivateFilesGetListError = WrapResult;
+
+export type PrivateFilesGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+	};
+};
+
+export type PrivateFilesGetResponse = IRemoteStreamContent;
+
+export type PrivateFilesGetError = RemoteServiceErrorResponse;
+
+export type PrivateFilesGet1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		Process: string;
+	};
+};
+
+export type PrivateFilesGet1Response = IRemoteStreamContent;
+
+export type PrivateFilesGet1Error = RemoteServiceErrorResponse;
+
+export type PrivateFilesGet2Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		Path: string;
+	};
+};
+
+export type PrivateFilesGet2Response = IRemoteStreamContent;
+
+export type PrivateFilesGet2Error = RemoteServiceErrorResponse;
+
+export type PrivateFilesGet3Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		Path: string;
+		Process: string;
+	};
+};
+
+export type PrivateFilesGet3Response = IRemoteStreamContent;
+
+export type PrivateFilesGet3Error = RemoteServiceErrorResponse;
+
+export type PrivateFilesGet4Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		TenantId: string;
+	};
+};
+
+export type PrivateFilesGet4Response = IRemoteStreamContent;
+
+export type PrivateFilesGet4Error = RemoteServiceErrorResponse;
+
+export type PrivateFilesGet5Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		Process: string;
+		TenantId: string;
+	};
+};
+
+export type PrivateFilesGet5Response = IRemoteStreamContent;
+
+export type PrivateFilesGet5Error = RemoteServiceErrorResponse;
+
+export type PrivateFilesGet6Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		Path: string;
+		TenantId: string;
+	};
+};
+
+export type PrivateFilesGet6Response = IRemoteStreamContent;
+
+export type PrivateFilesGet6Error = RemoteServiceErrorResponse;
+
+export type PrivateFilesGet7Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		Path: string;
+		Process: string;
+		TenantId: string;
+	};
+};
+
+export type PrivateFilesGet7Response = IRemoteStreamContent;
+
+export type PrivateFilesGet7Error = RemoteServiceErrorResponse;
+
+export type PrivateFilesGetShareListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type PrivateFilesGetShareListResponse = WrapResultOfListResultDtoOfMyFileShareDto;
+
+export type PrivateFilesGetShareListError = WrapResult;
+
+export type PrivateFilesShareData = {
+	body?: FileShareInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type PrivateFilesShareResponse = WrapResultOfFileShareDto;
+
+export type PrivateFilesShareError = WrapResult;
+
+export type ProfileGetSessionsData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		ClientId?: string;
+		Device?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type ProfileGetSessionsResponse = WrapResultOfPagedResultDtoOfIdentitySessionDto_1;
+
+export type ProfileGetSessionsError = WrapResult;
+
+export type ProfileRevokeSessionData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		sessionId: string;
+	};
+};
+
+export type ProfileRevokeSessionResponse = WrapResult;
+
+export type ProfileRevokeSessionError = WrapResult;
+
+export type ProfileGetTwoFactorEnabledData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ProfileGetTwoFactorEnabledResponse = WrapResultOfTwoFactorEnabledDto;
+
+export type ProfileGetTwoFactorEnabledError = WrapResult;
+
+export type ProfileChangeTwoFactorEnabledData = {
+	body?: TwoFactorEnabledDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ProfileChangeTwoFactorEnabledResponse = WrapResult;
+
+export type ProfileChangeTwoFactorEnabledError = WrapResult;
+
+export type ProfileSendChangePhoneNumberCodeData = {
+	body?: SendChangePhoneNumberCodeInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ProfileSendChangePhoneNumberCodeResponse = WrapResult;
+
+export type ProfileSendChangePhoneNumberCodeError = WrapResult;
+
+export type ProfileChangePhoneNumberData = {
+	body?: ChangePhoneNumberInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ProfileChangePhoneNumberResponse = WrapResult;
+
+export type ProfileChangePhoneNumberError = WrapResult;
+
+export type ProfileSendEmailConfirmLinkData = {
+	body?: SendEmailConfirmCodeDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ProfileSendEmailConfirmLinkResponse = WrapResult;
+
+export type ProfileSendEmailConfirmLinkError = WrapResult;
+
+export type ProfileConfirmEmailData = {
+	body?: ConfirmEmailInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ProfileConfirmEmailResponse = WrapResult;
+
+export type ProfileConfirmEmailError = WrapResult;
+
+export type ProfileGetAuthenticatorData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ProfileGetAuthenticatorResponse = WrapResultOfAuthenticatorDto;
+
+export type ProfileGetAuthenticatorError = WrapResult;
+
+export type ProfileVerifyAuthenticatorCodeData = {
+	body?: VerifyAuthenticatorCodeInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ProfileVerifyAuthenticatorCodeResponse = WrapResultOfAuthenticatorRecoveryCodeDto;
+
+export type ProfileVerifyAuthenticatorCodeError = WrapResult;
+
+export type ProfileResetAuthenticatorData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ProfileResetAuthenticatorResponse = WrapResult;
+
+export type ProfileResetAuthenticatorError = WrapResult;
+
+export type ProfileGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ProfileGetResponse = WrapResultOfProfileDto;
+
+export type ProfileGetError = WrapResult;
+
+export type ProfileUpdateData = {
+	body?: UpdateProfileDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ProfileUpdateResponse = WrapResultOfProfileDto;
+
+export type ProfileUpdateError = WrapResult;
+
+export type ProfileChangePasswordData = {
+	body?: ChangePasswordInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ProfileChangePasswordResponse = WrapResult;
+
+export type ProfileChangePasswordError = WrapResult;
+
+export type PublicFilesUploadData = {
+	body?: {
+		Path?: string;
+		Object?: string;
+		Overwrite?: boolean;
+		File: IRemoteStreamContent;
+	};
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type PublicFilesUploadResponse = WrapResultOfOssObjectDto;
+
+export type PublicFilesUploadError = WrapResult;
+
+export type PublicFilesDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		Name: string;
+		Path?: string;
+		Process?: string;
+		TenantId?: string;
+	};
+};
+
+export type PublicFilesDeleteResponse = WrapResult;
+
+export type PublicFilesDeleteError = WrapResult;
+
+export type PublicFilesUpload1Data = {
+	body?: {
+		Bucket?: string;
+		Path?: string;
+		ChunkSize: number;
+		CurrentChunkSize: number;
+		ChunkNumber: number;
+		TotalChunks: number;
+		File?: IRemoteStreamContent;
+		TotalSize: number;
+		FileName: string;
+	};
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type PublicFilesUpload1Response = WrapResult;
+
+export type PublicFilesUpload1Error = WrapResult;
+
+export type PublicFilesGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		MaxResultCount?: number;
+		Path?: string;
+	};
+};
+
+export type PublicFilesGetListResponse = WrapResultOfListResultDtoOfOssObjectDto;
+
+export type PublicFilesGetListError = WrapResult;
+
+export type PublicFilesGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+	};
+};
+
+export type PublicFilesGetResponse = IRemoteStreamContent;
+
+export type PublicFilesGetError = RemoteServiceErrorResponse;
+
+export type PublicFilesGet1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		Process: string;
+	};
+};
+
+export type PublicFilesGet1Response = IRemoteStreamContent;
+
+export type PublicFilesGet1Error = RemoteServiceErrorResponse;
+
+export type PublicFilesGet2Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		Path: string;
+	};
+};
+
+export type PublicFilesGet2Response = IRemoteStreamContent;
+
+export type PublicFilesGet2Error = RemoteServiceErrorResponse;
+
+export type PublicFilesGet3Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		Path: string;
+		Process: string;
+	};
+};
+
+export type PublicFilesGet3Response = IRemoteStreamContent;
+
+export type PublicFilesGet3Error = RemoteServiceErrorResponse;
+
+export type PublicFilesGet4Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		TenantId: string;
+	};
+};
+
+export type PublicFilesGet4Response = IRemoteStreamContent;
+
+export type PublicFilesGet4Error = RemoteServiceErrorResponse;
+
+export type PublicFilesGet5Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		Process: string;
+		TenantId: string;
+	};
+};
+
+export type PublicFilesGet5Response = IRemoteStreamContent;
+
+export type PublicFilesGet5Error = RemoteServiceErrorResponse;
+
+export type PublicFilesGet6Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		Path: string;
+		TenantId: string;
+	};
+};
+
+export type PublicFilesGet6Response = IRemoteStreamContent;
+
+export type PublicFilesGet6Error = RemoteServiceErrorResponse;
+
+export type PublicFilesGet7Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+		Path: string;
+		Process: string;
+		TenantId: string;
+	};
+};
+
+export type PublicFilesGet7Response = IRemoteStreamContent;
+
+export type PublicFilesGet7Error = RemoteServiceErrorResponse;
+
+export type PublishHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: ApiVersion;
+		workflowDefinitionId: string;
+	};
+};
+
+export type PublishHandleResponse = WorkflowDefinition;
+
+export type PublishHandleError = ProblemDetails;
+
+export type ResourceGetByNameData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type ResourceGetByNameResponse = WrapResultOfResourceDto;
+
+export type ResourceGetByNameError = WrapResult;
+
+export type ResourceDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type ResourceDeleteResponse = WrapResult;
+
+export type ResourceDeleteError = WrapResult;
+
+export type ResourceUpdateData = {
+	body?: ResourceUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type ResourceUpdateResponse = WrapResultOfResourceDto;
+
+export type ResourceUpdateError = WrapResult;
+
+export type ResourceCreateData = {
+	body?: ResourceCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ResourceCreateResponse = WrapResultOfResourceDto;
+
+export type ResourceCreateError = WrapResult;
+
+export type ResourceGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+	};
+};
+
+export type ResourceGetListResponse = WrapResultOfListResultDtoOfResourceDto;
+
+export type ResourceGetListError = WrapResult;
+
+export type RestoreHandleData = {
+	body?: {
+		ContentType?: string;
+		ContentDisposition?: string;
+		Headers?: {
+			[key: string]: Array<string>;
+		};
+		Length?: number;
+		Name?: string;
+		FileName?: string;
+	};
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+};
+
+export type RestoreHandleResponse = unknown;
+
+export type RestoreHandleError = ProblemDetails;
+
+export type RetractHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: ApiVersion;
+		workflowDefinitionId: string;
+	};
+};
+
+export type RetractHandleResponse = WorkflowDefinition;
+
+export type RetractHandleError = ProblemDetails;
+
+export type RetryHandleData = {
+	body?: RetryWorkflowRequest;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+		id: string;
+	};
+};
+
+export type RetryHandleResponse = unknown;
+
+export type RetryHandleError = ProblemDetails;
+
+export type RevertHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: ApiVersion;
+		definitionId: string;
+		version: number;
+	};
+};
+
+export type RevertHandleResponse = WorkflowDefinition;
+
+export type RevertHandleError = ProblemDetails;
+
+export type RoleGetOrganizationUnitsData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type RoleGetOrganizationUnitsResponse = WrapResultOfListResultDtoOfOrganizationUnitDto;
+
+export type RoleGetOrganizationUnitsError = WrapResult;
+
+export type RoleSetOrganizationUnitsData = {
+	body?: IdentityRoleAddOrRemoveOrganizationUnitDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type RoleSetOrganizationUnitsResponse = WrapResult;
+
+export type RoleSetOrganizationUnitsError = WrapResult;
+
+export type RoleRemoveOrganizationUnitsData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+		ouId: string;
+	};
+};
+
+export type RoleRemoveOrganizationUnitsResponse = WrapResult;
+
+export type RoleRemoveOrganizationUnitsError = WrapResult;
+
+export type RoleGetClaimsData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type RoleGetClaimsResponse = WrapResultOfListResultDtoOfIdentityClaimDto;
+
+export type RoleGetClaimsError = WrapResult;
+
+export type RoleAddClaimData = {
+	body?: IdentityRoleClaimCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type RoleAddClaimResponse = WrapResult;
+
+export type RoleAddClaimError = WrapResult;
+
+export type RoleUpdateClaimData = {
+	body?: IdentityRoleClaimUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type RoleUpdateClaimResponse = WrapResult;
+
+export type RoleUpdateClaimError = WrapResult;
+
+export type RoleDeleteClaimData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+	query: {
+		ClaimType: string;
+		ClaimValue: string;
+	};
+};
+
+export type RoleDeleteClaimResponse = WrapResult;
+
+export type RoleDeleteClaimError = WrapResult;
+
+export type RoleGetAllListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type RoleGetAllListResponse = WrapResultOfListResultDtoOfIdentityRoleDto;
+
+export type RoleGetAllListError = WrapResult;
+
+export type RoleGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		ExtraProperties?: {
+			[key: string]: unknown;
+		};
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type RoleGetListResponse = WrapResultOfPagedResultDtoOfIdentityRoleDto;
+
+export type RoleGetListError = WrapResult;
+
+export type RoleCreateData = {
+	body?: IdentityRoleCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type RoleCreateResponse = WrapResultOfIdentityRoleDto;
+
+export type RoleCreateError = WrapResult;
+
+export type RoleGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type RoleGetResponse = WrapResultOfIdentityRoleDto;
+
+export type RoleGetError = WrapResult;
+
+export type RoleUpdateData = {
+	body?: IdentityRoleUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type RoleUpdateResponse = WrapResultOfIdentityRoleDto;
+
+export type RoleUpdateError = WrapResult;
+
+export type RoleDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type RoleDeleteResponse = WrapResult;
+
+export type RoleDeleteError = WrapResult;
+
+export type RoleEntityRuleGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		EntityTypeId: string;
+		Operation: DataAccessOperation;
+		RoleName: string;
+	};
+};
+
+export type RoleEntityRuleGetResponse = WrapResultOfRoleEntityRuleDto;
+
+export type RoleEntityRuleGetError = WrapResult;
+
+export type RoleEntityRuleCreateData = {
+	body?: RoleEntityRuleCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type RoleEntityRuleCreateResponse = WrapResultOfRoleEntityRuleDto;
+
+export type RoleEntityRuleCreateError = WrapResult;
+
+export type RoleEntityRuleUpdateData = {
+	body?: RoleEntityRuleUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type RoleEntityRuleUpdateResponse = WrapResultOfRoleEntityRuleDto;
+
+export type RoleEntityRuleUpdateError = WrapResult;
+
+export type SecurityLogDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type SecurityLogDeleteResponse = WrapResult;
+
+export type SecurityLogDeleteError = WrapResult;
+
+export type SecurityLogGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type SecurityLogGetResponse = WrapResultOfSecurityLogDto;
+
+export type SecurityLogGetError = WrapResult;
+
+export type SecurityLogGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		ActionName?: string;
+		ApplicationName?: string;
+		ClientId?: string;
+		CorrelationId?: string;
+		EndTime?: string;
+		Identity?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+		StartTime?: string;
+		UserId?: string;
+		UserName?: string;
+	};
+};
+
+export type SecurityLogGetListResponse = WrapResultOfPagedResultDtoOfSecurityLogDto;
+
+export type SecurityLogGetListError = WrapResult;
+
+export type SettingSetCurrentTenantData = {
+	body?: UpdateSettingsDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type SettingSetCurrentTenantResponse = WrapResult;
+
+export type SettingSetCurrentTenantError = WrapResult;
+
+export type SettingSetGlobalData = {
+	body?: UpdateSettingsDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type SettingSetGlobalResponse = WrapResult;
+
+export type SettingSetGlobalError = WrapResult;
+
+export type SettingGetAllForGlobalData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type SettingGetAllForGlobalResponse = WrapResultOfSettingGroupResult;
+
+export type SettingGetAllForGlobalError = WrapResult;
+
+export type SettingGetAllForCurrentTenantData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type SettingGetAllForCurrentTenantResponse = WrapResultOfSettingGroupResult;
+
+export type SettingGetAllForCurrentTenantError = WrapResult;
+
+export type SettingSendTestEmailData = {
+	body?: SendTestEmailInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type SettingSendTestEmailResponse = WrapResult;
+
+export type SettingSendTestEmailError = WrapResult;
+
+export type SettingDefinitionCreateData = {
+	body?: SettingDefinitionCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type SettingDefinitionCreateResponse = WrapResultOfSettingDefinitionDto;
+
+export type SettingDefinitionCreateError = WrapResult;
+
+export type SettingDefinitionGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		ProviderName?: string;
+	};
+};
+
+export type SettingDefinitionGetListResponse = WrapResultOfListResultDtoOfSettingDefinitionDto;
+
+export type SettingDefinitionGetListError = WrapResult;
+
+export type SettingDefinitionDeleteOrRestoreData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type SettingDefinitionDeleteOrRestoreResponse = WrapResult;
+
+export type SettingDefinitionDeleteOrRestoreError = WrapResult;
+
+export type SettingDefinitionGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type SettingDefinitionGetResponse = WrapResultOfSettingDefinitionDto;
+
+export type SettingDefinitionGetError = WrapResult;
+
+export type SettingDefinitionUpdateData = {
+	body?: SettingDefinitionUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type SettingDefinitionUpdateResponse = WrapResultOfSettingDefinitionDto;
+
+export type SettingDefinitionUpdateError = WrapResult;
+
+export type StaticFilesUploadData = {
+	body?: {
+		Bucket?: string;
+		Path?: string;
+		FileName?: string;
+		Overwrite?: boolean;
+		File?: IRemoteStreamContent;
+		ExpirationTime?: TimeSpan;
+	};
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type StaticFilesUploadResponse = WrapResultOfOssObjectDto;
+
+export type StaticFilesUploadError = WrapResult;
+
+export type StaticFilesGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Bucket: string;
+		Name: string;
+	};
+};
+
+export type StaticFilesGetResponse = IRemoteStreamContent;
+
+export type StaticFilesGetError = RemoteServiceErrorResponse;
+
+export type StaticFilesGet1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Bucket: string;
+		Name: string;
+		Process: string;
+	};
+};
+
+export type StaticFilesGet1Response = IRemoteStreamContent;
+
+export type StaticFilesGet1Error = RemoteServiceErrorResponse;
+
+export type StaticFilesGet2Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Bucket: string;
+		Name: string;
+		Path: string;
+	};
+};
+
+export type StaticFilesGet2Response = IRemoteStreamContent;
+
+export type StaticFilesGet2Error = RemoteServiceErrorResponse;
+
+export type StaticFilesGet3Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Bucket: string;
+		Name: string;
+		Path: string;
+		Process: string;
+	};
+};
+
+export type StaticFilesGet3Response = IRemoteStreamContent;
+
+export type StaticFilesGet3Error = RemoteServiceErrorResponse;
+
+export type StaticFilesGet4Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Bucket: string;
+		Name: string;
+		TenantId: string;
+	};
+};
+
+export type StaticFilesGet4Response = IRemoteStreamContent;
+
+export type StaticFilesGet4Error = RemoteServiceErrorResponse;
+
+export type StaticFilesGet5Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Bucket: string;
+		Name: string;
+		Process: string;
+		TenantId: string;
+	};
+};
+
+export type StaticFilesGet5Response = IRemoteStreamContent;
+
+export type StaticFilesGet5Error = RemoteServiceErrorResponse;
+
+export type StaticFilesGet6Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Bucket: string;
+		Name: string;
+		Path: string;
+		TenantId: string;
+	};
+};
+
+export type StaticFilesGet6Response = IRemoteStreamContent;
+
+export type StaticFilesGet6Error = RemoteServiceErrorResponse;
+
+export type StaticFilesGet7Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Bucket: string;
+		Name: string;
+		Path: string;
+		Process: string;
+		TenantId: string;
+	};
+};
+
+export type StaticFilesGet7Response = IRemoteStreamContent;
+
+export type StaticFilesGet7Error = RemoteServiceErrorResponse;
+
+export type TenantGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type TenantGetResponse = WrapResultOfTenantDto;
+
+export type TenantGetError = WrapResult;
+
+export type TenantUpdateData = {
+	body?: TenantUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type TenantUpdateResponse = WrapResultOfTenantDto;
+
+export type TenantUpdateError = WrapResult;
+
+export type TenantDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type TenantDeleteResponse = WrapResult;
+
+export type TenantDeleteError = WrapResult;
+
+export type TenantGet1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type TenantGet1Response = WrapResultOfTenantDto;
+
+export type TenantGet1Error = WrapResult;
+
+export type TenantGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type TenantGetListResponse = WrapResultOfPagedResultDtoOfTenantDto;
+
+export type TenantGetListError = WrapResult;
+
+export type TenantCreateData = {
+	body?: TenantCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type TenantCreateResponse = WrapResultOfTenantDto;
+
+export type TenantCreateError = WrapResult;
+
+export type TenantGetConnectionStringData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+		name: string;
+	};
+};
+
+export type TenantGetConnectionStringResponse = WrapResultOfTenantConnectionStringDto;
+
+export type TenantGetConnectionStringError = WrapResult;
+
+export type TenantDeleteConnectionStringData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+		name: string;
+	};
+};
+
+export type TenantDeleteConnectionStringResponse = WrapResult;
+
+export type TenantDeleteConnectionStringError = WrapResult;
+
+export type TenantGetConnectionString1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type TenantGetConnectionString1Response = WrapResultOfListResultDtoOfTenantConnectionStringDto;
+
+export type TenantGetConnectionString1Error = WrapResult;
+
+export type TenantSetConnectionStringData = {
+	body?: TenantConnectionStringCreateOrUpdate;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type TenantSetConnectionStringResponse = WrapResultOfTenantConnectionStringDto;
+
+export type TenantSetConnectionStringError = WrapResult;
+
+export type TextSetTextData = {
+	body?: SetTextInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type TextSetTextResponse = WrapResult;
+
+export type TextSetTextError = WrapResult;
+
+export type TextRestoreToDefaultData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		CultureName: string;
+		Key: string;
+		ResourceName: string;
+	};
+};
+
+export type TextRestoreToDefaultResponse = WrapResult;
+
+export type TextRestoreToDefaultError = WrapResult;
+
+export type TextGetByCultureKeyData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		CultureName: string;
+		Key: string;
+		ResourceName: string;
+	};
+};
+
+export type TextGetByCultureKeyResponse = WrapResultOfTextDto;
+
+export type TextGetByCultureKeyError = WrapResult;
+
+export type TextGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		CultureName: string;
+		Filter?: string;
+		OnlyNull?: boolean;
+		ResourceName?: string;
+		TargetCultureName: string;
+	};
+};
+
+export type TextGetListResponse = WrapResultOfListResultDtoOfTextDifferenceDto;
+
+export type TextGetListError = WrapResult;
+
+export type TextTemplateContentGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Name: string;
+	};
+	query?: {
+		Culture?: string;
+	};
+};
+
+export type TextTemplateContentGetResponse = WrapResultOfTextTemplateContentDto;
+
+export type TextTemplateContentGetError = WrapResult;
+
+export type TextTemplateContentGet1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		Culture: string;
+		Name: string;
+	};
+};
+
+export type TextTemplateContentGet1Response = WrapResultOfTextTemplateContentDto;
+
+export type TextTemplateContentGet1Error = WrapResult;
+
+export type TextTemplateContentRestoreToDefaultData = {
+	body?: TextTemplateRestoreInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type TextTemplateContentRestoreToDefaultResponse = WrapResult;
+
+export type TextTemplateContentRestoreToDefaultError = WrapResult;
+
+export type TextTemplateContentUpdateData = {
+	body?: TextTemplateContentUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type TextTemplateContentUpdateResponse = WrapResultOfTextTemplateContentDto;
+
+export type TextTemplateContentUpdateError = WrapResult;
+
+export type TextTemplateDefinitionCreateData = {
+	body?: TextTemplateDefinitionCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type TextTemplateDefinitionCreateResponse = WrapResultOfTextTemplateDefinitionDto;
+
+export type TextTemplateDefinitionCreateError = WrapResult;
+
+export type TextTemplateDefinitionGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		IsLayout?: boolean;
+		IsStatic?: boolean;
+	};
+};
+
+export type TextTemplateDefinitionGetListResponse = WrapResultOfListResultDtoOfTextTemplateDefinitionDto;
+
+export type TextTemplateDefinitionGetListError = WrapResult;
+
+export type TextTemplateDefinitionDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type TextTemplateDefinitionDeleteResponse = WrapResult;
+
+export type TextTemplateDefinitionDeleteError = WrapResult;
+
+export type TextTemplateDefinitionGetByNameData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type TextTemplateDefinitionGetByNameResponse = WrapResultOfTextTemplateDefinitionDto;
+
+export type TextTemplateDefinitionGetByNameError = WrapResult;
+
+export type TextTemplateDefinitionUpdateData = {
+	body?: TextTemplateDefinitionUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type TextTemplateDefinitionUpdateResponse = WrapResultOfTextTemplateDefinitionDto;
+
+export type TextTemplateDefinitionUpdateError = WrapResult;
+
+export type ThemeSettingGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ThemeSettingGetResponse = WrapResultOfThemeSettingDto;
+
+export type ThemeSettingGetError = WrapResult;
+
+export type ThemeSettingChangeData = {
+	body?: ThemeSettingDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type ThemeSettingChangeResponse = WrapResult;
+
+export type ThemeSettingChangeError = WrapResult;
+
+export type TriggerHandleData = {
+	body?: TriggerWorkflowsRequestModel;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		apiVersion: string;
+	};
+};
+
+export type TriggerHandleResponse = TriggerWorkflowsRequestModel;
+
+export type TriggerHandleError = ProblemDetails;
+
+export type TriggerEndpointHandleData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		token: string;
+	};
+};
+
+export type TriggerEndpointHandleResponse = unknown;
+
+export type TriggerEndpointHandleError = unknown;
+
+export type TriggerEndpointHandle1Data = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		token: string;
+	};
+};
+
+export type TriggerEndpointHandle1Response = unknown;
+
+export type TriggerEndpointHandle1Error = unknown;
+
+export type UserGetOrganizationUnitsData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type UserGetOrganizationUnitsResponse = WrapResultOfListResultDtoOfOrganizationUnitDto;
+
+export type UserGetOrganizationUnitsError = WrapResult;
+
+export type UserSetOrganizationUnitsData = {
+	body?: IdentityUserOrganizationUnitUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type UserSetOrganizationUnitsResponse = WrapResult;
+
+export type UserSetOrganizationUnitsError = WrapResult;
+
+export type UserRemoveOrganizationUnitsData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+		ouId: string;
+	};
+};
+
+export type UserRemoveOrganizationUnitsResponse = WrapResult;
+
+export type UserRemoveOrganizationUnitsError = WrapResult;
+
+export type UserGetClaimsData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type UserGetClaimsResponse = WrapResultOfListResultDtoOfIdentityClaimDto;
+
+export type UserGetClaimsError = WrapResult;
+
+export type UserAddClaimData = {
+	body?: IdentityUserClaimCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type UserAddClaimResponse = WrapResult;
+
+export type UserAddClaimError = WrapResult;
+
+export type UserUpdateClaimData = {
+	body?: IdentityUserClaimUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type UserUpdateClaimResponse = WrapResult;
+
+export type UserUpdateClaimError = WrapResult;
+
+export type UserDeleteClaimData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+	query: {
+		ClaimType: string;
+		ClaimValue?: string;
+	};
+};
+
+export type UserDeleteClaimResponse = WrapResult;
+
+export type UserDeleteClaimError = WrapResult;
+
+export type UserChangePasswordData = {
+	body?: IdentityUserSetPasswordInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		id?: string;
+	};
+};
+
+export type UserChangePasswordResponse = WrapResult;
+
+export type UserChangePasswordError = WrapResult;
+
+export type UserChangeTwoFactorEnabledData = {
+	body?: TwoFactorEnabledDto_1;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		id?: string;
+	};
+};
+
+export type UserChangeTwoFactorEnabledResponse = WrapResult;
+
+export type UserChangeTwoFactorEnabledError = WrapResult;
+
+export type UserLockData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+		seconds: number;
+	};
+};
+
+export type UserLockResponse = WrapResult;
+
+export type UserLockError = WrapResult;
+
+export type UserUnLockData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type UserUnLockResponse = WrapResult;
+
+export type UserUnLockError = WrapResult;
+
+export type UserGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type UserGetResponse = WrapResultOfIdentityUserDto;
+
+export type UserGetError = WrapResult;
+
+export type UserUpdateData = {
+	body?: IdentityUserUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type UserUpdateResponse = WrapResultOfIdentityUserDto;
+
+export type UserUpdateError = WrapResult;
+
+export type UserDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type UserDeleteResponse = WrapResult;
+
+export type UserDeleteError = WrapResult;
+
+export type UserGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		ExtraProperties?: {
+			[key: string]: unknown;
+		};
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type UserGetListResponse = WrapResultOfPagedResultDtoOfIdentityUserDto;
+
+export type UserGetListError = WrapResult;
+
+export type UserCreateData = {
+	body?: IdentityUserCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type UserCreateResponse = WrapResultOfIdentityUserDto;
+
+export type UserCreateError = WrapResult;
+
+export type UserGetRolesData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type UserGetRolesResponse = WrapResultOfListResultDtoOfIdentityRoleDto;
+
+export type UserGetRolesError = WrapResult;
+
+export type UserUpdateRolesData = {
+	body?: IdentityUserUpdateRolesDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type UserUpdateRolesResponse = WrapResult;
+
+export type UserUpdateRolesError = WrapResult;
+
+export type UserGetAssignableRolesData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type UserGetAssignableRolesResponse = WrapResultOfListResultDtoOfIdentityRoleDto;
+
+export type UserGetAssignableRolesError = WrapResult;
+
+export type UserFindByUsernameData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		userName: string;
+	};
+};
+
+export type UserFindByUsernameResponse = WrapResultOfIdentityUserDto;
+
+export type UserFindByUsernameError = WrapResult;
+
+export type UserFindByEmailData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		email: string;
+	};
+};
+
+export type UserFindByEmailResponse = WrapResultOfIdentityUserDto;
+
+export type UserFindByEmailError = WrapResult;
+
+export type UserFavoriteMenuCreateData = {
+	body?: UserFavoriteMenuCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		userId: string;
+	};
+};
+
+export type UserFavoriteMenuCreateResponse = WrapResultOfUserFavoriteMenuDto;
+
+export type UserFavoriteMenuCreateError = WrapResult;
+
+export type UserFavoriteMenuGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		userId: string;
+	};
+	query?: {
+		Framework?: string;
+	};
+};
+
+export type UserFavoriteMenuGetListResponse = WrapResultOfListResultDtoOfUserFavoriteMenuDto;
+
+export type UserFavoriteMenuGetListError = WrapResult;
+
+export type UserFavoriteMenuUpdateData = {
+	body?: UserFavoriteMenuUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		userId: string;
+	};
+};
+
+export type UserFavoriteMenuUpdateResponse = WrapResultOfUserFavoriteMenuDto;
+
+export type UserFavoriteMenuUpdateError = WrapResult;
+
+export type UserFavoriteMenuCreateMyFavoriteMenuData = {
+	body?: UserFavoriteMenuCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type UserFavoriteMenuCreateMyFavoriteMenuResponse = WrapResultOfUserFavoriteMenuDto;
+
+export type UserFavoriteMenuCreateMyFavoriteMenuError = WrapResult;
+
+export type UserFavoriteMenuGetMyFavoriteMenuListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Framework?: string;
+	};
+};
+
+export type UserFavoriteMenuGetMyFavoriteMenuListResponse = WrapResultOfListResultDtoOfUserFavoriteMenuDto;
+
+export type UserFavoriteMenuGetMyFavoriteMenuListError = WrapResult;
+
+export type UserFavoriteMenuUpdateMyFavoriteMenuData = {
+	body?: UserFavoriteMenuUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type UserFavoriteMenuUpdateMyFavoriteMenuResponse = WrapResultOfUserFavoriteMenuDto;
+
+export type UserFavoriteMenuUpdateMyFavoriteMenuError = WrapResult;
+
+export type UserFavoriteMenuDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		MenuId: string;
+		userId: string;
+	};
+};
+
+export type UserFavoriteMenuDeleteResponse = WrapResult;
+
+export type UserFavoriteMenuDeleteError = WrapResult;
+
+export type UserFavoriteMenuDeleteMyFavoriteMenuData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		MenuId: string;
+	};
+};
+
+export type UserFavoriteMenuDeleteMyFavoriteMenuResponse = WrapResult;
+
+export type UserFavoriteMenuDeleteMyFavoriteMenuError = WrapResult;
+
+export type UserGroupApplyJoinGroupData = {
+	body?: UserJoinGroupDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type UserGroupApplyJoinGroupResponse = WrapResult;
+
+export type UserGroupApplyJoinGroupError = WrapResult;
+
+export type UserGroupGetGroupUsersData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query: {
+		Filter?: string;
+		GroupId: number;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type UserGroupGetGroupUsersResponse = WrapResultOfPagedResultDtoOfGroupUserCard;
+
+export type UserGroupGetGroupUsersError = WrapResult;
+
+export type UserGroupGetMyGroupsData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type UserGroupGetMyGroupsResponse = WrapResultOfListResultDtoOfGroup;
+
+export type UserGroupGetMyGroupsError = WrapResult;
+
+export type UserGroupGroupAcceptUserData = {
+	body?: GroupAcceptUserDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type UserGroupGroupAcceptUserResponse = WrapResult;
+
+export type UserGroupGroupAcceptUserError = WrapResult;
+
+export type UserGroupGroupRemoveUserData = {
+	body?: GroupRemoveUserDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type UserGroupGroupRemoveUserResponse = WrapResult;
+
+export type UserGroupGroupRemoveUserError = WrapResult;
+
+export type UserLookupFindByIdData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type UserLookupFindByIdResponse = WrapResultOfUserData;
+
+export type UserLookupFindByIdError = WrapResult;
+
+export type UserLookupFindByUserNameData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		userName: string;
+	};
+};
+
+export type UserLookupFindByUserNameResponse = WrapResultOfUserData;
+
+export type UserLookupFindByUserNameError = WrapResult;
+
+export type UserLookupSearchData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		ExtraProperties?: {
+			[key: string]: unknown;
+		};
+		Filter?: string;
+		MaxResultCount?: number;
+		SkipCount?: number;
+		Sorting?: string;
+	};
+};
+
+export type UserLookupSearchResponse = WrapResultOfListResultDtoOfUserData;
+
+export type UserLookupSearchError = WrapResult;
+
+export type UserLookupGetCountData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+	};
+};
+
+export type UserLookupGetCountResponse = WrapResultOfInt64;
+
+export type UserLookupGetCountError = WrapResult;
+
+export type UserSettingGetAllForCurrentUserData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type UserSettingGetAllForCurrentUserResponse = WrapResultOfSettingGroupResult;
+
+export type UserSettingGetAllForCurrentUserError = WrapResult;
+
+export type UserSettingSetCurrentUserData = {
+	body?: UpdateSettingsDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type UserSettingSetCurrentUserResponse = WrapResult;
+
+export type UserSettingSetCurrentUserError = WrapResult;
+
+export type WebhookDefinitionCreateData = {
+	body?: WebhookDefinitionCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type WebhookDefinitionCreateResponse = WrapResultOfWebhookDefinitionDto;
+
+export type WebhookDefinitionCreateError = WrapResult;
+
+export type WebhookDefinitionGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+		GroupName?: string;
+	};
+};
+
+export type WebhookDefinitionGetListResponse = WrapResultOfListResultDtoOfWebhookDefinitionDto;
+
+export type WebhookDefinitionGetListError = WrapResult;
+
+export type WebhookDefinitionDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type WebhookDefinitionDeleteResponse = WrapResult;
+
+export type WebhookDefinitionDeleteError = WrapResult;
+
+export type WebhookDefinitionGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type WebhookDefinitionGetResponse = WrapResultOfWebhookDefinitionDto;
+
+export type WebhookDefinitionGetError = WrapResult;
+
+export type WebhookDefinitionUpdateData = {
+	body?: WebhookDefinitionUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type WebhookDefinitionUpdateResponse = WrapResultOfWebhookDefinitionDto;
+
+export type WebhookDefinitionUpdateError = WrapResult;
+
+export type WebhookGroupDefinitionCreateData = {
+	body?: WebhookGroupDefinitionCreateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type WebhookGroupDefinitionCreateResponse = WrapResultOfWebhookGroupDefinitionDto;
+
+export type WebhookGroupDefinitionCreateError = WrapResult;
+
+export type WebhookGroupDefinitionGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		Filter?: string;
+	};
+};
+
+export type WebhookGroupDefinitionGetListResponse = WrapResultOfListResultDtoOfWebhookGroupDefinitionDto;
+
+export type WebhookGroupDefinitionGetListError = WrapResult;
+
+export type WebhookGroupDefinitionDeleteAysncData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type WebhookGroupDefinitionDeleteAysncResponse = WrapResult;
+
+export type WebhookGroupDefinitionDeleteAysncError = WrapResult;
+
+export type WebhookGroupDefinitionGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type WebhookGroupDefinitionGetResponse = WrapResultOfWebhookGroupDefinitionDto;
+
+export type WebhookGroupDefinitionGetError = WrapResult;
+
+export type WebhookGroupDefinitionUpdateData = {
+	body?: WebhookGroupDefinitionUpdateDto;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		name: string;
+	};
+};
+
+export type WebhookGroupDefinitionUpdateResponse = WrapResultOfWebhookGroupDefinitionDto;
+
+export type WebhookGroupDefinitionUpdateError = WrapResult;
+
+export type WebhookPublishPublishData = {
+	body?: WebhookPublishInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type WebhookPublishPublishResponse = WrapResult;
+
+export type WebhookPublishPublishError = WrapResult;
+
+export type WebhookSendRecordGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type WebhookSendRecordGetResponse = WrapResultOfWebhookSendRecordDto;
+
+export type WebhookSendRecordGetError = WrapResult;
+
+export type WebhookSendRecordDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type WebhookSendRecordDeleteResponse = WrapResult;
+
+export type WebhookSendRecordDeleteError = WrapResult;
+
+export type WebhookSendRecordDeleteManyData = {
+	body?: WebhookSendRecordDeleteManyInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type WebhookSendRecordDeleteManyResponse = WrapResult;
+
+export type WebhookSendRecordDeleteManyError = WrapResult;
+
+export type WebhookSendRecordGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		BeginCreationTime?: string;
+		EndCreationTime?: string;
+		Filter?: string;
+		MaxResultCount?: number;
+		ResponseStatusCode?: HttpStatusCode;
+		SkipCount?: number;
+		Sorting?: string;
+		State?: boolean;
+		SubscriptionId?: string;
+		TenantId?: string;
+		WebhookEventId?: string;
+	};
+};
+
+export type WebhookSendRecordGetListResponse = WrapResultOfPagedResultDtoOfWebhookSendRecordDto;
+
+export type WebhookSendRecordGetListError = WrapResult;
+
+export type WebhookSendRecordResendData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type WebhookSendRecordResendResponse = WrapResult;
+
+export type WebhookSendRecordResendError = WrapResult;
+
+export type WebhookSendRecordResendManyData = {
+	body?: WebhookSendRecordResendManyInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type WebhookSendRecordResendManyResponse = WrapResult;
+
+export type WebhookSendRecordResendManyError = WrapResult;
+
+export type WebhookSubscriptionCreateData = {
+	body?: WebhookSubscriptionCreateInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type WebhookSubscriptionCreateResponse = WrapResultOfWebhookSubscriptionDto;
+
+export type WebhookSubscriptionCreateError = WrapResult;
+
+export type WebhookSubscriptionGetListData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	query?: {
+		BeginCreationTime?: string;
+		EndCreationTime?: string;
+		Filter?: string;
+		IsActive?: boolean;
+		MaxResultCount?: number;
+		Secret?: string;
+		SkipCount?: number;
+		Sorting?: string;
+		TenantId?: string;
+		Webhooks?: string;
+		WebhookUri?: string;
+	};
+};
+
+export type WebhookSubscriptionGetListResponse = WrapResultOfPagedResultDtoOfWebhookSubscriptionDto;
+
+export type WebhookSubscriptionGetListError = WrapResult;
+
+export type WebhookSubscriptionDeleteData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type WebhookSubscriptionDeleteResponse = WrapResult;
+
+export type WebhookSubscriptionDeleteError = WrapResult;
+
+export type WebhookSubscriptionGetData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type WebhookSubscriptionGetResponse = WrapResultOfWebhookSubscriptionDto;
+
+export type WebhookSubscriptionGetError = WrapResult;
+
+export type WebhookSubscriptionUpdateData = {
+	body?: WebhookSubscriptionUpdateInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+	path: {
+		id: string;
+	};
+};
+
+export type WebhookSubscriptionUpdateResponse = WrapResultOfWebhookSubscriptionDto;
+
+export type WebhookSubscriptionUpdateError = WrapResult;
+
+export type WebhookSubscriptionDeleteManyData = {
+	body?: WebhookSubscriptionDeleteManyInput;
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type WebhookSubscriptionDeleteManyResponse = WrapResult;
+
+export type WebhookSubscriptionDeleteManyError = WrapResult;
+
+export type WebhookSubscriptionGetAllAvailableWebhooksData = {
+	headers?: {
+		/**
+		 * Tenant Id in http header
+		 */
+		__tenant?: unknown;
+	};
+};
+
+export type WebhookSubscriptionGetAllAvailableWebhooksResponse = WrapResultOfListResultDtoOfWebhookAvailableGroupDto;
+
+export type WebhookSubscriptionGetAllAvailableWebhooksError = WrapResult;
diff --git a/apps/react-admin/src/api/management/auditing/audit-logs.ts b/apps/react-admin/src/api/management/auditing/audit-logs.ts
new file mode 100644
index 000000000..2a7c528c3
--- /dev/null
+++ b/apps/react-admin/src/api/management/auditing/audit-logs.ts
@@ -0,0 +1,30 @@
+import type { PagedResultDto } from "#/abp-core";
+
+import type { AuditLogDto, AuditLogGetListInput } from "#/management/auditing";
+import requestClient from "../../request";
+
+/**
+ * 获取审计日志
+ * @param id 日志id
+ */
+export function getApi(id: string): Promise<AuditLogDto> {
+	return requestClient.get<AuditLogDto>(`/api/auditing/audit-log/${id}`);
+}
+
+/**
+ * 获取审计日志分页列表
+ * @param input 参数
+ */
+export function getPagedListApi(input: AuditLogGetListInput): Promise<PagedResultDto<AuditLogDto>> {
+	return requestClient.get<PagedResultDto<AuditLogDto>>("/api/auditing/audit-log", {
+		params: input,
+	});
+}
+
+/**
+ * 删除审计日志
+ * @param id 日志id
+ */
+export function deleteApi(id: string): Promise<void> {
+	return requestClient.delete(`/api/auditing/audit-log/${id}`);
+}
diff --git a/apps/react-admin/src/api/management/auditing/entity-changes.ts b/apps/react-admin/src/api/management/auditing/entity-changes.ts
new file mode 100644
index 000000000..5187a6023
--- /dev/null
+++ b/apps/react-admin/src/api/management/auditing/entity-changes.ts
@@ -0,0 +1,16 @@
+import type { ListResultDto } from "#/abp-core";
+
+import type { EntityChangeGetWithUsernameInput, EntityChangeWithUsernameDto } from "#/management/auditing";
+import requestClient from "../../request";
+
+/**
+ * 获取包含用户名称的实体变更列表
+ * @param input 参数
+ */
+export function getListWithUsernameApi(
+	input: EntityChangeGetWithUsernameInput,
+): Promise<ListResultDto<EntityChangeWithUsernameDto>> {
+	return requestClient.get<ListResultDto<EntityChangeWithUsernameDto>>("/api/auditing/entity-changes/with-username", {
+		params: input,
+	});
+}
diff --git a/apps/react-admin/src/api/management/auditing/index.ts b/apps/react-admin/src/api/management/auditing/index.ts
new file mode 100644
index 000000000..ea927ea71
--- /dev/null
+++ b/apps/react-admin/src/api/management/auditing/index.ts
@@ -0,0 +1,2 @@
+export * as auditLogsApi from "./audit-logs";
+export * as entityChangesApi from "./entity-changes";
diff --git a/apps/react-admin/src/api/management/identity/claim-types.ts b/apps/react-admin/src/api/management/identity/claim-types.ts
new file mode 100644
index 000000000..7d4e1d9d9
--- /dev/null
+++ b/apps/react-admin/src/api/management/identity/claim-types.ts
@@ -0,0 +1,64 @@
+import type { ListResultDto, PagedResultDto } from "#/abp-core";
+
+import type {
+	GetIdentityClaimTypePagedListInput,
+	IdentityClaimTypeCreateDto,
+	IdentityClaimTypeDto,
+	IdentityClaimTypeUpdateDto,
+} from "#/management/identity";
+import requestClient from "../../request";
+
+/**
+ * 新增用户声明
+ * @param input 参数
+ * @returns 用户声明实体数据传输对象
+ */
+export function createApi(input: IdentityClaimTypeCreateDto): Promise<IdentityClaimTypeDto> {
+	return requestClient.post<IdentityClaimTypeDto>("/api/identity/claim-types", input);
+}
+
+/**
+ * 删除用户声明
+ * @param id 用户声明id
+ */
+export function deleteApi(id: string): Promise<void> {
+	return requestClient.delete(`/api/identity/claim-types/${id}`);
+}
+
+/**
+ * 查询用户声明
+ * @param id 用户声明id
+ * @returns 用户声明实体数据传输对象
+ */
+export function getApi(id: string): Promise<IdentityClaimTypeDto> {
+	return requestClient.get<IdentityClaimTypeDto>(`/api/identity/claim-types/${id}`);
+}
+
+/**
+ * 更新用户声明
+ * @param id 用户声明id
+ * @returns 用户声明实体数据传输对象
+ */
+export function updateApi(id: string, input: IdentityClaimTypeUpdateDto): Promise<IdentityClaimTypeDto> {
+	return requestClient.put<IdentityClaimTypeDto>(`/api/identity/claim-types/${id}`, input);
+}
+
+/**
+ * 查询用户声明分页列表
+ * @param input 过滤参数
+ * @returns 用户声明实体数据传输对象分页列表
+ */
+export function getPagedListApi(
+	input?: GetIdentityClaimTypePagedListInput,
+): Promise<PagedResultDto<IdentityClaimTypeDto>> {
+	return requestClient.get<PagedResultDto<IdentityClaimTypeDto>>("/api/identity/claim-types", {
+		params: input,
+	});
+}
+
+/**
+ * 获取可用的声明类型列表
+ */
+export function getAssignableClaimsApi(): Promise<ListResultDto<IdentityClaimTypeDto>> {
+	return requestClient.get<ListResultDto<IdentityClaimTypeDto>>("/api/identity/claim-types/actived-list");
+}
diff --git a/apps/react-admin/src/api/management/identity/organization-units.ts b/apps/react-admin/src/api/management/identity/organization-units.ts
new file mode 100644
index 000000000..853724019
--- /dev/null
+++ b/apps/react-admin/src/api/management/identity/organization-units.ts
@@ -0,0 +1,173 @@
+import type { ListResultDto, PagedResultDto } from "#/abp-core";
+
+import type { IdentityRoleDto, IdentityUserDto } from "#/management/identity";
+import type {
+	GetIdentityRolesInput,
+	GetIdentityUsersInput,
+	GetOrganizationUnitPagedListInput,
+	GetUnaddedRoleListInput,
+	GetUnaddedUserListInput,
+	OrganizationUnitAddRoleDto,
+	OrganizationUnitAddUserDto,
+	OrganizationUnitCreateDto,
+	OrganizationUnitDto,
+	OrganizationUnitGetChildrenDto,
+	OrganizationUnitUpdateDto,
+} from "#/management/identity/organization-units";
+
+import requestClient from "../../request";
+
+/**
+ * 新增组织机构
+ * @param input 参数
+ * @returns 组织机构实体数据传输对象
+ */
+export function createApi(input: OrganizationUnitCreateDto): Promise<OrganizationUnitDto> {
+	return requestClient.post<OrganizationUnitDto>("/api/identity/organization-units", input);
+}
+
+/**
+ * 删除组织机构
+ * @param id 组织机构id
+ */
+export function deleteApi(id: string): Promise<void> {
+	return requestClient.delete(`/api/identity/organization-units/${id}`);
+}
+
+/**
+ * 查询组织机构
+ * @param id 组织机构id
+ * @returns 组织机构实体数据传输对象
+ */
+export function getApi(id: string): Promise<OrganizationUnitDto> {
+	return requestClient.get<OrganizationUnitDto>(`/api/identity/organization-units/${id}`);
+}
+
+/**
+ * 更新组织机构
+ * @param id 组织机构id
+ * @returns 组织机构实体数据传输对象
+ */
+
+export function updateApi(id: string, input: OrganizationUnitUpdateDto): Promise<OrganizationUnitDto> {
+	return requestClient.put<OrganizationUnitDto>(`/api/identity/organization-units/${id}`, input);
+}
+
+/**
+ * 查询组织机构分页列表
+ * @param input 过滤参数
+ * @returns 组织机构实体数据传输对象分页列表
+ */
+export function getPagedListApi(
+	input?: GetOrganizationUnitPagedListInput,
+): Promise<PagedResultDto<OrganizationUnitDto>> {
+	return requestClient.get<PagedResultDto<OrganizationUnitDto>>("/api/identity/organization-units", {
+		params: input,
+	});
+}
+
+/**
+ * 查询根组织机构列表
+ * @returns 组织机构实体数据传输对象列表
+ */
+export function getRootListApi(): Promise<ListResultDto<OrganizationUnitDto>> {
+	return requestClient.get<ListResultDto<OrganizationUnitDto>>("/api/identity/organization-units/root-node");
+}
+
+/**
+ * 查询组织机构列表
+ * @returns 组织机构实体数据传输对象列表
+ */
+export function getAllListApi(): Promise<ListResultDto<OrganizationUnitDto>> {
+	return requestClient.get<ListResultDto<OrganizationUnitDto>>("/api/identity/organization-units/all");
+}
+
+/**
+ * 查询下级组织机构列表
+ * @param input 查询参数
+ * @returns 组织机构实体数据传输对象列表
+ */
+export function getChildrenApi(input: OrganizationUnitGetChildrenDto): Promise<ListResultDto<OrganizationUnitDto>> {
+	return requestClient.get<ListResultDto<OrganizationUnitDto>>("/api/identity/organization-units/find-children", {
+		params: input,
+	});
+}
+
+/**
+ * 查询组织机构用户列表
+ * @param id 组织机构id
+ * @param input 查询过滤参数
+ * @returns 用户实体数据传输对象分页列表
+ */
+export function getUserListApi(id: string, input?: GetIdentityUsersInput): Promise<PagedResultDto<IdentityUserDto>> {
+	return requestClient.get<PagedResultDto<IdentityUserDto>>(`/api/identity/organization-units/${id}/users`, {
+		params: input,
+	});
+}
+
+/**
+ * 查询未加入组织机构的用户列表
+ * @param input 查询过滤参数
+ * @returns 用户实体数据传输对象分页列表
+ */
+export function getUnaddedUserListApi(input: GetUnaddedUserListInput): Promise<PagedResultDto<IdentityUserDto>> {
+	return requestClient.get<PagedResultDto<IdentityUserDto>>(
+		`/api/identity/organization-units/${input.id}/unadded-users`,
+		{
+			params: input,
+		},
+	);
+}
+
+/**
+ * 用户添加到组织机构
+ * @param id 组织机构id
+ * @param input 用户id列表
+ */
+export function addMembers(id: string, input: OrganizationUnitAddUserDto): Promise<void> {
+	return requestClient.post(`/api/identity/organization-units/${id}/users`, input);
+}
+
+/**
+ * 查询组织机构角色列表
+ * @param id 组织机构id
+ * @param input 查询过滤参数
+ * @returns 角色实体数据传输对象分页列表
+ */
+export function getRoleListApi(id: string, input?: GetIdentityRolesInput): Promise<PagedResultDto<IdentityRoleDto>> {
+	return requestClient.get<PagedResultDto<IdentityRoleDto>>(`/api/identity/organization-units/${id}/roles`, {
+		params: input,
+	});
+}
+
+/**
+ * 查询未加入组织机构的角色列表
+ * @param input 查询过滤参数
+ * @returns 角色实体数据传输对象分页列表
+ */
+export function getUnaddedRoleListApi(input: GetUnaddedRoleListInput): Promise<PagedResultDto<IdentityRoleDto>> {
+	return requestClient.get<PagedResultDto<IdentityRoleDto>>(
+		`/api/identity/organization-units/${input.id}/unadded-roles`,
+		{
+			params: input,
+		},
+	);
+}
+
+/**
+ * 角色添加到组织机构
+ * @param id 组织机构id
+ * @param input 角色id列表
+ */
+export function addRoles(id: string, input: OrganizationUnitAddRoleDto): Promise<void> {
+	return requestClient.post(`/api/identity/organization-units/${id}/roles`, input);
+}
+
+/**
+ * 移动组织机构
+ * @param id 组织机构id
+ * @param parentId 父级组织机构id
+ */
+export function moveTo(id: string, parentId?: string): Promise<void> {
+	return requestClient.put(`api/identity/organization-units/${id}/move`, { parentId });
+}
diff --git a/apps/react-admin/src/api/management/identity/role.ts b/apps/react-admin/src/api/management/identity/role.ts
new file mode 100644
index 000000000..98929cefe
--- /dev/null
+++ b/apps/react-admin/src/api/management/identity/role.ts
@@ -0,0 +1,109 @@
+import type { PagedResultDto, ListResultDto } from "#/abp-core";
+
+import type {
+	IdentityClaimCreateDto,
+	IdentityClaimDeleteDto,
+	IdentityClaimDto,
+	IdentityClaimUpdateDto,
+} from "#/management/identity/claims";
+
+import type {
+	GetRolePagedListInput,
+	IdentityRoleCreateDto,
+	IdentityRoleDto,
+	IdentityRoleUpdateDto,
+} from "#/management/identity";
+
+import requestClient from "../../request";
+
+/**
+ * 新增角色
+ * @param input 参数
+ * @returns 角色实体数据传输对象
+ */
+export function createApi(input: IdentityRoleCreateDto): Promise<IdentityRoleDto> {
+	return requestClient.post<IdentityRoleDto>("/api/identity/roles", input);
+}
+
+/**
+ * 删除角色
+ * @param id 角色id
+ */
+export function deleteApi(id: string): Promise<void> {
+	return requestClient.delete(`/api/identity/roles/${id}`);
+}
+
+/**
+ * 查询角色
+ * @param id 角色id
+ * @returns 角色实体数据传输对象
+ */
+export function getApi(id: string): Promise<IdentityRoleDto> {
+	return requestClient.get<IdentityRoleDto>(`/api/identity/roles/${id}`);
+}
+
+/**
+ * 更新角色
+ * @param id 角色id
+ * @returns 角色实体数据传输对象
+ */
+export function updateApi(id: string, input: IdentityRoleUpdateDto): Promise<IdentityRoleDto> {
+	return requestClient.put<IdentityRoleDto>(`/api/identity/roles/${id}`, input);
+}
+
+/**
+ * 查询角色分页列表
+ * @param input 过滤参数
+ * @returns 角色实体数据传输对象分页列表
+ */
+export function getPagedListApi(input?: GetRolePagedListInput): Promise<PagedResultDto<IdentityRoleDto>> {
+	return requestClient.get<PagedResultDto<IdentityRoleDto>>("/api/identity/roles", {
+		params: input,
+	});
+}
+
+/**
+ * 从组织机构中移除角色
+ * @param id 角色id
+ * @param ouId 组织机构id
+ */
+export function removeOrganizationUnitApi(id: string, ouId: string): Promise<void> {
+	return requestClient.delete(`/api/identity/roles/${id}/organization-units/${ouId}`);
+}
+
+/**
+ * 获取角色声明列表
+ * @param id 角色id
+ */
+export function getClaimsApi(id: string): Promise<ListResultDto<IdentityClaimDto>> {
+	return requestClient.get<ListResultDto<IdentityClaimDto>>(`/api/identity/roles/${id}/claims`);
+}
+
+/**
+ * 删除角色声明
+ * @param id 角色id
+ * @param input 角色声明dto
+ */
+export function deleteClaimApi(id: string, input: IdentityClaimDeleteDto): Promise<void> {
+	return requestClient.delete(`/api/identity/roles/${id}/claims`, {
+		params: input,
+	});
+}
+
+/**
+ * 创建角色声明
+ * @param id 角色id
+ * @param input 角色声明dto
+ */
+export function createClaimApi(id: string, input: IdentityClaimCreateDto): Promise<void> {
+	return requestClient.post(`/api/identity/roles/${id}/claims`, input);
+}
+
+/**
+ * 更新角色声明
+ * @param id 角色id
+ * @param input 用户角色dto
+ */
+export function updateClaimApi(id: string, input: IdentityClaimUpdateDto): Promise<void> {
+	return requestClient.put(`/api/identity/roles/${id}/claims`, input);
+}
diff --git a/apps/react-admin/src/api/management/identity/security-logs.ts b/apps/react-admin/src/api/management/identity/security-logs.ts
new file mode 100644
index 000000000..dba450801
--- /dev/null
+++ b/apps/react-admin/src/api/management/identity/security-logs.ts
@@ -0,0 +1,31 @@
+import type { GetSecurityLogPagedRequest, SecurityLogDto } from "#/management/identity";
+import type { PagedResultDto } from "#/abp-core";
+import requestClient from "../../request";
+
+/**
+ * 删除安全日志
+ * @param id 安全日志id
+ */
+export function deleteApi(id: string): Promise<void> {
+	return requestClient.delete(`/api/auditing/security-log/${id}`);
+}
+
+/**
+ * 查询安全日志
+ * @param id 安全日志id
+ * @returns 安全日志实体数据传输对象
+ */
+export function getApi(id: string): Promise<SecurityLogDto> {
+	return requestClient.get<SecurityLogDto>(`/api/auditing/security-log/${id}`);
+}
+
+/**
+ * 查询安全日志分页列表
+ * @param input 过滤参数
+ * @returns 安全日志实体数据传输对象分页列表
+ */
+export function getPagedListApi(input?: GetSecurityLogPagedRequest): Promise<PagedResultDto<SecurityLogDto>> {
+	return requestClient.get<PagedResultDto<SecurityLogDto>>("/api/auditing/security-log", {
+		params: input,
+	});
+}
diff --git a/apps/react-admin/src/api/management/identity/user-lookup.ts b/apps/react-admin/src/api/management/identity/user-lookup.ts
new file mode 100644
index 000000000..d2f253d28
--- /dev/null
+++ b/apps/react-admin/src/api/management/identity/user-lookup.ts
@@ -0,0 +1,44 @@
+import type { ListResultDto } from "#/abp-core";
+
+import type { IdentityUserDto, UserLookupCountInput, UserLookupSearchInput } from "#/management/identity/user";
+
+import requestClient from "../../request";
+
+/**
+ * 通过id查询用户
+ * @param id 用户id
+ * @returns 用户实体数据传输对象
+ */
+export function findByIdApi(id: string): Promise<IdentityUserDto> {
+	return requestClient.get<IdentityUserDto>(`/api/identity/users/lookup/${id}`);
+}
+
+/**
+ * 通过用户名查询用户
+ * @param userName 用户名
+ * @returns 用户实体数据传输对象
+ */
+export function findByUserNameApi(userName: string): Promise<IdentityUserDto> {
+	return requestClient.get<IdentityUserDto>(`/api/identity/users/lookup/by-username/${userName}`);
+}
+
+/**
+ * 搜索用户列表
+ * @param input 搜索过滤条件
+ * @returns 用户实体数据传输对象列表
+ */
+export function searchApi(input?: UserLookupSearchInput): Promise<ListResultDto<IdentityUserDto>> {
+	return requestClient.get<ListResultDto<IdentityUserDto>>("/api/identity/users/lookup/search", {
+		params: input,
+	});
+}
+
+/**
+ * 搜索用户数量
+ * @param input 搜索过滤条件
+ */
+export function countApi(input?: UserLookupCountInput): Promise<number> {
+	return requestClient.get<number>("/api/identity/users/lookup/count", {
+		params: input,
+	});
+}
diff --git a/apps/react-admin/src/api/management/identity/user-sessions.ts b/apps/react-admin/src/api/management/identity/user-sessions.ts
new file mode 100644
index 000000000..d926b6e16
--- /dev/null
+++ b/apps/react-admin/src/api/management/identity/user-sessions.ts
@@ -0,0 +1,22 @@
+import type { PagedResultDto } from "#/abp-core";
+import type { GetUserSessionsInput, IdentitySessionDto } from "#/management/identity/sessions";
+import requestClient from "@/api/request";
+
+/**
+ * 查询会话列表
+ * @param { GetUserSessionsInput } input 查询参数
+ * @returns { Promise<PagedResultDto<IdentitySessionDto>> } 用户会话列表
+ */
+export function getSessionsApi(input?: GetUserSessionsInput): Promise<PagedResultDto<IdentitySessionDto>> {
+	return requestClient.get<PagedResultDto<IdentitySessionDto>>("/api/identity/sessions", {
+		params: input,
+	});
+}
+/**
+ * 撤销会话
+ * @param { string } sessionId 会话id
+ * @returns { Promise<void> }
+ */
+export function revokeSessionApi(sessionId: string): Promise<void> {
+	return requestClient.delete(`/api/identity/sessions/${sessionId}/revoke`);
+}
diff --git a/apps/react-admin/src/api/management/identity/users.ts b/apps/react-admin/src/api/management/identity/users.ts
new file mode 100644
index 000000000..0a1a3174b
--- /dev/null
+++ b/apps/react-admin/src/api/management/identity/users.ts
@@ -0,0 +1,155 @@
+import type { ListResultDto, PagedResultDto } from "#/abp-core";
+import type { IdentityRoleDto, OrganizationUnitDto } from "#/management/identity";
+import type {
+	IdentityClaimCreateDto,
+	IdentityClaimDeleteDto,
+	IdentityClaimDto,
+	IdentityClaimUpdateDto,
+} from "#/management/identity/claims";
+import type {
+	ChangeUserPasswordInput,
+	GetUserPagedListInput,
+	IdentityUserCreateDto,
+	IdentityUserDto,
+	IdentityUserUpdateDto,
+} from "#/management/identity";
+import requestClient from "../../request";
+
+/**
+ * 新增用户
+ * @param input 参数
+ * @returns 用户实体数据传输对象
+ */
+export function createApi(input: IdentityUserCreateDto): Promise<IdentityUserDto> {
+	return requestClient.post<IdentityUserDto>("/api/identity/users", input);
+}
+
+/**
+ * 删除用户
+ * @param id 用户id
+ */
+export function deleteApi(id: string): Promise<void> {
+	return requestClient.delete(`/api/identity/users/${id}`);
+}
+
+/**
+ * 查询用户
+ * @param id 用户id
+ * @returns 用户实体数据传输对象
+ */
+export function getApi(id: string): Promise<IdentityUserDto> {
+	return requestClient.get<IdentityUserDto>(`/api/identity/users/${id}`);
+}
+
+/**
+ * 更新用户
+ * @param id 用户id
+ * @returns 用户实体数据传输对象
+ */
+export function updateApi(id: string, input: IdentityUserUpdateDto): Promise<IdentityUserDto> {
+	return requestClient.put<IdentityUserDto>(`/api/identity/users/${id}`, input);
+}
+
+/**
+ * 查询用户分页列表
+ * @param input 过滤参数
+ * @returns 用户实体数据传输对象分页列表
+ */
+export function getPagedListApi(input?: GetUserPagedListInput): Promise<PagedResultDto<IdentityUserDto>> {
+	return requestClient.get<PagedResultDto<IdentityUserDto>>("/api/identity/users", {
+		params: input,
+	});
+}
+
+/**
+ * 从组织机构中移除用户
+ * @param id 用户id
+ * @param ouId 组织机构id
+ */
+export function removeOrganizationUnitApi(id: string, ouId: string): Promise<void> {
+	return requestClient.delete(`/api/identity/users/${id}/organization-units/${ouId}`);
+}
+
+/**
+ * 获取用户组织机构列表
+ * @param id 用户id
+ */
+export function getOrganizationUnitsApi(id: string): Promise<ListResultDto<OrganizationUnitDto>> {
+	return requestClient.get<ListResultDto<OrganizationUnitDto>>(`/api/identity/users/${id}/organization-units`);
+}
+
+/**
+ * 锁定用户
+ * @param id 用户id
+ * @param seconds 锁定时长(秒)
+ */
+export function lockApi(id: string, seconds: number): Promise<void> {
+	return requestClient.put(`/api/identity/users/${id}/lock/${seconds}`);
+}
+
+/**
+ * 解锁用户
+ * @param id 用户id
+ */
+export function unLockApi(id: string): Promise<void> {
+	return requestClient.put(`/api/identity/users/${id}/unlock`);
+}
+
+/**
+ * 更改用户密码
+ * @param id 用户id
+ * @param input 密码变更dto
+ */
+export function changePasswordApi(id: string, input: ChangeUserPasswordInput): Promise<void> {
+	return requestClient.put(`/api/identity/users/change-password?id=${id}`, input);
+}
+
+/**
+ * 获取可用的角色列表
+ */
+export function getAssignableRolesApi(): Promise<ListResultDto<IdentityRoleDto>> {
+	return requestClient.get<ListResultDto<IdentityRoleDto>>("/api/identity/users/assignable-roles");
+}
+
+/**
+ * 获取用户角色列表
+ * @param id 用户id
+ */
+export function getRolesApi(id: string): Promise<ListResultDto<IdentityRoleDto>> {
+	return requestClient.get<ListResultDto<IdentityRoleDto>>(`/api/identity/users/${id}/roles`);
+}
+
+/**
+ * 获取用户声明列表
+ * @param id 用户id
+ */
+export function getClaimsApi(id: string): Promise<ListResultDto<IdentityClaimDto>> {
+	return requestClient.get<ListResultDto<IdentityClaimDto>>(`/api/identity/users/${id}/claims`);
+}
+
+/**
+ * 删除用户声明
+ * @param id 用户id
+ * @param input 用户声明dto
+ */
+export function deleteClaimApi(id: string, input: IdentityClaimDeleteDto): Promise<void> {
+	return requestClient.delete(`/api/identity/users/${id}/claims`, { params: input });
+}
+
+/**
+ * 创建用户声明
+ * @param id 用户id
+ * @param input 用户声明dto
+ */
+export function createClaimApi(id: string, input: IdentityClaimCreateDto): Promise<void> {
+	return requestClient.post(`/api/identity/users/${id}/claims`, input);
+}
+
+/**
+ * 更新用户声明
+ * @param id 用户id
+ * @param input 用户声明dto
+ */
+export function updateClaimApi(id: string, input: IdentityClaimUpdateDto): Promise<void> {
+	return requestClient.put(`/api/identity/users/${id}/claims`, input);
+}
diff --git a/apps/react-admin/src/api/management/notifications/my-notifications.ts b/apps/react-admin/src/api/management/notifications/my-notifications.ts
new file mode 100644
index 000000000..70bb6a834
--- /dev/null
+++ b/apps/react-admin/src/api/management/notifications/my-notifications.ts
@@ -0,0 +1,35 @@
+import type { PagedResultDto } from "#/abp-core";
+
+import type {
+	GetMyNotifilerPagedListInput,
+	MarkReadStateInput,
+	UserNotificationDto,
+} from "#/notifications/my-notifilers";
+
+import requestClient from "@/api/request";
+/**
+ * 获取我的通知列表
+ * @param {GetMyNotifilerPagedListInput} input 参数
+ * @returns {Promise<PagedResultDto<UserNotificationDto>>} 通知分页列表
+ */
+export function getMyNotifilersApi(input?: GetMyNotifilerPagedListInput): Promise<PagedResultDto<UserNotificationDto>> {
+	return requestClient.get<PagedResultDto<UserNotificationDto>>("/api/notifications/my-notifilers", {
+		params: input,
+	});
+}
+/**
+ * 删除我的通知
+ * @param {string} id 通知id
+ * @returns {void}
+ */
+export function deleteMyNotifilerApi(id: string): Promise<void> {
+	return requestClient.delete(`/api/notifications/my-notifilers/${id}`);
+}
+/**
+ * 设置通知已读状态
+ * @param {MarkReadStateInput} input 参数
+ * @returns {void}
+ */
+export function markReadStateApi(input: MarkReadStateInput): Promise<void> {
+	return requestClient.put("/api/notifications/my-notifilers/mark-read-state", input);
+}
diff --git a/apps/react-admin/src/api/management/notifications/notifications.ts b/apps/react-admin/src/api/management/notifications/notifications.ts
new file mode 100644
index 000000000..a0121fe4f
--- /dev/null
+++ b/apps/react-admin/src/api/management/notifications/notifications.ts
@@ -0,0 +1,39 @@
+import type { ListResultDto } from "#/abp-core";
+
+import type { NotificationGroupDto, NotificationTemplateDto } from "#/notifications/definitions";
+import type { NotificationSendInput, NotificationTemplateSendInput } from "#/notifications/notifications";
+
+import requestClient from "@/api/request";
+
+/**
+ * 获取可用通知列表
+ * @returns {Promise<ListResultDto<NotificationGroupDto>>} 可用通知列表
+ */
+export function getAssignableNotifiersApi(): Promise<ListResultDto<NotificationGroupDto>> {
+	return requestClient.get<ListResultDto<NotificationGroupDto>>("/api/notifications/assignables");
+}
+/**
+ * 获取可用通知模板列表
+ * @returns {Promise<ListResultDto<NotificationTemplateDto>>} 可用通知模板列表
+ */
+export function getAssignableTemplatesApi(): Promise<ListResultDto<NotificationTemplateDto>> {
+	return requestClient.get<ListResultDto<NotificationTemplateDto>>("/api/notifications/assignable-templates", {
+		method: "GET",
+	});
+}
+/**
+ * 发送通知
+ * @param input 参数
+ * @returns {Promise<void>}
+ */
+export function sendNotiferApi(input: NotificationSendInput): Promise<void> {
+	return requestClient.post("/api/notifications/send", input);
+}
+/**
+ * 发送模板通知
+ * @param input 参数
+ * @returns {Promise<void>}
+ */
+export function sendTemplateNotiferApi(input: NotificationTemplateSendInput): Promise<void> {
+	return requestClient.post("/api/notifications/send/template", input);
+}
diff --git a/apps/react-admin/src/api/management/permissions/definitions.ts b/apps/react-admin/src/api/management/permissions/definitions.ts
new file mode 100644
index 000000000..4abfbf3c6
--- /dev/null
+++ b/apps/react-admin/src/api/management/permissions/definitions.ts
@@ -0,0 +1,57 @@
+import type { ListResultDto } from "#/abp-core";
+
+import type {
+	PermissionDefinitionCreateDto,
+	PermissionDefinitionDto,
+	PermissionDefinitionGetListInput,
+	PermissionDefinitionUpdateDto,
+} from "#/management/permissions/definitions";
+
+import requestClient from "../../request";
+
+/**
+ * 删除权限定义
+ * @param name 权限名称
+ */
+export function deleteApi(name: string): Promise<void> {
+	return requestClient.delete(`/api/permission-management/definitions/${name}`);
+}
+
+/**
+ * 查询权限定义
+ * @param name 权限名称
+ * @returns 权限定义数据传输对象
+ */
+export function getApi(name: string): Promise<PermissionDefinitionDto> {
+	return requestClient.get<PermissionDefinitionDto>(`/api/permission-management/definitions/${name}`);
+}
+
+/**
+ * 查询权限定义列表
+ * @param input 权限过滤条件
+ * @returns 权限定义数据传输对象列表
+ */
+export function getListApi(input?: PermissionDefinitionGetListInput): Promise<ListResultDto<PermissionDefinitionDto>> {
+	return requestClient.get<ListResultDto<PermissionDefinitionDto>>("/api/permission-management/definitions", {
+		params: input,
+	});
+}
+
+/**
+ * 创建权限定义
+ * @param input 权限定义参数
+ * @returns 权限定义数据传输对象
+ */
+export function createApi(input: PermissionDefinitionCreateDto): Promise<PermissionDefinitionDto> {
+	return requestClient.post<PermissionDefinitionDto>("/api/permission-management/definitions", input);
+}
+
+/**
+ * 更新权限定义
+ * @param name 权限名称
+ * @param input 权限定义参数
+ * @returns 权限定义数据传输对象
+ */
+export function updateApi(name: string, input: PermissionDefinitionUpdateDto): Promise<PermissionDefinitionDto> {
+	return requestClient.put<PermissionDefinitionDto>(`/api/permission-management/definitions/${name}`, input);
+}
diff --git a/apps/react-admin/src/api/management/permissions/groups.ts b/apps/react-admin/src/api/management/permissions/groups.ts
new file mode 100644
index 000000000..fe062fff3
--- /dev/null
+++ b/apps/react-admin/src/api/management/permissions/groups.ts
@@ -0,0 +1,68 @@
+import type { ListResultDto } from "#/abp-core";
+
+import type {
+	PermissionGroupDefinitionCreateDto,
+	PermissionGroupDefinitionDto,
+	PermissionGroupDefinitionGetListInput,
+	PermissionGroupDefinitionUpdateDto,
+} from "#/management/permissions/groups";
+
+import requestClient from "../../request";
+
+/**
+ * 删除权限定义
+ * @param name 权限名称
+ */
+export function deleteApi(name: string): Promise<void> {
+	return requestClient.delete(`/api/permission-management/definitions/groups/${name}`);
+}
+
+/**
+ * 查询权限定义
+ * @param name 权限名称
+ * @returns 权限定义数据传输对象
+ */
+export function getApi(name: string): Promise<PermissionGroupDefinitionDto> {
+	return requestClient.get<PermissionGroupDefinitionDto>(`/api/permission-management/definitions/groups/${name}`);
+}
+
+/**
+ * 查询权限定义列表
+ * @param input 权限过滤条件
+ * @returns 权限定义数据传输对象列表
+ */
+export function getListApi(
+	input?: PermissionGroupDefinitionGetListInput,
+): Promise<ListResultDto<PermissionGroupDefinitionDto>> {
+	return requestClient.get<ListResultDto<PermissionGroupDefinitionDto>>(
+		"/api/permission-management/definitions/groups",
+		{
+			params: input,
+		},
+	);
+}
+
+/**
+ * 创建权限定义
+ * @param input 权限定义参数
+ * @returns 权限定义数据传输对象
+ */
+export function createApi(input: PermissionGroupDefinitionCreateDto): Promise<PermissionGroupDefinitionDto> {
+	return requestClient.post<PermissionGroupDefinitionDto>("/api/permission-management/definitions/groups", input);
+}
+
+/**
+ * 更新权限定义
+ * @param name 权限名称
+ * @param input 权限定义参数
+ * @returns 权限定义数据传输对象
+ */
+export function updateApi(
+	name: string,
+	input: PermissionGroupDefinitionUpdateDto,
+): Promise<PermissionGroupDefinitionDto> {
+	return requestClient.put<PermissionGroupDefinitionDto>(
+		`/api/permission-management/definitions/groups/${name}`,
+		input,
+	);
+}
diff --git a/apps/react-admin/src/api/management/permissions/permissions.ts b/apps/react-admin/src/api/management/permissions/permissions.ts
new file mode 100644
index 000000000..5425039b6
--- /dev/null
+++ b/apps/react-admin/src/api/management/permissions/permissions.ts
@@ -0,0 +1,25 @@
+import type { PermissionProvider, PermissionResultDto, PermissionsUpdateDto } from "#/management/permissions";
+
+import requestClient from "../../request";
+
+/**
+ * 查询权限
+ * @param provider
+ * @returns 权限实体数据传输对象
+ */
+export function getApi(provider: PermissionProvider): Promise<PermissionResultDto> {
+	return requestClient.get<PermissionResultDto>("/api/permission-management/permissions", {
+		params: provider,
+	});
+}
+
+/**
+ * 更新权限
+ * @param provider
+ * @param input
+ */
+export function updateApi(provider: PermissionProvider, input: PermissionsUpdateDto): Promise<void> {
+	return requestClient.put("/api/permission-management/permissions", input, {
+		params: provider,
+	});
+}
diff --git a/apps/react-admin/src/api/management/settings/definitions.ts b/apps/react-admin/src/api/management/settings/definitions.ts
new file mode 100644
index 000000000..f48262c6a
--- /dev/null
+++ b/apps/react-admin/src/api/management/settings/definitions.ts
@@ -0,0 +1,56 @@
+import type { ListResultDto } from "#/abp-core";
+
+import type {
+	SettingDefinitionCreateDto,
+	SettingDefinitionDto,
+	SettingDefinitionGetListInput,
+	SettingDefinitionUpdateDto,
+} from "#/management/settings/definitions";
+import requestClient from "@/api/request";
+
+/**
+ * 删除设置定义
+ * @param name 设置名称
+ */
+export function deleteApi(name: string): Promise<void> {
+	return requestClient.delete(`/api/setting-management/settings/definitions/${name}`);
+}
+
+/**
+ * 查询设置定义
+ * @param name 设置名称
+ * @returns 设置定义数据传输对象
+ */
+export function getApi(name: string): Promise<SettingDefinitionDto> {
+	return requestClient.get<SettingDefinitionDto>(`/api/setting-management/settings/definitions/${name}`);
+}
+
+/**
+ * 查询设置定义列表
+ * @param input 设置过滤条件
+ * @returns 设置定义数据传输对象列表
+ */
+export function getListApi(input?: SettingDefinitionGetListInput): Promise<ListResultDto<SettingDefinitionDto>> {
+	return requestClient.get<ListResultDto<SettingDefinitionDto>>("/api/setting-management/settings/definitions", {
+		params: input,
+	});
+}
+
+/**
+ * 创建设置定义
+ * @param input 设置定义参数
+ * @returns 设置定义数据传输对象
+ */
+export function createApi(input: SettingDefinitionCreateDto): Promise<SettingDefinitionDto> {
+	return requestClient.post<SettingDefinitionDto>("/api/setting-management/settings/definitions", input);
+}
+
+/**
+ * 更新设置定义
+ * @param name 设置名称
+ * @param input 设置定义参数
+ * @returns 设置定义数据传输对象
+ */
+export function updateApi(name: string, input: SettingDefinitionUpdateDto): Promise<SettingDefinitionDto> {
+	return requestClient.put<SettingDefinitionDto>(`/api/setting-management/settings/definitions/${name}`, input);
+}
diff --git a/apps/react-admin/src/api/management/settings/settings.ts b/apps/react-admin/src/api/management/settings/settings.ts
new file mode 100644
index 000000000..399b70314
--- /dev/null
+++ b/apps/react-admin/src/api/management/settings/settings.ts
@@ -0,0 +1,62 @@
+import type { ListResultDto } from "#/abp-core";
+
+import type { SettingGroup, SettingsUpdateInput } from "#/management/settings";
+
+import requestClient from "@/api/request";
+
+/**
+ * 获取全局设置
+ * @returns 设置数据传输对象列表
+ */
+export function getGlobalSettingsApi(): Promise<ListResultDto<SettingGroup>> {
+	return requestClient.get<ListResultDto<SettingGroup>>("/api/setting-management/settings/by-global");
+}
+
+/**
+ * 设置全局设置
+ * @returns 设置数据传输对象列表
+ */
+export function setGlobalSettingsApi(input: SettingsUpdateInput): Promise<void> {
+	return requestClient.put("/api/setting-management/settings/change-global", input);
+}
+
+/**
+ * 获取租户设置
+ * @returns 设置数据传输对象列表
+ */
+export function getTenantSettingsApi(): Promise<ListResultDto<SettingGroup>> {
+	return requestClient.get<ListResultDto<SettingGroup>>("api/setting-management/settings/by-current-tenant");
+}
+
+/**
+ * 设置租户设置
+ * @returns 设置数据传输对象列表
+ */
+export function setTenantSettingsApi(input: SettingsUpdateInput): Promise<void> {
+	return requestClient.put("/api/setting-management/settings/change-current-tenant", input);
+}
+/**
+ * 获取用户设置
+ * @returns 设置数据传输对象列表
+ */
+export function getUserSettingsApi(): Promise<ListResultDto<SettingGroup>> {
+	return requestClient.get<ListResultDto<SettingGroup>>("/api/setting-management/settings/by-current-user");
+}
+
+/**
+ * 设置用户设置
+ * @returns 设置数据传输对象列表
+ */
+export function setUserSettingsApi(input: SettingsUpdateInput): Promise<void> {
+	return requestClient.put("/api/setting-management/settings/change-current-user", input);
+}
+
+/**
+ * 发送测试邮件
+ * @param emailAddress 邮件接收方地址
+ */
+export const sendTestEmailApi = (emailAddress: string) => {
+	return requestClient.post("/api/setting-management/settings/send-test-email", {
+		emailAddress,
+	});
+};
diff --git a/apps/react-admin/src/api/openiddict/applications.ts b/apps/react-admin/src/api/openiddict/applications.ts
new file mode 100644
index 000000000..1b4828ecf
--- /dev/null
+++ b/apps/react-admin/src/api/openiddict/applications.ts
@@ -0,0 +1,58 @@
+import type { PagedResultDto } from "#/abp-core";
+import type {
+	OpenIddictApplicationCreateDto,
+	OpenIddictApplicationDto,
+	OpenIddictApplicationGetListInput,
+	OpenIddictApplicationUpdateDto,
+} from "#/openiddict/applications";
+
+import requestClient from "../request";
+
+/**
+ * 创建应用
+ * @param input 参数
+ * @returns 应用实体数据传输对象
+ */
+export function createApi(input: OpenIddictApplicationCreateDto): Promise<OpenIddictApplicationDto> {
+	return requestClient.post<OpenIddictApplicationDto>("/api/openiddict/applications", input);
+}
+
+/**
+ * 删除应用
+ * @param id 应用id
+ */
+export function deleteApi(id: string): Promise<void> {
+	return requestClient.delete(`/api/openiddict/applications/${id}`);
+}
+
+/**
+ * 查询应用
+ * @param id 应用id
+ * @returns 应用实体数据传输对象
+ */
+export function getApi(id: string): Promise<OpenIddictApplicationDto> {
+	return requestClient.get<OpenIddictApplicationDto>(`/api/openiddict/applications/${id}`);
+}
+
+/**
+ * 更新应用
+ * @param id 应用id
+ * @param input 更新参数
+ * @returns 应用实体数据传输对象
+ */
+export function updateApi(id: string, input: OpenIddictApplicationUpdateDto): Promise<OpenIddictApplicationDto> {
+	return requestClient.put<OpenIddictApplicationDto>(`/api/openiddict/applications/${id}`, input);
+}
+
+/**
+ * 查询应用分页列表
+ * @param input 过滤参数
+ * @returns 应用实体数据传输对象分页列表
+ */
+export function getPagedListApi(
+	input?: OpenIddictApplicationGetListInput,
+): Promise<PagedResultDto<OpenIddictApplicationDto>> {
+	return requestClient.get<PagedResultDto<OpenIddictApplicationDto>>("/api/openiddict/applications", {
+		params: input,
+	});
+}
diff --git a/apps/react-admin/src/api/openiddict/authorizations.ts b/apps/react-admin/src/api/openiddict/authorizations.ts
new file mode 100644
index 000000000..737aa891b
--- /dev/null
+++ b/apps/react-admin/src/api/openiddict/authorizations.ts
@@ -0,0 +1,34 @@
+import type { PagedResultDto } from "#/abp-core";
+import type { OpenIddictAuthorizationDto, OpenIddictAuthorizationGetListInput } from "#/openiddict/authorizations";
+
+import requestClient from "../request";
+
+/**
+ * 删除授权
+ * @param id 授权id
+ */
+export function deleteApi(id: string): Promise<void> {
+	return requestClient.delete(`/api/openiddict/authorizations/${id}`);
+}
+
+/**
+ * 查询授权
+ * @param id 授权id
+ * @returns 授权实体数据传输对象
+ */
+export function getApi(id: string): Promise<OpenIddictAuthorizationDto> {
+	return requestClient.get<OpenIddictAuthorizationDto>(`/api/openiddict/authorizations/${id}`);
+}
+
+/**
+ * 查询授权分页列表
+ * @param input 过滤参数
+ * @returns 授权实体数据传输对象分页列表
+ */
+export function getPagedListApi(
+	input?: OpenIddictAuthorizationGetListInput,
+): Promise<PagedResultDto<OpenIddictAuthorizationDto>> {
+	return requestClient.get<PagedResultDto<OpenIddictAuthorizationDto>>("/api/openiddict/authorizations", {
+		params: input,
+	});
+}
diff --git a/apps/react-admin/src/api/openiddict/open-id.ts b/apps/react-admin/src/api/openiddict/open-id.ts
new file mode 100644
index 000000000..6f03b45b7
--- /dev/null
+++ b/apps/react-admin/src/api/openiddict/open-id.ts
@@ -0,0 +1,11 @@
+import type { OpenIdConfiguration } from "#/abp-core/openid";
+
+import requestClient from "../request";
+
+/**
+ * openid发现端点
+ * @returns OpenId配置数据
+ */
+export function discoveryApi(): Promise<OpenIdConfiguration> {
+	return requestClient.get<OpenIdConfiguration>("/.well-known/openid-configuration");
+}
diff --git a/apps/react-admin/src/api/openiddict/scopes.ts b/apps/react-admin/src/api/openiddict/scopes.ts
new file mode 100644
index 000000000..6239428f7
--- /dev/null
+++ b/apps/react-admin/src/api/openiddict/scopes.ts
@@ -0,0 +1,56 @@
+import type { PagedResultDto } from "#/abp-core";
+import type {
+	OpenIddictScopeCreateDto,
+	OpenIddictScopeDto,
+	OpenIddictScopeGetListInput,
+	OpenIddictScopeUpdateDto,
+} from "#/openiddict/scopes";
+
+import requestClient from "../request";
+
+/**
+ * 创建范围
+ * @param input 参数
+ * @returns 范围实体数据传输对象
+ */
+export function createApi(input: OpenIddictScopeCreateDto): Promise<OpenIddictScopeDto> {
+	return requestClient.post<OpenIddictScopeDto>("/api/openiddict/scopes", input);
+}
+
+/**
+ * 删除范围
+ * @param id 范围id
+ */
+export function deleteApi(id: string): Promise<void> {
+	return requestClient.delete(`/api/openiddict/scopes/${id}`);
+}
+
+/**
+ * 获取范围
+ * @param id 范围id
+ * @returns 范围实体数据传输对象
+ */
+export function getApi(id: string): Promise<OpenIddictScopeDto> {
+	return requestClient.get<OpenIddictScopeDto>(`/api/openiddict/scopes/${id}`);
+}
+
+/**
+ * 更新范围
+ * @param id 范围id
+ * @param input 更新参数
+ * @returns 范围实体数据传输对象
+ */
+export function updateApi(id: string, input: OpenIddictScopeUpdateDto): Promise<OpenIddictScopeDto> {
+	return requestClient.put<OpenIddictScopeDto>(`/api/openiddict/scopes/${id}`, input);
+}
+
+/**
+ * 获取范围分页列表
+ * @param input 过滤参数
+ * @returns 范围实体数据传输对象分页列表
+ */
+export function getPagedListApi(input?: OpenIddictScopeGetListInput): Promise<PagedResultDto<OpenIddictScopeDto>> {
+	return requestClient.get<PagedResultDto<OpenIddictScopeDto>>("/api/openiddict/scopes", {
+		params: input,
+	});
+}
diff --git a/apps/react-admin/src/api/openiddict/tokens.ts b/apps/react-admin/src/api/openiddict/tokens.ts
new file mode 100644
index 000000000..71dd5af84
--- /dev/null
+++ b/apps/react-admin/src/api/openiddict/tokens.ts
@@ -0,0 +1,31 @@
+import type { PagedResultDto } from "#/abp-core";
+import type { OpenIddictTokenDto, OpenIddictTokenGetListInput } from "#/openiddict/tokens";
+import requestClient from "../request";
+
+/**
+ * 删除令牌
+ * @param id 令牌id
+ */
+export function deleteApi(id: string): Promise<void> {
+	return requestClient.delete(`/api/openiddict/tokens/${id}`);
+}
+
+/**
+ * 获取令牌
+ * @param id 令牌id
+ * @returns 令牌实体数据传输对象
+ */
+export function getApi(id: string): Promise<OpenIddictTokenDto> {
+	return requestClient.get<OpenIddictTokenDto>(`/api/openiddict/tokens/${id}`);
+}
+
+/**
+ * 获取令牌分页列表
+ * @param input 过滤参数
+ * @returns 令牌实体数据传输对象分页列表
+ */
+export function getPagedListApi(input?: OpenIddictTokenGetListInput): Promise<PagedResultDto<OpenIddictTokenDto>> {
+	return requestClient.get<PagedResultDto<OpenIddictTokenDto>>("/api/openiddict/tokens", {
+		params: input,
+	});
+}
diff --git a/apps/react-admin/src/api/request.ts b/apps/react-admin/src/api/request.ts
new file mode 100644
index 000000000..2e3fb250f
--- /dev/null
+++ b/apps/react-admin/src/api/request.ts
@@ -0,0 +1,127 @@
+import { authenticateResponseInterceptor, errorMessageResponseInterceptor, RequestClient } from "@/request-client";
+import useLocaleStore from "@/store/localeI18nStore";
+import useUserStore from "@/store/userStore";
+import userStore from "@/store/userStore";
+import { mapLocaleToAbpLanguageFormat } from "@/utils";
+import { toast } from "sonner";
+import { refreshToken } from "./account/token";
+import { wrapperResult } from "@/utils/abp/request";
+import { handleOAuthError } from "@/utils/abp/handleOAuthError";
+
+const requestClient = new RequestClient({
+	baseURL: import.meta.env.VITE_APP_BASE_API,
+});
+
+/**
+ * 重新认证逻辑
+ */
+async function doReAuthenticate() {
+	console.warn("Access token or refresh token is invalid or expired. ");
+	//直接登出
+	userStore.getState().actions.clearUserInfoAndToken();
+}
+
+/**
+ * 刷新token逻辑
+ */
+async function doRefreshToken() {
+	console.debug("try -> Refresh token");
+
+	const { userToken } = useUserStore.getState();
+	if (!userToken.refreshToken) {
+		console.warn("No refresh token available.");
+		return "";
+	}
+
+	try {
+		const res = await refreshToken({ refreshToken: userToken.refreshToken });
+
+		const { tokenType, accessToken, refreshToken: newRefreshToken } = res;
+
+		if (accessToken) {
+			// 更新 userStore，保存新 token
+			useUserStore.getState().actions.setUserToken({
+				accessToken: `${tokenType} ${accessToken}`,
+				refreshToken: newRefreshToken,
+			});
+			console.debug("Token refreshed successfully.");
+			return `${tokenType} ${accessToken}`; // 返回新 token 供拦截器使用
+		}
+
+		console.error("Failed to refresh token: No access token returned.");
+		return "";
+	} catch (error) {
+		console.error("Error refreshing token:", error);
+		return ""; // 返回空字符串，触发重登录逻辑
+	}
+}
+
+function formatToken(token: null | string) {
+	return token ? token : null; //有个tokenType的获取值
+}
+
+// 请求头处理
+requestClient.addRequestInterceptor({
+	fulfilled: async (config) => {
+		const { userToken } = useUserStore.getState();
+		if (userToken.accessToken) {
+			config.headers.Authorization = `${userToken.accessToken}`;
+		}
+		const { locale } = useLocaleStore.getState();
+		config.headers["Accept-Language"] = mapLocaleToAbpLanguageFormat(locale);
+		config.headers["X-Request-From"] = "slash-admin";
+		return config;
+	},
+});
+
+// response数据解构
+requestClient.addResponseInterceptor<any>({
+	fulfilled: (response) => {
+		const { data, status } = response;
+		const { hasWrapResult, getData } = wrapperResult(response);
+
+		if (hasWrapResult()) {
+			return getData();
+		}
+
+		if (status >= 200 && status < 400) {
+			return data;
+		}
+
+		throw Object.assign({}, response, { response });
+	},
+});
+
+// token过期的处理
+requestClient.addResponseInterceptor(
+	authenticateResponseInterceptor({
+		client: requestClient,
+		doReAuthenticate,
+		doRefreshToken,
+		enableRefreshToken: true,
+		formatToken,
+	}),
+);
+
+// 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
+requestClient.addResponseInterceptor(
+	errorMessageResponseInterceptor((msg: string, error) => {
+		// 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
+		// 当前mock接口返回的错误字段是 error 或者 message
+		const responseData = error?.response?.data ?? {};
+		if (responseData?.error_description) {
+			const { formatError } = handleOAuthError();
+			toast.error(formatError(responseData) || msg, {
+				position: "top-center",
+			});
+			return;
+		}
+		const errorMessage = responseData?.error ?? responseData?.message ?? "";
+		// 如果没有错误信息，则会根据状态码进行提示
+		toast.error(errorMessage || msg, {
+			position: "top-center",
+		});
+	}),
+);
+
+export default requestClient;
diff --git a/apps/react-admin/src/api/services/demoService.ts b/apps/react-admin/src/api/services/demoService.ts
new file mode 100644
index 000000000..857ba1a50
--- /dev/null
+++ b/apps/react-admin/src/api/services/demoService.ts
@@ -0,0 +1,11 @@
+import apiClient from "../apiClient";
+
+export enum DemoApi {
+	TOKEN_EXPIRED = "/user/tokenExpired",
+}
+
+const mockTokenExpired = () => apiClient.post({ url: DemoApi.TOKEN_EXPIRED });
+
+export default {
+	mockTokenExpired,
+};
diff --git a/apps/react-admin/src/api/services/orgService.ts b/apps/react-admin/src/api/services/orgService.ts
new file mode 100644
index 000000000..b33cd49a4
--- /dev/null
+++ b/apps/react-admin/src/api/services/orgService.ts
@@ -0,0 +1,13 @@
+import apiClient from "../apiClient";
+
+import type { Organization } from "#/entity";
+
+export enum OrgApi {
+	Org = "/org",
+}
+
+const getOrgList = () => apiClient.get<Organization[]>({ url: OrgApi.Org });
+
+export default {
+	getOrgList,
+};
diff --git a/apps/react-admin/src/api/services/userService.ts b/apps/react-admin/src/api/services/userService.ts
new file mode 100644
index 000000000..ad3022b71
--- /dev/null
+++ b/apps/react-admin/src/api/services/userService.ts
@@ -0,0 +1,33 @@
+import apiClient from "../apiClient";
+
+import type { UserInfo, UserToken } from "#/entity";
+
+export interface SignInReq {
+	username: string;
+	password: string;
+}
+
+export interface SignUpReq extends SignInReq {
+	email: string;
+}
+export type SignInRes = UserToken & { user: UserInfo };
+
+export enum UserApi {
+	SignIn = "/auth/signin",
+	SignUp = "/auth/signup",
+	Logout = "/auth/logout",
+	Refresh = "/auth/refresh",
+	User = "/user",
+}
+
+const signin = (data: SignInReq) => apiClient.post<SignInRes>({ url: UserApi.SignIn, data });
+const signup = (data: SignUpReq) => apiClient.post<SignInRes>({ url: UserApi.SignUp, data });
+const logout = () => apiClient.get({ url: UserApi.Logout });
+const findById = (id: string) => apiClient.get<UserInfo[]>({ url: `${UserApi.User}/${id}` });
+
+export default {
+	signin,
+	signup,
+	findById,
+	logout,
+};
diff --git a/apps/react-admin/src/assets/icons/ic-analysis.svg b/apps/react-admin/src/assets/icons/ic-analysis.svg
new file mode 100644
index 000000000..130880561
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-analysis.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="weava-extension-context" data-weava-installed="1">
+<g opacity="0.32">
+<path d="M2.60946 22.9843C1.77292 22.9631 1.13928 22.4599 1.07089 21.6259C1.02993 21.1264 1 20.4398 1 19.5C1 18.5602 1.02993 17.8736 1.07089 17.3741C1.13928 16.5401 1.77292 16.0369 2.60946 16.0157C2.97545 16.0064 3.43306 16 4 16C4.56694 16 5.02455 16.0064 5.39055 16.0157C6.2271 16.0369 6.8607 16.5401 6.9291 17.3741C6.97005 17.8736 7 18.5602 7 19.5C7 20.4398 6.97005 21.1264 6.9291 21.6259C6.8607 22.4599 6.2271 22.9631 5.39055 22.9843C5.02455 22.9936 4.56694 23 4 23C3.43306 23 2.97545 22.9936 2.60946 22.9843Z" fill="currentColor"/>
+<path d="M18.8455 22.9792C17.8709 22.9408 17.1875 22.2557 17.1243 21.2823C17.0588 20.2731 17 18.6337 17 16C17 13.3663 17.0588 11.727 17.1243 10.7177C17.1875 9.74435 17.8709 9.0592 18.8455 9.02075C19.1671 9.00805 19.5489 9 20 9C20.4511 9 20.8329 9.00805 21.1545 9.02075C22.1291 9.0592 22.8125 9.74435 22.8757 10.7177C22.9412 11.727 23 13.3663 23 16C23 18.6337 22.9412 20.2731 22.8757 21.2823C22.8125 22.2557 22.1291 22.9408 21.1545 22.9792C20.8329 22.9919 20.4511 23 20 23C19.5489 23 19.1671 22.9919 18.8455 22.9792Z" fill="currentColor"/>
+<path d="M10.7766 22.9832C9.8427 22.9548 9.162 22.3419 9.0949 21.41C9.0422 20.6775 9 19.5936 9 18C9 16.4064 9.0422 15.3225 9.0949 14.59C9.162 13.6581 9.8427 13.0453 10.7766 13.0169C11.1121 13.0067 11.5163 13 12 13C12.4837 13 12.8879 13.0067 13.2234 13.0169C14.1573 13.0453 14.838 13.6581 14.9051 14.59C14.9578 15.3225 15 16.4064 15 18C15 19.5936 14.9578 20.6775 14.9051 21.41C14.838 22.3419 14.1573 22.9548 13.2234 22.9832C12.8879 22.9934 12.4837 23 12 23C11.5163 23 11.1121 22.9934 10.7766 22.9832Z" fill="currentColor"/>
+</g>
+<path d="M20.9603 6.0506C20.9106 7.03855 19.9709 7.40975 19.242 6.741C18.9106 6.4369 18.5138 6.06255 18.0418 5.60285C16.9756 6.5731 15.322 8.08585 13.3506 9.91645C12.8329 10.3972 11.992 10.3435 11.5397 9.8007L11.5394 9.8003C10.6518 8.73835 9.75755 7.6807 8.8322 6.6514C7.7509 7.4453 5.81 8.95825 3.88389 10.8844C3.39573 11.3725 2.60427 11.3725 2.11612 10.8844C1.62796 10.3962 1.62796 9.60475 2.11612 9.1166C4.00573 7.227 6.079 5.4545 8.30255 3.96314L8.306 3.96082C8.30685 3.96027 8.3066 3.96042 8.3066 3.96042C8.8024 3.6299 9.46255 3.69527 9.8839 4.1166C10.8519 5.08455 11.7265 6.14925 12.6118 7.19265C14.1169 5.80065 15.3848 4.64087 16.274 3.8314C15.8705 3.41506 15.5362 3.06006 15.26 2.75898C14.591 2.02997 14.9624 1.08998 15.9506 1.04025C17.2115 0.976795 18.5055 0.939456 19.7511 1.17232C20.3119 1.27718 20.7233 1.68863 20.8281 2.24948C21.061 3.49521 21.0238 4.78949 20.9603 6.0506Z" fill="currentColor"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic-blog.svg b/apps/react-admin/src/assets/icons/ic-blog.svg
new file mode 100644
index 000000000..eb74d960d
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-blog.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="weava-extension-context" data-weava-installed="1">
+<g opacity="0.32">
+<path d="M21 8H13C12.7348 8 12.4804 7.89464 12.2929 7.70711C12.1054 7.51957 12 7.26522 12 7C12 6.73478 12.1054 6.48043 12.2929 6.29289C12.4804 6.10536 12.7348 6 13 6H21C21.2652 6 21.5196 6.10536 21.7071 6.29289C21.8946 6.48043 22 6.73478 22 7C22 7.26522 21.8946 7.51957 21.7071 7.70711C21.5196 7.89464 21.2652 8 21 8ZM21 12H13C12.7348 12 12.4804 11.8946 12.2929 11.7071C12.1054 11.5196 12 11.2652 12 11C12 10.7348 12.1054 10.4804 12.2929 10.2929C12.4804 10.1054 12.7348 10 13 10H21C21.2652 10 21.5196 10.1054 21.7071 10.2929C21.8946 10.4804 22 10.7348 22 11C22 11.2652 21.8946 11.5196 21.7071 11.7071C21.5196 11.8946 21.2652 12 21 12Z" fill="currentColor"/>
+<path d="M21 16H3C2.73478 16 2.48043 15.8946 2.29289 15.7071C2.10536 15.5196 2 15.2652 2 15C2 14.7348 2.10536 14.4804 2.29289 14.2929C2.48043 14.1054 2.73478 14 3 14H21C21.2652 14 21.5196 14.1054 21.7071 14.2929C21.8946 14.4804 22 14.7348 22 15C22 15.2652 21.8946 15.5196 21.7071 15.7071C21.5196 15.8946 21.2652 16 21 16ZM13 20H3C2.73478 20 2.48043 19.8946 2.29289 19.7071C2.10536 19.5196 2 19.2652 2 19C2 18.7348 2.10536 18.4804 2.29289 18.2929C2.48043 18.1054 2.73478 18 3 18H13C13.2652 18 13.5196 18.1054 13.7071 18.2929C13.8946 18.4804 14 18.7348 14 19C14 19.2652 13.8946 19.5196 13.7071 19.7071C13.5196 19.8946 13.2652 20 13 20Z" fill="currentColor"/>
+</g>
+<rect x="2" y="4" width="8" height="8" rx="2" fill="currentColor"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic-clear.svg b/apps/react-admin/src/assets/icons/ic-clear.svg
new file mode 100644
index 000000000..bc535b32d
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-clear.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1168 1L8.76172 7.34165" stroke="#8A8D91" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M8.43913 10.1911C9.19153 9.43869 9.19153 8.21604 8.43913 7.45021C7.68673 6.68437 6.46408 6.69781 5.69824 7.45021L8.43913 10.1911Z" stroke="#8A8D91" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M1.02277 15.0001C0.780926 11.6815 2.47382 8.53751 5.71183 7.44922L8.45271 10.1901C7.96902 10.8753 7.8078 13.4012 9.44695 15.0001H1.02277Z" stroke="#8A8D91" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M4.07237 11.4941C4.07237 11.4941 3.105 12.784 3.07812 14.7053" stroke="#8A8D91" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M5.84602 12.9844C5.65792 13.3337 5.42951 13.9786 5.44295 14.6907" stroke="#8A8D91" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M12.8193 13.8711H15.493" stroke="#8A8D91" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M11.0186 10.9297H15.4926" stroke="#8A8D91" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M12.04 8H15.493" stroke="#8A8D91" stroke-linecap="square" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic-dashboard.svg b/apps/react-admin/src/assets/icons/ic-dashboard.svg
new file mode 100644
index 000000000..6cbedde97
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-dashboard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="" viewBox="0 0 24 24"><g><g><g fill="currentColor"><path d="M10 14h4v7h-4z"></path><path d="M20.42 10.18L12.71 2.3a1 1 0 0 0-1.42 0l-7.71 7.89A2 2 0 0 0 3 11.62V20a2 2 0 0 0 1.89 2H8v-9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v9h3.11A2 2 0 0 0 21 20v-8.38a2.07 2.07 0 0 0-.58-1.44Z"></path></g></g></g></svg>
diff --git a/apps/react-admin/src/assets/icons/ic-left-arrow.svg b/apps/react-admin/src/assets/icons/ic-left-arrow.svg
new file mode 100644
index 000000000..7301e2c0e
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-left-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 24 24"><g id="iconifyReact6083"><g><path id="iconifyReact6085" fill="currentColor" d="M13.83 19a1 1 0 0 1-.78-.37l-4.83-6a1 1 0 0 1 0-1.27l5-6a1 1 0 0 1 1.54 1.28L10.29 12l4.32 5.36a1 1 0 0 1-.78 1.64Z"></path></g></g></svg>
diff --git a/apps/react-admin/src/assets/icons/ic-locale_en_US.svg b/apps/react-admin/src/assets/icons/ic-locale_en_US.svg
new file mode 100644
index 000000000..f3980e2b7
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-locale_en_US.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="component-iconify MuiBox-root css-1virv8 iconify iconify--flagpack" width="1.34em" height="1em" viewBox="0 0 32 24"><defs><path id="iconifyReact3157" fill="#fff" d="M0 0h32v24H0z"></path></defs><mask id="iconifyReact3158" width="32" height="24" x="0" y="0" maskUnits="userSpaceOnUse"><use href="#iconifyReact3157"></use></mask><g fill="none" mask="url(#iconifyReact3158)"><path fill="#2E42A5" fill-rule="evenodd" d="M0 0v24h32V0H0z" clip-rule="evenodd"></path><mask id="iconifyReact3159" width="32" height="24" x="0" y="0" maskUnits="userSpaceOnUse"><path fill="#fff" fill-rule="evenodd" d="M0 0v24h32V0H0z" clip-rule="evenodd"></path></mask><g mask="url(#iconifyReact3159)"><mask id="iconifyReact3160" width="32" height="24" x="0" y="0" maskUnits="userSpaceOnUse"><use href="#iconifyReact3157"></use></mask><g mask="url(#iconifyReact3160)"><path fill="#fff" d="m-3.563 22.285l7.041 2.979L32.16 3.238l3.714-4.426l-7.53-.995l-11.698 9.491l-9.416 6.396l-10.793 8.581z"></path><path fill="#F50100" d="M-2.6 24.372L.989 26.1L34.54-1.599h-5.037l-32.102 25.97z"></path><path fill="#fff" d="m35.563 22.285l-7.042 2.979L-.159 3.238l-3.715-4.426l7.53-.995l11.698 9.491l9.416 6.396l10.793 8.581z"></path><path fill="#F50100" d="m35.323 23.783l-3.588 1.728l-14.286-11.86l-4.236-1.324l-17.445-13.5H.806l17.434 13.18l4.631 1.588l12.452 10.188z"></path><mask id="iconifyReact3161" fill="#fff"><path fill-rule="evenodd" d="M19.778-2h-7.556V8H-1.973v8h14.195v10h7.556V16h14.25V8h-14.25V-2z" clip-rule="evenodd"></path></mask><path fill="#F50100" fill-rule="evenodd" d="M19.778-2h-7.556V8H-1.973v8h14.195v10h7.556V16h14.25V8h-14.25V-2z" clip-rule="evenodd"></path><path fill="#fff" d="M12.222-2v-2h-2v2h2zm7.556 0h2v-2h-2v2zM12.222 8v2h2V8h-2zM-1.973 8V6h-2v2h2zm0 8h-2v2h2v-2zm14.195 0h2v-2h-2v2zm0 10h-2v2h2v-2zm7.556 0v2h2v-2h-2zm0-10v-2h-2v2h2zm14.25 0v2h2v-2h-2zm0-8h2V6h-2v2zm-14.25 0h-2v2h2V8zm-7.556-8h7.556v-4h-7.556v4zm2 8V-2h-4V8h4zm-16.195 2h14.195V6H-1.973v4zm2 6V8h-4v8h4zm12.195-2H-1.973v4h14.195v-4zm2 12V16h-4v10h4zm5.556-2h-7.556v4h7.556v-4zm-2-8v10h4V16h-4zm16.25-2h-14.25v4h14.25v-4zm-2-6v8h4V8h-4zm-12.25 2h14.25V6h-14.25v4zm-2-12V8h4V-2h-4z" mask="url(#iconifyReact3161)"></path></g></g></g></svg>
diff --git a/apps/react-admin/src/assets/icons/ic-locale_zh_CN.svg b/apps/react-admin/src/assets/icons/ic-locale_zh_CN.svg
new file mode 100644
index 000000000..b9aa7a2e4
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-locale_zh_CN.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="component-iconify MuiBox-root css-1virv8 iconify iconify--flagpack" width="1.34em" height="1em" viewBox="0 0 32 24"><mask id="iconifyReact2752" width="32" height="24" x="0" y="0" maskUnits="userSpaceOnUse"><path fill="#fff" d="M0 0h32v24H0z"></path></mask><g fill="none" fill-rule="evenodd" clip-rule="evenodd" mask="url(#iconifyReact2752)"><path fill="#E31D1C" d="M0 0h32v24H0V0z"></path><path fill="#FECA00" d="m15.016 4.548l-1.01.61l.23-1.19l-.841-.89l1.139-.049l.482-1.11l.482 1.11h1.137l-.84.94l.253 1.19l-1.032-.61zM7.018 9.607l-2.881 1.551l.657-3.026l-2.4-2.265l3.25-.123l1.374-2.826l1.374 2.826h3.243L9.24 8.132l.72 3.026l-2.943-1.55zm9.998-1.059l-1.01.61l.23-1.19l-.841-.89l1.139-.049l.482-1.11l.482 1.11h1.137l-.84.94l.253 1.19l-1.032-.61zm-1 4l-1.01.61l.23-1.19l-.841-.89l1.139-.049l.482-1.11l.482 1.11h1.137l-.84.94l.253 1.19l-1.032-.61zm-3 3l-1.01.61l.23-1.19l-.841-.89l1.139-.049l.482-1.11l.482 1.11h1.137l-.84.94l.253 1.19l-1.032-.61z"></path></g></svg>
diff --git a/apps/react-admin/src/assets/icons/ic-logo.svg b/apps/react-admin/src/assets/icons/ic-logo.svg
new file mode 100644
index 000000000..63f85c360
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-logo.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="BG1" x1="100%" x2="50%" y1="9.946%" y2="50%">
+      <stop offset="0%" stop-color="#5BE49B"></stop>
+      <stop offset="100%" stop-color="#00A76F"></stop>
+    </linearGradient>
+    <linearGradient id="BG2" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#5BE49B"></stop>
+      <stop offset="100%" stop-color="#00A76F"></stop>
+    </linearGradient>
+    <linearGradient id="BG3" x1="50%" x2="50%" y1="0%" y2="100%">
+      <stop offset="0%" stop-color="#5BE49B"></stop>
+      <stop offset="100%" stop-color="#00A76F"></stop>
+    </linearGradient>
+  </defs>
+  <g fill="#00A76F" fill-rule="evenodd" stroke="none" stroke-width="1">
+    <path fill="url(#BG1)" d="M183.168 285.573l-2.918 5.298-2.973 5.363-2.846 5.095-2.274 4.043-2.186 3.857-2.506 4.383-1.6 2.774-2.294 3.939-1.099 1.869-1.416 2.388-1.025 1.713-1.317 2.18-.95 1.558-1.514 2.447-.866 1.38-.833 1.312-.802 1.246-.77 1.18-.739 1.111-.935 1.38-.664.956-.425.6-.41.572-.59.8-.376.497-.537.69-.171.214c-10.76 13.37-22.496 23.493-36.93 29.334-30.346 14.262-68.07 14.929-97.202-2.704l72.347-124.682 2.8-1.72c49.257-29.326 73.08 1.117 94.02 40.927z"></path>
+    <path fill="url(#BG2)" d="M444.31 229.726c-46.27-80.956-94.1-157.228-149.043-45.344-7.516 14.384-12.995 42.337-25.267 42.337v-.142c-12.272 0-17.75-27.953-25.265-42.337C189.79 72.356 141.96 148.628 95.69 229.584c-3.483 6.106-6.828 11.932-9.69 16.996 106.038-67.127 97.11 135.667 184 137.278V384c86.891-1.611 77.962-204.405 184-137.28-2.86-5.062-6.206-10.888-9.69-16.994"></path>
+    <path fill="url(#BG3)" d="M450 384c26.509 0 48-21.491 48-48s-21.491-48-48-48-48 21.491-48 48 21.491 48 48 48"></path>
+  </g>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic-management.svg b/apps/react-admin/src/assets/icons/ic-management.svg
new file mode 100644
index 000000000..281dec2e5
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-management.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+<path opacity="0.32" d="M2.162 8.5C2 9.603 2 11.05 2 13C2 16.771 2 18.657 3.172 19.828C4.343 21 6.229 21 10 21H14C17.771 21 19.657 21 20.828 19.828C22 18.657 22 16.771 22 13C22 11.05 22 9.603 21.838 8.5C19.561 9.98 18.102 10.923 16.75 11.505V12C16.7511 12.0985 16.7327 12.1962 16.696 12.2876C16.6593 12.379 16.6049 12.4623 16.536 12.5327C16.3968 12.6748 16.2069 12.7559 16.008 12.758C15.8091 12.7601 15.6175 12.6831 15.4753 12.544C15.3332 12.4048 15.2521 12.2149 15.25 12.016C13.1197 12.5776 10.8803 12.5776 8.75 12.016C8.74788 12.2149 8.66683 12.4048 8.52467 12.544C8.38252 12.6831 8.19091 12.7601 7.992 12.758C7.79309 12.7559 7.60317 12.6748 7.46401 12.5327C7.32486 12.3905 7.24788 12.1989 7.25 12V11.504C5.898 10.924 4.44 9.98 2.162 8.5Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.581 2.24999H10.561C10.447 2.24999 10.359 2.24999 10.275 2.25499C9.75542 2.28658 9.25549 2.46498 8.8333 2.76945C8.4111 3.07392 8.084 3.49197 7.88999 3.97499C7.84737 4.08839 7.80736 4.20276 7.76999 4.31799L7.76599 4.32999C7.66284 4.60265 7.48845 4.84265 7.26099 5.02499C7.03399 5.03299 6.81699 5.04199 6.60899 5.05499C4.96499 5.15099 3.92199 5.42099 3.17099 6.17199C2.92699 6.41599 2.73299 6.69199 2.58099 7.00999C2.63945 7.03005 2.69521 7.05726 2.74699 7.09099C4.84699 8.45599 6.16699 9.31099 7.26299 9.85799C7.29767 9.67415 7.3998 9.5099 7.54935 9.39749C7.69889 9.28507 7.88506 9.23261 8.0713 9.25039C8.25753 9.26818 8.4304 9.35493 8.55597 9.49361C8.68154 9.6323 8.75074 9.81291 8.74999 9.99999V10.458C10.87 11.098 13.13 11.098 15.25 10.458V9.99999C15.2505 9.81382 15.3203 9.6345 15.4458 9.49692C15.5712 9.35933 15.7433 9.27332 15.9286 9.25561C16.114 9.2379 16.2993 9.28976 16.4485 9.4011C16.5977 9.51243 16.7002 9.67529 16.736 9.85799C17.833 9.30999 19.153 8.45599 21.253 7.09099C21.3051 7.05722 21.3612 7.03001 21.42 7.00999C21.2719 6.69896 21.0716 6.41554 20.828 6.17199C20.078 5.42199 19.035 5.15199 17.391 5.05399C17.194 5.04299 16.988 5.03399 16.773 5.02599C16.5214 4.82098 16.3271 4.55433 16.209 4.25199L16.205 4.24299C16.169 4.13599 16.141 4.05199 16.11 3.97399C15.9158 3.49116 15.5887 3.07332 15.1665 2.76903C14.7443 2.46474 14.2445 2.28649 13.725 2.25499C13.6297 2.2505 13.5344 2.24883 13.439 2.24999H10.581ZM14.818 4.81599L14.813 4.80499L14.808 4.79299L14.803 4.78099L14.8 4.77099L14.798 4.76599L14.794 4.75399L14.79 4.74199L14.788 4.73599L14.785 4.72799L14.783 4.72099L14.781 4.71499C14.7615 4.65414 14.7405 4.59378 14.718 4.53399C14.6298 4.31442 14.4812 4.12437 14.2893 3.98594C14.0974 3.84751 13.8702 3.76638 13.634 3.75199C13.5624 3.74949 13.4907 3.74882 13.419 3.74999H10.581C10.438 3.74999 10.398 3.74999 10.366 3.75199C10.1298 3.76638 9.90258 3.84751 9.71069 3.98594C9.5188 4.12437 9.37014 4.31442 9.28199 4.53399L9.27899 4.54099L9.27099 4.56199C9.24331 4.63808 9.2173 4.71476 9.19299 4.79199L9.19199 4.79799L9.18899 4.80499L9.18699 4.81299L9.18499 4.81899L9.18099 4.83099L9.17599 4.84299L9.17499 4.84799L9.17099 4.85799L9.16599 4.86999L9.16199 4.88199L9.15699 4.89199C9.14306 4.92829 9.12839 4.9653 9.11299 5.00099L9.99999 4.99999H14.896C14.8676 4.93955 14.8423 4.87818 14.818 4.81599Z" fill="currentColor"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic-markdown.svg b/apps/react-admin/src/assets/icons/ic-markdown.svg
new file mode 100644
index 000000000..a9f882bcd
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-markdown.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="201" height="200" viewBox="0 0 201 200" fill="none">
+<g filter="url(#filter0_di_2208_147554)">
+<rect x="24.0137" y="44" width="152" height="112" rx="12" fill="white"/>
+</g>
+<g filter="url(#filter1_di_2208_147554)">
+<path d="M144.524 132H55.5168C51.3802 132 48.0137 128.639 48.0137 124.502V75.4979C48.0137 71.3613 51.3802 68 55.5168 68H144.518C148.655 68 152.021 71.3613 152.021 75.4979V124.502C152.027 128.639 148.66 132 144.524 132ZM73.0205 117.004V103.203C73.0205 101.313 75.401 100.477 76.5821 101.954L81.4595 108.049C82.2602 109.05 83.7821 109.05 84.5828 108.049L89.4602 101.954C90.6413 100.477 93.0218 101.313 93.0218 103.203V115.004C93.0218 116.109 93.9172 117.004 95.0218 117.004H101.022C102.127 117.004 103.022 116.109 103.022 115.004V84.9958C103.022 83.8912 102.127 82.9958 101.022 82.9958H93.9832C93.3755 82.9958 92.8009 83.272 92.4213 83.7465L84.583 93.5465C83.7824 94.5475 82.2599 94.5475 81.4593 93.5465L73.621 83.7465C73.2415 83.272 72.6668 82.9958 72.0591 82.9958H65.0199C63.9153 82.9958 63.0199 83.8912 63.0199 84.9958V114.999C63.0199 116.104 63.9153 116.999 65.0199 116.999H73.0153C73.0182 116.999 73.0205 117.001 73.0205 117.004V117.004ZM137.193 103.301C138.305 102.004 137.383 100 135.675 100H132.022C130.918 100 130.022 99.1046 130.022 98V84.9958C130.022 83.8912 129.127 82.9958 128.022 82.9958H122.016C120.912 82.9958 120.016 83.8912 120.016 84.9958V98C120.016 99.1046 119.121 100 118.016 100H114.365C112.656 100 111.734 102.004 112.846 103.302L123.503 115.732C124.301 116.663 125.742 116.663 126.54 115.732L137.193 103.301Z" fill="#00A76F"/>
+</g>
+<defs>
+<filter id="filter0_di_2208_147554" x="16.0137" y="36" width="184" height="144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8" dy="8"/>
+<feGaussianBlur stdDeviation="8"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.770709 0 0 0 0 0.792653 0 0 0 0 0.818587 0 0 0 0.16 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2208_147554"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2208_147554" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.717499 0 0 0 0 0.740813 0 0 0 0 0.768367 0 0 0 0.48 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_2208_147554"/>
+</filter>
+<filter id="filter1_di_2208_147554" x="44.0137" y="64" width="120.008" height="80" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.470588 0 0 0 0 0.403922 0 0 0 0.16 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2208_147554"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2208_147554" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="-1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.470588 0 0 0 0 0.403922 0 0 0 0.48 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_2208_147554"/>
+</filter>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic-menu.svg b/apps/react-admin/src/assets/icons/ic-menu.svg
new file mode 100644
index 000000000..c9d8d36b0
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-menu.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="weava-extension-context" data-weava-installed="1">
+<path opacity="0.32" d="M15.2798 4.5H4.7202C3.77169 4.5 3 5.06057 3 5.75042C3 6.43943 3.77169 7 4.7202 7H15.2798C16.2283 7 17 6.43943 17 5.75042C17 5.06054 16.2283 4.5 15.2798 4.5Z" fill="currentColor"/>
+<path d="M19.2798 10.75H8.7202C7.77169 10.75 7 11.3106 7 12.0004C7 12.6894 7.77169 13.25 8.7202 13.25H19.2798C20.2283 13.25 21 12.6894 21 12.0004C21 11.3105 20.2283 10.75 19.2798 10.75Z" fill="currentColor"/>
+<path d="M15.2798 17H4.7202C3.77169 17 3 17.5606 3 18.2504C3 18.9394 3.77169 19.5 4.7202 19.5H15.2798C16.2283 19.5 17 18.9394 17 18.2504C17 17.5606 16.2283 17 15.2798 17Z" fill="currentcolor"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic-menulevel.svg b/apps/react-admin/src/assets/icons/ic-menulevel.svg
new file mode 100644
index 000000000..e557e9498
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-menulevel.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path opacity="0.32" d="M15.2798 4.5H4.7202C3.77169 4.5 3 5.06057 3 5.75042C3 6.43943 3.77169 7 4.7202 7H15.2798C16.2283 7 17 6.43943 17 5.75042C17 5.06054 16.2283 4.5 15.2798 4.5Z" fill="currentColor"/>
+<path d="M19.2798 10.75H8.7202C7.77169 10.75 7 11.3106 7 12.0004C7 12.6894 7.77169 13.25 8.7202 13.25H19.2798C20.2283 13.25 21 12.6894 21 12.0004C21 11.3105 20.2283 10.75 19.2798 10.75Z" fill="currentColor"/>
+<path d="M15.2798 17H4.7202C3.77169 17 3 17.5606 3 18.2504C3 18.9394 3.77169 19.5 4.7202 19.5H15.2798C16.2283 19.5 17 18.9394 17 18.2504C17 17.5606 16.2283 17 15.2798 17Z" fill="currentColor"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic-reset-password.svg b/apps/react-admin/src/assets/icons/ic-reset-password.svg
new file mode 100644
index 000000000..cf9e8c3d8
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-reset-password.svg
@@ -0,0 +1 @@
+<svg class="MuiBox-root css-pp6g9h" fill="none" viewBox="0 0 96 97" xmlns="http://www.w3.org/2000/svg"><path fill="#FFD666" d="M36.324 29.4v7.76a4.803 4.803 0 11-9.606 0V29.4c0-11.677 9.405-21.198 21.037-21.388l.353-.002c11.678 0 21.199 9.405 21.388 21.037l.003.353v7.76a4.803 4.803 0 11-9.606 0V29.4c0-6.433-5.181-11.678-11.59-11.783l-.194-.001c-6.499 0-11.785 5.286-11.785 11.784z"></path><g filter="url(#filter0_i_1870_135517)" style="mix-blend-mode: overlay;"><path fill="#fff" fill-opacity="0.04" d="M36.324 29.4v12.563h-9.606V29.4c0-11.677 9.405-21.198 21.037-21.388l.353-.002c11.678 0 21.199 9.405 21.388 21.037l.003.353v12.563h-9.606V29.4c0-6.433-5.181-11.678-11.59-11.783l-.194-.001c-6.499 0-11.785 5.286-11.785 11.784z"></path></g><path fill="#00A76F" fill-rule="evenodd" d="M79.217 68.137c0 10.978-8.9 19.877-19.877 19.877H36.877C25.9 88.014 17 79.115 17 68.138v-20.25a8.277 8.277 0 018.277-8.277H70.94a8.277 8.277 0 018.277 8.277v20.25zM44.51 66.872a3.598 3.598 0 003.598 3.598H49.5a2.206 2.206 0 002.206-2.206c0-.91.57-1.705 1.358-2.158a9.932 9.932 0 002.254-1.767 9.865 9.865 0 002.715-7.369c-.268-5.176-4.538-9.312-9.724-9.417h-.064l-.134.001h-.004c-4.643 0-9.152 3.578-9.848 8.557-.071.545.367 1.003.916 1.003h6.204a.01.01 0 00.009-.01c.026-.187.07-.367.132-.54l.02-.056.031-.079.028-.064a2.71 2.71 0 01.935-1.128l.07-.047.06-.038.044-.026.048-.028a2.81 2.81 0 01.215-.108l.087-.038c.045-.018.09-.035.136-.05l.06-.02a2.787 2.787 0 01.351-.089l.057-.01.058-.008.067-.009.128-.011.061-.004.063-.002h.068l.002.002.056-.002c1.406.029 2.61 1.19 2.682 2.595a2.735 2.735 0 01-.748 2.04l-.049.049-.06.057a2.723 2.723 0 01-1.806.746l-.076.001h-.676a2.922 2.922 0 00-2.922 2.922v3.713zm3.598 6.113a3.545 3.545 0 00-.001 7.088h.064a3.544 3.544 0 00-.063-7.088z" clip-rule="evenodd"></path><g filter="url(#filter1_i_1870_135517)" style="mix-blend-mode: overlay;"><path fill="#fff" fill-opacity="0.04" fill-rule="evenodd" d="M79.217 68.137c0 10.978-8.9 19.877-19.877 19.877H36.877C25.9 88.014 17 79.115 17 68.138v-20.25a8.277 8.277 0 018.277-8.277H70.94a8.277 8.277 0 018.277 8.277v20.25zM44.51 66.872a3.598 3.598 0 003.598 3.598H49.5a2.206 2.206 0 002.206-2.206c0-.91.57-1.705 1.358-2.158a9.932 9.932 0 002.254-1.767 9.865 9.865 0 002.715-7.369c-.268-5.176-4.538-9.312-9.724-9.417h-.064l-.134.001h-.004c-4.643 0-9.152 3.578-9.848 8.557-.071.545.367 1.003.916 1.003h6.204a.01.01 0 00.009-.01c.026-.187.07-.367.132-.54l.02-.056.031-.079.028-.064a2.71 2.71 0 01.935-1.128l.07-.047.06-.038.044-.026.048-.028a2.81 2.81 0 01.215-.108l.087-.038c.045-.018.09-.035.136-.05l.06-.02a2.787 2.787 0 01.351-.089l.057-.01.058-.008.067-.009.128-.011.061-.004.063-.002h.068l.002.002.056-.002c1.406.029 2.61 1.19 2.682 2.595a2.735 2.735 0 01-.748 2.04l-.049.049-.06.057a2.723 2.723 0 01-1.806.746l-.076.001h-.676a2.922 2.922 0 00-2.922 2.922v3.713zm3.598 6.113a3.545 3.545 0 00-.001 7.088h.064a3.544 3.544 0 00-.063-7.088z" clip-rule="evenodd"></path></g><path fill="#fff" fill-rule="evenodd" d="M48.109 70.456a3.598 3.598 0 01-3.598-3.599v-3.712a2.922 2.922 0 012.922-2.922h.676l.075-.001a2.723 2.723 0 001.808-.746l.06-.058.048-.05a2.735 2.735 0 00.748-2.038c-.072-1.406-1.276-2.567-2.681-2.595l-.057.001h-.001l-.001-.002h-.069l-.062.003-.061.003a2.816 2.816 0 00-.128.012l-.067.008-.058.01-.057.009a2.79 2.79 0 00-.352.088l-.059.02a2.838 2.838 0 00-.136.051l-.087.037.02-.009a2.81 2.81 0 00-.235.117l-.048.028-.044.026-.06.038-.07.047a2.708 2.708 0 00-.935 1.13l-.028.063-.03.079-.021.056a2.764 2.764 0 00-.132.54.01.01 0 01-.01.01h-6.203c-.55 0-.987-.459-.916-1.003.696-4.98 5.205-8.558 9.848-8.558h.202c5.186.105 9.456 4.24 9.724 9.417a9.865 9.865 0 01-2.715 7.368 9.932 9.932 0 01-2.254 1.768c-.788.452-1.358 1.249-1.358 2.157a2.206 2.206 0 01-2.206 2.207h-1.392zm0 2.514a3.544 3.544 0 01.063 7.088h-.064a3.545 3.545 0 010-7.088z" clip-rule="evenodd"></path><defs><filter id="filter0_i_1870_135517" width="44.781" height="35.953" x="24.718" y="6.01" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dx="-2" dy="-2"></feOffset><feGaussianBlur stdDeviation="2"></feGaussianBlur><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"></feComposite><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"></feColorMatrix><feBlend in2="shape" result="effect1_innerShadow_1870_135517"></feBlend></filter><filter id="filter1_i_1870_135517" width="64.217" height="50.404" x="15" y="37.61" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dx="-2" dy="-2"></feOffset><feGaussianBlur stdDeviation="2"></feGaussianBlur><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"></feComposite><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"></feColorMatrix><feBlend in2="shape" result="effect1_innerShadow_1870_135517"></feBlend></filter></defs></svg>
diff --git a/apps/react-admin/src/assets/icons/ic-right-arrow.svg b/apps/react-admin/src/assets/icons/ic-right-arrow.svg
new file mode 100644
index 000000000..9400f219e
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-right-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="" viewBox="0 0 24 24"><g><g><path fill="currentColor" d="M10 19a1 1 0 0 1-.64-.23a1 1 0 0 1-.13-1.41L13.71 12L9.39 6.63a1 1 0 0 1 .15-1.41a1 1 0 0 1 1.46.15l4.83 6a1 1 0 0 1 0 1.27l-5 6A1 1 0 0 1 10 19Z"></path></g></g></svg>
diff --git a/apps/react-admin/src/assets/icons/ic-search.svg b/apps/react-admin/src/assets/icons/ic-search.svg
new file mode 100644
index 000000000..d06a45119
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"  viewBox="0 0 24 24"><g><g ><path  fill="currentColor" d="m20.71 19.29l-3.4-3.39A7.92 7.92 0 0 0 19 11a8 8 0 1 0-8 8a7.92 7.92 0 0 0 4.9-1.69l3.39 3.4a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42ZM5 11a6 6 0 1 1 6 6a6 6 0 0 1-6-6Z"></path></g></g></svg>
diff --git a/apps/react-admin/src/assets/icons/ic-setting.svg b/apps/react-admin/src/assets/icons/ic-setting.svg
new file mode 100644
index 000000000..48468ac84
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-setting.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 24 24"><g fill="currentColor"><path fill-rule="evenodd" d="M14.279 2.152C13.909 2 13.439 2 12.5 2s-1.409 0-1.779.152a2.008 2.008 0 0 0-1.09 1.083c-.094.223-.13.484-.145.863a1.615 1.615 0 0 1-.796 1.353a1.64 1.64 0 0 1-1.579.008c-.338-.178-.583-.276-.825-.308a2.026 2.026 0 0 0-1.49.396c-.318.242-.553.646-1.022 1.453c-.47.807-.704 1.21-.757 1.605c-.07.526.074 1.058.4 1.479c.148.192.357.353.68.555c.477.297.783.803.783 1.361c0 .558-.306 1.064-.782 1.36c-.324.203-.533.364-.682.556a1.99 1.99 0 0 0-.399 1.479c.053.394.287.798.757 1.605c.47.807.704 1.21 1.022 1.453c.424.323.96.465 1.49.396c.242-.032.487-.13.825-.308a1.64 1.64 0 0 1 1.58.008c.486.28.774.795.795 1.353c.015.38.051.64.145.863c.204.49.596.88 1.09 1.083c.37.152.84.152 1.779.152s1.409 0 1.779-.152a2.008 2.008 0 0 0 1.09-1.083c.094-.223.13-.483.145-.863c.02-.558.309-1.074.796-1.353a1.64 1.64 0 0 1 1.579-.008c.338.178.583.276.825.308c.53.07 1.066-.073 1.49-.396c.318-.242.553-.646 1.022-1.453c.47-.807.704-1.21.757-1.605a1.99 1.99 0 0 0-.4-1.479c-.148-.192-.357-.353-.68-.555c-.477-.297-.783-.803-.783-1.361c0-.558.306-1.064.782-1.36c.324-.203.533-.364.682-.556a1.99 1.99 0 0 0 .399-1.479c-.053-.394-.287-.798-.757-1.605c-.47-.807-.704-1.21-1.022-1.453a2.026 2.026 0 0 0-1.49-.396c-.242.032-.487.13-.825.308a1.64 1.64 0 0 1-1.58-.008a1.615 1.615 0 0 1-.795-1.353c-.015-.38-.051-.64-.145-.863a2.007 2.007 0 0 0-1.09-1.083Z" clip-rule="evenodd" opacity=".5"></path><path d="M15.523 12c0 1.657-1.354 3-3.023 3c-1.67 0-3.023-1.343-3.023-3S10.83 9 12.5 9c1.67 0 3.023 1.343 3.023 3Z"></path></g></svg>
diff --git a/apps/react-admin/src/assets/icons/ic-settings-exit-fullscreen.svg b/apps/react-admin/src/assets/icons/ic-settings-exit-fullscreen.svg
new file mode 100644
index 000000000..46453e9d9
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-settings-exit-fullscreen.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+<path d="M7.72269 1.10502C8.04079 0.966359 8.3992 0.997545 8.73649 1.01866C9.05411 1.03689 9.38757 1.1458 9.5886 1.40537C9.7762 1.63039 9.83857 1.92834 9.84913 2.21478C9.9734 4.25822 10.0598 6.31029 9.93021 8.35565C9.89615 9.14826 9.23883 9.84684 8.45053 9.93177C7.41178 10.0176 6.36823 9.99558 5.32708 9.9975C4.4625 9.96151 3.59647 9.96199 2.73428 9.88523C2.40418 9.85548 2.06449 9.87755 1.74447 9.77775C1.38606 9.67412 1.09723 9.35074 1.04733 8.97938C0.995992 8.64736 0.983518 8.30719 1.0243 7.97373C1.05933 7.70313 1.24069 7.46707 1.47866 7.33993C1.75646 7.17152 2.08992 7.16144 2.40466 7.13841C3.93328 7.04006 5.46526 7.01703 6.99628 7.01079C7.01067 5.34639 7.03418 3.68007 7.16517 2.01998C7.18436 1.6491 7.37964 1.27151 7.72269 1.10502Z" fill="currentColor"/>
+<path d="M14.6572 1.18467C14.9378 1.0177 15.2756 1.01242 15.5923 1.0009C15.8859 0.998026 16.2122 1.01578 16.4434 1.22113C16.7087 1.43512 16.8172 1.78249 16.8335 2.1121C16.9496 3.74244 16.9678 5.37757 16.9755 7.01079C18.5622 7.01991 20.1503 7.03814 21.7331 7.14993C22.046 7.16624 22.3722 7.21902 22.6275 7.41477C22.8323 7.56495 22.9609 7.8106 22.9782 8.06345C23.0017 8.38444 22.9936 8.71021 22.9341 9.02688C22.863 9.40783 22.5416 9.71874 22.1659 9.8003C21.7826 9.8881 21.3843 9.85884 20.9957 9.90586C19.694 9.98742 18.3895 10.0105 17.0854 9.99606C16.5408 9.98262 15.9948 9.98262 15.4536 9.92073C14.7186 9.80462 14.1135 9.14922 14.0651 8.40554C13.9235 6.29542 14.0037 4.17713 14.1529 2.06988C14.1663 1.71676 14.3486 1.36555 14.6572 1.18467Z" fill="currentColor"/>
+<path d="M2.1144 14.1544C4.07675 14.0426 6.04486 13.9409 8.00961 14.0479C8.31908 14.0589 8.63718 14.0748 8.92314 14.2062C9.5152 14.4505 9.90527 15.0636 9.93358 15.6965C10.0531 17.5993 9.98588 19.5084 9.86833 21.4094C9.83427 21.7721 9.87409 22.165 9.66874 22.486C9.48929 22.7979 9.13041 22.9553 8.78352 22.9802C8.47837 23.009 8.16651 23.0119 7.8652 22.9514C7.52694 22.8607 7.27841 22.5518 7.20452 22.2173C7.13495 21.9045 7.1244 21.5831 7.10472 21.2645C7.03084 19.8376 7.00877 18.4087 7.00493 16.9799C6.63837 16.9569 6.27132 16.978 5.90476 16.9698C4.58725 16.9473 3.26926 16.9257 1.95511 16.8211C1.62645 16.7966 1.30259 16.6278 1.13227 16.3394C0.979691 16.0731 1.0008 15.7536 1.00464 15.4575C1.02287 15.1783 1.03199 14.877 1.1932 14.6361C1.39231 14.331 1.756 14.1626 2.1144 14.1544Z" fill="currentColor"/>
+<path d="M15.9795 14.0479C17.9461 13.9409 19.9157 14.0426 21.88 14.1544C22.2369 14.1635 22.5972 14.3319 22.7949 14.6366C22.972 14.9058 22.9739 15.2412 22.9883 15.5521C22.9916 15.8279 22.9979 16.1278 22.8395 16.3677C22.6615 16.6445 22.3396 16.7995 22.0172 16.823C20.3432 16.9478 18.6634 16.9833 16.9851 16.9814C16.9674 18.6007 16.9386 20.2209 16.8297 21.8373C16.8359 22.1981 16.7145 22.5834 16.4142 22.8051C16.1858 22.9941 15.8753 22.9927 15.5951 22.9999C15.3476 22.9975 15.0957 22.9855 14.8577 22.9111C14.6025 22.8291 14.3808 22.6391 14.2728 22.3925C14.1582 22.1588 14.1447 21.894 14.126 21.6392C14.008 19.6452 13.9322 17.643 14.0598 15.6475C14.0848 15.0156 14.5103 14.4236 15.0976 14.1923C15.3744 14.0695 15.682 14.0618 15.9795 14.0479Z" fill="currentColor"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic-settings-fullscreen.svg b/apps/react-admin/src/assets/icons/ic-settings-fullscreen.svg
new file mode 100644
index 000000000..a13fcc8ca
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-settings-fullscreen.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path d="M2.73284 1.06863C4.67417 0.927089 6.62125 1.03265 8.56163 1.13293C8.87159 1.15836 9.20218 1.16316 9.47519 1.33157C9.76692 1.50383 9.94829 1.8277 9.9718 2.16261C9.99915 2.48745 10.0246 2.82092 9.95261 3.14191C9.85089 3.53584 9.4608 3.79206 9.06975 3.82853C7.38032 3.96 5.68466 3.99358 3.99091 3.99071C3.97508 5.70124 3.94533 7.4137 3.81626 9.11992C3.76396 9.52873 3.45496 9.92601 3.03032 9.98215C2.69493 10.0196 2.3533 10.0042 2.01983 9.95384C1.70603 9.91306 1.42054 9.70626 1.28764 9.41933C1.16576 9.17942 1.15041 8.90641 1.1341 8.64347C1.0151 6.66279 0.942169 4.67492 1.06404 2.69281C1.07892 2.22595 1.29963 1.7706 1.66093 1.4736C1.95506 1.21354 2.34563 1.08927 2.73284 1.06863Z" fill="#637381"/>
+<path d="M15.4666 1.13101C17.3965 1.03121 19.3335 0.928048 21.2638 1.06863C21.6745 1.08975 22.0895 1.23081 22.386 1.52398C22.7473 1.83922 22.9186 2.32047 22.9378 2.79069C23.0467 4.66245 22.982 6.539 22.8668 8.40884C22.8337 8.74615 22.8702 9.10457 22.7094 9.41549C22.5751 9.70242 22.2915 9.90874 21.9782 9.9524C21.6313 10.0057 21.2748 10.0225 20.9264 9.97687C20.5723 9.9121 20.2974 9.60502 20.2106 9.26483C20.1285 8.93567 20.1237 8.59405 20.1016 8.25722C20.0273 6.83649 20.0076 5.41288 20.0023 3.99023C18.4655 3.97103 16.9258 3.96767 15.3913 3.86164C15.136 3.84292 14.8731 3.84868 14.6298 3.75943C14.3199 3.64908 14.0641 3.36791 14.0219 3.03635C13.9802 2.69952 13.9931 2.35646 14.0454 2.02107C14.0996 1.66121 14.3751 1.35604 14.7162 1.23945C14.9571 1.1574 15.2147 1.14972 15.4666 1.13101Z" fill="#637381"/>
+<path d="M1.69452 14.1724C1.99728 14.0083 2.35282 14.0112 2.68773 14.004C2.95403 14.0001 3.2472 14.0251 3.45304 14.2146C3.72221 14.4324 3.82729 14.7856 3.84169 15.12C3.95876 16.7447 3.97508 18.3746 3.98275 20.0026C5.59781 20.0141 7.21479 20.0309 8.82648 20.1489C9.1993 20.1672 9.60714 20.2871 9.82978 20.6091C10.0294 20.896 10.0016 21.264 9.99147 21.5961C9.97804 21.9291 9.9315 22.2961 9.66952 22.5331C9.36963 22.8565 8.89702 22.8412 8.49253 22.8647C6.7057 22.9894 4.91216 23.0307 3.12197 22.9635C2.77842 22.9367 2.42192 22.9491 2.09852 22.8119C1.58368 22.5912 1.18112 22.1047 1.09331 21.5476C1.05828 21.3418 1.0554 21.1326 1.04293 20.9253C0.946967 18.9734 1.02326 17.0182 1.15952 15.0706C1.17824 14.7098 1.3668 14.3432 1.69452 14.1724Z" fill="#637381"/>
+<path d="M20.5661 14.1944C20.7983 14.0006 21.1174 13.9996 21.4043 14.0049C21.7417 14.014 22.1073 14.0279 22.3937 14.229C22.6941 14.4396 22.8352 14.812 22.8443 15.1694C22.969 17.2297 23.0578 19.2992 22.9273 21.3619C22.8855 22.1325 22.2517 22.8282 21.4821 22.9184C20.7878 22.9904 20.0887 22.976 19.392 23C17.9003 22.9765 16.4066 22.9544 14.9196 22.8206C14.5679 22.7831 14.2469 22.5461 14.1102 22.2198C14.0118 21.9607 14.0085 21.6781 13.9984 21.4046C13.9998 21.1316 13.996 20.8332 14.1668 20.6033C14.4048 20.2713 14.8314 20.16 15.22 20.1437C16.8087 20.0333 18.4017 20.0112 19.9937 20.0031C20.0086 18.3583 20.0316 16.7115 20.1578 15.0711C20.1717 14.7405 20.296 14.4003 20.5661 14.1944Z" fill="#637381"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic-settings-mode-moon.svg b/apps/react-admin/src/assets/icons/ic-settings-mode-moon.svg
new file mode 100644
index 000000000..be816934f
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-settings-mode-moon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M16.9462 11.0863C16.9759 11.0874 17.0055 11.0886 17.035 11.0898C20.1966 11.2176 22.5 13.3358 22.5 16.5C22.5 19.6642 20.1966 21.7824 17.035 21.9102C15.7057 21.9639 14.0498 22 12 22C9.9502 22 8.2943 21.9639 6.965 21.9102C3.80337 21.7824 1.5 19.6642 1.5 16.5C1.5 14.0317 2.90165 12.1999 5.019 11.4529C5.2406 8.2951 7.3872 6.02435 10.6413 6.00125C10.7585 6.00045 10.878 6 11 6C11.122 6 11.2415 6.00045 11.3587 6.00125C14.4855 6.02345 16.5897 8.1208 16.9462 11.0863Z" fill="currentColor"/>
+<path d="M19.2407 2.28853C19.5263 2.12002 19.5419 1.62921 19.2169 1.57222C18.1306 1.38179 16.9755 1.56344 15.9464 2.17059C14.4123 3.07575 13.5394 4.70186 13.501 6.38837C15.4283 7.12677 16.6785 8.86242 16.9459 11.0863L17.0347 11.0898C17.7391 11.1183 18.401 11.2456 19.0042 11.4612C19.6324 11.3806 20.2555 11.1732 20.8383 10.8294C21.8673 10.2222 22.5988 9.2907 22.9806 8.23415C23.0948 7.918 22.6711 7.6864 22.3855 7.8549C20.8813 8.74235 18.958 8.2157 18.0896 6.6786C17.2212 5.1415 17.7366 3.17599 19.2407 2.28853Z" fill="currentColor"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic-settings-mode-sun.svg b/apps/react-admin/src/assets/icons/ic-settings-mode-sun.svg
new file mode 100644
index 000000000..aeaeeac02
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-settings-mode-sun.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+<path d="M11.9998 18.1111C15.3749 18.1111 18.1109 15.3751 18.1109 12C18.1109 8.62495 15.3749 5.88892 11.9998 5.88892C8.62471 5.88892 5.88867 8.62495 5.88867 12C5.88867 15.3751 8.62471 18.1111 11.9998 18.1111Z" fill="currentColor"/>
+<g opacity="0.4">
+<path d="M10.1667 2.83333C10.1667 1.78189 10.8396 1.00805 11.891 1.00039C11.9266 1.00013 11.9629 1 12 1C12.0371 1 12.0734 1.00013 12.109 1.00039C13.1604 1.00805 13.8333 1.78189 13.8333 2.83333C13.8333 3.88481 13.1604 4.6586 12.109 4.6663C12.0734 4.66654 12.0371 4.66667 12 4.66667C11.9629 4.66667 11.9266 4.66654 11.891 4.6663C10.8396 4.6586 10.1667 3.88475 10.1667 2.83333Z" fill="currentColor"/>
+<path d="M10.1667 21.1667C10.1667 22.2181 10.8396 22.9919 11.891 22.9996C11.9266 22.9999 11.9629 23 12 23C12.0371 23 12.0734 22.9999 12.109 22.9996C13.1604 22.9919 13.8333 22.2181 13.8333 21.1667C13.8333 20.1152 13.1604 19.3414 12.109 19.3337C12.0734 19.3335 12.0371 19.3333 12 19.3333C11.9629 19.3333 11.9266 19.3335 11.891 19.3337C10.8396 19.3414 10.1667 20.1152 10.1667 21.1667Z" fill="currentColor"/>
+<path d="M17.1855 4.22184C17.9289 3.47836 18.9519 3.40695 19.7008 4.14502C19.7262 4.17002 19.7519 4.19562 19.7782 4.22184C19.8044 4.24806 19.83 4.27384 19.855 4.29921C20.593 5.04806 20.5216 6.07106 19.7782 6.81454C19.0347 7.55802 18.0117 7.62939 17.2628 6.89136C17.2375 6.86636 17.2117 6.84076 17.1855 6.81454C17.1592 6.78832 17.1336 6.76253 17.1086 6.73717C16.3706 5.98832 16.442 4.96532 17.1855 4.22184Z" fill="currentColor"/>
+<path d="M4.22184 17.1855C3.47836 17.9289 3.40696 18.9519 4.14502 19.7008C4.17002 19.7262 4.19562 19.7519 4.22184 19.7782C4.24806 19.8044 4.27384 19.83 4.29921 19.855C5.04806 20.593 6.07106 20.5216 6.81454 19.7782C7.55802 19.0347 7.62939 18.0117 6.89136 17.2628C6.86636 17.2375 6.84076 17.2117 6.81454 17.1855C6.78832 17.1592 6.76253 17.1336 6.73717 17.1086C5.98832 16.3706 4.96532 16.442 4.22184 17.1855Z" fill="currentColor"/>
+<path d="M2.83333 13.8333C1.78189 13.8333 1.00805 13.1604 1.00039 12.109C1.00013 12.0734 1 12.0371 1 12C1 11.9629 1.00013 11.9266 1.00039 11.891C1.00805 10.8396 1.78189 10.1667 2.83333 10.1667C3.88475 10.1667 4.6586 10.8396 4.6663 11.891C4.66654 11.9266 4.66667 11.9629 4.66667 12C4.66667 12.0371 4.66654 12.0734 4.6663 12.109C4.6586 13.1604 3.88475 13.8333 2.83333 13.8333Z" fill="currentColor"/>
+<path d="M21.1667 13.8333C22.2181 13.8333 22.9919 13.1604 22.9996 12.109C22.9999 12.0734 23 12.0371 23 12C23 11.9629 22.9999 11.9266 22.9996 11.891C22.9919 10.8396 22.2181 10.1667 21.1667 10.1667C20.1152 10.1667 19.3414 10.8396 19.3337 11.891C19.3335 11.9266 19.3333 11.9629 19.3333 12C19.3333 12.0371 19.3335 12.0734 19.3337 12.109C19.3414 13.1604 20.1152 13.8333 21.1667 13.8333Z" fill="currentColor"/>
+<path d="M4.22184 6.81454C3.47836 6.07106 3.40695 5.04806 4.14502 4.29921C4.17002 4.27384 4.19562 4.24806 4.22184 4.22184C4.24806 4.19562 4.27384 4.17002 4.29921 4.14502C5.04806 3.40695 6.07106 3.47836 6.81454 4.22184C7.55802 4.96532 7.62939 5.98832 6.89136 6.73717C6.86636 6.76253 6.84076 6.78832 6.81454 6.81454C6.78832 6.84076 6.76253 6.86636 6.73717 6.89136C5.98832 7.62939 4.96532 7.55802 4.22184 6.81454Z" fill="currentColor"/>
+<path d="M17.1855 19.7782C17.9289 20.5216 18.9519 20.593 19.7008 19.855C19.7262 19.83 19.7519 19.8044 19.7782 19.7782C19.8044 19.7519 19.83 19.7262 19.855 19.7008C20.593 18.9519 20.5216 17.9289 19.7782 17.1855C19.0347 16.442 18.0117 16.3706 17.2628 17.1086C17.2375 17.1336 17.2117 17.1592 17.1855 17.1855C17.1592 17.2117 17.1336 17.2375 17.1086 17.2628C16.3706 18.0117 16.442 19.0347 17.1855 19.7782Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic-user.svg b/apps/react-admin/src/assets/icons/ic-user.svg
new file mode 100644
index 000000000..141aeba97
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-user.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="weava-extension-context" data-weava-installed="1">
+<path opacity="0.32" d="M2.28099 19.6575C2.36966 20.5161 2.93261 21.1957 3.77688 21.3755C5.1095 21.6592 7.6216 22 12 22C16.3784 22 18.8905 21.6592 20.2232 21.3755C21.0674 21.1957 21.6303 20.5161 21.719 19.6575C21.8505 18.3844 22 16.0469 22 12C22 7.95305 21.8505 5.6156 21.719 4.34251C21.6303 3.48389 21.0674 2.80424 20.2231 2.62451C18.8905 2.34081 16.3784 2 12 2C7.6216 2 5.1095 2.34081 3.77688 2.62451C2.93261 2.80424 2.36966 3.48389 2.28099 4.34251C2.14952 5.6156 2 7.95305 2 12C2 16.0469 2.14952 18.3844 2.28099 19.6575Z" fill="currentColor"/>
+<path d="M13.9382 13.8559C15.263 13.1583 16.1663 11.7679 16.1663 10.1666C16.1663 7.8655 14.3008 6 11.9996 6C9.69841 6 7.83291 7.8655 7.83291 10.1666C7.83291 11.768 8.73626 13.1584 10.0612 13.856C8.28691 14.532 6.93216 16.1092 6.51251 18.0529C6.45446 18.3219 6.60246 18.5981 6.87341 18.6471C7.84581 18.8231 9.45616 19 12.0006 19C14.545 19 16.1554 18.8231 17.1278 18.6471C17.3977 18.5983 17.5454 18.3231 17.4876 18.0551C17.0685 16.1103 15.7133 14.5321 13.9382 13.8559Z" fill="currentColor"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic-workbench.svg b/apps/react-admin/src/assets/icons/ic-workbench.svg
new file mode 100644
index 000000000..6ea1c6dea
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic-workbench.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="weava-extension-context" data-weava-installed="1">
+<path opacity="0.32" d="M21.1808 16.9703C20.8971 17.6255 20.2225 18 19.5086 18H14.8154C14.8462 17.9145 14.8735 17.8269 14.8971 17.7373C15.1709 16.6974 14.8825 15.639 14.2214 14.8963C14.4654 12.9091 14.6177 10.8733 14.7108 9.26516C14.7569 8.46731 13.7795 8.20081 13.4274 8.91526C12.7178 10.3553 11.8493 12.1958 11.0842 14.041C10.1467 14.3479 9.3768 15.1177 9.10295 16.1576C8.93642 16.7899 8.97782 17.4291 9.18451 18H4.49141C3.77747 18 3.10288 17.6255 2.81918 16.9703C2.29212 15.7533 2 14.4108 2 13C2 7.47715 6.47715 3 12 3C17.5229 3 22 7.47715 22 13C22 14.4108 21.7079 15.7533 21.1808 16.9703Z" fill="currentColor"/>
+<path d="M14.7108 9.26516C14.7569 8.46731 13.7795 8.20081 13.4274 8.91526C12.7178 10.3553 11.8493 12.1958 11.0842 14.041C10.1467 14.3479 9.3768 15.1177 9.10295 16.1576C8.6742 17.7856 9.62375 19.459 11.2238 19.8953C12.8238 20.3315 14.4684 19.3654 14.8971 17.7373C15.1709 16.6974 14.8825 15.639 14.2214 14.8963C14.4654 12.9091 14.6177 10.8733 14.7108 9.26516Z" fill="currentColor"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_blank.svg b/apps/react-admin/src/assets/icons/ic_blank.svg
new file mode 100644
index 000000000..d187ec296
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_blank.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path opacity="0.32" fill-rule="evenodd" clip-rule="evenodd" d="M20.9114 8.22695C19.4717 8.5891 17.7718 8.61315 16.3035 8.1646C15.6828 7.97495 15.1988 7.4914 14.9893 6.8771C14.4674 5.34677 14.3385 3.47362 14.722 2.0318C13.9279 2.01186 13.0248 2 12 2C8.51575 2 6.43945 2.13682 5.26285 2.26379C4.39116 2.35785 3.71902 2.94826 3.5558 3.80967C3.30175 5.15055 3 7.65725 3 12C3 16.3428 3.30175 18.8494 3.5558 20.1903C3.71902 21.0518 4.39116 21.6422 5.26285 21.7362C6.43945 21.8631 8.51575 22 12 22C15.4843 22 17.5606 21.8631 18.7372 21.7362C19.6089 21.6422 20.281 21.0518 20.4442 20.1903C20.6982 18.8494 21 16.3428 21 12C21 10.5445 20.9661 9.2952 20.9114 8.22695Z" fill="currentColor"/>
+<path d="M20.9114 8.22695C19.4717 8.5891 17.7718 8.61315 16.3035 8.1646C15.6828 7.97495 15.1988 7.4914 14.9893 6.8771C14.4674 5.34675 14.3384 3.47357 14.722 2.03174C14.722 2.03174 15.9461 2.49994 18.1961 4.74994C20.4461 6.99995 20.9114 8.22695 20.9114 8.22695Z" fill="currentColor"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_chat.svg b/apps/react-admin/src/assets/icons/ic_chat.svg
new file mode 100644
index 000000000..d8b905cc6
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_chat.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<g id="icons/notification/ic_chat">
+<g id="stack">
+<path id="Path" fill-rule="evenodd" clip-rule="evenodd" d="M15.9546 7.27183C20.3369 7.20489 23.9136 10.654 23.9985 15.0359C24.0109 15.6793 23.9466 16.3055 23.8141 16.9061C23.5898 17.9232 23.4564 18.9581 23.4564 19.9997V22.0128C23.4564 22.3213 23.2064 22.5713 22.898 22.5713H20.8848C19.8433 22.5713 18.8083 22.7047 17.7913 22.929C17.1907 23.0615 16.5645 23.1258 15.9211 23.1133C11.5392 23.0285 8.09012 19.4519 8.15696 15.0697C8.22216 10.7924 11.6773 7.33718 15.9546 7.27183Z" fill="url(#paint0_linear_0_8824)"/>
+<path id="Path_2" fill-rule="evenodd" clip-rule="evenodd" d="M9.80149 0.0425493C4.4627 -0.0390131 0.105251 4.16291 0.00184497 9.50132C-0.0132957 10.285 0.0650325 11.048 0.22647 11.7797C0.499751 13.0187 0.66222 14.2796 0.66222 15.5485V18.0011C0.66222 18.3768 0.966814 18.6815 1.34261 18.6815H3.7952C5.06402 18.6815 6.32491 18.8439 7.56395 19.1172C8.29567 19.2786 9.05861 19.357 9.84231 19.3418C15.1806 19.2384 19.3825 14.8811 19.3012 9.54242C19.2217 4.33147 15.0124 0.122096 9.80149 0.0425493Z" fill="url(#paint1_linear_0_8824)"/>
+<g id="Vector" opacity="0.48">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.19693 9.17512C5.9243 8.88543 5.53843 8.70351 5.10915 8.70351C4.28354 8.70351 3.61426 9.37279 3.61426 10.1984C3.61426 10.6276 3.79613 11.0135 4.08587 11.2862L7.31059 14.5109C7.58326 14.8006 7.96913 14.9825 8.39837 14.9825C9.22398 14.9825 9.89326 14.3132 9.89326 13.4876C9.89326 13.0584 9.71134 12.6725 9.42165 12.3998L6.19693 9.17512Z" fill="#006C9C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4245 9.17512C10.1518 8.88543 9.76597 8.70351 9.33669 8.70351C8.51108 8.70351 7.8418 9.37279 7.8418 10.1984C7.8418 10.6276 8.02367 11.0135 8.31341 11.2862L11.5381 14.5109C11.8108 14.8006 12.1967 14.9825 12.6259 14.9825C13.4515 14.9825 14.1208 14.3132 14.1208 13.4876C14.1208 13.0584 13.9389 12.6725 13.6492 12.3998L10.4245 9.17512Z" fill="#006C9C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6518 9.1751C14.3792 8.88541 13.9933 8.70349 13.564 8.70349C12.7384 8.70349 12.0692 9.37277 12.0692 10.1984C12.0692 10.6276 12.2511 11.0135 12.5408 11.2862L15.7655 14.5109C16.0382 14.8006 16.424 14.9825 16.8533 14.9825C17.6789 14.9825 18.3482 14.3132 18.3482 13.4876C18.3482 13.0584 18.1662 12.6725 17.8765 12.3998L14.6518 9.1751Z" fill="#006C9C"/>
+</g>
+<g id="Vector_2">
+<path d="M6.60404 10.1981C6.60404 11.0237 5.93475 11.693 5.10915 11.693C4.28354 11.693 3.61426 11.0237 3.61426 10.1981C3.61426 9.37253 4.28354 8.70325 5.10915 8.70325C5.93475 8.70325 6.60404 9.37253 6.60404 10.1981Z" fill="white"/>
+<path d="M10.8314 10.1982C10.8314 11.0238 10.1621 11.6931 9.33649 11.6931C8.51088 11.6931 7.84159 11.0238 7.84159 10.1982C7.84159 9.37257 8.51088 8.70329 9.33649 8.70329C10.1621 8.70329 10.8314 9.37257 10.8314 10.1982Z" fill="white"/>
+<path d="M15.0592 10.1982C15.0592 11.0238 14.3899 11.6931 13.5643 11.6931C12.7387 11.6931 12.0694 11.0238 12.0694 10.1982C12.0694 9.37257 12.7387 8.70329 13.5643 8.70329C14.3899 8.70329 15.0592 9.37257 15.0592 10.1982Z" fill="white"/>
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_8824" x1="8.15601" y1="7.27087" x2="24" y2="23.1149" gradientUnits="userSpaceOnUse">
+<stop stop-color="#77ED8B"/>
+<stop offset="1" stop-color="#22C55E"/>
+</linearGradient>
+<linearGradient id="paint1_linear_0_8824" x1="0" y1="0.0413818" x2="19.3023" y2="19.3437" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00B8D9"/>
+<stop offset="1" stop-color="#006C9C"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_decline.svg b/apps/react-admin/src/assets/icons/ic_decline.svg
new file mode 100644
index 000000000..0931d3895
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_decline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M5 6.25a.75.75 0 0 0-.488 1.32l7 6c.28.24.695.24.976 0l7-6A.75.75 0 0 0 19 6.25H5Z" opacity=".5"></path><path fill-rule="evenodd" d="M4.43 10.512a.75.75 0 0 1 1.058-.081L12 16.012l6.512-5.581a.75.75 0 1 1 .976 1.139l-7 6a.75.75 0 0 1-.976 0l-7-6a.75.75 0 0 1-.081-1.058Z" clip-rule="evenodd"></path></g></svg>
diff --git a/apps/react-admin/src/assets/icons/ic_delivery.svg b/apps/react-admin/src/assets/icons/ic_delivery.svg
new file mode 100644
index 000000000..e0b077c7d
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_delivery.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<g id="icons/notification/ic_shipping">
+<g id="stack">
+<path id="Combined Shape" d="M23.9846 13.5663L20.4739 9.74142C20.2159 9.46006 19.8516 9.29989 19.4698 9.29993H15.1113V19.7723H16.7785C16.7785 18.4551 17.8463 17.3874 19.1634 17.3874C20.4806 17.3874 21.5484 18.4551 21.5484 19.7723H22.6217C22.9832 19.7724 23.3299 19.6288 23.5855 19.3732C23.8411 19.1175 23.9847 18.7708 23.9846 18.4093V13.5663Z" fill="url(#paint0_linear_0_8865)"/>
+<path id="Path" fill-rule="evenodd" clip-rule="evenodd" d="M15.1111 13.5665V19.7724H7.85246C7.85246 18.4551 6.78457 17.3872 5.46725 17.3872C4.14994 17.3872 3.08204 18.4551 3.08204 19.7724H1.3786C1.0171 19.7725 0.670387 19.6289 0.414766 19.3733C0.159146 19.1177 0.0155658 18.7709 0.015625 18.4094V7.03009C0.0155658 6.66859 0.159146 6.32188 0.414766 6.06626C0.670387 5.81063 1.0171 5.66706 1.3786 5.66711H2.85711C2.94212 8.0702 4.91485 9.97439 7.31944 9.97439C9.72402 9.97439 11.6968 8.0702 11.7818 5.66711H13.7481C14.5008 5.66718 15.111 6.27737 15.1111 7.03009V13.5665Z" fill="#FFAB00"/>
+<path id="Path_2" fill-rule="evenodd" clip-rule="evenodd" d="M11.7846 5.517C11.7846 5.56723 11.784 5.61746 11.7818 5.66714C11.6968 8.07022 9.72407 9.97441 7.31949 9.97441C4.9149 9.97441 2.94216 8.07022 2.85716 5.66714C2.85493 5.61746 2.85437 5.56723 2.85437 5.517C2.85437 3.05098 4.85347 1.05188 7.31949 1.05188C9.7855 1.05188 11.7846 3.05098 11.7846 5.517V5.517Z" fill="#61F3F3"/>
+<g id="Vector">
+<path d="M21.5481 19.7724C21.5481 21.0895 20.4803 22.1573 19.1631 22.1573C17.846 22.1573 16.7782 21.0895 16.7782 19.7724C16.7782 18.4552 17.846 17.3875 19.1631 17.3875C20.4803 17.3875 21.5481 18.4552 21.5481 19.7724Z" fill="#B76E00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.46696 17.3875C6.78412 17.3875 7.85189 18.4552 7.85189 19.7724C7.85189 21.0895 6.78412 22.1573 5.46696 22.1573C4.1498 22.1573 3.08203 21.0895 3.08203 19.7724C3.08206 18.4552 4.14981 17.3875 5.46696 17.3875Z" fill="#B76E00"/>
+</g>
+<path id="Path_3" fill-rule="evenodd" clip-rule="evenodd" d="M8.80965 7.30308C8.71048 7.30321 8.61499 7.26548 8.54269 7.1976L7.05246 5.80225C6.97358 5.72837 6.92882 5.62512 6.92883 5.51704V2.62141C6.92883 2.40563 7.10375 2.23071 7.31953 2.23071C7.53531 2.23071 7.71023 2.40563 7.71023 2.62141V5.34792L9.07678 6.62746C9.19385 6.73707 9.23205 6.90709 9.17312 7.05624C9.11418 7.20539 8.97008 7.30338 8.80971 7.30336L8.80965 7.30308Z" fill="#006C9C"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_8865" x1="15.1113" y1="9.29993" x2="25.4416" y2="18.0528" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD666"/>
+<stop offset="1" stop-color="#FFAB00"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_disabled.svg b/apps/react-admin/src/assets/icons/ic_disabled.svg
new file mode 100644
index 000000000..216410112
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_disabled.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path opacity="0.32" fill-rule="evenodd" clip-rule="evenodd" d="M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM12 18.3C15.4794 18.3 18.3 15.4794 18.3 12C18.3 8.52061 15.4794 5.7 12 5.7C8.52061 5.7 5.7 8.52061 5.7 12C5.7 15.4794 8.52061 18.3 12 18.3Z" fill="currentColor"/>
+<path d="M18.603 3.01129C19.2181 2.39622 20.2153 2.39622 20.8304 3.01129C21.4455 3.62637 21.4455 4.62361 20.8304 5.23868L5.2387 20.8304C4.62362 21.4455 3.62639 21.4455 3.01131 20.8304C2.39623 20.2153 2.39623 19.2181 3.01131 18.603L18.603 3.01129Z" fill="currentColor"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_external.svg b/apps/react-admin/src/assets/icons/ic_external.svg
new file mode 100644
index 000000000..d38340e5e
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_external.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path opacity="0.32" fill-rule="evenodd" clip-rule="evenodd" d="M3.77688 21.3755C2.93261 21.1957 2.36966 20.5161 2.28099 19.6575C2.14952 18.3844 2 16.0469 2 12C2 7.95305 2.14952 5.6156 2.28099 4.34251C2.36966 3.48389 2.93261 2.80424 3.77688 2.62451C5.1095 2.34081 7.6216 2 12 2C16.3784 2 18.8905 2.34081 20.2231 2.62451C21.0674 2.80424 21.6304 3.48389 21.719 4.34251C21.8505 5.6156 22 7.95305 22 12C22 16.0469 21.8505 18.3844 21.719 19.6575C21.6304 20.5161 21.0674 21.1957 20.2232 21.3755C18.8905 21.6592 16.3784 22 12 22C7.6216 22 5.1095 21.6592 3.77688 21.3755ZM17 8.37267V15.236C16.9936 15.5958 16.8463 15.9387 16.59 16.1909C16.3336 16.4431 15.9886 16.5844 15.6293 16.5844C15.27 16.5844 14.925 16.4431 14.6686 16.1909C14.4123 15.9387 14.265 15.5958 14.2586 15.236V11.6671L9.3496 16.5953C8.81262 17.1344 7.94025 17.135 7.40262 16.5965C6.86689 16.06 6.86528 15.1919 7.40088 14.6553C9.12404 12.9289 11.6962 10.3625 12.3396 9.74535H8.77583C8.41654 9.73891 8.07415 9.59146 7.82234 9.33474C7.57053 9.07801 7.42944 8.73254 7.42944 8.37267C7.42944 8.01281 7.57053 7.66734 7.82234 7.41061C8.07415 7.15389 8.41654 7.00644 8.77583 7H15.6293C15.9925 7.00109 16.3405 7.14606 16.5973 7.40325C16.8542 7.66044 16.9989 8.00895 17 8.37267Z" fill="currentColor"/>
+<path d="M16.9999 15.236V8.37267C16.9988 8.00895 16.854 7.66044 16.5972 7.40325C16.3404 7.14606 15.9924 7.00109 15.6292 7H8.77571C8.41642 7.00644 8.07403 7.15389 7.82222 7.41061C7.57041 7.66734 7.42931 8.01281 7.42931 8.37267C7.42931 8.73254 7.57041 9.07801 7.82222 9.33474C8.07403 9.59146 8.41642 9.73891 8.77571 9.74535H12.3395C11.6961 10.3625 9.12392 12.9289 7.40076 14.6553C6.86515 15.1919 6.86677 16.06 7.40249 16.5965C7.94013 17.135 8.8125 17.1344 9.34947 16.5953L14.2585 11.6671V15.236C14.2649 15.5958 14.4122 15.9387 14.6685 16.1909C14.9249 16.4431 15.2698 16.5844 15.6292 16.5844C15.9885 16.5844 16.3335 16.4431 16.5899 16.1909C16.8462 15.9387 16.9935 15.5958 16.9999 15.236Z" fill="currentColor"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_file.svg b/apps/react-admin/src/assets/icons/ic_file.svg
new file mode 100644
index 000000000..f5295c2e2
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_file.svg
@@ -0,0 +1,18 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.172 0.990234C23.7022 0.990234 24.2107 1.20074 24.5857 1.57549L36.4137 13.3946C36.7891 13.7697 37 14.2786 37 14.8093V36.3236C37 38.9009 34.8689 40.9902 32.24 40.9902H7.76C5.13112 40.9902 3 38.9009 3 36.3236V5.6569C3 3.07957 5.13112 0.990234 7.76 0.990234H23.172Z" fill="#C4CDD5"/>
+<g filter="url(#filter0_d_1995_147665)">
+<path d="M35.1548 13.1284C35.4678 13.4439 35.2443 13.9805 34.7998 13.9805H29C26.4227 13.9805 24.0976 11.7135 24.0976 9.20054V3.19458C24.0976 2.74814 24.6382 2.52551 24.9526 2.84248L35.1548 13.1284Z" fill="white" fill-opacity="0.24" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_d_1995_147665" x="22.0977" y="2.6936" width="15.2031" height="15.2869" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1995_147665"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1995_147665" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_file_ai.svg b/apps/react-admin/src/assets/icons/ic_file_ai.svg
new file mode 100644
index 000000000..4d8098a87
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_file_ai.svg
@@ -0,0 +1,25 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1255_158111)">
+<path d="M23.172 0C23.7022 0 24.2107 0.210507 24.5857 0.585255L36.4137 12.4044C36.7891 12.7795 37 13.2884 37 13.8191V35.3333C37 37.9107 34.8689 40 32.24 40H7.76C5.13112 40 3 37.9107 3 35.3333V4.66667C3 2.08934 5.13112 0 7.76 0H23.172Z" fill="#3B1F03"/>
+<g filter="url(#filter0_d_1255_158111)">
+<path d="M35.1548 12.1381C35.4678 12.4537 35.2443 12.9902 34.7998 12.9902H29C26.4227 12.9902 24.0976 10.7233 24.0976 8.21031V2.20435C24.0976 1.75791 24.6382 1.53528 24.9526 1.85224L35.1548 12.1381Z" fill="white" fill-opacity="0.24" shape-rendering="crispEdges"/>
+</g>
+<path d="M13.9998 31L17.0718 22.324H19.4598L22.5318 31H20.2278L19.6518 29.32H16.9158L16.3278 31H13.9998ZM17.4078 27.328H19.1238L18.2718 24.556L17.4078 27.328Z" fill="#FF860D"/>
+<path d="M23.5243 22.324H25.8583V31H23.5243V22.324Z" fill="#FF860D"/>
+</g>
+<defs>
+<filter id="filter0_d_1255_158111" x="22.0977" y="1.70337" width="15.2031" height="15.2869" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1255_158111"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1255_158111" result="shape"/>
+</filter>
+<clipPath id="clip0_1255_158111">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_file_audio.svg b/apps/react-admin/src/assets/icons/ic_file_audio.svg
new file mode 100644
index 000000000..329f232a7
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_file_audio.svg
@@ -0,0 +1,24 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1255_158073)">
+<path d="M23.172 0C23.7022 0 24.2107 0.210507 24.5857 0.585255L36.4137 12.4044C36.7891 12.7795 37 13.2884 37 13.8191V35.3333C37 37.9107 34.8689 40 32.24 40H7.76C5.13112 40 3 37.9107 3 35.3333V4.66667C3 2.08934 5.13112 0 7.76 0H23.172Z" fill="#8E33FF"/>
+<g filter="url(#filter0_d_1255_158073)">
+<path d="M35.1548 12.1381C35.4678 12.4537 35.2443 12.9902 34.7998 12.9902H29C26.4227 12.9902 24.0976 10.7233 24.0976 8.21031V2.20435C24.0976 1.75791 24.6382 1.53528 24.9526 1.85224L35.1548 12.1381Z" fill="white" fill-opacity="0.24" shape-rendering="crispEdges"/>
+</g>
+<path d="M22.9233 16.7978V26.221C22.9233 26.5014 22.8279 26.751 22.6372 26.9697C22.4465 27.1885 22.2053 27.3582 21.9137 27.4787C21.622 27.5993 21.3317 27.6891 21.0429 27.748C20.754 27.8069 20.4833 27.8363 20.2309 27.8363C19.9786 27.8363 19.7079 27.8069 19.419 27.748C19.1301 27.6891 18.8399 27.5994 18.5482 27.4787C18.2566 27.3581 18.0154 27.1885 17.8247 26.9697C17.6339 26.751 17.5386 26.5014 17.5386 26.221C17.5386 25.9405 17.6339 25.6909 17.8247 25.4722C18.0154 25.2535 18.2566 25.0838 18.5482 24.9632C18.8399 24.8425 19.1301 24.7528 19.419 24.6939C19.7079 24.6351 19.9786 24.6056 20.2309 24.6056C20.8199 24.6056 21.3583 24.715 21.8463 24.9337V20.4157L15.3848 22.4097V28.3749C15.3848 28.6553 15.2894 28.9049 15.0987 29.1237C14.908 29.3424 14.6668 29.5121 14.3751 29.6327C14.0834 29.7532 13.7932 29.843 13.5043 29.9019C13.2154 29.9608 12.9448 29.9902 12.6924 29.9902C12.44 29.9902 12.1693 29.9608 11.8805 29.9019C11.5916 29.843 11.3013 29.7533 11.0097 29.6327C10.718 29.512 10.4768 29.3424 10.2861 29.1237C10.0954 28.905 10 28.6554 10 28.3749C10 28.0944 10.0954 27.8448 10.2861 27.6261C10.4768 27.4074 10.718 27.2377 11.0097 27.1171C11.3013 26.9965 11.5916 26.9067 11.8805 26.8478C12.1693 26.789 12.44 26.7595 12.6924 26.7595C13.2813 26.7595 13.8198 26.8689 14.3078 27.0876V18.9518C14.3078 18.7779 14.361 18.6195 14.4676 18.4764C14.5742 18.3334 14.7116 18.2338 14.8799 18.1778L21.8799 16.0239C21.9472 16.0015 22.0257 15.9902 22.1155 15.9902C22.3399 15.9902 22.5306 16.0688 22.6876 16.2258C22.8446 16.3829 22.9233 16.5735 22.9233 16.7978Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_1255_158073" x="22.0977" y="1.70337" width="15.2031" height="15.2869" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1255_158073"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1255_158073" result="shape"/>
+</filter>
+<clipPath id="clip0_1255_158073">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_file_excel.svg b/apps/react-admin/src/assets/icons/ic_file_excel.svg
new file mode 100644
index 000000000..cb80eb2bf
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_file_excel.svg
@@ -0,0 +1,19 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.172 0C23.7022 0 24.2107 0.210507 24.5857 0.585255L36.4137 12.4044C36.7891 12.7795 37 13.2884 37 13.8191V35.3333C37 37.9107 34.8689 40 32.24 40H7.76C5.13112 40 3 37.9107 3 35.3333V4.66667C3 2.08934 5.13112 0 7.76 0H23.172Z" fill="#00A76F"/>
+<g filter="url(#filter0_d_1255_158054)">
+<path d="M35.1548 12.1381C35.4678 12.4537 35.2443 12.9902 34.7998 12.9902H29C26.4227 12.9902 24.0976 10.7233 24.0976 8.21031V2.20435C24.0976 1.75791 24.6382 1.53528 24.9526 1.85224L35.1548 12.1381Z" fill="white" fill-opacity="0.24" shape-rendering="crispEdges"/>
+</g>
+<path d="M23.9959 16L23.9956 16.0112L24 16.0113V30H22.8337L22.8336 29.9983H19.3263L18.1603 30L18.1601 29.9983H15.8517L14.6855 30L14.6854 29.9983H11.1701L10.0041 30L10.0039 29.9983L10.0017 28.8328L10.0039 28.8326V25.3104L10.0009 24.1449L10.0039 24.1447V20.6224L10 20.6227V19.457L10.0039 19.4568V17.1657L10 17.1657V16H23.9959ZM14.6854 25.3104H11.1701V28.8326H14.6854V25.3104ZM18.1601 25.3104H15.8517V28.8326H18.1601V25.3104ZM22.8336 25.3104H19.3263V28.8326H22.8336V25.3104ZM14.6854 20.6224H11.1701V24.1447H14.6854V20.6224ZM18.1601 20.6224H15.8517V24.1447H18.1601V20.6224ZM22.8336 20.6224H19.3263V24.1447H22.8336V20.6224ZM22.8336 17.1657H11.1701V19.4568H22.8336V17.1657Z" fill="white"/>
+<defs>
+<filter id="filter0_d_1255_158054" x="22.0977" y="1.70337" width="15.2031" height="15.2869" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1255_158054"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1255_158054" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_file_img.svg b/apps/react-admin/src/assets/icons/ic_file_img.svg
new file mode 100644
index 000000000..a95194a99
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_file_img.svg
@@ -0,0 +1,26 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1255_158091)">
+<path d="M23.172 0C23.7022 0 24.2107 0.210507 24.5857 0.585255L36.4137 12.4044C36.7891 12.7795 37 13.2884 37 13.8191V35.3333C37 37.9107 34.8689 40 32.24 40H7.76C5.13112 40 3 37.9107 3 35.3333V4.66667C3 2.08934 5.13112 0 7.76 0H23.172Z" fill="#22C55E"/>
+<g filter="url(#filter0_d_1255_158091)">
+<path d="M35.1548 12.1381C35.4678 12.4537 35.2443 12.9902 34.7998 12.9902H29C26.4227 12.9902 24.0976 10.7233 24.0976 8.21031V2.20435C24.0976 1.75791 24.6382 1.53528 24.9526 1.85224L35.1548 12.1381Z" fill="white" fill-opacity="0.24" shape-rendering="crispEdges"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9629 16H17.0371C18.5407 16 19.7186 16 20.638 16.1237C21.5783 16.25 22.3207 16.5144 22.9034 17.0966C23.4862 17.6793 23.75 18.4217 23.8763 19.3626C24 20.2814 24 21.4593 24 22.9629V23.0202C24 24.2633 24 25.2804 23.9323 26.1087C23.8646 26.9421 23.7259 27.6369 23.4146 28.2152C23.2779 28.4698 23.1086 28.6983 22.9034 28.9034C22.3207 29.4862 21.5783 29.75 20.6374 29.8763C19.7186 30 18.5407 30 17.0371 30H16.9629C15.4593 30 14.2814 30 13.362 29.8763C12.4217 29.75 11.6793 29.4856 11.0966 28.9034C10.5802 28.3871 10.3132 27.7444 10.1719 26.946C10.0319 26.1627 10.0065 25.1879 10.0013 23.978C10 23.67 10 23.3445 10 23.0007V22.9629C10 21.4593 10 20.2814 10.1237 19.362C10.25 18.4217 10.5144 17.6793 11.0966 17.0966C11.6793 16.5138 12.4217 16.25 13.3626 16.1237C14.2814 16 15.4593 16 16.9629 16ZM13.4922 17.0913C12.66 17.2033 12.158 17.4169 11.7874 17.7874C11.4163 18.1586 11.2033 18.66 11.0913 19.4928C10.978 20.3393 10.9767 21.4515 10.9767 23C10.9767 23.3445 10.9767 23.6681 10.978 23.9735C10.9833 25.1938 11.0106 26.0872 11.133 26.7754C11.2528 27.4494 11.4573 27.8824 11.7874 28.2126C12.1586 28.5837 12.66 28.7967 13.4928 28.9087C14.3393 29.022 15.4515 29.0233 17 29.0233C18.5485 29.0233 19.6607 29.022 20.5072 28.9087C21.34 28.7967 21.842 28.5831 22.2132 28.2126C22.35 28.0758 22.4613 27.9247 22.5544 27.7522C22.7706 27.3511 22.895 26.8145 22.9588 26.0299C23.0226 25.2452 23.0233 24.2672 23.0233 23C23.0233 21.4515 23.022 20.3393 22.9087 19.4928C22.7967 18.66 22.5831 18.158 22.2126 17.7868C21.8414 17.4163 21.34 17.2033 20.5072 17.0913C19.6607 16.978 18.5485 16.9767 17 16.9767C15.4515 16.9767 14.3387 16.978 13.4922 17.0913Z" fill="white"/>
+<path d="M23.0226 23.8334L22.878 23.8139C21.0261 23.5573 19.3312 24.5198 18.4684 25.9712C17.3549 23.1549 14.4136 21.234 11.1272 21.7061L10.98 21.7269C10.9767 22.1157 10.9767 22.5383 10.9767 23C10.9767 23.3445 10.9767 23.6681 10.978 23.9735C10.9833 25.1938 11.0106 26.0872 11.133 26.7754C11.2528 27.4494 11.4573 27.8824 11.7874 28.2126C12.1586 28.5837 12.66 28.7967 13.4928 28.9087C14.3393 29.022 15.4515 29.0233 17 29.0233C18.5485 29.0233 19.6607 29.022 20.5072 28.9087C21.34 28.7967 21.842 28.5831 22.2132 28.2126C22.35 28.0758 22.4613 27.9247 22.5544 27.7522C22.7706 27.3511 22.895 26.8145 22.9588 26.0299C23.0083 25.4269 23.0193 24.7092 23.0226 23.8334Z" fill="white"/>
+<path d="M20.907 20.3953C20.907 20.7407 20.7698 21.072 20.5255 21.3162C20.2813 21.5605 19.95 21.6977 19.6047 21.6977C19.2593 21.6977 18.928 21.5605 18.6838 21.3162C18.4395 21.072 18.3023 20.7407 18.3023 20.3953C18.3023 20.05 18.4395 19.7187 18.6838 19.4745C18.928 19.2302 19.2593 19.093 19.6047 19.093C19.95 19.093 20.2813 19.2302 20.5255 19.4745C20.7698 19.7187 20.907 20.05 20.907 20.3953Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_1255_158091" x="22.0977" y="1.70337" width="15.2031" height="15.2869" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1255_158091"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1255_158091" result="shape"/>
+</filter>
+<clipPath id="clip0_1255_158091">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_file_pdf.svg b/apps/react-admin/src/assets/icons/ic_file_pdf.svg
new file mode 100644
index 000000000..8ed54c947
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_file_pdf.svg
@@ -0,0 +1,19 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.172 0C23.7022 0 24.2107 0.210507 24.5857 0.585255L36.4137 12.4044C36.7891 12.7795 37 13.2884 37 13.8191V35.3333C37 37.9107 34.8689 40 32.24 40H7.76C5.13112 40 3 37.9107 3 35.3333V4.66667C3 2.08934 5.13112 0 7.76 0H23.172Z" fill="#E94848"/>
+<g filter="url(#filter0_d_1255_158068)">
+<path d="M35.1548 12.1381C35.4678 12.4537 35.2443 12.9902 34.7998 12.9902H29C26.4227 12.9902 24.0976 10.7233 24.0976 8.21031V2.20435C24.0976 1.75791 24.6382 1.53528 24.9526 1.85224L35.1548 12.1381Z" fill="white" fill-opacity="0.24" shape-rendering="crispEdges"/>
+</g>
+<path d="M16.0667 15.9902C15.2131 15.9902 14.5111 16.6922 14.5111 17.5458C14.5111 18.6069 15.1007 19.9243 15.7215 21.1625C15.2362 22.6816 14.6856 24.3096 13.9813 25.6833C12.5397 26.2489 11.2542 26.6693 10.4812 27.2923C10.4692 27.3046 10.4578 27.3176 10.4472 27.3312C10.1648 27.62 10 28.0133 10 28.4347C10 29.2883 10.702 29.9902 11.5556 29.9902C11.9718 29.9902 12.3736 29.8349 12.6639 29.5382C12.6739 29.5304 12.6837 29.5223 12.6931 29.5138C13.262 28.8345 13.9328 27.6021 14.5306 26.4757C15.9081 25.9338 17.3519 25.3824 18.7451 25.0513C19.7622 25.871 21.2336 26.4125 22.4444 26.4125C23.298 26.4125 24 25.7105 24 24.8569C24 24.0033 23.298 23.3013 22.4444 23.3013C21.4734 23.3013 20.0623 23.648 18.9833 24.0111C18.1088 23.1901 17.3053 22.1647 16.7278 21.075C17.1404 19.8038 17.6222 18.532 17.6222 17.5458C17.6222 16.6922 16.9203 15.9902 16.0667 15.9902ZM16.0667 16.9236C16.4158 16.9236 16.6889 17.1966 16.6889 17.5458C16.6889 18.0127 16.4389 18.8723 16.1493 19.7965C15.7624 18.8974 15.4444 18.0348 15.4444 17.5458C15.4444 17.1966 15.7175 16.9236 16.0667 16.9236ZM16.334 22.2465C16.8019 22.9907 17.3498 23.6832 17.9479 24.2979C17.0254 24.5501 16.1245 24.8733 15.2354 25.2118C15.6648 24.2426 16.0086 23.2368 16.334 22.2465ZM22.4444 24.2347C22.7936 24.2347 23.0667 24.5077 23.0667 24.8569C23.0667 25.2061 22.7936 25.4791 22.4444 25.4791C21.7435 25.4791 20.7472 25.1627 19.9507 24.7208C20.8649 24.4623 21.8625 24.2347 22.4444 24.2347ZM13.1597 27.0201C12.7223 27.8009 12.2875 28.5297 11.9833 28.8965C11.8794 28.9958 11.7412 29.0569 11.5556 29.0569C11.2064 29.0569 10.9333 28.7838 10.9333 28.4347C10.9333 28.2704 11.0032 28.1072 11.0986 28.002C11.4635 27.7196 12.2574 27.3812 13.1597 27.0201Z" fill="white"/>
+<defs>
+<filter id="filter0_d_1255_158068" x="22.0977" y="1.70337" width="15.2031" height="15.2869" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1255_158068"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1255_158068" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_file_ppt.svg b/apps/react-admin/src/assets/icons/ic_file_ppt.svg
new file mode 100644
index 000000000..f2d7f144a
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_file_ppt.svg
@@ -0,0 +1,20 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.172 0C23.7022 0 24.2107 0.210507 24.5857 0.585255L36.4137 12.4044C36.7891 12.7795 37 13.2884 37 13.8191V35.3333C37 37.9107 34.8689 40 32.24 40H7.76C5.13112 40 3 37.9107 3 35.3333V4.66667C3 2.08934 5.13112 0 7.76 0H23.172Z" fill="#F56B36"/>
+<g filter="url(#filter0_d_1255_158059)">
+<path d="M35.1548 12.1381C35.4678 12.4537 35.2443 12.9902 34.7998 12.9902H29C26.4227 12.9902 24.0976 10.7233 24.0976 8.21031V2.20435C24.0976 1.75791 24.6382 1.53528 24.9526 1.85224L35.1548 12.1381Z" fill="white" fill-opacity="0.24" shape-rendering="crispEdges"/>
+</g>
+<path opacity="0.48" d="M16.4936 17.0127C12.9063 17.0127 10 19.9206 10 23.5063C10 27.0921 12.9079 29.9999 16.4936 29.9999C20.0794 29.9999 22.9888 27.0921 22.9888 23.5048H16.4936V17.0127Z" fill="white"/>
+<path d="M17.5049 16V22.4952H23.9985C24.0001 18.9079 21.0922 16 17.5049 16Z" fill="white"/>
+<defs>
+<filter id="filter0_d_1255_158059" x="22.0977" y="1.70337" width="15.2031" height="15.2869" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1255_158059"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1255_158059" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_file_psd.svg b/apps/react-admin/src/assets/icons/ic_file_psd.svg
new file mode 100644
index 000000000..7ecbee0c2
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_file_psd.svg
@@ -0,0 +1,25 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1255_158101)">
+<path d="M23.172 0C23.7022 0 24.2107 0.210507 24.5857 0.585255L36.4137 12.4044C36.7891 12.7795 37 13.2884 37 13.8191V35.3333C37 37.9107 34.8689 40 32.24 40H7.76C5.13112 40 3 37.9107 3 35.3333V4.66667C3 2.08934 5.13112 0 7.76 0H23.172Z" fill="#002542"/>
+<g filter="url(#filter0_d_1255_158101)">
+<path d="M35.1548 12.1381C35.4678 12.4537 35.2443 12.9902 34.7998 12.9902H29C26.4227 12.9902 24.0976 10.7233 24.0976 8.21031V2.20435C24.0976 1.75791 24.6382 1.53528 24.9526 1.85224L35.1548 12.1381Z" fill="white" fill-opacity="0.24" shape-rendering="crispEdges"/>
+</g>
+<path d="M12 31V22.324H15.432C16.072 22.324 16.648 22.438 17.16 22.666C17.676 22.894 18.084 23.228 18.384 23.668C18.684 24.104 18.834 24.636 18.834 25.264C18.834 25.836 18.708 26.328 18.456 26.74C18.204 27.148 17.846 27.462 17.382 27.682C16.918 27.902 16.368 28.012 15.732 28.012H14.334V31H12ZM14.31 26.272H15.66C15.956 26.272 16.202 26.154 16.398 25.918C16.594 25.682 16.692 25.424 16.692 25.144C16.692 24.844 16.584 24.588 16.368 24.376C16.156 24.16 15.92 24.052 15.66 24.052H14.31V26.272Z" fill="#31A8FF"/>
+<path d="M23.4796 31.12C23.0316 31.12 22.5876 31.064 22.1476 30.952C21.7116 30.84 21.3096 30.67 20.9416 30.442C20.5776 30.214 20.2776 29.928 20.0416 29.584C19.8056 29.236 19.6696 28.828 19.6336 28.36H22.0096C22.0536 28.564 22.1396 28.738 22.2676 28.882C22.3956 29.026 22.5616 29.138 22.7656 29.218C22.9696 29.294 23.2036 29.332 23.4676 29.332C23.7076 29.332 23.9336 29.308 24.1456 29.26C24.3616 29.212 24.5356 29.132 24.6676 29.02C24.8036 28.904 24.8716 28.744 24.8716 28.54C24.8716 28.364 24.8016 28.228 24.6616 28.132C24.5256 28.036 24.3476 27.962 24.1276 27.91C23.9116 27.858 23.6836 27.812 23.4436 27.772L22.1176 27.544C21.4536 27.436 20.9176 27.168 20.5096 26.74C20.1056 26.308 19.8956 25.724 19.8796 24.988C19.8716 24.404 20.0276 23.906 20.3476 23.494C20.6716 23.078 21.1036 22.762 21.6436 22.546C22.1876 22.326 22.7876 22.216 23.4436 22.216C24.2356 22.216 24.9056 22.332 25.4536 22.564C26.0016 22.796 26.4176 23.118 26.7016 23.53C26.9896 23.942 27.1396 24.416 27.1516 24.952H24.8356C24.8116 24.728 24.7436 24.548 24.6316 24.412C24.5196 24.272 24.3676 24.172 24.1756 24.112C23.9876 24.048 23.7596 24.016 23.4916 24.016C23.2676 24.016 23.0796 24.038 22.9276 24.082C22.7796 24.122 22.6616 24.176 22.5736 24.244C22.4856 24.308 22.4216 24.38 22.3816 24.46C22.3456 24.54 22.3276 24.62 22.3276 24.7C22.3276 24.896 22.3896 25.054 22.5136 25.174C22.6376 25.294 22.8856 25.388 23.2576 25.456L24.5896 25.684C25.2096 25.792 25.6956 25.96 26.0476 26.188C26.3996 26.412 26.6576 26.666 26.8216 26.95C26.9896 27.234 27.0956 27.516 27.1396 27.796C27.1836 28.076 27.2056 28.324 27.2056 28.54C27.2056 29.032 27.0416 29.474 26.7136 29.866C26.3896 30.254 25.9476 30.56 25.3876 30.784C24.8276 31.008 24.1916 31.12 23.4796 31.12Z" fill="#31A8FF"/>
+</g>
+<defs>
+<filter id="filter0_d_1255_158101" x="22.0977" y="1.70337" width="15.2031" height="15.2869" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1255_158101"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1255_158101" result="shape"/>
+</filter>
+<clipPath id="clip0_1255_158101">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_file_txt.svg b/apps/react-admin/src/assets/icons/ic_file_txt.svg
new file mode 100644
index 000000000..1d34c3481
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_file_txt.svg
@@ -0,0 +1,26 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1255_158096)">
+<path d="M23.172 0C23.7022 0 24.2107 0.210507 24.5857 0.585255L36.4137 12.4044C36.7891 12.7795 37 13.2884 37 13.8191V35.3333C37 37.9107 34.8689 40 32.24 40H7.76C5.13112 40 3 37.9107 3 35.3333V4.66667C3 2.08934 5.13112 0 7.76 0H23.172Z" fill="#454F5B"/>
+<g filter="url(#filter0_d_1255_158096)">
+<path d="M35.1548 12.1381C35.4678 12.4537 35.2443 12.9902 34.7998 12.9902H29C26.4227 12.9902 24.0976 10.7233 24.0976 8.21031V2.20435C24.0976 1.75791 24.6382 1.53528 24.9526 1.85224L35.1548 12.1381Z" fill="white" fill-opacity="0.24" shape-rendering="crispEdges"/>
+</g>
+<path d="M7.99976 24.376V22.324H15.2838V24.376H12.7998V31H10.4598V24.376H7.99976Z" fill="white"/>
+<path d="M24.3722 31H21.4562L19.8602 28.276L18.3002 31H15.8162L18.6482 26.62L15.8882 22.324H18.7802L20.1242 24.676L21.4562 22.324H23.9042L21.3122 26.284L24.3722 31Z" fill="white"/>
+<path d="M24.8513 24.376V22.324H32.1353V24.376H29.6513V31H27.3113V24.376H24.8513Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_1255_158096" x="22.0977" y="1.70337" width="15.2031" height="15.2869" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1255_158096"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1255_158096" result="shape"/>
+</filter>
+<clipPath id="clip0_1255_158096">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_file_video.svg b/apps/react-admin/src/assets/icons/ic_file_video.svg
new file mode 100644
index 000000000..fb6eca6c2
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_file_video.svg
@@ -0,0 +1,20 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.172 0C23.7022 0 24.2107 0.210507 24.5857 0.585255L36.4137 12.4044C36.7891 12.7795 37 13.2884 37 13.8191V35.3333C37 37.9107 34.8689 40 32.24 40H7.76C5.13112 40 3 37.9107 3 35.3333V4.66667C3 2.08934 5.13112 0 7.76 0H23.172Z" fill="#FF5630"/>
+<g filter="url(#filter0_d_1255_158044)">
+<path d="M35.1548 12.1381C35.4678 12.4537 35.2443 12.9902 34.7998 12.9902H29C26.4227 12.9902 24.0976 10.7233 24.0976 8.21031V2.20435C24.0976 1.75791 24.6382 1.53528 24.9526 1.85224L35.1548 12.1381Z" fill="white" fill-opacity="0.24" shape-rendering="crispEdges"/>
+</g>
+<path opacity="0.4" d="M20.9204 21.8914V24.6336L26.0004 27.6637V18.8694L20.9204 21.8914Z" fill="white"/>
+<path d="M21.5439 17.9902H10.936C10.424 17.9902 10 18.406 10 18.9256V27.616C10 28.1276 10.416 28.5514 10.936 28.5514H21.5519C22.0639 28.5514 22.4879 28.1356 22.4879 27.616V18.9176C22.4799 18.406 22.0639 17.9902 21.5439 17.9902ZM14.048 26.5447V19.9889L19.3919 23.2668L14.048 26.5447Z" fill="white"/>
+<defs>
+<filter id="filter0_d_1255_158044" x="22.0977" y="1.70337" width="15.2031" height="15.2869" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1255_158044"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1255_158044" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_file_word.svg b/apps/react-admin/src/assets/icons/ic_file_word.svg
new file mode 100644
index 000000000..b112fe589
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_file_word.svg
@@ -0,0 +1,19 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.172 0C23.7022 0 24.2107 0.210507 24.5857 0.585255L36.4137 12.4044C36.7891 12.7795 37 13.2884 37 13.8191V35.3333C37 37.9107 34.8689 40 32.24 40H7.76C5.13112 40 3 37.9107 3 35.3333V4.66667C3 2.08934 5.13112 0 7.76 0H23.172Z" fill="#4586F9"/>
+<g filter="url(#filter0_d_1255_158049)">
+<path d="M35.1548 12.1381C35.4678 12.4537 35.2443 12.9902 34.7998 12.9902H29C26.4227 12.9902 24.0976 10.7233 24.0976 8.21031V2.20435C24.0976 1.75791 24.6382 1.53528 24.9526 1.85224L35.1548 12.1381Z" fill="white" fill-opacity="0.24" shape-rendering="crispEdges"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 16.9902H24V18.7402H10V16.9902ZM10 20.4902H24V22.2402H10V20.4902ZM10 23.9902H24V25.7402H10V23.9902ZM10 27.4902H17V29.2402H10V27.4902Z" fill="white"/>
+<defs>
+<filter id="filter0_d_1255_158049" x="22.0977" y="1.70337" width="15.2031" height="15.2869" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1255_158049"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1255_158049" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_file_zip.svg b/apps/react-admin/src/assets/icons/ic_file_zip.svg
new file mode 100644
index 000000000..f34001e8b
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_file_zip.svg
@@ -0,0 +1,27 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1255_158078)">
+<path d="M23.172 0C23.7022 0 24.2107 0.210507 24.5857 0.585255L36.4137 12.4044C36.7891 12.7795 37 13.2884 37 13.8191V35.3333C37 37.9107 34.8689 40 32.24 40H7.76C5.13112 40 3 37.9107 3 35.3333V4.66667C3 2.08934 5.13112 0 7.76 0H23.172Z" fill="#FFCD66"/>
+<g filter="url(#filter0_d_1255_158078)">
+<path d="M35.1548 12.1381C35.4678 12.4537 35.2443 12.9902 34.7998 12.9902H29C26.4227 12.9902 24.0976 10.7233 24.0976 8.21031V2.20435C24.0976 1.75791 24.6382 1.53528 24.9526 1.85224L35.1548 12.1381Z" fill="white" fill-opacity="0.24" shape-rendering="crispEdges"/>
+</g>
+<path opacity="0.48" d="M22.4298 16.4666H20.9166C20.8085 16.4666 20.7545 16.5132 20.7004 16.5599C20.6464 16.6066 20.6464 16.6999 20.6464 16.7932C20.7545 16.9799 20.8085 17.2132 20.8085 17.3999V23.4666L20.9706 24.3999C20.9706 24.4932 21.0787 24.5399 21.1328 24.5866C21.1868 24.5866 21.2408 24.6332 21.2408 24.6332L21.5111 24.7732C22.3758 25.0532 22.9162 25.7532 22.9162 26.4999V28.5999C22.9162 28.6932 22.9703 28.7866 23.0784 28.7866C23.1324 28.7866 23.1324 28.8332 23.1864 28.8332C23.2405 28.8332 23.2945 28.8332 23.3486 28.7866C23.7809 28.5066 23.9971 28.1332 23.9971 27.6666V17.8666C24.0512 17.0732 23.3486 16.4666 22.4298 16.4666Z" fill="white"/>
+<path d="M15.1343 17.12C15.1884 16.98 15.2965 16.9333 15.4046 16.9333H15.945C16.0531 16.9333 16.1612 16.98 16.2152 17.12L16.5395 18.1933L16.9718 17.4L16.3233 16.0933V16H14.8641V16.0933L14.3237 17.4L14.756 18.2867L15.1343 17.12Z" fill="white"/>
+<path d="M15.6204 17.3999L14.9178 19.4999C14.8098 19.6866 14.8638 19.9199 15.0259 20.0599C15.2421 20.2466 16.0528 20.2466 16.2689 20.0599C16.4311 19.9199 16.4851 19.6866 16.4311 19.4999L15.7285 17.3999H15.6204Z" fill="white"/>
+<path d="M21.3493 25.1933L20.971 25.0533C20.5386 24.9133 20.2144 24.5867 20.2144 24.1667V17.4C20.2144 16.6067 19.5118 16 18.593 16H16.8636L17.5662 17.3067C17.6202 17.3533 17.6202 17.4467 17.5662 17.4933L16.8636 18.66C16.8636 18.7067 16.8096 18.7533 16.7555 18.7533L16.9717 19.36C17.1338 19.6867 17.0258 20.1067 16.7015 20.3867C16.4853 20.5733 16.107 20.6667 15.6746 20.6667C15.2423 20.6667 14.864 20.5733 14.6478 20.3867C14.3235 20.1067 14.2155 19.6867 14.3776 19.36L14.5938 18.8C14.4857 18.8 14.3776 18.7533 14.3235 18.66L13.7831 17.4933V17.3067L14.3235 16H11.6213C10.7026 16 10 16.6067 10 17.4V28.6C10 29.3933 10.7026 30 11.6213 30H20.8089C21.7276 30 22.4302 29.3933 22.4302 28.6V26.5C22.4302 25.8933 21.9978 25.38 21.3493 25.1933ZM15.1342 28.1333H14.5938C14.4316 28.1333 14.3235 28.04 14.3235 27.9C14.3235 27.76 14.4316 27.6667 14.5938 27.6667H15.1342C15.2963 27.6667 15.4044 27.76 15.4044 27.9C15.4044 28.04 15.2963 28.1333 15.1342 28.1333ZM15.1342 27.2H14.5938C14.4316 27.2 14.3235 27.1067 14.3235 26.9667C14.3235 26.8267 14.4316 26.7333 14.5938 26.7333H15.1342C15.2963 26.7333 15.4044 26.8267 15.4044 26.9667C15.4044 27.1067 15.2963 27.2 15.1342 27.2ZM15.1342 26.2667H14.5938C14.4316 26.2667 14.3235 26.1733 14.3235 26.0333C14.3235 25.8933 14.4316 25.8 14.5938 25.8H15.1342C15.2963 25.8 15.4044 25.8933 15.4044 26.0333C15.4044 26.1733 15.2963 26.2667 15.1342 26.2667ZM15.1342 25.3333H14.5938C14.4316 25.3333 14.3235 25.24 14.3235 25.1C14.3235 24.96 14.4316 24.8667 14.5938 24.8667H15.1342C15.2963 24.8667 15.4044 24.96 15.4044 25.1C15.4044 25.24 15.2963 25.3333 15.1342 25.3333ZM15.1342 24.4H14.5938C14.4316 24.4 14.3235 24.3067 14.3235 24.1667C14.3235 24.0267 14.4316 23.9333 14.5938 23.9333H15.1342C15.2963 23.9333 15.4044 24.0267 15.4044 24.1667C15.4044 24.3067 15.2963 24.4 15.1342 24.4ZM15.1342 23.4667H14.5938C14.4316 23.4667 14.3235 23.3733 14.3235 23.2333C14.3235 23.0933 14.4316 23 14.5938 23H15.1342C15.2963 23 15.4044 23.0933 15.4044 23.2333C15.4044 23.3733 15.2963 23.4667 15.1342 23.4667ZM15.1342 22.5333H14.5938C14.4316 22.5333 14.3235 22.44 14.3235 22.3C14.3235 22.16 14.4316 22.0667 14.5938 22.0667H15.1342C15.2963 22.0667 15.4044 22.16 15.4044 22.3C15.4044 22.44 15.2963 22.5333 15.1342 22.5333ZM15.1342 21.6H14.5938C14.4316 21.6 14.3235 21.5067 14.3235 21.3667C14.3235 21.2267 14.4316 21.1333 14.5938 21.1333H15.1342C15.2963 21.1333 15.4044 21.2267 15.4044 21.3667C15.4044 21.5067 15.2963 21.6 15.1342 21.6ZM16.7555 27.6667H16.2151C16.053 27.6667 15.9449 27.5733 15.9449 27.4333C15.9449 27.2933 16.053 27.2 16.2151 27.2H16.7555C16.9177 27.2 17.0258 27.2933 17.0258 27.4333C17.0258 27.5733 16.9177 27.6667 16.7555 27.6667ZM16.7555 26.7333H16.2151C16.053 26.7333 15.9449 26.64 15.9449 26.5C15.9449 26.36 16.053 26.2667 16.2151 26.2667H16.7555C16.9177 26.2667 17.0258 26.36 17.0258 26.5C17.0258 26.64 16.9177 26.7333 16.7555 26.7333ZM16.7555 25.8H16.2151C16.053 25.8 15.9449 25.7067 15.9449 25.5667C15.9449 25.4267 16.053 25.3333 16.2151 25.3333H16.7555C16.9177 25.3333 17.0258 25.4267 17.0258 25.5667C17.0258 25.7067 16.9177 25.8 16.7555 25.8ZM16.7555 24.8667H16.2151C16.053 24.8667 15.9449 24.7733 15.9449 24.6333C15.9449 24.4933 16.053 24.4 16.2151 24.4H16.7555C16.9177 24.4 17.0258 24.4933 17.0258 24.6333C17.0258 24.7733 16.9177 24.8667 16.7555 24.8667ZM16.7555 23.9333H16.2151C16.053 23.9333 15.9449 23.84 15.9449 23.7C15.9449 23.56 16.053 23.4667 16.2151 23.4667H16.7555C16.9177 23.4667 17.0258 23.56 17.0258 23.7C17.0258 23.84 16.9177 23.9333 16.7555 23.9333ZM16.7555 23H16.2151C16.053 23 15.9449 22.9067 15.9449 22.7667C15.9449 22.6267 16.053 22.5333 16.2151 22.5333H16.7555C16.9177 22.5333 17.0258 22.6267 17.0258 22.7667C17.0258 22.9067 16.9177 23 16.7555 23ZM16.7555 22.0667H16.2151C16.053 22.0667 15.9449 21.9733 15.9449 21.8333C15.9449 21.6933 16.053 21.6 16.2151 21.6H16.7555C16.9177 21.6 17.0258 21.6933 17.0258 21.8333C17.0258 21.9733 16.9177 22.0667 16.7555 22.0667Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_1255_158078" x="22.0977" y="1.70337" width="15.2031" height="15.2869" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1255_158078"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1255_158078" result="shape"/>
+</filter>
+<clipPath id="clip0_1255_158078">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_folder.svg b/apps/react-admin/src/assets/icons/ic_folder.svg
new file mode 100644
index 000000000..01f6671ed
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_folder.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.5999 6.99023H4.3999C3.29533 6.99023 2.3999 7.88566 2.3999 8.99023V22.5902C2.3999 23.6948 3.29533 24.5902 4.3999 24.5902H33.5999C34.7045 24.5902 35.5999 23.6948 35.5999 22.5902V8.99023C35.5999 7.88566 34.7045 6.99023 33.5999 6.99023Z" fill="#F9B552"/>
+<path d="M35.6 10.1902H4.4C1.96995 10.1902 0 12.1602 0 14.5902V32.5902C0 35.0203 1.96995 36.9902 4.4 36.9902H35.6C38.0301 36.9902 40 35.0203 40 32.5902V14.5902C40 12.1602 38.0301 10.1902 35.6 10.1902Z" fill="#FFCF5C"/>
+<path d="M15.6 2.99023H4.4C1.96995 2.99023 0 4.96018 0 7.39023V13.7902C0 16.2203 1.96995 18.1902 4.4 18.1902H15.6C18.0301 18.1902 20 16.2203 20 13.7902V7.39023C20 4.96018 18.0301 2.99023 15.6 2.99023Z" fill="#FFCF5C"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_label.svg b/apps/react-admin/src/assets/icons/ic_label.svg
new file mode 100644
index 000000000..933e6357b
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_label.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path opacity="0.32" fill-rule="evenodd" clip-rule="evenodd" d="M1.5 12C1.5 17.799 6.20101 22.5 12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12ZM12.9491 5.80725C12.5501 5.06425 11.4499 5.06425 11.051 5.80725L9.54862 8.60535L6.36352 9.2112C5.54932 9.36605 5.22022 10.319 5.77507 10.9151L8.03362 13.3415L7.61877 16.5888C7.51432 17.4065 8.39427 18.0073 9.15727 17.6394L12 16.2687L14.8428 17.6394C15.6058 18.0073 16.4857 17.4065 16.3813 16.5888L15.9664 13.3415L18.225 10.9151C18.7798 10.319 18.4507 9.36605 17.6365 9.2112L14.4514 8.60535L12.9491 5.80725Z" fill="currentColor"/>
+<path d="M11.0509 5.80725C11.4499 5.06425 12.5501 5.06425 12.949 5.80725L14.4514 8.60535L17.6365 9.2112C18.4507 9.36605 18.7798 10.319 18.2249 10.9151L15.9664 13.3415L16.3812 16.5888C16.4857 17.4065 15.6057 18.0073 14.8427 17.6394L12 16.2687L9.15724 17.6394C8.39424 18.0073 7.51429 17.4065 7.61874 16.5888L8.03359 13.3415L5.77504 10.9151C5.22019 10.319 5.54929 9.36605 6.36349 9.2112L9.54859 8.60535L11.0509 5.80725Z" fill="currentColor"/>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_mail.svg b/apps/react-admin/src/assets/icons/ic_mail.svg
new file mode 100644
index 000000000..f9561c459
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_mail.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<g id="icons/notification/ic_mail">
+<path id="Vector" d="M0 8.99999L11.556 16.3545C11.688 16.452 11.844 16.5 12 16.5C12.156 16.5 12.312 16.452 12.444 16.3545L24 8.99999L12.45 0.149992C12.3201 0.052856 12.1622 0.000366211 12 0.000366211C11.8378 0.000366211 11.6799 0.052856 11.55 0.149992L0 8.99999Z" fill="#FFE9D5"/>
+<path id="Vector_2" d="M19.5 0H4.5C3.6735 0 3 0.6735 3 1.5V18C3 18.414 3.336 18.75 3.75 18.75H20.25C20.664 18.75 21 18.414 21 18V1.5C21 0.6735 20.328 0 19.5 0Z" fill="#61F3F3"/>
+<path id="Vector_3" d="M6.75 4.5H17.25C17.664 4.5 18 4.164 18 3.75C18 3.336 17.664 3 17.25 3H6.75C6.336 3 6 3.336 6 3.75C6 4.164 6.336 4.5 6.75 4.5ZM17.25 6H6.75C6.336 6 6 6.336 6 6.75C6 7.164 6.336 7.5 6.75 7.5H17.25C17.664 7.5 18 7.164 18 6.75C18 6.336 17.664 6 17.25 6ZM12.75 9H6.75C6.336 9 6 9.336 6 9.75C6 10.164 6.336 10.5 6.75 10.5H12.75C13.164 10.5 13.5 10.164 13.5 9.75C13.5 9.336 13.164 9 12.75 9Z" fill="#006C9C"/>
+<path id="Vector_4" d="M12.444 16.3545C12.312 16.452 12.156 16.5 12 16.5C11.844 16.5 11.688 16.452 11.556 16.3545L0 9V22.5C0 23.328 0.672 24 1.5 24H22.5C23.328 24 24 23.328 24 22.5V9L12.444 16.3545Z" fill="url(#paint0_linear_0_8835)"/>
+<path id="Vector_5" d="M22.5 24H1.5C0.6585 24 0 23.3415 0 22.5C6.7075e-05 22.3823 0.0277958 22.2663 0.0809492 22.1613C0.134103 22.0563 0.211192 21.9652 0.306 21.8955L11.556 14.3955C11.688 14.298 11.844 14.25 12 14.25C12.156 14.25 12.312 14.298 12.444 14.3955L23.694 21.8955C23.7888 21.9652 23.8659 22.0563 23.9191 22.1613C23.9722 22.2663 23.9999 22.3823 24 22.5C24 23.3415 23.3415 24 22.5 24Z" fill="#FF5630"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_8835" x1="0" y1="9" x2="13.4831" y2="30.573" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFAC82"/>
+<stop offset="1" stop-color="#FF5630"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_order.svg b/apps/react-admin/src/assets/icons/ic_order.svg
new file mode 100644
index 000000000..cc8dbb75a
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_order.svg
@@ -0,0 +1,45 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<g id="icons/notification/ic_package">
+<g id="stack">
+<path id="Path" fill-rule="evenodd" clip-rule="evenodd" d="M15.0481 20.02C13.9573 18.1401 14.2658 15.7619 15.8001 14.2225C17.3344 12.6831 19.7117 12.3668 21.5951 13.4514C23.4786 14.5361 24.3982 16.7509 23.8369 18.8506C23.2756 20.9504 21.3735 22.4109 19.2001 22.411C17.4871 22.4174 15.9023 21.5048 15.0481 20.02Z" fill="url(#paint0_linear_0_8848)"/>
+<g id="Vector">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.1996 5.57765V12.8111C17.4829 12.8113 15.897 13.7281 15.0402 15.2157C14.1834 16.7033 14.1862 18.5352 15.0476 20.0201L9.59959 23.1651V11.1191L19.1986 5.57715L19.1996 5.57765Z" fill="#FFD666"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.59998 0.0351562L13.4095 2.23466L3.81048 7.77666L0.000976562 5.57716L9.59998 0.0351562Z" fill="#FFD666"/>
+</g>
+<g id="Vector_2">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.6 11.1191L6.257 9.18909L15.8565 3.64709L19.199 5.57709L9.6 11.1191Z" fill="#FFAB00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.6 11.1191V23.1651L0 17.6226V5.57759L0.001 5.5771L3.81 7.7766V15.7641L4.9725 15.2841L6.24 16.7241V9.19909L6.257 9.18909L9.6 11.1191Z" fill="#FFAB00"/>
+</g>
+<g id="Vector_3">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8565 3.64712L6.257 9.18912L3.8105 7.77662L13.4095 2.23462L15.8565 3.64712Z" fill="url(#paint1_linear_0_8848)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.257 9.18912L6.23957 9.19907V16.7241L4.97207 15.2841L3.80957 15.7641L3.8105 7.77662L6.257 9.18912Z" fill="url(#paint2_linear_0_8848)"/>
+</g>
+<g id="Vector_4">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.24148 17.7187C1.04818 17.7187 0.891479 17.562 0.891479 17.3687V16.0727C0.891479 15.8794 1.04818 15.7227 1.24148 15.7227C1.43478 15.7227 1.59148 15.8794 1.59148 16.0727V17.3687C1.59148 17.562 1.43478 17.7187 1.24148 17.7187Z" fill="#FFD666"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66248 18.5502C2.46918 18.5502 2.31248 18.3935 2.31248 18.2002V17.0327C2.31248 16.8394 2.46918 16.6827 2.66248 16.6827C2.85578 16.6827 3.01248 16.8394 3.01248 17.0327V18.2002C3.01248 18.3935 2.85578 18.5502 2.66248 18.5502Z" fill="#FFD666"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.08435 19.3707C3.89105 19.3707 3.73435 19.214 3.73435 19.0207V17.9927C3.73435 17.7994 3.89105 17.6427 4.08435 17.6427C4.27765 17.6427 4.43435 17.7994 4.43435 17.9927V19.0207C4.43435 19.214 4.27765 19.3707 4.08435 19.3707Z" fill="#FFD666"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.50525 20.1912C5.31195 20.1912 5.15525 20.0345 5.15525 19.8412V18.9527C5.15525 18.7594 5.31195 18.6027 5.50525 18.6027C5.69855 18.6027 5.85525 18.7594 5.85525 18.9527V19.8412C5.85525 20.0345 5.69855 20.1912 5.50525 20.1912Z" fill="#FFD666"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.92598 21.0307C6.73268 21.0307 6.57598 20.874 6.57598 20.6807V19.9127C6.57598 19.7194 6.73268 19.5627 6.92598 19.5627C7.11928 19.5627 7.27598 19.7194 7.27598 19.9127V20.6807C7.27598 20.874 7.11928 21.0307 6.92598 21.0307Z" fill="#FFD666"/>
+</g>
+<path id="Path_2" d="M18.1105 19.32C18.008 19.3201 17.9106 19.2752 17.8441 19.1972L16.6841 17.8382C16.6018 17.7433 16.5768 17.6115 16.6185 17.493C16.6602 17.3744 16.7622 17.2874 16.8858 17.2648C17.0094 17.2422 17.1356 17.2876 17.2165 17.3838L18.1545 18.4827L21.2295 15.981C21.3264 15.9012 21.4587 15.8793 21.5761 15.9238C21.6935 15.9683 21.7781 16.0723 21.7977 16.1963C21.8174 16.3203 21.7692 16.4453 21.6713 16.5239L18.3313 19.2415C18.269 19.2924 18.1909 19.3201 18.1105 19.32Z" fill="#007867"/>
+<g id="Vector_5">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5888 18.0471C11.4302 18.0473 11.2914 17.941 11.2503 17.7879C11.2092 17.6347 11.2761 17.4731 11.4135 17.3939L13.008 16.4734C13.1163 16.4109 13.2497 16.4109 13.358 16.4734C13.4663 16.536 13.533 16.6515 13.533 16.7766C13.533 16.9016 13.4663 17.0172 13.358 17.0797L11.7635 18.0001C11.7104 18.0309 11.6501 18.0471 11.5888 18.0471Z" fill="#B76E00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5425 11.3318C12.4653 11.25 12.3535 11.2103 12.242 11.2251C12.1305 11.2398 12.0329 11.3073 11.9797 11.4063L11.1347 12.9783C11.0763 13.0868 11.0793 13.2179 11.1424 13.3236C11.2055 13.4293 11.3195 13.4941 11.4427 13.4941C11.5732 13.4944 11.6937 13.4239 11.7573 13.3098L11.95 12.9624V15.9711C11.95 16.1644 12.1067 16.3211 12.3 16.3211C12.4933 16.3211 12.65 16.1644 12.65 15.9711V12.4526L12.9345 12.7604C12.9976 12.8278 13.0851 12.8673 13.1774 12.87C13.2697 12.8726 13.3593 12.8383 13.4263 12.7746C13.4936 12.7107 13.5328 12.6226 13.5352 12.5297C13.5376 12.4369 13.5029 12.3469 13.439 12.2796L12.5425 11.3318Z" fill="#B76E00"/>
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_8848" x1="14.3997" y1="12.8109" x2="23.9998" y2="22.4115" gradientUnits="userSpaceOnUse">
+<stop stop-color="#77ED8B"/>
+<stop offset="1" stop-color="#22C55E"/>
+</linearGradient>
+<linearGradient id="paint1_linear_0_8848" x1="3.80957" y1="2.23462" x2="18.0556" y2="14.0791" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFAB00"/>
+<stop offset="1" stop-color="#B76E00"/>
+</linearGradient>
+<linearGradient id="paint2_linear_0_8848" x1="3.80957" y1="2.23462" x2="18.0556" y2="14.0791" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFAB00"/>
+<stop offset="1" stop-color="#B76E00"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/react-admin/src/assets/icons/ic_rise.svg b/apps/react-admin/src/assets/icons/ic_rise.svg
new file mode 100644
index 000000000..93689126d
--- /dev/null
+++ b/apps/react-admin/src/assets/icons/ic_rise.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M5 17.75a.75.75 0 0 1-.488-1.32l7-6a.75.75 0 0 1 .976 0l7 6A.75.75 0 0 1 19 17.75H5Z" opacity=".5"></path><path fill-rule="evenodd" d="M4.43 13.488a.75.75 0 0 0 1.058.081L12 7.988l6.512 5.581a.75.75 0 1 0 .976-1.138l-7-6a.75.75 0 0 0-.976 0l-7 6a.75.75 0 0 0-.081 1.057Z" clip-rule="evenodd"></path></g></svg>
diff --git a/apps/react-admin/src/assets/images/background/cyan-blur.png b/apps/react-admin/src/assets/images/background/cyan-blur.png
new file mode 100644
index 000000000..b5dbc95da
Binary files /dev/null and b/apps/react-admin/src/assets/images/background/cyan-blur.png differ
diff --git a/apps/react-admin/src/assets/images/background/dashboard.png b/apps/react-admin/src/assets/images/background/dashboard.png
new file mode 100644
index 000000000..26a2e8896
Binary files /dev/null and b/apps/react-admin/src/assets/images/background/dashboard.png differ
diff --git a/apps/react-admin/src/assets/images/background/overlay_2.jpg b/apps/react-admin/src/assets/images/background/overlay_2.jpg
new file mode 100644
index 000000000..119d428b8
Binary files /dev/null and b/apps/react-admin/src/assets/images/background/overlay_2.jpg differ
diff --git a/apps/react-admin/src/assets/images/background/red-blur.png b/apps/react-admin/src/assets/images/background/red-blur.png
new file mode 100644
index 000000000..a0df012ff
Binary files /dev/null and b/apps/react-admin/src/assets/images/background/red-blur.png differ
diff --git a/apps/react-admin/src/assets/images/characters/character_3.png b/apps/react-admin/src/assets/images/characters/character_3.png
new file mode 100644
index 000000000..2d639ccde
Binary files /dev/null and b/apps/react-admin/src/assets/images/characters/character_3.png differ
diff --git a/apps/react-admin/src/assets/images/characters/character_4.png b/apps/react-admin/src/assets/images/characters/character_4.png
new file mode 100644
index 000000000..0ce49ffe4
Binary files /dev/null and b/apps/react-admin/src/assets/images/characters/character_4.png differ
diff --git a/apps/react-admin/src/assets/images/characters/character_5.png b/apps/react-admin/src/assets/images/characters/character_5.png
new file mode 100644
index 000000000..b8fbb44fc
Binary files /dev/null and b/apps/react-admin/src/assets/images/characters/character_5.png differ
diff --git a/apps/react-admin/src/assets/images/characters/character_6.png b/apps/react-admin/src/assets/images/characters/character_6.png
new file mode 100644
index 000000000..f59a84417
Binary files /dev/null and b/apps/react-admin/src/assets/images/characters/character_6.png differ
diff --git a/apps/react-admin/src/assets/images/characters/character_8.png b/apps/react-admin/src/assets/images/characters/character_8.png
new file mode 100644
index 000000000..44f170875
Binary files /dev/null and b/apps/react-admin/src/assets/images/characters/character_8.png differ
diff --git a/apps/react-admin/src/assets/images/cover/cover_3.jpg b/apps/react-admin/src/assets/images/cover/cover_3.jpg
new file mode 100644
index 000000000..8390e518e
Binary files /dev/null and b/apps/react-admin/src/assets/images/cover/cover_3.jpg differ
diff --git a/apps/react-admin/src/assets/images/cover/cover_4.jpg b/apps/react-admin/src/assets/images/cover/cover_4.jpg
new file mode 100644
index 000000000..c68f1581a
Binary files /dev/null and b/apps/react-admin/src/assets/images/cover/cover_4.jpg differ
diff --git a/apps/react-admin/src/assets/images/cover/profile_banner.jpeg b/apps/react-admin/src/assets/images/cover/profile_banner.jpeg
new file mode 100644
index 000000000..4a0a1c7a4
Binary files /dev/null and b/apps/react-admin/src/assets/images/cover/profile_banner.jpeg differ
diff --git a/apps/react-admin/src/assets/images/glass/ic_glass_bag.png b/apps/react-admin/src/assets/images/glass/ic_glass_bag.png
new file mode 100644
index 000000000..41cb3c506
Binary files /dev/null and b/apps/react-admin/src/assets/images/glass/ic_glass_bag.png differ
diff --git a/apps/react-admin/src/assets/images/glass/ic_glass_buy.png b/apps/react-admin/src/assets/images/glass/ic_glass_buy.png
new file mode 100644
index 000000000..065ffcde1
Binary files /dev/null and b/apps/react-admin/src/assets/images/glass/ic_glass_buy.png differ
diff --git a/apps/react-admin/src/assets/images/glass/ic_glass_message.png b/apps/react-admin/src/assets/images/glass/ic_glass_message.png
new file mode 100644
index 000000000..10b6c9591
Binary files /dev/null and b/apps/react-admin/src/assets/images/glass/ic_glass_message.png differ
diff --git a/apps/react-admin/src/assets/images/glass/ic_glass_users.png b/apps/react-admin/src/assets/images/glass/ic_glass_users.png
new file mode 100644
index 000000000..415f0c9be
Binary files /dev/null and b/apps/react-admin/src/assets/images/glass/ic_glass_users.png differ
diff --git a/apps/react-admin/src/assets/images/logo.png b/apps/react-admin/src/assets/images/logo.png
new file mode 100644
index 000000000..b0eeef4ab
Binary files /dev/null and b/apps/react-admin/src/assets/images/logo.png differ
diff --git a/apps/react-admin/src/components/abp/account/authenticator-settings.tsx b/apps/react-admin/src/components/abp/account/authenticator-settings.tsx
new file mode 100644
index 000000000..282ea9d17
--- /dev/null
+++ b/apps/react-admin/src/components/abp/account/authenticator-settings.tsx
@@ -0,0 +1,73 @@
+import { Button, Card, List, Skeleton, Modal } from "antd";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getAuthenticatorApi, resetAuthenticatorApi } from "@/api/account/profile";
+import AuthenticatorSteps from "./authenticator-steps";
+import { toast } from "sonner";
+
+const AuthenticatorSettings: React.FC = () => {
+	const { t: $t } = useTranslation();
+	const [modal, contextHolder] = Modal.useModal();
+	const queryClient = useQueryClient();
+
+	const { data: authenticator, isLoading } = useQuery({
+		queryKey: ["authenticator"],
+		queryFn: getAuthenticatorApi,
+	});
+
+	const { mutateAsync: resetAuthenticator } = useMutation({
+		mutationFn: resetAuthenticatorApi,
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["authenticator"] });
+			toast.success($t("AbpAccount.YourAuthenticatorIsSuccessfullyReset"));
+		},
+	});
+
+	const handleReset = () => {
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpAccount.ResetAuthenticatorWarning"),
+			centered: true,
+			onOk: () => resetAuthenticator(),
+		});
+	};
+
+	if (isLoading) {
+		return (
+			<Card bordered={false} title={$t("abp.account.settings.authenticatorSettings")}>
+				<Skeleton />
+			</Card>
+		);
+	}
+
+	return (
+		<>
+			{contextHolder}
+			<Card bordered={false} title={$t("abp.account.settings.authenticatorSettings")}>
+				{authenticator?.isAuthenticated === false ? (
+					<AuthenticatorSteps
+						authenticator={authenticator}
+						onDone={() => queryClient.invalidateQueries({ queryKey: ["authenticator"] })}
+					/>
+				) : authenticator?.isAuthenticated === true ? (
+					<List>
+						<List.Item
+							extra={
+								<Button type="primary" onClick={handleReset}>
+									{$t("AbpAccount.ResetAuthenticator")}
+								</Button>
+							}
+						>
+							<List.Item.Meta
+								title={$t("AbpAccount.ResetAuthenticator")}
+								description={$t("AbpAccount.ResetAuthenticatorDesc")}
+							/>
+						</List.Item>
+					</List>
+				) : null}
+			</Card>
+		</>
+	);
+};
+
+export default AuthenticatorSettings;
diff --git a/apps/react-admin/src/components/abp/account/authenticator-steps.tsx b/apps/react-admin/src/components/abp/account/authenticator-steps.tsx
new file mode 100644
index 000000000..22bdc8664
--- /dev/null
+++ b/apps/react-admin/src/components/abp/account/authenticator-steps.tsx
@@ -0,0 +1,177 @@
+import { useState } from "react";
+import { Card, Steps, Button, Form, Input, QRCode } from "antd";
+import { useTranslation } from "react-i18next";
+
+import { verifyAuthenticatorCodeApi } from "@/api/account/profile";
+import { useMutation } from "@tanstack/react-query";
+import type { AuthenticatorDto } from "#/account/profile";
+import { useCopyToClipboard } from "@/hooks/event/use-copy-to-clipboard";
+import { toast } from "sonner";
+
+interface Props {
+	authenticator: AuthenticatorDto;
+	onDone: () => void;
+}
+
+const AuthenticatorSteps: React.FC<Props> = ({ authenticator, onDone }) => {
+	const { t: $t } = useTranslation();
+	const { copyFn } = useCopyToClipboard();
+	const [form] = Form.useForm();
+	const [currentStep, setCurrentStep] = useState(0);
+	const [codeValidated, setCodeValidated] = useState(false);
+	const [recoveryCodes, setRecoveryCodes] = useState<string[]>([]);
+
+	const steps = [
+		{ title: $t("AbpAccount.Authenticator") },
+		{ title: $t("AbpAccount.ValidAuthenticator") },
+		{ title: $t("AbpAccount.RecoveryCode") },
+	];
+
+	const { mutateAsync: verifyCode, isPending: isLoading } = useMutation({
+		mutationFn: verifyAuthenticatorCodeApi,
+		onSuccess: (data) => {
+			setRecoveryCodes(data.recoveryCodes);
+			setCodeValidated(true);
+			handleNextStep();
+		},
+	});
+
+	const handleCopy = async (text?: string) => {
+		if (!text) return;
+		await copyFn(text);
+		toast.success($t("AbpUi.CopiedToTheClipboard"));
+	};
+
+	const handleValidCode = async () => {
+		try {
+			const values = await form.validateFields();
+			await verifyCode(values);
+		} catch (error) {
+			console.error("Validation failed:", error);
+		}
+	};
+
+	const handlePrevStep = () => setCurrentStep((prev) => prev - 1);
+	const handleNextStep = () => setCurrentStep((prev) => prev + 1);
+
+	const renderStepContent = () => {
+		switch (currentStep) {
+			case 0:
+				return (
+					<Card className="mt-4">
+						<Card.Meta
+							title={
+								<div className="h-16 flex flex-col justify-center">
+									<span className="text-lg font-normal">{$t("AbpAccount.Authenticator")}</span>
+									<span className="text-sm font-light">{$t("AbpAccount.AuthenticatorDesc")}</span>
+								</div>
+							}
+						/>
+						<div className="mt-2 flex flex-row flex-wrap">
+							<div className="basis-1/2">
+								<Card title={$t("AbpAccount.Authenticator:UseQrCode")} className="min-h-[350px]">
+									<div className="flex justify-center">
+										<QRCode value={authenticator.authenticatorUri} />
+									</div>
+								</Card>
+							</div>
+							<div className="basis-1/2">
+								<Card
+									title={$t("AbpAccount.Authenticator:InputCode")}
+									className="min-h-[350px]"
+									extra={
+										<Button type="primary" onClick={() => handleCopy(authenticator.sharedKey)}>
+											{$t("AbpAccount.Authenticator:CopyToClipboard")}
+										</Button>
+									}
+								>
+									<div className="flex items-center justify-center rounded-lg bg-[#dac6c6]">
+										<div className="m-4 text-xl font-bold text-blue-600">{authenticator.sharedKey}</div>
+									</div>
+								</Card>
+							</div>
+						</div>
+					</Card>
+				);
+
+			case 1:
+				return (
+					<Card className="mt-4">
+						<Card.Meta
+							title={
+								<div className="h-16 flex flex-col justify-center">
+									<span className="text-lg font-normal">{$t("AbpAccount.ValidAuthenticator")}</span>
+									<span className="text-sm font-light">{$t("AbpAccount.ValidAuthenticatorDesc")}</span>
+								</div>
+							}
+						/>
+						<div className="flex flex-row">
+							<div className="basis-2/3">
+								<Form form={form}>
+									<Form.Item
+										label={$t("AbpAccount.DisplayName:AuthenticatorCode")}
+										name="authenticatorCode"
+										rules={[{ required: true }]}
+									>
+										<Input />
+									</Form.Item>
+								</Form>
+							</div>
+							<div className="ml-4 basis-2/3">
+								<Button loading={isLoading} type="primary" onClick={handleValidCode}>
+									{$t("AbpAccount.Validation")}
+								</Button>
+							</div>
+						</div>
+					</Card>
+				);
+
+			case 2:
+				return (
+					<Card
+						className="mt-4"
+						title={
+							<div className="h-16 flex flex-col justify-center">
+								<span className="text-lg font-normal">{$t("AbpAccount.RecoveryCode")}</span>
+								<span className="text-sm font-light">{$t("AbpAccount.RecoveryCodeDesc")}</span>
+							</div>
+						}
+						extra={
+							<Button type="primary" onClick={() => handleCopy(recoveryCodes.join("\r"))}>
+								{$t("AbpAccount.Authenticator:CopyToClipboard")}
+							</Button>
+						}
+					>
+						<div className="flex flex-col items-center justify-center rounded-lg bg-[#dac6c6]">
+							<div className="m-2 text-xl font-bold text-blue-600">{recoveryCodes.slice(0, 5).join("\r\n")}</div>
+							<div className="m-2 text-xl font-bold text-blue-600">{recoveryCodes.slice(5).join("\r\n")}</div>
+						</div>
+					</Card>
+				);
+		}
+	};
+
+	return (
+		<Card bordered={false}>
+			<Steps current={currentStep} items={steps} />
+			{renderStepContent()}
+			<div className="flex flex-row justify-end gap-2 pr-2 mt-4">
+				{currentStep > 0 && !codeValidated && (
+					<Button onClick={handlePrevStep}>{$t("AbpAccount.Steps:PreStep")}</Button>
+				)}
+				{currentStep < 2 && (
+					<Button disabled={currentStep === 1 && !codeValidated} type="primary" onClick={handleNextStep}>
+						{$t("AbpAccount.Steps:NextStep")}
+					</Button>
+				)}
+				{currentStep === 2 && (
+					<Button type="primary" onClick={onDone}>
+						{$t("AbpAccount.Steps:Done")}
+					</Button>
+				)}
+			</div>
+		</Card>
+	);
+};
+
+export default AuthenticatorSteps;
diff --git a/apps/react-admin/src/components/abp/account/basic-settings.tsx b/apps/react-admin/src/components/abp/account/basic-settings.tsx
new file mode 100644
index 000000000..9b8ef1d8e
--- /dev/null
+++ b/apps/react-admin/src/components/abp/account/basic-settings.tsx
@@ -0,0 +1,91 @@
+import { useEffect, useState } from "react";
+import { Card, Form, Input, Avatar, Upload, Button } from "antd";
+import { UploadOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import type { ProfileDto, UpdateProfileDto } from "#/account/profile";
+import type { UploadChangeParam, UploadProps } from "antd/es/upload";
+import { useUserInfo } from "@/store/userStore";
+import { faker } from "@faker-js/faker";
+import { useAbpSettings } from "@/hooks/abp/use-abp-settings";
+
+interface Props {
+	profile: ProfileDto;
+	onSubmit: (profile: UpdateProfileDto) => void;
+}
+
+const BasicSettings: React.FC<Props> = ({ profile, onSubmit }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+	const { isTrue } = useAbpSettings();
+	const userInfo = useUserInfo();
+
+	const [formModel, setFormModel] = useState<ProfileDto>({} as ProfileDto);
+
+	useEffect(() => {
+		setFormModel({ ...profile });
+		form.setFieldsValue(profile);
+	}, [profile]);
+
+	const handleAvatarChange = (_param: UploadChangeParam) => {
+		// TODO: Wait for OSS module integration
+		console.warn("Waiting for OSS module integration...");
+	};
+
+	const handleBeforeUpload: UploadProps["beforeUpload"] = () => {
+		console.warn("Waiting for OSS module integration...");
+		return false;
+	};
+
+	const handleSubmit = () => {
+		onSubmit(formModel);
+	};
+
+	return (
+		<Card bordered={false} title={$t("abp.account.settings.basic.title")}>
+			<div className="flex flex-row">
+				<div className="basis-2/4">
+					<Form
+						form={form}
+						labelCol={{ span: 6 }}
+						wrapperCol={{ span: 18 }}
+						onValuesChange={(_, values) => setFormModel(values)}
+					>
+						<Form.Item label={$t("AbpAccount.DisplayName:UserName")} name="userName" rules={[{ required: true }]}>
+							<Input disabled={!isTrue("Abp.Identity.User.IsUserNameUpdateEnabled")} autoComplete="off" />
+						</Form.Item>
+						<Form.Item label={$t("AbpAccount.DisplayName:Email")} name="email" rules={[{ required: true }]}>
+							<Input disabled={!isTrue("Abp.Identity.User.IsEmailUpdateEnabled")} autoComplete="off" type="email" />
+						</Form.Item>
+						<Form.Item label={$t("AbpAccount.DisplayName:Surname")} name="surname">
+							<Input autoComplete="off" />
+						</Form.Item>
+						<Form.Item label={$t("AbpAccount.DisplayName:Name")} name="name">
+							<Input autoComplete="off" />
+						</Form.Item>
+						<Form.Item>
+							<div className="flex flex-col items-center">
+								<Button style={{ minWidth: 100 }} type="primary" onClick={handleSubmit}>
+									{$t("AbpUi.Submit")}
+								</Button>
+							</div>
+						</Form.Item>
+					</Form>
+				</div>
+				<div className="basis-2/4">
+					<div className="flex flex-col items-center">
+						<p>{$t("AbpUi.ProfilePicture")}</p>
+						<Avatar size={100} icon={<img src={userInfo?.avatar ?? faker.image.avatarGitHub()} alt="" />} />
+						<Upload beforeUpload={handleBeforeUpload} fileList={[]} name="file" onChange={handleAvatarChange}>
+							<Button className="mt-4">
+								<UploadOutlined />
+								{$t("abp.account.settings.changeAvatar")}
+							</Button>
+						</Upload>
+					</div>
+				</div>
+			</div>
+		</Card>
+	);
+};
+
+export default BasicSettings;
diff --git a/apps/react-admin/src/components/abp/account/bind-settings.tsx b/apps/react-admin/src/components/abp/account/bind-settings.tsx
new file mode 100644
index 000000000..386345633
--- /dev/null
+++ b/apps/react-admin/src/components/abp/account/bind-settings.tsx
@@ -0,0 +1,14 @@
+import { Card, Empty } from "antd";
+import { useTranslation } from "react-i18next";
+
+const BindSettings: React.FC = () => {
+	const { t: $t } = useTranslation();
+
+	return (
+		<Card bordered={false} title={$t("abp.account.settings.bindSettings")}>
+			<Empty />
+		</Card>
+	);
+};
+
+export default BindSettings;
diff --git a/apps/react-admin/src/components/abp/account/email-confirm-modal.tsx b/apps/react-admin/src/components/abp/account/email-confirm-modal.tsx
new file mode 100644
index 000000000..9076852a4
--- /dev/null
+++ b/apps/react-admin/src/components/abp/account/email-confirm-modal.tsx
@@ -0,0 +1,68 @@
+import { useState } from "react";
+import { Modal, Form, Input } from "antd";
+import { useTranslation } from "react-i18next";
+import { useMutation } from "@tanstack/react-query";
+import { confirmEmailApi } from "@/api/account/profile";
+import { toast } from "sonner";
+
+interface Props {
+	visible: boolean;
+	onSuccess: () => void;
+	onClose: () => void;
+	initialState: {
+		confirmToken: string;
+		email: string;
+		returnUrl?: string;
+		userId: string;
+	};
+}
+
+const EmailConfirmModal: React.FC<Props> = ({ visible, onClose, onSuccess, initialState }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+	const [confirmLoading, setConfirmLoading] = useState(false);
+
+	const { mutateAsync: confirmEmail } = useMutation({
+		mutationFn: confirmEmailApi,
+		onSuccess: () => {
+			toast.success($t("AbpAccount.YourEmailIsSuccessfullyConfirm"));
+			onSuccess();
+			onClose();
+			if (initialState.returnUrl) {
+				window.location.href = initialState.returnUrl;
+			}
+		},
+		onSettled: () => {
+			setConfirmLoading(false);
+		},
+	});
+
+	const handleSubmit = async () => {
+		try {
+			setConfirmLoading(true);
+			await confirmEmail({
+				confirmToken: decodeURIComponent(initialState.confirmToken),
+			});
+		} catch (error) {
+			console.error("Email confirmation failed:", error);
+		}
+	};
+
+	return (
+		<Modal
+			open={visible}
+			title={$t("AbpAccount.EmailConfirm")}
+			onCancel={onClose}
+			onOk={handleSubmit}
+			confirmLoading={confirmLoading}
+		>
+			<Form form={form} initialValues={initialState}>
+				<Form.Item label={$t("AbpAccount.DisplayName:Email")} name="email">
+					<Input readOnly />
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+};
+
+export default EmailConfirmModal;
diff --git a/apps/react-admin/src/components/abp/account/notice-settings.tsx b/apps/react-admin/src/components/abp/account/notice-settings.tsx
new file mode 100644
index 000000000..18e775431
--- /dev/null
+++ b/apps/react-admin/src/components/abp/account/notice-settings.tsx
@@ -0,0 +1,14 @@
+import { Card, Empty } from "antd";
+import { useTranslation } from "react-i18next";
+
+const BindSettings: React.FC = () => {
+	const { t: $t } = useTranslation();
+
+	return (
+		<Card bordered={false} title={$t("abp.account.settings.noticeSettings")}>
+			<Empty />
+		</Card>
+	);
+};
+
+export default BindSettings;
diff --git a/apps/react-admin/src/components/abp/account/security-settings.tsx b/apps/react-admin/src/components/abp/account/security-settings.tsx
new file mode 100644
index 000000000..87076eb39
--- /dev/null
+++ b/apps/react-admin/src/components/abp/account/security-settings.tsx
@@ -0,0 +1,158 @@
+import { useState, useEffect } from "react";
+import { Card, List, Button, Tag, Switch } from "antd";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { getTwoFactorEnabledApi, changeTwoFactorEnabledApi, sendEmailConfirmLinkApi } from "@/api/account/profile";
+import type { UserInfo } from "#/account/user";
+
+interface Props {
+	userInfo: UserInfo | null;
+	onChangePassword: () => void;
+	onChangePhoneNumber: () => void;
+}
+
+const SecuritySettings: React.FC<Props> = ({ userInfo, onChangePassword, onChangePhoneNumber }) => {
+	const { t: $t } = useTranslation();
+	const [loading, setLoading] = useState(false);
+	const [sendMailInterval, setSendMailInterval] = useState(0);
+	let timer: NodeJS.Timeout;
+
+	// Get two factor status
+	const { data: twoFactor, refetch: refetchTwoFactor } = useQuery({
+		queryKey: ["twoFactorEnabled"],
+		queryFn: getTwoFactorEnabledApi,
+	});
+
+	// Change two factor mutation
+	const { mutateAsync: changeTwoFactor } = useMutation({
+		mutationFn: changeTwoFactorEnabledApi,
+		onMutate: () => setLoading(true),
+		onSettled: () => setLoading(false),
+		onError: () => refetchTwoFactor(),
+		onSuccess: () => refetchTwoFactor(),
+	});
+
+	// Send email confirmation mutation
+	const { mutateAsync: sendEmailConfirm } = useMutation({
+		mutationFn: (email: string) =>
+			sendEmailConfirmLinkApi({
+				appName: "ReactAdmin",
+				email,
+				returnUrl: window.location.href,
+			}),
+		onSuccess: () => {
+			setSendMailInterval(60);
+			timer = setInterval(() => {
+				setSendMailInterval((prev) => {
+					if (prev <= 0) {
+						clearInterval(timer);
+						return 0;
+					}
+					return prev - 1;
+				});
+			}, 1000);
+		},
+		onError: () => setSendMailInterval(0),
+	});
+
+	useEffect(() => {
+		return () => {
+			if (timer) clearInterval(timer);
+		};
+	}, []);
+
+	const getSendMailTitle = () => {
+		if (sendMailInterval > 0) {
+			return `${sendMailInterval} s`;
+		}
+		return $t("AbpAccount.ClickToValidation");
+	};
+
+	return (
+		<Card bordered={false} title={$t("abp.account.settings.security.title")}>
+			<List>
+				{/* Password */}
+				<List.Item
+					extra={
+						<Button type="link" onClick={onChangePassword}>
+							{$t("AbpUi.Edit")}
+						</Button>
+					}
+				>
+					<List.Item.Meta
+						title={$t("abp.account.settings.security.password")}
+						description={$t("abp.account.settings.security.passwordDesc")}
+					/>
+				</List.Item>
+
+				{/* Phone Number */}
+				<List.Item
+					extra={
+						<Button type="link" onClick={onChangePhoneNumber}>
+							{$t("AbpUi.Edit")}
+						</Button>
+					}
+				>
+					<List.Item.Meta
+						title={$t("abp.account.settings.security.phoneNumber")}
+						description={
+							<>
+								{userInfo?.phoneNumber}
+								{!userInfo?.phoneNumber ? (
+									<Tag color="warning">{$t("abp.account.settings.security.unSet")}</Tag>
+								) : userInfo?.phoneNumberVerified ? (
+									<Tag color="success">{$t("abp.account.settings.security.verified")}</Tag>
+								) : (
+									<Tag color="warning">{$t("abp.account.settings.security.unVerified")}</Tag>
+								)}
+							</>
+						}
+					/>
+				</List.Item>
+
+				{/* Email */}
+				<List.Item
+					extra={
+						userInfo?.email &&
+						!userInfo?.emailVerified && (
+							<Button type="link" disabled={sendMailInterval > 0} onClick={() => sendEmailConfirm(userInfo.email)}>
+								{getSendMailTitle()}
+							</Button>
+						)
+					}
+				>
+					<List.Item.Meta
+						title={$t("abp.account.settings.security.email")}
+						description={
+							<>
+								{userInfo?.email}
+								{userInfo?.emailVerified ? (
+									<Tag color="success">{$t("abp.account.settings.security.verified")}</Tag>
+								) : (
+									<Tag color="warning">{$t("abp.account.settings.security.unVerified")}</Tag>
+								)}
+							</>
+						}
+					/>
+				</List.Item>
+
+				{/* Two Factor Authentication */}
+				{twoFactor && (
+					<List.Item
+						extra={
+							<Switch
+								checked={twoFactor.enabled}
+								loading={loading}
+								onChange={(checked) => changeTwoFactor({ enabled: checked })}
+							/>
+						}
+					>
+						<List.Item.Meta title={$t("AbpAccount.TwoFactor")} description={$t("AbpAccount.TwoFactor")} />
+					</List.Item>
+				)}
+			</List>
+		</Card>
+	);
+};
+
+export default SecuritySettings;
diff --git a/apps/react-admin/src/components/abp/account/session-settings.tsx b/apps/react-admin/src/components/abp/account/session-settings.tsx
new file mode 100644
index 000000000..54956ffaf
--- /dev/null
+++ b/apps/react-admin/src/components/abp/account/session-settings.tsx
@@ -0,0 +1,51 @@
+import { Card, Modal } from "antd";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { IdentitySessionDto } from "#/management/identity/sessions";
+import { getSessionsApi, revokeSessionApi } from "@/api/account/my-session";
+import { toast } from "sonner";
+import UserSessionTable from "@/pages/management/identity/sessions/user-session-table";
+
+const SessionSettings: React.FC = () => {
+	const { t: $t } = useTranslation();
+	const [modal, contextHolder] = Modal.useModal();
+	const queryClient = useQueryClient();
+
+	// Fetch sessions
+	const { data: sessions = [] } = useQuery({
+		queryKey: ["mySessions"],
+		queryFn: async () => {
+			const { items } = await getSessionsApi();
+			return items;
+		},
+	});
+
+	// Revoke session mutation
+	const { mutateAsync: revokeSession } = useMutation({
+		mutationFn: revokeSessionApi,
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["mySessions"] });
+			toast.success($t("AbpIdentity.SuccessfullyRevoked"));
+		},
+	});
+
+	const handleRevoke = (session: IdentitySessionDto) => {
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpIdentity.SessionWillBeRevokedMessage"),
+			centered: true,
+			onOk: () => revokeSession(session.sessionId),
+		});
+	};
+
+	return (
+		<>
+			{contextHolder}
+			<Card bordered={false} title={$t("abp.account.settings.sessionSettings")}>
+				<UserSessionTable sessions={sessions} onRevoke={handleRevoke} />
+			</Card>
+		</>
+	);
+};
+
+export default SessionSettings;
diff --git a/apps/react-admin/src/components/abp/auditing/entity-change-drawer.tsx b/apps/react-admin/src/components/abp/auditing/entity-change-drawer.tsx
new file mode 100644
index 000000000..6aa304400
--- /dev/null
+++ b/apps/react-admin/src/components/abp/auditing/entity-change-drawer.tsx
@@ -0,0 +1,36 @@
+import { getListWithUsernameApi } from "@/api/management/auditing/entity-changes";
+import { EntityChangeTable } from "./entity-change-table";
+import type { EntityChangeGetWithUsernameInput } from "#/management/auditing/entity-changes";
+import { Drawer } from "antd";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+
+interface EntityChangeDrawerProps {
+	open: boolean;
+	onClose: () => void;
+	input?: EntityChangeGetWithUsernameInput;
+	subject?: string;
+}
+
+export const EntityChangeDrawer: React.FC<EntityChangeDrawerProps> = ({ open, onClose, input, subject }) => {
+	const { t } = useTranslation();
+
+	const { data: entityChanges = [] } = useQuery({
+		queryKey: ["entityChanges", input],
+		queryFn: async () => {
+			if (!input) return [];
+			const { items } = await getListWithUsernameApi(input);
+			return items.map((item) => ({
+				...item.entityChange,
+				userName: item.userName,
+			}));
+		},
+		enabled: open && !!input,
+	});
+
+	return (
+		<Drawer title={`${t("AbpAuditLogging.EntitiesChanged")}: ${subject}`} open={open} onClose={onClose} width={800}>
+			<EntityChangeTable data={entityChanges} showUserName />
+		</Drawer>
+	);
+};
diff --git a/apps/react-admin/src/components/abp/auditing/entity-change-table.tsx b/apps/react-admin/src/components/abp/auditing/entity-change-table.tsx
new file mode 100644
index 000000000..43f271565
--- /dev/null
+++ b/apps/react-admin/src/components/abp/auditing/entity-change-table.tsx
@@ -0,0 +1,140 @@
+import { formatToDateTime } from "@/utils/abp";
+import { useTranslation } from "react-i18next";
+import type { EntityChangeDto, PropertyChange, ChangeType } from "#/management/auditing/entity-changes";
+import { Tag, Table, Card } from "antd";
+import type { ColumnsType } from "antd/es/table";
+import { useState, useMemo } from "react";
+import { useAuditLogs } from "@/hooks/abp/auditing/use-audit-logs";
+import Scrollbar from "@/components/scrollbar";
+
+interface EntityChangeTableProps {
+	data: EntityChangeDto[];
+	showUserName?: boolean;
+}
+
+export const EntityChangeTable: React.FC<EntityChangeTableProps> = ({ data, showUserName = false }) => {
+	const [pageSize, setPageSize] = useState(10);
+	const [current, setCurrent] = useState(1);
+	const { t } = useTranslation();
+	const { getChangeTypeColor, getChangeTypeValue } = useAuditLogs();
+
+	const columns: ColumnsType<EntityChangeDto> = [
+		showUserName && {
+			title: t("AbpAuditLogging.UserName"),
+			dataIndex: "userName",
+			align: "center",
+			width: 100, // 设置列宽
+		},
+		{
+			title: t("AbpAuditLogging.ChangeType"),
+			dataIndex: "changeType",
+			sorter: true,
+			align: "center",
+			width: 120, // 设置列宽
+			render: (type: ChangeType) => <Tag color={getChangeTypeColor(type)}>{getChangeTypeValue(type)}</Tag>,
+		},
+		{
+			title: t("AbpAuditLogging.StartTime"),
+			dataIndex: "changeTime",
+			sorter: true,
+			width: 200, // 设置列宽
+			render: (value: Date) => value && formatToDateTime(value),
+		},
+		{
+			title: t("AbpAuditLogging.EntityTypeFullName"),
+			dataIndex: "entityTypeFullName",
+			ellipsis: true,
+			sorter: true,
+			width: 400, // 设置列宽
+		},
+		{
+			title: t("AbpAuditLogging.EntityId"),
+			dataIndex: "entityId",
+			sorter: true,
+			width: 312, // 设置列宽
+		},
+		{
+			title: t("AbpAuditLogging.TenantId"),
+			dataIndex: "entityTenantId",
+			sorter: true,
+			width: 312, // 设置列宽
+		},
+	].filter(Boolean) as ColumnsType<EntityChangeDto>;
+
+	const propertyColumns: ColumnsType<PropertyChange> = [
+		{
+			title: t("AbpAuditLogging.PropertyName"),
+			dataIndex: "propertyName",
+			sorter: true,
+			width: 150, // 设置列宽
+		},
+		{
+			title: t("AbpAuditLogging.NewValue"),
+			dataIndex: "newValue",
+			sorter: true,
+			className: "font-medium text-success",
+			width: 250, // 设置列宽
+		},
+		{
+			title: t("AbpAuditLogging.OriginalValue"),
+			dataIndex: "originalValue",
+			sorter: true,
+			className: "font-medium text-error",
+			width: 250, // 设置列宽
+		},
+		{
+			title: t("AbpAuditLogging.PropertyTypeFullName"),
+			dataIndex: "propertyTypeFullName",
+			sorter: true,
+			width: 250, // 设置列宽
+		},
+	];
+
+	const paginatedData = useMemo(() => {
+		const startIndex = (current - 1) * pageSize;
+		return data.slice(startIndex, startIndex + pageSize);
+	}, [data, current, pageSize]);
+
+	return (
+		<Card>
+			<Scrollbar>
+				<div className="flex flex-col space-y-4">
+					<div className="w-auto">
+						<Table
+							columns={columns}
+							dataSource={paginatedData}
+							rowKey="id"
+							tableLayout="fixed" //https://github.com/ant-design/ant-design/issues/39437#issuecomment-1344152456
+							pagination={{
+								current,
+								pageSize,
+								total: data.length,
+								onChange: (page, size) => {
+									setCurrent(page);
+									setPageSize(size);
+								},
+								showSizeChanger: true,
+								pageSizeOptions: ["10", "25", "50", "100"],
+							}}
+							expandable={{
+								expandedRowRender: (record) => (
+									<div>
+										<Table
+											tableLayout="fixed"
+											columns={propertyColumns}
+											dataSource={record.propertyChanges}
+											pagination={false}
+											rowKey="propertyName"
+											bordered
+											className="w-2/3"
+										/>
+									</div>
+								),
+							}}
+						/>
+					</div>
+				</div>
+			</Scrollbar>
+		</Card>
+	);
+};
diff --git a/apps/react-admin/src/components/abp/claims/claim-modal.tsx b/apps/react-admin/src/components/abp/claims/claim-modal.tsx
new file mode 100644
index 000000000..1da72b42f
--- /dev/null
+++ b/apps/react-admin/src/components/abp/claims/claim-modal.tsx
@@ -0,0 +1,111 @@
+import type React from "react";
+import { useEffect } from "react";
+import { Modal, Form, Input, Select } from "antd";
+import { useTranslation } from "react-i18next";
+import type { IdentityClaimCreateDto, IdentityClaimDto, IdentityClaimUpdateDto } from "#/management/identity/claims";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { getAssignableClaimsApi } from "@/api/management/identity/claim-types";
+import { toast } from "sonner";
+
+interface ClaimEditModalProps {
+	visible: boolean;
+	claim?: IdentityClaimDto;
+	onClose: () => void;
+	onChange: (data: IdentityClaimDto) => void;
+	createApi: (input: IdentityClaimCreateDto) => Promise<void>;
+	updateApi: (input: IdentityClaimUpdateDto) => Promise<void>;
+}
+
+const ClaimModal: React.FC<ClaimEditModalProps> = ({ visible, claim, onClose, onChange, createApi, updateApi }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+
+	// Query for assignable claims
+	const { data: assignableClaimsData } = useQuery({
+		queryKey: ["assignableClaims"],
+		queryFn: getAssignableClaimsApi,
+		enabled: visible && !claim?.id,
+	});
+
+	// Mutations for create/update
+	const { mutateAsync: mutateCreate, isPending: isCreating } = useMutation({
+		mutationFn: createApi,
+		onSuccess: (_, variables) => {
+			onChange(variables as IdentityClaimDto);
+			onClose();
+			toast.success($t("AbpUi.CreatedSuccessfully"));
+		},
+	});
+
+	const { mutateAsync: mutateUpdate, isPending: isUpdating } = useMutation({
+		mutationFn: updateApi,
+		onSuccess: (_, variables) => {
+			onChange({
+				claimType: claim?.claimType,
+				claimValue: variables.newClaimValue,
+				id: claim?.id,
+			} as IdentityClaimDto);
+			onClose();
+			toast.success($t("AbpUi.SavedSuccessfully"));
+		},
+	});
+
+	useEffect(() => {
+		if (visible) {
+			form.resetFields();
+			if (claim) {
+				form.setFieldsValue({
+					...claim,
+					newClaimValue: claim.claimValue,
+				});
+			}
+		}
+	}, [visible, claim, form.setFieldsValue, form.resetFields]);
+
+	const handleOk = async () => {
+		try {
+			const values = await form.validateFields();
+			if (claim?.id) {
+				await mutateUpdate({
+					claimType: claim.claimType,
+					claimValue: claim.claimValue,
+					newClaimValue: values.claimValue,
+				});
+			} else {
+				await mutateCreate({
+					claimType: values.claimType,
+					claimValue: values.claimValue,
+				});
+			}
+		} catch (error) {
+			// Form validation error, no need to handle
+		}
+	};
+
+	return (
+		<Modal
+			open={visible}
+			title={$t("AbpIdentity.ManageClaim")}
+			onCancel={onClose}
+			onOk={handleOk}
+			confirmLoading={isCreating || isUpdating}
+		>
+			<Form form={form} layout="vertical">
+				<Form.Item name="claimType" label={$t("AbpIdentity.DisplayName:ClaimType")} rules={[{ required: true }]}>
+					<Select
+						disabled={!!claim?.id}
+						options={assignableClaimsData?.items.map((item) => ({
+							label: item.name,
+							value: item.name,
+						}))}
+					/>
+				</Form.Item>
+				<Form.Item name="claimValue" label={$t("AbpIdentity.DisplayName:ClaimValue")} rules={[{ required: true }]}>
+					<Input.TextArea />
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+};
+
+export default ClaimModal;
diff --git a/apps/react-admin/src/components/abp/claims/claim-table.tsx b/apps/react-admin/src/components/abp/claims/claim-table.tsx
new file mode 100644
index 000000000..362374b01
--- /dev/null
+++ b/apps/react-admin/src/components/abp/claims/claim-table.tsx
@@ -0,0 +1,133 @@
+import type React from "react";
+import { useState, useRef } from "react";
+import { Button, Popconfirm, Space } from "antd";
+import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { ProTable, type ActionType, type ProColumns } from "@ant-design/pro-table";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { IdentityClaimDto } from "#/management/identity/claims";
+import type { ClaimModalProps } from "./types";
+import { toast } from "sonner";
+import { withAccessChecker } from "@/utils/abp/access-checker";
+import ClaimModal from "./claim-modal";
+
+const ClaimTable: React.FC<ClaimModalProps> = ({
+	createApi,
+	createPolicy,
+	deleteApi,
+	deletePolicy,
+	getApi,
+	updateApi,
+	updatePolicy,
+	queryKey,
+}) => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const queryClient = useQueryClient();
+	const [modalVisible, setModalVisible] = useState(false);
+	const [selectedClaim, setSelectedClaim] = useState<IdentityClaimDto | null>(null);
+
+	const { data: claimsData } = useQuery({
+		queryKey: queryKey,
+		queryFn: getApi,
+	});
+
+	const { mutateAsync: deleteClaim } = useMutation({
+		mutationFn: deleteApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: queryKey });
+		},
+	});
+
+	const openModal = (claim?: IdentityClaimDto) => {
+		setSelectedClaim(claim || null);
+		setModalVisible(true);
+	};
+
+	const closeModal = () => {
+		setModalVisible(false);
+		setSelectedClaim(null);
+	};
+
+	const handleDelete = async (row: IdentityClaimDto) => {
+		await deleteClaim({
+			claimType: row.claimType,
+			claimValue: row.claimValue,
+		});
+	};
+
+	const columns: ProColumns<IdentityClaimDto>[] = [
+		{
+			title: $t("AbpIdentity.DisplayName:ClaimType"),
+			dataIndex: "claimType",
+			width: 120,
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:ClaimValue"),
+			dataIndex: "claimValue",
+			width: "auto",
+		},
+		{
+			title: $t("AbpUi.Actions"),
+			dataIndex: "action",
+			fixed: "right",
+			width: 180,
+			render: (_, record) => (
+				<Space>
+					{withAccessChecker(
+						<Button type="link" icon={<EditOutlined />} onClick={() => openModal(record)}>
+							{$t("AbpUi.Edit")}
+						</Button>,
+						[updatePolicy],
+					)}
+					{withAccessChecker(
+						<Popconfirm
+							title={$t("AbpIdentity.WillDeleteClaim", { 0: record.claimType })}
+							onConfirm={() => handleDelete(record)}
+						>
+							<Button type="link" danger icon={<DeleteOutlined />}>
+								{$t("AbpUi.Delete")}
+							</Button>
+						</Popconfirm>,
+						[deletePolicy],
+					)}
+				</Space>
+			),
+		},
+	];
+
+	return (
+		<div>
+			<ProTable<IdentityClaimDto>
+				actionRef={actionRef}
+				columns={columns}
+				rowKey="id"
+				search={false}
+				dataSource={claimsData?.items}
+				pagination={false}
+				toolBarRender={() => [
+					withAccessChecker(
+						<Button type="primary" onClick={() => openModal()}>
+							{$t("AbpIdentity.AddClaim")}
+						</Button>,
+						[createPolicy],
+					),
+				]}
+			/>
+			<ClaimModal
+				visible={modalVisible}
+				claim={selectedClaim || undefined}
+				onClose={closeModal}
+				onChange={() => {
+					queryClient.invalidateQueries({ queryKey: queryKey });
+					closeModal();
+				}}
+				createApi={createApi}
+				updateApi={updateApi}
+			/>
+		</div>
+	);
+};
+
+export default ClaimTable;
diff --git a/apps/react-admin/src/components/abp/claims/types.ts b/apps/react-admin/src/components/abp/claims/types.ts
new file mode 100644
index 000000000..89b295171
--- /dev/null
+++ b/apps/react-admin/src/components/abp/claims/types.ts
@@ -0,0 +1,36 @@
+import type { ListResultDto } from "#/abp-core";
+
+import type {
+	IdentityClaimCreateDto,
+	IdentityClaimDeleteDto,
+	IdentityClaimDto,
+	IdentityClaimUpdateDto,
+} from "#/management/identity/claims";
+
+interface ClaimEditModalProps {
+	/** 新增声明api */
+	createApi: (input: IdentityClaimCreateDto) => Promise<void>;
+	/** 新增声明权限代码 */
+	createPolicy: string;
+	/** 删除声明api */
+	deleteApi: (input: IdentityClaimDeleteDto) => Promise<void>;
+	/** 删除声明权限代码 */
+	deletePolicy: string;
+	/** 更新声明api */
+	updateApi: (input: IdentityClaimUpdateDto) => Promise<void>;
+	/** 更新声明权限代码 */
+	updatePolicy: string;
+}
+
+interface ClaimModalProps extends ClaimEditModalProps {
+	/** 加载声明列表api */
+	getApi: () => Promise<ListResultDto<IdentityClaimDto>>;
+	queryKey: string[];
+}
+
+interface ClaimModalEvents {
+	(event: "change", data: IdentityClaimDto): void;
+	(event: "onDelete"): void;
+}
+
+export type { ClaimEditModalProps, ClaimModalEvents, ClaimModalProps };
diff --git a/apps/react-admin/src/components/abp/common/delete-modal.tsx b/apps/react-admin/src/components/abp/common/delete-modal.tsx
new file mode 100644
index 000000000..54a4fe642
--- /dev/null
+++ b/apps/react-admin/src/components/abp/common/delete-modal.tsx
@@ -0,0 +1,21 @@
+import type React from "react";
+import { Modal } from "antd";
+import { useTranslation } from "react-i18next";
+
+interface DeleteModalProps {
+	visible: boolean;
+	onConfirm: () => void;
+	onCancel: () => void;
+}
+
+const DeleteModal: React.FC<DeleteModalProps> = ({ visible, onConfirm, onCancel }) => {
+	const { t: $t } = useTranslation();
+
+	return (
+		<Modal title={$t("AbpUi.AreYouSure")} open={visible} onOk={onConfirm} onCancel={onCancel}>
+			{$t("AbpUi.ItemWillBeDeletedMessage")}
+		</Modal>
+	);
+};
+
+export default DeleteModal;
diff --git a/apps/react-admin/src/components/abp/common/json-edit.tsx b/apps/react-admin/src/components/abp/common/json-edit.tsx
new file mode 100644
index 000000000..5ee8bb618
--- /dev/null
+++ b/apps/react-admin/src/components/abp/common/json-edit.tsx
@@ -0,0 +1,28 @@
+import type React from "react";
+import { JsonEditor, githubDarkTheme, githubLightTheme } from "json-edit-react";
+import { useTheme } from "@/theme/hooks";
+import { ThemeMode } from "#/enum";
+import { tryParseJson } from "@/utils/try-parse-json";
+
+interface JsonEditProps {
+	data: object | any[] | string;
+}
+/**
+ * default readonly json viewer
+ */
+const JsonEdit: React.FC<JsonEditProps> = ({ data }) => {
+	const { mode } = useTheme();
+	const parseData = typeof data === "string" ? tryParseJson(data) : data;
+	return (
+		<JsonEditor
+			rootName={""}
+			data={parseData}
+			theme={mode === ThemeMode.Dark ? githubDarkTheme : githubLightTheme}
+			restrictEdit={true}
+			restrictDelete={true}
+			restrictAdd={true}
+		/>
+	);
+};
+
+export default JsonEdit;
diff --git a/apps/react-admin/src/components/abp/display-names/display-name-modal.tsx b/apps/react-admin/src/components/abp/display-names/display-name-modal.tsx
new file mode 100644
index 000000000..2da06833e
--- /dev/null
+++ b/apps/react-admin/src/components/abp/display-names/display-name-modal.tsx
@@ -0,0 +1,58 @@
+import { Form, Input, Modal, Select } from "antd";
+import { useTranslation } from "react-i18next";
+import type { DisplayNameInfo } from "./types";
+import useAbpStore from "@/store/abpCoreStore";
+
+interface DisplayNameModalProps {
+	visible: boolean;
+	onClose: () => void;
+	onChange: (data: DisplayNameInfo) => void;
+}
+
+const DisplayNameModal: React.FC<DisplayNameModalProps> = ({ visible, onClose, onChange }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+	const { application } = useAbpStore();
+
+	const handleOk = async () => {
+		try {
+			const values = await form.validateFields();
+			onChange({
+				culture: values.culture,
+				displayName: values.displayName,
+			});
+			form.resetFields();
+			onClose();
+		} catch (error) {
+			console.error("Validation failed:", error);
+		}
+	};
+
+	return (
+		<Modal
+			open={visible}
+			title={$t("AbpOpenIddict.DisplayName:AddNew")}
+			onCancel={onClose}
+			onOk={handleOk}
+			width="50%"
+			destroyOnClose
+		>
+			<Form form={form} layout="vertical">
+				<Form.Item label={$t("AbpOpenIddict.DisplayName:CultureName")} name="culture" rules={[{ required: true }]}>
+					<Select
+						className="w-full"
+						options={application?.localization.languages.map((lang) => ({
+							label: lang.displayName,
+							value: lang.cultureName,
+						}))}
+					/>
+				</Form.Item>
+				<Form.Item label={$t("AbpOpenIddict.DisplayName:DisplayName")} name="displayName" rules={[{ required: true }]}>
+					<Input className="w-full" autoComplete="off" />
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+};
+
+export default DisplayNameModal;
diff --git a/apps/react-admin/src/components/abp/display-names/display-name-table.tsx b/apps/react-admin/src/components/abp/display-names/display-name-table.tsx
new file mode 100644
index 000000000..3454df082
--- /dev/null
+++ b/apps/react-admin/src/components/abp/display-names/display-name-table.tsx
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { Button, Popconfirm } from "antd";
+import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { ProTable, type ProColumns } from "@ant-design/pro-table";
+import type { DisplayNameInfo, DisplayNameProps } from "./types";
+import DisplayNameModal from "./display-name-modal";
+
+const DisplayNameTable: React.FC<DisplayNameProps> = ({ data, onChange, onDelete }) => {
+	const { t: $t } = useTranslation();
+	const [modalVisible, setModalVisible] = useState(false);
+
+	const dataSource = Object.entries(data || {}).map(([culture, displayName]) => ({
+		culture,
+		displayName,
+		key: culture,
+	}));
+
+	const columns: ProColumns<DisplayNameInfo>[] = [
+		{
+			title: $t("AbpOpenIddict.DisplayName:CultureName"),
+			dataIndex: "culture",
+			align: "left",
+			width: 200,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:DisplayName"),
+			dataIndex: "displayName",
+			align: "left",
+			width: 200,
+		},
+		{
+			title: $t("AbpUi.Actions"),
+			width: 180,
+			fixed: "right",
+			render: (_, record) => (
+				<Popconfirm
+					title={$t("AbpUi.ItemWillBeDeletedMessageWithFormat", { 0: record.culture })}
+					onConfirm={() => onDelete?.(record)}
+				>
+					<Button type="link" danger icon={<DeleteOutlined />} block>
+						{$t("AbpUi.Delete")}
+					</Button>
+				</Popconfirm>
+			),
+		},
+	];
+
+	return (
+		<>
+			<ProTable<DisplayNameInfo>
+				columns={columns}
+				dataSource={dataSource}
+				search={false}
+				pagination={false}
+				toolBarRender={() => [
+					<Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => setModalVisible(true)}>
+						{$t("AbpOpenIddict.DisplayName:AddNew")}
+					</Button>,
+				]}
+			/>
+
+			<DisplayNameModal
+				visible={modalVisible}
+				onClose={() => setModalVisible(false)}
+				onChange={(info) => {
+					onChange?.(info);
+					setModalVisible(false);
+				}}
+			/>
+		</>
+	);
+};
+
+export default DisplayNameTable;
diff --git a/apps/react-admin/src/components/abp/display-names/types.ts b/apps/react-admin/src/components/abp/display-names/types.ts
new file mode 100644
index 000000000..2266a7a59
--- /dev/null
+++ b/apps/react-admin/src/components/abp/display-names/types.ts
@@ -0,0 +1,12 @@
+import type { Dictionary } from "#/abp-core";
+
+export interface DisplayNameInfo {
+	culture: string;
+	displayName: string;
+}
+
+export interface DisplayNameProps {
+	data?: Dictionary<string, string>;
+	onChange?: (data: DisplayNameInfo) => void;
+	onDelete?: (data: DisplayNameInfo) => void;
+}
diff --git a/apps/react-admin/src/components/abp/localizable-input/localizable-input.tsx b/apps/react-admin/src/components/abp/localizable-input/localizable-input.tsx
new file mode 100644
index 000000000..07939546d
--- /dev/null
+++ b/apps/react-admin/src/components/abp/localizable-input/localizable-input.tsx
@@ -0,0 +1,183 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Form, Input, Select } from "antd";
+import type { DefaultOptionType } from "antd/es/select";
+import { useTranslation } from "react-i18next";
+import { isNullOrWhiteSpace } from "@/utils/string";
+import type { LocalizableStringInfo } from "#/abp-core/global";
+import useAbpStore from "@/store/abpCoreStore";
+import { localizationSerializer } from "@/utils/abp/localization-serializer";
+
+interface Props {
+	allowClear?: boolean;
+	disabled?: boolean;
+	value?: string;
+	onChange?: (value: string) => void;
+}
+
+interface State {
+	displayName?: string;
+	displayNames: DefaultOptionType[];
+	resourceName?: string;
+}
+
+const LocalizableInput: React.FC<Props> = ({ allowClear, disabled, value, onChange }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+	const abpStore = useAbpStore();
+	const { deserialize, serialize } = localizationSerializer();
+
+	const [state, setState] = useState<State>({
+		displayNames: [],
+		displayName: undefined,
+		resourceName: undefined,
+	});
+
+	const isFixed = useMemo(() => {
+		return state.resourceName === "Fixed";
+	}, [state.resourceName]);
+
+	const resources = useMemo(() => {
+		if (!abpStore.localization) {
+			return [];
+		}
+
+		const sources = Object.keys(abpStore.localization.resources).map((key) => ({
+			label: key,
+			value: key,
+		}));
+
+		return [
+			{
+				label: $t("component.localizable_input.resources.fiexed.group"),
+				options: [
+					{
+						label: $t("component.localizable_input.resources.fiexed.label"),
+						value: "Fixed",
+					},
+				],
+				value: "F",
+			},
+			{
+				label: $t("component.localizable_input.resources.localization.group"),
+				options: sources,
+				value: "R",
+			},
+		];
+	}, [abpStore.localization, $t]);
+
+	const triggerDisplayNameChange = useCallback(
+		(displayName?: string) => {
+			if (!displayName) return;
+
+			let updateValue = "";
+			if (isFixed) {
+				updateValue = `F:${displayName}`;
+			} else if (!isNullOrWhiteSpace(state.resourceName)) {
+				const info: LocalizableStringInfo = {
+					name: displayName,
+					resourceName: state.resourceName ?? "",
+				};
+				updateValue = serialize(info);
+			}
+
+			onChange?.(updateValue);
+			form.setFieldValue("localizableInput", updateValue);
+		},
+		[isFixed, state.resourceName, serialize, onChange, form],
+	);
+
+	const handleDisplayNameChange = (value?: string) => {
+		setState((prev) => ({ ...prev, displayName: value }));
+		triggerDisplayNameChange(value);
+	};
+
+	const localizationResources = abpStore.localization?.resources;
+	const handleResourceChange = useCallback(
+		(value?: string, triggerChanged = false) => {
+			const newDisplayNames: DefaultOptionType[] = [];
+
+			if (value && localizationResources?.[value]) {
+				Object.keys(localizationResources[value].texts).forEach((key) => {
+					const labelText = localizationResources[value]?.texts[key];
+					newDisplayNames.push({
+						label: labelText ?? key,
+						value: key,
+					});
+				});
+			}
+
+			setState((prev) => ({
+				...prev,
+				displayNames: newDisplayNames,
+				displayName: undefined,
+				resourceName: value,
+			}));
+
+			if (triggerChanged) {
+				triggerDisplayNameChange(undefined);
+			}
+		},
+		[localizationResources, triggerDisplayNameChange],
+	);
+	useEffect(() => {
+		if (value) {
+			const info = deserialize(value);
+			if (state.resourceName !== info.resourceName) {
+				handleResourceChange(isNullOrWhiteSpace(info.resourceName) ? undefined : info.resourceName, false);
+			}
+			if (state.displayName !== info.name) {
+				setState((prev) => ({
+					...prev,
+					displayName: isNullOrWhiteSpace(info.name) ? undefined : info.name,
+				}));
+			}
+		}
+	}, [value]);
+
+	return (
+		<div className="w-full">
+			<Form.Item noStyle>
+				<Input.Group>
+					<div className="flex flex-row gap-4">
+						<div className="basis-2/5">
+							<Select
+								value={state.resourceName}
+								allowClear={allowClear}
+								disabled={disabled}
+								options={resources}
+								placeholder={$t("component.localizable_input.placeholder")}
+								className="w-full"
+								onChange={(value) => handleResourceChange(value?.toString(), true)}
+							/>
+						</div>
+						<div className="basis-3/5">
+							{isFixed ? (
+								<Input
+									allowClear={allowClear}
+									disabled={disabled}
+									placeholder={$t("component.localizable_input.resources.fiexed.placeholder")}
+									value={state.displayName}
+									autoComplete="off"
+									className="w-full"
+									onChange={(e) => handleDisplayNameChange(e.target.value)}
+								/>
+							) : (
+								<Select
+									allowClear={allowClear}
+									disabled={disabled}
+									options={state.displayNames}
+									placeholder={$t("component.localizable_input.resources.localization.placeholder")}
+									value={state.displayName}
+									className="w-full"
+									onChange={(value) => handleDisplayNameChange(value?.toString())}
+								/>
+							)}
+						</div>
+					</div>
+				</Input.Group>
+			</Form.Item>
+		</div>
+	);
+};
+
+export default LocalizableInput;
diff --git a/apps/react-admin/src/components/abp/permissions/permission-modal.tsx b/apps/react-admin/src/components/abp/permissions/permission-modal.tsx
new file mode 100644
index 000000000..28a7eeb75
--- /dev/null
+++ b/apps/react-admin/src/components/abp/permissions/permission-modal.tsx
@@ -0,0 +1,289 @@
+import { useEffect, useMemo, useState } from "react";
+import { Checkbox, Divider, Card, Tabs, Tree, Modal } from "antd";
+import type { CheckboxChangeEvent } from "antd/es/checkbox";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getApi, updateApi } from "@/api/management/permissions/permissions";
+import type { PermissionTree } from "#/management/permissions";
+import {
+	generatePermissionTree,
+	getGrantedPermissionKeys,
+	getGrantPermissionCount,
+	getGrantPermissionsCount,
+	getParentList,
+	getPermissionCount,
+	getPermissionsCount,
+	toPermissionList,
+	getChildren,
+} from "./permissions-utils";
+import { toast } from "sonner";
+
+interface Props {
+	visible: boolean;
+	onClose: () => void;
+	onChange?: () => void;
+	providerName: string;
+	providerKey?: string;
+	displayName?: string;
+	readonly?: boolean;
+}
+
+//TODO 测试和修改这个modal
+const PermissionModal: React.FC<Props> = ({
+	visible,
+	onClose,
+	onChange,
+	providerName,
+	providerKey,
+	displayName,
+	readonly = false,
+}) => {
+	const { t: $t } = useTranslation();
+	const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
+	const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
+	const [permissionTree, setPermissionTree] = useState<PermissionTree[]>([]);
+	const queryClient = useQueryClient();
+	const { data: permissionData } = useQuery({
+		queryKey: ["permissions", providerName, providerKey],
+		queryFn: () =>
+			getApi({ providerName, providerKey }).then((res) => {
+				return { entityDisplayName: res.entityDisplayName, tree: generatePermissionTree(res.groups) };
+			}),
+		enabled: visible,
+	});
+
+	useEffect(() => {
+		if (permissionData) {
+			setPermissionTree(permissionData.tree);
+			setCheckedKeys(getGrantedPermissionKeys(permissionData.tree));
+		}
+	}, [permissionData]);
+
+	// 更新权限
+	const { mutateAsync: updatePermissions, isPending: isUpdating } = useMutation({
+		mutationFn: (permissions: any) => updateApi({ providerKey, providerName }, { permissions }),
+		onSuccess: () => {
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["permissions", providerName, providerKey] });
+			onChange?.();
+			onClose();
+		},
+	});
+
+	// 计算权限状态
+	const permissionState = useMemo(() => {
+		const grantCount = getGrantPermissionsCount(permissionTree);
+		const permissionCount = getPermissionsCount(permissionTree);
+		return {
+			checked: grantCount === permissionCount,
+			indeterminate: grantCount > 0 && grantCount < permissionCount,
+		};
+	}, [permissionTree, checkedKeys]);
+
+	// 全选所有节点权限
+	const handleCheckAll = (e: CheckboxChangeEvent) => {
+		const { checked } = e.target;
+		const newCheckedKeys: string[] = [];
+
+		permissionTree.forEach((current) => {
+			const children = getChildren(current.children);
+			children.forEach((permission) => {
+				permission.isGranted = checked;
+				if (checked) {
+					newCheckedKeys.push(permission.name);
+				}
+			});
+			current.isGranted = checked;
+		});
+
+		setCheckedKeys(newCheckedKeys);
+	};
+
+	// 全选当前节点权限
+	const handleNodeCheckAll = (e: CheckboxChangeEvent, permission: PermissionTree) => {
+		const { checked } = e.target;
+		const children = getChildren(permission.children ?? []);
+		const childKeys = children.map((node) => node.name);
+
+		children.forEach((permission) => {
+			permission.isGranted = checked;
+		});
+
+		setCheckedKeys((prev) => (checked ? [...prev, ...childKeys] : prev.filter((key) => !childKeys.includes(key))));
+
+		permission.isGranted = checked;
+	};
+
+	// 处理节点选中状态
+	const handleNodeCheck = (permission: PermissionTree, _keys: any, info: any) => {
+		const nodeKey = String(info.node.key);
+		const index = checkedKeys.indexOf(nodeKey);
+		setCheckedKeys((prev) => (index === -1 ? [...prev, nodeKey] : prev.filter((key) => key !== nodeKey)));
+
+		const checked = info.checked;
+		// ✅ 递归更新 `permissionTree`
+		setPermissionTree((prevTree) => {
+			const newTree = [...prevTree]; // 创建新数组，确保 React 触发更新
+
+			// 递归函数：更新 `isGranted`
+			const updateTree = (tree: PermissionTree[]): PermissionTree[] => {
+				return tree.map((node) => {
+					if (node.name === nodeKey) {
+						return { ...node, isGranted: checked }; // 复制对象，确保 React 重新渲染
+					}
+					if (node.children) {
+						return { ...node, children: updateTree(node.children) }; // 递归处理子节点
+					}
+					return node;
+				});
+			};
+
+			return updateTree(newTree);
+		});
+		const currentPermission = info.node as PermissionTree;
+
+		// 上级权限联动
+		checkParentGrant(permission, currentPermission, checked);
+		// 下级权限联动
+		checkChildrenGrant(currentPermission, checked);
+		// 自身授权
+		currentPermission.isGranted = checked;
+	};
+
+	// 处理下级权限联动
+	const checkChildrenGrant = (current: PermissionTree, isGranted: boolean) => {
+		const children = getChildren(current.children);
+		if (!isGranted) {
+			const childKeys: string[] = [];
+			children.forEach((node) => {
+				node.isGranted = false;
+				childKeys.push(node.name);
+			});
+			setCheckedKeys((prev) => prev.filter((key) => !childKeys.includes(key)));
+		}
+	};
+
+	// 处理上级权限联动
+	const checkParentGrant = (root: PermissionTree, current: PermissionTree, isGranted: boolean) => {
+		if (!isGranted || !current.parentName) return;
+
+		const parentNodes = getParentList(root.children, current.parentName);
+		if (parentNodes) {
+			const parentKeys: string[] = [];
+			parentNodes.forEach((node) => {
+				node.isGranted = true;
+				if (!checkedKeys.includes(node.name)) {
+					parentKeys.push(node.name);
+				}
+			});
+			setCheckedKeys((prev) => [...prev, ...parentKeys]);
+		}
+	};
+
+	const handleOk = async () => {
+		const permissions = toPermissionList(permissionTree);
+		await updatePermissions(permissions);
+	};
+
+	return (
+		<Modal
+			open={visible}
+			title={`${$t("AbpPermissionManagement.Permissions")} - ${displayName || permissionData?.entityDisplayName}`}
+			onCancel={onClose}
+			onOk={handleOk}
+			width="50%"
+			centered
+			confirmLoading={isUpdating}
+			className="permission-modal"
+		>
+			<div className="flex flex-col">
+				<div>
+					<Checkbox disabled={readonly} onChange={handleCheckAll} {...permissionState}>
+						{$t("AbpPermissionManagement.SelectAllInAllTabs")}
+					</Checkbox>
+				</div>
+				<Divider />
+				<Tabs
+					tabPosition="left"
+					type="card"
+					className="h-[34rem]"
+					tabBarStyle={{ width: "14rem" }}
+					items={permissionTree.map((permission) => ({
+						key: permission.name,
+						label: `${permission.displayName} (${getGrantPermissionCount(permission)}/${getPermissionCount(permission)})`,
+						children: (
+							<Card bordered={false} title={permission.displayName}>
+								<div className="flex flex-col">
+									<Checkbox
+										disabled={readonly}
+										checked={getGrantPermissionCount(permission) === getPermissionCount(permission)}
+										indeterminate={
+											getGrantPermissionCount(permission) > 0 &&
+											getGrantPermissionCount(permission) < getPermissionCount(permission)
+										}
+										onChange={(e) => handleNodeCheckAll(e, permission)}
+									>
+										{$t("AbpPermissionManagement.SelectAllInThisTab")}
+									</Checkbox>
+									<Divider />
+									<div className="max-h-[24rem] overflow-auto pr-2">
+										<Tree
+											checkStrictly
+											checkable
+											checkedKeys={checkedKeys}
+											disabled={readonly}
+											expandedKeys={expandedKeys}
+											fieldNames={{
+												key: "name",
+												title: "displayName",
+												children: "children",
+											}}
+											treeData={permission.children}
+											onCheck={(keys, info) => handleNodeCheck(permission, keys, info)}
+											onExpand={(_keys, info) => {
+												const nodeKey = String(info.node.key);
+												const index = expandedKeys.indexOf(nodeKey);
+												setExpandedKeys((prev) =>
+													index === -1 ? [...prev, nodeKey] : prev.filter((key) => key !== nodeKey),
+												);
+											}}
+											onSelect={(_keys, info) => {
+												const nodeKey = String(info.node.key);
+												const index = expandedKeys.indexOf(nodeKey);
+												setExpandedKeys((prev) =>
+													index === -1 ? [...prev, nodeKey] : prev.filter((key) => key !== nodeKey),
+												);
+											}}
+										/>
+									</div>
+								</div>
+							</Card>
+						),
+					}))}
+				/>
+			</div>
+		</Modal>
+	);
+};
+
+export default PermissionModal;
+
+/*
+
+.permission-modal {
+  :global {
+    .ant-tabs {
+      height: 34rem;
+
+      .ant-tabs-nav {
+        width: 14rem;
+      }
+
+      .ant-tabs-content-holder {
+        overflow: hidden auto !important;
+      }
+    }
+  }
+}
+
+*/
diff --git a/apps/react-admin/src/components/abp/permissions/permissions-utils.ts b/apps/react-admin/src/components/abp/permissions/permissions-utils.ts
new file mode 100644
index 000000000..52c3ab77b
--- /dev/null
+++ b/apps/react-admin/src/components/abp/permissions/permissions-utils.ts
@@ -0,0 +1,132 @@
+import type { PermissionDto, PermissionGroupDto, PermissionTree } from "#/management/permissions";
+import { listToTree } from "@/utils/tree";
+
+export function generatePermissionTree(permissionGroups: PermissionGroupDto[]): PermissionTree[] {
+	const trees: PermissionTree[] = [];
+	permissionGroups.forEach((g) => {
+		const tree: PermissionTree = {
+			disabled: false,
+			displayName: g.displayName,
+			isRoot: true,
+			name: g.name,
+			parentName: g.name,
+			children: [],
+		};
+		tree.children = listToTree(g.permissions, {
+			id: "name",
+			pid: "parentName",
+		});
+		trees.push(tree);
+	});
+	return trees;
+}
+
+export function findNode(children: PermissionTree[], key: string): PermissionTree | undefined {
+	let findC: PermissionTree | undefined;
+	for (const child of children) {
+		if (child.name === key) {
+			findC = child;
+			return findC;
+		}
+		findC = findNode(child.children, key);
+		if (findC) {
+			return findC;
+		}
+	}
+	return findC;
+}
+
+export function getPermissionsCount(children: PermissionTree[]): number {
+	let count = 0;
+	children.forEach((c) => {
+		count += getPermissionCount(c);
+	});
+	return count;
+}
+
+export function getPermissionCount(tree: PermissionTree): number {
+	let count = tree.children.length;
+	tree.children.forEach((c) => {
+		count += getPermissionCount(c);
+	});
+	return count;
+}
+
+export function getGrantPermissionsCount(children: PermissionTree[]): number {
+	let count = 0;
+	children.forEach((c) => {
+		count += getGrantPermissionCount(c);
+	});
+	return count;
+}
+
+export function getGrantPermissionCount(tree: PermissionTree): number {
+	return getGrantedPermissionKeys(tree.children).length;
+}
+
+export function getGrantedPermissionKeys(children: PermissionTree[]): string[] {
+	const keys: string[] = [];
+	children.forEach((c) => {
+		if (c.isGranted === true) {
+			keys.push(c.name);
+		}
+		keys.push(...getGrantedPermissionKeys(c.children));
+	});
+	return keys;
+}
+
+export function getParentList(children: PermissionTree[], name: string): PermissionTree[] | undefined {
+	for (const child of children) {
+		if (child.name === name) {
+			return [child];
+		}
+		if (child.children) {
+			const node = getParentList(child.children, name);
+			if (node) {
+				return [...node, child];
+			}
+		}
+	}
+}
+
+export function toPermissionList(treeList: PermissionTree[]) {
+	const permissions: PermissionDto[] = [];
+	for (const element of treeList) {
+		if (!element.isRoot && element.isGranted !== undefined) {
+			permissions.push({
+				allowedProviders: [],
+				displayName: element.displayName,
+				grantedProviders: [],
+				isGranted: element.isGranted,
+				name: element.name,
+			});
+		}
+		permissions.push(...toPermissionList(element.children));
+	}
+	return permissions;
+}
+
+export function updateParentGrant(tree: PermissionTree, name: string, grant: boolean) {
+	const parentList = getParentList(tree.children, name);
+	if (parentList && Array.isArray(parentList)) {
+		for (const element of parentList) {
+			element.isGranted = grant;
+		}
+	}
+}
+
+export function updateChildrenGrant(children: PermissionTree[], grant: boolean) {
+	for (const child of children) {
+		child.isGranted = grant;
+		updateChildrenGrant(child.children, grant);
+	}
+}
+
+export function getChildren(permissions: PermissionTree[]): PermissionTree[] {
+	const children: PermissionTree[] = [];
+	permissions.forEach((permission) => {
+		children.push(permission);
+		permission.children && children.push(...getChildren(permission.children));
+	});
+	return children;
+}
diff --git a/apps/react-admin/src/components/abp/properties/property-modal.tsx b/apps/react-admin/src/components/abp/properties/property-modal.tsx
new file mode 100644
index 000000000..2517d7553
--- /dev/null
+++ b/apps/react-admin/src/components/abp/properties/property-modal.tsx
@@ -0,0 +1,56 @@
+import type React from "react";
+import { Modal, Form, Input } from "antd";
+import { useTranslation } from "react-i18next";
+import type { PropertyInfo } from "./types";
+
+interface PropertyModalProps {
+	visible: boolean;
+	onClose: () => void;
+	onChange: (data: PropertyInfo) => void;
+}
+
+const PropertyModal: React.FC<PropertyModalProps> = ({ visible, onClose, onChange }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+
+	const handleOk = async () => {
+		try {
+			const values = await form.validateFields();
+			onChange({
+				key: values.key,
+				value: values.value,
+			});
+			form.resetFields();
+			onClose();
+		} catch (error) {
+			console.error("Validation failed:", error);
+		}
+	};
+
+	const handleCancel = () => {
+		form.resetFields();
+		onClose();
+	};
+
+	return (
+		<Modal
+			title={$t("component.extra_property_dictionary.title")}
+			open={visible}
+			onOk={handleOk}
+			onCancel={handleCancel}
+			width="50%"
+			destroyOnClose
+		>
+			<Form form={form} layout="vertical">
+				<Form.Item label={$t("component.extra_property_dictionary.key")} name="key" rules={[{ required: true }]}>
+					<Input autoComplete="off" />
+				</Form.Item>
+				<Form.Item label={$t("component.extra_property_dictionary.value")} name="value" rules={[{ required: true }]}>
+					<Input autoComplete="off" />
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+};
+
+export default PropertyModal;
diff --git a/apps/react-admin/src/components/abp/properties/property-table.tsx b/apps/react-admin/src/components/abp/properties/property-table.tsx
new file mode 100644
index 000000000..363713997
--- /dev/null
+++ b/apps/react-admin/src/components/abp/properties/property-table.tsx
@@ -0,0 +1,102 @@
+import { Button, Popconfirm, Table } from "antd";
+import type { ColumnsType } from "antd/es/table";
+import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { useMemo, useState } from "react";
+import PropertyModal from "./property-modal";
+import type { PropertyInfo, PropertyProps } from "./types";
+
+const PropertyTable: React.FC<PropertyProps> = ({
+	data = {},
+	allowDelete = true,
+	allowEdit = true,
+	disabled = false,
+	onChange,
+	onDelete,
+}) => {
+	const { t: $t } = useTranslation();
+	const [modalVisible, setModalVisible] = useState(false);
+
+	const dataSource = useMemo((): PropertyInfo[] => {
+		return Object.keys(data).map((key) => ({
+			key,
+			value: data[key],
+		}));
+	}, [data]);
+
+	const columns: ColumnsType<PropertyInfo> = useMemo(() => {
+		const baseColumns: ColumnsType<PropertyInfo> = [
+			{
+				align: "left",
+				dataIndex: "key",
+				fixed: "left",
+				width: 100,
+				title: $t("component.extra_property_dictionary.key"),
+			},
+			{
+				align: "left",
+				dataIndex: "value",
+				fixed: "left",
+				title: $t("component.extra_property_dictionary.value"),
+			},
+		];
+
+		if (disabled) {
+			return baseColumns;
+		}
+
+		return [
+			...baseColumns,
+			{
+				align: "center",
+				dataIndex: "action",
+				fixed: "right",
+				key: "action",
+				title: $t("component.extra_property_dictionary.actions.title"),
+				width: 150,
+				render: (_, record: PropertyInfo) =>
+					allowDelete && (
+						<Popconfirm
+							title={$t("component.extra_property_dictionary.itemWillBeDeleted", { key: record.key })}
+							onConfirm={() => handleDelete(record)}
+						>
+							<Button block danger type="link" icon={<DeleteOutlined />}>
+								{$t("component.extra_property_dictionary.actions.delete")}
+							</Button>
+						</Popconfirm>
+					),
+			},
+		];
+	}, [disabled, allowDelete, $t]);
+
+	const handleCreate = () => {
+		setModalVisible(true);
+	};
+
+	const handleDelete = (prop: PropertyInfo) => {
+		onDelete?.(prop);
+	};
+
+	const handleChange = (prop: PropertyInfo) => {
+		onChange?.(prop);
+		setModalVisible(false);
+	};
+
+	return (
+		<div className="flex flex-col gap-4">
+			<div className="flex flex-row justify-end">
+				{!disabled && allowEdit && (
+					<Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>
+						{$t("component.extra_property_dictionary.actions.create")}
+					</Button>
+				)}
+			</div>
+			<div className="justify-center">
+				<Table columns={columns} dataSource={dataSource} rowKey="key" />
+			</div>
+			<PropertyModal visible={modalVisible} onClose={() => setModalVisible(false)} onChange={handleChange} />
+		</div>
+	);
+};
+
+export default PropertyTable;
diff --git a/apps/react-admin/src/components/abp/properties/types.ts b/apps/react-admin/src/components/abp/properties/types.ts
new file mode 100644
index 000000000..591fa70fc
--- /dev/null
+++ b/apps/react-admin/src/components/abp/properties/types.ts
@@ -0,0 +1,16 @@
+import type { Dictionary } from "#/abp-core";
+
+interface PropertyInfo {
+	key: string;
+	value: string;
+}
+interface PropertyProps {
+	allowDelete?: boolean;
+	allowEdit?: boolean;
+	data?: Dictionary<string, string>;
+	disabled?: boolean;
+	onChange?: (data: PropertyInfo) => void;
+	onDelete?: (data: PropertyInfo) => void;
+}
+
+export type { PropertyInfo, PropertyProps };
diff --git a/apps/react-admin/src/components/animate/motion-container.tsx b/apps/react-admin/src/components/animate/motion-container.tsx
new file mode 100644
index 000000000..953386109
--- /dev/null
+++ b/apps/react-admin/src/components/animate/motion-container.tsx
@@ -0,0 +1,40 @@
+import { type MotionProps, m } from "framer-motion";
+
+import { varContainer } from "./variants/container";
+
+interface Props extends MotionProps {
+	className?: string;
+}
+
+/**
+ * Motion 通用容器
+ *
+ * variants: [变体可以用于使用单个动画道具为组件的整个子树设置动画](https://www.framer.com/motion/animation/#variants)
+ *
+ * Variants 是一组预定义的对象
+ * const variants = {
+ *   visible: { opacity: 1 },
+ *   hidden: { opacity: 0 },
+ * }
+ *
+ * 需要指定 inital 和 animate 属性名
+ * <motion.div
+ *  initial="hidden"
+ *  animate="visible"
+ *  variants={variants}
+ * />
+ */
+export default function MotionContainer({ children, className }: Props) {
+	return (
+		<m.div
+			// 这里指定 initial、animate和exit的属性名后，子组件就不需要再重复指定
+			initial="initial"
+			animate="animate"
+			exit="exit"
+			variants={varContainer()}
+			className={className}
+		>
+			{children}
+		</m.div>
+	);
+}
diff --git a/apps/react-admin/src/components/animate/motion-lazy.tsx b/apps/react-admin/src/components/animate/motion-lazy.tsx
new file mode 100644
index 000000000..ffd70a2b8
--- /dev/null
+++ b/apps/react-admin/src/components/animate/motion-lazy.tsx
@@ -0,0 +1,15 @@
+import { LazyMotion, domMax, m } from "framer-motion";
+
+type Props = {
+	children: React.ReactNode;
+};
+/**
+ * [Reduce bundle size by lazy-loading a subset of Motion's features](https://www.framer.com/motion/lazy-motion/)
+ */
+export function MotionLazy({ children }: Props) {
+	return (
+		<LazyMotion strict features={domMax}>
+			<m.div style={{ height: "100%" }}> {children} </m.div>
+		</LazyMotion>
+	);
+}
diff --git a/apps/react-admin/src/components/animate/motion-viewport.tsx b/apps/react-admin/src/components/animate/motion-viewport.tsx
new file mode 100644
index 000000000..d2262c258
--- /dev/null
+++ b/apps/react-admin/src/components/animate/motion-viewport.tsx
@@ -0,0 +1,28 @@
+import { type MotionProps, m } from "framer-motion";
+
+import { varContainer } from "./variants";
+
+interface Props extends MotionProps {
+	className?: string;
+}
+/**
+ * [whileInView: 元素可以在进出视口时设置动画](https://www.framer.com/motion/scroll-animations/#scroll-triggered-animations)
+ *
+ * + viewport: [视口](https://www.framer.com/motion/scroll-animations/###viewport)
+ *
+ *    + once: 仅触发一次
+ */
+export default function MotionViewport({ children, className, ...other }: Props) {
+	return (
+		<m.div
+			initial="initial"
+			whileInView="animate"
+			viewport={{ once: true, amount: 0.3 }}
+			variants={varContainer()}
+			className={className}
+			{...other}
+		>
+			{children}
+		</m.div>
+	);
+}
diff --git a/apps/react-admin/src/components/animate/types.ts b/apps/react-admin/src/components/animate/types.ts
new file mode 100644
index 000000000..9f98899e2
--- /dev/null
+++ b/apps/react-admin/src/components/animate/types.ts
@@ -0,0 +1,26 @@
+export type VariantsType = {
+	durationIn?: number;
+	durationOut?: number;
+	easeIn?: [];
+	easeOut?: [];
+	distance?: number;
+};
+
+export type TranHoverType = {
+	duration?: number;
+	ease?: [];
+};
+export type TranEnterType = {
+	durationIn?: number;
+	easeIn?: [];
+};
+export type TranExitType = {
+	durationOut?: number;
+	easeOut?: [];
+};
+
+export type BackgroundType = {
+	duration?: number;
+	ease?: [];
+	colors?: string[];
+};
diff --git a/apps/react-admin/src/components/animate/variants/action.ts b/apps/react-admin/src/components/animate/variants/action.ts
new file mode 100644
index 000000000..4f7adbe51
--- /dev/null
+++ b/apps/react-admin/src/components/animate/variants/action.ts
@@ -0,0 +1,9 @@
+/**
+ * https://www.framer.com/motion/gestures/
+ * @param hover
+ * @param tap
+ */
+export const varHover = (hover = 1.09, tap = 0.97) => ({
+	hover: { scale: hover },
+	tap: { scale: tap },
+});
diff --git a/apps/react-admin/src/components/animate/variants/background.ts b/apps/react-admin/src/components/animate/variants/background.ts
new file mode 100644
index 000000000..a98458c6b
--- /dev/null
+++ b/apps/react-admin/src/components/animate/variants/background.ts
@@ -0,0 +1,103 @@
+import type { BackgroundType } from "../types";
+
+export const varBgColor = (props?: BackgroundType) => {
+	const colors = props?.colors || ["#19dcea", "#b22cff"];
+	const duration = props?.duration || 5;
+	const ease = props?.ease || "linear";
+
+	return {
+		animate: {
+			background: colors,
+			transition: { duration, ease },
+		},
+	};
+};
+
+// ----------------------------------------------------------------------
+
+export const varBgKenburns = (props?: BackgroundType) => {
+	const duration = props?.duration || 5;
+	const ease = props?.ease || "easeOut";
+
+	return {
+		top: {
+			animate: {
+				scale: [1, 1.25],
+				y: [0, -15],
+				transformOrigin: ["50% 16%", "50% top"],
+				transition: { duration, ease },
+			},
+		},
+		bottom: {
+			animate: {
+				scale: [1, 1.25],
+				y: [0, 15],
+				transformOrigin: ["50% 84%", "50% bottom"],
+				transition: { duration, ease },
+			},
+		},
+		left: {
+			animate: {
+				scale: [1, 1.25],
+				x: [0, 20],
+				y: [0, 15],
+				transformOrigin: ["16% 50%", "0% left"],
+				transition: { duration, ease },
+			},
+		},
+		right: {
+			animate: {
+				scale: [1, 1.25],
+				x: [0, -20],
+				y: [0, -15],
+				transformOrigin: ["84% 50%", "0% right"],
+				transition: { duration, ease },
+			},
+		},
+	};
+};
+
+// ----------------------------------------------------------------------
+
+export const varBgPan = (props?: BackgroundType) => {
+	const colors = props?.colors || ["#ee7752", "#e73c7e", "#23a6d5", "#23d5ab"];
+	const duration = props?.duration || 5;
+	const ease = props?.ease || "linear";
+
+	const gradient = (deg: number) => `linear-gradient(${deg}deg, ${colors})`;
+
+	return {
+		top: {
+			animate: {
+				backgroundImage: [gradient(0), gradient(0)],
+				backgroundPosition: ["center 99%", "center 1%"],
+				backgroundSize: ["100% 600%", "100% 600%"],
+				transition: { duration, ease },
+			},
+		},
+		right: {
+			animate: {
+				backgroundPosition: ["1% center", "99% center"],
+				backgroundImage: [gradient(270), gradient(270)],
+				backgroundSize: ["600% 100%", "600% 100%"],
+				transition: { duration, ease },
+			},
+		},
+		bottom: {
+			animate: {
+				backgroundImage: [gradient(0), gradient(0)],
+				backgroundPosition: ["center 1%", "center 99%"],
+				backgroundSize: ["100% 600%", "100% 600%"],
+				transition: { duration, ease },
+			},
+		},
+		left: {
+			animate: {
+				backgroundPosition: ["99% center", "1% center"],
+				backgroundImage: [gradient(270), gradient(270)],
+				backgroundSize: ["600% 100%", "600% 100%"],
+				transition: { duration, ease },
+			},
+		},
+	};
+};
diff --git a/apps/react-admin/src/components/animate/variants/bounce.ts b/apps/react-admin/src/components/animate/variants/bounce.ts
new file mode 100644
index 000000000..8830c8aba
--- /dev/null
+++ b/apps/react-admin/src/components/animate/variants/bounce.ts
@@ -0,0 +1,111 @@
+import type { VariantsType } from "../types";
+
+import { varTranEnter, varTranExit } from "./transition";
+
+export const varBounce = (props?: VariantsType) => {
+	const durationIn = props?.durationIn;
+	const durationOut = props?.durationOut;
+	const easeIn = props?.easeIn;
+	const easeOut = props?.easeOut;
+
+	return {
+		// IN
+		in: {
+			initial: {},
+			animate: {
+				scale: [0.3, 1.1, 0.9, 1.03, 0.97, 1],
+				opacity: [0, 1, 1, 1, 1, 1],
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				scale: [0.9, 1.1, 0.3],
+				opacity: [1, 1, 0],
+			},
+		},
+		inUp: {
+			initial: {},
+			animate: {
+				y: [720, -24, 12, -4, 0],
+				scaleY: [4, 0.9, 0.95, 0.985, 1],
+				opacity: [0, 1, 1, 1, 1],
+				transition: { ...varTranEnter({ durationIn, easeIn }) },
+			},
+			exit: {
+				y: [12, -24, 720],
+				scaleY: [0.985, 0.9, 3],
+				opacity: [1, 1, 0],
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		inDown: {
+			initial: {},
+			animate: {
+				y: [-720, 24, -12, 4, 0],
+				scaleY: [4, 0.9, 0.95, 0.985, 1],
+				opacity: [0, 1, 1, 1, 1],
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				y: [-12, 24, -720],
+				scaleY: [0.985, 0.9, 3],
+				opacity: [1, 1, 0],
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		inLeft: {
+			initial: {},
+			animate: {
+				x: [-720, 24, -12, 4, 0],
+				scaleX: [3, 1, 0.98, 0.995, 1],
+				opacity: [0, 1, 1, 1, 1],
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				x: [0, 24, -720],
+				scaleX: [1, 0.9, 2],
+				opacity: [1, 1, 0],
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		inRight: {
+			initial: {},
+			animate: {
+				x: [720, -24, 12, -4, 0],
+				scaleX: [3, 1, 0.98, 0.995, 1],
+				opacity: [0, 1, 1, 1, 1],
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				x: [0, -24, 720],
+				scaleX: [1, 0.9, 2],
+				opacity: [1, 1, 0],
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+
+		// OUT
+		out: {
+			animate: { scale: [0.9, 1.1, 0.3], opacity: [1, 1, 0] },
+		},
+		outUp: {
+			animate: {
+				y: [-12, 24, -720],
+				scaleY: [0.985, 0.9, 3],
+				opacity: [1, 1, 0],
+			},
+		},
+		outDown: {
+			animate: {
+				y: [12, -24, 720],
+				scaleY: [0.985, 0.9, 3],
+				opacity: [1, 1, 0],
+			},
+		},
+		outLeft: {
+			animate: { x: [0, 24, -720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] },
+		},
+		outRight: {
+			animate: { x: [0, -24, 720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] },
+		},
+	};
+};
diff --git a/apps/react-admin/src/components/animate/variants/container.ts b/apps/react-admin/src/components/animate/variants/container.ts
new file mode 100644
index 000000000..77ce2f1de
--- /dev/null
+++ b/apps/react-admin/src/components/animate/variants/container.ts
@@ -0,0 +1,26 @@
+export type Props = {
+	staggerIn?: number;
+	delayIn?: number;
+	staggerOut?: number;
+};
+
+export const varContainer = (props?: Props) => {
+	const staggerIn = props?.staggerIn || 0.05;
+	const delayIn = props?.staggerIn || 0.05;
+	const staggerOut = props?.staggerIn || 0.05;
+
+	return {
+		animate: {
+			transition: {
+				staggerChildren: staggerIn,
+				delayChildren: delayIn,
+			},
+		},
+		exit: {
+			transition: {
+				staggerChildren: staggerOut,
+				staggerDirection: -1,
+			},
+		},
+	};
+};
diff --git a/apps/react-admin/src/components/animate/variants/fade.ts b/apps/react-admin/src/components/animate/variants/fade.ts
new file mode 100644
index 000000000..114b3c561
--- /dev/null
+++ b/apps/react-admin/src/components/animate/variants/fade.ts
@@ -0,0 +1,134 @@
+import type { VariantsType } from "../types";
+
+//
+import { varTranEnter, varTranExit } from "./transition";
+
+// ----------------------------------------------------------------------
+
+export const varFade = (props?: VariantsType) => {
+	const distance = props?.distance || 120;
+	const durationIn = props?.durationIn;
+	const durationOut = props?.durationOut;
+	const easeIn = props?.easeIn;
+	const easeOut = props?.easeOut;
+
+	return {
+		// IN
+		in: {
+			initial: { opacity: 0 },
+			animate: { opacity: 1, transition: varTranEnter },
+			exit: { opacity: 0, transition: varTranExit },
+		},
+		inUp: {
+			initial: { y: distance, opacity: 0 },
+			animate: {
+				y: 0,
+				opacity: 1,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				y: distance,
+				opacity: 0,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		inDown: {
+			initial: { y: -distance, opacity: 0 },
+			animate: {
+				y: 0,
+				opacity: 1,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				y: -distance,
+				opacity: 0,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		inLeft: {
+			initial: { x: -distance, opacity: 0 },
+			animate: {
+				x: 0,
+				opacity: 1,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				x: -distance,
+				opacity: 0,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		inRight: {
+			initial: { x: distance, opacity: 0 },
+			animate: {
+				x: 0,
+				opacity: 1,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				x: distance,
+				opacity: 0,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+
+		// OUT
+		out: {
+			initial: { opacity: 1 },
+			animate: { opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+			exit: { opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+		},
+		outUp: {
+			initial: { y: 0, opacity: 1 },
+			animate: {
+				y: -distance,
+				opacity: 0,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				y: 0,
+				opacity: 1,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		outDown: {
+			initial: { y: 0, opacity: 1 },
+			animate: {
+				y: distance,
+				opacity: 0,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				y: 0,
+				opacity: 1,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		outLeft: {
+			initial: { x: 0, opacity: 1 },
+			animate: {
+				x: -distance,
+				opacity: 0,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				x: 0,
+				opacity: 1,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		outRight: {
+			initial: { x: 0, opacity: 1 },
+			animate: {
+				x: distance,
+				opacity: 0,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				x: 0,
+				opacity: 1,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+	};
+};
diff --git a/apps/react-admin/src/components/animate/variants/flip.ts b/apps/react-admin/src/components/animate/variants/flip.ts
new file mode 100644
index 000000000..b7828ef8d
--- /dev/null
+++ b/apps/react-admin/src/components/animate/variants/flip.ts
@@ -0,0 +1,61 @@
+import type { VariantsType } from "../types";
+
+//
+import { varTranEnter, varTranExit } from "./transition";
+
+// ----------------------------------------------------------------------
+
+export const varFlip = (props?: VariantsType) => {
+	const durationIn = props?.durationIn;
+	const durationOut = props?.durationOut;
+	const easeIn = props?.easeIn;
+	const easeOut = props?.easeOut;
+
+	return {
+		// IN
+		inX: {
+			initial: { rotateX: -180, opacity: 0 },
+			animate: {
+				rotateX: 0,
+				opacity: 1,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				rotateX: -180,
+				opacity: 0,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		inY: {
+			initial: { rotateY: -180, opacity: 0 },
+			animate: {
+				rotateY: 0,
+				opacity: 1,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				rotateY: -180,
+				opacity: 0,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+
+		// OUT
+		outX: {
+			initial: { rotateX: 0, opacity: 1 },
+			animate: {
+				rotateX: 70,
+				opacity: 0,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		outY: {
+			initial: { rotateY: 0, opacity: 1 },
+			animate: {
+				rotateY: 70,
+				opacity: 0,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+	};
+};
diff --git a/apps/react-admin/src/components/animate/variants/index.ts b/apps/react-admin/src/components/animate/variants/index.ts
new file mode 100644
index 000000000..26fc19a28
--- /dev/null
+++ b/apps/react-admin/src/components/animate/variants/index.ts
@@ -0,0 +1,98 @@
+import { varBgColor, varBgKenburns, varBgPan } from "./background";
+import { varBounce } from "./bounce";
+import { varFade } from "./fade";
+import { varFlip } from "./flip";
+import { varRotate } from "./rotate";
+import { varScale } from "./scale";
+import { varSlide } from "./slide";
+import { varZoom } from "./zoom";
+
+export * from "./action";
+export * from "./background";
+export * from "./bounce";
+export * from "./container";
+export * from "./fade";
+export * from "./flip";
+export * from "./path";
+export * from "./rotate";
+export * from "./scale";
+export * from "./slide";
+export * from "./transition";
+export * from "./zoom";
+
+export function getVariant(variant = "slideInUp") {
+	return {
+		// Slide
+		slideInUp: varSlide().inUp,
+		slideInDown: varSlide().inDown,
+		slideInLeft: varSlide().inLeft,
+		slideInRight: varSlide().inRight,
+		slideOutUp: varSlide().outUp,
+		slideOutDown: varSlide().outDown,
+		slideOutLeft: varSlide().outLeft,
+		slideOutRight: varSlide().outRight,
+		// Fade
+		fadeIn: varFade().in,
+		fadeInUp: varFade().inUp,
+		fadeInDown: varFade().inDown,
+		fadeInLeft: varFade().inLeft,
+		fadeInRight: varFade().inRight,
+		fadeOut: varFade().out,
+		fadeOutUp: varFade().outUp,
+		fadeOutDown: varFade().outDown,
+		fadeOutLeft: varFade().outLeft,
+		fadeOutRight: varFade().outRight,
+		// Zoom
+		zoomIn: varZoom({ distance: 80 }).in,
+		zoomInUp: varZoom({ distance: 80 }).inUp,
+		zoomInDown: varZoom({ distance: 80 }).inDown,
+		zoomInLeft: varZoom({ distance: 240 }).inLeft,
+		zoomInRight: varZoom({ distance: 240 }).inRight,
+		zoomOut: varZoom().out,
+		zoomOutLeft: varZoom().outLeft,
+		zoomOutRight: varZoom().outRight,
+		zoomOutUp: varZoom().outUp,
+		zoomOutDown: varZoom().outDown,
+		// Bounce
+		bounceIn: varBounce().in,
+		bounceInUp: varBounce().inUp,
+		bounceInDown: varBounce().inDown,
+		bounceInLeft: varBounce().inLeft,
+		bounceInRight: varBounce().inRight,
+		bounceOut: varBounce().out,
+		bounceOutUp: varBounce().outUp,
+		bounceOutDown: varBounce().outDown,
+		bounceOutLeft: varBounce().outLeft,
+		bounceOutRight: varBounce().outRight,
+		// Flip
+		flipInX: varFlip().inX,
+		flipInY: varFlip().inY,
+		flipOutX: varFlip().outX,
+		flipOutY: varFlip().outY,
+		// Scale
+		scaleInX: varScale().inX,
+		scaleInY: varScale().inY,
+		scaleOutX: varScale().outX,
+		scaleOutY: varScale().outY,
+		// Rotate
+		rotateIn: varRotate().in,
+		rotateOut: varRotate().out,
+		// Background
+		kenburnsTop: varBgKenburns().top,
+		kenburnsBottom: varBgKenburns().bottom,
+		kenburnsLeft: varBgKenburns().left,
+		kenburnsRight: varBgKenburns().right,
+		panTop: varBgPan().top,
+		panBottom: varBgPan().bottom,
+		panLeft: varBgPan().left,
+		panRight: varBgPan().right,
+		color2x: varBgColor(),
+		color3x: varBgColor({ colors: ["#19dcea", "#b22cff", "#ea2222"] }),
+		color4x: varBgColor({
+			colors: ["#19dcea", "#b22cff", "#ea2222", "#f5be10"],
+		}),
+		color5x: varBgColor({
+			colors: ["#19dcea", "#b22cff", "#ea2222", "#f5be10", "#3bd80d"],
+		}),
+	}[variant];
+}
diff --git a/apps/react-admin/src/components/animate/variants/path.ts b/apps/react-admin/src/components/animate/variants/path.ts
new file mode 100644
index 000000000..cf31ab913
--- /dev/null
+++ b/apps/react-admin/src/components/animate/variants/path.ts
@@ -0,0 +1,14 @@
+// ----------------------------------------------------------------------
+
+export const TRANSITION = {
+	duration: 2,
+	ease: [0.43, 0.13, 0.23, 0.96],
+};
+
+export const varPath = {
+	animate: {
+		fillOpacity: [0, 0, 1],
+		pathLength: [1, 0.4, 0],
+		transition: TRANSITION,
+	},
+};
diff --git a/apps/react-admin/src/components/animate/variants/rotate.ts b/apps/react-admin/src/components/animate/variants/rotate.ts
new file mode 100644
index 000000000..6b6544003
--- /dev/null
+++ b/apps/react-admin/src/components/animate/variants/rotate.ts
@@ -0,0 +1,40 @@
+import type { VariantsType } from "../types";
+
+//
+import { varTranEnter, varTranExit } from "./transition";
+
+// ----------------------------------------------------------------------
+
+export const varRotate = (props?: VariantsType) => {
+	const durationIn = props?.durationIn;
+	const durationOut = props?.durationOut;
+	const easeIn = props?.easeIn;
+	const easeOut = props?.easeOut;
+
+	return {
+		// IN
+		in: {
+			initial: { opacity: 0, rotate: -360 },
+			animate: {
+				opacity: 1,
+				rotate: 0,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				opacity: 0,
+				rotate: -360,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+
+		// OUT
+		out: {
+			initial: { opacity: 1, rotate: 0 },
+			animate: {
+				opacity: 0,
+				rotate: -360,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+	};
+};
diff --git a/apps/react-admin/src/components/animate/variants/scale.ts b/apps/react-admin/src/components/animate/variants/scale.ts
new file mode 100644
index 000000000..7c3c507e8
--- /dev/null
+++ b/apps/react-admin/src/components/animate/variants/scale.ts
@@ -0,0 +1,60 @@
+import type { VariantsType } from "../types";
+
+import { varTranEnter, varTranExit } from "./transition";
+
+// ----------------------------------------------------------------------
+
+export const varScale = (props?: VariantsType) => {
+	const durationIn = props?.durationIn;
+	const durationOut = props?.durationOut;
+	const easeIn = props?.easeIn;
+	const easeOut = props?.easeOut;
+
+	return {
+		// IN
+		inX: {
+			initial: { scaleX: 0, opacity: 0 },
+			animate: {
+				scaleX: 1,
+				opacity: 1,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				scaleX: 0,
+				opacity: 0,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		inY: {
+			initial: { scaleY: 0, opacity: 0 },
+			animate: {
+				scaleY: 1,
+				opacity: 1,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				scaleY: 0,
+				opacity: 0,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+
+		// OUT
+		outX: {
+			initial: { scaleX: 1, opacity: 1 },
+			animate: {
+				scaleX: 0,
+				opacity: 0,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+		},
+		outY: {
+			initial: { scaleY: 1, opacity: 1 },
+			animate: {
+				scaleY: 0,
+				opacity: 0,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+		},
+	};
+};
diff --git a/apps/react-admin/src/components/animate/variants/slide.ts b/apps/react-admin/src/components/animate/variants/slide.ts
new file mode 100644
index 000000000..c1a9f621a
--- /dev/null
+++ b/apps/react-admin/src/components/animate/variants/slide.ts
@@ -0,0 +1,72 @@
+import type { VariantsType } from "../types";
+
+//
+import { varTranEnter, varTranExit } from "./transition";
+
+// ----------------------------------------------------------------------
+
+export const varSlide = (props?: VariantsType) => {
+	const distance = props?.distance || 160;
+	const durationIn = props?.durationIn;
+	const durationOut = props?.durationOut;
+	const easeIn = props?.easeIn;
+	const easeOut = props?.easeOut;
+
+	return {
+		// IN
+		inUp: {
+			initial: { y: distance },
+			animate: { y: 0, transition: varTranEnter({ durationIn, easeIn }) },
+			exit: { y: distance, transition: varTranExit({ durationOut, easeOut }) },
+		},
+		inDown: {
+			initial: { y: -distance },
+			animate: { y: 0, transition: varTranEnter({ durationIn, easeIn }) },
+			exit: { y: -distance, transition: varTranExit({ durationOut, easeOut }) },
+		},
+		inLeft: {
+			initial: { x: -distance },
+			animate: { x: 0, transition: varTranEnter({ durationIn, easeIn }) },
+			exit: { x: -distance, transition: varTranExit({ durationOut, easeOut }) },
+		},
+		inRight: {
+			initial: { x: distance },
+			animate: { x: 0, transition: varTranEnter({ durationIn, easeIn }) },
+			exit: { x: distance, transition: varTranExit({ durationOut, easeOut }) },
+		},
+
+		// OUT
+		outUp: {
+			initial: { y: 0 },
+			animate: {
+				y: -distance,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: { y: 0, transition: varTranExit({ durationOut, easeOut }) },
+		},
+		outDown: {
+			initial: { y: 0 },
+			animate: {
+				y: distance,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: { y: 0, transition: varTranExit({ durationOut, easeOut }) },
+		},
+		outLeft: {
+			initial: { x: 0 },
+			animate: {
+				x: -distance,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: { x: 0, transition: varTranExit({ durationOut, easeOut }) },
+		},
+		outRight: {
+			initial: { x: 0 },
+			animate: {
+				x: distance,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: { x: 0, transition: varTranExit({ durationOut, easeOut }) },
+		},
+	};
+};
diff --git a/apps/react-admin/src/components/animate/variants/transition.ts b/apps/react-admin/src/components/animate/variants/transition.ts
new file mode 100644
index 000000000..f3616d436
--- /dev/null
+++ b/apps/react-admin/src/components/animate/variants/transition.ts
@@ -0,0 +1,25 @@
+import type { TranEnterType, TranExitType, TranHoverType } from "../types";
+
+// https://www.framer.com/motion/transition/
+// A transition defines how values animate from one state to another.
+
+export const varTranHover = (props?: TranHoverType) => {
+	const duration = props?.duration || 0.32;
+	const ease = props?.ease || [0.43, 0.13, 0.23, 0.96];
+
+	return { duration, ease };
+};
+
+export const varTranEnter = (props?: TranEnterType) => {
+	const duration = props?.durationIn || 0.64;
+	const ease = props?.easeIn || [0.43, 0.13, 0.23, 0.96];
+
+	return { duration, ease };
+};
+
+export const varTranExit = (props?: TranExitType) => {
+	const duration = props?.durationOut || 0.48;
+	const ease = props?.easeOut || [0.43, 0.13, 0.23, 0.96];
+
+	return { duration, ease };
+};
diff --git a/apps/react-admin/src/components/animate/variants/zoom.ts b/apps/react-admin/src/components/animate/variants/zoom.ts
new file mode 100644
index 000000000..bdf9d15a8
--- /dev/null
+++ b/apps/react-admin/src/components/animate/variants/zoom.ts
@@ -0,0 +1,137 @@
+import type { VariantsType } from "../types";
+
+//
+import { varTranEnter, varTranExit } from "./transition";
+
+// ----------------------------------------------------------------------
+
+export const varZoom = (props?: VariantsType) => {
+	const distance = props?.distance || 720;
+	const durationIn = props?.durationIn;
+	const durationOut = props?.durationOut;
+	const easeIn = props?.easeIn;
+	const easeOut = props?.easeOut;
+
+	return {
+		// IN
+		in: {
+			initial: { scale: 0, opacity: 0 },
+			animate: {
+				scale: 1,
+				opacity: 1,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				scale: 0,
+				opacity: 0,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		inUp: {
+			initial: { scale: 0, opacity: 0, translateY: distance },
+			animate: {
+				scale: 1,
+				opacity: 1,
+				translateY: 0,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				scale: 0,
+				opacity: 0,
+				translateY: distance,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		inDown: {
+			initial: { scale: 0, opacity: 0, translateY: -distance },
+			animate: {
+				scale: 1,
+				opacity: 1,
+				translateY: 0,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				scale: 0,
+				opacity: 0,
+				translateY: -distance,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		inLeft: {
+			initial: { scale: 0, opacity: 0, translateX: -distance },
+			animate: {
+				scale: 1,
+				opacity: 1,
+				translateX: 0,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				scale: 0,
+				opacity: 0,
+				translateX: -distance,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+		inRight: {
+			initial: { scale: 0, opacity: 0, translateX: distance },
+			animate: {
+				scale: 1,
+				opacity: 1,
+				translateX: 0,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+			exit: {
+				scale: 0,
+				opacity: 0,
+				translateX: distance,
+				transition: varTranExit({ durationOut, easeOut }),
+			},
+		},
+
+		// OUT
+		out: {
+			initial: { scale: 1, opacity: 1 },
+			animate: {
+				scale: 0,
+				opacity: 0,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+		},
+		outUp: {
+			initial: { scale: 1, opacity: 1 },
+			animate: {
+				scale: 0,
+				opacity: 0,
+				translateY: -distance,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+		},
+		outDown: {
+			initial: { scale: 1, opacity: 1 },
+			animate: {
+				scale: 0,
+				opacity: 0,
+				translateY: distance,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+		},
+		outLeft: {
+			initial: { scale: 1, opacity: 1 },
+			animate: {
+				scale: 0,
+				opacity: 0,
+				translateX: -distance,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+		},
+		outRight: {
+			initial: { scale: 1, opacity: 1 },
+			animate: {
+				scale: 0,
+				opacity: 0,
+				translateX: distance,
+				transition: varTranEnter({ durationIn, easeIn }),
+			},
+		},
+	};
+};
diff --git a/apps/react-admin/src/components/card/index.tsx b/apps/react-admin/src/components/card/index.tsx
new file mode 100644
index 000000000..7602531e8
--- /dev/null
+++ b/apps/react-admin/src/components/card/index.tsx
@@ -0,0 +1,28 @@
+import { themeVars } from "@/theme/theme.css";
+import type { CSSProperties, ReactNode } from "react";
+
+type Props = {
+	children?: ReactNode;
+	className?: string;
+	style?: CSSProperties;
+};
+export default function Card({ children, ...other }: Props) {
+	return (
+		<div
+			style={{
+				backgroundColor: themeVars.colors.background.paper,
+				boxShadow: themeVars.shadows.card,
+				transition: "box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+				borderRadius: themeVars.borderRadius.md,
+				padding: themeVars.spacing[6],
+				overflow: "hidden",
+				position: "relative",
+				display: "flex",
+				alignItems: "center",
+			}}
+			{...other}
+		>
+			{children}
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/components/chart/chart.tsx b/apps/react-admin/src/components/chart/chart.tsx
new file mode 100644
index 000000000..06d1bb431
--- /dev/null
+++ b/apps/react-admin/src/components/chart/chart.tsx
@@ -0,0 +1,15 @@
+import { memo } from "react";
+import ApexChart from "react-apexcharts";
+import { chartWrapper } from "./styles.css";
+
+import type { Props as ApexChartProps } from "react-apexcharts";
+
+function Chart(props: ApexChartProps) {
+	return (
+		<div className={chartWrapper}>
+			<ApexChart {...props} />
+		</div>
+	);
+}
+
+export default memo(Chart);
diff --git a/apps/react-admin/src/components/chart/styles.css.ts b/apps/react-admin/src/components/chart/styles.css.ts
new file mode 100644
index 000000000..e81a1b19c
--- /dev/null
+++ b/apps/react-admin/src/components/chart/styles.css.ts
@@ -0,0 +1,54 @@
+import { themeVars } from "@/theme/theme.css";
+import { rgbAlpha } from "@/utils/theme";
+import { globalStyle } from "@vanilla-extract/css";
+import { style } from "@vanilla-extract/css";
+
+export const chartWrapper = style({}, "apexcharts-wrapper");
+
+// TOOLTIP
+globalStyle(`${chartWrapper} .apexcharts-tooltip`, {
+	color: themeVars.colors.text.primary,
+	borderRadius: themeVars.borderRadius.lg,
+	backdropFilter: "blur(6px)",
+	backgroundColor: rgbAlpha(themeVars.colors.background.paperChannel, 0.8),
+	boxShadow: themeVars.shadows.card,
+});
+
+globalStyle(`${chartWrapper} .apexcharts-tooltip-title`, {
+	textAlign: "center",
+	fontWeight: "bold",
+	backgroundColor: themeVars.colors.background.neutral,
+});
+
+// TOOLTIP X
+globalStyle(`${chartWrapper} .apexcharts-xaxistooltip`, {
+	color: themeVars.colors.text.primary,
+	borderRadius: themeVars.borderRadius.lg,
+	backdropFilter: "blur(6px)",
+	borderColor: "transparent",
+	boxShadow: themeVars.shadows.card,
+	backgroundColor: themeVars.colors.background.paper,
+});
+
+globalStyle(`${chartWrapper} .apexcharts-xaxistooltip::before`, {
+	borderBottomColor: rgbAlpha(themeVars.colors.background.paperChannel, 0.8),
+});
+
+globalStyle(`${chartWrapper} .apexcharts-xaxistooltip::after`, {
+	borderBottomColor: themeVars.colors.background.paper,
+});
+
+// LEGEND
+globalStyle(`${chartWrapper} .apexcharts-legend`, {
+	padding: 0,
+});
+
+globalStyle(`${chartWrapper} .apexcharts-legend-series`, {
+	display: "inline-flex !important",
+	alignItems: "center",
+});
+
+globalStyle(`${chartWrapper} .apexcharts-legend-text`, {
+	lineHeight: "18px",
+	textTransform: "capitalize",
+});
diff --git a/apps/react-admin/src/components/chart/useChart.ts b/apps/react-admin/src/components/chart/useChart.ts
new file mode 100644
index 000000000..be29a8c68
--- /dev/null
+++ b/apps/react-admin/src/components/chart/useChart.ts
@@ -0,0 +1,211 @@
+import { themeVars } from "@/theme/theme.css";
+import { removePx } from "@/utils/theme";
+import type { ApexOptions } from "apexcharts";
+import { mergeDeepRight } from "ramda";
+
+import { useSettings } from "@/store/settingStore";
+import { paletteColors, presetsColors } from "@/theme/tokens/color";
+
+export default function useChart(options: ApexOptions) {
+	const { themeColorPresets } = useSettings();
+
+	const LABEL_TOTAL = {
+		show: true,
+		label: "Total",
+		color: themeVars.colors.text.secondary,
+		fontSize: themeVars.typography.fontSize.sm,
+		lineHeight: themeVars.typography.lineHeight.tight,
+	};
+
+	const LABEL_VALUE = {
+		offsetY: 8,
+		color: themeVars.colors.text.primary,
+		fontSize: themeVars.typography.fontSize.sm,
+		lineHeight: themeVars.typography.lineHeight.tight,
+	};
+
+	const baseOptions: ApexOptions = {
+		// Colors
+		colors: [
+			presetsColors[themeColorPresets].default,
+
+			paletteColors.info.default,
+			paletteColors.warning.default,
+			paletteColors.error.default,
+			paletteColors.success.default,
+
+			paletteColors.warning.light,
+			paletteColors.info.light,
+			paletteColors.error.light,
+			paletteColors.success.light,
+		],
+
+		// Chart
+		chart: {
+			toolbar: { show: false },
+			zoom: { enabled: false },
+			foreColor: themeVars.colors.text.disabled,
+			fontFamily: themeVars.typography.fontFamily.primary,
+		},
+
+		// States
+		states: {
+			hover: {
+				filter: {
+					type: "lighten",
+					value: 0.04,
+				},
+			},
+			active: {
+				filter: {
+					type: "darken",
+					value: 0.88,
+				},
+			},
+		},
+
+		// Fill
+		fill: {
+			opacity: 1,
+			gradient: {
+				type: "vertical",
+				shadeIntensity: 0,
+				opacityFrom: 0.4,
+				opacityTo: 0,
+				stops: [0, 100],
+			},
+		},
+
+		// Datalabels
+		dataLabels: {
+			enabled: false,
+		},
+
+		// Stroke
+		stroke: {
+			width: 3,
+			curve: "smooth",
+			lineCap: "round",
+		},
+
+		// Grid
+		grid: {
+			strokeDashArray: 3,
+			borderColor: themeVars.colors.background.neutral,
+			xaxis: {
+				lines: {
+					show: false,
+				},
+			},
+		},
+
+		// Xaxis
+		xaxis: {
+			axisBorder: { show: false },
+			axisTicks: { show: false },
+		},
+
+		// Markers
+		markers: {
+			size: 0,
+		},
+
+		// Tooltip
+		tooltip: {
+			theme: undefined,
+			x: {
+				show: true,
+			},
+		},
+
+		// Legend
+		legend: {
+			show: true,
+			fontSize: themeVars.typography.fontSize.sm,
+			position: "top",
+			horizontalAlign: "right",
+			markers: {
+				strokeWidth: 0,
+			},
+			fontWeight: 500,
+			itemMargin: {
+				horizontal: 8,
+			},
+			labels: {
+				colors: themeVars.colors.text.primary,
+			},
+		},
+
+		// plotOptions
+		plotOptions: {
+			// Bar
+			bar: {
+				borderRadius: 4,
+				columnWidth: "28%",
+				borderRadiusApplication: "end",
+				borderRadiusWhenStacked: "last",
+			},
+
+			// Pie + Donut
+			pie: {
+				donut: {
+					labels: {
+						show: true,
+						value: LABEL_VALUE,
+						total: LABEL_TOTAL,
+					},
+				},
+			},
+
+			// Radialbar
+			radialBar: {
+				track: {
+					strokeWidth: "100%",
+				},
+				dataLabels: {
+					value: LABEL_VALUE,
+					total: LABEL_TOTAL,
+				},
+			},
+
+			// Radar
+			radar: {
+				polygons: {
+					fill: { colors: ["transparent"] },
+					strokeColors: themeVars.colors.background.neutral,
+					connectorColors: themeVars.colors.background.neutral,
+				},
+			},
+
+			// polarArea
+			polarArea: {
+				rings: {
+					strokeColor: themeVars.colors.background.neutral,
+				},
+				spokes: {
+					connectorColors: themeVars.colors.background.neutral,
+				},
+			},
+		},
+
+		// Responsive
+		responsive: [
+			{
+				// sm
+				breakpoint: removePx(themeVars.screens.sm),
+				options: {
+					plotOptions: { bar: { columnWidth: "40%" } },
+				},
+			},
+			{
+				// md
+				breakpoint: removePx(themeVars.screens.md),
+				options: {
+					plotOptions: { bar: { columnWidth: "32%" } },
+				},
+			},
+		],
+	};
+
+	return mergeDeepRight(baseOptions, options) as ApexOptions;
+}
diff --git a/apps/react-admin/src/components/editor/index.tsx b/apps/react-admin/src/components/editor/index.tsx
new file mode 100644
index 000000000..f57d969d9
--- /dev/null
+++ b/apps/react-admin/src/components/editor/index.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable import/order */
+import "@/utils/highlight";
+import ReactQuill, { type ReactQuillProps } from "react-quill";
+import { StyledEditor } from "./styles";
+import Toolbar, { formats } from "./toolbar";
+
+interface Props extends ReactQuillProps {
+	sample?: boolean;
+	hiddleToolbar?: boolean;
+}
+export default function Editor({ id = "slash-quill", sample = false, hiddleToolbar = false, ...other }: Props) {
+	const modules = {
+		...(hiddleToolbar
+			? {}
+			: {
+					toolbar: {
+						container: `#${id}`,
+					},
+				}),
+		history: {
+			delay: 500,
+			maxStack: 100,
+			userOnly: true,
+		},
+		syntax: true,
+		clipboard: {
+			matchVisual: false,
+		},
+	};
+	return (
+		<StyledEditor>
+			{!hiddleToolbar && <Toolbar id={id} isSimple={sample} />}
+			<ReactQuill modules={modules} formats={formats} {...other} placeholder="Write something awesome..." />
+		</StyledEditor>
+	);
+}
diff --git a/apps/react-admin/src/components/editor/styles.ts b/apps/react-admin/src/components/editor/styles.ts
new file mode 100644
index 000000000..87aa9ad00
--- /dev/null
+++ b/apps/react-admin/src/components/editor/styles.ts
@@ -0,0 +1,189 @@
+import { themeVars } from "@/theme/theme.css";
+import styled from "styled-components";
+
+const StyledEditor = styled.div`
+  h1 {
+    font-size: 64px;
+    line-height: 1.25;
+    font-weight: 800;
+  }
+  h2 {
+    font-size: 56px;
+    line-height: 1.25;
+    font-weight: 800;
+  }
+  h3 {
+    font-size: 48px;
+    line-height: 1.25;
+    font-weight: 700;
+  }
+  h4 {
+    font-size: 40px;
+    line-height: 1.25;
+    font-weight: 700;
+  }
+  h5 {
+    font-size: 32px;
+    line-height: 1.25;
+    font-weight: 700;
+  }
+  h6 {
+    font-size: 24px;
+    line-height: 1.25;
+    font-weight: 600;
+  }
+  img {
+    display: inline;
+  }
+  overflow: hidden;
+  position: relative;
+  border-radius: 8px;
+  border: 1px solid ${themeVars.colors.common.border};
+  & .ql-container.ql-snow {
+    border: none;
+    line-height: 1.6;
+    font-weight: 400;
+    font-size: 0.875rem;
+  }
+  & .ql-editor {
+    min-height: 160px;
+    max-height: 640px;
+    background-color: rgba(145, 158, 171, 0.08);
+    &.ql-blank::before {
+      font-style: normal;
+      color: ${themeVars.colors.text.secondary};
+    }
+    & pre.ql-syntax {
+      border-radius: 8px;
+      line-height: 1.57143;
+      font-size: 0.875rem;
+      font-family: 'Public Sans', sans-serif;
+      font-weight: 400;
+      padding: 16px;
+      border-radius: 8px;
+      background-color: ${themeVars.colors.background.neutral};
+    }
+  }
+`;
+
+const StyledToolbar = styled.div`
+  & .ql-snow.ql-toolbar button:hover .ql-fill,
+  .ql-snow .ql-toolbar button:hover .ql-fill,
+  .ql-snow.ql-toolbar button:focus .ql-fill,
+  .ql-snow .ql-toolbar button:focus .ql-fill,
+  .ql-snow.ql-toolbar button.ql-active .ql-fill,
+  .ql-snow .ql-toolbar button.ql-active .ql-fill,
+  .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
+  .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
+  .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+  .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
+  .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
+  .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
+  .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+  .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+  .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
+  .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
+  .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
+  .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
+  .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
+  .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
+  .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+  .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+  .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+  .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+  .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+  .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+  .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
+  .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
+    fill: ${themeVars.colors.palette.primary.default};
+  }
+  & .ql-snow.ql-toolbar button:hover,
+  .ql-snow .ql-toolbar button:hover,
+  .ql-snow.ql-toolbar button:focus,
+  .ql-snow .ql-toolbar button:focus,
+  .ql-snow.ql-toolbar button.ql-active,
+  .ql-snow .ql-toolbar button.ql-active,
+  .ql-snow.ql-toolbar .ql-picker-label:hover,
+  .ql-snow .ql-toolbar .ql-picker-label:hover,
+  .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+  .ql-snow .ql-toolbar .ql-picker-label.ql-active,
+  .ql-snow.ql-toolbar .ql-picker-item:hover,
+  .ql-snow .ql-toolbar .ql-picker-item:hover,
+  .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+  .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+    color: ${themeVars.colors.palette.primary.default};
+  }
+
+  & .ql-snow.ql-toolbar button:hover .ql-stroke,
+  .ql-snow .ql-toolbar button:hover .ql-stroke,
+  .ql-snow.ql-toolbar button:focus .ql-stroke,
+  .ql-snow .ql-toolbar button:focus .ql-stroke,
+  .ql-snow.ql-toolbar button.ql-active .ql-stroke,
+  .ql-snow .ql-toolbar button.ql-active .ql-stroke,
+  .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+  .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
+  .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+  .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+  .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+  .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+  .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+  .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+  .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+  .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+  .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
+  .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
+  .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+  .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+  .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+  .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+  .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+  .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+  .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+  .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+  .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+  .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+    stroke: ${themeVars.colors.palette.primary.default};
+  }
+
+  & .ql-stroke {
+    stroke: ${themeVars.colors.text.primary};
+  }
+  & .ql-fill,
+  .ql-stroke.ql-fill {
+    fill: ${themeVars.colors.text.primary};
+  }
+
+  & .ql-toolbar.ql-snow {
+    border: none;
+    border-bottom: 1px solid ${themeVars.colors.common.border};
+    // Button
+    & button {
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+    }
+    & button svg,
+    span svg {
+      width: 20px;
+      height: 20px;
+    }
+    & .ql-picker-label {
+      border-radius: 4px;
+      border-color: transparent !important;
+      background-color: ${themeVars.colors.background.paper};
+      color: ${themeVars.colors.text.primary};
+    }
+    & .ql-picker-options {
+      margin-top: 4px;
+      border: none;
+      max-height: 200px;
+      overflow: auto;
+      border-radius: 8px;
+      color: ${themeVars.colors.text.primary};
+      background-color: ${themeVars.colors.background.paper};
+    }
+  }
+`;
+export { StyledEditor, StyledToolbar };
diff --git a/apps/react-admin/src/components/editor/toolbar.tsx b/apps/react-admin/src/components/editor/toolbar.tsx
new file mode 100644
index 000000000..6cb9d4b42
--- /dev/null
+++ b/apps/react-admin/src/components/editor/toolbar.tsx
@@ -0,0 +1,104 @@
+import { StyledToolbar } from "./styles";
+
+const HEADINGS = ["Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"];
+
+export const formats = [
+	"align",
+	"background",
+	"blockquote",
+	"bold",
+	"bullet",
+	"code",
+	"code-block",
+	"color",
+	"direction",
+	"font",
+	"formula",
+	"header",
+	"image",
+	"indent",
+	"italic",
+	"link",
+	"list",
+	"script",
+	"size",
+	"strike",
+	"table",
+	"underline",
+	"video",
+];
+
+type EditorToolbarProps = {
+	id: string;
+	isSimple?: boolean;
+};
+
+export default function Toolbar({ id, isSimple }: EditorToolbarProps) {
+	return (
+		<StyledToolbar>
+			<div id={id}>
+				<div className="ql-formats">
+					<select className="ql-header" defaultValue="">
+						{HEADINGS.map((heading, index) => (
+							<option key={heading} value={index + 1}>
+								{heading}
+							</option>
+						))}
+						<option value="">Normal</option>
+					</select>
+				</div>
+
+				<div className="ql-formats">
+					<button type="button" className="ql-bold" />
+					<button type="button" className="ql-italic" />
+					<button type="button" className="ql-underline" />
+					<button type="button" className="ql-strike" />
+				</div>
+
+				{!isSimple && (
+					<div className="ql-formats">
+						<select className="ql-color" />
+						<select className="ql-background" />
+					</div>
+				)}
+
+				<div className="ql-formats">
+					<button type="button" className="ql-list" value="ordered" />
+					<button type="button" className="ql-list" value="bullet" />
+					{!isSimple && <button type="button" className="ql-indent" value="-1" />}
+					{!isSimple && <button type="button" className="ql-indent" value="+1" />}
+				</div>
+
+				{!isSimple && (
+					<div className="ql-formats">
+						<button type="button" className="ql-script" value="super" />
+						<button type="button" className="ql-script" value="sub" />
+					</div>
+				)}
+
+				{!isSimple && (
+					<div className="ql-formats">
+						<button type="button" className="ql-code-block" />
+						<button type="button" className="ql-blockquote" />
+					</div>
+				)}
+
+				<div className="ql-formats">
+					<button type="button" className="ql-direction" value="rtl" />
+					<select className="ql-align" />
+				</div>
+
+				<div className="ql-formats">
+					<button type="button" className="ql-link" />
+					<button type="button" className="ql-image" />
+					<button type="button" className="ql-video" />
+				</div>
+
+				<div className="ql-formats">
+					{!isSimple && <button type="button" className="ql-formula" />}
+					<button type="button" className="ql-clean" />
+				</div>
+			</div>
+		</StyledToolbar>
+	);
+}
diff --git a/apps/react-admin/src/components/icon/icon-button.tsx b/apps/react-admin/src/components/icon/icon-button.tsx
new file mode 100644
index 000000000..db749c0f9
--- /dev/null
+++ b/apps/react-admin/src/components/icon/icon-button.tsx
@@ -0,0 +1,21 @@
+import { cn } from "@/utils";
+import type { ButtonProps } from "antd";
+import type { CSSProperties, ReactNode } from "react";
+
+type Props = {
+	children: ReactNode;
+	className?: string;
+	style?: CSSProperties;
+} & ButtonProps;
+export default function IconButton({ children, className, style, onClick }: Props) {
+	return (
+		<button
+			type="button"
+			style={style}
+			className={cn("flex cursor-pointer items-center justify-center rounded-full p-2 hover:bg-hover", className)}
+			onClick={onClick}
+		>
+			{children}
+		</button>
+	);
+}
diff --git a/apps/react-admin/src/components/icon/iconify-icon.tsx b/apps/react-admin/src/components/icon/iconify-icon.tsx
new file mode 100644
index 000000000..122df98c2
--- /dev/null
+++ b/apps/react-admin/src/components/icon/iconify-icon.tsx
@@ -0,0 +1,23 @@
+import { Icon } from "@iconify/react";
+import styled from "styled-components";
+
+import type { IconProps } from "@iconify/react";
+
+interface Props extends IconProps {
+	size?: IconProps["width"];
+}
+export default function Iconify({ icon, size = "1em", className = "", ...other }: Props) {
+	return (
+		<StyledIconify className="anticon">
+			<Icon icon={icon} width={size} height={size} className={`m-auto ${className}`} {...other} />
+		</StyledIconify>
+	);
+}
+
+const StyledIconify = styled.div`
+  display: inline-flex;
+  vertical-align: middle;
+  svg {
+    display: inline-block;
+  }
+`;
diff --git a/apps/react-admin/src/components/icon/index.ts b/apps/react-admin/src/components/icon/index.ts
new file mode 100644
index 000000000..8d1845a06
--- /dev/null
+++ b/apps/react-admin/src/components/icon/index.ts
@@ -0,0 +1,5 @@
+import IconButton from "./icon-button";
+import Iconify from "./iconify-icon";
+import SvgIcon from "./svg-icon";
+
+export { Iconify, SvgIcon, IconButton };
diff --git a/apps/react-admin/src/components/icon/svg-icon.tsx b/apps/react-admin/src/components/icon/svg-icon.tsx
new file mode 100644
index 000000000..ad5f8d2e1
--- /dev/null
+++ b/apps/react-admin/src/components/icon/svg-icon.tsx
@@ -0,0 +1,41 @@
+import { cn } from "@/utils";
+import type { CSSProperties } from "react";
+
+interface SvgIconProps {
+	prefix?: string;
+	icon: string;
+	color?: string;
+	size?: string | number;
+	className?: string;
+	style?: CSSProperties;
+}
+
+export default function SvgIcon({
+	icon,
+	prefix = "icon",
+	color = "currentColor",
+	size = "1em",
+	className = "",
+	style = {},
+}: SvgIconProps) {
+	const symbolId = `#${prefix}-${icon}`;
+	const svgStyle: CSSProperties = {
+		verticalAlign: "middle",
+		width: size,
+		height: size,
+		color,
+		...style,
+	};
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 100 100"
+			className={cn("anticon fill-current inline-block h-[1em] w-[1em] overflow-hidden outline-none", className)}
+			style={svgStyle}
+			aria-label={icon}
+		>
+			<title>{icon}</title>
+			<use xlinkHref={symbolId} fill="currentColor" />
+		</svg>
+	);
+}
diff --git a/apps/react-admin/src/components/loading/circle-loading.tsx b/apps/react-admin/src/components/loading/circle-loading.tsx
new file mode 100644
index 000000000..34c070efa
--- /dev/null
+++ b/apps/react-admin/src/components/loading/circle-loading.tsx
@@ -0,0 +1,9 @@
+import { Spin } from "antd";
+
+export function CircleLoading() {
+	return (
+		<div className="flex h-full items-center justify-center">
+			<Spin size="large" />
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/components/loading/index.tsx b/apps/react-admin/src/components/loading/index.tsx
new file mode 100644
index 000000000..ebb6af204
--- /dev/null
+++ b/apps/react-admin/src/components/loading/index.tsx
@@ -0,0 +1,2 @@
+export * from "./circle-loading";
+export * from "./line-loading";
diff --git a/apps/react-admin/src/components/loading/line-loading.tsx b/apps/react-admin/src/components/loading/line-loading.tsx
new file mode 100644
index 000000000..a923e593f
--- /dev/null
+++ b/apps/react-admin/src/components/loading/line-loading.tsx
@@ -0,0 +1,40 @@
+import { Progress } from "antd";
+import { useEffect, useState } from "react";
+
+import { themeVars } from "@/theme/theme.css";
+import { rgbAlpha } from "@/utils/theme";
+
+export function LineLoading() {
+	const [percent, setPercent] = useState(10);
+	const [increasing, setIncreasing] = useState(true);
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			if (increasing) {
+				setPercent((prevPercent) => prevPercent + 20);
+				if (percent === 100) {
+					setIncreasing(false);
+				}
+			} else {
+				setPercent(0);
+				setIncreasing(true);
+			}
+		}, 50);
+
+		return () => {
+			clearInterval(interval);
+		};
+	}, [percent, increasing]);
+
+	return (
+		<div className="m-auto flex h-full w-96 items-center justify-center">
+			<Progress
+				percent={percent}
+				trailColor={rgbAlpha(themeVars.colors.palette.primary.default, 0.8)}
+				strokeColor={themeVars.colors.palette.primary.default}
+				showInfo={false}
+				size="small"
+			/>
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/components/locale-picker/index.tsx b/apps/react-admin/src/components/locale-picker/index.tsx
new file mode 100644
index 000000000..0e9329393
--- /dev/null
+++ b/apps/react-admin/src/components/locale-picker/index.tsx
@@ -0,0 +1,38 @@
+import { Dropdown } from "antd";
+
+import { IconButton, SvgIcon } from "../icon";
+
+import type { MenuProps } from "antd";
+import type { LocalEnum } from "#/enum";
+import { LANGUAGE_MAP, useLocale, useSetLocale } from "@/store/localeI18nStore";
+import { useTranslation } from "react-i18next";
+
+type Locale = keyof typeof LocalEnum;
+
+/**
+ * Locale Picker
+ */
+export default function LocalePicker() {
+	const locale = useLocale(); // 当前语言标识
+	const setLocale = useSetLocale(); // 切换语言的方法
+	const { i18n } = useTranslation();
+	const localeList: MenuProps["items"] = Object.values(LANGUAGE_MAP).map((item) => {
+		return {
+			key: item.locale,
+			label: item.label,
+			icon: <SvgIcon icon={item.icon} size="20" className="rounded-md" />,
+		};
+	});
+
+	return (
+		<Dropdown
+			placement="bottomRight"
+			trigger={["click"]}
+			menu={{ items: localeList, onClick: (e) => setLocale(e.key as Locale, i18n) }}
+		>
+			<IconButton className="h-10 w-10 hover:scale-105">
+				<SvgIcon icon={`ic-locale_${locale}`} size="24" className="rounded-md" />
+			</IconButton>
+		</Dropdown>
+	);
+}
diff --git a/apps/react-admin/src/components/logo/index.tsx b/apps/react-admin/src/components/logo/index.tsx
new file mode 100644
index 000000000..fd4745784
--- /dev/null
+++ b/apps/react-admin/src/components/logo/index.tsx
@@ -0,0 +1,20 @@
+import { NavLink } from "react-router";
+
+import { useTheme } from "@/theme/hooks";
+
+import { Iconify } from "../icon";
+
+interface Props {
+	size?: number | string;
+}
+function Logo({ size = 50 }: Props) {
+	const { themeTokens } = useTheme();
+
+	return (
+		<NavLink to="/">
+			<Iconify icon="solar:code-square-bold" color={themeTokens.color.palette.primary.default} size={size} />
+		</NavLink>
+	);
+}
+
+export default Logo;
diff --git a/apps/react-admin/src/components/markdown/index.tsx b/apps/react-admin/src/components/markdown/index.tsx
new file mode 100644
index 000000000..e27936b5f
--- /dev/null
+++ b/apps/react-admin/src/components/markdown/index.tsx
@@ -0,0 +1,18 @@
+import ReactMarkdown from "react-markdown";
+import type { ReactMarkdownOptions } from "react-markdown/lib/react-markdown";
+import rehypeHighlight from "rehype-highlight";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm"; // add support for strikethrough, tables, tasklists and URLs directly
+import "@/utils/highlight";
+import StyledMarkdown from "./styles";
+
+type Props = ReactMarkdownOptions;
+export default function Markdown({ children }: Props) {
+	return (
+		<StyledMarkdown>
+			<ReactMarkdown rehypePlugins={[rehypeHighlight, rehypeRaw]} remarkPlugins={[[remarkGfm, { singleTilde: false }]]}>
+				{children}
+			</ReactMarkdown>
+		</StyledMarkdown>
+	);
+}
diff --git a/apps/react-admin/src/components/markdown/styles.ts b/apps/react-admin/src/components/markdown/styles.ts
new file mode 100644
index 000000000..cbb49e351
--- /dev/null
+++ b/apps/react-admin/src/components/markdown/styles.ts
@@ -0,0 +1,159 @@
+/**
+ * https://styled-components.com/
+ * vscode plugin: https://github.com/styled-components/vscode-styled-components
+ */
+import styled from "styled-components";
+
+import { themeVars } from "@/theme/theme.css";
+
+const StyledMarkdown = styled.div`
+  display: grid;
+  h1 {
+    font-size: 64px;
+    line-height: 1.25;
+    font-weight: 800;
+  }
+  h2 {
+    font-size: 56px;
+    line-height: 1.25;
+    font-weight: 700;
+  }
+  h3 {
+    font-size: 48px;
+    line-height: 1.25;
+    font-weight: 700;
+  }
+  h4 {
+    font-size: 40px;
+    line-height: 1.25;
+    font-weight: 700;
+  }
+  h5 {
+    font-size: 32px;
+    line-height: 1.25;
+    font-weight: 700;
+  }
+  a {
+    color: ${themeVars.colors.palette.primary.default};
+  }
+  img {
+    border-radius: 4px;
+  }
+  br {
+    display: grid;
+    content: '';
+    margin-top: 0.75em;
+  }
+
+  // Divider
+  hr {
+    margin: 0;
+    border-width: 1;
+    border-style: solid;
+  }
+
+  // List
+  ul,
+  ol {
+    margin: 0;
+    li {
+      line-height: 2;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  // Blockquote
+  blockquote {
+    line-height: 1.5;
+    font-size: 1.5em;
+    margin: 40px auto;
+    position: relative;
+    padding: 24px 24px 24px 64px;
+    border-radius: 16px;
+    background-color: ${themeVars.colors.background.neutral};
+    color: ${themeVars.colors.text.secondary};
+    p,
+    span {
+      margin-bottom: 0;
+      font-size: inherit;
+      font-family: inherit;
+    }
+    &::before {
+      left: 16px;
+      top: -8px;
+      display: block;
+      font-size: 3em;
+      position: absolute;
+      content: '“';
+    }
+  }
+
+  // Code Block
+  pre,
+  pre > code {
+    font-size: 16px;
+    overflow-x: auto;
+    white-space: pre;
+    border-radius: 8px;
+  }
+  code {
+    font-size: 14px;
+    border-radius: 4px;
+    white-space: pre;
+    padding: 0px;
+    background-color: ${themeVars.colors.background.neutral};
+  }
+
+  // Table
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid ${themeVars.colors.common.border};
+    th,
+    td {
+      padding: 8px;
+      border: 1px solid ${themeVars.colors.common.border};
+    }
+    tbody tr:nth-of-type(odd) {
+      background-color: ${themeVars.colors.background.neutral};
+    }
+  }
+
+  // Checkbox
+  input {
+    margin-right: 10px;
+    &[type='checkbox'] {
+      position: relative;
+      cursor: pointer;
+      &::before {
+        content: '';
+        top: -2px;
+        left: -2px;
+        width: 17px;
+        height: 17px;
+        border-radius: 3px;
+        position: absolute;
+        background-color: ${themeVars.colors.palette.primary.default};
+      }
+      &:checked {
+        &::before {
+          background-color: ${themeVars.colors.palette.primary.default};
+        }
+        &::after {
+          content: '';
+          top: 1px;
+          left: 5px;
+          width: 4px;
+          height: 9px;
+          position: absolute;
+          transform: rotate(45deg);
+          border: solid ${themeVars.colors.common.white};
+          border-width: 0 2px 2px 0;
+        }
+      }
+    }
+  }
+`;
+
+export default StyledMarkdown;
diff --git a/apps/react-admin/src/components/progress-bar/index.css.ts b/apps/react-admin/src/components/progress-bar/index.css.ts
new file mode 100644
index 000000000..e883f3537
--- /dev/null
+++ b/apps/react-admin/src/components/progress-bar/index.css.ts
@@ -0,0 +1,11 @@
+import { themeVars } from "@/theme/theme.css";
+import { globalStyle } from "@vanilla-extract/css";
+
+globalStyle("#nprogress .bar", {
+	background: themeVars.colors.palette.primary.default,
+	boxShadow: `0 0 2px ${themeVars.colors.palette.primary.default}`,
+});
+
+globalStyle("#nprogress .peg", {
+	boxShadow: `0 0 10px ${themeVars.colors.palette.primary.default}, 0 0 5px ${themeVars.colors.palette.primary.default}`,
+});
diff --git a/apps/react-admin/src/components/progress-bar/index.tsx b/apps/react-admin/src/components/progress-bar/index.tsx
new file mode 100644
index 000000000..95ee99498
--- /dev/null
+++ b/apps/react-admin/src/components/progress-bar/index.tsx
@@ -0,0 +1,28 @@
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import { usePathname } from "@/router/hooks";
+import { useEffect } from "react";
+import "./index.css";
+
+// 配置 NProgress
+NProgress.configure({
+	showSpinner: false,
+	minimum: 0.1,
+	trickleSpeed: 200,
+});
+
+export default function ProgressBar() {
+	const pathname = usePathname();
+
+	useEffect(() => {
+		NProgress.start();
+		const timer = setTimeout(() => NProgress.done(), 100);
+
+		return () => {
+			clearTimeout(timer);
+			NProgress.done();
+		};
+	}, [pathname]); // 保留 pathname 依赖
+
+	return null;
+}
diff --git a/apps/react-admin/src/components/scroll-progress/index.tsx b/apps/react-admin/src/components/scroll-progress/index.tsx
new file mode 100644
index 000000000..72cab1767
--- /dev/null
+++ b/apps/react-admin/src/components/scroll-progress/index.tsx
@@ -0,0 +1,32 @@
+import { type HTMLMotionProps, type MotionValue, m, useSpring } from "framer-motion";
+import type { CSSProperties } from "react";
+
+import { useTheme } from "@/theme/hooks";
+
+interface Props extends HTMLMotionProps<"div"> {
+	color?: string;
+	scrollYProgress: MotionValue<number>;
+	height?: number;
+}
+/**
+ * https://www.framer.com/motion/scroll-animations/##spring-smoothing
+ */
+export default function ScrollProgress({ scrollYProgress, height = 4, color, ...other }: Props) {
+	const scaleX = useSpring(scrollYProgress, {
+		stiffness: 100,
+		damping: 30,
+		restDelta: 0.001,
+	});
+
+	const { themeTokens } = useTheme();
+
+	const backgroundColor = color || themeTokens.color.palette.primary.default;
+
+	const style: CSSProperties = {
+		transformOrigin: "0%",
+		height,
+		backgroundColor,
+	};
+
+	return <m.div style={{ scaleX, ...style }} {...other} />;
+}
diff --git a/apps/react-admin/src/components/scrollbar/index.tsx b/apps/react-admin/src/components/scrollbar/index.tsx
new file mode 100644
index 000000000..6331f493a
--- /dev/null
+++ b/apps/react-admin/src/components/scrollbar/index.tsx
@@ -0,0 +1,14 @@
+import { forwardRef, memo } from "react";
+import SimpleBar, { type Props as SimplebarProps } from "simplebar-react";
+/**
+ * https://www.npmjs.com/package/simplebar-react?activeTab=readme
+ */
+const Scrollbar = forwardRef<HTMLElement, SimplebarProps>(({ children, ...other }, ref) => {
+	return (
+		<SimpleBar className="h-full" scrollableNodeProps={{ ref }} clickOnTrack={false} {...other}>
+			{children}
+		</SimpleBar>
+	);
+});
+
+export default memo(Scrollbar);
diff --git a/apps/react-admin/src/components/toast/index.tsx b/apps/react-admin/src/components/toast/index.tsx
new file mode 100644
index 000000000..f768cd874
--- /dev/null
+++ b/apps/react-admin/src/components/toast/index.tsx
@@ -0,0 +1,138 @@
+import { useSettings } from "@/store/settingStore";
+import { themeVars } from "@/theme/theme.css";
+import { rgbAlpha } from "@/utils/theme";
+import { Toaster } from "sonner";
+import styled from "styled-components";
+
+import { Iconify } from "../icon";
+
+/**
+ * https://sonner.emilkowal.ski/getting-started
+ */
+export default function Toast() {
+	const { themeMode } = useSettings();
+
+	return (
+		<ToasterStyleWrapper>
+			<Toaster
+				position="top-right"
+				theme={themeMode}
+				toastOptions={{
+					duration: 3000,
+					style: {
+						backgroundColor: themeVars.colors.background.paper,
+					},
+					classNames: {
+						toast: "rounded-lg border-0",
+						description: "text-xs text-current/45",
+						content: "flex-1 ml-2",
+						icon: "flex items-center justify-center px-4 rounded-lg",
+						success: "bg-success/10",
+						error: "bg-error/10",
+						warning: "bg-warning/10",
+						info: "bg-info/10",
+					},
+				}}
+				icons={{
+					success: (
+						<div className="p-2 bg-success/10 rounded-lg">
+							<Iconify icon="carbon:checkmark-filled" size={24} color={themeVars.colors.palette.success.default} />
+						</div>
+					),
+					error: (
+						<div className="p-2 bg-error/10 rounded-lg">
+							<Iconify icon="carbon:warning-hex-filled" size={24} color={themeVars.colors.palette.error.default} />
+						</div>
+					),
+					warning: (
+						<div className="p-2 bg-warning/10 rounded-lg">
+							<Iconify icon="carbon:warning-alt-filled" size={24} color={themeVars.colors.palette.warning.default} />
+						</div>
+					),
+					info: (
+						<div className="p-2 bg-info/10 rounded-lg">
+							<Iconify icon="carbon:information-filled" size={24} color={themeVars.colors.palette.info.default} />
+						</div>
+					),
+					loading: (
+						<div className="p-2 bg-gray-400/10 text-gray-400 rounded-lg">
+							<Iconify icon="svg-spinners:6-dots-scale-middle" size={24} speed={3} />
+						</div>
+					),
+				}}
+				expand
+			/>
+		</ToasterStyleWrapper>
+	);
+}
+
+const ToasterStyleWrapper = styled.div`
+  [data-sonner-toast] {
+    font-weight: 600;
+    font-size: 14px;
+
+    [data-cancel] {
+      color: ${themeVars.colors.text.primary};
+      background-color: transparent;
+      &:hover {
+        background-color: ${rgbAlpha(themeVars.colors.text.primaryChannel, 0.08)};
+      }
+    }
+
+    /* Default */
+    [data-action] {
+      color: ${themeVars.colors.palette.primary.default};
+      background-color: transparent;
+      &:hover {
+        background-color: ${rgbAlpha(themeVars.colors.palette.primary.defaultChannel, 0.08)};
+      }
+    }
+
+    /* Info */
+    &[data-type="info"] [data-action] {
+      color: ${themeVars.colors.palette.info.default};
+      background-color: transparent;
+      &:hover {
+        background-color: ${`rgba(${themeVars.colors.palette.info.defaultChannel}, 0.08)`};
+      }
+    }
+
+    /* Error */
+    &[data-type="error"] [data-action] {
+      color: ${themeVars.colors.palette.error.default};
+      background-color: transparent;
+      &:hover {
+        background-color: ${`rgba(${themeVars.colors.palette.error.defaultChannel}, 0.08)`};
+      }
+    }
+
+    /* Success */
+    &[data-type="success"] [data-action] {
+      color: ${themeVars.colors.palette.success.default};
+      background-color: transparent;
+      &:hover {
+        background-color: ${`rgba(${themeVars.colors.palette.success.defaultChannel}, 0.08)`};
+      }
+    }
+
+    /* Warning */
+    &[data-type="warning"] [data-action] {
+      color: ${themeVars.colors.palette.warning.default};
+      background-color: transparent;
+      &:hover {
+        background-color: ${`rgba(${themeVars.colors.palette.warning.defaultChannel}, 0.08)`};
+      }
+    }
+
+    /* Close Button */
+    [data-close-button] {
+      top: 0;
+      right: 0;
+      left: auto;
+      border-width: 1px;
+      border-style: dashed;
+      background-color: ${themeVars.colors.background.paper};
+      border-color: ${themeVars.colors.common.border};
+    }
+  }
+`;
diff --git a/apps/react-admin/src/components/upload/index.ts b/apps/react-admin/src/components/upload/index.ts
new file mode 100644
index 000000000..a03fb8f47
--- /dev/null
+++ b/apps/react-admin/src/components/upload/index.ts
@@ -0,0 +1,3 @@
+export * from "./upload";
+export * from "./upload-avatar";
+export * from "./upload-box";
diff --git a/apps/react-admin/src/components/upload/styles.ts b/apps/react-admin/src/components/upload/styles.ts
new file mode 100644
index 000000000..ed14cef16
--- /dev/null
+++ b/apps/react-admin/src/components/upload/styles.ts
@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+export const StyledUpload = styled.div<{ $thumbnail?: boolean }>`
+  .ant-upload {
+    border: none !important;
+  }
+  .ant-upload-list {
+    display: ${(props) => (props.$thumbnail ? "flex" : "block")};
+    flex-wrap: wrap;
+  }
+`;
+
+export const StyledUploadAvatar = styled.div`
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  .ant-upload,
+  .ant-upload-select {
+    border: none !important;
+  }
+`;
+
+export const StyledUploadBox = styled.div`
+  .ant-upload {
+    border: none !important;
+  }
+  .ant-upload-list {
+    display: none;
+  }
+`;
diff --git a/apps/react-admin/src/components/upload/upload-avatar.tsx b/apps/react-admin/src/components/upload/upload-avatar.tsx
new file mode 100644
index 000000000..ce0327d52
--- /dev/null
+++ b/apps/react-admin/src/components/upload/upload-avatar.tsx
@@ -0,0 +1,83 @@
+import { themeVars } from "@/theme/theme.css";
+import { fBytes } from "@/utils/format-number";
+import { Typography, Upload } from "antd";
+import type { UploadChangeParam, UploadFile, UploadProps } from "antd/es/upload";
+import { useState } from "react";
+import { Iconify } from "../icon";
+import { StyledUploadAvatar } from "./styles";
+import { beforeAvatarUpload, getBlobUrl } from "./utils";
+
+interface Props extends UploadProps {
+	defaultAvatar?: string;
+	helperText?: React.ReactElement | string;
+}
+export function UploadAvatar({ helperText, defaultAvatar = "", ...other }: Props) {
+	const [imageUrl, setImageUrl] = useState<string>(defaultAvatar);
+
+	const [isHover, setIsHover] = useState(false);
+	const handelHover = (hover: boolean) => {
+		setIsHover(hover);
+	};
+
+	const handleChange: UploadProps["onChange"] = (info: UploadChangeParam<UploadFile>) => {
+		if (info.file.status === "uploading") {
+			return;
+		}
+		if (info.file.status === "done" || info.file.status === "error") {
+			// TODO: Get this url from response in real world.
+			if (info.file.originFileObj) {
+				setImageUrl(getBlobUrl(info.file.originFileObj));
+			}
+		}
+	};
+
+	const renderPreview = <img src={imageUrl} alt="" className="absolute rounded-full" />;
+
+	const renderPlaceholder = (
+		<div
+			style={{
+				backgroundColor: !imageUrl || isHover ? themeVars.colors.background.neutral : "transparent",
+			}}
+			className="absolute z-10 flex h-full w-full flex-col items-center justify-center"
+		>
+			<Iconify icon="solar:camera-add-bold" size={32} />
+			<div className="mt-1 text-xs">Upload Photo</div>
+		</div>
+	);
+
+	const renderContent = (
+		<div
+			className="relative flex h-full w-full items-center justify-center overflow-hidden rounded-full"
+			onMouseEnter={() => handelHover(true)}
+			onMouseLeave={() => handelHover(false)}
+		>
+			{imageUrl ? renderPreview : null}
+			{!imageUrl || isHover ? renderPlaceholder : null}
+		</div>
+	);
+
+	const defaultHelperText = (
+		<Typography.Text type="secondary" style={{ fontSize: 12 }}>
+			Allowed *.jpeg, *.jpg, *.png, *.gif
+			<br /> max size of {fBytes(3145728)}
+		</Typography.Text>
+	);
+	const renderHelpText = <div className="text-center">{helperText || defaultHelperText}</div>;
+
+	return (
+		<StyledUploadAvatar>
+			<Upload
+				name="avatar"
+				showUploadList={false}
+				listType="picture-circle"
+				className="avatar-uploader !flex items-center justify-center"
+				{...other}
+				beforeUpload={beforeAvatarUpload}
+				onChange={handleChange}
+			>
+				{renderContent}
+			</Upload>
+			{renderHelpText}
+		</StyledUploadAvatar>
+	);
+}
diff --git a/apps/react-admin/src/components/upload/upload-box.tsx b/apps/react-admin/src/components/upload/upload-box.tsx
new file mode 100644
index 000000000..28f805ec5
--- /dev/null
+++ b/apps/react-admin/src/components/upload/upload-box.tsx
@@ -0,0 +1,26 @@
+import type { UploadProps } from "antd";
+import Dragger from "antd/es/upload/Dragger";
+import type { ReactElement } from "react";
+
+import { Iconify } from "../icon";
+
+import { StyledUploadBox } from "./styles";
+
+interface Props extends UploadProps {
+	placeholder?: ReactElement;
+}
+export function UploadBox({ placeholder, ...other }: Props) {
+	return (
+		<StyledUploadBox>
+			<Dragger {...other} showUploadList={false}>
+				<div className="opacity-60 hover:opacity-50">
+					{placeholder || (
+						<div className="m-auto flex h-16 w-16 items-center justify-center ">
+							<Iconify icon="eva:cloud-upload-fill" size={28} />
+						</div>
+					)}
+				</div>
+			</Dragger>
+		</StyledUploadBox>
+	);
+}
diff --git a/apps/react-admin/src/components/upload/upload-illustration.tsx b/apps/react-admin/src/components/upload/upload-illustration.tsx
new file mode 100644
index 000000000..f0992df27
--- /dev/null
+++ b/apps/react-admin/src/components/upload/upload-illustration.tsx
@@ -0,0 +1,404 @@
+import { useTheme } from "@/theme/hooks";
+
+export default function UploadIllustration() {
+	const {
+		themeVars: {
+			colors: {
+				palette: {
+					primary: { default: PRIMARY_MAIN, dark: PRIMARY_DARK, darker: PRIMARY_DARKER },
+				},
+			},
+		},
+	} = useTheme();
+	return (
+		<svg
+			className="MuiBox-root css-olkjfu"
+			viewBox="0 0 480 360"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="Upload Illustration"
+		>
+			<title>Upload Illustration</title>
+			<defs>
+				<linearGradient id="BG" x1="19.496%" x2="77.479%" y1="71.822%" y2="16.69%">
+					<stop offset="0%" stopColor={PRIMARY_MAIN} />
+					<stop offset="100%" stopColor={PRIMARY_MAIN} stopOpacity="0" />
+				</linearGradient>
+			</defs>
+			<path
+				fill="url(#BG)"
+				fillRule="nonzero"
+				d="M0 198.78c0 41.458 14.945 79.236 39.539 107.786 28.214 32.765 69.128 53.365 114.734 53.434a148.44 148.44 0 0056.495-11.036c9.051-3.699 19.182-3.274 27.948 1.107a75.779 75.779 0 0033.957 8.01c5.023 0 9.942-.494 14.7-1.433 13.58-2.67 25.94-8.99 36.09-17.94 6.378-5.627 14.547-8.456 22.897-8.446h.142c27.589 0 53.215-8.732 74.492-23.696 19.021-13.36 34.554-31.696 44.904-53.224C474.92 234.58 480 213.388 480 190.958c0-76.93-59.774-139.305-133.498-139.305-7.516 0-14.88.663-22.063 1.899C305.418 21.42 271.355 0 232.499 0a103.651 103.651 0 00-45.88 10.661c-13.24 6.487-25.011 15.705-34.64 26.939-32.698.544-62.931 11.69-87.676 30.291C25.351 97.155 0 144.882 0 198.781z"
+				opacity="0.2"
+			/>
+			<defs>
+				<linearGradient id="linearGradient-2" x1="30.113%" x2="30.113%" y1="0%" y2="100%">
+					<stop offset="0%" stopOpacity="0" />
+					<stop offset="100%" />
+				</linearGradient>
+			</defs>
+			<path
+				fill="#FF4842"
+				fillRule="nonzero"
+				d="M293.006 206.192c-2.248 2.672-4.676 2.628-6.123 2.251l.054-1.384s5.979-2.733 5.827-2.159c-.057.215.057.733.242 1.292zM309.393 209.217c-3.818 2.206-6.058-.38-6.578-1.112.32-.84.801-2.204.703-2.592-.144-.577 5.827 2.155 5.827 2.155l.048 1.549zM305.303 187.204s3.632-2.093 4.425-1.151c.792.942-4.425 1.151-4.425 1.151zM307.497 188.355s-.598.299.721.681c1.318.383-.721-.681-.721-.681zM285.532 182.599c-.123.036 3.022 2.123 5.862.395-.012 0-5.154-.61-5.862-.395zM291.239 186.591s-.861 1.692-2.625 1.943c-1.764.251 2.625-1.943 2.625-1.943zM302.785 190.262s4.138 6.578 3.346 8.129c-.793 1.552-3.346-8.129-3.346-8.129zM294.62 216.416c0 .368 0 .712-.036.996-.107 1.33-3.381.828-3.381.828-2.99.416-4.066-1.019-4.422-2.392a5.444 5.444 0 01-.164-1.363 5.606 5.606 0 01.054-.819v-.272a1.998 1.998 0 011.859.379c1.331 1.08 3.095.252 3.095.252s1.294.107 1.793.538c.281.242.745-.341 1.098-.897.021.359.054 1.007.074 1.701.024.356.03.714.03 1.049z"
+				opacity="0.05"
+			/>
+			<path
+				fill="#FF4842"
+				fillRule="nonzero"
+				d="M289.37 216.339s-.897.879-2.589-.479a5.444 5.444 0 01-.164-1.363c.864.658 2.466 1.842 2.753 1.842zM294.62 216.416a.67.67 0 01-.519.132.672.672 0 01-.452-.287c.348-.266.669-.566.956-.897.009.359.015.717.015 1.052zM301.637 217.032c0 .371 0 .715.033.996.108 1.333 3.382.828 3.382.828 2.989.419 4.066-1.017 4.421-2.392a5.728 5.728 0 00.111-2.182v-.272a2.024 2.024 0 00-1.862.379c-1.331 1.08-3.092.251-3.092.251s-1.294.111-1.794.542c-.281.242-.744-.341-1.094-.897a61.426 61.426 0 00-.078 1.701c-.024.35-.03.708-.027 1.046z"
+				opacity="0.05"
+			/>
+			<path
+				fill="#FF4842"
+				fillRule="nonzero"
+				d="M306.887 216.949s.897.879 2.587-.479c.112-.444.169-.901.167-1.36-.867.655-2.47 1.839-2.754 1.839zM301.637 217.032a.67.67 0 00.969-.155 6.35 6.35 0 01-.957-.897c-.009.356-.014.714-.012 1.052zM319.614 106.269c.063-.138.123-.275.18-.41.057-.134.077-.209.11-.317-.11.237-.206.48-.29.727z"
+				opacity="0.05"
+			/>
+			<path
+				fill={PRIMARY_DARKER}
+				fillRule="nonzero"
+				d="M157.592 279.461a4.114 4.114 0 01-.917-3.131l13.196-107.979 1.094-8.97a4.142 4.142 0 014.078-3.635l38.654-.257a4.135 4.135 0 004.108-4.249l-.015-.409a4.14 4.14 0 014.135-4.279h40.619a4.134 4.134 0 014.098 4.682 4.137 4.137 0 003.995 4.682l39.01.996a4.13 4.13 0 013.97 4.831l-19.502 113.909-.368 2.152a4.042 4.042 0 01-.598 1.543l-135.557.114z"
+			/>
+			<path
+				fill="#FFF"
+				fillRule="nonzero"
+				d="M251.256817 123.296578L274.098317 123.296578 274.098317 200.823078 251.256817 200.823078z"
+				transform="rotate(34.64 262.678 162.06)"
+			/>
+			<path
+				fill="#FFC107"
+				fillRule="nonzero"
+				d="M270.624591 129.857671L286.750291 129.857671 286.750291 145.983371 270.624591 145.983371z"
+				transform="rotate(34.804 278.687 137.92)"
+			/>
+			<path
+				fill="#FFC107"
+				fillRule="nonzero"
+				d="M260.275579 145.813111L276.423079 145.813111 276.423079 161.960611 260.275579 161.960611z"
+				opacity="0.5"
+				transform="rotate(34.64 268.35 153.887)"
+			/>
+			<path
+				fill="#FFC107"
+				fillRule="nonzero"
+				d="M249.191579 161.852111L265.339079 161.852111 265.339079 177.999611 249.191579 177.999611z"
+				opacity="0.3"
+				transform="rotate(34.64 257.265 169.926)"
+			/>
+			<path
+				fill="#FFF"
+				fillRule="nonzero"
+				d="M237.472537 121.334214L260.314037 121.334214 260.314037 198.567714 237.472537 198.567714z"
+				transform="rotate(16.29 248.893 159.951)"
+			/>
+			<path
+				fill="#FF4842"
+				fillRule="nonzero"
+				d="M249.053192 123.761554L265.200692 123.761554 265.200692 139.909054 249.053192 139.909054z"
+				transform="rotate(16.29 257.127 131.835)"
+			/>
+			<path
+				fill="#FF4842"
+				fillRule="nonzero"
+				d="M243.584192 142.473554L259.731692 142.473554 259.731692 158.621053 243.584192 158.621053z"
+				opacity="0.5"
+				transform="rotate(16.29 251.658 150.547)"
+			/>
+			<path
+				fill="#FF4842"
+				fillRule="nonzero"
+				d="M238.116192 161.182554L254.263692 161.182554 254.263692 177.330054 238.116192 177.330054z"
+				opacity="0.3"
+				transform="rotate(16.29 246.19 169.256)"
+			/>
+			<path
+				fill="#FFF"
+				fillRule="nonzero"
+				d="M230.099192 121.641542L252.940692 121.641542 252.940692 198.875042 230.099192 198.875042z"
+				transform="rotate(4.6 241.52 160.258)"
+			/>
+			<path
+				fill="#1890FF"
+				fillRule="nonzero"
+				d="M235.800489 122.985499L251.947989 122.985499 251.947989 139.132999 235.800489 139.132999z"
+				transform="rotate(4.6 243.874 131.06)"
+			/>
+			<path
+				fill="#1890FF"
+				fillRule="nonzero"
+				d="M234.234488 142.413498L250.381988 142.413498 250.381988 158.560998 234.234488 158.560998z"
+				opacity="0.5"
+				transform="rotate(4.6 242.308 150.487)"
+			/>
+			<path
+				fill="#1890FF"
+				fillRule="nonzero"
+				d="M232.672488 161.846499L248.819988 161.846499 248.819988 177.993999 232.672488 177.993999z"
+				opacity="0.3"
+				transform="rotate(4.6 240.746 169.92)"
+			/>
+			<path
+				fill="#FFF"
+				fillRule="nonzero"
+				d="M224.736657 123.384871L247.578157 123.384871 247.578157 200.618371 224.736657 200.618371z"
+				transform="rotate(-2.61 236.157 162.002)"
+			/>
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M226.751283 124.659968L242.898783 124.659968 242.898783 140.807468 226.751283 140.807468z"
+				transform="rotate(-2.61 234.825 132.734)"
+			/>
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M228.305601 143.479224L244.473301 143.479224 244.473301 159.646924 228.305601 159.646924z"
+				opacity="0.5"
+				transform="rotate(-2.862 236.39 151.563)"
+			/>
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M228.525282 163.608968L244.672782 163.608968 244.672782 179.756468 228.525282 179.756468z"
+				opacity="0.3"
+				transform="rotate(-2.61 236.599 171.683)"
+			/>
+			<path
+				fill="#F4F6F8"
+				fillRule="nonzero"
+				d="M232.679 225.726l-20.294 7.851-29.661 11.466c-1.121-2.093-2.771-4.921-4.813-8.297-7.026-11.642-18.65-29.75-29.001-45.665-11.66-17.938-21.696-33.075-21.696-33.075l7.265-2.093 59.346-17.23 38.854 87.043z"
+			/>
+			<path
+				fill="#000"
+				fillRule="nonzero"
+				d="M232.679 225.726l-20.294 7.851a152.535 152.535 0 01-34.484 3.169c-7.026-11.642-18.65-29.75-29-45.665l-14.42-35.18 59.343-17.218 38.855 87.043z"
+				opacity="0.1"
+			/>
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M247.777 220.841s-31.526 18.65-78.596 14.432l-37.525-91.486 17.984-3.091 62.168-10.677 35.279 89.043.69 1.779z"
+			/>
+			<path
+				fill="#FF4842"
+				fillRule="nonzero"
+				d="M247.075 219.074c-7.424.365-16.013.329-24.654-.702-9.351-1.101-18.757-3.367-26.82-7.523-6.742-3.471-12.506-7.247-17.532-11.776-13.074-11.759-21.164-28.579-28.429-58.365l62.168-10.677 35.267 89.043z"
+				opacity="0.1"
+			/>
+			<path
+				fill="#FFF"
+				fillRule="nonzero"
+				d="M270.203 213.959s-23.239 4.55-46.894 1.749c-9.351-1.1-18.757-3.367-26.82-7.522-6.742-3.471-12.503-7.247-17.532-11.777-16.181-14.557-24.725-36.866-33.536-81.918 0 0 38.633 9.325 76.836-11.101-.012.015 12.865 80.373 47.946 110.569z"
+			/>
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M165.405 131.03s31.416-1.776 40.187-8.548l1.331 4.276s-20.758 9.157-41.518 9.268v-4.996zM165.405 152.137s30.417-1.665 53.399-12.766l.777 1.776s-18.237 10.647-54.176 13.433v-2.443zM167.853 160.362s30.418-1.665 53.397-12.766l.777 1.776s-18.237 10.643-54.174 13.433v-2.443zM170.299 168.599s30.417-1.666 53.399-12.766l.774 1.775s-18.237 10.647-54.173 13.433v-2.442zM172.748 176.835s30.417-1.665 53.396-12.766l.777 1.776s-18.237 10.647-54.173 13.433v-2.443zM175.193 185.075s30.417-1.665 53.399-12.766l.774 1.776s-18.237 10.643-54.173 13.433v-2.443z"
+				opacity="0.3"
+			/>
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M389.069 287.344s-12.641-.762-11.152 8.097c0 0-.299 1.563 1.124 2.275 0 0 .021-.658 1.295-.434.454.077.916.099 1.375.066a2.832 2.832 0 001.677-.694c.468-.409 3.555-1.468 4.936-7.274 0 0 1.023-1.267.981-1.593l-2.132.897s.73 1.54.156 2.816c0 0-.069-2.759-.479-2.691-.083 0-1.109.533-1.109.533s1.253 2.69.299 4.628c0 0 .359-3.304-.699-4.434l-1.495.876s1.465 2.768.472 5.029c0 0 .254-3.465-.789-4.817l-1.361 1.062s1.379 2.729.539 4.604c0 0-.111-4.036-.835-4.341 0 0-1.195 1.049-1.369 1.494 0 0 .942 1.98.356 3.026 0 0-.359-2.691-.652-2.691 0 0-1.196 1.794-1.309 2.99 0 0 .051-1.818 1.022-3.172a3.593 3.593 0 00-1.818.942s.186-1.262 2.111-1.37c0 0 .981-1.351 1.241-1.435 0 0-1.914-.158-3.074.356 0 0 1.023-1.196 3.427-.649l1.342-1.094s-2.52-.347-3.588.036c0 0 1.229-1.052 3.95-.299l1.462-.873s-2.147-.463-3.426-.299c0 0 1.348-.729 3.856.06l1.044-.47s-1.573-.299-2.033-.358c-.461-.06-.488-.174-.488-.174a5.426 5.426 0 012.957.329s2.222-.813 2.186-.954z"
+			/>
+			<ellipse cx="380.363" cy="298.487" fill={PRIMARY_MAIN} fillRule="nonzero" opacity="0.1" rx="8.945" ry="1.513" />
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M394.956 258.102s-7.125-.43-6.279 4.565a1.218 1.218 0 00.631 1.283s.015-.371.733-.245c.255.042.515.054.774.036.349-.023.681-.159.945-.389.264-.23 2.003-.828 2.783-4.102 0 0 .577-.714.553-.897l-1.196.511s.41.87.087 1.591c0 0-.039-1.558-.269-1.522-.048 0-.625.299-.625.299s.706 1.495.173 2.61c0 0 .204-1.862-.394-2.502l-.846.496s.825 1.561.266 2.834c0 0 .143-1.955-.446-2.714l-.765.598s.774 1.539.299 2.595c0 0-.063-2.275-.469-2.446a4.75 4.75 0 00-.775.834s.532 1.118.204 1.707c0 0-.204-1.515-.368-1.521 0 0-.67 1.001-.739 1.689a3.671 3.671 0 01.577-1.794 2.007 2.007 0 00-1.025.532s.104-.711 1.196-.771c0 0 .553-.763.699-.81 0 0-1.079-.09-1.734.2 0 0 .577-.67 1.932-.365l.759-.619s-1.423-.194-2.024.021c0 0 .694-.598 2.227-.161l.826-.494a7.445 7.445 0 00-1.935-.164s.763-.413 2.174.033l.598-.263s-.897-.177-1.148-.203c-.252-.027-.275-.099-.275-.099a3.078 3.078 0 011.668.185s1.232-.46 1.208-.538z"
+			/>
+			<ellipse cx="390.052" cy="264.383" fill={PRIMARY_MAIN} fillRule="nonzero" opacity="0.1" rx="5.044" ry="1" />
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M352.896 262.437s-8.604-.52-7.588 5.51a1.47 1.47 0 00.763 1.549s0-.449.897-.299c.309.052.623.067.935.045a1.923 1.923 0 001.142-.473c.318-.279 2.419-.998 3.361-4.951 0 0 .697-.861.667-1.085l-1.468.622s.496 1.046.104 1.916c0 0-.048-1.877-.326-1.835-.056 0-.753.364-.753.364s.852 1.824.209 3.152c0 0 .245-2.249-.475-3.02l-1.023.598s.996 1.886.32 3.423c0 0 .174-2.359-.535-3.289l-.927.724s.939 1.857.365 3.133c0 0-.072-2.747-.565-2.954 0 0-.81.715-.933 1.008 0 0 .64 1.348.242 2.06 0 0-.245-1.83-.445-1.839 0 0-.804 1.214-.897 2.042.04-.768.28-1.512.697-2.159a2.427 2.427 0 00-1.235.643s.125-.858 1.435-.933c0 0 .667-.92.846-.974 0 0-1.303-.111-2.093.239 0 0 .694-.807 2.329-.44l.915-.747s-1.713-.233-2.442.024c0 0 .837-.715 2.69-.191l.996-.598s-1.462-.314-2.335-.201c0 0 .921-.496 2.625.042l.711-.32s-1.07-.209-1.384-.242c-.314-.033-.329-.119-.329-.119a3.69 3.69 0 012.012.221s1.519-.553 1.492-.646z"
+			/>
+			<ellipse cx="346.97" cy="270.022" fill={PRIMARY_MAIN} fillRule="nonzero" opacity="0.1" rx="6.09" ry="1.028" />
+			<rect
+				width="51.026"
+				height="91.312"
+				x="303.926"
+				y="69.211"
+				fill="#FFF"
+				fillRule="nonzero"
+				rx="4.737"
+				transform="rotate(-71.99 329.44 114.867)"
+			/>
+			<circle cx="303.613" cy="103.507" r="9.376" fill={PRIMARY_MAIN} fillRule="nonzero" opacity="0.2" />
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M344.582495 86.4883769L347.150665 86.4883769 347.150665 127.336977 344.582495 127.336977z"
+				opacity="0.2"
+				transform="rotate(-71.99 345.867 106.913)"
+			/>
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M333.028401 99.6373982L335.596571 99.6373982 335.596571 120.445898 333.028401 120.445898z"
+				opacity="0.2"
+				transform="rotate(-71.99 334.312 110.042)"
+			/>
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M337.109071 101.431004L339.677241 101.431004 339.677241 135.086304 337.109071 135.086304z"
+				opacity="0.2"
+				transform="rotate(-71.99 338.393 118.259)"
+			/>
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M338.505494 105.174377L341.073664 105.174377 341.073664 146.022978 338.505494 146.022978z"
+				opacity="0.2"
+				transform="rotate(-71.99 339.79 125.599)"
+			/>
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M348.060839 134.648161L353.026769 134.648161 353.026769 145.952261 348.060839 145.952261z"
+				opacity="0.5"
+				transform="rotate(-71.99 350.544 140.3)"
+			/>
+			<rect
+				width="50.3"
+				height="78.305"
+				x="291.549"
+				y="174.486"
+				fill="#FFF"
+				fillRule="nonzero"
+				rx="4"
+				transform="rotate(-57.265 316.7 213.638)"
+			/>
+			<path
+				fill="#DFE3E8"
+				fillRule="nonzero"
+				d="M278.038439 203.88874L292.269539 203.88874 292.269539 207.23723 278.038439 207.23723z"
+				transform="rotate(-57.57 285.154 205.563)"
+			/>
+			<path
+				fill="#DFE3E8"
+				fillRule="nonzero"
+				d="M283.007935 199.201889L314.262535 199.201889 314.262535 202.272339 283.007935 202.272339z"
+				transform="rotate(-57.57 298.635 200.737)"
+			/>
+			<path
+				fill="#DFE3E8"
+				fillRule="nonzero"
+				d="M288.543935 202.715889L319.798535 202.715889 319.798535 205.786339 288.543935 205.786339z"
+				transform="rotate(-57.57 304.171 204.251)"
+			/>
+			<path
+				fill="#DFE3E8"
+				fillRule="nonzero"
+				d="M294.078936 206.235889L325.333536 206.235889 325.333536 209.306339 294.078936 209.306339z"
+				transform="rotate(-57.57 309.706 207.771)"
+			/>
+			<path
+				fill="#DFE3E8"
+				fillRule="nonzero"
+				d="M299.879919 211.40702L331.090719 211.40702 331.090719 214.47316 299.879919 214.47316z"
+				transform="rotate(-57.265 315.485 212.94)"
+			/>
+			<path
+				fill="#F4F6F8"
+				fillRule="nonzero"
+				d="M305.149936 213.268889L336.404536 213.268889 336.404536 216.339339 305.149936 216.339339z"
+				transform="rotate(-57.57 320.777 214.804)"
+			/>
+			<path
+				fill="#F4F6F8"
+				fillRule="nonzero"
+				d="M310.685935 216.782889L341.940535 216.782889 341.940535 219.853339 310.685935 219.853339z"
+				transform="rotate(-57.57 326.313 218.318)"
+			/>
+			<path
+				fill="#DFE3E8"
+				fillRule="nonzero"
+				d="M341.417983 210.406958L349.511163 210.406958 349.511163 218.500138 341.417983 218.500138z"
+				transform="rotate(-57.57 345.465 214.454)"
+			/>
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M269.277 168.76l-45.767.493a3.127 3.127 0 00-3.094 3.125v3.782a3.127 3.127 0 01-3.05 3.124l-33.024.792a3.124 3.124 0 01-3.095-2.308l-1.551-5.701a3.124 3.124 0 00-3.053-2.308l-44.113.475a3.125 3.125 0 00-3.05 3.648l17.747 104.449a3.129 3.129 0 003.071 2.604l139.363.598a3.129 3.129 0 003.082-3.714l-20.366-106.521a3.125 3.125 0 00-3.1-2.538z"
+			/>
+			<path
+				fill={PRIMARY_DARK}
+				fillRule="nonzero"
+				d="M269.277 168.76l-45.767.493a3.127 3.127 0 00-3.094 3.125v3.782a3.127 3.127 0 01-3.05 3.124l-33.024.792a3.124 3.124 0 01-3.095-2.308l-1.551-5.701a3.124 3.124 0 00-3.053-2.308l-44.113.475a3.125 3.125 0 00-3.05 3.648l17.747 104.449a3.129 3.129 0 003.071 2.604l139.363.598a3.129 3.129 0 003.082-3.714l-20.366-106.521a3.125 3.125 0 00-3.1-2.538z"
+				opacity="0.243"
+			/>
+			<path
+				fill="url(#linearGradient-2)"
+				fillRule="nonzero"
+				d="M269.277 168.76l-45.767.493a3.127 3.127 0 00-3.094 3.125v3.782a3.127 3.127 0 01-3.05 3.124l-33.024.792a3.124 3.124 0 01-3.095-2.308l-1.551-5.701a3.124 3.124 0 00-3.053-2.308l-44.113.475a3.125 3.125 0 00-3.05 3.648l17.747 104.449a3.129 3.129 0 003.071 2.604l139.363.598a3.129 3.129 0 003.082-3.714l-20.366-106.521a3.125 3.125 0 00-3.1-2.538z"
+				opacity="0.32"
+			/>
+			<ellipse cx="119.593" cy="258.664" fill={PRIMARY_MAIN} fillRule="nonzero" opacity="0.1" rx="4.846" ry="1" />
+			<ellipse cx="101.03" cy="260.545" fill={PRIMARY_MAIN} fillRule="nonzero" opacity="0.1" rx="4.846" ry="1" />
+			<ellipse cx="108.459" cy="265.905" fill={PRIMARY_MAIN} fillRule="nonzero" opacity="0.1" rx="3.444" ry="1" />
+			<ellipse cx="89.193" cy="265.433" fill={PRIMARY_MAIN} fillRule="nonzero" opacity="0.1" rx="3.444" ry="1" />
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M100.925 260.398s6.796-22.279-1.064-31.204c-5.881-6.676-12.557-5.877-15.547-5.052a5.528 5.528 0 00-3.564 2.963c-1.046 2.254-.858 5.913 6.521 10.186 12.35 7.151 13.119 16.96 13.119 16.96l.535 6.147z"
+			/>
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M101.2 260.575s-7.961-16.193-10.147-15.846c-1.037.17-1.516 1.196-1.734 2.218a6.516 6.516 0 00.434 3.941c1.13 2.601 4.165 7.519 11.447 9.687z"
+			/>
+			<path
+				stroke={PRIMARY_DARKER}
+				strokeLinecap="round"
+				strokeWidth="0.5"
+				d="M91.113 247.808s8.353 12.115 9.968 12.647"
+			/>
+			<path stroke={PRIMARY_DARKER} strokeLinecap="round" strokeWidth="0.5" d="M90.344 249.701L92.293 249.701" />
+			<path stroke={PRIMARY_DARKER} strokeLinecap="round" strokeWidth="0.5" d="M92.68 254.132L95.738 254.263" />
+			<path stroke={PRIMARY_DARKER} strokeLinecap="round" strokeWidth="0.5" d="M94.542 250.586L94.21 252.179" />
+			<path stroke={PRIMARY_DARKER} strokeLinecap="round" strokeWidth="0.5" d="M97.792 255.432L97.732 256.879" />
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M100.964 260.575s7.959-16.193 10.144-15.846c1.041.17 1.519 1.196 1.734 2.218a6.514 6.514 0 01-.433 3.941c-1.13 2.601-4.168 7.519-11.445 9.687z"
+			/>
+			<path
+				stroke={PRIMARY_DARKER}
+				strokeLinecap="round"
+				strokeWidth="0.5"
+				d="M111.051 247.808s-8.371 12.115-9.97 12.647"
+			/>
+			<path stroke={PRIMARY_DARKER} strokeLinecap="round" strokeWidth="0.5" d="M111.82 249.701L109.871 249.701" />
+			<path stroke={PRIMARY_DARKER} strokeLinecap="round" strokeWidth="0.5" d="M109.485 254.132L106.426 254.263" />
+			<path stroke={PRIMARY_DARKER} strokeLinecap="round" strokeWidth="0.5" d="M107.622 250.586L107.954 252.179" />
+			<path stroke={PRIMARY_DARKER} strokeLinecap="round" strokeWidth="0.5" d="M104.372 255.432L104.432 256.879" />
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M87.295 264.357a1.375 1.375 0 01-.452-.685.599.599 0 01.317-.697c.3-.11.598.09.837.299.24.21.512.431.81.38a1.237 1.237 0 01-.382-1.16.47.47 0 01.105-.236c.161-.174.454-.099.648.039.598.43.787 1.264.79 2.018.03-.277.03-.555 0-.831a.853.853 0 01.334-.727.938.938 0 01.476-.114.988.988 0 01.774.222.767.767 0 01-.03.947c-.229.257-.5.474-.801.64a1.805 1.805 0 00-.571.547.399.399 0 00-.042.096h-1.74a4.826 4.826 0 01-1.073-.738zM117.626 257.833a1.355 1.355 0 01-.452-.682.599.599 0 01.314-.696c.299-.111.598.089.837.299.239.209.509.436.817.391a1.236 1.236 0 01-.386-1.157.472.472 0 01.107-.236c.162-.173.455-.099.649.036.613.433.787 1.268.79 2.021a4.008 4.008 0 000-.834.852.852 0 01.299-.736.955.955 0 01.475-.11.998.998 0 01.774.218.768.768 0 01-.033.951 2.996 2.996 0 01-.798.64 1.767 1.767 0 00-.571.544.499.499 0 00-.042.098h-1.701a4.78 4.78 0 01-1.079-.747zM107.518 264.357a1.406 1.406 0 01-.455-.685.6.6 0 01.317-.697c.299-.11.598.09.837.299.239.21.505.437.816.395a1.247 1.247 0 01-.385-1.16.472.472 0 01.107-.236c.162-.174.455-.099.649.039.613.43.783 1.264.789 2.018.03-.277.03-.555 0-.832a.855.855 0 01.314-.735.93.93 0 01.476-.114.988.988 0 01.774.222.764.764 0 01-.033.947 3.028 3.028 0 01-.798.64 1.798 1.798 0 00-.571.547.411.411 0 00-.042.096h-1.734c-.385-.2-.742-.45-1.061-.744z"
+			/>
+			<circle cx="84.467" cy="87.003" r="6.467" fill={PRIMARY_MAIN} fillRule="nonzero" opacity="0.1" />
+			<circle cx="395.425" cy="138.681" r="6.467" fill={PRIMARY_MAIN} fillRule="nonzero" opacity="0.1" />
+			<circle cx="279.178" cy="66.467" r="6.467" fill={PRIMARY_MAIN} fillRule="nonzero" opacity="0.1" />
+			<circle cx="97.4" cy="122.68" r="10.838" fill={PRIMARY_MAIN} fillRule="nonzero" opacity="0.1" />
+			<path
+				fill={PRIMARY_DARK}
+				fillRule="nonzero"
+				d="M206.029 209.911c-7.975 0-14.44 6.465-14.44 14.44s6.465 14.44 14.44 14.44 14.44-6.465 14.44-14.44-6.465-14.44-14.44-14.44z"
+			/>
+			<path
+				fill={PRIMARY_MAIN}
+				fillRule="nonzero"
+				d="M206.029 211.59c7.047 0 12.761 5.714 12.761 12.761 0 7.048-5.714 12.761-12.761 12.761-7.048 0-12.761-5.713-12.761-12.761.006-7.045 5.716-12.754 12.761-12.761"
+				opacity="0.72"
+			/>
+			<path
+				fill={PRIMARY_DARK}
+				fillRule="nonzero"
+				d="M200.058 225.406l-.699-.681a.721.721 0 010-1.065l6.127-5.984a.753.753 0 01.546-.231c.206 0 .404.083.545.231l6.127 5.978a.733.733 0 010 1.065l-.699.682a.768.768 0 01-1.091 0l-3.622-3.727v8.843a.725.725 0 01-.219.523.76.76 0 01-.534.217h-1.009a.75.75 0 01-.759-.74v-8.832l-3.622 3.726a.768.768 0 01-1.091-.005z"
+			/>
+		</svg>
+	);
+}
diff --git a/apps/react-admin/src/components/upload/upload-list-item.tsx b/apps/react-admin/src/components/upload/upload-list-item.tsx
new file mode 100644
index 000000000..23934cdd8
--- /dev/null
+++ b/apps/react-admin/src/components/upload/upload-list-item.tsx
@@ -0,0 +1,88 @@
+import { Card, Image, Tooltip, Typography } from "antd";
+import type { ItemRender } from "antd/es/upload/interface";
+import { m } from "framer-motion";
+import { useEffect, useState } from "react";
+
+import { varFade } from "@/components/animate/variants";
+import { Iconify, SvgIcon } from "@/components/icon";
+import { fBytes } from "@/utils/format-number";
+
+import { getBlobUrl, getFileFormat, getFileThumb } from "./utils";
+
+type Props = {
+	file: Parameters<ItemRender>["1"];
+	actions: Parameters<ItemRender>["3"];
+	thumbnail?: boolean;
+};
+
+export default function UploadListItem({ file, actions, thumbnail = false }: Props) {
+	const { name, size } = file;
+	const thumb = getFileThumb(name);
+	const format = getFileFormat(name);
+	const [imgThumbUrl, setImgThumbUrl] = useState("");
+
+	useEffect(() => {
+		// TODO: mock upload sucess, you should delete 'error' in the production environment
+		if (file.status && ["done", "error"].includes(file.status) && format === "img") {
+			if (file.originFileObj) {
+				setImgThumbUrl(getBlobUrl(file.originFileObj));
+			}
+		}
+	}, [file, format]);
+
+	const closeButton = (
+		<button
+			type="button"
+			className="ml-auto h-6 w-6 cursor-pointer rounded-full text-center hover:bg-gray-400 hover:bg-opacity-20"
+			onClick={actions.remove}
+		>
+			<Iconify icon="mingcute:close-line" size={14} className="text-gray-600" />
+		</button>
+	);
+
+	const thumbList = (
+		<Card
+			className="relative flex items-center justify-center"
+			style={{ width: 80, height: 80, marginTop: "8px", marginRight: "8px" }}
+		>
+			<Tooltip title={name}>
+				{format === "img" ? (
+					<Image src={imgThumbUrl} preview={false} width={40} height={40} />
+				) : (
+					<SvgIcon icon={thumb} size={40} />
+				)}
+			</Tooltip>
+			<div className="absolute right-0 top-0">{closeButton}</div>
+		</Card>
+	);
+	const cardList = (
+		<Card
+			styles={{
+				body: {
+					display: "flex",
+					alignItems: "center",
+					padding: "8px 12px",
+				},
+			}}
+			style={{ marginTop: "8px" }}
+		>
+			{format === "img" ? (
+				<Image src={imgThumbUrl} preview={false} width={32} height={32} />
+			) : (
+				<SvgIcon icon={thumb} size={32} />
+			)}
+			<div className="ml-4 flex flex-col">
+				<Typography.Text className="!text-sm !font-medium">{name}</Typography.Text>
+				<Typography.Text type="secondary" className="!text-xs">
+					{fBytes(size)}
+				</Typography.Text>
+			</div>
+			{closeButton}
+		</Card>
+	);
+	return (
+		<m.div initial="initial" animate="animate" exit="exit" variants={varFade().inUp}>
+			{thumbnail ? thumbList : cardList}
+		</m.div>
+	);
+}
diff --git a/apps/react-admin/src/components/upload/upload.tsx b/apps/react-admin/src/components/upload/upload.tsx
new file mode 100644
index 000000000..d10852566
--- /dev/null
+++ b/apps/react-admin/src/components/upload/upload.tsx
@@ -0,0 +1,46 @@
+import { Upload as AntdUpload, Typography } from "antd";
+import type { ItemRender } from "antd/es/upload/interface";
+import { StyledUpload } from "./styles";
+import UploadIllustration from "./upload-illustration";
+import UploadListItem from "./upload-list-item";
+
+import type { UploadProps } from "antd";
+
+const { Dragger } = AntdUpload;
+const { Text, Title } = Typography;
+
+interface Props extends UploadProps {
+	thumbnail?: boolean;
+}
+
+const itemRender: (thumbnail: boolean) => ItemRender = (thumbnail) => {
+	return function temp(...args) {
+		const [, file, , actions] = args;
+		return <UploadListItem file={file} actions={actions} thumbnail={thumbnail} />;
+	};
+};
+export function Upload({ thumbnail = false, ...other }: Props) {
+	return (
+		<StyledUpload $thumbnail={thumbnail}>
+			<Dragger {...other} itemRender={itemRender(thumbnail)}>
+				<div className="opacity-100 hover:opacity-80">
+					<p className="m-auto max-w-[200px]">
+						<UploadIllustration />
+					</p>
+					<Typography>
+						<Title level={5} className="mt-4">
+							Drop or Select file
+						</Title>
+						<Text type="secondary">
+							Drop files here or click
+							<Text className="mx-2 !text-primary" underline>
+								browse
+							</Text>
+							thorough your machine
+						</Text>
+					</Typography>
+				</div>
+			</Dragger>
+		</StyledUpload>
+	);
+}
diff --git a/apps/react-admin/src/components/upload/utils.ts b/apps/react-admin/src/components/upload/utils.ts
new file mode 100644
index 000000000..653e92987
--- /dev/null
+++ b/apps/react-admin/src/components/upload/utils.ts
@@ -0,0 +1,143 @@
+import type { RcFile } from "antd/es/upload";
+import { toast } from "sonner";
+
+// Define more types here
+const FORMAT_PDF = ["pdf"];
+const FORMAT_TEXT = ["txt"];
+const FORMAT_PHOTOSHOP = ["psd"];
+const FORMAT_WORD = ["doc", "docx"];
+const FORMAT_EXCEL = ["xls", "xlsx"];
+const FORMAT_ZIP = ["zip", "rar", "iso"];
+const FORMAT_ILLUSTRATOR = ["ai", "esp"];
+const FORMAT_POWERPOINT = ["ppt", "pptx"];
+const FORMAT_AUDIO = ["wav", "aif", "mp3", "aac"];
+const FORMAT_IMG = ["jpg", "jpeg", "gif", "bmp", "png", "svg"];
+const FORMAT_VIDEO = ["m4v", "avi", "mpg", "mp4", "webm"];
+
+/**
+ * 获取文件格式
+ * @param fileName
+ */
+export function getFileFormat(fileName: string | undefined) {
+	let format: string | undefined;
+	switch (true) {
+		case FORMAT_PDF.includes(fileTypeByName(fileName)):
+			format = "pdf";
+			break;
+		case FORMAT_TEXT.includes(fileTypeByName(fileName)):
+			format = "txt";
+			break;
+		case FORMAT_PHOTOSHOP.includes(fileTypeByName(fileName)):
+			format = "psd";
+			break;
+		case FORMAT_WORD.includes(fileTypeByName(fileName)):
+			format = "word";
+			break;
+		case FORMAT_EXCEL.includes(fileTypeByName(fileName)):
+			format = "excel";
+			break;
+		case FORMAT_ZIP.includes(fileTypeByName(fileName)):
+			format = "zip";
+			break;
+		case FORMAT_ILLUSTRATOR.includes(fileTypeByName(fileName)):
+			format = "ai";
+			break;
+		case FORMAT_POWERPOINT.includes(fileTypeByName(fileName)):
+			format = "ppt";
+			break;
+		case FORMAT_AUDIO.includes(fileTypeByName(fileName)):
+			format = "audio";
+			break;
+		case FORMAT_IMG.includes(fileTypeByName(fileName)):
+			format = "img";
+			break;
+		case FORMAT_VIDEO.includes(fileTypeByName(fileName)):
+			format = "video";
+			break;
+		default:
+			format = fileTypeByName(fileName);
+	}
+	return format;
+}
+
+/**
+ * 获取文件缩略图
+ * @param fileName
+ */
+export function getFileThumb(fileName: string | undefined) {
+	let thumb: string | undefined;
+	const format = getFileFormat(fileName);
+	switch (format) {
+		case "txt":
+			thumb = "ic_file_txt";
+			break;
+		case "zip":
+			thumb = "ic_file_zip";
+			break;
+		case "audio":
+			thumb = "ic_file_audio";
+			break;
+		case "video":
+			thumb = "ic_file_video";
+			break;
+		case "word":
+			thumb = "ic_file_word";
+			break;
+		case "excel":
+			thumb = "ic_file_excel";
+			break;
+		case "ppt":
+			thumb = "ic_file_ppt";
+			break;
+		case "pdf":
+			thumb = "ic_file_pdf";
+			break;
+		case "psd":
+			thumb = "ic_file_psd";
+			break;
+		case "ai":
+			thumb = "ic_file_ai";
+			break;
+		case "img":
+			thumb = "ic_file_img";
+			break;
+		case "folder":
+			thumb = "ic_folder";
+			break;
+		default:
+			thumb = "ic_file";
+	}
+	return thumb;
+}
+
+export function fileTypeByName(fileName = "") {
+	return fileName?.split(".").pop() || "folder";
+}
+
+export function beforeAvatarUpload(file: RcFile) {
+	const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
+	if (!isJpgOrPng) {
+		toast.error("You can only upload JPG/PNG file!", {
+			position: "top-center",
+		});
+	}
+	const isLt2M = file.size / 1024 / 1024 < 2;
+	if (!isLt2M) {
+		toast.error("Image must smaller than 2MB!", {
+			position: "top-center",
+		});
+	}
+	return isJpgOrPng && isLt2M;
+}
+
+export function getBase64(img: RcFile, callback: (url: string) => void) {
+	const reader = new FileReader();
+	reader.addEventListener("load", () => callback(reader.result as string));
+	reader.readAsDataURL(img);
+}
+
+export function getBlobUrl(imgFile: RcFile) {
+	const fileBlob = new Blob([imgFile]);
+	const thumbnailUrl = URL.createObjectURL(fileBlob);
+	return thumbnailUrl;
+}
diff --git a/apps/react-admin/src/constants/abp-core/events.ts b/apps/react-admin/src/constants/abp-core/events.ts
new file mode 100644
index 000000000..c797c7728
--- /dev/null
+++ b/apps/react-admin/src/constants/abp-core/events.ts
@@ -0,0 +1,10 @@
+export const Events = {
+	/** 收到服务器消息 */
+	GetNotification: "get-notifications",
+	/** 新通知消息 */
+	NotificationRecevied: "sys_notifications_recevied",
+	/** 用户登录事件 */
+	UserLogin: "sys_user_login",
+	/** 用户登出事件 */
+	UserLogout: "sys_user_logout",
+};
diff --git a/apps/react-admin/src/constants/abp-core/index.ts b/apps/react-admin/src/constants/abp-core/index.ts
new file mode 100644
index 000000000..b46005f33
--- /dev/null
+++ b/apps/react-admin/src/constants/abp-core/index.ts
@@ -0,0 +1,2 @@
+export * from "./events";
+export * from "./validation";
diff --git a/apps/react-admin/src/constants/abp-core/validation.ts b/apps/react-admin/src/constants/abp-core/validation.ts
new file mode 100644
index 000000000..08fd82b76
--- /dev/null
+++ b/apps/react-admin/src/constants/abp-core/validation.ts
@@ -0,0 +1,35 @@
+export const ValidationEnum = {
+	DoNotMatch: "'{0}' and '{1}' do not match.",
+	FieldDoNotValidCreditCardNumber: "The {0} field is not a valid credit card number.",
+	FieldDoNotValidEmailAddress: "The {0} field is not a valid e-mail address.",
+	FieldDoNotValidFullyQualifiedUrl: "The {0} field is not a valid fully-qualified http, https, or ftp URL.",
+	FieldDoNotValidPhoneNumber: "The {0} field is not a valid phone number.",
+	FieldInvalid: "The field {0} is invalid.",
+	FieldIsNotValid: "{0} is not valid.",
+	FieldMustBeetWeen: "The field {0} must be between {1} and {2}.",
+	FieldMustBeStringOrArrayWithMaximumLength:
+		"The field {0} must be a string or array type with a maximum length of '{1}'.",
+	FieldMustBeStringOrArrayWithMinimumLength:
+		"The field {0} must be a string or array type with a minimum length of '{1}'.",
+	FieldMustBeStringWithMaximumLength: "The field {0} must be a string with a maximum length of {1}.",
+	FieldMustBeStringWithMinimumLengthAndMaximumLength:
+		"The field {0} must be a string with a minimum length of {2} and a maximum length of {1}.",
+	FieldMustMatchRegularExpression: "The field {0} must match the regular expression '{1}'.",
+	FieldOnlyAcceptsFilesExtensions: "The {0} field only accepts files with the following extensions: {1}",
+	FieldRequired: "The {0} field is required.",
+	ThisFieldIsInvalid: "ThisFieldIsInvalid.",
+	ThisFieldIsNotAValidCreditCardNumber: "ThisFieldIsNotAValidCreditCardNumber.",
+	ThisFieldIsNotAValidEmailAddress: "ThisFieldIsNotAValidEmailAddress.",
+	ThisFieldIsNotAValidFullyQualifiedHttpHttpsOrFtpUrl: "ThisFieldIsNotAValidFullyQualifiedHttpHttpsOrFtpUrl",
+	ThisFieldIsNotAValidPhoneNumber: "ThisFieldIsNotAValidPhoneNumber.",
+	ThisFieldIsNotValid: "ThisFieldIsNotValid.",
+	ThisFieldIsRequired: "ThisFieldIsRequired.",
+	ThisFieldMustBeAStringOrArrayTypeWithAMaximumLength: "ThisFieldMustBeAStringOrArrayTypeWithAMaximumLengthOf{0}",
+	ThisFieldMustBeAStringOrArrayTypeWithAMinimumLength: "ThisFieldMustBeAStringOrArrayTypeWithAMinimumLengthOf{0}",
+	ThisFieldMustBeAStringWithAMaximumLength: "ThisFieldMustBeAStringWithAMaximumLengthOf{0}",
+	ThisFieldMustBeAStringWithAMinimumLengthAndAMaximumLength:
+		"ThisFieldMustBeAStringWithAMinimumLengthOf{1}AndAMaximumLengthOf{0}",
+	ThisFieldMustBeBetween: "ThisFieldMustBeBetween{0}And{1}",
+	ThisFieldMustMatchTheRegularExpression: "ThisFieldMustMatchTheRegularExpression{0}",
+	ThisFieldOnlyAcceptsFilesWithTheFollowingExtensions: "ThisFieldOnlyAcceptsFilesWithTheFollowingExtensions:{0}",
+};
diff --git a/apps/react-admin/src/constants/management/auditing/index.ts b/apps/react-admin/src/constants/management/auditing/index.ts
new file mode 100644
index 000000000..972144448
--- /dev/null
+++ b/apps/react-admin/src/constants/management/auditing/index.ts
@@ -0,0 +1 @@
+export * from "./permissions";
diff --git a/apps/react-admin/src/constants/management/auditing/permissions.ts b/apps/react-admin/src/constants/management/auditing/permissions.ts
new file mode 100644
index 000000000..66f903ae1
--- /dev/null
+++ b/apps/react-admin/src/constants/management/auditing/permissions.ts
@@ -0,0 +1,6 @@
+/** 审计日志权限 */
+export const AuditLogPermissions = {
+	Default: "AbpAuditing.AuditLog",
+	/** 删除 */
+	Delete: "AbpAuditing.AuditLog.Delete",
+};
diff --git a/apps/react-admin/src/constants/management/identity/index.ts b/apps/react-admin/src/constants/management/identity/index.ts
new file mode 100644
index 000000000..972144448
--- /dev/null
+++ b/apps/react-admin/src/constants/management/identity/index.ts
@@ -0,0 +1 @@
+export * from "./permissions";
diff --git a/apps/react-admin/src/constants/management/identity/permissions.ts b/apps/react-admin/src/constants/management/identity/permissions.ts
new file mode 100644
index 000000000..c8e314e14
--- /dev/null
+++ b/apps/react-admin/src/constants/management/identity/permissions.ts
@@ -0,0 +1,63 @@
+/** 用户权限 */
+export const IdentityUserPermissions = {
+	/** 新增 */
+	Create: "AbpIdentity.Users.Create",
+	/** 删除 */
+	Delete: "AbpIdentity.Users.Delete",
+	/** 管理声明 */
+	ManageClaims: "AbpIdentity.Users.ManageClaims",
+	/** 管理权限 */
+	ManagePermissions: "AbpIdentity.Users.ManagePermissions",
+	/** 更新 */
+	Update: "AbpIdentity.Users.Update",
+};
+/** 角色权限 */
+export const IdentityRolePermissions = {
+	/** 新增 */
+	Create: "AbpIdentity.Roles.Create",
+	/** 删除 */
+	Delete: "AbpIdentity.Roles.Delete",
+	/** 管理声明 */
+	ManageClaims: "AbpIdentity.Roles.ManageClaims",
+	/** 管理权限 */
+	ManagePermissions: "AbpIdentity.Roles.ManagePermissions",
+	/** 更新 */
+	Update: "AbpIdentity.Roles.Update",
+};
+/** 声明类型权限 */
+export const IdentityClaimTypePermissions = {
+	/** 新增 */
+	Create: "AbpIdentity.IdentityClaimTypes.Create",
+	/** 删除 */
+	Delete: "AbpIdentity.IdentityClaimTypes.Delete",
+	/** 更新 */
+	Update: "AbpIdentity.IdentityClaimTypes.Update",
+};
+/** 组织机构权限 */
+export const OrganizationUnitPermissions = {
+	/** 管理角色 */
+	ManageRoles: "AbpIdentity.OrganizationUnits.ManageRoles",
+	/** 管理用户 */
+	ManageUsers: "AbpIdentity.OrganizationUnits.ManageUsers",
+};
+/** 安全日志权限 */
+export const SecurityLogPermissions = {
+	Default: "AbpAuditing.SecurityLog",
+	/** 删除 */
+	Delete: "AbpAuditing.SecurityLog.Delete",
+};
+/** 用户会话权限 */
+export const IdentitySessionPermissions = {
+	Default: "AbpIdentity.IdentitySessions",
+	/** 移除 */
+	Revoke: "AbpIdentity.IdentitySessions.Revoke",
+};
+/**
+/**
+ * 搜索用户权限
+ * @deprecated 后台服务删除权限后将无法使用.
+ * @todo 需要检查abp框架权限定义
+ */
+export const UserLookupPermissions = {
+	Default: "AbpIdentity.UserLookup",
+};
diff --git a/apps/react-admin/src/constants/management/permissions/index.ts b/apps/react-admin/src/constants/management/permissions/index.ts
new file mode 100644
index 000000000..972144448
--- /dev/null
+++ b/apps/react-admin/src/constants/management/permissions/index.ts
@@ -0,0 +1 @@
+export * from "./permissions";
diff --git a/apps/react-admin/src/constants/management/permissions/permissions.ts b/apps/react-admin/src/constants/management/permissions/permissions.ts
new file mode 100644
index 000000000..03b487a9b
--- /dev/null
+++ b/apps/react-admin/src/constants/management/permissions/permissions.ts
@@ -0,0 +1,20 @@
+/** 分组权限 */
+export const GroupDefinitionsPermissions = {
+	/** 新增 */
+	Create: "PermissionManagement.GroupDefinitions.Create",
+	Default: "PermissionManagement.GroupDefinitions",
+	/** 删除 */
+	Delete: "PermissionManagement.GroupDefinitions.Delete",
+	/** 更新 */
+	Update: "PermissionManagement.GroupDefinitions.Update",
+};
+/** 权限定义权限 */
+export const PermissionDefinitionsPermissions = {
+	/** 新增 */
+	Create: "PermissionManagement.Definitions.Create",
+	Default: "PermissionManagement.Definitions",
+	/** 删除 */
+	Delete: "PermissionManagement.Definitions.Delete",
+	/** 更新 */
+	Update: "PermissionManagement.Definitions.Update",
+};
diff --git a/apps/react-admin/src/constants/management/settings/index.ts b/apps/react-admin/src/constants/management/settings/index.ts
new file mode 100644
index 000000000..972144448
--- /dev/null
+++ b/apps/react-admin/src/constants/management/settings/index.ts
@@ -0,0 +1 @@
+export * from "./permissions";
diff --git a/apps/react-admin/src/constants/management/settings/permissions.ts b/apps/react-admin/src/constants/management/settings/permissions.ts
new file mode 100644
index 000000000..0205d556d
--- /dev/null
+++ b/apps/react-admin/src/constants/management/settings/permissions.ts
@@ -0,0 +1,10 @@
+/** 设置定义权限 */
+export const SettingDefinitionsPermissions = {
+	/** 新增 */
+	Create: "SettingManagement.Definition.Create",
+	Default: "SettingManagement.Definition",
+	/** 还原或删除 */
+	DeleteOrRestore: "SettingManagement.Definition.DeleteOrRestore",
+	/** 更新 */
+	Update: "SettingManagement.Definition.Update",
+};
diff --git a/apps/react-admin/src/constants/notifications/notifications.ts b/apps/react-admin/src/constants/notifications/notifications.ts
new file mode 100644
index 000000000..8d8633c85
--- /dev/null
+++ b/apps/react-admin/src/constants/notifications/notifications.ts
@@ -0,0 +1,4 @@
+export const NotificationNames = {
+	/** 会话过期通知 */
+	SessionExpiration: "AbpIdentity.Session.Expiration",
+};
diff --git a/apps/react-admin/src/constants/openiddict/index.ts b/apps/react-admin/src/constants/openiddict/index.ts
new file mode 100644
index 000000000..972144448
--- /dev/null
+++ b/apps/react-admin/src/constants/openiddict/index.ts
@@ -0,0 +1 @@
+export * from "./permissions";
diff --git a/apps/react-admin/src/constants/openiddict/permissions.ts b/apps/react-admin/src/constants/openiddict/permissions.ts
new file mode 100644
index 000000000..1a0813e9a
--- /dev/null
+++ b/apps/react-admin/src/constants/openiddict/permissions.ts
@@ -0,0 +1,42 @@
+/** 应用权限 */
+export const ApplicationsPermissions = {
+	/** 新增 */
+	Create: "AbpOpenIddict.Applications.Create",
+	Default: "AbpOpenIddict.Applications",
+	/** 删除 */
+	Delete: "AbpOpenIddict.Applications.Delete",
+	/** 管理功能 */
+	ManageFeatures: "AbpOpenIddict.Applications.ManageFeatures",
+	/** 管理权限 */
+	ManagePermissions: "AbpOpenIddict.Applications.ManagePermissions",
+	/** 管理密钥 */
+	ManageSecret: "AbpOpenIddict.Applications.ManageSecret",
+	/** 更新 */
+	Update: "AbpOpenIddict.Applications.Update",
+};
+/** 授权权限 */
+export const AuthorizationsPermissions = {
+	/** 新增 */
+	Create: "AbpOpenIddict.Authorizations.Create",
+	Default: "AbpOpenIddict.Authorizations",
+	/** 删除 */
+	Delete: "AbpOpenIddict.Authorizations.Delete",
+};
+/** 范围权限 */
+export const ScopesPermissions = {
+	/** 新增 */
+	Create: "AbpOpenIddict.Scopes.Create",
+	Default: "AbpOpenIddict.Scopes",
+	/** 删除 */
+	Delete: "AbpOpenIddict.Scopes.Delete",
+	/** 更新 */
+	Update: "AbpOpenIddict.Scopes.Update",
+};
+/** 授权令牌权限 */
+export const TokensPermissions = {
+	/** 新增 */
+	Create: "AbpOpenIddict.Tokens.Create",
+	Default: "AbpOpenIddict.Tokens",
+	/** 删除 */
+	Delete: "AbpOpenIddict.Tokens.Delete",
+};
diff --git a/apps/react-admin/src/global.css b/apps/react-admin/src/global.css
new file mode 100644
index 000000000..aa4d089b2
--- /dev/null
+++ b/apps/react-admin/src/global.css
@@ -0,0 +1,9 @@
+/* editor */
+@import "react-quill/dist/quill.snow.css";
+/* simplebar */
+@import "simplebar-react/dist/simplebar.min.css";
+
+/* tailwind */
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
diff --git a/apps/react-admin/src/hooks/abp/auditing/use-audit-logs.ts b/apps/react-admin/src/hooks/abp/auditing/use-audit-logs.ts
new file mode 100644
index 000000000..f690867c6
--- /dev/null
+++ b/apps/react-admin/src/hooks/abp/auditing/use-audit-logs.ts
@@ -0,0 +1,76 @@
+import { useMemo } from "react";
+// import { useTranslation } from "react-i18next";
+import { ChangeType } from "#/management/auditing/entity-changes";
+import { useLocalizer } from "../use-localization";
+
+export function useAuditLogs() {
+	const { L } = useLocalizer(["AbpAuditLogging", "AbpUi"]);
+
+	const changeTypeColorMap = useMemo(
+		() => ({
+			[ChangeType.Created]: { color: "#87d068", value: L("Created") },
+			[ChangeType.Deleted]: { color: "red", value: L("Deleted") },
+			[ChangeType.Updated]: { color: "#108ee9", value: L("Updated") },
+		}),
+		[L],
+	);
+	// const { t } = useTranslation();
+	// const changeTypeColorMap = useMemo(
+	// 	() => ({
+	// 		[ChangeType.Created]: { color: "#87d068", value: t("AbpAuditLogging.Created") },
+	// 		[ChangeType.Deleted]: { color: "red", value: t("AbpAuditLogging.Deleted") },
+	// 		[ChangeType.Updated]: { color: "#108ee9", value: t("AbpAuditLogging.Updated") },
+	// 	}),
+	// 	[t],
+	// );
+
+	const methodColorMap: { [key: string]: string } = {
+		DELETE: "red",
+		GET: "blue",
+		OPTIONS: "cyan",
+		PATCH: "pink",
+		POST: "green",
+		PUT: "orange",
+	};
+
+	const getChangeTypeColor = useMemo(
+		() => (changeType: ChangeType) => changeTypeColorMap[changeType].color,
+		[changeTypeColorMap],
+	);
+
+	const getChangeTypeValue = useMemo(
+		() => (changeType: ChangeType) => changeTypeColorMap[changeType].value,
+		[changeTypeColorMap],
+	);
+
+	const getHttpMethodColor = useMemo(() => (method?: string) => (method ? methodColorMap[method] : ""), []);
+
+	const getHttpStatusCodeColor = useMemo(
+		() => (statusCode?: number) => {
+			if (!statusCode) {
+				return "";
+			}
+			if (statusCode >= 200 && statusCode < 300) {
+				return "#87d068";
+			}
+			if (statusCode >= 300 && statusCode < 400) {
+				return "#108ee9";
+			}
+			if (statusCode >= 400 && statusCode < 500) {
+				return "orange";
+			}
+			if (statusCode >= 500) {
+				return "red";
+			}
+			return "cyan";
+		},
+		[],
+	);
+
+	return {
+		getChangeTypeColor,
+		getChangeTypeValue,
+		getHttpMethodColor,
+		getHttpStatusCodeColor,
+	};
+}
diff --git a/apps/react-admin/src/hooks/abp/use-abp-feature.ts b/apps/react-admin/src/hooks/abp/use-abp-feature.ts
new file mode 100644
index 000000000..68e3af5da
--- /dev/null
+++ b/apps/react-admin/src/hooks/abp/use-abp-feature.ts
@@ -0,0 +1,45 @@
+import type { FeatureValue, IFeatureChecker } from "#/features";
+import useAbpStore from "@/store/abpCoreStore";
+import { useMemo } from "react";
+
+export function useFeatures(): IFeatureChecker {
+	const application = useAbpStore((state) => state.application);
+
+	const features = useMemo<FeatureValue[]>(() => {
+		if (!application?.features?.values) {
+			return [];
+		}
+		return Object.keys(application.features.values).map((name) => ({
+			name,
+			value: application.features.values[name] ?? "",
+		}));
+	}, [application]);
+
+	function get(name: string): FeatureValue | undefined {
+		return features.find((feature) => feature.name === name);
+	}
+
+	function _isEnabled(name: string): boolean {
+		const setting = get(name);
+		return setting?.value.toLowerCase() === "true";
+	}
+
+	const featureChecker: IFeatureChecker = {
+		getOrEmpty(name: string) {
+			return get(name)?.value ?? "";
+		},
+
+		isEnabled(featureNames: string | string[], requiresAll?: boolean) {
+			if (Array.isArray(featureNames)) {
+				if (featureNames.length === 0) return true;
+				if (requiresAll === undefined || requiresAll === true) {
+					return featureNames.every(_isEnabled);
+				}
+				return featureNames.some(_isEnabled);
+			}
+			return _isEnabled(featureNames);
+		},
+	};
+
+	return featureChecker;
+}
diff --git a/apps/react-admin/src/hooks/abp/use-abp-settings.ts b/apps/react-admin/src/hooks/abp/use-abp-settings.ts
new file mode 100644
index 000000000..e0309b0df
--- /dev/null
+++ b/apps/react-admin/src/hooks/abp/use-abp-settings.ts
@@ -0,0 +1,57 @@
+import type { ISettingProvider, SettingValue } from "#/settings";
+import useAbpStore from "@/store/abpCoreStore";
+import { useMemo } from "react";
+
+export function useAbpSettings(): ISettingProvider {
+	const application = useAbpStore.getState().application;
+
+	const getSettings = useMemo(() => {
+		if (!application) {
+			return [];
+		}
+		const { values: settings } = application.setting;
+		return Object.keys(settings).map((key) => ({
+			name: key,
+			value: settings[key] ?? "",
+		}));
+	}, [application]);
+
+	function get(name: string): SettingValue | undefined {
+		return getSettings.find((setting) => name === setting.name);
+	}
+
+	function getAll(...names: string[]): SettingValue[] {
+		if (names.length > 0) {
+			return getSettings.filter((setting) => names.includes(setting.name));
+		}
+		return getSettings;
+	}
+
+	function getOrDefault<T>(name: string, defaultValue: T): string | T {
+		const setting = get(name);
+		if (!setting) {
+			return defaultValue;
+		}
+		return setting.value;
+	}
+
+	const settingProvider: ISettingProvider = {
+		getAll(...names: string[]) {
+			return getAll(...names);
+		},
+		getNumber(name: string, defaultValue = 0) {
+			const value = getOrDefault(name, defaultValue);
+			const num = Number(value);
+			return Number.isNaN(num) ? defaultValue : num;
+		},
+		getOrEmpty(name: string) {
+			return getOrDefault(name, "");
+		},
+		isTrue(name: string) {
+			const value = getOrDefault(name, "false");
+			return typeof value === "string" && value.toLowerCase() === "true";
+		},
+	};
+
+	return settingProvider;
+}
diff --git a/apps/react-admin/src/hooks/abp/use-localization.ts b/apps/react-admin/src/hooks/abp/use-localization.ts
new file mode 100644
index 000000000..fa78f95a0
--- /dev/null
+++ b/apps/react-admin/src/hooks/abp/use-localization.ts
@@ -0,0 +1,52 @@
+import { useEffect, useMemo } from "react";
+import type { Dictionary } from "#/abp-core/global";
+import { format } from "@/utils/string";
+import useLocaleStore, { useLocale } from "@/store/localeI18nStore";
+import { getResources } from "@/utils/abp/localzations/get-resources";
+
+// const { L } = useLocalizer(['AbpAuditLogging', 'AbpUi']);
+
+/*
+	const { t: $t } = useTranslation();
+	const { L } = useLocalizer();
+  console.log(L('DisplayName:ClaimValue')) //和getI18nLocales()获取的不同，这个是没有前缀key的
+  console.log($t('AbpIdentity.DisplayName:ClaimValue'))
+*/
+export function useLocalizer(resourceNames?: string | string[], callback?: () => void) {
+	const localizations = useLocaleStore.getState().localizations || {};
+	const locale = useLocale();
+
+	const mergedResources = useMemo(() => getResources(resourceNames), [resourceNames]);
+
+	useEffect(() => {
+		if (callback) {
+			callback();
+		}
+	}, [locale, callback]);
+
+	/**
+	 * 注意，使用react hook 来存储 key
+	 * @param key
+	 * @param args
+	 * @returns
+	 */
+	function L(key: string, args?: any[] | Record<string, string>) {
+		if (!key) return "";
+		return mergedResources[key] ? format(mergedResources[key], args ?? []) : key;
+	}
+	/**
+	 * 实际没调用国react hook,可以在很多地方调用
+	 * @param resource
+	 * @param key
+	 * @param args
+	 * @returns
+	 */
+	function Lr(resource: string, key: string, args?: any[] | Record<string, string>) {
+		if (!resource || !key) return "";
+		// const { localizations } = useLocaleStore.getState();
+		const subResource = localizations[resource] ?? {};
+		return subResource[key] ? format(subResource[key], args ?? []) : key;
+	}
+
+	return { L, Lr };
+}
diff --git a/apps/react-admin/src/hooks/abp/use-sessions.ts b/apps/react-admin/src/hooks/abp/use-sessions.ts
new file mode 100644
index 000000000..5f9f78453
--- /dev/null
+++ b/apps/react-admin/src/hooks/abp/use-sessions.ts
@@ -0,0 +1,50 @@
+import { useEffect } from "react";
+import type { Notification as NotificationInfo } from "#/notifications";
+import { Modal } from "antd";
+import { useApplication } from "@/store/abpCoreStore";
+import { useNotifications } from "@/utils/abp/notifications/useNotifications";
+import { NotificationNames } from "@/constants/notifications/notifications";
+import { useEventBus } from "@/utils/abp/useEventBus";
+import { useUserActions } from "@/store/userStore";
+import { useLoginStateContext } from "@/pages/sys/login/providers/LoginStateProvider";
+
+export const useSessions = () => {
+	const { clearUserInfoAndToken } = useUserActions();
+	const { backToLogin } = useLoginStateContext();
+	const { currentUser } = useApplication() ?? {};
+	const { subscribe, unSubscribe } = useEventBus();
+	const { register, release } = useNotifications();
+
+	const handleSessionExpired = (event?: NotificationInfo) => {
+		if (!event) return;
+
+		const { data, title, message } = event;
+		const sessionId = data.SessionId;
+
+		if (sessionId === currentUser?.sessionId) {
+			release();
+			Modal.confirm({
+				title,
+				content: message,
+				centered: true,
+				afterClose: () => {
+					//TODO 测试
+					clearUserInfoAndToken();
+					backToLogin();
+				},
+			});
+		}
+	};
+
+	useEffect(() => {
+		// Register handlers on mount
+		subscribe(NotificationNames.SessionExpiration, handleSessionExpired);
+		register();
+
+		// Cleanup on unmount
+		return () => {
+			unSubscribe(NotificationNames.SessionExpiration, handleSessionExpired);
+			release();
+		};
+	}, [currentUser?.sessionId]); // Re-register if sessionId changes
+};
diff --git a/apps/react-admin/src/hooks/event/use-copy-to-clipboard.ts b/apps/react-admin/src/hooks/event/use-copy-to-clipboard.ts
new file mode 100644
index 000000000..788d2ca5f
--- /dev/null
+++ b/apps/react-admin/src/hooks/event/use-copy-to-clipboard.ts
@@ -0,0 +1,36 @@
+import { useState } from "react";
+
+// ----------------------------------------------------------------------
+
+type CopiedValue = string | null;
+
+type CopyFn = (text: string) => Promise<boolean>;
+
+type ReturnType = {
+	copyFn: CopyFn;
+	copiedText: CopiedValue;
+};
+
+export function useCopyToClipboard(): ReturnType {
+	const [copiedText, setCopiedText] = useState<CopiedValue>(null);
+
+	const copyFn: CopyFn = async (text) => {
+		if (!navigator?.clipboard) {
+			console.warn("Clipboard not supported");
+			return false;
+		}
+
+		// Try to save to clipboard then save it in the state if worked
+		try {
+			await navigator.clipboard.writeText(text);
+			setCopiedText(text);
+			return true;
+		} catch (error) {
+			console.warn("Copy failed", error);
+			setCopiedText(null);
+			return false;
+		}
+	};
+
+	return { copiedText, copyFn };
+}
diff --git a/apps/react-admin/src/layouts/_common/account-dropdown.tsx b/apps/react-admin/src/layouts/_common/account-dropdown.tsx
new file mode 100644
index 000000000..5c5897188
--- /dev/null
+++ b/apps/react-admin/src/layouts/_common/account-dropdown.tsx
@@ -0,0 +1,99 @@
+import { Divider, type MenuProps } from "antd";
+import Dropdown, { type DropdownProps } from "antd/es/dropdown/dropdown";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { NavLink } from "react-router";
+
+import { IconButton } from "@/components/icon";
+import { useLoginStateContext } from "@/pages/sys/login/providers/LoginStateProvider";
+import { useRouter } from "@/router/hooks";
+import { useUserActions, useUserInfo } from "@/store/userStore";
+import { useTheme } from "@/theme/hooks";
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+
+/**
+ * Account Dropdown
+ */
+export default function AccountDropdown() {
+	const { replace } = useRouter();
+	const { username, email, avatar } = useUserInfo();
+	const { clearUserInfoAndToken } = useUserActions();
+	const { backToLogin } = useLoginStateContext();
+	const { t } = useTranslation();
+	const logout = () => {
+		try {
+			clearUserInfoAndToken();
+			backToLogin();
+		} catch (error) {
+			console.log(error);
+		} finally {
+			replace("/login");
+		}
+	};
+	const {
+		themeVars: { colors, borderRadius, shadows },
+	} = useTheme();
+
+	const contentStyle: React.CSSProperties = {
+		backgroundColor: colors.background.default,
+		borderRadius: borderRadius.lg,
+		boxShadow: shadows.dropdown,
+	};
+
+	const menuStyle: React.CSSProperties = {
+		boxShadow: "none",
+	};
+
+	const dropdownRender: DropdownProps["dropdownRender"] = (menu) => (
+		<div style={contentStyle}>
+			<div className="flex flex-col items-start p-4">
+				<div>{username}</div>
+				<div className="text-gray">{email}</div>
+			</div>
+			<Divider style={{ margin: 0 }} />
+			{React.cloneElement(menu as React.ReactElement, { style: menuStyle })}
+		</div>
+	);
+
+	const items: MenuProps["items"] = [
+		{
+			label: (
+				<NavLink to="https://docs-admin.slashspaces.com/" target="_blank">
+					{t("sys.docs")}
+				</NavLink>
+			),
+			key: "0",
+		},
+		{
+			label: <NavLink to={HOMEPAGE}>{t("sys.menu.dashboard")}</NavLink>,
+			key: "1",
+		},
+		{
+			label: <NavLink to="/account/my-settings">{t("abp.account.settings.title")}</NavLink>,
+			key: "2",
+		},
+		// {
+		// 	label: <NavLink to="/management/user/profile">{t("sys.menu.user.profile")}</NavLink>,
+		// 	key: "3",
+		// },
+		{ type: "divider" },
+		{
+			label: (
+				<button className="font-bold text-warning" type="button">
+					{t("sys.login.logout")}
+				</button>
+			),
+			key: "4",
+			onClick: logout,
+		},
+	];
+
+	return (
+		<Dropdown menu={{ items }} trigger={["click"]} dropdownRender={dropdownRender}>
+			<IconButton className="h-10 w-10 transform-none px-0 hover:scale-105">
+				<img className="h-8 w-8 rounded-full" src={avatar} alt="" />
+			</IconButton>
+		</Dropdown>
+	);
+}
diff --git a/apps/react-admin/src/layouts/_common/bread-crumb.tsx b/apps/react-admin/src/layouts/_common/bread-crumb.tsx
new file mode 100644
index 000000000..7ca8afa7d
--- /dev/null
+++ b/apps/react-admin/src/layouts/_common/bread-crumb.tsx
@@ -0,0 +1,54 @@
+import { Breadcrumb, type BreadcrumbProps, type GetProp } from "antd";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useMatches } from "react-router";
+
+import { Iconify } from "@/components/icon";
+import { useFlattenedRoutes, usePermissionRoutes } from "@/router/hooks";
+import { menuFilter } from "@/router/utils";
+
+type MenuItem = GetProp<BreadcrumbProps, "items">[number];
+
+/**
+ * 动态面包屑解决方案：https://github.com/MinjieChang/myblog/issues/29
+ */
+export default function BreadCrumb() {
+	const { t } = useTranslation();
+	const matches = useMatches();
+	const flattenedRoutes = useFlattenedRoutes();
+	const permissionRoutes = usePermissionRoutes();
+
+	const breadCrumbs = useMemo(() => {
+		const menuRoutes = menuFilter(permissionRoutes);
+		const paths = matches.filter((item) => item.pathname !== "/").map((item) => item.pathname);
+
+		const pathRouteMetas = flattenedRoutes.filter((item) => paths.includes(item.key));
+
+		let currentMenuItems = [...menuRoutes];
+
+		return pathRouteMetas.map((routeMeta): MenuItem => {
+			const { key, label } = routeMeta;
+
+			// Find current level menu items
+			const currentRoute = currentMenuItems.find((item) => item.meta?.key === key);
+
+			// Update menu items for next level
+			currentMenuItems = currentRoute?.children?.filter((item) => !item.meta?.hideMenu) ?? [];
+
+			return {
+				key,
+				title: t(label),
+				...(currentMenuItems.length > 0 && {
+					menu: {
+						items: currentMenuItems.map((item) => ({
+							key: item.meta?.key,
+							label: item.meta?.key ? <Link to={item.meta.key}>{t(item.meta.label)}</Link> : null,
+						})),
+					},
+				}),
+			};
+		});
+	}, [matches, flattenedRoutes, t, permissionRoutes]);
+
+	return <Breadcrumb items={breadCrumbs} className="!text-sm" separator={<Iconify icon="ph:dot-duotone" />} />;
+}
diff --git a/apps/react-admin/src/layouts/_common/header-simple.tsx b/apps/react-admin/src/layouts/_common/header-simple.tsx
new file mode 100644
index 000000000..2516cdcbd
--- /dev/null
+++ b/apps/react-admin/src/layouts/_common/header-simple.tsx
@@ -0,0 +1,12 @@
+import Logo from "@/components/logo";
+
+import SettingButton from "./setting-button";
+
+export default function HeaderSimple() {
+	return (
+		<header className="flex h-16 w-full items-center justify-between px-6">
+			<Logo size={30} />
+			<SettingButton />
+		</header>
+	);
+}
diff --git a/apps/react-admin/src/layouts/_common/notice.tsx b/apps/react-admin/src/layouts/_common/notice.tsx
new file mode 100644
index 000000000..b03c4e9e5
--- /dev/null
+++ b/apps/react-admin/src/layouts/_common/notice.tsx
@@ -0,0 +1,258 @@
+import { faker } from "@faker-js/faker";
+import { Badge, Button, Drawer, Space, Tabs, type TabsProps, Tag } from "antd";
+import { type CSSProperties, type ReactNode, useState } from "react";
+
+import CyanBlur from "@/assets/images/background/cyan-blur.png";
+import RedBlur from "@/assets/images/background/red-blur.png";
+import { IconButton, Iconify, SvgIcon } from "@/components/icon";
+import { themeVars } from "@/theme/theme.css";
+
+export default function NoticeButton() {
+	const [drawerOpen, setDrawerOpen] = useState(false);
+	const [count, setCount] = useState(4);
+
+	const style: CSSProperties = {
+		backdropFilter: "blur(20px)",
+		backgroundImage: `url("${CyanBlur}"), url("${RedBlur}")`,
+		backgroundRepeat: "no-repeat, no-repeat",
+		backgroundColor: `rgba(${themeVars.colors.background.paperChannel}, 0.9)`,
+		backgroundPosition: "right top, left bottom",
+		backgroundSize: "50, 50%",
+	};
+
+	return (
+		<div>
+			<IconButton onClick={() => setDrawerOpen(true)}>
+				<Badge
+					count={count}
+					styles={{
+						root: { color: "inherit" },
+						indicator: { color: themeVars.colors.common.white },
+					}}
+				>
+					<Iconify icon="solar:bell-bing-bold-duotone" size={24} />
+				</Badge>
+			</IconButton>
+			<Drawer
+				placement="right"
+				title="Notifications"
+				onClose={() => setDrawerOpen(false)}
+				open={drawerOpen}
+				closable={false}
+				width={420}
+				styles={{
+					body: { padding: 0 },
+					mask: { backgroundColor: "transparent" },
+				}}
+				style={style}
+				extra={
+					<IconButton
+						style={{ color: themeVars.colors.palette.primary.default }}
+						onClick={() => {
+							setCount(0);
+							setDrawerOpen(false);
+						}}
+					>
+						<Iconify icon="solar:check-read-broken" size={20} />
+					</IconButton>
+				}
+				footer={
+					<div
+						style={{ color: themeVars.colors.text.primary }}
+						className="flex h-10 w-full items-center justify-center font-semibold"
+					>
+						View All
+					</div>
+				}
+			>
+				<NoticeTab />
+			</Drawer>
+		</div>
+	);
+}
+
+function NoticeTab() {
+	const tabChildren: ReactNode = (
+		<div className="text-sm">
+			<div className="flex">
+				<img className="h-10 w-10 rounded-full" src={faker.image.avatarGitHub()} alt="" />
+				<div className="ml-2">
+					<div>
+						<span className="font-medium">{faker.person.fullName()}</span>
+						<span className="text-xs font-light"> sent you a frind request</span>
+					</div>
+					<span className="text-xs font-light opacity-60">about 1 hour ago</span>
+					<div className="mt-2">
+						<Space>
+							<Button type="primary">Accept</Button>
+							<Button>Refuse</Button>
+						</Space>
+					</div>
+				</div>
+			</div>
+
+			<div className="mt-8 flex">
+				<img className="h-10 w-10 rounded-full" src={faker.image.avatarGitHub()} alt="" />
+				<div className="ml-2">
+					<div>
+						<span className="font-medium">{faker.person.fullName()}</span>
+						<span className="text-xs font-light"> added file to </span>
+						<span className="font-medium">File Manager</span>
+					</div>
+					<span className="text-xs font-light opacity-60">5 hour ago</span>
+					<div className="mt-2 flex items-center rounded-lg bg-bg-neutral p-4">
+						<div className="ml-2 flex flex-col text-gray">
+							<span className="font-medium">@{faker.person.fullName()}</span>
+							<span className="text-xs">{faker.lorem.lines(2)}</span>
+						</div>
+					</div>
+					<div className="mt-2">
+						<Space>
+							<Button type="primary">Reply</Button>
+						</Space>
+					</div>
+				</div>
+			</div>
+
+			<div className="mt-8 flex">
+				<img className="h-10 w-10 rounded-full" src={faker.image.avatarGitHub()} alt="" />
+				<div className="ml-2">
+					<div>
+						<span className="font-medium">{faker.person.fullName()}</span>
+						<span className="text-xs font-light"> mentioned you in</span>
+						<span className="font-medium">Slash Admin</span>
+					</div>
+					<span className="text-xs font-light opacity-60">1 days ago</span>
+					<div className="mt-2">
+						<Space>
+							<Button type="primary">Reply</Button>
+						</Space>
+					</div>
+				</div>
+			</div>
+
+			<div className="mt-8 flex">
+				<img className="h-10 w-10 rounded-full" src={faker.image.avatarGitHub()} alt="" />
+				<div className="ml-2">
+					<div>
+						<span className="font-medium">{faker.person.fullName()}</span>
+						<span className="text-xs font-light"> added file to </span>
+						<span className="font-medium">File Manager</span>
+					</div>
+					<span className="text-xs font-light opacity-60">2 days ago</span>
+					<div className="mt-2 flex items-center rounded-lg bg-bg-neutral p-4">
+						<SvgIcon icon="ic_file_audio" size={48} />
+						<div className="ml-2 flex flex-col text-gray">
+							<span className="font-medium">Witout Me</span>
+							<span className="text-xs">1.2GB·30 min ago </span>
+						</div>
+						<Button className="ml-4">Download</Button>
+					</div>
+				</div>
+			</div>
+
+			<div className="mt-8 flex">
+				<img className="h-10 w-10 rounded-full" src={faker.image.avatarGitHub()} alt="" />
+				<div className="ml-2">
+					<div>
+						<span className="font-medium">{faker.person.fullName()}</span>
+						<span className="text-xs font-light"> request a payment of </span>
+						<span className="font-medium">$3000</span>
+					</div>
+					<span className="text-xs font-light opacity-60">4 days ago</span>
+					<div className="mt-2">
+						<Space>
+							<Button type="primary">Pay</Button>
+							<Button>Refuse</Button>
+						</Space>
+					</div>
+				</div>
+			</div>
+
+			<div className="mt-8 flex">
+				<IconButton>
+					<SvgIcon icon="ic_order" size={30} />
+				</IconButton>
+				<div className="ml-2">
+					<div>
+						<span className="font-light">Your order is placed waiting for shipping</span>
+					</div>
+					<span className="text-xs font-light opacity-60">4 days ago</span>{" "}
+				</div>
+			</div>
+
+			<div className="mt-8 flex">
+				<IconButton>
+					<SvgIcon icon="ic_mail" size={30} />
+				</IconButton>
+				<div className="ml-2">
+					<div>
+						<span className="font-light">You have new mail</span>
+					</div>
+					<span className="text-xs font-light opacity-60">5 days ago</span>{" "}
+				</div>
+			</div>
+
+			<div className="mt-8 flex">
+				<IconButton>
+					<SvgIcon icon="ic_chat" size={30} />
+				</IconButton>
+				<div className="ml-2">
+					<div>
+						<span className="font-light">You have new message 5 unread message</span>
+					</div>
+					<span className="text-xs font-light opacity-60">7 days ago</span>
+				</div>
+			</div>
+
+			<div className="mt-8 flex">
+				<IconButton>
+					<SvgIcon icon="ic_delivery" size={30} />
+				</IconButton>
+				<div className="ml-2">
+					<div>
+						<span className="font-light">Delivery processing your order is being shipped</span>
+					</div>
+					<span className="text-xs font-light opacity-60">8 days ago</span>{" "}
+				</div>
+			</div>
+		</div>
+	);
+	const items: TabsProps["items"] = [
+		{
+			key: "1",
+			label: (
+				<div className="flex">
+					<span>All</span>
+					<Tag color="processing">22</Tag>
+				</div>
+			),
+			children: tabChildren,
+		},
+		{
+			key: "2",
+			label: (
+				<div className="flex">
+					<span>Unread</span>
+					<Tag color="error">12</Tag>
+				</div>
+			),
+			children: tabChildren,
+		},
+		{
+			key: "3",
+			label: (
+				<div className="flex">
+					<span>Archived</span>
+					<Tag color="green">10</Tag>
+				</div>
+			),
+			children: tabChildren,
+		},
+	];
+	return (
+		<div className="flex flex-col px-6">
+			<Tabs defaultActiveKey="1" items={items} />
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/layouts/_common/search-bar.tsx b/apps/react-admin/src/layouts/_common/search-bar.tsx
new file mode 100644
index 000000000..43744ebe1
--- /dev/null
+++ b/apps/react-admin/src/layouts/_common/search-bar.tsx
@@ -0,0 +1,252 @@
+import { Empty, Input, type InputRef, Modal, Tag } from "antd";
+import match from "autosuggest-highlight/match";
+import parse from "autosuggest-highlight/parse";
+import { type CSSProperties, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useBoolean, useEvent, useKeyPressEvent } from "react-use";
+import styled from "styled-components";
+
+import { IconButton, SvgIcon } from "@/components/icon";
+import Scrollbar from "@/components/scrollbar";
+import { useFlattenedRoutes, useRouter } from "@/router/hooks";
+import { themeVars } from "@/theme/theme.css";
+import { rgbAlpha } from "@/utils/theme";
+
+export default function SearchBar() {
+	const { t } = useTranslation();
+	const { replace } = useRouter();
+	const inputRef = useRef<InputRef>(null);
+	const listRef = useRef<HTMLDivElement>(null);
+
+	const [search, toggle] = useBoolean(false);
+
+	const flattenedRoutes = useFlattenedRoutes();
+
+	const activeStyle: CSSProperties = {
+		border: `1px dashed ${themeVars.colors.palette.primary.default}`,
+		backgroundColor: rgbAlpha(themeVars.colors.palette.primary.default, 0.1),
+	};
+
+	const [searchQuery, setSearchQuery] = useState("");
+	const [selectedItemIndex, setSelectedItemIndex] = useState(0);
+
+	const searchResult = useMemo(() => {
+		return flattenedRoutes.filter(
+			(item) =>
+				t(item.label).toLowerCase().includes(searchQuery.toLowerCase()) ||
+				item.key.toLowerCase().includes(searchQuery.toLowerCase()),
+		);
+	}, [searchQuery, t, flattenedRoutes]);
+
+	useEffect(() => {
+		setSelectedItemIndex(0);
+	}, [searchResult.length]);
+
+	const handleMetaK = (event: KeyboardEvent) => {
+		if (event.metaKey && event.key === "k") {
+			// https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/metaKey
+			handleOpen();
+		}
+	};
+	useEvent("keydown", handleMetaK);
+
+	useKeyPressEvent("ArrowUp", (event) => {
+		if (!search) return;
+		event.preventDefault();
+		let nextIndex = selectedItemIndex - 1;
+		if (nextIndex < 0) {
+			nextIndex = searchResult.length - 1;
+		}
+		setSelectedItemIndex(nextIndex);
+		scrollSelectedItemIntoView(nextIndex);
+	});
+
+	useKeyPressEvent("ArrowDown", (event) => {
+		if (!search) return;
+		event.preventDefault();
+		let nextIndex = selectedItemIndex + 1;
+		if (nextIndex > searchResult.length - 1) {
+			nextIndex = 0;
+		}
+		setSelectedItemIndex(nextIndex);
+		scrollSelectedItemIntoView(nextIndex);
+	});
+
+	useKeyPressEvent("Enter", (event) => {
+		if (!search || searchResult.length === 0) return;
+		event.preventDefault();
+		const selectItem = searchResult[selectedItemIndex].key;
+		if (selectItem) {
+			handleSelect(selectItem);
+			toggle(false);
+		}
+	});
+
+	useKeyPressEvent("Escape", () => {
+		handleCancel();
+	});
+
+	const handleOpen = () => {
+		toggle(true);
+		setSearchQuery("");
+		setSelectedItemIndex(0);
+	};
+	const handleCancel = () => {
+		toggle(false);
+	};
+	const handleAfterOpenChange = (open: boolean) => {
+		if (open) {
+			// auto focus
+			inputRef.current?.focus();
+		}
+	};
+
+	const scrollSelectedItemIntoView = (index: number) => {
+		if (listRef.current) {
+			const selectedItem = listRef.current.children[index];
+			selectedItem.scrollIntoView({
+				behavior: "smooth",
+				block: "center",
+			});
+		}
+	};
+
+	const handleHover = (index: number) => {
+		if (index === selectedItemIndex) return;
+		setSelectedItemIndex(index);
+	};
+
+	const handleSelect = (key: string) => {
+		replace(key);
+		handleCancel();
+	};
+
+	return (
+		<>
+			<div className="flex items-center justify-center">
+				<IconButton className="h-8 rounded-xl bg-hover py-2 text-xs font-bold" onClick={handleOpen}>
+					<div className="flex items-center justify-center gap-2">
+						<SvgIcon icon="ic-search" size="20" />
+						<span className="flex h-6 items-center justify-center rounded-md bg-common-white px-1.5 font-bold text-gray-800">
+							{" "}
+							⌘K{" "}
+						</span>
+					</div>
+				</IconButton>
+			</div>
+			<Modal
+				centered
+				keyboard
+				open={search}
+				onCancel={handleCancel}
+				closeIcon={false}
+				afterOpenChange={handleAfterOpenChange}
+				styles={{
+					body: {
+						height: "400px",
+						display: "flex",
+						flexDirection: "column",
+						justifyContent: "center",
+					},
+				}}
+				title={
+					<Input
+						ref={inputRef}
+						value={searchQuery}
+						onChange={(e) => setSearchQuery(e.target.value)}
+						placeholder="Search..."
+						variant="borderless"
+						autoFocus
+						prefix={<SvgIcon icon="ic-search" size="20" />}
+						suffix={
+							<IconButton className="h-6 rounded-md bg-hover text-xs" onClick={handleCancel}>
+								Esc
+							</IconButton>
+						}
+					/>
+				}
+				footer={
+					<div className="flex flex-wrap">
+						<div className="flex">
+							<Tag color="cyan">↑</Tag>
+							<Tag color="cyan">↓</Tag>
+							<span>to navigate</span>
+						</div>
+						<div className="flex">
+							<Tag color="cyan">↵</Tag>
+							<span>to select</span>
+						</div>
+						<div className="flex">
+							<Tag color="cyan">ESC</Tag>
+							<span>to close</span>
+						</div>
+					</div>
+				}
+			>
+				{searchResult.length === 0 ? (
+					<Empty />
+				) : (
+					<Scrollbar>
+						<div ref={listRef} className="py-2">
+							{searchResult.map(({ key, label }, index) => {
+								const partsTitle = parse(t(label), match(t(label), searchQuery));
+								const partsKey = parse(key, match(key, searchQuery));
+								return (
+									<StyledListItemButton
+										key={key}
+										style={index === selectedItemIndex ? activeStyle : {}}
+										onClick={() => handleSelect(key)}
+										onMouseMove={() => handleHover(index)}
+									>
+										<div className="flex justify-between">
+											<div>
+												<div className="font-medium">
+													{partsTitle.map((item) => (
+														<span
+															key={item.text}
+															style={{
+																color: item.highlight
+																	? themeVars.colors.palette.primary.default
+																	: themeVars.colors.text.primary,
+															}}
+														>
+															{item.text}
+														</span>
+													))}
+												</div>
+												<div className="text-xs">
+													{partsKey.map((item) => (
+														<span
+															key={item.text}
+															style={{
+																color: item.highlight
+																	? themeVars.colors.palette.primary.default
+																	: themeVars.colors.text.secondary,
+															}}
+														>
+															{item.text}
+														</span>
+													))}
+												</div>
+											</div>
+										</div>
+									</StyledListItemButton>
+								);
+							})}
+						</div>
+					</Scrollbar>
+				)}
+			</Modal>
+		</>
+	);
+}
+
+const StyledListItemButton = styled.div`
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  width: 100%;
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: ${themeVars.colors.text.secondary};
+`;
diff --git a/apps/react-admin/src/layouts/_common/setting-button.tsx b/apps/react-admin/src/layouts/_common/setting-button.tsx
new file mode 100644
index 000000000..50d41658f
--- /dev/null
+++ b/apps/react-admin/src/layouts/_common/setting-button.tsx
@@ -0,0 +1,421 @@
+import { CloseOutlined, LeftOutlined, QuestionCircleOutlined, RightOutlined } from "@ant-design/icons";
+import { Button, Card, Drawer, Switch, Tooltip } from "antd";
+import { m } from "framer-motion";
+import { type CSSProperties, useState } from "react";
+import { MdCircle } from "react-icons/md";
+import screenfull from "screenfull";
+
+import CyanBlur from "@/assets/images/background/cyan-blur.png";
+import RedBlur from "@/assets/images/background/red-blur.png";
+import { varHover } from "@/components/animate/variants/action";
+import { IconButton, SvgIcon } from "@/components/icon";
+import { useSettingActions, useSettings } from "@/store/settingStore";
+import { presetsColors } from "@/theme/tokens/color";
+
+import { themeVars } from "@/theme/theme.css";
+import { type ThemeColorPresets, ThemeLayout, ThemeMode } from "#/enum";
+
+/**
+ * App Setting
+ */
+export default function SettingButton() {
+	const [drawerOpen, setDrawerOpen] = useState(false);
+
+	const settings = useSettings();
+	const { themeMode, themeColorPresets, themeLayout, themeStretch, breadCrumb, multiTab, darkSidebar } = settings;
+	const { setSettings } = useSettingActions();
+
+	const setThemeMode = (themeMode: ThemeMode) => {
+		setSettings({
+			...settings,
+			themeMode,
+		});
+	};
+
+	const setThemeColorPresets = (themeColorPresets: ThemeColorPresets) => {
+		setSettings({
+			...settings,
+			themeColorPresets,
+		});
+	};
+
+	const setThemeLayout = (themeLayout: ThemeLayout) => {
+		setSettings({
+			...settings,
+			themeLayout,
+		});
+	};
+
+	const setThemeStretch = (themeStretch: boolean) => {
+		setSettings({
+			...settings,
+			themeStretch,
+		});
+	};
+
+	const setBreadCrumn = (checked: boolean) => {
+		setSettings({
+			...settings,
+			breadCrumb: checked,
+		});
+	};
+
+	const setMultiTab = (checked: boolean) => {
+		setSettings({
+			...settings,
+			multiTab: checked,
+		});
+	};
+
+	const setDarkSidebar = (checked: boolean) => {
+		setSettings({
+			...settings,
+			darkSidebar: checked,
+		});
+	};
+
+	const style: CSSProperties = {
+		backdropFilter: "blur(20px)",
+		backgroundImage: `url("${CyanBlur}"), url("${RedBlur}")`,
+		backgroundRepeat: "no-repeat, no-repeat",
+		backgroundColor: `rgba(${themeVars.colors.background.paperChannel}, 0.9)`,
+		backgroundPosition: "right top, left bottom",
+		backgroundSize: "50, 50%",
+	};
+
+	const [isFullscreen, setIsFullscreen] = useState(screenfull.isFullscreen);
+	const toggleFullScreen = () => {
+		if (screenfull.isEnabled) {
+			screenfull.toggle();
+			setIsFullscreen(!isFullscreen);
+		}
+	};
+
+	const layoutBackground = (layout: ThemeLayout) =>
+		themeLayout === layout
+			? `linear-gradient(135deg, ${themeVars.colors.background.neutral} 0%, ${themeVars.colors.palette.primary.default} 100%)`
+			: themeVars.colors.palette.gray[500];
+
+	return (
+		<>
+			<div className="flex items-center justify-center">
+				<m.div
+					animate={{
+						rotate: [0, drawerOpen ? 0 : 360],
+					}}
+					transition={{
+						duration: 12,
+						ease: "linear",
+						repeat: Number.POSITIVE_INFINITY,
+					}}
+					whileTap="tap"
+					whileHover="hover"
+					variants={varHover(1.05)}
+					onClick={() => setDrawerOpen(true)}
+				>
+					<IconButton className="h-10 w-10">
+						<SvgIcon icon="ic-setting" size="24" />
+					</IconButton>
+				</m.div>
+			</div>
+			<Drawer
+				placement="right"
+				title="Settings"
+				onClose={() => setDrawerOpen(false)}
+				open={drawerOpen}
+				closable={false}
+				width={280}
+				styles={{
+					body: { padding: 0 },
+					mask: { backgroundColor: "transparent" },
+				}}
+				style={style}
+				extra={
+					<IconButton onClick={() => setDrawerOpen(false)} className="h-9 w-9 hover:scale-105">
+						<CloseOutlined className="text-gray-400" />
+					</IconButton>
+				}
+				footer={
+					<Button type="dashed" block size="large" onClick={toggleFullScreen}>
+						<div className="flex items-center justify-center">
+							{isFullscreen ? (
+								<>
+									<SvgIcon
+										icon="ic-settings-exit-fullscreen"
+										color={themeVars.colors.palette.primary.default}
+										className="!m-0"
+									/>
+									<span className="ml-2">Exit FullScreen</span>
+								</>
+							) : (
+								<>
+									<SvgIcon icon="ic-settings-fullscreen" className="!m-0" />
+									<span className="ml-2 text-gray">FullScreen</span>
+								</>
+							)}
+						</div>
+					</Button>
+				}
+			>
+				<div className="flex flex-col gap-6 p-6">
+					{/* theme mode */}
+					<div>
+						<div className="mb-3 text-base font-semibold" style={{ color: themeVars.colors.text.secondary }}>
+							Mode
+						</div>
+						<div className="flex flex-row gap-4">
+							<Card
+								onClick={() => setThemeMode(ThemeMode.Light)}
+								className="flex h-20 w-full cursor-pointer items-center justify-center"
+							>
+								<SvgIcon
+									icon="ic-settings-mode-sun"
+									size="24"
+									color={themeMode === ThemeMode.Light ? themeVars.colors.palette.primary.default : ""}
+								/>
+							</Card>
+							<Card
+								onClick={() => setThemeMode(ThemeMode.Dark)}
+								className="flex h-20 w-full cursor-pointer items-center justify-center"
+							>
+								<SvgIcon
+									icon="ic-settings-mode-moon"
+									size="24"
+									color={themeMode === ThemeMode.Dark ? themeVars.colors.palette.primary.default : ""}
+								/>
+							</Card>
+						</div>
+					</div>
+
+					{/* theme layout */}
+					<div>
+						<div className="mb-3 text-base font-semibold" style={{ color: themeVars.colors.text.secondary }}>
+							Layout
+						</div>
+						<div className="grid grid-cols-3 gap-4">
+							<Card
+								onClick={() => setThemeLayout(ThemeLayout.Vertical)}
+								className="h-12 cursor-pointer"
+								style={{ flexGrow: 1, flexShrink: 0 }}
+								styles={{
+									body: {
+										padding: 0,
+										display: "flex",
+										justifyContent: "center",
+										alignItems: "center",
+										height: "100%",
+									},
+								}}
+							>
+								<div className="flex h-full w-7 flex-shrink-0 flex-col gap-1 p-1">
+									<div
+										className="h-2 w-2 flex-shrink-0 rounded"
+										style={{
+											background: layoutBackground(ThemeLayout.Vertical),
+										}}
+									/>
+									<div
+										className="h-1 w-full flex-shrink-0 rounded opacity-50"
+										style={{
+											background: layoutBackground(ThemeLayout.Vertical),
+										}}
+									/>
+									<div
+										className="h-1 max-w-[12px] flex-shrink-0 rounded opacity-20"
+										style={{
+											background: layoutBackground(ThemeLayout.Vertical),
+										}}
+									/>
+								</div>
+								<div className="h-full w-full flex-1 flex-grow p-1">
+									<div
+										className="h-full w-full rounded opacity-20"
+										style={{
+											background: layoutBackground(ThemeLayout.Vertical),
+										}}
+									/>
+								</div>
+							</Card>
+							<Card
+								onClick={() => setThemeLayout(ThemeLayout.Horizontal)}
+								className="h-12 cursor-pointer"
+								style={{ flexGrow: 1, flexShrink: 0 }}
+								styles={{
+									body: {
+										padding: 0,
+										display: "flex",
+										flexDirection: "column",
+										justifyContent: "center",
+										alignItems: "center",
+										height: "100%",
+									},
+								}}
+							>
+								<div className="flex h-4 w-full items-center gap-1  p-1">
+									<div
+										className="h-2 w-2 flex-shrink-0 rounded"
+										style={{
+											background: layoutBackground(ThemeLayout.Horizontal),
+										}}
+									/>
+									<div
+										className="h-1 w-4 flex-shrink-0 rounded opacity-50"
+										style={{
+											background: layoutBackground(ThemeLayout.Horizontal),
+										}}
+									/>
+									<div
+										className="h-1 w-3 flex-shrink-0 rounded opacity-20"
+										style={{
+											background: layoutBackground(ThemeLayout.Horizontal),
+										}}
+									/>
+								</div>
+								<div className="h-full w-full flex-1 flex-grow p-1">
+									<div
+										className="h-full w-full rounded opacity-20"
+										style={{
+											background: layoutBackground(ThemeLayout.Horizontal),
+										}}
+									/>
+								</div>
+							</Card>
+							<Card
+								onClick={() => setThemeLayout(ThemeLayout.Mini)}
+								className="h-12 cursor-pointer"
+								style={{ flexGrow: 1, flexShrink: 0 }}
+								styles={{
+									body: {
+										padding: 0,
+										display: "flex",
+										justifyContent: "center",
+										alignItems: "center",
+										height: "100%",
+									},
+								}}
+							>
+								<div className="flex h-full flex-shrink-0 flex-col gap-1 p-1">
+									<div
+										className="h-2 w-2 flex-shrink-0 rounded"
+										style={{ background: layoutBackground(ThemeLayout.Mini) }}
+									/>
+									<div
+										className="h-1 w-full flex-shrink-0 rounded opacity-50"
+										style={{ background: layoutBackground(ThemeLayout.Mini) }}
+									/>
+									<div
+										className="h-1 max-w-[12px] flex-shrink-0 rounded opacity-20"
+										style={{ background: layoutBackground(ThemeLayout.Mini) }}
+									/>
+								</div>
+								<div className="h-full w-full flex-1 flex-grow p-1">
+									<div
+										className="h-full w-full rounded opacity-20"
+										style={{ background: layoutBackground(ThemeLayout.Mini) }}
+									/>
+								</div>
+							</Card>
+						</div>
+					</div>
+
+					{/* theme stretch */}
+					<div>
+						<div className=" mb-3 text-base font-semibold" style={{ color: themeVars.colors.text.secondary }}>
+							<span className="mr-2">Stretch</span>
+							<Tooltip title="Only available at large resolutions > 1600px (xl)">
+								<QuestionCircleOutlined />
+							</Tooltip>
+						</div>
+
+						<Card
+							onClick={() => setThemeStretch(!themeStretch)}
+							className="flex h-20 w-full cursor-pointer items-center justify-center"
+							styles={{
+								body: {
+									width: "50%",
+									padding: 0,
+									display: "flex",
+									justifyContent: "center",
+									alignItems: "center",
+								},
+							}}
+						>
+							{themeStretch ? (
+								<div
+									className="flex w-full items-center justify-between"
+									style={{
+										color: themeVars.colors.palette.primary.default,
+										transition: "width 300ms 0ms",
+									}}
+								>
+									<LeftOutlined />
+									<div className="flex flex-grow border-b border-dashed border-border" />
+									<RightOutlined />
+								</div>
+							) : (
+								<div
+									className="flex w-1/2 items-center justify-between"
+									style={{
+										transition: "width 300ms 0ms",
+									}}
+								>
+									<RightOutlined />
+									<div className="flex-grow border-b border-dashed border-border" />
+									<LeftOutlined />
+								</div>
+							)}
+						</Card>
+					</div>
+
+					{/* theme presets */}
+					<div>
+						<div className="mb-3 text-base font-semibold" style={{ color: themeVars.colors.text.secondary }}>
+							Presets
+						</div>
+						<div className="grid grid-cols-3 gap-x-4 gap-y-3">
+							{Object.entries(presetsColors).map(([preset, color]) => (
+								<Card
+									key={preset}
+									className="flex h-12 w-full cursor-pointer items-center justify-center"
+									style={{
+										backgroundColor: themeColorPresets === preset ? `${color}14` : "",
+									}}
+									onClick={() => setThemeColorPresets(preset as ThemeColorPresets)}
+								>
+									<div style={{ color: color.default }}>
+										<MdCircle
+											style={{
+												fontSize: themeColorPresets === preset ? 24 : 12,
+											}}
+										/>
+									</div>
+								</Card>
+							))}
+						</div>
+					</div>
+
+					{/* Page config */}
+					<div>
+						<div className="mb-3 text-base font-semibold" style={{ color: themeVars.colors.text.secondary }}>
+							Page
+						</div>
+						<div className="flex flex-col gap-2">
+							<div className="flex items-center justify-between" style={{ color: themeVars.colors.text.disabled }}>
+								<div>BreadCrumb</div>
+								<Switch size="small" checked={breadCrumb} onChange={(checked) => setBreadCrumn(checked)} />
+							</div>
+							<div className="flex items-center justify-between" style={{ color: themeVars.colors.text.disabled }}>
+								<div>Multi Tab</div>
+								<Switch size="small" checked={multiTab} onChange={(checked) => setMultiTab(checked)} />
+							</div>
+							<div className="flex items-center justify-between" style={{ color: themeVars.colors.text.disabled }}>
+								<div>Dark Sidebar</div>
+								<Switch size="small" checked={darkSidebar} onChange={(checked) => setDarkSidebar(checked)} />
+							</div>
+						</div>
+					</div>
+				</div>
+			</Drawer>
+		</>
+	);
+}
diff --git a/apps/react-admin/src/layouts/dashboard/config.ts b/apps/react-admin/src/layouts/dashboard/config.ts
new file mode 100644
index 000000000..8497c4842
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/config.ts
@@ -0,0 +1,8 @@
+export const NAV_WIDTH = 260;
+export const NAV_COLLAPSED_WIDTH = 80;
+export const NAV_HORIZONTAL_HEIGHT = 48;
+
+export const HEADER_HEIGHT = 80;
+export const OFFSET_HEADER_HEIGHT = 64;
+
+export const MULTI_TABS_HEIGHT = 32;
diff --git a/apps/react-admin/src/layouts/dashboard/header.tsx b/apps/react-admin/src/layouts/dashboard/header.tsx
new file mode 100644
index 000000000..988e56949
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/header.tsx
@@ -0,0 +1,87 @@
+import { Drawer } from "antd";
+import { type CSSProperties, useState } from "react";
+
+import { IconButton, Iconify, SvgIcon } from "@/components/icon";
+import LocalePicker from "@/components/locale-picker";
+import Logo from "@/components/logo";
+import { useSettings } from "@/store/settingStore";
+
+import AccountDropdown from "../_common/account-dropdown";
+import BreadCrumb from "../_common/bread-crumb";
+import NoticeButton from "../_common/notice";
+import SearchBar from "../_common/search-bar";
+import SettingButton from "../_common/setting-button";
+
+import { themeVars } from "@/theme/theme.css";
+import { cn } from "@/utils";
+import { ThemeLayout } from "#/enum";
+import { HEADER_HEIGHT, NAV_COLLAPSED_WIDTH, NAV_WIDTH, OFFSET_HEADER_HEIGHT } from "./config";
+import NavVertical from "./nav/nav-vertical";
+
+type Props = {
+	offsetTop?: boolean;
+};
+export default function Header({ offsetTop = false }: Props) {
+	const [drawerOpen, setDrawerOpen] = useState(false);
+	const { themeLayout, breadCrumb } = useSettings();
+
+	const headerStyle: CSSProperties = {
+		borderBottom:
+			themeLayout === ThemeLayout.Horizontal
+				? `1px dashed rgba(${themeVars.colors.palette.gray["500Channel"]}, 0.2)`
+				: "",
+		backgroundColor: `rgba(${themeVars.colors.background.defaultChannel}, 0.9)`,
+		width: "100%",
+	};
+
+	return (
+		<>
+			<header
+				className={cn(themeLayout === ThemeLayout.Horizontal ? "relative" : "sticky top-0 right-0 left-auto")}
+				style={headerStyle}
+			>
+				<div
+					className="flex flex-grow items-center justify-between px-4 text-gray backdrop-blur xl:px-6 2xl:px-10"
+					style={{
+						height: offsetTop ? OFFSET_HEADER_HEIGHT : HEADER_HEIGHT,
+						transition: "height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+					}}
+				>
+					<div className="flex items-baseline">
+						{themeLayout !== ThemeLayout.Horizontal ? (
+							<IconButton onClick={() => setDrawerOpen(true)} className="h-10 w-10 md:hidden">
+								<SvgIcon icon="ic-menu" size="24" />
+							</IconButton>
+						) : (
+							<Logo />
+						)}
+						<div className="ml-4 hidden md:block">{breadCrumb ? <BreadCrumb /> : null}</div>
+					</div>
+
+					<div className="flex">
+						<SearchBar />
+						<LocalePicker />
+						<IconButton onClick={() => window.open("https://github.com/d3george/slash-admin")}>
+							<Iconify icon="mdi:github" size={24} />
+						</IconButton>
+						<IconButton onClick={() => window.open("https://discord.gg/fXemAXVNDa")}>
+							<Iconify icon="carbon:logo-discord" size={24} />
+						</IconButton>
+						<NoticeButton />
+						<SettingButton />
+						<AccountDropdown />
+					</div>
+				</div>
+			</header>
+			<Drawer
+				placement="left"
+				onClose={() => setDrawerOpen(false)}
+				open={drawerOpen}
+				closeIcon={false}
+				width={themeLayout === ThemeLayout.Mini ? NAV_COLLAPSED_WIDTH : NAV_WIDTH}
+			>
+				<NavVertical closeSideBarDrawer={() => setDrawerOpen(false)} />
+			</Drawer>
+		</>
+	);
+}
diff --git a/apps/react-admin/src/layouts/dashboard/index.tsx b/apps/react-admin/src/layouts/dashboard/index.tsx
new file mode 100644
index 000000000..dde5d6ff3
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/index.tsx
@@ -0,0 +1,72 @@
+import { Layout } from "antd";
+import { useScroll } from "framer-motion";
+import { type CSSProperties, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { CircleLoading } from "@/components/loading";
+import ProgressBar from "@/components/progress-bar";
+import { useSettings } from "@/store/settingStore";
+import { cn } from "@/utils";
+
+import Header from "./header";
+import Main from "./main";
+import Nav from "./nav";
+
+import { useResponsive } from "@/theme/hooks";
+import { ThemeLayout } from "#/enum";
+import { NAV_COLLAPSED_WIDTH, NAV_WIDTH } from "./config";
+
+function DashboardLayout() {
+	const { themeLayout } = useSettings();
+	const { screenMap } = useResponsive();
+
+	const mainEl = useRef<HTMLDivElement>(null);
+	const { scrollY } = useScroll({ container: mainEl });
+
+	/**
+	 *  Tracks if content is scrolled
+	 */
+	const [offsetTop, setOffsetTop] = useState(false);
+
+	const onOffSetTop = useCallback(() => {
+		scrollY.on("change", (scrollHeight) => {
+			setOffsetTop(scrollHeight > 0);
+		});
+	}, [scrollY]);
+
+	useEffect(() => {
+		onOffSetTop();
+	}, [onOffSetTop]);
+
+	const layoutClassName = useMemo(() => {
+		return cn("flex h-screen overflow-hidden", themeLayout === ThemeLayout.Horizontal ? "flex-col" : "flex-row");
+	}, [themeLayout]);
+
+	const secondLayoutStyle: CSSProperties = {
+		display: "flex",
+		flexDirection: "column",
+		transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+		paddingLeft: screenMap.md
+			? themeLayout === ThemeLayout.Horizontal
+				? 0
+				: themeLayout === ThemeLayout.Mini
+					? NAV_COLLAPSED_WIDTH
+					: NAV_WIDTH
+			: 0,
+	};
+
+	return (
+		<>
+			<ProgressBar />
+			<Layout className={layoutClassName}>
+				<Suspense fallback={<CircleLoading />}>
+					<Layout style={secondLayoutStyle}>
+						<Header offsetTop={themeLayout !== ThemeLayout.Horizontal && offsetTop} />
+						<Nav />
+						<Main ref={mainEl} offsetTop={offsetTop} />
+					</Layout>
+				</Suspense>
+			</Layout>
+		</>
+	);
+}
+export default DashboardLayout;
diff --git a/apps/react-admin/src/layouts/dashboard/main.tsx b/apps/react-admin/src/layouts/dashboard/main.tsx
new file mode 100644
index 000000000..b7c2f5192
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/main.tsx
@@ -0,0 +1,48 @@
+import { useSettings } from "@/store/settingStore";
+import { themeVars } from "@/theme/theme.css";
+import { cn } from "@/utils";
+import { Content } from "antd/es/layout/layout";
+import { type CSSProperties, forwardRef } from "react";
+import { Outlet } from "react-router";
+import { ThemeLayout } from "#/enum";
+import { MULTI_TABS_HEIGHT } from "./config";
+import MultiTabs from "./multi-tabs";
+import { MultiTabsProvider } from "./multi-tabs/providers/multi-tabs-provider";
+
+type Props = {
+	offsetTop?: boolean;
+};
+const Main = forwardRef<HTMLDivElement, Props>(({ offsetTop = false }, ref) => {
+	const { themeStretch, themeLayout, multiTab } = useSettings();
+
+	const mainStyle: CSSProperties = {
+		paddingTop: multiTab ? MULTI_TABS_HEIGHT : 0,
+		background: themeVars.colors.background.default,
+		transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+		width: "100%",
+	};
+
+	return (
+		<Content style={mainStyle} className="flex">
+			<div className="flex-grow overflow-auto size-full" ref={ref}>
+				<div
+					className={cn(
+						"m-auto size-full flex-grow sm:p-2",
+						themeStretch ? "" : "xl:max-w-screen-xl",
+						themeLayout === ThemeLayout.Horizontal ? "flex-col" : "flex-row",
+					)}
+				>
+					{multiTab ? (
+						<MultiTabsProvider>
+							<MultiTabs offsetTop={offsetTop} />
+						</MultiTabsProvider>
+					) : (
+						<Outlet />
+					)}
+				</div>
+			</div>
+		</Content>
+	);
+});
+
+export default Main;
diff --git a/apps/react-admin/src/layouts/dashboard/multi-tabs/components/tab-item.tsx b/apps/react-admin/src/layouts/dashboard/multi-tabs/components/tab-item.tsx
new file mode 100644
index 000000000..30b5add05
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/multi-tabs/components/tab-item.tsx
@@ -0,0 +1,115 @@
+// components/TabItem.tsx
+import { Dropdown, type MenuProps } from "antd";
+import { Iconify } from "@/components/icon";
+import { useTranslation } from "react-i18next";
+import { MultiTabOperation } from "#/enum";
+import type { TabItemProps } from "../types";
+import { useMultiTabsContext } from "../providers/multi-tabs-provider";
+import { useTabLabelRender } from "../hooks/use-tab-label-render";
+
+export function TabItem({ tab, isActive, isHovering, style, onClose, onMouseEnter, onMouseLeave }: TabItemProps) {
+	const { t } = useTranslation();
+	const { tabs, refreshTab, closeTab, closeOthersTab, closeLeft, closeRight, closeAll } = useMultiTabsContext();
+	const renderTabLabel = useTabLabelRender();
+
+	const menuItems: MenuProps["items"] = [
+		{
+			label: t(`sys.tab.${MultiTabOperation.REFRESH}`),
+			key: MultiTabOperation.REFRESH,
+			icon: <Iconify icon="mdi:reload" size={18} />,
+		},
+		{
+			label: t(`sys.tab.${MultiTabOperation.CLOSE}`),
+			key: MultiTabOperation.CLOSE,
+			icon: <Iconify icon="material-symbols:close" size={18} />,
+			disabled: tabs.length === 1,
+		},
+		{
+			type: "divider",
+		},
+		{
+			label: t(`sys.tab.${MultiTabOperation.CLOSELEFT}`),
+			key: MultiTabOperation.CLOSELEFT,
+			icon: <Iconify icon="material-symbols:tab-close-right-outline" size={18} className="rotate-180" />,
+			disabled: tabs.findIndex((t) => t.key === tab.key) === 0,
+		},
+		{
+			label: t(`sys.tab.${MultiTabOperation.CLOSERIGHT}`),
+			key: MultiTabOperation.CLOSERIGHT,
+			icon: <Iconify icon="material-symbols:tab-close-right-outline" size={18} />,
+			disabled: tabs.findIndex((t) => t.key === tab.key) === tabs.length - 1,
+		},
+		{
+			type: "divider",
+		},
+		{
+			label: t(`sys.tab.${MultiTabOperation.CLOSEOTHERS}`),
+			key: MultiTabOperation.CLOSEOTHERS,
+			icon: <Iconify icon="material-symbols:tab-close-outline" size={18} />,
+			disabled: tabs.length === 1,
+		},
+		{
+			label: t(`sys.tab.${MultiTabOperation.CLOSEALL}`),
+			key: MultiTabOperation.CLOSEALL,
+			icon: <Iconify icon="mdi:collapse-all-outline" size={18} />,
+		},
+	];
+
+	const menuClick = (menuInfo: any) => {
+		const { key, domEvent } = menuInfo;
+		domEvent.stopPropagation();
+
+		switch (key) {
+			case MultiTabOperation.REFRESH:
+				refreshTab(tab.key);
+				break;
+			case MultiTabOperation.CLOSE:
+				closeTab(tab.key);
+				break;
+			case MultiTabOperation.CLOSEOTHERS:
+				closeOthersTab(tab.key);
+				break;
+			case MultiTabOperation.CLOSELEFT:
+				closeLeft(tab.key);
+				break;
+			case MultiTabOperation.CLOSERIGHT:
+				closeRight(tab.key);
+				break;
+			case MultiTabOperation.CLOSEALL:
+				closeAll();
+				break;
+			default:
+				break;
+		}
+	};
+
+	return (
+		<Dropdown
+			trigger={["contextMenu"]}
+			menu={{
+				items: menuItems,
+				onClick: menuClick,
+			}}
+		>
+			<div
+				className="relative mx-px flex select-none items-center px-4 py-1"
+				style={style}
+				onMouseEnter={onMouseEnter}
+				onMouseLeave={onMouseLeave}
+			>
+				<div>{renderTabLabel(tab)}</div>
+				{!tab.hideTab && (tabs.length > 1 || isActive || isHovering) && (
+					<Iconify
+						icon="ion:close-outline"
+						size={18}
+						className="ml-2 cursor-pointer opacity-50"
+						onClick={(e) => {
+							e.stopPropagation();
+							onClose();
+						}}
+					/>
+				)}
+			</div>
+		</Dropdown>
+	);
+}
diff --git a/apps/react-admin/src/layouts/dashboard/multi-tabs/hooks/use-tab-label-render.tsx b/apps/react-admin/src/layouts/dashboard/multi-tabs/hooks/use-tab-label-render.tsx
new file mode 100644
index 000000000..b12e51da2
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/multi-tabs/hooks/use-tab-label-render.tsx
@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { USER_LIST } from "@/_mock/assets";
+import type { KeepAliveTab } from "../types";
+
+export function useTabLabelRender() {
+	const { t } = useTranslation();
+
+	const specialTabRenderMap = useMemo<Record<string, (tab: KeepAliveTab) => React.ReactNode>>(
+		() => ({
+			"sys.menu.system.user_detail": (tab: KeepAliveTab) => {
+				const userId = tab.params?.id;
+				const defaultLabel = t(tab.label);
+				if (userId) {
+					const user = USER_LIST.find((item) => item.id === userId);
+					return `${user?.username}-${defaultLabel}`;
+				}
+				return defaultLabel;
+			},
+		}),
+		[t],
+	);
+
+	const renderTabLabel = (tab: KeepAliveTab) => {
+		const specialRender = specialTabRenderMap[tab.label];
+		if (specialRender) {
+			return specialRender(tab);
+		}
+		return t(tab.label);
+	};
+
+	return renderTabLabel;
+}
diff --git a/apps/react-admin/src/layouts/dashboard/multi-tabs/hooks/use-tab-operations.ts b/apps/react-admin/src/layouts/dashboard/multi-tabs/hooks/use-tab-operations.ts
new file mode 100644
index 000000000..071cb8df2
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/multi-tabs/hooks/use-tab-operations.ts
@@ -0,0 +1,95 @@
+// hooks/useTabOperations.ts
+import { type Dispatch, type SetStateAction, useCallback } from "react";
+import { useRouter } from "@/router/hooks";
+import type { KeepAliveTab } from "../types";
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+
+export function useTabOperations(
+	tabs: KeepAliveTab[],
+	setTabs: Dispatch<SetStateAction<KeepAliveTab[]>>,
+	activeTabRoutePath: string,
+) {
+	const { push } = useRouter();
+
+	const closeTab = useCallback(
+		(path = activeTabRoutePath) => {
+			const tempTabs = [...tabs];
+			if (tempTabs.length === 1) return;
+
+			const deleteTabIndex = tempTabs.findIndex((item) => item.key === path);
+			if (deleteTabIndex === -1) return;
+
+			if (deleteTabIndex > 0) {
+				push(tempTabs[deleteTabIndex - 1].key);
+			} else {
+				push(tempTabs[deleteTabIndex + 1].key);
+			}
+
+			tempTabs.splice(deleteTabIndex, 1);
+			setTabs(tempTabs);
+		},
+		[activeTabRoutePath, push, tabs, setTabs],
+	);
+
+	const closeOthersTab = useCallback(
+		(path = activeTabRoutePath) => {
+			setTabs((prev) => prev.filter((item) => item.key === path));
+			if (path !== activeTabRoutePath) {
+				push(path);
+			}
+		},
+		[activeTabRoutePath, push, setTabs],
+	);
+
+	const closeAll = useCallback(() => {
+		setTabs([]);
+		push(HOMEPAGE);
+	}, [push, setTabs]);
+
+	const closeLeft = useCallback(
+		(path: string) => {
+			const currentTabIndex = tabs.findIndex((item) => item.key === path);
+			const newTabs = tabs.slice(currentTabIndex);
+			setTabs(newTabs);
+			push(path);
+		},
+		[push, tabs, setTabs],
+	);
+
+	const closeRight = useCallback(
+		(path: string) => {
+			const currentTabIndex = tabs.findIndex((item) => item.key === path);
+			const newTabs = tabs.slice(0, currentTabIndex + 1);
+			setTabs(newTabs);
+			push(path);
+		},
+		[push, tabs, setTabs],
+	);
+
+	const refreshTab = useCallback(
+		(path = activeTabRoutePath) => {
+			setTabs((prev) => {
+				const newTabs = [...prev];
+				const index = newTabs.findIndex((item) => item.key === path);
+				if (index >= 0) {
+					newTabs[index] = {
+						...newTabs[index],
+						timeStamp: new Date().getTime().toString(),
+					};
+				}
+				return newTabs;
+			});
+		},
+		[activeTabRoutePath, setTabs],
+	);
+
+	return {
+		closeTab,
+		closeOthersTab,
+		closeAll,
+		closeLeft,
+		closeRight,
+		refreshTab,
+	};
+}
diff --git a/apps/react-admin/src/layouts/dashboard/multi-tabs/hooks/use-tab-style.ts b/apps/react-admin/src/layouts/dashboard/multi-tabs/hooks/use-tab-style.ts
new file mode 100644
index 000000000..5242c86e5
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/multi-tabs/hooks/use-tab-style.ts
@@ -0,0 +1,38 @@
+import { useSettings } from "@/store/settingStore";
+import { useResponsive } from "@/theme/hooks";
+import { themeVars } from "@/theme/theme.css";
+import { type CSSProperties, useMemo } from "react";
+import { ThemeLayout } from "#/enum";
+import {
+	HEADER_HEIGHT,
+	MULTI_TABS_HEIGHT,
+	NAV_COLLAPSED_WIDTH,
+	NAV_HORIZONTAL_HEIGHT,
+	NAV_WIDTH,
+	OFFSET_HEADER_HEIGHT,
+} from "../../config";
+
+export function useMultiTabsStyle(offsetTop: boolean) {
+	const { themeLayout } = useSettings();
+	const { screenMap } = useResponsive();
+
+	return useMemo(() => {
+		const style: CSSProperties = {
+			position: "fixed",
+			top: offsetTop ? OFFSET_HEADER_HEIGHT - 2 : HEADER_HEIGHT,
+			right: 0,
+			height: MULTI_TABS_HEIGHT,
+			backgroundColor: `rgba(${themeVars.colors.background.defaultChannel}, 0.9)`,
+			transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+			width: "100%",
+		};
+
+		if (themeLayout === ThemeLayout.Horizontal) {
+			style.top = HEADER_HEIGHT + NAV_HORIZONTAL_HEIGHT - 2;
+		} else if (screenMap.md) {
+			style.width = `calc(100% - ${themeLayout === ThemeLayout.Vertical ? NAV_WIDTH : NAV_COLLAPSED_WIDTH}px`;
+		}
+
+		return style;
+	}, [themeLayout, offsetTop, screenMap.md]);
+}
diff --git a/apps/react-admin/src/layouts/dashboard/multi-tabs/index.tsx b/apps/react-admin/src/layouts/dashboard/multi-tabs/index.tsx
new file mode 100644
index 000000000..65db02434
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/multi-tabs/index.tsx
@@ -0,0 +1,189 @@
+import { useRouter } from "@/router/hooks";
+import { replaceDynamicParams } from "@/router/hooks/use-current-route-meta";
+import { themeVars } from "@/theme/theme.css";
+import { Tabs } from "antd";
+import { useEffect, useRef, useState } from "react";
+import { DragDropContext, Draggable, Droppable, type OnDragEndResponder } from "react-beautiful-dnd";
+import styled from "styled-components";
+import { TabItem } from "./components/tab-item";
+import { useMultiTabsStyle } from "./hooks/use-tab-style";
+import { useMultiTabsContext } from "./providers/multi-tabs-provider";
+import type { KeepAliveTab } from "./types";
+
+export default function MultiTabs({ offsetTop = false }: { offsetTop: boolean }) {
+	const scrollContainer = useRef<HTMLDivElement>(null);
+	const tabContentRef = useRef(null);
+
+	const [hoveringTabKey, setHoveringTabKey] = useState("");
+	const { tabs, activeTabRoutePath, setTabs, closeTab } = useMultiTabsContext();
+	const style = useMultiTabsStyle(offsetTop);
+	const { push } = useRouter();
+
+	const getTabStyle = (tab: KeepAliveTab) => {
+		const isActive = tab.key === activeTabRoutePath || tab.key === hoveringTabKey;
+
+		return {
+			borderRadius: "8px 8px 0 0",
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: `rgba(${themeVars.colors.palette.gray["500Channel"]}, 0.2)`,
+			color: isActive ? themeVars.colors.palette.primary.default : "inherit",
+			transition: "color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+		};
+	};
+
+	const tabItems = tabs.map((tab) => ({
+		key: tab.key,
+		label: (
+			<TabItem
+				tab={tab}
+				isActive={tab.key === activeTabRoutePath}
+				isHovering={tab.key === hoveringTabKey}
+				onMouseEnter={() => setHoveringTabKey(tab.key)}
+				onMouseLeave={() => setHoveringTabKey("")}
+				style={getTabStyle(tab)}
+				onClose={() => closeTab(tab.key)}
+			/>
+		),
+		children: (
+			<div ref={tabContentRef} key={tab.timeStamp}>
+				{tab.children}
+			</div>
+		),
+	}));
+
+	const onDragEnd: OnDragEndResponder = ({ destination, source }) => {
+		if (!destination) return;
+		if (destination.droppableId === source.droppableId && destination.index === source.index) {
+			return;
+		}
+
+		const newTabs = Array.from(tabs);
+		const [movedTab] = newTabs.splice(source.index, 1);
+		newTabs.splice(destination.index, 0, movedTab);
+
+		setTabs([...newTabs]);
+	};
+
+	const handleTabClick = ({ key, params = {} }: KeepAliveTab) => {
+		const tabKey = replaceDynamicParams(key, params);
+		push(tabKey);
+	};
+
+	useEffect(() => {
+		if (!scrollContainer.current) return;
+
+		const index = tabs.findIndex((tab) => tab.key === activeTabRoutePath);
+		const currentTabElement = scrollContainer.current.querySelector(`#tab-${index}`);
+		if (currentTabElement) {
+			currentTabElement.scrollIntoView({
+				block: "nearest",
+				behavior: "smooth",
+			});
+		}
+	}, [activeTabRoutePath, tabs]);
+
+	useEffect(() => {
+		const container = scrollContainer.current;
+		if (!container) return;
+
+		const handleWheel = (e: WheelEvent) => {
+			e.preventDefault();
+			container.scrollLeft += e.deltaY;
+		};
+
+		container.addEventListener("mouseenter", () => {
+			container.addEventListener("wheel", handleWheel);
+		});
+
+		container.addEventListener("mouseleave", () => {
+			container.removeEventListener("wheel", handleWheel);
+		});
+
+		return () => {
+			container.removeEventListener("wheel", handleWheel);
+		};
+	}, []);
+
+	const renderTabBar = () => (
+		<div style={style} className="z-20 w-full">
+			<DragDropContext onDragEnd={onDragEnd}>
+				<Droppable droppableId="tabs" direction="horizontal">
+					{(provided) => (
+						<div
+							ref={provided.innerRef}
+							{...provided.droppableProps}
+							className="flex w-full overflow-visible items-center h-[34px]"
+						>
+							<div ref={scrollContainer} className="hide-scrollbar flex w-full px-2 flex-shrink-0 items-center h-full">
+								{tabs.map((tab, index) => (
+									<div id={`tab-${index}`} key={tab.key} className="flex-shrink-0" onClick={() => handleTabClick(tab)}>
+										<Draggable key={tab.key} draggableId={tab.key} index={index}>
+											{(dragProvided) => (
+												<div
+													ref={dragProvided.innerRef}
+													{...dragProvided.draggableProps}
+													{...dragProvided.dragHandleProps}
+													className="w-auto"
+												>
+													{tabItems.find((item) => item.key === tab.key)?.label}
+												</div>
+											)}
+										</Draggable>
+									</div>
+								))}
+							</div>
+							{provided.placeholder}
+						</div>
+					)}
+				</Droppable>
+			</DragDropContext>
+		</div>
+	);
+
+	return (
+		<StyledMultiTabs>
+			<Tabs
+				size="small"
+				type="card"
+				tabBarGutter={4}
+				activeKey={activeTabRoutePath}
+				items={tabItems}
+				renderTabBar={renderTabBar}
+			/>
+		</StyledMultiTabs>
+	);
+}
+
+const StyledMultiTabs = styled.div`
+  height: 100%;
+  margin-top: 2px;
+  
+  .anticon {
+    margin: 0px !important;
+  }
+  
+  .ant-tabs {
+    height: 100%;
+    .ant-tabs-content {
+      height: 100%;
+    }
+    .ant-tabs-tabpane {
+      height: 100%;
+      & > div {
+        height: 100%;
+      }
+    }
+  }
+
+  .hide-scrollbar {
+    overflow: scroll;
+    flex-shrink: 0;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+`;
diff --git a/apps/react-admin/src/layouts/dashboard/multi-tabs/providers/multi-tabs-provider.tsx b/apps/react-admin/src/layouts/dashboard/multi-tabs/providers/multi-tabs-provider.tsx
new file mode 100644
index 000000000..d0643bd6b
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/multi-tabs/providers/multi-tabs-provider.tsx
@@ -0,0 +1,78 @@
+// MultiTabsProvider.tsx
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { isEmpty } from "ramda";
+import { useCurrentRouteMeta } from "@/router/hooks";
+import { replaceDynamicParams } from "@/router/hooks/use-current-route-meta";
+import { useTabOperations } from "../hooks/use-tab-operations";
+import type { MultiTabsContextType, KeepAliveTab } from "../types";
+
+const MultiTabsContext = createContext<MultiTabsContextType>({
+	tabs: [],
+	activeTabRoutePath: "",
+	setTabs: () => {},
+	closeTab: () => {},
+	closeOthersTab: () => {},
+	closeAll: () => {},
+	closeLeft: () => {},
+	closeRight: () => {},
+	refreshTab: () => {},
+});
+
+export function MultiTabsProvider({ children }: { children: React.ReactNode }) {
+	const [tabs, setTabs] = useState<KeepAliveTab[]>([]);
+	const currentRouteMeta = useCurrentRouteMeta();
+
+	const activeTabRoutePath = useMemo(() => {
+		if (!currentRouteMeta) return "";
+		const { key, params = {} } = currentRouteMeta;
+		return isEmpty(params) ? key : replaceDynamicParams(key, params);
+	}, [currentRouteMeta]);
+
+	const operations = useTabOperations(tabs, setTabs, activeTabRoutePath);
+
+	useEffect(() => {
+		if (!currentRouteMeta) return;
+
+		setTabs((prev) => {
+			const filtered = prev.filter((item) => !item.hideTab);
+
+			let { key } = currentRouteMeta;
+			const { outlet: children, params = {} } = currentRouteMeta;
+
+			if (!isEmpty(params)) {
+				key = replaceDynamicParams(key, params);
+			}
+
+			const isExisted = filtered.find((item) => item.key === key);
+			if (!isExisted) {
+				return [
+					...filtered,
+					{
+						...currentRouteMeta,
+						key,
+						children,
+						timeStamp: new Date().getTime().toString(),
+					},
+				];
+			}
+
+			return filtered;
+		});
+	}, [currentRouteMeta]);
+
+	const contextValue = useMemo(
+		() => ({
+			tabs,
+			activeTabRoutePath,
+			setTabs,
+			...operations,
+		}),
+		[tabs, activeTabRoutePath, operations],
+	);
+
+	return <MultiTabsContext.Provider value={contextValue}>{children}</MultiTabsContext.Provider>;
+}
+
+export function useMultiTabsContext() {
+	return useContext(MultiTabsContext);
+}
diff --git a/apps/react-admin/src/layouts/dashboard/multi-tabs/types.ts b/apps/react-admin/src/layouts/dashboard/multi-tabs/types.ts
new file mode 100644
index 000000000..4d493811a
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/multi-tabs/types.ts
@@ -0,0 +1,36 @@
+// types.ts
+import type { RouteMeta } from "#/router";
+import type { CSSProperties, ReactNode } from "react";
+import type { MenuProps } from "antd";
+
+export type KeepAliveTab = RouteMeta & {
+	children: ReactNode;
+	timeStamp?: string;
+};
+
+export type MultiTabsContextType = {
+	tabs: KeepAliveTab[];
+	activeTabRoutePath?: string;
+	setTabs: (tabs: KeepAliveTab[]) => void;
+	closeTab: (path?: string) => void;
+	closeOthersTab: (path?: string) => void;
+	closeAll: () => void;
+	closeLeft: (path: string) => void;
+	closeRight: (path: string) => void;
+	refreshTab: (path: string) => void;
+};
+
+export type TabItemProps = {
+	tab: KeepAliveTab;
+	isActive: boolean;
+	isHovering: boolean;
+	style: CSSProperties;
+	onClose: () => void;
+	onMouseEnter: () => void;
+	onMouseLeave: () => void;
+};
+
+export type TabDropdownProps = {
+	menuItems: MenuProps["items"];
+	menuClick: (menuInfo: any, tab: KeepAliveTab) => void;
+};
diff --git a/apps/react-admin/src/layouts/dashboard/nav/index.tsx b/apps/react-admin/src/layouts/dashboard/nav/index.tsx
new file mode 100644
index 000000000..27546ec7d
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/nav/index.tsx
@@ -0,0 +1,17 @@
+import { useSettings } from "@/store/settingStore";
+import { useResponsive } from "@/theme/hooks";
+
+import NavHorizontal from "./nav-horizontal";
+import NavVertical from "./nav-vertical";
+
+import { ThemeLayout } from "#/enum";
+
+export default function Nav() {
+	const { themeLayout } = useSettings();
+	const { screenMap } = useResponsive();
+
+	if (themeLayout === ThemeLayout.Horizontal) return <NavHorizontal />;
+
+	if (screenMap.md) return <NavVertical />;
+	return null;
+}
diff --git a/apps/react-admin/src/layouts/dashboard/nav/nav-horizontal.tsx b/apps/react-admin/src/layouts/dashboard/nav/nav-horizontal.tsx
new file mode 100644
index 000000000..15a85db29
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/nav/nav-horizontal.tsx
@@ -0,0 +1,51 @@
+import { Menu, type MenuProps } from "antd";
+import { useMemo } from "react";
+import { useNavigate } from "react-router";
+
+import { useFlattenedRoutes, usePathname, usePermissionRoutes, useRouteToMenuFn } from "@/router/hooks";
+import { menuFilter } from "@/router/utils";
+
+import { themeVars } from "@/theme/theme.css";
+import { NAV_HORIZONTAL_HEIGHT } from "../config";
+
+export default function NavHorizontal() {
+	const navigate = useNavigate();
+	const pathname = usePathname();
+
+	const routeToMenuFn = useRouteToMenuFn();
+	const permissionRoutes = usePermissionRoutes();
+	const flattenedRoutes = useFlattenedRoutes();
+
+	const menuList = useMemo(() => {
+		const menuRoutes = menuFilter(permissionRoutes);
+		return routeToMenuFn(menuRoutes);
+	}, [routeToMenuFn, permissionRoutes]);
+
+	const selectedKeys = useMemo(() => [pathname], [pathname]);
+
+	const onClick: MenuProps["onClick"] = ({ key }) => {
+		const nextLink = flattenedRoutes?.find((el) => el.key === key);
+		// Handle special case for external links in menu items
+		// For external links: skip internal routing, avoid adding new tab in current project,
+		// prevent selecting current route, and open link in new browser tab
+		if (nextLink?.hideTab && nextLink?.frameSrc) {
+			window.open(nextLink?.frameSrc, "_blank");
+			return;
+		}
+		navigate(key);
+	};
+
+	return (
+		<div className="w-screen" style={{ height: NAV_HORIZONTAL_HEIGHT }}>
+			<Menu
+				mode="horizontal"
+				items={menuList}
+				defaultOpenKeys={[]}
+				selectedKeys={selectedKeys}
+				onClick={onClick}
+				className="!border-none"
+				style={{ background: themeVars.colors.background.default }}
+			/>
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/layouts/dashboard/nav/nav-logo.tsx b/apps/react-admin/src/layouts/dashboard/nav/nav-logo.tsx
new file mode 100644
index 000000000..5c091a3dd
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/nav/nav-logo.tsx
@@ -0,0 +1,36 @@
+import Logo from "@/components/logo";
+import { useSettings } from "@/store/settingStore";
+import { cn } from "@/utils";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import { ThemeLayout } from "#/enum";
+import { HEADER_HEIGHT } from "../config";
+
+type Props = {
+	collapsed: boolean;
+	onToggle: () => void;
+};
+export default function NavLogo({ collapsed, onToggle }: Props) {
+	const { themeLayout } = useSettings();
+
+	return (
+		<div style={{ height: `${HEADER_HEIGHT}px` }} className="relative flex items-center justify-center py-4">
+			<div className="flex items-center">
+				<Logo />
+				{themeLayout !== ThemeLayout.Mini && <span className="ml-2 text-xl font-bold text-primary">Slash Admin</span>}
+			</div>
+			<div
+				onClick={onToggle}
+				onKeyDown={onToggle}
+				className={cn(
+					"absolute right-0 top-7 z-50 hidden h-6 w-6 translate-x-1/2 cursor-pointer select-none items-center justify-center rounded-full text-center md:flex border border-dashed border-border text-sm bg-bg-paper",
+				)}
+			>
+				{collapsed ? (
+					<RightOutlined className="text-xs text-text-disabled" />
+				) : (
+					<LeftOutlined className="text-xs text-text-disabled" />
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/layouts/dashboard/nav/nav-vertical.tsx b/apps/react-admin/src/layouts/dashboard/nav/nav-vertical.tsx
new file mode 100644
index 000000000..0e9d0a5aa
--- /dev/null
+++ b/apps/react-admin/src/layouts/dashboard/nav/nav-vertical.tsx
@@ -0,0 +1,113 @@
+import { Layout, Menu, type MenuProps } from "antd";
+import { useEffect, useMemo, useState } from "react";
+import { useMatches, useNavigate } from "react-router";
+
+import Scrollbar from "@/components/scrollbar";
+import { useFlattenedRoutes, usePathname, usePermissionRoutes, useRouteToMenuFn } from "@/router/hooks";
+import { menuFilter } from "@/router/utils";
+import { useSettingActions, useSettings } from "@/store/settingStore";
+
+import { NAV_WIDTH } from "../config";
+
+import NavLogo from "./nav-logo";
+
+import { themeVars } from "@/theme/theme.css";
+import { ThemeLayout, ThemeMode } from "#/enum";
+
+const { Sider } = Layout;
+
+type Props = {
+	closeSideBarDrawer?: () => void;
+};
+export default function NavVertical(props: Props) {
+	const navigate = useNavigate();
+	const matches = useMatches();
+	const pathname = usePathname();
+
+	const settings = useSettings();
+	const { themeLayout, themeMode, darkSidebar } = settings;
+	const { setSettings } = useSettingActions();
+
+	const routeToMenuFn = useRouteToMenuFn();
+	const permissionRoutes = usePermissionRoutes();
+	const flattenedRoutes = useFlattenedRoutes();
+
+	const collapsed = useMemo(() => themeLayout === ThemeLayout.Mini, [themeLayout]);
+
+	const menuList = useMemo(() => {
+		const menuRoutes = menuFilter(permissionRoutes);
+		return routeToMenuFn(menuRoutes);
+	}, [routeToMenuFn, permissionRoutes]);
+
+	const selectedKeys = useMemo(() => [pathname], [pathname]);
+
+	const [openKeys, setOpenKeys] = useState<string[]>([]);
+	// 首次加载时设置 openKeys
+	useEffect(() => {
+		if (!collapsed) {
+			const keys = matches
+				.filter((match) => match.pathname !== "/" && match.pathname !== pathname)
+				.map((match) => match.pathname);
+			setOpenKeys(keys);
+		}
+	}, [collapsed, matches, pathname]);
+
+	const handleToggleCollapsed = () => {
+		setSettings({
+			...settings,
+			themeLayout: collapsed ? ThemeLayout.Vertical : ThemeLayout.Mini,
+		});
+	};
+
+	const onClick: MenuProps["onClick"] = ({ key }) => {
+		const nextLink = flattenedRoutes?.find((e) => e.key === key);
+		if (nextLink?.hideTab && nextLink?.frameSrc) {
+			window.open(nextLink?.frameSrc, "_blank");
+			return;
+		}
+
+		navigate(key);
+		props?.closeSideBarDrawer?.();
+	};
+
+	const handleOpenChange: MenuProps["onOpenChange"] = (keys) => {
+		// 关闭时也触发一次，刚好设置为 []
+		setOpenKeys(keys);
+	};
+
+	const sidebarTheme = useMemo(() => {
+		if (themeMode === ThemeMode.Dark) {
+			return darkSidebar ? "light" : "dark";
+		}
+		return darkSidebar ? "dark" : "light";
+	}, [themeMode, darkSidebar]);
+
+	return (
+		<Sider
+			trigger={null}
+			collapsible
+			collapsed={collapsed}
+			width={NAV_WIDTH}
+			theme={sidebarTheme}
+			className="!fixed left-0 top-0 h-screen"
+			style={{
+				borderRight: `1px dashed rgba(${themeVars.colors.palette.gray["500Channel"]}, 0.2)`,
+			}}
+		>
+			<NavLogo collapsed={collapsed} onToggle={handleToggleCollapsed} />
+
+			<Scrollbar>
+				<Menu
+					mode="inline"
+					items={menuList}
+					theme={sidebarTheme}
+					selectedKeys={selectedKeys}
+					openKeys={openKeys}
+					onOpenChange={handleOpenChange}
+					className="!border-none"
+					onClick={onClick}
+				/>
+			</Scrollbar>
+		</Sider>
+	);
+}
diff --git a/apps/react-admin/src/layouts/simple/index.tsx b/apps/react-admin/src/layouts/simple/index.tsx
new file mode 100644
index 000000000..e6ffa8abd
--- /dev/null
+++ b/apps/react-admin/src/layouts/simple/index.tsx
@@ -0,0 +1,14 @@
+import type React from "react";
+import HeaderSimple from "../_common/header-simple";
+
+type Props = {
+	children: React.ReactNode;
+};
+export default function SimpleLayout({ children }: Props) {
+	return (
+		<div className="flex h-screen w-full flex-col text-text-base bg-bg">
+			<HeaderSimple />
+			{children}
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/locales/i18n.ts b/apps/react-admin/src/locales/i18n.ts
new file mode 100644
index 000000000..cd1c69714
--- /dev/null
+++ b/apps/react-admin/src/locales/i18n.ts
@@ -0,0 +1,38 @@
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+
+import { getStringItem } from "@/utils/storage";
+
+import en_US from "./lang/en_US";
+import zh_CN from "./lang/zh_CN";
+
+import { LocalEnum, StorageEnum } from "#/enum";
+
+const defaultLng = getStringItem(StorageEnum.I18N) || (LocalEnum.en_US as string);
+i18n
+	// detect user language
+	// learn more: https://github.com/i18next/i18next-browser-languageDetector
+	.use(LanguageDetector)
+	// pass the i18n instance to react-i18next.
+	.use(initReactI18next)
+	// init i18next
+	// for all options read: https://www.i18next.com/overview/configuration-options
+	.init({
+		debug: true,
+		nsSeparator: false, // 禁用冒号作为命名空间分隔符,abp中很多这样的
+		lng: defaultLng, // localstorage -> i18nextLng: en-US
+		fallbackLng: LocalEnum.en_US,
+		interpolation: {
+			escapeValue: false, // not needed for react as it escapes by default
+			prefix: "{",
+			suffix: "}",
+		},
+		resources: {
+			en_US: { translation: en_US },
+			zh_CN: { translation: zh_CN },
+		},
+	});
+
+export default i18n;
+export const { t } = i18n;
diff --git a/apps/react-admin/src/locales/lang/en_US/abp.json b/apps/react-admin/src/locales/lang/en_US/abp.json
new file mode 100644
index 000000000..9a77b967a
--- /dev/null
+++ b/apps/react-admin/src/locales/lang/en_US/abp.json
@@ -0,0 +1,82 @@
+{
+	"abp": {
+		"title": "Abp Framework",
+		"oauth": {
+			"twoFactor": {
+				"title": "Two Factor",
+				"authenticator": "Authenticator",
+				"emailAddress": "Email Address",
+				"phoneNumber": "Phone Number",
+				"getCode": "Get Code",
+				"code": "Code"
+			}
+		},
+		"manage": {
+			"title": "Manage",
+			"identity": {
+				"title": "Identity",
+				"user": "User",
+				"role": "Role",
+				"claimTypes": "Claim Types",
+				"securityLogs": "Security Logs",
+				"organizationUnits": "Organization Units",
+				"auditLogs": "Audit Logs",
+				"sessions": "Sessions"
+			},
+			"permissions": {
+				"title": "Permissions",
+				"groups": "Groups",
+				"definitions": "Definitions"
+			},
+			"settings": {
+				"title": "Settings",
+				"definitions": "Definitions",
+				"system": "System Settings"
+			},
+			"notifications": {
+				"title": "Notifications",
+				"myNotifilers": "My Notifilers"
+			}
+		},
+		"openiddict": {
+			"title": "OpenIddict",
+			"applications": "Applications",
+			"authorizations": "Authorizations",
+			"scopes": "Scopes",
+			"tokens": "Tokens"
+		},
+		"account": {
+			"title": "Account",
+			"settings": {
+				"title": "My Settings",
+				"basic": {
+					"title": "Basic Settings"
+				},
+				"security": {
+					"title": "Security Settings",
+					"unSet": "Not Set",
+					"verified": "Verified",
+					"unVerified": "Not Verified",
+					"email": "Email",
+					"password": "Password",
+					"passwordDesc": "Reset My Password",
+					"phoneNumber": "PhoneNumber"
+				},
+				"bindSettings": "Bind Settings",
+				"noticeSettings": "Notice Settings",
+				"authenticatorSettings": "Authenticator Settings",
+				"changeAvatar": "Change Avatar",
+				"sessionSettings": "Session Settings"
+			},
+			"profile": "My Profile"
+		},
+		"platform": {
+			"title": "Platform",
+			"messages": {
+				"title": "Message Manage",
+				"email": "Email Messages",
+				"sms": "Sms Messages"
+			}
+		}
+	}
+}
diff --git a/apps/react-admin/src/locales/lang/en_US/common.json b/apps/react-admin/src/locales/lang/en_US/common.json
new file mode 100644
index 000000000..3fb723cd8
--- /dev/null
+++ b/apps/react-admin/src/locales/lang/en_US/common.json
@@ -0,0 +1,22 @@
+{
+	"common": {
+		"okText": "OK",
+		"closeText": "Close",
+		"cancelText": "Cancel",
+		"loadingText": "Loading...",
+		"saveText": "Save",
+		"delText": "Delete",
+		"resetText": "Reset",
+		"searchText": "Search",
+		"queryText": "Search",
+
+		"inputText": "Please enter",
+		"chooseText": "Please choose",
+
+		"redo": "Refresh",
+		"back": "Back",
+
+		"light": "Light",
+		"dark": "Dark"
+	}
+}
diff --git a/apps/react-admin/src/locales/lang/en_US/component.json b/apps/react-admin/src/locales/lang/en_US/component.json
new file mode 100644
index 000000000..a6b60002d
--- /dev/null
+++ b/apps/react-admin/src/locales/lang/en_US/component.json
@@ -0,0 +1,122 @@
+{
+	"component": {
+		"localizable_input": {
+			"placeholder": "Select localized resources",
+			"resources": {
+				"fiexed": {
+					"group": "Define",
+					"label": "Fiexed",
+					"placeholder": "Please enter custom content"
+				},
+				"localization": {
+					"group": "Localization",
+					"placeholder": "Please select a name"
+				}
+			}
+		},
+		"extra_property_dictionary": {
+			"title": "Extra properties",
+			"key": "Key",
+			"value": "Value",
+			"actions": {
+				"title": "Actions",
+				"create": "Add",
+				"update": "Edit",
+				"delete": "Delete",
+				"clean": "Clean"
+			},
+			"itemWillBeDeleted": "{key} will be deleted!",
+			"validator": {
+				"duplicateKey": "A key of the same name has been added"
+			}
+		},
+		"value_type_nput": {
+			"type": {
+				"name": "Type",
+				"FREE_TEXT": {
+					"name": "Free Text"
+				},
+				"TOGGLE": {
+					"name": "Toggle"
+				},
+				"SELECTION": {
+					"name": "Selection",
+					"displayText": "Display Text",
+					"displayTextNotBeEmpty": "Display text cannot be empty",
+					"value": "value",
+					"duplicateKeyOrValue": "The name or value of the selection is not allowed to be repeated",
+					"itemsNotBeEmpty": "Selectable items cannot be empty",
+					"itemsNotFound": "The selection is not included in the optional list",
+					"actions": {
+						"title": "Actions",
+						"create": "Add",
+						"update": "Edit",
+						"delete": "Delete",
+						"clean": "Clean"
+					},
+					"modal": {
+						"title": "Selection"
+					}
+				}
+			},
+			"validator": {
+				"name": "Validator",
+				"isInvalidValue": "The value failed to pass {0}; check the validator options.",
+				"NULL": {
+					"name": "None"
+				},
+				"BOOLEAN": {
+					"name": "Boolean"
+				},
+				"NUMERIC": {
+					"name": "Numeric",
+					"minValue": "Min Value",
+					"maxValue": "Max Value"
+				},
+				"STRING": {
+					"name": "String",
+					"allowNull": "Allow Null",
+					"minLength": "Min Length",
+					"maxLength": "Max Length",
+					"regularExpression": "Regular Expression"
+				}
+			}
+		},
+		"simple_state_checking": {
+			"title": "State checking",
+			"actions": {
+				"create": "Add",
+				"update": "Edit",
+				"delete": "Delete",
+				"clean": "Clean"
+			},
+			"table": {
+				"name": "Name",
+				"properties": "Properties",
+				"actions": "Actions"
+			},
+			"form": {
+				"name": "State checking"
+			},
+			"requireAuthenticated": {
+				"title": "Require Authenticated"
+			},
+			"requireFeatures": {
+				"title": "Require Features",
+				"requiresAll": "Requires All",
+				"requiresAllDesc": "If checked, all selected features need to be enabled.",
+				"featureNames": "Required features"
+			},
+			"requireGlobalFeatures": {
+				"title": "Require Global Features",
+				"featureNames": "Required Global Features"
+			},
+			"requirePermissions": {
+				"title": "Require Permissions",
+				"requiresAll": "Requires All",
+				"requiresAllDesc": "If checked, you need to have all the selected permissions.",
+				"permissions": "Required Permissions"
+			}
+		}
+	}
+}
diff --git a/apps/react-admin/src/locales/lang/en_US/index.ts b/apps/react-admin/src/locales/lang/en_US/index.ts
new file mode 100644
index 000000000..d4e54820d
--- /dev/null
+++ b/apps/react-admin/src/locales/lang/en_US/index.ts
@@ -0,0 +1,13 @@
+import common from "./common.json";
+import sys from "./sys.json";
+import ui from "./ui.json";
+import abp from "./abp.json";
+import component from "./component.json";
+
+export default {
+	...common,
+	...sys,
+	...ui,
+	...abp,
+	...component,
+};
diff --git a/apps/react-admin/src/locales/lang/en_US/sys.json b/apps/react-admin/src/locales/lang/en_US/sys.json
new file mode 100644
index 000000000..99ac03767
--- /dev/null
+++ b/apps/react-admin/src/locales/lang/en_US/sys.json
@@ -0,0 +1,147 @@
+{
+	"sys": {
+		"api": {
+			"operationSuccess": "Operation Success",
+			"operationFailed": "Operation failed",
+			"errorTip": "Error Tip",
+			"successTip": "Success Tip",
+			"errorMessage": "The operation failed, the system is abnormal!",
+			"timeoutMessage": "Login timed out, please log in again!",
+			"apiTimeoutMessage": "The interface request timed out, please refresh the page and try again!",
+			"apiRequestFailed": "The interface request failed, please try again later!",
+			"networkException": "network anomaly",
+			"networkExceptionMsg": "Please check if your network connection is normal! The network is abnormal",
+
+			"errMsg401": "The user does not have permission (token, user name, password error)!",
+			"errMsg403": "The user is authorized, but access is forbidden!",
+			"errMsg404": "Network request error, the resource was not found!",
+			"errMsg405": "Network request error, request method not allowed!",
+			"errMsg408": "Network request timed out!",
+			"errMsg500": "Server error, please contact the administrator!",
+			"errMsg501": "The network is not implemented!",
+			"errMsg502": "Network Error!",
+			"errMsg503": "The service is unavailable, the server is temporarily overloaded or maintained!",
+			"errMsg504": "Network timeout!",
+			"errMsg505": "The http version does not support the request!"
+		},
+		"login": {
+			"backSignIn": "Back sign in",
+			"mobileSignInFormTitle": "Mobile sign in",
+			"qrSignInFormTitle": "Qr code sign in",
+			"signInFormTitle": "Sign in",
+			"signUpFormTitle": "Sign up",
+			"forgetFormTitle": "Reset password",
+
+			"signInPrimaryTitle": "Hi, Welcome Back",
+			"signInSecondTitle": "Backstage management system",
+			"signInTitle": "",
+			"signInDesc": "Enter your personal details and get started!",
+			"policy": "I agree to the xxx Privacy Policy",
+			"scanSign": "scanning the code to complete the login",
+			"forgetFormSecondTitle": "Please enter the email address associated with your account and We will email you a link to reset your password.",
+
+			"loginButton": "Sign in",
+			"registerButton": "Sign up",
+			"rememberMe": "Remember me",
+			"forgetPassword": "Forget Password?",
+			"otherSignIn": "Sign in with",
+			"sendSmsButton": "Send SMS code",
+			"sendSmsText": "Reacquire in {{second}}s",
+			"sendEmailButton": "Send Email",
+
+			"loginSuccessTitle": "Login successful",
+			"loginSuccessDesc": "Welcome back",
+
+			"accountPlaceholder": "Please input username",
+			"passwordPlaceholder": "Please input password",
+			"confirmPasswordPlaceholder": "Please input confirm password",
+			"emaildPlaceholder": "Please input email",
+			"smsPlaceholder": "Please input sms code",
+			"mobilePlaceholder": "Please input mobile",
+			"policyPlaceholder": "Register after checking",
+			"diffPwd": "The two passwords are inconsistent",
+
+			"userName": "Username",
+			"password": "Password",
+			"confirmPassword": "Confirm Password",
+			"email": "Email",
+			"smsCode": "SMS code",
+			"mobile": "Mobile",
+
+			"registerAndAgree": "By signing up, I agree to",
+			"termsOfService": " Terms of service ",
+			"privacyPolicy": " Privacy policy ",
+			"logout": "Logout"
+		},
+		"tab": {
+			"fullscreen": "FullScreen",
+			"refresh": "Refresh",
+			"close": "Close",
+			"closeOthers": "Close Others",
+			"closeAll": "Close All",
+			"closeLeft": "Close Left",
+			"closeRight": "Close Right"
+		},
+		"menu": {
+			"dashboard": "Dashboard",
+			"workbench": "Workbench",
+			"analysis": "Analysis",
+			"management": "Management",
+			"user": {
+				"index": "User",
+				"profile": "Profile",
+				"account": "Account"
+			},
+			"system": {
+				"index": "System",
+				"organization": "Organization",
+				"permission": "Permission",
+				"role": "Role",
+				"user": "User",
+				"user_detail": "User Detail"
+			},
+			"blog": "Blog",
+			"components": "Components",
+			"icon": "Icon",
+			"animate": "Animate",
+			"scroll": "Scroll",
+			"markdown": "Markdown",
+			"editor": "Editor",
+			"i18n": "Multi Language",
+			"upload": "Upload",
+			"chart": "Chart",
+			"toast": "Toast",
+			"functions": "Functions",
+			"clipboard": "Clipboard",
+			"token_expired": "Token Expired",
+			"menulevel": {
+				"index": "Menu Level",
+				"1a": "Menu Level 1a",
+				"1b": {
+					"index": "Menu Level 1b",
+					"2a": "Menu Level 2a",
+					"2b": {
+						"index": "Menu Level 2b",
+						"3a": "Menu Level 3a",
+						"3b": "Menu Level 3b"
+					}
+				}
+			},
+			"disabled": "Item Disabled",
+			"label": "Item Label",
+			"frame": "Item External",
+			"external_link": "External Link",
+			"iframe": "Iframe",
+			"blank": "Blank",
+			"calendar": "Calendar",
+			"kanban": "Kanban",
+			"error": {
+				"index": "Error Page",
+				"403": "403",
+				"404": "404",
+				"500": "500"
+			}
+		},
+		"docs": "Document"
+	}
+}
diff --git a/apps/react-admin/src/locales/lang/en_US/ui.json b/apps/react-admin/src/locales/lang/en_US/ui.json
new file mode 100644
index 000000000..c425cf0a8
--- /dev/null
+++ b/apps/react-admin/src/locales/lang/en_US/ui.json
@@ -0,0 +1,29 @@
+{
+	"ui": {
+		"fallback": {
+			"pageNotFound": "Oops! Page Not Found",
+			"pageNotFoundDesc": "Sorry, we couldn't find the page you were looking for.",
+			"forbidden": "Oops! Access Denied",
+			"forbiddenDesc": "Sorry, but you don't have permission to access this page.",
+			"internalError": "Oops! Something Went Wrong",
+			"internalErrorDesc": "Sorry, but the server encountered an error.",
+			"offline": "Offline Page",
+			"offlineError": "Oops! Network Error",
+			"offlineErrorDesc": "Sorry, can't connect to the internet. Check your connection.",
+			"comingSoon": "Coming Soon",
+			"http": {
+				"requestTimeout": "The request timed out. Please try again later.",
+				"networkError": "A network error occurred. Please check your internet connection and try again.",
+				"badRequest": "Bad Request. Please check your input and try again.",
+				"unauthorized": "Unauthorized. Please log in to continue.",
+				"forbidden": "Forbidden. You do not have permission to access this resource.",
+				"notFound": "Not Found. The requested resource could not be found.",
+				"internalServerError": "Internal Server Error. Something went wrong on our end. Please try again later."
+			}
+		},
+		"placeholder": {
+			"input": "Please enter",
+			"select": "Please select"
+		}
+	}
+}
diff --git a/apps/react-admin/src/locales/lang/zh_CN/abp.json b/apps/react-admin/src/locales/lang/zh_CN/abp.json
new file mode 100644
index 000000000..b19371222
--- /dev/null
+++ b/apps/react-admin/src/locales/lang/zh_CN/abp.json
@@ -0,0 +1,82 @@
+{
+	"abp": {
+		"title": "Abp框架",
+		"oauth": {
+			"twoFactor": {
+				"title": "二次认证",
+				"authenticator": "验证方式",
+				"emailAddress": "电子邮件",
+				"phoneNumber": "手机号码",
+				"getCode": "获取验证码",
+				"code": "验证码"
+			}
+		},
+		"manage": {
+			"title": "管理",
+			"identity": {
+				"title": "身份认证管理",
+				"user": "用户",
+				"role": "角色",
+				"claimTypes": "身份标识",
+				"securityLogs": "安全日志",
+				"organizationUnits": "组织机构",
+				"auditLogs": "审计日志",
+				"sessions": "会话管理"
+			},
+			"permissions": {
+				"title": "权限管理",
+				"groups": "权限分组",
+				"definitions": "权限定义"
+			},
+			"settings": {
+				"title": "设置管理",
+				"definitions": "设置定义",
+				"system": "系统设置"
+			},
+			"notifications": {
+				"title": "通知管理",
+				"myNotifilers": "我的通知"
+			}
+		},
+		"openiddict": {
+			"title": "OpenIddict",
+			"applications": "应用管理",
+			"authorizations": "授权管理",
+			"scopes": "范围管理",
+			"tokens": "授权令牌"
+		},
+		"account": {
+			"title": "账户管理",
+			"settings": {
+				"title": "个人设置",
+				"basic": {
+					"title": "基本设置"
+				},
+				"security": {
+					"title": "安全设置",
+					"unSet": "未设置",
+					"verified": "已验证",
+					"unVerified": "未验证",
+					"email": "电子邮件",
+					"password": "密码",
+					"passwordDesc": "重置我的密码",
+					"phoneNumber": "手机号码"
+				},
+				"bindSettings": "账号绑定",
+				"noticeSettings": "新消息通知",
+				"authenticatorSettings": "身份验证程序",
+				"changeAvatar": "更改头像",
+				"sessionSettings": "会话管理"
+			},
+			"profile": "个人中心"
+		},
+		"platform": {
+			"title": "平台管理",
+			"messages": {
+				"title": "消息管理",
+				"email": "邮件消息",
+				"sms": "短信消息"
+			}
+		}
+	}
+}
diff --git a/apps/react-admin/src/locales/lang/zh_CN/common.json b/apps/react-admin/src/locales/lang/zh_CN/common.json
new file mode 100644
index 000000000..62df8ab45
--- /dev/null
+++ b/apps/react-admin/src/locales/lang/zh_CN/common.json
@@ -0,0 +1,22 @@
+{
+	"common": {
+		"okText": "确认",
+		"closeText": "关闭",
+		"cancelText": "取消",
+		"loadingText": "加载中...",
+		"saveText": "保存",
+		"delText": "删除",
+		"resetText": "重置",
+		"searchText": "搜索",
+		"queryText": "查询",
+
+		"inputText": "请输入",
+		"chooseText": "请选择",
+
+		"redo": "刷新",
+		"back": "返回",
+
+		"light": "亮色主题",
+		"dark": "黑暗主题"
+	}
+}
diff --git a/apps/react-admin/src/locales/lang/zh_CN/component.json b/apps/react-admin/src/locales/lang/zh_CN/component.json
new file mode 100644
index 000000000..856042a26
--- /dev/null
+++ b/apps/react-admin/src/locales/lang/zh_CN/component.json
@@ -0,0 +1,122 @@
+{
+	"component": {
+		"localizable_input": {
+			"placeholder": "请选择本地化资源",
+			"resources": {
+				"fiexed": {
+					"group": "自定义",
+					"label": "固定内容",
+					"placeholder": "请输入自定义内容"
+				},
+				"localization": {
+					"group": "本地化",
+					"placeholder": "请选择名称"
+				}
+			}
+		},
+		"extra_property_dictionary": {
+			"title": "扩展属性",
+			"key": "名称",
+			"value": "键值",
+			"actions": {
+				"title": "操作",
+				"create": "新增",
+				"update": "编辑",
+				"delete": "删除",
+				"clean": "清除"
+			},
+			"validator": {
+				"duplicateKey": "已经添加了一个相同名称的键"
+			},
+			"itemWillBeDeleted": "{key} 将被删除!"
+		},
+		"value_type_nput": {
+			"type": {
+				"name": "类型",
+				"FREE_TEXT": {
+					"name": "自由文本"
+				},
+				"TOGGLE": {
+					"name": "切换"
+				},
+				"SELECTION": {
+					"name": "选择",
+					"displayText": "显示名称",
+					"displayTextNotBeEmpty": "显示名称不可为空",
+					"value": "选择项",
+					"duplicateKeyOrValue": "选择项的名称或值不允许重复",
+					"itemsNotBeEmpty": "可选择项列表不能为空",
+					"itemsNotFound": "选择项不包含在可选列表中",
+					"actions": {
+						"title": "操作",
+						"create": "新增",
+						"update": "编辑",
+						"delete": "删除",
+						"clean": "清除"
+					},
+					"modal": {
+						"title": "选择项"
+					}
+				}
+			},
+			"validator": {
+				"name": "验证器",
+				"isInvalidValue": "值未能通过 {0} 校验, 请检查验证器选项.",
+				"NULL": {
+					"name": "未定义"
+				},
+				"BOOLEAN": {
+					"name": "布尔类型"
+				},
+				"NUMERIC": {
+					"name": "数值类型",
+					"minValue": "最小值",
+					"maxValue": "最大值"
+				},
+				"STRING": {
+					"name": "字符类型",
+					"allowNull": "允许空值",
+					"minLength": "最小长度",
+					"maxLength": "最大长度",
+					"regularExpression": "正则表达式"
+				}
+			}
+		},
+		"simple_state_checking": {
+			"title": "状态检查",
+			"actions": {
+				"create": "新增",
+				"update": "编辑",
+				"delete": "删除",
+				"clean": "清除"
+			},
+			"table": {
+				"name": "名称",
+				"properties": "属性",
+				"actions": "操作"
+			},
+			"form": {
+				"name": "状态检查器"
+			},
+			"requireAuthenticated": {
+				"title": "需要用户认证"
+			},
+			"requireFeatures": {
+				"title": "检查所需功能",
+				"requiresAll": "要求所有",
+				"requiresAllDesc": "如果勾选,则需要启用所有选择的功能.",
+				"featureNames": "需要的功能"
+			},
+			"requireGlobalFeatures": {
+				"title": "检查全局功能",
+				"featureNames": "需要的全局功能"
+			},
+			"requirePermissions": {
+				"title": "检查所需权限",
+				"requiresAll": "要求所有",
+				"requiresAllDesc": "如果勾选,则需要拥有所有选择的权限.",
+				"permissions": "需要的权限"
+			}
+		}
+	}
+}
diff --git a/apps/react-admin/src/locales/lang/zh_CN/index.ts b/apps/react-admin/src/locales/lang/zh_CN/index.ts
new file mode 100644
index 000000000..d4e54820d
--- /dev/null
+++ b/apps/react-admin/src/locales/lang/zh_CN/index.ts
@@ -0,0 +1,13 @@
+import common from "./common.json";
+import sys from "./sys.json";
+import ui from "./ui.json";
+import abp from "./abp.json";
+import component from "./component.json";
+
+export default {
+	...common,
+	...sys,
+	...ui,
+	...abp,
+	...component,
+};
diff --git a/apps/react-admin/src/locales/lang/zh_CN/sys.json b/apps/react-admin/src/locales/lang/zh_CN/sys.json
new file mode 100644
index 000000000..1cf5e2c7d
--- /dev/null
+++ b/apps/react-admin/src/locales/lang/zh_CN/sys.json
@@ -0,0 +1,146 @@
+{
+	"sys": {
+		"api": {
+			"operationSuccess": "操作成功",
+			"operationFailed": "操作失败",
+			"errorTip": "错误提示",
+			"successTip": "成功提示",
+			"errorMessage": "操作失败,系统异常!",
+			"timeoutMessage": "登录超时,请重新登录!",
+			"apiTimeoutMessage": "接口请求超时,请刷新页面重试!",
+			"apiRequestFailed": "请求出错，请稍候重试",
+			"networkException": "网络异常",
+			"networkExceptionMsg": "网络异常，请检查您的网络连接是否正常!",
+
+			"errMsg401": "用户没有权限（令牌、用户名、密码错误）!",
+			"errMsg403": "用户得到授权，但是访问是被禁止的。!",
+			"errMsg404": "网络请求错误,未找到该资源!",
+			"errMsg405": "网络请求错误,请求方法未允许!",
+			"errMsg408": "网络请求超时!",
+			"errMsg500": "服务器错误,请联系管理员!",
+			"errMsg501": "网络未实现!",
+			"errMsg502": "网络错误!",
+			"errMsg503": "服务不可用，服务器暂时过载或维护!",
+			"errMsg504": "网络超时!",
+			"errMsg505": "http版本不支持该请求!"
+		},
+		"login": {
+			"backSignIn": "返回",
+			"signInFormTitle": "登录",
+			"mobileSignInFormTitle": "手机登录",
+			"qrSignInFormTitle": "二维码登录",
+			"signUpFormTitle": "注册",
+			"forgetFormTitle": "重置密码",
+
+			"signInPrimaryTitle": "欢迎回来",
+			"signInSecondTitle": "开箱即用的中后台管理系统",
+			"signInDesc": "输入您的个人详细信息开始使用！",
+			"policy": "我同意xxx隐私政策",
+			"scanSign": "扫码后点击'确认'，即可完成登录",
+			"forgetFormSecondTitle": "请输入与您的帐户关联的电子邮件地址，我们将通过电子邮件向您发送重置密码的链接。",
+
+			"loginButton": "登录",
+			"registerButton": "注册",
+			"rememberMe": "记住我",
+			"forgetPassword": "忘记密码?",
+			"otherSignIn": "其他登录方式",
+			"sendSmsButton": "发送验证码",
+			"sendSmsText": "{{second}}秒后重新获取",
+			"sendEmailButton": "发送邮件",
+
+			"loginSuccessTitle": "登录成功",
+			"loginSuccessDesc": "欢迎回来",
+
+			"accountPlaceholder": "请输入账号",
+			"passwordPlaceholder": "请输入密码",
+			"confirmPasswordPlaceholder": "请输入确认密码",
+			"emaildPlaceholder": "请输入邮箱",
+			"smsPlaceholder": "请输入验证码",
+			"mobilePlaceholder": "请输入手机号码",
+			"policyPlaceholder": "勾选后才能注册",
+			"diffPwd": "两次输入密码不一致",
+
+			"userName": "账号",
+			"password": "密码",
+			"confirmPassword": "确认密码",
+			"email": "邮箱",
+			"smsCode": "短信验证码",
+			"mobile": "手机号码",
+
+			"registerAndAgree": "注册即我同意",
+			"termsOfService": " 服务条款 ",
+			"privacyPolicy": " 隐私政策 ",
+			"logout": "退出"
+		},
+		"tab": {
+			"fullscreen": "内容全屏",
+			"refresh": "刷新",
+			"close": "关闭标签页",
+			"closeOthers": "关闭其它标签页",
+			"closeAll": "关闭所有标签页",
+			"closeLeft": "关闭左侧标签页",
+			"closeRight": "关闭右侧标签页"
+		},
+		"menu": {
+			"dashboard": "仪表",
+			"workbench": "工作台",
+			"analysis": "分析",
+			"management": "管理",
+			"user": {
+				"index": "用户",
+				"profile": "个人资料",
+				"account": "账户"
+			},
+			"system": {
+				"index": "系统",
+				"organization": "组织",
+				"permission": "权限",
+				"role": "角色",
+				"user": "用户",
+				"user_detail": "用户详情"
+			},
+			"blog": "博客",
+			"components": "组件",
+			"icon": "图标",
+			"animate": "动画",
+			"scroll": "滚动",
+			"markdown": "Markdown",
+			"editor": "富文本",
+			"i18n": "多语言",
+			"upload": "上传",
+			"chart": "图表",
+			"toast": "Toast",
+			"functions": "功能",
+			"clipboard": "剪贴板",
+			"token_expired": "Token失效",
+			"menulevel": {
+				"index": "多级菜单",
+				"1a": "多级菜单 1a",
+				"1b": {
+					"index": "多级菜单 1b",
+					"2a": "多级菜单 2a",
+					"2b": {
+						"index": "多级菜单 2b",
+						"3a": "多级菜单 3a",
+						"3b": "多级菜单 3b"
+					}
+				}
+			},
+			"disabled": "项目禁用",
+			"label": "项目标签",
+			"frame": "项目外部链接",
+			"external_link": "外链",
+			"iframe": "内嵌",
+			"blank": "空白",
+			"calendar": "日历",
+			"kanban": "看板",
+			"error": {
+				"index": "异常页",
+				"403": "403",
+				"404": "404",
+				"500": "500"
+			}
+		},
+		"docs": "文档"
+	}
+}
diff --git a/apps/react-admin/src/locales/lang/zh_CN/ui.json b/apps/react-admin/src/locales/lang/zh_CN/ui.json
new file mode 100644
index 000000000..ac007a3e6
--- /dev/null
+++ b/apps/react-admin/src/locales/lang/zh_CN/ui.json
@@ -0,0 +1,30 @@
+{
+	"ui": {
+		"fallback": {
+			"comingSoon": "即将推出",
+			"forbidden": "哎呀！访问被拒绝",
+			"forbiddenDesc": "抱歉，您没有权限访问此页面。",
+			"http": {
+				"badRequest": "请求错误。请检查您的输入并重试。",
+				"forbidden": "禁止访问, 您没有权限访问此资源。",
+				"internalServerError": "内部服务器错误，请稍后再试。",
+				"networkError": "网络异常，请检查您的网络连接后重试。",
+				"notFound": "未找到, 请求的资源不存在。",
+				"requestTimeout": "请求超时，请稍后再试。",
+				"unauthorized": "登录认证过期，请重新登录后继续。"
+			},
+			"internalError": "哎呀！出错了",
+			"internalErrorDesc": "抱歉，服务器遇到错误。",
+			"offline": "离线页面",
+			"offlineError": "哎呀！网络错误",
+			"offlineErrorDesc": "抱歉，无法连接到互联网，请检查您的网络连接并重试。",
+			"pageNotFound": "哎呀！未找到页面",
+			"pageNotFoundDesc": "抱歉，我们无法找到您要找的页面。"
+		},
+		"placeholder": {
+			"input": "请输入",
+			"select": "请选择"
+		},
+		"ui.fallback.http.badRequest": "测试去哪里"
+	}
+}
diff --git a/apps/react-admin/src/main.tsx b/apps/react-admin/src/main.tsx
new file mode 100644
index 000000000..cf9b2d7e0
--- /dev/null
+++ b/apps/react-admin/src/main.tsx
@@ -0,0 +1,69 @@
+// react-query
+import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
+// vercel analytics
+import { Analytics } from "@vercel/analytics/react";
+// react
+import { Suspense } from "react";
+import ReactDOM from "react-dom/client";
+// helmet
+import { HelmetProvider } from "react-helmet-async";
+//
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import "virtual:svg-icons-register";
+// mock api
+import worker from "./_mock";
+// i18n
+import "./locales/i18n";
+// css
+import "./global.css";
+import "./theme/theme.css";
+
+import { toast } from "sonner";
+
+// root component
+import App from "./App";
+
+const charAt = `
+    ███████╗██╗      █████╗ ███████╗██╗  ██╗ 
+    ██╔════╝██║     ██╔══██╗██╔════╝██║  ██║
+    ███████╗██║     ███████║███████╗███████║
+    ╚════██║██║     ██╔══██║╚════██║██╔══██║
+    ███████║███████╗██║  ██║███████║██║  ██║
+    ╚══════╝╚══════╝╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝
+  `;
+console.info(`%c${charAt}`, "color: #5BE49B");
+
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			retry: 3,
+			gcTime: 300_000,
+			staleTime: 10_1000,
+			refetchOnWindowFocus: false,
+			refetchOnReconnect: false,
+			refetchOnMount: false,
+		},
+	},
+	//https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose
+	queryCache: new QueryCache({
+		onError: (error) => toast.error(`Something went wrong: ${error.message}`),
+	}),
+});
+
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+
+root.render(
+	<HelmetProvider>
+		<QueryClientProvider client={queryClient}>
+			<ReactQueryDevtools initialIsOpen={false} />
+			<Suspense>
+				<Analytics />
+
+				<App />
+			</Suspense>
+		</QueryClientProvider>
+	</HelmetProvider>,
+);
+
+// 🥵 start service worker mock in development mode
+// worker.start({ onUnhandledRequest: "bypass" });
diff --git a/apps/react-admin/src/pages/account/my-setting.tsx b/apps/react-admin/src/pages/account/my-setting.tsx
new file mode 100644
index 000000000..6242e099a
--- /dev/null
+++ b/apps/react-admin/src/pages/account/my-setting.tsx
@@ -0,0 +1,154 @@
+import { useState, useEffect, lazy } from "react";
+import { Card, Menu, Modal } from "antd";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { UpdateProfileDto } from "#/account/profile";
+import { useUserActions, useUserInfo } from "@/store/userStore";
+import { getApi, updateApi } from "@/api/account/profile";
+import { toast } from "sonner";
+import { useSearchParams } from "react-router";
+
+// Lazy load components
+const AuthenticatorSettings = lazy(() => import("@/components/abp/account/authenticator-settings"));
+const BasicSettings = lazy(() => import("@/components/abp/account/basic-settings"));
+const BindSettings = lazy(() => import("@/components/abp/account/bind-settings"));
+const SecuritySettings = lazy(() => import("@/components/abp/account/security-settings"));
+const SessionSettings = lazy(() => import("@/components/abp/account/session-settings"));
+const NoticeSettings = lazy(() => import("@/components/abp/account/notice-settings"));
+const EmailConfirmModal = lazy(() => import("@/components/abp/account/email-confirm-modal"));
+
+const MySetting = () => {
+	const { t: $t } = useTranslation();
+	const [searchParams] = useSearchParams();
+	const [modal, contextHolder] = Modal.useModal();
+	const userInfo = useUserInfo();
+	const { fetchAndSetUser } = useUserActions();
+	const queryClient = useQueryClient();
+
+	const [selectedKey, setSelectedKey] = useState<string>("basic");
+	const [emailConfirmModalVisible, setEmailConfirmModalVisible] = useState(false);
+
+	const menuItems = [
+		{ key: "basic", label: $t("abp.account.settings.basic.title") },
+		{ key: "security", label: $t("abp.account.settings.security.title") },
+		{ key: "bind", label: $t("abp.account.settings.bindSettings") },
+		{ key: "session", label: $t("abp.account.settings.sessionSettings") },
+		{ key: "notice", label: $t("abp.account.settings.noticeSettings") },
+		{ key: "authenticator", label: $t("abp.account.settings.authenticatorSettings") },
+	];
+
+	// Fetch profile data
+	const { data: profile } = useQuery({
+		queryKey: ["profile"],
+		queryFn: getApi,
+	});
+
+	// Update profile mutation
+	const { mutateAsync: updateProfile } = useMutation({
+		mutationFn: updateApi,
+		onSuccess: async () => {
+			toast.success($t("AbpAccount.PersonalSettingsChangedConfirmationModalTitle"));
+			queryClient.invalidateQueries({ queryKey: ["profile"] }); //refresh user info
+			await fetchAndSetUser();
+		},
+	});
+
+	useEffect(() => {
+		const confirmToken = searchParams.get("confirmToken");
+		if (confirmToken && profile) {
+			setEmailConfirmModalVisible(true);
+		}
+	}, [searchParams, profile]);
+
+	const handleUpdateProfile = (input: UpdateProfileDto) => {
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpAccount.PersonalSettingsSaved"),
+			centered: true,
+			onOk: () => updateProfile(input),
+		});
+	};
+
+	const handleChangePassword = () => {
+		// TODO: Implement password change
+		console.warn("onChangePassword not implemented yet!");
+	};
+
+	const handleChangePhoneNumber = () => {
+		// TODO: Implement phone number change
+		console.warn("onChangePhoneNumber not implemented yet!");
+	};
+
+	const renderContent = () => {
+		switch (selectedKey) {
+			case "basic":
+				return profile && <BasicSettings profile={profile} onSubmit={handleUpdateProfile} />;
+			case "bind":
+				return <BindSettings />;
+			case "security":
+				return (
+					userInfo && (
+						<SecuritySettings
+							userInfo={{
+								email: userInfo.email ?? "",
+								emailVerified: userInfo.emailVerified,
+								name: userInfo.name,
+								phoneNumber: userInfo.phoneNumber,
+								phoneNumberVerified: userInfo.phoneNumberVerified,
+								preferredUsername: userInfo.username ?? "",
+								role: userInfo.roles ?? [],
+								sub: userInfo.userId ?? "",
+								uniqueName: userInfo.username ?? "",
+								givenName: userInfo.givenName ?? "",
+							}}
+							onChangePassword={handleChangePassword}
+							onChangePhoneNumber={handleChangePhoneNumber}
+						/>
+					)
+				);
+			case "notice":
+				return <NoticeSettings />;
+			case "authenticator":
+				return <AuthenticatorSettings />;
+			case "session":
+				return <SessionSettings />;
+			default:
+				return null;
+		}
+	};
+
+	return (
+		<div>
+			{contextHolder}
+			<Card>
+				<div className="flex">
+					<div className="basis-1/6">
+						<Menu
+							selectedKeys={[selectedKey]}
+							items={menuItems}
+							mode="inline"
+							onSelect={({ key }) => setSelectedKey(key)}
+						/>
+					</div>
+					<div className="basis-5/6 overflow-hidden">{renderContent()}</div>
+				</div>
+			</Card>
+
+			<EmailConfirmModal
+				visible={emailConfirmModalVisible}
+				initialState={{
+					email: profile?.email || "",
+					confirmToken: searchParams.get("confirmToken") || "",
+					userId: searchParams.get("userId") || "",
+					returnUrl: searchParams.get("returnUrl") || "",
+				}}
+				onClose={() => setEmailConfirmModalVisible(false)}
+				onSuccess={async () => {
+					await fetchAndSetUser();
+				}}
+			/>
+		</div>
+	);
+};
+
+export default MySetting;
diff --git a/apps/react-admin/src/pages/components/animate/control-panel.tsx b/apps/react-admin/src/pages/components/animate/control-panel.tsx
new file mode 100644
index 000000000..b14862eb8
--- /dev/null
+++ b/apps/react-admin/src/pages/components/animate/control-panel.tsx
@@ -0,0 +1,47 @@
+import { themeVars } from "@/theme/theme.css";
+import { Card } from "antd";
+
+type Props = {
+	variantKey: {
+		type: string;
+		values: string[];
+	}[];
+	selectedVariant: string;
+	onChangeVarient: (varient: string) => void;
+};
+export default function ControlPanel({ variantKey, selectedVariant, onChangeVarient }: Props) {
+	const selectedStyle = (variantKey: string) => {
+		return variantKey === selectedVariant
+			? {
+					backgroundColor: themeVars.colors.palette.primary.default,
+					color: themeVars.colors.text.primary,
+				}
+			: {};
+	};
+	return (
+		<Card className="h-[480px] overflow-y-scroll">
+			{variantKey.map((item) => (
+				<div key={item.type}>
+					<div className="text-xs font-medium">{item.type.toUpperCase()}</div>
+					<ul className="mb-4 ml-2 mt-2 text-gray-600">
+						{item.values.map((item) => (
+							<li
+								key={item}
+								className="m-2 cursor-pointer rounded-md p-2"
+								onClick={() => onChangeVarient(item)}
+								onKeyDown={(e) => {
+									if (e.key === "Enter") {
+										onChangeVarient(item);
+									}
+								}}
+								style={selectedStyle(item)}
+							>
+								{item}
+							</li>
+						))}
+					</ul>
+				</div>
+			))}
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/animate/index.tsx b/apps/react-admin/src/pages/components/animate/index.tsx
new file mode 100644
index 000000000..99a5248b2
--- /dev/null
+++ b/apps/react-admin/src/pages/components/animate/index.tsx
@@ -0,0 +1,26 @@
+import { themeVars } from "@/theme/theme.css";
+import { Tabs, type TabsProps, Typography } from "antd";
+import BackgroundView from "./views/background";
+import Inview from "./views/inview";
+import ScrollView from "./views/scroll";
+
+export default function AnimatePage() {
+	const TABS: TabsProps["items"] = [
+		{ key: "inview", label: "In View", children: <Inview /> },
+		{ key: "scroll", label: "Scroll", children: <ScrollView /> },
+		{ key: "background", label: "Background", children: <BackgroundView /> },
+	];
+
+	return (
+		<>
+			<Typography.Link
+				href="https://www.framer.com/motion/"
+				style={{ color: themeVars.colors.palette.primary.default }}
+				className="mb-4 block"
+			>
+				https://www.framer.com/motion/
+			</Typography.Link>
+			<Tabs items={TABS} type="card" />
+		</>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/animate/views/background/container.tsx b/apps/react-admin/src/pages/components/animate/views/background/container.tsx
new file mode 100644
index 000000000..d4d126d35
--- /dev/null
+++ b/apps/react-admin/src/pages/components/animate/views/background/container.tsx
@@ -0,0 +1,31 @@
+import { m } from "framer-motion";
+import { useMemo } from "react";
+
+import Cover3 from "@/assets/images/cover/cover_3.jpg";
+import MotionContainer from "@/components/animate/motion-container";
+import { getVariant } from "@/components/animate/variants";
+import { themeVars } from "@/theme/theme.css";
+
+type Props = {
+	variant: string;
+};
+export default function ContainerView({ variant }: Props) {
+	const varients = useMemo(() => getVariant(variant), [variant]);
+	const isKenburns = variant.includes("kenburns");
+
+	return (
+		<div
+			key={variant}
+			className="h-[480px] overflow-hidden rounded-lg"
+			style={{ backgroundColor: themeVars.colors.background.neutral }}
+		>
+			<MotionContainer className="flex h-full w-full flex-col items-center gap-6">
+				{isKenburns ? (
+					<m.img src={Cover3} className="h-full w-full object-cover" variants={varients} />
+				) : (
+					<m.div {...varients} className="h-full w-full" />
+				)}
+			</MotionContainer>
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/animate/views/background/index.tsx b/apps/react-admin/src/pages/components/animate/views/background/index.tsx
new file mode 100644
index 000000000..13b0a87d4
--- /dev/null
+++ b/apps/react-admin/src/pages/components/animate/views/background/index.tsx
@@ -0,0 +1,55 @@
+import { Card, Col, Row } from "antd";
+import { useMemo, useState } from "react";
+
+import ControlPanel from "../../control-panel";
+
+import ContainerView from "./container";
+import Toolbar from "./toolbar";
+
+export default function BackgroundView() {
+	const defaultValue = useMemo(() => {
+		return {
+			selectedVariant: "kenburnsTop",
+		};
+	}, []);
+	const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant);
+
+	const onRefresh = () => {
+		setSelectedVariant(defaultValue.selectedVariant);
+	};
+	return (
+		<Card>
+			<Row>
+				<Col xs={24} md={18}>
+					<Toolbar onRefresh={onRefresh} />
+				</Col>
+			</Row>
+			<Row justify="space-between">
+				<Col xs={24} md={18}>
+					<ContainerView variant={selectedVariant} />
+				</Col>
+				<Col xs={24} md={5}>
+					<ControlPanel
+						variantKey={variantKey}
+						selectedVariant={selectedVariant}
+						onChangeVarient={(varient) => setSelectedVariant(varient)}
+					/>
+				</Col>
+			</Row>
+		</Card>
+	);
+}
+const variantKey = [
+	{
+		type: "kenburns",
+		values: ["kenburnsTop", "kenburnsBottom", "kenburnsLeft", "kenburnsRight"],
+	},
+	{
+		type: "pan",
+		values: ["panTop", "panBottom", "panLeft", "panRight"],
+	},
+	{
+		type: "color change",
+		values: ["color2x", "color3x", "color4x", "color5x"],
+	},
+];
diff --git a/apps/react-admin/src/pages/components/animate/views/background/toolbar.tsx b/apps/react-admin/src/pages/components/animate/views/background/toolbar.tsx
new file mode 100644
index 000000000..e7aadc240
--- /dev/null
+++ b/apps/react-admin/src/pages/components/animate/views/background/toolbar.tsx
@@ -0,0 +1,12 @@
+import { ReloadOutlined } from "@ant-design/icons";
+
+type Props = {
+	onRefresh: VoidFunction;
+};
+export default function Toolbar({ onRefresh }: Props) {
+	return (
+		<div className="mb-4 flex items-center justify-end">
+			<ReloadOutlined className="cursor-pointer text-lg" onClick={onRefresh} />
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/animate/views/inview/container.tsx b/apps/react-admin/src/pages/components/animate/views/inview/container.tsx
new file mode 100644
index 000000000..5d3a9463b
--- /dev/null
+++ b/apps/react-admin/src/pages/components/animate/views/inview/container.tsx
@@ -0,0 +1,54 @@
+import { m } from "framer-motion";
+import { repeat } from "ramda";
+import { useMemo } from "react";
+
+import Cover3 from "@/assets/images/cover/cover_3.jpg";
+import MotionContainer from "@/components/animate/motion-container";
+import { getVariant } from "@/components/animate/variants";
+import { themeVars } from "@/theme/theme.css";
+
+const TEXT = "SlashAdmin";
+type Props = {
+	isText: boolean;
+	isMulti: boolean;
+	variant: string;
+};
+export default function ContainerView({ isText, variant, isMulti }: Props) {
+	const varients = useMemo(() => getVariant(variant), [variant]);
+	const imgs = useMemo(() => (isMulti ? repeat(Cover3, 5) : [Cover3]), [isMulti]);
+
+	return (
+		<div
+			key={variant}
+			className="h-[480px] overflow-auto rounded-lg xs:p-20 flex flex-col items-center justify-center"
+			style={{ backgroundColor: themeVars.colors.background.neutral }}
+		>
+			{isText ? (
+				<MotionContainer className="flex h-[480px] items-center justify-center font-bold md:text-6xl">
+					{TEXT.split("").map((letter) => (
+						<m.div key={letter} variants={varients} className="xs:ml-1">
+							{letter}
+						</m.div>
+					))}
+				</MotionContainer>
+			) : (
+				<MotionContainer className="flex flex-col items-center justify-center gap-6">
+					{imgs.map((img) => (
+						<m.img
+							key={img}
+							src={img}
+							style={{
+								objectFit: "cover",
+								width: "240px",
+								height: isMulti ? "36px" : "240px",
+								margin: "auto",
+								borderRadius: "8px",
+							}}
+							variants={varients}
+						/>
+					))}
+				</MotionContainer>
+			)}
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/animate/views/inview/index.tsx b/apps/react-admin/src/pages/components/animate/views/inview/index.tsx
new file mode 100644
index 000000000..89f908ab9
--- /dev/null
+++ b/apps/react-admin/src/pages/components/animate/views/inview/index.tsx
@@ -0,0 +1,115 @@
+import { Card, Col, Row } from "antd";
+import { useMemo, useState } from "react";
+
+import ControlPanel from "../../control-panel";
+
+import ContainerView from "./container";
+import Toolbar from "./toolbar";
+
+const variantKey = [
+	{
+		type: "slide in",
+		values: ["slideInUp", "slideInDown", "slideInLeft", "slideInRight"],
+	},
+	{
+		type: "slide out",
+		values: ["slideOutUp", "slideOutDown", "slideOutLeft", "slideOutRight"],
+	},
+	{
+		type: "fade in",
+		values: ["fadeIn", "fadeInUp", "fadeInDown", "fadeInLeft", "fadeInRight"],
+	},
+	{
+		type: "fade out",
+		values: ["fadeOut", "fadeOutUp", "fadeOutDown", "fadeOutLeft", "fadeOutRight"],
+	},
+	{
+		type: "zoom in",
+		values: ["zoomIn", "zoomInUp", "zoomInDown", "zoomInLeft", "zoomInRight"],
+	},
+	{
+		type: "zoom out",
+		values: ["zoomOut", "zoomOutUp", "zoomOutDown", "zoomOutLeft", "zoomOutRight"],
+	},
+	{
+		type: "bounce in",
+		values: ["bounceIn", "bounceInUp", "bounceInDown", "bounceInLeft", "bounceInRight"],
+	},
+	{
+		type: "bounce out",
+		values: ["bounceOut", "bounceOutUp", "bounceOutDown", "bounceOutLeft", "bounceOutRight"],
+	},
+	{
+		type: "flip in",
+		values: ["flipInX", "flipInY"],
+	},
+	{
+		type: "flip out",
+		values: ["flipOutX", "flipOutY"],
+	},
+	{
+		type: "scale in",
+		values: ["scaleInX", "scaleInY"],
+	},
+	{
+		type: "scale out",
+		values: ["scaleOutX", "scaleOutY"],
+	},
+	{
+		type: "rotate in",
+		values: ["rotateIn"],
+	},
+	{
+		type: "rotate out",
+		values: ["rotateOut"],
+	},
+];
+
+export default function Inview() {
+	const defaultValue = useMemo(() => {
+		return {
+			isText: false,
+			isMulti: false,
+			selectedVariant: "slideInUp",
+		};
+	}, []);
+
+	const [isText, setIsText] = useState(defaultValue.isText);
+	const [isMulti, setIsMulti] = useState(defaultValue.isMulti);
+
+	const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant);
+
+	const onRefresh = () => {
+		setIsText(defaultValue.isText);
+		setIsMulti(defaultValue.isMulti);
+		setSelectedVariant(defaultValue.selectedVariant);
+	};
+
+	return (
+		<Card>
+			<Row>
+				<Col xs={24} md={18}>
+					<Toolbar
+						isText={isText}
+						onChnageText={() => setIsText(!isText)}
+						isMulti={isMulti}
+						onChangeMulti={() => setIsMulti(!isMulti)}
+						onRefresh={onRefresh}
+					/>
+				</Col>
+			</Row>
+			<Row justify="space-between">
+				<Col xs={24} md={18}>
+					<ContainerView variant={selectedVariant} isText={isText} isMulti={isMulti} />
+				</Col>
+				<Col xs={24} md={5}>
+					<ControlPanel
+						variantKey={variantKey}
+						selectedVariant={selectedVariant}
+						onChangeVarient={(varient) => setSelectedVariant(varient)}
+					/>
+				</Col>
+			</Row>
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/animate/views/inview/toolbar.tsx b/apps/react-admin/src/pages/components/animate/views/inview/toolbar.tsx
new file mode 100644
index 000000000..506e1218f
--- /dev/null
+++ b/apps/react-admin/src/pages/components/animate/views/inview/toolbar.tsx
@@ -0,0 +1,29 @@
+import { ReloadOutlined } from "@ant-design/icons";
+import { Switch } from "antd";
+
+type Props = {
+	isText: boolean;
+	isMulti: boolean;
+	onChnageText: (isText: boolean) => void;
+	onChangeMulti: (isMulti: boolean) => void;
+	onRefresh: VoidFunction;
+};
+export default function Toolbar({ isText, isMulti, onChnageText, onChangeMulti, onRefresh }: Props) {
+	return (
+		<div className="mb-4 flex items-center justify-between">
+			<div>
+				<Switch checked={isText} onChange={onChnageText} />
+				<span className="ml-2">Text Object</span>
+			</div>
+			<div className="flex items-center">
+				{isText ? null : (
+					<div className="mr-4">
+						<Switch checked={isMulti} onChange={onChangeMulti} />
+						<span className="ml-2">Multi Item</span>
+					</div>
+				)}
+				<ReloadOutlined className="cursor-pointer text-lg" onClick={onRefresh} />
+			</div>
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/animate/views/scroll/container.tsx b/apps/react-admin/src/pages/components/animate/views/scroll/container.tsx
new file mode 100644
index 000000000..472e302f8
--- /dev/null
+++ b/apps/react-admin/src/pages/components/animate/views/scroll/container.tsx
@@ -0,0 +1,30 @@
+import { Card, Typography } from "antd";
+import { useMemo } from "react";
+
+import MotionViewport from "@/components/animate/motion-viewport";
+import { getVariant } from "@/components/animate/variants";
+import { themeVars } from "@/theme/theme.css";
+
+type Props = {
+	variant: string;
+};
+export default function ContainerView({ variant }: Props) {
+	const varients = useMemo(() => getVariant(variant), [variant]);
+
+	return (
+		<div
+			key={variant}
+			className="h-[480px] overflow-auto rounded-lg px-20"
+			style={{ backgroundColor: themeVars.colors.background.neutral }}
+		>
+			{[...Array(40)].map((_, index) => (
+				// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+				<MotionViewport key={index} variants={varients} className="mt-4">
+					<Card>
+						<Typography className="text-center">Item {index + 1}</Typography>
+					</Card>
+				</MotionViewport>
+			))}
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/animate/views/scroll/index.tsx b/apps/react-admin/src/pages/components/animate/views/scroll/index.tsx
new file mode 100644
index 000000000..75a7f94bb
--- /dev/null
+++ b/apps/react-admin/src/pages/components/animate/views/scroll/index.tsx
@@ -0,0 +1,72 @@
+import { Card, Col, Row } from "antd";
+import { useMemo, useState } from "react";
+
+import ControlPanel from "../../control-panel";
+
+import ContainerView from "./container";
+import Toolbar from "./toolbar";
+
+export default function ScrollView() {
+	const defaultValue = useMemo(() => {
+		return {
+			selectedVariant: "slideInUp",
+		};
+	}, []);
+	const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant);
+
+	const onRefresh = () => {
+		setSelectedVariant(defaultValue.selectedVariant);
+	};
+	return (
+		<Card>
+			<Row>
+				<Col xs={24} md={18}>
+					<Toolbar onRefresh={onRefresh} />
+				</Col>
+			</Row>
+			<Row justify="space-between">
+				<Col xs={24} md={18}>
+					<ContainerView variant={selectedVariant} />
+				</Col>
+				<Col xs={24} md={5}>
+					<ControlPanel
+						variantKey={variantKey}
+						selectedVariant={selectedVariant}
+						onChangeVarient={(varient) => setSelectedVariant(varient)}
+					/>
+				</Col>
+			</Row>
+		</Card>
+	);
+}
+
+const variantKey = [
+	{
+		type: "slide",
+		values: ["slideInUp", "slideInDown", "slideInLeft", "slideInRight"],
+	},
+	{
+		type: "fade",
+		values: ["fadeIn", "fadeInUp", "fadeInDown", "fadeInLeft", "fadeInRight"],
+	},
+	{
+		type: "zoom",
+		values: ["zoomIn", "zoomInUp", "zoomInDown", "zoomInLeft", "zoomInRight"],
+	},
+	{
+		type: "bounce",
+		values: ["bounceIn", "bounceInUp", "bounceInDown", "bounceInLeft", "bounceInRight"],
+	},
+	{
+		type: "flip",
+		values: ["flipInX", "flipInY"],
+	},
+	{
+		type: "scale",
+		values: ["scaleInX", "scaleInY"],
+	},
+	{
+		type: "rotate",
+		values: ["rotateIn"],
+	},
+];
diff --git a/apps/react-admin/src/pages/components/animate/views/scroll/toolbar.tsx b/apps/react-admin/src/pages/components/animate/views/scroll/toolbar.tsx
new file mode 100644
index 000000000..e7aadc240
--- /dev/null
+++ b/apps/react-admin/src/pages/components/animate/views/scroll/toolbar.tsx
@@ -0,0 +1,12 @@
+import { ReloadOutlined } from "@ant-design/icons";
+
+type Props = {
+	onRefresh: VoidFunction;
+};
+export default function Toolbar({ onRefresh }: Props) {
+	return (
+		<div className="mb-4 flex items-center justify-end">
+			<ReloadOutlined className="cursor-pointer text-lg" onClick={onRefresh} />
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/chart/index.tsx b/apps/react-admin/src/pages/components/chart/index.tsx
new file mode 100644
index 000000000..54e256296
--- /dev/null
+++ b/apps/react-admin/src/pages/components/chart/index.tsx
@@ -0,0 +1,96 @@
+import { themeVars } from "@/theme/theme.css";
+import { Card, Col, Row, Typography } from "antd";
+import ChartArea from "./view/chart-area";
+import ChartBar from "./view/chart-bar";
+import ChartColumnStacked from "./view/chart-column-Stacked";
+import ChartColumnMultiple from "./view/chart-column-multiple";
+import ChartColumnNegative from "./view/chart-column-negative";
+import ChartColumnSingle from "./view/chart-column-single";
+import ChartDonut from "./view/chart-donut";
+import ChartLine from "./view/chart-line";
+import ChartMixed from "./view/chart-mixed";
+import ChartPie from "./view/chart-pie";
+import ChartRadar from "./view/chart-radar";
+import ChartRadial from "./view/chart-radial";
+
+export default function ChartPage() {
+	return (
+		<>
+			<Typography.Link
+				href="https://apexcharts.com"
+				style={{ color: themeVars.colors.palette.primary.default }}
+				className="mb-4 block"
+			>
+				https://apexcharts.com
+			</Typography.Link>
+
+			<Row gutter={[16, 16]} justify="center">
+				<Col span={23} lg={12}>
+					<Card title="Area">
+						<ChartArea />
+					</Card>
+				</Col>
+				<Col span={23} lg={12}>
+					<Card title="Line">
+						<ChartLine />
+					</Card>
+				</Col>
+
+				<Col span={23} lg={12}>
+					<Card title="Column Single">
+						<ChartColumnSingle />
+					</Card>
+				</Col>
+				<Col span={23} lg={12}>
+					<Card title="Column Multiple">
+						<ChartColumnMultiple />
+					</Card>
+				</Col>
+
+				<Col span={23} lg={12}>
+					<Card title="Column Stacked">
+						<ChartColumnStacked />
+					</Card>
+				</Col>
+				<Col span={23} lg={12}>
+					<Card title="Column Negative">
+						<ChartColumnNegative />
+					</Card>
+				</Col>
+
+				<Col span={23} lg={12}>
+					<Card title="Bar">
+						<ChartBar />
+					</Card>
+				</Col>
+				<Col span={23} lg={12}>
+					<Card title="Column Mixed">
+						<ChartMixed />
+					</Card>
+				</Col>
+
+				<Col span={24} lg={12}>
+					<Card title="Pie">
+						<ChartPie />
+					</Card>
+				</Col>
+				<Col span={23} lg={12}>
+					<Card title="Donut">
+						<ChartDonut />
+					</Card>
+				</Col>
+
+				<Col span={23} lg={12}>
+					<Card title="Radial Bar">
+						<ChartRadial />
+					</Card>
+				</Col>
+				<Col span={23} lg={12}>
+					<Card title="Radar">
+						<ChartRadar />
+					</Card>
+				</Col>
+			</Row>
+		</>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/chart/view/chart-area.tsx b/apps/react-admin/src/pages/components/chart/view/chart-area.tsx
new file mode 100644
index 000000000..2f693a6b3
--- /dev/null
+++ b/apps/react-admin/src/pages/components/chart/view/chart-area.tsx
@@ -0,0 +1,30 @@
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+
+const series = [
+	{ name: "series1", data: [31, 40, 28, 51, 42, 109, 100] },
+	{ name: "series2", data: [11, 32, 45, 32, 34, 52, 41] },
+];
+export default function ChartArea() {
+	const chartOptions = useChart({
+		xaxis: {
+			type: "datetime",
+			categories: [
+				"2018-09-19T00:00:00.000Z",
+				"2018-09-19T01:30:00.000Z",
+				"2018-09-19T02:30:00.000Z",
+				"2018-09-19T03:30:00.000Z",
+				"2018-09-19T04:30:00.000Z",
+				"2018-09-19T05:30:00.000Z",
+				"2018-09-19T06:30:00.000Z",
+			],
+		},
+		tooltip: {
+			x: {
+				format: "dd/MM/yy HH:mm",
+			},
+		},
+	});
+
+	return <Chart type="area" series={series} options={chartOptions} height={320} />;
+}
diff --git a/apps/react-admin/src/pages/components/chart/view/chart-bar.tsx b/apps/react-admin/src/pages/components/chart/view/chart-bar.tsx
new file mode 100644
index 000000000..c06822f8a
--- /dev/null
+++ b/apps/react-admin/src/pages/components/chart/view/chart-bar.tsx
@@ -0,0 +1,29 @@
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+
+const series = [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380];
+
+export default function ChartBar() {
+	const chartOptions = useChart({
+		stroke: { show: false },
+		plotOptions: {
+			bar: { horizontal: true, barHeight: "30%" },
+		},
+		xaxis: {
+			categories: [
+				"Italy",
+				"Japan",
+				"China",
+				"Canada",
+				"France",
+				"Germany",
+				"South Korea",
+				"Netherlands",
+				"United States",
+				"United Kingdom",
+			],
+		},
+	});
+
+	return <Chart type="bar" series={[{ data: series }]} options={chartOptions} height={320} />;
+}
diff --git a/apps/react-admin/src/pages/components/chart/view/chart-column-Stacked.tsx b/apps/react-admin/src/pages/components/chart/view/chart-column-Stacked.tsx
new file mode 100644
index 000000000..2515b7a87
--- /dev/null
+++ b/apps/react-admin/src/pages/components/chart/view/chart-column-Stacked.tsx
@@ -0,0 +1,47 @@
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+
+const series = [
+	{ name: "Product A", data: [44, 55, 41, 67, 22, 43] },
+	{ name: "Product B", data: [13, 23, 20, 8, 13, 27] },
+	{ name: "Product C", data: [11, 17, 15, 15, 21, 14] },
+	{ name: "Product D", data: [21, 7, 25, 13, 22, 8] },
+];
+export default function ChartColumnStacked() {
+	const chartOptions = useChart({
+		chart: {
+			stacked: true,
+			zoom: {
+				enabled: true,
+			},
+		},
+		legend: {
+			itemMargin: {
+				vertical: 8,
+			},
+			position: "right",
+			offsetY: 20,
+		},
+		plotOptions: {
+			bar: {
+				columnWidth: "16%",
+			},
+		},
+		stroke: {
+			show: false,
+		},
+		xaxis: {
+			type: "datetime",
+			categories: [
+				"01/01/2011 GMT",
+				"01/02/2011 GMT",
+				"01/03/2011 GMT",
+				"01/04/2011 GMT",
+				"01/05/2011 GMT",
+				"01/06/2011 GMT",
+			],
+		},
+	});
+
+	return <Chart type="bar" series={series} options={chartOptions} height={320} />;
+}
diff --git a/apps/react-admin/src/pages/components/chart/view/chart-column-multiple.tsx b/apps/react-admin/src/pages/components/chart/view/chart-column-multiple.tsx
new file mode 100644
index 000000000..8313e7d1b
--- /dev/null
+++ b/apps/react-admin/src/pages/components/chart/view/chart-column-multiple.tsx
@@ -0,0 +1,33 @@
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+
+const series = [
+	{
+		name: "Net Profit",
+		data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
+	},
+	{
+		name: "Revenue",
+		data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
+	},
+];
+export default function ChartColumnMultiple() {
+	const chartOptions = useChart({
+		stroke: {
+			show: true,
+			width: 2,
+			colors: ["transparent"],
+		},
+		xaxis: {
+			categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
+		},
+		tooltip: {
+			y: {
+				formatter: (value: number) => `$ ${value} thousands`,
+			},
+		},
+		plotOptions: { bar: { columnWidth: "36%" } },
+	});
+
+	return <Chart type="bar" series={series} options={chartOptions} height={320} />;
+}
diff --git a/apps/react-admin/src/pages/components/chart/view/chart-column-negative.tsx b/apps/react-admin/src/pages/components/chart/view/chart-column-negative.tsx
new file mode 100644
index 000000000..25770395c
--- /dev/null
+++ b/apps/react-admin/src/pages/components/chart/view/chart-column-negative.tsx
@@ -0,0 +1,74 @@
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+import { themeVars } from "@/theme/theme.css";
+
+const series = [
+	{
+		name: "Cash Flow",
+		data: [
+			1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07, 5.8, 2, 7.37, 8.1, 13.57,
+			15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6, -48.6, -41.1, -39.6, -37.6, -29.4, -21.4, -2.4,
+		],
+	},
+];
+export default function ChartColumnNegative() {
+	const chartOptions = useChart({
+		stroke: { show: false },
+		yaxis: {
+			labels: {
+				formatter: (value: number) => `${value.toFixed(0)}%`,
+			},
+		},
+		xaxis: {
+			type: "datetime",
+			categories: [
+				"2011-01-01",
+				"2011-02-01",
+				"2011-03-01",
+				"2011-04-01",
+				"2011-05-01",
+				"2011-06-01",
+				"2011-07-01",
+				"2011-08-01",
+				"2011-09-01",
+				"2011-10-01",
+				"2011-11-01",
+				"2011-12-01",
+				"2012-01-01",
+				"2012-02-01",
+				"2012-03-01",
+				"2012-04-01",
+				"2012-05-01",
+				"2012-06-01",
+				"2012-07-01",
+				"2012-08-01",
+				"2012-09-01",
+				"2012-10-01",
+				"2012-11-01",
+				"2012-12-01",
+				"2013-01-01",
+				"2013-02-01",
+				"2013-03-01",
+				"2013-04-01",
+				"2013-05-01",
+				"2013-06-01",
+				"2013-07-01",
+				"2013-08-01",
+				"2013-09-01",
+			],
+		},
+		plotOptions: {
+			bar: {
+				columnWidth: "58%",
+				colors: {
+					ranges: [
+						{ from: -100, to: -46, color: themeVars.colors.palette.warning.default },
+						{ from: -45, to: 0, color: themeVars.colors.palette.info.default },
+					],
+				},
+			},
+		},
+	});
+
+	return <Chart type="bar" series={series} options={chartOptions} height={320} />;
+}
diff --git a/apps/react-admin/src/pages/components/chart/view/chart-column-single.tsx b/apps/react-admin/src/pages/components/chart/view/chart-column-single.tsx
new file mode 100644
index 000000000..e257260f7
--- /dev/null
+++ b/apps/react-admin/src/pages/components/chart/view/chart-column-single.tsx
@@ -0,0 +1,26 @@
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+
+const series = [{ name: "Net Profit", data: [44, 55, 57, 56, 61, 58, 63, 60, 66] }];
+export default function ChartColumnSingle() {
+	const chartOptions = useChart({
+		plotOptions: {
+			bar: {
+				columnWidth: "16%",
+			},
+		},
+		stroke: {
+			show: false,
+		},
+		xaxis: {
+			categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
+		},
+		tooltip: {
+			y: {
+				formatter: (value: number) => `$ ${value} thousands`,
+			},
+		},
+	});
+
+	return <Chart type="bar" series={series} options={chartOptions} height={320} />;
+}
diff --git a/apps/react-admin/src/pages/components/chart/view/chart-donut.tsx b/apps/react-admin/src/pages/components/chart/view/chart-donut.tsx
new file mode 100644
index 000000000..feb18964c
--- /dev/null
+++ b/apps/react-admin/src/pages/components/chart/view/chart-donut.tsx
@@ -0,0 +1,27 @@
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+
+const series = [44, 55, 13, 43];
+export default function ChartDonut() {
+	const chartOptions = useChart({
+		labels: ["Apple", "Mango", "Orange", "Watermelon"],
+		stroke: {
+			show: false,
+		},
+		legend: {
+			horizontalAlign: "center",
+		},
+		tooltip: {
+			fillSeriesColor: false,
+		},
+		plotOptions: {
+			pie: {
+				donut: {
+					size: "90%",
+				},
+			},
+		},
+	});
+
+	return <Chart type="donut" series={series} options={chartOptions} height={320} />;
+}
diff --git a/apps/react-admin/src/pages/components/chart/view/chart-line.tsx b/apps/react-admin/src/pages/components/chart/view/chart-line.tsx
new file mode 100644
index 000000000..54afce5e6
--- /dev/null
+++ b/apps/react-admin/src/pages/components/chart/view/chart-line.tsx
@@ -0,0 +1,24 @@
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+
+const series = [
+	{
+		name: "Desktops",
+		data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
+	},
+];
+export default function ChartLine() {
+	const chartOptions = useChart({
+		xaxis: {
+			categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
+		},
+		tooltip: {
+			x: {
+				show: false,
+			},
+			marker: { show: false },
+		},
+	});
+
+	return <Chart type="line" series={series} options={chartOptions} height={320} />;
+}
diff --git a/apps/react-admin/src/pages/components/chart/view/chart-mixed.tsx b/apps/react-admin/src/pages/components/chart/view/chart-mixed.tsx
new file mode 100644
index 000000000..ec74b0a81
--- /dev/null
+++ b/apps/react-admin/src/pages/components/chart/view/chart-mixed.tsx
@@ -0,0 +1,68 @@
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+
+const series = [
+	{
+		name: "Team A",
+		type: "column",
+		data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
+	},
+	{
+		name: "Team B",
+		type: "area",
+		data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
+	},
+	{
+		name: "Team C",
+		type: "line",
+		data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
+	},
+];
+
+export default function ChartMixed() {
+	const chartOptions = useChart({
+		stroke: {
+			width: [0, 2, 3],
+		},
+		plotOptions: {
+			bar: { columnWidth: "20%" },
+		},
+		fill: {
+			type: ["solid", "gradient", "solid"],
+		},
+		labels: [
+			"01/01/2003",
+			"02/01/2003",
+			"03/01/2003",
+			"04/01/2003",
+			"05/01/2003",
+			"06/01/2003",
+			"07/01/2003",
+			"08/01/2003",
+			"09/01/2003",
+			"10/01/2003",
+			"11/01/2003",
+		],
+		xaxis: {
+			type: "datetime",
+		},
+		yaxis: {
+			title: { text: "Points" },
+			min: 0,
+		},
+		tooltip: {
+			shared: true,
+			intersect: false,
+			y: {
+				formatter: (value: number) => {
+					if (typeof value !== "undefined") {
+						return `${value.toFixed(0)} points`;
+					}
+					return value;
+				},
+			},
+		},
+	});
+
+	return <Chart type="line" series={series} options={chartOptions} height={320} />;
+}
diff --git a/apps/react-admin/src/pages/components/chart/view/chart-pie.tsx b/apps/react-admin/src/pages/components/chart/view/chart-pie.tsx
new file mode 100644
index 000000000..5aad40e69
--- /dev/null
+++ b/apps/react-admin/src/pages/components/chart/view/chart-pie.tsx
@@ -0,0 +1,35 @@
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+
+const series = [44, 55, 13, 43];
+export default function ChartPie() {
+	const chartOptions = useChart({
+		labels: ["America", "Asia", "Europe", "Africa"],
+		legend: {
+			horizontalAlign: "center",
+		},
+		stroke: {
+			show: false,
+		},
+		dataLabels: {
+			enabled: true,
+			dropShadow: {
+				enabled: false,
+			},
+		},
+		tooltip: {
+			fillSeriesColor: false,
+		},
+		plotOptions: {
+			pie: {
+				donut: {
+					labels: {
+						show: false,
+					},
+				},
+			},
+		},
+	});
+
+	return <Chart type="pie" series={series} options={chartOptions} height={320} />;
+}
diff --git a/apps/react-admin/src/pages/components/chart/view/chart-radar.tsx b/apps/react-admin/src/pages/components/chart/view/chart-radar.tsx
new file mode 100644
index 000000000..d50005eac
--- /dev/null
+++ b/apps/react-admin/src/pages/components/chart/view/chart-radar.tsx
@@ -0,0 +1,50 @@
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+import { themeVars } from "@/theme/theme.css";
+
+const series = [
+	{
+		name: "Series 1",
+		data: [80, 50, 30, 40, 100, 20],
+	},
+	{
+		name: "Series 2",
+		data: [20, 30, 40, 80, 20, 80],
+	},
+	{
+		name: "Series 3",
+		data: [44, 76, 78, 13, 43, 10],
+	},
+];
+export default function ChartRadar() {
+	const chartOptions = useChart({
+		stroke: {
+			width: 2,
+		},
+		fill: {
+			opacity: 0.1,
+		},
+		legend: {
+			floating: true,
+			position: "bottom",
+			horizontalAlign: "center",
+		},
+		xaxis: {
+			categories: ["2011", "2012", "2013", "2014", "2015", "2016"],
+			labels: {
+				style: {
+					colors: [
+						themeVars.colors.text.secondary,
+						themeVars.colors.text.secondary,
+						themeVars.colors.text.secondary,
+						themeVars.colors.text.secondary,
+						themeVars.colors.text.secondary,
+						themeVars.colors.text.secondary,
+					],
+				},
+			},
+		},
+	});
+
+	return <Chart type="radar" series={series} options={chartOptions} height={320} />;
+}
diff --git a/apps/react-admin/src/pages/components/chart/view/chart-radial.tsx b/apps/react-admin/src/pages/components/chart/view/chart-radial.tsx
new file mode 100644
index 000000000..7a8a64bee
--- /dev/null
+++ b/apps/react-admin/src/pages/components/chart/view/chart-radial.tsx
@@ -0,0 +1,37 @@
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+import { fNumber } from "@/utils/format-number";
+
+const series = [44, 55];
+export default function ChartRadial() {
+	const chartOptions = useChart({
+		chart: {
+			sparkline: {
+				enabled: true,
+			},
+		},
+		labels: ["Apples", "Oranges"],
+		legend: {
+			floating: true,
+			position: "bottom",
+			horizontalAlign: "center",
+		},
+		plotOptions: {
+			radialBar: {
+				hollow: {
+					size: "68%",
+				},
+				dataLabels: {
+					value: {
+						offsetY: 16,
+					},
+					total: {
+						formatter: () => fNumber(2324),
+					},
+				},
+			},
+		},
+	});
+
+	return <Chart type="radialBar" series={series} options={chartOptions} height={320} />;
+}
diff --git a/apps/react-admin/src/pages/components/editor/index.tsx b/apps/react-admin/src/pages/components/editor/index.tsx
new file mode 100644
index 000000000..613777e45
--- /dev/null
+++ b/apps/react-admin/src/pages/components/editor/index.tsx
@@ -0,0 +1,28 @@
+import Editor from "@/components/editor";
+import { themeVars } from "@/theme/theme.css";
+import { Card, Typography } from "antd";
+import { useState } from "react";
+
+export default function EditorPage() {
+	const [quillSimple, setQuillSimple] = useState("");
+	const [quillFull, setQuillFull] = useState("");
+
+	return (
+		<>
+			<Typography.Link
+				href="https://github.com/zenoamaro/react-quill"
+				style={{ color: themeVars.colors.palette.primary.default }}
+				className="mb-4 block"
+			>
+				https://github.com/zenoamaro/react-quill
+			</Typography.Link>
+			<Card title="Editor Simple">
+				<Editor id="sample-editor" sample value={quillSimple} onChange={setQuillSimple} />
+			</Card>
+			<div className="h-10" />
+			<Card title="Editor Full">
+				<Editor id="full-editor" value={quillFull} onChange={setQuillFull} />
+			</Card>
+		</>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/icon/index.tsx b/apps/react-admin/src/pages/components/icon/index.tsx
new file mode 100644
index 000000000..fb2ac298a
--- /dev/null
+++ b/apps/react-admin/src/pages/components/icon/index.tsx
@@ -0,0 +1,89 @@
+import { StepBackwardOutlined } from "@ant-design/icons";
+import { Card, Space, Typography } from "antd";
+
+import { Iconify, SvgIcon } from "@/components/icon";
+import { themeVars } from "@/theme/theme.css";
+
+export default function IconPage() {
+	return (
+		<Space direction="vertical" style={{ display: "flex" }}>
+			<Card title="Antd Icons">
+				<span className="mr-1">For more info</span>
+				<Typography.Link
+					href="https://ant.design/components/icon-cn"
+					style={{ color: themeVars.colors.palette.primary.default }}
+				>
+					click here
+				</Typography.Link>
+
+				<p className="mt-2 flex flex-col text-info">
+					<code>{`import { StepBackwardOutlined } from '@ant-design/icons';`}</code>
+					<code>{"<StepBackwardOutlined /> "}</code>
+				</p>
+
+				<div className="mt-4">
+					<StepBackwardOutlined width={24} />
+				</div>
+			</Card>
+			<Card title="Iconify Icons">
+				<span className="mr-1">Simply beautiful open source icons. For more info</span>
+				<Typography.Link href="https://iconify.design/" style={{ color: themeVars.colors.palette.primary.default }}>
+					click here
+				</Typography.Link>
+
+				<p className="mt-2">
+					<code className="text-info">{` <Iconify icon="solar:emoji-funny-square-bold-duotone" size={24} color={colorPrimary} /> `}</code>
+				</p>
+
+				<div className="mt-4 flex gap-4">
+					<Iconify
+						icon="solar:emoji-funny-square-bold-duotone"
+						size={24}
+						color={themeVars.colors.palette.primary.default}
+					/>
+					<Iconify
+						icon="solar:emoji-funny-square-bold-duotone"
+						size={24}
+						color={themeVars.colors.palette.info.default}
+					/>
+					<Iconify
+						icon="solar:emoji-funny-square-bold-duotone"
+						size={24}
+						color={themeVars.colors.palette.success.default}
+					/>
+					<Iconify
+						icon="solar:emoji-funny-square-bold-duotone"
+						size={24}
+						color={themeVars.colors.palette.warning.default}
+					/>
+					<Iconify
+						icon="solar:emoji-funny-square-bold-duotone"
+						size={24}
+						color={themeVars.colors.palette.error.default}
+					/>
+				</div>
+			</Card>
+			<Card title="Svg Icons">
+				<span className="mr-1">For more info</span>
+				<Typography.Link
+					href="https://github.com/vbenjs/vite-plugin-svg-icons"
+					style={{ color: themeVars.colors.palette.primary.default }}
+				>
+					click here
+				</Typography.Link>
+
+				<p className="mt-2">
+					<code className="text-info">{`<SvgIcon icon="ic-workbench" size={24} color={colorPrimary} />`}</code>
+				</p>
+
+				<div className="mt-4 flex gap-4">
+					<SvgIcon icon="ic-workbench" size={24} color={themeVars.colors.palette.primary.default} />
+					<SvgIcon icon="ic-workbench" size={24} color={themeVars.colors.palette.info.default} />
+					<SvgIcon icon="ic-workbench" size={24} color={themeVars.colors.palette.success.default} />
+					<SvgIcon icon="ic-workbench" size={24} color={themeVars.colors.palette.warning.default} />
+					<SvgIcon icon="ic-workbench" size={24} color={themeVars.colors.palette.error.default} />
+				</div>
+			</Card>
+		</Space>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/markdown/index.tsx b/apps/react-admin/src/pages/components/markdown/index.tsx
new file mode 100644
index 000000000..12d31361e
--- /dev/null
+++ b/apps/react-admin/src/pages/components/markdown/index.tsx
@@ -0,0 +1,83 @@
+import { Card, Typography } from "antd";
+import { useState } from "react";
+
+import Markdown from "@/components/markdown";
+import { themeVars } from "@/theme/theme.css";
+
+const TEXT = `
+# h1
+
+<br/>
+
+## h2
+
+<br/>
+
+**Paragraph** Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
+
+<br/>
+
+[Link (https://www.google.com/)](https://www.google.com/)
+
+<br/>
+
+###### Lists
+
+<br/>
+
+- [x] Write the press release
+- [ ] Update the website
+- [ ] Contact the media
+
+<br/>
+
+---
+
+<br/>
+
+###### A table:
+
+<br/>
+
+| Syntax      | Description | Test Text     |
+| :---        |    :----:   |          ---: |
+| Header      | Title       | Here's this   |
+| Paragraph   | Text        | And more      |
+
+<br/>
+
+\`\`\`tsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactMarkdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+
+ReactDOM.render(
+  <ReactMarkdown rehypePlugins={[rehypeHighlight]}>{'# Your markdown here'}</ReactMarkdown>,
+  document.querySelector('#content')
+);
+\`\`\`
+
+<br/>
+
+> A block quote with ~~strikethrough~~ and a URL: [https://reactjs.org](https://reactjs.org).
+
+`;
+
+export default function MarkdownPage() {
+	const [content] = useState(TEXT);
+	return (
+		<>
+			<Typography.Link
+				href="https://github.com/remarkjs/react-markdown"
+				style={{ color: themeVars.colors.palette.primary.default }}
+				className="mb-4 block"
+			>
+				https://github.com/remarkjs/react-markdown
+			</Typography.Link>
+			<Card title="Mardown content">
+				<Markdown>{content}</Markdown>
+			</Card>
+		</>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/multi-language/index.tsx b/apps/react-admin/src/pages/components/multi-language/index.tsx
new file mode 100644
index 000000000..c829355db
--- /dev/null
+++ b/apps/react-admin/src/pages/components/multi-language/index.tsx
@@ -0,0 +1,50 @@
+import { Card, Pagination, Radio, Space, Typography } from "antd";
+
+import { SvgIcon } from "@/components/icon";
+// import useLocale from "@/locales/useLocale";
+
+import { themeVars } from "@/theme/theme.css";
+import { LocalEnum } from "#/enum";
+import { useLanguage, useLocale, useSetLocale } from "@/store/localeI18nStore";
+import { useTranslation } from "react-i18next";
+
+export default function MultiLanguagePage() {
+	// const {
+	// 	setLocale,
+	// 	locale,
+	// 	language: { icon, label },
+	// } = useLocale();
+	const locale = useLocale(); // 当前语言标识
+	const { icon, label } = useLanguage(); // 当前语言对象
+	const { i18n } = useTranslation();
+	const setLocale = useSetLocale(); // 切换语言的方法
+
+	return (
+		<Space direction="vertical" size="middle" style={{ display: "flex" }}>
+			<Typography.Link href="https://www.i18next.com/" style={{ color: themeVars.colors.palette.primary.default }}>
+				https://www.i18next.com
+			</Typography.Link>
+			<Typography.Link
+				href="https://ant.design/docs/react/i18n-cn"
+				style={{ color: themeVars.colors.palette.primary.default }}
+			>
+				https://ant.design/docs/react/i18n-cn
+			</Typography.Link>
+			<Card title="Flexible">
+				<Radio.Group onChange={(e) => setLocale(e.target.value, i18n)} value={locale}>
+					<Radio value={LocalEnum.en_US}>English</Radio>
+					<Radio value={LocalEnum.zh_CN}>Chinese</Radio>
+				</Radio.Group>
+
+				<div className="flex items-center text-4xl">
+					<SvgIcon icon={icon} className="mr-4 rounded-md" size="30" />
+					{label}
+				</div>
+			</Card>
+
+			<Card title="System">
+				<Pagination defaultCurrent={1} total={50} showSizeChanger showQuickJumper />
+			</Card>
+		</Space>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/scroll/index.tsx b/apps/react-admin/src/pages/components/scroll/index.tsx
new file mode 100644
index 000000000..6d639acd4
--- /dev/null
+++ b/apps/react-admin/src/pages/components/scroll/index.tsx
@@ -0,0 +1,17 @@
+import { Tabs, type TabsProps } from "antd";
+
+import ScrollbarView from "./views/scroll-bar";
+import ScrollProgressView from "./views/scroll-progress";
+
+export default function ScrollPage() {
+	const TABS: TabsProps["items"] = [
+		{ key: "scrollbar", label: "Scrollbar", children: <ScrollbarView /> },
+		{
+			key: "scroll-progress",
+			label: "ScrollProgress",
+			children: <ScrollProgressView />,
+		},
+	];
+
+	return <Tabs items={TABS} />;
+}
diff --git a/apps/react-admin/src/pages/components/scroll/views/scroll-bar/index.tsx b/apps/react-admin/src/pages/components/scroll/views/scroll-bar/index.tsx
new file mode 100644
index 000000000..e309fe488
--- /dev/null
+++ b/apps/react-admin/src/pages/components/scroll/views/scroll-bar/index.tsx
@@ -0,0 +1,36 @@
+import { faker } from "@faker-js/faker";
+import { Card, Col, Row, Typography } from "antd";
+
+import Scrollbar from "@/components/scrollbar";
+import { themeVars } from "@/theme/theme.css";
+
+const TEXT = faker.lorem.paragraphs({ min: 20, max: 30 });
+export default function ScrollbarView() {
+	return (
+		<>
+			<Typography.Link
+				href="https://grsmto.github.io/simplebar/"
+				style={{ color: themeVars.colors.palette.primary.default }}
+				className="mb-4 block"
+			>
+				https://grsmto.github.io/simplebar/
+			</Typography.Link>
+			<Row gutter={[16, 16]} justify="center">
+				<Col span={23} lg={12}>
+					<Card title="Vertical">
+						<div style={{ height: "420px" }}>
+							<Scrollbar>{TEXT}</Scrollbar>
+						</div>
+					</Card>
+				</Col>
+				<Col span={23} lg={12}>
+					<Card title="Horizontal">
+						<Scrollbar>
+							<div style={{ width: "200%" }}>{TEXT}</div>
+						</Scrollbar>
+					</Card>
+				</Col>
+			</Row>
+		</>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/scroll/views/scroll-progress/index.tsx b/apps/react-admin/src/pages/components/scroll/views/scroll-progress/index.tsx
new file mode 100644
index 000000000..99f7cdaae
--- /dev/null
+++ b/apps/react-admin/src/pages/components/scroll/views/scroll-progress/index.tsx
@@ -0,0 +1,34 @@
+import { faker } from "@faker-js/faker";
+import { Card, Typography } from "antd";
+import { useScroll } from "framer-motion";
+import { useRef } from "react";
+
+import ScrollProgress from "@/components/scroll-progress";
+import { themeVars } from "@/theme/theme.css";
+
+const TEXT = faker.lorem.paragraphs({ min: 20, max: 30 });
+export default function ScrollProgressView() {
+	const containerRef = useRef<HTMLDivElement | null>(null);
+	const containerScroll = useScroll({ container: containerRef });
+
+	return (
+		<>
+			<Typography.Link
+				href="https://www.framer.com/motion/"
+				style={{ color: themeVars.colors.palette.primary.default }}
+				className="mb-4 block"
+			>
+				https://www.framer.com/motion/
+			</Typography.Link>
+			<Card title="ScrollProgress">
+				<ScrollProgress scrollYProgress={containerScroll.scrollYProgress} />
+				<div ref={containerRef} className="h-80 overflow-auto">
+					{[...Array(4)].map((_, index) => (
+						// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+						<div key={index}>{TEXT}</div>
+					))}
+				</div>
+			</Card>
+		</>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/toast/index.tsx b/apps/react-admin/src/pages/components/toast/index.tsx
new file mode 100644
index 000000000..0cfaa429c
--- /dev/null
+++ b/apps/react-admin/src/pages/components/toast/index.tsx
@@ -0,0 +1,176 @@
+import { Button, Card, Flex } from "antd";
+import { toast } from "sonner";
+
+export default function ToastPage() {
+	const promise = () => new Promise((resolve) => setTimeout(() => resolve({ name: "Sonner" }), 2000));
+
+	const handleSubmit = () => {
+		toast.promise(promise, {
+			loading: "Loading...",
+			success: (data: any) => {
+				return `${data.name} toast has been added`;
+			},
+			error: "Error",
+		});
+	};
+	return (
+		<Flex gap={16} vertical wrap>
+			<Flex gap={16} wrap>
+				<Card title="Simple" bordered={false} className="flex-none text- lg:flex-1 bg-">
+					<Flex gap={16} wrap>
+						<Button color="default" variant="solid" onClick={() => toast("Toast Default", {})}>
+							Default
+						</Button>
+						<Button
+							color="default"
+							className="!bg-info"
+							variant="solid"
+							onClick={() =>
+								toast.info("Toast Info", {
+									description: "Toast Description Info asdfdfasdfasdfasdfasdfasdfasdf",
+								})
+							}
+						>
+							Info
+						</Button>
+						<Button
+							color="default"
+							className="!bg-success"
+							variant="solid"
+							onClick={() => toast.success("Toast Success")}
+						>
+							Success
+						</Button>
+						<Button
+							color="default"
+							className="!bg-warning"
+							variant="solid"
+							onClick={() => toast.warning("Toast Warning")}
+						>
+							Warning
+						</Button>
+						<Button color="default" className="!bg-error" variant="solid" onClick={() => toast.error("Toast Error")}>
+							Error
+						</Button>
+					</Flex>
+				</Card>
+				<Card title="With Action" bordered={false} className="flex-none lg:flex-1">
+					<Flex gap={16} wrap>
+						<Button
+							color="default"
+							variant="solid"
+							onClick={() =>
+								toast("Toast Default", {
+									cancel: {
+										label: "Cancel",
+										onClick: () => {},
+									},
+									action: {
+										label: "Action",
+										onClick: () => {},
+									},
+								})
+							}
+						>
+							Default
+						</Button>
+						<Button
+							color="default"
+							className="!bg-info"
+							variant="solid"
+							onClick={() =>
+								toast.info("Toast Info", {
+									action: {
+										label: "Action",
+										onClick: () => {},
+									},
+									cancel: {
+										label: "Cancel",
+										onClick: () => {},
+									},
+								})
+							}
+						>
+							Info
+						</Button>
+						<Button
+							color="default"
+							className="!bg-success"
+							variant="solid"
+							onClick={() =>
+								toast.success("Toast Success", {
+									action: {
+										label: "Action",
+										onClick: () => {},
+									},
+									cancel: {
+										label: "Cancel",
+										onClick: () => {},
+									},
+								})
+							}
+						>
+							Success
+						</Button>
+						<Button
+							color="default"
+							className="!bg-warning"
+							variant="solid"
+							onClick={() =>
+								toast.warning("Toast Warning", {
+									action: {
+										label: "Action",
+										onClick: () => {},
+									},
+									cancel: {
+										label: "Cancel",
+										onClick: () => {},
+									},
+								})
+							}
+						>
+							Warning
+						</Button>
+						<Button
+							color="default"
+							className="!bg-error"
+							variant="solid"
+							onClick={() =>
+								toast.error("Toast Error", {
+									action: {
+										label: "Action",
+										onClick: () => {},
+									},
+									cancel: {
+										label: "Cancel",
+										onClick: () => {},
+									},
+								})
+							}
+						>
+							Error
+						</Button>
+					</Flex>
+				</Card>
+			</Flex>
+
+			<Flex gap={16} wrap>
+				<Card title="Position" bordered={false} className="flex-none lg:flex-1">
+					<Flex gap={16} wrap>
+						<Button onClick={() => toast.info("Toast Info", { position: "top-left" })}>Top Left</Button>
+						<Button onClick={() => toast.info("Toast Info", { position: "top-center" })}>Top Center</Button>
+						<Button onClick={() => toast.info("Toast Info", { position: "top-right" })}>Top Right</Button>
+						<Button onClick={() => toast.info("Toast Info", { position: "bottom-right" })}>Bottom Right</Button>
+						<Button onClick={() => toast.info("Toast Info", { position: "bottom-center" })}>Bottom Center</Button>
+						<Button onClick={() => toast.info("Toast Info", { position: "bottom-left" })}>Bottom Left</Button>
+					</Flex>
+				</Card>
+				<Card title="With Promise" bordered={false} className="flex-none lg:flex-1">
+					<Flex gap={16} justify="center" align="center" wrap>
+						<Button onClick={handleSubmit}>On Submit</Button>
+					</Flex>
+				</Card>
+			</Flex>
+		</Flex>
+	);
+}
diff --git a/apps/react-admin/src/pages/components/upload/index.tsx b/apps/react-admin/src/pages/components/upload/index.tsx
new file mode 100644
index 000000000..658870fff
--- /dev/null
+++ b/apps/react-admin/src/pages/components/upload/index.tsx
@@ -0,0 +1,71 @@
+import { Card, Col, Row, Space, Switch, Tabs, type TabsProps, Typography } from "antd";
+import { useState } from "react";
+
+import { Iconify } from "@/components/icon";
+import { Upload, UploadAvatar, UploadBox } from "@/components/upload";
+
+export default function UploadPage() {
+	const [thumbnail, setThumbnail] = useState<boolean>(false);
+
+	const onChange = (checked: boolean) => {
+		setThumbnail(checked);
+	};
+
+	const ThumbnailSwitch = <Switch size="small" checked={thumbnail} onChange={onChange} />;
+
+	const boxPlaceHolder = (
+		<div className="flex flex-col">
+			<Iconify icon="eva:cloud-upload-fill" size={40} />
+			<Typography.Text type="secondary" className="">
+				Upload File
+			</Typography.Text>
+		</div>
+	);
+	const UploadFileTab = (
+		<Space direction="vertical" size="middle" style={{ display: "flex" }}>
+			<Card title="Upload Multi File" className="w-full" extra={ThumbnailSwitch}>
+				<Upload thumbnail={thumbnail} name="multi" />
+			</Card>
+			<Card title="Upload Single File" extra={ThumbnailSwitch}>
+				<Upload thumbnail={thumbnail} maxCount={1} name="single" />
+			</Card>
+		</Space>
+	);
+	const UploadAvatarTab = (
+		<Card
+			title="Upload Avatar"
+			styles={{
+				body: {
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "center",
+					alignItems: "center",
+				},
+			}}
+		>
+			<UploadAvatar />
+		</Card>
+	);
+	const UploadBoxTab = (
+		<Row gutter={[16, 16]}>
+			<Col span={24} md={4}>
+				<UploadBox />
+			</Col>
+			<Col span={24} md={20}>
+				<UploadBox placeholder={boxPlaceHolder} />
+			</Col>
+		</Row>
+	);
+
+	const TABS: TabsProps["items"] = [
+		{
+			key: "upload--file",
+			label: "Upload Single File",
+			children: UploadFileTab,
+		},
+		{ key: "upload-avatar", label: "Upload Avatar", children: UploadAvatarTab },
+		{ key: "upload-box", label: "Upload Box", children: UploadBoxTab },
+	];
+
+	return <Tabs items={TABS} />;
+}
diff --git a/apps/react-admin/src/pages/dashboard/analysis/analysis-card.tsx b/apps/react-admin/src/pages/dashboard/analysis/analysis-card.tsx
new file mode 100644
index 000000000..0b21435ab
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/analysis/analysis-card.tsx
@@ -0,0 +1,23 @@
+import type { CSSProperties } from "react";
+
+type Props = {
+	cover: string;
+	subtitle: string;
+	title: string;
+	style?: CSSProperties;
+};
+
+export default function AnalysisCard({ cover, subtitle, title, style }: Props) {
+	return (
+		<div
+			className="flex flex-col items-center rounded-2xl py-10"
+			style={{
+				...style,
+			}}
+		>
+			<img src={cover} alt="" />
+			<span className="text-3xl font-bold">{title}</span>
+			<span className="text-sm">{subtitle}</span>
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/pages/dashboard/analysis/analysis-news.tsx b/apps/react-admin/src/pages/dashboard/analysis/analysis-news.tsx
new file mode 100644
index 000000000..887dcabdf
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/analysis/analysis-news.tsx
@@ -0,0 +1,35 @@
+import { faker } from "@faker-js/faker";
+import { Avatar, List } from "antd";
+
+const data = [
+	{
+		title: faker.lorem.words(),
+	},
+	{
+		title: faker.lorem.words(),
+	},
+	{
+		title: faker.lorem.words(),
+	},
+	{
+		title: faker.lorem.words(),
+	},
+];
+export default function AnalysisNews() {
+	return (
+		<List
+			size="small"
+			pagination={{ position: "bottom", align: "end" }}
+			dataSource={data}
+			renderItem={(item) => (
+				<List.Item>
+					<List.Item.Meta
+						avatar={<Avatar shape="square" size={48} src={faker.image.urlLoremFlickr()} />}
+						title={item.title}
+						description={faker.lorem.sentence()}
+					/>
+				</List.Item>
+			)}
+		/>
+	);
+}
diff --git a/apps/react-admin/src/pages/dashboard/analysis/analysis-order-timeline.tsx b/apps/react-admin/src/pages/dashboard/analysis/analysis-order-timeline.tsx
new file mode 100644
index 000000000..9fb6f0a7e
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/analysis/analysis-order-timeline.tsx
@@ -0,0 +1,55 @@
+import { themeVars } from "@/theme/theme.css";
+import { Timeline, Typography } from "antd";
+
+export default function AnalysisOrderTimeline() {
+	return (
+		<Timeline
+			items={[
+				{
+					color: themeVars.colors.palette.primary.default,
+					children: (
+						<div className="flex flex-col">
+							<Typography.Text strong>1983, orders,$4220</Typography.Text>
+							<Typography.Text type="secondary" className="text-xs">
+								08 Oct 2023 7:19 PM
+							</Typography.Text>
+						</div>
+					),
+				},
+				{
+					color: themeVars.colors.palette.info.default,
+					children: (
+						<div className="flex flex-col">
+							<Typography.Text strong>Order #37745 from September</Typography.Text>
+							<Typography.Text type="secondary" className="text-xs">
+								06 Oct 2023 5:19 PM
+							</Typography.Text>
+						</div>
+					),
+				},
+				{
+					color: themeVars.colors.palette.warning.default,
+					children: (
+						<div className="flex flex-col">
+							<Typography.Text strong>New order placed #XF-2356</Typography.Text>
+							<Typography.Text type="secondary" className="text-xs">
+								05 Oct 2023 4:19 PM
+							</Typography.Text>
+						</div>
+					),
+				},
+				{
+					color: themeVars.colors.palette.error.default,
+					children: (
+						<div className="flex flex-col">
+							<Typography.Text strong>New order placed #XF-2346</Typography.Text>
+							<Typography.Text type="secondary" className="text-xs">
+								04 Oct 2023 3:19 PM
+							</Typography.Text>
+						</div>
+					),
+				},
+			]}
+		/>
+	);
+}
diff --git a/apps/react-admin/src/pages/dashboard/analysis/analysis-tasks.tsx b/apps/react-admin/src/pages/dashboard/analysis/analysis-tasks.tsx
new file mode 100644
index 000000000..a7ebfe8dc
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/analysis/analysis-tasks.tsx
@@ -0,0 +1,48 @@
+import { faker } from "@faker-js/faker";
+import { Checkbox, List } from "antd";
+
+import { IconButton, Iconify } from "@/components/icon";
+
+export default function AnalysisTasks() {
+	const data = [
+		{
+			task: faker.lorem.words(),
+			checked: false,
+		},
+		{
+			task: faker.lorem.words(),
+			checked: true,
+		},
+		{
+			task: faker.lorem.words(),
+			checked: false,
+		},
+		{
+			task: faker.lorem.words(),
+			checked: false,
+		},
+	];
+	return (
+		<List
+			size="small"
+			dataSource={data}
+			renderItem={(item) => (
+				<List.Item
+					actions={[
+						<IconButton key={item.task}>
+							<Iconify icon="fontisto:more-v-a" />
+						</IconButton>,
+					]}
+				>
+					<Checkbox
+						onChange={(e) => {
+							item.checked = e.target.checked;
+						}}
+					>
+						{item.task}
+					</Checkbox>
+				</List.Item>
+			)}
+		/>
+	);
+}
diff --git a/apps/react-admin/src/pages/dashboard/analysis/analysis-traffic-card.tsx b/apps/react-admin/src/pages/dashboard/analysis/analysis-traffic-card.tsx
new file mode 100644
index 000000000..71958d392
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/analysis/analysis-traffic-card.tsx
@@ -0,0 +1,23 @@
+import { themeVars } from "@/theme/theme.css";
+import type { ReactNode } from "react";
+
+type Props = {
+	icon: ReactNode;
+	title: string;
+	subtitle: string;
+};
+
+export default function AnalysisTrafficCard({ icon, title, subtitle }: Props) {
+	return (
+		<div
+			className="flex flex-col items-center rounded py-5"
+			style={{
+				border: `1px solid rgba(${themeVars.colors.palette.gray["500Channel"]}, .2)`,
+			}}
+		>
+			<div>{icon}</div>
+			<span className="text-2xl font-bold">{title}</span>
+			<span className="text-sm text-text-secondary">{subtitle}</span>
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/pages/dashboard/analysis/index.tsx b/apps/react-admin/src/pages/dashboard/analysis/index.tsx
new file mode 100644
index 000000000..afbdedad6
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/analysis/index.tsx
@@ -0,0 +1,157 @@
+import glass_bag from "@/assets/images/glass/ic_glass_bag.png";
+import glass_buy from "@/assets/images/glass/ic_glass_buy.png";
+import glass_message from "@/assets/images/glass/ic_glass_message.png";
+import glass_users from "@/assets/images/glass/ic_glass_users.png";
+import { Iconify } from "@/components/icon";
+import ChartBar from "@/pages/components/chart/view/chart-bar";
+import ChartMixed from "@/pages/components/chart/view/chart-mixed";
+import ChartPie from "@/pages/components/chart/view/chart-pie";
+import ChartRadar from "@/pages/components/chart/view/chart-radar";
+import { themeVars } from "@/theme/theme.css";
+import { Card, Col, Row, Typography } from "antd";
+import AnalysisCard from "./analysis-card";
+import AnalysisNews from "./analysis-news";
+import AnalysisOrderTimeline from "./analysis-order-timeline";
+import AnalysisTasks from "./analysis-tasks";
+import AnalysisTrafficCard from "./analysis-traffic-card";
+
+function Analysis() {
+	return (
+		<div className="p-2">
+			<Typography.Title level={2}>Hi, Welcome back 👋</Typography.Title>
+			<Row gutter={[16, 16]} justify="center">
+				<Col lg={6} md={12} span={24}>
+					<AnalysisCard
+						cover={glass_bag}
+						title="714k"
+						subtitle="Weekly Sales"
+						style={{
+							color: themeVars.colors.palette.success.dark,
+							backgroundColor: `rgba(${themeVars.colors.palette.success.defaultChannel}, .2)`,
+						}}
+					/>
+				</Col>
+				<Col lg={6} md={12} span={24}>
+					<AnalysisCard
+						cover={glass_users}
+						title="1.35m"
+						subtitle="New Users"
+						style={{
+							color: themeVars.colors.palette.info.dark,
+							backgroundColor: `rgba(${themeVars.colors.palette.info.defaultChannel}, .2)`,
+						}}
+					/>
+				</Col>
+				<Col lg={6} md={12} span={24}>
+					<AnalysisCard
+						cover={glass_buy}
+						title="1.72m"
+						subtitle="New Orders"
+						style={{
+							color: themeVars.colors.palette.warning.dark,
+							backgroundColor: `rgba(${themeVars.colors.palette.warning.defaultChannel}, .2)`,
+						}}
+					/>
+				</Col>
+				<Col lg={6} md={12} span={24}>
+					<AnalysisCard
+						cover={glass_message}
+						title="234"
+						subtitle="Bug Reports"
+						style={{
+							color: themeVars.colors.palette.error.dark,
+							backgroundColor: `rgba(${themeVars.colors.palette.error.defaultChannel}, .2)`,
+						}}
+					/>
+				</Col>
+			</Row>
+
+			<Row gutter={[16, 16]} className="mt-8" justify="center">
+				<Col span={24} lg={12} xl={16}>
+					<Card title="Website Visits">
+						<ChartMixed />
+					</Card>
+				</Col>
+				<Col span={24} lg={12} xl={8}>
+					<Card title="Current Visits">
+						<ChartPie />
+					</Card>
+				</Col>
+			</Row>
+
+			<Row gutter={[16, 16]} className="mt-8" justify="center">
+				<Col span={24} lg={12} xl={16}>
+					<Card title="Conversion Rates">
+						<ChartBar />
+					</Card>
+				</Col>
+				<Col span={24} lg={12} xl={8}>
+					<Card title="Current Subject">
+						<ChartRadar />
+					</Card>
+				</Col>
+			</Row>
+
+			<Row gutter={[16, 16]} className="mt-8">
+				<Col span={24} lg={12} xl={16}>
+					<Card title="News">
+						<AnalysisNews />
+					</Card>
+				</Col>
+				<Col span={24} lg={12} xl={8}>
+					<Card title="Order Timeline">
+						<AnalysisOrderTimeline />
+					</Card>
+				</Col>
+			</Row>
+
+			<Row gutter={[16, 16]} className="my-8">
+				<Col span={24} lg={12} xl={8}>
+					<Card title="Traffic by Site">
+						<Row gutter={[16, 16]}>
+							<Col span={12}>
+								<AnalysisTrafficCard
+									icon={<Iconify icon="bxl:facebook" size={32} color="#1877f2" />}
+									title="1.95k"
+									subtitle="FaceBook"
+								/>
+							</Col>
+
+							<Col span={12}>
+								<AnalysisTrafficCard
+									icon={<Iconify icon="ant-design:google-outlined" size={32} color="#df3e30" />}
+									title="9.12k"
+									subtitle="Google"
+								/>
+							</Col>
+
+							<Col span={12}>
+								<AnalysisTrafficCard
+									icon={<Iconify icon="eva:linkedin-fill" size={32} color="#006097" />}
+									title="6.98k"
+									subtitle="Linkedin"
+								/>
+							</Col>
+
+							<Col span={12}>
+								<AnalysisTrafficCard
+									icon={<Iconify icon="eva:twitter-fill" size={32} color="#1c9cea" />}
+									title="8.49k"
+									subtitle="Twitter"
+								/>
+							</Col>
+						</Row>
+					</Card>
+				</Col>
+
+				<Col span={24} lg={12} xl={16}>
+					<Card title="Tasks">
+						<AnalysisTasks />
+					</Card>
+				</Col>
+			</Row>
+		</div>
+	);
+}
+
+export default Analysis;
diff --git a/apps/react-admin/src/pages/dashboard/workbench/area-download.tsx b/apps/react-admin/src/pages/dashboard/workbench/area-download.tsx
new file mode 100644
index 000000000..188d13134
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/workbench/area-download.tsx
@@ -0,0 +1,52 @@
+import { Select, Typography } from "antd";
+import { useState } from "react";
+
+import Card from "@/components/card";
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+
+export default function AreaDownload() {
+	const [year, setYear] = useState("2023");
+	const series: Record<string, ApexAxisChartSeries> = {
+		"2022": [
+			{ name: "China", data: [10, 41, 35, 51, 49, 61, 69, 91, 148, 35, 51] },
+			{ name: "America", data: [10, 34, 13, 56, 77, 88, 99, 45, 13, 56, 77] },
+		],
+
+		"2023": [
+			{ name: "China", data: [51, 35, 41, 10, 91, 69, 62, 148, 91, 35, 51] },
+			{ name: "America", data: [56, 13, 34, 10, 77, 99, 88, 45, 13, 56, 77] },
+		],
+	};
+	return (
+		<Card className="flex-col">
+			<header className="flex w-full justify-between self-start">
+				<Typography.Title level={5}>Area Installed</Typography.Title>
+				<Select
+					size="small"
+					defaultValue={year}
+					onChange={(value) => setYear(value)}
+					options={[
+						{ value: 2023, label: "2023" },
+						{ value: 2022, label: "2022" },
+					]}
+				/>
+			</header>
+			<main className="w-full">
+				<ChartArea series={series[year]} />
+			</main>
+		</Card>
+	);
+}
+
+function ChartArea({ series }: { series: ApexAxisChartSeries }) {
+	const chartOptions = useChart({
+		xaxis: {
+			type: "category",
+			categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jut", "Aug", "Sep", "Oct", "Nov", "Dec"],
+		},
+		tooltip: {},
+	});
+
+	return <Chart type="area" series={series} options={chartOptions} height={300} />;
+}
diff --git a/apps/react-admin/src/pages/dashboard/workbench/banner-card.tsx b/apps/react-admin/src/pages/dashboard/workbench/banner-card.tsx
new file mode 100644
index 000000000..6554e45c5
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/workbench/banner-card.tsx
@@ -0,0 +1,250 @@
+import Character3 from "@/assets/images/characters/character_3.png";
+import { Iconify } from "@/components/icon";
+import { useUserInfo } from "@/store/userStore";
+import { themeVars } from "@/theme/theme.css";
+import { Col, Row } from "antd";
+
+export default function BannerCard() {
+	const { username } = useUserInfo();
+
+	const bg = `linear-gradient(135deg, rgba(${themeVars.colors.palette.primary.lightChannel}, .2), rgba(${themeVars.colors.palette.primary.defaultChannel}, .2)) ${themeVars.colors.common.white}`;
+
+	return (
+		<Row className="!mx-0 rounded-2xl p-7" gutter={[16, 16]} justify="space-between" style={{ background: bg }}>
+			<Col span={24} md={12} xl={16} className="flex-1 text-center md:text-left">
+				<div className="mt-4 text-lg font-semibold md:text-xl" style={{ color: themeVars.colors.palette.primary.dark }}>
+					<h4>Welcome back 👋 </h4>
+					<h4>{username}</h4>
+				</div>
+				<div
+					style={{ color: themeVars.colors.palette.primary.dark }}
+					className="mx-auto mb-6 mt-4 max-w-sm text-sm opacity-80 md:mx-0"
+				>
+					Welcome to join the Discord channel to discuss everything about Slash Admin, or you can visite my blog:
+					<div>
+						<a
+							href="https://blog.slashspaces.com"
+							target="_blank"
+							className="text-base opacity-80"
+							style={{ color: themeVars.colors.palette.primary.dark }}
+							rel="noreferrer"
+						>
+							👉 https://blog.slashspaces.com
+						</a>
+					</div>
+				</div>
+				<button
+					type="button"
+					className="font-mediumtext-black m-auto flex items-center justify-center rounded-lg px-2 py-1 shadow-none md:m-0"
+					style={{ backgroundColor: themeVars.colors.palette.primary.default, color: themeVars.colors.common.white }}
+					onClick={() => window.open("https://discord.gg/fXemAXVNDa")}
+				>
+					<Iconify icon="carbon:logo-discord" size={24} />
+					<span className="ml-2 font-black">Join Discord</span>
+				</button>
+			</Col>
+
+			<Col
+				span={24}
+				md={12}
+				xl={8}
+				className="!md:max-w-[320px] mx-auto !max-w-[270px] flex-none items-center justify-center "
+			>
+				<BannerSvg />
+			</Col>
+		</Row>
+	);
+}
+
+function BannerSvg() {
+	return (
+		<svg viewBox="0 0 480 360" className="h-full w-full" xmlns="http://www.w3.org/2000/svg">
+			<title>Banner</title>
+			<defs>
+				<linearGradient id="BG" x1="19.496%" x2="77.479%" y1="71.822%" y2="16.69%">
+					<stop offset="0%" stopColor={themeVars.colors.palette.primary.default} />
+					<stop offset="100%" stopColor={themeVars.colors.palette.primary.default} stopOpacity="0" />
+				</linearGradient>
+			</defs>
+			<path
+				fill="url(#BG)"
+				fillRule="nonzero"
+				d="M0 198.78c0 41.458 14.945 79.236 39.539 107.786 28.214 32.765 69.128 53.365 114.734 53.434a148.44 148.44 0 0056.495-11.036c9.051-3.699 19.182-3.274 27.948 1.107a75.779 75.779 0 0033.957 8.01c5.023 0 9.942-.494 14.7-1.433 13.58-2.67 25.94-8.99 36.09-17.94 6.378-5.627 14.547-8.456 22.897-8.446h.142c27.589 0 53.215-8.732 74.492-23.696 19.021-13.36 34.554-31.696 44.904-53.224C474.92 234.58 480 213.388 480 190.958c0-76.93-59.774-139.305-133.498-139.305-7.516 0-14.88.663-22.063 1.899C305.418 21.42 271.355 0 232.499 0a103.651 103.651 0 00-45.88 10.661c-13.24 6.487-25.011 15.705-34.64 26.939-32.698.544-62.931 11.69-87.676 30.291C25.351 97.155 0 144.882 0 198.781z"
+				opacity="0.2"
+			/>
+			<path
+				fill={themeVars.colors.palette.primary.dark}
+				fillRule="evenodd"
+				d="M109.224 97.41l.812 1.827-.02.009-.061.027-.248.112c-.219.1-.544.25-.968.449l-.849-1.811c.43-.202.762-.355.988-.457l.256-.117.066-.03.024-.01zm-6.771 3.278c.997-.507 1.901-.958 2.7-1.35l.882 1.795c-.791.388-1.687.835-2.675 1.337l-.907-1.782zm-5.356 2.808c.93-.502 1.82-.975 2.665-1.418l.929 1.771c-.838.439-1.72.909-2.644 1.407l-.95-1.76zm-5.274 2.927c.901-.513 1.779-1.007 2.63-1.479l.97 1.749c-.844.468-1.715.958-2.609 1.468l-.99-1.738zm-5.232 3.065c.887-.533 1.758-1.05 2.612-1.55l1.01 1.725c-.847.497-1.712 1.01-2.591 1.539l-1.03-1.714zm-5.117 3.16c.861-.546 1.713-1.079 2.555-1.599l1.05 1.702c-.834.516-1.68 1.044-2.534 1.586l-1.071-1.689zm-5.065 3.301a242.86 242.86 0 012.515-1.661l1.092 1.675a236.91 236.91 0 00-2.494 1.648l-1.113-1.662zm-4.978 3.431c.83-.589 1.66-1.168 2.484-1.736l1.134 1.646c-.817.564-1.638 1.137-2.461 1.721l-1.157-1.631zm-4.873 3.56a197.5 197.5 0 012.427-1.8l1.18 1.615c-.8.585-1.602 1.179-2.404 1.782l-1.203-1.597zm-4.771 3.71c.787-.632 1.576-1.256 2.366-1.87l1.228 1.579c-.782.608-1.563 1.225-2.342 1.85l-1.252-1.559zm-4.651 3.867c.765-.659 1.534-1.31 2.307-1.952l1.279 1.538c-.764.635-1.525 1.278-2.281 1.929l-1.305-1.515zm-4.51 4.035c.739-.688 1.485-1.368 2.236-2.04l1.333 1.491c-.742.664-1.478 1.335-2.208 2.013l-1.362-1.464zm-4.347 4.215a136.43 136.43 0 012.151-2.132l1.392 1.437c-.715.692-1.422 1.392-2.12 2.1l-1.423-1.405zm-4.157 4.411c.674-.751 1.359-1.495 2.053-2.231l1.455 1.371c-.683.725-1.356 1.457-2.019 2.196l-1.489-1.336zm-3.929 4.623c.633-.788 1.279-1.568 1.936-2.341l1.524 1.295a105.43 105.43 0 00-1.9 2.298l-1.56-1.252zm-3.657 4.848a94.278 94.278 0 011.793-2.455l1.596 1.205c-.6.794-1.185 1.595-1.754 2.403l-1.635-1.153zm-3.328 5.084a83.294 83.294 0 011.617-2.57l1.673 1.097a80.437 80.437 0 00-1.578 2.507l-1.712-1.034zm-2.94 5.341c.45-.907.922-1.806 1.414-2.698l1.752.965a69.62 69.62 0 00-1.375 2.623l-1.791-.89zm-2.465 5.583c.366-.948.755-1.889 1.168-2.823l1.83.808c-.4.906-.778 1.817-1.132 2.735l-1.866-.72zm-1.903 5.808c.265-.984.558-1.962.876-2.932l1.9.624a54.83 54.83 0 00-.845 2.828l-1.93-.52zm-1.253 5.993c.15-1.012.331-2.018.54-3.017l1.958.41a50.126 50.126 0 00-.52 2.901l-1.978-.294zm-.467 4.577c.028-.513.065-1.024.109-1.535l1.992.174c-.042.489-.077.98-.104 1.472-.028.496-.04.986-.037 1.469l-2 .014c-.003-.526.01-1.057.04-1.594zm.822 7.749a22.495 22.495 0 01-.643-3.074l1.982-.272c.131.959.328 1.892.585 2.801l-1.924.545zm2.498 5.699a23.889 23.889 0 01-1.444-2.77l1.83-.805c.382.867.824 1.713 1.324 2.538l-1.71 1.037zm3.777 4.87a30.2 30.2 0 01-2.019-2.327l1.578-1.23a28.113 28.113 0 001.885 2.173l-1.444 1.384zm4.602 4.048a41.441 41.441 0 01-2.349-1.902l1.316-1.506c.706.617 1.452 1.22 2.235 1.809l-1.202 1.599zm5.09 3.361a56.872 56.872 0 01-2.58-1.598l1.1-1.671a54.91 54.91 0 002.488 1.542l-1.008 1.727zm5.371 2.823a75.691 75.691 0 01-2.716-1.355l.929-1.771c.857.449 1.74.889 2.645 1.319l-.858 1.807zm5.542 2.408c-.95-.379-1.882-.766-2.794-1.162l.795-1.834c.894.387 1.807.767 2.74 1.138l-.741 1.858zm294.857-2.594c.244.101.598.253 1.048.457l-.828 1.821a31.67 31.67 0 00-1.241-.534l-.061-.025-.014-.005-.003-.001.357-.934.356-.934h.001l.002.001.006.002.021.008.075.03c.065.025.159.063.281.114zm-289.206 4.68c-.96-.329-1.906-.664-2.837-1.007l.692-1.877c.915.337 1.846.668 2.793.992l-.648 1.892zm293.015-2.865c.807.425 1.708.923 2.682 1.497l-1.016 1.723a62.506 62.506 0 00-2.598-1.45l.932-1.77zm-287.286 4.698c-.965-.289-1.918-.583-2.859-.884l.609-1.905c.928.296 1.87.587 2.824.873l-.574 1.916zm292.565-1.59a69.641 69.641 0 012.522 1.724l-1.165 1.626a66.44 66.44 0 00-2.449-1.674l1.092-1.676zM69.05 221.541c-.967-.256-1.924-.517-2.87-.783l.54-1.926c.938.264 1.885.522 2.842.776l-.512 1.933zm5.833 1.464c-.977-.233-1.945-.469-2.905-.709l.486-1.94c.952.238 1.912.472 2.881.703l-.462 1.946zm5.867 1.326c-.988-.213-1.97-.429-2.944-.649l.44-1.951c.968.219 1.943.434 2.925.645l-.42 1.955zm280.057-2.439a67.422 67.422 0 012.356 1.94l-1.306 1.515a65.709 65.709 0 00-2.286-1.883l1.236-1.572zM86.623 225.54a333.57 333.57 0 01-2.954-.595l.403-1.959c.973.201 1.952.398 2.937.591l-.386 1.963zm5.88 1.112c-.985-.179-1.967-.361-2.944-.546l.371-1.965c.973.184 1.95.365 2.931.543l-.357 1.968zm5.904 1.035c-.983-.167-1.963-.335-2.94-.506l.345-1.97c.973.17 1.95.338 2.93.504l-.335 1.972zm267.031-1.801a64.195 64.195 0 012.181 2.162l-1.442 1.386a63.013 63.013 0 00-2.113-2.095l1.374-1.453zm-261.112 2.771c-.989-.157-1.976-.316-2.959-.477l.323-1.974c.981.161 1.964.319 2.95.476l-.314 1.975zm5.919.916c-.99-.149-1.978-.3-2.965-.453l.306-1.976c.984.152 1.969.302 2.957.451l-.298 1.978zm5.92.873c-.987-.143-1.975-.287-2.961-.432l.292-1.979c.984.145 1.969.289 2.955.431l-.286 1.98zm5.929.84a781.94 781.94 0 01-2.965-.417l.281-1.98 2.96.417-.276 1.98zm5.927.818c-.987-.135-1.976-.27-2.965-.407l.273-1.981c.988.136 1.976.272 2.962.406l-.27 1.982zm241.664-1.8a62.33 62.33 0 011.957 2.359l-1.571 1.238a58.92 58.92 0 00-1.893-2.282l1.507-1.315zm-235.74 2.603l-2.957-.4.269-1.982 2.956.4-.268 1.982zm5.935.801l-2.964-.4.267-1.982 2.965.4-.268 1.982zm5.928.805l-2.977-.406.269-1.982 2.98.407-.272 1.981zm5.915.821l-2.962-.414.275-1.981c.993.138 1.982.276 2.966.415l-.279 1.98zm5.896.848c-.971-.143-1.948-.285-2.93-.426l.284-1.98c.985.142 1.964.284 2.937.427l-.291 1.979zm5.922.895c-.972-.151-1.952-.302-2.94-.451l.299-1.977c.99.149 1.973.3 2.949.452l-.308 1.976zm209.938-1.957a59.573 59.573 0 011.709 2.551l-1.69 1.069a56.139 56.139 0 00-1.651-2.463l1.632-1.157zm-204.034 2.911c-.974-.163-1.958-.325-2.952-.486l.319-1.974c.998.161 1.986.324 2.965.488l-.332 1.972zm5.881 1.035a369.37 369.37 0 00-2.965-.534l.346-1.97c1.006.177 2 .356 2.982.537l-.363 1.967zm5.85 1.143c-.972-.201-1.959-.399-2.961-.595l.383-1.963c1.009.197 2.004.397 2.984.6l-.406 1.958zm5.81 1.291c-.958-.228-1.935-.453-2.932-.674l.433-1.953c1.006.223 1.995.451 2.964.682l-.465 1.945zm5.75 1.497a126.97 126.97 0 00-2.901-.788l.502-1.936c1.006.261 1.988.527 2.947.8l-.548 1.924zm184.026-2.689c.494.881.972 1.787 1.431 2.718l-1.794.884a54.93 54.93 0 00-1.381-2.623l1.744-.979zm-178.387 4.477a83.817 83.817 0 00-2.858-.956l.602-1.907c1.007.317 1.983.643 2.926.978l-.67 1.885zm5.402 2.214a50.388 50.388 0 00-2.665-1.174l.755-1.852a52.08 52.08 0 012.773 1.222l-.863 1.804zm175.7-1.183c.397.928.775 1.88 1.132 2.854l-1.878.687a55.769 55.769 0 00-1.093-2.754l1.839-.787zm-171.918 3.282a27.52 27.52 0 00-1.18-.728l1.008-1.727c.438.255.86.515 1.266.781.386.252.788.506 1.206.763l-1.045 1.705a54.43 54.43 0 01-1.255-.794zm6.674 3.795a88.769 88.769 0 01-2.71-1.43l.964-1.752c.839.462 1.723.928 2.65 1.398l-.904 1.784zm167.354-1.314c.295.964.57 1.949.822 2.955l-1.94.486a56.86 56.86 0 00-.794-2.854l1.912-.587zm-161.766 3.964c-.978-.436-1.926-.872-2.842-1.305l.856-1.808c.902.427 1.836.856 2.801 1.287l-.815 1.826zm5.624 2.389c-.977-.396-1.932-.792-2.864-1.188l.781-1.841c.922.391 1.867.783 2.834 1.175l-.751 1.854zm5.702 2.219c-.979-.366-1.942-.734-2.887-1.101l.726-1.864c.936.364 1.891.728 2.863 1.092l-.702 1.873zm151.931-2.627c.195.988.367 1.994.517 3.019l-1.979.289a60 60 0 00-.5-2.921l1.962-.387zm-146.173 4.709a282.93 282.93 0 01-2.913-1.035l.68-1.881c.95.343 1.915.686 2.893 1.028l-.66 1.888zm5.793 1.961c-.989-.325-1.966-.651-2.932-.977l.642-1.895c.959.325 1.931.649 2.913.971l-.623 1.901zm5.808 1.851a366.91 366.91 0 01-2.928-.92l.607-1.905c.961.306 1.932.611 2.912.915l-.591 1.91zm135.458-2.462c.049.509.093 1.023.131 1.542a15.1 15.1 0 01.032 1.682l-1.998-.075c.017-.471.008-.958-.029-1.461a59 59 0 00-.127-1.495l1.991-.193zm-129.616 4.222a452.59 452.59 0 01-2.926-.869l.577-1.915c.963.29 1.934.578 2.911.864l-.562 1.92zm5.875 1.674c-.982-.272-1.957-.546-2.927-.823l.548-1.923c.965.275 1.936.548 2.913.819l-.534 1.927zm5.902 1.593a521.99 521.99 0 01-2.943-.783l.521-1.931c.972.262 1.949.522 2.93.779l-.508 1.935zm117.481-1.038a12.02 12.02 0 01-1.365 2.996l-1.691-1.069a9.965 9.965 0 001.139-2.499l1.917.572zm-111.556 2.55c-.993-.246-1.982-.495-2.968-.747l.495-1.938c.981.251 1.966.499 2.955.744l-.482 1.941zm5.937 1.432c-.995-.233-1.987-.469-2.977-.708l.469-1.944c.985.238 1.973.472 2.964.704l-.456 1.948zm5.954 1.352a461.96 461.96 0 01-2.98-.667l.443-1.95c.987.224 1.976.445 2.967.663l-.43 1.954zm5.976 1.272a440.55 440.55 0 01-2.989-.626l.416-1.956c.992.211 1.984.419 2.976.623l-.403 1.959zm90.244-1.087a17.352 17.352 0 01-2.54 1.996l-1.091-1.676a15.272 15.272 0 002.247-1.764l1.384 1.444zm-84.25 2.277c-1-.191-2.001-.386-3.002-.585l.39-1.962c.996.198 1.992.392 2.987.582l-.375 1.965zm6.003 1.101c-.999-.175-1.999-.355-3.001-.539l.361-1.967c.997.183 1.993.362 2.987.537l-.347 1.969zm72.9.168c-.911.427-1.878.819-2.897 1.178l-.663-1.887a29.338 29.338 0 002.71-1.102l.85 1.811zm-66.872.844c-1-.16-2.003-.324-3.007-.493l.33-1.972c1 .168 1.997.331 2.992.49l-.315 1.975zm6.051.913a350.993 350.993 0 01-3.025-.444l.299-1.977c1.006.152 2.009.299 3.007.441l-.281 1.98zm54.962.332c-.979.263-1.996.501-3.05.716l-.4-1.96a50.079 50.079 0 002.932-.688l.518 1.932zm-48.896.472a292.674 292.674 0 01-3.049-.39l.263-1.982c1.015.135 2.025.264 3.03.387l-.244 1.985zm6.076.684a273.234 273.234 0 01-3.058-.328l.224-1.987c1.019.115 2.031.223 3.037.325l-.203 1.99zm36.729.101c-.989.152-2.005.287-3.047.406l-.226-1.988a74.52 74.52 0 002.968-.395l.305 1.977zm-30.642.446a247.153 247.153 0 01-3.048-.255l.18-1.992c1.015.091 2.023.176 3.023.253l-.155 1.994zm6.099.39a193.964 193.964 0 01-3.036-.173l.128-1.995c1.012.064 2.015.122 3.007.171l-.099 1.997zm18.393-.133c-.991.079-2.002.144-3.032.196l-.101-1.997a107.33 107.33 0 002.975-.193l.158 1.994zm-12.279.337a175.75 175.75 0 01-3.028-.075l.067-1.999c1.01.034 2.008.059 2.993.075l-.032 1.999zm6.131-.023c-.993.025-2.002.039-3.025.043l-.007-2c1.009-.004 2.003-.018 2.981-.043l.051 2z"
+				clipRule="evenodd"
+				opacity="0.24"
+			/>
+			<path
+				fill="#fff"
+				d="M47.943 122.571L96.231 273.55a11.4 11.4 0 0011.786 7.805l63.326-5.36 148.013-12.644a11.316 11.316 0 009.904-7.823c.456-1.421.627-2.918.503-4.405a12.314 12.314 0 00-.729-3.122l-11.838-31.221-21.412-57.238-16.599-44.23a11.37 11.37 0 00-10.641-7.362H58.741a11.345 11.345 0 00-11.344 11.343c.016 1.114.2 2.219.546 3.278z"
+			/>
+			<path
+				fill="#fff"
+				d="M47.943 122.571L96.231 273.55a11.4 11.4 0 0011.786 7.805l63.326-5.36 148.013-12.644a11.316 11.316 0 009.904-7.823c.456-1.421.627-2.918.503-4.405a12.314 12.314 0 00-.729-3.122l-11.838-31.221-21.412-57.238-16.599-44.23a11.37 11.37 0 00-10.641-7.362H58.741a11.345 11.345 0 00-11.344 11.343c.016 1.114.2 2.219.546 3.278z"
+			/>
+			<path
+				fill="url(#paint0_linear_1_51)"
+				d="M170.575 276.06l-62.558 5.295a11.4 11.4 0 01-11.785-7.805L47.942 122.571a11.028 11.028 0 01-.546-3.278A11.34 11.34 0 0158.74 107.95h57.453l54.382 168.11z"
+			/>
+			<path
+				fill="#F4F6F8"
+				d="M227.879 191.221c2.613-.162 4.368-2.749 3.553-5.237l-8.483-25.895a4.002 4.002 0 00-3.993-2.75l-61.621 2.961c-2.666.128-4.461 2.782-3.588 5.304l9.248 26.717a3.999 3.999 0 004.028 2.683l60.856-3.783z"
+			/>
+			<path
+				fill="#DFE3E8"
+				d="M244.879 239.221c2.613-.162 4.368-2.749 3.553-5.237l-8.483-25.895a4.002 4.002 0 00-3.993-2.75l-61.621 2.961c-2.666.128-4.461 2.782-3.588 5.304l9.248 26.717a3.999 3.999 0 004.028 2.683l60.856-3.783z"
+			/>
+			<g filter="url(#filter0_f_1_51)" opacity="0.4">
+				<path
+					fill="#919EAB"
+					d="M253.012 134.539l15.948 52.893a4.007 4.007 0 003.903 2.94l39.559-1.142a2 2 0 001.816-2.7l-20.001-53.4a2 2 0 00-1.755-1.295l-35.906-2.109a3.612 3.612 0 00-3.059 1.461 3.614 3.614 0 00-.505 3.352z"
+				/>
+			</g>
+			<path
+				fill="#fff"
+				d="M330.082 174.424l-16.495-46.701a4.03 4.03 0 00-3.512-2.732l-69.518-4.111a3.676 3.676 0 00-3.061 1.481 3.663 3.663 0 00-.53 3.358l15.949 52.92a4.057 4.057 0 003.902 2.966l70.091-2.108a3.663 3.663 0 002.898-1.716 3.667 3.667 0 00.276-3.357z"
+			/>
+			<path
+				fill={themeVars.colors.palette.primary.dark}
+				d="M295.375 166.976c.478 1.237.718 1.856 1.229 2.206.511.351 1.174.351 2.501.351h.32c2.648 0 3.972 0 4.568-.87.596-.869.118-2.104-.837-4.574l-6.427-16.612c-.479-1.238-.719-1.856-1.23-2.207-.511-.35-1.174-.35-2.501-.35h-.32c-2.648 0-3.972 0-4.568.87-.596.869-.118 2.104.837 4.573l6.428 16.613z"
+			/>
+			<g opacity="0.48">
+				<path
+					fill="url(#paint1_linear_1_51)"
+					d="M306.33 166.969c.478 1.241.717 1.861 1.228 2.212.512.351 1.176.351 2.505.351h.314c2.649 0 3.973 0 4.569-.869.596-.87.118-2.105-.839-4.574l-1.586-4.099c-.479-1.237-.718-1.855-1.229-2.205-.511-.351-1.175-.351-2.501-.351h-.305c-2.644 0-3.966 0-4.562.868-.596.868-.121 2.102.829 4.569l1.577 4.098z"
+				/>
+				<path
+					fill="url(#paint2_linear_1_51)"
+					d="M284.397 166.971c.478 1.24.717 1.86 1.228 2.211.512.351 1.176.351 2.505.351h.315c2.648 0 3.973 0 4.568-.87.596-.87.118-2.105-.838-4.575l-2.705-6.986c-.479-1.237-.718-1.855-1.229-2.205-.511-.35-1.175-.35-2.501-.35h-.303c-2.645 0-3.967 0-4.563.868-.596.868-.12 2.102.831 4.57l2.692 6.986z"
+				/>
+				<path
+					fill="url(#paint3_linear_1_51)"
+					d="M273.442 166.976c.479 1.237.718 1.856 1.229 2.206.511.351 1.175.351 2.502.351h.32c2.648 0 3.972 0 4.568-.87.596-.869.118-2.104-.838-4.574l-9.445-24.417c-.479-1.238-.718-1.856-1.229-2.207-.511-.35-1.175-.35-2.502-.35h-.32c-2.648 0-3.972 0-4.568.869-.596.87-.118 2.104.837 4.574l9.446 24.418z"
+				/>
+				<path
+					fill="url(#paint4_linear_1_51)"
+					d="M262.463 166.974c.479 1.239.718 1.858 1.229 2.208.511.351 1.175.351 2.502.351h.322c2.647 0 3.97 0 4.566-.869.596-.869.119-2.104-.835-4.573l-12.935-33.472c-.479-1.238-.718-1.857-1.229-2.207-.511-.351-1.175-.351-2.502-.351h-.322c-2.647 0-3.97 0-4.566.869-.596.869-.119 2.104.835 4.573l12.935 33.471z"
+				/>
+			</g>
+			<g fill="#fff" fillRule="evenodd" clipRule="evenodd" opacity="0.4">
+				<path d="M78.02 155.171a15.22 15.22 0 11.312 1.015l-.156-.495-.157-.52zm15.194-4.189l-3.59-11.525a12.641 12.641 0 013.121-.547 12.102 12.102 0 0111.994 8.456c.312 1.014.496 2.062.546 3.122a13.006 13.006 0 01-.286 3.148 11.815 11.815 0 01-2.914 5.516 11.914 11.914 0 01-11.525 3.59 13.21 13.21 0 01-2.94-1.067 12.76 12.76 0 01-2.602-1.821 12.257 12.257 0 01-3.33-5.203l11.526-3.669zM111.296 251.773a15.298 15.298 0 0129.321-8.429v.494c0 .156 0 .338.182.494a15.272 15.272 0 01-28.619 10.407c-.078-.247-.149-.495-.221-.742a28.499 28.499 0 00-.221-.741 16.041 16.041 0 01-.171-.595 10.734 10.734 0 00-.271-.888zm11.187-14.7l3.746 11.474.079-.026 3.746 11.5a11.965 11.965 0 006.921-6.01 11.83 11.83 0 001.04-2.966c.23-1.024.317-2.075.26-3.122a12.07 12.07 0 00-9.548-11.188 12.42 12.42 0 00-6.244.338zM100.21 187.509a15.272 15.272 0 00-4.473 10.799v1.066a15.272 15.272 0 1030.544 0v-1.066a15.271 15.271 0 00-26.071-10.799zm10.591 11.293V186.73c2.112.016 4.183.581 6.01 1.639a11.366 11.366 0 012.602 1.925 12.027 12.027 0 01-.005 17.068 12.022 12.022 0 01-5.433 3.096 11.575 11.575 0 01-6.244 0 12.202 12.202 0 01-2.914-1.171l5.984-10.485z" />
+			</g>
+			<path fill="url(#paint5_linear_1_51)" d="M151.154 76h-41.55l12.645 7.727L151.154 76z" />
+			<path fill="url(#paint6_linear_1_51)" d="M151.154 76l-26.668 12.332 4.501 15.715L151.154 76z" />
+			<path fill="url(#paint7_linear_1_51)" d="M117.435 95.279l7.051-6.947L151.154 76 117.435 95.28z" />
+			<path
+				fill={themeVars.colors.palette.primary.dark}
+				d="M117.435 95.279l7.051-6.947L151.154 76l-28.905 7.727-4.814 11.552z"
+			/>
+			<defs>
+				<filter
+					id="filter0_f_1_51"
+					width="101.56"
+					height="100.65"
+					x="232.807"
+					y="109.722"
+					colorInterpolationFilters="sRGB"
+					filterUnits="userSpaceOnUse"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+					<feGaussianBlur result="effect1_foregroundBlur_1_51" stdDeviation="10" />
+				</filter>
+				<linearGradient
+					id="paint0_linear_1_51"
+					x1="47.397"
+					x2="47.397"
+					y1="107.95"
+					y2="281.395"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor={themeVars.colors.palette.primary.light} />
+					<stop offset="1" stopColor={themeVars.colors.palette.primary.dark} />
+				</linearGradient>
+				<linearGradient
+					id="paint1_linear_1_51"
+					x1="248.43"
+					x2="248.43"
+					y1="128.061"
+					y2="169.533"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor={themeVars.colors.palette.primary.light} />
+					<stop offset="1" stopColor={themeVars.colors.palette.primary.dark} />
+				</linearGradient>
+				<linearGradient
+					id="paint2_linear_1_51"
+					x1="248.43"
+					x2="248.43"
+					y1="128.061"
+					y2="169.533"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor={themeVars.colors.palette.primary.light} />
+					<stop offset="1" stopColor={themeVars.colors.palette.primary.dark} />
+				</linearGradient>
+				<linearGradient
+					id="paint3_linear_1_51"
+					x1="248.43"
+					x2="248.43"
+					y1="128.061"
+					y2="169.533"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor={themeVars.colors.palette.primary.light} />
+					<stop offset="1" stopColor={themeVars.colors.palette.primary.dark} />
+				</linearGradient>
+				<linearGradient
+					id="paint4_linear_1_51"
+					x1="248.43"
+					x2="248.43"
+					y1="128.061"
+					y2="169.533"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor={themeVars.colors.palette.primary.light} />
+					<stop offset="1" stopColor={themeVars.colors.palette.primary.dark} />
+				</linearGradient>
+				<linearGradient
+					id="paint5_linear_1_51"
+					x1="109.604"
+					x2="109.604"
+					y1="76"
+					y2="104.047"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor={themeVars.colors.palette.primary.light} />
+					<stop offset="1" stopColor={themeVars.colors.palette.primary.dark} />
+				</linearGradient>
+				<linearGradient
+					id="paint6_linear_1_51"
+					x1="109.604"
+					x2="109.604"
+					y1="76"
+					y2="104.047"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor={themeVars.colors.palette.primary.light} />
+					<stop offset="1" stopColor={themeVars.colors.palette.primary.dark} />
+				</linearGradient>
+				<linearGradient
+					id="paint7_linear_1_51"
+					x1="109.604"
+					x2="109.604"
+					y1="76"
+					y2="104.047"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor={themeVars.colors.palette.primary.light} />
+					<stop offset="1" stopColor={themeVars.colors.palette.primary.dark} />
+				</linearGradient>
+			</defs>
+			<image href={Character3} height="300" x="312" y="30" />
+		</svg>
+	);
+}
diff --git a/apps/react-admin/src/pages/dashboard/workbench/carousel-card.tsx b/apps/react-admin/src/pages/dashboard/workbench/carousel-card.tsx
new file mode 100644
index 000000000..b10e076b1
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/workbench/carousel-card.tsx
@@ -0,0 +1,28 @@
+import { Carousel } from "antd";
+
+export default function CarouselCard() {
+	const contentStyle: React.CSSProperties = {
+		margin: 0,
+		height: "160px",
+		color: "#000000",
+		lineHeight: "160px",
+		textAlign: "center",
+		background: "#364d79",
+	};
+	return (
+		<Carousel>
+			<div>
+				<h3 style={contentStyle}>1</h3>
+			</div>
+			<div>
+				<h3 style={contentStyle}>2</h3>
+			</div>
+			<div>
+				<h3 style={contentStyle}>3</h3>
+			</div>
+			<div>
+				<h3 style={contentStyle}>4</h3>
+			</div>
+		</Carousel>
+	);
+}
diff --git a/apps/react-admin/src/pages/dashboard/workbench/conversion_applications.tsx b/apps/react-admin/src/pages/dashboard/workbench/conversion_applications.tsx
new file mode 100644
index 000000000..3df78cc38
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/workbench/conversion_applications.tsx
@@ -0,0 +1,55 @@
+import { Iconify } from "@/components/icon";
+import { themeVars } from "@/theme/theme.css";
+import { Progress } from "antd";
+
+export function Conversion() {
+	return (
+		<Basic
+			percent={48}
+			title="38,566"
+			subtitle="Conversion"
+			iconify="tabler:user-filled"
+			bg={themeVars.colors.palette.primary.default}
+			strokeColor={themeVars.colors.palette.primary.light}
+		/>
+	);
+}
+export function Applications() {
+	return (
+		<Basic
+			percent={75}
+			title="45,566"
+			subtitle="Applications"
+			iconify="ic:round-email"
+			bg={themeVars.colors.palette.info.default}
+			strokeColor={themeVars.colors.palette.info.light}
+		/>
+	);
+}
+
+type Props = {
+	percent: number;
+	title: string;
+	subtitle: string;
+	iconify: string;
+	bg?: string;
+	strokeColor?: string;
+};
+function Basic({ percent, title, subtitle, iconify, bg, strokeColor }: Props) {
+	const format = (val?: number) => <span style={{ color: themeVars.colors.background.default }}>{val}%</span>;
+	return (
+		<div
+			className="relative flex items-center rounded-2xl p-6"
+			style={{ background: bg, color: themeVars.colors.background.default }}
+		>
+			<Progress type="circle" size={70} percent={percent} format={format} strokeColor={strokeColor} />
+			<div className="ml-2 flex flex-col">
+				<span className="text-2xl font-bold">{title}</span>
+				<span className="opacity-50">{subtitle}</span>
+			</div>
+			<div className="absolute right-0">
+				<Iconify icon={iconify} style={{ opacity: 0.08 }} size={100} />
+			</div>
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/pages/dashboard/workbench/current-download.tsx b/apps/react-admin/src/pages/dashboard/workbench/current-download.tsx
new file mode 100644
index 000000000..2606324ee
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/workbench/current-download.tsx
@@ -0,0 +1,56 @@
+import { Typography } from "antd";
+
+import Card from "@/components/card";
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+
+export default function CurrentDownload() {
+	return (
+		<Card className="flex-col">
+			<header className="self-start">
+				<Typography.Title level={5}>Current Download</Typography.Title>
+			</header>
+			<main>
+				<ChartDonut />
+			</main>
+		</Card>
+	);
+}
+
+const series = [44, 55, 13, 43];
+function ChartDonut() {
+	const chartOptions = useChart({
+		labels: ["Mac", "Window", "IOS", "Android"],
+		stroke: {
+			show: false,
+		},
+		legend: {
+			position: "bottom",
+			horizontalAlign: "center",
+		},
+		tooltip: {
+			fillSeriesColor: false,
+		},
+		chart: {
+			width: 240,
+		},
+		plotOptions: {
+			pie: {
+				donut: {
+					size: "90%",
+					labels: {
+						total: {
+							fontSize: "12px",
+						},
+						value: {
+							fontSize: "18px",
+							fontWeight: 700,
+						},
+					},
+				},
+			},
+		},
+	});
+
+	return <Chart type="donut" series={series} options={chartOptions} height={360} />;
+}
diff --git a/apps/react-admin/src/pages/dashboard/workbench/index.tsx b/apps/react-admin/src/pages/dashboard/workbench/index.tsx
new file mode 100644
index 000000000..499315e04
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/workbench/index.tsx
@@ -0,0 +1,91 @@
+import { Col, Row, Space } from "antd";
+
+import AreaDownload from "./area-download";
+import BannerCard from "./banner-card";
+import { Applications, Conversion } from "./conversion_applications";
+import CurrentDownload from "./current-download";
+import NewInvoice from "./new-invoice";
+import TopAuthor from "./top-authors";
+import TopInstalled from "./top-installed";
+import TopRelated from "./top-related";
+import TotalCard from "./total-card";
+
+function Workbench() {
+	return (
+		<div className="p-2">
+			<Row gutter={[16, 16]} justify="center">
+				<Col span={24} lg={16}>
+					<BannerCard />
+				</Col>
+				<Col span={24} lg={8}>
+					<Space direction="vertical" size="large" className="h-full w-full justify-center">
+						<Conversion />
+						<Applications />
+					</Space>
+				</Col>
+			</Row>
+
+			<Row gutter={[16, 16]} className="mt-4" justify="center">
+				<Col span={24} md={8}>
+					<TotalCard
+						title="Total Active Users"
+						increase
+						count="18,765"
+						percent="2.6%"
+						chartData={[22, 8, 35, 50, 82, 84, 77, 12, 87, 43]}
+					/>
+				</Col>
+
+				<Col span={24} md={8}>
+					<TotalCard
+						title="Total Installed"
+						increase
+						count="4,876"
+						percent="0.2%"
+						chartData={[45, 52, 38, 24, 33, 26, 21, 20, 6]}
+					/>
+				</Col>
+
+				<Col span={24} md={8}>
+					<TotalCard
+						title="Total Downloads"
+						increase={false}
+						count="678"
+						percent="0.1%"
+						chartData={[35, 41, 62, 42, 13, 18, 29, 37, 36]}
+					/>
+				</Col>
+			</Row>
+
+			<Row gutter={[16, 16]} className="mt-4" justify="center">
+				<Col span={24} md={12} lg={8}>
+					<CurrentDownload />
+				</Col>
+				<Col span={24} md={12} lg={16}>
+					<AreaDownload />
+				</Col>
+			</Row>
+
+			<Row gutter={[16, 16]} className="mt-4" justify="center">
+				<Col span={24} md={12} lg={16}>
+					<NewInvoice />
+				</Col>
+				<Col span={24} md={12} lg={8}>
+					<TopRelated />
+				</Col>
+			</Row>
+
+			<Row gutter={[16, 16]} className="mt-4" justify="center">
+				<Col span={24} md={12}>
+					<TopInstalled />
+				</Col>
+
+				<Col span={24} md={12}>
+					<TopAuthor />
+				</Col>
+			</Row>
+		</div>
+	);
+}
+
+export default Workbench;
diff --git a/apps/react-admin/src/pages/dashboard/workbench/new-invoice.tsx b/apps/react-admin/src/pages/dashboard/workbench/new-invoice.tsx
new file mode 100644
index 000000000..62e15f428
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/workbench/new-invoice.tsx
@@ -0,0 +1,110 @@
+import { Space, Tag, Typography } from "antd";
+import Table, { type ColumnsType } from "antd/es/table";
+
+import Card from "@/components/card";
+import { IconButton, Iconify } from "@/components/icon";
+import Scrollbar from "@/components/scrollbar";
+
+interface DataType {
+	key: string;
+	id: string;
+	category: string;
+	price: string;
+	status: string;
+}
+
+export default function NewInvoice() {
+	const columns: ColumnsType<DataType> = [
+		{
+			title: "InvoiceId",
+			dataIndex: "id",
+			key: "id",
+			render: (text) => <span>{text}</span>,
+		},
+		{
+			title: "Category",
+			dataIndex: "category",
+			key: "category",
+		},
+		{
+			title: "Price",
+			dataIndex: "price",
+			key: "price",
+			render: (text) => <span>{text}</span>,
+		},
+		{
+			title: "Status",
+			key: "status",
+			dataIndex: "status",
+			render: (_status) => {
+				const status = _status as string;
+				let color = "success";
+				if (status === "Progress") color = "gold";
+				if (status === "Out of Date") color = "red";
+				return <Tag color={color}>{status}</Tag>;
+			},
+		},
+		{
+			title: "Action",
+			key: "action",
+			render: () => (
+				<Space size="middle">
+					<IconButton>
+						<Iconify icon="fontisto:more-v-a" />
+					</IconButton>
+				</Space>
+			),
+		},
+	];
+
+	const data: DataType[] = [
+		{
+			key: "1",
+			id: "INV-1990",
+			category: "Android",
+			price: "$83.74",
+			status: "Paid",
+		},
+		{
+			key: "2",
+			id: "INV-1991",
+			category: "Mac",
+			price: "$97.14",
+			status: "Out of Date",
+		},
+		{
+			key: "3",
+			id: "INV-1992",
+			category: "Windows",
+			price: "$68.71",
+			status: "Progress",
+		},
+		{
+			key: "4",
+			id: "INV-1993",
+			category: "Android",
+			price: "$85.21",
+			status: "Paid",
+		},
+		{
+			key: "5",
+			id: "INV-1994",
+			category: "Mac",
+			price: "$53.17",
+			status: "Paid",
+		},
+	];
+
+	return (
+		<Card className="flex-col">
+			<header className="self-start">
+				<Typography.Title level={5}>New Invoice</Typography.Title>
+			</header>
+			<main className="w-full">
+				<Scrollbar>
+					<Table columns={columns} dataSource={data} />
+				</Scrollbar>
+			</main>
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/dashboard/workbench/top-authors.tsx b/apps/react-admin/src/pages/dashboard/workbench/top-authors.tsx
new file mode 100644
index 000000000..118751daa
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/workbench/top-authors.tsx
@@ -0,0 +1,59 @@
+import Card from "@/components/card";
+import { Iconify } from "@/components/icon";
+import { themeVars } from "@/theme/theme.css";
+import { faker } from "@faker-js/faker";
+import { Typography } from "antd";
+
+export default function TopAuthor() {
+	const getTrophyIconColor = (index: number) => {
+		switch (index) {
+			case 1:
+				return {
+					color: themeVars.colors.palette.info.default,
+					bg: `rgba(${themeVars.colors.palette.info.defaultChannel}, .4)`,
+				};
+			case 2: {
+				return {
+					color: themeVars.colors.palette.error.default,
+					bg: `rgba(${themeVars.colors.palette.error.defaultChannel}, .4)`,
+				};
+			}
+			default:
+				return {
+					color: themeVars.colors.palette.success.default,
+					bg: `rgba(${themeVars.colors.palette.success.defaultChannel}, .4)`,
+				};
+		}
+	};
+	return (
+		<Card className="flex-col">
+			<header className="self-start">
+				<Typography.Title level={5}>Top Authors</Typography.Title>
+			</header>
+			<main className="w-full">
+				{new Array(3).fill("").map((_, index) => (
+					// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+					<div key={index} className="mb-4 flex">
+						<img src={faker.image.avatarGitHub()} alt="" className="h-10 w-10 rounded-full" />
+						<div className="ml-2 flex flex-col">
+							<span>{faker.person.fullName()}</span>
+							<div className="flex items-center  text-gray">
+								<Iconify icon="icon-park-solid:like" size={14} />
+								<span className="ml-2">{faker.number.float({ min: 3, max: 9, multipleOf: 3 })}k</span>
+							</div>
+						</div>
+
+						<div
+							className="ml-auto flex h-10 w-10 items-center justify-center rounded-full"
+							style={{
+								background: getTrophyIconColor(index).bg,
+							}}
+						>
+							<Iconify icon="solar:cup-star-bold" size={24} color={getTrophyIconColor(index).color} />
+						</div>
+					</div>
+				))}
+			</main>
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/dashboard/workbench/top-installed.tsx b/apps/react-admin/src/pages/dashboard/workbench/top-installed.tsx
new file mode 100644
index 000000000..bfa986ffa
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/workbench/top-installed.tsx
@@ -0,0 +1,89 @@
+import { Typography } from "antd";
+import type { ReactNode } from "react";
+
+import Card from "@/components/card";
+import { Iconify } from "@/components/icon";
+
+const dataSource = [
+	{
+		country: "Germany",
+		iconify: "twemoji:flag-germany",
+		android: "9.91k",
+		windows: "1.95k",
+		ios: "1.95k",
+	},
+	{
+		country: "China",
+		iconify: "twemoji:flag-china",
+		android: "1.95k",
+		windows: "9.25k",
+		ios: "7.95k",
+	},
+	{
+		country: "Australia",
+		iconify: "twemoji:flag-australia",
+		android: "3.91k",
+		windows: "2.95k",
+		ios: "4.95k",
+	},
+	{
+		country: "France",
+		iconify: "twemoji:flag-france",
+		android: "3.28k",
+		windows: "2.29k",
+		ios: "8.95k",
+	},
+	{
+		country: "USA",
+		iconify: "twemoji:flag-united-states",
+		android: "8.81k",
+		windows: "7.05k",
+		ios: "4.35k",
+	},
+];
+
+const platformIcon = (platform: string) => {
+	let iconify: ReactNode;
+	if (platform === "android") {
+		iconify = <Iconify icon="uiw:android" />;
+	}
+	if (platform === "windows") {
+		iconify = <Iconify icon="mingcute:windows-fill" />;
+	}
+	iconify = <Iconify icon="wpf:mac-os" />;
+
+	return <div className="mr-1 text-xs text-gray">{iconify}</div>;
+};
+export default function TopInstalled() {
+	return (
+		<Card className="flex-col">
+			<header className="self-start">
+				<Typography.Title level={5}>Top Installed Countries</Typography.Title>
+			</header>
+			<main className="w-full">
+				{dataSource.map((item) => (
+					<div className="mb-4 flex items-center" key={item.country}>
+						<Iconify icon={item.iconify} size={30} />
+						<span className="mx-2 font-medium">{item.country}</span>
+						<div className="ml-auto flex">
+							<div className="flex items-center justify-center">
+								{platformIcon("android")}
+								{item.android}
+							</div>
+
+							<div className="mx-2 flex items-center justify-center">
+								{platformIcon("windows")}
+								{item.windows}
+							</div>
+
+							<div className="flex items-center justify-center">
+								{platformIcon("ios")}
+								{item.ios}
+							</div>
+						</div>
+					</div>
+				))}
+			</main>
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/dashboard/workbench/top-related.tsx b/apps/react-admin/src/pages/dashboard/workbench/top-related.tsx
new file mode 100644
index 000000000..cba9f1528
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/workbench/top-related.tsx
@@ -0,0 +1,96 @@
+import { Tag, Typography } from "antd";
+
+import Card from "@/components/card";
+import { Iconify } from "@/components/icon";
+import Scrollbar from "@/components/scrollbar";
+import { themeVars } from "@/theme/theme.css";
+import { Rate } from "antd";
+
+const dataSource = [
+	{
+		logo: <Iconify icon="logos:chrome" size={24} />,
+		title: "Chrome",
+		platform: "Mac",
+		type: "free",
+		star: 4,
+		reviews: "9.91k",
+	},
+	{
+		logo: <Iconify icon="logos:google-drive" size={24} />,
+		title: "Drive",
+		platform: "Mac",
+		type: "free",
+		star: 3.5,
+		reviews: "1.95k",
+	},
+	{
+		logo: <Iconify icon="logos:dropbox" size={24} />,
+		title: "Dropbox",
+		platform: "Windows",
+		type: "$66.71",
+		star: 4.5,
+		reviews: "9.12k",
+	},
+	{
+		logo: <Iconify icon="logos:slack-icon" size={24} />,
+		title: "Slack",
+		platform: "Mac",
+		type: "free",
+		star: 3.5,
+		reviews: "6.98k",
+	},
+	{
+		logo: <Iconify icon="logos:discord-icon" size={24} />,
+		title: "Discord",
+		platform: "Windows",
+		type: "$52.17",
+		star: 0.5,
+		reviews: "8.49k",
+	},
+];
+export default function TopRelated() {
+	return (
+		<Card className="flex-col">
+			<header className="self-start">
+				<Typography.Title level={5}>Top Related Applications</Typography.Title>
+			</header>
+			<main className="w-full">
+				<Scrollbar>
+					{dataSource.map((item) => (
+						<div className="mb-4 flex" key={item.title}>
+							<div
+								className="mr-2 flex items-center justify-center"
+								style={{
+									background: `rgba(${themeVars.colors.background.defaultChannel}, .4)`,
+									borderRadius: "12px",
+									width: "48px",
+									height: "48px",
+								}}
+							>
+								{item.logo}
+							</div>
+
+							<div className="flex flex-col">
+								<span className="font-medium">{item.title}</span>
+								<div className="flex items-center justify-center text-gray">
+									{item.platform === "Mac" ? (
+										<Iconify icon="wpf:mac-os" size={12} />
+									) : (
+										<Iconify icon="mingcute:windows-fill" size={12} />
+									)}
+									<span className="mx-1 text-xs font-light">{item.platform}</span>
+									<Tag color={item.type === "free" ? "green" : "red"}>{item.type}</Tag>
+								</div>
+							</div>
+
+							<div className="ml-auto flex flex-col self-center">
+								<Rate allowHalf disabled defaultValue={item.star} />
+								<span className="mt-1 text-right text-xs text-gray-400">{item.reviews}reviews</span>
+							</div>
+						</div>
+					))}
+				</Scrollbar>
+			</main>
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/dashboard/workbench/total-card.tsx b/apps/react-admin/src/pages/dashboard/workbench/total-card.tsx
new file mode 100644
index 000000000..40c81f1a4
--- /dev/null
+++ b/apps/react-admin/src/pages/dashboard/workbench/total-card.tsx
@@ -0,0 +1,79 @@
+import Card from "@/components/card";
+import Chart from "@/components/chart/chart";
+import useChart from "@/components/chart/useChart";
+import { SvgIcon } from "@/components/icon";
+
+type Props = {
+	title: string;
+	increase: boolean;
+	percent: string;
+	count: string;
+	chartData: number[];
+};
+export default function TotalCard({ title, increase, count, percent, chartData }: Props) {
+	return (
+		<Card>
+			<div className="flex-grow">
+				<h6 className="text-sm font-medium">{title}</h6>
+				<div className="mb-2 mt-4 flex flex-row">
+					{increase ? (
+						<SvgIcon icon="ic_rise" size={24} color="rgb(34, 197, 94)" />
+					) : (
+						<SvgIcon icon="ic_decline" size={24} color="rgb(255, 86, 48)" />
+					)}
+					<div className="ml-2">
+						<span>{increase ? "+" : "-"}</span>
+						<span>{percent}</span>
+					</div>
+				</div>
+				<h3 className="text-2xl font-bold">{count}</h3>
+			</div>
+
+			<ChartLine data={chartData} />
+		</Card>
+	);
+}
+
+function ChartLine({ data }: { data: number[] }) {
+	const series = [
+		{
+			name: "",
+			data,
+		},
+	];
+	const chartOptions = useChart({
+		tooltip: {
+			x: {
+				show: false,
+			},
+		},
+		xaxis: {
+			labels: {
+				show: false,
+				showDuplicates: false,
+			},
+			tooltip: {
+				enabled: false,
+			},
+			crosshairs: {
+				show: false,
+			},
+		},
+		yaxis: {
+			labels: {
+				show: false,
+			},
+			tooltip: {
+				enabled: false,
+			},
+			crosshairs: {
+				show: false,
+			},
+		},
+		grid: {
+			show: false,
+		},
+	});
+
+	return <Chart type="line" series={series} options={chartOptions} width={120} />;
+}
diff --git a/apps/react-admin/src/pages/functions/clipboard/index.tsx b/apps/react-admin/src/pages/functions/clipboard/index.tsx
new file mode 100644
index 000000000..fa38215d8
--- /dev/null
+++ b/apps/react-admin/src/pages/functions/clipboard/index.tsx
@@ -0,0 +1,37 @@
+import { faker } from "@faker-js/faker";
+import { Card, Col, Input, Row, Tooltip, Typography } from "antd";
+import { type ChangeEvent, useState } from "react";
+
+import { IconButton, Iconify } from "@/components/icon";
+import { useCopyToClipboard } from "@/hooks/event/use-copy-to-clipboard";
+
+export default function ClipboardPage() {
+	const { copyFn } = useCopyToClipboard();
+
+	const [value, setValue] = useState("https://www.npmjs.com/package/");
+
+	const textOnClick = faker.lorem.paragraphs({ min: 3, max: 5 });
+
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value);
+	const CopyButton = (
+		<Tooltip title="Copy">
+			<IconButton className="text-gray" onClick={() => copyFn(value)}>
+				<Iconify icon="eva:copy-fill" size={20} />
+			</IconButton>
+		</Tooltip>
+	);
+	return (
+		<Card>
+			<Row gutter={[16, 16]}>
+				<Col span={24} md={12}>
+					<Typography.Title level={5}>ON CHANGE</Typography.Title>
+					<Input suffix={CopyButton} value={value} onChange={handleChange} />
+				</Col>
+				<Col span={24} md={12}>
+					<Typography.Title level={5}>ON DOUBLE CLICK</Typography.Title>
+					<Typography onDoubleClick={() => copyFn(textOnClick)}>{textOnClick}</Typography>
+				</Col>
+			</Row>
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/functions/token-expired/index.tsx b/apps/react-admin/src/pages/functions/token-expired/index.tsx
new file mode 100644
index 000000000..0d2c6e1bf
--- /dev/null
+++ b/apps/react-admin/src/pages/functions/token-expired/index.tsx
@@ -0,0 +1,27 @@
+import { useMutation } from "@tanstack/react-query";
+import { Button, Card, Col, Row, Typography } from "antd";
+
+import demoService from "@/api/services/demoService";
+
+export default function TokenExpired() {
+	const tokenExpiredMutation = useMutation({
+		mutationFn: demoService.mockTokenExpired,
+	});
+	const mockTokenExpired = () => {
+		tokenExpiredMutation.mutate();
+	};
+	return (
+		<Card>
+			<Row gutter={[16, 16]}>
+				<Col span={24} md={12}>
+					<Typography.Text>Clicking a button to simulate a token expiration scenario.</Typography.Text>
+				</Col>
+				<Col span={24} md={12}>
+					<Button type="primary" onClick={mockTokenExpired}>
+						Simulate Token Expired
+					</Button>
+				</Col>
+			</Row>
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/management/audit-logs/audit-log-drawer.tsx b/apps/react-admin/src/pages/management/audit-logs/audit-log-drawer.tsx
new file mode 100644
index 000000000..c6f3242e3
--- /dev/null
+++ b/apps/react-admin/src/pages/management/audit-logs/audit-log-drawer.tsx
@@ -0,0 +1,151 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+import { Descriptions, Drawer, Tabs, Tag } from "antd";
+import { useTranslation } from "react-i18next";
+import type { AuditLogDto, Action } from "#/management/auditing/audit-logs";
+import { Table } from "antd";
+import { useAuditLogs } from "@/hooks/abp/auditing/use-audit-logs";
+import { getApi } from "@/api/management/auditing/audit-logs";
+import { EntityChangeTable } from "@/components/abp/auditing/entity-change-table";
+import { formatToDateTime } from "@/utils/abp";
+import JsonEdit from "@/components/abp/common/json-edit";
+
+interface Props {
+	visible: boolean;
+	onClose: () => void;
+	auditLog?: AuditLogDto;
+}
+
+const AuditLogDrawer: React.FC<Props> = ({ visible, onClose, auditLog }) => {
+	const { t: $t } = useTranslation();
+	const [activeTab, setActiveTab] = useState("basic");
+	const [auditLogModel, setAuditLogModel] = useState<AuditLogDto>({} as AuditLogDto);
+	const { getHttpMethodColor, getHttpStatusCodeColor } = useAuditLogs();
+
+	const actionColumns = [
+		{
+			title: $t("AbpAuditLogging.ServiceName"),
+			dataIndex: "serviceName",
+			key: "serviceName",
+			sorter: true,
+		},
+		{
+			title: $t("AbpAuditLogging.MethodName"),
+			dataIndex: "methodName",
+			key: "methodName",
+			ellipsis: true,
+			sorter: true,
+		},
+		{
+			title: $t("AbpAuditLogging.ExecutionTime"),
+			dataIndex: "executionTime",
+			key: "executionTime",
+			ellipsis: true,
+			sorter: true,
+			render: (value: string) => (value ? formatToDateTime(value) : value),
+		},
+		{
+			title: $t("AbpAuditLogging.ExecutionDuration"),
+			dataIndex: "executionDuration",
+			key: "executionDuration",
+			ellipsis: true,
+			width: 150,
+			sorter: true,
+		},
+	];
+
+	useEffect(() => {
+		if (visible && auditLog?.id) {
+			fetchAuditLog(auditLog.id);
+		}
+	}, [visible, auditLog]);
+
+	const fetchAuditLog = async (id: string) => {
+		const dto = await getApi(id);
+		setAuditLogModel(dto);
+	};
+
+	const expandedRowRender = (record: Action) => (
+		<Descriptions column={1} bordered size="small">
+			<Descriptions.Item label={$t("AbpAuditLogging.Parameters")}>
+				{<JsonEdit data={record.parameters || ""} />}
+			</Descriptions.Item>
+			<Descriptions.Item label={$t("AbpAuditLogging.Additional")}>
+				{<JsonEdit data={record.extraProperties || ""} />}
+			</Descriptions.Item>
+		</Descriptions>
+	);
+
+	return (
+		<Drawer title={$t("AbpAuditLogging.AuditLog")} open={visible} onClose={onClose} width={800}>
+			<Tabs activeKey={activeTab} onChange={setActiveTab}>
+				<Tabs.TabPane key="basic" tab={$t("AbpAuditLogging.Operation")}>
+					<Descriptions column={2} bordered size="small">
+						<Descriptions.Item label={$t("AbpAuditLogging.ApplicationName")}>
+							{auditLogModel.applicationName}
+						</Descriptions.Item>
+						<Descriptions.Item label={$t("AbpAuditLogging.ExecutionTime")}>
+							{formatToDateTime(auditLogModel.executionTime)}
+						</Descriptions.Item>
+						<Descriptions.Item label={$t("AbpAuditLogging.UserName")}>{auditLogModel.userName}</Descriptions.Item>
+						<Descriptions.Item label={$t("AbpAuditLogging.HttpMethod")}>
+							<Tag color={getHttpMethodColor(auditLogModel.httpMethod)}>{auditLogModel.httpMethod}</Tag>
+						</Descriptions.Item>
+						<Descriptions.Item label={$t("AbpAuditLogging.RequestUrl")} span={2}>
+							{auditLogModel.url}
+						</Descriptions.Item>
+						<Descriptions.Item label={$t("AbpAuditLogging.HttpStatusCode")}>
+							<Tag color={getHttpStatusCodeColor(auditLogModel.httpStatusCode)}>{auditLogModel.httpStatusCode}</Tag>
+						</Descriptions.Item>
+						<Descriptions.Item label={$t("AbpAuditLogging.ExecutionDuration")}>
+							{auditLogModel.executionDuration}
+						</Descriptions.Item>
+						<Descriptions.Item label={$t("AbpAuditLogging.ClientId")}>{auditLogModel.clientId}</Descriptions.Item>
+						<Descriptions.Item label={$t("AbpAuditLogging.ClientIpAddress")}>
+							{auditLogModel.clientIpAddress}
+						</Descriptions.Item>
+						<Descriptions.Item label={$t("AbpAuditLogging.ClientName")}>{auditLogModel.clientName}</Descriptions.Item>
+						<Descriptions.Item label={$t("AbpAuditLogging.CorrelationId")}>
+							{auditLogModel.correlationId}
+						</Descriptions.Item>
+						<Descriptions.Item label={$t("AbpAuditLogging.BrowserInfo")} labelStyle={{ width: "110px" }} span={2}>
+							{auditLogModel.browserInfo}
+						</Descriptions.Item>
+						<Descriptions.Item label={$t("AbpAuditLogging.Comments")} span={2}>
+							{auditLogModel.comments}
+						</Descriptions.Item>
+						<Descriptions.Item label={$t("AbpAuditLogging.Exception")} span={2}>
+							{<JsonEdit data={auditLogModel.exceptions || ""} />}
+						</Descriptions.Item>
+						<Descriptions.Item label={$t("AbpAuditLogging.Additional")} span={2}>
+							{auditLogModel?.extraProperties ? JSON.stringify(auditLogModel.extraProperties, null, 2) : ""}
+						</Descriptions.Item>
+					</Descriptions>
+				</Tabs.TabPane>
+
+				{auditLogModel?.actions && auditLogModel.actions.length > 0 && (
+					<Tabs.TabPane key="opera" tab={`${$t("AbpAuditLogging.Actions")} (${auditLogModel.actions?.length || 0})`}>
+						<Table
+							columns={actionColumns}
+							dataSource={auditLogModel.actions}
+							rowKey="id"
+							expandable={{ expandedRowRender }}
+							pagination={false}
+						/>
+					</Tabs.TabPane>
+				)}
+
+				{auditLogModel.entityChanges && auditLogModel.entityChanges?.length > 0 && (
+					<Tabs.TabPane
+						key="entity"
+						tab={`${$t("AbpAuditLogging.EntityChanges")} (${auditLogModel.entityChanges.length})`}
+					>
+						<EntityChangeTable data={auditLogModel.entityChanges} />
+					</Tabs.TabPane>
+				)}
+			</Tabs>
+		</Drawer>
+	);
+};
+
+export default AuditLogDrawer;
diff --git a/apps/react-admin/src/pages/management/audit-logs/audit-log-table.tsx b/apps/react-admin/src/pages/management/audit-logs/audit-log-table.tsx
new file mode 100644
index 000000000..330660a7b
--- /dev/null
+++ b/apps/react-admin/src/pages/management/audit-logs/audit-log-table.tsx
@@ -0,0 +1,318 @@
+import type React from "react";
+import { useRef, useState } from "react";
+import { Button, Tag, Space, Card, Checkbox, type FormInstance, Tooltip } from "antd";
+import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import ProTable, { type ProColumns, type ActionType } from "@ant-design/pro-table";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { formatToDateTime } from "@/utils/abp";
+import type { AuditLogDto } from "#/management/auditing/audit-logs";
+import { deleteApi, getPagedListApi } from "@/api/management/auditing/audit-logs";
+import { httpMethodOptions, httpStatusCodeOptions } from "./mapping";
+import AuditLogDrawer from "./audit-log-drawer";
+import { hasAccessByCodes, withAccessChecker } from "@/utils/abp/access-checker";
+import { AuditLogPermissions } from "@/constants/management/auditing/permissions";
+import { useAuditLogs } from "@/hooks/abp/auditing/use-audit-logs";
+import { antdOrderToAbpOrder } from "@/utils/abp/sort-order";
+import { toast } from "sonner";
+import DeleteModal from "@/components/abp/common/delete-modal";
+
+const AuditLogTable: React.FC = () => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const formRef = useRef<FormInstance>();
+	const queryClient = useQueryClient();
+	const [drawerVisible, setDrawerVisible] = useState(false);
+	const [selectedLog, setSelectedLog] = useState<AuditLogDto | null>(null);
+	const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+	const { getHttpMethodColor, getHttpStatusCodeColor } = useAuditLogs();
+
+	const openDrawer = (log: AuditLogDto) => {
+		setSelectedLog(log);
+		setDrawerVisible(true);
+	};
+
+	const closeDrawer = () => {
+		setDrawerVisible(false);
+		setSelectedLog(null);
+	};
+
+	const { mutateAsync: deleteAuditLog } = useMutation({
+		mutationFn: deleteApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["auditLogs"] });
+		},
+	});
+
+	const handleDelete = (log: AuditLogDto) => {
+		setSelectedLog(log);
+		setDeleteModalVisible(true);
+	};
+
+	const confirmDelete = async () => {
+		if (selectedLog) {
+			await deleteAuditLog(selectedLog.id);
+			actionRef.current?.reload();
+			setDeleteModalVisible(false);
+		}
+	};
+
+	const columns: ProColumns<AuditLogDto>[] = [
+		{
+			title: $t("AbpAuditLogging.RequestUrl"),
+			dataIndex: "url",
+			sorter: true,
+			colSize: 2,
+			order: 2,
+			width: 500,
+			ellipsis: true,
+			render: (_, record) => (
+				<>
+					<Tag
+						color={getHttpStatusCodeColor(record.httpStatusCode)}
+						style={{ cursor: "pointer" }}
+						onClick={() => onFilter("httpStatusCode", record.httpStatusCode)} // 点击标签触发筛选
+					>
+						<Tooltip title={$t("abp.manage.identity.filterHttpStatusCode")}>{record.httpStatusCode}</Tooltip>
+					</Tag>
+					<Tag
+						color={getHttpMethodColor(record.httpMethod)}
+						onClick={() => onFilter("httpMethod", record.httpMethod)}
+						style={{ cursor: "pointer" }}
+					>
+						<Tooltip title={$t("abp.manage.identity.filterHttpMethod")}>{record.httpMethod}</Tooltip>
+					</Tag>
+					<Tooltip title={$t("abp.manage.identity.filterRequestUrl")}>
+						<button
+							type="button"
+							onClick={() => onFilter("url", record.url)}
+							style={{
+								background: "none",
+								border: "none",
+								padding: 0,
+								color: "blue",
+								textDecoration: "underline",
+								cursor: "pointer",
+							}}
+						>
+							{record.url}
+						</button>
+					</Tooltip>
+				</>
+			),
+		},
+		{
+			title: $t("AbpAuditLogging.UserName"),
+			dataIndex: "userName",
+			sorter: true,
+			width: 120,
+		},
+		{
+			title: $t("AbpAuditLogging.ExecutionTime"),
+			dataIndex: "executionTime",
+			valueType: "dateRange",
+			sorter: true,
+			order: 1,
+			colSize: 2,
+			width: 150,
+			render: (_, record) => (record.executionTime ? formatToDateTime(record.executionTime) : record.executionTime),
+		},
+		{
+			title: $t("AbpAuditLogging.HttpStatusCode"),
+			dataIndex: "httpStatusCode",
+			valueType: "select",
+			fieldProps: {
+				options: httpStatusCodeOptions,
+			},
+			hideInTable: true, // Only show in search form
+		},
+		{
+			title: $t("AbpAuditLogging.HttpMethod"),
+			dataIndex: "httpMethod",
+			valueType: "select",
+			fieldProps: {
+				options: httpMethodOptions,
+			},
+			hideInTable: true, // Only show in search form
+		},
+		{
+			title: $t("AbpAuditLogging.ExecutionDuration"),
+			dataIndex: "executionDuration",
+			sorter: true,
+			hideInSearch: true,
+			width: 140, //最长
+		},
+		{
+			title: $t("AbpAuditLogging.MinExecutionDuration"),
+			dataIndex: "minExecutionDuration",
+			valueType: "digit",
+			hideInTable: true,
+		},
+		{
+			title: $t("AbpAuditLogging.MaxExecutionDuration"),
+			dataIndex: "maxExecutionDuration",
+			valueType: "digit",
+			hideInTable: true,
+		},
+		{
+			title: $t("AbpAuditLogging.ClientId"),
+			dataIndex: "clientId",
+			sorter: true,
+			width: 150,
+		},
+		{
+			title: $t("AbpAuditLogging.ClientIpAddress"),
+			dataIndex: "clientIpAddress",
+			sorter: true,
+			width: 150,
+			render: (_, record) => (
+				<>
+					{record.extraProperties?.Location && <Tag color="blue">{record.extraProperties.Location}</Tag>}
+					<span>{record.clientIpAddress}</span>
+				</>
+			),
+		},
+		{
+			title: $t("AbpAuditLogging.ApplicationName"),
+			dataIndex: "applicationName",
+			sorter: true,
+			ellipsis: true,
+			width: 160,
+		},
+		{
+			title: $t("AbpAuditLogging.CorrelationId"),
+			dataIndex: "correlationId",
+			sorter: true,
+			colSize: 2,
+			width: 160,
+		},
+		{
+			title: $t("AbpAuditLogging.TenantName"),
+			dataIndex: "tenantName",
+			sorter: true,
+			width: 100,
+			hideInSearch: true,
+		},
+		{
+			title: $t("AbpAuditLogging.BrowserInfo"),
+			dataIndex: "browserInfo",
+			sorter: true,
+			ellipsis: true,
+			width: 300,
+			hideInSearch: true,
+		},
+		{
+			title: $t("AbpAuditLogging.HasException"),
+			dataIndex: "hasException",
+			valueType: "checkbox",
+			hideInTable: true,
+			renderFormItem: (_) => {
+				return (
+					<Checkbox
+						onChange={(e) => {
+							const value = e.target.checked; // 获取 Checkbox 的选中状态
+							onFilter("hasException", value, false);
+						}}
+					/>
+				);
+			},
+		},
+		hasAccessByCodes([AuditLogPermissions.Default, AuditLogPermissions.Delete])
+			? {
+					title: $t("AbpUi.Actions"),
+					key: "actions",
+					align: "center",
+					fixed: "right",
+					hideInSearch: true,
+					width: 220,
+					render: (_, record) => (
+						<div className="flex gap-1">
+							{withAccessChecker(
+								<Button type="link" icon={<EditOutlined />} onClick={() => openDrawer(record)}>
+									{$t("AbpAuditLogging.ShowLogDialog")}
+								</Button>,
+								[AuditLogPermissions.Default],
+							)}
+							{withAccessChecker(
+								<Button type="link" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+									{$t("AbpUi.Delete")}
+								</Button>,
+								[AuditLogPermissions.Delete],
+							)}
+						</div>
+					),
+				}
+			: {},
+	];
+
+	const onFilter = (field: string, value: any, shouldSubmit = true) => {
+		// 使用 formRef 更新查询条件
+		if (formRef.current) {
+			formRef.current.setFieldsValue({
+				[field]: value,
+			});
+		}
+		if (shouldSubmit) {
+			// 触发表格刷新
+			formRef.current?.submit();
+		}
+	};
+
+	return (
+		<>
+			<Space direction="vertical" size="large" className="w-full">
+				<Card>
+					<ProTable<AuditLogDto>
+						headerTitle={$t("AbpAuditLogging.AuditLog")}
+						actionRef={actionRef}
+						formRef={formRef} //search form
+						rowKey="id"
+						columns={columns}
+						request={async (params, sorter) => {
+							const { current, pageSize, executionTime, ...filters } = params;
+							const [startTime, endTime] = executionTime || [];
+							const query = await queryClient.fetchQuery({
+								//不用换，这样与antd结合比较好用
+								queryKey: ["auditLogs", params, sorter],
+								queryFn: () =>
+									getPagedListApi({
+										maxResultCount: pageSize,
+										skipCount: ((current || 1) - 1) * (pageSize || 0),
+										sorting: sorter
+											? Object.keys(sorter)
+													.map((key) => `${key} ${antdOrderToAbpOrder(sorter[key])}`)
+													.join(", ")
+											: undefined,
+										startTime: startTime || undefined,
+										endTime: endTime || undefined,
+										...filters,
+									}),
+							});
+							return {
+								data: query.items,
+								total: query.totalCount,
+							};
+						}}
+						pagination={{
+							showSizeChanger: true,
+						}}
+						search={{
+							labelWidth: "auto",
+							defaultCollapsed: true,
+						}}
+						scroll={{ x: "max-content" }}
+					/>
+				</Card>
+			</Space>
+			{selectedLog && <AuditLogDrawer visible={drawerVisible} onClose={closeDrawer} auditLog={selectedLog} />}
+			<DeleteModal
+				visible={deleteModalVisible}
+				onConfirm={confirmDelete}
+				onCancel={() => setDeleteModalVisible(false)}
+			/>
+		</>
+	);
+};
+
+export default AuditLogTable;
diff --git a/apps/react-admin/src/pages/management/audit-logs/mapping.ts b/apps/react-admin/src/pages/management/audit-logs/mapping.ts
new file mode 100644
index 000000000..ab24aff3c
--- /dev/null
+++ b/apps/react-admin/src/pages/management/audit-logs/mapping.ts
@@ -0,0 +1,57 @@
+const httpMethodOptions = [
+	{ label: "GET", value: "GET" },
+	{ label: "PUT", value: "PUT" },
+	{ label: "POST", value: "POST" },
+	{ label: "PATCH", value: "PATCH" },
+	{ label: "DELETE", value: "DELETE" },
+	{ label: "OPTIONS", value: "OPTIONS" },
+	{ label: "HEAD", value: "HEAD" },
+];
+
+const httpStatusCodeOptions = [
+	{ label: "100 - Continue", value: 100 },
+	{ label: "101 - Switching Protocols", value: 101 },
+	{ label: "200 - OK", value: 200 },
+	{ label: "201 - Created", value: 201 },
+	{ label: "202 - Accepted", value: 202 },
+	{ label: "203 - Non Authoritative Information", value: 203 },
+	{ label: "204 - No Content", value: 204 },
+	{ label: "205 - Reset Content", value: 205 },
+	{ label: "206 - Partial Content", value: 206 },
+	{ label: "300 - Multiple Choices", value: 300 },
+	{ label: "301 - Moved Permanently", value: 301 },
+	{ label: "302 - Found & Redirect", value: 302 },
+	{ label: "303 - See Other", value: 303 },
+	{ label: "304 - Not Modified", value: 304 },
+	{ label: "305 - Use Proxy", value: 305 },
+	{ label: "306 - Switch Proxy", value: 306 },
+	{ label: "307 - Temporary Redirect", value: 307 },
+	{ label: "308 - Permanent Redirect", value: 308 },
+	{ label: "400 - Bad Request", value: 400 },
+	{ label: "401 - Unauthorized", value: 401 },
+	{ label: "402 - Payment Required", value: 402 },
+	{ label: "403 - Forbidden", value: 403 },
+	{ label: "404 - Not Found", value: 404 },
+	{ label: "405 - Method Not Allowed", value: 405 },
+	{ label: "406 - Not Acceptable", value: 406 },
+	{ label: "407 - Proxy Authentication Required", value: 407 },
+	{ label: "408 - Request Timeout", value: 408 },
+	{ label: "409 - Conflict", value: 409 },
+	{ label: "410 - Gone", value: 410 },
+	{ label: "411 - Length Required", value: 411 },
+	{ label: "412 - Precondition Failed", value: 412 },
+	{ label: "413 - Request Entity Too Large", value: 413 },
+	{ label: "414 - Request Uri Too Long", value: 414 },
+	{ label: "415 - Unsupported Media Type", value: 415 },
+	{ label: "416 - Requested Range Not Satisfiable", value: 416 },
+	{ label: "417 - Expectation Failed", value: 417 },
+	{ label: "426 - Upgrade Required", value: 426 },
+	{ label: "500 - Internal Server Error", value: 500 },
+	{ label: "501 - Not mplemented", value: 501 },
+	{ label: "502 - Bad Gateway", value: 502 },
+	{ label: "503 - Service Unavailable", value: 503 },
+	{ label: "504 - Gateway Timeout", value: 504 },
+	{ label: "505 - Http Version Not Supported", value: 505 },
+];
+
+export { httpMethodOptions, httpStatusCodeOptions };
diff --git a/apps/react-admin/src/pages/management/blog/index.tsx b/apps/react-admin/src/pages/management/blog/index.tsx
new file mode 100644
index 000000000..dbc726530
--- /dev/null
+++ b/apps/react-admin/src/pages/management/blog/index.tsx
@@ -0,0 +1,5 @@
+function Blog() {
+	return <div>Blog</div>;
+}
+
+export default Blog;
diff --git a/apps/react-admin/src/pages/management/identity/claim-types/claim-type-modal.tsx b/apps/react-admin/src/pages/management/identity/claim-types/claim-type-modal.tsx
new file mode 100644
index 000000000..bc0549b00
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/claim-types/claim-type-modal.tsx
@@ -0,0 +1,119 @@
+import type React from "react";
+import { useEffect } from "react";
+import { Button, Checkbox, Form, Input, Modal, Select, Space } from "antd";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { ValueType, type IdentityClaimTypeDto } from "#/management/identity";
+import { createApi, updateApi } from "@/api/management/identity/claim-types";
+import { useMutation } from "@tanstack/react-query";
+
+interface Props {
+	visible: boolean;
+	onClose: () => void;
+	onSuccess: () => void;
+	claimType?: IdentityClaimTypeDto;
+}
+
+const ClaimTypeModal: React.FC<Props> = ({ visible, onClose, onSuccess, claimType }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm<IdentityClaimTypeDto>();
+
+	const { mutateAsync: createClaimType, isPending: isCreating } = useMutation({
+		mutationFn: createApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.CreatedSuccessfully"));
+			onSuccess();
+			onClose();
+		},
+		onError: () => {
+			toast.error($t("AbpUi.Error"));
+		},
+	});
+
+	const { mutateAsync: updateClaimType, isPending: isUpdating } = useMutation({
+		mutationFn: ({ id, data }: { id: string; data: IdentityClaimTypeDto }) => updateApi(id, data),
+		onSuccess: () => {
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			onSuccess();
+			onClose();
+		},
+		onError: () => {
+			toast.error($t("AbpUi.Error"));
+		},
+	});
+
+	const handleSave = async () => {
+		try {
+			const values = await form.validateFields();
+			if (claimType?.id) {
+				await updateClaimType({ id: claimType.id, data: values });
+			} else {
+				await createClaimType(values);
+			}
+		} catch (error) {
+			// Form validation error, no need to handle
+		}
+	};
+
+	useEffect(() => {
+		if (visible && claimType) {
+			form.setFieldsValue(claimType);
+		} else {
+			form.resetFields();
+		}
+	}, [visible, claimType, form]);
+
+	return (
+		<Modal
+			title={
+				claimType?.id
+					? `${$t("AbpIdentity.DisplayName:ClaimType")} - ${claimType.name}`
+					: $t("AbpIdentity.IdentityClaim:New")
+			}
+			footer={null}
+			open={visible}
+			onCancel={onClose}
+			destroyOnClose
+			centered
+			confirmLoading={isCreating || isUpdating}
+		>
+			<Form form={form} layout="vertical" initialValues={{ required: false }}>
+				<Form.Item label={$t("AbpIdentity.IdentityClaim:Name")} name="name" rules={[{ required: true }]}>
+					<Input />
+				</Form.Item>
+				<Form.Item label={$t("AbpIdentity.IdentityClaim:Required")} name="required" valuePropName="checked">
+					<Checkbox>{$t("AbpIdentity.IdentityClaim:Required")}</Checkbox>
+				</Form.Item>
+				<Form.Item label={$t("AbpIdentity.IdentityClaim:Regex")} name="regex">
+					<Input />
+				</Form.Item>
+				<Form.Item label={$t("AbpIdentity.IdentityClaim:RegexDescription")} name="regexDescription">
+					<Input />
+				</Form.Item>
+				<Form.Item label={$t("AbpIdentity.IdentityClaim:ValueType")} name="valueType">
+					<Select
+						options={[
+							{ label: "String", value: ValueType.String },
+							{ label: "Int", value: ValueType.Int },
+							{ label: "Boolean", value: ValueType.Boolean },
+							{ label: "DateTime", value: ValueType.DateTime },
+						]}
+					/>
+				</Form.Item>
+				<Form.Item label={$t("AbpIdentity.IdentityClaim:Description")} name="description">
+					<Input.TextArea />
+				</Form.Item>
+				<Form.Item>
+					<Space style={{ display: "flex", justifyContent: "flex-end" }}>
+						<Button onClick={onClose}>{$t("AbpUi.Cancel")}</Button>
+						<Button type="primary" onClick={handleSave}>
+							{$t("AbpUi.Save")}
+						</Button>
+					</Space>
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+};
+
+export default ClaimTypeModal;
diff --git a/apps/react-admin/src/pages/management/identity/claim-types/claim-types-table.tsx b/apps/react-admin/src/pages/management/identity/claim-types/claim-types-table.tsx
new file mode 100644
index 000000000..c9f7ceb52
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/claim-types/claim-types-table.tsx
@@ -0,0 +1,202 @@
+import { useRef, useState } from "react";
+import { Button, Popconfirm, Space, Card, Input } from "antd";
+import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import ClaimTypeModal from "./claim-type-modal";
+import { type IdentityClaimTypeDto, ValueType } from "#/management/identity";
+import { toast } from "sonner";
+import { IdentityClaimTypePermissions } from "@/constants/management/identity/permissions";
+import { withAccessChecker, hasAccessByCodes } from "@/utils/abp/access-checker";
+import ProTable, { type ActionType, type ProColumns } from "@ant-design/pro-table";
+import { antdOrderToAbpOrder } from "@/utils/abp/sort-order";
+import { deleteApi, getPagedListApi } from "@/api/management/identity/claim-types";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+const ClaimTypeTable: React.FC = () => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const queryClient = useQueryClient();
+	// Filter state
+	const [filter, setFilter] = useState<string | undefined>();
+	// Modal State
+	const [modalVisible, setModalVisible] = useState(false);
+	const [selectedClaim, setSelectedClaim] = useState<IdentityClaimTypeDto | null>(null);
+	const openModal = (claim?: IdentityClaimTypeDto) => {
+		setSelectedClaim(claim || null);
+		setModalVisible(true);
+	};
+
+	const closeModal = () => {
+		setModalVisible(false);
+		setSelectedClaim(null);
+	};
+
+	const { mutateAsync: deleteClaimType } = useMutation({
+		mutationFn: deleteApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["claimTypes"] });
+		},
+	});
+
+	const handleDelete = async (id: string) => {
+		await deleteClaimType(id);
+		actionRef.current?.reload();
+	};
+
+	const columns: ProColumns<IdentityClaimTypeDto>[] = [
+		{
+			title: $t("AbpIdentity.IdentityClaim:Name"),
+			dataIndex: "name",
+			sorter: true,
+			width: 200,
+		},
+		{
+			title: $t("AbpIdentity.IdentityClaim:ValueType"),
+			dataIndex: "valueType",
+			sorter: true,
+			valueEnum: {
+				[ValueType.String]: { text: "String" },
+				[ValueType.Int]: { text: "Int" },
+				[ValueType.Boolean]: { text: "Boolean" },
+				[ValueType.DateTime]: { text: "DateTime" },
+			},
+			width: 150,
+		},
+		{
+			title: $t("AbpIdentity.IdentityClaim:Regex"),
+			dataIndex: "regex",
+		},
+		{
+			align: "center",
+			title: $t("AbpIdentity.IdentityClaim:Required"),
+			dataIndex: "required",
+			width: 100,
+			sorter: true,
+			render: (value) => (value ? <span style={{ color: "green" }}>✔</span> : <span style={{ color: "red" }}>✘</span>),
+		},
+		{
+			align: "center",
+			dataIndex: "isStatic",
+			sorter: true,
+			title: $t("AbpIdentity.IdentityClaim:IsStatic"),
+			render: (value) => (value ? <span style={{ color: "green" }}>✔</span> : <span style={{ color: "red" }}>✘</span>),
+		},
+		{
+			title: $t("AbpIdentity.IdentityClaim:Description"),
+			dataIndex: "description",
+			ellipsis: true,
+			width: 250,
+		},
+		hasAccessByCodes([IdentityClaimTypePermissions.Update, IdentityClaimTypePermissions.Delete])
+			? {
+					title: $t("AbpUi.Actions"),
+					valueType: "option",
+					key: "actions",
+					align: "center",
+					fixed: "right",
+					width: 150,
+					render: (_, record) => (
+						<div className="flex gap-1">
+							{withAccessChecker(
+								<Button key="edit" type="link" icon={<EditOutlined />} onClick={() => openModal(record)}>
+									{$t("AbpUi.Edit")}
+								</Button>,
+								[IdentityClaimTypePermissions.Update],
+							)}
+							{withAccessChecker(
+								<Popconfirm
+									key="delete"
+									title={$t("AbpUi.AreYouSure")}
+									onConfirm={() => handleDelete(record.id)}
+									okText={$t("AbpUi.Yes")}
+									cancelText={$t("AbpUi.No")}
+								>
+									<Button type="link" danger icon={<DeleteOutlined />}>
+										{$t("AbpUi.Delete")}
+									</Button>
+								</Popconfirm>,
+								[IdentityClaimTypePermissions.Delete],
+							)}
+						</div>
+					),
+				}
+			: {},
+	];
+
+	return (
+		<>
+			<Space direction="vertical" size="large" className="w-full">
+				<Card>
+					<ProTable<IdentityClaimTypeDto>
+						headerTitle={$t("AbpIdentity.DisplayName:ClaimType")}
+						actionRef={actionRef}
+						rowKey="id"
+						columns={columns}
+						request={async (params, sorter) => {
+							const { current, pageSize, ...filters } = params;
+
+							const query = await queryClient.fetchQuery({
+								queryKey: ["claimTypes", params, sorter, filter],
+								queryFn: () =>
+									getPagedListApi({
+										maxResultCount: pageSize,
+										skipCount: ((current || 1) - 1) * (pageSize || 0),
+										filter,
+										sorting: sorter
+											? Object.keys(sorter)
+													.map((key) => `${key} ${antdOrderToAbpOrder(sorter[key])}`)
+													.join(", ")
+											: undefined,
+										...filters,
+									}),
+							});
+
+							return {
+								data: query.items,
+								total: query.totalCount,
+							};
+						}}
+						pagination={{
+							showSizeChanger: true,
+						}}
+						toolBarRender={() => [
+							<Input.Search
+								key="customFilter"
+								placeholder={$t("AbpUi.Search")}
+								allowClear
+								onSearch={(value) => {
+									setFilter(value); // Update the custom filter state
+									actionRef.current?.reload();
+								}}
+								style={{ width: 240 }}
+							/>,
+							withAccessChecker(
+								<Button type="primary" key="add" onClick={() => openModal()}>
+									{$t("AbpIdentity.IdentityClaim:New")}
+								</Button>,
+								[IdentityClaimTypePermissions.Create],
+							),
+						]}
+						search={false}
+						scroll={{ x: "max-content" }}
+					/>
+				</Card>
+			</Space>
+			{modalVisible && (
+				<ClaimTypeModal
+					visible={modalVisible}
+					claimType={selectedClaim || undefined}
+					onClose={closeModal}
+					onSuccess={() => {
+						closeModal();
+						actionRef.current?.reload();
+						queryClient.invalidateQueries({ queryKey: ["claimTypes"] });
+					}}
+				/>
+			)}
+		</>
+	);
+};
+
+export default ClaimTypeTable;
diff --git a/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-modal.tsx b/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-modal.tsx
new file mode 100644
index 000000000..c4fbe75b4
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-modal.tsx
@@ -0,0 +1,120 @@
+import { useEffect } from "react";
+import { Modal, Form, Input } from "antd";
+import { useTranslation } from "react-i18next";
+import type {
+	OrganizationUnitDto,
+	OrganizationUnitCreateDto,
+	OrganizationUnitUpdateDto,
+} from "#/management/identity/organization-units";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { createApi, getApi, updateApi } from "@/api/management/identity/organization-units";
+
+interface Props {
+	visible: boolean;
+	onClose: () => void;
+	onChange: (data: OrganizationUnitDto) => void;
+	id?: string;
+	parentId?: string;
+}
+
+const defaultModel: Partial<OrganizationUnitDto> = {
+	displayName: "",
+};
+
+const OrganizationUnitModal: React.FC<Props> = ({ visible, onClose, onChange, id, parentId }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+
+	// 查询组织单位详情
+	const { data: unitData, isLoading } = useQuery({
+		queryKey: ["organizationUnit", id],
+		queryFn: () => {
+			if (!id) {
+				return Promise.reject(new Error("id is undefined"));
+			}
+			return getApi(id);
+		},
+		enabled: visible && !!id,
+	});
+
+	// 创建组织单位
+	const { mutateAsync: createUnit, isPending: isCreating } = useMutation({
+		mutationFn: (input: OrganizationUnitCreateDto) => createApi(input),
+		onSuccess: (data) => {
+			onChange(data);
+			onClose();
+		},
+	});
+
+	// 更新组织单位
+	const { mutateAsync: updateUnit, isPending: isUpdating } = useMutation({
+		mutationFn: (data: OrganizationUnitUpdateDto) => {
+			if (!id) {
+				return Promise.reject(new Error("id is undefined"));
+			}
+			return updateApi(id, data);
+		},
+		onSuccess: (data) => {
+			onChange(data);
+			onClose();
+		},
+	});
+
+	useEffect(() => {
+		if (visible) {
+			if (id) {
+				form.setFieldsValue(unitData);
+			} else {
+				form.setFieldsValue({
+					...defaultModel,
+					parentId,
+				});
+			}
+		} else {
+			form.resetFields();
+		}
+	}, [visible, unitData, id, parentId]);
+
+	const handleOk = async () => {
+		try {
+			const values = await form.validateFields();
+			if (id) {
+				await updateUnit(values);
+			} else {
+				await createUnit(values);
+			}
+		} catch (error) {
+			// Form validation error
+		}
+	};
+
+	return (
+		<Modal
+			open={visible}
+			title={
+				id ? `${$t("AbpIdentity.OrganizationUnits")}: ${unitData?.displayName}` : $t("AbpIdentity.OrganizationUnit:New")
+			}
+			onCancel={onClose}
+			onOk={handleOk}
+			confirmLoading={isCreating || isUpdating || isLoading}
+		>
+			<Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+				<Form.Item name="id" hidden>
+					<Input />
+				</Form.Item>
+				<Form.Item name="parentId" hidden>
+					<Input />
+				</Form.Item>
+				<Form.Item
+					label={$t("AbpIdentity.OrganizationUnit:DisplayName")}
+					name="displayName"
+					rules={[{ required: true }]}
+				>
+					<Input autoComplete="off" />
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+};
+
+export default OrganizationUnitModal;
diff --git a/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-page.tsx b/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-page.tsx
new file mode 100644
index 000000000..321678241
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-page.tsx
@@ -0,0 +1,20 @@
+import { useState } from "react";
+import OrganizationUnitTree from "./organization-unit-tree";
+import OrganizationUnitTable from "./organization-unit-table";
+
+const OrganizationUnitPage = () => {
+	const [selectedKey, setSelectedKey] = useState<string>();
+
+	return (
+		<div className="flex flex-row gap-2">
+			<div className="basis-1/3">
+				<OrganizationUnitTree onSelected={setSelectedKey} />
+			</div>
+			<div className="basis-2/3">
+				<OrganizationUnitTable selectedKey={selectedKey} />
+			</div>
+		</div>
+	);
+};
+
+export default OrganizationUnitPage;
diff --git a/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-role-table.tsx b/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-role-table.tsx
new file mode 100644
index 000000000..a90096d56
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-role-table.tsx
@@ -0,0 +1,141 @@
+import { useRef, useState } from "react";
+import { Button, Card, Modal } from "antd";
+import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import type { IdentityRoleDto } from "#/management/identity/role";
+import { ProTable, type ActionType, type ProColumns } from "@ant-design/pro-table";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import { OrganizationUnitPermissions } from "@/constants/management/identity/permissions";
+import SelectRoleModal from "./select-role-modal";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { removeOrganizationUnitApi } from "@/api/management/identity/role";
+import { addRoles, getRoleListApi } from "@/api/management/identity/organization-units";
+import { toast } from "sonner";
+
+interface Props {
+	selectedKey?: string;
+}
+
+const OrganizationUnitRoleTable: React.FC<Props> = ({ selectedKey }) => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const queryClient = useQueryClient();
+	const [modal, contextHolder] = Modal.useModal();
+	const [roleModalVisible, setRoleModalVisible] = useState(false);
+
+	// 获取角色列表
+	const { data, isLoading, refetch } = useQuery({
+		queryKey: ["organizationUnitRoles", selectedKey],
+		queryFn: () => {
+			if (!selectedKey) {
+				return Promise.reject(new Error("selectedKey is undefined"));
+			}
+			return getRoleListApi(selectedKey, { filter: "" });
+		},
+		enabled: !!selectedKey,
+	});
+
+	// 添加角色
+	const { mutateAsync: addRolesToUnit } = useMutation({
+		mutationFn: (roles: IdentityRoleDto[]) => {
+			if (!selectedKey) {
+				return Promise.reject(new Error("selectedKey is undefined"));
+			}
+			return addRoles(selectedKey, {
+				roleIds: roles.map((role) => role.id),
+			});
+		},
+		onSuccess: () => {
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			setRoleModalVisible(false);
+			refetch();
+
+			actionRef.current?.reload();
+		},
+	});
+
+	// 移除角色
+	const { mutateAsync: removeRole } = useMutation({
+		mutationFn: (roleId: string) => {
+			if (!selectedKey) {
+				return Promise.reject(new Error("selectedKey is undefined"));
+			}
+			return removeOrganizationUnitApi(roleId, selectedKey);
+		},
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			refetch();
+			actionRef.current?.reload();
+		},
+	});
+
+	const handleDelete = (role: IdentityRoleDto) => {
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpIdentity.OrganizationUnit:AreYouSureRemoveRole", { 0: role.name }),
+			onOk: () => removeRole(role.id),
+		});
+	};
+
+	const columns: ProColumns<IdentityRoleDto>[] = [
+		{
+			title: $t("AbpIdentity.DisplayName:RoleName"),
+			dataIndex: "name",
+			width: 200,
+		},
+		{
+			title: $t("AbpUi.Actions"),
+			width: 180,
+			fixed: "right",
+			render: (_, record) => (
+				<Button
+					type="link"
+					danger
+					icon={<DeleteOutlined />}
+					disabled={!hasAccessByCodes([OrganizationUnitPermissions.ManageRoles])}
+					onClick={() => handleDelete(record)}
+				>
+					{$t("AbpUi.Delete")}
+				</Button>
+			),
+		},
+	];
+
+	return (
+		<>
+			{contextHolder}
+			<Card>
+				<ProTable<IdentityRoleDto>
+					headerTitle={$t("AbpIdentity.Roles")}
+					actionRef={actionRef}
+					columns={columns}
+					dataSource={data?.items}
+					loading={isLoading}
+					rowKey="id"
+					search={false}
+					pagination={{
+						showSizeChanger: true,
+						total: data?.totalCount,
+					}}
+					toolBarRender={() => [
+						selectedKey && hasAccessByCodes([OrganizationUnitPermissions.ManageRoles]) && (
+							<Button type="primary" icon={<PlusOutlined />} onClick={() => setRoleModalVisible(true)}>
+								{$t("AbpIdentity.OrganizationUnit:AddRole")}
+							</Button>
+						),
+					]}
+				/>
+			</Card>
+			{selectedKey && (
+				<SelectRoleModal
+					visible={roleModalVisible}
+					onClose={() => setRoleModalVisible(false)}
+					onConfirm={addRolesToUnit}
+					organizationUnitId={selectedKey}
+				/>
+			)}
+		</>
+	);
+};
+
+export default OrganizationUnitRoleTable;
diff --git a/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-table.tsx b/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-table.tsx
new file mode 100644
index 000000000..1ed8e2fec
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-table.tsx
@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { Card, Tabs } from "antd";
+import { useTranslation } from "react-i18next";
+import OrganizationUnitRoleTable from "./organization-unit-role-table";
+import OrganizationUnitUserTable from "./organization-unit-user-table";
+
+interface Props {
+	selectedKey?: string;
+}
+
+type TabKeys = "users" | "roles";
+
+const OrganizationUnitTable: React.FC<Props> = ({ selectedKey }) => {
+	const { t: $t } = useTranslation();
+	const [activeTab, setActiveTab] = useState<TabKeys>("users");
+
+	return (
+		<Card>
+			<Tabs activeKey={activeTab} onChange={(key) => setActiveTab(key as TabKeys)}>
+				<Tabs.TabPane key="users" tab={$t("AbpIdentity.Users")} />
+				<Tabs.TabPane key="roles" tab={$t("AbpIdentity.Roles")} />
+			</Tabs>
+			{activeTab === "users" ? (
+				<OrganizationUnitUserTable selectedKey={selectedKey} />
+			) : (
+				<OrganizationUnitRoleTable selectedKey={selectedKey} />
+			)}
+		</Card>
+	);
+};
+
+export default OrganizationUnitTable;
diff --git a/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-tree.tsx b/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-tree.tsx
new file mode 100644
index 000000000..73d02d35e
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-tree.tsx
@@ -0,0 +1,260 @@
+import { useEffect, useState } from "react";
+import { Card, Button, Tree, Dropdown, Modal } from "antd";
+import { EditOutlined, DeleteOutlined, PlusOutlined, RedoOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import type { DataNode } from "antd/lib/tree";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { deleteApi, getChildrenApi, getRootListApi, moveTo } from "@/api/management/identity/organization-units";
+import { Iconify } from "@/components/icon";
+import { toast } from "sonner";
+import OrganizationUnitModal from "./organization-unit-modal";
+import PermissionModal from "@/components/abp/permissions/permission-modal";
+
+interface Props {
+	onSelected?: (id?: string) => void;
+}
+
+const OrganizationUnitTree: React.FC<Props> = ({ onSelected }) => {
+	const { t: $t } = useTranslation();
+	// const queryClient = useQueryClient(); //
+	const [modal, contextHolder] = Modal.useModal();
+
+	const [organizationUnits, setOrganizationUnits] = useState<DataNode[]>([]);
+	const [loadedKeys, setLoadedKeys] = useState<string[]>([]);
+	const [selectedKey, setSelectedKey] = useState<string>();
+
+	// Modal states
+	const [editModalVisible, setEditModalVisible] = useState(false);
+	const [permissionModalVisible, setPermissionModalVisible] = useState(false);
+	const [selectedUnit, setSelectedUnit] = useState<{ id?: string; parentId?: string }>();
+
+	// 获取根节点列表
+	const { refetch: refreshTree } = useQuery({
+		queryKey: ["organizationUnits", "root"],
+		queryFn: async () => {
+			const { items } = await getRootListApi();
+			setOrganizationUnits(
+				items.map((item) => ({
+					isLeaf: false,
+					key: item.id,
+					title: item.displayName,
+					children: [],
+				})),
+			);
+			setLoadedKeys([]);
+			return items;
+		},
+	});
+
+	// 移动节点
+	const { mutateAsync: moveNode } = useMutation({
+		mutationFn: ({ id, parentId }: { id: string; parentId?: string }) => moveTo(id, parentId),
+		onSuccess: () => {
+			refreshTree();
+		},
+	});
+
+	// 删除节点
+	const { mutateAsync: deleteNode } = useMutation({
+		mutationFn: deleteApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			refreshTree();
+		},
+	});
+
+	const updateTreeData = (list: DataNode[], key: React.Key, children: DataNode[]): DataNode[] => {
+		return list.map((node) => {
+			if (node.key === key) {
+				return {
+					...node,
+					children, // 更新子节点
+				};
+			}
+			if (node.children) {
+				return {
+					...node,
+					children: updateTreeData(node.children, key, children), // 递归更新子节点
+				};
+			}
+			return node;
+		});
+	};
+	const findNodeById = (nodes: DataNode[], id?: string): DataNode | undefined => {
+		if (!id) return undefined;
+
+		for (const node of nodes) {
+			if (node.key === id) return node;
+			if (node.children) {
+				const found = findNodeById(node.children, id);
+				if (found) return found;
+			}
+		}
+		return undefined;
+	};
+	useEffect(() => {
+		onSelected?.(selectedKey);
+	}, [selectedKey]);
+
+	const handleMenuClick = async (key: string, id: string) => {
+		switch (key) {
+			case "create":
+				setSelectedUnit({ parentId: id });
+				setEditModalVisible(true);
+				break;
+			case "update":
+				setSelectedUnit({ id });
+				setEditModalVisible(true);
+				break;
+			case "permissions":
+				// const unit = await getApi(id);
+				setSelectedUnit({ id });
+				setPermissionModalVisible(true);
+				break;
+			case "delete":
+				modal.confirm({
+					title: $t("AbpUi.AreYouSure"),
+					content: $t("AbpUi.ItemWillBeDeletedMessage"),
+					onOk: () => deleteNode(id),
+				});
+				break;
+			case "refresh":
+				refreshTree();
+				break;
+		}
+	};
+
+	const menuItems = [
+		{
+			key: "update",
+			icon: <EditOutlined />,
+			label: $t("AbpUi.Edit"),
+		},
+		{
+			key: "create",
+			icon: <PlusOutlined />,
+			label: $t("AbpIdentity.OrganizationUnit:AddChildren"),
+		},
+		{
+			key: "delete",
+			icon: <DeleteOutlined />,
+			label: $t("AbpUi.Delete"),
+		},
+		{
+			key: "permissions",
+			icon: <Iconify icon="icon-park-outline:permissions" />,
+			label: $t("AbpPermissionManagement.Permissions"),
+		},
+		{
+			key: "refresh",
+			icon: <RedoOutlined />,
+			label: $t("AbpIdentity.OrganizationUnit:RefreshRoot"),
+		},
+	];
+
+	return (
+		<>
+			{contextHolder}
+			<Card
+				title={$t("AbpIdentity.OrganizationUnit:Tree")}
+				extra={
+					<Button
+						type="primary"
+						icon={<PlusOutlined />}
+						onClick={() => {
+							setSelectedUnit({});
+							setEditModalVisible(true);
+						}}
+					>
+						{$t("AbpIdentity.OrganizationUnit:AddRoot")}
+					</Button>
+				}
+			>
+				<Tree
+					loadData={async (node) => {
+						// 加载子节点
+						const nodeKey = String(node.key);
+						const { items } = await getChildrenApi({ id: nodeKey });
+						node.isLeaf = items.length === 0;
+						node.children = items.map((item): DataNode => {
+							return {
+								isLeaf: false,
+								key: item.id,
+								title: item.displayName,
+								children: [],
+							};
+						});
+						setOrganizationUnits((prevUnits) => updateTreeData(prevUnits, nodeKey, node.children || []));
+
+						setLoadedKeys((prev) => [...prev, String(node.key)]);
+					}}
+					loadedKeys={loadedKeys}
+					treeData={organizationUnits}
+					blockNode
+					draggable
+					onDrop={(info) => {
+						if (!info.dragNode.key) return;
+						const dragKey = String(info.dragNode.key);
+						const dropKey =
+							info.dropPosition === -1
+								? undefined // 作为根节点
+								: String(info.node.key); // 作为子节点
+						moveNode({ id: dragKey, parentId: dropKey });
+					}}
+					onRightClick={(_) => {}}
+					onSelect={(selectedKeys) => {
+						if (selectedKeys.length === 0) {
+							setSelectedKey(undefined);
+							return;
+						}
+						setSelectedKey(String(selectedKeys[0]));
+					}}
+					titleRender={(nodeData) => (
+						<Dropdown
+							trigger={["contextMenu"]}
+							menu={{
+								items: menuItems,
+								onClick: ({ key }) => handleMenuClick(key, String(nodeData.key)),
+							}}
+						>
+							<div className="flex items-center justify-between py-1 px-2 rounded cursor-pointer group">
+								<span>{String(nodeData.title)}</span>
+								<span className="invisible group-hover:visible text-gray-400">
+									<Iconify icon="ph:mouse-right-click-light" />
+								</span>
+							</div>
+						</Dropdown>
+					)}
+				/>
+			</Card>
+			<OrganizationUnitModal
+				visible={editModalVisible}
+				id={selectedUnit?.id}
+				parentId={selectedUnit?.parentId}
+				onClose={() => {
+					setEditModalVisible(false);
+					setSelectedUnit(undefined);
+				}}
+				onChange={() => {
+					refreshTree();
+				}}
+			/>
+
+			<PermissionModal
+				visible={permissionModalVisible}
+				providerKey={selectedUnit?.id}
+				providerName="O"
+				displayName={findNodeById(organizationUnits, selectedUnit?.id)?.title?.toString()}
+				onClose={() => {
+					setPermissionModalVisible(false);
+					setSelectedUnit(undefined);
+				}}
+				onChange={() => {
+					refreshTree();
+				}}
+			/>
+		</>
+	);
+};
+
+export default OrganizationUnitTree;
diff --git a/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-user-table.tsx b/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-user-table.tsx
new file mode 100644
index 000000000..c927b3a4a
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/organization-units/organization-unit-user-table.tsx
@@ -0,0 +1,142 @@
+import { useRef, useState } from "react";
+import { Button, Card, Modal } from "antd";
+import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import type { IdentityUserDto } from "#/management/identity";
+import { ProTable, type ActionType, type ProColumns } from "@ant-design/pro-table";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { addMembers, getUserListApi } from "@/api/management/identity/organization-units";
+import { removeOrganizationUnitApi } from "@/api/management/identity/users";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import { OrganizationUnitPermissions } from "@/constants/management/identity/permissions";
+import SelectMemberModal from "./select-member-modal";
+import { toast } from "sonner";
+
+interface Props {
+	selectedKey?: string;
+}
+
+const OrganizationUnitUserTable: React.FC<Props> = ({ selectedKey }) => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const [modal, contextHolder] = Modal.useModal();
+	const [memberModalVisible, setMemberModalVisible] = useState(false);
+
+	// 获取用户列表
+	const { data, isLoading, refetch } = useQuery({
+		queryKey: ["organizationUnitUsers", selectedKey],
+		queryFn: () => {
+			if (!selectedKey) {
+				return Promise.reject(new Error("selectedKey is undefined"));
+			}
+			return getUserListApi(selectedKey, {});
+		},
+		enabled: !!selectedKey,
+	});
+
+	// 添加成员
+	const { mutateAsync: addUsers } = useMutation({
+		mutationFn: (users: IdentityUserDto[]) => {
+			if (!selectedKey) {
+				return Promise.reject(new Error("selectedKey is undefined"));
+			}
+			return addMembers(selectedKey, { userIds: users.map((u) => u.id) });
+		},
+		onSuccess: () => {
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			refetch();
+			actionRef.current?.reload();
+			setMemberModalVisible(false);
+		},
+	});
+
+	// 移除成员
+	const { mutateAsync: removeUser } = useMutation({
+		mutationFn: (userId: string) => {
+			if (!selectedKey) {
+				return Promise.reject(new Error("selectedKey is undefined"));
+			}
+			return removeOrganizationUnitApi(userId, selectedKey);
+		},
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			refetch();
+			actionRef.current?.reload();
+		},
+	});
+
+	const columns: ProColumns<IdentityUserDto>[] = [
+		{
+			title: $t("AbpIdentity.DisplayName:UserName"),
+			dataIndex: "userName",
+			width: 100,
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:Email"),
+			dataIndex: "email",
+			width: 120,
+		},
+		{
+			title: $t("AbpUi.Actions"),
+			width: 120,
+			fixed: "right",
+			render: (_, record) => (
+				<Button
+					type="link"
+					danger
+					icon={<DeleteOutlined />}
+					disabled={!hasAccessByCodes([OrganizationUnitPermissions.ManageUsers])}
+					onClick={() => {
+						modal.confirm({
+							title: $t("AbpUi.AreYouSure"),
+							content: $t("AbpIdentity.OrganizationUnit:AreYouSureRemoveUser", { 0: record.userName }),
+							onOk: () => removeUser(record.id),
+						});
+					}}
+				>
+					{$t("AbpUi.Delete")}
+				</Button>
+			),
+		},
+	];
+
+	const getAddMemberEnabled = selectedKey && hasAccessByCodes([OrganizationUnitPermissions.ManageUsers]);
+
+	return (
+		<>
+			{contextHolder}
+			<Card>
+				<ProTable<IdentityUserDto>
+					headerTitle={$t("AbpIdentity.Users")}
+					actionRef={actionRef}
+					rowKey="id"
+					columns={columns}
+					dataSource={data?.items}
+					loading={isLoading}
+					search={false}
+					pagination={{
+						showSizeChanger: true,
+						total: data?.totalCount,
+					}}
+					toolBarRender={() => [
+						getAddMemberEnabled && (
+							<Button type="primary" icon={<PlusOutlined />} onClick={() => setMemberModalVisible(true)}>
+								{$t("AbpIdentity.OrganizationUnit:AddMember")}
+							</Button>
+						),
+					]}
+				/>
+			</Card>
+			{selectedKey && (
+				<SelectMemberModal
+					visible={memberModalVisible}
+					onClose={() => setMemberModalVisible(false)}
+					onConfirm={addUsers}
+					organizationUnitId={selectedKey}
+				/>
+			)}
+		</>
+	);
+};
+
+export default OrganizationUnitUserTable;
diff --git a/apps/react-admin/src/pages/management/identity/organization-units/select-member-modal.tsx b/apps/react-admin/src/pages/management/identity/organization-units/select-member-modal.tsx
new file mode 100644
index 000000000..997789c18
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/organization-units/select-member-modal.tsx
@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { Modal } from "antd";
+import { useTranslation } from "react-i18next";
+import type { IdentityUserDto } from "#/management/identity";
+import { ProTable, type ProColumns } from "@ant-design/pro-table";
+import { useQuery } from "@tanstack/react-query";
+import { getUnaddedUserListApi } from "@/api/management/identity/organization-units";
+
+interface Props {
+	visible: boolean;
+	onClose: () => void;
+	onConfirm: (users: IdentityUserDto[]) => void;
+	organizationUnitId: string;
+}
+
+const SelectMemberModal: React.FC<Props> = ({ visible, onClose, onConfirm, organizationUnitId }) => {
+	const { t: $t } = useTranslation();
+	const [selectedUsers, setSelectedUsers] = useState<IdentityUserDto[]>([]);
+	const [searchParams, setSearchParams] = useState<{ filter?: string }>({});
+
+	// 获取可添加的用户列表
+	const { data, isLoading } = useQuery({
+		queryKey: ["organizationUnitUsers", "unAdded", organizationUnitId, searchParams],
+		queryFn: () =>
+			getUnaddedUserListApi({
+				id: organizationUnitId,
+				...searchParams,
+			}),
+		enabled: visible,
+	});
+
+	const columns: ProColumns<IdentityUserDto>[] = [
+		{
+			title: $t("AbpIdentity.DisplayName:UserName"),
+			dataIndex: "userName",
+			width: 100,
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:Email"),
+			dataIndex: "email",
+			width: 120,
+		},
+	];
+
+	return (
+		<Modal
+			open={visible}
+			title={$t("AbpIdentity.Users")}
+			onCancel={onClose}
+			onOk={() => onConfirm(selectedUsers)}
+			width="800px"
+		>
+			<ProTable<IdentityUserDto>
+				rowKey="id"
+				columns={columns}
+				dataSource={data?.items}
+				loading={isLoading}
+				rowSelection={{
+					selections: true,
+					onChange: (_, rows) => setSelectedUsers(rows),
+				}}
+				search={{
+					labelWidth: "auto",
+					span: 12,
+				}}
+				request={async (params) => {
+					setSearchParams({ filter: params.filter });
+					return {
+						data: data?.items,
+						success: true,
+						total: data?.totalCount,
+					};
+				}}
+				pagination={{
+					showSizeChanger: true,
+					total: data?.totalCount,
+				}}
+			/>
+		</Modal>
+	);
+};
+
+export default SelectMemberModal;
diff --git a/apps/react-admin/src/pages/management/identity/organization-units/select-role-modal.tsx b/apps/react-admin/src/pages/management/identity/organization-units/select-role-modal.tsx
new file mode 100644
index 000000000..8e971e6da
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/organization-units/select-role-modal.tsx
@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { Modal, Table } from "antd";
+import { useTranslation } from "react-i18next";
+import type { IdentityRoleDto } from "#/management/identity/role";
+import { useQuery } from "@tanstack/react-query";
+import { getUnaddedRoleListApi } from "@/api/management/identity/organization-units";
+
+interface Props {
+	visible: boolean;
+	onClose: () => void;
+	onConfirm: (roles: IdentityRoleDto[]) => void;
+	organizationUnitId: string;
+}
+
+const SelectRoleModal: React.FC<Props> = ({ visible, onClose, onConfirm, organizationUnitId }) => {
+	const { t: $t } = useTranslation();
+	const [selectedRoles, setSelectedRoles] = useState<IdentityRoleDto[]>([]);
+	const [searchParams, setSearchParams] = useState<{ filter?: string }>({});
+
+	// 获取可添加的角色列表
+	const { data, isLoading } = useQuery({
+		queryKey: ["organizationUnitRoles", "unAdded", organizationUnitId, searchParams],
+		queryFn: () =>
+			getUnaddedRoleListApi({
+				id: organizationUnitId,
+				...searchParams,
+			}),
+		enabled: visible,
+	});
+
+	const columns = [
+		{
+			title: $t("AbpIdentity.DisplayName:RoleName"),
+			dataIndex: "name",
+			width: 200,
+		},
+	];
+
+	return (
+		<Modal
+			open={visible}
+			title={$t("AbpIdentity.Roles")}
+			onCancel={onClose}
+			onOk={() => onConfirm(selectedRoles)}
+			width="800px"
+		>
+			<Table
+				rowKey="id"
+				columns={columns}
+				dataSource={data?.items}
+				loading={isLoading}
+				rowSelection={{
+					type: "checkbox",
+					onChange: (_, rows) => setSelectedRoles(rows),
+				}}
+				pagination={{
+					total: data?.totalCount,
+					showSizeChanger: true,
+				}}
+			/>
+		</Modal>
+	);
+};
+
+export default SelectRoleModal;
diff --git a/apps/react-admin/src/pages/management/identity/roles/role-claim-modal.tsx b/apps/react-admin/src/pages/management/identity/roles/role-claim-modal.tsx
new file mode 100644
index 000000000..dd10eac5f
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/roles/role-claim-modal.tsx
@@ -0,0 +1,72 @@
+import type React from "react";
+import { Modal } from "antd";
+import { useTranslation } from "react-i18next";
+import type { IdentityRoleDto } from "#/management/identity";
+import type {
+	IdentityClaimCreateDto,
+	IdentityClaimDeleteDto,
+	IdentityClaimUpdateDto,
+} from "#/management/identity/claims";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createClaimApi, deleteClaimApi, getClaimsApi, updateClaimApi } from "@/api/management/identity/role";
+import { IdentityRolePermissions } from "@/constants/management/identity/permissions";
+import ClaimTable from "@/components/abp/claims/claim-table";
+
+interface Props {
+	visible: boolean;
+	onClose: () => void;
+	role: IdentityRoleDto;
+}
+
+//TODO on change 结合测试配置的role的claims和其它calims获取的地方
+const RoleClaimModal: React.FC<Props> = ({ visible, onClose, role }) => {
+	const { t: $t } = useTranslation();
+	const queryClient = useQueryClient();
+	const queryKey = ["roleClaims", role.id];
+
+	// Mutations for CRUD operations
+	const { mutateAsync: createClaim } = useMutation({
+		mutationFn: (input: IdentityClaimCreateDto) => createClaimApi(role.id, input),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey });
+		},
+	});
+
+	const { mutateAsync: updateClaim } = useMutation({
+		mutationFn: (input: IdentityClaimUpdateDto) => updateClaimApi(role.id, input),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey });
+		},
+	});
+
+	const { mutateAsync: deleteClaim } = useMutation({
+		mutationFn: (input: IdentityClaimDeleteDto) => deleteClaimApi(role.id, input),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey });
+		},
+	});
+
+	return (
+		<Modal
+			title={$t("AbpIdentity.ManageClaim")}
+			open={visible}
+			onCancel={onClose}
+			footer={null}
+			width={800}
+			destroyOnClose
+		>
+			<ClaimTable
+				createApi={createClaim}
+				createPolicy={IdentityRolePermissions.ManageClaims}
+				deleteApi={deleteClaim}
+				deletePolicy={IdentityRolePermissions.ManageClaims}
+				updateApi={updateClaim}
+				updatePolicy={IdentityRolePermissions.ManageClaims}
+				getApi={async () => getClaimsApi(role.id)}
+				queryKey={queryKey}
+			/>
+		</Modal>
+	);
+};
+
+export default RoleClaimModal;
diff --git a/apps/react-admin/src/pages/management/identity/roles/role-modal.tsx b/apps/react-admin/src/pages/management/identity/roles/role-modal.tsx
new file mode 100644
index 000000000..d1b3cbdd7
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/roles/role-modal.tsx
@@ -0,0 +1,103 @@
+import type React from "react";
+import { useEffect } from "react";
+import { Modal, Form, Input, Checkbox } from "antd";
+import { useTranslation } from "react-i18next";
+import type { IdentityRoleDto } from "#/management/identity";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { createApi, getApi, updateApi } from "@/api/management/identity/role";
+import { toast } from "sonner";
+
+interface Props {
+	visible: boolean;
+	onClose: () => void;
+	onChange: () => void;
+	role?: IdentityRoleDto;
+}
+
+const defaultModel: Partial<IdentityRoleDto> = {
+	isDefault: false,
+	isPublic: true,
+	isStatic: false,
+};
+
+const RoleModal: React.FC<Props> = ({ visible, onClose, onChange, role }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm<IdentityRoleDto>();
+	const queryClient = useQueryClient();
+	// Query for getting role details
+	const { data: roleData, isLoading: isLoadingRole } = useQuery({
+		queryKey: ["role", role?.id],
+		queryFn: () => {
+			if (!role?.id) {
+				return Promise.reject(new Error("role id is undefined"));
+			}
+			return getApi(role.id);
+		},
+		enabled: visible && !!role?.id,
+	});
+
+	// Mutations for create/update
+	const { mutateAsync: createRole, isPending: isCreating } = useMutation({
+		mutationFn: createApi,
+		onSuccess: (_) => {
+			onChange();
+			toast.success($t("AbpUi.CreatedSuccessfully"));
+			onClose();
+		},
+	});
+
+	const { mutateAsync: updateRole, isPending: isUpdating } = useMutation({
+		mutationFn: ({ id, data }: { id: string; data: IdentityRoleDto }) => updateApi(id, data),
+		onSuccess: (_) => {
+			onChange();
+			queryClient.invalidateQueries({ queryKey: ["role", role?.id] });
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			onClose();
+		},
+	});
+
+	useEffect(() => {
+		if (visible) {
+			form.setFieldsValue(role?.id ? (roleData ?? role) : defaultModel);
+		} else {
+			form.resetFields();
+		}
+	}, [visible, roleData, role]);
+
+	const handleOk = async () => {
+		try {
+			const values = await form.validateFields();
+			if (role?.id) {
+				await updateRole({ id: role.id, data: values });
+			} else {
+				await createRole(values);
+			}
+		} catch (error) {
+			// Form validation error, no need to handle
+		}
+	};
+
+	return (
+		<Modal
+			title={role?.id ? $t("AbpIdentity.RoleSubject", { 0: role.name }) : $t("AbpIdentity.NewRole")}
+			open={visible}
+			onCancel={onClose}
+			onOk={handleOk}
+			confirmLoading={isCreating || isUpdating || isLoadingRole}
+		>
+			<Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+				<Form.Item label={$t("AbpIdentity.DisplayName:IsDefault")} name="isDefault" valuePropName="checked">
+					<Checkbox disabled={role?.isStatic}>{$t("AbpIdentity.DisplayName:IsDefault")}</Checkbox>
+				</Form.Item>
+				<Form.Item label={$t("AbpIdentity.DisplayName:IsPublic")} name="isPublic" valuePropName="checked">
+					<Checkbox disabled={role?.isStatic}>{$t("AbpIdentity.DisplayName:IsPublic")}</Checkbox>
+				</Form.Item>
+				<Form.Item label={$t("AbpIdentity.DisplayName:RoleName")} name="name" rules={[{ required: true }]}>
+					<Input disabled={role?.isStatic} />
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+};
+
+export default RoleModal;
diff --git a/apps/react-admin/src/pages/management/identity/roles/role-table.tsx b/apps/react-admin/src/pages/management/identity/roles/role-table.tsx
new file mode 100644
index 000000000..0d0dce368
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/roles/role-table.tsx
@@ -0,0 +1,252 @@
+import { useRef, useState } from "react";
+import { Button, Dropdown, Modal, Tag, Space, Card } from "antd";
+import { EditOutlined, DeleteOutlined, EllipsisOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { IdentityRoleDto } from "#/management/identity/role";
+import { type ActionType, ProTable, type ProColumns } from "@ant-design/pro-table";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import { deleteApi, getPagedListApi } from "@/api/management/identity/role";
+import RoleModal from "./role-modal";
+import RoleClaimModal from "./role-claim-modal";
+import PermissionModal from "@/components/abp/permissions/permission-modal";
+import { toast } from "sonner";
+import { Iconify } from "@/components/icon";
+import useAbpStore from "@/store/abpCoreStore";
+import { IdentityRolePermissions } from "@/constants/management/identity/permissions";
+import { AuditLogPermissions } from "@/constants/management/auditing/permissions";
+import { EntityChangeDrawer } from "@/components/abp/auditing/entity-change-drawer";
+
+const RoleTable: React.FC = () => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const queryClient = useQueryClient();
+	const abpStore = useAbpStore();
+	const [modal, contextHolder] = Modal.useModal();
+	// Modal states
+	const [roleModalVisible, setRoleModalVisible] = useState(false);
+	const [claimModalVisible, setClaimModalVisible] = useState(false);
+	const [permissionModalVisible, setPermissionModalVisible] = useState(false);
+	const [entityChangeDrawerVisible, setEntityChangeDrawerVisible] = useState(false);
+	const [selectedRole, setSelectedRole] = useState<IdentityRoleDto>();
+	const [searchParams, setSearchParams] = useState<{ filter?: string }>({});
+
+	// 获取角色列表
+	const { data, isLoading } = useQuery({
+		queryKey: ["roles", searchParams],
+		queryFn: () => getPagedListApi(searchParams),
+	});
+
+	// 删除角色
+	const { mutateAsync: deleteRole } = useMutation({
+		mutationFn: deleteApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["roles"] });
+		},
+	});
+
+	const handleDelete = (role: IdentityRoleDto) => {
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpIdentity.RoleDeletionConfirmationMessage", { 0: role.name }),
+			onOk: () => deleteRole(role.id),
+		});
+	};
+
+	const handleMenuClick = (key: string, role: IdentityRoleDto) => {
+		setSelectedRole(role);
+		switch (key) {
+			case "permissions":
+				setPermissionModalVisible(true);
+				break;
+			case "claims":
+				setClaimModalVisible(true);
+				break;
+			case "entity-changes":
+				setEntityChangeDrawerVisible(true);
+				break;
+		}
+	};
+
+	const columns: ProColumns<IdentityRoleDto>[] = [
+		{
+			title: $t("AbpUi.Search"),
+			dataIndex: "filter",
+			valueType: "text",
+			hideInTable: true,
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:RoleName"),
+			dataIndex: "name",
+			render: (_, record) => (
+				<Space>
+					{record.isStatic && <Tag color="#8baac4">{$t("AbpIdentity.Static")}</Tag>}
+					{record.isDefault && <Tag color="#108ee9">{$t("AbpIdentity.DisplayName:IsDefault")}</Tag>}
+					{record.isPublic && <Tag color="#87d068">{$t("AbpIdentity.Public")}</Tag>}
+					<span>{record.name}</span>
+				</Space>
+			),
+			hideInSearch: true,
+		},
+		{
+			title: $t("AbpUi.Actions"),
+			width: 220,
+			fixed: "right",
+			hideInSearch: true,
+			render: (_, record) => (
+				<div className="flex flex-row">
+					<div className="basis-1/3">
+						{hasAccessByCodes([IdentityRolePermissions.Update]) && (
+							<Button
+								type="link"
+								icon={<EditOutlined />}
+								block
+								onClick={() => {
+									setSelectedRole(record);
+									setRoleModalVisible(true);
+								}}
+							>
+								{$t("AbpUi.Edit")}
+							</Button>
+						)}
+					</div>
+					<div className="basis-1/3">
+						{hasAccessByCodes([IdentityRolePermissions.Delete]) && !record.isStatic && (
+							<Button type="link" danger icon={<DeleteOutlined />} block onClick={() => handleDelete(record)}>
+								{$t("AbpUi.Delete")}
+							</Button>
+						)}
+					</div>
+					<div className="basis-1/3">
+						<Dropdown
+							menu={{
+								items: [
+									hasAccessByCodes([IdentityRolePermissions.ManagePermissions])
+										? {
+												key: "permissions",
+												icon: <Iconify icon="icon-park-outline:permissions" />,
+												label: $t("AbpPermissionManagement.Permissions"),
+											}
+										: null,
+									hasAccessByCodes([IdentityRolePermissions.ManageClaims])
+										? {
+												key: "claims",
+												icon: <Iconify icon="la:id-card-solid" />,
+												label: $t("AbpIdentity.ManageClaim"),
+											}
+										: null,
+									hasAccessByCodes([AuditLogPermissions.Default])
+										? {
+												key: "entity-changes",
+												icon: <Iconify icon="fluent-mdl2:compliance-audit" />,
+												label: $t("AbpAuditLogging.EntitiesChanged"),
+											}
+										: null,
+								].filter(Boolean),
+								onClick: ({ key }) => handleMenuClick(key as string, record),
+							}}
+						>
+							<Button type="link" icon={<EllipsisOutlined />} />
+						</Dropdown>
+					</div>
+				</div>
+			),
+		},
+	];
+
+	return (
+		<>
+			{contextHolder}
+			<Card>
+				<ProTable<IdentityRoleDto>
+					headerTitle={$t("AbpIdentity.Roles")}
+					actionRef={actionRef}
+					rowKey="id"
+					columns={columns}
+					dataSource={data?.items}
+					loading={isLoading}
+					search={{
+						labelWidth: "auto",
+						span: 12,
+						defaultCollapsed: true,
+					}}
+					pagination={{
+						showSizeChanger: true,
+						total: data?.totalCount,
+					}}
+					request={async (params) => {
+						const { filter } = params;
+						setSearchParams({ filter });
+						// 强制重新请求数据
+						await queryClient.invalidateQueries({ queryKey: ["roles"] });
+						return { data: data?.items, success: true, total: data?.totalCount };
+					}}
+					toolBarRender={() => [
+						hasAccessByCodes([IdentityRolePermissions.Create]) && (
+							<Button
+								type="primary"
+								onClick={() => {
+									setSelectedRole(undefined);
+									setRoleModalVisible(true);
+								}}
+							>
+								{$t("AbpIdentity.NewRole")}
+							</Button>
+						),
+					]}
+				/>
+			</Card>
+			<RoleModal
+				visible={roleModalVisible}
+				role={selectedRole}
+				onClose={() => {
+					setRoleModalVisible(false);
+					setSelectedRole(undefined);
+				}}
+				onChange={() => {
+					// actionRef.current?.reload();
+					queryClient.invalidateQueries({ queryKey: ["roles"] });
+				}}
+			/>
+			{selectedRole && (
+				<RoleClaimModal
+					visible={claimModalVisible}
+					role={selectedRole}
+					onClose={() => {
+						setClaimModalVisible(false);
+						setSelectedRole(undefined);
+					}}
+					// onChange={() => {
+					//   actionRef.current?.reload();
+					// }}
+				/>
+			)}
+			<PermissionModal
+				visible={permissionModalVisible}
+				providerKey={selectedRole?.name}
+				providerName="R"
+				displayName={selectedRole?.name}
+				readonly={abpStore.application?.currentUser.roles.includes(selectedRole?.name ?? "")} //TODO 好像有改动
+				onClose={() => {
+					setPermissionModalVisible(false);
+					setSelectedRole(undefined);
+				}}
+				onChange={() => {
+					// actionRef.current?.reload();
+					queryClient.invalidateQueries({ queryKey: ["roles"] });
+				}}
+			/>
+			<EntityChangeDrawer
+				open={entityChangeDrawerVisible}
+				input={{ entityId: selectedRole?.id, entityTypeFullName: "Volo.Abp.Identity.IdentityRole" }}
+				onClose={() => {
+					setEntityChangeDrawerVisible(false);
+					setSelectedRole(undefined);
+				}}
+			/>
+		</>
+	);
+};
+
+export default RoleTable;
diff --git a/apps/react-admin/src/pages/management/identity/security-logs/security-log-drawer.tsx b/apps/react-admin/src/pages/management/identity/security-logs/security-log-drawer.tsx
new file mode 100644
index 000000000..d0d091972
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/security-logs/security-log-drawer.tsx
@@ -0,0 +1,66 @@
+import type React from "react";
+import { Drawer, Descriptions } from "antd";
+import { formatToDateTime } from "@/utils/abp";
+import { useTranslation } from "react-i18next";
+import { useQuery } from "@tanstack/react-query";
+import { getApi } from "@/api/management/identity/security-logs";
+
+interface Props {
+	visible: boolean;
+	onClose: () => void;
+	securityLogId?: string;
+}
+
+const SecurityLogDrawer: React.FC<Props> = ({ visible, onClose, securityLogId }) => {
+	const { t: $t } = useTranslation();
+
+	const { data: formModel, isLoading } = useQuery({
+		queryKey: ["securityLog", securityLogId],
+		queryFn: () => {
+			if (!securityLogId) {
+				return Promise.reject(new Error("securityLogId is undefined"));
+			}
+			return getApi(securityLogId);
+		},
+		enabled: visible && !!securityLogId,
+	});
+
+	return (
+		<Drawer
+			title={$t("AbpAuditLogging.SecurityLog")}
+			open={visible}
+			onClose={onClose}
+			width={800}
+			loading={isLoading}
+			destroyOnClose
+		>
+			<Descriptions bordered size="small" column={2} labelStyle={{ width: "110px" }} colon={false}>
+				<Descriptions.Item label={$t("AbpAuditLogging.ApplicationName")}>
+					{formModel?.applicationName}
+				</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpAuditLogging.CreationTime")}>
+					{formModel?.creationTime ? formatToDateTime(formModel.creationTime) : ""}
+				</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpAuditLogging.Identity")}>{formModel?.identity}</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpAuditLogging.TenantName")}>{formModel?.tenantName}</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpAuditLogging.Actions")}>{formModel?.action}</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpAuditLogging.CorrelationId")}>{formModel?.correlationId}</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpAuditLogging.UserId")}>{formModel?.userId}</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpAuditLogging.UserName")}>{formModel?.userName}</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpAuditLogging.ClientId")}>{formModel?.clientId}</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpAuditLogging.ClientIpAddress")}>
+					{formModel?.clientIpAddress}
+				</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpAuditLogging.BrowserInfo")} span={2}>
+					{formModel?.browserInfo}
+				</Descriptions.Item>
+
+				<Descriptions.Item label={$t("AbpAuditLogging.Additional")} span={2}>
+					{formModel?.extraProperties ? JSON.stringify(formModel.extraProperties, null, 2) : ""}
+				</Descriptions.Item>
+			</Descriptions>
+		</Drawer>
+	);
+};
+
+export default SecurityLogDrawer;
diff --git a/apps/react-admin/src/pages/management/identity/security-logs/security-logs-table.tsx b/apps/react-admin/src/pages/management/identity/security-logs/security-logs-table.tsx
new file mode 100644
index 000000000..6f76cb866
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/security-logs/security-logs-table.tsx
@@ -0,0 +1,220 @@
+import { useRef, useState } from "react";
+import { Space, Button, Tag, Card } from "antd";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import ProTable, { type ProColumns, type ActionType } from "@ant-design/pro-table";
+import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { formatToDateTime } from "@/utils/abp";
+import type { SecurityLogDto } from "#/management/identity";
+import { antdOrderToAbpOrder } from "@/utils/abp/sort-order";
+import { SecurityLogPermissions } from "@/constants/management/identity/permissions";
+import { hasAccessByCodes, withAccessChecker } from "@/utils/abp/access-checker";
+import { toast } from "sonner";
+import SecurityLogDrawer from "./security-log-drawer";
+import { deleteApi, getPagedListApi } from "@/api/management/identity/security-logs";
+import DeleteModal from "@/components/abp/common/delete-modal";
+
+const SecurityLogs = () => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const queryClient = useQueryClient();
+	//drawer
+	const [drawerVisible, setDrawerVisible] = useState(false);
+	const [selectedLogId, setSelectedLogId] = useState<string | undefined>();
+	//Modal
+	const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+
+	const openDrawer = (id: string) => {
+		setSelectedLogId(id);
+		setDrawerVisible(true);
+	};
+
+	const closeDrawer = () => {
+		setDrawerVisible(false);
+		setSelectedLogId(undefined);
+	};
+
+	const { mutateAsync: deleteSecurityLog } = useMutation({
+		mutationFn: deleteApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["securityLogs"] });
+		},
+	});
+
+	const handleDelete = (log: SecurityLogDto) => {
+		setSelectedLogId(log.id);
+		setDeleteModalVisible(true);
+	};
+
+	const confirmDelete = async () => {
+		if (selectedLogId) {
+			await deleteSecurityLog(selectedLogId);
+			actionRef.current?.reload();
+			setDeleteModalVisible(false);
+		}
+	};
+
+	const columns: ProColumns<SecurityLogDto>[] = [
+		{
+			title: $t("AbpAuditLogging.CreationTime"),
+			dataIndex: "creationTime",
+			valueType: "dateRange",
+			sorter: true,
+			width: 180,
+			render: (_, record) => {
+				// formatter
+				return record.creationTime ? formatToDateTime(record.creationTime) : record.creationTime;
+			},
+		},
+		{
+			title: $t("AbpAuditLogging.Identity"),
+			dataIndex: "identity",
+			sorter: true,
+			width: 180,
+		},
+		{
+			title: $t("AbpAuditLogging.UserName"),
+			dataIndex: "userName",
+			sorter: true,
+			width: 150,
+		},
+		{
+			title: $t("AbpAuditLogging.ClientId"),
+			dataIndex: "clientId",
+			sorter: true,
+			width: 200,
+		},
+		{
+			title: $t("AbpAuditLogging.ClientIpAddress"),
+			dataIndex: "clientIpAddress",
+			sorter: true,
+			width: 200,
+			hideInSearch: true,
+			render: (_, record) => (
+				<>
+					{/* 展示地址 */}
+					{record.extraProperties?.Location && <Tag color="blue">{record.extraProperties.Location}</Tag>}
+					<span>{record.clientIpAddress}</span>
+				</>
+			),
+		},
+		{
+			title: $t("AbpAuditLogging.ApplicationName"),
+			dataIndex: "applicationName",
+			sorter: true,
+			width: 200,
+			ellipsis: true,
+		},
+		{
+			title: $t("AbpAuditLogging.TenantName"),
+			dataIndex: "tenantName",
+			hideInSearch: true,
+			sorter: true,
+			width: 180,
+		},
+		{
+			title: $t("AbpAuditLogging.Actions"),
+			dataIndex: "action",
+			sorter: true,
+			width: 180,
+		},
+		{
+			title: $t("AbpAuditLogging.CorrelationId"),
+			dataIndex: "correlationId",
+			sorter: true,
+			width: 200,
+		},
+		{
+			title: $t("AbpAuditLogging.BrowserInfo"),
+			dataIndex: "browserInfo",
+			width: 200,
+			sorter: true,
+			hideInSearch: true,
+			ellipsis: true,
+		},
+		hasAccessByCodes([SecurityLogPermissions.Default, SecurityLogPermissions.Delete])
+			? {
+					title: $t("AbpUi.Actions"),
+					key: "actions",
+					align: "center",
+					fixed: "right",
+					hideInSearch: true,
+					width: 150,
+					render: (_, record) => (
+						<div className="flex gap-1">
+							{withAccessChecker(
+								<Button type="link" icon={<EditOutlined />} onClick={() => openDrawer(record.id)}>
+									{$t("AbpUi.Edit")}
+								</Button>,
+								[SecurityLogPermissions.Default],
+							)}
+							{withAccessChecker(
+								<Button type="link" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+									{$t("AbpUi.Delete")}
+								</Button>,
+								[SecurityLogPermissions.Delete],
+							)}
+						</div>
+					),
+				}
+			: {},
+	];
+
+	return (
+		<>
+			<Space direction="vertical" size="large" className="w-full">
+				<Card>
+					<ProTable<SecurityLogDto>
+						headerTitle={$t("AbpAuditLogging.SecurityLog")}
+						actionRef={actionRef}
+						rowKey="id"
+						search={{
+							labelWidth: "auto",
+							defaultCollapsed: true,
+						}}
+						columns={columns}
+						request={async (params, sorter) => {
+							const { creationTime, current, pageSize, ...rest } = params;
+							const [startTime, endTime] = creationTime || [];
+
+							const query = await queryClient.fetchQuery({
+								queryKey: ["securityLogs", params, sorter],
+								queryFn: () =>
+									getPagedListApi({
+										maxResultCount: pageSize,
+										skipCount: ((current || 1) - 1) * (pageSize || 0),
+										sorting: sorter
+											? Object.keys(sorter)
+													.map((key) => `${key} ${antdOrderToAbpOrder(sorter[key])}`)
+													.join(", ")
+											: undefined,
+										startTime: startTime || undefined, // 转换为 startTime 参数
+										endTime: endTime || undefined, // 转换为 endTime 参数
+										...rest,
+									}),
+							});
+
+							return {
+								data: query.items,
+								total: query.totalCount,
+							};
+						}}
+						pagination={{
+							showSizeChanger: true,
+						}}
+						scroll={{ x: "max-content" }}
+					/>
+				</Card>
+			</Space>
+			<DeleteModal
+				visible={deleteModalVisible}
+				onConfirm={confirmDelete}
+				onCancel={() => setDeleteModalVisible(false)}
+			/>
+			<SecurityLogDrawer visible={drawerVisible} onClose={closeDrawer} securityLogId={selectedLogId} />
+		</>
+	);
+};
+
+export default SecurityLogs;
diff --git a/apps/react-admin/src/pages/management/identity/sessions/session-table.tsx b/apps/react-admin/src/pages/management/identity/sessions/session-table.tsx
new file mode 100644
index 000000000..d18cd166f
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/sessions/session-table.tsx
@@ -0,0 +1,189 @@
+import { useRef, useState, useTransition } from "react";
+import { Button, Card, Modal, Select, Space, Tag } from "antd";
+import { DeleteOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { ProTable, type ActionType, type ProColumns } from "@ant-design/pro-table";
+import type { IdentitySessionDto } from "#/management/identity/sessions";
+import type { IdentityUserDto } from "#/management/identity/user";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import { IdentitySessionPermissions } from "@/constants/management/identity/permissions";
+import { getPagedListApi as getUserListApi } from "@/api/management/identity/users";
+import { getSessionsApi, revokeSessionApi } from "@/api/management/identity/user-sessions";
+import { useApplication } from "@/store/abpCoreStore";
+import { toast } from "sonner";
+
+const SessionTable: React.FC = () => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const queryClient = useQueryClient();
+	const [modal, contextHolder] = Modal.useModal();
+	const application = useApplication();
+
+	const [searchText, setSearchText] = useState("");
+	const [isPending, startTransition] = useTransition();
+
+	// Fetch users for select
+	const { data: users = [] } = useQuery({
+		queryKey: ["users", searchText],
+		queryFn: () =>
+			getUserListApi({
+				maxResultCount: 25,
+				filter: searchText,
+			}).then((res) => res.items),
+		enabled: !isPending,
+	});
+
+	// Revoke session mutation
+	const { mutateAsync: revokeSession } = useMutation({
+		mutationFn: revokeSessionApi,
+		onSuccess: () => {
+			toast.success($t("AbpIdentity.SuccessfullyRevoked"));
+			actionRef.current?.reload();
+		},
+	});
+
+	const handleDelete = (session: IdentitySessionDto) => {
+		if (session.sessionId === application?.currentUser.sessionId) return;
+
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpIdentity.SessionWillBeRevokedMessage"),
+			onOk: () => revokeSession(session.sessionId),
+		});
+	};
+
+	const columns: ProColumns<IdentitySessionDto>[] = [
+		{
+			title: $t("AbpUi.Search"),
+			dataIndex: "filter",
+			hideInTable: true,
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:UserName"),
+			dataIndex: "userId",
+			hideInTable: true,
+			renderFormItem: () => (
+				<Select
+					showSearch
+					allowClear
+					filterOption={false}
+					options={users.map((user: IdentityUserDto) => ({
+						label: user.userName,
+						value: user.id,
+					}))}
+					onSearch={(value) => {
+						startTransition(() => {
+							setSearchText(value);
+						});
+					}}
+					placeholder={$t("ui.placeholder.select")}
+				/>
+			),
+		},
+		{
+			align: "left",
+			dataIndex: "sessionId",
+			minWidth: 150,
+			title: $t("AbpIdentity.DisplayName:SessionId"),
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:ClientId"),
+			dataIndex: "clientId",
+		},
+
+		{
+			title: $t("AbpIdentity.DisplayName:Device"),
+			dataIndex: "device",
+			render: (_, record) => (
+				<Space>
+					{record.device}
+					{record.sessionId === application?.currentUser.sessionId && (
+						<Tag color="#87d068">{$t("AbpIdentity.CurrentSession")}</Tag>
+					)}
+				</Space>
+			),
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:DeviceInfo"),
+			dataIndex: "deviceInfo",
+			ellipsis: true,
+			hideInSearch: true,
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:IpAddresses"),
+			dataIndex: "ipAddresses",
+			hideInSearch: true,
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:SignedIn"),
+			dataIndex: "signedIn",
+			ellipsis: true,
+			hideInSearch: true,
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:LastAccessed"),
+			ellipsis: true,
+			dataIndex: "lastAccessed",
+			hideInSearch: true,
+		},
+		hasAccessByCodes([IdentitySessionPermissions.Default, IdentitySessionPermissions.Revoke])
+			? {
+					title: $t("AbpUi.Actions"),
+					width: 150,
+					fixed: "right",
+					hideInSearch: true,
+					render: (_, record) => (
+						<Space>
+							{record.sessionId !== application?.currentUser.sessionId &&
+								hasAccessByCodes([IdentitySessionPermissions.Revoke]) && (
+									<Button type="link" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+										{$t("AbpIdentity.RevokeSession")}
+									</Button>
+								)}
+						</Space>
+					),
+				}
+			: {},
+	];
+
+	return (
+		<>
+			{contextHolder}
+			<Card>
+				<ProTable<IdentitySessionDto>
+					headerTitle={$t("AbpIdentity.IdentitySessions")}
+					actionRef={actionRef}
+					rowKey="sessionId"
+					columns={columns}
+					scroll={{ x: "max-content" }}
+					request={async (params) => {
+						const { current, pageSize, userId, clientId, device } = params;
+						const query = await queryClient.fetchQuery({
+							queryKey: ["sessions", params],
+							queryFn: () =>
+								getSessionsApi({
+									maxResultCount: pageSize,
+									skipCount: ((current || 1) - 1) * (pageSize || 0),
+									userId,
+									clientId,
+									device,
+								}),
+						});
+						return {
+							data: query.items,
+							success: true,
+							total: query.totalCount,
+						};
+					}}
+					search={{
+						labelWidth: "auto",
+						defaultCollapsed: false,
+					}}
+				/>
+			</Card>
+		</>
+	);
+};
+
+export default SessionTable;
diff --git a/apps/react-admin/src/pages/management/identity/sessions/user-session-table.tsx b/apps/react-admin/src/pages/management/identity/sessions/user-session-table.tsx
new file mode 100644
index 000000000..caeb435f9
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/sessions/user-session-table.tsx
@@ -0,0 +1,97 @@
+import { Button, Descriptions, Table, Tag, type TableColumnType } from "antd";
+import { useTranslation } from "react-i18next";
+import type { IdentitySessionDto } from "#/management/identity/sessions";
+import { formatToDateTime } from "@/utils/abp";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import { IdentitySessionPermissions } from "@/constants/management/identity/permissions";
+import { useApplication } from "@/store/abpCoreStore";
+import { Space } from "antd";
+
+interface Props {
+	sessions: IdentitySessionDto[];
+	onRevoke: (session: IdentitySessionDto) => void;
+}
+
+const UserSessionTable: React.FC<Props> = ({ sessions, onRevoke }) => {
+	const { t: $t } = useTranslation();
+	const application = useApplication();
+
+	const isCurrentSession = (sessionId: string) => {
+		return application?.currentUser.sessionId === sessionId;
+	};
+
+	const allowRevokeSession = (session: IdentitySessionDto) => {
+		if (isCurrentSession(session.sessionId)) {
+			return false;
+		}
+		return hasAccessByCodes([IdentitySessionPermissions.Revoke]);
+	};
+
+	const expandedRowRender = (record: IdentitySessionDto) => {
+		return (
+			<Descriptions bordered size="small" column={2}>
+				<Descriptions.Item label={$t("AbpIdentity.DisplayName:SessionId")} span={2}>
+					{record.sessionId}
+				</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpIdentity.DisplayName:Device")}>{record.device}</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpIdentity.DisplayName:DeviceInfo")}>{record.deviceInfo}</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpIdentity.DisplayName:ClientId")}>{record.clientId}</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpIdentity.DisplayName:IpAddresses")}>{record.ipAddresses}</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpIdentity.DisplayName:SignedIn")}>
+					{formatToDateTime(record.signedIn)}
+				</Descriptions.Item>
+				<Descriptions.Item label={$t("AbpIdentity.DisplayName:LastAccessed")}>
+					{formatToDateTime(record.lastAccessed)}
+				</Descriptions.Item>
+			</Descriptions>
+		);
+	};
+
+	const columns: TableColumnType<IdentitySessionDto>[] = [
+		{
+			title: $t("AbpIdentity.DisplayName:Device"),
+			dataIndex: "device",
+			width: 150,
+			render: (_, record) => (
+				<Space>
+					<span>{record.device}</span>
+					{isCurrentSession(record.sessionId) && <Tag color="#87d068">{$t("AbpIdentity.CurrentSession")}</Tag>}
+				</Space>
+			),
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:SignedIn"),
+			dataIndex: "signedIn",
+			render: (value) => formatToDateTime(value),
+		},
+		{
+			title: $t("AbpUi.Actions"),
+			width: 120,
+			fixed: "right",
+			render: (_, record) => (
+				<div>
+					{allowRevokeSession(record) && (
+						<Button danger size="small" onClick={() => onRevoke(record)}>
+							{$t("AbpIdentity.RevokeSession")}
+						</Button>
+					)}
+				</div>
+			),
+		},
+	];
+
+	return (
+		<Table<IdentitySessionDto>
+			columns={columns}
+			dataSource={sessions}
+			rowKey="sessionId"
+			expandable={{
+				expandedRowRender,
+				expandRowByClick: true,
+			}}
+			pagination={false}
+		/>
+	);
+};
+
+export default UserSessionTable;
diff --git a/apps/react-admin/src/pages/management/identity/users/user-claim-modal.tsx b/apps/react-admin/src/pages/management/identity/users/user-claim-modal.tsx
new file mode 100644
index 000000000..e617b73e1
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/users/user-claim-modal.tsx
@@ -0,0 +1,75 @@
+import type React from "react";
+import { Modal } from "antd";
+import { useTranslation } from "react-i18next";
+import type { IdentityUserDto } from "#/management/identity";
+import type {
+	IdentityClaimCreateDto,
+	IdentityClaimDeleteDto,
+	IdentityClaimUpdateDto,
+} from "#/management/identity/claims";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createClaimApi, deleteClaimApi, getClaimsApi, updateClaimApi } from "@/api/management/identity/users";
+import { IdentityRolePermissions } from "@/constants/management/identity/permissions";
+import ClaimTable from "@/components/abp/claims/claim-table";
+
+interface Props {
+	visible: boolean;
+	onClose: () => void;
+	onChange: () => void;
+	user: IdentityUserDto;
+}
+
+const RoleClaimModal: React.FC<Props> = ({ visible, onClose, user, onChange }) => {
+	const { t: $t } = useTranslation();
+	const queryClient = useQueryClient();
+	const queryKey = ["userClaims", user.id];
+
+	// Mutations for CRUD operations
+	const { mutateAsync: createClaim } = useMutation({
+		mutationFn: (input: IdentityClaimCreateDto) => createClaimApi(user.id, input),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey });
+			onChange();
+		},
+	});
+
+	const { mutateAsync: updateClaim } = useMutation({
+		mutationFn: (input: IdentityClaimUpdateDto) => updateClaimApi(user.id, input),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey });
+			onChange();
+		},
+	});
+
+	const { mutateAsync: deleteClaim } = useMutation({
+		mutationFn: (input: IdentityClaimDeleteDto) => deleteClaimApi(user.id, input),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey });
+			onChange();
+		},
+	});
+
+	return (
+		<Modal
+			title={$t("AbpIdentity.ManageClaim")}
+			open={visible}
+			onCancel={onClose}
+			footer={null}
+			width={800}
+			destroyOnClose
+		>
+			<ClaimTable
+				createApi={createClaim}
+				createPolicy={IdentityRolePermissions.ManageClaims}
+				deleteApi={deleteClaim}
+				deletePolicy={IdentityRolePermissions.ManageClaims}
+				updateApi={updateClaim}
+				updatePolicy={IdentityRolePermissions.ManageClaims}
+				getApi={async () => getClaimsApi(user.id)}
+				queryKey={queryKey}
+			/>
+		</Modal>
+	);
+};
+
+export default RoleClaimModal;
diff --git a/apps/react-admin/src/pages/management/identity/users/user-lock-modal.tsx b/apps/react-admin/src/pages/management/identity/users/user-lock-modal.tsx
new file mode 100644
index 000000000..b4639825d
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/users/user-lock-modal.tsx
@@ -0,0 +1,69 @@
+import { Modal, Form, InputNumber, Select } from "antd";
+import { useTranslation } from "react-i18next";
+import { useMutation } from "@tanstack/react-query";
+import { lockApi } from "@/api/management/identity/users";
+
+interface Props {
+	visible: boolean;
+	onClose: () => void;
+	onChange: () => void;
+	userId: string;
+}
+
+enum LockType {
+	Seconds = 1,
+	Minutes = 60,
+	Hours = 3600,
+	Days = 86400,
+	Months = 2678400, // 按31天计算
+	Years = 32140800, // 按31*12天计算
+}
+
+const UserLockModal: React.FC<Props> = ({ visible, onClose, onChange, userId }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+
+	// 锁定用户
+	const { mutateAsync: lockUser, isPending } = useMutation({
+		mutationFn: ({ id, seconds }: { id: string; seconds: number }) => lockApi(id, seconds),
+		onSuccess: () => {
+			onChange();
+			onClose();
+		},
+	});
+
+	const handleOk = async () => {
+		try {
+			const values = await form.validateFields();
+			const lockSeconds = values.type * values.seconds;
+			await lockUser({ id: userId, seconds: lockSeconds });
+		} catch (error) {
+			// Form validation error
+		}
+	};
+
+	return (
+		<Modal open={visible} title={$t("AbpIdentity.Lock")} onCancel={onClose} onOk={handleOk} confirmLoading={isPending}>
+			<Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} initialValues={{ type: LockType.Seconds }}>
+				<Form.Item name="seconds" label={$t("AbpIdentity.LockTime")} rules={[{ required: true }]}>
+					<InputNumber className="w-full" />
+				</Form.Item>
+
+				<Form.Item name="type" label={$t("AbpIdentity.LockType")} rules={[{ required: true }]}>
+					<Select
+						options={[
+							{ label: $t("LockType:Seconds"), value: LockType.Seconds },
+							{ label: $t("LockType:Minutes"), value: LockType.Minutes },
+							{ label: $t("LockType:Hours"), value: LockType.Hours },
+							{ label: $t("LockType:Days"), value: LockType.Days },
+							{ label: $t("LockType:Months"), value: LockType.Months },
+							{ label: $t("LockType:Years"), value: LockType.Years },
+						]}
+					/>
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+};
+
+export default UserLockModal;
diff --git a/apps/react-admin/src/pages/management/identity/users/user-modal.tsx b/apps/react-admin/src/pages/management/identity/users/user-modal.tsx
new file mode 100644
index 000000000..88f3e25fc
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/users/user-modal.tsx
@@ -0,0 +1,315 @@
+import { useEffect, useState } from "react";
+import { Modal, Form, Input, Checkbox, Tabs, Transfer, Tree } from "antd";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { IdentityUserDto } from "#/management/identity/user";
+import type { DataNode } from "antd/es/tree";
+import type { TransferItem } from "antd/es/transfer";
+import { toast } from "sonner";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import {
+	createApi,
+	getApi,
+	updateApi,
+	getAssignableRolesApi,
+	getRolesApi,
+	getOrganizationUnitsApi,
+} from "@/api/management/identity/users";
+import { getRootListApi, getChildrenApi } from "@/api/management/identity/organization-units";
+import { useAbpSettings } from "@/hooks/abp/use-abp-settings";
+
+interface UserModalProps {
+	visible: boolean;
+	userId?: string;
+	onClose: () => void;
+	onChange: () => void;
+}
+
+const defaultModel: Partial<IdentityUserDto> = {
+	isActive: true,
+};
+
+const UserModal: React.FC<UserModalProps> = ({ visible, userId, onClose, onChange }) => {
+	const { t: $t } = useTranslation();
+	const queryClient = useQueryClient();
+	const [form] = Form.useForm();
+	const { isTrue } = useAbpSettings();
+
+	const [activeTab, setActiveTab] = useState("info");
+	const [assignedRoles, setAssignedRoles] = useState<TransferItem[]>([]);
+	const [organizationUnits, setOrganizationUnits] = useState<DataNode[]>([]);
+	const [loadedOuKeys, setLoadedOuKeys] = useState<string[]>([]);
+	const [checkedOuKeys, setCheckedOuKeys] = useState<string[]>([]);
+	const [targetKeys, setTargetKeys] = useState<string[]>([]);
+
+	// Check policies
+	const canManageRoles = hasAccessByCodes(["AbpIdentity.Users.Update.ManageRoles"]);
+	const canManageOu = hasAccessByCodes(["AbpIdentity.Users.ManageOrganizationUnits"]);
+
+	// API mutations
+	const { mutateAsync: createUser, isPending: isCreating } = useMutation({
+		mutationFn: createApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.CreatedSuccessfully"));
+			onChange();
+			onClose();
+			queryClient.invalidateQueries({ queryKey: ["users"] });
+		},
+	});
+
+	const { mutateAsync: updateUser, isPending: isUpdating } = useMutation({
+		mutationFn: (data: IdentityUserDto) => updateApi(data.id, data),
+		onSuccess: () => {
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			onChange();
+			onClose();
+			queryClient.invalidateQueries({ queryKey: ["users"] });
+			queryClient.invalidateQueries({ queryKey: ["userRoles"] });
+			queryClient.invalidateQueries({ queryKey: ["assignableRoles"] });
+			queryClient.invalidateQueries({ queryKey: ["permissions"] }); //角色更新会带来permission的变化
+		},
+	});
+
+	// Fetch user data
+	const { data: userData } = useQuery({
+		queryKey: ["users", userId],
+		queryFn: () => {
+			if (!userId) {
+				return Promise.reject(new Error("userId is undefined"));
+			}
+			return getApi(userId);
+		},
+		enabled: visible && !!userId,
+	});
+
+	// Fetch roles
+	const { data: userRoles } = useQuery({
+		queryKey: ["userRoles", userId],
+		queryFn: () => {
+			if (!userId) {
+				return Promise.reject(new Error("userId is undefined"));
+			}
+			return getRolesApi(userId);
+		},
+		enabled: visible && !!userId && canManageRoles,
+	});
+
+	// Fetch assignable roles
+	const { data: assignableRoles } = useQuery({
+		queryKey: ["assignableRoles"],
+		queryFn: getAssignableRolesApi,
+		enabled: visible && canManageRoles,
+	});
+
+	// Fetch organization units
+	const { data: userOus } = useQuery({
+		queryKey: ["userOus", userId],
+		queryFn: () => {
+			if (!userId) {
+				return Promise.reject(new Error("userId is undefined"));
+			}
+			return getOrganizationUnitsApi(userId);
+		},
+		enabled: visible && !!userId && canManageOu,
+	});
+
+	const { data: ousRootList } = useQuery({
+		queryKey: ["ousRootList"],
+		queryFn: () => {
+			if (!userId) {
+				return Promise.reject(new Error("userId is undefined"));
+			}
+			return getRootListApi();
+		},
+		enabled: visible && !!userId && canManageOu,
+	});
+
+	useEffect(() => {
+		if (visible) {
+			// Reset states
+			setActiveTab("info");
+			setAssignedRoles([]);
+			setOrganizationUnits([]);
+			setLoadedOuKeys([]);
+			form.resetFields();
+
+			if (userData) {
+				// userData.roleNames = userRoles?.items.map((item) => item.name) || [];
+				form.setFieldsValue(userData);
+			} else {
+				form.setFieldsValue(defaultModel);
+			}
+
+			// Initialize roles
+			if (assignableRoles) {
+				setAssignedRoles(
+					assignableRoles.items.map((item) => ({
+						key: item.name,
+						title: item.name,
+						...item,
+					})),
+				);
+			}
+			if (userRoles) {
+				// 初始化 targetKeys
+				const userRoleNames = userRoles.items.map((item) => item.name);
+				setTargetKeys(userRoleNames);
+				form.setFieldValue("roleNames", userRoleNames);
+			}
+
+			// Initialize organization units
+			if (userOus && ousRootList) {
+				//TODO 根据用户的组织关系信息,计算checkedKeys，让用户的父组织们都halfChecked
+				setOrganizationUnits(
+					ousRootList.items.map((item) => ({
+						isLeaf: false,
+						key: item.id,
+						title: item.displayName,
+						children: [],
+					})),
+				);
+				setCheckedOuKeys(userOus.items.map((item) => item.id));
+			}
+		}
+	}, [visible, userData, assignableRoles, userOus]);
+
+	const handleOk = async () => {
+		try {
+			const values = await form.validateFields();
+			if (userId) {
+				await updateUser({ ...values, id: userId }); //admin用户更新不了？
+			} else {
+				await createUser(values);
+			}
+		} catch (error) {
+			console.error("Validation failed:", error);
+		}
+	};
+
+	// 更新组织机构树结构
+	const updateTreeData = (list: DataNode[], key: React.Key, children: DataNode[]): DataNode[] => {
+		return list.map((node) => {
+			if (node.key === key) {
+				return { ...node, children };
+			}
+			if (node.children) {
+				return { ...node, children: updateTreeData(node.children, key, children) };
+			}
+			return node;
+		});
+	};
+
+	// Load organization unit children with tree update
+	const onLoadOuChildren = async (treeNode: any) => {
+		const nodeKey = String(treeNode.key);
+		const { items } = await getChildrenApi({ id: nodeKey });
+		const children = items.map(
+			(item): DataNode => ({
+				isLeaf: false,
+				key: item.id,
+				title: item.displayName,
+				children: [],
+			}),
+		);
+		setOrganizationUnits((prev) => updateTreeData(prev, nodeKey, children));
+		setLoadedOuKeys((prev) => [...prev, nodeKey]);
+	};
+
+	return (
+		<Modal
+			open={visible}
+			title={userData ? `${$t("AbpIdentity.Users")} - ${userData.userName}` : $t("AbpIdentity.NewUser")}
+			onCancel={onClose}
+			onOk={handleOk}
+			confirmLoading={isCreating || isUpdating}
+			width="50%"
+			destroyOnClose
+		>
+			<Form form={form} layout="horizontal" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+				<Tabs activeKey={activeTab} onChange={setActiveTab}>
+					<Tabs.TabPane key="info" tab={$t("AbpIdentity.UserInformations")}>
+						<Form.Item
+							label={$t("AbpIdentity.DisplayName:IsActive")}
+							name="isActive"
+							valuePropName="checked"
+							initialValue={true}
+						>
+							<Checkbox>{$t("AbpIdentity.DisplayName:IsActive")}</Checkbox>
+						</Form.Item>
+						<Form.Item label={$t("AbpIdentity.UserName")} name="userName" rules={[{ required: true }]}>
+							<Input disabled={!isTrue("Abp.Identity.User.IsUserNameUpdateEnabled")} />
+						</Form.Item>
+						{!userId && (
+							<Form.Item label={$t("AbpIdentity.Password")} name="password" rules={[{ required: true }]}>
+								<Input.Password />
+							</Form.Item>
+						)}
+						<Form.Item
+							label={$t("AbpIdentity.DisplayName:Email")}
+							name="email"
+							rules={[{ required: true }, { type: "email" }]}
+						>
+							<Input disabled={!isTrue("Abp.Identity.User.IsEmailUpdateEnabled")} />
+						</Form.Item>
+						<Form.Item label={$t("AbpIdentity.DisplayName:PhoneNumber")} name="phoneNumber">
+							<Input />
+						</Form.Item>
+						<Form.Item label={$t("AbpIdentity.DisplayName:Surname")} name="surname">
+							<Input />
+						</Form.Item>
+						<Form.Item label={$t("AbpIdentity.DisplayName:Name")} name="name">
+							<Input />
+						</Form.Item>
+						<Form.Item
+							label={$t("AbpIdentity.DisplayName:LockoutEnabled")}
+							name="lockoutEnabled"
+							valuePropName="checked"
+						>
+							<Checkbox>{$t("AbpIdentity.Description:LockoutEnabled")}</Checkbox>
+						</Form.Item>
+					</Tabs.TabPane>
+
+					{canManageRoles && (
+						<Tabs.TabPane key="role" tab={$t("AbpIdentity.Roles")}>
+							<Form.Item name="roleNames" noStyle>
+								<Transfer
+									dataSource={assignedRoles}
+									targetKeys={targetKeys}
+									onChange={(targetKeys) => {
+										console.log("targetKeys", targetKeys);
+										const stringTargetKeys = targetKeys.map(String); // 转换成 string[]
+										setTargetKeys(stringTargetKeys); // 触发react更新
+										form.setFieldValue("roleNames", targetKeys); //提交时从form获取roleNames
+									}}
+									render={(item) => item.title || ""}
+									listStyle={{
+										width: "47%",
+										height: "338px",
+									}}
+									titles={[$t("AbpIdentity.Assigned"), $t("AbpIdentity.Available")]}
+								/>
+							</Form.Item>
+						</Tabs.TabPane>
+					)}
+
+					{userId && canManageOu && (
+						<Tabs.TabPane key="ou" tab={$t("AbpIdentity.OrganizationUnits")}>
+							<Tree
+								checkable
+								checkedKeys={checkedOuKeys}
+								loadData={onLoadOuChildren}
+								loadedKeys={loadedOuKeys}
+								treeData={organizationUnits}
+								disabled
+								checkStrictly
+								blockNode
+							/>
+						</Tabs.TabPane>
+					)}
+				</Tabs>
+			</Form>
+		</Modal>
+	);
+};
+
+export default UserModal;
diff --git a/apps/react-admin/src/pages/management/identity/users/user-password-modal.tsx b/apps/react-admin/src/pages/management/identity/users/user-password-modal.tsx
new file mode 100644
index 000000000..15fa046a1
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/users/user-password-modal.tsx
@@ -0,0 +1,77 @@
+import { Form, Input, Modal, Button } from "antd";
+import { useTranslation } from "react-i18next";
+import { useMutation } from "@tanstack/react-query";
+import { changePasswordApi } from "@/api/management/identity/users";
+import { toast } from "sonner";
+
+interface UserPasswordModalProps {
+	visible: boolean;
+	userId?: string;
+	onClose: () => void;
+	onChange: () => void;
+}
+
+const UserPasswordModal: React.FC<UserPasswordModalProps> = ({ visible, userId, onClose, onChange }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+
+	const { mutateAsync: changePassword, isPending } = useMutation({
+		mutationFn: (password: string) => {
+			if (!userId) {
+				return Promise.reject(new Error("userId is undefined"));
+			}
+			return changePasswordApi(userId, { password });
+		},
+		onSuccess: () => {
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			onChange();
+			onClose();
+			form.resetFields();
+		},
+	});
+
+	// Generate a random password
+	const generatePassword = () => {
+		const length = 12;
+		const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+";
+		let password = "";
+		for (let i = 0; i < length; i++) {
+			password += charset.charAt(Math.floor(Math.random() * charset.length));
+		}
+		form.setFieldsValue({ password });
+	};
+
+	const handleOk = async () => {
+		try {
+			const values = await form.validateFields();
+			await changePassword(values.password);
+		} catch (error) {
+			console.error("Validation failed:", error);
+		}
+	};
+
+	return (
+		<Modal
+			open={visible}
+			title={$t("AbpIdentity.SetPassword")}
+			onCancel={onClose}
+			onOk={handleOk}
+			confirmLoading={isPending}
+			width={500}
+			destroyOnClose
+		>
+			<Form form={form} layout="vertical">
+				<Form.Item label={$t("AbpIdentity.Password")} name="password" rules={[{ required: true }]}>
+					<Input.Search
+						className="w-full"
+						enterButton={<Button type="primary">{$t("AbpIdentity.RandomPassword")}</Button>}
+						onSearch={generatePassword}
+						allowClear={false}
+					/>
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+};
+
+export default UserPasswordModal;
diff --git a/apps/react-admin/src/pages/management/identity/users/user-table.tsx b/apps/react-admin/src/pages/management/identity/users/user-table.tsx
new file mode 100644
index 000000000..4d6101c5a
--- /dev/null
+++ b/apps/react-admin/src/pages/management/identity/users/user-table.tsx
@@ -0,0 +1,395 @@
+import { useRef, useState } from "react";
+import { Button, Dropdown, Modal, Space, Tag } from "antd";
+import {
+	EditOutlined,
+	DeleteOutlined,
+	EllipsisOutlined,
+	LockOutlined,
+	UnlockOutlined,
+	PlusOutlined,
+} from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import type { IdentityUserDto } from "#/management/identity/user";
+import { ProTable, type ActionType, type ProColumns } from "@ant-design/pro-table";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { deleteApi, getPagedListApi, unLockApi } from "@/api/management/identity/users";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import { IdentityUserPermissions } from "@/constants/management/identity/permissions";
+import { AuditLogPermissions } from "@/constants/management/auditing/permissions";
+import { Iconify } from "@/components/icon";
+import { toast } from "sonner";
+import { formatToDateTime } from "@/utils/abp";
+import useAbpStore from "@/store/abpCoreStore";
+
+// Modals
+import UserModal from "./user-modal";
+import UserLockModal from "./user-lock-modal";
+import UserClaimModal from "./user-claim-modal";
+import UserPasswordModal from "./user-password-modal";
+import PermissionModal from "@/components/abp/permissions/permission-modal";
+import { EntityChangeDrawer } from "@/components/abp/auditing/entity-change-drawer";
+import Card from "@/components/card";
+
+const UserTable: React.FC = () => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const [modal, contextHolder] = Modal.useModal();
+	const queryClient = useQueryClient();
+	const abpStore = useAbpStore();
+
+	// Modal visibility states
+	const [userModalVisible, setUserModalVisible] = useState(false);
+	const [lockModalVisible, setLockModalVisible] = useState(false);
+	const [claimModalVisible, setClaimModalVisible] = useState(false);
+	const [passwordModalVisible, setPasswordModalVisible] = useState(false);
+	const [permissionModalVisible, setPermissionModalVisible] = useState(false);
+	const [entityChangeDrawerVisible, setEntityChangeDrawerVisible] = useState(false);
+
+	// Selected user state
+	const [selectedUser, setSelectedUser] = useState<IdentityUserDto>();
+
+	// Check if user is locked
+	const isLocked = (user: IdentityUserDto) => {
+		if (!user.lockoutEnd) return false;
+		const lockTime = new Date(user.lockoutEnd);
+		return lockTime > new Date();
+	};
+
+	// API Mutations
+	const { mutateAsync: deleteUser } = useMutation({
+		mutationFn: deleteApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["users"] });
+		},
+	});
+
+	const { mutateAsync: unlockUser } = useMutation({
+		mutationFn: unLockApi,
+		onSuccess: () => {
+			toast.success($t("AbpIdentity.SavedSuccessfully"));
+			actionRef.current?.reload();
+			queryClient.invalidateQueries({ queryKey: ["users"] });
+		},
+	});
+
+	// Handle actions
+	const handleMenuClick = (key: string, user: IdentityUserDto) => {
+		setSelectedUser(user);
+		switch (key) {
+			case "lock":
+				setLockModalVisible(true);
+				break;
+			case "unlock":
+				modal.confirm({
+					title: $t("AbpUi.AreYouSure"),
+					onOk: () => unlockUser(user.id),
+				});
+				break;
+			case "permissions":
+				setPermissionModalVisible(true);
+				break;
+			case "claims":
+				setClaimModalVisible(true);
+				break;
+			case "password":
+				setPasswordModalVisible(true);
+				break;
+			case "entity-changes":
+				setEntityChangeDrawerVisible(true);
+				break;
+		}
+	};
+
+	const columns: ProColumns<IdentityUserDto>[] = [
+		{
+			title: $t("AbpUi.Search"),
+			dataIndex: "filter",
+			hideInTable: true,
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:IsActive"),
+			dataIndex: "isActive",
+			width: 100,
+			align: "center",
+			hideInSearch: true,
+			render: (_, record) => (
+				<Tag color={record.isActive ? "success" : "error"}>{record.isActive ? $t("AbpUi.Yes") : $t("AbpUi.No")}</Tag>
+			),
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:UserName"),
+			dataIndex: "userName",
+			hideInSearch: true,
+			width: 150,
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:Email"),
+			dataIndex: "email",
+			hideInSearch: true,
+			width: 180,
+			sorter: true,
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:PhoneNumber"),
+			dataIndex: "phoneNumber",
+			hideInSearch: true,
+			width: 120,
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:Surname"),
+			dataIndex: "surname",
+			hideInSearch: true,
+			width: 100,
+		},
+		{
+			title: $t("AbpIdentity.DisplayName:Name"),
+			dataIndex: "name",
+			hideInSearch: true,
+
+			width: 100,
+		},
+		{
+			title: $t("AbpIdentity.LockoutEnd"),
+			hideInSearch: true,
+			dataIndex: "lockoutEnd",
+			width: 160,
+			render: (_, record) => (record.lockoutEnd ? formatToDateTime(record.lockoutEnd) : "-"),
+		},
+		{
+			title: $t("AbpUi.Actions"),
+			width: 200,
+			hideInSearch: true,
+			fixed: "right",
+			render: (_, record) => (
+				<Space>
+					{hasAccessByCodes([IdentityUserPermissions.Update]) && (
+						<Button
+							type="link"
+							icon={<EditOutlined />}
+							onClick={() => {
+								setSelectedUser(record);
+								setUserModalVisible(true);
+							}}
+						>
+							{$t("AbpUi.Edit")}
+						</Button>
+					)}
+					{hasAccessByCodes([IdentityUserPermissions.Delete]) && (
+						<Button type="link" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+							{$t("AbpUi.Delete")}
+						</Button>
+					)}
+					<Dropdown
+						menu={{
+							items: getDropdownItems(record),
+							onClick: ({ key }) => handleMenuClick(key, record),
+						}}
+					>
+						<Button type="link" icon={<EllipsisOutlined />} />
+					</Dropdown>
+				</Space>
+			),
+		},
+	];
+
+	const handleDelete = (user: IdentityUserDto) => {
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpIdentity.UserDeletionConfirmationMessage", { 0: user.userName }),
+			onOk: () => deleteUser(user.id),
+		});
+	};
+
+	const getDropdownItems = (record: IdentityUserDto) => {
+		const items = [];
+
+		// Lock/Unlock
+		if (hasAccessByCodes([IdentityUserPermissions.Update])) {
+			if (record.isActive && !isLocked(record)) {
+				items.push({
+					key: "lock",
+					icon: <LockOutlined />,
+					label: $t("AbpIdentity.Lock"),
+				});
+			}
+			if (record.isActive && isLocked(record)) {
+				items.push({
+					key: "unlock",
+					icon: <UnlockOutlined />,
+					label: $t("AbpIdentity.UnLock"),
+				});
+			}
+		}
+
+		// Permissions
+		if (hasAccessByCodes([IdentityUserPermissions.ManagePermissions])) {
+			items.push({
+				key: "permissions",
+				icon: <Iconify icon="icon-park-outline:permissions" />,
+				label: $t("AbpPermissionManagement.Permissions"),
+			});
+		}
+
+		// Claims
+		if (hasAccessByCodes([IdentityUserPermissions.ManageClaims])) {
+			items.push({
+				key: "claims",
+				icon: <Iconify icon="la:id-card-solid" />,
+				label: $t("AbpIdentity.ManageClaim"),
+			});
+		}
+
+		// Password
+		if (hasAccessByCodes([IdentityUserPermissions.Update])) {
+			items.push({
+				key: "password",
+				icon: <Iconify icon="carbon:password" />,
+				label: $t("AbpIdentity.SetPassword"),
+			});
+		}
+
+		// Audit Log
+		if (hasAccessByCodes([AuditLogPermissions.Default])) {
+			items.push({
+				key: "entity-changes",
+				icon: <Iconify icon="fluent-mdl2:compliance-audit" />,
+				label: $t("AbpAuditLogging.EntitiesChanged"),
+			});
+		}
+
+		return items;
+	};
+
+	return (
+		<>
+			{contextHolder}
+			<Card>
+				<ProTable<IdentityUserDto>
+					actionRef={actionRef}
+					columns={columns}
+					request={async (params) => {
+						const { current, pageSize, filter } = params;
+						const query = await queryClient.fetchQuery({
+							queryKey: ["users", params],
+							queryFn: () =>
+								getPagedListApi({
+									maxResultCount: pageSize,
+									skipCount: ((current || 1) - 1) * (pageSize || 0),
+									filter: filter,
+								}),
+						});
+						return {
+							data: query.items,
+							total: query.totalCount,
+						};
+					}}
+					rowKey="id"
+					search={{
+						span: 12,
+						labelWidth: "auto",
+					}}
+					pagination={{
+						showSizeChanger: true,
+					}}
+					toolBarRender={() => [
+						hasAccessByCodes([IdentityUserPermissions.Create]) && (
+							<Button
+								type="primary"
+								icon={<PlusOutlined />}
+								onClick={() => {
+									setSelectedUser(undefined);
+									setUserModalVisible(true);
+								}}
+							>
+								{$t("AbpIdentity.NewUser")}
+							</Button>
+						),
+					]}
+				/>
+			</Card>
+
+			{/* User Modal */}
+			<UserModal
+				visible={userModalVisible}
+				userId={selectedUser?.id}
+				onClose={() => {
+					setUserModalVisible(false);
+					setSelectedUser(undefined);
+				}}
+				onChange={() => actionRef.current?.reload()}
+			/>
+
+			{/* Lock Modal */}
+			{selectedUser && (
+				<UserLockModal
+					visible={lockModalVisible}
+					userId={selectedUser.id}
+					onClose={() => {
+						setLockModalVisible(false);
+						setSelectedUser(undefined);
+					}}
+					onChange={() => {
+						actionRef.current?.reload();
+						queryClient.invalidateQueries({ queryKey: ["users"] });
+					}}
+				/>
+			)}
+
+			{/* Claim Modal */}
+			{selectedUser && (
+				<UserClaimModal
+					visible={claimModalVisible}
+					user={selectedUser}
+					onClose={() => {
+						setClaimModalVisible(false);
+						setSelectedUser(undefined);
+					}}
+					onChange={() => actionRef.current?.reload()}
+				/>
+			)}
+
+			{/* Password Modal */}
+			{selectedUser && (
+				<UserPasswordModal
+					visible={passwordModalVisible}
+					userId={selectedUser.id}
+					onClose={() => {
+						setPasswordModalVisible(false);
+						setSelectedUser(undefined);
+					}}
+					onChange={() => actionRef.current?.reload()}
+				/>
+			)}
+
+			{/* Permission Modal */}
+			<PermissionModal
+				visible={permissionModalVisible}
+				providerKey={selectedUser?.id}
+				providerName="U"
+				displayName={selectedUser?.userName}
+				readonly={abpStore.application?.currentUser.id === selectedUser?.id}
+				onClose={() => {
+					setPermissionModalVisible(false);
+					setSelectedUser(undefined);
+				}}
+				onChange={() => actionRef.current?.reload()}
+			/>
+
+			{/* Entity Change Drawer */}
+			<EntityChangeDrawer
+				open={entityChangeDrawerVisible}
+				input={{
+					entityId: selectedUser?.id,
+					entityTypeFullName: "Volo.Abp.Identity.IdentityUser",
+				}}
+				onClose={() => {
+					setEntityChangeDrawerVisible(false);
+					setSelectedUser(undefined);
+				}}
+			/>
+		</>
+	);
+};
+
+export default UserTable;
diff --git a/apps/react-admin/src/pages/management/notifications/my-notification-modal.tsx b/apps/react-admin/src/pages/management/notifications/my-notification-modal.tsx
new file mode 100644
index 000000000..396bfd140
--- /dev/null
+++ b/apps/react-admin/src/pages/management/notifications/my-notification-modal.tsx
@@ -0,0 +1,25 @@
+import { Modal } from "antd";
+import type { Notification } from "#/notifications";
+import Editor from "@/components/editor";
+
+interface Props {
+	visible: boolean;
+	notification?: Notification;
+	onClose: () => void;
+}
+
+const MyNotificationModal: React.FC<Props> = ({ visible, notification, onClose }) => {
+	return (
+		<Modal open={visible} title={notification?.title} onCancel={onClose} footer={null}>
+			<Editor
+				id="notification-content"
+				value={notification?.message ?? ""}
+				readOnly
+				sample // Use simple toolbar
+				hiddleToolbar
+			/>
+		</Modal>
+	);
+};
+
+export default MyNotificationModal;
diff --git a/apps/react-admin/src/pages/management/notifications/my-notification-table.tsx b/apps/react-admin/src/pages/management/notifications/my-notification-table.tsx
new file mode 100644
index 000000000..898664d47
--- /dev/null
+++ b/apps/react-admin/src/pages/management/notifications/my-notification-table.tsx
@@ -0,0 +1,275 @@
+import { useRef, useState } from "react";
+import { Button, Card, Dropdown, Modal, Space, type MenuProps } from "antd";
+import { DeleteOutlined, DownOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { ProTable, type ActionType, type ProColumns } from "@ant-design/pro-table";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { type Notification, NotificationReadState, NotificationType } from "#/notifications";
+import {
+	deleteMyNotifilerApi,
+	getMyNotifilersApi,
+	markReadStateApi,
+} from "@/api/management/notifications/my-notifications";
+import MyNotificationModal from "./my-notification-modal";
+import { formatToDateTime } from "@/utils/abp";
+import { Icon } from "@iconify/react";
+import { toast } from "sonner";
+import { useNotificationSerializer } from "@/utils/abp/notifications/useNotificationSerializer";
+
+const MyNotificationTable: React.FC = () => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const [modal, contextHolder] = Modal.useModal();
+	const queryClient = useQueryClient();
+
+	const { deserialize } = useNotificationSerializer();
+	const [selectedRows, setSelectedRows] = useState<Notification[]>([]);
+	const [modalVisible, setModalVisible] = useState(false);
+	const [selectedNotification, setSelectedNotification] = useState<Notification>();
+
+	// Delete notification mutation
+	const { mutateAsync: deleteNotification } = useMutation({
+		mutationFn: deleteMyNotifilerApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.SuccessfullyDeleted"));
+			queryClient.invalidateQueries({ queryKey: ["notifications"] });
+			actionRef.current?.reload();
+		},
+	});
+
+	// Mark read state mutation
+	const { mutateAsync: markReadState } = useMutation({
+		mutationFn: markReadStateApi,
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["notifications"] });
+			actionRef.current?.reload();
+		},
+	});
+
+	const handleDelete = (notification: Notification) => {
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpUi.ItemWillBeDeletedMessageWithFormat", { 0: notification.title }),
+			onOk: () => deleteNotification(notification.id),
+		});
+	};
+
+	const handleRead = async (ids: string[], state: NotificationReadState) => {
+		await markReadState({ idList: ids, state });
+		queryClient.invalidateQueries({ queryKey: ["notifications"] });
+		setSelectedRows([]);
+	};
+
+	const handleClickNotification = (notification: Notification) => {
+		setSelectedNotification(notification);
+		setModalVisible(true);
+		handleRead([notification.id], NotificationReadState.Read);
+	};
+
+	const bulkActionMenu: MenuProps["items"] = [
+		{
+			key: "read",
+			icon: <Icon icon="ic:outline-mark-email-read" color="#00DD00" />,
+			label: $t("Notifications.Read"),
+			onClick: () =>
+				handleRead(
+					selectedRows.map((row) => row.id),
+					NotificationReadState.Read,
+				),
+		},
+		{
+			key: "unread",
+			icon: <Icon icon="ic:outline-mark-email-unread" color="#FF7744" />,
+			label: $t("Notifications.UnRead"),
+			onClick: () =>
+				handleRead(
+					selectedRows.map((row) => row.id),
+					NotificationReadState.UnRead,
+				),
+		},
+	];
+
+	const rowActionMenu = (record: Notification): MenuProps["items"] => [
+		{
+			key: "read",
+			icon: <Icon icon="ic:outline-mark-email-read" color="#00DD00" />,
+			label: $t("Notifications.Read"),
+			onClick: () => handleRead([record.id], NotificationReadState.Read),
+		},
+		{
+			key: "unread",
+			icon: <Icon icon="ic:outline-mark-email-unread" color="#FF7744" />,
+			label: $t("Notifications.UnRead"),
+			onClick: () => handleRead([record.id], NotificationReadState.UnRead),
+		},
+	];
+
+	const columns: ProColumns<Notification>[] = [
+		{
+			title: $t("Notifications.Notifications:State"),
+			dataIndex: "readState",
+			valueType: "select",
+			fieldProps: {
+				allowClear: true,
+				options: [
+					{
+						label: $t("Notifications.Read"),
+						value: NotificationReadState.Read,
+					},
+					{
+						label: $t("Notifications.UnRead"),
+						value: NotificationReadState.UnRead,
+					},
+				],
+			},
+			initialValue: NotificationReadState.UnRead,
+			hideInTable: true,
+		},
+		{
+			title: $t("AbpUi.Search"),
+			dataIndex: "filter",
+			valueType: "text",
+			hideInTable: true, // hide in table
+		},
+		{
+			title: $t("Notifications.Notifications:Type"),
+			dataIndex: "type",
+
+			hideInSearch: true,
+			valueEnum: {
+				[NotificationType.Application]: $t("Notifications.NotificationType:Application"),
+				[NotificationType.ServiceCallback]: $t("Notifications.NotificationType:ServiceCallback"),
+				[NotificationType.System]: $t("Notifications.NotificationType:System"),
+				[NotificationType.User]: $t("Notifications.NotificationType:User"),
+			},
+		},
+		{
+			title: $t("Notifications.Notifications:SendTime"),
+			dataIndex: "creationTime",
+			hideInSearch: true,
+			render: (_, record) => formatToDateTime(record.creationTime),
+		},
+		{
+			title: $t("Notifications.Notifications:Title"),
+			dataIndex: "title",
+			hideInSearch: true,
+			render: (_, record) => (
+				<div className="flex items-center gap-1">
+					<Icon
+						icon={
+							record.state === NotificationReadState.Read
+								? "ic:outline-mark-email-read"
+								: "ic:outline-mark-email-unread"
+						}
+						className="text-xl"
+						color={record.state === NotificationReadState.Read ? "#00DD00" : "#FF7744"}
+					/>
+					<button type="button" onClick={() => handleClickNotification(record)}>
+						{record.title}
+					</button>
+				</div>
+			),
+		},
+		{
+			title: $t("Notifications.Notifications:Content"),
+			dataIndex: "message",
+			hideInSearch: true,
+			render: (_, record) => (
+				<button type="button" onClick={() => handleClickNotification(record)}>
+					{record.message}
+				</button>
+			),
+		},
+		{
+			title: $t("AbpUi.Actions"),
+			fixed: "right",
+			hideInSearch: true,
+			width: 200,
+			render: (_, record) => (
+				<Space>
+					<Button type="link" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+						{$t("AbpUi.Delete")}
+					</Button>
+					<Dropdown menu={{ items: rowActionMenu(record) }}>
+						<Button type="link">
+							<Space>
+								<Icon icon="material-symbols:bookmark-outline" />
+								{$t("Notifications.MarkAs")}
+								<DownOutlined />
+							</Space>
+						</Button>
+					</Dropdown>
+				</Space>
+			),
+		},
+	];
+
+	return (
+		<>
+			{contextHolder}
+			<Card>
+				<ProTable<Notification>
+					headerTitle={$t("Notifications.Notifications")}
+					actionRef={actionRef}
+					rowKey="id"
+					columns={columns}
+					rowSelection={{
+						onChange: (_, rows) => setSelectedRows(rows),
+					}}
+					toolBarRender={() => [
+						selectedRows.length > 0 && (
+							<Dropdown menu={{ items: bulkActionMenu }}>
+								<Button>
+									<Space>
+										<Icon icon="material-symbols:bookmark-outline" />
+										{$t("Notifications.MarkAs")}
+										<DownOutlined />
+									</Space>
+								</Button>
+							</Dropdown>
+						),
+					]}
+					request={async (params) => {
+						const { current, pageSize, filter, readState } = params;
+						const query = await queryClient.fetchQuery({
+							queryKey: ["notifications", params],
+							queryFn: async () =>
+								getMyNotifilersApi({
+									maxResultCount: pageSize,
+									skipCount: ((current || 1) - 1) * (pageSize || 0),
+									filter,
+									readState,
+								}),
+						});
+						return {
+							data: query.items.map((item) => {
+								const notification = deserialize(item);
+								return {
+									...item,
+									...notification,
+								};
+							}),
+							success: true,
+							total: query.totalCount,
+						};
+					}}
+					pagination={{
+						showSizeChanger: true,
+					}}
+					scroll={{ x: "max-content" }}
+					search={{
+						labelWidth: "auto",
+						defaultCollapsed: false,
+					}}
+				/>
+			</Card>
+			<MyNotificationModal
+				visible={modalVisible}
+				notification={selectedNotification}
+				onClose={() => setModalVisible(false)}
+			/>
+		</>
+	);
+};
+
+export default MyNotificationTable;
diff --git a/apps/react-admin/src/pages/management/permissions/definitions/permission-group-definition-modal.tsx b/apps/react-admin/src/pages/management/permissions/definitions/permission-group-definition-modal.tsx
new file mode 100644
index 000000000..2e2c4ed6b
--- /dev/null
+++ b/apps/react-admin/src/pages/management/permissions/definitions/permission-group-definition-modal.tsx
@@ -0,0 +1,159 @@
+import { useEffect, useState } from "react";
+import { Form, Input, Modal, Tabs } from "antd";
+import { useTranslation } from "react-i18next";
+import type { PermissionGroupDefinitionDto } from "#/management/permissions/groups";
+import type { PropertyInfo } from "@/components/abp/properties/types";
+import { createApi, getApi, updateApi } from "@/api/management/permissions/groups";
+import LocalizableInput from "@/components/abp/localizable-input/localizable-input";
+import PropertyTable from "@/components/abp/properties/property-table";
+import { toast } from "sonner";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+interface Props {
+	visible: boolean;
+	onClose: () => void;
+	onChange: (data: PermissionGroupDefinitionDto) => void;
+	groupName?: string;
+}
+
+type TabKeys = "basic" | "props";
+
+const defaultModel: PermissionGroupDefinitionDto = {} as PermissionGroupDefinitionDto;
+
+const PermissionGroupDefinitionModal: React.FC<Props> = ({ visible, onClose, onChange, groupName }) => {
+	const { t: $t } = useTranslation();
+	const queryClient = useQueryClient();
+	const [form] = Form.useForm();
+	const [formModel, setFormModel] = useState<PermissionGroupDefinitionDto>({ ...defaultModel });
+	const [isEditModel, setIsEditModel] = useState(false);
+	const [activeTab, setActiveTab] = useState<TabKeys>("basic");
+
+	// 获取权限组详情 getApi 用 useMutation
+	const { mutateAsync: fetchGroup, isPending: isFetching } = useMutation({
+		mutationFn: getApi,
+		onMutate: () => {
+			setIsEditModel(true);
+		},
+		onSuccess: (dto) => {
+			setFormModel(dto);
+			form.setFieldsValue(dto);
+		},
+	});
+
+	// 创建权限组
+	const { mutateAsync: createGroup, isPending: isCreating } = useMutation({
+		mutationFn: createApi,
+		onSuccess: (res) => {
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["permissionGroups"] });
+			onChange(res);
+			onClose();
+		},
+	});
+
+	// 更新权限组
+	const { mutateAsync: updateGroup, isPending: isUpdating } = useMutation({
+		mutationFn: (data: PermissionGroupDefinitionDto) => updateApi(data.name, data),
+		onSuccess: (res) => {
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["permissionGroups"] });
+			onChange(res);
+			onClose();
+		},
+	});
+
+	useEffect(() => {
+		if (visible) {
+			setIsEditModel(false);
+			setActiveTab("basic");
+			setFormModel({ ...defaultModel });
+			form.resetFields();
+
+			if (groupName) {
+				fetchGroup(groupName);
+			}
+		}
+	}, [visible, groupName]);
+
+	const handleOk = async () => {
+		try {
+			const values = await form.validateFields();
+			const submitData = {
+				...values,
+				extraProperties: formModel.extraProperties,
+			};
+
+			if (isEditModel) {
+				await updateGroup(submitData);
+			} else {
+				await createGroup(submitData);
+			}
+		} catch (error) {
+			console.error(error);
+		}
+	};
+
+	const handlePropChange = (prop: PropertyInfo) => {
+		setFormModel((prev) => ({
+			...prev,
+			extraProperties: {
+				...prev.extraProperties,
+				[prop.key]: prop.value,
+			},
+		}));
+	};
+
+	const handlePropDelete = (prop: PropertyInfo) => {
+		setFormModel((prev) => {
+			const newProps = { ...prev.extraProperties };
+			delete newProps[prop.key];
+			return {
+				...prev,
+				extraProperties: newProps,
+			};
+		});
+	};
+
+	return (
+		<Modal
+			title={
+				isEditModel
+					? `${$t("AbpPermissionManagement.GroupDefinitions")} - ${formModel.name}`
+					: $t("AbpPermissionManagement.GroupDefinitions:AddNew")
+			}
+			open={visible}
+			onCancel={onClose}
+			onOk={handleOk}
+			confirmLoading={isCreating || isUpdating || isFetching}
+			okButtonProps={{ disabled: formModel.isStatic }}
+			width="50%"
+		>
+			<Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+				<Tabs activeKey={activeTab} onChange={(key) => setActiveTab(key as TabKeys)}>
+					<Tabs.TabPane key="basic" tab={$t("AbpPermissionManagement.BasicInfo")}>
+						<Form.Item label={$t("AbpPermissionManagement.DisplayName:Name")} name="name" rules={[{ required: true }]}>
+							<Input disabled={formModel.isStatic} autoComplete="off" />
+						</Form.Item>
+						<Form.Item
+							label={$t("AbpPermissionManagement.DisplayName:DisplayName")}
+							name="displayName"
+							rules={[{ required: true }]}
+						>
+							<LocalizableInput disabled={formModel.isStatic} />
+						</Form.Item>
+					</Tabs.TabPane>
+					<Tabs.TabPane key="props" tab={$t("AbpPermissionManagement.Properties")}>
+						<PropertyTable
+							data={formModel.extraProperties}
+							disabled={formModel.isStatic}
+							onChange={handlePropChange}
+							onDelete={handlePropDelete}
+						/>
+					</Tabs.TabPane>
+				</Tabs>
+			</Form>
+		</Modal>
+	);
+};
+
+export default PermissionGroupDefinitionModal;
diff --git a/apps/react-admin/src/pages/management/permissions/definitions/permission-group-definition-table.tsx b/apps/react-admin/src/pages/management/permissions/definitions/permission-group-definition-table.tsx
new file mode 100644
index 000000000..77730f051
--- /dev/null
+++ b/apps/react-admin/src/pages/management/permissions/definitions/permission-group-definition-table.tsx
@@ -0,0 +1,219 @@
+import { useCallback, useRef, useState } from "react";
+import { Button, Card, Dropdown, Modal } from "antd";
+import { EditOutlined, DeleteOutlined, PlusOutlined, EllipsisOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import type { PermissionGroupDefinitionDto } from "#/management/permissions/groups";
+import { type ActionType, ProTable, type ProColumns } from "@ant-design/pro-table";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import { localizationSerializer } from "@/utils/abp/localization-serializer";
+import { deleteApi, getListApi } from "@/api/management/permissions/groups";
+import { GroupDefinitionsPermissions, PermissionDefinitionsPermissions } from "@/constants/management/permissions";
+import PermissionGroupDefinitionModal from "./permission-group-definition-modal";
+import PermissionDefinitionModal from "../permissions/permission-definition-modal";
+import { useLocalizer } from "@/hooks/abp/use-localization";
+import { toast } from "sonner";
+import { Iconify } from "@/components/icon";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+const PermissionGroupDefinitionTable: React.FC = () => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const queryClient = useQueryClient();
+	const [modal, contextHolder] = Modal.useModal();
+	const { deserialize } = localizationSerializer();
+
+	// Modal states
+	const [groupModalVisible, setGroupModalVisible] = useState(false);
+	const [permissionModalVisible, setPermissionModalVisible] = useState(false);
+	const [selectedGroup, setSelectedGroup] = useState<PermissionGroupDefinitionDto>();
+	const [selectedGroupForPermission, setSelectedGroupForPermission] = useState<string>();
+	const { Lr } = useLocalizer(
+		undefined,
+		useCallback(() => {
+			actionRef.current?.reload();
+			setPermissionModalVisible(false);
+			setGroupModalVisible(false);
+		}, []),
+	);
+
+	const [searchParams, setSearchParams] = useState<{ filter?: string }>({});
+
+	// 获取权限组列表
+	const { data, isLoading } = useQuery({
+		queryKey: ["permissionGroups", searchParams],
+		queryFn: async () => {
+			const { items } = await getListApi(searchParams);
+			return items.map((item) => {
+				const localizableString = deserialize(item.displayName);
+				return {
+					...item,
+					displayName: Lr(localizableString.resourceName, localizableString.name),
+				};
+			});
+		},
+	});
+
+	// 删除权限组
+	const { mutateAsync: deleteGroup } = useMutation({
+		mutationFn: deleteApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["permissionGroups"] });
+		},
+	});
+
+	const handleCreate = () => {
+		setSelectedGroup(undefined);
+		setGroupModalVisible(true);
+	};
+
+	const handleUpdate = (group: PermissionGroupDefinitionDto) => {
+		setSelectedGroup(group);
+		setGroupModalVisible(true);
+	};
+
+	const handleDelete = (group: PermissionGroupDefinitionDto) => {
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpUi.ItemWillBeDeletedMessageWithFormat", { 0: group.name }),
+			onOk: () => deleteGroup(group.name),
+		});
+	};
+
+	const handleMenuClick = (key: string, group: PermissionGroupDefinitionDto) => {
+		if (key === "permissions") {
+			setSelectedGroupForPermission(group.name);
+			setPermissionModalVisible(true);
+		}
+	};
+
+	const columns: ProColumns<PermissionGroupDefinitionDto>[] = [
+		{
+			title: $t("AbpUi.Search"),
+			dataIndex: "filter",
+			valueType: "text",
+			hideInTable: true, // hide in table
+		},
+		{
+			title: $t("AbpPermissionManagement.DisplayName:Name"),
+			dataIndex: "name",
+			width: "auto",
+			hideInSearch: true,
+		},
+		{
+			title: $t("AbpPermissionManagement.DisplayName:DisplayName"),
+			dataIndex: "displayName",
+			width: "auto",
+			hideInSearch: true,
+		},
+		{
+			title: $t("AbpUi.Actions"),
+			width: 220,
+			fixed: "right",
+			hideInSearch: true,
+			render: (_, record) => (
+				<div className="flex flex-row">
+					<div className={`${record.isStatic ? "w-full" : "basis-1/3"}`}>
+						{hasAccessByCodes([GroupDefinitionsPermissions.Update]) && (
+							<Button type="link" icon={<EditOutlined />} block onClick={() => handleUpdate(record)}>
+								{$t("AbpUi.Edit")}
+							</Button>
+						)}
+					</div>
+					{!record.isStatic && (
+						<>
+							<div className="basis-1/3">
+								{hasAccessByCodes([GroupDefinitionsPermissions.Delete]) && (
+									<Button type="link" danger icon={<DeleteOutlined />} block onClick={() => handleDelete(record)}>
+										{$t("AbpUi.Delete")}
+									</Button>
+								)}
+							</div>
+							<div className="basis-1/3">
+								<Dropdown
+									menu={{
+										items: [
+											hasAccessByCodes([PermissionDefinitionsPermissions.Create])
+												? {
+														key: "permissions",
+														icon: <Iconify icon="icon-park-outline:permissions" />,
+														label: $t("AbpPermissionManagement.PermissionDefinitions:AddNew"),
+													}
+												: null,
+										].filter((item) => item !== null), // 过滤
+										onClick: ({ key }) => handleMenuClick(key as string, record),
+									}}
+								>
+									<Button type="link" icon={<EllipsisOutlined />} />
+								</Dropdown>
+							</div>
+						</>
+					)}
+				</div>
+			),
+		},
+	];
+
+	return (
+		<>
+			{contextHolder}
+			<Card>
+				<ProTable<PermissionGroupDefinitionDto>
+					headerTitle={$t("AbpPermissionManagement.GroupDefinitions")}
+					actionRef={actionRef}
+					columns={columns}
+					dataSource={data}
+					loading={isLoading}
+					rowKey="name"
+					pagination={{
+						showSizeChanger: true,
+						total: data?.length,
+					}}
+					search={{
+						labelWidth: "auto",
+						span: 12,
+						defaultCollapsed: true,
+					}}
+					toolBarRender={() => [
+						hasAccessByCodes([GroupDefinitionsPermissions.Create]) && (
+							<Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>
+								{$t("AbpPermissionManagement.GroupDefinitions:AddNew")}
+							</Button>
+						),
+					]}
+					request={async (params) => {
+						const { filter } = params;
+						setSearchParams({ filter });
+						// 强制重新请求数据
+						await queryClient.invalidateQueries({ queryKey: ["permissionGroups"] });
+						return { data, success: true, total: data?.length };
+					}}
+				/>
+			</Card>
+			<PermissionGroupDefinitionModal
+				visible={groupModalVisible}
+				groupName={selectedGroup?.name}
+				onClose={() => setGroupModalVisible(false)}
+				onChange={() => {
+					setGroupModalVisible(false);
+					actionRef.current?.reload();
+				}}
+			/>
+
+			<PermissionDefinitionModal
+				visible={permissionModalVisible}
+				onClose={() => {
+					console.log("close");
+					setPermissionModalVisible(false);
+				}}
+				onChange={() => {
+					setPermissionModalVisible(false);
+					actionRef.current?.reload();
+				}}
+				groupName={selectedGroupForPermission}
+			/>
+		</>
+	);
+};
+
+export default PermissionGroupDefinitionTable;
diff --git a/apps/react-admin/src/pages/management/permissions/permissions/permission-definition-modal.tsx b/apps/react-admin/src/pages/management/permissions/permissions/permission-definition-modal.tsx
new file mode 100644
index 000000000..17ba7eaf4
--- /dev/null
+++ b/apps/react-admin/src/pages/management/permissions/permissions/permission-definition-modal.tsx
@@ -0,0 +1,272 @@
+import { useEffect, useState } from "react";
+import { Modal, Form, Input, Checkbox, Select, Tabs, TreeSelect } from "antd";
+import { createApi, getListApi as getPermissionsApi, updateApi } from "@/api/management/permissions/definitions";
+import { getListApi as getGroupsApi } from "@/api/management/permissions/groups";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useTypesMap } from "./types";
+import type { PermissionDefinitionDto } from "#/management/permissions/definitions";
+// import type { PermissionGroupDefinitionDto } from "#/permissions/groups";
+import { listToTree } from "@/utils/tree";
+import { useLocalizer } from "@/hooks/abp/use-localization";
+import { localizationSerializer } from "@/utils/abp/localization-serializer";
+import type { PropertyInfo } from "@/components/abp/properties/types";
+import LocalizableInput from "@/components/abp/localizable-input/localizable-input";
+import PropertyTable from "@/components/abp/properties/property-table";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+const { TabPane } = Tabs;
+const { Option } = Select;
+
+interface PermissionDefinitionModalProps {
+	visible: boolean;
+	onClose: () => void;
+	onChange: () => void;
+	permission?: PermissionDefinitionDto;
+	groupName?: string;
+}
+
+interface PermissionTreeVo {
+	children: PermissionTreeVo[];
+	displayName: string;
+	groupName: string;
+	name: string;
+	disabled?: boolean;
+}
+
+type TabKeys = "basic" | "props";
+
+const defaultModel: PermissionDefinitionDto = {} as PermissionDefinitionDto;
+
+const PermissionDefinitionModal: React.FC<PermissionDefinitionModalProps> = ({
+	visible,
+	onClose,
+	onChange,
+	permission,
+	groupName,
+}) => {
+	const { t: $t } = useTranslation();
+	const queryClient = useQueryClient();
+	const [form] = Form.useForm();
+	const { multiTenancySideOptions, providerOptions } = useTypesMap($t);
+	const [activeTab, setActiveTab] = useState<TabKeys>("basic");
+	const [formModel, setFormModel] = useState<PermissionDefinitionDto>({ ...defaultModel });
+	const { Lr } = useLocalizer();
+	const { deserialize } = localizationSerializer();
+
+	// 查询权限组列表
+	const { data: availableGroups = [] } = useQuery({
+		queryKey: ["permissionGroups", groupName],
+		queryFn: async () => {
+			const { items } = await getGroupsApi({ filter: groupName });
+			return items
+				.filter((group) => !group.isStatic)
+				.map((group) => {
+					const localizableGroup = deserialize(group.displayName);
+					return {
+						...group,
+						displayName: Lr(localizableGroup.resourceName, localizableGroup.name),
+					};
+				});
+		},
+
+		enabled: visible,
+	});
+
+	// 查询权限列表
+	const { data: availablePermissions = [] } = useQuery({
+		queryKey: ["permissions", formModel.groupName],
+		queryFn: async () => {
+			const { items } = await getPermissionsApi({ groupName: formModel.groupName });
+			const permissions = items.map((permission) => {
+				const localizablePermission = deserialize(permission.displayName);
+				return {
+					...permission,
+					disabled: permission.name === formModel.name,
+					displayName: Lr(localizablePermission.resourceName, localizablePermission.name),
+				};
+			});
+			return listToTree<PermissionTreeVo>(permissions, { id: "name", pid: "parentName" });
+		},
+		enabled: visible && !!formModel.groupName,
+	});
+
+	// 创建权限
+	const { mutateAsync: createPermission, isPending: isCreating } = useMutation({
+		mutationFn: createApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["permissions"] });
+			queryClient.invalidateQueries({ queryKey: ["permissionGroups"] });
+			onChange();
+			onClose();
+		},
+	});
+
+	// 更新权限
+	const { mutateAsync: updatePermission, isPending: isUpdating } = useMutation({
+		mutationFn: (data: PermissionDefinitionDto) => updateApi(data.name, data),
+		onSuccess: () => {
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["permissions"] });
+			queryClient.invalidateQueries({ queryKey: ["permissionGroups"] });
+			onChange();
+			onClose();
+		},
+	});
+
+	useEffect(() => {
+		if (visible) {
+			setActiveTab("basic");
+			form.resetFields();
+
+			if (permission) {
+				const initialModel = {
+					...permission,
+					extraProperties: permission.extraProperties || {},
+				};
+				setFormModel(initialModel);
+				form.setFieldsValue(initialModel);
+			} else {
+				setFormModel({ ...defaultModel });
+				if (groupName) {
+					form.setFieldsValue({ groupName });
+				}
+			}
+		}
+	}, [visible, permission, groupName]);
+
+	const handleOk = async () => {
+		try {
+			const values = await form.validateFields();
+			const submitData = {
+				...values,
+				extraProperties: formModel.extraProperties,
+			};
+
+			if (permission) {
+				await updatePermission(submitData);
+			} else {
+				await createPermission(submitData);
+			}
+		} catch (error) {
+			console.error(error);
+		}
+	};
+
+	const handleGroupChange = (groupName?: string) => {
+		setFormModel((prev) => ({ ...prev, groupName: groupName || "" }));
+	};
+
+	const handlePropChange = (prop: PropertyInfo) => {
+		setFormModel((prev) => ({
+			...prev,
+			extraProperties: {
+				...prev.extraProperties,
+				[prop.key]: prop.value,
+			},
+		}));
+	};
+
+	const handlePropDelete = (prop: PropertyInfo) => {
+		setFormModel((prev) => {
+			const newProps = { ...prev.extraProperties };
+			delete newProps[prop.key];
+			return {
+				...prev,
+				extraProperties: newProps,
+			};
+		});
+	};
+
+	return (
+		<Modal
+			open={visible}
+			title={
+				permission
+					? `${$t("AbpPermissionManagement.PermissionDefinitions")} - ${formModel.name}`
+					: $t("AbpPermissionManagement.PermissionDefinitions:AddNew")
+			}
+			onCancel={onClose}
+			onOk={handleOk}
+			confirmLoading={isCreating || isUpdating}
+			okButtonProps={{ disabled: formModel.isStatic }}
+			width="50%"
+		>
+			<Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+				<Tabs activeKey={activeTab} onChange={(key) => setActiveTab(key as TabKeys)}>
+					<TabPane tab={$t("AbpPermissionManagement.BasicInfo")} key="basic">
+						<Form.Item
+							label={$t("AbpPermissionManagement.DisplayName:IsEnabled")}
+							name="isEnabled"
+							valuePropName="checked"
+						>
+							<Checkbox disabled={formModel.isStatic}>{$t("AbpPermissionManagement.DisplayName:IsEnabled")}</Checkbox>
+						</Form.Item>
+						<Form.Item
+							label={$t("AbpPermissionManagement.DisplayName:GroupName")}
+							name="groupName"
+							rules={[{ required: true }]}
+						>
+							<Select allowClear disabled={formModel.isStatic} onChange={handleGroupChange}>
+								{availableGroups.map((group) => (
+									<Option key={group.name} value={group.name}>
+										{group.displayName}
+									</Option>
+								))}
+							</Select>
+						</Form.Item>
+						{availablePermissions.length > 0 && (
+							<Form.Item label={$t("AbpPermissionManagement.DisplayName:ParentName")} name="parentName">
+								<TreeSelect
+									allowClear
+									disabled={formModel.isStatic}
+									treeData={availablePermissions}
+									fieldNames={{ label: "displayName", value: "name", children: "children" }}
+								/>
+							</Form.Item>
+						)}
+						<Form.Item label={$t("AbpPermissionManagement.DisplayName:Name")} name="name" rules={[{ required: true }]}>
+							<Input disabled={formModel.isStatic} autoComplete="off" />
+						</Form.Item>
+						<Form.Item
+							label={$t("AbpPermissionManagement.DisplayName:DisplayName")}
+							name="displayName"
+							rules={[{ required: true }]}
+						>
+							<LocalizableInput disabled={formModel.isStatic} />
+						</Form.Item>
+						<Form.Item label={$t("AbpPermissionManagement.DisplayName:MultiTenancySide")} name="multiTenancySide">
+							<Select disabled={formModel.isStatic}>
+								{multiTenancySideOptions.map((option) => (
+									<Option key={option.value} value={option.value}>
+										{option.label}
+									</Option>
+								))}
+							</Select>
+						</Form.Item>
+						<Form.Item label={$t("AbpPermissionManagement.DisplayName:Providers")} name="providers">
+							<Select mode="multiple" allowClear disabled={formModel.isStatic}>
+								{providerOptions.map((option) => (
+									<Option key={option.value} value={option.value}>
+										{option.label}
+									</Option>
+								))}
+							</Select>
+						</Form.Item>
+					</TabPane>
+					<TabPane tab={$t("AbpPermissionManagement.Properties")} key="props">
+						<PropertyTable
+							data={formModel.extraProperties}
+							disabled={formModel.isStatic}
+							onChange={handlePropChange}
+							onDelete={handlePropDelete}
+						/>
+					</TabPane>
+				</Tabs>
+			</Form>
+		</Modal>
+	);
+};
+
+export default PermissionDefinitionModal;
diff --git a/apps/react-admin/src/pages/management/permissions/permissions/permission-definition-table.tsx b/apps/react-admin/src/pages/management/permissions/permissions/permission-definition-table.tsx
new file mode 100644
index 000000000..39179f7cf
--- /dev/null
+++ b/apps/react-admin/src/pages/management/permissions/permissions/permission-definition-table.tsx
@@ -0,0 +1,288 @@
+import { useCallback, useRef, useState } from "react";
+import { Button, Card, Modal, Space, Table, Tag } from "antd";
+import { EditOutlined, DeleteOutlined, PlusOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import type { MultiTenancySides, PermissionDefinitionDto } from "#/management/permissions/definitions";
+import { type ActionType, ProTable, type ProColumns } from "@ant-design/pro-table";
+
+import { localizationSerializer } from "@/utils/abp/localization-serializer";
+
+import { deleteApi, getListApi as getPermissionsApi } from "@/api/management/permissions/definitions";
+import { getListApi as getGroupsApi } from "@/api/management/permissions/groups";
+import { GroupDefinitionsPermissions } from "@/constants/management/permissions";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import PermissionDefinitionModal from "./permission-definition-modal";
+import { useLocalizer } from "@/hooks/abp/use-localization";
+import { useTypesMap } from "./types";
+import { listToTree } from "@/utils/tree";
+import type { ExtraPropertyDictionary } from "#/abp-core";
+import type { ColumnsType } from "antd/es/table";
+import { toast } from "sonner";
+
+interface PermissionVo {
+	children: PermissionVo[];
+	displayName: string;
+	groupName: string;
+	isEnabled: boolean;
+	isStatic: boolean;
+	multiTenancySide: MultiTenancySides;
+	name: string;
+	parentName?: string;
+	providers: string[];
+	stateCheckers: string;
+	extraProperties: ExtraPropertyDictionary;
+}
+
+interface PermissionGroupVo {
+	displayName: string;
+	name: string;
+	permissions: PermissionVo[];
+}
+
+const PermissionDefinitionTable: React.FC = () => {
+	const { t: $t } = useTranslation();
+	const [modal, contextHolder] = Modal.useModal();
+	const actionRef = useRef<ActionType>();
+	const queryClient = useQueryClient();
+	const [modalVisible, setModalVisible] = useState(false);
+	const [selectedPermission, setSelectedPermission] = useState<PermissionDefinitionDto>();
+
+	const [searchParams, setSearchParams] = useState<{ filter?: string }>({});
+
+	const { Lr } = useLocalizer(
+		undefined,
+		useCallback(() => {
+			actionRef.current?.reload();
+			setModalVisible(false);
+		}, []),
+	);
+
+	const { deserialize } = localizationSerializer();
+	const { multiTenancySidesMap, providersMap } = useTypesMap($t);
+
+	// 删除权限操作
+	const { mutateAsync: deletePermission } = useMutation({
+		mutationFn: deleteApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["permissions", "permissionGroups"] });
+		},
+	});
+
+	// 获取权限数据
+	const { data, isLoading } = useQuery({
+		queryKey: ["permissions", "permissionGroups", searchParams],
+		queryFn: async () => {
+			const [groupRes, permissionRes] = await Promise.all([
+				getGroupsApi(searchParams),
+				getPermissionsApi(searchParams),
+			]);
+
+			const groups: PermissionGroupVo[] = groupRes.items.map((group) => {
+				const localizableGroup = deserialize(group.displayName);
+				const permissions = permissionRes.items
+					.filter((permission) => permission.groupName === group.name)
+					.map((permission) => {
+						const localizablePermission = deserialize(permission.displayName);
+						return {
+							...permission,
+							displayName: Lr(localizablePermission.resourceName, localizablePermission.name),
+						};
+					});
+				return {
+					...group,
+					displayName: Lr(localizableGroup.resourceName, localizableGroup.name),
+					permissions: listToTree<PermissionVo>(permissions, {
+						id: "name",
+						pid: "parentName",
+					}),
+				};
+			});
+
+			return groups;
+		},
+	});
+
+	const handleDelete = async (permission: PermissionDefinitionDto) => {
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpUi.ItemWillBeDeletedMessageWithFormat", { 0: permission.name }),
+			onOk: () => deletePermission(permission.name),
+		});
+	};
+
+	const mainColumns: ProColumns<PermissionGroupVo>[] = [
+		{
+			title: $t("abp.sequence"),
+			dataIndex: "index",
+			valueType: "index",
+			width: 50,
+			render: (_, __, index) => index + 1,
+		},
+		{
+			title: $t("AbpUi.Search"),
+			dataIndex: "filter",
+			valueType: "text",
+			hideInTable: true, // hide in table
+		},
+		{
+			title: $t("AbpPermissionManagement.DisplayName:Name"),
+			dataIndex: "name",
+			width: 150,
+			hideInSearch: true,
+		},
+		{
+			title: $t("AbpPermissionManagement.DisplayName:DisplayName"),
+			dataIndex: "displayName",
+			width: 150,
+			hideInSearch: true,
+		},
+	];
+
+	const subColumns: ColumnsType<PermissionVo> = [
+		{
+			title: $t("AbpPermissionManagement.DisplayName:Name"),
+			dataIndex: "name",
+			width: 200,
+			ellipsis: true,
+		},
+		{
+			title: $t("AbpPermissionManagement.DisplayName:DisplayName"),
+			dataIndex: "displayName",
+			width: 200,
+		},
+		{
+			align: "center",
+			minWidth: 100,
+			// slots: { default: 'tenant' },
+			title: $t("AbpPermissionManagement.DisplayName:MultiTenancySide"),
+			render: (_, record) => (
+				<Space>
+					<Tag color="blue">{multiTenancySidesMap[record.multiTenancySide]}</Tag>
+				</Space>
+			),
+		},
+		{
+			title: $t("AbpPermissionManagement.DisplayName:Providers"),
+			width: 200,
+			render: (_, record) => (
+				<Space>
+					{record.providers.map((provider) => (
+						<Tag key={provider} color="blue">
+							{providersMap[provider]}
+						</Tag>
+					))}
+				</Space>
+			),
+		},
+		{
+			title: $t("AbpUi.Actions"),
+			width: 180,
+			fixed: "right",
+			render: (_, record) => (
+				<Space>
+					{hasAccessByCodes([GroupDefinitionsPermissions.Update]) && (
+						<Button
+							type="link"
+							icon={<EditOutlined />}
+							onClick={() => {
+								setSelectedPermission(record);
+								setModalVisible(true);
+							}}
+						>
+							{$t("AbpUi.Edit")}
+						</Button>
+					)}
+					{!record.isStatic && hasAccessByCodes([GroupDefinitionsPermissions.Delete]) && (
+						<Button type="link" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+							{$t("AbpUi.Delete")}
+						</Button>
+					)}
+				</Space>
+			),
+		},
+	];
+
+	const expandedRowRender = (group: PermissionGroupVo) => {
+		return (
+			<Table<PermissionVo>
+				columns={subColumns}
+				dataSource={group.permissions}
+				pagination={false}
+				rowKey={(record) => record.name}
+				indentSize={30}
+				expandable={{
+					defaultExpandAllRows: false,
+					childrenColumnName: "children", // 指定子项字段
+				}}
+			/>
+		);
+	};
+
+	// 工具栏
+	const toolBarRender = () => [
+		hasAccessByCodes([GroupDefinitionsPermissions.Create]) && (
+			<Button
+				type="primary"
+				icon={<PlusOutlined />}
+				onClick={() => {
+					setSelectedPermission(undefined);
+					setModalVisible(true);
+				}}
+			>
+				{$t("AbpPermissionManagement.PermissionDefinitions:AddNew")}
+			</Button>
+		),
+	];
+
+	return (
+		<>
+			{contextHolder}
+
+			<Card>
+				<ProTable<PermissionGroupVo>
+					headerTitle={$t("AbpPermissionManagement.PermissionDefinitions")}
+					actionRef={actionRef}
+					columns={mainColumns}
+					dataSource={data}
+					loading={isLoading}
+					rowKey={(record) => record.name}
+					expandable={{ expandedRowRender }}
+					toolBarRender={toolBarRender}
+					pagination={{
+						showSizeChanger: true,
+						total: data?.length,
+					}}
+					search={{
+						labelWidth: "auto",
+						span: 12, //search part width
+						defaultCollapsed: true,
+					}}
+					request={async (params) => {
+						const { filter } = params;
+						setSearchParams({ filter: filter });
+						//强制重新请求数据（用于table的刷新按钮）
+						await queryClient.invalidateQueries({ queryKey: ["permissions", "permissionGroups"] });
+						return { data, success: true, total: data?.length };
+					}}
+				/>
+			</Card>
+			<PermissionDefinitionModal
+				visible={modalVisible}
+				permission={selectedPermission}
+				onClose={() => {
+					setModalVisible(false);
+					setSelectedPermission(undefined);
+				}}
+				onChange={() => {
+					setModalVisible(false);
+					actionRef.current?.reload();
+				}}
+			/>
+		</>
+	);
+};
+
+export default PermissionDefinitionTable;
diff --git a/apps/react-admin/src/pages/management/permissions/permissions/types.ts b/apps/react-admin/src/pages/management/permissions/permissions/types.ts
new file mode 100644
index 000000000..a0001a9b8
--- /dev/null
+++ b/apps/react-admin/src/pages/management/permissions/permissions/types.ts
@@ -0,0 +1,46 @@
+import { MultiTenancySides } from "#/management/permissions/definitions";
+import type { TFunction } from "i18next";
+
+export function useTypesMap($t: TFunction<any>) {
+	const multiTenancySidesMap: { [key: number]: string } = {
+		[MultiTenancySides.Both]: $t("AbpPermissionManagement.MultiTenancySides:Both"),
+		[MultiTenancySides.Host]: $t("AbpPermissionManagement.MultiTenancySides:Host"),
+		[MultiTenancySides.Tenant]: $t("AbpPermissionManagement.MultiTenancySides:Tenant"),
+	};
+
+	const multiTenancySideOptions = [
+		{
+			label: multiTenancySidesMap[MultiTenancySides.Tenant],
+			value: MultiTenancySides.Tenant,
+		},
+		{
+			label: multiTenancySidesMap[MultiTenancySides.Host],
+			value: MultiTenancySides.Host,
+		},
+		{
+			label: multiTenancySidesMap[MultiTenancySides.Both],
+			value: MultiTenancySides.Both,
+		},
+	];
+
+	const providersMap: { [key: string]: string } = {
+		C: $t("AbpPermissionManagement.Providers:Client"),
+		O: $t("AbpPermissionManagement.Providers:OrganizationUnit"),
+		R: $t("AbpPermissionManagement.Providers:Role"),
+		U: $t("AbpPermissionManagement.Providers:User"),
+	};
+
+	const providerOptions = [
+		{ label: providersMap.R, value: "R" },
+		{ label: providersMap.U, value: "U" },
+		{ label: providersMap.O, value: "O" },
+		{ label: providersMap.C, value: "C" },
+	];
+
+	return {
+		multiTenancySideOptions,
+		multiTenancySidesMap,
+		providerOptions,
+		providersMap,
+	};
+}
diff --git a/apps/react-admin/src/pages/management/settings/definitions/setting-definition-modal.tsx b/apps/react-admin/src/pages/management/settings/definitions/setting-definition-modal.tsx
new file mode 100644
index 000000000..df581c229
--- /dev/null
+++ b/apps/react-admin/src/pages/management/settings/definitions/setting-definition-modal.tsx
@@ -0,0 +1,228 @@
+import { useEffect, useState } from "react";
+import { Form, Input, Modal, Tabs, Select, Checkbox } from "antd";
+import TextArea from "antd/es/input/TextArea";
+import { useTranslation } from "react-i18next";
+import type { SettingDefinitionDto } from "#/management/settings/definitions";
+import type { PropertyInfo } from "@/components/abp/properties/types";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createApi, getApi, updateApi } from "@/api/management/settings/definitions";
+import LocalizableInput from "@/components/abp/localizable-input/localizable-input";
+import PropertyTable from "@/components/abp/properties/property-table";
+import { toast } from "sonner";
+import { CircleLoading } from "@/components/loading";
+import { mergeDeepRight } from "ramda";
+
+interface Props {
+	visible: boolean;
+	settingName?: string;
+	onClose: () => void;
+	onChange: (data: SettingDefinitionDto) => void;
+}
+
+type TabKeys = "basic" | "props";
+
+const defaultModel = {} as SettingDefinitionDto;
+
+const SettingDefinitionModal: React.FC<Props> = ({ visible, settingName, onClose, onChange }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+	const queryClient = useQueryClient();
+	const [activeTab, setActiveTab] = useState<TabKeys>("basic");
+	const [formModel, setFormModel] = useState<SettingDefinitionDto>(defaultModel);
+
+	const providerOptions = [
+		{ label: $t("AbpSettingManagement.Providers:Default"), value: "D" },
+		{ label: $t("AbpSettingManagement.Providers:Configuration"), value: "C" },
+		{ label: $t("AbpSettingManagement.Providers:Global"), value: "G" },
+		{ label: $t("AbpSettingManagement.Providers:Tenant"), value: "T" },
+		{ label: $t("AbpSettingManagement.Providers:User"), value: "U" },
+	];
+	// Fetch setting data if editing
+	const { data: settingData, isLoading } = useQuery({
+		queryKey: ["settingDefinition", settingName],
+		queryFn: () => {
+			if (!settingName) {
+				return Promise.reject(new Error("settingName is undefined"));
+			}
+			return getApi(settingName);
+		},
+		enabled: !!settingName && visible,
+	});
+
+	useEffect(() => {
+		if (settingData && settingData.name === settingName) {
+			setFormModel(settingData);
+			form.setFieldsValue(settingData);
+		}
+	}, [settingData]);
+
+	useEffect(() => {
+		if (visible) {
+			setActiveTab("basic");
+		}
+	}, [visible]);
+
+	// Create/Update mutations
+	const { mutateAsync: createSetting } = useMutation({
+		mutationFn: createApi,
+		onSuccess: (data) => {
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			onChange(data);
+			onClose();
+		},
+	});
+
+	const { mutateAsync: updateSetting } = useMutation({
+		mutationFn: ({ name, input }: { name: string; input: SettingDefinitionDto }) => updateApi(name, input),
+		onSuccess: (data) => {
+			queryClient.invalidateQueries({ queryKey: ["settingDefinition", settingName] });
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			onChange(data);
+			onClose();
+		},
+	});
+
+	const handlePropertyChange = (prop: PropertyInfo) => {
+		setFormModel((prev) => ({
+			...prev,
+			extraProperties: {
+				...prev.extraProperties,
+				[prop.key]: prop.value,
+			},
+		}));
+	};
+
+	const handlePropertyDelete = (prop: PropertyInfo) => {
+		setFormModel((prev) => {
+			const newProperties = { ...prev.extraProperties };
+			delete newProperties[prop.key];
+			return {
+				...prev,
+				extraProperties: newProperties,
+			};
+		});
+	};
+
+	const handleSubmit = async () => {
+		if (formModel.isStatic) return;
+
+		try {
+			await form.validateFields();
+			if (settingName) {
+				await updateSetting({ name: settingName, input: formModel });
+			} else {
+				await createSetting(formModel);
+			}
+		} catch (error) {
+			console.error("Validation failed:", error);
+		}
+	};
+
+	return (
+		<Modal
+			open={visible}
+			title={
+				settingName
+					? `${$t("AbpSettingManagement.Settings")} - ${formModel.name}`
+					: $t("AbpSettingManagement.Definition:AddNew")
+			}
+			onCancel={() => {
+				onClose();
+				form.resetFields();
+				setFormModel(defaultModel);
+				form.resetFields();
+			}}
+			onClose={() => {
+				onClose();
+				form.resetFields();
+				setFormModel(defaultModel);
+				form.resetFields();
+			}}
+			onOk={handleSubmit}
+			okButtonProps={{ disabled: formModel.isStatic }}
+			width="50%"
+			destroyOnClose
+		>
+			{!!settingName && visible && isLoading ? (
+				<CircleLoading />
+			) : (
+				<Form
+					form={form}
+					layout="horizontal"
+					labelCol={{ span: 6 }}
+					wrapperCol={{ span: 18 }}
+					onValuesChange={(changedValues) => {
+						setFormModel((prevModel) => {
+							return mergeDeepRight(prevModel, changedValues);
+						});
+					}}
+				>
+					<Tabs activeKey={activeTab} onChange={(key) => setActiveTab(key as TabKeys)}>
+						<Tabs.TabPane key="basic" tab={$t("AbpSettingManagement.BasicInfo")}>
+							<Form.Item label={$t("AbpSettingManagement.DisplayName:Name")} name="name" rules={[{ required: true }]}>
+								<Input disabled={formModel.isStatic} />
+							</Form.Item>
+							<Form.Item label={$t("AbpSettingManagement.DisplayName:DefaultValue")} name="defaultValue">
+								<TextArea disabled={formModel.isStatic} allowClear autoSize={{ minRows: 3 }} />
+							</Form.Item>
+							<Form.Item
+								label={$t("AbpSettingManagement.DisplayName:DisplayName")}
+								name="displayName"
+								rules={[{ required: true }]}
+							>
+								<LocalizableInput disabled={formModel.isStatic} />
+							</Form.Item>
+							<Form.Item label={$t("AbpSettingManagement.DisplayName:Description")} name="description">
+								<LocalizableInput disabled={formModel.isStatic} />
+							</Form.Item>
+							<Form.Item
+								label={$t("AbpSettingManagement.DisplayName:Providers")}
+								name="providers"
+								extra={$t("AbpSettingManagement.Description:Providers")}
+							>
+								<Select disabled={formModel.isStatic} mode="multiple" allowClear options={providerOptions} />
+							</Form.Item>
+							<Form.Item
+								label={$t("AbpSettingManagement.DisplayName:IsInherited")}
+								name="isInherited"
+								valuePropName="checked"
+								extra={$t("AbpSettingManagement.Description:IsInherited")}
+							>
+								<Checkbox disabled={formModel.isStatic}>{$t("AbpSettingManagement.DisplayName:IsInherited")}</Checkbox>
+							</Form.Item>
+							<Form.Item
+								label={$t("AbpSettingManagement.DisplayName:IsEncrypted")}
+								name="IsEncrypted"
+								valuePropName="checked"
+								extra={$t("AbpSettingManagement.Description:IsEncrypted")}
+							>
+								<Checkbox disabled={formModel.isStatic}>{$t("AbpSettingManagement.DisplayName:IsEncrypted")}</Checkbox>
+							</Form.Item>
+							<Form.Item
+								label={$t("AbpSettingManagement.DisplayName:IsVisibleToClients")}
+								name="IsVisibleToClients"
+								valuePropName="checked"
+								extra={$t("AbpSettingManagement.Description:IsVisibleToClients")}
+							>
+								<Checkbox disabled={formModel.isStatic}>
+									{$t("AbpSettingManagement.DisplayName:IsVisibleToClients")}
+								</Checkbox>
+							</Form.Item>
+						</Tabs.TabPane>
+
+						<Tabs.TabPane key="props" tab={$t("AbpPermissionManagement.Properties")}>
+							<PropertyTable
+								data={formModel.extraProperties}
+								onChange={handlePropertyChange}
+								onDelete={handlePropertyDelete}
+								disabled={formModel.isStatic}
+							/>
+						</Tabs.TabPane>
+					</Tabs>
+				</Form>
+			)}
+		</Modal>
+	);
+};
+
+export default SettingDefinitionModal;
diff --git a/apps/react-admin/src/pages/management/settings/definitions/setting-definition-table.tsx b/apps/react-admin/src/pages/management/settings/definitions/setting-definition-table.tsx
new file mode 100644
index 000000000..751a904ab
--- /dev/null
+++ b/apps/react-admin/src/pages/management/settings/definitions/setting-definition-table.tsx
@@ -0,0 +1,163 @@
+import { useRef, useState, useCallback } from "react";
+import { Button, Card, Modal, Space } from "antd";
+import { EditOutlined, DeleteOutlined, PlusOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { ProTable, type ActionType, type ProColumns } from "@ant-design/pro-table";
+import type { SettingDefinitionDto } from "#/management/settings/definitions";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { deleteApi, getListApi } from "@/api/management/settings/definitions";
+import { SettingDefinitionsPermissions } from "@/constants/management/settings/permissions";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import SettingDefinitionModal from "./setting-definition-modal";
+import { useLocalizer } from "@/hooks/abp/use-localization";
+import { localizationSerializer } from "@/utils/abp/localization-serializer";
+import { toast } from "sonner";
+
+const SettingDefinitionTable: React.FC = () => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const queryClient = useQueryClient();
+	const [modal, contextHolder] = Modal.useModal();
+	const [modalVisible, setModalVisible] = useState(false);
+	const [selectedSetting, setSelectedSetting] = useState<SettingDefinitionDto>();
+
+	const { Lr } = useLocalizer(
+		undefined,
+		useCallback(() => {
+			actionRef.current?.reload();
+			setModalVisible(false);
+		}, []),
+	);
+
+	const { deserialize } = localizationSerializer();
+
+	// Delete mutation
+	const { mutateAsync: deleteSetting } = useMutation({
+		mutationFn: deleteApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["settings"] });
+			actionRef.current?.reload();
+		},
+	});
+
+	const handleDelete = (setting: SettingDefinitionDto) => {
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpUi.ItemWillBeDeletedMessageWithFormat", { 0: setting.name }),
+			onOk: () => deleteSetting(setting.name),
+		});
+	};
+
+	const columns: ProColumns<SettingDefinitionDto>[] = [
+		{
+			title: $t("AbpUi.Search"),
+			dataIndex: "filter",
+			hideInTable: true,
+		},
+		{
+			title: $t("AbpSettingManagement.DisplayName:Name"),
+			dataIndex: "name",
+			width: 150,
+			hideInSearch: true,
+		},
+		{
+			title: $t("AbpSettingManagement.DisplayName:DisplayName"),
+			dataIndex: "displayName",
+			width: 150,
+			hideInSearch: true,
+		},
+		{
+			title: $t("AbpUi.Actions"),
+			width: 180,
+			fixed: "right",
+			hideInSearch: true,
+			render: (_, record) => (
+				<Space split>
+					{hasAccessByCodes([SettingDefinitionsPermissions.Update]) && (
+						<Button
+							type="link"
+							icon={<EditOutlined />}
+							onClick={() => {
+								setSelectedSetting(record);
+								setModalVisible(true);
+							}}
+						>
+							{$t("AbpUi.Edit")}
+						</Button>
+					)}
+					{!record.isStatic && hasAccessByCodes([SettingDefinitionsPermissions.DeleteOrRestore]) && (
+						<Button type="link" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+							{$t("AbpUi.Delete")}
+						</Button>
+					)}
+				</Space>
+			),
+		},
+	];
+
+	return (
+		<>
+			{contextHolder}
+			<Card>
+				<ProTable<SettingDefinitionDto>
+					headerTitle={$t("AbpSettingManagement.Settings")}
+					actionRef={actionRef}
+					rowKey="name"
+					columns={columns}
+					request={async (params) => {
+						const { filter } = params;
+						const query = await queryClient.fetchQuery({
+							queryKey: ["settings", params],
+							queryFn: async () => {
+								const res = await getListApi({ filter });
+								return res.items.map((item) => {
+									const localizableString = deserialize(item.displayName);
+									return {
+										...item,
+										displayName: Lr(localizableString.resourceName, localizableString.name),
+									};
+								});
+							},
+						});
+
+						return {
+							data: query,
+							success: true,
+							total: query.length,
+						};
+					}}
+					search={{
+						labelWidth: "auto",
+						defaultCollapsed: false,
+					}}
+					toolBarRender={() => [
+						hasAccessByCodes([SettingDefinitionsPermissions.Create]) && (
+							<Button
+								type="primary"
+								icon={<PlusOutlined />}
+								onClick={() => {
+									setSelectedSetting(undefined);
+									setModalVisible(true);
+								}}
+							>
+								{$t("AbpSettingManagement.Definition:AddNew")}
+							</Button>
+						),
+					]}
+				/>
+			</Card>
+			<SettingDefinitionModal
+				visible={modalVisible}
+				settingName={selectedSetting?.name}
+				onClose={() => {
+					setModalVisible(false);
+					setSelectedSetting(undefined);
+				}}
+				onChange={() => actionRef.current?.reload()}
+			/>
+		</>
+	);
+};
+
+export default SettingDefinitionTable;
diff --git a/apps/react-admin/src/pages/management/settings/settings/setting-form.tsx b/apps/react-admin/src/pages/management/settings/settings/setting-form.tsx
new file mode 100644
index 000000000..e1e040564
--- /dev/null
+++ b/apps/react-admin/src/pages/management/settings/settings/setting-form.tsx
@@ -0,0 +1,216 @@
+import { useEffect, useState } from "react";
+import { Card, Form, Tabs, Collapse, Input, InputNumber, DatePicker, Select, Checkbox, Button } from "antd";
+import { useTranslation } from "react-i18next";
+import {
+	ValueType,
+	type SettingDetail,
+	type SettingGroup,
+	type SettingsUpdateInput,
+} from "#/management/settings/settings";
+import { formatToDate } from "@/utils/abp";
+import { SettingOutlined } from "@ant-design/icons";
+import dayjs from "dayjs";
+import { toast } from "sonner";
+
+interface Props {
+	getApi: () => Promise<SettingGroup[]>;
+	submitApi: (input: SettingsUpdateInput) => Promise<void>;
+	onChange: (data: SettingsUpdateInput) => void;
+	slots?: {
+		[key: string]: React.FC<{
+			detail: SettingDetail;
+			onChange: (setting: SettingDetail) => void;
+		}>;
+	};
+}
+
+const defaultModel: SettingsUpdateInput = {
+	settings: [],
+};
+
+const SettingForm: React.FC<Props> = ({ getApi, submitApi, onChange, slots }) => {
+	const { t: $t } = useTranslation();
+	// const [form] = Form.useForm();
+	const [activeTab, setActiveTab] = useState(0);
+	const [submitting, setSubmitting] = useState(false);
+	const [settingGroups, setSettingGroups] = useState<SettingGroup[]>([]);
+	const [settingsUpdateInput, setSettingsUpdateInput] = useState<SettingsUpdateInput>(defaultModel);
+
+	useEffect(() => {
+		fetchSettings();
+	}, []);
+
+	const fetchSettings = async () => {
+		const groups = await getApi();
+		setSettingGroups(groups);
+	};
+
+	const getExpandedCollapseKeys = (group: SettingGroup) => {
+		return group.settings.map((setting) => setting.displayName);
+	};
+
+	const handleSubmit = async () => {
+		if (settingsUpdateInput.settings.length === 0) return;
+
+		try {
+			setSubmitting(true);
+			await submitApi(settingsUpdateInput);
+			onChange(settingsUpdateInput);
+			toast.success($t("AbpSettingManagement.SuccessfullySaved"));
+		} finally {
+			setSubmitting(false);
+		}
+	};
+
+	const handleCheckChange = (setting: SettingDetail) => {
+		setting.value = setting.value === "true" ? "false" : "true";
+		handleValueChange(setting);
+	};
+
+	const handleDateChange = (date: any, setting: SettingDetail) => {
+		setting.value = dayjs.isDayjs(date) ? formatToDate(date) : "";
+		handleValueChange(setting);
+	};
+
+	const handleValueChange = (setting: SettingDetail) => {
+		if (setting.valueType === ValueType.NoSet) return;
+
+		setSettingsUpdateInput((prev) => {
+			const newSettings = [...prev.settings];
+			const index = newSettings.findIndex((s) => s.name === setting.name);
+
+			if (index === -1) {
+				newSettings.push({
+					name: setting.name,
+					value: String(setting.value),
+				});
+			} else {
+				newSettings[index] = {
+					...newSettings[index],
+					value: String(setting.value),
+				};
+			}
+
+			return { settings: newSettings };
+		});
+	};
+
+	const renderSettingInput = (detail: SettingDetail) => {
+		// 如果存在自定义槽位，优先使用槽位
+		if (detail.slot && slots?.[detail.slot]) {
+			const SlotComponent = slots[detail.slot];
+			// return <SlotComponent detail={detail} onChange={(_)=>{}} />;
+			return <SlotComponent detail={detail} onChange={handleValueChange} />;
+		}
+
+		switch (detail.valueType) {
+			case ValueType.String:
+				return detail.isEncrypted ? (
+					<Input.Password
+						value={detail.value}
+						placeholder={detail.description}
+						onChange={(e) => {
+							detail.value = e.target.value;
+							handleValueChange(detail);
+						}}
+					/>
+				) : (
+					<Input
+						value={detail.value}
+						placeholder={detail.description}
+						onChange={(e) => {
+							detail.value = e.target.value;
+							handleValueChange(detail);
+						}}
+					/>
+				);
+			case ValueType.Number:
+				return !detail.isEncrypted ? (
+					<InputNumber
+						className="w-full"
+						value={detail.value}
+						placeholder={detail.description}
+						onChange={(value) => {
+							detail.value = String(value);
+							handleValueChange(detail);
+						}}
+					/>
+				) : null;
+			case ValueType.Date:
+				return (
+					<DatePicker
+						className="w-full"
+						placeholder={detail.description}
+						value={detail.value ? dayjs(detail.value, "YYYY-MM-DD") : null}
+						onChange={(date) => handleDateChange(date, detail)}
+					/>
+				);
+			case ValueType.Option:
+				return (
+					<Select
+						value={detail.value}
+						onChange={(value) => {
+							detail.value = value;
+							handleValueChange(detail);
+						}}
+					>
+						{detail.options?.map((option) => (
+							<Select.Option key={option.value} value={option.value} disabled={option.value === detail.value}>
+								{option.name}
+							</Select.Option>
+						))}
+					</Select>
+				);
+			case ValueType.Boolean:
+				return (
+					<Checkbox checked={detail.value === "true"} onChange={() => handleCheckChange(detail)}>
+						{detail.displayName}
+					</Checkbox>
+				);
+			default:
+				return null;
+		}
+	};
+
+	return (
+		<Card
+			title={$t("AbpSettingManagement.Settings")}
+			extra={
+				settingsUpdateInput.settings.length > 0 && (
+					<Button
+						type="primary"
+						icon={<SettingOutlined />}
+						loading={submitting}
+						onClick={handleSubmit}
+						className="w-[100px]"
+					>
+						{$t("AbpUi.Submit")}
+					</Button>
+				)
+			}
+		>
+			<Form labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}>
+				<Tabs activeKey={String(activeTab)} onChange={(key) => setActiveTab(Number(key))}>
+					{settingGroups.map((group, index) => (
+						// biome-ignore lint: reason
+						<Tabs.TabPane key={index} tab={group.displayName}>
+							<Collapse defaultActiveKey={getExpandedCollapseKeys(group)}>
+								{group.settings.map((setting) => (
+									<Collapse.Panel key={setting.displayName} header={setting.displayName}>
+										{setting.details.map((detail) => (
+											<Form.Item key={detail.name} label={detail.displayName} extra={detail.description}>
+												{renderSettingInput(detail)}
+											</Form.Item>
+										))}
+									</Collapse.Panel>
+								))}
+							</Collapse>
+						</Tabs.TabPane>
+					))}
+				</Tabs>
+			</Form>
+		</Card>
+	);
+};
+
+export default SettingForm;
diff --git a/apps/react-admin/src/pages/management/settings/settings/system-setting.tsx b/apps/react-admin/src/pages/management/settings/settings/system-setting.tsx
new file mode 100644
index 000000000..977ccd911
--- /dev/null
+++ b/apps/react-admin/src/pages/management/settings/settings/system-setting.tsx
@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { Button, Input, Modal } from "antd";
+import { useTranslation } from "react-i18next";
+import type { SettingsUpdateInput } from "#/management/settings/settings";
+
+import {
+	getGlobalSettingsApi,
+	getTenantSettingsApi,
+	sendTestEmailApi,
+	setGlobalSettingsApi,
+	setTenantSettingsApi,
+} from "@/api/management/settings/settings";
+import SettingForm from "./setting-form";
+import { toast } from "sonner";
+import { isEmail } from "@/utils/abp/regex";
+import { useApplication } from "@/store/abpCoreStore";
+
+const SystemSetting: React.FC = () => {
+	const { t: $t } = useTranslation();
+	// const [form] = Form.useForm();
+	const [sending, setSending] = useState(false);
+	const application = useApplication();
+
+	const [modal, contextHolder] = Modal.useModal();
+	const handleGet = async () => {
+		const api = application?.currentTenant.isAvailable ? getTenantSettingsApi : getGlobalSettingsApi;
+		const { items } = await api();
+		return items;
+	};
+
+	const handleSubmit = async (input: SettingsUpdateInput) => {
+		const api = application?.currentTenant.isAvailable ? setTenantSettingsApi : setGlobalSettingsApi;
+		await api(input);
+	};
+
+	const handleSendMail = async (email: string) => {
+		if (!isEmail(email)) {
+			modal.warning({
+				title: $t("AbpValidation.ThisFieldIsNotValid"),
+				content: $t("AbpValidation.The {0} field is not a valid e-mail address", {
+					0: $t("AbpSettingManagement.TargetEmailAddress"),
+				}),
+				centered: true,
+			});
+			55;
+			return;
+		}
+
+		try {
+			setSending(true);
+			await sendTestEmailApi(email);
+			toast.success($t("AbpSettingManagement.SuccessfullySent"));
+		} finally {
+			setSending(false);
+		}
+	};
+
+	const SendTestEmailSlot: React.FC<{
+		detail: any;
+		onChange: (setting: any) => void;
+	}> = ({ detail, onChange }) => (
+		<Input.Search
+			// value={detail.value}
+			loading={sending}
+			placeholder={$t("AbpSettingManagement.TargetEmailAddress")}
+			onSearch={handleSendMail}
+			onChange={(e) => {
+				detail.value = e.target.value;
+				onChange(detail);
+			}}
+			enterButton={
+				<Button loading={sending} type="primary">
+					{$t("AbpSettingManagement.Send")}
+				</Button>
+			}
+		/>
+	);
+
+	return (
+		<>
+			{contextHolder}
+			<SettingForm
+				getApi={handleGet}
+				submitApi={handleSubmit}
+				onChange={() => {}}
+				slots={{
+					"send-test-email": SendTestEmailSlot,
+				}}
+			/>
+		</>
+	);
+};
+
+export default SystemSetting;
diff --git a/apps/react-admin/src/pages/management/settings/settings/user-setting.tsx b/apps/react-admin/src/pages/management/settings/settings/user-setting.tsx
new file mode 100644
index 000000000..05c855a54
--- /dev/null
+++ b/apps/react-admin/src/pages/management/settings/settings/user-setting.tsx
@@ -0,0 +1,18 @@
+import type { SettingsUpdateInput } from "#/management/settings/settings";
+import { getUserSettingsApi, setUserSettingsApi } from "@/api/management/settings/settings";
+import SettingForm from "./setting-form";
+
+const UserSetting: React.FC = () => {
+	const handleGet = async () => {
+		const { items } = await getUserSettingsApi();
+		return items;
+	};
+
+	const handleSubmit = async (input: SettingsUpdateInput) => {
+		await setUserSettingsApi(input);
+	};
+
+	return <SettingForm getApi={handleGet} submitApi={handleSubmit} onChange={() => {}} />;
+};
+
+export default UserSetting;
diff --git a/apps/react-admin/src/pages/management/system/organization/index.tsx b/apps/react-admin/src/pages/management/system/organization/index.tsx
new file mode 100644
index 000000000..b60d58f2d
--- /dev/null
+++ b/apps/react-admin/src/pages/management/system/organization/index.tsx
@@ -0,0 +1,208 @@
+import { useQuery } from "@tanstack/react-query";
+import { Button, Card, Col, Form, Input, InputNumber, Modal, Popconfirm, Radio, Row, Select, Space, Tag } from "antd";
+import Table, { type ColumnsType } from "antd/es/table";
+import type { TableRowSelection } from "antd/es/table/interface";
+import { useEffect, useState } from "react";
+
+import orgService from "@/api/services/orgService";
+import { IconButton, Iconify } from "@/components/icon";
+
+import OrganizationChart from "./organization-chart";
+
+import type { Organization } from "#/entity";
+
+type SearchFormFieldType = Pick<Organization, "name" | "status">;
+
+export default function OrganizationPage() {
+	const [searchForm] = Form.useForm();
+	const [organizationModalPros, setOrganizationModalProps] = useState<OrganizationModalProps>({
+		formValue: {
+			id: "",
+			name: "",
+			status: "enable",
+		},
+		title: "New",
+		show: false,
+		onOk: () => {
+			setOrganizationModalProps((prev) => ({ ...prev, show: false }));
+		},
+		onCancel: () => {
+			setOrganizationModalProps((prev) => ({ ...prev, show: false }));
+		},
+	});
+
+	const columns: ColumnsType<Organization> = [
+		{ title: "Name", dataIndex: "name", width: 300 },
+		{ title: "Order", dataIndex: "order", align: "center", width: 60 },
+		{
+			title: "Status",
+			dataIndex: "status",
+			align: "center",
+			width: 120,
+			render: (status) => <Tag color={status === "enable" ? "success" : "error"}>{status}</Tag>,
+		},
+		{ title: "Desc", dataIndex: "desc", align: "center", width: 300 },
+		{
+			title: "Action",
+			key: "operation",
+			align: "center",
+			width: 100,
+			render: (_, record) => (
+				<div className="flex w-full justify-center text-gray">
+					<IconButton onClick={() => onEdit(record)}>
+						<Iconify icon="solar:pen-bold-duotone" size={18} />
+					</IconButton>
+					<Popconfirm title="Delete the Organization" okText="Yes" cancelText="No" placement="left">
+						<IconButton>
+							<Iconify icon="mingcute:delete-2-fill" size={18} className="text-error" />
+						</IconButton>
+					</Popconfirm>
+				</div>
+			),
+		},
+	];
+
+	// rowSelection objects indicates the need for row selection
+	const rowSelection: TableRowSelection<Organization> = {
+		onChange: (selectedRowKeys, selectedRows) => {
+			console.log(`selectedRowKeys: ${selectedRowKeys}`, "selectedRows: ", selectedRows);
+		},
+		onSelect: (record, selected, selectedRows) => {
+			console.log(record, selected, selectedRows);
+		},
+		onSelectAll: (selected, selectedRows, changeRows) => {
+			console.log(selected, selectedRows, changeRows);
+		},
+	};
+
+	const { data } = useQuery({
+		queryKey: ["orgs"],
+		queryFn: orgService.getOrgList,
+	});
+
+	const onSearchFormReset = () => {
+		searchForm.resetFields();
+	};
+
+	const onCreate = () => {
+		setOrganizationModalProps((prev) => ({
+			...prev,
+			show: true,
+			title: "Create New",
+			formValue: {
+				...prev.formValue,
+				id: "",
+				name: "",
+				order: 1,
+				desc: "",
+				status: "enable",
+			},
+		}));
+	};
+
+	const onEdit = (formValue: Organization) => {
+		setOrganizationModalProps((prev) => ({
+			...prev,
+			show: true,
+			title: "Edit",
+			formValue,
+		}));
+	};
+
+	return (
+		<Space direction="vertical" size="large" className="w-full">
+			<Card>
+				<Form form={searchForm}>
+					<Row gutter={[16, 16]}>
+						<Col span={24} lg={6}>
+							<Form.Item<SearchFormFieldType> label="Name" name="name" className="!mb-0">
+								<Input />
+							</Form.Item>
+						</Col>
+						<Col span={24} lg={6}>
+							<Form.Item<SearchFormFieldType> label="Status" name="status" className="!mb-0">
+								<Select>
+									<Select.Option value="enable">
+										<Tag color="success">Enable</Tag>
+									</Select.Option>
+									<Select.Option value="disable">
+										<Tag color="error">Disable</Tag>
+									</Select.Option>
+								</Select>
+							</Form.Item>
+						</Col>
+						<Col span={24} lg={12}>
+							<div className="flex justify-end">
+								<Button onClick={onSearchFormReset}>Reset</Button>
+								<Button type="primary" className="ml-4">
+									Search
+								</Button>
+							</div>
+						</Col>
+					</Row>
+				</Form>
+			</Card>
+
+			<Card
+				title="Organization List"
+				extra={
+					<Button type="primary" onClick={onCreate}>
+						New
+					</Button>
+				}
+			>
+				<Table
+					rowKey="id"
+					size="small"
+					scroll={{ x: "max-content" }}
+					pagination={false}
+					columns={columns}
+					dataSource={data}
+					rowSelection={{ ...rowSelection }}
+				/>
+			</Card>
+
+			<Card title="Organization Chart">
+				<OrganizationChart organizations={data} />
+			</Card>
+
+			<OrganizationModal {...organizationModalPros} />
+		</Space>
+	);
+}
+
+type OrganizationModalProps = {
+	formValue: Organization;
+	title: string;
+	show: boolean;
+	onOk: VoidFunction;
+	onCancel: VoidFunction;
+};
+
+function OrganizationModal({ title, show, formValue, onOk, onCancel }: OrganizationModalProps) {
+	const [form] = Form.useForm();
+	useEffect(() => {
+		form.setFieldsValue({ ...formValue });
+	}, [formValue, form]);
+	return (
+		<Modal title={title} open={show} onOk={onOk} onCancel={onCancel}>
+			<Form initialValues={formValue} form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} layout="horizontal">
+				<Form.Item<Organization> label="Name" name="name" required>
+					<Input />
+				</Form.Item>
+				<Form.Item<Organization> label="Order" name="order" required>
+					<InputNumber style={{ width: "100%" }} />
+				</Form.Item>
+				<Form.Item<Organization> label="Status" name="status" required>
+					<Radio.Group optionType="button" buttonStyle="solid">
+						<Radio value="enable"> Enable </Radio>
+						<Radio value="disable"> Disable </Radio>
+					</Radio.Group>
+				</Form.Item>
+				<Form.Item<Organization> label="Desc" name="desc">
+					<Input.TextArea />
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+}
diff --git a/apps/react-admin/src/pages/management/system/organization/organization-chart.tsx b/apps/react-admin/src/pages/management/system/organization/organization-chart.tsx
new file mode 100644
index 000000000..2688b73c6
--- /dev/null
+++ b/apps/react-admin/src/pages/management/system/organization/organization-chart.tsx
@@ -0,0 +1,50 @@
+import { themeVars } from "@/theme/theme.css";
+import { rgbAlpha } from "@/utils/theme";
+import { Tree, TreeNode } from "react-organizational-chart";
+import styled from "styled-components";
+import type { Organization } from "#/entity";
+
+type Props = {
+	organizations?: Organization[];
+};
+export default function OrganizationChart({ organizations = [] }: Props) {
+	return (
+		<Tree
+			lineWidth="1px"
+			lineColor={themeVars.colors.palette.primary.default}
+			lineBorderRadius="24px"
+			label={<StyledNode>Root</StyledNode>}
+		>
+			{organizations.map((org) => (
+				<OrganizationChartTreeNode key={org.id} organization={org} />
+			))}
+		</Tree>
+	);
+}
+
+type OrganizationChartTreeNodeProps = {
+	organization: Organization;
+};
+function OrganizationChartTreeNode({ organization: { name, children } }: OrganizationChartTreeNodeProps) {
+	return (
+		<TreeNode label={<StyledNode>{name}</StyledNode>}>
+			{children?.map((org) => (
+				<OrganizationChartTreeNode key={org.id} organization={org} />
+			))}
+		</TreeNode>
+	);
+}
+
+const StyledNode = styled.div`
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+  padding: 16px;
+  border-radius: 12px;
+  display: inline-flex;
+  text-transform: capitalize;
+  color: ${themeVars.colors.palette.primary.default};
+  background-color: ${rgbAlpha(themeVars.colors.palette.primary.lightChannel, 0.2)};
+  border: 1px solid ${rgbAlpha(themeVars.colors.palette.primary.darkerChannel, 0.24)};
+`;
diff --git a/apps/react-admin/src/pages/management/system/permission/index.tsx b/apps/react-admin/src/pages/management/system/permission/index.tsx
new file mode 100644
index 000000000..1d4879b9a
--- /dev/null
+++ b/apps/react-admin/src/pages/management/system/permission/index.tsx
@@ -0,0 +1,147 @@
+import { Button, Card, Popconfirm, Tag } from "antd";
+import Table, { type ColumnsType } from "antd/es/table";
+import { isNil } from "ramda";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { IconButton, Iconify, SvgIcon } from "@/components/icon";
+import { useUserPermission } from "@/store/userStore";
+
+import PermissionModal, { type PermissionModalProps } from "./permission-modal";
+
+import type { Permission } from "#/entity";
+import { BasicStatus, PermissionType } from "#/enum";
+
+const defaultPermissionValue: Permission = {
+	id: "",
+	parentId: "",
+	name: "",
+	label: "",
+	route: "",
+	component: "",
+	icon: "",
+	hide: false,
+	status: BasicStatus.ENABLE,
+	type: PermissionType.CATALOGUE,
+};
+export default function PermissionPage() {
+	const permissions = useUserPermission();
+	const { t } = useTranslation();
+
+	const [permissionModalProps, setPermissionModalProps] = useState<PermissionModalProps>({
+		formValue: { ...defaultPermissionValue },
+		title: "New",
+		show: false,
+		onOk: () => {
+			setPermissionModalProps((prev) => ({ ...prev, show: false }));
+		},
+		onCancel: () => {
+			setPermissionModalProps((prev) => ({ ...prev, show: false }));
+		},
+	});
+	const columns: ColumnsType<Permission> = [
+		{
+			title: "Name",
+			dataIndex: "name",
+			width: 300,
+			render: (_, record) => <div>{t(record.label)}</div>,
+		},
+		{
+			title: "Type",
+			dataIndex: "type",
+			width: 60,
+			render: (_, record) => <Tag color="processing">{PermissionType[record.type]}</Tag>,
+		},
+		{
+			title: "Icon",
+			dataIndex: "icon",
+			width: 60,
+			render: (icon: string) => {
+				if (isNil(icon)) return "";
+				if (icon.startsWith("ic")) {
+					return <SvgIcon icon={icon} size={18} className="ant-menu-item-icon" />;
+				}
+				return <Iconify icon={icon} size={18} className="ant-menu-item-icon" />;
+			},
+		},
+		{
+			title: "Component",
+			dataIndex: "component",
+		},
+		{
+			title: "Status",
+			dataIndex: "status",
+			align: "center",
+			width: 120,
+			render: (status) => (
+				<Tag color={status === BasicStatus.DISABLE ? "error" : "success"}>
+					{status === BasicStatus.DISABLE ? "Disable" : "Enable"}
+				</Tag>
+			),
+		},
+		{ title: "Order", dataIndex: "order", width: 60 },
+		{
+			title: "Action",
+			key: "operation",
+			align: "center",
+			width: 100,
+			render: (_, record) => (
+				<div className="flex w-full justify-end text-gray">
+					{record?.type === PermissionType.CATALOGUE && (
+						<IconButton onClick={() => onCreate(record.id)}>
+							<Iconify icon="gridicons:add-outline" size={18} />
+						</IconButton>
+					)}
+					<IconButton onClick={() => onEdit(record)}>
+						<Iconify icon="solar:pen-bold-duotone" size={18} />
+					</IconButton>
+					<Popconfirm title="Delete the Permission" okText="Yes" cancelText="No" placement="left">
+						<IconButton>
+							<Iconify icon="mingcute:delete-2-fill" size={18} className="text-error" />
+						</IconButton>
+					</Popconfirm>
+				</div>
+			),
+		},
+	];
+
+	const onCreate = (parentId?: string) => {
+		setPermissionModalProps((prev) => ({
+			...prev,
+			show: true,
+			...defaultPermissionValue,
+			title: "New",
+			formValue: { ...defaultPermissionValue, parentId: parentId ?? "" },
+		}));
+	};
+
+	const onEdit = (formValue: Permission) => {
+		setPermissionModalProps((prev) => ({
+			...prev,
+			show: true,
+			title: "Edit",
+			formValue,
+		}));
+	};
+	return (
+		<Card
+			title="Permission List"
+			extra={
+				<Button type="primary" onClick={() => onCreate()}>
+					New
+				</Button>
+			}
+		>
+			<Table
+				rowKey="id"
+				size="small"
+				scroll={{ x: "max-content" }}
+				pagination={false}
+				columns={columns}
+				dataSource={permissions}
+			/>
+
+			<PermissionModal {...permissionModalProps} />
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/management/system/permission/permission-modal.tsx b/apps/react-admin/src/pages/management/system/permission/permission-modal.tsx
new file mode 100644
index 000000000..fd1e42efd
--- /dev/null
+++ b/apps/react-admin/src/pages/management/system/permission/permission-modal.tsx
@@ -0,0 +1,152 @@
+import { AutoComplete, Form, Input, InputNumber, Modal, Radio, TreeSelect } from "antd";
+import { useCallback, useEffect, useState } from "react";
+
+import { useUserPermission } from "@/store/userStore";
+
+import type { Permission } from "#/entity";
+import { BasicStatus, PermissionType } from "#/enum";
+
+// Constants
+const ENTRY_PATH = "/src/pages";
+const PAGES = import.meta.glob("/src/pages/**/*.tsx");
+const PAGE_SELECT_OPTIONS = Object.entries(PAGES).map(([path]) => {
+	const pagePath = path.replace(ENTRY_PATH, "");
+	return {
+		label: pagePath,
+		value: pagePath,
+	};
+});
+
+export type PermissionModalProps = {
+	formValue: Permission;
+	title: string;
+	show: boolean;
+	onOk: VoidFunction;
+	onCancel: VoidFunction;
+};
+
+export default function PermissionModal({ title, show, formValue, onOk, onCancel }: PermissionModalProps) {
+	const [form] = Form.useForm();
+	const permissions = useUserPermission();
+	const [compOptions, setCompOptions] = useState(PAGE_SELECT_OPTIONS);
+
+	const getParentNameById = useCallback(
+		(parentId: string, data: Permission[] | undefined = permissions) => {
+			let name = "";
+			if (!data || !parentId) return name;
+			for (let i = 0; i < data.length; i += 1) {
+				if (data[i].id === parentId) {
+					name = data[i].name;
+				} else if (data[i].children) {
+					name = getParentNameById(parentId, data[i].children);
+				}
+				if (name) {
+					break;
+				}
+			}
+			return name;
+		},
+		[permissions],
+	);
+
+	const updateCompOptions = (name: string) => {
+		if (!name) return;
+		setCompOptions(
+			PAGE_SELECT_OPTIONS.filter((path) => {
+				return path.value.includes(name.toLowerCase());
+			}),
+		);
+	};
+
+	useEffect(() => {
+		form.setFieldsValue({ ...formValue });
+		if (formValue.parentId) {
+			const parentName = getParentNameById(formValue.parentId);
+			updateCompOptions(parentName);
+		}
+	}, [formValue, form, getParentNameById]);
+
+	return (
+		<Modal title={title} open={show} onOk={onOk} onCancel={onCancel}>
+			<Form initialValues={formValue} form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} layout="horizontal">
+				<Form.Item<Permission> label="Type" name="type" required>
+					<Radio.Group optionType="button" buttonStyle="solid">
+						<Radio value={PermissionType.CATALOGUE}>CATALOGUE</Radio>
+						<Radio value={PermissionType.MENU}>MENU</Radio>
+					</Radio.Group>
+				</Form.Item>
+
+				<Form.Item<Permission> label="Name" name="name" required>
+					<Input />
+				</Form.Item>
+
+				<Form.Item<Permission> label="Label" name="label" required tooltip="internationalization config">
+					<Input />
+				</Form.Item>
+
+				<Form.Item<Permission> label="Parent" name="parentId" required>
+					<TreeSelect
+						fieldNames={{
+							label: "name",
+							value: "id",
+							children: "children",
+						}}
+						allowClear
+						treeData={permissions}
+						onChange={(_value, labelList) => {
+							updateCompOptions(labelList[0] as string);
+						}}
+					/>
+				</Form.Item>
+
+				<Form.Item<Permission> label="Route" name="route" required>
+					<Input />
+				</Form.Item>
+
+				<Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.type !== currentValues.type}>
+					{({ getFieldValue }) => {
+						if (getFieldValue("type") === PermissionType.MENU) {
+							return (
+								<Form.Item<Permission>
+									label="Component"
+									name="component"
+									required={getFieldValue("type") === PermissionType.MENU}
+								>
+									<AutoComplete
+										options={compOptions}
+										filterOption={(input, option) =>
+											((option?.label || "") as string).toLowerCase().includes(input.toLowerCase())
+										}
+									/>
+								</Form.Item>
+							);
+						}
+						return null;
+					}}
+				</Form.Item>
+
+				<Form.Item<Permission> label="Icon" name="icon" tooltip="local icon should start with ic">
+					<Input />
+				</Form.Item>
+
+				<Form.Item<Permission> label="Hide" name="hide" tooltip="hide in menu">
+					<Radio.Group optionType="button" buttonStyle="solid">
+						<Radio value={false}>Show</Radio>
+						<Radio value>Hide</Radio>
+					</Radio.Group>
+				</Form.Item>
+
+				<Form.Item<Permission> label="Order" name="order">
+					<InputNumber style={{ width: "100%" }} />
+				</Form.Item>
+
+				<Form.Item<Permission> label="Status" name="status" required>
+					<Radio.Group optionType="button" buttonStyle="solid">
+						<Radio value={BasicStatus.ENABLE}> Enable </Radio>
+						<Radio value={BasicStatus.DISABLE}> Disable </Radio>
+					</Radio.Group>
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+}
diff --git a/apps/react-admin/src/pages/management/system/role/index.tsx b/apps/react-admin/src/pages/management/system/role/index.tsx
new file mode 100644
index 000000000..8acf389f4
--- /dev/null
+++ b/apps/react-admin/src/pages/management/system/role/index.tsx
@@ -0,0 +1,119 @@
+import { Button, Card, Popconfirm, Tag } from "antd";
+import Table, { type ColumnsType } from "antd/es/table";
+import { useState } from "react";
+
+import { ROLE_LIST } from "@/_mock/assets";
+import { IconButton, Iconify } from "@/components/icon";
+
+import { RoleModal, type RoleModalProps } from "./role-modal";
+
+import type { Role } from "#/entity";
+import { BasicStatus } from "#/enum";
+
+const ROLES: Role[] = ROLE_LIST;
+
+const DEFAULE_ROLE_VALUE: Role = {
+	id: "",
+	name: "",
+	label: "",
+	status: BasicStatus.ENABLE,
+	permission: [],
+};
+export default function RolePage() {
+	const [roleModalPros, setRoleModalProps] = useState<RoleModalProps>({
+		formValue: { ...DEFAULE_ROLE_VALUE },
+		title: "New",
+		show: false,
+		onOk: () => {
+			setRoleModalProps((prev) => ({ ...prev, show: false }));
+		},
+		onCancel: () => {
+			setRoleModalProps((prev) => ({ ...prev, show: false }));
+		},
+	});
+	const columns: ColumnsType<Role> = [
+		{
+			title: "Name",
+			dataIndex: "name",
+			width: 300,
+		},
+		{
+			title: "Label",
+			dataIndex: "label",
+		},
+		{ title: "Order", dataIndex: "order", width: 60 },
+		{
+			title: "Status",
+			dataIndex: "status",
+			align: "center",
+			width: 120,
+			render: (status) => (
+				<Tag color={status === BasicStatus.DISABLE ? "error" : "success"}>
+					{status === BasicStatus.DISABLE ? "Disable" : "Enable"}
+				</Tag>
+			),
+		},
+		{ title: "Desc", dataIndex: "desc" },
+		{
+			title: "Action",
+			key: "operation",
+			align: "center",
+			width: 100,
+			render: (_, record) => (
+				<div className="flex w-full justify-center text-gray">
+					<IconButton onClick={() => onEdit(record)}>
+						<Iconify icon="solar:pen-bold-duotone" size={18} />
+					</IconButton>
+					<Popconfirm title="Delete the Role" okText="Yes" cancelText="No" placement="left">
+						<IconButton>
+							<Iconify icon="mingcute:delete-2-fill" size={18} className="text-error" />
+						</IconButton>
+					</Popconfirm>
+				</div>
+			),
+		},
+	];
+
+	const onCreate = () => {
+		setRoleModalProps((prev) => ({
+			...prev,
+			show: true,
+			title: "Create New",
+			formValue: {
+				...prev.formValue,
+				...DEFAULE_ROLE_VALUE,
+			},
+		}));
+	};
+
+	const onEdit = (formValue: Role) => {
+		setRoleModalProps((prev) => ({
+			...prev,
+			show: true,
+			title: "Edit",
+			formValue,
+		}));
+	};
+
+	return (
+		<Card
+			title="Role List"
+			extra={
+				<Button type="primary" onClick={onCreate}>
+					New
+				</Button>
+			}
+		>
+			<Table
+				rowKey="id"
+				size="small"
+				scroll={{ x: "max-content" }}
+				pagination={false}
+				columns={columns}
+				dataSource={ROLES}
+			/>
+
+			<RoleModal {...roleModalPros} />
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/management/system/role/role-modal.tsx b/apps/react-admin/src/pages/management/system/role/role-modal.tsx
new file mode 100644
index 000000000..f0c985fd2
--- /dev/null
+++ b/apps/react-admin/src/pages/management/system/role/role-modal.tsx
@@ -0,0 +1,68 @@
+import { Form, Input, InputNumber, Modal, Radio, Tree } from "antd";
+import { useEffect } from "react";
+
+import { PERMISSION_LIST } from "@/_mock/assets";
+import { flattenTrees } from "@/utils/tree";
+
+import type { Permission, Role } from "#/entity";
+import { BasicStatus } from "#/enum";
+
+export type RoleModalProps = {
+	formValue: Role;
+	title: string;
+	show: boolean;
+	onOk: VoidFunction;
+	onCancel: VoidFunction;
+};
+const PERMISSIONS: Permission[] = PERMISSION_LIST;
+export function RoleModal({ title, show, formValue, onOk, onCancel }: RoleModalProps) {
+	const [form] = Form.useForm();
+
+	const flattenedPermissions = flattenTrees(formValue.permission);
+	const checkedKeys = flattenedPermissions.map((item) => item.id);
+	useEffect(() => {
+		form.setFieldsValue({ ...formValue });
+	}, [formValue, form]);
+
+	return (
+		<Modal title={title} open={show} onOk={onOk} onCancel={onCancel}>
+			<Form initialValues={formValue} form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} layout="horizontal">
+				<Form.Item<Role> label="Name" name="name" required>
+					<Input />
+				</Form.Item>
+
+				<Form.Item<Role> label="Label" name="label" required>
+					<Input />
+				</Form.Item>
+
+				<Form.Item<Role> label="Order" name="order">
+					<InputNumber style={{ width: "100%" }} />
+				</Form.Item>
+
+				<Form.Item<Role> label="Status" name="status" required>
+					<Radio.Group optionType="button" buttonStyle="solid">
+						<Radio value={BasicStatus.ENABLE}> Enable </Radio>
+						<Radio value={BasicStatus.DISABLE}> Disable </Radio>
+					</Radio.Group>
+				</Form.Item>
+
+				<Form.Item<Role> label="Desc" name="desc">
+					<Input.TextArea />
+				</Form.Item>
+
+				<Form.Item<Role> label="Permission" name="permission">
+					<Tree
+						checkable
+						checkedKeys={checkedKeys}
+						treeData={PERMISSIONS}
+						fieldNames={{
+							key: "id",
+							children: "children",
+							title: "name",
+						}}
+					/>
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+}
diff --git a/apps/react-admin/src/pages/management/system/user/detail.tsx b/apps/react-admin/src/pages/management/system/user/detail.tsx
new file mode 100644
index 000000000..fa5ca81e1
--- /dev/null
+++ b/apps/react-admin/src/pages/management/system/user/detail.tsx
@@ -0,0 +1,17 @@
+import { USER_LIST } from "@/_mock/assets";
+import Card from "@/components/card";
+import { useParams } from "@/router/hooks";
+
+import type { UserInfo } from "#/entity";
+
+const USERS: UserInfo[] = USER_LIST;
+
+export default function UserDetail() {
+	const { id } = useParams();
+	const user = USERS.find((user) => user.id === id);
+	return (
+		<Card>
+			<p>这是用户{user?.username}的详情页面</p>
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/management/system/user/index.tsx b/apps/react-admin/src/pages/management/system/user/index.tsx
new file mode 100644
index 000000000..8617bfec1
--- /dev/null
+++ b/apps/react-admin/src/pages/management/system/user/index.tsx
@@ -0,0 +1,98 @@
+import { Button, Card, Popconfirm, Tag } from "antd";
+import Table, { type ColumnsType } from "antd/es/table";
+
+import { USER_LIST } from "@/_mock/assets";
+import { IconButton, Iconify } from "@/components/icon";
+import { usePathname, useRouter } from "@/router/hooks";
+
+import type { Role, UserInfo } from "#/entity";
+import { BasicStatus } from "#/enum";
+
+const USERS: UserInfo[] = USER_LIST;
+
+export default function RolePage() {
+	const { push } = useRouter();
+	const pathname = usePathname();
+
+	const columns: ColumnsType<UserInfo> = [
+		{
+			title: "Name",
+			dataIndex: "name",
+			width: 300,
+			render: (_, record) => {
+				return (
+					<div className="flex">
+						<img alt="" src={record.avatar} className="h-10 w-10 rounded-full" />
+						<div className="ml-2 flex flex-col">
+							<span className="text-sm">{record.username}</span>
+							<span className="text-xs text-text-secondary">{record.email}</span>
+						</div>
+					</div>
+				);
+			},
+		},
+		{
+			title: "Role",
+			dataIndex: "role",
+			align: "center",
+			width: 120,
+			render: (role: Role) => <Tag color="cyan">{role.name}</Tag>,
+		},
+		{
+			title: "Status",
+			dataIndex: "status",
+			align: "center",
+			width: 120,
+			render: (status) => (
+				<Tag color={status === BasicStatus.DISABLE ? "error" : "success"}>
+					{status === BasicStatus.DISABLE ? "Disable" : "Enable"}
+				</Tag>
+			),
+		},
+		{
+			title: "Action",
+			key: "operation",
+			align: "center",
+			width: 100,
+			render: (_, record) => (
+				<div className="flex w-full justify-center text-gray-500">
+					<IconButton
+						onClick={() => {
+							push(`${pathname}/${record.id}`);
+						}}
+					>
+						<Iconify icon="mdi:card-account-details" size={18} />
+					</IconButton>
+					<IconButton onClick={() => {}}>
+						<Iconify icon="solar:pen-bold-duotone" size={18} />
+					</IconButton>
+					<Popconfirm title="Delete the User" okText="Yes" cancelText="No" placement="left">
+						<IconButton>
+							<Iconify icon="mingcute:delete-2-fill" size={18} className="text-error" />
+						</IconButton>
+					</Popconfirm>
+				</div>
+			),
+		},
+	];
+
+	return (
+		<Card
+			title="User List"
+			extra={
+				<Button type="primary" onClick={() => {}}>
+					New
+				</Button>
+			}
+		>
+			<Table
+				rowKey="id"
+				size="small"
+				scroll={{ x: "max-content" }}
+				pagination={false}
+				columns={columns}
+				dataSource={USERS}
+			/>
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/management/user/account/general-tab.tsx b/apps/react-admin/src/pages/management/user/account/general-tab.tsx
new file mode 100644
index 000000000..00a73ffe2
--- /dev/null
+++ b/apps/react-admin/src/pages/management/user/account/general-tab.tsx
@@ -0,0 +1,104 @@
+import { faker } from "@faker-js/faker";
+import { Button, Col, Form, Input, Row, Space, Switch } from "antd";
+
+import Card from "@/components/card";
+import { UploadAvatar } from "@/components/upload";
+import { useUserInfo } from "@/store/userStore";
+import { toast } from "sonner";
+
+type FieldType = {
+	name?: string;
+	email?: string;
+	phone?: string;
+	address?: string;
+	city?: string;
+	code?: string;
+	about: string;
+};
+export default function GeneralTab() {
+	const { avatar, username, email } = useUserInfo();
+	const initFormValues = {
+		name: username,
+		email,
+		phone: faker.phone.number(),
+		address: faker.location.county(),
+		city: faker.location.city(),
+		code: faker.location.zipCode(),
+		about: faker.lorem.paragraphs(),
+	};
+	const handleClick = () => {
+		toast.success("Update success!");
+	};
+	return (
+		<Row gutter={[16, 16]}>
+			<Col span={24} lg={8}>
+				<Card className="flex-col !px-6 !pb-10 !pt-20">
+					<UploadAvatar defaultAvatar={avatar} />
+
+					<Space className="py-6">
+						<div>Public Profile</div>
+						<Switch size="small" />
+					</Space>
+
+					<Button type="primary" danger>
+						Delete User
+					</Button>
+				</Card>
+			</Col>
+			<Col span={24} lg={16}>
+				<Card>
+					<Form layout="vertical" initialValues={initFormValues} labelCol={{ span: 8 }} className="w-full">
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item<FieldType> label="Username" name="name">
+									<Input />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item<FieldType> label="Email" name="email">
+									<Input />
+								</Form.Item>
+							</Col>
+						</Row>
+
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item<FieldType> label="Phone" name="phone">
+									<Input />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item<FieldType> label="Address" name="address">
+									<Input />
+								</Form.Item>
+							</Col>
+						</Row>
+
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item<FieldType> label="City" name="city">
+									<Input />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item<FieldType> label="Code" name="code">
+									<Input />
+								</Form.Item>
+							</Col>
+						</Row>
+
+						<Form.Item<FieldType> label="About" name="about">
+							<Input.TextArea />
+						</Form.Item>
+
+						<div className="flex w-full justify-end">
+							<Button type="primary" onClick={handleClick}>
+								Save Changes
+							</Button>
+						</div>
+					</Form>
+				</Card>
+			</Col>
+		</Row>
+	);
+}
diff --git a/apps/react-admin/src/pages/management/user/account/index.tsx b/apps/react-admin/src/pages/management/user/account/index.tsx
new file mode 100644
index 000000000..49e3d121b
--- /dev/null
+++ b/apps/react-admin/src/pages/management/user/account/index.tsx
@@ -0,0 +1,46 @@
+import { Tabs, type TabsProps } from "antd";
+
+import { Iconify } from "@/components/icon";
+
+import GeneralTab from "./general-tab";
+import NotificationsTab from "./notifications-tab";
+import SecurityTab from "./security-tab";
+
+function UserAccount() {
+	const items: TabsProps["items"] = [
+		{
+			key: "1",
+			label: (
+				<div className="flex items-center">
+					<Iconify icon="solar:user-id-bold" size={24} className="mr-2" />
+					<span>General</span>
+				</div>
+			),
+			children: <GeneralTab />,
+		},
+		{
+			key: "2",
+			label: (
+				<div className="flex items-center">
+					<Iconify icon="solar:bell-bing-bold-duotone" size={24} className="mr-2" />
+					<span>Notifications</span>
+				</div>
+			),
+			children: <NotificationsTab />,
+		},
+		{
+			key: "3",
+			label: (
+				<div className="flex items-center">
+					<Iconify icon="solar:key-minimalistic-square-3-bold-duotone" size={24} className="mr-2" />
+					<span>Security</span>
+				</div>
+			),
+			children: <SecurityTab />,
+		},
+	];
+
+	return <Tabs defaultActiveKey="1" items={items} />;
+}
+
+export default UserAccount;
diff --git a/apps/react-admin/src/pages/management/user/account/notifications-tab.tsx b/apps/react-admin/src/pages/management/user/account/notifications-tab.tsx
new file mode 100644
index 000000000..ebffd07fe
--- /dev/null
+++ b/apps/react-admin/src/pages/management/user/account/notifications-tab.tsx
@@ -0,0 +1,67 @@
+import { Button, Col, Row, Switch, Typography } from "antd";
+
+import Card from "@/components/card";
+import { toast } from "sonner";
+
+export default function NotificationsTab() {
+	const handleClick = () => {
+		toast.success("Update success!");
+	};
+	return (
+		<Card className="!h-auto flex-col">
+			<Row gutter={[16, 16]}>
+				<Col span={24} lg={8}>
+					<Typography.Title level={4}>Activity</Typography.Title>
+					<Typography.Text className="opacity-70 !text-text-secondary">
+						Donec mi odio, faucibus at, scelerisque quis
+					</Typography.Text>
+				</Col>
+				<Col span={24} lg={16}>
+					<div className="flex w-full flex-col gap-4 rounded-lg px-6 py-8 bg-bg-neutral">
+						<div className="flex w-full justify-between">
+							<div>Email me when someone answers on my form</div>
+							<Switch defaultChecked />
+						</div>
+						<div className="flex w-full justify-between">
+							<div>Email me when someone comments onmy article</div>
+							<Switch />
+						</div>
+						<div className="flex w-full justify-between">
+							<div>Email me hen someone follows me</div>
+							<Switch defaultChecked />
+						</div>
+					</div>
+				</Col>
+
+				<Col span={24} lg={8}>
+					<Typography.Title level={4}>Applications</Typography.Title>
+					<Typography.Text className="opacity-70 !text-text-secondary">
+						Donec mi odio, faucibus at, scelerisque quis
+					</Typography.Text>
+				</Col>
+				<Col span={24} lg={16}>
+					<div className="flex w-full flex-col gap-4 rounded-lg px-6 py-8 bg-bg-neutral">
+						<div className="flex w-full justify-between">
+							<div>News and announcements</div>
+							<Switch />
+						</div>
+						<div className="flex w-full justify-between">
+							<div>Weekly product updates</div>
+							<Switch defaultChecked />
+						</div>
+						<div className="flex w-full justify-between">
+							<div>Weekly blog digest</div>
+							<Switch />
+						</div>
+					</div>
+				</Col>
+
+				<div className="flex w-full justify-end">
+					<Button type="primary" onClick={handleClick}>
+						Save Changes
+					</Button>
+				</div>
+			</Row>
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/management/user/account/security-tab.tsx b/apps/react-admin/src/pages/management/user/account/security-tab.tsx
new file mode 100644
index 000000000..d9da57ac3
--- /dev/null
+++ b/apps/react-admin/src/pages/management/user/account/security-tab.tsx
@@ -0,0 +1,43 @@
+import { Button, Form, Input } from "antd";
+
+import Card from "@/components/card";
+import { toast } from "sonner";
+
+type FieldType = {
+	oldPassword?: string;
+	newPassword?: string;
+	confirmPassword?: string;
+};
+export default function SecurityTab() {
+	const initFormValues = {
+		oldPassword: "",
+		newPassword: "",
+		confirmPassword: "",
+	};
+	const handleClick = () => {
+		toast.success("Update success!");
+	};
+
+	return (
+		<Card className="!h-auto flex-col">
+			<Form layout="vertical" initialValues={initFormValues} labelCol={{ span: 8 }} className="w-full">
+				<Form.Item<FieldType> label="Old Password" name="oldPassword">
+					<Input.Password />
+				</Form.Item>
+
+				<Form.Item<FieldType> label="New Password" name="newPassword">
+					<Input.Password />
+				</Form.Item>
+
+				<Form.Item<FieldType> label="Confirm New Password" name="confirmPassword">
+					<Input.Password />
+				</Form.Item>
+			</Form>
+			<div className="flex w-full justify-end">
+				<Button type="primary" onClick={handleClick}>
+					Save Changes
+				</Button>
+			</div>
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/management/user/profile/connections-tab.tsx b/apps/react-admin/src/pages/management/user/profile/connections-tab.tsx
new file mode 100644
index 000000000..1b1013c37
--- /dev/null
+++ b/apps/react-admin/src/pages/management/user/profile/connections-tab.tsx
@@ -0,0 +1,113 @@
+import Card from "@/components/card";
+import { Iconify } from "@/components/icon";
+import { faker } from "@faker-js/faker";
+import { Button, Col, Row, Tag } from "antd";
+
+export default function ConnectionsTab() {
+	const items = [
+		{
+			avatar: faker.image.avatarGitHub(),
+			name: faker.person.fullName(),
+			title: "UI Designer",
+			tags: ["Figma", "Sketch"],
+			projects: "18",
+			tasks: "834",
+			connections: "129",
+			connected: true,
+		},
+		{
+			avatar: faker.image.avatarGitHub(),
+			name: faker.person.fullName(),
+			title: "Developer",
+			tags: ["Angular", "React"],
+			projects: "118",
+			tasks: "2.32k",
+			connections: "1.29k",
+			connected: false,
+		},
+		{
+			avatar: faker.image.avatarGitHub(),
+			name: faker.person.fullName(),
+			title: "Developer",
+			tags: ["Html", "React"],
+			projects: "32",
+			tasks: "1.25k",
+			connections: "890",
+			connected: false,
+		},
+		{
+			avatar: faker.image.avatarGitHub(),
+			name: faker.person.fullName(),
+			title: "UI/UX Designer",
+			tags: ["Figma", "Sketch", "Photoshop"],
+			projects: "86",
+			tasks: "12.4k",
+			connections: "890",
+			connected: false,
+		},
+		{
+			avatar: faker.image.avatarGitHub(),
+			name: faker.person.fullName(),
+			title: "Full Stack Developer",
+			tags: ["React", "Html", "Node.js"],
+			projects: "244",
+			tasks: "23.9k",
+			connections: "2.14k",
+			connected: true,
+		},
+		{
+			avatar: faker.image.avatarGitHub(),
+			name: faker.person.fullName(),
+			title: "SEO",
+			tags: ["Analysis", "Writing"],
+			projects: "32",
+			tasks: "1.28k",
+			connections: "1.27k",
+			connected: false,
+		},
+	];
+	return (
+		<Row gutter={[16, 16]}>
+			{items.map((item) => (
+				<Col span={24} md={12} lg={8} key={item.name}>
+					<Card className="w-full flex-col items-center">
+						<img alt="" src={item.avatar} className="h-20 w-20 rounded-full" />
+
+						<span className="mt-4 text-xl font-semibold opacity-60">{item.name}</span>
+						<span className="opacity-50">{item.title}</span>
+
+						<div className="mt-4 flex gap-4">
+							{item.tags.map((tag) => (
+								<Tag color={faker.color.rgb()} key={tag}>
+									{tag}
+								</Tag>
+							))}
+						</div>
+
+						<div className="mt-4 flex gap-4">
+							<div className="[ flex flex-col  items-center">
+								<span className="text-xl font-semibold">{item.projects}</span>
+								<span className="opacity-60">Projects</span>
+							</div>
+							<div className="[ flex flex-col  items-center">
+								<span className="text-xl font-semibold">{item.tasks}</span>
+								<span className="opacity-60">Tasks</span>
+							</div>
+							<div className="[ flex flex-col  items-center">
+								<span className="text-xl font-semibold">{item.connections}</span>
+								<span className="opacity-60">Tasks</span>
+							</div>
+						</div>
+
+						<div className="mt-4 flex">
+							<Button type={item.connected ? "primary" : "dashed"}>
+								<Iconify icon="ri:user-add-line" size={14} />
+								<span className="ml-2">CONNECTED</span>
+							</Button>
+						</div>
+					</Card>
+				</Col>
+			))}
+		</Row>
+	);
+}
diff --git a/apps/react-admin/src/pages/management/user/profile/index.tsx b/apps/react-admin/src/pages/management/user/profile/index.tsx
new file mode 100644
index 000000000..12bce649a
--- /dev/null
+++ b/apps/react-admin/src/pages/management/user/profile/index.tsx
@@ -0,0 +1,84 @@
+import CoverImage from "@/assets/images/cover/cover_4.jpg";
+import Card from "@/components/card";
+import { Iconify } from "@/components/icon";
+import { useUserInfo } from "@/store/userStore";
+import { themeVars } from "@/theme/theme.css";
+import { type CSSProperties, useState } from "react";
+import ConnectionsTab from "./connections-tab";
+import ProfileTab from "./profile-tab";
+import ProjectsTab from "./projects-tab";
+import TeamsTab from "./teams-tab";
+
+function UserProfile() {
+	const { avatar, username } = useUserInfo();
+	const [currentTabIndex, setcurrentTabIndex] = useState(0);
+
+	const bgStyle: CSSProperties = {
+		background: `url(${CoverImage})`,
+		backgroundSize: "cover",
+		backgroundPosition: "center",
+		backgroundRepeat: "no-repeat",
+	};
+
+	const tabs = [
+		{
+			icon: <Iconify icon="solar:user-id-bold" size={24} className="mr-2" />,
+			title: "Profile",
+			content: <ProfileTab />,
+		},
+		{
+			icon: <Iconify icon="mingcute:profile-fill" size={24} className="mr-2" />,
+			title: "Teams",
+			content: <TeamsTab />,
+		},
+		{
+			icon: <Iconify icon="mingcute:profile-fill" size={24} className="mr-2" />,
+			title: "Projects",
+			content: <ProjectsTab />,
+		},
+		{
+			icon: <Iconify icon="mingcute:profile-fill" size={24} className="mr-2" />,
+			title: "Connections",
+			content: <ConnectionsTab />,
+		},
+	];
+
+	return (
+		<>
+			<Card className="relative mb-6 h-[290px] flex-col rounded-2xl !p-0">
+				<div style={bgStyle} className="h-full w-full">
+					<div className="flex flex-col items-center justify-center pt-12 md:absolute md:bottom-6 md:left-6 md:flex-row md:pt-0">
+						<img src={avatar} className="h-16 w-16 rounded-full md:h-32 md:w-32" alt="" />
+						<div className="ml-6 mt-6 flex flex-col justify-center md:mt-0">
+							<span className="mb-2 text-2xl font-medium text-common-white">{username}</span>
+							<span className="text-center text-text-secondary md:text-left">TS FullStack</span>
+						</div>
+					</div>
+				</div>
+				<div className="z-10 min-h-[48px] w-full">
+					<div className="mx-6 flex h-full justify-center md:justify-end">
+						{tabs.map((tab, index) => (
+							<button
+								onClick={() => setcurrentTabIndex(index)}
+								key={tab.title}
+								type="button"
+								style={{
+									marginRight: index >= tabs.length - 1 ? "0px" : "40px",
+									opacity: index === currentTabIndex ? 1 : 0.5,
+									borderBottom:
+										index === currentTabIndex ? `2px solid ${themeVars.colors.palette.primary.default}` : "",
+								}}
+							>
+								{tab.icon}
+								{tab.title}
+							</button>
+						))}
+					</div>
+				</div>
+			</Card>
+			<div>{tabs[currentTabIndex].content}</div>
+		</>
+	);
+}
+
+export default UserProfile;
diff --git a/apps/react-admin/src/pages/management/user/profile/profile-tab.tsx b/apps/react-admin/src/pages/management/user/profile/profile-tab.tsx
new file mode 100644
index 000000000..2d9c9828f
--- /dev/null
+++ b/apps/react-admin/src/pages/management/user/profile/profile-tab.tsx
@@ -0,0 +1,375 @@
+import { faker } from "@faker-js/faker";
+import { Avatar, Col, Progress, Row, Space, Table, Tag, Timeline, Typography } from "antd";
+import type { ColumnsType } from "antd/es/table";
+
+import { fakeAvatars } from "@/_mock/utils";
+import Card from "@/components/card";
+import { IconButton, Iconify, SvgIcon } from "@/components/icon";
+import Scrollbar from "@/components/scrollbar";
+import { useUserInfo } from "@/store/userStore";
+import { themeVars } from "@/theme/theme.css";
+
+interface DataType {
+	key: string;
+	avatar: string;
+	name: string;
+	date: string;
+	leader: string;
+	team: string[];
+	status: number;
+}
+
+export default function ProfileTab() {
+	const { username } = useUserInfo();
+	const AboutItems = [
+		{
+			icon: <Iconify icon="fa-solid:user" size={18} />,
+			label: "Full Name",
+			val: username,
+		},
+		{
+			icon: <Iconify icon="eos-icons:role-binding" size={18} />,
+			label: "Role",
+			val: "Developer",
+		},
+		{
+			icon: <Iconify icon="tabler:location-filled" size={18} />,
+			label: "Country",
+			val: "USA",
+		},
+		{
+			icon: <Iconify icon="ion:language" size={18} />,
+			label: "Language",
+			val: "English",
+		},
+		{
+			icon: <Iconify icon="ph:phone-fill" size={18} />,
+			label: "Contact",
+			val: "(123)456-7890",
+		},
+		{
+			icon: <Iconify icon="ic:baseline-email" size={18} />,
+			label: "Email",
+			val: username,
+		},
+	];
+
+	const ConnectionsItems = [
+		{
+			avatar: faker.image.avatarGitHub(),
+			name: faker.person.fullName(),
+			connections: `${faker.number.int(100)} Connections`,
+			connected: faker.datatype.boolean(),
+		},
+
+		{
+			avatar: faker.image.avatarGitHub(),
+			name: faker.person.fullName(),
+			connections: `${faker.number.int(100)} Connections`,
+			connected: faker.datatype.boolean(),
+		},
+
+		{
+			avatar: faker.image.avatarGitHub(),
+			name: faker.person.fullName(),
+			connections: `${faker.number.int(100)} Connections`,
+			connected: faker.datatype.boolean(),
+		},
+
+		{
+			avatar: faker.image.avatarGitHub(),
+			name: faker.person.fullName(),
+			connections: `${faker.number.int(100)} Connections`,
+			connected: faker.datatype.boolean(),
+		},
+
+		{
+			avatar: faker.image.avatarGitHub(),
+			name: faker.person.fullName(),
+			connections: `${faker.number.int(100)} Connections`,
+			connected: faker.datatype.boolean(),
+		},
+	];
+
+	const TeamItems = [
+		{
+			avatar: <Iconify icon="devicon:react" size={36} />,
+			name: "React Developers",
+			members: `${faker.number.int(100)} Members`,
+			tag: <Tag color="warning">Developer</Tag>,
+		},
+		{
+			avatar: <Iconify icon="devicon:figma" size={36} />,
+			name: "UI Designer",
+			members: `${faker.number.int(100)} Members`,
+			tag: <Tag color="cyan">Designer</Tag>,
+		},
+		{
+			avatar: <Iconify icon="logos:jest" size={36} />,
+			name: "Test Team",
+			members: `${faker.number.int(100)} Members`,
+			tag: <Tag color="success">Test</Tag>,
+		},
+		{
+			avatar: <Iconify icon="logos:nestjs" size={36} />,
+			name: "Nest.js Developers",
+			members: `${faker.number.int(100)} Members`,
+			tag: <Tag color="warning">Developer</Tag>,
+		},
+
+		{
+			avatar: <Iconify icon="logos:twitter" size={36} />,
+			name: "Digital Marketing",
+			members: `${faker.number.int(100)} Members`,
+			tag: <Tag>Marketing</Tag>,
+		},
+	];
+
+	const fakeProjectItems = () => {
+		const arr: DataType[] = [];
+		for (let i = 0; i <= 25; i += 1) {
+			arr.push({
+				key: faker.string.uuid(),
+				avatar: faker.image.urlPicsumPhotos(),
+				name: faker.company.buzzPhrase(),
+				date: faker.date.past().toDateString(),
+				leader: faker.person.fullName(),
+				team: fakeAvatars(faker.number.int({ min: 2, max: 5 })),
+				status: faker.number.int({ min: 50, max: 99 }),
+			});
+		}
+		return arr;
+	};
+
+	const ProjectColumns: ColumnsType<DataType> = [
+		{
+			title: "NAME",
+			dataIndex: "name",
+			render: (_, record) => (
+				<div className="flex items-center">
+					<img src={record.avatar} alt="" className="h-8 w-8 rounded-full" />
+					<div className="ml-2 flex flex-col">
+						<span className="font-semibold">{record.name}</span>
+						<span className="text-xs opacity-50">{record.date}</span>
+					</div>
+				</div>
+			),
+		},
+		{
+			title: "LEADER",
+			dataIndex: "leader",
+			render: (val) => <span className="opacity-50">{val}</span>,
+		},
+		{
+			title: "TEAM",
+			dataIndex: "team",
+			render: (val: string[]) => (
+				<Avatar.Group>
+					{val.map((item) => (
+						<Avatar src={item} key={item} />
+					))}
+				</Avatar.Group>
+			),
+		},
+		{
+			title: "STATUS",
+			dataIndex: "status",
+			render: (val) => (
+				<Progress percent={val} strokeColor={themeVars.colors.palette.primary.default} trailColor="transparent" />
+			),
+		},
+		{
+			title: "ACTIONS",
+			dataIndex: "action",
+			render: () => (
+				<Space size="middle">
+					<IconButton>
+						<Iconify icon="fontisto:more-v-a" />
+					</IconButton>
+				</Space>
+			),
+		},
+	];
+
+	return (
+		<>
+			<Row gutter={[16, 16]}>
+				<Col span={24} md={12} lg={8}>
+					<Card className="flex-col">
+						<div className="flex w-full flex-col">
+							<Typography.Title level={5}>About</Typography.Title>
+							<Typography.Text>{faker.lorem.paragraph()}</Typography.Text>
+
+							<div className="mt-2 flex flex-col gap-4">
+								{AboutItems.map((item) => (
+									<div className="flex" key={item.label}>
+										<div className="mr-2">{item.icon}</div>
+										<div className="mr-2">{item.label}:</div>
+										<div className="opacity-50">{item.val}</div>
+									</div>
+								))}
+							</div>
+						</div>
+					</Card>
+				</Col>
+
+				<Col span={24} md={12} lg={16}>
+					<Card className="flex-col !items-start">
+						<Typography.Title level={5}>Activity Timeline</Typography.Title>
+						<Timeline
+							className="!mt-4 w-full"
+							items={[
+								{
+									color: themeVars.colors.palette.error.default,
+									children: (
+										<div className="flex flex-col">
+											<div className="flex items-center justify-between">
+												<Typography.Text strong>8 Invoices have been paid</Typography.Text>
+												<div className="opacity-50">Wednesday</div>
+											</div>
+											<Typography.Text type="secondary" className="text-xs">
+												Invoices have been paid to the company.
+											</Typography.Text>
+
+											<div className="mt-2 flex items-center gap-2">
+												<SvgIcon icon="ic_file_pdf" size={30} />
+												<span className="font-medium opacity-60">invoice.pdf</span>
+											</div>
+										</div>
+									),
+								},
+								{
+									color: themeVars.colors.palette.primary.default,
+									children: (
+										<div className="flex flex-col">
+											<div className="flex items-center justify-between">
+												<Typography.Text strong>Create a new project for client 😎</Typography.Text>
+												<div className="opacity-50">April, 18</div>
+											</div>
+											<Typography.Text type="secondary" className="text-xs">
+												Invoices have been paid to the company.
+											</Typography.Text>
+											<div className="mt-2 flex items-center gap-2">
+												<img alt="" src={faker.image.avatarGitHub()} className="h-8 w-8 rounded-full" />
+												<span className="font-medium opacity-60">{faker.person.fullName()} (client)</span>
+											</div>
+										</div>
+									),
+								},
+								{
+									color: themeVars.colors.palette.info.default,
+									children: (
+										<div className="flex flex-col">
+											<div className="flex items-center justify-between">
+												<Typography.Text strong>Order #37745 from September</Typography.Text>
+												<div className="opacity-50">January, 10</div>
+											</div>
+											<Typography.Text type="secondary" className="text-xs">
+												Invoices have been paid to the company.
+											</Typography.Text>
+										</div>
+									),
+								},
+								{
+									color: themeVars.colors.palette.warning.default,
+									children: (
+										<div className="flex flex-col">
+											<div className="flex items-center justify-between">
+												<Typography.Text strong>Public Meeting</Typography.Text>
+												<div className="opacity-50">September, 30</div>
+											</div>
+										</div>
+									),
+								},
+							]}
+						/>
+					</Card>
+				</Col>
+			</Row>
+			<Row gutter={[16, 16]} className="mt-4">
+				<Col span={24} md={12}>
+					<Card className="flex-col !items-start">
+						<div className="flex w-full items-center justify-between">
+							<Typography.Title level={5}>Connections</Typography.Title>
+							<IconButton>
+								<Iconify icon="fontisto:more-v-a" />
+							</IconButton>
+						</div>
+						<div className="mt-2 flex w-full flex-col gap-4">
+							{ConnectionsItems.map((item) => (
+								<div className="flex" key={item.name}>
+									<img alt="" src={item.avatar} className="h-10 w-10 flex-none rounded-full" />
+									<div className="ml-4 flex flex-1 flex-col">
+										<span className="font-semibold">{item.name}</span>
+										<span className="mt-1 text-xs opacity-50">{item.connections}</span>
+									</div>
+									<div
+										className="flex h-8 w-8 flex-none items-center justify-center rounded"
+										style={{
+											backgroundColor: item.connected ? themeVars.colors.palette.primary.default : "transparent",
+											border: item.connected ? "" : `1px solid ${themeVars.colors.palette.primary.default}`,
+										}}
+									>
+										<Iconify
+											icon="tdesign:user"
+											color={item.connected ? "#fff" : themeVars.colors.palette.primary.default}
+											size={20}
+										/>
+									</div>
+								</div>
+							))}
+						</div>
+
+						<div
+							className="mt-4 w-full text-center text-lg"
+							style={{ color: themeVars.colors.palette.primary.default }}
+						>
+							View all connections
+						</div>
+					</Card>
+				</Col>
+				<Col span={24} md={12}>
+					<Card className="flex-col !items-start">
+						<div className="flex w-full items-center justify-between">
+							<Typography.Title level={5}>Teams</Typography.Title>
+							<IconButton>
+								<Iconify icon="fontisto:more-v-a" />
+							</IconButton>
+						</div>
+						<div className="mt-2 flex w-full flex-col gap-4">
+							{TeamItems.map((item) => (
+								<div className="flex" key={item.name}>
+									{item.avatar}
+									<div className="ml-4 flex flex-1 flex-col">
+										<span className="font-semibold">{item.name}</span>
+										<span className="mt-1 text-xs opacity-50">{item.members}</span>
+									</div>
+									<div className="h-6">{item.tag}</div>
+								</div>
+							))}
+						</div>
+
+						<div
+							className="mt-4 w-full text-center text-lg"
+							style={{ color: themeVars.colors.palette.primary.default }}
+						>
+							View all members
+						</div>
+					</Card>
+				</Col>
+			</Row>
+			<Row gutter={[16, 16]} className="mt-4">
+				<Col span={24}>
+					<Card className="flex-col !items-start">
+						<Typography.Title level={5}>Projects</Typography.Title>
+						<div className="!mt-4 w-full">
+							<Scrollbar>
+								<Table rowSelection={{ type: "checkbox" }} columns={ProjectColumns} dataSource={fakeProjectItems()} />
+							</Scrollbar>
+						</div>
+					</Card>
+				</Col>
+			</Row>
+		</>
+	);
+}
diff --git a/apps/react-admin/src/pages/management/user/profile/projects-tab.tsx b/apps/react-admin/src/pages/management/user/profile/projects-tab.tsx
new file mode 100644
index 000000000..899e06f5c
--- /dev/null
+++ b/apps/react-admin/src/pages/management/user/profile/projects-tab.tsx
@@ -0,0 +1,140 @@
+import { faker } from "@faker-js/faker";
+import { Avatar, Col, Divider, Row, Tag } from "antd";
+import dayjs from "dayjs";
+
+import { fakeAvatars } from "@/_mock/utils";
+import Card from "@/components/card";
+import { IconButton, Iconify } from "@/components/icon";
+
+export default function ProjectsTab() {
+	const items = [
+		{
+			icon: <Iconify icon="logos:react" size={40} />,
+			name: "Admin Template",
+			client: faker.person.fullName(),
+			desc: "Time is our most valuable asset, that is why we want to help you save it by creating…",
+			members: fakeAvatars(15),
+			startDate: dayjs(faker.date.past({ years: 1 })),
+			deadline: dayjs(faker.date.future({ years: 1 })),
+			messages: 236,
+			allHours: "98/135",
+			allTasks: faker.number.int({ min: 60, max: 99 }),
+			closedTasks: faker.number.int({ min: 30, max: 60 }),
+		},
+		{
+			icon: <Iconify icon="logos:vue" size={40} />,
+			name: "App Design",
+			desc: "App design combines the user interface (UI) and user experience (UX).  ",
+			client: faker.person.fullName(),
+			members: fakeAvatars(27),
+			startDate: dayjs(faker.date.past({ years: 1 })),
+			deadline: dayjs(faker.date.future({ years: 1 })),
+			messages: 236,
+			allHours: "880/421",
+			allTasks: faker.number.int({ min: 60, max: 99 }),
+			closedTasks: faker.number.int({ min: 30, max: 60 }),
+		},
+		{
+			icon: <Iconify icon="logos:figma" size={40} />,
+			name: "Figma Dashboard",
+			desc: "Use this template to organize your design project. Some of the key features are… ",
+			client: faker.person.fullName(),
+			members: fakeAvatars(32),
+			startDate: dayjs(faker.date.past({ years: 1 })),
+			deadline: dayjs(faker.date.future({ years: 1 })),
+			messages: 236,
+			allHours: "1.2k/820",
+			allTasks: faker.number.int({ min: 60, max: 99 }),
+			closedTasks: faker.number.int({ min: 30, max: 60 }),
+		},
+		{
+			icon: <Iconify icon="logos:html-5" size={40} />,
+			name: "Create Website",
+			desc: "Your domain name should reflect your products or services so that your...  ",
+			client: faker.person.fullName(),
+			members: fakeAvatars(221),
+			startDate: dayjs(faker.date.past({ years: 1 })),
+			deadline: dayjs(faker.date.future({ years: 1 })),
+			messages: 236,
+			allHours: "142/420",
+			allTasks: faker.number.int({ min: 60, max: 99 }),
+			closedTasks: faker.number.int({ min: 30, max: 60 }),
+		},
+		{
+			icon: <Iconify icon="logos:adobe-xd" size={40} />,
+			name: "Logo Design",
+			desc: "Premium logo designs created by top logo designers. Create the branding of business.  ",
+			client: faker.person.fullName(),
+			members: fakeAvatars(125),
+			startDate: dayjs(faker.date.past({ years: 1 })),
+			deadline: dayjs(faker.date.future({ years: 1 })),
+			messages: 232,
+			allHours: "580/445",
+			allTasks: faker.number.int({ min: 60, max: 99 }),
+			closedTasks: faker.number.int({ min: 30, max: 60 }),
+		},
+	];
+	return (
+		<Row gutter={[16, 16]}>
+			{items.map((item) => (
+				<Col span={24} md={12} key={item.name}>
+					<Card className="w-full flex-col">
+						<header className="flex w-full items-center">
+							{item.icon}
+
+							<div className="flex flex-col">
+								<span className="ml-4 text-xl opacity-70">{item.name}</span>
+								<span className="text-md ml-4 opacity-50">Client: {item.client}</span>
+							</div>
+
+							<div className="ml-auto flex opacity-70">
+								<IconButton>
+									<Iconify icon="fontisto:more-v-a" size={18} />
+								</IconButton>
+							</div>
+						</header>
+
+						<main className="mt-4 w-full">
+							<div className="my-2 flex justify-between">
+								<span>
+									Start Date:
+									<span className="ml-2 opacity-50">{item.startDate.format("DD/MM/YYYY")}</span>
+								</span>
+
+								<span>
+									Deadline:
+									<span className="ml-2 opacity-50">{item.deadline.format("DD/MM/YYYY")}</span>
+								</span>
+							</div>
+							<span className="opacity-70">{item.desc}</span>
+						</main>
+
+						<Divider />
+
+						<footer className="flex w-full  flex-col items-center">
+							<div className="mb-4 flex w-full justify-between">
+								<span>
+									All Hours:
+									<span className="ml-2 opacity-50">{item.allHours}</span>
+								</span>
+
+								<Tag color="warning">{item.deadline.diff(dayjs(), "day")} days left</Tag>
+							</div>
+							<div className="flex w-full ">
+								<Avatar.Group max={{ count: 4 }}>
+									{item.members.map((memberAvatar) => (
+										<Avatar src={memberAvatar} key={memberAvatar} />
+									))}
+								</Avatar.Group>
+								<div className="ml-auto flex items-center opacity-50">
+									<Iconify icon="solar:chat-round-line-linear" size={24} />
+									<span className="ml-2">{item.messages}</span>
+								</div>
+							</div>
+						</footer>
+					</Card>
+				</Col>
+			))}
+		</Row>
+	);
+}
diff --git a/apps/react-admin/src/pages/management/user/profile/teams-tab.tsx b/apps/react-admin/src/pages/management/user/profile/teams-tab.tsx
new file mode 100644
index 000000000..c124aa9c0
--- /dev/null
+++ b/apps/react-admin/src/pages/management/user/profile/teams-tab.tsx
@@ -0,0 +1,84 @@
+import { faker } from "@faker-js/faker";
+import { Avatar, Col, Row, Tag } from "antd";
+
+import { fakeAvatars } from "@/_mock/utils";
+import Card from "@/components/card";
+import { IconButton, Iconify } from "@/components/icon";
+
+export default function TeamsTab() {
+	const items = [
+		{
+			icon: <Iconify icon="logos:react" size={40} />,
+			name: "React Developers",
+			desc: "We don’t make assumptions about the rest of your technology stack, so you can develop new features in React.",
+			members: fakeAvatars(25),
+			tags: ["React", "AntD"],
+		},
+		{
+			icon: <Iconify icon="logos:vue" size={40} />,
+			name: "Vue.js Dev Team",
+			desc: "The development of Vue and its ecosystem is guided by an international team, some of whom have chosen to be featured below.",
+			members: fakeAvatars(20),
+			tags: ["Vue.js", "Developer"],
+		},
+		{
+			icon: <Iconify icon="logos:figma" size={40} />,
+			name: "Figma Resources",
+			desc: "Explore, install, use, and remix thousands of plugins and files published to the Figma Community by designers and developers.",
+			members: fakeAvatars(45),
+			tags: ["UI/UX", "Figma"],
+		},
+		{
+			icon: <Iconify icon="logos:html-5" size={40} />,
+			name: "Only Beginners",
+			desc: "Learn the basics of how websites work, front-end vs back-end, and using a code editor. Learn basic HTML, CSS, and…",
+			members: fakeAvatars(50),
+			tags: ["CSS", "HTML"],
+		},
+		{
+			icon: <Iconify icon="logos:adobe-xd" size={40} />,
+			name: "Creative Designers",
+			desc: "A design or product team is more than just the people on it. A team includes the people, the roles they play.  ",
+			members: fakeAvatars(55),
+			tags: ["Sketch", "XD"],
+		},
+	];
+	return (
+		<Row gutter={[16, 16]}>
+			{items.map((item) => (
+				<Col span={24} md={12} key={item.name}>
+					<Card className="w-full flex-col">
+						<header className="flex w-full items-center">
+							{item.icon}
+							<span className="ml-4 text-xl opacity-70">{item.name}</span>
+
+							<div className="ml-auto flex opacity-70">
+								<IconButton>
+									<Iconify icon="solar:star-line-duotone" size={18} />
+								</IconButton>
+								<IconButton>
+									<Iconify icon="fontisto:more-v-a" size={18} />
+								</IconButton>
+							</div>
+						</header>
+						<main className="my-4 opacity-70">{item.desc}</main>
+						<footer className="flex w-full items-center">
+							<Avatar.Group max={{ count: 4 }}>
+								{item.members.map((memberAvatar) => (
+									<Avatar src={memberAvatar} key={memberAvatar} />
+								))}
+							</Avatar.Group>
+							<div className="ml-auto flex items-center">
+								{item.tags.map((tag) => (
+									<Tag color={faker.color.rgb()} key={tag}>
+										{tag}
+									</Tag>
+								))}
+							</div>
+						</footer>
+					</Card>
+				</Col>
+			))}
+		</Row>
+	);
+}
diff --git a/apps/react-admin/src/pages/menu-level/menu-level-1a/index.tsx b/apps/react-admin/src/pages/menu-level/menu-level-1a/index.tsx
new file mode 100644
index 000000000..805beeeba
--- /dev/null
+++ b/apps/react-admin/src/pages/menu-level/menu-level-1a/index.tsx
@@ -0,0 +1,5 @@
+import { Typography } from "antd";
+
+export default function MenuLevel() {
+	return <Typography.Title>Menu Level: 1a</Typography.Title>;
+}
diff --git a/apps/react-admin/src/pages/menu-level/menu-level-1b/menu-level-2a/index.tsx b/apps/react-admin/src/pages/menu-level/menu-level-1b/menu-level-2a/index.tsx
new file mode 100644
index 000000000..1311584bf
--- /dev/null
+++ b/apps/react-admin/src/pages/menu-level/menu-level-1b/menu-level-2a/index.tsx
@@ -0,0 +1,5 @@
+import { Typography } from "antd";
+
+export default function MenuLevel() {
+	return <Typography.Title>Menu Level: 2a</Typography.Title>;
+}
diff --git a/apps/react-admin/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3a/index.tsx b/apps/react-admin/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3a/index.tsx
new file mode 100644
index 000000000..53ca0b83d
--- /dev/null
+++ b/apps/react-admin/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3a/index.tsx
@@ -0,0 +1,5 @@
+import { Typography } from "antd";
+
+export default function MenuLevel() {
+	return <Typography.Title>Menu Level: 3a</Typography.Title>;
+}
diff --git a/apps/react-admin/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3b/index.tsx b/apps/react-admin/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3b/index.tsx
new file mode 100644
index 000000000..724a5bec5
--- /dev/null
+++ b/apps/react-admin/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3b/index.tsx
@@ -0,0 +1,5 @@
+import { Typography } from "antd";
+
+export default function MenuLevel() {
+	return <Typography.Title>Menu Level: 3b</Typography.Title>;
+}
diff --git a/apps/react-admin/src/pages/openiddict/applications/application-modal.tsx b/apps/react-admin/src/pages/openiddict/applications/application-modal.tsx
new file mode 100644
index 000000000..c288878cd
--- /dev/null
+++ b/apps/react-admin/src/pages/openiddict/applications/application-modal.tsx
@@ -0,0 +1,488 @@
+import { useEffect, useState } from "react";
+import { Form, Input, Modal, Select, Tabs, InputNumber, Checkbox, Transfer, Dropdown } from "antd";
+import { DownOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import type { OpenIddictApplicationDto, OpenIddictApplicationUpdateDto } from "#/openiddict/applications";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createApi, getApi, updateApi } from "@/api/openiddict/applications";
+import { discoveryApi } from "@/api/openiddict/open-id";
+import type { DisplayNameInfo } from "@/components/abp/display-names/types";
+import type { PropertyInfo } from "@/components/abp/properties/types";
+import DisplayNameTable from "@/components/abp/display-names/display-name-table";
+import PropertyTable from "@/components/abp/properties/property-table";
+import UriTable from "./uri-table";
+import { toast } from "sonner";
+import { mergeDeepRight } from "ramda";
+import { CircleLoading } from "@/components/loading";
+
+interface Props {
+	visible: boolean;
+	applicationId?: string;
+	onClose: () => void;
+	onChange: (data: OpenIddictApplicationDto) => void;
+}
+
+type TabKeys = "basic" | "displayName" | "endpoint" | "tokens" | "scope" | "authorize" | "props";
+
+const defaultModel = {
+	clientId: "",
+	applicationType: "web",
+	clientType: "public",
+	consentType: "explicit",
+	requirements: {
+		features: {
+			requirePkce: false,
+		},
+	},
+	extraProperties: {},
+	settings: {
+		tokenLifetime: {
+			accessToken: 3600,
+			authorizationCode: 600,
+			identityToken: 3600,
+			refreshToken: 86400,
+			deviceCode: 600,
+			userCode: 600,
+		},
+	},
+};
+
+const clientTypes = [
+	{ label: "public", value: "public" },
+	{ label: "confidential", value: "confidential" },
+];
+
+const applicationTypes = [
+	{ label: "Web", value: "web" },
+	{ label: "Native", value: "native" },
+];
+
+const consentTypes = [
+	{ label: "explicit", value: "explicit" },
+	{ label: "external", value: "external" },
+	{ label: "implicit", value: "implicit" },
+	{ label: "systematic", value: "systematic" },
+];
+
+const endpoints = [
+	{ label: "authorization", value: "authorization" },
+	{ label: "token", value: "token" },
+	{ label: "logout", value: "logout" },
+	{ label: "device", value: "device" },
+	{ label: "revocation", value: "revocation" },
+	{ label: "introspection", value: "introspection" },
+];
+
+// Token Tabs 相关表单配置
+const tokenFormItems = [
+	{
+		name: ["settings", "tokenLifetime", "accessToken"],
+		label: "AbpOpenIddict.DisplayName:AccessTokenLifetime",
+		extra: "AbpOpenIddict.Description:AccessTokenLifetime",
+		min: 300,
+	},
+	{
+		name: ["settings", "tokenLifetime", "authorizationCode"],
+		label: "AbpOpenIddict.DisplayName:AuthorizationCodeLifetime",
+		extra: "AbpOpenIddict.Description:AuthorizationCodeLifetime",
+		min: 300,
+	},
+	{
+		name: ["settings", "tokenLifetime", "identityToken"],
+		label: "AbpOpenIddict.DisplayName:IdentityTokenLifetime",
+		extra: "AbpOpenIddict.Description:IdentityTokenLifetime",
+		min: 300,
+	},
+	{
+		name: ["settings", "tokenLifetime", "refreshToken"],
+		label: "AbpOpenIddict.DisplayName:RefreshTokenLifetime",
+		extra: "AbpOpenIddict.Description:RefreshTokenLifetime",
+		min: 300,
+	},
+	{
+		name: ["settings", "tokenLifetime", "deviceCode"],
+		label: "AbpOpenIddict.DisplayName:DeviceCodeLifetime",
+		extra: "AbpOpenIddict.Description:DeviceCodeLifetime",
+		min: 300,
+	},
+	{
+		name: ["settings", "tokenLifetime", "userCode"],
+		label: "AbpOpenIddict.DisplayName:UserCodeLifetime",
+		extra: "AbpOpenIddict.Description:UserCodeLifetime",
+		min: 300,
+	},
+];
+
+const ApplicationModal: React.FC<Props> = ({ visible, applicationId, onClose, onChange }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+	const queryClient = useQueryClient();
+	const [activeTab, setActiveTab] = useState<TabKeys>("basic");
+	const [formModel, setFormModel] = useState<OpenIddictApplicationUpdateDto>(defaultModel);
+	const [uriState, setUriState] = useState({
+		component: "RedirectUris",
+	});
+
+	// Fetch OpenID configuration
+	const { data: openIdConfig } = useQuery({
+		queryKey: ["openid-configuration"],
+		queryFn: discoveryApi,
+		enabled: visible,
+	});
+
+	const { data: applicationData, isLoading } = useQuery({
+		queryKey: ["applicationId", applicationId],
+		queryFn: () => {
+			if (!applicationId) {
+				return Promise.reject(new Error("applicationId is undefined"));
+			}
+			return getApi(applicationId);
+		},
+		enabled: !!applicationId && visible,
+	});
+
+	useEffect(() => {
+		if (applicationData) {
+			if (applicationData.id === applicationId) {
+				setFormModel(applicationData); //将OpenIddictApplicationDto 转到 OpenIddictApplicationUpdateDto,注意这里的特殊，formModal的展示值和最后的请求值数据结构非常相似
+				form.setFieldsValue(applicationData);
+			}
+		}
+	}, [applicationData]);
+
+	useEffect(() => {
+		if (visible) {
+			setActiveTab("basic");
+		}
+	}, [visible]);
+
+	// Create/Update mutations
+	const { mutateAsync: createApplication } = useMutation({
+		mutationFn: createApi,
+		onSuccess: (data) => {
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			onChange(data);
+			onClose();
+		},
+	});
+
+	const { mutateAsync: updateApplication } = useMutation({
+		mutationFn: ({ id, input }: { id: string; input: OpenIddictApplicationUpdateDto }) => updateApi(id, input),
+		onSuccess: (data) => {
+			queryClient.invalidateQueries({ queryKey: ["applicationId", applicationId] });
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			onChange(data);
+			onClose();
+		},
+	});
+
+	const handleDisplayNameChange = (displayName: DisplayNameInfo) => {
+		setFormModel((prev) => ({
+			...prev,
+			displayNames: {
+				...prev.displayNames,
+				[displayName.culture]: displayName.displayName,
+			},
+		}));
+	};
+
+	const handleDisplayNameDelete = (displayName: DisplayNameInfo) => {
+		setFormModel((prev) => {
+			const newDisplayNames = { ...prev.displayNames };
+			delete newDisplayNames[displayName.culture];
+			return {
+				...prev,
+				displayNames: newDisplayNames,
+			};
+		});
+	};
+
+	const handleUriChange = (uri: string) => {
+		const fieldName = uriState.component === "RedirectUris" ? "redirectUris" : "postLogoutRedirectUris";
+
+		setFormModel((prev) => ({
+			...prev,
+			[fieldName]: [...(prev[fieldName] || []), uri],
+		}));
+	};
+
+	const handleUriDelete = (uri: string) => {
+		const fieldName = uriState.component === "RedirectUris" ? "redirectUris" : "postLogoutRedirectUris";
+
+		setFormModel((prev) => ({
+			...prev,
+			[fieldName]: (prev[fieldName] || []).filter((u) => u !== uri),
+		}));
+	};
+
+	const handlePropertyChange = (prop: PropertyInfo) => {
+		setFormModel((prev) => ({
+			...prev,
+			properties: {
+				...prev.properties,
+				[prop.key]: prop.value,
+			},
+		}));
+	};
+
+	const handlePropertyDelete = (prop: PropertyInfo) => {
+		setFormModel((prev) => {
+			const newProperties = { ...prev.properties };
+			delete newProperties[prop.key];
+			return {
+				...prev,
+				properties: newProperties,
+			};
+		});
+	};
+
+	const handleSubmit = async () => {
+		try {
+			await form.validateFields();
+			if (applicationId) {
+				await updateApplication({ id: applicationId, input: formModel });
+			} else {
+				await createApplication(formModel);
+			}
+		} catch (error) {
+			console.error("Validation failed:", error);
+		}
+	};
+
+	return (
+		<Modal
+			open={visible}
+			title={
+				applicationId
+					? `${$t("AbpOpenIddict.Applications")} - ${formModel.clientId || ""}`
+					: $t("AbpOpenIddict.Applications:AddNew")
+			}
+			onCancel={() => {
+				onClose();
+				form.resetFields();
+				setFormModel(defaultModel);
+				form.setFieldsValue(defaultModel); //两个同时设置，保持没有applicationId时，handleSubmit调用createApplication时的表单状态和请求数据一致
+			}}
+			onOk={handleSubmit}
+			onClose={() => {
+				onClose();
+				form.resetFields();
+				setFormModel(defaultModel);
+				form.resetFields();
+			}}
+			width="50%"
+			destroyOnClose
+		>
+			{!!applicationId && visible && isLoading ? (
+				<CircleLoading />
+			) : (
+				<Form
+					form={form}
+					layout="horizontal"
+					labelCol={{ span: 6 }}
+					wrapperCol={{ span: 18 }}
+					onValuesChange={(changedValues) => {
+						setFormModel((prevModel) => {
+							return mergeDeepRight(prevModel, changedValues);
+						});
+					}}
+				>
+					<Tabs activeKey={activeTab} onChange={(key) => setActiveTab(key as TabKeys)}>
+						{/* Basic Info Tab */}
+						<Tabs.TabPane key="basic" tab={$t("AbpOpenIddict.BasicInfo")}>
+							<Form.Item
+								label={$t("AbpOpenIddict.DisplayName:ApplicationType")}
+								name="applicationType"
+								rules={[{ required: true }]}
+							>
+								<Select options={applicationTypes} />
+							</Form.Item>
+							<Form.Item label={$t("AbpOpenIddict.DisplayName:ClientId")} name="clientId" rules={[{ required: true }]}>
+								<Input autoComplete="off" />
+							</Form.Item>
+							<Form.Item label={$t("AbpOpenIddict.DisplayName:ClientType")} name="clientType">
+								<Select options={clientTypes} />
+							</Form.Item>
+							{!applicationId && (
+								<Form.Item
+									label={$t("AbpOpenIddict.DisplayName:ClientSecret")}
+									name="clientSecret"
+									rules={[{ required: form.getFieldValue("clientType") === "confidential" }]}
+								>
+									<Input.Password autoComplete="off" />
+								</Form.Item>
+							)}
+							<Form.Item label={$t("AbpOpenIddict.DisplayName:ClientUri")} name="clientUri">
+								<Input />
+							</Form.Item>
+							<Form.Item label={$t("AbpOpenIddict.DisplayName:LogoUri")} name="logoUri">
+								<Input autoComplete="off" />
+							</Form.Item>
+							<Form.Item
+								label={$t("AbpOpenIddict.DisplayName:ConsentType")}
+								name="consentType"
+								labelCol={{ span: 4 }}
+								wrapperCol={{ span: 20 }}
+								initialValue={formModel.consentType}
+							>
+								<Select options={consentTypes} />
+							</Form.Item>
+						</Tabs.TabPane>
+
+						{/* Display Names Tab */}
+						<Tabs.TabPane key="displayName" tab={$t("AbpOpenIddict.DisplayNames")}>
+							<Form.Item
+								label={$t("AbpOpenIddict.DisplayName:DefaultDisplayName")}
+								name="displayName"
+								initialValue={formModel.displayName}
+							>
+								<Input autoComplete="off" />
+							</Form.Item>
+
+							<DisplayNameTable
+								data={formModel.displayNames}
+								onChange={handleDisplayNameChange}
+								onDelete={handleDisplayNameDelete}
+							/>
+						</Tabs.TabPane>
+
+						{/* Endpoints Tab */}
+						<Tabs.TabPane
+							key="endpoint"
+							tab={
+								<Dropdown
+									menu={{
+										onClick: ({ key }) => {
+											setActiveTab("endpoint");
+											setUriState({
+												component: key as string,
+											});
+										},
+										items: [
+											{
+												key: "RedirectUris",
+												label: $t("AbpOpenIddict.DisplayName:RedirectUris"),
+											},
+											{
+												key: "PostLogoutRedirectUris",
+												label: $t("AbpOpenIddict.DisplayName:PostLogoutRedirectUris"),
+											},
+										].filter(Boolean),
+									}}
+								>
+									<span>
+										{$t("AbpOpenIddict.Endpoints")} <DownOutlined />
+									</span>
+								</Dropdown>
+							}
+						>
+							<UriTable
+								title={$t(
+									uriState.component === "RedirectUris"
+										? "AbpOpenIddict.DisplayName:RedirectUris"
+										: "AbpOpenIddict.DisplayName:PostLogoutRedirectUris",
+								)}
+								uris={uriState.component === "RedirectUris" ? formModel.redirectUris : formModel.postLogoutRedirectUris}
+								onChange={handleUriChange}
+								onDelete={handleUriDelete}
+							/>
+						</Tabs.TabPane>
+
+						{/* Tokens Tab  //！！！注意这个name的数组语法赋值*/}
+						<Tabs.TabPane key="tokens" tab={$t("AbpOpenIddict.Tokens")}>
+							{tokenFormItems.map((item) => (
+								<Form.Item key={item.name.join(".")} label={$t(item.label)} name={item.name} extra={$t(item.extra)}>
+									<InputNumber className="w-full" min={item.min} />
+								</Form.Item>
+							))}
+						</Tabs.TabPane>
+
+						{/* Scopes Tab */}
+						<Tabs.TabPane key="scope" tab={$t("AbpOpenIddict.Scopes")}>
+							<Transfer
+								dataSource={openIdConfig?.scopes_supported?.map((scope) => ({
+									key: scope,
+									title: scope,
+								}))}
+								targetKeys={formModel.scopes || []}
+								onChange={(targetKeys) => {
+									const stringTargetKeys = targetKeys.map(String); // 转换成 string[]
+									setFormModel((prev) => ({
+										...prev,
+										scopes: stringTargetKeys,
+									}));
+								}}
+								render={(item) => item.title}
+								listStyle={{
+									width: "47%",
+									height: "338px",
+								}}
+								titles={[$t("AbpOpenIddict.Assigned"), $t("AbpOpenIddict.Available")]}
+							/>
+						</Tabs.TabPane>
+
+						{/* Authorization Tab */}
+						<Tabs.TabPane key="authorize" tab={$t("AbpOpenIddict.Authorizations")}>
+							<Form.Item
+								label={$t("AbpOpenIddict.Requirements:PKCE")}
+								name={["requirements", "features", "requirePkce"]} //antd数组赋值语法
+								valuePropName="checked"
+							>
+								<Checkbox checked={formModel.requirements?.features.requirePkce}>
+									{$t("AbpOpenIddict.Requirements:PKCE")}
+								</Checkbox>
+							</Form.Item>
+							<Form.Item
+								label={$t("AbpOpenIddict.DisplayName:Endpoints")}
+								name="endpoints"
+								labelCol={{ span: 4 }}
+								wrapperCol={{ span: 20 }}
+							>
+								<Select mode="tags" options={endpoints} />
+							</Form.Item>
+							<Form.Item
+								label={$t("AbpOpenIddict.DisplayName:GrantTypes")}
+								name="grantTypes"
+								labelCol={{ span: 4 }}
+								wrapperCol={{ span: 20 }}
+							>
+								<Select
+									mode="tags"
+									options={openIdConfig?.grant_types_supported?.map((type) => ({
+										label: type,
+										value: type,
+									}))}
+								/>
+							</Form.Item>
+							<Form.Item
+								label={$t("AbpOpenIddict.DisplayName:ResponseTypes")}
+								name="responseTypes"
+								labelCol={{ span: 4 }}
+								wrapperCol={{ span: 20 }}
+							>
+								<Select
+									mode="tags"
+									options={openIdConfig?.response_types_supported?.map((type) => ({
+										label: type,
+										value: type,
+									}))}
+								/>
+							</Form.Item>
+						</Tabs.TabPane>
+
+						{/* Properties Tab */}
+						<Tabs.TabPane key="props" tab={$t("AbpOpenIddict.DisplayName:Properties")}>
+							<PropertyTable //openiddict的自带Properties,不是abp的ExtraProperties,但还是用这个组件
+								data={formModel.properties}
+								onChange={handlePropertyChange}
+								onDelete={handlePropertyDelete}
+							/>
+						</Tabs.TabPane>
+					</Tabs>
+				</Form>
+			)}
+		</Modal>
+	);
+};
+
+export default ApplicationModal;
diff --git a/apps/react-admin/src/pages/openiddict/applications/application-secret-modal.tsx b/apps/react-admin/src/pages/openiddict/applications/application-secret-modal.tsx
new file mode 100644
index 000000000..5ef76d90a
--- /dev/null
+++ b/apps/react-admin/src/pages/openiddict/applications/application-secret-modal.tsx
@@ -0,0 +1,89 @@
+import { Form, Input, Modal } from "antd";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { OpenIddictApplicationDto } from "#/openiddict/applications";
+import { getApi, updateApi } from "@/api/openiddict/applications";
+import { toast } from "sonner";
+
+interface ApplicationSecretModalProps {
+	visible: boolean;
+	applicationId?: string;
+	clientId?: string;
+	onClose: () => void;
+	onChange: (data: OpenIddictApplicationDto) => void;
+}
+
+const ApplicationSecretModal: React.FC<ApplicationSecretModalProps> = ({
+	visible,
+	applicationId,
+	clientId,
+	onClose,
+	onChange,
+}) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+
+	// 获取应用详情
+	const { data: applicationData, isLoading: isLoadingApp } = useQuery({
+		queryKey: ["application", applicationId],
+		queryFn: () => {
+			if (!applicationId) {
+				return Promise.reject(new Error("applicationId is undefined"));
+			}
+			return getApi(applicationId);
+		},
+		enabled: visible && !!applicationId,
+	});
+
+	// 更新应用密钥
+	const { mutateAsync: updateSecret, isPending: isUpdating } = useMutation({
+		mutationFn: (clientSecret: string) => {
+			if (!applicationData) {
+				return Promise.reject(new Error("applicationData is undefined"));
+			}
+			return updateApi(applicationData.id, {
+				...applicationData,
+				clientSecret,
+			});
+		},
+		onSuccess: (data) => {
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			onChange(data);
+			onClose();
+			form.resetFields();
+		},
+	});
+
+	const handleOk = async () => {
+		try {
+			const values = await form.validateFields();
+			await updateSecret(values.clientSecret);
+		} catch (error) {
+			console.error("Validation failed:", error);
+		}
+	};
+
+	return (
+		<Modal
+			open={visible}
+			title={`${$t("AbpOpenIddict.ManageSecret")}${clientId ? ` - ${clientId}` : ""}`}
+			onCancel={onClose}
+			onOk={handleOk}
+			confirmLoading={isUpdating || isLoadingApp}
+			width="50%"
+			destroyOnClose
+		>
+			<Form form={form} layout="vertical">
+				<Form.Item
+					label={$t("AbpOpenIddict.DisplayName:ClientSecret")}
+					name="clientSecret"
+					rules={[{ required: true }]}
+				>
+					<Input.Password className="w-full" />
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+};
+
+export default ApplicationSecretModal;
diff --git a/apps/react-admin/src/pages/openiddict/applications/application-table.tsx b/apps/react-admin/src/pages/openiddict/applications/application-table.tsx
new file mode 100644
index 000000000..edd6739fd
--- /dev/null
+++ b/apps/react-admin/src/pages/openiddict/applications/application-table.tsx
@@ -0,0 +1,291 @@
+import { useRef, useState } from "react";
+import { Button, Card, Dropdown, Modal, Space } from "antd";
+import { DeleteOutlined, EditOutlined, EllipsisOutlined, PlusOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { ProTable, type ActionType, type ProColumns } from "@ant-design/pro-table";
+import type { OpenIddictApplicationDto } from "#/openiddict/applications";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import { ApplicationsPermissions } from "@/constants/openiddict/permissions";
+import { AuditLogPermissions } from "@/constants/management/auditing/permissions";
+import { Iconify } from "@/components/icon";
+import { deleteApi, getPagedListApi } from "@/api/openiddict/applications";
+import { useFeatures } from "@/hooks/abp/use-abp-feature";
+import { toast } from "sonner";
+import ApplicationModal from "./application-modal";
+import ApplicationSecretModal from "./application-secret-modal";
+import PermissionModal from "@/components/abp/permissions/permission-modal";
+import { EntityChangeDrawer } from "@/components/abp/auditing/entity-change-drawer";
+
+const ApplicationTable: React.FC = () => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const queryClient = useQueryClient();
+	const { isEnabled } = useFeatures();
+	const [modal, contextHolder] = Modal.useModal();
+
+	// Modal visibility states
+	const [modalVisible, setModalVisible] = useState(false);
+	const [secretModalVisible, setSecretModalVisible] = useState(false);
+	const [permissionModalVisible, setPermissionModalVisible] = useState(false);
+	const [entityChangeDrawerVisible, setEntityChangeDrawerVisible] = useState(false);
+
+	// Selected application state
+	const [selectedApp, setSelectedApp] = useState<OpenIddictApplicationDto>();
+
+	// Delete mutation
+	const { mutateAsync: deleteApplication } = useMutation({
+		mutationFn: deleteApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			actionRef.current?.reload();
+		},
+	});
+
+	const handleMenuClick = (key: string, app: OpenIddictApplicationDto) => {
+		setSelectedApp(app);
+		switch (key) {
+			case "secret":
+				setSecretModalVisible(true);
+				break;
+			case "permissions":
+				setPermissionModalVisible(true);
+				break;
+			case "entity-changes":
+				setEntityChangeDrawerVisible(true);
+				break;
+		}
+	};
+
+	const handleDelete = (app: OpenIddictApplicationDto) => {
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpUi.ItemWillBeDeletedMessageWithFormat", { 0: app.clientId }),
+			onOk: () => deleteApplication(app.id),
+		});
+	};
+
+	const columns: ProColumns<OpenIddictApplicationDto>[] = [
+		{
+			title: $t("AbpUi.Search"),
+			dataIndex: "filter",
+			hideInTable: true,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:ClientId"),
+			dataIndex: "clientId",
+			width: 150,
+			align: "left",
+			hideInSearch: true,
+			minWidth: 150,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:DisplayName"),
+			dataIndex: "displayName",
+			width: 150,
+			ellipsis: true,
+			align: "left",
+			hideInSearch: true,
+			minWidth: 150,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:ConsentType"),
+			dataIndex: "consentType",
+			width: 200,
+			hideInSearch: true,
+			align: "center",
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:ClientType"),
+			dataIndex: "clientType",
+			width: 120,
+			hideInSearch: true,
+			align: "center",
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:ApplicationType"),
+			dataIndex: "applicationType",
+			width: 150,
+			hideInSearch: true,
+			align: "center",
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:ClientUri"),
+			dataIndex: "clientUri",
+			width: 150,
+			hideInSearch: true,
+			align: "left",
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:LogoUri"),
+			dataIndex: "logoUri",
+			width: 120,
+			hideInSearch: true,
+			align: "left",
+		},
+		{
+			title: $t("AbpUi.Actions"),
+			width: 220,
+			fixed: "right",
+			hideInSearch: true,
+			render: (_, record) => (
+				<Space split>
+					{hasAccessByCodes([ApplicationsPermissions.Update]) && (
+						<Button
+							type="link"
+							icon={<EditOutlined />}
+							onClick={() => {
+								setSelectedApp(record);
+								setModalVisible(true);
+							}}
+						>
+							{$t("AbpUi.Edit")}
+						</Button>
+					)}
+					{hasAccessByCodes([ApplicationsPermissions.Delete]) && (
+						<Button type="link" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+							{$t("AbpUi.Delete")}
+						</Button>
+					)}
+					<Dropdown
+						menu={{
+							items: getDropdownMenuItems(record),
+							onClick: ({ key }) => handleMenuClick(key, record),
+						}}
+					>
+						<Button type="link" icon={<EllipsisOutlined />} />
+					</Dropdown>
+				</Space>
+			),
+		},
+	];
+
+	const getDropdownMenuItems = (record: OpenIddictApplicationDto) => {
+		const items = [];
+
+		if (record.clientType === "confidential" && hasAccessByCodes([ApplicationsPermissions.ManageSecret])) {
+			items.push({
+				key: "secret",
+				icon: <Iconify icon="codicon:gist-secret" />,
+				label: $t("AbpOpenIddict.GenerateSecret"),
+			});
+		}
+
+		if (hasAccessByCodes([ApplicationsPermissions.ManagePermissions])) {
+			items.push({
+				key: "permissions",
+				icon: <Iconify icon="icon-park-outline:permissions" />,
+				label: $t("AbpOpenIddict.ManagePermissions"),
+			});
+		}
+
+		if (isEnabled("AbpAuditing.Logging.AuditLog") && hasAccessByCodes([AuditLogPermissions.Default])) {
+			items.push({
+				key: "entity-changes",
+				icon: <Iconify icon="fluent-mdl2:compliance-audit" />,
+				label: $t("AbpAuditLogging.EntitiesChanged"),
+			});
+		}
+
+		return items;
+	};
+
+	return (
+		<>
+			{contextHolder}
+			<Card>
+				<ProTable<OpenIddictApplicationDto>
+					headerTitle={$t("AbpOpenIddict.Applications")}
+					actionRef={actionRef}
+					rowKey="id"
+					columns={columns}
+					scroll={{ x: "max-content" }}
+					request={async (params) => {
+						const { current, pageSize, filter } = params;
+						const query = await queryClient.fetchQuery({
+							queryKey: ["openIddict.applications", params],
+							queryFn: () =>
+								getPagedListApi({
+									maxResultCount: pageSize,
+									skipCount: ((current || 1) - 1) * (pageSize || 0),
+									filter: filter,
+								}),
+						});
+						return {
+							data: query.items,
+							success: true,
+							total: query.totalCount,
+						};
+					}}
+					search={{
+						span: 12,
+						labelWidth: "auto",
+					}}
+					toolBarRender={() => [
+						hasAccessByCodes([ApplicationsPermissions.Create]) && (
+							<Button
+								type="primary"
+								icon={<PlusOutlined />}
+								onClick={() => {
+									setSelectedApp(undefined);
+									setModalVisible(true);
+								}}
+							>
+								{$t("AbpOpenIddict.Applications:AddNew")}
+							</Button>
+						),
+					]}
+				/>
+			</Card>
+			{/* Modals */}
+			<ApplicationModal
+				visible={modalVisible}
+				applicationId={selectedApp?.id}
+				onClose={() => {
+					setModalVisible(false);
+					setSelectedApp(undefined);
+				}}
+				onChange={() => actionRef.current?.reload()}
+			/>
+
+			{selectedApp && (
+				<ApplicationSecretModal
+					visible={secretModalVisible}
+					applicationId={selectedApp.id}
+					clientId={selectedApp.clientId}
+					onClose={() => {
+						setSecretModalVisible(false);
+						setSelectedApp(undefined);
+					}}
+					onChange={() => actionRef.current?.reload()}
+				/>
+			)}
+
+			<PermissionModal
+				visible={permissionModalVisible}
+				providerName="C"
+				providerKey={selectedApp?.clientId}
+				displayName={selectedApp?.clientId}
+				onClose={() => {
+					setPermissionModalVisible(false);
+					setSelectedApp(undefined);
+				}}
+			/>
+
+			<EntityChangeDrawer
+				open={entityChangeDrawerVisible}
+				subject={selectedApp?.clientId}
+				input={{
+					entityId: selectedApp?.id,
+					entityTypeFullName: "Volo.Abp.OpenIddict.Applications.OpenIddictApplication",
+				}}
+				onClose={() => {
+					setEntityChangeDrawerVisible(false);
+					setSelectedApp(undefined);
+				}}
+			/>
+		</>
+	);
+};
+
+export default ApplicationTable;
diff --git a/apps/react-admin/src/pages/openiddict/applications/uri-modal.tsx b/apps/react-admin/src/pages/openiddict/applications/uri-modal.tsx
new file mode 100644
index 000000000..2778696da
--- /dev/null
+++ b/apps/react-admin/src/pages/openiddict/applications/uri-modal.tsx
@@ -0,0 +1,43 @@
+import { Form, Input, Modal } from "antd";
+import { useTranslation } from "react-i18next";
+
+interface UriModalProps {
+	visible: boolean;
+	onClose: () => void;
+	onChange: (uri: string) => void;
+}
+
+const UriModal: React.FC<UriModalProps> = ({ visible, onClose, onChange }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+
+	const handleOk = async () => {
+		try {
+			const values = await form.validateFields();
+			onChange(values.uri);
+			form.resetFields();
+			onClose();
+		} catch (error) {
+			console.error("Validation failed:", error);
+		}
+	};
+
+	return (
+		<Modal
+			open={visible}
+			title={$t("AbpOpenIddict.Uri:AddNew")}
+			onCancel={onClose}
+			onOk={handleOk}
+			width="50%"
+			destroyOnClose
+		>
+			<Form form={form} layout="vertical">
+				<Form.Item label="Uri" name="uri" rules={[{ required: true }]}>
+					<Input autoComplete="off" />
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+};
+
+export default UriModal;
diff --git a/apps/react-admin/src/pages/openiddict/applications/uri-table.tsx b/apps/react-admin/src/pages/openiddict/applications/uri-table.tsx
new file mode 100644
index 000000000..51d190502
--- /dev/null
+++ b/apps/react-admin/src/pages/openiddict/applications/uri-table.tsx
@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { Button, Popconfirm } from "antd";
+import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { ProTable, type ProColumns } from "@ant-design/pro-table";
+import UriModal from "./uri-modal";
+
+interface UriTableProps {
+	title: string;
+	uris?: string[];
+	onChange?: (uri: string) => void;
+	onDelete?: (uri: string) => void;
+}
+
+interface UriItem {
+	uri: string;
+	key: string;
+}
+
+const UriTable: React.FC<UriTableProps> = ({ title, uris = [], onChange, onDelete }) => {
+	const { t: $t } = useTranslation();
+	const [modalVisible, setModalVisible] = useState(false);
+
+	const dataSource = uris.map((uri) => ({
+		uri,
+		key: uri,
+	}));
+
+	const columns: ProColumns<UriItem>[] = [
+		{
+			title: "Uri",
+			dataIndex: "uri",
+			align: "left",
+		},
+		{
+			title: $t("AbpUi.Actions"),
+			width: 180,
+			fixed: "right",
+			render: (_, record) => (
+				<Popconfirm
+					title={$t("AbpUi.ItemWillBeDeletedMessageWithFormat", { 0: record.uri })}
+					onConfirm={() => onDelete?.(record.uri)}
+				>
+					<Button type="link" danger icon={<DeleteOutlined />} block>
+						{$t("AbpUi.Delete")}
+					</Button>
+				</Popconfirm>
+			),
+		},
+	];
+
+	return (
+		<>
+			<ProTable<UriItem>
+				headerTitle={title}
+				columns={columns}
+				dataSource={dataSource}
+				search={false}
+				pagination={false}
+				toolBarRender={() => [
+					<Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => setModalVisible(true)}>
+						{$t("AbpOpenIddict.Uri:AddNew")}
+					</Button>,
+				]}
+			/>
+
+			<UriModal
+				visible={modalVisible}
+				onClose={() => setModalVisible(false)}
+				onChange={(uri) => {
+					onChange?.(uri);
+					setModalVisible(false);
+				}}
+			/>
+		</>
+	);
+};
+
+export default UriTable;
diff --git a/apps/react-admin/src/pages/openiddict/authorizations/authorization-modal.tsx b/apps/react-admin/src/pages/openiddict/authorizations/authorization-modal.tsx
new file mode 100644
index 000000000..df39a35ef
--- /dev/null
+++ b/apps/react-admin/src/pages/openiddict/authorizations/authorization-modal.tsx
@@ -0,0 +1,128 @@
+import { Form, Input, Modal, Select } from "antd";
+import { useTranslation } from "react-i18next";
+import { useQuery } from "@tanstack/react-query";
+import type { IdentityUserDto } from "#/management/identity/user";
+import { getApi as getApplication } from "@/api/openiddict/applications";
+import { getApi as getAuthorization } from "@/api/openiddict/authorizations";
+import { findByIdApi } from "@/api/management/identity/user-lookup";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import { UserLookupPermissions } from "@/constants/management/identity/permissions";
+import JsonEdit from "@/components/abp/common/json-edit";
+import { useEffect } from "react";
+import { CircleLoading } from "@/components/loading";
+
+interface Props {
+	visible: boolean;
+	authorizationId?: string;
+	onClose: () => void;
+}
+
+const AuthorizationModal: React.FC<Props> = ({ visible, authorizationId, onClose }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+
+	// 获取授权详情和关联数据
+	const { data: authorizationData, isLoading } = useQuery({
+		queryKey: ["authorization", authorizationId],
+		queryFn: async () => {
+			if (!authorizationId) {
+				return Promise.reject(new Error("authorizationId is undefined"));
+			}
+
+			const authorization = await getAuthorization(authorizationId);
+			if (!authorization.applicationId) {
+				return Promise.reject(new Error("authorization.applicationId is undefined"));
+			}
+			const application = await getApplication(authorization.applicationId);
+
+			let subjectInfo: IdentityUserDto | undefined;
+			if (hasAccessByCodes([UserLookupPermissions.Default])) {
+				if (authorization.subject) {
+					subjectInfo = await findByIdApi(authorization.subject);
+				}
+			}
+
+			return {
+				...authorization,
+				applicationId: `${application.clientId}(${authorization.applicationId})`,
+				subject: subjectInfo?.userName ? `${subjectInfo.userName}(${authorization.subject})` : authorization.subject,
+			};
+		},
+		enabled: visible && !!authorizationId,
+	});
+
+	// 更新表单数据
+	useEffect(() => {
+		if (authorizationData && authorizationData.id === authorizationId) {
+			form.setFieldsValue(authorizationData);
+		}
+	}, [authorizationData]);
+
+	const formItems = [
+		{
+			name: "applicationId",
+			label: $t("AbpOpenIddict.DisplayName:ApplicationId"),
+			component: Input,
+		},
+		{
+			name: "subject",
+			label: $t("AbpOpenIddict.DisplayName:Subject"),
+			component: Input,
+		},
+		{
+			name: "type",
+			label: $t("AbpOpenIddict.DisplayName:Type"),
+			component: Input,
+		},
+		{
+			name: "creationDate",
+			label: $t("AbpOpenIddict.DisplayName:CreationDate"),
+			component: Input,
+		},
+		{
+			name: "status",
+			label: $t("AbpOpenIddict.DisplayName:Status"),
+			component: Input,
+		},
+		{
+			name: "scopes",
+			label: $t("AbpOpenIddict.DisplayName:Scopes"),
+			component: Select,
+			props: {
+				mode: "tags" as const,
+				open: false,
+			},
+		},
+		{
+			name: "properties",
+			label: $t("AbpOpenIddict.DisplayName:Properties"),
+			render: (value: string) => <JsonEdit data={value || ""} />,
+		},
+	];
+
+	return (
+		<Modal open={visible} title={$t("AbpOpenIddict.Authorizations")} onCancel={onClose} footer={null} width="50%">
+			{!!authorizationId && visible && isLoading ? (
+				<CircleLoading />
+			) : (
+				<Form
+					form={form}
+					layout="vertical"
+					disabled // 表单只读
+				>
+					{formItems.map((item) => (
+						<Form.Item key={item.name} name={item.name} label={item.label}>
+							{item.render ? (
+								item.render(form.getFieldValue(item.name))
+							) : (
+								<item.component className="w-full" readOnly {...item.props} />
+							)}
+						</Form.Item>
+					))}
+				</Form>
+			)}
+		</Modal>
+	);
+};
+
+export default AuthorizationModal;
diff --git a/apps/react-admin/src/pages/openiddict/authorizations/authorization-table.tsx b/apps/react-admin/src/pages/openiddict/authorizations/authorization-table.tsx
new file mode 100644
index 000000000..ee4b418d5
--- /dev/null
+++ b/apps/react-admin/src/pages/openiddict/authorizations/authorization-table.tsx
@@ -0,0 +1,187 @@
+import { useRef, useState, useTransition } from "react";
+import { Button, Card, Modal, Select, Space } from "antd";
+import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { ProTable, type ActionType, type ProColumns } from "@ant-design/pro-table";
+import type { OpenIddictAuthorizationDto } from "#/openiddict/authorizations";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { formatToDateTime } from "@/utils/abp";
+import { getPagedListApi as getApplications } from "@/api/openiddict/applications";
+import { deleteApi, getPagedListApi } from "@/api/openiddict/authorizations";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import { AuthorizationsPermissions } from "@/constants/openiddict/permissions";
+import AuthorizationModal from "./authorization-modal";
+import { toast } from "sonner";
+
+const AuthorizationTable = () => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const queryClient = useQueryClient();
+	const [modal, contextHolder] = Modal.useModal();
+
+	// Modal states
+	const [modalVisible, setModalVisible] = useState(false);
+	const [selectedAuth, setSelectedAuth] = useState<OpenIddictAuthorizationDto>();
+
+	const [searchText, setSearchText] = useState("");
+	const [isPending, startTransition] = useTransition();
+
+	const { data: applications = [] } = useQuery({
+		queryKey: ["applications", searchText],
+		queryFn: () =>
+			getApplications({
+				maxResultCount: 25,
+				filter: searchText,
+			}).then((res) => res.items),
+		enabled: !isPending,
+	});
+
+	// Delete mutation
+	const { mutateAsync: deleteAuthorization } = useMutation({
+		mutationFn: deleteApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["authorizations"] });
+			actionRef.current?.reload();
+		},
+	});
+
+	const handleDelete = (auth: OpenIddictAuthorizationDto) => {
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpUi.ItemWillBeDeletedMessage"),
+			onOk: () => deleteAuthorization(auth.id),
+		});
+	};
+
+	const columns: ProColumns<OpenIddictAuthorizationDto>[] = [
+		{
+			title: $t("AbpOpenIddict.DisplayName:ApplicationId"),
+			dataIndex: "applicationId",
+			width: 300,
+			ellipsis: true,
+			renderFormItem: () => (
+				<Select
+					showSearch
+					allowClear
+					filterOption={false} // 禁用本地过滤
+					options={applications.map((app) => ({
+						label: app.clientId,
+						value: app.id,
+					}))}
+					onSearch={(value) => {
+						startTransition(() => {
+							setSearchText(value);
+						});
+					}}
+					placeholder={$t("ui.placeholder.select")}
+				/>
+			),
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:Subject"),
+			dataIndex: "subject",
+			ellipsis: true,
+			width: 300,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:Type"),
+			dataIndex: "type",
+			hideInSearch: true,
+			width: 150,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:Status"),
+			dataIndex: "status",
+			width: 150,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:CreationDate"),
+			dataIndex: "creationDate",
+			render: (_, record) => (record.creationDate ? formatToDateTime(record.creationDate) : "-"),
+			width: 200,
+			valueType: "dateRange",
+		},
+		hasAccessByCodes([AuthorizationsPermissions.Delete])
+			? {
+					title: $t("AbpUi.Actions"),
+					width: 220,
+					fixed: "right",
+					hideInSearch: true,
+					render: (_, record) => (
+						<Space>
+							<Button
+								type="link"
+								icon={<EditOutlined />}
+								onClick={() => {
+									setSelectedAuth(record);
+									setModalVisible(true);
+								}}
+							>
+								{$t("AbpUi.Edit")}
+							</Button>
+							<Button type="link" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+								{$t("AbpUi.Delete")}
+							</Button>
+						</Space>
+					),
+				}
+			: {},
+	];
+
+	return (
+		<>
+			{contextHolder}
+			<Space direction="vertical" size="large" className="w-full">
+				<Card>
+					<ProTable<OpenIddictAuthorizationDto>
+						headerTitle={$t("AbpOpenIddict.Authorizations")}
+						actionRef={actionRef}
+						rowKey="id"
+						columns={columns}
+						request={async (params, sorter) => {
+							const { current, pageSize, creationDate, ...filters } = params;
+							const [startTime, endTime] = creationDate || [];
+							const query = await queryClient.fetchQuery({
+								queryKey: ["authorizations", params, sorter],
+								queryFn: () =>
+									getPagedListApi({
+										maxResultCount: pageSize,
+										skipCount: ((current || 1) - 1) * (pageSize || 0),
+										beginCreationTime: startTime,
+										endCreationTime: endTime,
+										...filters,
+									}),
+							});
+
+							return {
+								data: query.items,
+								success: true,
+								total: query.totalCount,
+							};
+						}}
+						pagination={{
+							showSizeChanger: true,
+						}}
+						search={{
+							defaultCollapsed: true,
+							span: 6,
+							labelWidth: "auto",
+						}}
+						scroll={{ x: "max-content" }}
+					/>
+				</Card>
+			</Space>
+			<AuthorizationModal
+				visible={modalVisible}
+				authorizationId={selectedAuth?.id}
+				onClose={() => {
+					setModalVisible(false);
+					setSelectedAuth(undefined);
+				}}
+			/>
+		</>
+	);
+};
+
+export default AuthorizationTable;
diff --git a/apps/react-admin/src/pages/openiddict/scopes/scope-modal.tsx b/apps/react-admin/src/pages/openiddict/scopes/scope-modal.tsx
new file mode 100644
index 000000000..10f062a33
--- /dev/null
+++ b/apps/react-admin/src/pages/openiddict/scopes/scope-modal.tsx
@@ -0,0 +1,259 @@
+import { useEffect, useState } from "react";
+import { Form, Input, Modal, Tabs, Transfer } from "antd";
+import { useTranslation } from "react-i18next";
+import type { OpenIddictScopeDto, OpenIddictScopeUpdateDto } from "#/openiddict/scopes";
+import type { DisplayNameInfo } from "@/components/abp/display-names/types";
+import type { PropertyInfo } from "@/components/abp/properties/types";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createApi, getApi, updateApi } from "@/api/openiddict/scopes";
+import { discoveryApi } from "@/api/openiddict/open-id";
+import DisplayNameTable from "@/components/abp/display-names/display-name-table";
+import PropertyTable from "@/components/abp/properties/property-table";
+import { toast } from "sonner";
+import { CircleLoading } from "@/components/loading";
+
+interface Props {
+	visible: boolean;
+	scopeId?: string;
+	onClose: () => void;
+	onChange: (data: OpenIddictScopeDto) => void;
+}
+
+type TabKeys = "basic" | "displayName" | "description" | "resource" | "props";
+
+const defaultModel = {
+	name: "",
+	extraProperties: {},
+};
+
+const ScopeModal: React.FC<Props> = ({ visible, scopeId, onClose, onChange }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+	const queryClient = useQueryClient();
+	const [activeTab, setActiveTab] = useState<TabKeys>("basic");
+	const [formModel, setFormModel] = useState<OpenIddictScopeUpdateDto>(defaultModel);
+
+	// Fetch OpenID configuration
+	const { data: openIdConfig } = useQuery({
+		queryKey: ["openid-configuration"],
+		queryFn: discoveryApi,
+		enabled: visible,
+	});
+
+	// Fetch scope data if editing
+	const { data: scopeData, isLoading } = useQuery({
+		queryKey: ["scopeId", scopeId],
+		queryFn: () => {
+			if (!scopeId) {
+				return Promise.reject(new Error("scopeId is undefined"));
+			}
+			return getApi(scopeId);
+		},
+		enabled: !!scopeId && visible,
+	});
+
+	useEffect(() => {
+		if (scopeData && scopeData.id === scopeId) {
+			setFormModel(scopeData);
+			form.setFieldsValue(scopeData);
+		}
+	}, [scopeData]);
+
+	useEffect(() => {
+		if (visible) {
+			setActiveTab("basic");
+		}
+	}, [visible]);
+
+	// Create/Update mutations
+	const { mutateAsync: createScope } = useMutation({
+		mutationFn: createApi,
+		onSuccess: (data) => {
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			onChange(data);
+			onClose();
+		},
+	});
+
+	const { mutateAsync: updateScope } = useMutation({
+		mutationFn: ({ id, input }: { id: string; input: OpenIddictScopeUpdateDto }) => updateApi(id, input),
+		onSuccess: (data) => {
+			queryClient.invalidateQueries({ queryKey: ["scopeId", scopeId] });
+			toast.success($t("AbpUi.SavedSuccessfully"));
+			onChange(data);
+			onClose();
+		},
+	});
+
+	const handleDisplayNameChange = (displayName: DisplayNameInfo) => {
+		setFormModel((prev) => ({
+			...prev,
+			displayNames: {
+				...prev.displayNames,
+				[displayName.culture]: displayName.displayName,
+			},
+		}));
+	};
+
+	const handleDisplayNameDelete = (displayName: DisplayNameInfo) => {
+		setFormModel((prev) => {
+			const newDisplayNames = { ...prev.displayNames };
+			delete newDisplayNames[displayName.culture];
+			return {
+				...prev,
+				displayNames: newDisplayNames,
+			};
+		});
+	};
+
+	const handleDescriptionChange = (description: DisplayNameInfo) => {
+		setFormModel((prev) => ({
+			...prev,
+			descriptions: {
+				...prev.descriptions,
+				[description.culture]: description.displayName,
+			},
+		}));
+	};
+
+	const handleDescriptionDelete = (description: DisplayNameInfo) => {
+		setFormModel((prev) => {
+			const newDescriptions = { ...prev.descriptions };
+			delete newDescriptions[description.culture];
+			return {
+				...prev,
+				descriptions: newDescriptions,
+			};
+		});
+	};
+
+	const handlePropertyChange = (prop: PropertyInfo) => {
+		setFormModel((prev) => ({
+			...prev,
+			properties: {
+				...prev.properties,
+				[prop.key]: prop.value,
+			},
+		}));
+	};
+
+	const handlePropertyDelete = (prop: PropertyInfo) => {
+		setFormModel((prev) => {
+			const newProperties = { ...prev.properties };
+			delete newProperties[prop.key];
+			return {
+				...prev,
+				properties: newProperties,
+			};
+		});
+	};
+
+	const handleSubmit = async () => {
+		try {
+			await form.validateFields();
+			if (scopeId) {
+				await updateScope({ id: scopeId, input: formModel });
+			} else {
+				await createScope(formModel);
+			}
+		} catch (error) {
+			console.error("Validation failed:", error);
+		}
+	};
+
+	return (
+		<Modal
+			open={visible}
+			title={scopeId ? `${$t("AbpOpenIddict.Scopes")} - ${formModel.name}` : $t("AbpOpenIddict.Scopes:AddNew")}
+			onCancel={() => {
+				onClose();
+				form.resetFields();
+				setFormModel(defaultModel);
+				form.setFieldsValue(defaultModel);
+			}}
+			onClose={() => {
+				onClose();
+				form.resetFields();
+				setFormModel(defaultModel);
+				form.setFieldsValue(defaultModel);
+			}}
+			onOk={handleSubmit}
+			width="50%"
+			destroyOnClose
+		>
+			{!!scopeId && visible && isLoading ? (
+				<CircleLoading />
+			) : (
+				<Form form={form} layout="horizontal" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+					<Tabs activeKey={activeTab} onChange={(key) => setActiveTab(key as TabKeys)}>
+						{/* Basic Info Tab */}
+						<Tabs.TabPane key="basic" tab={$t("AbpOpenIddict.BasicInfo")}>
+							<Form.Item label={$t("AbpOpenIddict.DisplayName:Name")} name="name" rules={[{ required: true }]}>
+								<Input autoComplete="off" />
+							</Form.Item>
+						</Tabs.TabPane>
+
+						{/* Display Names Tab */}
+						<Tabs.TabPane key="displayName" tab={$t("AbpOpenIddict.DisplayNames")}>
+							<Form.Item label={$t("AbpOpenIddict.DisplayName:DefaultDisplayName")} name="displayName">
+								<Input autoComplete="off" />
+							</Form.Item>
+							<DisplayNameTable
+								data={formModel.displayNames}
+								onChange={handleDisplayNameChange}
+								onDelete={handleDisplayNameDelete}
+							/>
+						</Tabs.TabPane>
+
+						{/* Descriptions Tab */}
+						<Tabs.TabPane key="description" tab={$t("AbpOpenIddict.Descriptions")}>
+							<Form.Item label={$t("AbpOpenIddict.DisplayName:DefaultDescription")} name="description">
+								<Input autoComplete="off" />
+							</Form.Item>
+							<DisplayNameTable
+								data={formModel.descriptions}
+								onChange={handleDescriptionChange}
+								onDelete={handleDescriptionDelete}
+							/>
+						</Tabs.TabPane>
+
+						{/* Resources Tab */}
+						<Tabs.TabPane key="resource" tab={$t("AbpOpenIddict.Resources")}>
+							<Transfer
+								dataSource={openIdConfig?.claims_supported?.map((claim) => ({
+									key: claim,
+									title: claim,
+								}))}
+								targetKeys={formModel.resources || []}
+								onChange={(targetKeys) => {
+									const stringTargetKeys = targetKeys.map(String);
+									setFormModel((prev) => ({
+										...prev,
+										resources: stringTargetKeys,
+									}));
+								}}
+								render={(item) => item.title}
+								listStyle={{
+									width: "47%",
+									height: "338px",
+								}}
+								titles={[$t("AbpOpenIddict.Assigned"), $t("AbpOpenIddict.Available")]}
+							/>
+						</Tabs.TabPane>
+
+						{/* Properties Tab */}
+						<Tabs.TabPane key="props" tab={$t("AbpOpenIddict.Propertites")}>
+							<PropertyTable
+								data={formModel.properties}
+								onChange={handlePropertyChange}
+								onDelete={handlePropertyDelete}
+							/>
+						</Tabs.TabPane>
+					</Tabs>
+				</Form>
+			)}
+		</Modal>
+	);
+};
+
+export default ScopeModal;
diff --git a/apps/react-admin/src/pages/openiddict/scopes/scope-table.tsx b/apps/react-admin/src/pages/openiddict/scopes/scope-table.tsx
new file mode 100644
index 000000000..84d1d4130
--- /dev/null
+++ b/apps/react-admin/src/pages/openiddict/scopes/scope-table.tsx
@@ -0,0 +1,204 @@
+import { useRef, useState } from "react";
+import { Button, Card, Dropdown, Modal, Space } from "antd";
+import { DeleteOutlined, EditOutlined, EllipsisOutlined, PlusOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { ProTable, type ActionType, type ProColumns } from "@ant-design/pro-table";
+import type { OpenIddictScopeDto } from "#/openiddict/scopes";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import { ScopesPermissions } from "@/constants/openiddict/permissions";
+import { AuditLogPermissions } from "@/constants/management/auditing/permissions";
+import { Iconify } from "@/components/icon";
+import { deleteApi, getPagedListApi } from "@/api/openiddict/scopes";
+import { useFeatures } from "@/hooks/abp/use-abp-feature";
+import { toast } from "sonner";
+import ScopeModal from "./scope-modal";
+import { EntityChangeDrawer } from "@/components/abp/auditing/entity-change-drawer";
+
+const ScopeTable: React.FC = () => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const queryClient = useQueryClient();
+	const { isEnabled } = useFeatures();
+	const [modal, contextHolder] = Modal.useModal();
+
+	// Modal visibility states
+	const [modalVisible, setModalVisible] = useState(false);
+	const [entityChangeDrawerVisible, setEntityChangeDrawerVisible] = useState(false);
+
+	// Selected scope state
+	const [selectedScope, setSelectedScope] = useState<OpenIddictScopeDto>();
+
+	// Delete mutation
+	const { mutateAsync: deleteScope } = useMutation({
+		mutationFn: deleteApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["openIddict.scopes"] });
+			actionRef.current?.reload();
+		},
+	});
+
+	const handleMenuClick = (key: string, scope: OpenIddictScopeDto) => {
+		setSelectedScope(scope);
+		switch (key) {
+			case "entity-changes":
+				setEntityChangeDrawerVisible(true);
+				break;
+		}
+	};
+
+	const handleDelete = (scope: OpenIddictScopeDto) => {
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpUi.ItemWillBeDeletedMessageWithFormat", { 0: scope.name }),
+			onOk: () => deleteScope(scope.id),
+		});
+	};
+
+	const columns: ProColumns<OpenIddictScopeDto>[] = [
+		{
+			title: $t("AbpUi.Search"),
+			dataIndex: "filter",
+			hideInTable: true,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:Name"),
+			dataIndex: "name",
+			width: 150,
+			hideInSearch: true,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:DisplayName"),
+			dataIndex: "displayName",
+			width: 150,
+			hideInSearch: true,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:Description"),
+			dataIndex: "description",
+			width: 200,
+			hideInSearch: true,
+			ellipsis: true,
+		},
+		{
+			title: $t("AbpUi.Actions"),
+			width: 220,
+			fixed: "right",
+			hideInSearch: true,
+			render: (_, record) => (
+				<Space split>
+					{hasAccessByCodes([ScopesPermissions.Update]) && (
+						<Button
+							type="link"
+							icon={<EditOutlined />}
+							onClick={() => {
+								setSelectedScope(record);
+								setModalVisible(true);
+							}}
+						>
+							{$t("AbpUi.Edit")}
+						</Button>
+					)}
+					{hasAccessByCodes([ScopesPermissions.Delete]) && (
+						<Button type="link" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+							{$t("AbpUi.Delete")}
+						</Button>
+					)}
+					{isEnabled("AbpAuditing.Logging.AuditLog") && hasAccessByCodes([AuditLogPermissions.Default]) && (
+						<Dropdown
+							menu={{
+								items: [
+									{
+										key: "entity-changes",
+										icon: <Iconify icon="fluent-mdl2:compliance-audit" />,
+										label: $t("AbpAuditLogging.EntitiesChanged"),
+									},
+								],
+								onClick: ({ key }) => handleMenuClick(key, record),
+							}}
+						>
+							<Button type="link" icon={<EllipsisOutlined />} />
+						</Dropdown>
+					)}
+				</Space>
+			),
+		},
+	];
+
+	return (
+		<>
+			{contextHolder}
+			<Card>
+				<ProTable<OpenIddictScopeDto>
+					headerTitle={$t("AbpOpenIddict.Scopes")}
+					actionRef={actionRef}
+					rowKey="id"
+					columns={columns}
+					request={async (params) => {
+						const { current, pageSize, filter } = params;
+						const query = await queryClient.fetchQuery({
+							queryKey: ["openIddict.scopes", params],
+							queryFn: () =>
+								getPagedListApi({
+									maxResultCount: pageSize,
+									skipCount: ((current || 1) - 1) * (pageSize || 0),
+									filter: filter,
+								}),
+						});
+						return {
+							data: query.items,
+							success: true,
+							total: query.totalCount,
+						};
+					}}
+					search={{
+						span: 12,
+						labelWidth: "auto",
+					}}
+					scroll={{ x: "max-content" }}
+					toolBarRender={() => [
+						hasAccessByCodes([ScopesPermissions.Create]) && (
+							<Button
+								type="primary"
+								icon={<PlusOutlined />}
+								onClick={() => {
+									setSelectedScope(undefined);
+									setModalVisible(true);
+								}}
+							>
+								{$t("AbpOpenIddict.Scopes:AddNew")}
+							</Button>
+						),
+					]}
+				/>
+			</Card>
+
+			{/* Modals */}
+			<ScopeModal
+				visible={modalVisible}
+				scopeId={selectedScope?.id}
+				onClose={() => {
+					setModalVisible(false);
+					setSelectedScope(undefined);
+				}}
+				onChange={() => actionRef.current?.reload()}
+			/>
+
+			<EntityChangeDrawer
+				open={entityChangeDrawerVisible}
+				subject={selectedScope?.name}
+				input={{
+					entityId: selectedScope?.id,
+					entityTypeFullName: "Volo.Abp.OpenIddict.Scopes.OpenIddictScope",
+				}}
+				onClose={() => {
+					setEntityChangeDrawerVisible(false);
+					setSelectedScope(undefined);
+				}}
+			/>
+		</>
+	);
+};
+
+export default ScopeTable;
diff --git a/apps/react-admin/src/pages/openiddict/tokens/token-modal.tsx b/apps/react-admin/src/pages/openiddict/tokens/token-modal.tsx
new file mode 100644
index 000000000..f5fea9c4d
--- /dev/null
+++ b/apps/react-admin/src/pages/openiddict/tokens/token-modal.tsx
@@ -0,0 +1,139 @@
+import { Form, Input, Modal } from "antd";
+import { useTranslation } from "react-i18next";
+import { useQuery } from "@tanstack/react-query";
+import type { IdentityUserDto } from "#/management/identity/user";
+import { getApi as getApplication } from "@/api/openiddict/applications";
+import { getApi as getToken } from "@/api/openiddict/tokens";
+import { findByIdApi } from "@/api/management/identity/user-lookup";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import { UserLookupPermissions } from "@/constants/management/identity/permissions";
+import JsonEdit from "@/components/abp/common/json-edit";
+import { useEffect } from "react";
+import { CircleLoading } from "@/components/loading";
+
+interface Props {
+	visible: boolean;
+	tokenId?: string;
+	onClose: () => void;
+}
+
+const TokenModal: React.FC<Props> = ({ visible, tokenId, onClose }) => {
+	const { t: $t } = useTranslation();
+	const [form] = Form.useForm();
+
+	// 获取Token详情和关联数据
+	const { data: tokenData, isLoading } = useQuery({
+		queryKey: ["token", tokenId],
+		queryFn: async () => {
+			if (!tokenId) {
+				return Promise.reject(new Error("tokenId is undefined"));
+			}
+
+			const token = await getToken(tokenId);
+			if (!token.applicationId) {
+				return Promise.reject(new Error("token.applicationId is undefined"));
+			}
+			const application = await getApplication(token.applicationId);
+
+			let subjectInfo: IdentityUserDto | undefined;
+			if (hasAccessByCodes([UserLookupPermissions.Default])) {
+				if (token.subject) {
+					subjectInfo = await findByIdApi(token.subject);
+				}
+			}
+
+			return {
+				...token,
+				applicationId: `${application.clientId}(${token.applicationId})`,
+				subject: subjectInfo?.userName ? `${subjectInfo.userName}(${token.subject})` : token.subject,
+			};
+		},
+		enabled: visible && !!tokenId,
+	});
+
+	// 更新表单数据
+	useEffect(() => {
+		if (tokenData && tokenData.id === tokenId) {
+			form.setFieldsValue(tokenData);
+		}
+	}, [tokenData]);
+
+	const formItems = [
+		{
+			name: "applicationId",
+			label: $t("AbpOpenIddict.DisplayName:ApplicationId"),
+			component: Input,
+		},
+		{
+			name: "authorizationId",
+			label: $t("AbpOpenIddict.DisplayName:AuthorizationId"),
+			component: Input,
+		},
+		{
+			name: "subject",
+			label: $t("AbpOpenIddict.DisplayName:Subject"),
+			component: Input,
+		},
+		{
+			name: "type",
+			label: $t("AbpOpenIddict.DisplayName:Type"),
+			component: Input,
+		},
+		{
+			name: "status",
+			label: $t("AbpOpenIddict.DisplayName:Status"),
+			component: Input,
+		},
+		{
+			name: "creationDate",
+			label: $t("AbpOpenIddict.DisplayName:CreationDate"),
+			component: Input,
+		},
+		{
+			name: "expirationDate",
+			label: $t("AbpOpenIddict.DisplayName:ExpirationDate"),
+			component: Input,
+		},
+		{
+			name: "redemptionDate",
+			label: $t("AbpOpenIddict.DisplayName:RedemptionDate"),
+			component: Input,
+		},
+		{
+			name: "referenceId",
+			label: $t("AbpOpenIddict.DisplayName:ReferenceId"),
+			component: Input,
+		},
+		{
+			name: "payload",
+			label: $t("AbpOpenIddict.DisplayName:Payload"),
+			render: (value: string) => <JsonEdit data={value || ""} />,
+		},
+	];
+
+	return (
+		<Modal open={visible} title={$t("AbpOpenIddict.Tokens")} onCancel={onClose} footer={null} width="50%">
+			{!!tokenId && visible && isLoading ? (
+				<CircleLoading />
+			) : (
+				<Form
+					form={form}
+					layout="vertical"
+					disabled // 表单只读
+				>
+					{formItems.map((item) => (
+						<Form.Item key={item.name} name={item.name} label={item.label}>
+							{item.render ? (
+								item.render(form.getFieldValue(item.name))
+							) : (
+								<item.component className="w-full" readOnly />
+							)}
+						</Form.Item>
+					))}
+				</Form>
+			)}
+		</Modal>
+	);
+};
+
+export default TokenModal;
diff --git a/apps/react-admin/src/pages/openiddict/tokens/token-table.tsx b/apps/react-admin/src/pages/openiddict/tokens/token-table.tsx
new file mode 100644
index 000000000..a775970c6
--- /dev/null
+++ b/apps/react-admin/src/pages/openiddict/tokens/token-table.tsx
@@ -0,0 +1,216 @@
+import { useRef, useState, useTransition } from "react";
+import { Button, Card, Modal, Select, Space } from "antd";
+import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
+import { useTranslation } from "react-i18next";
+import { ProTable, type ActionType, type ProColumns } from "@ant-design/pro-table";
+import type { OpenIddictTokenDto } from "#/openiddict/tokens";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { formatToDateTime } from "@/utils/abp";
+import { getPagedListApi as getApplications } from "@/api/openiddict/applications";
+import { deleteApi, getPagedListApi } from "@/api/openiddict/tokens";
+import { hasAccessByCodes } from "@/utils/abp/access-checker";
+import { TokensPermissions } from "@/constants/openiddict/permissions";
+import TokenModal from "./token-modal";
+import { toast } from "sonner";
+
+const TokenTable = () => {
+	const { t: $t } = useTranslation();
+	const actionRef = useRef<ActionType>();
+	const queryClient = useQueryClient();
+	const [modal, contextHolder] = Modal.useModal();
+
+	// Modal states
+	const [modalVisible, setModalVisible] = useState(false);
+	const [selectedToken, setSelectedToken] = useState<OpenIddictTokenDto>();
+
+	const [searchText, setSearchText] = useState("");
+	const [isPending, startTransition] = useTransition();
+
+	const { data: applications = [] } = useQuery({
+		queryKey: ["applications", searchText],
+		queryFn: () =>
+			getApplications({
+				maxResultCount: 25,
+				filter: searchText,
+			}).then((res) => res.items),
+		enabled: !isPending,
+	});
+
+	// Delete mutation
+	const { mutateAsync: deleteToken } = useMutation({
+		mutationFn: deleteApi,
+		onSuccess: () => {
+			toast.success($t("AbpUi.DeletedSuccessfully"));
+			queryClient.invalidateQueries({ queryKey: ["tokens"] });
+			actionRef.current?.reload();
+		},
+	});
+
+	const handleDelete = (token: OpenIddictTokenDto) => {
+		modal.confirm({
+			title: $t("AbpUi.AreYouSure"),
+			content: $t("AbpUi.ItemWillBeDeletedMessage"),
+			onOk: () => deleteToken(token.id),
+		});
+	};
+
+	const columns: ProColumns<OpenIddictTokenDto>[] = [
+		{
+			title: $t("AbpUi.Search"),
+			dataIndex: "filter",
+			valueType: "text",
+			hideInTable: true,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:ClientId"),
+			dataIndex: "clientId",
+			valueType: "text",
+			hideInTable: true,
+			renderFormItem: () => (
+				<Select
+					showSearch
+					allowClear
+					filterOption={false}
+					options={applications.map((app) => ({
+						label: app.clientId,
+						value: app.id,
+					}))}
+					onSearch={(value) => {
+						startTransition(() => {
+							setSearchText(value);
+						});
+					}}
+					placeholder={$t("ui.placeholder.select")}
+				/>
+			),
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:ApplicationId"),
+			dataIndex: "applicationId",
+			width: 300,
+			ellipsis: true,
+			hideInSearch: true,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:Subject"),
+			dataIndex: "subject",
+			ellipsis: true,
+			width: 300,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:Type"),
+			dataIndex: "type",
+			width: 150,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:Status"),
+			dataIndex: "status",
+			width: 150,
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:CreationDate"),
+			dataIndex: "creationDate",
+			render: (_, record) => (record.creationDate ? formatToDateTime(record.creationDate) : "-"),
+			width: 200,
+			valueType: "dateRange",
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:ExpirationDate"),
+			dataIndex: "expirationDate",
+			render: (_, record) => (record.expirationDate ? formatToDateTime(record.expirationDate) : "-"),
+			width: 200,
+			valueType: "dateRange",
+		},
+		{
+			title: $t("AbpOpenIddict.DisplayName:ReferenceId"),
+			dataIndex: "referenceId",
+			valueType: "text",
+			hideInTable: true,
+		},
+
+		hasAccessByCodes([TokensPermissions.Delete])
+			? {
+					title: $t("AbpUi.Actions"),
+					width: 220,
+					fixed: "right",
+					hideInSearch: true,
+					render: (_, record) => (
+						<Space>
+							<Button
+								type="link"
+								icon={<EditOutlined />}
+								onClick={() => {
+									setSelectedToken(record);
+									setModalVisible(true);
+								}}
+							>
+								{$t("AbpUi.Edit")}
+							</Button>
+							<Button type="link" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+								{$t("AbpUi.Delete")}
+							</Button>
+						</Space>
+					),
+				}
+			: {},
+	];
+
+	return (
+		<>
+			{contextHolder}
+			<Space direction="vertical" size="large" className="w-full">
+				<Card>
+					<ProTable<OpenIddictTokenDto>
+						headerTitle={$t("AbpOpenIddict.Tokens")}
+						actionRef={actionRef}
+						rowKey="id"
+						columns={columns}
+						request={async (params, sorter) => {
+							const { current, pageSize, creationDate, expirationDate, filter, ...filters } = params;
+							const [startCreationTime, endCreationTime] = creationDate || [];
+							const [startExpirationTime, endExpirationTime] = expirationDate || [];
+							const query = await queryClient.fetchQuery({
+								queryKey: ["tokens", params, sorter],
+								queryFn: () =>
+									getPagedListApi({
+										maxResultCount: pageSize,
+										skipCount: ((current || 1) - 1) * (pageSize || 0),
+										beginCreationTime: startCreationTime,
+										endCreationTime: endCreationTime,
+										beginExpirationDate: startExpirationTime,
+										endExpirationDate: endExpirationTime,
+										filter: filter,
+										...filters,
+									}),
+							});
+
+							return {
+								data: query.items,
+								success: true,
+								total: query.totalCount,
+							};
+						}}
+						pagination={{
+							showSizeChanger: true,
+						}}
+						search={{
+							defaultCollapsed: true,
+							labelWidth: "auto",
+						}}
+						scroll={{ x: "max-content" }}
+					/>
+				</Card>
+			</Space>
+			<TokenModal
+				visible={modalVisible}
+				tokenId={selectedToken?.id}
+				onClose={() => {
+					setModalVisible(false);
+					setSelectedToken(undefined);
+				}}
+			/>
+		</>
+	);
+};
+
+export default TokenTable;
diff --git a/apps/react-admin/src/pages/sys/error/Page403.tsx b/apps/react-admin/src/pages/sys/error/Page403.tsx
new file mode 100644
index 000000000..9afb11af8
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/error/Page403.tsx
@@ -0,0 +1,104 @@
+import { Typography } from "antd";
+import { m } from "framer-motion";
+import { Helmet } from "react-helmet-async";
+import { NavLink } from "react-router";
+
+import Character4 from "@/assets/images/characters/character_4.png";
+import MotionContainer from "@/components/animate/motion-container";
+import { varBounce } from "@/components/animate/variants/bounce";
+import { themeVars } from "@/theme/theme.css";
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+
+export default function Page403() {
+	return (
+		<>
+			<Helmet>
+				<title> 403 No Permission!</title>
+			</Helmet>
+
+			<div className="m-auto max-w-[400px]">
+				<MotionContainer className="flex flex-col items-center justify-center px-2">
+					<m.div variants={varBounce().in}>
+						<Typography.Title level={3} className="text-center">
+							No permission
+						</Typography.Title>
+					</m.div>
+
+					<m.div variants={varBounce().in}>
+						<Typography.Paragraph type="secondary" className="text-center">
+							The page you are trying access has restricted access. Please refer to your system administrator
+						</Typography.Paragraph>
+					</m.div>
+
+					<m.div variants={varBounce().in}>
+						<svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" width={400} height={400} className="w-full">
+							<title>403</title>
+							<defs>
+								<linearGradient id="BG" x1="19.496%" x2="77.479%" y1="71.822%" y2="16.69%">
+									<stop offset="0%" stopColor={themeVars.colors.palette.primary.default} />
+									<stop offset="100%" stopColor={themeVars.colors.palette.primary.default} stopOpacity="0" />
+								</linearGradient>
+							</defs>
+							<path
+								fill="url(#BG)"
+								fillRule="nonzero"
+								d="M0 198.78c0 41.458 14.945 79.236 39.539 107.786 28.214 32.765 69.128 53.365 114.734 53.434a148.44 148.44 0 0056.495-11.036c9.051-3.699 19.182-3.274 27.948 1.107a75.779 75.779 0 0033.957 8.01c5.023 0 9.942-.494 14.7-1.433 13.58-2.67 25.94-8.99 36.09-17.94 6.378-5.627 14.547-8.456 22.897-8.446h.142c27.589 0 53.215-8.732 74.492-23.696 19.021-13.36 34.554-31.696 44.904-53.224C474.92 234.58 480 213.388 480 190.958c0-76.93-59.774-139.305-133.498-139.305-7.516 0-14.88.663-22.063 1.899C305.418 21.42 271.355 0 232.499 0a103.651 103.651 0 00-45.88 10.661c-13.24 6.487-25.011 15.705-34.64 26.939-32.698.544-62.931 11.69-87.676 30.291C25.351 97.155 0 144.882 0 198.781z"
+								opacity="0.2"
+							/>
+							<image href={Character4} height="300" x="220" y="30" />
+							<path
+								fill={themeVars.colors.palette.primary.default}
+								d="M425.545 119.2c0-5-4.6-9-9.6-8.2-2-3.7-6-6-10.2-5.9 4.3-21.4-30-21.4-25.7 0-8.7-.8-15.1 9.4-10.4 16.8 2.1 3.5 5.9 5.6 10 5.5h38.7v-.1c4.1-.4 7.2-3.9 7.2-8.1zm-321.3 81.8c.1-4.2-4.1-7.8-8.2-7-1.7-3.2-5.1-5.1-8.8-5 3.8-18.4-25.8-18.4-22 0-7.4-.7-12.9 8.1-8.9 14.4 1.8 3 5.1 4.8 8.6 4.7h33.2v-.1c3.4-.4 6.1-3.4 6.1-7z"
+								opacity="0.08"
+							/>
+							<path fill="#FFAB00" d="M111.045 142.2c58.7-1 58.6-88.3 0-89.2-58.6 1-58.6 88.3 0 89.2z" opacity="0.12" />
+							<path fill="#FFD666" d="M111.045 121c30.8-.5 30.8-46.3 0-46.8-30.8.5-30.8 46.3 0 46.8z" />
+
+							{/* hand */}
+							<path
+								fill="#FBCDBE"
+								d="M278.045 250.1c-4.6-6.5-14 5.1-18.1 7.2-.6-2.1 1.5-41.3-1.4-41.8-2.8-3-8.1-.7-8 3.3.2-4 .5-11.3-5.6-10.2-4.8.6-3.8 6.9-3.8 10.2.1-6.1-9.5-6.1-9.4 0v5.6c.2-4.2-5.7-6.4-8.3-3-2.6-.2-.4 41.8-1.1 43.3-.2 10 8.7 19 18.8 18.7 6.1.4 12.6-1.2 16.8-5.9l19.7-21c1.7-1.6 1.8-4.5.4-6.4z"
+							/>
+							<path
+								fill="#000"
+								fillOpacity="0.24"
+								fillRule="evenodd"
+								d="M248.745 212.3v32.8h1.9v-31.9c.1-2.9-2.8-5.2-5.6-4.6 2 0 3.7 1.7 3.7 3.7zm-9.4 5.6v27.2h1.9v-26.3c.1-2.8-2.8-5.2-5.5-4.6 1.9 0 3.6 1.8 3.6 3.7zm-9.4 27.2v-21.6c.1-2-1.7-3.7-3.7-3.8 2.8-.6 5.6 1.8 5.5 4.6V245h-1.8v.1z"
+								clipRule="evenodd"
+							/>
+
+							{/* 0 */}
+							<path
+								fill={themeVars.colors.palette.primary.default}
+								d="M244.945 189.8c-67.6 1.3-77 97-11 111.4 81 11.8 92.7-107.3 11-111.4zm-48.5 56.2c-1-40.4 49.8-63.8 79.9-36.9l-68.3 68.3c-7.5-8.7-11.6-19.9-11.6-31.4zm48.5 48.5c-11.5 0-22.7-4.1-31.4-11.6l68.3-68.3c27 30.1 3.5 80.9-36.9 79.9z"
+							/>
+							{/* 4_3 */}
+							<path
+								fill="url(#paint0_linear_1_129)"
+								d="M169.245 261h-11.3v-66.6c0-4.5-1.5-5.6-5.6-5.6-5.3.3-13.8-1.4-17.1 4l-55 68.3c-2.7 3.3-1.8 8.8-2 12.8 0 4.1 1.5 5.6 5.6 5.6h54.7v21.7c-.9 7.9 9.1 5.2 13.7 5.6 4.1 0 5.6-1.5 5.6-5.6v-21.7h11.4c4.4 0 5.6-1.5 5.6-5.6-.3-4.8 2-13.8-5.6-12.9zm-30.8 0h-36l36-44.4V261zm263.9 12.1c1.9 44.8-78.7 46-78 1.2h19.3c-.8 15.3 18.3 21.4 30.1 15.5 12.7-6 12.3-29.1-1-34-5.6-2.8-16.6-2-23.1-2.1v-15.1c6.3-.2 17.6.9 22.7-2.3 11.6-5.5 11.9-25.4.9-31.4-10.8-5.9-29 .1-28.2 14.5h-19.4c-.5-28.1 35.4-38.5 57-28.2 23.4 9 24.1 45.5-.2 54.6 12.3 3.9 20.1 14.6 19.9 27.3z"
+							/>
+							<defs>
+								<linearGradient
+									id="paint0_linear_1_129"
+									x1="78.245"
+									x2="78.245"
+									y1="187.309"
+									y2="307.306"
+									gradientUnits="userSpaceOnUse"
+								>
+									<stop stopColor={themeVars.colors.palette.primary.default} />
+									<stop offset="1" stopColor={themeVars.colors.palette.primary.default} />
+								</linearGradient>
+							</defs>
+						</svg>
+					</m.div>
+
+					<NavLink to={HOMEPAGE} className="rounded-md p-4 !text-text-primary !bg-primary">
+						Go to Home
+					</NavLink>
+				</MotionContainer>
+			</div>
+		</>
+	);
+}
diff --git a/apps/react-admin/src/pages/sys/error/Page404.tsx b/apps/react-admin/src/pages/sys/error/Page404.tsx
new file mode 100644
index 000000000..8f0555ff4
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/error/Page404.tsx
@@ -0,0 +1,96 @@
+import { Typography } from "antd";
+import { m } from "framer-motion";
+import { Helmet } from "react-helmet-async";
+import { NavLink } from "react-router";
+
+import Character6 from "@/assets/images/characters/character_6.png";
+import MotionContainer from "@/components/animate/motion-container";
+import { varBounce } from "@/components/animate/variants/bounce";
+import { themeVars } from "@/theme/theme.css";
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+
+export default function Page404() {
+	return (
+		<>
+			<Helmet>
+				<title> 404 Page Not Found!</title>
+			</Helmet>
+
+			<div className="m-auto max-w-[400px]">
+				<MotionContainer className="flex flex-col items-center justify-center px-2">
+					<m.div variants={varBounce().in}>
+						<Typography.Title level={3} className="text-center">
+							Sorry, Page Not Found!
+						</Typography.Title>
+					</m.div>
+
+					<m.div variants={varBounce().in}>
+						<Typography.Paragraph type="secondary" className="text-center">
+							Sorry, we couldn’t find the page you’re looking for. Perhaps you’ve mistyped the URL? Be sure to check
+							your spelling.
+						</Typography.Paragraph>
+					</m.div>
+
+					<m.div variants={varBounce().in}>
+						<svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" width={400} height={400} className="w-full">
+							<title>404</title>
+							<defs>
+								<linearGradient id="BG" x1="19.496%" x2="77.479%" y1="71.822%" y2="16.69%">
+									<stop offset="0%" stopColor={themeVars.colors.palette.primary.default} />
+									<stop offset="100%" stopColor={themeVars.colors.palette.primary.default} stopOpacity="0" />
+								</linearGradient>
+							</defs>
+							{/* background */}
+							<path
+								fill="url(#BG)"
+								fillRule="nonzero"
+								d="M0 198.78c0 41.458 14.945 79.236 39.539 107.786 28.214 32.765 69.128 53.365 114.734 53.434a148.44 148.44 0 0056.495-11.036c9.051-3.699 19.182-3.274 27.948 1.107a75.779 75.779 0 0033.957 8.01c5.023 0 9.942-.494 14.7-1.433 13.58-2.67 25.94-8.99 36.09-17.94 6.378-5.627 14.547-8.456 22.897-8.446h.142c27.589 0 53.215-8.732 74.492-23.696 19.021-13.36 34.554-31.696 44.904-53.224C474.92 234.58 480 213.388 480 190.958c0-76.93-59.774-139.305-133.498-139.305-7.516 0-14.88.663-22.063 1.899C305.418 21.42 271.355 0 232.499 0a103.651 103.651 0 00-45.88 10.661c-13.24 6.487-25.011 15.705-34.64 26.939-32.698.544-62.931 11.69-87.676 30.291C25.351 97.155 0 144.882 0 198.781z"
+								opacity="0.2"
+							/>
+							{/* character */}
+							<image href={Character6} height="300" x="205" y="30" />
+							{/* sun */}
+							<path fill="#FFAB00" d="M111.1 141.2c58.7-1 58.6-88.3 0-89.2-58.6 1-58.6 88.3 0 89.2z" opacity="0.12" />
+							{/* sun */}
+							<path fill="#FFD666" d="M111.1 120c30.8-.5 30.8-46.3 0-46.8-30.8.5-30.8 46.3 0 46.8z" />
+							{/* 0 */}
+							<path
+								fill={themeVars.colors.palette.primary.default}
+								d="M244.9 182.5c82.3 1.4 82.2 123.8 0 125.2-82.3-1.5-82.3-123.8 0-125.2zm0 23.1c-51.8.9-51.8 77.9 0 78.8 51.8-.9 51.7-77.9 0-78.8z"
+							/>
+							{/* 4_4 */}
+							<path
+								fill="url(#paint0_linear_1_119)"
+								d="M175 265.6c1-8.7-12.1-4.8-17-5.6v-66.6c0-4.5-1.5-5.6-5.6-5.6-5.3.3-13.8-1.4-17.1 4l-55 68.3c-2.7 3.3-1.8 8.8-2 12.8 0 4.1 1.5 5.6 5.6 5.6h54.7v21.7c-.9 7.9 9.1 5.2 13.7 5.6 4.1 0 5.6-1.5 5.6-5.6v-21.7c13.8-1.1 18.1 4.5 17.1-12.9zm-72.5-5.6l36-44.4V260h-36zm309.1 5.6c1-8.7-12.2-4.8-17.1-5.6v-66.6c0-4.5-1.5-5.6-5.6-5.6-5.3.3-13.7-1.4-17.1 4l-55 68.3c-2.7 3.3-1.9 8.8-2 12.8 0 4.1 1.5 5.6 5.6 5.6h54.7v21.7c-.9 7.9 9.1 5.2 13.7 5.6 4.1 0 5.6-1.5 5.6-5.6v-21.7c14.1-1.1 18.2 4.5 17.2-12.9zm-72.4-5.6l36-44.4V260h-36z"
+							/>
+							{/* cloud */}
+							<path
+								fill={themeVars.colors.palette.primary.default}
+								d="M425.6 118.2c0-5-4.6-9-9.6-8.2-2-3.7-6-6-10.2-5.9 4.3-21.4-30-21.4-25.7 0-8.7-.8-15.1 9.4-10.4 16.8 2.1 3.5 5.9 5.6 10 5.5h38.7v-.1c4.1-.4 7.2-3.9 7.2-8.1zM104.3 200c.1-4.2-4.1-7.8-8.2-7-1.7-3.2-5.1-5.1-8.8-5 3.8-18.4-25.8-18.4-22 0-7.4-.7-12.9 8.1-8.9 14.4 1.8 3 5.1 4.8 8.6 4.7h33.2v-.1c3.4-.4 6.1-3.4 6.1-7z"
+								opacity="0.08"
+							/>
+							<defs>
+								<linearGradient
+									id="paint0_linear_1_119"
+									x1="78.3"
+									x2="78.3"
+									y1="187.77"
+									y2="305.935"
+									gradientUnits="userSpaceOnUse"
+								>
+									<stop stopColor={themeVars.colors.palette.primary.default} />
+									<stop offset="1" stopColor={themeVars.colors.palette.primary.default} stopOpacity="0" />
+								</linearGradient>
+							</defs>
+						</svg>
+					</m.div>
+
+					<NavLink to={HOMEPAGE} className="rounded-md p-4 !text-text-primary !bg-primary">
+						Go to Home
+					</NavLink>
+				</MotionContainer>
+			</div>
+		</>
+	);
+}
diff --git a/apps/react-admin/src/pages/sys/error/Page500.tsx b/apps/react-admin/src/pages/sys/error/Page500.tsx
new file mode 100644
index 000000000..ccaefbff8
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/error/Page500.tsx
@@ -0,0 +1,151 @@
+import { Typography } from "antd";
+import { m } from "framer-motion";
+import { Helmet } from "react-helmet-async";
+import { NavLink } from "react-router";
+
+import Character8 from "@/assets/images/characters/character_8.png";
+import MotionContainer from "@/components/animate/motion-container";
+import { varBounce } from "@/components/animate/variants/bounce";
+import { themeVars } from "@/theme/theme.css";
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+
+export default function Page() {
+	return (
+		<>
+			<Helmet>
+				<title> 500 Internal Server Error!</title>
+			</Helmet>
+
+			<div className="m-auto max-w-[400px]">
+				<MotionContainer className="flex flex-col items-center justify-center px-2">
+					<m.div variants={varBounce().in}>
+						<Typography.Title level={3} className="text-center">
+							500 Internal Server Error
+						</Typography.Title>
+					</m.div>
+
+					<m.div variants={varBounce().in}>
+						<Typography.Paragraph type="secondary" className="text-center">
+							There was an error, please try again later.
+						</Typography.Paragraph>
+					</m.div>
+
+					<m.div variants={varBounce().in}>
+						<svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" width={400} height={400} className="w-full">
+							<title>500</title>
+							<defs>
+								<linearGradient id="BG" x1="19.496%" x2="77.479%" y1="71.822%" y2="16.69%">
+									<stop offset="0%" stopColor={themeVars.colors.palette.primary.default} />
+									<stop offset="100%" stopColor={themeVars.colors.palette.primary.default} stopOpacity="0" />
+								</linearGradient>
+							</defs>
+							<path
+								fill="url(#BG)"
+								fillRule="nonzero"
+								d="M0 198.78c0 41.458 14.945 79.236 39.539 107.786 28.214 32.765 69.128 53.365 114.734 53.434a148.44 148.44 0 0056.495-11.036c9.051-3.699 19.182-3.274 27.948 1.107a75.779 75.779 0 0033.957 8.01c5.023 0 9.942-.494 14.7-1.433 13.58-2.67 25.94-8.99 36.09-17.94 6.378-5.627 14.547-8.456 22.897-8.446h.142c27.589 0 53.215-8.732 74.492-23.696 19.021-13.36 34.554-31.696 44.904-53.224C474.92 234.58 480 213.388 480 190.958c0-76.93-59.774-139.305-133.498-139.305-7.516 0-14.88.663-22.063 1.899C305.418 21.42 271.355 0 232.499 0a103.651 103.651 0 00-45.88 10.661c-13.24 6.487-25.011 15.705-34.64 26.939-32.698.544-62.931 11.69-87.676 30.291C25.351 97.155 0 144.882 0 198.781z"
+								opacity="0.2"
+							/>
+							<image href={Character8} height="300" x="340" y="30" />
+							<path
+								fill={themeVars.colors.palette.primary.darker}
+								d="M292.4 266.4h-7.3v-.6h6.7v-59.6h-25.7V118h-23.6v-.6h24.2v88.2h25.7v60.8zM146 164.5h-.6v-21.1h16.5v-19h.6v19.7H146v20.4z"
+							/>
+							<path
+								fill={themeVars.colors.palette.primary.default}
+								d="M242.5 112.3c0 3.2-1.3 6.3-3.5 8.5-2.3 2.3-5.3 3.5-8.5 3.5h-82.9c-4.4.1-8.5-2.2-10.7-5.9-2.2-3.8-2.2-8.5 0-12.3 2.2-3.8 6.3-6.1 10.7-5.9h2.8c-2-7.2-.6-14.9 3.9-20.8s11.6-9.4 19-9.4h7c8.9 0 17 4.9 21.1 12.8 2-1 4.2-1.6 6.5-1.6h1.8c3.8 0 7.4 1.5 10.1 4.2 2.7 2.7 4.2 6.3 4.2 10.1v.7c0 1.3-.2 2.7-.6 3.9h6.9c6.8.2 12.2 5.6 12.2 12.2z"
+								opacity="0.08"
+							/>
+							<path
+								fill="#fff"
+								d="M275.4 228.3v14c0 .8-.4 1.5-1.1 1.8-.3.2-.7.3-1.1.3-1.2 0-2.2-1-2.2-2.1v-14c0-4.7-3.5-8.6-8.1-9.1-.4 0-.7-.1-1.1-.1-5.1 0-9.2 4.1-9.2 9.2v14c0 .8-.4 1.5-1.1 1.8-.3.2-.7.3-1.1.3-1.2 0-2.2-1-2.2-2.2v-14c0-7.5 6.1-13.5 13.5-13.5.4 0 .7 0 1.1.1 7.2.6 12.6 6.4 12.6 13.5z"
+							/>
+							<path
+								fill="#DFE3E8"
+								d="M275.4 228.3v14c.3.5.2 1.2-.3 1.6-.5.4-1.1.4-1.6 0s-.6-1.1-.3-1.6v-14c0-5.1-4.1-9.2-9.2-9.2-.4 0-.7 0-1.1.1-.4 0-.7-.1-1.1-.1-5.1 0-9.2 4.1-9.2 9.2v14c.3.5.2 1.2-.3 1.6-.5.4-1.1.4-1.6 0s-.6-1-.3-1.6v-14c-.4-4.7 1.9-9.2 5.9-11.7s9.1-2.5 13.1 0c4.1 2.4 6.4 7 6 11.7z"
+							/>
+							<path
+								fill={themeVars.colors.palette.primary.default}
+								d="M277.8 242.2h-33.2c-4 0-7.3 3.3-7.3 7.3v33.2c0 4 3.3 7.3 7.3 7.3h33.2c4 0 7.3-3.3 7.3-7.3v-33.2c0-4-3.3-7.3-7.3-7.3z"
+							/>
+							<path
+								fill={themeVars.colors.palette.primary.default}
+								d="M277.8 242.2h-24.9c-4 0-7.3 3.3-7.3 7.3v33.2c0 4 3.3 7.3 7.3 7.3h24.9c4 0 7.3-3.3 7.3-7.3v-33.2c0-4-3.3-7.3-7.3-7.3z"
+							/>
+							<path
+								fill="url(#paint0_linear_1_140)"
+								d="M278 145h-22c-4.4 0-8 3.6-8 8v22.8c0 4.4 3.6 8 8 8h22c4.4 0 8-3.6 8-8V153c0-4.4-3.6-8-8-8z"
+							/>
+							<path
+								fill={themeVars.colors.palette.primary.default}
+								d="M126 129.7h-22.4c-1.7 0-3 1.3-3 3v32.8c0 1.7 1.3 3 3 3H126c1.7 0 3-1.3 3-3v-32.8c0-1.7-1.4-3-3-3z"
+								opacity="0.08"
+							/>
+							<path
+								fill="#fff"
+								d="M119.1 135.9H96.6c-1.7 0-3 1.3-3 3v32.8c0 1.7 1.3 3 3 3H119c1.7 0 3-1.3 3-3v-32.8c.1-1.6-1.3-3-2.9-3z"
+							/>
+							<path
+								fill={themeVars.colors.palette.primary.default}
+								d="M119.1 135.9H96.6c-1.7 0-3 1.3-3 3v32.8c0 1.7 1.3 3 3 3H119c1.7 0 3-1.3 3-3v-32.8c.1-1.6-1.3-3-2.9-3z"
+								opacity="0.48"
+							/>
+							<path
+								fill={themeVars.colors.palette.primary.default}
+								d="M80 243.5c.2 2 .9 3.9 2 5.5 4.4 7.8 9.4 15.5 16.2 21.3 10.1 8.5 23.2 12.2 36 15.7-1.1-.6-2.5-6.4-3-7.7-1-2.5-1.9-5.1-2.8-7.6-1.5-4-4.6-7.2-7.7-10.2-6.9-6.7-15.3-11.6-24.5-14.4-5.3-1.7-10.8-2.6-16.2-2.6z"
+							/>
+							<path
+								fill={themeVars.colors.palette.primary.darker}
+								d="M129.8 247.8c-1-7.3-2.1-14.6-5-21.4-2.9-6.7-8-12.9-14.9-15.4l-.6 31.2c-.1 6-.2 12.1 1.5 17.9 3 10.1 13.5 21.9 23.6 25.3 1.5-4.8-1-12.2-1.7-17.2l-2.9-20.4z"
+							/>
+							<path
+								fill={themeVars.colors.palette.primary.default}
+								d="M237.2 164H140c-4.7 0-8.4 3.8-8.4 8.4v19.1c0 4.7 3.8 8.4 8.4 8.4h97.1c4.7 0 8.4-3.8 8.4-8.4v-19.1c.1-4.6-3.7-8.4-8.3-8.4zm0 44H140c-4.7 0-8.4 3.8-8.4 8.4v19.1c0 4.7 3.8 8.4 8.4 8.4h97.1c4.7 0 8.4-3.8 8.4-8.4v-19.1c.1-4.6-3.7-8.4-8.3-8.4zm0 44.2H140c-4.7 0-8.4 3.8-8.4 8.4v19.1c0 4.7 3.8 8.4 8.4 8.4h97.1c4.7 0 8.4-3.8 8.4-8.4v-19.1c.1-4.6-3.7-8.4-8.3-8.4z"
+							/>
+							<path
+								fill="url(#paint1_linear_1_140)"
+								d="M237.6 164h-91.2c-4.7 0-8.4 3.8-8.4 8.4v19.1c0 4.7 3.8 8.4 8.4 8.4h91.1c4.7 0 8.4-3.8 8.4-8.4v-19.1c.1-4.6-3.7-8.4-8.3-8.4zm8.4 53.6v16.8c0 2.5-1 5-2.9 6.8-1.9 1.8-4.4 2.8-7.1 2.8h-88c-2.7 0-5.2-1-7.1-2.8-1.9-1.8-2.9-4.2-2.9-6.8v-16.8c0-5.3 4.5-9.6 10-9.6h88c2.7 0 5.2 1 7.1 2.8 1.8 1.8 2.9 4.2 2.9 6.8zm-8.4 34.4h-91.2c-4.7 0-8.4 3.8-8.4 8.4v19.1c0 4.7 3.8 8.4 8.4 8.4h91.1c4.7 0 8.4-3.8 8.4-8.4v-19.1c.1-4.6-3.7-8.4-8.3-8.4z"
+							/>
+							<path
+								fill={themeVars.colors.palette.primary.darker}
+								d="M161.6 182c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4zm12 0c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4zm8 4c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zM162 226c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4zm12 0c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4zm8 4c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm52-6h-30c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h30c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1zm-72 46c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4zm12 0c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4zm8 4c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm52-6h-30c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h30c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1z"
+							/>
+							<path
+								fill={themeVars.colors.palette.primary.darker}
+								d="M264.4 267.7c.5-1.8-.8-3.7-1.2-5.5-.1-.3-.1-.7 0-1 .2-1.5 1.5-2.6 3-2.6s2.8 1.1 3 2.6c.1.3 0 .7 0 1-.3 1.8-1.6 3.8-1.1 5.6l.4 1.3c.5 1.5-.7 3.1-2.3 3.1-1.6 0-2.7-1.5-2.3-3l.5-1.5zM258 158.8l9.2-4.8 8.8 4.8s-1.6 11.8-8.6 15.2c0 0-8.6-3.3-9.4-15.2z"
+							/>
+							<defs>
+								<linearGradient
+									id="paint0_linear_1_140"
+									x1="277.574"
+									x2="255.652"
+									y1="143.24"
+									y2="187.057"
+									gradientUnits="userSpaceOnUse"
+								>
+									<stop stopColor={themeVars.colors.palette.primary.default} />
+									<stop offset="1" stopColor={themeVars.colors.palette.primary.default} />
+								</linearGradient>
+								<linearGradient
+									id="paint1_linear_1_140"
+									x1="138"
+									x2="138"
+									y1="164"
+									y2="287.9"
+									gradientUnits="userSpaceOnUse"
+								>
+									<stop stopColor={themeVars.colors.palette.primary.default} />
+									<stop offset="1" stopColor={themeVars.colors.palette.primary.default} />
+								</linearGradient>
+							</defs>
+						</svg>
+					</m.div>
+
+					<NavLink to={HOMEPAGE} className="rounded-md p-4 !text-text-primary !bg-primary">
+						Go to Home
+					</NavLink>
+				</MotionContainer>
+			</div>
+		</>
+	);
+}
diff --git a/apps/react-admin/src/pages/sys/error/PageError.tsx b/apps/react-admin/src/pages/sys/error/PageError.tsx
new file mode 100644
index 000000000..dcafec109
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/error/PageError.tsx
@@ -0,0 +1,225 @@
+import { Typography } from "antd";
+import { m } from "framer-motion";
+import { Helmet } from "react-helmet-async";
+
+import Character5 from "@/assets/images/characters/character_5.png";
+import MotionContainer from "@/components/animate/motion-container";
+import { varBounce } from "@/components/animate/variants/bounce";
+import { useRouter } from "@/router/hooks";
+
+import { themeVars } from "@/theme/theme.css";
+import type { FallbackProps } from "react-error-boundary";
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+
+export default function PageError({ error, resetErrorBoundary }: FallbackProps) {
+	const { replace } = useRouter();
+
+	const goHome = () => {
+		resetErrorBoundary();
+		replace(HOMEPAGE);
+	};
+	return (
+		<div>
+			<Helmet>
+				<title>Sorry, Page error occurred!</title>
+			</Helmet>
+
+			<div className="m-auto flex h-screen max-w-[400px] items-center justify-center">
+				<MotionContainer className="flex flex-col items-center justify-center px-2">
+					<m.div variants={varBounce().in}>
+						<Typography.Title level={3} className="text-center">
+							Sorry, Page error occurred!
+						</Typography.Title>
+					</m.div>
+
+					<m.div variants={varBounce().in}>
+						<Typography.Paragraph type="secondary" className="text-center">
+							{error.toString()}
+						</Typography.Paragraph>
+					</m.div>
+
+					<m.div variants={varBounce().in}>
+						<svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" width={400} height={400} className="w-full">
+							<title>Error</title>
+							<defs>
+								<linearGradient id="BG" x1="19.496%" x2="77.479%" y1="71.822%" y2="16.69%">
+									<stop offset="0%" stopColor={themeVars.colors.palette.primary.default} />
+									<stop offset="100%" stopColor={themeVars.colors.palette.primary.default} stopOpacity="0" />
+								</linearGradient>
+							</defs>
+							<path
+								fill="url(#BG)"
+								fillRule="nonzero"
+								d="M0 198.78c0 41.458 14.945 79.236 39.539 107.786 28.214 32.765 69.128 53.365 114.734 53.434a148.44 148.44 0 0056.495-11.036c9.051-3.699 19.182-3.274 27.948 1.107a75.779 75.779 0 0033.957 8.01c5.023 0 9.942-.494 14.7-1.433 13.58-2.67 25.94-8.99 36.09-17.94 6.378-5.627 14.547-8.456 22.897-8.446h.142c27.589 0 53.215-8.732 74.492-23.696 19.021-13.36 34.554-31.696 44.904-53.224C474.92 234.58 480 213.388 480 190.958c0-76.93-59.774-139.305-133.498-139.305-7.516 0-14.88.663-22.063 1.899C305.418 21.42 271.355 0 232.499 0a103.651 103.651 0 00-45.88 10.661c-13.24 6.487-25.011 15.705-34.64 26.939-32.698.544-62.931 11.69-87.676 30.291C25.351 97.155 0 144.882 0 198.781z"
+								opacity="0.2"
+							/>
+							<path
+								fill={themeVars.colors.palette.primary.darker}
+								d="M297.46 99.296l-185.934-5.29c-6.35-.18-11.526 4.158-11.526 9.693v159.882c0 5.534 5.176 9.742 11.526 9.4l185.934-10.028c5.28-.284 9.54-4.576 9.54-9.585v-144.73c0-5.012-4.26-9.194-9.54-9.342z"
+								opacity="0.12"
+							/>
+							<path
+								fill="#fff"
+								d="M297.476 93.405l-180.3-5.278c-6.157-.18-11.176 4.15-11.176 9.67v159.496c0 5.521 5.019 9.718 11.176 9.377l180.3-10.003c5.12-.284 9.251-4.565 9.251-9.563v-144.38c0-5-4.131-9.172-9.251-9.32z"
+							/>
+							<g fill="#919EAB" opacity="0.16">
+								<path d="M205.131 203.668a44.088 44.088 0 01-20.975-4.875 42.576 42.576 0 01-16.793-15.549 40.54 40.54 0 01-5.98-21.153c0-23.36 19.874-41.848 43.748-41.227 23.283.606 41.804 19.248 41.804 41.569 0 22.322-18.521 40.816-41.804 41.235zM266.304 235.213a4.461 4.461 0 01-4.271 4.417l-106.87 4.074c-2.652.107-4.808-1.842-4.808-4.341v-16.97c0-2.499 2.156-4.579 4.808-4.644l106.87-2.64a4.142 4.142 0 013.018 1.168 4.128 4.128 0 011.253 2.98v15.956z" />
+							</g>
+							<path
+								fill="#C4CDD5"
+								d="M186.797 136.682a1.812 1.812 0 01-.525 1.378l-1.858 1.858 16.887 16.893a2.174 2.174 0 01-3.074 3.074l-16.886-16.892-1.859 1.859a1.803 1.803 0 01-2.685-.157l-7.916-9.615a1.8 1.8 0 01.14-2.392l5.091-5.093a1.8 1.8 0 012.392-.14l9.612 7.917c.404.32.651.797.681 1.31zM209.727 165.24l5.441 5.443a2.174 2.174 0 01-3.074 3.075l-5.441-5.443a2.175 2.175 0 013.074-3.075z"
+							/>
+							<path
+								fill="#F4F6F8"
+								d="M209.727 165.24l5.441 5.443a2.176 2.176 0 010 3.075l-8.515-8.518a2.172 2.172 0 013.074 0z"
+							/>
+							<path
+								fill="url(#paint0_linear_1_160)"
+								d="M238.581 194.781l-2.399 2.399c-3.425 3.431-9.046 3.315-12.32-.318l-16.564-18.475a2.176 2.176 0 01.081-2.989l9.309-9.313a2.174 2.174 0 012.978-.091l18.552 16.422.004.004c3.646 3.243 3.812 8.907.359 12.361z"
+							/>
+							<path
+								fill="url(#paint1_linear_1_160)"
+								d="M240.711 138.762c-.332-1.582-2.287-2.165-3.429-1.021l-7.117 7.12a3.31 3.31 0 01-4.681 0l-3.813-3.815a3.308 3.308 0 010-4.68l7.117-7.122c1.143-1.142.561-3.098-1.02-3.43-5.355-1.126-11.157.392-15.316 4.552-5.296 5.299-6.308 13.259-3.037 19.573l-40.33 33.142a5.766 5.766 0 00-.516 8.61l6.289 6.291a5.761 5.761 0 008.607-.516l33.13-40.345c6.312 3.272 14.268 2.26 19.566-3.038 4.159-4.16 5.675-9.964 4.55-15.321zm-61.338 50.587a2.174 2.174 0 110-4.349 2.174 2.174 0 010 4.349z"
+							/>
+							<path
+								fill="#919EAB"
+								d="M186.797 136.682a1.812 1.812 0 01-.525 1.378l-1.858 1.858 16.887 16.893a2.174 2.174 0 010 3.074l-29.734-29.744 2.545-2.546a1.8 1.8 0 012.391-.14l9.613 7.917c.404.32.651.797.681 1.31z"
+							/>
+							<path
+								fill="#004B50"
+								d="M238.581 194.781l-1.199 1.199-25.289-25.298 4.595-4.597a2.173 2.173 0 012.977-.091l18.553 16.422.004.004c3.645 3.243 3.812 8.907.359 12.361z"
+								opacity="0.24"
+							/>
+							<path
+								fill="#004B50"
+								d="M236.161 154.083c-5.298 5.298-13.254 6.31-19.566 3.038l-33.13 40.345a5.761 5.761 0 01-8.607.516l-3.145-3.145 6.122-6.125a2.174 2.174 0 103.075-3.076l42.668-42.682 1.907 1.907a3.308 3.308 0 004.68 0l7.117-7.12c1.142-1.144 3.097-.561 3.429 1.021 1.125 5.357-.392 11.161-4.55 15.321z"
+								opacity="0.24"
+							/>
+							<path
+								fill="url(#paint2_linear_1_160)"
+								d="M249.706 290.362v3.306c0 .847-.436 1.546-1.011 1.622l-51.671 4.676a3.72 3.72 0 01-1.448-.087l-36.003-6.775c-.382-.1-.664-.6-.664-1.177v-3.494l38.198-4.727 4.917-2.324 4.889.703 2.887-.552 6.599 1.917 33.307 6.912z"
+							/>
+							<path
+								fill="url(#paint3_linear_1_160)"
+								d="M249.707 290.362v3.307c0 .846-.436 1.545-1.012 1.621l-51.668 4.676a3.684 3.684 0 01-1.148-.024v-17.813l6.148-.749 4.889.703 2.886-.552 6.598 1.917 33.307 6.914z"
+								opacity="0.3"
+							/>
+							<path
+								fill="url(#paint4_linear_1_160)"
+								d="M209.803 281.53l-50.89 6.74 36.707 6.904c.445.115.909.142 1.366.08l52.72-4.892-39.903-8.832z"
+							/>
+							<path
+								fill="url(#paint5_linear_1_160)"
+								d="M228.459 287.623c0 2.42-7.627 4.302-18.157 4.79-2.657.121-5.499.156-8.447.088-14.491-.333-26.135-3.025-26.135-6.005a.81.81 0 01.02-.214h-.02l.06-.143a.834.834 0 01.054-.139l3.342-8.724 4.037-10.526 5.652-14.753 4.325-11.293 5.381-14.042c.673-1.758 1.922-2.851 3.269-2.851.183-.001.364.019.542.059 1.138.248 2.153 1.272 2.737 2.795l5.427 14.14 4.337 11.441 5.715 15.05 4.106 10.813.065.006 3.42 8.787c.147.239.27.479.27.721z"
+							/>
+							<path
+								fill="#fff"
+								d="M224.769 278.12c-3.299 1.101-8.572 1.894-14.893 2.188-2.545.12-5.237.159-8.037.107-9.736-.184-18.178-1.434-22.67-3.137l4.039-10.527c4.728 1.062 11.316 1.778 18.644 1.888 2.368.036 4.676.006 6.874-.083 4.623-.183 8.7-.626 11.913-1.255l4.071 10.812.059.007zM214.93 252.246c-2.519.272-5.287.457-8.225.54-1.573.046-3.194.063-4.849.046a112.824 112.824 0 01-12.991-.835l4.326-11.293c2.707.214 5.623.336 8.665.353 1.071.006 2.129-.001 3.172-.022 1.907-.036 3.751-.112 5.519-.23l4.383 11.441z"
+							/>
+							<path
+								fill="url(#paint6_linear_1_160)"
+								d="M210.302 292.411c-2.657.122-5.499.157-8.447.089-14.491-.334-26.135-3.025-26.135-6.005a.81.81 0 01.02-.214h-.02l.06-.143a.834.834 0 01.054-.139l3.342-8.724 4.037-10.526 5.652-14.752 4.325-11.293 5.381-14.042c.673-1.758 1.922-2.851 3.269-2.851.183-.001.364.019.542.059.574 3.574 1.558 9.812 2.646 17.165.546 3.702 1.118 7.687 1.677 11.753a776.568 776.568 0 012.016 15.767c.485 4.188.899 8.185 1.192 11.754.429 5.167.604 9.441.389 12.102z"
+								opacity="0.2"
+							/>
+							<path fill="#FF5630" d="M118.108 103.182a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />
+							<path fill="#FFAB00" d="M126.108 103.182a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />
+							<path fill="#36B37E" d="M134.108 103.182a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />
+							<defs>
+								<linearGradient
+									id="paint0_linear_1_160"
+									x1="166.881"
+									x2="166.881"
+									y1="125.454"
+									y2="199.671"
+									gradientUnits="userSpaceOnUse"
+								>
+									<stop stopColor={themeVars.colors.palette.primary.darker} />
+									<stop offset="1" stopColor={themeVars.colors.palette.primary.darker} />
+								</linearGradient>
+								<linearGradient
+									id="paint1_linear_1_160"
+									x1="166.881"
+									x2="166.881"
+									y1="125.454"
+									y2="199.671"
+									gradientUnits="userSpaceOnUse"
+								>
+									<stop stopColor={themeVars.colors.palette.primary.darker} />
+									<stop offset="1" stopColor={themeVars.colors.palette.primary.darker} />
+								</linearGradient>
+								<linearGradient
+									id="paint2_linear_1_160"
+									x1="158.912"
+									x2="249.709"
+									y1="290.69"
+									y2="290.69"
+									gradientUnits="userSpaceOnUse"
+								>
+									<stop stopColor="#FFC444" />
+									<stop offset="1" stopColor="#F36F56" />
+								</linearGradient>
+								<linearGradient
+									id="paint3_linear_1_160"
+									x1="226.725"
+									x2="225.966"
+									y1="290.498"
+									y2="292.586"
+									gradientUnits="userSpaceOnUse"
+								>
+									<stop stopColor="#FFC444" />
+									<stop offset="0.59" stopColor="#F8924F" />
+									<stop offset="1" stopColor="#F36F56" />
+								</linearGradient>
+								<linearGradient
+									id="paint4_linear_1_160"
+									x1="210.87"
+									x2="210.566"
+									y1="288.399"
+									y2="289.237"
+									gradientUnits="userSpaceOnUse"
+								>
+									<stop stopColor="#FFC444" />
+									<stop offset="0.59" stopColor="#F8924F" />
+									<stop offset="1" stopColor="#F36F56" />
+								</linearGradient>
+								<linearGradient
+									id="paint5_linear_1_160"
+									x1="202.974"
+									x2="199.672"
+									y1="204.073"
+									y2="311.415"
+									gradientUnits="userSpaceOnUse"
+								>
+									<stop stopColor="#FFC444" />
+									<stop offset="1" stopColor="#F36F56" />
+								</linearGradient>
+								<linearGradient
+									id="paint6_linear_1_160"
+									x1="175.72"
+									x2="210.394"
+									y1="258.172"
+									y2="258.172"
+									gradientUnits="userSpaceOnUse"
+								>
+									<stop stopColor="#FFC444" />
+									<stop offset="1" stopColor="#F36F56" />
+								</linearGradient>
+							</defs>
+							<image href={Character5} height="300" x="245" y="30" />
+						</svg>
+					</m.div>
+
+					<button
+						style={{ background: themeVars.colors.palette.primary.default, color: themeVars.colors.text.primary }}
+						className="rounded-md p-4"
+						onClick={goHome}
+						type="button"
+					>
+						Go to Home
+					</button>
+				</MotionContainer>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/pages/sys/login/Login.tsx b/apps/react-admin/src/pages/sys/login/Login.tsx
new file mode 100644
index 000000000..fde0de19b
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/login/Login.tsx
@@ -0,0 +1,66 @@
+import { Layout, Typography } from "antd";
+import { useTranslation } from "react-i18next";
+import { Navigate } from "react-router";
+
+import DashboardImg from "@/assets/images/background/dashboard.png";
+import Overlay2 from "@/assets/images/background/overlay_2.jpg";
+import LocalePicker from "@/components/locale-picker";
+import { useUserToken } from "@/store/userStore";
+
+import SettingButton from "@/layouts/_common/setting-button";
+import { themeVars } from "@/theme/theme.css";
+import LoginForm from "./LoginForm";
+import MobileForm from "./MobileForm";
+import QrCodeFrom from "./QrCodeForm";
+import RegisterForm from "./RegisterForm";
+import ResetForm from "./ResetForm";
+import { LoginStateProvider } from "./providers/LoginStateProvider";
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+
+function Login() {
+	const { t } = useTranslation();
+	const token = useUserToken();
+
+	// 判断用户是否有权限
+	if (token.accessToken) {
+		// 如果有授权，则跳转到首页
+		return <Navigate to={HOMEPAGE} replace />;
+	}
+
+	const gradientBg = `rgba(${themeVars.colors.palette.primary.default}, 0.9)`;
+	const bg = `linear-gradient(${gradientBg}, ${gradientBg}) center center / cover no-repeat,url(${Overlay2})`;
+
+	return (
+		<Layout className="relative flex !min-h-screen !w-full !flex-row">
+			<div
+				className="hidden grow flex-col items-center justify-center gap-[80px] bg-center  bg-no-repeat md:flex"
+				style={{
+					background: bg,
+				}}
+			>
+				<div className="text-3xl font-bold leading-normal lg:text-4xl xl:text-5xl">Slash Admin</div>
+				<img className="max-w-[480px] xl:max-w-[560px]" src={DashboardImg} alt="" />
+				<Typography.Text className="flex flex-row gap-[16px] text-2xl">
+					{t("sys.login.signInSecondTitle")}
+				</Typography.Text>
+			</div>
+
+			<div className="m-auto flex !h-screen w-full max-w-[480px] flex-col justify-center px-[16px] lg:px-[64px]">
+				<LoginStateProvider>
+					<LoginForm />
+					<MobileForm />
+					<QrCodeFrom />
+					<RegisterForm />
+					<ResetForm />
+				</LoginStateProvider>
+			</div>
+
+			<div className="absolute right-2 top-0 flex flex-row">
+				<LocalePicker />
+				<SettingButton />
+			</div>
+		</Layout>
+	);
+}
+export default Login;
diff --git a/apps/react-admin/src/pages/sys/login/LoginForm.tsx b/apps/react-admin/src/pages/sys/login/LoginForm.tsx
new file mode 100644
index 000000000..53d9e155d
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/login/LoginForm.tsx
@@ -0,0 +1,132 @@
+import { Alert, Button, Checkbox, Col, Divider, Form, Input, Row } from "antd";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AiFillGithub, AiFillGoogleCircle, AiFillWechat } from "react-icons/ai";
+
+import { DEFAULT_USER, TEST_USER } from "@/_mock/assets";
+import type { SignInReq } from "@/api/services/userService";
+import { useSignIn } from "@/store/userStore";
+
+import { LoginStateEnum, useLoginStateContext } from "./providers/LoginStateProvider";
+// import { useQuery } from "@tanstack/react-query";
+// import { abpApiDefinitionGet } from "@/api/gen";
+
+function LoginForm() {
+	const { t } = useTranslation();
+	const [loading, setLoading] = useState(false);
+
+	const { loginState, setLoginState } = useLoginStateContext();
+	const signIn = useSignIn();
+
+	// const { data } = useQuery({
+	// 	queryKey: ["test"],
+	// 	queryFn: () => abpApiDefinitionGet({
+	// 		query:{
+	// 			IncludeTypes:false
+	// 		}
+	// 	}),
+	// });
+	// console.log(data)
+	if (loginState !== LoginStateEnum.LOGIN) return null;
+
+	const handleFinish = async ({ username, password }: SignInReq) => {
+		setLoading(true);
+		try {
+			await signIn({ username, password });
+		} finally {
+			setLoading(false);
+		}
+	};
+	return (
+		<>
+			<div className="mb-4 text-2xl font-bold xl:text-3xl">{t("sys.login.signInFormTitle")}</div>
+			<Form
+				name="login"
+				size="large"
+				initialValues={{
+					remember: true,
+					username: DEFAULT_USER.username,
+					password: DEFAULT_USER.password,
+				}}
+				onFinish={handleFinish}
+			>
+				<div className="mb-4 flex flex-col">
+					<Alert
+						description={
+							<div className="flex flex-col">
+								<div className="flex">
+									<span className="flex-shrink-0 text-text-disabled">{t("sys.login.userName")}:</span>
+									<span className="ml-1 text-text-secondary">
+										{DEFAULT_USER.username} / {TEST_USER.username}
+									</span>
+								</div>
+								<div className="flex">
+									<span className="flex-shrink-0 text-text-disabled">{t("sys.login.password")}:</span>
+									<span className="ml-1 text-text-secondary">{DEFAULT_USER.password}</span>
+								</div>
+							</div>
+						}
+						showIcon
+					/>
+				</div>
+
+				<Form.Item name="username" rules={[{ required: true, message: t("sys.login.accountPlaceholder") }]}>
+					<Input placeholder={t("sys.login.userName")} />
+				</Form.Item>
+				<Form.Item name="password" rules={[{ required: true, message: t("sys.login.passwordPlaceholder") }]}>
+					<Input.Password type="password" placeholder={t("sys.login.password")} />
+				</Form.Item>
+				<Form.Item>
+					<Row align="middle">
+						<Col span={12}>
+							<Form.Item name="remember" valuePropName="checked" noStyle>
+								<Checkbox>{t("sys.login.rememberMe")}</Checkbox>
+							</Form.Item>
+						</Col>
+						<Col span={12} className="text-right">
+							<Button
+								type="link"
+								className="!underline"
+								onClick={() => setLoginState(LoginStateEnum.RESET_PASSWORD)}
+								size="small"
+							>
+								{t("sys.login.forgetPassword")}
+							</Button>
+						</Col>
+					</Row>
+				</Form.Item>
+				<Form.Item>
+					<Button type="primary" htmlType="submit" className="w-full" loading={loading}>
+						{t("sys.login.loginButton")}
+					</Button>
+				</Form.Item>
+
+				<Row align="middle" gutter={8}>
+					<Col span={9} flex="1">
+						<Button className="w-full !text-sm" onClick={() => setLoginState(LoginStateEnum.MOBILE)}>
+							{t("sys.login.mobileSignInFormTitle")}
+						</Button>
+					</Col>
+					<Col span={9} flex="1">
+						<Button className="w-full !text-sm" onClick={() => setLoginState(LoginStateEnum.QR_CODE)}>
+							{t("sys.login.qrSignInFormTitle")}
+						</Button>
+					</Col>
+					<Col span={6} flex="1" onClick={() => setLoginState(LoginStateEnum.REGISTER)}>
+						<Button className="w-full !text-sm">{t("sys.login.signUpFormTitle")}</Button>
+					</Col>
+				</Row>
+
+				<Divider className="!text-xs">{t("sys.login.otherSignIn")}</Divider>
+
+				<div className="flex cursor-pointer justify-around text-2xl">
+					<AiFillGithub />
+					<AiFillWechat />
+					<AiFillGoogleCircle />
+				</div>
+			</Form>
+		</>
+	);
+}
+
+export default LoginForm;
diff --git a/apps/react-admin/src/pages/sys/login/MobileForm.tsx b/apps/react-admin/src/pages/sys/login/MobileForm.tsx
new file mode 100644
index 000000000..bf1da188e
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/login/MobileForm.tsx
@@ -0,0 +1,86 @@
+import { Button, Col, Form, Input, Row, Statistic } from "antd";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { ReturnButton } from "./components/ReturnButton";
+import { LoginStateEnum, useLoginStateContext } from "./providers/LoginStateProvider";
+
+const { Countdown } = Statistic;
+
+function MobileForm() {
+	const { t } = useTranslation();
+	const onFinish = (values: any) => {
+		console.log("Received values of form: ", values);
+	};
+
+	const [countdown, setCountdown] = useState(0); // 倒计时的秒数
+	const [second, setSecond] = useState(0);
+	const { loginState, backToLogin } = useLoginStateContext();
+
+	if (loginState !== LoginStateEnum.MOBILE) return null;
+
+	const start = () => {
+		setCountdown(60);
+		setSecond(60);
+	};
+
+	const reset = () => {
+		// TODO: 发送验证码请求
+
+		// 启动倒计时
+		setCountdown(0);
+		setSecond(60);
+	};
+	return (
+		<>
+			<div className="mb-4 text-2xl font-bold xl:text-3xl">{t("sys.login.mobileSignInFormTitle")}</div>
+			<Form name="normal_login" size="large" initialValues={{ remember: true }} onFinish={onFinish}>
+				<Form.Item name="phone" rules={[{ required: true, message: "Please input your Phone!" }]}>
+					<Input placeholder={t("sys.login.mobile")} />
+				</Form.Item>
+				<Form.Item name="code" rules={[{ required: true, message: t("sys.login.mobilePlaceholder") }]}>
+					<Row justify="space-between">
+						<Col span={14}>
+							<Input placeholder={t("sys.login.smsCode")} />
+						</Col>
+						<Col span={9} flex={1}>
+							<Button disabled={countdown !== 0} className="w-full !text-sm" onClick={start}>
+								{countdown === 0 ? (
+									<span>{t("sys.login.sendSmsButton")}</span>
+								) : (
+									<div className="flex items-center justify-center">
+										<Countdown
+											className="hidden"
+											value={Date.now() + countdown * 1000}
+											onChange={(time) => {
+												setCountdown(Number(time) / 1000);
+												setSecond(Math.floor(Number(time) / 1000));
+											}}
+											format="ss"
+											onFinish={reset}
+										/>
+										<span className="ml-1">{t("sys.login.sendSmsText", { second })}</span>
+									</div>
+								)}
+							</Button>
+						</Col>
+					</Row>
+				</Form.Item>
+				<Form.Item>
+					<Button type="primary" htmlType="submit" className="w-full">
+						{t("sys.login.loginButton")}
+					</Button>
+				</Form.Item>
+
+				<ReturnButton
+					onClick={() => {
+						reset();
+						backToLogin();
+					}}
+				/>
+			</Form>
+		</>
+	);
+}
+
+export default MobileForm;
diff --git a/apps/react-admin/src/pages/sys/login/QrCodeForm.tsx b/apps/react-admin/src/pages/sys/login/QrCodeForm.tsx
new file mode 100644
index 000000000..e7b8886b1
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/login/QrCodeForm.tsx
@@ -0,0 +1,24 @@
+import { QRCode } from "antd";
+import { useTranslation } from "react-i18next";
+
+import { ReturnButton } from "./components/ReturnButton";
+import { LoginStateEnum, useLoginStateContext } from "./providers/LoginStateProvider";
+
+function QrCodeFrom() {
+	const { t } = useTranslation();
+	const { loginState, backToLogin } = useLoginStateContext();
+
+	if (loginState !== LoginStateEnum.QR_CODE) return null;
+	return (
+		<>
+			<div className="mb-4 text-2xl font-bold xl:text-3xl">{t("sys.login.qrSignInFormTitle")}</div>
+			<div className="flex w-full flex-col items-center justify-center">
+				<QRCode value="https://ant.design/" size={300} />
+				<p className="my-4 text-sm">{t("sys.login.scanSign")}</p>
+			</div>
+			<ReturnButton onClick={backToLogin} />
+		</>
+	);
+}
+
+export default QrCodeFrom;
diff --git a/apps/react-admin/src/pages/sys/login/RegisterForm.tsx b/apps/react-admin/src/pages/sys/login/RegisterForm.tsx
new file mode 100644
index 000000000..9a033c7b7
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/login/RegisterForm.tsx
@@ -0,0 +1,80 @@
+import { useMutation } from "@tanstack/react-query";
+import { Button, Form, Input } from "antd";
+import { useTranslation } from "react-i18next";
+
+import userService from "@/api/services/userService";
+
+import { ReturnButton } from "./components/ReturnButton";
+import { LoginStateEnum, useLoginStateContext } from "./providers/LoginStateProvider";
+
+function RegisterForm() {
+	const { t } = useTranslation();
+	const signUpMutation = useMutation({
+		mutationFn: userService.signup,
+	});
+
+	const { loginState, backToLogin } = useLoginStateContext();
+	if (loginState !== LoginStateEnum.REGISTER) return null;
+
+	const onFinish = async (values: any) => {
+		console.log("Received values of form: ", values);
+		await signUpMutation.mutateAsync(values);
+		backToLogin();
+	};
+
+	return (
+		<>
+			<div className="mb-4 text-2xl font-bold xl:text-3xl">{t("sys.login.signUpFormTitle")}</div>
+			<Form name="normal_login" size="large" initialValues={{ remember: true }} onFinish={onFinish}>
+				<Form.Item name="username" rules={[{ required: true, message: t("sys.login.accountPlaceholder") }]}>
+					<Input placeholder={t("sys.login.userName")} />
+				</Form.Item>
+				<Form.Item name="email" rules={[{ required: true, message: t("sys.login.emaildPlaceholder") }]}>
+					<Input placeholder={t("sys.login.email")} />
+				</Form.Item>
+				<Form.Item name="password" rules={[{ required: true, message: t("sys.login.passwordPlaceholder") }]}>
+					<Input.Password type="password" placeholder={t("sys.login.password")} />
+				</Form.Item>
+				<Form.Item
+					name="confirmPassword"
+					rules={[
+						{
+							required: true,
+							message: t("sys.login.confirmPasswordPlaceholder"),
+						},
+						({ getFieldValue }) => ({
+							validator(_, value) {
+								if (!value || getFieldValue("password") === value) {
+									return Promise.resolve();
+								}
+								return Promise.reject(new Error(t("sys.login.diffPwd")));
+							},
+						}),
+					]}
+				>
+					<Input.Password type="password" placeholder={t("sys.login.confirmPassword")} />
+				</Form.Item>
+				<Form.Item>
+					<Button type="primary" htmlType="submit" className="w-full">
+						{t("sys.login.registerButton")}
+					</Button>
+				</Form.Item>
+
+				<div className="mb-2 text-xs text-gray">
+					<span>{t("sys.login.registerAndAgree")}</span>
+					<a href="./" className="text-sm !underline">
+						{t("sys.login.termsOfService")}
+					</a>
+					{" & "}
+					<a href="./" className="text-sm !underline">
+						{t("sys.login.privacyPolicy")}
+					</a>
+				</div>
+
+				<ReturnButton onClick={backToLogin} />
+			</Form>
+		</>
+	);
+}
+
+export default RegisterForm;
diff --git a/apps/react-admin/src/pages/sys/login/ResetForm.tsx b/apps/react-admin/src/pages/sys/login/ResetForm.tsx
new file mode 100644
index 000000000..bc6de1a15
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/login/ResetForm.tsx
@@ -0,0 +1,42 @@
+import { Button, Form, Input } from "antd";
+import { useTranslation } from "react-i18next";
+
+import { SvgIcon } from "@/components/icon";
+
+import { ReturnButton } from "./components/ReturnButton";
+import { LoginStateEnum, useLoginStateContext } from "./providers/LoginStateProvider";
+
+function ResetForm() {
+	const onFinish = (values: any) => {
+		console.log("Received values of form: ", values);
+	};
+
+	const { t } = useTranslation();
+	const { loginState, backToLogin } = useLoginStateContext();
+
+	if (loginState !== LoginStateEnum.RESET_PASSWORD) return null;
+
+	return (
+		<>
+			<div className="mb-8 text-center">
+				<SvgIcon icon="ic-reset-password" size="100" />
+			</div>
+			<div className="mb-4 text-center text-2xl font-bold xl:text-3xl">{t("sys.login.forgetFormTitle")}</div>
+			<Form name="normal_login" size="large" initialValues={{ remember: true }} onFinish={onFinish}>
+				<p className="mb-4 h-12 text-center text-gray">{t("sys.login.forgetFormSecondTitle")}</p>
+				<Form.Item name="email" rules={[{ required: true, message: t("sys.login.emaildPlaceholder") }]}>
+					<Input placeholder={t("sys.login.email")} />
+				</Form.Item>
+				<Form.Item>
+					<Button type="primary" htmlType="submit" className="w-full !bg-black">
+						{t("sys.login.sendEmailButton")}
+					</Button>
+				</Form.Item>
+
+				<ReturnButton onClick={backToLogin} />
+			</Form>
+		</>
+	);
+}
+
+export default ResetForm;
diff --git a/apps/react-admin/src/pages/sys/login/components/ReturnButton.tsx b/apps/react-admin/src/pages/sys/login/components/ReturnButton.tsx
new file mode 100644
index 000000000..549c49926
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/login/components/ReturnButton.tsx
@@ -0,0 +1,18 @@
+import { Button } from "antd";
+import { useTranslation } from "react-i18next";
+import { MdArrowBackIosNew } from "react-icons/md";
+
+interface ReturnButtonProps {
+	onClick?: () => void;
+}
+export function ReturnButton({ onClick }: ReturnButtonProps) {
+	const { t } = useTranslation();
+	return (
+		<Button block type="link" onClick={onClick}>
+			<div className="flex items-center justify-center hover:underline">
+				<MdArrowBackIosNew />
+				<span className="text-sm">{t("sys.login.backSignIn")}</span>
+			</div>
+		</Button>
+	);
+}
diff --git a/apps/react-admin/src/pages/sys/login/providers/LoginStateProvider.tsx b/apps/react-admin/src/pages/sys/login/providers/LoginStateProvider.tsx
new file mode 100644
index 000000000..46f15d389
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/login/providers/LoginStateProvider.tsx
@@ -0,0 +1,37 @@
+import { type PropsWithChildren, createContext, useContext, useMemo, useState } from "react";
+
+export enum LoginStateEnum {
+	LOGIN = 0,
+	REGISTER = 1,
+	RESET_PASSWORD = 2,
+	MOBILE = 3,
+	QR_CODE = 4,
+}
+
+interface LoginStateContextType {
+	loginState: LoginStateEnum;
+	setLoginState: (loginState: LoginStateEnum) => void;
+	backToLogin: () => void;
+}
+const LoginStateContext = createContext<LoginStateContextType>({
+	loginState: LoginStateEnum.LOGIN,
+	setLoginState: () => {},
+	backToLogin: () => {},
+});
+
+export function useLoginStateContext() {
+	const context = useContext(LoginStateContext);
+	return context;
+}
+
+export function LoginStateProvider({ children }: PropsWithChildren) {
+	const [loginState, setLoginState] = useState(LoginStateEnum.LOGIN);
+
+	function backToLogin() {
+		setLoginState(LoginStateEnum.LOGIN);
+	}
+
+	const value: LoginStateContextType = useMemo(() => ({ loginState, setLoginState, backToLogin }), [loginState]);
+
+	return <LoginStateContext.Provider value={value}>{children}</LoginStateContext.Provider>;
+}
diff --git a/apps/react-admin/src/pages/sys/others/blank.tsx b/apps/react-admin/src/pages/sys/others/blank.tsx
new file mode 100644
index 000000000..d7ddba340
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/blank.tsx
@@ -0,0 +1,5 @@
+import Card from "@/components/card";
+
+export default function BlankPage() {
+	return <Card />;
+}
diff --git a/apps/react-admin/src/pages/sys/others/calendar/calendar-event-form.tsx b/apps/react-admin/src/pages/sys/others/calendar/calendar-event-form.tsx
new file mode 100644
index 000000000..d03f1c860
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/calendar/calendar-event-form.tsx
@@ -0,0 +1,147 @@
+import { faker } from "@faker-js/faker";
+import type { EventInput } from "@fullcalendar/core";
+import { ColorPicker, DatePicker, Form, Input, Modal, Switch } from "antd";
+import type { Dayjs } from "dayjs";
+import { useEffect } from "react";
+
+import { IconButton, Iconify } from "@/components/icon";
+
+import type { ModalProps } from "antd/es/modal/interface";
+
+export type CalendarEventFormFieldType = Pick<EventInput, "title" | "allDay" | "color"> & {
+	id: string;
+	description?: string;
+	start?: Dayjs;
+	end?: Dayjs;
+};
+
+type Props = {
+	type: "edit" | "add";
+	open: boolean;
+	onCancel: VoidFunction;
+	onEdit: (event: CalendarEventFormFieldType) => void;
+	onCreate: (event: CalendarEventFormFieldType) => void;
+	onDelete: (id: string) => void;
+	initValues: CalendarEventFormFieldType;
+};
+
+const COLORS = ["#00a76f", "#8e33ff", "#00b8d9", "#003768", "#22c55e", "#ffab00", "#ff5630", "#7a0916"];
+
+export default function CalendarEventForm({
+	type,
+	open,
+	onCancel,
+	initValues = { id: faker.string.uuid() },
+	onEdit,
+	onCreate,
+	onDelete,
+}: Props) {
+	const title = type === "add" ? "Add Event" : "Edit Event";
+	const [form] = Form.useForm();
+
+	useEffect(() => {
+		// 当 initValues 改变时，手动更新表单的值
+		const { color = COLORS[0], ...others } = initValues;
+		form.setFieldsValue({ ...others, color });
+	}, [initValues, form]);
+
+	// eslint-disable-next-line react/no-unstable-nested-components, react/function-component-definition
+	const ModalFooter: ModalProps["footer"] = (_, { OkBtn, CancelBtn }) => {
+		return (
+			<div>
+				{type === "edit" ? (
+					<div className="flex justify-between">
+						<IconButton
+							onClick={() => {
+								onDelete(initValues.id);
+								onCancel();
+							}}
+						>
+							<Iconify icon="fluent:delete-16-filled" size={20} />
+						</IconButton>
+						<div>
+							<CancelBtn />
+							<OkBtn />
+						</div>
+					</div>
+				) : (
+					<>
+						<CancelBtn />
+						<OkBtn />
+					</>
+				)}
+			</div>
+		);
+	};
+
+	return (
+		<Modal
+			open={open}
+			title={title}
+			centered
+			onCancel={onCancel}
+			footer={ModalFooter}
+			onOk={() => {
+				form
+					.validateFields()
+					.then((values) => {
+						form.resetFields();
+
+						const { id } = initValues;
+						const event = { ...values, id };
+						if (type === "add") onCreate(event);
+						if (type === "edit") onEdit(event);
+						onCancel();
+					})
+					.catch((info) => {
+						console.log("Validate Failed:", info);
+					});
+			}}
+		>
+			<Form form={form} size="small" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} initialValues={initValues}>
+				<Form.Item<CalendarEventFormFieldType>
+					label="Titile"
+					name="title"
+					rules={[{ required: true, message: "Please input title!" }]}
+				>
+					<Input />
+				</Form.Item>
+
+				<Form.Item<CalendarEventFormFieldType> label="Desc" name="description">
+					<Input.TextArea />
+				</Form.Item>
+
+				<Form.Item<CalendarEventFormFieldType> label="All day" name="allDay" valuePropName="checked">
+					<Switch />
+				</Form.Item>
+
+				<Form.Item<CalendarEventFormFieldType>
+					label="Start date"
+					name="start"
+					rules={[{ required: true, message: "Please input start date!" }]}
+				>
+					<DatePicker showTime className="w-full" format="YYYY-MM-DD HH:mm:ss" />
+				</Form.Item>
+
+				<Form.Item<CalendarEventFormFieldType>
+					label="End date"
+					name="end"
+					rules={[{ required: true, message: "Please input end date!" }]}
+				>
+					<DatePicker showTime className="w-full" format="YYYY-MM-DD HH:mm:ss" />
+				</Form.Item>
+
+				<Form.Item<CalendarEventFormFieldType> label="Color" name="color" getValueFromEvent={(e) => e.toHexString()}>
+					<ColorPicker
+						presets={[
+							{
+								label: "Recommended",
+								colors: COLORS,
+							},
+						]}
+					/>
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+}
diff --git a/apps/react-admin/src/pages/sys/others/calendar/calendar-event.tsx b/apps/react-admin/src/pages/sys/others/calendar/calendar-event.tsx
new file mode 100644
index 000000000..34501802e
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/calendar/calendar-event.tsx
@@ -0,0 +1,21 @@
+import type { EventContentArg } from "@fullcalendar/core";
+
+export default function CalendarEvent(eventInfo: EventContentArg) {
+	const { timeText, event, backgroundColor } = eventInfo;
+
+	return (
+		<div
+			className="fc-event-main-wrapper"
+			style={{
+				color: backgroundColor,
+			}}
+		>
+			<div className="fc-event-main-frame">
+				<div className="fc-event-time">{timeText}</div>
+				<div className="fc-event-title-container">
+					<div className="fc-event-title fc-sticky">{event.title}</div>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/pages/sys/others/calendar/calendar-header.tsx b/apps/react-admin/src/pages/sys/others/calendar/calendar-header.tsx
new file mode 100644
index 000000000..8a4d31049
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/calendar/calendar-header.tsx
@@ -0,0 +1,112 @@
+import { Button, Dropdown, type MenuProps } from "antd";
+import dayjs from "dayjs";
+import { type ReactNode, useMemo } from "react";
+
+import { IconButton, Iconify } from "@/components/icon";
+import { useResponsive } from "@/theme/hooks";
+
+export type HandleMoveArg = "next" | "prev" | "today";
+export type ViewType = "dayGridMonth" | "timeGridWeek" | "timeGridDay" | "listWeek";
+type ViewTypeMenu = {
+	key: string;
+	label: string;
+	view: ViewType;
+	icon: ReactNode;
+};
+
+type Props = {
+	now: Date;
+	view: ViewType;
+	onMove: (action: HandleMoveArg) => void;
+	onCreate: VoidFunction;
+	onViewTypeChange: (view: ViewType) => void;
+};
+export default function CalendarHeader({ now, view, onMove, onCreate, onViewTypeChange }: Props) {
+	const { screenMap } = useResponsive();
+
+	const items = useMemo<ViewTypeMenu[]>(
+		() => [
+			{
+				key: "1",
+				label: "Month",
+				view: "dayGridMonth",
+				icon: <Iconify icon="mdi:calendar-month-outline" size={18} />,
+			},
+			{
+				key: "2",
+				label: "Week",
+				view: "timeGridWeek",
+				icon: <Iconify icon="mdi:calendar-weekend-outline" size={18} />,
+			},
+			{
+				key: "3",
+				label: "Day",
+				view: "timeGridDay",
+				icon: <Iconify icon="mdi:calendar-today-outline" size={18} />,
+			},
+			{
+				key: "4",
+				label: "List",
+				view: "listWeek",
+				icon: <Iconify icon="mdi:view-agenda-outline" size={18} />,
+			},
+		],
+		[],
+	);
+
+	const handleMenuClick: MenuProps["onClick"] = (e) => {
+		const selectedViewType = items.find((item) => item.key === e.key);
+		if (selectedViewType) {
+			onViewTypeChange(selectedViewType.view);
+		}
+	};
+
+	const viewTypeMenu = (view: ViewType) => {
+		const viewTypeItem = items.find((item) => item.view === view);
+		if (!viewTypeItem) {
+			return null;
+		}
+		const { icon, label } = viewTypeItem;
+		return (
+			<div className="flex items-center">
+				{icon}
+				<span className="mx-1 !text-sm font-medium">{label}</span>
+				<Iconify icon="solar:alt-arrow-down-outline" size={20} />
+			</div>
+		);
+	};
+
+	return (
+		<div className="relative flex items-center justify-between py-5">
+			{screenMap.lg && (
+				<Dropdown menu={{ items, onClick: handleMenuClick }}>
+					<Button type="text" size="small">
+						{viewTypeMenu(view)}
+					</Button>
+				</Dropdown>
+			)}
+
+			<div className="flex cursor-pointer items-center justify-center">
+				<IconButton>
+					<Iconify icon="solar:alt-arrow-left-outline" onClick={() => onMove("prev")} size={20} />
+				</IconButton>
+				<span className="mx-2 text-base font-bold">{dayjs(now).format("DD MMM YYYY")}</span>
+				<IconButton>
+					<Iconify icon="solar:alt-arrow-right-outline" onClick={() => onMove("next")} size={20} />
+				</IconButton>
+			</div>
+
+			<div className="flex items-center">
+				<Button type="primary" onClick={() => onMove("today")}>
+					Today
+				</Button>
+				<Button className="ml-2" type="primary" onClick={() => onCreate()}>
+					<div className=" flex items-center justify-center">
+						<Iconify icon="material-symbols:add" size={24} />
+						New Event
+					</div>
+				</Button>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/pages/sys/others/calendar/event-utils.ts b/apps/react-admin/src/pages/sys/others/calendar/event-utils.ts
new file mode 100644
index 000000000..a7306b499
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/calendar/event-utils.ts
@@ -0,0 +1,60 @@
+import { faker } from "@faker-js/faker";
+import type { EventInput } from "@fullcalendar/core";
+import dayjs from "dayjs";
+
+export const INITIAL_EVENTS: EventInput[] = [
+	{
+		id: faker.string.uuid(),
+		title: faker.lorem.words({ min: 2, max: 5 }),
+		start: dayjs().toISOString(),
+		end: dayjs().add(10, "hour").toISOString(),
+		color: "#7a0916",
+	},
+	{
+		id: faker.string.uuid(),
+		title: faker.lorem.words({ min: 2, max: 5 }),
+		start: dayjs().add(1, "day").toISOString(),
+		end: dayjs().add(3, "day").toISOString(),
+		allDay: faker.datatype.boolean(),
+		color: "#00b8d9",
+	},
+	{
+		id: faker.string.uuid(),
+		title: faker.lorem.words({ min: 2, max: 5 }),
+		start: dayjs().add(3, "day").toISOString(),
+		end: dayjs().add(5, "day").toISOString(),
+		allDay: faker.datatype.boolean(),
+		color: "#ff5630",
+	},
+	{
+		id: faker.string.uuid(),
+		title: faker.lorem.words({ min: 2, max: 5 }),
+		start: dayjs().add(7, "day").toISOString(),
+		end: dayjs().add(8, "day").toISOString(),
+		allDay: faker.datatype.boolean(),
+		color: "#ffab00",
+	},
+	{
+		id: faker.string.uuid(),
+		title: faker.lorem.words({ min: 2, max: 5 }),
+		start: dayjs().add(7, "day").toISOString(),
+		end: dayjs().add(8, "day").toISOString(),
+		allDay: faker.datatype.boolean(),
+		color: "#ffab00",
+	},
+	{
+		id: faker.string.uuid(),
+		title: faker.lorem.words({ min: 2, max: 5 }),
+		start: dayjs().add(8, "day").toISOString(),
+		end: dayjs().add(9, "day").toISOString(),
+		allDay: faker.datatype.boolean(),
+		color: "#8e33ff",
+	},
+	{
+		id: faker.string.uuid(),
+		title: faker.lorem.words({ min: 2, max: 5 }),
+		start: dayjs().add(10, "day").toISOString(),
+		end: dayjs().add(11, "day").toISOString(),
+		color: "#00a76f",
+	},
+];
diff --git a/apps/react-admin/src/pages/sys/others/calendar/index.tsx b/apps/react-admin/src/pages/sys/others/calendar/index.tsx
new file mode 100644
index 000000000..7cff302b2
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/calendar/index.tsx
@@ -0,0 +1,218 @@
+import { faker } from "@faker-js/faker";
+import type { DateSelectArg, EventClickArg, EventInput } from "@fullcalendar/core";
+//  fullcalendar plugins
+import dayGridPlugin from "@fullcalendar/daygrid"; // 提供 dayGridMonth, dayGridWeek, dayGridDay, dayGrid 视图
+import interactionPlugin from "@fullcalendar/interaction"; // 如果需要 click select drag 这些action 则需要该依赖
+import listPlugin from "@fullcalendar/list"; // 提供 listWeek view
+import FullCalendar from "@fullcalendar/react";
+import timeGridPlugin from "@fullcalendar/timegrid"; // 提供 timeGridWeek, timeGridDay, timeGrid 视图
+import dayjs from "dayjs";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+import Card from "@/components/card";
+import { useSettings } from "@/store/settingStore";
+import { useResponsive } from "@/theme/hooks";
+
+import CalendarEvent from "./calendar-event";
+import CalendarEventForm, { type CalendarEventFormFieldType } from "./calendar-event-form";
+import CalendarHeader, { type HandleMoveArg, type ViewType } from "./calendar-header";
+import { INITIAL_EVENTS } from "./event-utils";
+import { StyledCalendar } from "./styles";
+
+const DefaultEventInitValue = {
+	id: faker.string.uuid(),
+	title: "",
+	description: "",
+	allDay: false,
+	start: dayjs(),
+	end: dayjs(),
+	color: "",
+};
+export default function Calendar() {
+	const fullCalendarRef = useRef<FullCalendar>(null);
+	const [view, setView] = useState<ViewType>("dayGridMonth");
+	const [date, setDate] = useState(new Date());
+	const [open, setOpen] = useState(false);
+	const [eventInitValue, setEventInitValue] = useState<CalendarEventFormFieldType>(DefaultEventInitValue);
+	const [eventFormType, setEventFormType] = useState<"add" | "edit">("add");
+
+	const { themeMode } = useSettings();
+	const { screenMap } = useResponsive();
+
+	useEffect(() => {
+		if (screenMap.xs) {
+			setView("listWeek");
+		}
+	}, [screenMap]);
+	/**
+	 * calendar header events
+	 */
+	const handleMove = (action: HandleMoveArg) => {
+		const calendarApi = fullCalendarRef.current?.getApi();
+		if (!calendarApi) return;
+		switch (action) {
+			case "prev":
+				calendarApi.prev();
+				break;
+			case "next":
+				calendarApi.next();
+				break;
+			case "today":
+				calendarApi.today();
+				break;
+			default:
+				break;
+		}
+		setDate(calendarApi.getDate());
+	};
+	const handleViewTypeChange = (view: ViewType) => {
+		setView(view);
+	};
+
+	useLayoutEffect(() => {
+		const calendarApi = fullCalendarRef.current?.getApi();
+		if (!calendarApi) return;
+		setTimeout(() => {
+			calendarApi.changeView(view);
+		});
+	}, [view]);
+
+	/**
+	 * calendar grid events
+	 */
+	// select date range
+	const handleDateSelect = (selectInfo: DateSelectArg) => {
+		const calendarApi = selectInfo.view.calendar;
+		calendarApi.unselect(); // clear date selection
+		setOpen(true);
+		setEventFormType("add");
+		setEventInitValue({
+			id: faker.string.uuid(),
+			title: "",
+			description: "",
+			start: dayjs(selectInfo.startStr),
+			end: dayjs(selectInfo.endStr),
+			allDay: selectInfo.allDay,
+		});
+	};
+
+	/**
+	 * calendar event events
+	 */
+	// click event and open modal
+	const handleEventClick = (arg: EventClickArg) => {
+		const { title, extendedProps, allDay, start, end, backgroundColor, id } = arg.event;
+		setOpen(true);
+		setEventFormType("edit");
+		const newEventValue: CalendarEventFormFieldType = {
+			id,
+			title,
+			allDay,
+			color: backgroundColor,
+			description: extendedProps.description,
+		};
+		if (start) {
+			newEventValue.start = dayjs(start);
+		}
+
+		if (end) {
+			newEventValue.end = dayjs(end);
+		}
+		setEventInitValue(newEventValue);
+	};
+	const handleCancel = () => {
+		setEventInitValue(DefaultEventInitValue);
+		setOpen(false);
+	};
+	// edit event
+	const handleEdit = (values: CalendarEventFormFieldType) => {
+		const { id, title = "", description, start, end, allDay = false, color } = values;
+		const calendarApi = fullCalendarRef.current?.getApi();
+		if (!calendarApi) return;
+		const oldEvent = calendarApi.getEventById(id);
+
+		const newEvent: EventInput = {
+			id,
+			title,
+			allDay,
+			color,
+			extendedProps: {
+				description,
+			},
+		};
+		if (start) newEvent.start = start.toDate();
+		if (end) newEvent.end = end.toDate();
+
+		// 刷新日历显示
+		oldEvent?.remove();
+		calendarApi.addEvent(newEvent);
+	};
+	// create event
+	const handleCreate = (values: CalendarEventFormFieldType) => {
+		const calendarApi = fullCalendarRef.current?.getApi();
+		if (!calendarApi) return;
+		const { title = "", description, start, end, allDay = false, color } = values;
+
+		const newEvent: EventInput = {
+			id: faker.string.uuid(),
+			title,
+			allDay,
+			color,
+			extendedProps: {
+				description,
+			},
+		};
+		if (start) newEvent.start = start.toDate();
+		if (end) newEvent.end = end.toDate();
+
+		// 刷新日历显示
+		calendarApi.addEvent(newEvent);
+	};
+	// delete event
+	const handleDelete = (id: string) => {
+		const calendarApi = fullCalendarRef.current?.getApi();
+		if (!calendarApi) return;
+		const oldEvent = calendarApi.getEventById(id);
+		oldEvent?.remove();
+	};
+
+	return (
+		<Card className="h-full w-full">
+			<div className="h-full w-full">
+				<StyledCalendar $themeMode={themeMode}>
+					<CalendarHeader
+						now={date}
+						view={view}
+						onMove={handleMove}
+						onCreate={() => setOpen(true)}
+						onViewTypeChange={handleViewTypeChange}
+					/>
+					<FullCalendar
+						ref={fullCalendarRef}
+						plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
+						initialDate={date}
+						initialView={screenMap.xs ? "listWeek" : view}
+						events={INITIAL_EVENTS}
+						eventContent={CalendarEvent}
+						editable
+						selectable
+						selectMirror
+						dayMaxEvents
+						headerToolbar={false}
+						select={handleDateSelect}
+						eventClick={handleEventClick}
+					/>
+				</StyledCalendar>
+			</div>
+			<CalendarEventForm
+				open={open}
+				type={eventFormType}
+				initValues={eventInitValue}
+				onCancel={handleCancel}
+				onDelete={handleDelete}
+				onCreate={handleCreate}
+				onEdit={handleEdit}
+			/>
+		</Card>
+	);
+}
diff --git a/apps/react-admin/src/pages/sys/others/calendar/styles.ts b/apps/react-admin/src/pages/sys/others/calendar/styles.ts
new file mode 100644
index 000000000..07e497811
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/calendar/styles.ts
@@ -0,0 +1,141 @@
+import { themeVars } from "@/theme/theme.css";
+import styled from "styled-components";
+
+import { ThemeMode } from "#/enum";
+
+export const StyledCalendar = styled.div<{ $themeMode: ThemeMode }>`
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  -ms-overflow-style: none; /* 适用于Internet Explorer, Edge */
+  scrollbar-width: none; /* 适用于Firefox */
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    display: none; /* 适用于Chrome、Safari和Opera */
+  }
+  .fc {
+    width: 100%;
+    height: 100%;
+    /* override fullcalendar css variables */
+    --fc-border-color: rgba(${themeVars.colors.palette.gray["500Channel"]}, 0.16);
+    --fc-now-indicator-color: ${themeVars.colors.palette.primary.darker};
+    --fc-today-bg-color: rgba(${themeVars.colors.palette.gray["500Channel"]}, 0.08);
+    --fc-page-bg-color: ${(props) => (props.$themeMode === ThemeMode.Light ? "#ffffff" : "#161c24")};
+    --fc-neutral-bg-color: ${themeVars.colors.background.default};
+    --fc-list-event-hover-bg-color: rgba(${themeVars.colors.palette.gray["500Channel"]}, 0.08);
+    --fc-highlight-color: rgba(${themeVars.colors.palette.gray["500Channel"]}, 0.08);
+
+    a {
+      color: ${(props) => (props.$themeMode === ThemeMode.Dark ? "#ffffff" : "#212b36")};
+    }
+    .fc-col-header {
+      box-shadow: ${themeVars.shadows.inner};
+      th {
+        border-color: transparent;
+      }
+      .fc-col-header-cell-cushion {
+        font-weight: 600;
+        font-size: 0.875rem;
+        font-family: 'Public Sans', sans-serif;
+        padding: 8px 0px;
+      }
+    }
+
+    /* view Month Week Day */
+    .fc-dayGridMonth-view,
+    .fc-timeGridWeek-view,
+    .fc-timeGridDay-view {
+      .fc-daygrid-day-number {
+        line-height: 1.57143;
+        font-size: 0.875rem;
+        font-family: 'Public Sans', sans-serif;
+        font-weight: 400;
+        padding: 8px 8px 0px;
+      }
+      .fc-daygrid-event {
+        margin-top: 4px;
+        .fc-event-start,
+        .fc-event-end {
+          margin-left: 4px;
+          margin-right: 4px;
+        }
+      }
+      .fc-event {
+        border-color: transparent !important;
+        background-color: transparent !important;
+
+        .fc-event-main-wrapper {
+          border-radius: 6px;
+          width: 100%;
+          background-color: #fff;
+          &::before {
+            top: 0px;
+            left: 0px;
+            width: 100%;
+            content: '';
+            opacity: 0.24;
+            height: 100%;
+            border-radius: 6px;
+            position: absolute;
+            background-color: currentcolor;
+            transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+          }
+          .fc-event-main-frame {
+            font-size: 13px;
+            line-height: 20px;
+            filter: brightness(0.48);
+            display: flex;
+            width: 100%;
+            .fc-event-time {
+              overflow: unset;
+              font-weight: 700;
+            }
+            .fc-event-title-container {
+              flex-grow: 1;
+              flex-shrink: 1;
+              min-width: 0px;
+              .fc-event-title {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    /* view list */
+    .fc-list {
+      .fc-list-day {
+        th {
+          z-index: 100;
+        }
+      }
+      .fc-list-day-text,
+      .fc-list-day-side-text {
+        line-height: 1.57143;
+        font-size: 0.875rem;
+        font-family: 'Public Sans', sans-serif;
+        font-weight: 400;
+      }
+
+      .fc-list-event-time {
+        color: ${themeVars.colors.palette.gray["500Channel"]};
+      }
+      .fc-event-title {
+        color: ${themeVars.colors.text.primary};
+      }
+      .fc-list-table {
+        th,
+        td {
+          border-color: transparent;
+        }
+      }
+
+      .fc-event-main-frame {
+        background-color: transparent;
+      }
+    }
+  }
+`;
diff --git a/apps/react-admin/src/pages/sys/others/iframe/external-link.tsx b/apps/react-admin/src/pages/sys/others/iframe/external-link.tsx
new file mode 100644
index 000000000..66aec96e8
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/iframe/external-link.tsx
@@ -0,0 +1,15 @@
+import { useLayoutEffect } from "react";
+
+import { useRouter } from "@/router/hooks";
+
+type Props = {
+	src: string;
+};
+export default function ExternalLink({ src }: Props) {
+	const { back } = useRouter();
+	useLayoutEffect(() => {
+		window.open(src, "_black");
+		back();
+	});
+	return <div />;
+}
diff --git a/apps/react-admin/src/pages/sys/others/iframe/index.tsx b/apps/react-admin/src/pages/sys/others/iframe/index.tsx
new file mode 100644
index 000000000..61fa4a311
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/iframe/index.tsx
@@ -0,0 +1,21 @@
+import { CircleLoading } from "@/components/loading";
+import { useState } from "react";
+
+type Props = {
+	src: string;
+};
+export default function Iframe({ src = "" }: Props) {
+	const [isLoading, setIsLoading] = useState(true);
+
+	const handleLoad = () => {
+		setIsLoading(false);
+	};
+
+	return (
+		<div className="h-full w-full relative">
+			{isLoading && <CircleLoading />}
+
+			<iframe src={src} title="iframe-page" className="h-full w-full" onLoad={handleLoad} />
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/pages/sys/others/kanban/demo.tsx b/apps/react-admin/src/pages/sys/others/kanban/demo.tsx
new file mode 100644
index 000000000..af4a533e1
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/kanban/demo.tsx
@@ -0,0 +1,170 @@
+import { useState } from "react";
+import {
+	DragDropContext,
+	Draggable,
+	type DraggableLocation,
+	Droppable,
+	type OnDragEndResponder,
+} from "react-beautiful-dnd";
+
+type Task = {
+	id: string;
+	content: string;
+};
+// fake data generator
+const getItems = (count: number, offset = 0): Task[] =>
+	Array.from({ length: count }, (_, k) => k).map((k) => ({
+		id: `item-${k + offset}-${new Date().getTime()}`,
+		content: `item ${k + offset}`,
+	}));
+
+/**
+ * re order 重新排序
+ *
+ * @param list
+ * @param startIndex
+ * @param endIndex
+ */
+const reorder = (list: Task[], startIndex: number, endIndex: number) => {
+	const result = Array.from(list);
+	const [removed] = result.splice(startIndex, 1);
+	result.splice(endIndex, 0, removed);
+
+	return result;
+};
+
+/**
+ * Moves an item from one list to another list.
+ */
+const move = (
+	source: Task[],
+	destination: Task[],
+	droppableSource: DraggableLocation,
+	droppableDestination: DraggableLocation,
+) => {
+	const sourceClone = Array.from(source);
+	const destClone = Array.from(destination);
+	const [removed] = sourceClone.splice(droppableSource.index, 1);
+
+	destClone.splice(droppableDestination.index, 0, removed);
+
+	const result: Record<string, Task[]> = {};
+	result[droppableSource.droppableId] = sourceClone;
+	result[droppableDestination.droppableId] = destClone;
+
+	return result;
+};
+const grid = 8;
+
+const getItemStyle = (isDragging: boolean, draggableStyle: any) => ({
+	// some basic styles to make the items look a bit nicer
+	userSelect: "none",
+	padding: grid * 2,
+	margin: `0 0 ${grid}px 0`,
+
+	// change background colour if dragging
+	background: isDragging ? "lightgreen" : "grey",
+
+	// styles we need to apply on draggables
+	...draggableStyle,
+});
+const getListStyle = (isDraggingOver: boolean) => ({
+	background: isDraggingOver ? "lightblue" : "lightgrey",
+	padding: grid,
+	width: 250,
+});
+
+export default function Kanban() {
+	const [state, setState] = useState<Task[][]>([getItems(10), getItems(5, 10)]);
+
+	const onDragEnd: OnDragEndResponder = (result) => {
+		const { source, destination } = result;
+
+		// dropped outside the list
+		if (!destination) {
+			return;
+		}
+		const sInd = +source.droppableId;
+		const dInd = +destination.droppableId;
+
+		if (sInd === dInd) {
+			const items = reorder(state[sInd], source.index, destination.index);
+			const newState = [...state];
+			newState[sInd] = items;
+			setState(newState);
+		} else {
+			const result = move(state[sInd], state[dInd], source, destination);
+			const newState = [...state];
+			newState[sInd] = result[sInd];
+			newState[dInd] = result[dInd];
+
+			setState(newState.filter((group) => group.length));
+		}
+	};
+
+	return (
+		<div>
+			<button
+				type="button"
+				onClick={() => {
+					setState([...state, []]);
+				}}
+			>
+				Add new group
+			</button>
+			<button
+				type="button"
+				onClick={() => {
+					setState([...state, getItems(1)]);
+				}}
+			>
+				Add new item
+			</button>
+			<div style={{ display: "flex" }}>
+				<DragDropContext onDragEnd={() => onDragEnd}>
+					{state.map((el, ind) => (
+						// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+						<Droppable key={ind} droppableId={`${ind}`}>
+							{(provided, snapshot) => (
+								<div ref={provided.innerRef} style={getListStyle(snapshot.isDraggingOver)} {...provided.droppableProps}>
+									{el.map((item, index) => (
+										<Draggable key={item.id} draggableId={item.id} index={index}>
+											{(provided, snapshot) => (
+												<div
+													ref={provided.innerRef}
+													{...provided.draggableProps}
+													{...provided.dragHandleProps}
+													style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
+												>
+													<div
+														style={{
+															display: "flex",
+															justifyContent: "space-around",
+														}}
+													>
+														{item.content}
+														<button
+															type="button"
+															onClick={() => {
+																const newState = [...state];
+																newState[ind].splice(index, 1);
+																setState(newState.filter((group) => group.length));
+															}}
+														>
+															delete
+														</button>
+													</div>
+												</div>
+											)}
+										</Draggable>
+									))}
+									{provided.placeholder}
+								</div>
+							)}
+						</Droppable>
+					))}
+				</DragDropContext>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/react-admin/src/pages/sys/others/kanban/index.tsx b/apps/react-admin/src/pages/sys/others/kanban/index.tsx
new file mode 100644
index 000000000..52262d45a
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/kanban/index.tsx
@@ -0,0 +1,283 @@
+import { faker } from "@faker-js/faker";
+import { Button, Input, type InputRef } from "antd";
+import { useRef, useState } from "react";
+import { DragDropContext, type DropResult, Droppable, type OnDragEndResponder } from "react-beautiful-dnd";
+import { useEvent } from "react-use";
+import SimpleBar from "simplebar-react";
+
+import { Iconify } from "@/components/icon";
+import KanbanColumn from "@/pages/sys/others/kanban/kanban-column";
+import {
+	type Column,
+	type Columns,
+	type DndDataType,
+	DragType,
+	type Task,
+	type Tasks,
+} from "@/pages/sys/others/kanban/types";
+
+import { initialData } from "./task-utils";
+
+export default function Kanban() {
+	const [state, setState] = useState(initialData);
+
+	const handleTaskDragEnd = (result: DropResult) => {
+		const { source, destination, draggableId } = result;
+		if (!destination) {
+			return;
+		}
+
+		const start = state.columns[source.droppableId];
+
+		const finish = state.columns[destination.droppableId];
+
+		if (start === finish) {
+			// moving task in one column
+			const newTaskIds = Array.from(start.taskIds);
+			newTaskIds.splice(source.index, 1);
+			newTaskIds.splice(destination.index, 0, draggableId);
+
+			const newColumn: Column = {
+				...start,
+				taskIds: newTaskIds,
+			};
+
+			const newState: DndDataType = {
+				...state,
+				columns: {
+					...state.columns,
+					[newColumn.id]: newColumn,
+				},
+			};
+
+			setState(newState);
+		} else {
+			// moving task from on column to another
+			const startTaskIds = Array.from(start.taskIds);
+			startTaskIds.splice(source.index, 1);
+			const newStart: Column = {
+				...start,
+				taskIds: startTaskIds,
+			};
+
+			const finishTaskIds = Array.from(finish.taskIds);
+			finishTaskIds.splice(destination.index, 0, draggableId);
+			const newFinish: Column = {
+				...finish,
+				taskIds: finishTaskIds,
+			};
+
+			const newState: DndDataType = {
+				...state,
+				columns: {
+					...state.columns,
+					[newStart.id]: newStart,
+					[newFinish.id]: newFinish,
+				},
+			};
+
+			setState(newState);
+		}
+	};
+
+	// dragtype == column
+	const handleColumnDragEnd = (result: DropResult) => {
+		const { source, destination, draggableId } = result;
+		if (!destination) {
+			return;
+		}
+
+		const newColumnOrder = Array.from(state.columnOrder);
+		newColumnOrder.splice(source.index, 1);
+		newColumnOrder.splice(destination.index, 0, draggableId);
+		const newState: DndDataType = {
+			...state,
+			columnOrder: newColumnOrder,
+		};
+		setState(newState);
+	};
+
+	const onDragEnd: OnDragEndResponder = (result) => {
+		const { source, destination, type } = result;
+		// 拖拽到非法非 droppable区域
+		if (!destination) {
+			return;
+		}
+		// 原地放下
+		if (destination.droppableId === source.droppableId && destination.index === source.index) {
+			return;
+		}
+
+		if (type === DragType.COLUMN) {
+			handleColumnDragEnd(result);
+		} else {
+			handleTaskDragEnd(result);
+		}
+	};
+
+	const [addingColumn, setAddingColumn] = useState(false);
+	const inputRef = useRef<InputRef>(null);
+
+	const handleClickOutside = (event: MouseEvent) => {
+		if (inputRef.current && !inputRef.current.input?.contains(event.target as Node)) {
+			const inputVal = inputRef.current.input?.value;
+			if (inputVal) {
+				createColumn({
+					id: faker.string.uuid(),
+					title: inputVal,
+					taskIds: [],
+				});
+			}
+			setAddingColumn(false);
+			console.log("click outside");
+		}
+	};
+	useEvent("click", handleClickOutside);
+
+	const createColumn = (column: Column) => {
+		const newState: DndDataType = {
+			...state,
+			columns: {
+				...state.columns,
+				[column.id]: column,
+			},
+			columnOrder: [...state.columnOrder, column.id],
+		};
+		setState(newState);
+	};
+
+	const createTask = (columnId: string, task: Task) => {
+		const column = state.columns[columnId];
+		const newState: DndDataType = {
+			...state,
+			tasks: {
+				...state.tasks,
+				[task.id]: task,
+			},
+			columns: {
+				...state.columns,
+				[columnId]: {
+					...column,
+					taskIds: [...column.taskIds, task.id],
+				},
+			},
+		};
+		setState(newState);
+	};
+
+	const deletColumn = (columnId: string) => {
+		const column = state.columns[columnId];
+		const newTasks = Object.keys(state.tasks)
+			.filter((key) => !column.taskIds.includes(key))
+			.reduce((result, key) => {
+				result[key] = state.tasks[key];
+				return result;
+			}, {} as Tasks);
+
+		const newColumns = Object.keys(state.columns)
+			.filter((key) => key !== columnId)
+			.reduce((result, key) => {
+				result[key] = state.columns[key];
+				return result;
+			}, {} as Columns);
+		const newColumnOrder = Array.from(state.columnOrder).filter((item) => item !== columnId);
+
+		const newState: DndDataType = {
+			tasks: newTasks,
+			columns: newColumns,
+			columnOrder: newColumnOrder,
+		};
+		setState(newState);
+	};
+
+	const clearColumn = (columnId: string) => {
+		const column = state.columns[columnId];
+		const newTasks = Object.keys(state.tasks)
+			.filter((key) => !column.taskIds.includes(key))
+			.reduce((result, key) => {
+				result[key] = state.tasks[key];
+				return result;
+			}, {} as Tasks);
+		const newColumns = {
+			...state.columns,
+			[columnId]: {
+				...column,
+				taskIds: [],
+			},
+		};
+		const newState: DndDataType = {
+			...state,
+			tasks: newTasks,
+			columns: newColumns,
+		};
+		setState(newState);
+	};
+
+	const renameColumn = (column: Column) => {
+		const { id, title } = column;
+		const newColumns = {
+			...state.columns,
+			[id]: {
+				...state.columns[id],
+				title,
+			},
+		};
+		const newState: DndDataType = {
+			...state,
+			columns: newColumns,
+		};
+		setState(newState);
+	};
+
+	return (
+		<SimpleBar>
+			<div className="flex">
+				<DragDropContext onDragEnd={onDragEnd}>
+					<Droppable droppableId="all-columns" direction="horizontal" type={DragType.COLUMN}>
+						{(provided) => (
+							<div ref={provided.innerRef} {...provided.droppableProps} className="flex h-full items-start gap-6 p-1">
+								{state.columnOrder.map((columnId, index) => {
+									const column = state.columns[columnId];
+									const tasks = column.taskIds.map((taskId) => state.tasks[taskId]);
+
+									return (
+										<KanbanColumn
+											key={columnId}
+											index={index}
+											column={column}
+											tasks={tasks}
+											createTask={createTask}
+											clearColumn={clearColumn}
+											deleteColumn={deletColumn}
+											renameColumn={renameColumn}
+										/>
+									);
+								})}
+								{provided.placeholder}
+							</div>
+						)}
+					</Droppable>
+				</DragDropContext>
+
+				<div className="ml-[1.6rem] mt-[0.25rem] min-w-[280px]">
+					{addingColumn ? (
+						<Input ref={inputRef} size="large" placeholder="Column Name" autoFocus />
+					) : (
+						<Button
+							onClick={(e) => {
+								e.stopPropagation();
+								setAddingColumn(true);
+							}}
+							className="!inline-flex !w-full items-center justify-center !text-xs !font-semibold"
+							block
+							size="large"
+						>
+							<Iconify icon="carbon:add" size={20} />
+							<div>Add Column</div>
+						</Button>
+					)}
+				</div>
+			</div>
+		</SimpleBar>
+	);
+}
diff --git a/apps/react-admin/src/pages/sys/others/kanban/kanban-column.tsx b/apps/react-admin/src/pages/sys/others/kanban/kanban-column.tsx
new file mode 100644
index 000000000..dbb2327fe
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/kanban/kanban-column.tsx
@@ -0,0 +1,192 @@
+import { faker } from "@faker-js/faker";
+import { Button, Dropdown, Input, type InputRef, type MenuProps } from "antd";
+import { type CSSProperties, useRef, useState } from "react";
+import { Draggable, Droppable } from "react-beautiful-dnd";
+import { useEvent } from "react-use";
+
+import { Iconify } from "@/components/icon";
+import KanbanTask from "@/pages/sys/others/kanban/kanban-task";
+import { type Column, DragType, type Task, TaskPriority } from "@/pages/sys/others/kanban/types";
+import { useSettings } from "@/store/settingStore";
+
+import { ThemeMode } from "#/enum";
+
+type Props = {
+	index: number;
+	column: Column;
+	tasks: Task[];
+	createTask: (columnId: string, task: Task) => void;
+	clearColumn: (columnId: string) => void;
+	deleteColumn: (columnId: string) => void;
+	renameColumn: (column: Column) => void;
+};
+
+export default function KanbanColumn({
+	index,
+	column,
+	tasks,
+	createTask,
+	clearColumn,
+	deleteColumn,
+	renameColumn,
+}: Props) {
+	const { themeMode } = useSettings();
+
+	const style: CSSProperties = {
+		height: "100%",
+		padding: "16px",
+		borderRadius: "16px",
+		backgroundColor: themeMode === ThemeMode.Light ? "rgb(244, 246, 248)" : "rgba(145, 158, 171, 0.12)",
+	};
+
+	const items: MenuProps["items"] = [
+		{
+			key: "1",
+			label: (
+				<div
+					className="flex items-center text-gray"
+					onClick={() => {
+						setRenamingTask(true);
+					}}
+					onKeyDown={(e) => {
+						if (e.key === "Enter") {
+							setRenamingTask(true);
+						}
+					}}
+				>
+					<Iconify icon="solar:pen-bold" />
+					<span className="ml-2">rename</span>
+				</div>
+			),
+		},
+		{
+			key: "2",
+			label: (
+				<div
+					className="flex items-center text-gray"
+					onClick={() => clearColumn(column.id)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter") {
+							clearColumn(column.id);
+						}
+					}}
+				>
+					<Iconify icon="solar:eraser-bold" />
+					<span className="ml-2">clear</span>
+				</div>
+			),
+		},
+		{
+			key: "3",
+			label: (
+				<div
+					className="flex items-center text-warning"
+					onClick={() => deleteColumn(column.id)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter") {
+							deleteColumn(column.id);
+						}
+					}}
+				>
+					<Iconify icon="solar:trash-bin-trash-bold" />
+					<span className="ml-2">delete</span>
+				</div>
+			),
+		},
+	];
+
+	const [addingTask, setAddingTask] = useState(false);
+	const addTaskInputRef = useRef<InputRef>(null);
+	const handleClickOutside = (event: MouseEvent) => {
+		if (addTaskInputRef.current && !addTaskInputRef.current.input?.contains(event.target as Node)) {
+			const addTaskInputVal = addTaskInputRef.current.input?.value;
+			if (addTaskInputVal) {
+				createTask(column.id, {
+					id: faker.string.uuid(),
+					title: addTaskInputVal,
+					reporter: faker.image.avatarGitHub(),
+					priority: faker.helpers.enumValue(TaskPriority),
+				});
+			}
+			setAddingTask(false);
+		}
+
+		if (renameTaskInputRef.current && !renameTaskInputRef.current.input?.contains(event.target as Node)) {
+			const renameInputVal = renameTaskInputRef.current.input?.value;
+			if (renameInputVal) {
+				renameColumn({
+					...column,
+					title: renameInputVal,
+				});
+			}
+			setRenamingTask(false);
+		}
+	};
+	useEvent("click", handleClickOutside);
+
+	const [renamingTask, setRenamingTask] = useState(false);
+	const renameTaskInputRef = useRef<InputRef>(null);
+	const [dropdownOpen, setDropdownOpen] = useState(false);
+	const handleMenuItemClick = (menuInfo: any) => {
+		setDropdownOpen(false);
+		menuInfo.domEvent.stopPropagation();
+	};
+	return (
+		<Draggable draggableId={column.id} index={index}>
+			{(provided) => (
+				<div ref={provided.innerRef} {...provided.draggableProps}>
+					<div style={style}>
+						<header
+							{...provided.dragHandleProps}
+							className="mb-4 flex select-none items-center justify-between text-base font-semibold"
+						>
+							{renamingTask ? <Input ref={renameTaskInputRef} size="large" autoFocus /> : column.title}
+							<Dropdown
+								open={dropdownOpen}
+								onOpenChange={(flag) => setDropdownOpen(flag)}
+								menu={{ items, onClick: handleMenuItemClick }}
+								placement="bottomRight"
+								trigger={["click"]}
+							>
+								<Button shape="circle" type="text" className="!text-gray">
+									<Iconify icon="dashicons:ellipsis" />
+								</Button>
+							</Dropdown>
+						</header>
+
+						<Droppable droppableId={column.id} type={DragType.TASK}>
+							{(provided) => (
+								<main ref={provided.innerRef} {...provided.droppableProps} className="min-h-[10px]">
+									{tasks.map((task, index) => (
+										<KanbanTask task={task} key={task.id} index={index} />
+									))}
+									{provided.placeholder}
+								</main>
+							)}
+						</Droppable>
+
+						<footer className="w-[248px]">
+							{addingTask ? (
+								<Input ref={addTaskInputRef} size="large" placeholder="Task Name" autoFocus />
+							) : (
+								<Button
+									onClick={(e) => {
+										e.stopPropagation();
+										setAddingTask(true);
+									}}
+									className="!flex items-center justify-center !text-xs !font-medium"
+									type="text"
+									block
+									size="large"
+								>
+									<Iconify icon="carbon:add" size={20} />
+									<span>Add Task</span>
+								</Button>
+							)}
+						</footer>
+					</div>
+				</div>
+			)}
+		</Draggable>
+	);
+}
diff --git a/apps/react-admin/src/pages/sys/others/kanban/kanban-task.tsx b/apps/react-admin/src/pages/sys/others/kanban/kanban-task.tsx
new file mode 100644
index 000000000..b7d0df3be
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/kanban/kanban-task.tsx
@@ -0,0 +1,160 @@
+import { Avatar, Drawer, Image, Select } from "antd";
+import { type CSSProperties, memo, useState } from "react";
+import { Draggable } from "react-beautiful-dnd";
+import styled from "styled-components";
+
+import CyanBlur from "@/assets/images/background/cyan-blur.png";
+import RedBlur from "@/assets/images/background/red-blur.png";
+import { IconButton, Iconify, SvgIcon } from "@/components/icon";
+import { type Task, TaskPriority } from "@/pages/sys/others/kanban/types";
+
+import TaskDetail from "./task-detail";
+
+import { themeVars } from "@/theme/theme.css";
+import { rgbAlpha } from "@/utils/theme";
+
+type Props = {
+	index: number;
+	task: Task;
+};
+function KanbanTask({ index, task }: Props) {
+	const [drawerOpen, setDrawerOpen] = useState(false);
+
+	const style: CSSProperties = {
+		backdropFilter: "blur(6px)",
+		backgroundImage: `url("${CyanBlur}"), url("${RedBlur}")`,
+		backgroundRepeat: "no-repeat, no-repeat",
+		backgroundPosition: "right top, left bottom",
+		backgroundSize: "50%, 50%",
+	};
+
+	const { id, title, comments = [], attachments = [], priority, assignee } = task;
+	return (
+		<>
+			<Draggable draggableId={id} index={index}>
+				{(provided, snapshot) => (
+					<Container
+						ref={provided.innerRef}
+						{...provided.draggableProps}
+						{...provided.dragHandleProps}
+						$isDragging={snapshot.isDragging}
+					>
+						<div>
+							{attachments.length > 0 && <Image src={attachments[0]} alt="" className="mb-4 rounded-md" />}
+							<div onClick={() => setDrawerOpen(true)}>
+								<div className="flex justify-end">
+									<TaskPrioritySvg taskPriority={priority} />
+								</div>
+								<div>{title}</div>
+								<div className="mt-4 flex items-center justify-between">
+									<div className="flex items-center text-base text-gray-600">
+										<Iconify icon="uim:comment-dots" size={16} className="mr-1" />
+										<span className="text-xs">{comments.length}</span>
+
+										<Iconify icon="iconamoon:attachment-bold" size={16} className="ml-2 mr-1" />
+										<span className="text-xs">{attachments.length}</span>
+									</div>
+
+									{assignee?.length && (
+										<Avatar.Group
+											max={{
+												count: 3,
+												style: {
+													color: themeVars.colors.palette.primary.default,
+													backgroundColor: rgbAlpha(themeVars.colors.palette.primary.default, 0.9),
+												},
+											}}
+										>
+											{assignee.map((url) => (
+												<Avatar key={url} src={url} />
+											))}
+										</Avatar.Group>
+									)}
+								</div>
+							</div>
+						</div>
+					</Container>
+				)}
+			</Draggable>
+			<Drawer
+				placement="right"
+				title={
+					<div className="flex items-center justify-between">
+						<div>
+							<Select
+								defaultValue="To do"
+								size="large"
+								variant="borderless"
+								dropdownStyle={{
+									width: "auto",
+								}}
+								options={[
+									{ value: "To do", label: "To do" },
+									{ value: "In progress", label: "In progress" },
+									{ value: "Done", label: "Done" },
+								]}
+							/>
+						</div>
+						<div className="flex text-gray">
+							<IconButton>
+								<Iconify icon="solar:like-bold" size={20} color={themeVars.colors.palette.success.default} />
+							</IconButton>
+							<IconButton>
+								<Iconify icon="solar:trash-bin-trash-bold" size={20} />
+							</IconButton>
+							<IconButton>
+								<Iconify icon="fontisto:more-v-a" size={20} />
+							</IconButton>
+						</div>
+					</div>
+				}
+				onClose={() => setDrawerOpen(false)}
+				open={drawerOpen}
+				closable={false}
+				width={420}
+				styles={{
+					body: { padding: 0 },
+					mask: { backgroundColor: "transparent" },
+				}}
+				style={style}
+			>
+				<TaskDetail task={task} />
+			</Drawer>
+		</>
+	);
+}
+
+// 在这里使用memo很重要，因为drag column时，不应该重复渲染内部的task
+export default memo(KanbanTask);
+
+type TaskPrioritySvgProps = {
+	taskPriority: TaskPriority;
+};
+function TaskPrioritySvg({ taskPriority }: TaskPrioritySvgProps) {
+	switch (taskPriority) {
+		case TaskPriority.HIGH:
+			return <SvgIcon icon="ic_rise" size={20} color={themeVars.colors.palette.warning.default} className="" />;
+		case TaskPriority.MEDIUM:
+			return (
+				<SvgIcon icon="ic_rise" size={20} color={themeVars.colors.palette.success.default} className="rotate-90" />
+			);
+		case TaskPriority.LOW:
+			return <SvgIcon icon="ic_rise" size={20} color={themeVars.colors.palette.info.default} className="rotate-180" />;
+		default:
+			break;
+	}
+}
+const Container = styled.div<{ $isDragging: boolean }>`
+  width: 248px;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 16px;
+  font-weight: 400;
+  font-size: 12px;
+  background-color: ${themeVars.colors.background.default};
+  backdrop-filter: ${(props) => (props.$isDragging ? "blur(6px)" : "")};
+
+  &:hover {
+    box-shadow: ${themeVars.shadows["3xl"]};
+  }
+`;
diff --git a/apps/react-admin/src/pages/sys/others/kanban/task-detail.tsx b/apps/react-admin/src/pages/sys/others/kanban/task-detail.tsx
new file mode 100644
index 000000000..4d41f1a11
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/kanban/task-detail.tsx
@@ -0,0 +1,141 @@
+import { Avatar, DatePicker, Image, Input, Radio, Space, Tag, Typography } from "antd";
+import dayjs from "dayjs";
+import styled from "styled-components";
+
+import { SvgIcon } from "@/components/icon";
+
+import { themeVars } from "@/theme/theme.css";
+import type { Task } from "./types";
+
+type Props = {
+	task: Task;
+};
+export default function TaskDetail({ task }: Props) {
+	const { title, reporter, assignee = [], tags = [], date, priority, description, attachments, comments = [] } = task;
+	return (
+		<>
+			<Container>
+				<div className="item">
+					<Typography.Title level={4}>{title}</Typography.Title>
+				</div>
+				<div className="item">
+					<div className="label">Reporter</div>
+					<Avatar shape="circle" src={reporter} size={40} />
+				</div>
+				<div className="item">
+					<div className="label">Assignee</div>
+
+					<Space>
+						{assignee.map((item) => (
+							<Avatar key={item} shape="circle" src={item} size={40} />
+						))}
+					</Space>
+				</div>
+				<div className="item">
+					<div className="label">Tag</div>
+					<Space wrap>
+						{tags.map((tag) => (
+							<Tag key={tag} color={themeVars.colors.palette.info.default}>
+								{tag}
+							</Tag>
+						))}
+					</Space>
+				</div>
+
+				<div className="item">
+					<div className="label">Due Date</div>
+					<DatePicker variant="borderless" value={dayjs(date)} />
+				</div>
+
+				<div className="item">
+					<div className="label">Priority</div>
+					<div>
+						<Radio.Group defaultValue={priority}>
+							<Space>
+								<Radio.Button value="High">
+									<SvgIcon icon="ic_rise" size={20} color={themeVars.colors.palette.warning.default} />
+									<span>High</span>
+								</Radio.Button>
+
+								<Radio.Button value="Medium">
+									<SvgIcon
+										icon="ic_rise"
+										size={20}
+										color={themeVars.colors.palette.success.default}
+										className="rotate-90"
+									/>
+									<span>Medium</span>
+								</Radio.Button>
+
+								<Radio.Button value="Low">
+									<SvgIcon
+										icon="ic_rise"
+										size={20}
+										color={themeVars.colors.palette.info.default}
+										className="rotate-180"
+									/>
+									<span>Low</span>
+								</Radio.Button>
+							</Space>
+						</Radio.Group>
+					</div>
+				</div>
+
+				<div className="item">
+					<div className="label">Description</div>
+					<Input.TextArea defaultValue={description} />
+				</div>
+
+				<div className="item">
+					<div className="label">Attachments</div>
+					<Space wrap>
+						{attachments?.map((item) => (
+							<Image key={item} src={item} width={62} height={62} className="rounded-lg" />
+						))}
+					</Space>
+				</div>
+			</Container>
+			{/* comments */}
+			<div
+				className="flex flex-col gap-4"
+				style={{
+					padding: "24px 20px 40px",
+				}}
+			>
+				{comments?.map(({ avatar, username, content, time }) => (
+					<div key={username} className="flex gap-4">
+						<Avatar src={avatar} size={40} className="flex-shrink-0" />
+						<div className="flex flex-grow flex-col flex-wrap gap-1 text-gray">
+							<div className="flex justify-between">
+								<Typography.Text>{username}</Typography.Text>
+								<Typography.Text>{dayjs(time).format("DD/MM/YYYY HH:mm")}</Typography.Text>
+							</div>
+							<p>{content}</p>
+						</div>
+					</div>
+				))}
+			</div>
+		</>
+	);
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px 20px 40px;
+  .item {
+    display: flex;
+    align-items: center;
+  }
+  .label {
+    text-align: left;
+    font-size: 0.75rem;
+    font-weight: 600;
+    width: 100px;
+    flex-shrink: 0;
+    color: rgb(99, 115, 129);
+    height: 40px;
+    line-height: 40px;
+  }
+`;
diff --git a/apps/react-admin/src/pages/sys/others/kanban/task-utils.ts b/apps/react-admin/src/pages/sys/others/kanban/task-utils.ts
new file mode 100644
index 000000000..a1ac16507
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/kanban/task-utils.ts
@@ -0,0 +1,138 @@
+import { faker } from "@faker-js/faker";
+
+import { type DndDataType, type TaskComment, TaskPriority, TaskTag } from "./types";
+
+const fakeComment = (count: number): TaskComment[] => {
+	const result = [];
+	for (let index = 0; index < count; index += 1) {
+		result.push({
+			username: faker.person.fullName(),
+			avatar: faker.image.avatarGitHub(),
+			content: faker.lorem.lines({ min: 1, max: 3 }),
+			time: faker.date.past(),
+		});
+	}
+	return result;
+};
+
+const fakeAttachment = (count: number) => {
+	const result = [];
+	for (let index = 0; index < count; index += 1) {
+		result.push(faker.image.urlPicsumPhotos());
+	}
+	return result;
+};
+
+const fakeAssignee = (count: number) => {
+	const result = [];
+	for (let index = 0; index < count; index += 1) {
+		result.push(faker.image.avatarGitHub());
+	}
+	return result;
+};
+
+const fakeTag = (count: number) => {
+	const uniqueArray = [];
+	const set = new Set();
+
+	while (uniqueArray.length < count) {
+		const randomElement = faker.helpers.enumValue(TaskTag);
+		if (!set.has(randomElement)) {
+			uniqueArray.push(randomElement);
+			set.add(randomElement);
+		}
+	}
+
+	return uniqueArray;
+};
+
+export const initialData: DndDataType = {
+	tasks: {
+		"task-1": {
+			id: "task-1",
+			title: faker.lorem.words(3),
+			reporter: faker.image.avatarGitHub(),
+			priority: TaskPriority.LOW,
+			tags: [],
+			comments: [],
+			attachments: [],
+		},
+		"task-2": {
+			id: "task-2",
+			title: faker.lorem.words(3),
+			reporter: faker.image.avatarGitHub(),
+			assignee: fakeAssignee(1),
+			date: faker.date.future(),
+			priority: TaskPriority.HIGH,
+			tags: fakeTag(3),
+			comments: fakeComment(1),
+			attachments: fakeAttachment(4),
+		},
+		"task-3": {
+			id: "task-3",
+			title: faker.lorem.words(4),
+			reporter: faker.image.avatarGitHub(),
+			assignee: fakeAssignee(2),
+			priority: TaskPriority.MEDIUM,
+			date: faker.date.future(),
+			tags: fakeTag(2),
+			comments: fakeComment(2),
+			attachments: [],
+		},
+		"task-4": {
+			id: "task-4",
+			title: faker.lorem.words(5),
+			reporter: faker.image.avatarGitHub(),
+			assignee: fakeAssignee(3),
+			priority: TaskPriority.MEDIUM,
+			tags: fakeTag(3),
+			date: faker.date.future(),
+			description: faker.lorem.lines(5),
+			attachments: [],
+			comments: fakeComment(3),
+		},
+		"task-5": {
+			id: "task-5",
+			title: faker.lorem.words(4),
+			reporter: faker.image.avatarGitHub(),
+			priority: TaskPriority.HIGH,
+			assignee: fakeAssignee(4),
+			tags: fakeTag(4),
+			date: faker.date.future(),
+			description: faker.lorem.lines(3),
+			attachments: [],
+			comments: fakeComment(4),
+		},
+		"task-6": {
+			id: "task-6",
+			title: faker.lorem.words(5),
+			reporter: faker.image.avatarGitHub(),
+			priority: TaskPriority.LOW,
+
+			assignee: fakeAssignee(5),
+			tags: fakeTag(5),
+			date: faker.date.future(),
+			description: faker.lorem.lines(4),
+			attachments: fakeAttachment(5),
+			comments: fakeComment(4),
+		},
+	},
+	columns: {
+		"column-1": {
+			id: "column-1",
+			title: "To do",
+			taskIds: ["task-1", "task-2", "task-3"],
+		},
+		"column-2": {
+			id: "column-2",
+			title: "In progress",
+			taskIds: ["task-4", "task-5"],
+		},
+		"column-3": {
+			id: "column-3",
+			title: "Done",
+			taskIds: ["task-6"],
+		},
+	},
+	columnOrder: ["column-1", "column-2", "column-3"],
+};
diff --git a/apps/react-admin/src/pages/sys/others/kanban/types.ts b/apps/react-admin/src/pages/sys/others/kanban/types.ts
new file mode 100644
index 000000000..154a2ae07
--- /dev/null
+++ b/apps/react-admin/src/pages/sys/others/kanban/types.ts
@@ -0,0 +1,56 @@
+export enum TaskPriority {
+	LOW = "Low",
+	MEDIUM = "Medium",
+	HIGH = "High",
+}
+
+export enum TaskTag {
+	frontend = "FrontEnd",
+	backend = "BackEnd",
+	fullstack = "FullStack",
+	DevOps = "DevOps",
+	AI = "AI",
+	DBA = "DBA",
+	UI = "UI",
+	UE = "UE",
+	QA = "QA",
+}
+
+export type TaskComment = {
+	username: string;
+	avatar: string;
+	content: string;
+	time: Date;
+};
+
+export type Task = {
+	id: string;
+	title: string;
+	reporter: string; // avatar
+	priority: TaskPriority;
+	assignee?: string[]; // avatar array
+	tags?: string[];
+	date?: Date;
+	description?: string;
+	comments?: TaskComment[];
+	attachments?: string[];
+};
+export type Tasks = Record<string, Task>;
+
+export type Column = {
+	id: string;
+	title: string;
+	taskIds: string[];
+};
+export type Columns = Record<string, Column>;
+
+export type DndDataType = {
+	tasks: Tasks;
+	columns: Columns;
+	columnOrder: string[];
+};
+
+export enum DragType {
+	COLUMN = "column",
+	TASK = "task",
+}
diff --git a/apps/react-admin/src/request-client/index.ts b/apps/react-admin/src/request-client/index.ts
new file mode 100644
index 000000000..bd7e8eff9
--- /dev/null
+++ b/apps/react-admin/src/request-client/index.ts
@@ -0,0 +1,3 @@
+export * from "./preset-interceptors";
+export * from "./request-client";
+export type * from "./types";
diff --git a/apps/react-admin/src/request-client/modules/downloader.test.ts b/apps/react-admin/src/request-client/modules/downloader.test.ts
new file mode 100644
index 000000000..7685a293b
--- /dev/null
+++ b/apps/react-admin/src/request-client/modules/downloader.test.ts
@@ -0,0 +1,76 @@
+import type { AxiosRequestConfig } from "axios";
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { FileDownloader } from "./downloader";
+
+describe("fileDownloader", () => {
+	let fileDownloader: FileDownloader;
+	const mockAxiosInstance = {
+		get: vi.fn(),
+	} as any;
+
+	beforeEach(() => {
+		fileDownloader = new FileDownloader(mockAxiosInstance);
+	});
+
+	it("should create an instance of FileDownloader", () => {
+		expect(fileDownloader).toBeInstanceOf(FileDownloader);
+	});
+
+	it("should download a file and return a Blob", async () => {
+		const url = "https://example.com/file";
+		const mockBlob = new Blob(["file content"], { type: "text/plain" });
+		const mockResponse: Blob = mockBlob;
+
+		mockAxiosInstance.get.mockResolvedValueOnce(mockResponse);
+
+		const result = await fileDownloader.download(url);
+
+		expect(result).toBeInstanceOf(Blob);
+		expect(result).toEqual(mockBlob);
+		expect(mockAxiosInstance.get).toHaveBeenCalledWith(url, {
+			responseType: "blob",
+		});
+	});
+
+	it("should merge provided config with default config", async () => {
+		const url = "https://example.com/file";
+		const mockBlob = new Blob(["file content"], { type: "text/plain" });
+		const mockResponse: Blob = mockBlob;
+
+		mockAxiosInstance.get.mockResolvedValueOnce(mockResponse);
+
+		const customConfig: AxiosRequestConfig = {
+			headers: { "Custom-Header": "value" },
+		};
+
+		const result = await fileDownloader.download(url, customConfig);
+		expect(result).toBeInstanceOf(Blob);
+		expect(result).toEqual(mockBlob);
+		expect(mockAxiosInstance.get).toHaveBeenCalledWith(url, {
+			...customConfig,
+			responseType: "blob",
+		});
+	});
+
+	it("should handle errors gracefully", async () => {
+		const url = "https://example.com/file";
+		mockAxiosInstance.get.mockRejectedValueOnce(new Error("Network Error"));
+		await expect(fileDownloader.download(url)).rejects.toThrow("Network Error");
+	});
+
+	it("should handle empty URL gracefully", async () => {
+		const url = "";
+		mockAxiosInstance.get.mockRejectedValueOnce(new Error("Request failed with status code 404"));
+
+		await expect(fileDownloader.download(url)).rejects.toThrow("Request failed with status code 404");
+	});
+
+	it("should handle null URL gracefully", async () => {
+		const url = null as unknown as string;
+		mockAxiosInstance.get.mockRejectedValueOnce(new Error("Request failed with status code 404"));
+
+		await expect(fileDownloader.download(url)).rejects.toThrow("Request failed with status code 404");
+	});
+});
diff --git a/apps/react-admin/src/request-client/modules/downloader.ts b/apps/react-admin/src/request-client/modules/downloader.ts
new file mode 100644
index 000000000..176e85beb
--- /dev/null
+++ b/apps/react-admin/src/request-client/modules/downloader.ts
@@ -0,0 +1,25 @@
+import type { AxiosRequestConfig } from "axios";
+
+import type { RequestClient } from "../request-client";
+import type { RequestResponse } from "../types";
+
+class FileDownloader {
+	private client: RequestClient;
+
+	constructor(client: RequestClient) {
+		this.client = client;
+	}
+
+	public async download(url: string, config?: AxiosRequestConfig): Promise<RequestResponse<Blob>> {
+		const finalConfig: AxiosRequestConfig = {
+			...config,
+			responseType: "blob",
+		};
+
+		const response = await this.client.get<RequestResponse<Blob>>(url, finalConfig);
+
+		return response;
+	}
+}
+
+export { FileDownloader };
diff --git a/apps/react-admin/src/request-client/modules/interceptor.ts b/apps/react-admin/src/request-client/modules/interceptor.ts
new file mode 100644
index 000000000..e36a686aa
--- /dev/null
+++ b/apps/react-admin/src/request-client/modules/interceptor.ts
@@ -0,0 +1,34 @@
+import type { AxiosInstance, AxiosResponse } from "axios";
+
+import type { RequestInterceptorConfig, ResponseInterceptorConfig } from "../types";
+
+const defaultRequestInterceptorConfig: RequestInterceptorConfig = {
+	fulfilled: (response) => response,
+	rejected: (error) => Promise.reject(error),
+};
+
+const defaultResponseInterceptorConfig: ResponseInterceptorConfig = {
+	fulfilled: (response: AxiosResponse) => response,
+	rejected: (error) => Promise.reject(error),
+};
+
+class InterceptorManager {
+	private axiosInstance: AxiosInstance;
+
+	constructor(instance: AxiosInstance) {
+		this.axiosInstance = instance;
+	}
+
+	addRequestInterceptor({ fulfilled, rejected }: RequestInterceptorConfig = defaultRequestInterceptorConfig) {
+		this.axiosInstance.interceptors.request.use(fulfilled, rejected);
+	}
+
+	addResponseInterceptor<T = any>({
+		fulfilled,
+		rejected,
+	}: ResponseInterceptorConfig<T> = defaultResponseInterceptorConfig) {
+		this.axiosInstance.interceptors.response.use(fulfilled, rejected);
+	}
+}
+
+export { InterceptorManager };
diff --git a/apps/react-admin/src/request-client/modules/uploader.test.ts b/apps/react-admin/src/request-client/modules/uploader.test.ts
new file mode 100644
index 000000000..f0cca88a8
--- /dev/null
+++ b/apps/react-admin/src/request-client/modules/uploader.test.ts
@@ -0,0 +1,98 @@
+import type { AxiosRequestConfig, AxiosResponse } from "axios";
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { FileUploader } from "./uploader";
+
+describe("fileUploader", () => {
+	let fileUploader: FileUploader;
+	// Mock the AxiosInstance
+	const mockAxiosInstance = {
+		post: vi.fn(),
+	} as any;
+
+	beforeEach(() => {
+		fileUploader = new FileUploader(mockAxiosInstance);
+	});
+
+	it("should create an instance of FileUploader", () => {
+		expect(fileUploader).toBeInstanceOf(FileUploader);
+	});
+
+	it("should upload a file and return the response", async () => {
+		const url = "https://example.com/upload";
+		const file = new File(["file content"], "test.txt", { type: "text/plain" });
+		const mockResponse: AxiosResponse = {
+			config: {} as any,
+			data: { success: true },
+			headers: {},
+			status: 200,
+			statusText: "OK",
+		};
+
+		(mockAxiosInstance.post as unknown as ReturnType<typeof vi.fn>).mockResolvedValueOnce(mockResponse);
+
+		const result = await fileUploader.upload(url, { file });
+		expect(result).toEqual(mockResponse);
+		expect(mockAxiosInstance.post).toHaveBeenCalledWith(url, expect.any(FormData), {
+			headers: {
+				"Content-Type": "multipart/form-data",
+			},
+		});
+	});
+
+	it("should merge provided config with default config", async () => {
+		const url = "https://example.com/upload";
+		const file = new File(["file content"], "test.txt", { type: "text/plain" });
+		const mockResponse: AxiosResponse = {
+			config: {} as any,
+			data: { success: true },
+			headers: {},
+			status: 200,
+			statusText: "OK",
+		};
+
+		(mockAxiosInstance.post as unknown as ReturnType<typeof vi.fn>).mockResolvedValueOnce(mockResponse);
+
+		const customConfig: AxiosRequestConfig = {
+			headers: { "Custom-Header": "value" },
+		};
+
+		const result = await fileUploader.upload(url, { file }, customConfig);
+		expect(result).toEqual(mockResponse);
+		expect(mockAxiosInstance.post).toHaveBeenCalledWith(url, expect.any(FormData), {
+			headers: {
+				"Content-Type": "multipart/form-data",
+				"Custom-Header": "value",
+			},
+		});
+	});
+
+	it("should handle errors gracefully", async () => {
+		const url = "https://example.com/upload";
+		const file = new File(["file content"], "test.txt", { type: "text/plain" });
+		(mockAxiosInstance.post as unknown as ReturnType<typeof vi.fn>).mockRejectedValueOnce(new Error("Network Error"));
+
+		await expect(fileUploader.upload(url, { file })).rejects.toThrow("Network Error");
+	});
+
+	it("should handle empty URL gracefully", async () => {
+		const url = "";
+		const file = new File(["file content"], "test.txt", { type: "text/plain" });
+		(mockAxiosInstance.post as unknown as ReturnType<typeof vi.fn>).mockRejectedValueOnce(
+			new Error("Request failed with status code 404"),
+		);
+
+		await expect(fileUploader.upload(url, { file })).rejects.toThrow("Request failed with status code 404");
+	});
+
+	it("should handle null URL gracefully", async () => {
+		const url = null as unknown as string;
+		const file = new File(["file content"], "test.txt", { type: "text/plain" });
+		(mockAxiosInstance.post as unknown as ReturnType<typeof vi.fn>).mockRejectedValueOnce(
+			new Error("Request failed with status code 404"),
+		);
+
+		await expect(fileUploader.upload(url, { file })).rejects.toThrow("Request failed with status code 404");
+	});
+});
diff --git a/apps/react-admin/src/request-client/modules/uploader.ts b/apps/react-admin/src/request-client/modules/uploader.ts
new file mode 100644
index 000000000..3401aa940
--- /dev/null
+++ b/apps/react-admin/src/request-client/modules/uploader.ts
@@ -0,0 +1,35 @@
+import type { AxiosRequestConfig, AxiosResponse } from "axios";
+
+import type { RequestClient } from "../request-client";
+
+class FileUploader {
+	private client: RequestClient;
+
+	constructor(client: RequestClient) {
+		this.client = client;
+	}
+
+	public async upload(
+		url: string,
+		data: { file: Blob | File } & Record<string, any>,
+		config?: AxiosRequestConfig,
+	): Promise<AxiosResponse> {
+		const formData = new FormData();
+
+		Object.entries(data).forEach(([key, value]) => {
+			formData.append(key, value);
+		});
+
+		const finalConfig: AxiosRequestConfig = {
+			...config,
+			headers: {
+				"Content-Type": "multipart/form-data",
+				...config?.headers,
+			},
+		};
+
+		return this.client.post(url, formData, finalConfig);
+	}
+}
+
+export { FileUploader };
diff --git a/apps/react-admin/src/request-client/preset-interceptors.ts b/apps/react-admin/src/request-client/preset-interceptors.ts
new file mode 100644
index 000000000..154046e4b
--- /dev/null
+++ b/apps/react-admin/src/request-client/preset-interceptors.ts
@@ -0,0 +1,124 @@
+import type { RequestClient } from "./request-client";
+import type { MakeErrorMessageFn, ResponseInterceptorConfig } from "./types";
+
+import { t as $t } from "@/locales/i18n";
+
+import axios from "axios";
+
+export const authenticateResponseInterceptor = ({
+	client,
+	doReAuthenticate,
+	doRefreshToken,
+	enableRefreshToken,
+	formatToken,
+}: {
+	client: RequestClient;
+	doReAuthenticate: () => Promise<void>;
+	enableRefreshToken: boolean;
+	doRefreshToken: () => Promise<string>;
+	formatToken: (token: string) => null | string;
+}): ResponseInterceptorConfig => {
+	return {
+		rejected: async (error) => {
+			const { config, response } = error;
+			// 如果不是 401 错误，直接抛出异常
+			if (response?.status !== 401) {
+				throw error;
+			}
+			// 判断是否启用了 refreshToken 功能
+			// 如果没有启用或者已经是重试请求了，直接跳转到重新登录
+			if (!enableRefreshToken || config.__isRetryRequest) {
+				await doReAuthenticate();
+				throw error;
+			}
+			// 如果正在刷新 token，则将请求加入队列，等待刷新完成
+			if (client.isRefreshing) {
+				return new Promise((resolve) => {
+					client.refreshTokenQueue.push((newToken: string) => {
+						config.headers.Authorization = formatToken(newToken);
+						resolve(client.request(config.url, { ...config }));
+					});
+				});
+			}
+
+			// 标记开始刷新 token
+			client.isRefreshing = true;
+			// 标记当前请求为重试请求，避免无限循环
+			config.__isRetryRequest = true;
+
+			try {
+				const newToken = await doRefreshToken();
+
+				// 处理队列中的请求
+				client.refreshTokenQueue.forEach((callback) => callback(newToken));
+				// 清空队列
+				client.refreshTokenQueue = [];
+
+				return client.request(error.config.url, { ...error.config });
+			} catch (refreshError) {
+				// 如果刷新 token 失败，处理错误（如强制登出或跳转登录页面）
+				client.refreshTokenQueue.forEach((callback) => callback(""));
+				client.refreshTokenQueue = [];
+				console.error("Refresh token failed, please login again.");
+				await doReAuthenticate();
+
+				throw refreshError;
+			} finally {
+				client.isRefreshing = false;
+			}
+		},
+	};
+};
+
+export const errorMessageResponseInterceptor = (makeErrorMessage?: MakeErrorMessageFn): ResponseInterceptorConfig => {
+	return {
+		rejected: (error: any) => {
+			if (axios.isCancel(error)) {
+				return Promise.reject(error);
+			}
+
+			const err: string = error?.toString?.() ?? "";
+			let errMsg = "";
+			if (err?.includes("Network Error")) {
+				errMsg = $t("ui.fallback.http.networkError");
+			} else if (error?.message?.includes?.("timeout")) {
+				errMsg = $t("ui.fallback.http.requestTimeout");
+			}
+			if (errMsg) {
+				makeErrorMessage?.(errMsg, error);
+				return Promise.reject(error);
+			}
+
+			let errorMessage = "";
+			const status = error?.response?.status;
+
+			switch (status) {
+				case 400: {
+					errorMessage = $t("ui.fallback.http.badRequest");
+					break;
+				}
+				case 401: {
+					errorMessage = $t("ui.fallback.http.unauthorized");
+					break;
+				}
+				case 403: {
+					errorMessage = $t("ui.fallback.http.forbidden");
+					break;
+				}
+				case 404: {
+					errorMessage = $t("ui.fallback.http.notFound");
+					break;
+				}
+				case 408: {
+					errorMessage = $t("ui.fallback.http.requestTimeout");
+					break;
+				}
+				default: {
+					errorMessage = $t("ui.fallback.http.internalServerError");
+				}
+			}
+			makeErrorMessage?.(errorMessage, error);
+			return Promise.reject(error);
+		},
+	};
+};
diff --git a/apps/react-admin/src/request-client/request-client.test.ts b/apps/react-admin/src/request-client/request-client.test.ts
new file mode 100644
index 000000000..ad1d6e5f1
--- /dev/null
+++ b/apps/react-admin/src/request-client/request-client.test.ts
@@ -0,0 +1,99 @@
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { RequestClient } from "./request-client";
+
+describe("requestClient", () => {
+	let mock: MockAdapter;
+	let requestClient: RequestClient;
+
+	beforeEach(() => {
+		mock = new MockAdapter(axios);
+		requestClient = new RequestClient();
+	});
+
+	afterEach(() => {
+		mock.reset();
+	});
+
+	it("should successfully make a GET request", async () => {
+		mock.onGet("test/url").reply(200, { data: "response" });
+
+		const response = await requestClient.get("test/url");
+
+		expect(response.data).toEqual({ data: "response" });
+	});
+
+	it("should successfully make a POST request", async () => {
+		const postData = { key: "value" };
+		const mockData = { data: "response" };
+		mock.onPost("/test/post", postData).reply(200, mockData);
+		const response = await requestClient.post("/test/post", postData);
+		expect(response.data).toEqual(mockData);
+	});
+
+	it("should successfully make a PUT request", async () => {
+		const putData = { key: "updatedValue" };
+		const mockData = { data: "updated response" };
+		mock.onPut("/test/put", putData).reply(200, mockData);
+		const response = await requestClient.put("/test/put", putData);
+		expect(response.data).toEqual(mockData);
+	});
+
+	it("should successfully make a DELETE request", async () => {
+		const mockData = { data: "delete response" };
+		mock.onDelete("/test/delete").reply(200, mockData);
+		const response = await requestClient.delete("/test/delete");
+		expect(response.data).toEqual(mockData);
+	});
+
+	it("should handle network errors", async () => {
+		mock.onGet("/test/error").networkError();
+		try {
+			await requestClient.get("/test/error");
+			expect(true).toBe(false);
+		} catch (error: any) {
+			expect(error.isAxiosError).toBe(true);
+			expect(error.message).toBe("Network Error");
+		}
+	});
+
+	it("should handle timeout", async () => {
+		mock.onGet("/test/timeout").timeout();
+		try {
+			await requestClient.get("/test/timeout");
+			expect(true).toBe(false);
+		} catch (error: any) {
+			expect(error.isAxiosError).toBe(true);
+			expect(error.code).toBe("ECONNABORTED");
+		}
+	});
+
+	it("should successfully upload a file", async () => {
+		const fileData = new Blob(["file contents"], { type: "text/plain" });
+
+		mock.onPost("/test/upload").reply((config) => {
+			return config.data instanceof FormData && config.data.has("file")
+				? [200, { data: "file uploaded" }]
+				: [400, { error: "Bad Request" }];
+		});
+
+		const response = await requestClient.upload("/test/upload", {
+			file: fileData,
+		});
+		expect(response.data).toEqual({ data: "file uploaded" });
+	});
+
+	it("should successfully download a file as a blob", async () => {
+		const mockFileContent = new Blob(["mock file content"], {
+			type: "text/plain",
+		});
+
+		mock.onGet("/test/download").reply(200, mockFileContent);
+
+		const res = await requestClient.download("/test/download");
+
+		expect(res.data).toBeInstanceOf(Blob);
+	});
+});
diff --git a/apps/react-admin/src/request-client/request-client.ts b/apps/react-admin/src/request-client/request-client.ts
new file mode 100644
index 000000000..2c5e65d18
--- /dev/null
+++ b/apps/react-admin/src/request-client/request-client.ts
@@ -0,0 +1,101 @@
+import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, CreateAxiosDefaults } from "axios";
+
+import axios from "axios";
+
+import { FileDownloader } from "./modules/downloader";
+import { InterceptorManager } from "./modules/interceptor";
+import { FileUploader } from "./modules/uploader";
+import type { RequestClientOptions } from "./types";
+import { merge } from "@/utils/merge";
+import { bindMethods } from "@/utils";
+
+class RequestClient {
+	private readonly instance: AxiosInstance;
+
+	public addRequestInterceptor: InterceptorManager["addRequestInterceptor"];
+	public addResponseInterceptor: InterceptorManager["addResponseInterceptor"];
+
+	public download: FileDownloader["download"];
+	// 是否正在刷新token
+	public isRefreshing = false;
+	// 刷新token队列
+	public refreshTokenQueue: ((token: string) => void)[] = [];
+	public upload: FileUploader["upload"];
+
+	/**
+	 * 构造函数，用于创建Axios实例
+	 * @param options - Axios请求配置，可选
+	 */
+	constructor(options: RequestClientOptions = {}) {
+		// 合并默认配置和传入的配置
+		const defaultConfig: CreateAxiosDefaults = {
+			headers: {
+				"Content-Type": "application/json;charset=utf-8",
+			},
+			// 默认超时时间
+			timeout: 10_000,
+		};
+		const { ...axiosConfig } = options;
+		const requestConfig = merge(axiosConfig, defaultConfig);
+		this.instance = axios.create(requestConfig);
+
+		bindMethods(this);
+
+		// 实例化拦截器管理器
+		const interceptorManager = new InterceptorManager(this.instance);
+		this.addRequestInterceptor = interceptorManager.addRequestInterceptor.bind(interceptorManager);
+		this.addResponseInterceptor = interceptorManager.addResponseInterceptor.bind(interceptorManager);
+
+		// 实例化文件上传器
+		const fileUploader = new FileUploader(this);
+		this.upload = fileUploader.upload.bind(fileUploader);
+		// 实例化文件下载器
+		const fileDownloader = new FileDownloader(this);
+		this.download = fileDownloader.download.bind(fileDownloader);
+	}
+
+	/**
+	 * DELETE请求方法
+	 */
+	public delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+		return this.request<T>(url, { ...config, method: "DELETE" });
+	}
+
+	/**
+	 * GET请求方法
+	 */
+	public get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+		return this.request<T>(url, { ...config, method: "GET" });
+	}
+
+	/**
+	 * POST请求方法
+	 */
+	public post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+		return this.request<T>(url, { ...config, data, method: "POST" });
+	}
+
+	/**
+	 * PUT请求方法
+	 */
+	public put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+		return this.request<T>(url, { ...config, data, method: "PUT" });
+	}
+
+	/**
+	 * 通用的请求方法
+	 */
+	public async request<T>(url: string, config: AxiosRequestConfig): Promise<T> {
+		try {
+			const response: AxiosResponse<T> = await this.instance({
+				url,
+				...config,
+			});
+			return response as T;
+		} catch (error: any) {
+			throw error.response ? error.response.data : error;
+		}
+	}
+}
+
+export { RequestClient };
diff --git a/apps/react-admin/src/request-client/types.ts b/apps/react-admin/src/request-client/types.ts
new file mode 100644
index 000000000..62cb78d24
--- /dev/null
+++ b/apps/react-admin/src/request-client/types.ts
@@ -0,0 +1,45 @@
+import type { AxiosResponse, CreateAxiosDefaults, InternalAxiosRequestConfig } from "axios";
+
+type RequestResponse<T = any> = AxiosResponse<T>;
+
+type RequestContentType =
+	| "application/json;charset=utf-8"
+	| "application/octet-stream;charset=utf-8"
+	| "application/x-www-form-urlencoded;charset=utf-8"
+	| "multipart/form-data;charset=utf-8";
+
+type RequestClientOptions = CreateAxiosDefaults;
+
+interface RequestInterceptorConfig {
+	fulfilled?: (
+		config: InternalAxiosRequestConfig,
+	) => InternalAxiosRequestConfig<any> | Promise<InternalAxiosRequestConfig<any>>;
+	rejected?: (error: any) => any;
+}
+
+interface ResponseInterceptorConfig<T = any> {
+	fulfilled?: (response: AxiosResponse<T>) => AxiosResponse | Promise<AxiosResponse>;
+	rejected?: (error: any) => any;
+}
+
+type MakeErrorMessageFn = (message: string, error: any) => void;
+
+interface HttpResponse<T = any> {
+	/**
+	 * 0 表示成功 其他表示失败
+	 * 0 means success, others means fail
+	 */
+	code: number;
+	data: T;
+	message: string;
+}
+
+export type {
+	HttpResponse,
+	MakeErrorMessageFn,
+	RequestClientOptions,
+	RequestContentType,
+	RequestInterceptorConfig,
+	RequestResponse,
+	ResponseInterceptorConfig,
+};
diff --git a/apps/react-admin/src/router/components/auth-guard.tsx b/apps/react-admin/src/router/components/auth-guard.tsx
new file mode 100644
index 000000000..b08c4c0fd
--- /dev/null
+++ b/apps/react-admin/src/router/components/auth-guard.tsx
@@ -0,0 +1,27 @@
+import { useCallback, useEffect } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+import { useUserToken } from "@/store/userStore";
+
+import PageError from "@/pages/sys/error/PageError";
+import { useRouter } from "../hooks";
+
+type Props = {
+	children: React.ReactNode;
+};
+export default function AuthGuard({ children }: Props) {
+	const router = useRouter();
+	const { accessToken } = useUserToken();
+
+	const check = useCallback(() => {
+		if (!accessToken) {
+			router.replace("/login");
+		}
+	}, [router, accessToken]);
+
+	useEffect(() => {
+		check();
+	}, [check]);
+
+	return <ErrorBoundary FallbackComponent={PageError}>{children}</ErrorBoundary>;
+}
diff --git a/apps/react-admin/src/router/hooks/index.ts b/apps/react-admin/src/router/hooks/index.ts
new file mode 100644
index 000000000..782080db4
--- /dev/null
+++ b/apps/react-admin/src/router/hooks/index.ts
@@ -0,0 +1,8 @@
+export { useParams } from "./use-params";
+export { usePathname } from "./use-pathname";
+export { useSearchParams } from "./use-search-params";
+export { useRouter } from "./use-router";
+export { useRouteToMenuFn } from "./use-route-to-menu";
+export { usePermissionRoutes } from "./use-permission-routes";
+export { useCurrentRouteMeta } from "./use-current-route-meta";
+export { useFlattenedRoutes } from "./use-flattened-routes";
diff --git a/apps/react-admin/src/router/hooks/use-current-route-meta.tsx b/apps/react-admin/src/router/hooks/use-current-route-meta.tsx
new file mode 100644
index 000000000..781a1a225
--- /dev/null
+++ b/apps/react-admin/src/router/hooks/use-current-route-meta.tsx
@@ -0,0 +1,75 @@
+import { isEmpty } from "ramda";
+import { useEffect, useState } from "react";
+import { type Params, useMatches, useOutlet } from "react-router";
+
+import { useFlattenedRoutes } from "./use-flattened-routes";
+import { useRouter } from "./use-router";
+
+import type { RouteMeta } from "#/router";
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+/**
+ * 返回当前路由Meta信息
+ */
+export function useCurrentRouteMeta() {
+	// const pathname = usePathname();
+	const { push } = useRouter();
+
+	// 获取路由组件实例
+	const children = useOutlet();
+
+	// 获取所有匹配的路由
+	const matchs = useMatches();
+
+	// 获取拍平后的路由菜单
+	const flattenedRoutes = useFlattenedRoutes();
+
+	const [currentRouteMeta, setCurrentRouteMeta] = useState<RouteMeta>();
+
+	useEffect(() => {
+		// 获取当前匹配的路由
+		const lastRoute = matchs.at(-1);
+		if (!lastRoute) return;
+
+		const { pathname, params } = lastRoute;
+		const matchedRouteMeta = flattenedRoutes.find((item) => {
+			const replacedKey = replaceDynamicParams(item.key, params);
+			return replacedKey === pathname || `${replacedKey}/` === pathname;
+		});
+
+		if (matchedRouteMeta) {
+			matchedRouteMeta.outlet = children;
+			if (!isEmpty(params)) {
+				matchedRouteMeta.params = params;
+			}
+			setCurrentRouteMeta({ ...matchedRouteMeta });
+		} else {
+			push(HOMEPAGE);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [matchs]);
+
+	return currentRouteMeta;
+}
+
+/**
+ * replace `user/:id`  to `/user/1234512345`
+ */
+export const replaceDynamicParams = (menuKey: string, params: Params<string>) => {
+	let replacedPathName = menuKey;
+
+	// 解析路由路径中的参数名称
+	const paramNames = menuKey.match(/:\w+/g);
+
+	if (paramNames) {
+		for (const paramName of paramNames) {
+			// 去掉冒号，获取参数名称
+			const paramKey = paramName.slice(1);
+			if (!params[paramKey]) continue;
+
+			replacedPathName = replacedPathName.replace(paramName, params[paramKey]);
+		}
+	}
+
+	return replacedPathName;
+};
diff --git a/apps/react-admin/src/router/hooks/use-flattened-routes.ts b/apps/react-admin/src/router/hooks/use-flattened-routes.ts
new file mode 100644
index 000000000..2262429a1
--- /dev/null
+++ b/apps/react-admin/src/router/hooks/use-flattened-routes.ts
@@ -0,0 +1,17 @@
+import { useCallback, useMemo } from "react";
+
+import { flattenMenuRoutes, menuFilter } from "../utils";
+
+import { usePermissionRoutes } from "./use-permission-routes";
+
+/**
+ * 返回拍平后的菜单路由
+ */
+export function useFlattenedRoutes() {
+	const flattenRoutes = useCallback(flattenMenuRoutes, []);
+	const permissionRoutes = usePermissionRoutes();
+	return useMemo(() => {
+		const menuRoutes = menuFilter(permissionRoutes);
+		return flattenRoutes(menuRoutes);
+	}, [flattenRoutes, permissionRoutes]);
+}
diff --git a/apps/react-admin/src/router/hooks/use-params.ts b/apps/react-admin/src/router/hooks/use-params.ts
new file mode 100644
index 000000000..fd8b33731
--- /dev/null
+++ b/apps/react-admin/src/router/hooks/use-params.ts
@@ -0,0 +1,8 @@
+import { useMemo } from "react";
+import { useParams as _useParams } from "react-router";
+
+export function useParams() {
+	const params = _useParams();
+
+	return useMemo(() => params, [params]);
+}
diff --git a/apps/react-admin/src/router/hooks/use-pathname.ts b/apps/react-admin/src/router/hooks/use-pathname.ts
new file mode 100644
index 000000000..3205a8d67
--- /dev/null
+++ b/apps/react-admin/src/router/hooks/use-pathname.ts
@@ -0,0 +1,8 @@
+import { useMemo } from "react";
+import { useLocation } from "react-router";
+
+export function usePathname() {
+	const { pathname } = useLocation();
+
+	return useMemo(() => pathname, [pathname]);
+}
diff --git a/apps/react-admin/src/router/hooks/use-permission-routes.tsx b/apps/react-admin/src/router/hooks/use-permission-routes.tsx
new file mode 100644
index 000000000..cf3e510fa
--- /dev/null
+++ b/apps/react-admin/src/router/hooks/use-permission-routes.tsx
@@ -0,0 +1,159 @@
+import { isEmpty } from "ramda";
+import { Suspense, lazy, useMemo } from "react";
+import { Navigate, Outlet } from "react-router";
+
+import { Iconify } from "@/components/icon";
+import { CircleLoading } from "@/components/loading";
+import { useUserPermission } from "@/store/userStore";
+import { flattenTrees } from "@/utils/tree";
+
+import type { Permission } from "#/entity";
+import { BasicStatus, PermissionType } from "#/enum";
+import type { AppRouteObject } from "#/router";
+import { Tag } from "antd";
+import { getRoutesFromModules } from "../utils";
+
+const ENTRY_PATH = "/src/pages";
+const PAGES = import.meta.glob("/src/pages/**/*.tsx");
+const loadComponentFromPath = (path: string) => PAGES[`${ENTRY_PATH}${path}`];
+
+/**
+ * Build complete route path by traversing from current permission to root
+ * @param {Permission} permission - current permission
+ * @param {Permission[]} flattenedPermissions - flattened permission array
+ * @param {string[]} segments - route segments accumulator
+ * @returns {string} normalized complete route path
+ */
+function buildCompleteRoute(
+	permission: Permission,
+	flattenedPermissions: Permission[],
+	segments: string[] = [],
+): string {
+	// Add current route segment
+	segments.unshift(permission.route);
+
+	// Base case: reached root permission
+	if (!permission.parentId) {
+		return `/${segments.join("/")}`;
+	}
+
+	// Find parent and continue recursion
+	const parent = flattenedPermissions.find((p) => p.id === permission.parentId);
+	if (!parent) {
+		console.warn(`Parent permission not found for ID: ${permission.parentId}`);
+		return `/${segments.join("/")}`;
+	}
+
+	return buildCompleteRoute(parent, flattenedPermissions, segments);
+}
+
+// Components
+function NewFeatureTag() {
+	return (
+		<Tag color="cyan" className="!ml-2">
+			<div className="flex items-center gap-1">
+				<Iconify icon="solar:bell-bing-bold-duotone" size={12} />
+				<span className="ms-1">NEW</span>
+			</div>
+		</Tag>
+	);
+}
+
+function RouteWrapper({ children }: { children: React.ReactNode }) {
+	return <Suspense fallback={<CircleLoading />}>{children}</Suspense>;
+}
+
+// Route Transformers
+const createBaseRoute = (permission: Permission, completeRoute: string): AppRouteObject => {
+	const { route, label, icon, order, hide, hideTab, status, frameSrc, newFeature } = permission;
+
+	const baseRoute: AppRouteObject = {
+		path: route,
+		meta: {
+			label,
+			key: completeRoute,
+			hideMenu: !!hide,
+			hideTab,
+			disabled: status === BasicStatus.DISABLE,
+		},
+	};
+
+	if (order) baseRoute.order = order;
+	if (baseRoute.meta) {
+		if (icon) baseRoute.meta.icon = icon;
+		if (frameSrc) baseRoute.meta.frameSrc = frameSrc;
+		if (newFeature) baseRoute.meta.suffix = <NewFeatureTag />;
+	}
+
+	return baseRoute;
+};
+
+const createCatalogueRoute = (permission: Permission, flattenedPermissions: Permission[]): AppRouteObject => {
+	const baseRoute = createBaseRoute(permission, buildCompleteRoute(permission, flattenedPermissions));
+
+	if (baseRoute.meta) {
+		baseRoute.meta.hideTab = true;
+	}
+
+	const { parentId, children = [] } = permission;
+	if (!parentId) {
+		baseRoute.element = (
+			<RouteWrapper>
+				<Outlet />
+			</RouteWrapper>
+		);
+	}
+
+	baseRoute.children = transformPermissionsToRoutes(children, flattenedPermissions);
+
+	if (!isEmpty(children)) {
+		baseRoute.children.unshift({
+			index: true,
+			element: <Navigate to={children[0].route} replace />,
+		});
+	}
+
+	return baseRoute;
+};
+
+const createMenuRoute = (permission: Permission, flattenedPermissions: Permission[]): AppRouteObject => {
+	const baseRoute = createBaseRoute(permission, buildCompleteRoute(permission, flattenedPermissions));
+
+	if (permission.component) {
+		const Element = lazy(loadComponentFromPath(permission.component) as any);
+		baseRoute.element = permission.frameSrc ? (
+			<Element src={permission.frameSrc} />
+		) : (
+			<RouteWrapper>
+				<Element />
+			</RouteWrapper>
+		);
+	}
+
+	return baseRoute;
+};
+
+// Main Functions
+function transformPermissionsToRoutes(permissions: Permission[], flattenedPermissions: Permission[]): AppRouteObject[] {
+	return permissions.map((permission) => {
+		if (permission.type === PermissionType.CATALOGUE) {
+			return createCatalogueRoute(permission, flattenedPermissions);
+		}
+		return createMenuRoute(permission, flattenedPermissions);
+	});
+}
+
+// Exports
+export function usePermissionRoutes() {
+	return useMemo(() => {
+		return getRoutesFromModules();
+	}, []);
+
+	// const permissions = useUserPermission();
+	// return useMemo(() => {
+	// 	if (!permissions) return [];
+
+	// 	const flattenedPermissions = flattenTrees(permissions);
+	// 	return transformPermissionsToRoutes(permissions, flattenedPermissions);
+	// }, [permissions]);
+}
diff --git a/apps/react-admin/src/router/hooks/use-route-to-menu.tsx b/apps/react-admin/src/router/hooks/use-route-to-menu.tsx
new file mode 100644
index 000000000..33944dc42
--- /dev/null
+++ b/apps/react-admin/src/router/hooks/use-route-to-menu.tsx
@@ -0,0 +1,63 @@
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Iconify, SvgIcon } from "@/components/icon";
+
+import { useSettings } from "@/store/settingStore";
+import { cn } from "@/utils";
+import type { GetProp, MenuProps } from "antd";
+import { ThemeLayout } from "#/enum";
+import type { AppRouteObject } from "#/router";
+
+type MenuItem = GetProp<MenuProps, "items">[number];
+
+const renderIcon = (icon: string | React.ReactNode): React.ReactNode => {
+	if (typeof icon !== "string") return icon;
+
+	return icon.startsWith("ic") ? (
+		<SvgIcon icon={icon} size={24} className="ant-menu-item-icon" />
+	) : (
+		<Iconify icon={icon} size={24} className="ant-menu-item-icon" />
+	);
+};
+
+/**
+ *   routes -> menus
+ */
+export function useRouteToMenuFn() {
+	const { t } = useTranslation();
+	const { themeLayout } = useSettings();
+
+	const routeToMenuFn = useCallback(
+		(items: AppRouteObject[]): MenuItem[] => {
+			return items
+				.filter((item) => !item.meta?.hideMenu)
+				.map((item) => {
+					const { meta, children } = item;
+					if (!meta) return {} as MenuItem;
+
+					const menuItem: Partial<MenuItem> = {
+						key: meta.key,
+						disabled: meta.disabled,
+						label: (
+							<div
+								className={cn(
+									"inline-flex items-center overflow-hidden",
+									themeLayout === ThemeLayout.Horizontal ? "justify-start" : "justify-between",
+								)}
+							>
+								<div className="">{t(meta.label)}</div>
+								{meta.suffix}
+							</div>
+						),
+						...(meta.icon && { icon: renderIcon(meta.icon) }),
+						...(children && { children: routeToMenuFn(children) }),
+					};
+
+					return menuItem as MenuItem;
+				});
+		},
+		[t, themeLayout],
+	);
+	return routeToMenuFn;
+}
diff --git a/apps/react-admin/src/router/hooks/use-router.ts b/apps/react-admin/src/router/hooks/use-router.ts
new file mode 100644
index 000000000..f6ab6545a
--- /dev/null
+++ b/apps/react-admin/src/router/hooks/use-router.ts
@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import { useNavigate } from "react-router";
+
+export function useRouter() {
+	const navigate = useNavigate();
+
+	const router = useMemo(
+		() => ({
+			back: () => navigate(-1),
+			forward: () => navigate(1),
+			reload: () => window.location.reload(),
+			push: (href: string) => navigate(href),
+			replace: (href: string) => navigate(href, { replace: true }),
+		}),
+		[navigate],
+	);
+
+	return router;
+}
diff --git a/apps/react-admin/src/router/hooks/use-search-params.ts b/apps/react-admin/src/router/hooks/use-search-params.ts
new file mode 100644
index 000000000..8a9acc1de
--- /dev/null
+++ b/apps/react-admin/src/router/hooks/use-search-params.ts
@@ -0,0 +1,8 @@
+import { useMemo } from "react";
+import { useSearchParams as _useSearchParams } from "react-router";
+
+export function useSearchParams() {
+	const [searchParams] = _useSearchParams();
+
+	return useMemo(() => searchParams, [searchParams]);
+}
diff --git a/apps/react-admin/src/router/index.tsx b/apps/react-admin/src/router/index.tsx
new file mode 100644
index 000000000..6daf5c350
--- /dev/null
+++ b/apps/react-admin/src/router/index.tsx
@@ -0,0 +1,45 @@
+import { Navigate, type RouteObject, createHashRouter } from "react-router";
+import { RouterProvider } from "react-router/dom";
+
+import DashboardLayout from "@/layouts/dashboard";
+import AuthGuard from "@/router/components/auth-guard";
+import { usePermissionRoutes } from "@/router/hooks";
+import { ErrorRoutes } from "@/router/routes/error-routes";
+
+import PageError from "@/pages/sys/error/PageError";
+import Login from "@/pages/sys/login/Login";
+import { ErrorBoundary } from "react-error-boundary";
+import type { AppRouteObject } from "#/router";
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+const LoginRoute: AppRouteObject = {
+	path: "/login",
+	element: (
+		<ErrorBoundary FallbackComponent={PageError}>
+			<Login />
+		</ErrorBoundary>
+	),
+};
+const PAGE_NOT_FOUND_ROUTE: AppRouteObject = {
+	path: "*",
+	element: <Navigate to="/404" replace />,
+};
+
+export default function Router() {
+	const permissionRoutes = usePermissionRoutes();
+	const asyncRoutes: AppRouteObject = {
+		path: "/",
+		element: (
+			<AuthGuard>
+				<DashboardLayout />
+			</AuthGuard>
+		),
+		children: [{ index: true, element: <Navigate to={HOMEPAGE} replace /> }, ...permissionRoutes],
+	};
+
+	const routes = [LoginRoute, asyncRoutes, ErrorRoutes, PAGE_NOT_FOUND_ROUTE];
+
+	const router = createHashRouter(routes as unknown as RouteObject[]);
+
+	return <RouterProvider router={router} />;
+}
diff --git a/apps/react-admin/src/router/routes/backup/components.tsx b/apps/react-admin/src/router/routes/backup/components.tsx
new file mode 100644
index 000000000..b81b71a62
--- /dev/null
+++ b/apps/react-admin/src/router/routes/backup/components.tsx
@@ -0,0 +1,85 @@
+import { Suspense, lazy } from "react";
+import { Navigate, Outlet } from "react-router";
+
+import { Iconify } from "@/components/icon";
+import { CircleLoading } from "@/components/loading";
+
+import ToastPage from "@/pages/components/toast";
+import type { AppRouteObject } from "#/router";
+
+const AnimatePage = lazy(() => import("@/pages/components/animate"));
+const ScrollPage = lazy(() => import("@/pages/components/scroll"));
+const MarkdownPage = lazy(() => import("@/pages/components/markdown"));
+const EditorPage = lazy(() => import("@/pages/components/editor"));
+const MultiLanguagePage = lazy(() => import("@/pages/components/multi-language"));
+const IconPage = lazy(() => import("@/pages/components/icon"));
+const UploadPage = lazy(() => import("@/pages/components/upload"));
+const ChartPage = lazy(() => import("@/pages/components/chart"));
+
+const components: AppRouteObject = {
+	order: 3,
+	path: "components",
+	element: (
+		<Suspense fallback={<CircleLoading />}>
+			<Outlet />
+		</Suspense>
+	),
+	meta: {
+		label: "sys.menu.components",
+		icon: <Iconify icon="solar:widget-5-bold-duotone" className="ant-menu-item-icon" size="24" />,
+		key: "/components",
+	},
+	children: [
+		{
+			index: true,
+			element: <Navigate to="icon" replace />,
+		},
+		{
+			path: "icon",
+			element: <IconPage />,
+			meta: { label: "sys.menu.icon", key: "/components/icon" },
+		},
+		{
+			path: "animate",
+			element: <AnimatePage />,
+			meta: { label: "sys.menu.animate", key: "/components/animate" },
+		},
+		{
+			path: "scroll",
+			element: <ScrollPage />,
+			meta: { label: "sys.menu.scroll", key: "/components/scroll" },
+		},
+		{
+			path: "markdown",
+			element: <MarkdownPage />,
+			meta: { label: "sys.menu.markdown", key: "/components/markdown" },
+		},
+		{
+			path: "editor",
+			element: <EditorPage />,
+			meta: { label: "sys.menu.editor", key: "/components/editor" },
+		},
+		{
+			path: "i18n",
+			element: <MultiLanguagePage />,
+			meta: { label: "sys.menu.i18n", key: "/components/i18n" },
+		},
+		{
+			path: "upload",
+			element: <UploadPage />,
+			meta: { label: "sys.menu.upload", key: "/components/upload" },
+		},
+		{
+			path: "chart",
+			element: <ChartPage />,
+			meta: { label: "sys.menu.chart", key: "/components/chart" },
+		},
+		{
+			path: "toast",
+			element: <ToastPage />,
+			meta: { label: "sys.menu.toast", key: "/components/toast" },
+		},
+	],
+};
+
+export default components;
diff --git a/apps/react-admin/src/router/routes/backup/errors.tsx b/apps/react-admin/src/router/routes/backup/errors.tsx
new file mode 100644
index 000000000..3d3e3edfc
--- /dev/null
+++ b/apps/react-admin/src/router/routes/backup/errors.tsx
@@ -0,0 +1,56 @@
+import { Suspense, lazy } from "react";
+import { Outlet } from "react-router";
+
+import { Iconify } from "@/components/icon";
+import { CircleLoading } from "@/components/loading";
+
+import type { AppRouteObject } from "#/router";
+
+const Page403 = lazy(() => import("@/pages/sys/error/Page403"));
+const Page404 = lazy(() => import("@/pages/sys/error/Page404"));
+const Page500 = lazy(() => import("@/pages/sys/error/Page500"));
+
+const errors: AppRouteObject[] = [
+	{
+		path: "error",
+		order: 6,
+		element: (
+			<Suspense fallback={<CircleLoading />}>
+				<Outlet />
+			</Suspense>
+		),
+		meta: {
+			label: "sys.menu.error.index",
+			icon: <Iconify icon="bxs:error-alt" className="ant-menu-item-icon" size="24" />,
+			key: "/error",
+		},
+		children: [
+			{
+				path: "403",
+				element: <Page403 />,
+				meta: {
+					label: "sys.menu.error.403",
+					key: "/error/403",
+				},
+			},
+			{
+				path: "404",
+				element: <Page404 />,
+				meta: {
+					label: "sys.menu.error.404",
+					key: "/error/404",
+				},
+			},
+			{
+				path: "500",
+				element: <Page500 />,
+				meta: {
+					label: "sys.menu.error.500",
+					key: "/error/500",
+				},
+			},
+		],
+	},
+];
+
+export default errors;
diff --git a/apps/react-admin/src/router/routes/backup/functions.tsx b/apps/react-admin/src/router/routes/backup/functions.tsx
new file mode 100644
index 000000000..3f0f5854a
--- /dev/null
+++ b/apps/react-admin/src/router/routes/backup/functions.tsx
@@ -0,0 +1,37 @@
+import { Suspense, lazy } from "react";
+import { Navigate, Outlet } from "react-router";
+
+import { Iconify } from "@/components/icon";
+import { CircleLoading } from "@/components/loading";
+
+import type { AppRouteObject } from "#/router";
+
+const ClipboardPage = lazy(() => import("@/pages/functions/clipboard"));
+
+const functions: AppRouteObject = {
+	order: 4,
+	path: "functions",
+	element: (
+		<Suspense fallback={<CircleLoading />}>
+			<Outlet />
+		</Suspense>
+	),
+	meta: {
+		label: "sys.menu.functions",
+		icon: <Iconify icon="solar:plain-2-bold-duotone" className="ant-menu-item-icon" size="24" />,
+		key: "/functions",
+	},
+	children: [
+		{
+			index: true,
+			element: <Navigate to="clipboard" replace />,
+		},
+		{
+			path: "clipboard",
+			element: <ClipboardPage />,
+			meta: { label: "sys.menu.clipboard", key: "/functions/clipboard" },
+		},
+	],
+};
+
+export default functions;
diff --git a/apps/react-admin/src/router/routes/backup/menulevel.tsx b/apps/react-admin/src/router/routes/backup/menulevel.tsx
new file mode 100644
index 000000000..02a5d6eb6
--- /dev/null
+++ b/apps/react-admin/src/router/routes/backup/menulevel.tsx
@@ -0,0 +1,89 @@
+import { Typography } from "antd";
+import { Suspense } from "react";
+import { Navigate, Outlet } from "react-router";
+
+import { SvgIcon } from "@/components/icon";
+import { CircleLoading } from "@/components/loading";
+
+import type { AppRouteObject } from "#/router";
+
+function MenuLevel({ title }: { title: string }) {
+	return <Typography.Title>Menu Level: {title}</Typography.Title>;
+}
+
+const menulevel: AppRouteObject = {
+	order: 5,
+	path: "menu_level",
+	element: (
+		<Suspense fallback={<CircleLoading />}>
+			<Outlet />
+		</Suspense>
+	),
+	meta: {
+		label: "sys.menu.menulevel.index",
+		icon: <SvgIcon icon="ic-menulevel" className="ant-menu-item-icon" size="24" />,
+		key: "/menu_level",
+	},
+	children: [
+		{
+			path: "menu_level_1a",
+			element: <MenuLevel title="1a" />,
+			meta: {
+				label: "sys.menu.menulevel.1a",
+				key: "/menu_level/menu_level_1a",
+			},
+		},
+		{
+			path: "menu_level_1b",
+			meta: {
+				label: "sys.menu.menulevel.1b.index",
+				key: "/menu_level/menu_level_1b",
+			},
+			children: [
+				{
+					index: true,
+					element: <Navigate to="menu_level_2a" replace />,
+				},
+				{
+					path: "menu_level_2a",
+					element: <MenuLevel title="2a" />,
+					meta: {
+						label: "sys.menu.menulevel.1b.2a",
+						key: "/menu_level/menu_level_1b/menu_level_2a",
+					},
+				},
+				{
+					path: "menu_level_2b",
+					meta: {
+						label: "sys.menu.menulevel.1b.2b.index",
+						key: "/menu_level/menu_level_1b/menu_level_2b",
+					},
+					children: [
+						{
+							index: true,
+							element: <Navigate to="menu_level_3a" replace />,
+						},
+						{
+							path: "menu_level_3a",
+							element: <MenuLevel title="3a" />,
+							meta: {
+								label: "sys.menu.menulevel.1b.2b.3a",
+								key: "/menu_level/menu_level_1b/menu_level_2b/menu_level_3a",
+							},
+						},
+						{
+							path: "menu_level_3b",
+							element: <MenuLevel title="3b" />,
+							meta: {
+								label: "sys.menu.menulevel.1b.2b.3b",
+								key: "/menu_level/menu_level_1b/menu_level_2b/menu_level_3b",
+							},
+						},
+					],
+				},
+			],
+		},
+	],
+};
+
+export default menulevel;
diff --git a/apps/react-admin/src/router/routes/backup/others.tsx b/apps/react-admin/src/router/routes/backup/others.tsx
new file mode 100644
index 000000000..16b8353de
--- /dev/null
+++ b/apps/react-admin/src/router/routes/backup/others.tsx
@@ -0,0 +1,125 @@
+import { Suspense, lazy } from "react";
+
+import Card from "@/components/card";
+import { Iconify, SvgIcon } from "@/components/icon";
+import { CircleLoading } from "@/components/loading";
+
+import type { AppRouteObject } from "#/router";
+import { Tag } from "antd";
+
+const ExternalLink = lazy(() => import("@/pages/sys/others/iframe/external-link"));
+const Iframe = lazy(() => import("@/pages/sys/others/iframe"));
+const Calendar = lazy(() => import("@/pages/sys/others/calendar"));
+const Kanban = lazy(() => import("@/pages/sys/others/kanban"));
+
+function Wrapper({ children }: any) {
+	return <Suspense fallback={<CircleLoading />}>{children}</Suspense>;
+}
+const others: AppRouteObject[] = [
+	{
+		path: "calendar",
+		element: (
+			<Wrapper>
+				<Calendar />
+			</Wrapper>
+		),
+		meta: {
+			label: "sys.menu.calendar",
+			icon: <Iconify icon="solar:calendar-bold-duotone" size={24} />,
+			key: "/calendar",
+		},
+	},
+	{
+		path: "kanban",
+		element: (
+			<Wrapper>
+				<Kanban />
+			</Wrapper>
+		),
+		meta: {
+			label: "sys.menu.kanban",
+			icon: <Iconify icon="solar:clipboard-bold-duotone" size={24} />,
+			key: "/kanban",
+		},
+	},
+	{
+		element: (
+			<Wrapper>
+				<div />
+			</Wrapper>
+		),
+		meta: {
+			label: "sys.menu.disabled",
+			icon: <SvgIcon icon="ic_disabled" className="ant-menu-item-icon" size="24" />,
+			disabled: true,
+			key: "/disabled",
+		},
+	},
+	{
+		path: "label",
+		element: (
+			<Wrapper>
+				<div />
+			</Wrapper>
+		),
+		meta: {
+			label: "sys.menu.label",
+			icon: <SvgIcon icon="ic_label" className="ant-menu-item-icon" size="24" />,
+			suffix: (
+				<Tag color="cyan" icon={<Iconify icon="solar:bell-bing-bold-duotone" size={14} />}>
+					NEW
+				</Tag>
+			),
+			key: "/label",
+		},
+	},
+	{
+		path: "frame",
+		meta: {
+			label: "sys.menu.frame",
+			icon: <SvgIcon icon="ic_external" className="ant-menu-item-icon" size="24" />,
+			key: "/frame",
+		},
+		children: [
+			{
+				path: "external_link",
+				element: (
+					<Wrapper>
+						<ExternalLink src="https://ant.design/index-cn" />
+					</Wrapper>
+				),
+				meta: {
+					label: "sys.menu.external_link",
+					key: "/frame/external_link",
+				},
+			},
+			{
+				path: "iframe",
+				element: (
+					<Wrapper>
+						<Iframe src="https://ant.design/index-cn" />
+					</Wrapper>
+				),
+				meta: {
+					label: "sys.menu.iframe",
+					key: "/frame/iframe",
+				},
+			},
+		],
+	},
+	{
+		path: "blank",
+		element: (
+			<Wrapper>
+				<Card />
+			</Wrapper>
+		),
+		meta: {
+			label: "sys.menu.blank",
+			icon: <SvgIcon icon="ic_blank" className="ant-menu-item-icon" size="24" />,
+			key: "/blank",
+		},
+	},
+];
+
+export default others;
diff --git a/apps/react-admin/src/router/routes/error-routes.tsx b/apps/react-admin/src/router/routes/error-routes.tsx
new file mode 100644
index 000000000..5d4ff3323
--- /dev/null
+++ b/apps/react-admin/src/router/routes/error-routes.tsx
@@ -0,0 +1,34 @@
+import { Suspense, lazy } from "react";
+import { Outlet } from "react-router";
+
+import { CircleLoading } from "@/components/loading";
+import SimpleLayout from "@/layouts/simple";
+
+import AuthGuard from "../components/auth-guard";
+
+import type { AppRouteObject } from "#/router";
+
+const Page403 = lazy(() => import("@/pages/sys/error/Page403"));
+const Page404 = lazy(() => import("@/pages/sys/error/Page404"));
+const Page500 = lazy(() => import("@/pages/sys/error/Page500"));
+
+/**
+ * error routes
+ * 403, 404, 500
+ */
+export const ErrorRoutes: AppRouteObject = {
+	element: (
+		<AuthGuard>
+			<SimpleLayout>
+				<Suspense fallback={<CircleLoading />}>
+					<Outlet />
+				</Suspense>
+			</SimpleLayout>
+		</AuthGuard>
+	),
+	children: [
+		{ path: "403", element: <Page403 /> },
+		{ path: "404", element: <Page404 /> },
+		{ path: "500", element: <Page500 /> },
+	],
+};
diff --git a/apps/react-admin/src/router/routes/menu-routes.tsx b/apps/react-admin/src/router/routes/menu-routes.tsx
new file mode 100644
index 000000000..e33b566bd
--- /dev/null
+++ b/apps/react-admin/src/router/routes/menu-routes.tsx
@@ -0,0 +1,25 @@
+import { Navigate } from "react-router";
+
+import DashboardLayout from "@/layouts/dashboard";
+
+import AuthGuard from "../components/auth-guard";
+import { getRoutesFromModules } from "../utils";
+
+import type { AppRouteObject } from "#/router";
+
+const menuModuleRoutes = getRoutesFromModules();
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+
+/**
+ * dynamic routes
+ */
+export const menuRoutes: AppRouteObject = {
+	path: "/",
+	element: (
+		<AuthGuard>
+			<DashboardLayout />
+		</AuthGuard>
+	),
+	children: [{ index: true, element: <Navigate to={HOMEPAGE} replace /> }, ...menuModuleRoutes],
+};
diff --git a/apps/react-admin/src/router/routes/modules/account.tsx b/apps/react-admin/src/router/routes/modules/account.tsx
new file mode 100644
index 000000000..26b4adbf7
--- /dev/null
+++ b/apps/react-admin/src/router/routes/modules/account.tsx
@@ -0,0 +1,39 @@
+import { Suspense, lazy } from "react";
+
+import { Iconify } from "@/components/icon";
+import { CircleLoading } from "@/components/loading";
+
+import type { AppRouteObject } from "#/router";
+import { Outlet } from "react-router";
+
+const MySettings = lazy(() => import("@/pages/account/my-setting"));
+
+const account: AppRouteObject[] = [
+	{
+		path: "account",
+		element: (
+			<Suspense fallback={<CircleLoading />}>
+				<Outlet />
+			</Suspense>
+		),
+		meta: {
+			label: "abp.account.title",
+			icon: <Iconify icon="mdi:account-outline" size={24} />,
+			key: "/account",
+			hideMenu: true,
+		},
+		children: [
+			{
+				path: "my-settings",
+				element: <MySettings />,
+				meta: {
+					icon: <Iconify icon="tdesign:user-setting" />,
+					label: "abp.account.settings.title",
+					key: "/account/my-settings",
+				},
+			},
+		],
+	},
+];
+
+export default account;
diff --git a/apps/react-admin/src/router/routes/modules/dashboard.tsx b/apps/react-admin/src/router/routes/modules/dashboard.tsx
new file mode 100644
index 000000000..077208a22
--- /dev/null
+++ b/apps/react-admin/src/router/routes/modules/dashboard.tsx
@@ -0,0 +1,43 @@
+import { Suspense, lazy } from "react";
+import { Navigate, Outlet } from "react-router";
+
+import { SvgIcon } from "@/components/icon";
+import { CircleLoading } from "@/components/loading";
+
+import type { AppRouteObject } from "#/router";
+
+const HomePage = lazy(() => import("@/pages/dashboard/workbench"));
+const Analysis = lazy(() => import("@/pages/dashboard/analysis"));
+
+const dashboard: AppRouteObject = {
+	order: 1,
+	path: "dashboard",
+	element: (
+		<Suspense fallback={<CircleLoading />}>
+			<Outlet />
+		</Suspense>
+	),
+	meta: {
+		label: "sys.menu.dashboard",
+		icon: <SvgIcon icon="ic-analysis" className="ant-menu-item-icon" size="24" />,
+		key: "/dashboard",
+	},
+	children: [
+		{
+			index: true,
+			element: <Navigate to="workbench" replace />,
+		},
+		{
+			path: "workbench",
+			element: <HomePage />,
+			meta: { label: "sys.menu.workbench", key: "/dashboard/workbench" },
+		},
+		{
+			path: "analysis",
+			element: <Analysis />,
+			meta: { label: "sys.menu.analysis", key: "/dashboard/analysis" },
+		},
+	],
+};
+
+export default dashboard;
diff --git a/apps/react-admin/src/router/routes/modules/management.tsx b/apps/react-admin/src/router/routes/modules/management.tsx
new file mode 100644
index 000000000..2b5893200
--- /dev/null
+++ b/apps/react-admin/src/router/routes/modules/management.tsx
@@ -0,0 +1,280 @@
+import { Suspense, lazy } from "react";
+import { Navigate, Outlet } from "react-router";
+
+import { Iconify, SvgIcon } from "@/components/icon";
+import { CircleLoading } from "@/components/loading";
+
+import type { AppRouteObject } from "#/router";
+
+// const ProfilePage = lazy(() => import("@/pages/management/user/profile"));
+// const AccountPage = lazy(() => import("@/pages/management/user/account"));
+
+// const OrganizationPage = lazy(() => import("@/pages/management/system/organization"));
+// const PermissioPage = lazy(() => import("@/pages/management/system/permission"));
+
+// const Blog = lazy(() => import("@/pages/management/blog"));
+
+// Identity
+const Users = lazy(() => import("@/pages/management/identity/users/user-table"));
+const Roles = lazy(() => import("@/pages/management/identity/roles/role-table"));
+const ClaimTypes = lazy(() => import("@/pages/management/identity/claim-types/claim-types-table"));
+const SecurityLogs = lazy(() => import("@/pages/management/identity/security-logs/security-logs-table"));
+const OrganizationUnits = lazy(() => import("@/pages/management/identity/organization-units/organization-unit-page"));
+const IdentitySessions = lazy(() => import("@/pages/management/identity/sessions/session-table"));
+
+// Permissions
+const PermissionGroupDefinition = lazy(
+	() => import("@/pages/management/permissions/definitions/permission-group-definition-table"),
+);
+const PermissionDefinitions = lazy(
+	() => import("@/pages/management/permissions/permissions/permission-definition-table"),
+);
+// Auditing logs
+const AuditingAuditLogs = lazy(() => import("@/pages/management/audit-logs/audit-log-table"));
+
+// settings
+const SettingDefinitions = lazy(() => import("@/pages/management/settings/definitions/setting-definition-table"));
+const SystemSettings = lazy(() => import("@/pages/management/settings/settings/system-setting.tsx"));
+
+// notifications
+const MyNotifications = lazy(() => import("@/pages/management/notifications/my-notification-table"));
+
+const management: AppRouteObject = {
+	order: 2,
+	path: "management",
+	element: (
+		<Suspense fallback={<CircleLoading />}>
+			<Outlet />
+		</Suspense>
+	),
+	meta: {
+		label: "sys.menu.management",
+		icon: <SvgIcon icon="ic-management" className="ant-menu-item-icon" size="24" />,
+		key: "/management",
+	},
+	children: [
+		{
+			index: true,
+			element: <Navigate to="user" replace />,
+		},
+		// {
+		// 	path: "user",
+		// 	meta: { label: "sys.menu.user.index", key: "/management/user" },
+		// 	children: [
+		// 		{
+		// 			index: true,
+		// 			element: <Navigate to="profile" replace />,
+		// 		},
+		// 		{
+		// 			path: "profile",
+		// 			element: <ProfilePage />,
+		// 			meta: {
+		// 				label: "sys.menu.user.profile",
+		// 				key: "/management/user/profile",
+		// 			},
+		// 		},
+		// 		{
+		// 			path: "account",
+		// 			element: <AccountPage />,
+		// 			meta: {
+		// 				label: "sys.menu.user.account",
+		// 				key: "/management/user/account",
+		// 			},
+		// 		},
+		// 	],
+		// },
+		// {
+		// 	path: "system",
+		// 	meta: { label: "sys.menu.system.index", key: "/management/system" },
+		// 	children: [
+		// 		{
+		// 			path: "organization",
+		// 			element: <OrganizationPage />,
+		// 			meta: {
+		// 				label: "sys.menu.system.organization",
+		// 				key: "/management/system/organization",
+		// 			},
+		// 		},
+		// 		{
+		// 			path: "permission",
+		// 			element: <PermissioPage />,
+		// 			meta: {
+		// 				label: "sys.menu.system.permission",
+		// 				key: "/management/system/permission",
+		// 			},
+		// 		},
+		// 	],
+		// },
+		// {
+		// 	path: "blog",
+		// 	element: <Blog />,
+		// 	meta: { label: "sys.menu.blog", key: "/management/blog" },
+		// },
+		{
+			path: "identity",
+			meta: {
+				label: "abp.manage.identity.title",
+				key: "/management/identity",
+				icon: <Iconify icon="teenyicons:id-outline" />,
+			},
+			children: [
+				{
+					index: true,
+					element: <Navigate to="users" replace />,
+				},
+				{
+					path: "users",
+					element: <Users />,
+					meta: {
+						label: "abp.manage.identity.user",
+						key: "/management/identity/users",
+						icon: <Iconify icon="mdi:user-outline" />,
+					},
+				},
+				{
+					path: "roles",
+					element: <Roles />,
+					meta: {
+						label: "abp.manage.identity.role",
+						key: "/management/identity/roles",
+						icon: <Iconify icon="carbon:user-role" />,
+					},
+				},
+				{
+					path: "claim-types",
+					element: <ClaimTypes />,
+					meta: {
+						label: "abp.manage.identity.claimTypes",
+						key: "/management/identity/claim-types",
+						icon: <Iconify icon="la:id-card-solid" />,
+					},
+				},
+				{
+					path: "security-logs",
+					element: <SecurityLogs />,
+					meta: {
+						label: "abp.manage.identity.securityLogs",
+						key: "/management/identity/security-logs",
+						icon: <Iconify icon="carbon:security" />,
+					},
+				},
+				{
+					path: "organization-units",
+					element: <OrganizationUnits />,
+					meta: {
+						label: "abp.manage.identity.organizationUnits",
+						key: "/management/identity/organization-units",
+						icon: <Iconify icon="clarity:organization-line" />,
+					},
+				},
+				{
+					path: "sessions",
+					element: <IdentitySessions />,
+					meta: {
+						label: "abp.manage.identity.sessions",
+						key: "/management/identity/sessions",
+						icon: <Iconify icon="carbon:prompt-session" />,
+					},
+				},
+			],
+		},
+		{
+			path: "permissions",
+			meta: {
+				label: "abp.manage.permissions.title",
+				key: "/management/permissions",
+				icon: <Iconify icon="arcticons:permissionsmanager" />,
+			},
+			children: [
+				{
+					index: true,
+					element: <Navigate to="groups" replace />,
+				},
+				{
+					path: "groups",
+					element: <PermissionGroupDefinition />,
+					meta: {
+						label: "abp.manage.permissions.groups",
+						key: "/management/permissions/groups",
+						icon: <Iconify icon="lucide:group" />,
+					},
+				},
+				{
+					path: "definitions",
+					element: <PermissionDefinitions />,
+					meta: {
+						label: "abp.manage.permissions.definitions",
+						key: "/management/permissions/definitions",
+						icon: <Iconify icon="icon-park-outline:permissions" />,
+					},
+				},
+			],
+		},
+		{
+			path: "settings",
+			meta: {
+				label: "abp.manage.settings.title",
+				key: "/management/settings",
+				icon: <Iconify icon="ic:outline-settings" />,
+			},
+			children: [
+				{
+					index: true,
+					element: <Navigate to="definitions" replace />,
+				},
+				{
+					path: "definitions",
+					element: <SettingDefinitions />,
+					meta: {
+						label: "abp.manage.settings.definitions",
+						key: "/management/settings/definitions",
+						icon: <Iconify icon="codicon:settings" />,
+					},
+				},
+				{
+					path: "system",
+					element: <SystemSettings />,
+					meta: {
+						label: "abp.manage.settings.system",
+						key: "/management/settings/system",
+						icon: <Iconify icon="tabler:settings-cog" />,
+					},
+				},
+			],
+		},
+		{
+			path: "audit-logs",
+			element: <AuditingAuditLogs />,
+			meta: {
+				label: "abp.manage.identity.auditLogs",
+				key: "/management/audit-logs",
+				icon: <Iconify icon="fluent-mdl2:compliance-audit" />,
+			},
+		},
+		{
+			path: "notifications",
+			meta: {
+				label: "abp.manage.notifications.title",
+				key: "/management/notifications",
+				icon: <Iconify icon="tabler:notification" />,
+			},
+			children: [
+				{
+					index: true,
+					element: <Navigate to="my-notifilers" replace />,
+				},
+				{
+					path: "my-notifilers",
+					element: <MyNotifications />,
+					meta: {
+						label: "abp.manage.notifications.myNotifilers",
+						key: "/management/notifications/my-notifilers",
+						icon: <Iconify icon="ant-design:notification-outlined" />,
+					},
+				},
+			],
+		},
+	],
+};
+
+export default management;
diff --git a/apps/react-admin/src/router/routes/modules/openiddict.tsx b/apps/react-admin/src/router/routes/modules/openiddict.tsx
new file mode 100644
index 000000000..c20d55c18
--- /dev/null
+++ b/apps/react-admin/src/router/routes/modules/openiddict.tsx
@@ -0,0 +1,70 @@
+import { Suspense, lazy } from "react";
+
+import { Iconify } from "@/components/icon";
+import { CircleLoading } from "@/components/loading";
+
+import type { AppRouteObject } from "#/router";
+import { Outlet } from "react-router";
+
+const OpenIddictApplications = lazy(() => import("@/pages/openiddict/applications/application-table"));
+
+const OpenIddictAuthorizations = lazy(() => import("@/pages/openiddict/authorizations/authorization-table"));
+
+const OpenIddictScopes = lazy(() => import("@/pages/openiddict/scopes/scope-table"));
+const OpenIddictTokens = lazy(() => import("@/pages/openiddict/tokens/token-table"));
+const openiddict: AppRouteObject[] = [
+	{
+		order: 2.2, //暂时挨着management，后续再调整
+		path: "openiddict",
+		element: (
+			<Suspense fallback={<CircleLoading />}>
+				<Outlet />
+			</Suspense>
+		),
+		meta: {
+			label: "abp.openiddict.title",
+			icon: <Iconify icon="mdi:openid" size={24} />,
+			key: "/openiddict",
+		},
+		children: [
+			{
+				path: "applications",
+				element: <OpenIddictApplications />,
+				meta: {
+					icon: <Iconify icon="carbon:application" />,
+					label: "abp.openiddict.applications",
+					key: "/openiddict/applications",
+				},
+			},
+			{
+				path: "authorizations",
+				element: <OpenIddictAuthorizations />,
+				meta: {
+					icon: <Iconify icon="arcticons:ente-authenticator" />,
+					label: "abp.openiddict.authorizations",
+					key: "/openiddict/authorizations",
+				},
+			},
+			{
+				path: "scopes",
+				element: <OpenIddictScopes />,
+				meta: {
+					icon: <Iconify icon=":et:scope" />,
+					label: "abp.openiddict.scopes",
+					key: "/openiddict/scopes",
+				},
+			},
+			{
+				path: "tokens",
+				element: <OpenIddictTokens />,
+				meta: {
+					icon: <Iconify icon="oui:token-key" />,
+					label: "abp.openiddict.tokens",
+					key: "/openiddict/tokens",
+				},
+			},
+		],
+	},
+];
+
+export default openiddict;
diff --git a/apps/react-admin/src/router/utils.ts b/apps/react-admin/src/router/utils.ts
new file mode 100644
index 000000000..8bd01a009
--- /dev/null
+++ b/apps/react-admin/src/router/utils.ts
@@ -0,0 +1,55 @@
+import { ascend } from "ramda";
+
+import type { AppRouteObject, RouteMeta } from "#/router";
+
+/**
+ * return menu routes
+ */
+export const menuFilter = (items: AppRouteObject[]) => {
+	return items
+		.filter((item) => {
+			const show = item.meta?.key;
+			if (show && item.children) {
+				item.children = menuFilter(item.children);
+			}
+			return show;
+		})
+		.sort(ascend((item) => item.order || Number.POSITIVE_INFINITY));
+};
+
+/**
+ * 基于 src/router/routes/modules 文件结构动态生成路由
+ */
+export function getRoutesFromModules() {
+	const menuModules: AppRouteObject[] = [];
+
+	const modules = import.meta.glob("./routes/modules/**/*.tsx", {
+		eager: true,
+	});
+	for (const key in modules) {
+		const mod = (modules as any)[key].default || {};
+		const modList = Array.isArray(mod) ? [...mod] : [mod];
+		menuModules.push(...modList);
+	}
+	return menuModules;
+}
+
+/**
+ * return the routes will be used in sidebar menu
+ */
+export function getMenuRoutes(appRouteObjects: AppRouteObject[]) {
+	// return menuFilter(getMenuModules());
+	return menuFilter(appRouteObjects);
+}
+
+/**
+ * return flatten routes
+ */
+export function flattenMenuRoutes(routes: AppRouteObject[]) {
+	return routes.reduce<RouteMeta[]>((prev, item) => {
+		const { meta, children } = item;
+		if (meta) prev.push(meta);
+		if (children) prev.push(...flattenMenuRoutes(children));
+		return prev;
+	}, []);
+}
diff --git a/apps/react-admin/src/store/abpCoreStore.ts b/apps/react-admin/src/store/abpCoreStore.ts
new file mode 100644
index 000000000..1e34f835f
--- /dev/null
+++ b/apps/react-admin/src/store/abpCoreStore.ts
@@ -0,0 +1,76 @@
+import type { ApplicationConfigurationDto, ApplicationLocalizationDto } from "#/abp-core";
+import { StorageEnum } from "#/enum";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+type AbpStore = {
+	application: ApplicationConfigurationDto | undefined;
+	localization: ApplicationLocalizationDto | undefined;
+	actions: {
+		getI18nLocales: () => Record<string, any>;
+		setApplication: (val: ApplicationConfigurationDto) => void;
+		setLocalization: (val: ApplicationLocalizationDto) => void;
+		reset: () => void;
+	};
+};
+
+const useAbpStore = create<AbpStore>()(
+	persist(
+		(set, get) => ({
+			application: undefined,
+			localization: undefined,
+			actions: {
+				// 获取 i18n 格式的本地化文本
+				getI18nLocales: () => {
+					const localization = get().localization;
+					const abpLocales: Record<string, any> = {};
+					if (!localization) {
+						return abpLocales;
+					}
+					const resources = localization.resources;
+					Object.keys(resources).forEach((resource) => {
+						const resourceLocales: Record<string, any> = {};
+						const resourcesByName = resources[resource];
+						if (resourcesByName) {
+							Object.keys(resourcesByName.texts).forEach((key) => {
+								// let localeKey = key.replaceAll(".", "_");
+								// // 清理多余的 _ 后缀或前缀
+								// if (localeKey.endsWith("_")) {
+								// 	localeKey = localeKey.slice(0, Math.max(0, localeKey.length - 1));
+								// }
+								// if (localeKey.startsWith("_")) {
+								// 	localeKey = localeKey.slice(1);
+								// }
+								//(25-02-16) 不用额外转key "AbpIdentity.Users.UserName" -> "AbpIdentity_Users_UserName"
+
+								resourceLocales[key] = resourcesByName.texts[key];
+							});
+							abpLocales[resource] = resourceLocales;
+						}
+					});
+					return abpLocales;
+				},
+				// 设置 application 数据
+				setApplication: (val) => set({ application: val }),
+				// 设置 localization 数据
+				setLocalization: (val) => set({ localization: val }),
+				// 重置 store
+				reset: () => set({ application: undefined, localization: undefined }),
+			},
+		}),
+		{
+			name: "abpStore", // localStorage key
+			storage: createJSONStorage(() => localStorage),
+			partialize: (state) => ({
+				[StorageEnum.Application]: state.application,
+			}),
+		},
+	),
+);
+
+// Store 的钩子函数
+export const useApplication = () => useAbpStore((state) => state.application);
+// export const useLocalization = () => useAbpStore((state) => state.localization);
+export const useAbpActions = () => useAbpStore((state) => state.actions);
+
+export default useAbpStore;
diff --git a/apps/react-admin/src/store/localeI18nStore.ts b/apps/react-admin/src/store/localeI18nStore.ts
new file mode 100644
index 000000000..ede606b0f
--- /dev/null
+++ b/apps/react-admin/src/store/localeI18nStore.ts
@@ -0,0 +1,97 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import en_US from "antd/locale/en_US";
+import zh_CN from "antd/locale/zh_CN";
+import { LocalEnum } from "#/enum";
+import { getLocalizationApi } from "@/api/abp-core";
+
+import type { Locale as AntdLocal } from "antd/es/locale";
+import useAbpStore from "./abpCoreStore";
+import { mapLocaleToAbpLanguageFormat } from "@/utils";
+import type { Dictionary } from "#/abp-core";
+
+type Locale = keyof typeof LocalEnum;
+type Language = {
+	locale: keyof typeof LocalEnum;
+	icon: string;
+	label: string;
+	antdLocal: AntdLocal;
+};
+
+export const LANGUAGE_MAP: Record<Locale, Language> = {
+	[LocalEnum.zh_CN]: {
+		locale: LocalEnum.zh_CN,
+		label: "Chinese",
+		icon: "ic-locale_zh_CN",
+		antdLocal: zh_CN,
+	},
+	[LocalEnum.en_US]: {
+		locale: LocalEnum.en_US,
+		label: "English",
+		icon: "ic-locale_en_US",
+		antdLocal: en_US,
+	},
+};
+
+type LocaleStore = {
+	locale: Locale;
+	language: Language;
+	localizations: Dictionary<string, Dictionary<string, string>>;
+
+	actions: {
+		setLocale: (locale: Locale, i18n: any) => Promise<void>;
+	};
+};
+
+const useLocaleStore = create<LocaleStore>()(
+	persist(
+		(set) => ({
+			locale: LocalEnum.en_US, // 默认语言
+			language: LANGUAGE_MAP[LocalEnum.en_US],
+			localizations: {},
+			actions: {
+				setLocale: async (locale: Locale, i18n: any) => {
+					let { localization } = useAbpStore.getState();
+					const setLocalization = useAbpStore.getState().actions.setLocalization;
+					const getI18nLocales = useAbpStore.getState().actions.getI18nLocales;
+
+					const lang = mapLocaleToAbpLanguageFormat(locale);
+					if (lang !== localization?.currentCulture.cultureName) {
+						localization = await getLocalizationApi({
+							cultureName: lang, //api的语言转换
+							onlyDynamics: false,
+						});
+					}
+
+					if (localization) {
+						setLocalization(localization); //存进去
+					}
+					const locales = getI18nLocales(); //刚刚存进去的，清理下
+					i18n.changeLanguage(locale);
+					Object.keys(locales).forEach((resource) => {
+						const translations = { [resource]: locales[resource] }; // 保留嵌套结构
+						i18n.addResourceBundle(locale, "translation", translations, true, true); // 添加资源到 i18n
+					});
+					// 更新 Zustand 状态
+					set({
+						locale,
+						language: LANGUAGE_MAP[locale],
+						localizations: locales,
+					});
+				},
+			},
+		}),
+		{
+			name: "localeI18nStore",
+			storage: createJSONStorage(() => localStorage),
+			// 保持风格，但暂时不持久化数据
+			partialize: () => ({}),
+		},
+	),
+);
+
+export const useLocale = () => useLocaleStore((state) => state.locale);
+export const useLanguage = () => useLocaleStore((state) => state.language);
+export const useSetLocale = () => useLocaleStore((state) => state.actions.setLocale);
+
+export default useLocaleStore;
diff --git a/apps/react-admin/src/store/settingStore.ts b/apps/react-admin/src/store/settingStore.ts
new file mode 100644
index 000000000..461cb8ddf
--- /dev/null
+++ b/apps/react-admin/src/store/settingStore.ts
@@ -0,0 +1,54 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+import { StorageEnum, ThemeColorPresets, ThemeLayout, ThemeMode } from "#/enum";
+
+type SettingsType = {
+	themeColorPresets: ThemeColorPresets;
+	themeMode: ThemeMode;
+	themeLayout: ThemeLayout;
+	themeStretch: boolean;
+	breadCrumb: boolean;
+	multiTab: boolean;
+	darkSidebar: boolean;
+};
+type SettingStore = {
+	settings: SettingsType;
+	// 使用 actions 命名空间来存放所有的 action
+	actions: {
+		setSettings: (settings: SettingsType) => void;
+		clearSettings: () => void;
+	};
+};
+
+const useSettingStore = create<SettingStore>()(
+	persist(
+		(set) => ({
+			settings: {
+				themeColorPresets: ThemeColorPresets.Default,
+				themeMode: ThemeMode.Light,
+				themeLayout: ThemeLayout.Vertical,
+				themeStretch: false,
+				breadCrumb: true,
+				multiTab: true,
+				darkSidebar: false,
+			},
+			actions: {
+				setSettings: (settings) => {
+					set({ settings });
+				},
+				clearSettings() {
+					useSettingStore.persist.clearStorage();
+				},
+			},
+		}),
+		{
+			name: StorageEnum.Settings, // name of the item in the storage (must be unique)
+			storage: createJSONStorage(() => localStorage), // (optional) by default, 'localStorage' is used
+			partialize: (state) => ({ [StorageEnum.Settings]: state.settings }),
+		},
+	),
+);
+
+export const useSettings = () => useSettingStore((state) => state.settings);
+export const useSettingActions = () => useSettingStore((state) => state.actions);
diff --git a/apps/react-admin/src/store/userStore.ts b/apps/react-admin/src/store/userStore.ts
new file mode 100644
index 000000000..43745568c
--- /dev/null
+++ b/apps/react-admin/src/store/userStore.ts
@@ -0,0 +1,139 @@
+import { useMutation } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+import { toast } from "sonner";
+import type { UserInfo, UserToken } from "#/entity";
+import { StorageEnum } from "#/enum";
+import { getUserInfoApi, loginApi } from "@/api/account";
+import type { PasswordTokenRequestModel } from "#/account";
+import { getConfigApi } from "@/api/abp-core";
+import useAbpStore from "./abpCoreStore";
+import { useEventBus } from "@/utils/abp/useEventBus";
+import { Events } from "@/constants/abp-core";
+
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
+
+type UserStore = {
+	userInfo: Partial<UserInfo>;
+	userToken: UserToken;
+	accessCodes: string[]; //权限码 TODO 之后和动态生成菜单放一块去
+	// 使用 actions 命名空间来存放所有的 action
+	actions: {
+		setUserInfo: (userInfo: UserInfo) => void;
+		setUserToken: (token: UserToken) => void;
+		setAccessCodes: (accessCodes: string[]) => void;
+		clearUserInfoAndToken: () => void;
+		fetchAndSetUser: () => Promise<UserInfo | null>;
+	};
+};
+
+const useUserStore = create<UserStore>()(
+	persist(
+		(set) => ({
+			userInfo: {},
+			userToken: {},
+			accessCodes: [],
+			actions: {
+				setUserInfo: (userInfo) => {
+					set({ userInfo });
+				},
+				setUserToken: (userToken) => {
+					set({ userToken });
+				},
+				setAccessCodes: (accessCodes) => {
+					set({ accessCodes });
+				},
+				clearUserInfoAndToken() {
+					const { publish } = useEventBus();
+					publish(Events.UserLogout);
+					set({ userInfo: {}, userToken: {} });
+				},
+				fetchAndSetUser: async () => {
+					let userInfo: ({ [key: string]: any } & UserInfo) | null = null;
+
+					try {
+						const userInfoRes = await getUserInfoApi();
+						const abpConfig = await getConfigApi();
+
+						userInfo = {
+							id: userInfoRes.sub, //额外加的
+							userId: userInfoRes.sub,
+							username: userInfoRes.uniqueName ?? abpConfig.currentUser.userName,
+							realName: userInfoRes.name ?? abpConfig.currentUser.name,
+							avatar: userInfoRes.avatarUrl ?? userInfoRes.picture,
+							desc: userInfoRes.uniqueName ?? userInfoRes.name,
+							email: userInfoRes.email ?? userInfoRes.email,
+							emailVerified: userInfoRes.emailVerified ?? abpConfig.currentUser.emailVerified,
+							phoneNumber: userInfoRes.phoneNumber ?? abpConfig.currentUser.phoneNumber,
+							phoneNumberVerified: userInfoRes.phoneNumberVerified ?? abpConfig.currentUser.phoneNumberVerified,
+							token: "",
+							roles: abpConfig.currentUser.roles,
+							homePath: "/",
+						};
+
+						// 更新一系列到 zustand store 中
+						set({ userInfo });
+
+						useAbpStore.getState().actions.setApplication(abpConfig);
+
+						set({ accessCodes: Object.keys(abpConfig.auth.grantedPolicies) });
+					} catch (err) {
+						console.error("Failed to fetch user info:", err);
+					}
+
+					return userInfo;
+				},
+			},
+		}),
+		{
+			name: "userStore", // name of the item in the storage (must be unique)
+			storage: createJSONStorage(() => localStorage), // (optional) by default, 'localStorage' is used
+			partialize: (state) => ({
+				[StorageEnum.UserInfo]: state.userInfo,
+				[StorageEnum.UserToken]: state.userToken,
+				[StorageEnum.AccessCodes]: state.accessCodes,
+			}),
+		},
+	),
+);
+
+export const useUserInfo = () => useUserStore((state) => state.userInfo);
+export const useUserToken = () => useUserStore((state) => state.userToken);
+export const useUserPermission = () => useUserStore((state) => state.userInfo.permissions);
+export const useUserAccessCodes = () => useUserStore((state) => state.accessCodes);
+export const useUserActions = () => useUserStore((state) => state.actions);
+
+export const useSignIn = () => {
+	const navigatge = useNavigate();
+	const { setUserToken, fetchAndSetUser } = useUserActions();
+
+	const signInMutation = useMutation({
+		mutationFn: loginApi,
+		retry: 0,
+	});
+
+	const signIn = async (data: PasswordTokenRequestModel) => {
+		try {
+			const res = await signInMutation.mutateAsync(data);
+
+			const { tokenType, accessToken, refreshToken } = res;
+			// 如果成功获取到 accessToken
+			if (accessToken) {
+				setUserToken({ accessToken: `${tokenType} ${accessToken}`, refreshToken });
+
+				await fetchAndSetUser();
+
+				navigatge(HOMEPAGE, { replace: true });
+				toast.success("Sign in success!");
+			}
+		} catch (err) {
+			console.error(err.message);
+		}
+	};
+
+	return signIn;
+};
+
+export default useUserStore;
diff --git a/apps/react-admin/src/theme/adapter/antd.adapter.tsx b/apps/react-admin/src/theme/adapter/antd.adapter.tsx
new file mode 100644
index 000000000..dc8fcda43
--- /dev/null
+++ b/apps/react-admin/src/theme/adapter/antd.adapter.tsx
@@ -0,0 +1,85 @@
+import { StyleProvider } from "@ant-design/cssinjs";
+import type { ThemeConfig } from "antd";
+import { App, ConfigProvider, theme } from "antd";
+import { ThemeMode } from "#/enum";
+import { baseThemeTokens } from "../tokens/base";
+import { darkColorTokens, lightColorTokens, presetsColors } from "../tokens/color";
+import type { UILibraryAdapter } from "../type";
+
+import { useSettings } from "@/store/settingStore";
+import { removePx } from "@/utils/theme";
+import { lightShadowTokens } from "../tokens/shadow";
+import { darkShadowTokens } from "../tokens/shadow";
+import { typographyTokens } from "../tokens/typography";
+import { useLanguage } from "@/store/localeI18nStore";
+
+export const AntdAdapter: UILibraryAdapter = ({ mode, children }) => {
+	const language = useLanguage();
+	const { themeColorPresets } = useSettings();
+	const algorithm = mode === ThemeMode.Light ? theme.defaultAlgorithm : theme.darkAlgorithm;
+
+	const colorTokens = mode === ThemeMode.Light ? lightColorTokens : darkColorTokens;
+	const shadowTokens = mode === ThemeMode.Light ? lightShadowTokens : darkShadowTokens;
+
+	const primaryColorToken = presetsColors[themeColorPresets];
+
+	const token: ThemeConfig["token"] = {
+		colorPrimary: primaryColorToken.default,
+		colorSuccess: colorTokens.palette.success.default,
+		colorWarning: colorTokens.palette.warning.default,
+		colorError: colorTokens.palette.error.default,
+		colorInfo: colorTokens.palette.info.default,
+
+		colorBgLayout: colorTokens.background.default,
+		colorBgContainer: colorTokens.background.paper,
+		colorBgElevated: colorTokens.background.default,
+
+		wireframe: false,
+
+		borderRadiusSM: removePx(baseThemeTokens.borderRadius.sm),
+		borderRadius: removePx(baseThemeTokens.borderRadius.default),
+		borderRadiusLG: removePx(baseThemeTokens.borderRadius.lg),
+	};
+
+	const components: ThemeConfig["components"] = {
+		Breadcrumb: {
+			fontSize: removePx(typographyTokens.fontSize.xs),
+			separatorMargin: removePx(baseThemeTokens.spacing[1]),
+		},
+		Menu: {
+			fontSize: removePx(typographyTokens.fontSize.sm),
+			colorFillAlter: "transparent",
+			itemColor: colorTokens.text.secondary,
+			motionDurationMid: "0.125s",
+			motionDurationSlow: "0.125s",
+			darkItemBg: darkColorTokens.background.default,
+		},
+		Layout: {
+			siderBg: darkColorTokens.background.default,
+		},
+		Card: {
+			boxShadow: shadowTokens.card,
+		},
+	};
+
+	return (
+		<ConfigProvider
+			locale={language.antdLocal}
+			theme={{ algorithm, token, components }}
+			tag={{
+				style: {
+					borderRadius: removePx(baseThemeTokens.borderRadius.md),
+					fontWeight: 700,
+					padding: `0 ${baseThemeTokens.spacing[1]}`,
+					margin: `0 ${baseThemeTokens.spacing[1]}`,
+					fontSize: removePx(typographyTokens.fontSize.xs),
+					borderWidth: 0,
+				},
+			}}
+		>
+			<StyleProvider hashPriority="high">
+				<App>{children}</App>
+			</StyleProvider>
+		</ConfigProvider>
+	);
+};
diff --git a/apps/react-admin/src/theme/hooks/index.ts b/apps/react-admin/src/theme/hooks/index.ts
new file mode 100644
index 000000000..649a4a150
--- /dev/null
+++ b/apps/react-admin/src/theme/hooks/index.ts
@@ -0,0 +1,2 @@
+export { useResponsive } from "./use-reponsive";
+export { useTheme } from "./use-theme";
diff --git a/apps/react-admin/src/theme/hooks/use-reponsive.ts b/apps/react-admin/src/theme/hooks/use-reponsive.ts
new file mode 100644
index 000000000..73bf1eb04
--- /dev/null
+++ b/apps/react-admin/src/theme/hooks/use-reponsive.ts
@@ -0,0 +1,31 @@
+import { Grid, theme } from "antd";
+import type { Breakpoint, ScreenMap, ScreenSizeMap } from "antd/es/_util/responsiveObserver";
+
+const { useBreakpoint } = Grid;
+
+export function useResponsive() {
+	const {
+		token: { screenXS, screenSM, screenMD, screenLG, screenXL, screenXXL },
+	} = theme.useToken();
+	const screenArray: Breakpoint[] = ["xs", "sm", "md", "lg", "xl", "xxl"];
+
+	const screenEnum: ScreenSizeMap = {
+		xs: screenXS,
+		sm: screenSM,
+		md: screenMD, // 768
+		lg: screenLG,
+		xl: screenXL,
+		xxl: screenXXL,
+	};
+	const screenMap: ScreenMap = useBreakpoint();
+
+	const currentScrren = [...screenArray].reverse().find((item) => {
+		const result = screenMap[item];
+		return result === true;
+	});
+	return {
+		screenEnum,
+		screenMap,
+		currentScrren,
+	};
+}
diff --git a/apps/react-admin/src/theme/hooks/use-theme.ts b/apps/react-admin/src/theme/hooks/use-theme.ts
new file mode 100644
index 000000000..27ac11100
--- /dev/null
+++ b/apps/react-admin/src/theme/hooks/use-theme.ts
@@ -0,0 +1,39 @@
+import { useSettingActions, useSettings } from "@/store/settingStore";
+import type { ThemeMode } from "#/enum";
+import { themeVars } from "../theme.css";
+import { baseThemeTokens } from "../tokens/base";
+import { darkColorTokens, lightColorTokens, presetsColors } from "../tokens/color";
+import { darkShadowTokens, lightShadowTokens } from "../tokens/shadow";
+import { typographyTokens } from "../tokens/typography";
+
+export function useTheme() {
+	const settings = useSettings();
+	const { setSettings } = useSettingActions();
+
+	let colorTokens = settings.themeMode === "light" ? lightColorTokens : darkColorTokens;
+
+	colorTokens = {
+		...colorTokens,
+		palette: {
+			...colorTokens.palette,
+			primary: presetsColors[settings.themeColorPresets],
+		},
+	};
+
+	return {
+		mode: settings.themeMode,
+		setMode: (mode: ThemeMode) => {
+			setSettings({
+				...settings,
+				themeMode: mode,
+			});
+		},
+		themeVars,
+		themeTokens: {
+			base: baseThemeTokens,
+			color: colorTokens,
+			shadow: settings.themeMode === "light" ? lightShadowTokens : darkShadowTokens,
+			typography: typographyTokens,
+		},
+	};
+}
diff --git a/apps/react-admin/src/theme/layout.css.ts b/apps/react-admin/src/theme/layout.css.ts
new file mode 100644
index 000000000..af06c386d
--- /dev/null
+++ b/apps/react-admin/src/theme/layout.css.ts
@@ -0,0 +1,3 @@
+import { createTheme } from "@vanilla-extract/css";
+
+export const [layoutClass, layoutVars] = createTheme({}, "slash-layout");
diff --git a/apps/react-admin/src/theme/theme-provider.tsx b/apps/react-admin/src/theme/theme-provider.tsx
new file mode 100644
index 000000000..ffd77be43
--- /dev/null
+++ b/apps/react-admin/src/theme/theme-provider.tsx
@@ -0,0 +1,46 @@
+import { useSettings } from "@/store/settingStore";
+import { hexToRgbChannel, rgbAlpha } from "@/utils/theme";
+import { useEffect } from "react";
+import { ThemeMode } from "#/enum";
+import { layoutClass } from "./layout.css";
+import { presetsColors } from "./tokens/color";
+import type { UILibraryAdapter } from "./type";
+
+interface ThemeProviderProps {
+	children: React.ReactNode;
+	adapters?: UILibraryAdapter[];
+}
+
+export function ThemeProvider({ children, adapters = [] }: ThemeProviderProps) {
+	const { themeMode, themeColorPresets } = useSettings();
+
+	// Update HTML class to support Tailwind dark mode
+	useEffect(() => {
+		const root = window.document.documentElement;
+		root.classList.remove(ThemeMode.Light, ThemeMode.Dark);
+		root.classList.add(themeMode);
+	}, [themeMode]);
+
+	// Dynamically update theme color related CSS variables
+	useEffect(() => {
+		const root = window.document.documentElement;
+		const primaryColors = presetsColors[themeColorPresets];
+		for (const [key, value] of Object.entries(primaryColors)) {
+			root.style.setProperty(`--colors-palette-primary-${key}`, value);
+			root.style.setProperty(`--colors-palette-primary-${key}Channel`, hexToRgbChannel(value));
+		}
+		root.style.setProperty("--shadows-primary", `box-shadow: 0 8px 16px 0 ${rgbAlpha(primaryColors.default, 0.24)}`);
+	}, [themeColorPresets]);
+
+	// Wrap children with adapters
+	const wrappedWithAdapters = adapters.reduce(
+		(children, Adapter) => (
+			<Adapter key={Adapter.name} mode={themeMode}>
+				{children}
+			</Adapter>
+		),
+		children,
+	);
+
+	return <div className={layoutClass}>{wrappedWithAdapters}</div>;
+}
diff --git a/apps/react-admin/src/theme/theme.css.ts b/apps/react-admin/src/theme/theme.css.ts
new file mode 100644
index 000000000..26da0f68f
--- /dev/null
+++ b/apps/react-admin/src/theme/theme.css.ts
@@ -0,0 +1,57 @@
+import { hexToRgbChannel } from "@/utils/theme";
+import { createGlobalTheme, createThemeContract } from "@vanilla-extract/css";
+import { baseThemeTokens } from "./tokens/base";
+import { darkColorTokens, lightColorTokens } from "./tokens/color";
+import { darkShadowTokens, lightShadowTokens } from "./tokens/shadow";
+import { typographyTokens } from "./tokens/typography";
+import { type AddChannelToLeaf, themeTokens } from "./type";
+
+const contractInitval = {
+	...themeTokens,
+	colors: addColorChannels(themeTokens.colors),
+};
+
+// create theme contract
+export const themeVars = createThemeContract(contractInitval);
+
+// create light theme
+createGlobalTheme(":root.light", themeVars, {
+	colors: addColorChannels(lightColorTokens),
+	typography: typographyTokens,
+	shadows: lightShadowTokens,
+	...baseThemeTokens,
+});
+
+// create dark theme
+createGlobalTheme(":root.dark", themeVars, {
+	colors: addColorChannels(darkColorTokens),
+	typography: typographyTokens,
+	shadows: darkShadowTokens,
+	...baseThemeTokens,
+});
+
+function addColorChannels<T extends Record<string, any>>(obj: T): AddChannelToLeaf<T> {
+	const result: Record<string, any> = {};
+
+	// 检查是否是最深层对象（所有子属性都是 null 或 string）
+	const isLeafObject = Object.values(obj).every((v) => v === null || typeof v === "string");
+
+	if (isLeafObject) {
+		// 在最深层对象添加 Channel
+		for (const [key, value] of Object.entries(obj)) {
+			result[key] = value;
+			result[`${key}Channel`] = value === null ? "" : value.startsWith("#") ? hexToRgbChannel(value) : value;
+		}
+	} else {
+		// 递归处理非最深层对象
+		for (const [key, value] of Object.entries(obj)) {
+			if (typeof value === "object" && value !== null) {
+				result[key] = addColorChannels(value);
+			} else {
+				result[key] = value;
+			}
+		}
+	}
+
+	return result as AddChannelToLeaf<T>;
+}
diff --git a/apps/react-admin/src/theme/tokens/base.ts b/apps/react-admin/src/theme/tokens/base.ts
new file mode 100644
index 000000000..28a7fe68a
--- /dev/null
+++ b/apps/react-admin/src/theme/tokens/base.ts
@@ -0,0 +1,64 @@
+export const baseThemeTokens = {
+	spacing: {
+		0: "0px",
+		1: "4px",
+		2: "8px",
+		3: "12px",
+		4: "16px",
+		5: "20px",
+		6: "24px",
+		7: "28px",
+		8: "32px",
+		10: "40px",
+		12: "48px",
+		16: "64px",
+		20: "80px",
+		24: "96px",
+		32: "128px",
+	},
+	borderRadius: {
+		none: "0px",
+		sm: "2px",
+		default: "4px",
+		md: "6px",
+		lg: "8px",
+		xl: "12px",
+		full: "9999px",
+	},
+	screens: {
+		xs: "480px", // => @media (min-width: 480px) { ... }
+		sm: "576px", // => @media (min-width: 576px) { ... }
+		md: "768px", // => @media (min-width: 768px) { ... }
+		lg: "992px", // => @media (min-width: 992px) { ... }
+		xl: "1200px", // => @media (min-width: 1200px) { ... }
+		"2xl": "1600px", // => @media (min-width: 1600px) { ... }
+	},
+	opacity: {
+		0: "0",
+		5: "0.05",
+		10: "0.1",
+		20: "0.2",
+		25: "0.25",
+		30: "0.3",
+		35: "0.35",
+		40: "0.4",
+		45: "0.45",
+		50: "0.5",
+		55: "0.55",
+		60: "0.6",
+		65: "0.65",
+		70: "0.7",
+		75: "0.75",
+		80: "0.8",
+		85: "0.85",
+		90: "0.9",
+		95: "0.95",
+		100: "1",
+	},
+	zIndex: {
+		drawer: "1000",
+		modal: "1000",
+		snackbar: "1000",
+		tooltip: "1000",
+	},
+};
diff --git a/apps/react-admin/src/theme/tokens/color.ts b/apps/react-admin/src/theme/tokens/color.ts
new file mode 100644
index 000000000..fd31c19fb
--- /dev/null
+++ b/apps/react-admin/src/theme/tokens/color.ts
@@ -0,0 +1,141 @@
+import { rgbAlpha } from "@/utils/theme";
+import { ThemeColorPresets } from "#/enum";
+
+export const presetsColors = {
+	[ThemeColorPresets.Default]: {
+		lighter: "#C8FAD6",
+		light: "#5BE49B",
+		default: "#00A76F",
+		dark: "#007867",
+		darker: "#004B50",
+	},
+	[ThemeColorPresets.Cyan]: {
+		lighter: "#CCF4FE",
+		light: "#68CDF9",
+		default: "#078DEE",
+		dark: "#0351AB",
+		darker: "#012972",
+	},
+	[ThemeColorPresets.Purple]: {
+		lighter: "#EBD6FD",
+		light: "#B985F4",
+		default: "#7635DC",
+		dark: "#431A9E",
+		darker: "#200A69",
+	},
+	[ThemeColorPresets.Blue]: {
+		lighter: "#D1E9FC",
+		light: "#76B0F1",
+		default: "#2065D1",
+		dark: "#103996",
+		darker: "#061B64",
+	},
+	[ThemeColorPresets.Orange]: {
+		lighter: "#FEF4D4",
+		light: "#FED680",
+		default: "#FDA92D",
+		dark: "#B66816",
+		darker: "#793908",
+	},
+	[ThemeColorPresets.Red]: {
+		lighter: "#FFE3D5",
+		light: "#FF9882",
+		default: "#FF3030",
+		dark: "#B71833",
+		darker: "#7A0930",
+	},
+};
+
+/**
+ * We recommend picking colors with these values for [Eva Color Design](https://colors.eva.design/):
+ *  + lighter : 100
+ *  + light : 300
+ *  + main : 500
+ *  + dark : 700
+ *  + darker : 900
+ */
+export const paletteColors = {
+	primary: presetsColors[ThemeColorPresets.Default],
+	secondary: {
+		lighter: "#D6E4FF",
+		light: "#84A9FF",
+		default: "#3366FF",
+		dark: "#1939B7",
+		darker: "#091A7A",
+	},
+	success: {
+		lighter: "#D8FBDE",
+		light: "#86E8AB",
+		default: "#36B37E",
+		dark: "#1B806A",
+		darker: "#0A5554",
+	},
+	warning: {
+		lighter: "#FFF5CC",
+		light: "#FFD666",
+		default: "#FFAB00",
+		dark: "#B76E00",
+		darker: "#7A4100",
+	},
+	error: {
+		lighter: "#FFE9D5",
+		light: "#FFAC82",
+		default: "#FF5630",
+		dark: "#B71D18",
+		darker: "#7A0916",
+	},
+	info: {
+		lighter: "#CAFDF5",
+		light: "#61F3F3",
+		default: "#00B8D9",
+		dark: "#006C9C",
+		darker: "#003768",
+	},
+	gray: {
+		"100": "#F9FAFB",
+		"200": "#F4F6F8",
+		"300": "#DFE3E8",
+		"400": "#C4CDD5",
+		"500": "#919EAB",
+		"600": "#637381",
+		"700": "#454F5B",
+		"800": "#1C252E",
+		"900": "#141A21",
+	},
+};
+
+export const commonColors = {
+	white: "#FFFFFF",
+	black: "#000000",
+	border: rgbAlpha(paletteColors.gray[500], 0.2),
+};
+
+export const lightColorTokens = {
+	palette: paletteColors,
+	common: commonColors,
+	text: {
+		primary: "#1C252E",
+		secondary: "#637381",
+		disabled: "#919EAB",
+	},
+	background: {
+		default: "#FFFFFF",
+		paper: "#FFFFFF",
+		neutral: "#F4F6F8",
+	},
+};
+
+export const darkColorTokens = {
+	palette: paletteColors,
+	common: commonColors,
+	text: {
+		primary: "#FFFFFF",
+		secondary: "#919EAB",
+		disabled: "#637381",
+	},
+	background: {
+		default: "#161c24",
+		paper: "#212b36",
+		neutral: "#28323D",
+	},
+};
diff --git a/apps/react-admin/src/theme/tokens/shadow.ts b/apps/react-admin/src/theme/tokens/shadow.ts
new file mode 100644
index 000000000..39a98498d
--- /dev/null
+++ b/apps/react-admin/src/theme/tokens/shadow.ts
@@ -0,0 +1,48 @@
+import Color from "color";
+import { commonColors, paletteColors } from "./color";
+
+export const lightShadowTokens = {
+	none: "none",
+	sm: `0 1px 2px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
+	default: `0 4px 8px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
+	md: `0 8px 16px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
+	lg: `0 12px 24px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
+	xl: `0 16px 32px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
+	"2xl": `0 20px 40px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
+	"3xl": `0 24px 48px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
+	inner: `inset 0 2px 4px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
+
+	dialog: `-40px 40px 80px -8px ${Color(commonColors.black).alpha(0.24)}`,
+	card: `0 0 2px 0 ${Color(paletteColors.gray[500]).alpha(0.2)}, 0 12px 24px -4px ${Color(paletteColors.gray[500]).alpha(0.12)}`,
+	dropdown: `0 0 2px 0 ${Color(paletteColors.gray[500]).alpha(0.24)}, -20px 20px 40px -4px ${Color(paletteColors.gray[500]).alpha(0.24)}`,
+
+	primary: `0 8px 16px 0 ${Color(paletteColors.primary.default).alpha(0.24)}`,
+	secondary: `0 8px 16px 0 ${Color(paletteColors.secondary.default).alpha(0.24)}`,
+	info: `0 8px 16px 0 ${Color(paletteColors.info.default).alpha(0.24)}`,
+	success: `0 8px 16px 0 ${Color(paletteColors.success.default).alpha(0.24)}`,
+	warning: `0 8px 16px 0 ${Color(paletteColors.warning.default).alpha(0.24)}`,
+	error: `0 8px 16px 0 ${Color(paletteColors.error.default).alpha(0.24)}`,
+};
+
+export const darkShadowTokens = {
+	none: "none",
+	sm: `0 1px 2px 0 ${Color(commonColors.black).alpha(0.16)}`,
+	default: `0 4px 8px 0 ${Color(commonColors.black).alpha(0.16)}`,
+	md: `0 8px 16px 0 ${Color(commonColors.black).alpha(0.16)}`,
+	lg: `0 12px 24px 0 ${Color(commonColors.black).alpha(0.16)}`,
+	xl: `0 16px 32px 0 ${Color(commonColors.black).alpha(0.16)}`,
+	"2xl": `0 20px 40px 0 ${Color(commonColors.black).alpha(0.16)}`,
+	"3xl": `0 24px 48px 0 ${Color(commonColors.black).alpha(0.16)}`,
+	inner: `inset 0 2px 4px 0 ${Color(commonColors.black).alpha(0.16)}`,
+
+	dialog: `-40px 40px 80px -8px ${Color(commonColors.black).alpha(0.24)}`,
+	card: `0 0 2px 0 ${Color(commonColors.black).alpha(0.2)}, 0 12px 24px -4px ${Color(commonColors.black).alpha(0.12)}`,
+	dropdown: `0 0 2px 0 ${Color(commonColors.black).alpha(0.24)}, -20px 20px 40px -4px ${Color(commonColors.black).alpha(0.24)}`,
+
+	primary: `0 8px 16px 0 ${Color(paletteColors.primary.default).alpha(0.24)}`,
+	secondary: `0 8px 16px 0 ${Color(paletteColors.secondary.default).alpha(0.24)}`,
+	info: `0 8px 16px 0 ${Color(paletteColors.info.default).alpha(0.24)}`,
+	success: `0 8px 16px 0 ${Color(paletteColors.success.default).alpha(0.24)}`,
+	warning: `0 8px 16px 0 ${Color(paletteColors.warning.default).alpha(0.24)}`,
+	error: `0 8px 16px 0 ${Color(paletteColors.error.default).alpha(0.24)}`,
+};
diff --git a/apps/react-admin/src/theme/tokens/typography.ts b/apps/react-admin/src/theme/tokens/typography.ts
new file mode 100644
index 000000000..359948321
--- /dev/null
+++ b/apps/react-admin/src/theme/tokens/typography.ts
@@ -0,0 +1,26 @@
+export const typographyTokens = {
+	fontFamily: {
+		primary: "Inter, sans-serif",
+		secondary: "Inter, sans-serif",
+	},
+	fontSize: {
+		xs: "12",
+		sm: "14",
+		default: "16",
+		lg: "18",
+		xl: "20",
+	},
+	fontWeight: {
+		light: "300",
+		normal: "400",
+		medium: "500",
+		semibold: "600",
+		bold: "700",
+	},
+	lineHeight: {
+		none: "1",
+		tight: "1.25",
+		normal: "1.375",
+		relaxed: "1.5",
+	},
+};
diff --git a/apps/react-admin/src/theme/type.ts b/apps/react-admin/src/theme/type.ts
new file mode 100644
index 000000000..c5ba8c19e
--- /dev/null
+++ b/apps/react-admin/src/theme/type.ts
@@ -0,0 +1,200 @@
+import type { ThemeMode } from "#/enum";
+
+export const themeTokens = {
+	colors: {
+		palette: {
+			primary: {
+				lighter: null,
+				light: null,
+				default: null,
+				dark: null,
+				darker: null,
+			},
+			secondary: {
+				lighter: null,
+				light: null,
+				default: null,
+				dark: null,
+				darker: null,
+			},
+			success: {
+				lighter: null,
+				light: null,
+				default: null,
+				dark: null,
+				darker: null,
+			},
+			warning: {
+				lighter: null,
+				light: null,
+				default: null,
+				dark: null,
+				darker: null,
+			},
+			error: {
+				lighter: null,
+				light: null,
+				default: null,
+				dark: null,
+				darker: null,
+			},
+			info: {
+				lighter: null,
+				light: null,
+				default: null,
+				dark: null,
+				darker: null,
+			},
+			gray: {
+				"100": null,
+				"200": null,
+				"300": null,
+				"400": null,
+				"500": null,
+				"600": null,
+				"700": null,
+				"800": null,
+				"900": null,
+			},
+		},
+		common: {
+			white: null,
+			black: null,
+			border: null,
+		},
+		text: {
+			primary: null,
+			secondary: null,
+			disabled: null,
+		},
+		background: {
+			default: null,
+			paper: null,
+			neutral: null,
+		},
+	},
+	typography: {
+		fontFamily: {
+			primary: null,
+			secondary: null,
+		},
+		fontSize: {
+			xs: null,
+			sm: null,
+			default: null,
+			lg: null,
+			xl: null,
+		},
+		fontWeight: {
+			light: null,
+			normal: null,
+			medium: null,
+			semibold: null,
+			bold: null,
+		},
+		lineHeight: {
+			none: null,
+			tight: null,
+			normal: null,
+			relaxed: null,
+		},
+	},
+	spacing: {
+		0: null,
+		1: null,
+		2: null,
+		3: null,
+		4: null,
+		5: null,
+		6: null,
+		7: null,
+		8: null,
+		10: null,
+		12: null,
+		16: null,
+		20: null,
+		24: null,
+		32: null,
+	},
+	borderRadius: {
+		none: null,
+		sm: null,
+		default: null,
+		md: null,
+		lg: null,
+		xl: null,
+		full: null,
+	},
+	shadows: {
+		none: null,
+		sm: null,
+		default: null,
+		md: null,
+		lg: null,
+		xl: null,
+		"2xl": null,
+		"3xl": null,
+		inner: null,
+		dialog: null,
+		card: null,
+		dropdown: null,
+		primary: null,
+		secondary: null,
+		info: null,
+		success: null,
+		warning: null,
+		error: null,
+	},
+	screens: {
+		xs: null,
+		sm: null,
+		md: null,
+		lg: null,
+		xl: null,
+		"2xl": null,
+	},
+	opacity: {
+		0: null,
+		5: null,
+		10: null,
+		20: null,
+		25: null,
+		30: null,
+		35: null,
+		40: null,
+		45: null,
+		50: null,
+		55: null,
+		60: null,
+		65: null,
+		70: null,
+		75: null,
+		80: null,
+		85: null,
+		90: null,
+		95: null,
+		100: null,
+	},
+	zIndex: {
+		drawer: null,
+		modal: null,
+		snackbar: null,
+		tooltip: null,
+	},
+};
+
+export type UILibraryAdapterProps = {
+	mode: ThemeMode;
+	children: React.ReactNode;
+};
+export type UILibraryAdapter = React.FC<UILibraryAdapterProps>;
+
+// is leaf object
+export type IsLeafObject<T> = T extends object ? (T[keyof T] extends null | string ? true : false) : false;
+
+// add channel
+export type AddChannelToLeaf<T> = T extends object
+	? IsLeafObject<T> extends true
+		? T & { [K in keyof T as `${string & K}Channel`]: string } // only add channel to leaf
+		: { [K in keyof T]: AddChannelToLeaf<T[K]> } // recursive other level
+	: T;
diff --git a/apps/react-admin/src/utils/abp/access-checker.ts b/apps/react-admin/src/utils/abp/access-checker.ts
new file mode 100644
index 000000000..4b6184e59
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/access-checker.ts
@@ -0,0 +1,21 @@
+import userStore from "@/store/userStore";
+import type React from "react";
+
+export const withAccessChecker = (element: React.ReactElement, requiredCodes: string[]) => {
+	const accessCodes = userStore.getState().accessCodes;
+
+	const canAccess = requiredCodes.every((code) => accessCodes.includes(code));
+
+	return canAccess ? element : null;
+};
+
+/**
+ *
+ * @param codes 具有至少一个传入的访问权限代码
+ * @returns
+ */
+export const hasAccessByCodes = (codes: string[]) => {
+	const userCodesSet = new Set(userStore.getState().accessCodes);
+	const intersection = codes.filter((item) => userCodesSet.has(item));
+	return intersection.length > 0;
+};
diff --git a/apps/react-admin/src/utils/abp/date.ts b/apps/react-admin/src/utils/abp/date.ts
new file mode 100644
index 000000000..7ee844f12
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/date.ts
@@ -0,0 +1,38 @@
+/**
+ * Independent time operation tool to facilitate subsequent switch to dayjs
+ */
+import dayjs from "dayjs";
+
+const DATE_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
+const DATE_FORMAT = "YYYY-MM-DD";
+
+export function formatToDateTime(date?: dayjs.ConfigType, format = DATE_TIME_FORMAT): string {
+	return dayjs(date).format(format);
+}
+
+export function formatToDate(date?: dayjs.ConfigType, format = DATE_FORMAT): string {
+	const normalizedDate = typeof date === "number" ? date * 1000 : date;
+	return dayjs(normalizedDate).format(format);
+}
+/**
+ * 获取指定日期
+ * @param days 天数
+ * @returns 返回指定天数之后的日期
+ */
+export function getAppointDate(days: number): dayjs.Dayjs {
+	const today = new Date(); // 获取当前日期
+	const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + days);
+	return dayjs(tomorrow);
+}
+
+export function lastDayOfMonth(): dayjs.Dayjs {
+	const now = new Date();
+	return dayjs(new Date(now.getFullYear(), now.getMonth() + 1, 0));
+}
+
+export function lastDateOfMonth(): dayjs.Dayjs {
+	const now = new Date();
+	return dayjs(new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999));
+}
+
+export const dateUtil = dayjs;
diff --git a/apps/react-admin/src/utils/abp/handleOAuthError.ts b/apps/react-admin/src/utils/abp/handleOAuthError.ts
new file mode 100644
index 000000000..8fb9323a1
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/handleOAuthError.ts
@@ -0,0 +1,16 @@
+interface OAuthError {
+	error: string;
+	error_description?: string;
+	error_uri?: string;
+}
+
+export function handleOAuthError() {
+	function formatError(error: OAuthError) {
+		// TODO: 解决oauth消息国际化.
+		return error.error_description;
+	}
+
+	return {
+		formatError,
+	};
+}
diff --git a/apps/react-admin/src/utils/abp/index.ts b/apps/react-admin/src/utils/abp/index.ts
new file mode 100644
index 000000000..8a22d8729
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/index.ts
@@ -0,0 +1 @@
+export * from "./date";
diff --git a/apps/react-admin/src/utils/abp/localization-serializer.ts b/apps/react-admin/src/utils/abp/localization-serializer.ts
new file mode 100644
index 000000000..fe4fbe7e1
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/localization-serializer.ts
@@ -0,0 +1,109 @@
+import type { LocalizableStringInfo } from "#/abp-core";
+import { isNullOrWhiteSpace } from "@/utils/string";
+
+interface ValidateOptions {
+	required?: boolean;
+}
+
+interface ILocalizableStringSerializer {
+	deserialize(value?: string): LocalizableStringInfo;
+	serialize(value?: LocalizableStringInfo): string;
+	validate(value?: string, opt?: ValidateOptions): boolean;
+}
+
+//考虑是否去掉use前缀
+export function localizationSerializer(): ILocalizableStringSerializer {
+	function Validate(value?: string, opt?: ValidateOptions): boolean {
+		if (!value || isNullOrWhiteSpace(value)) {
+			if (!opt || opt.required === undefined || opt.required === true) {
+				return false;
+			}
+			return true;
+		}
+		if (value.length < 3 || value[1] !== ":") {
+			return false;
+		}
+		const type = value[0];
+		switch (type) {
+			case "F": {
+				return !isNullOrWhiteSpace(value.slice(2).trim());
+			}
+			case "L": {
+				const commaPosition = value.indexOf(",", 2);
+				if (commaPosition === -1) {
+					return false;
+				}
+				const name = value.slice(Math.max(0, commaPosition + 1));
+				if (isNullOrWhiteSpace(name)) {
+					return false;
+				}
+				return true;
+			}
+			default: {
+				return false;
+			}
+		}
+	}
+
+	function Serialize(value?: LocalizableStringInfo): string {
+		if (!value) return "";
+		return `L:${value.resourceName},${value.name}`;
+	}
+
+	function Deserialize(value?: string): LocalizableStringInfo {
+		if (!value || isNullOrWhiteSpace(value)) {
+			return {
+				name: "",
+				resourceName: "",
+			};
+		}
+		if (value.length < 2 || value[1] !== ":") {
+			return {
+				name: value,
+				resourceName: "",
+			};
+		}
+		const type = value[0];
+		switch (type) {
+			case "F": {
+				return {
+					name: value.slice(2),
+					resourceName: "Fixed",
+				};
+			}
+			case "L": {
+				const commaPosition = value.indexOf(",", 2);
+				if (commaPosition === -1) {
+					return {
+						name: value,
+						resourceName: "Default",
+					};
+				}
+				const resourceName = value.slice(2, commaPosition);
+				const name = value.slice(Math.max(0, commaPosition + 1));
+				if (isNullOrWhiteSpace(resourceName)) {
+					return {
+						name: value,
+						resourceName: "Default",
+					};
+				}
+				return {
+					name,
+					resourceName,
+				};
+			}
+			default: {
+				return {
+					name: value,
+					resourceName: "Default",
+				};
+			}
+		}
+	}
+
+	return {
+		deserialize: Deserialize,
+		serialize: Serialize,
+		validate: Validate,
+	};
+}
diff --git a/apps/react-admin/src/utils/abp/localzations/get-resources.ts b/apps/react-admin/src/utils/abp/localzations/get-resources.ts
new file mode 100644
index 000000000..90998355a
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/localzations/get-resources.ts
@@ -0,0 +1,30 @@
+import { mergeRight } from "ramda";
+import type { Dictionary } from "#/abp-core/global";
+import useLocaleStore from "@/store/localeI18nStore";
+
+/**
+ * 获取合并后的本地化资源
+ * @param resourceNames 需要合并的资源名称
+ * @returns 合并后的本地化资源
+ */
+export function getResources(resourceNames?: string | string[]) {
+	const localizations = useLocaleStore.getState().localizations || {};
+	let merged: Dictionary<string, string> = {};
+
+	if (resourceNames) {
+		if (Array.isArray(resourceNames)) {
+			resourceNames.forEach((name) => {
+				merged = mergeRight(merged, localizations[name] || {});
+			});
+		} else {
+			merged = mergeRight(merged, localizations[resourceNames] || {});
+		}
+	} else {
+		// Merge everything if no resource names provided
+		Object.keys(localizations).forEach((r) => {
+			merged = mergeRight(merged, localizations[r] || {});
+		});
+	}
+
+	return merged;
+}
diff --git a/apps/react-admin/src/utils/abp/localzations/lr-with-resources.ts b/apps/react-admin/src/utils/abp/localzations/lr-with-resources.ts
new file mode 100644
index 000000000..62ff1ca95
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/localzations/lr-with-resources.ts
@@ -0,0 +1,18 @@
+import type { Dictionary } from "#/abp-core";
+import { format } from "@/utils/string";
+
+/**
+ * 允许外部传入 mergedResources 进行翻译
+ * @param mergedResources 预计算的资源对象
+ * @param key 需要翻译的 key
+ * @param args 可选参数
+ * @returns 翻译后的字符串
+ */
+export function LrWithResources(
+	mergedResources: Dictionary<string, string>,
+	key: string,
+	args?: any[] | Record<string, string>,
+) {
+	if (!key) return "";
+	return mergedResources[key] ? format(mergedResources[key], args ?? []) : key;
+}
diff --git a/apps/react-admin/src/utils/abp/mitt.ts b/apps/react-admin/src/utils/abp/mitt.ts
new file mode 100644
index 000000000..fc6c0ecd8
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/mitt.ts
@@ -0,0 +1,104 @@
+/* eslint-disable array-callback-return */
+/**
+ * copy to https://github.com/developit/mitt
+ * Expand clear method
+ */
+
+export type EventType = string | symbol;
+
+// An event handler can take an optional event argument
+// and should not return a value
+export type Handler<T = any> = (event?: T) => void;
+export type WildcardHandler = (type: EventType, event?: any) => void;
+
+// An array of all currently registered event handlers for a type
+export type EventHandlerList = Array<Handler>;
+export type WildCardEventHandlerList = Array<WildcardHandler>;
+
+// A map of event types and their corresponding event handlers.
+export type EventHandlerMap = Map<EventType, EventHandlerList | WildCardEventHandlerList>;
+
+export interface Emitter {
+	all: EventHandlerMap;
+
+	clear(): void;
+	emit(type: "*", event?: any): void;
+
+	emit<T = any>(type: EventType, event?: T): void;
+	off(type: "*", handler: WildcardHandler): void;
+
+	off<T = any>(type: EventType, handler: Handler<T>): void;
+	on(type: "*", handler: WildcardHandler): void;
+	on<T = any>(type: EventType, handler: Handler<T>): void;
+}
+
+/**
+ * Mitt: Tiny (~200b) functional event emitter / pubsub.
+ * @name mitt
+ * @returns {Mitt} Emitter
+ */
+export default function mitt(all?: EventHandlerMap): Emitter {
+	// biome-ignore lint: reason
+	all = all || new Map();
+
+	return {
+		/**
+		 * A Map of event names to registered handler functions.
+		 */
+		all,
+
+		/**
+		 * Clear all
+		 */
+		clear() {
+			this.all.clear();
+		},
+
+		/**
+		 * Invoke all handlers for the given type.
+		 * If present, `"*"` handlers are invoked after type-matched handlers.
+		 *
+		 * Note: Manually firing "*" handlers is not supported.
+		 *
+		 * @param {string|symbol} type The event type to invoke
+		 * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
+		 * @memberOf mitt
+		 */
+		emit<T = any>(type: EventType, evt: T) {
+			[...((all?.get(type) || []) as EventHandlerList)].map((handler) => {
+				handler(evt);
+			});
+			[...((all?.get("*") || []) as WildCardEventHandlerList)].map((handler) => {
+				handler(type, evt);
+			});
+		},
+
+		/**
+		 * Remove an event handler for the given type.
+		 * @param {string|symbol} type Type of event to unregister `handler` from, or `"*"`
+		 * @param {Function} handler Handler function to remove
+		 * @memberOf mitt
+		 */
+		off<T = any>(type: EventType, handler: Handler<T>) {
+			const handlers = all?.get(type);
+			if (handlers) {
+				handlers.splice(handlers.indexOf(handler) >>> 0, 1);
+			}
+		},
+
+		/**
+		 * Register an event handler for the given type.
+		 * @param {string|symbol} type Type of event to listen for, or `"*"` for all events
+		 * @param {Function} handler Function to call in response to given event
+		 * @memberOf mitt
+		 */
+		on<T = any>(type: EventType, handler: Handler<T>) {
+			const handlers = all?.get(type);
+			// biome-ignore lint: reason
+			const added = handlers && handlers.push(handler);
+			if (!added) {
+				all?.set(type, [handler]);
+			}
+		},
+	};
+}
diff --git a/apps/react-admin/src/utils/abp/notifications/useNotificationSerializer.ts b/apps/react-admin/src/utils/abp/notifications/useNotificationSerializer.ts
new file mode 100644
index 000000000..8b25ebc9d
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/notifications/useNotificationSerializer.ts
@@ -0,0 +1,55 @@
+import type { Notification, NotificationInfo } from "#/notifications";
+import { getResources } from "../localzations/get-resources";
+import { LrWithResources } from "../localzations/lr-with-resources";
+
+export function useNotificationSerializer() {
+	function deserialize(notificationInfo: NotificationInfo): Notification {
+		const { data } = notificationInfo;
+		let title = data.extraProperties.title;
+		let message = data.extraProperties.message;
+		let description = data.extraProperties.description;
+		if (data.extraProperties.L === true || data.extraProperties.L === "true") {
+			{
+				//用于释放resources
+				const resources = getResources([
+					data.extraProperties.title.resourceName ?? data.extraProperties.title.ResourceName,
+					data.extraProperties.message.resourceName ?? data.extraProperties.message.ResourceName,
+					data.extraProperties.description?.resourceName ?? data.extraProperties.description?.ResourceName ?? "AbpUi",
+				]);
+				title = LrWithResources(
+					resources,
+					data.extraProperties.title.name ?? data.extraProperties.title.Name,
+					data.extraProperties.title.values ?? data.extraProperties.title.Values,
+				);
+				message = LrWithResources(
+					resources,
+					data.extraProperties.message.name ?? data.extraProperties.message.Name,
+					data.extraProperties.message.values ?? data.extraProperties.message.Values,
+				);
+				if (description) {
+					description = LrWithResources(
+						resources,
+						data.extraProperties.description.name ?? data.extraProperties.description.Name,
+						data.extraProperties.description.values ?? data.extraProperties.description.Values,
+					);
+				}
+			}
+		}
+		return {
+			contentType: notificationInfo.contentType,
+			creationTime: notificationInfo.creationTime,
+			data: data.extraProperties,
+			description,
+			lifetime: notificationInfo.lifetime,
+			message,
+			name: notificationInfo.name,
+			severity: notificationInfo.severity,
+			title,
+			type: notificationInfo.type,
+		};
+	}
+
+	return {
+		deserialize,
+	};
+}
diff --git a/apps/react-admin/src/utils/abp/notifications/useNotifications.ts b/apps/react-admin/src/utils/abp/notifications/useNotifications.ts
new file mode 100644
index 000000000..ccb9cd4ed
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/notifications/useNotifications.ts
@@ -0,0 +1,109 @@
+import type { Notification, NotificationInfo } from "#/notifications";
+
+import { NotificationContentType, NotificationSeverity, NotificationType } from "#/notifications";
+import { useNotificationSerializer } from "./useNotificationSerializer";
+import { useSignalR } from "./useSignalR";
+import { useEventBus } from "../useEventBus";
+import { Events } from "@/constants/abp-core";
+import { notification } from "antd";
+
+export function useNotifications() {
+	const { deserialize } = useNotificationSerializer();
+	const { publish, subscribe, unSubscribe } = useEventBus();
+	const { init, off, on, onStart, stop } = useSignalR();
+
+	/** 注册通知 */
+	function register() {
+		_registerEvents();
+		_init();
+	}
+
+	/** 释放通知 */
+	function release() {
+		_releaseEvents();
+		stop();
+	}
+
+	function _init() {
+		onStart(() => on(Events.GetNotification, _onNotifyReceived));
+		init({
+			autoStart: true,
+			serverUrl: "/signalr-hubs/notifications",
+			useAccessToken: true,
+		});
+	}
+
+	/** 注册通知事件 */
+	function _registerEvents() {
+		subscribe(Events.UserLogout, stop);
+	}
+
+	/** 释放通知事件 */
+	function _releaseEvents() {
+		unSubscribe(Events.UserLogout, stop);
+		off(Events.GetNotification, _onNotifyReceived);
+	}
+
+	/** 接收通知回调 */
+	function _onNotifyReceived(notificationInfo: NotificationInfo) {
+		const notification = deserialize(notificationInfo);
+		if (notification.type === NotificationType.ServiceCallback) {
+			publish(notification.name, notification);
+			return;
+		}
+		publish(Events.NotificationRecevied, notification);
+		_notification(notification);
+	}
+
+	/** 通知推送 */
+	function _notification(notifier: Notification) {
+		let message = notifier.description;
+		switch (notifier.contentType) {
+			case NotificationContentType.Html:
+			case NotificationContentType.Json:
+			case NotificationContentType.Markdown: {
+				message = notifier.title;
+				break;
+			}
+			case NotificationContentType.Text: {
+				message = notifier.description;
+			}
+		}
+		switch (notifier.severity) {
+			case NotificationSeverity.Error:
+			case NotificationSeverity.Fatal: {
+				notification.error({
+					description: message,
+					message: notifier.title,
+				});
+				break;
+			}
+			case NotificationSeverity.Info: {
+				notification.info({
+					description: message,
+					message: notifier.title,
+				});
+				break;
+			}
+			case NotificationSeverity.Success: {
+				notification.success({
+					description: message,
+					message: notifier.title,
+				});
+				break;
+			}
+			case NotificationSeverity.Warn: {
+				notification.warning({
+					description: message,
+					message: notifier.title,
+				});
+				break;
+			}
+		}
+	}
+
+	return {
+		register,
+		release,
+	};
+}
diff --git a/apps/react-admin/src/utils/abp/notifications/useSignalR.ts b/apps/react-admin/src/utils/abp/notifications/useSignalR.ts
new file mode 100644
index 000000000..8c6c6dadc
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/notifications/useSignalR.ts
@@ -0,0 +1,162 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { HubConnection, IHttpConnectionOptions } from "@microsoft/signalr";
+
+import { HubConnectionBuilder, LogLevel } from "@microsoft/signalr";
+import { useEventBus } from "../useEventBus";
+import useUserStore from "@/store/userStore";
+
+interface SignalROptions {
+	/** 断线自动重连 */
+	automaticReconnect?: boolean;
+	/** 初始化自动建立连接 */
+	autoStart?: boolean;
+	/** 下次重试间隔（ms） */
+	nextRetryDelayInMilliseconds?: number;
+	/** 服务端url */
+	serverUrl: string;
+	/** 是否携带访问令牌 */
+	useAccessToken?: boolean;
+}
+
+export function useSignalR() {
+	const { publish, subscribe } = useEventBus();
+
+	let connection: HubConnection | null = null;
+
+	/** 初始化SignalR */
+	async function init({
+		automaticReconnect = true,
+		autoStart = false,
+		nextRetryDelayInMilliseconds = 60_000,
+		serverUrl,
+		useAccessToken = true,
+	}: SignalROptions) {
+		const httpOptions: IHttpConnectionOptions = {};
+		if (useAccessToken) {
+			httpOptions.accessTokenFactory = () => {
+				const { userToken } = useUserStore.getState();
+				const token = userToken.accessToken;
+				if (!token) {
+					return "";
+				}
+				return token.startsWith("Bearer ") ? token.slice(7) : token;
+			};
+		}
+		const connectionBuilder = new HubConnectionBuilder()
+			.withUrl(serverUrl, httpOptions)
+			.configureLogging(LogLevel.Warning);
+		if (automaticReconnect && nextRetryDelayInMilliseconds) {
+			connectionBuilder.withAutomaticReconnect({
+				nextRetryDelayInMilliseconds: () => nextRetryDelayInMilliseconds,
+			});
+		}
+		connection = connectionBuilder.build();
+		if (autoStart) {
+			await start();
+		}
+	}
+
+	/** 启动连接 */
+	async function start(): Promise<void> {
+		_throwIfNotInit();
+		publish("signalR:beforeStart");
+		try {
+			await connection?.start();
+			publish("signalR:onStart");
+		} catch (error) {
+			publish("signalR:onError", error);
+		}
+	}
+
+	/** 关闭连接 */
+	async function stop(): Promise<void> {
+		_throwIfNotInit();
+		publish("signalR:beforeStop");
+		try {
+			await connection?.stop();
+			publish("signalR:onStop");
+		} catch (error) {
+			publish("signalR:onError", error);
+		}
+	}
+
+	/** 连接前事件 */
+	function beforeStart<T = any>(callback: (event?: T) => void) {
+		subscribe("signalR:beforeStart", callback);
+	}
+
+	/** 连接后事件 */
+	function onStart<T = any>(callback: (event?: T) => void) {
+		subscribe("signalR:onStart", callback);
+	}
+
+	/** 关闭连接前事件 */
+	function beforeStop<T = any>(callback: (event?: T) => void) {
+		subscribe("signalR:beforeStop", callback);
+	}
+
+	/** 关闭连接后事件 */
+	function onStop<T = any>(callback: (event?: T) => void) {
+		subscribe("signalR:onStop", callback);
+	}
+
+	/** 连接错误事件 */
+	function onError(callback: (error?: Error) => void) {
+		subscribe("signalR:onError", callback);
+	}
+
+	/** 订阅服务端消息 */
+	function on(methodName: string, newMethod: (...args: any[]) => void): void {
+		connection?.on(methodName, newMethod);
+	}
+
+	/** 注销服务端消息 */
+	function off(methodName: string, method: (...args: any[]) => void): void {
+		connection?.off(methodName, method);
+	}
+
+	/** 连接关闭事件 */
+	function onClose(callback: (error?: Error) => void): void {
+		connection?.onclose(callback);
+	}
+
+	/** 发送消息 */
+	function send(methodName: string, ...args: any[]): Promise<void> {
+		_throwIfNotInit();
+		if (!connection) {
+			return Promise.reject(new Error("Connection is not initialized"));
+		}
+		return connection.send(methodName, ...args);
+	}
+
+	/** 调用函数 */
+	function invoke<T = any>(methodName: string, ...args: any[]): Promise<T> {
+		_throwIfNotInit();
+		if (connection) {
+			return connection.invoke(methodName, ...args);
+		}
+		return Promise.reject(new Error("Connection is not initialized"));
+	}
+
+	function _throwIfNotInit() {
+		if (connection === null) {
+			throw new Error("unable to send message, connection not initialized!");
+		}
+	}
+
+	return {
+		beforeStart,
+		beforeStop,
+		init,
+		invoke,
+		off,
+		on,
+		onClose,
+		onError,
+		onStart,
+		onStop,
+		send,
+		start,
+		stop,
+	};
+}
diff --git a/apps/react-admin/src/utils/abp/regex.ts b/apps/react-admin/src/utils/abp/regex.ts
new file mode 100644
index 000000000..f792d1555
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/regex.ts
@@ -0,0 +1,47 @@
+/* eslint-disable regexp/no-unused-capturing-group */
+export function isRegMatch(reg: RegExp, val: string) {
+	return reg.test(val);
+}
+
+export function isEmail(val: string) {
+	const reg = /^\w+((-\w+)|(\.\w+))*@[A-Z0-9]+((\.|-)[A-Z0-9]+)*\.[A-Z0-9]+$/i;
+	return isRegMatch(reg, val);
+}
+
+export function isPhone(val: string) {
+	const reg = /^(13\d|14[5|7]|15\d|17\d|18\d|19\d)\d{8}$/;
+	return isRegMatch(reg, val);
+}
+
+export function isDigit(val: string) {
+	return [...val].some((element) => _isDigit(element));
+}
+
+export function isLower(val: string) {
+	return [...val].some((element) => _isLower(element));
+}
+
+export function isUpper(val: string) {
+	return [...val].some((element) => _isUpper(element));
+}
+
+export function isLetterOrDigit(val: string) {
+	const arr = [...val];
+	return !arr.some((element) => _isLetterOrDigit(element));
+}
+
+function _isDigit(char: string) {
+	return isRegMatch(/\d/g, char);
+}
+
+function _isLower(char: string) {
+	return isRegMatch(/[a-z]/g, char);
+}
+
+function _isUpper(char: string) {
+	return isRegMatch(/[A-Z]/g, char);
+}
+
+function _isLetterOrDigit(char: string) {
+	return isRegMatch(/[^ \w]/g, char);
+}
diff --git a/apps/react-admin/src/utils/abp/request/index.ts b/apps/react-admin/src/utils/abp/request/index.ts
new file mode 100644
index 000000000..4404d6f68
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/request/index.ts
@@ -0,0 +1,2 @@
+export * from "./useErrorFormat";
+export * from "./useWrapperResult";
diff --git a/apps/react-admin/src/utils/abp/request/useErrorFormat.ts b/apps/react-admin/src/utils/abp/request/useErrorFormat.ts
new file mode 100644
index 000000000..f947424a9
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/request/useErrorFormat.ts
@@ -0,0 +1,26 @@
+import type { RemoteServiceErrorInfo } from "#/abp-core";
+import type { AxiosResponse } from "axios";
+
+export function errorFormat(response: AxiosResponse) {
+	const _defaultErrorHeaderKey: string = "_abperrorformat";
+	const { data, headers } = response;
+	/** 是否请求错误 */
+	function hasError(): boolean {
+		return headers[_defaultErrorHeaderKey] === "true";
+	}
+	/** 如果请求错误,抛出异常 */
+	function throwIfError(): void {
+		if (!hasError()) return;
+		const errorJson = data.error as RemoteServiceErrorInfo;
+		let errorMessage = errorJson.message;
+		if (errorJson.validationErrors) {
+			errorMessage += errorJson.validationErrors.map((error) => error.message).join("\n");
+		}
+		throw Object.assign({}, response, { message: errorMessage, response });
+	}
+
+	return {
+		hasError,
+		throwIfError,
+	};
+}
diff --git a/apps/react-admin/src/utils/abp/request/useWrapperResult.ts b/apps/react-admin/src/utils/abp/request/useWrapperResult.ts
new file mode 100644
index 000000000..4ee8933a3
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/request/useWrapperResult.ts
@@ -0,0 +1,35 @@
+import type { AxiosResponse } from "axios";
+
+import { errorFormat } from "./useErrorFormat";
+
+export function wrapperResult(response: AxiosResponse) {
+	const { hasError, throwIfError: throwIfAbpError } = errorFormat(response);
+	const _defaultWrapperHeaderKey: string = "_abpwrapresult";
+	const { data, headers } = response;
+	/** 是否已包装结果 */
+	function hasWrapResult(): boolean {
+		return headers[_defaultWrapperHeaderKey] === "true" || hasError();
+	}
+
+	/** 获取包装结果 */
+	function getData(): any {
+		throwIfError();
+		return data.result;
+	}
+
+	/** 如果请求错误,抛出异常 */
+	function throwIfError(): void {
+		throwIfAbpError();
+		const { code, details, message } = data;
+		const hasSuccess = data && Reflect.has(data, "code") && code === "0";
+		if (!hasSuccess) {
+			const content = details || message;
+			throw Object.assign({}, response, { message: content, response });
+		}
+	}
+
+	return {
+		getData,
+		hasWrapResult,
+	};
+}
diff --git a/apps/react-admin/src/utils/abp/sort-order.ts b/apps/react-admin/src/utils/abp/sort-order.ts
new file mode 100644
index 000000000..78e73c77e
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/sort-order.ts
@@ -0,0 +1,13 @@
+import type { SortOrder } from "#/abp-core";
+
+import type { SortOrder as AntdSortOrder } from "antd/es/table/interface";
+
+// type SortOrder = '' | 'asc' | 'desc' | null;
+// AntdSortOrder : 'descend' | 'ascend' | null;
+
+export const antdOrderToAbpOrder = (antdOrder: AntdSortOrder): SortOrder => {
+	if (antdOrder) {
+		return antdOrder === "ascend" ? "asc" : "desc";
+	}
+	return "";
+};
diff --git a/apps/react-admin/src/utils/abp/useEventBus.ts b/apps/react-admin/src/utils/abp/useEventBus.ts
new file mode 100644
index 000000000..67756d9b5
--- /dev/null
+++ b/apps/react-admin/src/utils/abp/useEventBus.ts
@@ -0,0 +1,30 @@
+import type { EventType, Handler, WildcardHandler } from "./mitt";
+
+import mitt from "./mitt";
+
+const emitter = mitt();
+
+interface EventBus {
+	/** 发布事件 */
+	publish(type: "*", event?: any): void;
+	/** 发布事件 */
+	publish<T = any>(type: EventType, event?: T): void;
+
+	/** 订阅事件 */
+	subscribe(type: "*", handler: WildcardHandler): void;
+	/** 订阅事件 */
+	subscribe<T = any>(type: EventType, handler: Handler<T>): void;
+
+	/** 退订事件 */
+	unSubscribe(type: "*", handler: WildcardHandler): void;
+	/** 退订事件 */
+	unSubscribe<T = any>(type: EventType, handler: Handler<T>): void;
+}
+
+export function useEventBus(): EventBus {
+	return {
+		publish: emitter.emit,
+		subscribe: emitter.on,
+		unSubscribe: emitter.off,
+	};
+}
diff --git a/apps/react-admin/src/utils/format-number.ts b/apps/react-admin/src/utils/format-number.ts
new file mode 100644
index 000000000..7f734a63b
--- /dev/null
+++ b/apps/react-admin/src/utils/format-number.ts
@@ -0,0 +1,38 @@
+// https://numeraljs.com/
+import numeral from "numeral";
+
+type InputValue = string | number | null | undefined;
+
+export function fNumber(number: InputValue) {
+	return numeral(number).format();
+}
+
+export function fCurrency(number: InputValue) {
+	const format = number ? numeral(number).format("$0,0.00") : "";
+
+	return result(format, ".00");
+}
+
+export function fPercent(number: InputValue) {
+	const format = number ? numeral(Number(number) / 100).format("0.0%") : "";
+
+	return result(format, ".0");
+}
+
+export function fShortenNumber(number: InputValue) {
+	const format = number ? numeral(number).format("0.00a") : "";
+
+	return result(format, ".00");
+}
+
+export function fBytes(number: InputValue) {
+	const format = number ? numeral(number).format("0.0 b") : "";
+
+	return result(format, ".0");
+}
+
+function result(format: string, key = ".00") {
+	const isInteger = format.includes(key);
+
+	return isInteger ? format.replace(key, "") : format;
+}
diff --git a/apps/react-admin/src/utils/highlight.ts b/apps/react-admin/src/utils/highlight.ts
new file mode 100644
index 000000000..ccdc464d1
--- /dev/null
+++ b/apps/react-admin/src/utils/highlight.ts
@@ -0,0 +1,19 @@
+import "highlight.js/styles/base16/tomorrow-night.css";
+
+import hljs from "highlight.js";
+
+// ----------------------------------------------------------------------
+
+declare global {
+	interface Window {
+		hljs: any;
+	}
+}
+
+hljs.configure({
+	languages: ["javascript", "sh", "bash", "html", "scss", "css", "json"],
+});
+
+if (typeof window !== "undefined") {
+	window.hljs = hljs;
+}
diff --git a/apps/react-admin/src/utils/index.ts b/apps/react-admin/src/utils/index.ts
new file mode 100644
index 000000000..b56e21f2c
--- /dev/null
+++ b/apps/react-admin/src/utils/index.ts
@@ -0,0 +1,32 @@
+import type { LocalEnum } from "#/enum";
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+export function bindMethods<T extends object>(instance: T): void {
+	const prototype = Object.getPrototypeOf(instance);
+	const propertyNames = Object.getOwnPropertyNames(prototype);
+
+	propertyNames.forEach((propertyName) => {
+		const descriptor = Object.getOwnPropertyDescriptor(prototype, propertyName);
+		const propertyValue = instance[propertyName as keyof T];
+
+		if (
+			typeof propertyValue === "function" &&
+			propertyName !== "constructor" &&
+			descriptor &&
+			!descriptor.get &&
+			!descriptor.set
+		) {
+			instance[propertyName as keyof T] = propertyValue.bind(instance);
+		}
+	});
+}
+
+// 映射函数：将 LocalEnum 转为 API 格式
+export function mapLocaleToAbpLanguageFormat(locale: keyof typeof LocalEnum): string {
+	return locale.replace("_", "-");
+}
diff --git a/apps/react-admin/src/utils/merge.ts b/apps/react-admin/src/utils/merge.ts
new file mode 100644
index 000000000..3c48dbec0
--- /dev/null
+++ b/apps/react-admin/src/utils/merge.ts
@@ -0,0 +1,10 @@
+import { createDefu } from "defu";
+
+export { createDefu as createMerge, defu as merge } from "defu";
+
+export const mergeWithArrayOverride = createDefu((originObj, key, updates) => {
+	if (Array.isArray(originObj[key]) && Array.isArray(updates)) {
+		originObj[key] = updates;
+		return true;
+	}
+});
diff --git a/apps/react-admin/src/utils/storage.ts b/apps/react-admin/src/utils/storage.ts
new file mode 100644
index 000000000..72a326267
--- /dev/null
+++ b/apps/react-admin/src/utils/storage.ts
@@ -0,0 +1,28 @@
+import type { StorageEnum } from "#/enum";
+
+export const getItem = <T>(key: StorageEnum): T | null => {
+	let value = null;
+	try {
+		const result = window.localStorage.getItem(key);
+		if (result) {
+			value = JSON.parse(result);
+		}
+	} catch (error) {
+		console.error(error);
+	}
+	return value;
+};
+
+export const getStringItem = (key: StorageEnum): string | null => {
+	return localStorage.getItem(key);
+};
+
+export const setItem = <T>(key: StorageEnum, value: T): void => {
+	localStorage.setItem(key, JSON.stringify(value));
+};
+export const removeItem = (key: StorageEnum): void => {
+	localStorage.removeItem(key);
+};
+export const clearItems = () => {
+	localStorage.clear();
+};
diff --git a/apps/react-admin/src/utils/string.ts b/apps/react-admin/src/utils/string.ts
new file mode 100644
index 000000000..944eb77a9
--- /dev/null
+++ b/apps/react-admin/src/utils/string.ts
@@ -0,0 +1,38 @@
+/**
+ *
+ * @param str 字符串是否为空或空格
+ */
+export function isNullOrWhiteSpace(str?: string) {
+	return str === undefined || str === null || str === "" || str === " ";
+}
+
+/**
+ * 格式化字符串
+ * @param formatted 需要处理的字符串
+ * @param args 参数列表，可以是数组，也可以是对象
+ * @returns 返回格式化的字符串
+ * @example format('Hello, {0}!', ['World'])
+ * @example format('Hello, {name}!', {name: 'World'})
+ */
+export function format(formatted: string, args: any[] | object) {
+	let resultFormatted = formatted;
+	if (Array.isArray(args)) {
+		for (const [i, arg] of args.entries()) {
+			const regexp = new RegExp(String.raw`\{` + i + String.raw`\}`, "gi");
+			resultFormatted = formatted.replace(regexp, arg);
+		}
+	} else if (typeof args === "object") {
+		Object.keys(args).forEach((key) => {
+			const regexp = new RegExp(String.raw`\{` + key + String.raw`\}`, "gi");
+			const param = (args as any)[key];
+			resultFormatted = formatted.replace(regexp, param);
+		});
+	}
+	return resultFormatted;
+}
+
+export function getUnique(val: string) {
+	const arr = [...val];
+	const newArr = [...new Set(arr)];
+	return newArr.join("");
+}
diff --git a/apps/react-admin/src/utils/theme.ts b/apps/react-admin/src/utils/theme.ts
new file mode 100644
index 000000000..f216c81d3
--- /dev/null
+++ b/apps/react-admin/src/utils/theme.ts
@@ -0,0 +1,119 @@
+import color from "color";
+import { themeTokens } from "../theme/type";
+
+/**
+ * @example
+ * const rgb = rgbAlpha("#000000", 0.24);
+ * console.log(rgb); // "rgba(0, 0, 0, 0.24)"
+ *
+ * const rgb = rgbAlpha("var(--colors-palette-primary-main)", 0.24);
+ * console.log(rgb); // "rgba(var(--colors-palette-primary-main), 0.24)"
+ *
+ * const rgb = rgbAlpha("rgb(var(--colors-palette-primary-main))", 0.24);
+ * console.log(rgb); // "rgba(rgb(var(--colors-palette-primary-main)), 0.24)"
+ *
+ * const rgb = rgbAlpha([200, 250, 214], 0.24);
+ * console.log(rgb); // "rgba(200, 250, 214, 0.24)"
+ */
+export function rgbAlpha(color: string | string[] | number[], alpha: number): string {
+	// ensure alpha value is between 0-1
+	const safeAlpha = Math.max(0, Math.min(1, alpha));
+
+	// if color is CSS variable
+	if (typeof color === "string") {
+		if (color.startsWith("#")) {
+			return `rgba(${hexToRgbChannel(color)}, ${safeAlpha})`;
+		}
+		if (color.includes("var(")) {
+			return `rgba(${color}, ${safeAlpha})`;
+		}
+		if (color.startsWith("--")) {
+			return `rgba(var(${color}), ${safeAlpha})`;
+		}
+
+		// handle "200, 250, 214" or "200 250 214" format
+		if (color.includes(",") || color.includes(" ")) {
+			const rgb = color.split(/[,\s]+/).map((n) => n.trim());
+			return `rgba(${rgb.join(", ")}, ${safeAlpha})`;
+		}
+	}
+
+	// handle array format [200, 250, 214]
+	if (Array.isArray(color)) {
+		return `rgba(${color.join(", ")}, ${safeAlpha})`;
+	}
+
+	throw new Error("Invalid color format");
+}
+
+/**
+ * @example
+ * const rgbChannel = hexToRgbChannel("#000000");
+ * console.log(rgbChannel); // "0, 0, 0"
+ */
+export const hexToRgbChannel = (hex: string) => {
+	const rgb = color(hex).rgb().array();
+	return rgb.join(",");
+};
+
+/**
+ * convert to CSS vars
+ * @param propertyPath example: `colors.palette.primary`
+ * @returns example: `--colors-palette-primary`
+ */
+export const toCssVar = (propertyPath: string) => {
+	return `--${propertyPath.split(".").join("-")}`;
+};
+
+/**
+ * convert to CSS vars
+ * @param propertyPath example: `colors.palette.primary`
+ * @returns
+ * ```js
+ * {
+ *   lighter: "var(--colors-palette-primary-lighter)",
+ *   light: "var(--colors-palette-primary-light)",
+ *   main: "rgb(var(--colors-palette-primary-main))",
+ *   dark: "rgb(var(--colors-palette-primary-dark))",
+ *   darker: "rgb(var(--colors-palette-primary-darker))"
+ * }
+ * ```
+ */
+export const toCssVars = (propertyPath: string) => {
+	const variants = getThemeTokenVariants(propertyPath);
+	const result = variants.reduce(
+		(acc, variant) => {
+			const variantKey = variant === "default" ? "DEFAULT" : variant;
+			acc[variantKey] = `var(${toCssVar(`${propertyPath}-${variant}`)})`;
+			return acc;
+		},
+		{} as Record<string, string>,
+	);
+	return result;
+};
+
+/**
+ * get variants in {@link themeTokens}
+ * @param propertyPath example: `colors.palette.primary`
+ * @returns example: `["lighter", "light", "main", "dark", "darker"]`
+ */
+export const getThemeTokenVariants = (propertyPath: string) => {
+	const keys = propertyPath.split(".");
+	const val = keys.reduce((obj: any, key) => {
+		if (obj && typeof obj === "object") {
+			return obj[key];
+		}
+		return;
+	}, themeTokens);
+
+	return val ? Object.keys(val) : [];
+};
+
+/**
+ * remove px unit
+ * @param value example: "16px"
+ * @returns example: 16
+ */
+export const removePx = (value: string) => {
+	return Number(value.replace("px", ""));
+};
diff --git a/apps/react-admin/src/utils/tree.ts b/apps/react-admin/src/utils/tree.ts
new file mode 100644
index 000000000..c034d06be
--- /dev/null
+++ b/apps/react-admin/src/utils/tree.ts
@@ -0,0 +1,78 @@
+import { chain } from "ramda";
+
+/**
+ * Flatten an array containing a tree structure
+ * @param {T[]} trees - An array containing a tree structure
+ * @returns {T[]} - Flattened array
+ */
+export function flattenTrees<T extends { children?: T[] }>(trees: T[] = []): T[] {
+	return chain((node) => {
+		const children = node.children || [];
+		return [node, ...flattenTrees(children)];
+	}, trees);
+}
+
+//将平铺的节点列表转换为树形结构
+
+interface TreeHelperConfig {
+	children: string;
+	id: string;
+	pid: string;
+}
+const DEFAULT_CONFIG: TreeHelperConfig = {
+	id: "id",
+	pid: "pid",
+	children: "children",
+};
+
+const getConfig = (config: Partial<TreeHelperConfig>) => Object.assign({}, DEFAULT_CONFIG, config);
+
+//
+// /**
+//  * 注意此函数会在list原始数据上操作，会改变原始数据
+//  * @param list
+//  * @param config
+//  * @returns
+//  */
+// export function listToTree<T = any>(list: any[], config: Partial<TreeHelperConfig> = {}): T[] {
+// 	const conf = getConfig(config) as TreeHelperConfig;
+// 	const nodeMap = new Map();
+// 	const result: T[] = [];
+// 	const { id, pid, children } = conf;
+
+// 	for (const node of list) {
+// 		node[children] = node[children] || [];
+// 		nodeMap.set(node[id], node);
+// 	}
+// 	for (const node of list) {
+// 		const parent = nodeMap.get(node[pid]);
+// 		(parent ? parent[children] : result).push(node);
+// 		if (parent) {
+// 			parent.hasChildren = true;
+// 		}
+// 	}
+// 	return result;
+// }
+
+export function listToTree<T = any>(list: any[], config: Partial<TreeHelperConfig> = {}): T[] {
+	const conf = getConfig(config) as TreeHelperConfig;
+	const nodeMap = new Map();
+	const result: T[] = [];
+	const { id, pid, children } = conf;
+
+	// 创建 list 的深拷贝，避免修改原始数据
+	const clonedList = list.map((node) => ({ ...node }));
+
+	for (const node of clonedList) {
+		node[children] = node[children] || [];
+		nodeMap.set(node[id], node);
+	}
+	for (const node of clonedList) {
+		const parent = nodeMap.get(node[pid]);
+		(parent ? parent[children] : result).push(node);
+		if (parent) {
+			parent.hasChildren = true;
+		}
+	}
+	return result;
+}
diff --git a/apps/react-admin/src/utils/try-parse-json.ts b/apps/react-admin/src/utils/try-parse-json.ts
new file mode 100644
index 000000000..cd4d1845c
--- /dev/null
+++ b/apps/react-admin/src/utils/try-parse-json.ts
@@ -0,0 +1,5 @@
+import { tryCatch } from "ramda";
+
+export const tryParseJson = tryCatch(JSON.parse, (_) => {
+	return {};
+});
diff --git a/apps/react-admin/tailwind.config.ts b/apps/react-admin/tailwind.config.ts
new file mode 100644
index 000000000..3151e96b7
--- /dev/null
+++ b/apps/react-admin/tailwind.config.ts
@@ -0,0 +1,33 @@
+import type { Config } from "tailwindcss";
+import { rgbAlpha, toCssVar, toCssVars } from "./src/utils/theme";
+
+const config: Config = {
+	content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+	theme: {
+		colors: {
+			primary: toCssVars("colors.palette.primary"),
+			secondary: toCssVars("colors.palette.secondary"),
+			success: toCssVars("colors.palette.success"),
+			warning: toCssVars("colors.palette.warning"),
+			error: toCssVars("colors.palette.error"),
+			info: toCssVars("colors.palette.info"),
+			gray: toCssVars("colors.palette.gray"),
+			common: toCssVars("colors.common"),
+			text: toCssVars("colors.text"),
+			bg: toCssVars("colors.background"),
+			border: rgbAlpha(toCssVar("colors.palette.gray.500Channel"), 0.1),
+			hover: rgbAlpha(toCssVar("colors.palette.gray.500Channel"), 0.1),
+		},
+
+		opacity: toCssVars("opacity"),
+		extend: {
+			borderRadius: toCssVars("borderRadius"),
+			boxShadow: toCssVars("shadows"),
+			spacing: toCssVars("spacing"),
+		},
+	},
+
+	plugins: [],
+};
+
+export default config;
diff --git a/apps/react-admin/tsconfig.json b/apps/react-admin/tsconfig.json
new file mode 100644
index 000000000..b5268bcec
--- /dev/null
+++ b/apps/react-admin/tsconfig.json
@@ -0,0 +1,44 @@
+{
+	"compilerOptions": {
+		"target": "ESNext", // 编译后代码的目标版本（ECMAScript）。
+		"module": "ESNext", // 使用的模块系统类型。ESNext 支持更多特性，比如动态导入等。
+		"lib": ["ESNext", "DOM", "DOM.Iterable"], // 要包含的库文件。DOM、DOM.Iterable 和 ESNext 库文件是 TypeScript 开发中比较基础的依赖。
+		"useDefineForClassFields": true,
+		"skipLibCheck": true, // 跳过编译器对引入库文件的检查，以加快构建速度
+		"allowJs": true, // 允许编译JavaScript文件
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"sourceMap": true, // 输出 *.map 文件提供源码映射
+		"declaration": true, // 是否生成声明文件（.d.ts）。
+		"preserveWatchOutput": true, // 该选项允许在监视模式下保留先前编译的文件，从而避免增量编译时删除更改的文件导致的重新编译。
+		"removeComments": true, // 是否移除注释。可以提高编译速度并减小生成文件的大小
+		"allowImportingTsExtensions": true, // 允许在 import 导入语句中导入 .ts 或 .tsx 扩展名的模块，而不需要显式地指定扩展名
+		"resolveJsonModule": true, // 允许导入json模块
+		"isolatedModules": true, // 让typescript处理每个文件时都是独立的单元（可加快编译速度）
+		"noEmit": true, // 编译器不生成任何JS文件
+		"jsx": "react-jsx",
+		// 使 TypeScript 可以更好地与 CommonJS 模块兼容。在使用 CommonJS 模块系统时，导出的模块将会被包装在一个对象中，这是因为 CommonJS 使用的是类似于 module.exports 的语法来导出模块。
+		// 而某些工具和库可能需要以 ES6 模块的方式导入这些 CommonJS 模块，这时候就可以开启 esModuleInterop 选项。
+		// 开启后，在导入 CommonJS 模块时不需要再使用默认导出才能正确引入，也不需要手动处理 require() 和 module.exports。
+		// 这使得导入和使用 CommonJS 模块的过程变得更加简洁方便。
+		"esModuleInterop": true,
+		/* Linting */
+		"strict": true, // 启用所有严格类型检查选项
+		"strictNullChecks": true, // 对空值进行严格检查
+		"noImplicitAny": true, // 禁止隐式any类型
+		"noUnusedLocals": true, // 消除未使用变量产生的警告
+		"noUnusedParameters": true, // 消除未使用参数产生的警告
+		"noFallthroughCasesInSwitch": true, // 避免 switch 语句掉入陷阱
+		"useUnknownInCatchVariables": false, // 为 true 时，在 catch 块中声明的变量类型会被视为 unknown 而非默认的 any。
+		// https://vitejs.dev/guide/features#client-types
+		"types": ["vite/client"],
+		"baseUrl": ".",
+		/* alias */
+		"paths": {
+			"@/*": ["src/*"],
+			"#/*": ["types/*"]
+		}
+	},
+	"include": ["src", "types", "tailwind.config.ts"],
+	"exclude": ["node_modules", "dist"]
+}
diff --git a/apps/react-admin/types/abp-core/dto.ts b/apps/react-admin/types/abp-core/dto.ts
new file mode 100644
index 000000000..918f5995d
--- /dev/null
+++ b/apps/react-admin/types/abp-core/dto.ts
@@ -0,0 +1,397 @@
+import type {
+	Clock,
+	CurrentCulture,
+	CurrentTenant,
+	CurrentUser,
+	Dictionary,
+	ExtraPropertyDictionary,
+	IHasExtraProperties,
+	LanguageInfo,
+	MultiTenancyInfo,
+	NameValue,
+	TimeZone,
+} from "./global";
+
+/** 包装器数据传输对象 */
+interface WrapResult<T> {
+	/**
+	 * 错误代码
+	 * @summary '0' 表示正常
+	 */
+	code: string;
+	/** 错误详情 */
+	details?: string;
+	/** 错误消息 */
+	message: string;
+	/** 返回数据 */
+	result: T;
+}
+/** 远程服务验证错误描述 */
+interface RemoteServiceValidationErrorInfo {
+	/** 字段名称列表 */
+	members: string[];
+	/** 错误消息 */
+	message: string;
+}
+/** 远程服务错误描述（仅适用于接口代理） */
+interface RemoteServiceErrorInfo {
+	/** 错误代码 */
+	code?: string;
+	/** 异常数据 */
+	data?: { [key: string]: any };
+	/** 错误详情 */
+	details?: string;
+	/** 错误消息 */
+	message?: string;
+	/** 验证错误列表 */
+	validationErrors: RemoteServiceValidationErrorInfo[];
+}
+/** 扩展属性数据传输对象 */
+interface ExtensibleObject {
+	/** 扩展属性 */
+	extraProperties: ExtraPropertyDictionary;
+}
+/** 实体数据传输对象 */
+interface EntityDto<TPrimaryKey> {
+	/** 实体标识 */
+	id: TPrimaryKey;
+}
+/** 实体新增属性数据传输对象 */
+interface CreationAuditedEntityDto<TPrimaryKey> extends EntityDto<TPrimaryKey> {
+	/** 创建时间 */
+	creationTime: Date;
+	/** 创建人标识 */
+	creatorId?: string;
+}
+/** 实体新增用户属性数据传输对象 */
+interface CreationAuditedEntityWithUserDto<TPrimaryKey, TUserDto> extends CreationAuditedEntityDto<TPrimaryKey> {
+	/** 创建人实体数据传输对象 */
+	creator: TUserDto;
+}
+/** 实体审计属性数据传输对象 */
+interface AuditedEntityDto<TPrimaryKey> extends CreationAuditedEntityDto<TPrimaryKey> {
+	/** 上次变更过时间 */
+	lastModificationTime?: Date;
+	/** 上次变更人 */
+	lastModifierId?: string;
+}
+/** 实体审计用户属性数据传输对象 */
+interface AuditedEntityWithUserDto<TPrimaryKey, TUserDto> extends AuditedEntityDto<TPrimaryKey> {
+	/** 创建人实体数据传输对象 */
+	creator: TUserDto;
+	/** 变更人实体数据传输对象 */
+	lastModifier: TUserDto;
+}
+/** 实体审计全属性数据传输对象 */
+interface FullAuditedEntityDto<TPrimaryKey> extends AuditedEntityDto<TPrimaryKey> {
+	/** 删除人标识 */
+	deleterId?: string;
+	/** 删除时间 */
+	deletionTime?: Date;
+	/** 是否已删除 */
+	isDeleted: boolean;
+}
+/** 实体审计用户全属性数据传输对象 */
+interface FullAuditedEntityWithUserDto<TPrimaryKey, TUserDto>
+	extends AuditedEntityWithUserDto<TPrimaryKey, TUserDto>,
+		FullAuditedEntityDto<TPrimaryKey> {
+	/** 删除人实体数据传输对象 */
+	deleter: TUserDto;
+}
+/** 实体扩展属性数据传输对象 */
+interface ExtensibleEntityDto<TKey> extends ExtensibleObject, EntityDto<TKey> {}
+/** 实体新增扩展属性数据传输对象 */
+interface ExtensibleCreationAuditedEntityDto<TPrimaryKey>
+	extends CreationAuditedEntityDto<TPrimaryKey>,
+		ExtensibleEntityDto<TPrimaryKey> {}
+/** 实体新增用户扩展属性数据传输对象 */
+interface ExtensibleCreationAuditedEntityWithUserDto<TPrimaryKey, TUserDto>
+	extends CreationAuditedEntityWithUserDto<TPrimaryKey, TUserDto>,
+		ExtensibleEntityDto<TPrimaryKey> {}
+/** 实体审计扩展属性数据传输对象 */
+interface ExtensibleAuditedEntityDto<TPrimaryKey>
+	extends AuditedEntityDto<TPrimaryKey>,
+		ExtensibleEntityDto<TPrimaryKey> {}
+/** 实体审计用户扩展属性数据传输对象 */
+interface ExtensibleAuditedEntityWithUserDto<TPrimaryKey, TUserDto>
+	extends AuditedEntityWithUserDto<TPrimaryKey, TUserDto>,
+		ExtensibleEntityDto<TPrimaryKey> {}
+/** 实体审计全属性扩展数据传输对象 */
+interface ExtensibleFullAuditedEntityDto<TPrimaryKey>
+	extends FullAuditedEntityDto<TPrimaryKey>,
+		ExtensibleEntityDto<TPrimaryKey> {}
+/** 实体审计用户全属性扩展数据传输对象 */
+interface ExtensibleFullAuditedEntityWithUserDto<TPrimaryKey, TUserDto>
+	extends FullAuditedEntityWithUserDto<TPrimaryKey, TUserDto>,
+		ExtensibleEntityDto<TPrimaryKey> {}
+/** 最大请求数据传输对象 */
+interface LimitedResultRequestDto {
+	/** 最大返回数据大小 */
+	maxResultCount?: number;
+}
+/** 最大请求扩展数据传输对象 */
+interface ExtensibleLimitedResultRequestDto extends LimitedResultRequestDto, ExtensibleObject {}
+/** 排序请求数据传输对象 */
+interface SortedResultRequest {
+	/** 排序字段
+	 * @summary 升序: 字段名称 + asc；降序: 字段名称 + desc
+	 * @example fieldA asc
+	 * @example fieldB desc
+	 */
+	sorting?: string;
+}
+/** 分页请求数据传输对象 */
+interface PagedResultRequestDto extends LimitedResultRequestDto {
+	/**
+	 * 跳过数据大小
+	 * @summary 分页时跳过的数据大小，计算方式：（当前页 - 1）* 最大返回结果，不能小于0
+	 * @example (pageNum - 1) * pageSize
+	 */
+	skipCount?: number;
+}
+/** 分页排序请求数据传输对象 */
+interface PagedAndSortedResultRequestDto extends PagedResultRequestDto, SortedResultRequest {}
+/** 分页排序请求扩展数据传输对象 */
+interface ExtensiblePagedAndSortedResultRequestDto extends PagedAndSortedResultRequestDto, ExtensibleObject {}
+/** 列表数据传输对象 */
+interface ListResultDto<T> {
+	/** 返回项目列表 */
+	items: T[];
+}
+/** 列表扩展数据传输对象 */
+interface ExtensibleListResultDto<T> extends ListResultDto<T>, ExtensibleObject {}
+/** 分页列表数据传输对象 */
+interface PagedResultDto<T> extends ListResultDto<T> {
+	/** 符合条件的最大数量 */
+	totalCount: number;
+}
+/** 分页列表扩展数据传输对象 */
+interface ExtensiblePagedResultDto<T> extends PagedResultDto<T>, ExtensibleObject {}
+/** 分页列表扩展数据传输对象 */
+interface ExtensiblePagedResultRequestDto extends PagedResultRequestDto, ExtensibleObject {}
+/** 应用程序本地化资源数据传输对象 */
+interface ApplicationLocalizationResourceDto {
+	/** 继承资源名称列表 */
+	baseResources: string[];
+	/** 本地化文本字典列表 */
+	texts: Dictionary<string, string>;
+}
+/** 应用程序本地化数据传输对象 */
+interface ApplicationLocalizationDto {
+	/** 当前语言环境 */
+	currentCulture: CurrentCulture;
+	/** 资源字典列表 */
+	resources: Dictionary<string, ApplicationLocalizationResourceDto>;
+}
+/** 应用程序本地化配置数据传输对象 */
+interface ApplicationLocalizationConfigurationDto {
+	/** 当前语言环境 */
+	currentCulture: CurrentCulture;
+	/** 默认本地化资源名称 */
+	defaultResourceName: string;
+	/** 多语言文件配置映射（仅后端） */
+	languageFilesMap: Dictionary<string, NameValue<any>[]>;
+	/** 支持的多语言列表 */
+	languages: LanguageInfo[];
+	/** 多语言资源映射（仅后端） */
+	languagesMap: Dictionary<string, NameValue<any>[]>;
+	/** 本地化资源字典列表 */
+	resources: Dictionary<string, ApplicationLocalizationResourceDto>;
+	/** 本地化资源文本字典列表 */
+	values: Dictionary<string, Dictionary<string, string>>;
+}
+/** 应用程序授权数据传输对象 */
+interface ApplicationAuthConfigurationDto {
+	/** 已授权字典列表 */
+	grantedPolicies: Dictionary<string, boolean>;
+}
+/** 应用程序设置数据传输对象 */
+interface ApplicationSettingConfigurationDto {
+	/** 设置值字典列表 */
+	values: Dictionary<string, string>;
+}
+/** 应用程序功能数据传输对象 */
+interface ApplicationFeatureConfigurationDto {
+	/** 功能值字典列表 */
+	values: Dictionary<string, string>;
+}
+/** 应用程序全局功能数据传输对象 */
+interface ApplicationGlobalFeatureConfigurationDto {
+	/** 已启用功能名称列表 */
+	enabledFeatures: string[];
+}
+/** 应用程序时区数据传输对象 */
+interface TimingDto {
+	/** 时区配置定义 */
+	timeZone: TimeZone;
+}
+/** 本地化文本数据对象 */
+interface LocalizableStringDto {
+	/** 文本名称 */
+	name: string;
+	/** 资源名称 */
+	resource?: string;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface ExtensionPropertyApiGetDto {
+	isAvailable: boolean;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface ExtensionPropertyApiCreateDto {
+	isAvailable: boolean;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface ExtensionPropertyApiUpdateDto {
+	isAvailable: boolean;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface ExtensionPropertyUiTableDto {
+	isAvailable: boolean;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface ExtensionPropertyUiFormDto {
+	isAvailable: boolean;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface ExtensionPropertyUiLookupDto {
+	displayPropertyName: string;
+	filterParamName: string;
+	resultListPropertyName: string;
+	url: string;
+	valuePropertyName: string;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface ExtensionPropertyApiDto {
+	onCreate: ExtensionPropertyApiCreateDto;
+	onGet: ExtensionPropertyApiGetDto;
+	onUpdate: ExtensionPropertyApiUpdateDto;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface ExtensionPropertyUiDto {
+	lookup: ExtensionPropertyUiLookupDto;
+	onCreateForm: ExtensionPropertyUiFormDto;
+	onEditForm: ExtensionPropertyUiFormDto;
+	onTable: ExtensionPropertyUiTableDto;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface ExtensionPropertyAttributeDto {
+	config: Dictionary<string, any>;
+	typeSimple: string;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface ExtensionPropertyDto {
+	api: ExtensionPropertyApiDto;
+	attributes: ExtensionPropertyAttributeDto[];
+	configuration: Dictionary<string, any>;
+	defaultValue: any;
+	displayName?: LocalizableStringDto;
+	type: string;
+	typeSimple: string;
+	ui: ExtensionPropertyUiDto;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface EntityExtensionDto {
+	configuration: Dictionary<string, any>;
+	properties: Dictionary<string, ExtensionPropertyDto>;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface ModuleExtensionDto {
+	configuration: Dictionary<string, any>;
+	entities: Dictionary<string, EntityExtensionDto>;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface ExtensionEnumFieldDto {
+	name: string;
+	value: any;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface ExtensionEnumDto {
+	fields: ExtensionEnumFieldDto[];
+	localizationResource: string;
+}
+/** 扩展属性（用于请求代理，忽略） */
+interface ObjectExtensionsDto {
+	enums: Dictionary<string, ExtensionEnumDto>;
+	modules: Dictionary<string, ModuleExtensionDto>;
+}
+/** 应用程序配置数据传输对象 */
+interface ApplicationConfigurationDto extends IHasExtraProperties {
+	/** 授权配置 */
+	auth: ApplicationAuthConfigurationDto;
+	/** 时钟配置 */
+	clock: Clock;
+	/** 当前租户 */
+	currentTenant: CurrentTenant;
+	/** 当前用户 */
+	currentUser: CurrentUser;
+	/** 功能配置 */
+	features: ApplicationFeatureConfigurationDto;
+	/** 全局功能配置 */
+	globalFeatures: ApplicationGlobalFeatureConfigurationDto;
+	/** 本地化配置 */
+	localization: ApplicationLocalizationConfigurationDto;
+	/** 多租户配置 */
+	multiTenancy: MultiTenancyInfo;
+	/** 实体对象扩展配置 */
+	objectExtensions: ObjectExtensionsDto;
+	/** 系统设置 */
+	setting: ApplicationSettingConfigurationDto;
+	// timing: Timing;
+}
+
+export type {
+	ApplicationAuthConfigurationDto,
+	ApplicationConfigurationDto,
+	ApplicationFeatureConfigurationDto,
+	ApplicationGlobalFeatureConfigurationDto,
+	ApplicationLocalizationConfigurationDto,
+	ApplicationLocalizationDto,
+	ApplicationLocalizationResourceDto,
+	ApplicationSettingConfigurationDto,
+	AuditedEntityDto,
+	AuditedEntityWithUserDto,
+	CreationAuditedEntityDto,
+	CreationAuditedEntityWithUserDto,
+	EntityDto,
+	EntityExtensionDto,
+	ExtensibleAuditedEntityDto,
+	ExtensibleAuditedEntityWithUserDto,
+	ExtensibleCreationAuditedEntityDto,
+	ExtensibleCreationAuditedEntityWithUserDto,
+	ExtensibleEntityDto,
+	ExtensibleFullAuditedEntityDto,
+	ExtensibleFullAuditedEntityWithUserDto,
+	ExtensibleLimitedResultRequestDto,
+	ExtensibleListResultDto,
+	ExtensibleObject,
+	ExtensiblePagedAndSortedResultRequestDto,
+	ExtensiblePagedResultDto,
+	ExtensiblePagedResultRequestDto,
+	ExtensionEnumDto,
+	ExtensionEnumFieldDto,
+	ExtensionPropertyApiCreateDto,
+	ExtensionPropertyApiDto,
+	ExtensionPropertyApiGetDto,
+	ExtensionPropertyApiUpdateDto,
+	ExtensionPropertyAttributeDto,
+	ExtensionPropertyDto,
+	ExtensionPropertyUiDto,
+	ExtensionPropertyUiFormDto,
+	ExtensionPropertyUiLookupDto,
+	ExtensionPropertyUiTableDto,
+	FullAuditedEntityDto,
+	FullAuditedEntityWithUserDto,
+	LimitedResultRequestDto,
+	ListResultDto,
+	LocalizableStringDto,
+	ModuleExtensionDto,
+	NameValue,
+	ObjectExtensionsDto,
+	PagedAndSortedResultRequestDto,
+	PagedResultDto,
+	PagedResultRequestDto,
+	RemoteServiceErrorInfo,
+	SortedResultRequest,
+	TimingDto,
+	WrapResult,
+};
diff --git a/apps/react-admin/types/abp-core/global.ts b/apps/react-admin/types/abp-core/global.ts
new file mode 100644
index 000000000..4f1d4d9ba
--- /dev/null
+++ b/apps/react-admin/types/abp-core/global.ts
@@ -0,0 +1,283 @@
+/** 名称/值键值对 */
+interface NameValue<T> {
+	/** 名称 */
+	name: string;
+	/** 值 */
+	value: T;
+}
+interface AuthConfig {
+	audience?: string;
+	authority: string;
+	clientId: string;
+	clientSecret: string;
+}
+interface Environment {
+	authConfig: AuthConfig;
+	dev: boolean;
+	prod: boolean;
+}
+/** 本地化文本数据对象 */
+interface LocalizableStringInfo {
+	/** 文本名称 */
+	name: string;
+	/** 资源名称 */
+	resourceName: string;
+}
+/** 键值对字典对象 */
+type Dictionary<TKey extends number | string | symbol = any, KValue = any> = {
+	[key in TKey]: KValue;
+};
+/** 扩展属性字典 */
+interface ExtraPropertyDictionary {
+	[key: string]: any;
+}
+/** 并发接口 */
+interface IHasConcurrencyStamp {
+	/** 并发令牌，更新数据时需携带 */
+	concurrencyStamp?: string;
+}
+/** 扩展属性接口 */
+interface IHasExtraProperties {
+	/** 扩展属性 */
+	extraProperties: ExtraPropertyDictionary;
+}
+/** 选择项 */
+interface ISelectionStringValueItem {
+	/** 选择项显示文本多语言对象 */
+	displayText: LocalizableStringInfo;
+	/** 选择项值 */
+	value: string;
+}
+/** 选择项数据源 */
+interface ISelectionStringValueItemSource {
+	/** 选择项列表 */
+	items: ISelectionStringValueItem[];
+}
+/** 验证器 */
+interface Validator {
+	/** 名称 */
+	name: string;
+	/** 属性 */
+	properties: { [key: string]: string };
+}
+/** 值类型 */
+interface ValueType {
+	/** 名称 */
+	name: string;
+	/** 属性 */
+	properties: { [key: string]: string };
+	/** 验证器 */
+	validator: Validator;
+}
+/** 选择项值类型 */
+interface SelectionStringValueType extends ValueType {
+	/** 选择项数据源 */
+	itemSource: ISelectionStringValueItemSource;
+}
+/** 多语言描述 */
+interface LanguageInfo {
+	/**
+	 * 文化名称
+	 * @summary 简体中文：zh-Hans
+	 * @summary English：en-Us
+	 */
+	cultureName: string;
+	/** 显示名称 */
+	displayName: string;
+	/**
+	 * 两个字符描述名称
+	 * @summary 简体中文：zh
+	 * @summary English：en
+	 */
+	twoLetterISOLanguageName: string;
+	/** 用于UI的文化名称（仅后端） */
+	uiCultureName: string;
+}
+/** 时间日期格式化描述 */
+interface DateTimeFormat {
+	/** 日历算法类型 */
+	calendarAlgorithmType: string;
+	/** 日期分隔符 */
+	dateSeparator: string;
+	/** 长时间日期格式 */
+	dateTimeFormatLong: string;
+	/** 完整时间日期格式 */
+	fullDateTimePattern: string;
+	/** 长时间格式 */
+	longTimePattern: string;
+	/** 短日期格式 */
+	shortDatePattern: string;
+	/** 短时间格式 */
+	shortTimePattern: string;
+}
+/** 当前语言描述 */
+interface CurrentCulture {
+	/** 文化名称 */
+	cultureName: string;
+	/** 时间日期格式化配置 */
+	dateTimeFormat: DateTimeFormat;
+	/** 显示名称 */
+	displayName: string;
+	/** 英文名称 */
+	englishName: string;
+	/** 是否从右到左书写习惯 */
+	isRightToLeft: boolean;
+	/** 名称 */
+	name: string;
+	/** 本地名称 */
+	nativeName: string;
+	/** 三个字符描述名称 */
+	threeLetterIsoLanguageName: string;
+	/** 两个字符描述名称 */
+	twoLetterIsoLanguageName: string;
+}
+/** Windows时区 */
+interface WindowsTimeZone {
+	/** 时区标识 */
+	timeZoneId: string;
+}
+/** IANA时区 */
+interface IanaTimeZone {
+	/** 时区名称 */
+	timeZoneName: string;
+}
+/** 时区描述 */
+interface TimeZone {
+	/** IANA时区配置 */
+	iana: IanaTimeZone;
+	/** Windows时区配置 */
+	windows: WindowsTimeZone;
+}
+/** 时钟描述 */
+interface Clock {
+	/** 时钟类型
+	 * @summary UTC 格林威治时间
+	 * @summary Local 本地时间
+	 */
+	kind: string;
+}
+/** 多语言描述 */
+interface MultiTenancyInfo {
+	/** 是否启用多租户 */
+	isEnabled: boolean;
+}
+/** 当前租户 */
+interface CurrentTenant {
+	/** 租户标识 */
+	id?: string;
+	/** 租户是否可用 */
+	isAvailable: boolean;
+	/** 租户名称 */
+	name?: string;
+}
+/** 当前用户 */
+interface CurrentUser {
+	/** 邮件地址 */
+	email: string;
+	/** 邮件是否已确认 */
+	emailVerified: boolean;
+	/** 用户标识 */
+	id?: string;
+	/** 模拟租户标识 */
+	impersonatorTenantId?: string;
+	/** 模拟租户名称 */
+	impersonatorTenantName?: string;
+	/** 模拟用户标识 */
+	impersonatorUserId?: string;
+	/** 模拟用户名称 */
+	impersonatorUserName?: string;
+	/** 是否已认证 */
+	isAuthenticated: boolean;
+	/** 名称 */
+	name?: string;
+	/** 手机号 */
+	phoneNumber?: string;
+	/** 手机号是否已确认 */
+	phoneNumberVerified: boolean;
+	/** 角色列表 */
+	roles: string[];
+	/** 会话标识 */
+	sessionId?: string;
+	/** 姓氏 */
+	surName?: string;
+	/** 租户标识 */
+	tenantId?: string;
+	/** 用户名 */
+	userName: string;
+}
+
+interface IHasSimpleStateCheckers<TState extends IHasSimpleStateCheckers<TState>> {
+	// eslint-disable-next-line no-use-before-define
+	stateCheckers: ISimpleStateChecker<TState>[];
+}
+
+type SimpleStateRecord<TState extends IHasSimpleStateCheckers<TState>, TValue> = {
+	[P in keyof TState]: TValue;
+};
+
+type SimpleStateCheckerResult<TState extends IHasSimpleStateCheckers<TState>> = SimpleStateRecord<TState, boolean>;
+
+interface SimpleStateCheckerContext<TState extends IHasSimpleStateCheckers<TState>> {
+	state: TState;
+}
+
+interface SimpleBatchStateCheckerContext<TState extends IHasSimpleStateCheckers<TState>> {
+	states: TState[];
+}
+
+interface ISimpleStateChecker<TState extends IHasSimpleStateCheckers<TState>> {
+	isEnabled(context: SimpleStateCheckerContext<TState>): boolean;
+	serialize(): string | undefined;
+}
+
+interface ISimpleBatchStateChecker<TState extends IHasSimpleStateCheckers<TState>> {
+	isEnabled(context: SimpleBatchStateCheckerContext<TState>): SimpleStateCheckerResult<TState>;
+	serialize(): string | undefined;
+}
+
+interface ISimpleStateCheckerSerializer {
+	deserialize<TState extends IHasSimpleStateCheckers<TState>>(
+		jsonObject: any,
+		state: TState,
+	): ISimpleStateChecker<TState> | undefined;
+	deserializeArray<TState extends IHasSimpleStateCheckers<TState>>(
+		value: string,
+		state: TState,
+	): ISimpleStateChecker<TState>[];
+	serialize<TState extends IHasSimpleStateCheckers<TState>>(checker: ISimpleStateChecker<TState>): string | undefined;
+	serializeArray<TState extends IHasSimpleStateCheckers<TState>>(
+		stateCheckers: ISimpleStateChecker<TState>[],
+	): string | undefined;
+}
+
+export type {
+	Clock,
+	CurrentCulture,
+	CurrentTenant,
+	CurrentUser,
+	DateTimeFormat,
+	Dictionary,
+	Environment,
+	ExtraPropertyDictionary,
+	IanaTimeZone,
+	IHasConcurrencyStamp,
+	IHasExtraProperties,
+	IHasSimpleStateCheckers,
+	ISelectionStringValueItem,
+	ISelectionStringValueItemSource,
+	ISimpleBatchStateChecker,
+	ISimpleStateChecker,
+	ISimpleStateCheckerSerializer,
+	LanguageInfo,
+	LocalizableStringInfo,
+	MultiTenancyInfo,
+	NameValue,
+	SelectionStringValueType,
+	SimpleBatchStateCheckerContext,
+	SimpleStateCheckerContext,
+	SimpleStateCheckerResult,
+	TimeZone,
+	Validator,
+	ValueType,
+	WindowsTimeZone,
+};
diff --git a/apps/react-admin/types/abp-core/index.ts b/apps/react-admin/types/abp-core/index.ts
new file mode 100644
index 000000000..b53a11785
--- /dev/null
+++ b/apps/react-admin/types/abp-core/index.ts
@@ -0,0 +1,3 @@
+export * from "./dto";
+export * from "./global";
+export * from "./table";
diff --git a/apps/react-admin/types/abp-core/openid.ts b/apps/react-admin/types/abp-core/openid.ts
new file mode 100644
index 000000000..6860a7244
--- /dev/null
+++ b/apps/react-admin/types/abp-core/openid.ts
@@ -0,0 +1,28 @@
+interface OpenIdConfiguration {
+	authorization_endpoint: string;
+	backchannel_logout_session_supported: boolean;
+	backchannel_logout_supported: boolean;
+	check_session_iframe: string;
+	claims_supported: string[];
+	code_challenge_methods_supported: string[];
+	device_authorization_endpoint: string;
+	end_session_endpoint: string;
+	frontchannel_logout_session_supported: boolean;
+	frontchannel_logout_supported: boolean;
+	grant_types_supported: string[];
+	id_token_signing_alg_values_supported: string[];
+	introspection_endpoint: string;
+	issuer: string;
+	jwks_uri: string;
+	request_parameter_supported: boolean;
+	response_modes_supported: string[];
+	response_types_supported: string[];
+	revocation_endpoint: string;
+	scopes_supported: string[];
+	subject_types_supported: string[];
+	token_endpoint: string;
+	token_endpoint_auth_methods_supported: string[];
+	userinfo_endpoint: string;
+}
+
+export type { OpenIdConfiguration };
diff --git a/apps/react-admin/types/abp-core/table.ts b/apps/react-admin/types/abp-core/table.ts
new file mode 100644
index 000000000..0c844ef54
--- /dev/null
+++ b/apps/react-admin/types/abp-core/table.ts
@@ -0,0 +1,3 @@
+type SortOrder = "" | "asc" | "desc" | null;
+
+export type { SortOrder };
diff --git a/apps/react-admin/types/account/account.ts b/apps/react-admin/types/account/account.ts
new file mode 100644
index 000000000..4d488a145
--- /dev/null
+++ b/apps/react-admin/types/account/account.ts
@@ -0,0 +1,17 @@
+import type { NameValue } from "#/abp-core";
+
+interface GetTwoFactorProvidersInput {
+	userId: string;
+}
+
+interface SendEmailSigninCodeDto {
+	emailAddress: string;
+}
+
+interface SendPhoneSigninCodeDto {
+	phoneNumber: string;
+}
+
+type TwoFactorProvider = NameValue<string>;
+
+export type { GetTwoFactorProvidersInput, SendEmailSigninCodeDto, SendPhoneSigninCodeDto, TwoFactorProvider };
diff --git a/apps/react-admin/types/account/index.ts b/apps/react-admin/types/account/index.ts
new file mode 100644
index 000000000..c6781fe09
--- /dev/null
+++ b/apps/react-admin/types/account/index.ts
@@ -0,0 +1,2 @@
+export * from "./token";
+export * from "./user";
diff --git a/apps/react-admin/types/account/profile.ts b/apps/react-admin/types/account/profile.ts
new file mode 100644
index 000000000..2777c3f58
--- /dev/null
+++ b/apps/react-admin/types/account/profile.ts
@@ -0,0 +1,78 @@
+import type { ExtensibleObject, IHasConcurrencyStamp } from "#/abp-core";
+
+interface ProfileDto extends ExtensibleObject, IHasConcurrencyStamp {
+	/** 电子邮件 */
+	email: string;
+	hasPassword: boolean;
+	/** 是否外部用户 */
+	isExternal: boolean;
+	/** 名称 */
+	name?: string;
+	/** 手机号码 */
+	phoneNumber?: string;
+	/** 姓氏 */
+	surname?: string;
+	/** 用户名 */
+	userName: string;
+}
+
+interface UpdateProfileDto extends ExtensibleObject, IHasConcurrencyStamp {
+	/** 电子邮件 */
+	email: string;
+	/** 名称 */
+	name?: string;
+	/** 手机号码 */
+	phoneNumber?: string;
+	/** 姓氏 */
+	surname?: string;
+	/** 用户名 */
+	userName: string;
+}
+
+interface ChangePasswordInput {
+	/** 当前密码 */
+	currentPassword: string;
+	/** 新密码 */
+	newPassword: string;
+}
+
+interface TwoFactorEnabledDto {
+	/** 是否启用二次认证 */
+	enabled: boolean;
+}
+
+interface AuthenticatorDto {
+	authenticatorUri: string;
+	isAuthenticated: boolean;
+	sharedKey: string;
+}
+
+interface VerifyAuthenticatorCodeInput {
+	authenticatorCode: string;
+}
+
+interface AuthenticatorRecoveryCodeDto {
+	recoveryCodes: string[];
+}
+
+interface SendEmailConfirmCodeDto {
+	appName: string;
+	email: string;
+	returnUrl?: string;
+}
+
+interface ConfirmEmailInput {
+	confirmToken: string;
+}
+
+export type {
+	AuthenticatorDto,
+	AuthenticatorRecoveryCodeDto,
+	ChangePasswordInput,
+	ConfirmEmailInput,
+	ProfileDto,
+	SendEmailConfirmCodeDto,
+	TwoFactorEnabledDto,
+	UpdateProfileDto,
+	VerifyAuthenticatorCodeInput,
+};
diff --git a/apps/react-admin/types/account/token.ts b/apps/react-admin/types/account/token.ts
new file mode 100644
index 000000000..859647a7f
--- /dev/null
+++ b/apps/react-admin/types/account/token.ts
@@ -0,0 +1,59 @@
+/** 授权请求数据模型 */
+interface TokenRequest {
+	/** 客户端id */
+	clientId: string;
+	/** 客户端密钥 */
+	clientSecret: string;
+}
+/** 用户密码授权请求数据模型 */
+interface PasswordTokenRequest extends TokenRequest {
+	/** 用户密码 */
+	password: string;
+	/** 授权范围 */
+	scope?: string;
+	/** 用户名 */
+	userName: string;
+}
+/** 用户密码授权请求数据模型 */
+interface PasswordTokenRequestModel {
+	/** 用户密码 */
+	password: string;
+	/** 用户名 */
+	username: string;
+}
+/** 用户刷新令牌请求数据模型 */
+interface RefreshTokenRequestModel {
+	/** 用户密码 */
+	refreshToken: string;
+}
+/** 令牌返回数据模型 */
+interface TokenResult {
+	/** 访问令牌 */
+	accessToken: string;
+	/** 过期时间 */
+	expiresIn: number;
+	/** 刷新令牌 */
+	refreshToken: string;
+	/** 令牌类型 */
+	tokenType: string;
+}
+/** oauth标准令牌返回结构 */
+interface OAuthTokenResult {
+	/** 访问令牌 */
+	access_token: string;
+	/** 过期时间 */
+	expires_in: number;
+	/** 刷新令牌 */
+	refresh_token: string;
+	/** 令牌类型 */
+	token_type: string;
+}
+
+export type {
+	OAuthTokenResult,
+	PasswordTokenRequest,
+	PasswordTokenRequestModel,
+	TokenRequest,
+	TokenResult,
+	RefreshTokenRequestModel,
+};
diff --git a/apps/react-admin/types/account/user.ts b/apps/react-admin/types/account/user.ts
new file mode 100644
index 000000000..c762d8e53
--- /dev/null
+++ b/apps/react-admin/types/account/user.ts
@@ -0,0 +1,81 @@
+interface UserInfo {
+	[property: string]: any;
+	/**
+	 * 邮箱地址
+	 */
+	email: string;
+	/**
+	 * 邮件地址是否已验证
+	 */
+	emailVerified: string;
+	/**
+	 * 名称
+	 */
+	givenName: string;
+	/**
+	 * 用户名
+	 */
+	name: string;
+	/**
+	 * 手机号是否已验证
+	 */
+	phoneNumberVerified: string;
+	/**
+	 * 用户名
+	 */
+	preferredUsername: string;
+	/**
+	 * 角色列表
+	 */
+	role: string[];
+	/**
+	 * 用户标识
+	 */
+	sub: string;
+	/**
+	 * 用户名
+	 */
+	uniqueName: string;
+}
+/** oauth标准用户信息结构 */
+interface OAuthUserInfo {
+	[property: string]: any;
+	/**
+	 * 邮箱地址
+	 */
+	email: string;
+	/**
+	 * 邮件地址是否已验证
+	 */
+	email_verified: string;
+	/**
+	 * 名称
+	 */
+	given_name: string;
+	/**
+	 * 用户名
+	 */
+	name: string;
+	/**
+	 * 手机号是否已验证
+	 */
+	phone_number_verified: string;
+	/**
+	 * 用户名
+	 */
+	preferred_username: string;
+	/**
+	 * 角色列表
+	 */
+	role: string[];
+	/**
+	 * 用户标识
+	 */
+	sub: string;
+	/**
+	 * 用户名
+	 */
+	unique_name: string;
+}
+
+export type { OAuthUserInfo, UserInfo };
diff --git a/apps/react-admin/types/api.ts b/apps/react-admin/types/api.ts
new file mode 100644
index 000000000..589aa80cd
--- /dev/null
+++ b/apps/react-admin/types/api.ts
@@ -0,0 +1,7 @@
+export interface Result<T = any> {
+	code: string;
+	/** 错误详情 */
+	details?: string;
+	message: string;
+	result: T;
+}
diff --git a/apps/react-admin/types/entity.ts b/apps/react-admin/types/entity.ts
new file mode 100644
index 000000000..743f72597
--- /dev/null
+++ b/apps/react-admin/types/entity.ts
@@ -0,0 +1,87 @@
+import type { BasicStatus, PermissionType } from "./enum";
+
+export interface UserToken {
+	accessToken?: string;
+	refreshToken?: string;
+}
+
+export interface UserInfo {
+	[key: string]: any;
+	id: string;
+	email: string;
+	password?: string;
+	role?: Role;
+	status?: BasicStatus;
+	permissions?: Permission[];
+	//TODO 清理无用的信息
+	/**
+	 * 用户描述
+	 */
+	desc: string;
+	/**
+	 * 首页地址
+	 */
+	homePath: string;
+
+	/**
+	 * accessToken
+	 */
+	token: string;
+	/**
+	 * 头像
+	 */
+	avatar: string;
+	/**
+	 * 用户昵称
+	 */
+	realName: string;
+	/**
+	 * 用户角色
+	 */
+	roles?: string[];
+	/**
+	 * 用户id
+	 */
+	userId: string;
+	/**
+	 * 用户名
+	 */
+	username: string;
+}
+
+export interface Organization {
+	id: string;
+	name: string;
+	status: "enable" | "disable";
+	desc?: string;
+	order?: number;
+	children?: Organization[];
+}
+
+export interface Permission {
+	id: string;
+	parentId: string;
+	name: string;
+	label: string;
+	type: PermissionType;
+	route: string;
+	status?: BasicStatus;
+	order?: number;
+	icon?: string;
+	component?: string;
+	hide?: boolean;
+	hideTab?: boolean;
+	frameSrc?: string;
+	newFeature?: boolean;
+	children?: Permission[];
+}
+
+export interface Role {
+	id: string;
+	name: string;
+	label: string;
+	status: BasicStatus;
+	order?: number;
+	desc?: string;
+	permission?: Permission[];
+}
diff --git a/apps/react-admin/types/enum.ts b/apps/react-admin/types/enum.ts
new file mode 100644
index 000000000..2efe3d417
--- /dev/null
+++ b/apps/react-admin/types/enum.ts
@@ -0,0 +1,60 @@
+export enum BasicStatus {
+	DISABLE = 0,
+	ENABLE = 1,
+}
+
+export enum ResultEnum {
+	SUCCESS = "0",
+	ERROR = -1,
+	TIMEOUT = 401,
+}
+
+export enum StorageEnum {
+	UserInfo = "userInfo",
+	UserToken = "userToken",
+	AccessCodes = "accessCodes",
+	Settings = "settings",
+	I18N = "i18nextLng",
+	Application = "application",
+}
+
+export enum ThemeMode {
+	Light = "light",
+	Dark = "dark",
+}
+
+export enum ThemeLayout {
+	Vertical = "vertical",
+	Horizontal = "horizontal",
+	Mini = "mini",
+}
+
+export enum ThemeColorPresets {
+	Default = "default",
+	Cyan = "cyan",
+	Purple = "purple",
+	Blue = "blue",
+	Orange = "orange",
+	Red = "red",
+}
+
+export enum LocalEnum {
+	en_US = "en_US",
+	zh_CN = "zh_CN",
+}
+
+export enum MultiTabOperation {
+	FULLSCREEN = "fullscreen",
+	REFRESH = "refresh",
+	CLOSE = "close",
+	CLOSEOTHERS = "closeOthers",
+	CLOSEALL = "closeAll",
+	CLOSELEFT = "closeLeft",
+	CLOSERIGHT = "closeRight",
+}
+
+export enum PermissionType {
+	CATALOGUE = 0,
+	MENU = 1,
+	BUTTON = 2,
+}
diff --git a/apps/react-admin/types/features.ts b/apps/react-admin/types/features.ts
new file mode 100644
index 000000000..7572c98e4
--- /dev/null
+++ b/apps/react-admin/types/features.ts
@@ -0,0 +1,27 @@
+import type { NameValue } from "./abp-core";
+
+type FeatureValue = NameValue<string>;
+
+/**
+ * 特性检查接口
+ */
+interface IFeatureChecker {
+	/**
+	 * 获取特性值
+	 * @param name 特性名称
+	 * @returns 返回设定的特性值,不存在则为空字符串
+	 */
+	getOrEmpty(name: string): string;
+	/**
+	 * 是否启用特性
+	 * @param featureNames 特性名称
+	 * @param requiresAll 是否全部符合
+	 */
+	isEnabled(featureNames: string | string[], requiresAll?: boolean): boolean;
+}
+
+interface IGlobalFeatureChecker {
+	isEnabled(featureNames: string | string[], requiresAll?: boolean): boolean;
+}
+
+export type { FeatureValue, IFeatureChecker, IGlobalFeatureChecker };
diff --git a/apps/react-admin/types/localization.ts b/apps/react-admin/types/localization.ts
new file mode 100644
index 000000000..7aba9ea16
--- /dev/null
+++ b/apps/react-admin/types/localization.ts
@@ -0,0 +1,7 @@
+interface StringLocalizer {
+	L(key: string, args?: any[] | Record<string, any> | undefined): string;
+	Lr(resource: string, key: string, args?: any[] | Record<string, any> | undefined): string;
+}
+
+export type { StringLocalizer };
+//TODO 是否要去掉
diff --git a/apps/react-admin/types/management/auditing/audit-logs.ts b/apps/react-admin/types/management/auditing/audit-logs.ts
new file mode 100644
index 000000000..5eae58abe
--- /dev/null
+++ b/apps/react-admin/types/management/auditing/audit-logs.ts
@@ -0,0 +1,59 @@
+import type { ExtraPropertyDictionary, PagedAndSortedResultRequestDto } from "#/abp-core";
+
+import type { EntityChangeDto } from "./entity-changes";
+
+interface Action {
+	[key: string]: any;
+	executionDuration?: number;
+	executionTime: Date;
+	extraProperties?: ExtraPropertyDictionary;
+	id: string;
+	methodName?: string;
+	parameters?: string;
+	serviceName?: string;
+}
+
+interface AuditLogDto {
+	[key: string]: any;
+	actions?: Action[];
+	applicationName?: string;
+	browserInfo?: string;
+	clientId?: string;
+	clientIpAddress?: string;
+	clientName?: string;
+	comments?: string;
+	correlationId?: string;
+	entityChanges?: EntityChangeDto[];
+	exceptions?: string;
+	executionDuration?: number;
+	executionTime?: Date;
+	extraProperties?: ExtraPropertyDictionary;
+	httpMethod?: string;
+	httpStatusCode?: number;
+	id: string;
+	impersonatorTenantId?: string;
+	impersonatorUserId?: string;
+	tenantId?: string;
+	tenantName?: string;
+	url?: string;
+	userId?: string;
+	userName?: string;
+}
+interface AuditLogGetListInput extends PagedAndSortedResultRequestDto {
+	applicationName?: string;
+	clientId?: string;
+	clientIpAddress?: string;
+	correlationId?: string;
+	endTime?: Date;
+	hasException?: boolean;
+	httpMethod?: string;
+	httpStatusCode?: number;
+	maxExecutionDuration?: number;
+	minExecutionDuration?: number;
+	startTime?: Date;
+	url?: string;
+	userId?: string;
+	userName?: string;
+}
+
+export type { Action, AuditLogDto, AuditLogGetListInput };
diff --git a/apps/react-admin/types/management/auditing/entity-changes.ts b/apps/react-admin/types/management/auditing/entity-changes.ts
new file mode 100644
index 000000000..c9058030b
--- /dev/null
+++ b/apps/react-admin/types/management/auditing/entity-changes.ts
@@ -0,0 +1,60 @@
+import type { ExtraPropertyDictionary, PagedAndSortedResultRequestDto } from "#/abp-core";
+
+export enum ChangeType {
+	Created = 0,
+	Deleted = 2,
+	Updated = 1,
+}
+
+interface PropertyChange {
+	id: string;
+	newValue?: string;
+	originalValue?: string;
+	propertyName?: string;
+	propertyTypeFullName?: string;
+}
+
+interface EntityChangeDto {
+	[key: string]: any;
+	changeTime?: Date;
+	changeType: ChangeType;
+	entityId?: string;
+	entityTenantId?: string;
+	entityTypeFullName?: string;
+	extraProperties?: ExtraPropertyDictionary;
+	id: string;
+	propertyChanges?: PropertyChange[];
+}
+
+interface EntityChangeWithUsernameDto {
+	entityChange: EntityChangeDto;
+	userName?: string;
+}
+
+interface EntityChangeGetListInput extends PagedAndSortedResultRequestDto {
+	auditLogId?: string;
+	changeType?: ChangeType;
+	endTime?: Date;
+	entityId?: string;
+	entityTypeFullName?: string;
+	startTime?: Date;
+}
+
+interface EntityChangeGetWithUsernameInput {
+	entityId?: string;
+	entityTypeFullName?: string;
+}
+
+interface RestoreEntityInput {
+	entityChangeId?: string;
+	entityId: string;
+}
+
+export type {
+	EntityChangeDto,
+	EntityChangeGetListInput,
+	EntityChangeGetWithUsernameInput,
+	EntityChangeWithUsernameDto,
+	PropertyChange,
+	RestoreEntityInput,
+};
diff --git a/apps/react-admin/types/management/auditing/index.ts b/apps/react-admin/types/management/auditing/index.ts
new file mode 100644
index 000000000..1c76005b1
--- /dev/null
+++ b/apps/react-admin/types/management/auditing/index.ts
@@ -0,0 +1,2 @@
+export * from "./audit-logs";
+export * from "./entity-changes";
diff --git a/apps/react-admin/types/management/identity/claim-types.ts b/apps/react-admin/types/management/identity/claim-types.ts
new file mode 100644
index 000000000..9afa3b1ca
--- /dev/null
+++ b/apps/react-admin/types/management/identity/claim-types.ts
@@ -0,0 +1,63 @@
+import type { ExtensibleEntityDto, ExtensibleObject, PagedAndSortedResultRequestDto } from "#/abp-core";
+
+export enum ValueType {
+	Boolean = 2,
+	DateTime = 3,
+	Int = 1,
+	String = 0,
+}
+
+interface IdentityClaimTypeDto extends ExtensibleEntityDto<string> {
+	description?: string;
+	isStatic: boolean;
+	name: string;
+	regex?: string;
+	regexDescription?: string;
+	required: boolean;
+	valueType: ValueType;
+}
+
+interface IdentityClaimTypeCreateOrUpdateDto extends ExtensibleObject {
+	description?: string;
+	regex?: string;
+	regexDescription?: string;
+	required: boolean;
+}
+
+interface IdentityClaimTypeCreateDto extends IdentityClaimTypeCreateOrUpdateDto {
+	isStatic: boolean;
+	name: string;
+	valueType: ValueType;
+}
+
+type IdentityClaimTypeUpdateDto = IdentityClaimTypeCreateOrUpdateDto;
+
+interface GetIdentityClaimTypePagedListInput extends PagedAndSortedResultRequestDto {
+	filter?: string;
+}
+
+interface IdentityClaimDto {
+	claimType: string;
+	claimValue: string;
+}
+
+interface IdentityClaimDeleteDto {
+	claimType: string;
+	claimValue: string;
+}
+
+type IdentityClaimCreateDto = IdentityClaimDeleteDto;
+
+interface IdentityClaimUpdateDto extends IdentityClaimDeleteDto {
+	newClaimValue: string;
+}
+
+export type {
+	GetIdentityClaimTypePagedListInput,
+	IdentityClaimCreateDto,
+	IdentityClaimDto,
+	IdentityClaimTypeCreateDto,
+	IdentityClaimTypeDto,
+	IdentityClaimTypeUpdateDto,
+	IdentityClaimUpdateDto,
+};
diff --git a/apps/react-admin/types/management/identity/claims.ts b/apps/react-admin/types/management/identity/claims.ts
new file mode 100644
index 000000000..12fdd01de
--- /dev/null
+++ b/apps/react-admin/types/management/identity/claims.ts
@@ -0,0 +1,23 @@
+interface IdentityClaimDto {
+	claimType: string;
+	claimValue: string;
+	id: string;
+}
+
+interface IdentityClaimDeleteDto {
+	claimType: string;
+	claimValue: string;
+}
+
+interface IdentityClaimUpdateDto {
+	claimType: string;
+	claimValue: string;
+	newClaimValue: string;
+}
+
+interface IdentityClaimCreateDto {
+	claimType: string;
+	claimValue: string;
+}
+
+export type { IdentityClaimCreateDto, IdentityClaimDeleteDto, IdentityClaimDto, IdentityClaimUpdateDto };
diff --git a/apps/react-admin/types/management/identity/index.ts b/apps/react-admin/types/management/identity/index.ts
new file mode 100644
index 000000000..c0a8aed4e
--- /dev/null
+++ b/apps/react-admin/types/management/identity/index.ts
@@ -0,0 +1,5 @@
+export * from "./claim-types";
+export * from "./security-logs";
+export * from "./user";
+export * from "./role";
+export * from "./organization-units";
diff --git a/apps/react-admin/types/management/identity/organization-units.ts b/apps/react-admin/types/management/identity/organization-units.ts
new file mode 100644
index 000000000..054668529
--- /dev/null
+++ b/apps/react-admin/types/management/identity/organization-units.ts
@@ -0,0 +1,92 @@
+import type { AuditedEntityDto, PagedAndSortedResultRequestDto } from "#/abp-core";
+
+import type { GetUserPagedListInput } from "./user";
+
+/** 组织机构 */
+interface OrganizationUnitDto extends AuditedEntityDto<string> {
+	/** 编号 */
+	code: string;
+	/** 显示名称 */
+	displayName: string;
+	/** 父节点标识 */
+	parentId?: string;
+}
+
+/** 组织机构分页查询对象 */
+interface GetOrganizationUnitPagedListInput extends PagedAndSortedResultRequestDto {
+	/** 过滤字符 */
+	filter?: string;
+}
+
+/** 组织机构创建对象 */
+interface OrganizationUnitCreateDto {
+	/** 显示名称 */
+	displayName: string;
+	/** 父节点标识 */
+	parentId?: string;
+}
+
+/** 组织机构变更对象 */
+interface OrganizationUnitUpdateDto {
+	/** 显示名称 */
+	displayName: string;
+}
+
+/** 组织机构增加部门对象 */
+interface OrganizationUnitAddRoleInput {
+	/** 角色标识列表 */
+	roleIds: string[];
+}
+
+/** 组织机构增加用户对象 */
+interface OrganizationUnitAddUserInput {
+	/** 用户标识列表 */
+	userIds: string[];
+}
+
+interface OrganizationUnitGetChildrenDto {
+	/** 上级组织机构id */
+	id: string;
+	/** 递归查询子级 */
+	recursive?: boolean;
+}
+
+interface GetIdentityUsersInput extends PagedAndSortedResultRequestDto {
+	filter?: string;
+}
+
+interface GetIdentityRolesInput extends PagedAndSortedResultRequestDto {
+	filter?: string;
+}
+
+interface GetUnaddedUserListInput extends GetUserPagedListInput {
+	id: string;
+}
+
+interface GetUnaddedRoleListInput extends GetUserPagedListInput {
+	id: string;
+}
+
+interface OrganizationUnitAddUserDto {
+	userIds: string[];
+}
+
+interface OrganizationUnitAddRoleDto {
+	roleIds: string[];
+}
+
+export type {
+	GetIdentityRolesInput,
+	GetIdentityUsersInput,
+	GetOrganizationUnitPagedListInput,
+	GetUnaddedRoleListInput,
+	GetUnaddedUserListInput,
+	OrganizationUnitAddRoleDto,
+	OrganizationUnitAddRoleInput,
+	OrganizationUnitAddUserDto,
+	OrganizationUnitAddUserInput,
+	OrganizationUnitCreateDto,
+	OrganizationUnitDto,
+	OrganizationUnitGetChildrenDto,
+	OrganizationUnitUpdateDto,
+};
diff --git a/apps/react-admin/types/management/identity/role.ts b/apps/react-admin/types/management/identity/role.ts
new file mode 100644
index 000000000..9eab5ba45
--- /dev/null
+++ b/apps/react-admin/types/management/identity/role.ts
@@ -0,0 +1,33 @@
+import type { IHasConcurrencyStamp, PagedAndSortedResultRequestDto } from "#/abp-core";
+
+interface RoleDtoBase {
+	isDefault: boolean;
+	isPublic: boolean;
+	name: string;
+}
+
+interface IdentityRoleDto extends RoleDtoBase, IHasConcurrencyStamp {
+	[key: string]: any;
+	id: string;
+	isStatic: boolean;
+}
+
+interface GetRolePagedListInput extends PagedAndSortedResultRequestDto {
+	filter?: string;
+}
+
+type IdentityRoleCreateDto = RoleDtoBase;
+
+interface IdentityRoleUpdateDto extends RoleDtoBase, IHasConcurrencyStamp {}
+
+interface ChangeRoleOrganizationUnitDto {
+	organizationUnitIds: string[];
+}
+
+export type {
+	ChangeRoleOrganizationUnitDto,
+	GetRolePagedListInput,
+	IdentityRoleCreateDto,
+	IdentityRoleDto,
+	IdentityRoleUpdateDto,
+};
diff --git a/apps/react-admin/types/management/identity/security-logs.ts b/apps/react-admin/types/management/identity/security-logs.ts
new file mode 100644
index 000000000..998aea5d3
--- /dev/null
+++ b/apps/react-admin/types/management/identity/security-logs.ts
@@ -0,0 +1,30 @@
+import type { ExtensibleObject, PagedAndSortedResultRequestDto } from "#/abp-core";
+
+interface SecurityLogDto extends ExtensibleObject {
+	action?: string;
+	applicationName?: string;
+	browserInfo?: string;
+	clientId?: string;
+	clientIpAddress?: string;
+	correlationId?: string;
+	creationTime?: Date;
+	id: string;
+	identity?: string;
+	tenantName?: string;
+	userId?: string;
+	userName?: string;
+}
+
+interface GetSecurityLogPagedRequest extends PagedAndSortedResultRequestDto {
+	actionName?: string;
+	applicationName?: string;
+	clientId?: string;
+	correlationId?: string;
+	endTime?: Date;
+	identity?: string;
+	startTime?: Date;
+	userId?: string;
+	userName?: string;
+}
+
+export type { GetSecurityLogPagedRequest, SecurityLogDto };
diff --git a/apps/react-admin/types/management/identity/sessions.ts b/apps/react-admin/types/management/identity/sessions.ts
new file mode 100644
index 000000000..82793a11c
--- /dev/null
+++ b/apps/react-admin/types/management/identity/sessions.ts
@@ -0,0 +1,25 @@
+import type { EntityDto, PagedAndSortedResultRequestDto } from "#/abp-core";
+
+interface IdentitySessionDto extends EntityDto<string> {
+	clientId?: string;
+	device: string;
+	deviceInfo: string;
+	ipAddresses?: string;
+	lastAccessed?: Date;
+	sessionId: string;
+	signedIn: Date;
+	userId: string;
+}
+
+interface GetUserSessionsInput extends PagedAndSortedResultRequestDto {
+	clientId?: string;
+	device?: string;
+	userId?: string;
+}
+
+interface GetMySessionsInput extends PagedAndSortedResultRequestDto {
+	clientId?: string;
+	device?: string;
+}
+
+export type { GetMySessionsInput, GetUserSessionsInput, IdentitySessionDto };
diff --git a/apps/react-admin/types/management/identity/user.ts b/apps/react-admin/types/management/identity/user.ts
new file mode 100644
index 000000000..a49394c06
--- /dev/null
+++ b/apps/react-admin/types/management/identity/user.ts
@@ -0,0 +1,105 @@
+import type {
+	ExtensibleObject,
+	FullAuditedEntityDto,
+	IHasConcurrencyStamp,
+	IHasExtraProperties,
+	PagedAndSortedResultRequestDto,
+} from "#/abp-core";
+
+/** 用户对象接口 */
+interface IUser {
+	/** 邮件地址 */
+	email: string;
+	/** 登录锁定 */
+	lockoutEnabled: boolean;
+	/** 用户名 */
+	name: string;
+	/** 联系方式 */
+	phoneNumber?: string;
+	/** 用户简称 */
+	surname?: string;
+	/** 双因素验证 */
+	twoFactorEnabled: boolean;
+	/** 用户账户 */
+	userName: string;
+}
+
+/** 更改密码数据传输对象 */
+interface ChangeMyPasswordInput {
+	/** 当前密码 */
+	currentPassword?: string;
+	/** 新密码 */
+	newPassword: string;
+}
+
+interface ChangeUserPasswordInput {
+	/** 新密码 */
+	password: string;
+}
+
+/** 用户组织机构数据传输对象 */
+interface IdentityUserOrganizationUnitUpdateDto {
+	/** 组织机构标识列表 */
+	organizationUnitIds: string[];
+}
+/** 用户实体数据传输对象 */
+interface IdentityUserDto extends FullAuditedEntityDto<string>, IUser, IHasConcurrencyStamp, IHasExtraProperties {
+	[key: string]: any;
+	/** 邮箱已验证 */
+	emailConfirmed: boolean;
+	/** 已激活的用户 */
+	isActive: boolean;
+	/** 锁定截止时间 */
+	lockoutEnd?: Date;
+	/** 联系方式已验证 */
+	phoneNumberConfirmed: boolean;
+	/** 角色列表 */
+	roleNames: string[];
+	/** 租户标识 */
+	tenentId?: string;
+}
+/** 创建或更新用户实体数据传输对象 */
+interface IdentityUserCreateOrUpdateDto extends ExtensibleObject {
+	/** 邮件地址 */
+	email: string;
+	/** 登录锁定 */
+	lockoutEnabled: boolean;
+	/** 用户名 */
+	name: string;
+	/** 密码 */
+	password?: string;
+	/** 联系方式 */
+	phoneNumber?: string;
+	/** 角色列表 */
+	roleNames?: string[];
+	/** 用户简称 */
+	surname?: string;
+	/** 用户账户 */
+	userName: string;
+}
+/** 获取用户分页列表数据传输对象 */
+interface GetUserPagedListInput extends PagedAndSortedResultRequestDto {
+	/** 过滤条件 */
+	filter?: string;
+}
+
+type IdentityUserCreateDto = IdentityUserCreateOrUpdateDto;
+type IdentityUserUpdateDto = IdentityUserCreateOrUpdateDto;
+
+interface UserLookupCountInput {
+	filter?: string;
+}
+
+interface UserLookupSearchInput extends UserLookupCountInput, PagedAndSortedResultRequestDto {}
+
+export type {
+	ChangeMyPasswordInput,
+	ChangeUserPasswordInput,
+	GetUserPagedListInput,
+	IdentityUserCreateDto,
+	IdentityUserDto,
+	IdentityUserOrganizationUnitUpdateDto,
+	IdentityUserUpdateDto,
+	UserLookupCountInput,
+	UserLookupSearchInput,
+};
diff --git a/apps/react-admin/types/management/permissions/definitions.ts b/apps/react-admin/types/management/permissions/definitions.ts
new file mode 100644
index 000000000..7ea152955
--- /dev/null
+++ b/apps/react-admin/types/management/permissions/definitions.ts
@@ -0,0 +1,45 @@
+import type { IHasExtraProperties } from "#/abp-core";
+
+export enum MultiTenancySides {
+	Both = 0x3,
+	Host = 0x2,
+	Tenant = 0x1,
+}
+interface PermissionDefinitionCreateOrUpdateDto extends IHasExtraProperties {
+	displayName: string;
+	isEnabled: boolean;
+	parentName?: string;
+	providers: string[];
+	stateCheckers: string;
+}
+
+interface PermissionDefinitionCreateDto extends PermissionDefinitionCreateOrUpdateDto {
+	groupName: string;
+	name: string;
+}
+
+interface PermissionDefinitionDto extends IHasExtraProperties {
+	displayName: string;
+	groupName: string;
+	isEnabled: boolean;
+	isStatic: boolean;
+	multiTenancySide: MultiTenancySides;
+	name: string;
+	parentName?: string;
+	providers: string[];
+	stateCheckers: string;
+}
+
+interface PermissionDefinitionGetListInput {
+	filter?: string;
+	groupName?: string;
+}
+
+type PermissionDefinitionUpdateDto = PermissionDefinitionCreateOrUpdateDto;
+
+export type {
+	PermissionDefinitionCreateDto,
+	PermissionDefinitionDto,
+	PermissionDefinitionGetListInput,
+	PermissionDefinitionUpdateDto,
+};
diff --git a/apps/react-admin/types/management/permissions/groups.ts b/apps/react-admin/types/management/permissions/groups.ts
new file mode 100644
index 000000000..7d420e731
--- /dev/null
+++ b/apps/react-admin/types/management/permissions/groups.ts
@@ -0,0 +1,24 @@
+import type { IHasExtraProperties } from "#/abp-core";
+
+interface PermissionGroupDefinitionCreateOrUpdateDto extends IHasExtraProperties {
+	displayName: string;
+}
+interface PermissionGroupDefinitionCreateDto extends PermissionGroupDefinitionCreateOrUpdateDto {
+	name: string;
+}
+interface PermissionGroupDefinitionDto extends IHasExtraProperties {
+	displayName: string;
+	isStatic: boolean;
+	name: string;
+}
+interface PermissionGroupDefinitionGetListInput {
+	filter?: string;
+}
+type PermissionGroupDefinitionUpdateDto = PermissionGroupDefinitionCreateOrUpdateDto;
+
+export type {
+	PermissionGroupDefinitionCreateDto,
+	PermissionGroupDefinitionDto,
+	PermissionGroupDefinitionGetListInput,
+	PermissionGroupDefinitionUpdateDto,
+};
diff --git a/apps/react-admin/types/management/permissions/index.ts b/apps/react-admin/types/management/permissions/index.ts
new file mode 100644
index 000000000..972144448
--- /dev/null
+++ b/apps/react-admin/types/management/permissions/index.ts
@@ -0,0 +1 @@
+export * from "./permissions";
diff --git a/apps/react-admin/types/management/permissions/permissions.ts b/apps/react-admin/types/management/permissions/permissions.ts
new file mode 100644
index 000000000..442459c0a
--- /dev/null
+++ b/apps/react-admin/types/management/permissions/permissions.ts
@@ -0,0 +1,60 @@
+interface PermissionProvider {
+	providerKey?: string;
+	providerName: string;
+}
+
+interface PermissionDto {
+	allowedProviders: string[];
+	displayName: string;
+	grantedProviders: PermissionProvider[];
+	isGranted: boolean;
+	name: string;
+	parentName?: string;
+}
+
+interface PermissionGroupDto {
+	displayName: string;
+	name: string;
+	permissions: PermissionDto[];
+}
+
+interface PermissionUpdateDto {
+	/** 是否授权 */
+	isGranted: boolean;
+	/** 权限名称 */
+	name: string;
+}
+
+interface PermissionsUpdateDto {
+	permissions: PermissionUpdateDto[];
+}
+
+interface PermissionResultDto {
+	entityDisplayName: string;
+	groups: PermissionGroupDto[];
+}
+
+interface PermissionTree {
+	/** 子节点 */
+	children: PermissionTree[];
+	/** 是否禁用 */
+	disabled: boolean;
+	/** 显示名称 */
+	displayName: string;
+	/** 是否授权 */
+	isGranted?: boolean;
+	isRoot: boolean;
+	/** 权限标识 */
+	name: string;
+	/** 父节点 */
+	parentName?: string;
+}
+
+export type {
+	PermissionDto,
+	PermissionGroupDto,
+	PermissionProvider,
+	PermissionResultDto,
+	PermissionsUpdateDto,
+	PermissionTree,
+};
diff --git a/apps/react-admin/types/management/settings/definitions.ts b/apps/react-admin/types/management/settings/definitions.ts
new file mode 100644
index 000000000..dc71ebf6f
--- /dev/null
+++ b/apps/react-admin/types/management/settings/definitions.ts
@@ -0,0 +1,41 @@
+import type { ExtensibleObject, IHasConcurrencyStamp, IHasExtraProperties } from "#/abp-core";
+
+interface SettingDefinitionDto extends ExtensibleObject {
+	defaultValue?: string;
+	description?: string;
+	displayName: string;
+	isEncrypted: boolean;
+	isInherited: boolean;
+	isStatic: boolean;
+	isVisibleToClients: boolean;
+	name: string;
+	providers: string[];
+}
+
+interface SettingDefinitionGetListInput {
+	filter?: string;
+	providerName?: string;
+}
+
+interface SettingDefinitionCreateOrUpdateDto extends IHasConcurrencyStamp, IHasExtraProperties {
+	defaultValue?: string;
+	description?: string;
+	displayName: string;
+	isEncrypted: boolean;
+	isInherited: boolean;
+	isVisibleToClients: boolean;
+	providers: string[];
+}
+
+interface SettingDefinitionCreateDto extends SettingDefinitionCreateOrUpdateDto {
+	name: string;
+}
+
+type SettingDefinitionUpdateDto = SettingDefinitionCreateOrUpdateDto;
+
+export type {
+	SettingDefinitionCreateDto,
+	SettingDefinitionDto,
+	SettingDefinitionGetListInput,
+	SettingDefinitionUpdateDto,
+};
diff --git a/apps/react-admin/types/management/settings/index.ts b/apps/react-admin/types/management/settings/index.ts
new file mode 100644
index 000000000..9658b57fb
--- /dev/null
+++ b/apps/react-admin/types/management/settings/index.ts
@@ -0,0 +1,2 @@
+export * from "./definitions";
+export * from "./settings";
diff --git a/apps/react-admin/types/management/settings/settings.ts b/apps/react-admin/types/management/settings/settings.ts
new file mode 100644
index 000000000..766be01b4
--- /dev/null
+++ b/apps/react-admin/types/management/settings/settings.ts
@@ -0,0 +1,57 @@
+interface SettingBase {
+	/** 名称 */
+	name: string;
+	/** 当前设置值 */
+	value: string;
+}
+
+/** 配置变更对象 */
+type SettingUpdateInput = SettingBase;
+
+/** 配置变更集合对象 */
+interface SettingsUpdateInput {
+	/** 配置集合 */
+	settings: SettingUpdateInput[];
+}
+
+export enum ValueType {
+	Array = 4,
+	Boolean = 2,
+	Date = 3,
+	NoSet = -1,
+	Number = 1,
+	Object = 10,
+	Option = 5,
+	String = 0,
+}
+
+interface Option {
+	name: string;
+	value: string;
+}
+
+interface SettingDetail {
+	defaultValue: string;
+	description?: string;
+	displayName: string;
+	isEncrypted: boolean;
+	name: string;
+	options: Option[];
+	slot?: string;
+	value?: string;
+	valueType: ValueType;
+}
+
+interface Setting {
+	description?: string;
+	details: SettingDetail[];
+	displayName: string;
+}
+
+interface SettingGroup {
+	description: string;
+	displayName: string;
+	settings: Setting[];
+}
+
+export type { Setting, SettingDetail, SettingGroup, SettingsUpdateInput };
diff --git a/apps/react-admin/types/notifications/definitions.ts b/apps/react-admin/types/notifications/definitions.ts
new file mode 100644
index 000000000..e1b79f78d
--- /dev/null
+++ b/apps/react-admin/types/notifications/definitions.ts
@@ -0,0 +1,25 @@
+import type { NotificationLifetime, NotificationType } from "./notifications";
+
+interface NotificationDto {
+	description: string;
+	displayName: string;
+	lifetime: NotificationLifetime;
+	name: string;
+	type: NotificationType;
+}
+
+interface NotificationGroupDto {
+	displayName: string;
+	name: string;
+	notifications: NotificationDto[];
+}
+
+interface NotificationTemplateDto {
+	content?: string;
+	culture?: string;
+	description?: string;
+	name: string;
+	title: string;
+}
+
+export type { NotificationDto, NotificationGroupDto, NotificationTemplateDto };
diff --git a/apps/react-admin/types/notifications/index.ts b/apps/react-admin/types/notifications/index.ts
new file mode 100644
index 000000000..2548123ba
--- /dev/null
+++ b/apps/react-admin/types/notifications/index.ts
@@ -0,0 +1,3 @@
+export * from "./my-notifilers";
+export * from "./notifications";
+export * from "./definitions";
diff --git a/apps/react-admin/types/notifications/my-notifilers.ts b/apps/react-admin/types/notifications/my-notifilers.ts
new file mode 100644
index 000000000..f5f33e67b
--- /dev/null
+++ b/apps/react-admin/types/notifications/my-notifilers.ts
@@ -0,0 +1,44 @@
+import type { PagedAndSortedResultRequestDto } from "#/abp-core";
+
+import type {
+	NotificationContentType,
+	NotificationData,
+	NotificationLifetime,
+	NotificationReadState,
+	NotificationSeverity,
+	NotificationType,
+} from "./notifications";
+
+interface GetMyNotifilerPagedListInput extends PagedAndSortedResultRequestDto {
+	filter?: string;
+	/** 已读状态 */
+	readState?: NotificationReadState;
+}
+
+interface MarkReadStateInput {
+	idList: string[];
+	state: NotificationReadState;
+}
+
+interface UserNotificationDto {
+	/** 内容类型 */
+	contentType: NotificationContentType;
+	/** 创建时间 */
+	creationTime: Date;
+	/** 数据 */
+	data: NotificationData;
+	/** Id */
+	id: string;
+	/** 生命周期 */
+	lifetime: NotificationLifetime;
+	/** 名称 */
+	name: string;
+	/** 紧急程度 */
+	severity: NotificationSeverity;
+	/** 阅读状态 */
+	state: NotificationReadState;
+	/** 类型 */
+	type: NotificationType;
+}
+
+export type { GetMyNotifilerPagedListInput, MarkReadStateInput, UserNotificationDto };
diff --git a/apps/react-admin/types/notifications/notifications.ts b/apps/react-admin/types/notifications/notifications.ts
new file mode 100644
index 000000000..0338abbbd
--- /dev/null
+++ b/apps/react-admin/types/notifications/notifications.ts
@@ -0,0 +1,93 @@
+import type { Dictionary } from "#/abp-core";
+
+export enum NotificationLifetime {
+	OnlyOne = 1,
+	Persistent = 0,
+}
+
+export enum NotificationType {
+	Application = 0,
+	ServiceCallback = 30,
+	System = 10,
+	User = 20,
+}
+
+export enum NotificationContentType {
+	Html = 1,
+	Json = 3,
+	Markdown = 2,
+	Text = 0,
+}
+
+export enum NotificationSeverity {
+	Error = 30,
+	Fatal = 40,
+	Info = 10,
+	Success = 0,
+	Warn = 20,
+}
+
+export enum NotificationReadState {
+	Read = 0,
+	UnRead = 1,
+}
+
+interface NotificationData {
+	extraProperties: { [key: string]: any };
+	type: string;
+}
+
+interface UserIdentifier {
+	userId: string;
+	userName?: string;
+}
+
+interface NotificationSendInput {
+	/** 当前文化（模板渲染时需要） */
+	culture?: string;
+	/** 通知数据 */
+	data: Dictionary<string, any>;
+	/** 通知（模板通知时为模板名称）名称 */
+	name: string;
+	/** 紧急程度 */
+	severity?: NotificationSeverity;
+	/** 接收人列表 */
+	toUsers?: UserIdentifier[];
+}
+
+type NotificationTemplateSendInput = NotificationSendInput;
+
+interface NotificationInfo {
+	/** 内容类型 */
+	contentType: NotificationContentType;
+	/** 创建时间 */
+	creationTime: Date;
+	/** 数据 */
+	data: NotificationData;
+	/** Id */
+	id: string;
+	/** 生命周期 */
+	lifetime: NotificationLifetime;
+	/** 名称 */
+	name: string;
+	/** 紧急程度 */
+	severity: NotificationSeverity;
+	/** 类型 */
+	type: NotificationType;
+}
+
+interface Notification {
+	[key: string]: any;
+	contentType: NotificationContentType;
+	creationTime: Date;
+	data: Record<string, any>;
+	description?: string;
+	lifetime: NotificationLifetime;
+	message: string;
+	name: string;
+	severity: NotificationSeverity;
+	title: string;
+	type: NotificationType;
+}
+
+export type { Notification, NotificationData, NotificationInfo, NotificationSendInput, NotificationTemplateSendInput };
diff --git a/apps/react-admin/types/openiddict/applications.ts b/apps/react-admin/types/openiddict/applications.ts
new file mode 100644
index 000000000..e27b36ffc
--- /dev/null
+++ b/apps/react-admin/types/openiddict/applications.ts
@@ -0,0 +1,84 @@
+import type {
+	Dictionary,
+	ExtensibleAuditedEntityDto,
+	ExtensibleObject,
+	PagedAndSortedResultRequestDto,
+} from "#/abp-core";
+
+interface OpenIddictApplicationFeaturesDto {
+	requirePkce?: boolean;
+}
+
+interface OpenIddictApplicationRequirementsDto {
+	features: OpenIddictApplicationFeaturesDto;
+}
+
+interface OpenIddictApplicationTokenLifetimesDto {
+	accessToken?: number;
+	authorizationCode?: number;
+	deviceCode?: number;
+	identityToken?: number;
+	refreshToken?: number;
+	userCode?: number;
+}
+
+interface OpenIddictApplicationSettingsDto {
+	tokenLifetime: OpenIddictApplicationTokenLifetimesDto;
+}
+
+interface OpenIddictApplicationGetListInput extends PagedAndSortedResultRequestDto {
+	filter?: string;
+}
+
+interface OpenIddictApplicationCreateOrUpdateDto extends ExtensibleObject {
+	applicationType?: string;
+	clientId: string;
+	clientSecret?: string;
+	clientType?: string;
+	clientUri?: string;
+	consentType?: string;
+	displayName?: string;
+	displayNames?: Dictionary<string, string>;
+	endpoints?: string[];
+	grantTypes?: string[];
+	logoUri?: string;
+	postLogoutRedirectUris?: string[];
+	properties?: Dictionary<string, string>;
+	redirectUris?: string[];
+	requirements: OpenIddictApplicationRequirementsDto;
+	responseTypes?: string[];
+	scopes?: string[];
+	settings?: OpenIddictApplicationSettingsDto;
+}
+
+type OpenIddictApplicationCreateDto = OpenIddictApplicationCreateOrUpdateDto;
+
+type OpenIddictApplicationUpdateDto = OpenIddictApplicationCreateOrUpdateDto;
+
+interface OpenIddictApplicationDto extends ExtensibleAuditedEntityDto<string> {
+	applicationType?: string;
+	clientId: string;
+	clientSecret?: string;
+	clientType?: string;
+	clientUri?: string;
+	consentType?: string;
+	displayName?: string;
+	displayNames?: Dictionary<string, string>;
+	endpoints?: string[];
+	grantTypes?: string[];
+	logoUri?: string;
+	postLogoutRedirectUris?: string[];
+	properties?: Dictionary<string, string>;
+	redirectUris?: string[];
+	requirements: OpenIddictApplicationRequirementsDto;
+	responseTypes?: string[];
+	scopes?: string[];
+	settings: OpenIddictApplicationSettingsDto;
+}
+
+export type {
+	OpenIddictApplicationCreateDto,
+	OpenIddictApplicationDto,
+	OpenIddictApplicationGetListInput,
+	OpenIddictApplicationUpdateDto,
+};
diff --git a/apps/react-admin/types/openiddict/authorizations.ts b/apps/react-admin/types/openiddict/authorizations.ts
new file mode 100644
index 000000000..0593c824a
--- /dev/null
+++ b/apps/react-admin/types/openiddict/authorizations.ts
@@ -0,0 +1,23 @@
+import type { Dictionary, ExtensibleAuditedEntityDto, PagedAndSortedResultRequestDto } from "#/abp-core";
+
+interface OpenIddictAuthorizationDto extends ExtensibleAuditedEntityDto<string> {
+	applicationId?: string;
+	creationDate?: string;
+	properties?: Dictionary<string, string>;
+	scopes?: string[];
+	status?: string;
+	subject?: string;
+	type?: string;
+}
+
+interface OpenIddictAuthorizationGetListInput extends PagedAndSortedResultRequestDto {
+	beginCreationTime?: string;
+	clientId?: string;
+	endCreationTime?: string;
+	filter?: string;
+	status?: string;
+	subject?: string;
+	type?: string;
+}
+
+export type { OpenIddictAuthorizationDto, OpenIddictAuthorizationGetListInput };
diff --git a/apps/react-admin/types/openiddict/index.ts b/apps/react-admin/types/openiddict/index.ts
new file mode 100644
index 000000000..b5b4d0a0e
--- /dev/null
+++ b/apps/react-admin/types/openiddict/index.ts
@@ -0,0 +1,4 @@
+export * from "./applications";
+export * from "./authorizations";
+export * from "./scopes";
+export * from "./tokens";
diff --git a/apps/react-admin/types/openiddict/scopes.ts b/apps/react-admin/types/openiddict/scopes.ts
new file mode 100644
index 000000000..ee19d50b0
--- /dev/null
+++ b/apps/react-admin/types/openiddict/scopes.ts
@@ -0,0 +1,36 @@
+import type {
+	Dictionary,
+	ExtensibleAuditedEntityDto,
+	ExtensibleObject,
+	PagedAndSortedResultRequestDto,
+} from "#/abp-core";
+
+interface OpenIddictScopeCreateOrUpdateDto extends ExtensibleObject {
+	description?: string;
+	descriptions?: Dictionary<string, string>;
+	displayName?: string;
+	displayNames?: Dictionary<string, string>;
+	name: string;
+	properties?: Dictionary<string, string>;
+	resources?: string[];
+}
+
+type OpenIddictScopeCreateDto = OpenIddictScopeCreateOrUpdateDto;
+
+interface OpenIddictScopeGetListInput extends PagedAndSortedResultRequestDto {
+	filter?: string;
+}
+
+type OpenIddictScopeUpdateDto = OpenIddictScopeCreateOrUpdateDto;
+
+interface OpenIddictScopeDto extends ExtensibleAuditedEntityDto<string> {
+	description?: string;
+	descriptions?: Dictionary<string, string>;
+	displayName?: string;
+	displayNames?: Dictionary<string, string>;
+	name: string;
+	properties?: Dictionary<string, string>;
+	resources?: string[];
+}
+
+export type { OpenIddictScopeCreateDto, OpenIddictScopeDto, OpenIddictScopeGetListInput, OpenIddictScopeUpdateDto };
diff --git a/apps/react-admin/types/openiddict/tokens.ts b/apps/react-admin/types/openiddict/tokens.ts
new file mode 100644
index 000000000..55e68122a
--- /dev/null
+++ b/apps/react-admin/types/openiddict/tokens.ts
@@ -0,0 +1,31 @@
+import type { ExtensibleAuditedEntityDto, PagedAndSortedResultRequestDto } from "#/abp-core";
+
+interface OpenIddictTokenGetListInput extends PagedAndSortedResultRequestDto {
+	authorizationId?: string;
+	beginCreationTime?: string;
+	beginExpirationDate?: string;
+	clientId?: string;
+	endCreationTime?: string;
+	endExpirationDate?: string;
+	filter?: string;
+	referenceId?: string;
+	status?: string;
+	subject?: string;
+	type?: string;
+}
+
+interface OpenIddictTokenDto extends ExtensibleAuditedEntityDto<string> {
+	applicationId?: string;
+	authorizationId?: string;
+	creationDate?: string;
+	expirationDate?: string;
+	payload?: string;
+	properties?: string;
+	redemptionDate?: string;
+	referenceId?: string;
+	status?: string;
+	subject?: string;
+	type?: string;
+}
+
+export type { OpenIddictTokenDto, OpenIddictTokenGetListInput };
diff --git a/apps/react-admin/types/router.ts b/apps/react-admin/types/router.ts
new file mode 100644
index 000000000..f45b6f325
--- /dev/null
+++ b/apps/react-admin/types/router.ts
@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import type { Params, RouteObject } from "react-router";
+
+export interface RouteMeta {
+	/**
+	 * antd menu selectedKeys
+	 */
+	key: string;
+	/**
+	 * menu label, i18n
+	 */
+	label: string;
+	/**
+	 * menu prefix icon
+	 */
+	icon?: ReactNode;
+	/**
+	 * menu suffix icon
+	 */
+	suffix?: ReactNode;
+	/**
+	 * hide in menu
+	 */
+	hideMenu?: boolean;
+	/**
+	 * hide in multi tab
+	 */
+	hideTab?: boolean;
+	/**
+	 * disable in menu
+	 */
+	disabled?: boolean;
+	/**
+	 * react router outlet
+	 */
+	outlet?: any;
+	/**
+	 * use to refresh tab
+	 */
+	timeStamp?: string;
+	/**
+	 * external link and iframe need
+	 */
+	frameSrc?: string;
+	/**
+	 * dynamic route params
+	 *
+	 * @example /user/:id
+	 */
+	params?: Params<string>;
+}
+export type AppRouteObject = {
+	order?: number;
+	meta?: RouteMeta;
+	children?: AppRouteObject[];
+} & Omit<RouteObject, "children">;
diff --git a/apps/react-admin/types/settings.ts b/apps/react-admin/types/settings.ts
new file mode 100644
index 000000000..d5f58819b
--- /dev/null
+++ b/apps/react-admin/types/settings.ts
@@ -0,0 +1,31 @@
+import type { NameValue } from "./abp-core";
+
+type SettingValue = NameValue<string>;
+/**
+ * 设置接口
+ */
+interface ISettingProvider {
+	/**
+	 * 获取设定值结合
+	 * @param names 过滤的设置名称
+	 */
+	getAll(...names: string[]): SettingValue[];
+	/**
+	 * 查询 number 类型设定值
+	 * @param name 设置名称
+	 * @returns 返回类型为 number 的设定值, 默认0
+	 */
+	getNumber(name: string): number;
+	/**
+	 * 获取设定值,如果为空返回空字符串
+	 * @param name 设置名称
+	 */
+	getOrEmpty(name: string): string;
+	/**
+	 * 查询 boolean 类型设定值
+	 * @param name 设置名称
+	 */
+	isTrue(name: string): boolean;
+}
+
+export type { ISettingProvider, SettingValue };
diff --git a/apps/react-admin/vite-env.d.ts b/apps/react-admin/vite-env.d.ts
new file mode 100644
index 000000000..57b30747f
--- /dev/null
+++ b/apps/react-admin/vite-env.d.ts
@@ -0,0 +1,17 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+	readonly VITE_GLOB_APP_TITLE: string;
+	readonly VITE_APP_BASE_API: string;
+	readonly VITE_APP_HOMEPAGE: string;
+	readonly VITE_APP_BASE_PATH: string;
+	readonly VITE_APP_ENV: "development" | "production";
+	readonly VITE_GLOB_CLIENT_ID: string;
+	readonly VITE_GLOB_CLIENT_SECRET: string;
+	readonly VITE_GLOB_SCOPE: string;
+	readonly VITE_PROXY_API: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}
diff --git a/apps/react-admin/vite.config.ts b/apps/react-admin/vite.config.ts
new file mode 100644
index 000000000..c8a4423c7
--- /dev/null
+++ b/apps/react-admin/vite.config.ts
@@ -0,0 +1,89 @@
+import path from "node:path";
+
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import react from "@vitejs/plugin-react";
+import { visualizer } from "rollup-plugin-visualizer";
+import { defineConfig, loadEnv } from "vite";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+	const env = loadEnv(mode, process.cwd(), "");
+	const base = env.VITE_APP_BASE_PATH || "/";
+	const isProduction = mode === "production";
+	const proxyTarget = env.VITE_PROXY_API || "http://localhost:30001";
+
+	return {
+		base,
+		plugins: [
+			react(),
+			vanillaExtractPlugin({
+				identifiers: ({ debugId }) => `${debugId}`,
+			}),
+			tsconfigPaths(),
+			createSvgIconsPlugin({
+				iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
+				symbolId: "icon-[dir]-[name]",
+			}),
+			isProduction &&
+				visualizer({
+					open: true,
+					gzipSize: true,
+					brotliSize: true,
+				}),
+		],
+		server: {
+			open: false,
+			host: true,
+			port: 3100,
+			proxy: {
+				"/.well-known": {
+					changeOrigin: true,
+					target: proxyTarget,
+					ws: true,
+				},
+				"/api": {
+					changeOrigin: true,
+					target: proxyTarget,
+					ws: true,
+				},
+				"/connect": {
+					changeOrigin: true,
+					target: proxyTarget,
+					ws: true,
+				},
+				"/signalr-hubs": {
+					changeOrigin: true,
+					target: proxyTarget,
+					ws: true,
+				},
+			},
+		},
+		optimizeDeps: {
+			include: ["react", "react-dom", "react-router", "antd"],
+		},
+		esbuild: {
+			drop: isProduction ? ["console", "debugger"] : [],
+		},
+		build: {
+			target: "esnext",
+			minify: "esbuild",
+			sourcemap: false,
+			cssCodeSplit: true,
+			chunkSizeWarningLimit: 1000, // 提高警告阈值到 1000 KB
+
+			rollupOptions: {
+				output: {
+					manualChunks: {
+						"vendor-react": ["react", "react-dom", "react-router"],
+						"vendor-antd": ["antd", "@ant-design/icons", "@ant-design/cssinjs"],
+						"vendor-charts": ["apexcharts", "react-apexcharts"],
+						"vendor-utils": ["axios", "dayjs", "i18next", "zustand"],
+						"vendor-ui": ["framer-motion", "styled-components", "@iconify/react"],
+					},
+				},
+			},
+		},
+	};
+});
diff --git a/lefthook.yml b/lefthook.yml
new file mode 100644
index 000000000..f6e5dfe59
--- /dev/null
+++ b/lefthook.yml
@@ -0,0 +1,35 @@
+# EXAMPLE USAGE:
+#
+#   Refer for explanation to following link:
+#   https://github.com/evilmartians/lefthook/blob/master/docs/configuration.md
+#
+# pre-push:
+#   commands:
+#     packages-audit:
+#       tags: frontend security
+#       run: yarn audit
+#     gems-audit:
+#       tags: backend security
+#       run: bundle audit
+#
+# pre-commit:
+#   parallel: true
+#   commands:
+#     eslint:
+#       glob: "*.{js,ts,jsx,tsx}"
+#       run: yarn eslint {staged_files}
+#     rubocop:
+#       tags: backend style
+#       glob: "*.rb"
+#       exclude: '(^|/)(application|routes)\.rb$'
+#       run: bundle exec rubocop --force-exclusion {all_files}
+#     govet:
+#       tags: backend style
+#       files: git ls-files -m
+#       glob: "*.go"
+#       run: go vet {files}
+#   scripts:
+#     "hello.js":
+#       runner: node
+#     "any.go":
+#       runner: go run