🔖 chore(release): v1.6.3 [skip ci]

## [1.6.3](https://github.com/perfect-panel/ppanel-web/compare/v1.6.2...v1.6.3) (2025-12-08) ### 🐛 Bug Fixes * **docker**: Update Dockerfiles to create non-root user with proper permissions ([1bfebb6](https://github.com/perfect-panel/ppanel-web/commit/1bfebb6))
🐛 fix(docker): Update Dockerfiles to create non-root user with proper permissions
2026-02-06 11:40:28 -05:00 · 2025-12-08 08:26:20 +00:00 · 2025-12-08 08:23:52 +00:00 · 2025-12-08 07:53:30 +00:00 · 2025-12-08 07:51:08 +00:00 · 2025-11-05 04:45:55 +00:00
995 changed files with 66336 additions and 23488 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,19 +1,989 @@
 <a name="readme-top"></a>
 # Changelog

-# [1.0.0-beta.21](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.20...v1.0.0-beta.21) (2025-02-23)
-
-
-### ✨ Features
-
-* **privacy-policy**: Add privacy policy related text and links ([baa68f0](https://github.com/perfect-panel/ppanel-web/commit/baa68f0))
+## [1.6.3](https://github.com/perfect-panel/ppanel-web/compare/v1.6.2...v1.6.3) (2025-12-08)


 ### 🐛 Bug Fixes

-* **locales**: Removed multilingual files to clean up unnecessary language support ([5b151cd](https://github.com/perfect-panel/ppanel-web/commit/5b151cd))
-* **locales**: Update custom HTML description in language file, ([87381da](https://github.com/perfect-panel/ppanel-web/commit/87381da))
-* **table**: Update privacy policy tab translation key and remove unnecessary requestType from OAuth callback ([14b3af5](https://github.com/perfect-panel/ppanel-web/commit/14b3af5))
+* **docker**: Update Dockerfiles to create non-root user with proper permissions ([1bfebb6](https://github.com/perfect-panel/ppanel-web/commit/1bfebb6))
+
+## [1.6.2](https://github.com/perfect-panel/ppanel-web/compare/v1.6.1...v1.6.2) (2025-12-08)
+
+
+### 🐛 Bug Fixes
+
+* **package**: Update dependencies and upgrade React and Next.js versions. ([7d0866e](https://github.com/perfect-panel/ppanel-web/commit/7d0866e))
+
+## [1.6.1](https://github.com/perfect-panel/ppanel-web/compare/v1.6.0...v1.6.1) (2025-11-05)
+
+
+### 🐛 Bug Fixes
+
+* Fixing issues with generating standard and quantum-resistant encryption keys ([5eac6a9](https://github.com/perfect-panel/ppanel-web/commit/5eac6a9))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+# [1.6.0](https://github.com/perfect-panel/ppanel-web/compare/v1.5.4...v1.6.0) (2025-10-28)
+
+### ✨ Features
+
+- Add server installation dialog and commands ([4429c9d](https://github.com/perfect-panel/ppanel-web/commit/4429c9d))
+
+### 🐛 Bug Fixes
+
+- Add typeRoots configuration to ensure type definitions are resolved correctly ([ad60ea9](https://github.com/perfect-panel/ppanel-web/commit/ad60ea9))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+## [1.5.4](https://github.com/perfect-panel/ppanel-web/compare/v1.5.3...v1.5.4) (2025-10-26)
+
+### 🐛 Bug Fixes
+
+- Update generateRealityKeyPair to use async key generation ([e60e369](https://github.com/perfect-panel/ppanel-web/commit/e60e369))
+- Update the wallet localization file and add new fields such as automatic reset and recharge ([88aa965](https://github.com/perfect-panel/ppanel-web/commit/88aa965))
+
+## [1.5.3](https://github.com/perfect-panel/ppanel-web/compare/v1.5.2...v1.5.3) (2025-10-21)
+
+### 🐛 Bug Fixes
+
+- Fix bugs ([a46657d](https://github.com/perfect-panel/ppanel-web/commit/a46657d))
+- Fix dependencies ([8bd25d6](https://github.com/perfect-panel/ppanel-web/commit/8bd25d6))
+- Remove unnecessary migration function code and add device configuration options ([521a7a9](https://github.com/perfect-panel/ppanel-web/commit/521a7a9))
+- Update bun.lockb to reflect dependency changes ([ca892dd](https://github.com/perfect-panel/ppanel-web/commit/ca892dd))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+## [1.5.2](https://github.com/perfect-panel/ppanel-web/compare/v1.5.1...v1.5.2) (2025-09-29)
+
+### 🐛 Bug Fixes
+
+- Add step attribute to datetime-local inputs for precise time selection in forms ([32fd181](https://github.com/perfect-panel/ppanel-web/commit/32fd181))
+- Rename 'hysteria2' to 'hysteria' across protocol definitions and schemas for consistency ([5816dd5](https://github.com/perfect-panel/ppanel-web/commit/5816dd5))
+- Update protocol options in ServerConfig for accuracy and consistency ([9266529](https://github.com/perfect-panel/ppanel-web/commit/9266529))
+
+## [1.5.1](https://github.com/perfect-panel/ppanel-web/compare/v1.5.0...v1.5.1) (2025-09-28)
+
+### 🐛 Bug Fixes
+
+- Simplify protocol enable checks by removing unnecessary false comparisons ([4828700](https://github.com/perfect-panel/ppanel-web/commit/4828700))
+
+# [1.5.0](https://github.com/perfect-panel/ppanel-web/compare/v1.4.8...v1.5.0) (2025-09-28)
+
+### ✨ Features
+
+- Update server configuration translations for multiple languages ([fc43de1](https://github.com/perfect-panel/ppanel-web/commit/fc43de1))
+
+### 🐛 Bug Fixes
+
+- Add DynamicMultiplier component for managing node multipliers and update ServersPage layout ([bb6671c](https://github.com/perfect-panel/ppanel-web/commit/bb6671c))
+- Remove unnecessary blank lines in multiple index files for cleaner code structure ([6a823b8](https://github.com/perfect-panel/ppanel-web/commit/6a823b8))
+- Remove unused ratio variable from server traffic log and server form for cleaner code ([55034dc](https://github.com/perfect-panel/ppanel-web/commit/55034dc))
+- Update Badge variants and restructure traffic ratio display in ServersPage ([3d778e5](https://github.com/perfect-panel/ppanel-web/commit/3d778e5))
+- Update minimum ratio value to 0 in protocol fields and adjust related schemas; enhance unit conversion in ServerConfig ([3b6ef17](https://github.com/perfect-panel/ppanel-web/commit/3b6ef17))
+- Update protocol fields to use 'obfs' instead of 'security' and adjust related configurations ([4abdd36](https://github.com/perfect-panel/ppanel-web/commit/4abdd36))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+## [1.4.8](https://github.com/perfect-panel/ppanel-web/compare/v1.4.7...v1.4.8) (2025-09-23)
+
+### 🐛 Bug Fixes
+
+- Rename 'server_id' to 'protocol' in NodesPage and clean up unused imports and code in ServerConfig ([70b3484](https://github.com/perfect-panel/ppanel-web/commit/70b3484))
+- Update announcement page to display timeline of announcements with Markdown content ([3c036eb](https://github.com/perfect-panel/ppanel-web/commit/3c036eb))
+- Update Empty component to support border prop and adjust usage in various pages ([ce9ab89](https://github.com/perfect-panel/ppanel-web/commit/ce9ab89))
+
+## [1.4.7](https://github.com/perfect-panel/ppanel-web/compare/v1.4.6...v1.4.7) (2025-09-23)
+
+### 🐛 Bug Fixes
+
+- Add unique key to ProTable for improved rendering with user ID filters ([2bff15f](https://github.com/perfect-panel/ppanel-web/commit/2bff15f))
+- Adjust layout spacing and chart aspect ratio in ServerConfig component ([05a61d8](https://github.com/perfect-panel/ppanel-web/commit/05a61d8))
+- Refactor server ID cell rendering for improved readability and consistency ([0345b7c](https://github.com/perfect-panel/ppanel-web/commit/0345b7c))
+- Update announcement page to format creation date and enhance content display ([8445e30](https://github.com/perfect-panel/ppanel-web/commit/8445e30))
+- Update OnlineUsersCell to display user count with icon instead of badge ([7a4ebdf](https://github.com/perfect-panel/ppanel-web/commit/7a4ebdf))
+- Update subscribe name fallback to return '--' instead of 'Unknown' ([0a07d25](https://github.com/perfect-panel/ppanel-web/commit/0a07d25))
+
+## [1.4.6](https://github.com/perfect-panel/ppanel-web/compare/v1.4.5...v1.4.6) (2025-09-17)
+
+### 🎫 Chores
+
+- Merge branch 'main' into develop ([41f06bf](https://github.com/perfect-panel/ppanel-web/commit/41f06bf))
+
+### 🐛 Bug Fixes
+
+- Add loaded state to node, server, and subscribe stores for better loading management ([13dce0c](https://github.com/perfect-panel/ppanel-web/commit/13dce0c))
+- Removed node metadata fields in subscription schema to simplify structure ([0cadd83](https://github.com/perfect-panel/ppanel-web/commit/0cadd83))
+
+## [1.4.5](https://github.com/perfect-panel/ppanel-web/compare/v1.4.4...v1.4.5) (2025-09-17)
+
+### ♻ Code Refactoring
+
+- Replace useQuery with Zustand store for subscription and node data management ([c6dd0b6](https://github.com/perfect-panel/ppanel-web/commit/c6dd0b6))
+- Simplify TemplatePreview component structure by consolidating Sheet and Button elements ([1b715c5](https://github.com/perfect-panel/ppanel-web/commit/1b715c5))
+
+### 🐛 Bug Fixes
+
+- Add showLineNumbers prop handling in MonacoEditor for improved placeholder positioning ([bd67ece](https://github.com/perfect-panel/ppanel-web/commit/bd67ece))
+- Add fetchTags method to NodesPage and ensure tags are fetched alongside nodes ([a3c5e31](https://github.com/perfect-panel/ppanel-web/commit/a3c5e31))
+- Add NEXT_PUBLIC_HIDDEN_TUTORIAL_DOCUMENT to control tutorial visibility and update page query accordingly ([e94405d](https://github.com/perfect-panel/ppanel-web/commit/e94405d))
+- Add subscribeSchema for subscription management with detailed proxy and user information ([49b3dcc](https://github.com/perfect-panel/ppanel-web/commit/49b3dcc))
+- Enhance server ID display in ServerTrafficLogPage with badges and server ratio ([6dfac27](https://github.com/perfect-panel/ppanel-web/commit/6dfac27))
+- Update platform handling in Content component to ensure available platforms are correctly filtered and displayed ([1dde708](https://github.com/perfect-panel/ppanel-web/commit/1dde708))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+## [1.4.4](https://github.com/perfect-panel/ppanel-web/compare/v1.4.3...v1.4.4) (2025-09-16)
+
+### 🐛 Bug Fixes
+
+- Add minimum value constraint for count and user limit inputs in CouponForm ([6991b69](https://github.com/perfect-panel/ppanel-web/commit/6991b69))
+- Add protocol-related constants, default configurations, field definitions, and validation modes ([d685407](https://github.com/perfect-panel/ppanel-web/commit/d685407))
+- Added the enabled field in the protocol configuration, updated the related type definition and default configuration ([2b0cf9a](https://github.com/perfect-panel/ppanel-web/commit/2b0cf9a))
+- Filter available protocols to exclude disabled ones in NodeForm ([982d288](https://github.com/perfect-panel/ppanel-web/commit/982d288))
+- Refactor key generation logic and update dependencies for ML-KEM-768 integration ([b8f630f](https://github.com/perfect-panel/ppanel-web/commit/b8f630f))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+## [1.4.3](https://github.com/perfect-panel/ppanel-web/compare/v1.4.2...v1.4.3) (2025-09-16)
+
+### 🐛 Bug Fixes
+
+- Add success toast message for sorting in nodes and servers pages ([2d5175d](https://github.com/perfect-panel/ppanel-web/commit/2d5175d))
+- Implement encryption and obfuscation features in protocol configuration ([54de16b](https://github.com/perfect-panel/ppanel-web/commit/54de16b))
+- Refactor toB64 function to toB64Url for URL-safe base64 encoding in VlessX25519Pair generation ([8700cf6](https://github.com/perfect-panel/ppanel-web/commit/8700cf6))
+- Simplify initialValues assignment and update node submission logic in NodesPage ([05d6c89](https://github.com/perfect-panel/ppanel-web/commit/05d6c89))
+- Update bun.lockb to reflect dependency changes ([ebcebd7](https://github.com/perfect-panel/ppanel-web/commit/ebcebd7))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+## [1.4.2](https://github.com/perfect-panel/ppanel-web/compare/v1.4.1...v1.4.2) (2025-09-15)
+
+### 🐛 Bug Fixes
+
+- Add GitHub template repository link to ProtocolForm header for easier access ([8a0baf3](https://github.com/perfect-panel/ppanel-web/commit/8a0baf3))
+- Add readOnly prop to MonacoEditor and TemplatePreview components for improved content handling ([c4c4d5a](https://github.com/perfect-panel/ppanel-web/commit/c4c4d5a))
+
+## [1.4.1](https://github.com/perfect-panel/ppanel-web/compare/v1.4.0...v1.4.1) (2025-09-15)
+
+### 🐛 Bug Fixes
+
+- Add copy subscription functionality to user subscription dashboard and improve localization for new features ([e2a357f](https://github.com/perfect-panel/ppanel-web/commit/e2a357f))
+- Simplify handleInputBlur function by removing unnecessary setTimeout ([6341562](https://github.com/perfect-panel/ppanel-web/commit/6341562))
+- Update TemplatePreview to use MonacoEditor for content display and improve error handling ([1d52642](https://github.com/perfect-panel/ppanel-web/commit/1d52642))
+- Update user dashboard link to correct path ([131693b](https://github.com/perfect-panel/ppanel-web/commit/131693b))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+# [1.4.0](https://github.com/perfect-panel/ppanel-web/compare/v1.3.0...v1.4.0) (2025-09-14)
+
+### ♻ Code Refactoring
+
+- **logs**: Add localization files and update existing translations for multiple languages ([2f20ac9](https://github.com/perfect-panel/ppanel-web/commit/2f20ac9))
+- **subscribe-form**: Replace server_group and server with node_tags and nodes in default values and form schema ([38dda84](https://github.com/perfect-panel/ppanel-web/commit/38dda84))
+- Add localization updates for log and server files across multiple languages ([2bcd4cf](https://github.com/perfect-panel/ppanel-web/commit/2bcd4cf))
+- Clean up NodeForm and ServerForm components by removing unused functions and optimizing state management ([10250d9](https://github.com/perfect-panel/ppanel-web/commit/10250d9))
+- Enhance log pages with Badge component and update translations ([a4de9df](https://github.com/perfect-panel/ppanel-web/commit/a4de9df))
+- Make 'scheme' field optional in client form schema ([f4a1237](https://github.com/perfect-panel/ppanel-web/commit/f4a1237))
+- Refactor server management API endpoints and typings ([4f7cc80](https://github.com/perfect-panel/ppanel-web/commit/4f7cc80))
+- Remove application management forms and related configurations ([0c43844](https://github.com/perfect-panel/ppanel-web/commit/0c43844))
+- Remove default options from TagInput component for improved flexibility ([6a3bb70](https://github.com/perfect-panel/ppanel-web/commit/6a3bb70))
+- Remove unused preview state variables and add sort order to node properties ([e63f823](https://github.com/perfect-panel/ppanel-web/commit/e63f823))
+- Rename buildScheme to buildSchema and update imports in server form components ([ee98e7e](https://github.com/perfect-panel/ppanel-web/commit/ee98e7e))
+- Simplify node display in subscribe form and remove unused Badge import ([551135d](https://github.com/perfect-panel/ppanel-web/commit/551135d))
+- Update bun.lockb to reflect dependency changes ([ba2b50e](https://github.com/perfect-panel/ppanel-web/commit/ba2b50e))
+- Update component imports and improve code consistency ([59faeab](https://github.com/perfect-panel/ppanel-web/commit/59faeab))
+- Update dependencies and improve code consistency across multiple files ([e37ae49](https://github.com/perfect-panel/ppanel-web/commit/e37ae49))
+- Update localization files and service imports ([d4b37e4](https://github.com/perfect-panel/ppanel-web/commit/d4b37e4))
+
+### ✨ Features
+
+- **config**: Add translations for server configuration in multiple languages ([f9a7ece](https://github.com/perfect-panel/ppanel-web/commit/f9a7ece))
+- **logs**: Add various log pages for tracking user activities and system events ([d85af49](https://github.com/perfect-panel/ppanel-web/commit/d85af49))
+- Add bandwidth fields and placeholders for upload and download in server configuration forms; update localization files for multiple languages ([3e5402f](https://github.com/perfect-panel/ppanel-web/commit/3e5402f))
+- Add batch delete functionality and enhance chart tooltips in statistics cards ([c4f536e](https://github.com/perfect-panel/ppanel-web/commit/c4f536e))
+- Add language support and descriptions in product localization files ([fd48856](https://github.com/perfect-panel/ppanel-web/commit/fd48856))
+- Add log cleanup settings and update localization files ([6ccf9b8](https://github.com/perfect-panel/ppanel-web/commit/6ccf9b8))
+- Add queryNodeTag function and integrate tag retrieval in NodeForm and SubscribeForm components ([4563c57](https://github.com/perfect-panel/ppanel-web/commit/4563c57))
+- Add quota management features and localization updates ([fce627b](https://github.com/perfect-panel/ppanel-web/commit/fce627b))
+- Add server form component with protocol configuration and localization support ([217ddce](https://github.com/perfect-panel/ppanel-web/commit/217ddce))
+- Enhance TagInput component with option handling and improved tag addition logic ([b6e778d](https://github.com/perfect-panel/ppanel-web/commit/b6e778d))
+- Implement data migration functionality and update localization files ([6d81bfd](https://github.com/perfect-panel/ppanel-web/commit/6d81bfd))
+- Refactor user detail and subscription management components ([973c06f](https://github.com/perfect-panel/ppanel-web/commit/973c06f))
+- Update server list fetching logic and adjust query parameters ([5272360](https://github.com/perfect-panel/ppanel-web/commit/5272360))
+
+### 🐛 Bug Fixes
+
+- **page**: Refine version checking logic and remove unnecessary comments for clarity ([26176a7](https://github.com/perfect-panel/ppanel-web/commit/26176a7))
+- Add localization updates and new utility functions ([4da5960](https://github.com/perfect-panel/ppanel-web/commit/4da5960))
+- Add user_subscribe_id filter to SubscribeLogPage and update typings; disable eslint in service index files ([ab6f6a6](https://github.com/perfect-panel/ppanel-web/commit/ab6f6a6))
+- Added system version card and system log dialog components; updated statistics page to include total server and user statistics ([fe69980](https://github.com/perfect-panel/ppanel-web/commit/fe69980))
+- Adjust timestamp calculations to use milliseconds instead of seconds in quota broadcast form submission ([8dffd69](https://github.com/perfect-panel/ppanel-web/commit/8dffd69))
+- Correct cookie key format for sidebar state retrieval ([9e01f4f](https://github.com/perfect-panel/ppanel-web/commit/9e01f4f))
+- Improve UI for protocol status display in server form component ([461fdb1](https://github.com/perfect-panel/ppanel-web/commit/461fdb1))
+- Increase pagination size limit for server and node lists to improve data retrieval ([7c0a312](https://github.com/perfect-panel/ppanel-web/commit/7c0a312))
+- Optimize Task Manager to use milliseconds to calculate timers, and simplify import statements ([d8fa13b](https://github.com/perfect-panel/ppanel-web/commit/d8fa13b))
+- Refactor protocol status display for improved readability in server form component ([f700be0](https://github.com/perfect-panel/ppanel-web/commit/f700be0))
+- Remove GroupTable and related components, simplify SubscribeTable and update language handling in subscription forms ([1ab9b39](https://github.com/perfect-panel/ppanel-web/commit/1ab9b39))
+- Remove redundant transport label from localization files ([88ce8d7](https://github.com/perfect-panel/ppanel-web/commit/88ce8d7))
+- Remove unnecessary comments and improve variable handling in GoTemplateEditor; ensure zero value displays as empty in EnhancedInput ([c4a47a4](https://github.com/perfect-panel/ppanel-web/commit/c4a47a4))
+- Remove unnecessary comments to simplify code readability ([a988cb3](https://github.com/perfect-panel/ppanel-web/commit/a988cb3))
+- Replace MarkdownEditor with HTMLEditor in EmailBroadcastForm; simplify content rendering in EmailTaskManager; disable eslint in service index files ([e2d83ec](https://github.com/perfect-panel/ppanel-web/commit/e2d83ec))
+- Replace redundant icon rendering with a single instance in system version card component ([e4429a5](https://github.com/perfect-panel/ppanel-web/commit/e4429a5))
+- Update billing URL fetching logic and improve version handling in system version card component ([1c8d4af](https://github.com/perfect-panel/ppanel-web/commit/1c8d4af))
+- Update condition for plugin field in PROTOCOL_FIELDS to include specific plugins ([6376ec1](https://github.com/perfect-panel/ppanel-web/commit/6376ec1))
+- Update getAppSubLink function to improve URL handling and encoding logic ([351fffc](https://github.com/perfect-panel/ppanel-web/commit/351fffc))
+- Update order_id to order_no in BalanceLogPage and related typings; enhance timezone switch component with additional features and localization updates ([ac36075](https://github.com/perfect-panel/ppanel-web/commit/ac36075))
+- Update protocol plugin handling and add new options in typings ([6ca2433](https://github.com/perfect-panel/ppanel-web/commit/6ca2433))
+- Update release URLs to include 'v' prefix for versioning in system version card component ([1d526b5](https://github.com/perfect-panel/ppanel-web/commit/1d526b5))
+- Update SidebarLeft component styles to enhance hover effects ([e4fbd5c](https://github.com/perfect-panel/ppanel-web/commit/e4fbd5c))
+- Update validation for days and gift_value fields in QuotaBroadcastForm; set default values to avoid errors ([39d746f](https://github.com/perfect-panel/ppanel-web/commit/39d746f))
+
+### 📝 Documentation
+
+- Merge branch 'main' into develop ([d7f8b3b](https://github.com/perfect-panel/ppanel-web/commit/d7f8b3b))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+# [1.3.0](https://github.com/perfect-panel/ppanel-web/compare/v1.2.0...v1.3.0) (2025-08-15)
+
+### ♻ Code Refactoring
+
+- Refactoring and adding multiple features ([65c9b9f](https://github.com/perfect-panel/ppanel-web/commit/65c9b9f))
+
+### ✨ Features
+
+- **api**: Add getClient API endpoint to retrieve subscription applications ([7a279e6](https://github.com/perfect-panel/ppanel-web/commit/7a279e6))
+- **marketing**: Add marketing management features and localization updates ([ea08de0](https://github.com/perfect-panel/ppanel-web/commit/ea08de0))
+- **protocol**: Add template preview functionality with localization support ([0448d21](https://github.com/perfect-panel/ppanel-web/commit/0448d21))
+- **subscribe**: Update subscription management localization and add new fields ([1d9b0a4](https://github.com/perfect-panel/ppanel-web/commit/1d9b0a4))
+
+### 🐛 Bug Fixes
+
+- **bun**: Update bun.lockb to reflect dependency changes ([bbcd018](https://github.com/perfect-panel/ppanel-web/commit/bbcd018))
+- **editor**: Add Go template editor component and update related schemas ([9d9c3cd](https://github.com/perfect-panel/ppanel-web/commit/9d9c3cd))
+- **editor**: Enhance Go Template Editor to support trimmed template tags and improve range/end matching ([641ed5e](https://github.com/perfect-panel/ppanel-web/commit/641ed5e))
+- **editor**: Enhance Go Template Editor with schema support and improved completion ([5b21d8a](https://github.com/perfect-panel/ppanel-web/commit/5b21d8a))
+- **enhaced-input**: Disable autocomplete for EnhancedInput component ([f190c68](https://github.com/perfect-panel/ppanel-web/commit/f190c68))
+- **global**: Add user agent limit settings to subscription configuration ([822416d](https://github.com/perfect-panel/ppanel-web/commit/822416d))
+- **locales**: Update 'conf' output format to use uppercase 'CONF' ([fce9119](https://github.com/perfect-panel/ppanel-web/commit/fce9119))
+- **locales**: Update "userAccount" label to "user" in multiple localization files ([48415e9](https://github.com/perfect-panel/ppanel-web/commit/48415e9))
+- **protocol-form**: Swap 'description' and 'user_agent' columns for improved clarity in the table ([72a4106](https://github.com/perfect-panel/ppanel-web/commit/72a4106))
+- **protocol-form**: Update protocol options descriptions for clarity and add new security and transport options ([e5d4deb](https://github.com/perfect-panel/ppanel-web/commit/e5d4deb))
+- **protocol**: Add 'conf' output format option and update translations ([292efdf](https://github.com/perfect-panel/ppanel-web/commit/292efdf))
+- **protpcp-form**: Rename 'schema' to 'scheme' for consistency across the application ([6ab2ba9](https://github.com/perfect-panel/ppanel-web/commit/6ab2ba9))
+- **register**: Update localization files to include trial subscription settings and descriptions ([33daa1f](https://github.com/perfect-panel/ppanel-web/commit/33daa1f))
+- **system**: Add time unit translations for user registration settings in multiple languages ([296a6c1](https://github.com/perfect-panel/ppanel-web/commit/296a6c1))
+- Update privacy policy and terms of service schemas to use correct field names ([0e6ba5b](https://github.com/perfect-panel/ppanel-web/commit/0e6ba5b))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+# [1.2.0](https://github.com/perfect-panel/ppanel-web/compare/v1.1.5...v1.2.0) (2025-08-04)
+
+### ♻ Code Refactoring
+
+- **view**: System and Auth Control ([b2b4a95](https://github.com/perfect-panel/ppanel-web/commit/b2b4a95))
+
+### ✨ Features
+
+- **netlify**: Add Netlify configuration for admin and user apps with Next.js plugin ([b4d4f59](https://github.com/perfect-panel/ppanel-web/commit/b4d4f59))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+## [1.1.5](https://github.com/perfect-panel/ppanel-web/compare/v1.1.4...v1.1.5) (2025-07-26)
+
+### 🐛 Bug Fixes
+
+- **subscribe**: Filter out items that are not marked as visible in subscription list ([32253e3](https://github.com/perfect-panel/ppanel-web/commit/32253e3))
+
+## [1.1.4](https://github.com/perfect-panel/ppanel-web/compare/v1.1.3...v1.1.4) (2025-07-25)
+
+### 🐛 Bug Fixes
+
+- **locales**: Simplify "show" label in subscription localization files ([d53a006](https://github.com/perfect-panel/ppanel-web/commit/d53a006))
+- **order**: Preserve last successful order on error during order creation ([2fb98be](https://github.com/perfect-panel/ppanel-web/commit/2fb98be))
+- **subscribe**: Filter out hidden items in subscription list display ([634be37](https://github.com/perfect-panel/ppanel-web/commit/634be37))
+
+## [1.1.3](https://github.com/perfect-panel/ppanel-web/compare/v1.1.2...v1.1.3) (2025-07-24)
+
+### 🐛 Bug Fixes
+
+- **auth**: Implement user redirection to dashboard upon authentication ([f84f98c](https://github.com/perfect-panel/ppanel-web/commit/f84f98c))
+
+## [1.1.2](https://github.com/perfect-panel/ppanel-web/compare/v1.1.1...v1.1.2) (2025-07-24)
+
+### 🐛 Bug Fixes
+
+- **billing**: Add display for gift amount in subscription billing ([04af2f9](https://github.com/perfect-panel/ppanel-web/commit/04af2f9))
+- **order**: Update subscription cell to display name and quantity ([96eba17](https://github.com/perfect-panel/ppanel-web/commit/96eba17))
+- **tool**: Added API for obtaining version, updated version information display logic ([2675034](https://github.com/perfect-panel/ppanel-web/commit/2675034))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+## [1.1.1](https://github.com/perfect-panel/ppanel-web/compare/v1.1.0...v1.1.1) (2025-07-20)
+
+### 🐛 Bug Fixes
+
+- **node-table**: Update translations for headers and no data display ([eec0b12](https://github.com/perfect-panel/ppanel-web/commit/eec0b12))
+- **rules**: Change rule type from 'auto' to 'default' and update ([3e290d7](https://github.com/perfect-panel/ppanel-web/commit/3e290d7))
+- **rules**: Update rule settings ([3304a55](https://github.com/perfect-panel/ppanel-web/commit/3304a55))
+- **subscribe-form**: Optimize discount calculation logic and debounce updates ([166e48f](https://github.com/perfect-panel/ppanel-web/commit/166e48f))
+- **tutorial**: Comment out unused getVersion function and simplify getVersionPath ([7cdc6bd](https://github.com/perfect-panel/ppanel-web/commit/7cdc6bd))
+- **tutorial**: Return latest version in case of fetch error ([1fb305e](https://github.com/perfect-panel/ppanel-web/commit/1fb305e))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+# [1.1.0](https://github.com/perfect-panel/ppanel-web/compare/v1.0.2...v1.1.0) (2025-07-06)
+
+### ✨ Features
+
+- **view**: Add AnyTLS protocol support and enhance node configuration options ([bcfb10a](https://github.com/perfect-panel/ppanel-web/commit/bcfb10a))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+## [1.0.2](https://github.com/perfect-panel/ppanel-web/compare/v1.0.1...v1.0.2) (2025-06-29)
+
+### 🐛 Bug Fixes
+
+- **subscription**: User subscription information ([7d18ff6](https://github.com/perfect-panel/ppanel-web/commit/7d18ff6))
+
+## [1.0.1](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0...v1.0.1) (2025-04-28)
+
+### 🐛 Bug Fixes
+
+- **payment**: Disable webhook_secret field in PaymentForm component ([d323af8](https://github.com/perfect-panel/ppanel-web/commit/d323af8))
+- **recharge**: Set balance prop to false in PaymentMethods component ([356ae5b](https://github.com/perfect-panel/ppanel-web/commit/356ae5b))
+
+# 1.0.0 (2025-04-24)
+
+### ♻ Code Refactoring
+
+- **api**: Sort and Announcement ([38d5616](https://github.com/perfect-panel/ppanel-web/commit/38d5616))
+- **auth**: Refactor user authorization handling and improve error logging ([68bc18f](https://github.com/perfect-panel/ppanel-web/commit/68bc18f))
+- **config**: GenerateMetadata ([a0bb101](https://github.com/perfect-panel/ppanel-web/commit/a0bb101))
+- **config**: Simplify environment variable handling and improve build script ([cf54d0f](https://github.com/perfect-panel/ppanel-web/commit/cf54d0f))
+- **config**: Viewport ([24b8601](https://github.com/perfect-panel/ppanel-web/commit/24b8601))
+- **core**: Restructure project for better module separation ([9d0cb8b](https://github.com/perfect-panel/ppanel-web/commit/9d0cb8b))
+- **deps**: Update ([19837a1](https://github.com/perfect-panel/ppanel-web/commit/19837a1))
+- **empty**: Content ([aa4c667](https://github.com/perfect-panel/ppanel-web/commit/aa4c667))
+- **payment**: Reconstruct the payment page ([7109472](https://github.com/perfect-panel/ppanel-web/commit/7109472))
+- **sbscribe**: Rename and reorganize components for better structure and clarity ([5e5e4ed](https://github.com/perfect-panel/ppanel-web/commit/5e5e4ed))
+- **ui**: Dependencies ([727d779](https://github.com/perfect-panel/ppanel-web/commit/727d779))
+- **ui**: Layout ([9262d7d](https://github.com/perfect-panel/ppanel-web/commit/9262d7d))
+- **ui**: Optimize document display ([2ca2992](https://github.com/perfect-panel/ppanel-web/commit/2ca2992))
+- Enhance user navigation dropdown ui and styling ([d2732e6](https://github.com/perfect-panel/ppanel-web/commit/d2732e6))
+- Reduce code complexity and improve readability ([e11f18c](https://github.com/perfect-panel/ppanel-web/commit/e11f18c))
+
+### ⚡ Performance Improvements
+
+- **subscribe**: Form discount price ([059a892](https://github.com/perfect-panel/ppanel-web/commit/059a892))
+
+### ✨ Features
+
+- **accounts**: Update third-party account binding and unbinding ([1841552](https://github.com/perfect-panel/ppanel-web/commit/1841552))
+- **ad**: Advertise ([b1105cd](https://github.com/perfect-panel/ppanel-web/commit/b1105cd))
+- **admin**: Add application and rule management entries to localization files ([8b43e69](https://github.com/perfect-panel/ppanel-web/commit/8b43e69))
+- **affiliate**: Add Affiliate component with commission display and invite link functionality ([4aea4e8](https://github.com/perfect-panel/ppanel-web/commit/4aea4e8))
+- **affiliate**: Affiliate Detail ([a782c17](https://github.com/perfect-panel/ppanel-web/commit/a782c17))
+- **affiliate**: Commission Rate ([5eec430](https://github.com/perfect-panel/ppanel-web/commit/5eec430))
+- **affiliate**: Update affiliate component to display total commission and improve data fetching ([cc834ca](https://github.com/perfect-panel/ppanel-web/commit/cc834ca))
+- **announcement**: Popup and pinned ([f3680a7](https://github.com/perfect-panel/ppanel-web/commit/f3680a7))
+- **api**: Add an interface to obtain user subscription details, update related type definitions and localized text ([cf5c39c](https://github.com/perfect-panel/ppanel-web/commit/cf5c39c))
+- **api**: Add CheckoutOrder request and response types, and update user purchase request parameters ([48a1b97](https://github.com/perfect-panel/ppanel-web/commit/48a1b97))
+- **api**: Add CheckoutOrder request and response types, and update user purchase request parameters ([dddc21c](https://github.com/perfect-panel/ppanel-web/commit/dddc21c))
+- **api**: Add new subscription properties and locale support for deduction ratios and reset cycles ([fec80f5](https://github.com/perfect-panel/ppanel-web/commit/fec80f5))
+- **api**: Add Time Period Configuration ([837157c](https://github.com/perfect-panel/ppanel-web/commit/837157c))
+- **api**: Telegram ([17ce96a](https://github.com/perfect-panel/ppanel-web/commit/17ce96a))
+- **auth-control**: Adding phone number labels to mobile verification configurations in multiple languages ([046740f](https://github.com/perfect-panel/ppanel-web/commit/046740f))
+- **auth-control**: Update general ([3883646](https://github.com/perfect-panel/ppanel-web/commit/3883646))
+- **auth**: Add email and SMS code sending functionality with localization updates ([57eaa55](https://github.com/perfect-panel/ppanel-web/commit/57eaa55))
+- **auth**: Add Oauth configuration for Telegram, Facebook, Google, Github, and Apple ([18ee600](https://github.com/perfect-panel/ppanel-web/commit/18ee600))
+- **auth**: Add privacy policy link to the footer ([8e16ef1](https://github.com/perfect-panel/ppanel-web/commit/8e16ef1))
+- **auth**: Add SMS and email configuration options to global store and update localization ([4acf7b1](https://github.com/perfect-panel/ppanel-web/commit/4acf7b1))
+- **auth**: Add type parameter to SendCode and update related API typings ([4198871](https://github.com/perfect-panel/ppanel-web/commit/4198871))
+- **auth**: Enhance user registration with invite handling and logo display ([207bc24](https://github.com/perfect-panel/ppanel-web/commit/207bc24))
+- **auth**: Redirect user after OAuth login and add logos icon collection ([aa6dda8](https://github.com/perfect-panel/ppanel-web/commit/aa6dda8))
+- **auth**: Refactor mobile authentication config to support whitelist functionality ([c761ec7](https://github.com/perfect-panel/ppanel-web/commit/c761ec7))
+- **billing**: Update Billing ([078fc9d](https://github.com/perfect-panel/ppanel-web/commit/078fc9d))
+- **cdn**: Add CDN URL configuration and update related references ([0c90733](https://github.com/perfect-panel/ppanel-web/commit/0c90733))
+- **config**: Add application selection and encryption settings to configuration form ([88b3504](https://github.com/perfect-panel/ppanel-web/commit/88b3504))
+- **config**: FormatBytes ([9251a09](https://github.com/perfect-panel/ppanel-web/commit/9251a09))
+- **config**: Protocol type ([a3b45b4](https://github.com/perfect-panel/ppanel-web/commit/a3b45b4))
+- **config**: Update encryption fields in configuration form and refactor OAuth callback parameters ([652e032](https://github.com/perfect-panel/ppanel-web/commit/652e032))
+- **config**: Webhook Domain ([01e06c6](https://github.com/perfect-panel/ppanel-web/commit/01e06c6))
+- **dashboard**: Optimization ([5b3f4b4](https://github.com/perfect-panel/ppanel-web/commit/5b3f4b4))
+- **dashboard**: Statistics ([2926abc](https://github.com/perfect-panel/ppanel-web/commit/2926abc))
+- **device**: Modify IMEI to device identifier support ([e3f9ef6](https://github.com/perfect-panel/ppanel-web/commit/e3f9ef6))
+- **email**: Add traffic exhaustion template ([bb3bd7b](https://github.com/perfect-panel/ppanel-web/commit/bb3bd7b))
+- **favicon**: Update SVG favicon design for admin and user interfaces ([1d91738](https://github.com/perfect-panel/ppanel-web/commit/1d91738))
+- **formatting**: Update differenceInDays function to return whole days or two decimal places ([bf58f25](https://github.com/perfect-panel/ppanel-web/commit/bf58f25))
+- **form**: Make version field optional and set default value; update site domain placeholder for clarity ([42ba9e8](https://github.com/perfect-panel/ppanel-web/commit/42ba9e8))
+- **global**: Add custom data ([6dbebd1](https://github.com/perfect-panel/ppanel-web/commit/6dbebd1))
+- **global**: Add SMS configuration options to global store ([39a9ce6](https://github.com/perfect-panel/ppanel-web/commit/39a9ce6))
+- **header**: Update locales ([bfb6c27](https://github.com/perfect-panel/ppanel-web/commit/bfb6c27))
+- **imei**: Add IMEI related internationalization support and menu items ([13c3337](https://github.com/perfect-panel/ppanel-web/commit/13c3337))
+- **input**: Add minimum value constraint and enhance number handling in EnhancedInput ([ce31972](https://github.com/perfect-panel/ppanel-web/commit/ce31972))
+- **input**: Add minimum value constraint and enhance number handling in EnhancedInput ([94822d9](https://github.com/perfect-panel/ppanel-web/commit/94822d9))
+- **loading**: Add loading components and integrate them in Providers ([d5847fa](https://github.com/perfect-panel/ppanel-web/commit/d5847fa))
+- **loading**: Replace loading animation with a simpler spinner and loading text ([f72df3a](https://github.com/perfect-panel/ppanel-web/commit/f72df3a))
+- **loading**: Replace loading animation with a simpler spinner and loading text ([b8316bb](https://github.com/perfect-panel/ppanel-web/commit/b8316bb))
+- **locale**: Add Persian ([93a0a88](https://github.com/perfect-panel/ppanel-web/commit/93a0a88))
+- **locales**: Add area code and telephone fields to user forms in multiple languages ([9b8258c](https://github.com/perfect-panel/ppanel-web/commit/9b8258c))
+- **locales**: Add description information of communication keys and encryption methods to enhance client configuration capabilities ([d1f5a9b](https://github.com/perfect-panel/ppanel-web/commit/d1f5a9b))
+- **locales**: Add kick offline confirmation and success messages in multiple languages ([5db5343](https://github.com/perfect-panel/ppanel-web/commit/5db5343))
+- **locales**: Add multiple languages ([b243ab9](https://github.com/perfect-panel/ppanel-web/commit/b243ab9))
+- **locales**: Replace 'nodeGroupId' with 'groupId' in multiple language files for consistency ([a4e9d5d](https://github.com/perfect-panel/ppanel-web/commit/a4e9d5d))
+- **locales**: Update 'deductBalance' to 'giftAmount' across multiple languages and fix newline in announcement.json ([70497af](https://github.com/perfect-panel/ppanel-web/commit/70497af))
+- **locales**: Update 'sms' to 'mobile' in authentication methods across multiple languages ([fea2171](https://github.com/perfect-panel/ppanel-web/commit/fea2171))
+- **log**: Add message log retrieval functionality and update related typings ([1c0ecae](https://github.com/perfect-panel/ppanel-web/commit/1c0ecae))
+- **node-form**: Update number input fields to enforce step, min, and max values ([3f7b6d1](https://github.com/perfect-panel/ppanel-web/commit/3f7b6d1))
+- **node-subscription**: Add copy functionality for columns ([3a81e37](https://github.com/perfect-panel/ppanel-web/commit/3a81e37))
+- **node**: Add NodeStatus ([c712624](https://github.com/perfect-panel/ppanel-web/commit/c712624))
+- **node**: Add protocol ([301b635](https://github.com/perfect-panel/ppanel-web/commit/301b635))
+- **node**: Add serverKey ([25ce37e](https://github.com/perfect-panel/ppanel-web/commit/25ce37e))
+- **node**: Add status ([c06372b](https://github.com/perfect-panel/ppanel-web/commit/c06372b))
+- **node**: Add tags ([f408fdf](https://github.com/perfect-panel/ppanel-web/commit/f408fdf))
+- **node**: Move the node configuration to the server module ([7f0f5ce](https://github.com/perfect-panel/ppanel-web/commit/7f0f5ce))
+- **oauth**: Add certification component for handling OAuth login callbacks and improve user authentication flow ([5ed04c0](https://github.com/perfect-panel/ppanel-web/commit/5ed04c0))
+- **oauth**: Implement OAuth token retrieval and refactor login callback handling ([40a6f7c](https://github.com/perfect-panel/ppanel-web/commit/40a6f7c))
+- **oauth**: Refactor platform parameter handling and improve logout redirection logic ([8346c85](https://github.com/perfect-panel/ppanel-web/commit/8346c85))
+- **oauth**: Update OAuth login handling to use callback parameter and improve URL parameter retrieval ([9227411](https://github.com/perfect-panel/ppanel-web/commit/9227411))
+- **payment**: Add bank card payment ([7fa3a57](https://github.com/perfect-panel/ppanel-web/commit/7fa3a57))
+- **payment**: Add isEdit prop to PaymentForm and disable fields when editing ([85f55de](https://github.com/perfect-panel/ppanel-web/commit/85f55de))
+- **platform**: Update platform naming and add keywords and custom HTML fields ([6384237](https://github.com/perfect-panel/ppanel-web/commit/6384237))
+- **privacy-policy**: Add privacy policy related text and links ([baa68f0](https://github.com/perfect-panel/ppanel-web/commit/baa68f0))
+- **profile**: Update localization strings and enhance third-party account binding ([2d1effb](https://github.com/perfect-panel/ppanel-web/commit/2d1effb))
+- **relay**: Add relay mode configuration and update related schemas ([3cc9477](https://github.com/perfect-panel/ppanel-web/commit/3cc9477))
+- **release**: Extend supported platforms for Docker images, closes [#9](https://github.com/perfect-panel/ppanel-web/issues/9) ([e3a31eb](https://github.com/perfect-panel/ppanel-web/commit/e3a31eb))
+- **schema**: Add security field to hysteria2 and tuic schemas ([cd59d44](https://github.com/perfect-panel/ppanel-web/commit/cd59d44))
+- **site**: Added localization support for custom HTML and keyword fields ([f9d7736](https://github.com/perfect-panel/ppanel-web/commit/f9d7736))
+- **sms**: Update locales ([938363b](https://github.com/perfect-panel/ppanel-web/commit/938363b))
+- **stats**: Replace dynamic stat fetching with environment constants for user, server, and location counts ([46ae166](https://github.com/perfect-panel/ppanel-web/commit/46ae166))
+- **subscribe**: Add 'sold' column to SubscribeTable and update inventory terminology ([19619fd](https://github.com/perfect-panel/ppanel-web/commit/19619fd))
+- **subscribe**: Add reset_time to API typings and update unsubscribe logic ([eeea165](https://github.com/perfect-panel/ppanel-web/commit/eeea165))
+- **subscribe**: Add subscribe_discount type ([f99c604](https://github.com/perfect-panel/ppanel-web/commit/f99c604))
+- **subscribe**: Add subscription credits ([5bc7905](https://github.com/perfect-panel/ppanel-web/commit/5bc7905))
+- **subscribe**: Add unit time ([39d07ec](https://github.com/perfect-panel/ppanel-web/commit/39d07ec))
+- **subscribe**: Add unsubscribe functionality with confirmation messages and localized strings ([b2a2f42](https://github.com/perfect-panel/ppanel-web/commit/b2a2f42))
+- **subscribe**: Improve error handling in subscription forms and update component props ([d28a10b](https://github.com/perfect-panel/ppanel-web/commit/d28a10b))
+- **subscribe**: Improve layout and styling in subscription components ([5766376](https://github.com/perfect-panel/ppanel-web/commit/5766376))
+- **subscribe**: Move subscription configuration and application to subscription module ([f90d4d2](https://github.com/perfect-panel/ppanel-web/commit/f90d4d2))
+- **subscribe**: Update SubscribeTable component to use API.SubscribeItem type and ensure proper type casting ([f26f1c2](https://github.com/perfect-panel/ppanel-web/commit/f26f1c2))
+- **subscribe**: Update suffix from 'MB' to 'Mbps' and enhance speed limit display logic ([3547bb1](https://github.com/perfect-panel/ppanel-web/commit/3547bb1))
+- **subscription**: Improve layout and organization of subscription detail tabs ([e4630f8](https://github.com/perfect-panel/ppanel-web/commit/e4630f8))
+- **subscription**: Add delete user subscription functionality ([1fc3a10](https://github.com/perfect-panel/ppanel-web/commit/1fc3a10))
+- **subscription**: Add localized messages for existing subscriptions and deletion restrictions ([e8a72d5](https://github.com/perfect-panel/ppanel-web/commit/e8a72d5))
+- **subscription**: Refactor subscription handling and update imports for better organization ([2215c7f](https://github.com/perfect-panel/ppanel-web/commit/2215c7f))
+- **table**: Add sorting support for Node and subscription columns ([27924b0](https://github.com/perfect-panel/ppanel-web/commit/27924b0))
+- **table**: Supports drag and drop sorting ([2f56ef5](https://github.com/perfect-panel/ppanel-web/commit/2f56ef5))
+- **timeline**: Simplify timeline component layout and remove commented-out code ([fbad3b0](https://github.com/perfect-panel/ppanel-web/commit/fbad3b0))
+- **tos**: Display data ([6024454](https://github.com/perfect-panel/ppanel-web/commit/6024454))
+- **tutorial**: Add common tutorial list ([872252c](https://github.com/perfect-panel/ppanel-web/commit/872252c))
+- **tutorial**: Fetch the latest tutorial version from GitHub API for dynamic URL generation ([28f8c78](https://github.com/perfect-panel/ppanel-web/commit/28f8c78))
+- **ui**: System Tool ([1836980](https://github.com/perfect-panel/ppanel-web/commit/1836980))
+- **ui**: Update homepage data ([8425b13](https://github.com/perfect-panel/ppanel-web/commit/8425b13))
+- **ui**: Update input components and enhance card minimum width for better layout ([8a02310](https://github.com/perfect-panel/ppanel-web/commit/8a02310))
+- **user**: Add 'gift_amount' field and update related references in user services and components ([b13c77e](https://github.com/perfect-panel/ppanel-web/commit/b13c77e))
+- **user**: Add telephone input with area code selection and update localization ([585b99c](https://github.com/perfect-panel/ppanel-web/commit/585b99c))
+- **user**: Add user Detail ([3a3d223](https://github.com/perfect-panel/ppanel-web/commit/3a3d223))
+- **user**: Add User Detail ([fdaf11b](https://github.com/perfect-panel/ppanel-web/commit/fdaf11b))
+- **user**: Integrate subscription list into user management, update request parameters and types ([8d49dac](https://github.com/perfect-panel/ppanel-web/commit/8d49dac))
+- Update Auth Control ([c59742a](https://github.com/perfect-panel/ppanel-web/commit/c59742a))
+
+### 🎫 Chores
+
+- **config**: Entry locale ([5737331](https://github.com/perfect-panel/ppanel-web/commit/5737331))
+- **deps**: Update package dependencies across multiple projects for improved stability and performance ([b01a5bc](https://github.com/perfect-panel/ppanel-web/commit/b01a5bc))
+- **init**: Project initialization ([829edfa](https://github.com/perfect-panel/ppanel-web/commit/829edfa))
+- **merge**: Add advertising module and device settings ([0130e02](https://github.com/perfect-panel/ppanel-web/commit/0130e02))
+- **merge**: Bump version to 1.0.0-beta.26 and update changelog ([3222016](https://github.com/perfect-panel/ppanel-web/commit/3222016))
+- **release**: V1.0.0-beta.1 [skip ci] ([7284d1c](https://github.com/perfect-panel/ppanel-web/commit/7284d1c))
+- **release**: V1.0.0-beta.10 [skip ci] ([5cf573a](https://github.com/perfect-panel/ppanel-web/commit/5cf573a))
+- **release**: V1.0.0-beta.11 [skip ci] ([1f29506](https://github.com/perfect-panel/ppanel-web/commit/1f29506))
+- **release**: V1.0.0-beta.12 [skip ci] ([4418c47](https://github.com/perfect-panel/ppanel-web/commit/4418c47))
+- **release**: V1.0.0-beta.13 [skip ci] ([23c974a](https://github.com/perfect-panel/ppanel-web/commit/23c974a))
+- **release**: V1.0.0-beta.14 [skip ci] ([0fb0d8b](https://github.com/perfect-panel/ppanel-web/commit/0fb0d8b))
+- **release**: V1.0.0-beta.15 [skip ci] ([b2e8fad](https://github.com/perfect-panel/ppanel-web/commit/b2e8fad))
+- **release**: V1.0.0-beta.16 [skip ci] ([c3eff0a](https://github.com/perfect-panel/ppanel-web/commit/c3eff0a))
+- **release**: V1.0.0-beta.17 [skip ci] ([5b64389](https://github.com/perfect-panel/ppanel-web/commit/5b64389))
+- **release**: V1.0.0-beta.18 [skip ci] ([4a00233](https://github.com/perfect-panel/ppanel-web/commit/4a00233))
+- **release**: V1.0.0-beta.19 [skip ci] ([0f15fb8](https://github.com/perfect-panel/ppanel-web/commit/0f15fb8))
+- **release**: V1.0.0-beta.2 [skip ci] ([087c36c](https://github.com/perfect-panel/ppanel-web/commit/087c36c))
+- **release**: V1.0.0-beta.20 [skip ci] ([bbd44f0](https://github.com/perfect-panel/ppanel-web/commit/bbd44f0))
+- **release**: V1.0.0-beta.21 [skip ci] ([ca642c2](https://github.com/perfect-panel/ppanel-web/commit/ca642c2))
+- **release**: V1.0.0-beta.22 [skip ci] ([c0fb34f](https://github.com/perfect-panel/ppanel-web/commit/c0fb34f))
+- **release**: V1.0.0-beta.23 [skip ci] ([cf1d66d](https://github.com/perfect-panel/ppanel-web/commit/cf1d66d))
+- **release**: V1.0.0-beta.24 [skip ci] ([01a3aa0](https://github.com/perfect-panel/ppanel-web/commit/01a3aa0))
+- **release**: V1.0.0-beta.25 [skip ci] ([047a698](https://github.com/perfect-panel/ppanel-web/commit/047a698))
+- **release**: V1.0.0-beta.26 [skip ci] ([79edea7](https://github.com/perfect-panel/ppanel-web/commit/79edea7))
+- **release**: V1.0.0-beta.27 [skip ci] ([092477b](https://github.com/perfect-panel/ppanel-web/commit/092477b))
+- **release**: V1.0.0-beta.27 [skip ci] ([85fdc36](https://github.com/perfect-panel/ppanel-web/commit/85fdc36))
+- **release**: V1.0.0-beta.28 [skip ci] ([786ba0e](https://github.com/perfect-panel/ppanel-web/commit/786ba0e))
+- **release**: V1.0.0-beta.28 [skip ci] ([d10ecc9](https://github.com/perfect-panel/ppanel-web/commit/d10ecc9))
+- **release**: V1.0.0-beta.29 [skip ci] ([29bc3c7](https://github.com/perfect-panel/ppanel-web/commit/29bc3c7))
+- **release**: V1.0.0-beta.3 [skip ci] ([cd49427](https://github.com/perfect-panel/ppanel-web/commit/cd49427))
+- **release**: V1.0.0-beta.30 [skip ci] ([db0d9e0](https://github.com/perfect-panel/ppanel-web/commit/db0d9e0))
+- **release**: V1.0.0-beta.31 [skip ci] ([aa1d426](https://github.com/perfect-panel/ppanel-web/commit/aa1d426))
+- **release**: V1.0.0-beta.32 [skip ci] ([fa56eb8](https://github.com/perfect-panel/ppanel-web/commit/fa56eb8))
+- **release**: V1.0.0-beta.33 [skip ci] ([383638f](https://github.com/perfect-panel/ppanel-web/commit/383638f))
+- **release**: V1.0.0-beta.34 [skip ci] ([7023875](https://github.com/perfect-panel/ppanel-web/commit/7023875))
+- **release**: V1.0.0-beta.4 [skip ci] ([10d322f](https://github.com/perfect-panel/ppanel-web/commit/10d322f))
+- **release**: V1.0.0-beta.5 [skip ci] ([f275f01](https://github.com/perfect-panel/ppanel-web/commit/f275f01))
+- **release**: V1.0.0-beta.6 [skip ci] ([dd23279](https://github.com/perfect-panel/ppanel-web/commit/dd23279))
+- **release**: V1.0.0-beta.7 [skip ci] ([f60d40c](https://github.com/perfect-panel/ppanel-web/commit/f60d40c))
+- **release**: V1.0.0-beta.8 [skip ci], closes [#9](https://github.com/perfect-panel/ppanel-web/issues/9) ([a593eac](https://github.com/perfect-panel/ppanel-web/commit/a593eac))
+- **release**: V1.0.0-beta.9 [skip ci] ([855d1b0](https://github.com/perfect-panel/ppanel-web/commit/855d1b0))
+- **ui**: Update package dependencies for improved stability and performance ([25da429](https://github.com/perfect-panel/ppanel-web/commit/25da429))
+- Merge branch 'beta' into develop ([f219c52](https://github.com/perfect-panel/ppanel-web/commit/f219c52))
+- Update changelog, enhance prepare script, and add openapi command ([a93db4e](https://github.com/perfect-panel/ppanel-web/commit/a93db4e))
+
+### 🐛 Bug Fixes
+
+- **admin**: Hidden versions and system upgrades ([64cd842](https://github.com/perfect-panel/ppanel-web/commit/64cd842))
+- **admin**: Modify the label type in the rule form to a string array ([a7aa5fe](https://github.com/perfect-panel/ppanel-web/commit/a7aa5fe))
+- **affiliate**: Update user identifier ([35f92c9](https://github.com/perfect-panel/ppanel-web/commit/35f92c9))
+- **api**: Fix type error in API request and add return URL parameter ([ee286dd](https://github.com/perfect-panel/ppanel-web/commit/ee286dd))
+- **api**: PreCreateOrder ([ca747f5](https://github.com/perfect-panel/ppanel-web/commit/ca747f5))
+- **api**: Purge ([98c1c30](https://github.com/perfect-panel/ppanel-web/commit/98c1c30))
+- **api**: Remove redundant requestType parameter in appleLoginCallback ([0aa5d5b](https://github.com/perfect-panel/ppanel-web/commit/0aa5d5b))
+- **api**: Rename app-related functions and types to application for consistency ([9d8b814](https://github.com/perfect-panel/ppanel-web/commit/9d8b814))
+- **api**: Replace 'deduction' with 'gift_amount' and add 'commission' field in type definitions ([77edf1d](https://github.com/perfect-panel/ppanel-web/commit/77edf1d))
+- **api**: Server and order ([255bd82](https://github.com/perfect-panel/ppanel-web/commit/255bd82))
+- **api**: Statistics ([7962162](https://github.com/perfect-panel/ppanel-web/commit/7962162))
+- **api**: Subscribe token ([1932ba7](https://github.com/perfect-panel/ppanel-web/commit/1932ba7))
+- **api**: Update API type definitions to replace 'deduction' with 'gift_amount' and make 'commission' field optional ([c2af060](https://github.com/perfect-panel/ppanel-web/commit/c2af060))
+- **api**: Update Model ([39aaa73](https://github.com/perfect-panel/ppanel-web/commit/39aaa73))
+- **api**: Update subscription_protocol to subscribe_type for consistency across services ([b6da51b](https://github.com/perfect-panel/ppanel-web/commit/b6da51b))
+- **auth-control**: Fix citation error for platform values ([c940f3c](https://github.com/perfect-panel/ppanel-web/commit/c940f3c))
+- **auth-control**: Fix citation error for platform values ([28813d2](https://github.com/perfect-panel/ppanel-web/commit/28813d2))
+- **auth-control**: Rename phone_variable to phone_number in mobile verification configuration ([e5455aa](https://github.com/perfect-panel/ppanel-web/commit/e5455aa))
+- **auth**: Add error handling to form submission and reset Turnstile on failure ([715d011](https://github.com/perfect-panel/ppanel-web/commit/715d011))
+- **auth**: Change Textarea value to defaultValue for client_secret in Apple auth page ([69fc670](https://github.com/perfect-panel/ppanel-web/commit/69fc670))
+- **auth**: Refactor forms to use Turnstile ref for reset functionality ([320a7dc](https://github.com/perfect-panel/ppanel-web/commit/320a7dc))
+- **auth**: Refactor reset password form to simplify code input and update placeholder text ([23833b4](https://github.com/perfect-panel/ppanel-web/commit/23833b4))
+- **auth**: Refactor user authentication forms to remove global store dependency and improve type handling ([12026b0](https://github.com/perfect-panel/ppanel-web/commit/12026b0))
+- **auth**: Remove unused telephone code login function and update typings for telephone login requests ([7239685](https://github.com/perfect-panel/ppanel-web/commit/7239685))
+- **auth**: Require minimum length for invite string when forced invite is enabled ([a604f28](https://github.com/perfect-panel/ppanel-web/commit/a604f28))
+- **auth**: Simplify email verification code input rendering ([6f7bc37](https://github.com/perfect-panel/ppanel-web/commit/6f7bc37))
+- **auth**: Update authentication configuration and localization strings ([47f2c58](https://github.com/perfect-panel/ppanel-web/commit/47f2c58))
+- **auth**: Update email verification logic to use domain suffix check ([62662bb](https://github.com/perfect-panel/ppanel-web/commit/62662bb))
+- **auth**: Update user authentication flow to include email and phone code verification ([5d078fd](https://github.com/perfect-panel/ppanel-web/commit/5d078fd))
+- **auth**: Update UserCheckForm to use setInitialValues and modify onSubmit type ([c984c0d](https://github.com/perfect-panel/ppanel-web/commit/c984c0d))
+- **billing**: ExpiryDate ([e85e545](https://github.com/perfect-panel/ppanel-web/commit/e85e545))
+- **billing**: I18n and styles ([81e0f21](https://github.com/perfect-panel/ppanel-web/commit/81e0f21))
+- **changelog**: Update change log style ([cfa3fc0](https://github.com/perfect-panel/ppanel-web/commit/cfa3fc0))
+- **config**: AlipayF2F ([6c07107](https://github.com/perfect-panel/ppanel-web/commit/6c07107))
+- **config**: Bugs ([f57e40c](https://github.com/perfect-panel/ppanel-web/commit/f57e40c))
+- **config**: Checkout Order ([a31e763](https://github.com/perfect-panel/ppanel-web/commit/a31e763))
+- **config**: FormatBytes ([bbc2da0](https://github.com/perfect-panel/ppanel-web/commit/bbc2da0))
+- **config**: NoStore ([2cc18cf](https://github.com/perfect-panel/ppanel-web/commit/2cc18cf))
+- **config**: Runtime env ([a1e4999](https://github.com/perfect-panel/ppanel-web/commit/a1e4999))
+- **config**: Status Percentag ([8f322fb](https://github.com/perfect-panel/ppanel-web/commit/8f322fb))
+- **config**: SubLink ([1c61966](https://github.com/perfect-panel/ppanel-web/commit/1c61966))
+- **config**: Subscribe Link ([11ea821](https://github.com/perfect-panel/ppanel-web/commit/11ea821))
+- **content**: Parse subscription description and display features with icons ([3c5542a](https://github.com/perfect-panel/ppanel-web/commit/3c5542a))
+- **controller**: Order status ([8c6a097](https://github.com/perfect-panel/ppanel-web/commit/8c6a097))
+- **coupon**: Rename 'server' field to 'subscribe' in coupon form and update coupon update request type ([f8b6d82](https://github.com/perfect-panel/ppanel-web/commit/f8b6d82))
+- **dashboard**: Improve URL encoding for subscription links and enhance success message handling ([4983c33](https://github.com/perfect-panel/ppanel-web/commit/4983c33))
+- **dashboard**: Update date display to use start_time if available ([e551232](https://github.com/perfect-panel/ppanel-web/commit/e551232))
+- **dashboard**: Correct progress value calculations and update groupId accessor ([36c7667](https://github.com/perfect-panel/ppanel-web/commit/36c7667))
+- **dashboard**: Display subscription creation date in user dashboard ([d0e6df0](https://github.com/perfect-panel/ppanel-web/commit/d0e6df0))
+- **dashboard**: Format Bytes ([d8b0bd9](https://github.com/perfect-panel/ppanel-web/commit/d8b0bd9))
+- **dashboard**: Update icon imports for platform consistency and adjust icon size ([3e8912e](https://github.com/perfect-panel/ppanel-web/commit/3e8912e))
+- **dashboard**: Update platform detection logic and improve layout responsiveness ([b0aa364](https://github.com/perfect-panel/ppanel-web/commit/b0aa364))
+- **deps**: Remove outdated @iconify/react dependency and add iconify-json packages ([d6fbc38](https://github.com/perfect-panel/ppanel-web/commit/d6fbc38))
+- **deps**: Typescript config ([34e24b8](https://github.com/perfect-panel/ppanel-web/commit/34e24b8))
+- **deps**: Update clipboard ([5572710](https://github.com/perfect-panel/ppanel-web/commit/5572710))
+- **editor**: Change value ([4fdfeb2](https://github.com/perfect-panel/ppanel-web/commit/4fdfeb2))
+- **email**: Update platform configuration handling to use current ref for consistency ([c90175b](https://github.com/perfect-panel/ppanel-web/commit/c90175b))
+- **footer**: Email address ([a451f44](https://github.com/perfect-panel/ppanel-web/commit/a451f44))
+- **forms**: Add step attribute to number inputs for better value control ([b8f4f1e](https://github.com/perfect-panel/ppanel-web/commit/b8f4f1e))
+- **icon**: Comment out unused icon collection imports ([f17bf8d](https://github.com/perfect-panel/ppanel-web/commit/f17bf8d))
+- **layout**: Remove unnecessary cookie initialization in Logout function ([3065c3a](https://github.com/perfect-panel/ppanel-web/commit/3065c3a))
+- **locale**: Default value ([937408f](https://github.com/perfect-panel/ppanel-web/commit/937408f))
+- **locale**: Document ([6f0fa20](https://github.com/perfect-panel/ppanel-web/commit/6f0fa20))
+- **locale**: Empty ([3832d20](https://github.com/perfect-panel/ppanel-web/commit/3832d20))
+- **locale**: Input Placeholder Webhook Domain ([bca0935](https://github.com/perfect-panel/ppanel-web/commit/bca0935))
+- **locale**: Language Select ([0befdb0](https://github.com/perfect-panel/ppanel-web/commit/0befdb0))
+- **locales**: Add error message for incorrect user information ([52c1d1f](https://github.com/perfect-panel/ppanel-web/commit/52c1d1f))
+- **locales**: Add error message for incorrect user information ([3d92902](https://github.com/perfect-panel/ppanel-web/commit/3d92902))
+- **locales**: Add logout message to authentication localization files ([1d0d911](https://github.com/perfect-panel/ppanel-web/commit/1d0d911))
+- **locales**: Fixed description in multilingual files, updated text related to email registration functionality ([c356bc2](https://github.com/perfect-panel/ppanel-web/commit/c356bc2))
+- **locales**: Order recharge related fields ([35210fe](https://github.com/perfect-panel/ppanel-web/commit/35210fe))
+- **locales**: Removed language file import to clean up unnecessary language support ([68f6ab2](https://github.com/perfect-panel/ppanel-web/commit/68f6ab2))
+- **locales**: Removed multilingual files to clean up unnecessary language support ([5b151cd](https://github.com/perfect-panel/ppanel-web/commit/5b151cd))
+- **locale**: Subscription Path Description ([4c67387](https://github.com/perfect-panel/ppanel-web/commit/4c67387))
+- **locales**: Update custom HTML description for clarity across multiple languages ([557c5cd](https://github.com/perfect-panel/ppanel-web/commit/557c5cd))
+- **locales**: Update custom HTML description in language file, ([87381da](https://github.com/perfect-panel/ppanel-web/commit/87381da))
+- **locales**: Update expiration time description from minutes to seconds in multiple languages ([5bac933](https://github.com/perfect-panel/ppanel-web/commit/5bac933))
+- **locales**: Update Hong Kong ([6d0d069](https://github.com/perfect-panel/ppanel-web/commit/6d0d069))
+- **locales**: Update invite code text to indicate it's optional ([6a34bfb](https://github.com/perfect-panel/ppanel-web/commit/6a34bfb))
+- **logs**: Update log display to render key-value pairs and remove badge ([5ea6489](https://github.com/perfect-panel/ppanel-web/commit/5ea6489))
+- **metadata**: Global metadata ([15d5ecf](https://github.com/perfect-panel/ppanel-web/commit/15d5ecf))
+- **nav**: Comment out unused social login options to simplify navigation configuration ([cefcb31](https://github.com/perfect-panel/ppanel-web/commit/cefcb31))
+- **node-config**: Add null checks for time slots and ensure proper handling of undefined values ([1cdb7e7](https://github.com/perfect-panel/ppanel-web/commit/1cdb7e7))
+- **node**: Add country and city fields to the form schema and localization files ([8775fb6](https://github.com/perfect-panel/ppanel-web/commit/8775fb6))
+- **node**: Handle potential null value for online users count ([fa2fb28](https://github.com/perfect-panel/ppanel-web/commit/fa2fb28))
+- **node**: Locale and form ([38be4d5](https://github.com/perfect-panel/ppanel-web/commit/38be4d5))
+- **node**: Port config ([a20834a](https://github.com/perfect-panel/ppanel-web/commit/a20834a))
+- **node**: Reality config ([fadd17f](https://github.com/perfect-panel/ppanel-web/commit/fadd17f))
+- **node**: Service Name config ([d0be685](https://github.com/perfect-panel/ppanel-web/commit/d0be685))
+- **node**: TLS config ([57fae12](https://github.com/perfect-panel/ppanel-web/commit/57fae12))
+- **node**: Trojan protocol config ([7e1eb90](https://github.com/perfect-panel/ppanel-web/commit/7e1eb90))
+- **notify**: Ensure user info is updated after notification settings submission ([9bc3a94](https://github.com/perfect-panel/ppanel-web/commit/9bc3a94))
+- **notify**: Set default values for notification settings to false ([3652819](https://github.com/perfect-panel/ppanel-web/commit/3652819))
+- **oauth**: Refactor OAuth configuration types and update related API methods ([6227ba9](https://github.com/perfect-panel/ppanel-web/commit/6227ba9))
+- **oauth**: Remove redundant checks when updating configuration to simplify logic ([9140b8a](https://github.com/perfect-panel/ppanel-web/commit/9140b8a))
+- **payment**: Add notification URL field to payment management interface ([5c710e1](https://github.com/perfect-panel/ppanel-web/commit/5c710e1))
+- **payment**: Config and types ([b0c87fb](https://github.com/perfect-panel/ppanel-web/commit/b0c87fb))
+- **payment**: Fix payment related type definitions and update payment method references ([c3138a8](https://github.com/perfect-panel/ppanel-web/commit/c3138a8))
+- **payment**: Qrcode ([a9a535b](https://github.com/perfect-panel/ppanel-web/commit/a9a535b))
+- **payment**: Refactor payment form placeholder and update localization files ([4a4d364](https://github.com/perfect-panel/ppanel-web/commit/4a4d364))
+- **payment**: Refactor purchaseCheckout usage and remove redundant code ([a5e2079](https://github.com/perfect-panel/ppanel-web/commit/a5e2079))
+- **payment**: Replace window.open with window.location.href for checkout links ([1d8c765](https://github.com/perfect-panel/ppanel-web/commit/1d8c765))
+- **payment**: Update checkout type from 'link' to 'url' for consistency ([136a1ab](https://github.com/perfect-panel/ppanel-web/commit/136a1ab))
+- **payment**: Update payment information ([70d6a38](https://github.com/perfect-panel/ppanel-web/commit/70d6a38))
+- **payment**: Update payment method update logic to include row data ([6752420](https://github.com/perfect-panel/ppanel-web/commit/6752420))
+- **phone**: Update SMS expiration time field to use 'sms_expire_time' with default value of 300 ([18b07c7](https://github.com/perfect-panel/ppanel-web/commit/18b07c7))
+- **profile**: Restore filter to ensure only valid OAuth accounts are shown ([315c8f9](https://github.com/perfect-panel/ppanel-web/commit/315c8f9))
+- **purchasing**: Update payment type to lowercase and add optional chaining for discounts ([c06ea49](https://github.com/perfect-panel/ppanel-web/commit/c06ea49))
+- **redirect**: Simplify redirect URL logic by removing unnecessary condition for sessionStorage ([c53ac61](https://github.com/perfect-panel/ppanel-web/commit/c53ac61))
+- **redirect**: Update redirect URL logic to ensure proper handling of OAuth and auth paths ([7954762](https://github.com/perfect-panel/ppanel-web/commit/7954762))
+- **register**: Adjust user email verification logic to handle domain suffix checks correctly ([686aa2d](https://github.com/perfect-panel/ppanel-web/commit/686aa2d))
+- **request**: Add error code 40005 to trigger logout ([71bf002](https://github.com/perfect-panel/ppanel-web/commit/71bf002))
+- **request**: Locale ([37d408f](https://github.com/perfect-panel/ppanel-web/commit/37d408f))
+- **rule-form**: Remove redundant rule set display ([6e0c9b6](https://github.com/perfect-panel/ppanel-web/commit/6e0c9b6))
+- **rules**: Remove unused MATCH rule ([674a01c](https://github.com/perfect-panel/ppanel-web/commit/674a01c))
+- **site**: Add image upload functionality for site logo configuration ([4ea6e4a](https://github.com/perfect-panel/ppanel-web/commit/4ea6e4a))
+- **site**: Se ref to store site configuration for updates ([0c8f091](https://github.com/perfect-panel/ppanel-web/commit/0c8f091))
+- **sort**: Refactor sorting logic in NodeTable and SubscribeTable components for improved clarity and performance ([331bbea](https://github.com/perfect-panel/ppanel-web/commit/331bbea))
+- **subscribe**: Add value prop to field in subscription form for proper state management ([328838d](https://github.com/perfect-panel/ppanel-web/commit/328838d))
+- **subscribe**: Discount ([35a9f69](https://github.com/perfect-panel/ppanel-web/commit/35a9f69))
+- **subscribe**: Extract Domain ([40d61a9](https://github.com/perfect-panel/ppanel-web/commit/40d61a9))
+- **subscribe**: Handle optional values in price and discount calculations ([5939763](https://github.com/perfect-panel/ppanel-web/commit/5939763))
+- **subscribe**: Jumps and internationalization ([13fdec3](https://github.com/perfect-panel/ppanel-web/commit/13fdec3))
+- **subscribe**: Refactor discount calculations and default selection logic in subscription forms ([423b240](https://github.com/perfect-panel/ppanel-web/commit/423b240))
+- **subscribe**: Server group id ([90e6764](https://github.com/perfect-panel/ppanel-web/commit/90e6764))
+- **subscribe**: Update default selection logic in subscription form to ensure proper state management ([ef15374](https://github.com/perfect-panel/ppanel-web/commit/ef15374))
+- **subscribe**: Update forms to include refetch functionality and improve toast messages ([fc55e95](https://github.com/perfect-panel/ppanel-web/commit/fc55e95))
+- **subscribe**: Update payment return URL ([2b80496](https://github.com/perfect-panel/ppanel-web/commit/2b80496))
+- **subscribe**: Update subscription domain placeholder to include examples; improve site name retrieval in global store ([c65a44c](https://github.com/perfect-panel/ppanel-web/commit/c65a44c))
+- **subscribe**: Update value validation to check for number type in subscribe form ([6de29d5](https://github.com/perfect-panel/ppanel-web/commit/6de29d5))
+- **subscription**: Add reset functionality for user subscription token ([39e89bf](https://github.com/perfect-panel/ppanel-web/commit/39e89bf))
+- **table**: Update privacy policy tab translation key and remove unnecessary requestType from OAuth callback ([14b3af5](https://github.com/perfect-panel/ppanel-web/commit/14b3af5))
+- **third-party-accounts**: Remove mobile display logic from third-party accounts component ([b4946f7](https://github.com/perfect-panel/ppanel-web/commit/b4946f7))
+- **third-party-accounts**: Update redirect property name in binding response handling ([012e83a](https://github.com/perfect-panel/ppanel-web/commit/012e83a))
+- **turnstile**: Turnstile_site_key ([0327b73](https://github.com/perfect-panel/ppanel-web/commit/0327b73))
+- **type**: Fix ts type check error ([3cb0629](https://github.com/perfect-panel/ppanel-web/commit/3cb0629))
+- **types**: Add 'gift_amount' field to API type definitions ([8f8a12a](https://github.com/perfect-panel/ppanel-web/commit/8f8a12a))
+- **types**: Checking ([2992824](https://github.com/perfect-panel/ppanel-web/commit/2992824))
+- **types**: Order type ([c7e50a9](https://github.com/perfect-panel/ppanel-web/commit/c7e50a9))
+- **ui**: Bugs ([b023d0f](https://github.com/perfect-panel/ppanel-web/commit/b023d0f))
+- **ui**: Components ([a7927d7](https://github.com/perfect-panel/ppanel-web/commit/a7927d7))
+- **ui**: Fix json formatting ([e1ddd94](https://github.com/perfect-panel/ppanel-web/commit/e1ddd94))
+- **ui**: Improve dashboard layout and enhance button functionality; open checkout URLs in a new tab ([fc0da76](https://github.com/perfect-panel/ppanel-web/commit/fc0da76))
+- **ui**: Multiple display bugs ([f5d8fd3](https://github.com/perfect-panel/ppanel-web/commit/f5d8fd3))
+- **user-nav**: Update user avatar and label to display telephone if email is not available ([7b6bb7b](https://github.com/perfect-panel/ppanel-web/commit/7b6bb7b))
+- **user**: Add the 'gift_amount' field to the user service's type definition ([6301409](https://github.com/perfect-panel/ppanel-web/commit/6301409))
+- **user**: Refactor user form validation and reset password fields ([6733fc2](https://github.com/perfect-panel/ppanel-web/commit/6733fc2))
+- **user**: Update locales ([4e7d249](https://github.com/perfect-panel/ppanel-web/commit/4e7d249))
+- **user**: Update notification and verify code settings ([574b043](https://github.com/perfect-panel/ppanel-web/commit/574b043))
+- **user**: Update user identifier field and localizations ([1b6befa](https://github.com/perfect-panel/ppanel-web/commit/1b6befa))
+- **user**: Update user subscribe display ([3bb714d](https://github.com/perfect-panel/ppanel-web/commit/3bb714d))
+- **utils**: Login redirect url ([cbe5f0d](https://github.com/perfect-panel/ppanel-web/commit/cbe5f0d))
+- More bugs ([2d88a3a](https://github.com/perfect-panel/ppanel-web/commit/2d88a3a))
+
+### 👷 Build System
+
+- **config**: Update pm2 config ([d95b425](https://github.com/perfect-panel/ppanel-web/commit/d95b425))
+
+### 💄 Styles
+
+- **dashboard**: Adjust grid layout and update image dimensions in application display ([f3204b7](https://github.com/perfect-panel/ppanel-web/commit/f3204b7))
+- **dashboard**: Enhance card components with full height and improved empty state handling ([7e1d551](https://github.com/perfect-panel/ppanel-web/commit/7e1d551))
+- **document**: Update ([0a8109b](https://github.com/perfect-panel/ppanel-web/commit/0a8109b))
+- **globals**: Refactor delete confirmation button and update badge styles in node and subscribe tables ([30ae781](https://github.com/perfect-panel/ppanel-web/commit/30ae781))
+- **locales**: Remove unused subscription labels from multiple locale files ([fb0c510](https://github.com/perfect-panel/ppanel-web/commit/fb0c510))
+- **locales**: Update server.json to reorganize relay mode options and improve labels ([701cdee](https://github.com/perfect-panel/ppanel-web/commit/701cdee))
+- **node**: Form ([d5f5add](https://github.com/perfect-panel/ppanel-web/commit/d5f5add))
+- **node**: Improve layout and spacing in NodeStatusCell component ([136287d](https://github.com/perfect-panel/ppanel-web/commit/136287d))
+- **node**: Protocol Tab ([2bcb925](https://github.com/perfect-panel/ppanel-web/commit/2bcb925))
+- **time-slot**: Add chart display ([c44ad47](https://github.com/perfect-panel/ppanel-web/commit/c44ad47))
+- **ui**: Update mobile style ([eda18bc](https://github.com/perfect-panel/ppanel-web/commit/eda18bc))
+- Update node secret UI and add telephone code field to authentication form ([770932e](https://github.com/perfect-panel/ppanel-web/commit/770932e))
+
+### 📝 Documentation
+
+- **readme**: License name ([74cb16b](https://github.com/perfect-panel/ppanel-web/commit/74cb16b))
+
+### 🔧 Continuous Integration
+
+- **github**: Release docker ([5af60aa](https://github.com/perfect-panel/ppanel-web/commit/5af60aa))
+- **step**: Update step name ([9eca618](https://github.com/perfect-panel/ppanel-web/commit/9eca618))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+# [1.0.0-beta.34](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.33...v1.0.0-beta.34) (2025-04-02)
+
+### ✨ Features
+
+- **admin**: Add application and rule management entries to localization files ([8b43e69](https://github.com/perfect-panel/ppanel-web/commit/8b43e69))
+- **api**: Add an interface to obtain user subscription details, update related type definitions and localized text ([cf5c39c](https://github.com/perfect-panel/ppanel-web/commit/cf5c39c))
+- **user**: Integrate subscription list into user management, update request parameters and types ([8d49dac](https://github.com/perfect-panel/ppanel-web/commit/8d49dac))
+
+### 🐛 Bug Fixes
+
+- **admin**: Hidden versions and system upgrades ([64cd842](https://github.com/perfect-panel/ppanel-web/commit/64cd842))
+- **admin**: Modify the label type in the rule form to a string array ([a7aa5fe](https://github.com/perfect-panel/ppanel-web/commit/a7aa5fe))
+- **node**: Handle potential null value for online users count ([fa2fb28](https://github.com/perfect-panel/ppanel-web/commit/fa2fb28))
+- **subscribe**: Add value prop to field in subscription form for proper state management ([328838d](https://github.com/perfect-panel/ppanel-web/commit/328838d))
+- **subscribe**: Refactor discount calculations and default selection logic in subscription forms ([423b240](https://github.com/perfect-panel/ppanel-web/commit/423b240))
+- **subscribe**: Update default selection logic in subscription form to ensure proper state management ([ef15374](https://github.com/perfect-panel/ppanel-web/commit/ef15374))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+# [1.0.0-beta.33](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.32...v1.0.0-beta.33) (2025-03-18)
+
+### 🐛 Bug Fixes
+
+- **subscribe**: Handle optional values in price and discount calculations ([5939763](https://github.com/perfect-panel/ppanel-web/commit/5939763))
+
+# [1.0.0-beta.32](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.31...v1.0.0-beta.32) (2025-03-17)
+
+### 🐛 Bug Fixes
+
+- **forms**: Add step attribute to number inputs for better value control ([b8f4f1e](https://github.com/perfect-panel/ppanel-web/commit/b8f4f1e))
+- **locales**: Update invite code text to indicate it's optional ([6a34bfb](https://github.com/perfect-panel/ppanel-web/commit/6a34bfb))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+# [1.0.0-beta.31](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.30...v1.0.0-beta.31) (2025-03-15)
+
+### 🐛 Bug Fixes
+
+- **site**: Se ref to store site configuration for updates ([0c8f091](https://github.com/perfect-panel/ppanel-web/commit/0c8f091))
+
+# [1.0.0-beta.30](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.29...v1.0.0-beta.30) (2025-03-15)
+
+### ✨ Features
+
+- **api**: Add CheckoutOrder request and response types, and update user purchase request parameters ([48a1b97](https://github.com/perfect-panel/ppanel-web/commit/48a1b97))
+- **email**: Add traffic exhaustion template ([bb3bd7b](https://github.com/perfect-panel/ppanel-web/commit/bb3bd7b))
+- **formatting**: Update differenceInDays function to return whole days or two decimal places ([bf58f25](https://github.com/perfect-panel/ppanel-web/commit/bf58f25))
+- **global**: Add custom data ([6dbebd1](https://github.com/perfect-panel/ppanel-web/commit/6dbebd1))
+- **input**: Add minimum value constraint and enhance number handling in EnhancedInput ([ce31972](https://github.com/perfect-panel/ppanel-web/commit/ce31972))
+- **loading**: Replace loading animation with a simpler spinner and loading text ([f72df3a](https://github.com/perfect-panel/ppanel-web/commit/f72df3a))
+- **node-form**: Update number input fields to enforce step, min, and max values ([3f7b6d1](https://github.com/perfect-panel/ppanel-web/commit/3f7b6d1))
+- **payment**: Add isEdit prop to PaymentForm and disable fields when editing ([85f55de](https://github.com/perfect-panel/ppanel-web/commit/85f55de))
+- **timeline**: Simplify timeline component layout and remove commented-out code ([fbad3b0](https://github.com/perfect-panel/ppanel-web/commit/fbad3b0))
+
+### 🎫 Chores
+
+- **release**: V1.0.0-beta.27 [skip ci] ([092477b](https://github.com/perfect-panel/ppanel-web/commit/092477b))
+- **release**: V1.0.0-beta.28 [skip ci] ([786ba0e](https://github.com/perfect-panel/ppanel-web/commit/786ba0e))
+- Merge branch 'beta' into develop ([f219c52](https://github.com/perfect-panel/ppanel-web/commit/f219c52))
+
+### 🐛 Bug Fixes
+
+- **dashboard**: Update date display to use start_time if available ([e551232](https://github.com/perfect-panel/ppanel-web/commit/e551232))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+# [1.0.0-beta.29](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.28...v1.0.0-beta.29) (2025-03-14)
+
+### ✨ Features
+
+- **api**: Add CheckoutOrder request and response types, and update user purchase request parameters ([dddc21c](https://github.com/perfect-panel/ppanel-web/commit/dddc21c))
+- **loading**: Replace loading animation with a simpler spinner and loading text ([b8316bb](https://github.com/perfect-panel/ppanel-web/commit/b8316bb))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+# [1.0.0-beta.28](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.27...v1.0.0-beta.28) (2025-03-13)
+
+### ✨ Features
+
+- **input**: Add minimum value constraint and enhance number handling in EnhancedInput ([94822d9](https://github.com/perfect-panel/ppanel-web/commit/94822d9))
+
+# [1.0.0-beta.27](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.26...v1.0.0-beta.27) (2025-03-13)
+
+### ♻ Code Refactoring
+
+- **payment**: Reconstruct the payment page ([7109472](https://github.com/perfect-panel/ppanel-web/commit/7109472))
+- Enhance user navigation dropdown ui and styling ([d2732e6](https://github.com/perfect-panel/ppanel-web/commit/d2732e6))
+
+### ✨ Features
+
+- **cdn**: Add CDN URL configuration and update related references ([0c90733](https://github.com/perfect-panel/ppanel-web/commit/0c90733))
+- **payment**: Add bank card payment ([7fa3a57](https://github.com/perfect-panel/ppanel-web/commit/7fa3a57))
+- **subscription**: Improve layout and organization of subscription detail tabs ([e4630f8](https://github.com/perfect-panel/ppanel-web/commit/e4630f8))
+- **subscription**: Refactor subscription handling and update imports for better organization ([2215c7f](https://github.com/perfect-panel/ppanel-web/commit/2215c7f))
+
+### 🎫 Chores
+
+- **merge**: Bump version to 1.0.0-beta.26 and update changelog ([3222016](https://github.com/perfect-panel/ppanel-web/commit/3222016))
+
+### 🐛 Bug Fixes
+
+- **affiliate**: Update user identifier ([35f92c9](https://github.com/perfect-panel/ppanel-web/commit/35f92c9))
+- **changelog**: Update change log style ([cfa3fc0](https://github.com/perfect-panel/ppanel-web/commit/cfa3fc0))
+- **payment**: Add notification URL field to payment management interface ([5c710e1](https://github.com/perfect-panel/ppanel-web/commit/5c710e1))
+- **payment**: Fix payment related type definitions and update payment method references ([c3138a8](https://github.com/perfect-panel/ppanel-web/commit/c3138a8))
+- **payment**: Refactor purchaseCheckout usage and remove redundant code ([a5e2079](https://github.com/perfect-panel/ppanel-web/commit/a5e2079))
+- **payment**: Update checkout type from 'link' to 'url' for consistency ([136a1ab](https://github.com/perfect-panel/ppanel-web/commit/136a1ab))
+- **payment**: Update payment information ([70d6a38](https://github.com/perfect-panel/ppanel-web/commit/70d6a38))
+- **payment**: Update payment method update logic to include row data ([6752420](https://github.com/perfect-panel/ppanel-web/commit/6752420))
+- **purchasing**: Update payment type to lowercase and add optional chaining for discounts ([c06ea49](https://github.com/perfect-panel/ppanel-web/commit/c06ea49))
+- **ui**: Improve dashboard layout and enhance button functionality; open checkout URLs in a new tab ([fc0da76](https://github.com/perfect-panel/ppanel-web/commit/fc0da76))
+- **ui**: Multiple display bugs ([f5d8fd3](https://github.com/perfect-panel/ppanel-web/commit/f5d8fd3))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+# [1.0.0-beta.28](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.27...v1.0.0-beta.28) (2025-03-13)
+
+### ✨ Features
+
+- **input**: Add minimum value constraint and enhance number handling in EnhancedInput ([94822d9](https://github.com/perfect-panel/ppanel-web/commit/94822d9))
+
+# [1.0.0-beta.27](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.26...v1.0.0-beta.27) (2025-03-13)
+
+### ♻ Code Refactoring
+
+- **payment**: Reconstruct the payment page ([7109472](https://github.com/perfect-panel/ppanel-web/commit/7109472))
+- Enhance user navigation dropdown ui and styling ([d2732e6](https://github.com/perfect-panel/ppanel-web/commit/d2732e6))
+
+### ✨ Features
+
+- **cdn**: Add CDN URL configuration and update related references ([0c90733](https://github.com/perfect-panel/ppanel-web/commit/0c90733))
+- **payment**: Add bank card payment ([7fa3a57](https://github.com/perfect-panel/ppanel-web/commit/7fa3a57))
+- **subscription**: Improve layout and organization of subscription detail tabs ([e4630f8](https://github.com/perfect-panel/ppanel-web/commit/e4630f8))
+- **subscription**: Refactor subscription handling and update imports for better organization ([2215c7f](https://github.com/perfect-panel/ppanel-web/commit/2215c7f))
+
+### 🎫 Chores
+
+- **merge**: Bump version to 1.0.0-beta.26 and update changelog ([3222016](https://github.com/perfect-panel/ppanel-web/commit/3222016))
+
+### 🐛 Bug Fixes
+
+- **affiliate**: Update user identifier ([35f92c9](https://github.com/perfect-panel/ppanel-web/commit/35f92c9))
+- **changelog**: Update change log style ([cfa3fc0](https://github.com/perfect-panel/ppanel-web/commit/cfa3fc0))
+- **payment**: Add notification URL field to payment management interface ([5c710e1](https://github.com/perfect-panel/ppanel-web/commit/5c710e1))
+- **payment**: Fix payment related type definitions and update payment method references ([c3138a8](https://github.com/perfect-panel/ppanel-web/commit/c3138a8))
+- **payment**: Refactor purchaseCheckout usage and remove redundant code ([a5e2079](https://github.com/perfect-panel/ppanel-web/commit/a5e2079))
+- **payment**: Update checkout type from 'link' to 'url' for consistency ([136a1ab](https://github.com/perfect-panel/ppanel-web/commit/136a1ab))
+- **payment**: Update payment information ([70d6a38](https://github.com/perfect-panel/ppanel-web/commit/70d6a38))
+- **payment**: Update payment method update logic to include row data ([6752420](https://github.com/perfect-panel/ppanel-web/commit/6752420))
+- **purchasing**: Update payment type to lowercase and add optional chaining for discounts ([c06ea49](https://github.com/perfect-panel/ppanel-web/commit/c06ea49))
+- **ui**: Improve dashboard layout and enhance button functionality; open checkout URLs in a new tab ([fc0da76](https://github.com/perfect-panel/ppanel-web/commit/fc0da76))
+- **ui**: Multiple display bugs ([f5d8fd3](https://github.com/perfect-panel/ppanel-web/commit/f5d8fd3))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+# [1.0.0-beta.26](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.25...v1.0.0-beta.26) (2025-03-02)
+
+### 🐛 Bug Fixes
+
+- **icon**: Comment out unused icon collection imports ([f17bf8d](https://github.com/perfect-panel/ppanel-web/commit/f17bf8d))
+
+# [1.0.0-beta.25](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.24...v1.0.0-beta.25) (2025-03-01)
+
+### ✨ Features
+
+- **auth**: Add privacy policy link to the footer ([8e16ef1](https://github.com/perfect-panel/ppanel-web/commit/8e16ef1))
+
+### 🐛 Bug Fixes
+
+- **dashboard**: Display subscription creation date in user dashboard ([d0e6df0](https://github.com/perfect-panel/ppanel-web/commit/d0e6df0))
+- **request**: Add error code 40005 to trigger logout ([71bf002](https://github.com/perfect-panel/ppanel-web/commit/71bf002))
+- **subscribe**: Update payment return URL ([2b80496](https://github.com/perfect-panel/ppanel-web/commit/2b80496))
+
+# [1.0.0-beta.24](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.23...v1.0.0-beta.24) (2025-02-27)
+
+### ♻ Code Refactoring
+
+- **ui**: Optimize document display ([2ca2992](https://github.com/perfect-panel/ppanel-web/commit/2ca2992))
+- Reduce code complexity and improve readability ([e11f18c](https://github.com/perfect-panel/ppanel-web/commit/e11f18c))
+
+### ✨ Features
+
+- **loading**: Add loading components and integrate them in Providers ([d5847fa](https://github.com/perfect-panel/ppanel-web/commit/d5847fa))
+
+### 🎫 Chores
+
+- **merge**: Add advertising module and device settings ([0130e02](https://github.com/perfect-panel/ppanel-web/commit/0130e02))
+
+### 🐛 Bug Fixes
+
+- **locales**: Order recharge related fields ([35210fe](https://github.com/perfect-panel/ppanel-web/commit/35210fe))
+
+<a name="readme-top"></a>
+
+# Changelog
+
+# [1.0.0-beta.23](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.22...v1.0.0-beta.23) (2025-02-24)
+
+### 🐛 Bug Fixes
+
+- **auth**: Update email verification logic to use domain suffix check ([62662bb](https://github.com/perfect-panel/ppanel-web/commit/62662bb))
+
+# [1.0.0-beta.22](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.21...v1.0.0-beta.22) (2025-02-23)
+
+### 🐛 Bug Fixes
+
+- **locales**: Removed language file import to clean up unnecessary language support ([68f6ab2](https://github.com/perfect-panel/ppanel-web/commit/68f6ab2))
+
+# [1.0.0-beta.21](https://github.com/perfect-panel/ppanel-web/compare/v1.0.0-beta.20...v1.0.0-beta.21) (2025-02-23)
+
+### ✨ Features
+
+- **privacy-policy**: Add privacy policy related text and links ([baa68f0](https://github.com/perfect-panel/ppanel-web/commit/baa68f0))
+
+### 🐛 Bug Fixes
+
+- **locales**: Removed multilingual files to clean up unnecessary language support ([5b151cd](https://github.com/perfect-panel/ppanel-web/commit/5b151cd))
+- **locales**: Update custom HTML description in language file, ([87381da](https://github.com/perfect-panel/ppanel-web/commit/87381da))
+- **table**: Update privacy policy tab translation key and remove unnecessary requestType from OAuth callback ([14b3af5](https://github.com/perfect-panel/ppanel-web/commit/14b3af5))

 <a name="readme-top"></a>

--- a/README.md
+++ b/README.md
@ -34,6 +34,19 @@ English

 </div>

+> **Article 1.**  
+> All human beings are born free and equal in dignity and rights.  
+> They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.
+>
+> **Article 12.**  
+> No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to attacks upon his honour and reputation.  
+> Everyone has the right to the protection of the law against such interference or attacks.
+>
+> **Article 19.**  
+> Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference and to seek, receive and impart information and ideas through any media and regardless of frontiers.
+>
+> _Source: [United Nations – Universal Declaration of Human Rights (UN.org)](https://www.un.org/sites/un2.un.org/files/2021/03/udhr.pdf)_
+
 ## 📦 Application List

 | 📦 Application                                                                                                                                                                                                                                                                                                                                | 🖼️ Preview                                                     |
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -34,6 +34,19 @@

 </div>

+> **第一条**  
+> 人人生而自由，在尊严与权利上一律平等。  
+> 他们赋有理性与良知，应当以兄弟般的精神彼此相待。
+>
+> **第十二条**  
+> 任何人的隐私、家庭、住宅和通信不得任意干涉，其名誉与荣誉不得加以攻击。  
+> 人人有权受到法律的保护，以免遭受这种干涉或攻击。
+>
+> **第十九条**  
+> 人人有思想与表达的自由；此项自由包括持有主张而不受干预，以及通过任何媒介、无论国界，自由寻求、接受和传播信息与思想。
+>
+> _来源： [United Nations – Universal Declaration of Human Rights (UN.org)](https://www.un.org/sites/un2.un.org/files/2021/03/udhr.pdf)_
+
 ## 📦 Application List

 | 📦 Application                                                                                                                                                                                                                                                                                                                                | 🖼️ Preview                                                     |
--- a/apps/admin/app/(auth)/email/register-form.tsx
+++ b/apps/admin/app/(auth)/email/register-form.tsx
@ -31,7 +31,7 @@ export default function RegisterForm({

  const handleCheckUser = async (email: string) => {
    try {
-      if (!auth.email.enable_verify) return true;
+      if (!auth.email.enable_domain_suffix) return true;
      const domain = email.split('@')[1];
      const isValid = auth.email?.domain_suffix_list.split('\n').includes(domain || '');
      return isValid;
--- a/apps/admin/app/(auth)/page.tsx
+++ b/apps/admin/app/(auth)/page.tsx
@ -8,13 +8,22 @@ import LoginLottie from '@workspace/ui/lotties/login.json';
 import { useTranslations } from 'next-intl';
 import Image from 'next/legacy/image';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
 import EmailAuthForm from './email/auth-form';

 export default function Page() {
  const t = useTranslations('auth');
-  const { common } = useGlobalStore();
+  const { common, user } = useGlobalStore();
  const { site } = common;

+  const router = useRouter();
+  useEffect(() => {
+    if (user) {
+      router.replace('/dashboard');
+    }
+  }, [router, user]);
+
  return (
    <main className='bg-muted/50 flex h-full min-h-screen items-center'>
      <div className='flex size-full flex-auto flex-col justify-center lg:flex-row'>
--- a/apps/admin/app/dashboard/ads/ads-form.tsx
+++ b/apps/admin/app/dashboard/ads/ads-form.tsx
@ -0,0 +1,301 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { RadioGroup, RadioGroupItem } from '@workspace/ui/components/radio-group';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const formSchema = z.object({
+  title: z.string(),
+  type: z.enum(['image', 'video']),
+  content: z.string(),
+  description: z.string(),
+  target_url: z.string().url(),
+  start_time: z.number(),
+  end_time: z.number(),
+});
+
+interface AdsFormProps<T> {
+  onSubmit: (data: T) => Promise<boolean> | boolean;
+  initialValues?: T;
+  loading?: boolean;
+  trigger: string;
+  title: string;
+}
+
+export default function AdsForm<T extends Record<string, any>>({
+  onSubmit,
+  initialValues,
+  loading,
+  trigger,
+  title,
+}: AdsFormProps<T>) {
+  const t = useTranslations('ads');
+  const [open, setOpen] = useState(false);
+
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      ...initialValues,
+    } as any,
+  });
+
+  useEffect(() => {
+    form?.reset(initialValues);
+  }, [form, initialValues]);
+
+  const type = form.watch('type');
+  const startTime = form.watch('start_time');
+
+  const renderContentField = () => {
+    return (
+      <FormField
+        control={form.control}
+        name='content'
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('form.content')}</FormLabel>
+            <FormControl>
+              <EnhancedInput
+                placeholder={
+                  type === 'image'
+                    ? 'https://example.com/image.jpg'
+                    : 'https://example.com/video.mp4'
+                }
+                value={field.value}
+                onValueChange={(value) => {
+                  form.setValue('content', value);
+                }}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    );
+  };
+
+  async function handleSubmit(data: { [x: string]: any }) {
+    const bool = await onSubmit(data as T);
+    if (bool) setOpen(false);
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          onClick={() => {
+            form.reset();
+            setOpen(true);
+          }}
+        >
+          {trigger}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100vh-48px-36px-36px-env(safe-area-inset-top))]'>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-4 px-6 pt-4'>
+              <FormField
+                control={form.control}
+                name='title'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.title')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('form.enterTitle')}
+                        value={field.value}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='type'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.type')}</FormLabel>
+                    <FormControl>
+                      <RadioGroup
+                        defaultValue={field.value}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                        className='flex gap-4'
+                      >
+                        <FormItem className='flex items-center space-x-3 space-y-0'>
+                          <FormControl>
+                            <RadioGroupItem value='image' />
+                          </FormControl>
+                          <FormLabel className='font-normal'>{t('form.typeImage')}</FormLabel>
+                        </FormItem>
+                        <FormItem className='flex items-center space-x-3 space-y-0'>
+                          <FormControl>
+                            <RadioGroupItem value='video' />
+                          </FormControl>
+                          <FormLabel className='font-normal'>{t('form.typeVideo')}</FormLabel>
+                        </FormItem>
+                      </RadioGroup>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {renderContentField()}
+
+              <FormField
+                control={form.control}
+                name='description'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.description')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('form.enterDescription')}
+                        value={field.value}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='target_url'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.targetUrl')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('form.enterTargetUrl')}
+                        value={field.value}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='start_time'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.startTime')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        type='datetime-local'
+                        step='1'
+                        placeholder={t('form.enterStartTime')}
+                        value={field.value ? new Date(field.value).toISOString().slice(0, 16) : ''}
+                        min={Number(new Date().toISOString().slice(0, 16))}
+                        onValueChange={(value) => {
+                          const timestamp = value ? new Date(value).getTime() : 0;
+                          form.setValue(field.name, timestamp);
+                          const endTime = form.getValues('end_time');
+                          if (endTime && timestamp > endTime) {
+                            form.setValue('end_time', '');
+                          }
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='end_time'
+                render={({ field }) => {
+                  return (
+                    <FormItem>
+                      <FormLabel>{t('form.endTime')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          type='datetime-local'
+                          step='1'
+                          placeholder={t('form.enterEndTime')}
+                          value={
+                            field.value ? new Date(field.value).toISOString().slice(0, 16) : ''
+                          }
+                          min={Number(
+                            startTime
+                              ? new Date(startTime).toISOString().slice(0, 16)
+                              : new Date().toISOString().slice(0, 16),
+                          )}
+                          disabled={!startTime}
+                          onValueChange={(value) => {
+                            const timestamp = value ? new Date(value).getTime() : 0;
+                            if (!startTime || timestamp < startTime) return;
+                            form.setValue(field.name, timestamp);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button
+            variant='outline'
+            disabled={loading}
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            {t('form.cancel')}
+          </Button>
+          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('form.confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/ads/page.tsx
+++ b/apps/admin/app/dashboard/ads/page.tsx
@ -0,0 +1,162 @@
+'use client';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import { createAds, deleteAds, getAdsList, updateAds } from '@/services/admin/ads';
+import { formatDate } from '@/utils/common';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import { Switch } from '@workspace/ui/components/switch';
+import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import AdsForm from './ads-form';
+
+export default function Page() {
+  const t = useTranslations('ads');
+  const [loading, setLoading] = useState(false);
+  const ref = useRef<ProTableActions>(null);
+
+  return (
+    <ProTable<API.Ads, Record<string, unknown>>
+      action={ref}
+      header={{
+        toolbar: (
+          <AdsForm<API.CreateAdsRequest>
+            trigger={t('create')}
+            title={t('createAds')}
+            loading={loading}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await createAds({
+                  ...values,
+                  status: 0,
+                });
+                toast.success(t('createSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />
+        ),
+      }}
+      params={[
+        {
+          key: 'status',
+          placeholder: t('status'),
+          options: [
+            { label: t('enabled'), value: '1' },
+            { label: t('disabled'), value: '0' },
+          ],
+        },
+        {
+          key: 'search',
+        },
+      ]}
+      request={async (pagination, filters) => {
+        const { data } = await getAdsList({
+          ...pagination,
+          ...filters,
+        });
+        return {
+          list: data.data?.list || [],
+          total: data.data?.total || 0,
+        };
+      }}
+      columns={[
+        {
+          accessorKey: 'status',
+          header: t('status'),
+          cell: ({ row }) => {
+            return (
+              <Switch
+                defaultChecked={row.getValue('status') === 1}
+                onCheckedChange={async (checked) => {
+                  await updateAds({
+                    ...row.original,
+                    status: checked ? 1 : 0,
+                  });
+                  ref.current?.refresh();
+                }}
+              />
+            );
+          },
+        },
+        {
+          accessorKey: 'title',
+          header: t('title'),
+        },
+        {
+          accessorKey: 'type',
+          header: t('type'),
+          cell: ({ row }) => {
+            const type = row.original.type;
+            return <Badge>{type}</Badge>;
+          },
+        },
+        {
+          accessorKey: 'target_url',
+          header: t('targetUrl'),
+        },
+        {
+          accessorKey: 'description',
+          header: t('form.description'),
+        },
+        {
+          accessorKey: 'period',
+          header: t('validityPeriod'),
+          cell: ({ row }) => {
+            const { start_time, end_time } = row.original;
+            return (
+              <>
+                {formatDate(start_time)} - {formatDate(end_time)}
+              </>
+            );
+          },
+        },
+      ]}
+      actions={{
+        render: (row) => [
+          <AdsForm<API.UpdateAdsRequest>
+            key='edit'
+            trigger={t('edit')}
+            title={t('editAds')}
+            loading={loading}
+            initialValues={row}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await updateAds({ ...row, ...values });
+                toast.success(t('updateSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />,
+          <ConfirmButton
+            key='delete'
+            trigger={<Button variant='destructive'>{t('delete')}</Button>}
+            title={t('confirmDelete')}
+            description={t('deleteWarning')}
+            onConfirm={async () => {
+              await deleteAds({ id: row.id });
+              toast.success(t('deleteSuccess'));
+              ref.current?.refresh();
+            }}
+            cancelText={t('cancel')}
+            confirmText={t('confirm')}
+          />,
+        ],
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/announcement/notice-form.tsx
+++ b/apps/admin/app/dashboard/announcement/notice-form.tsx
@ -81,9 +81,13 @@ export default function AnnouncementForm<T extends Record<string, any>>({
        <SheetHeader>
          <SheetTitle>{title}</SheetTitle>
        </SheetHeader>
-        <ScrollArea className='-mx-6 h-[calc(100vh-48px-36px-36px-env(safe-area-inset-top))]'>
+        <ScrollArea className='-mx-6 h-[calc(100vh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
          <Form {...form}>
-            <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-4 px-6 pt-4'>
+            <form
+              id='notice-form'
+              onSubmit={form.handleSubmit(handleSubmit)}
+              className='space-y-4 pt-4'
+            >
              <FormField
                control={form.control}
                name='title'
--- a/apps/admin/app/dashboard/auth-control/apple/page.tsx
+++ b/apps/admin/app/dashboard/auth-control/apple/page.tsx
@ -1,148 +0,0 @@
-'use client';
-
-import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { Textarea } from '@workspace/ui/components/textarea';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Page() {
-  const t = useTranslations('apple');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getAuthMethodConfig', 'apple'],
-    queryFn: async () => {
-      const { data } = await getAuthMethodConfig({
-        method: 'apple',
-      });
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: keyof API.UpdateAuthMethodConfigRequest, value: unknown) {
-    try {
-      await updateAuthMethodConfig({
-        ...data,
-        [key]: value,
-      } as API.UpdateAuthMethodConfigRequest);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      toast.error(t('saveFailed'));
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('enable')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enabled}
-              onCheckedChange={(checked) => updateConfig('enabled', checked)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('teamId')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('teamIdDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder='ABCDE1FGHI'
-              value={data?.config?.team_id}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  team_id: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('keyId')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('keyIdDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder='ABC1234567'
-              value={data?.config?.key_id}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  key_id: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('clientId')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('clientIdDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder='com.your.app.service'
-              value={data?.config?.client_id}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  client_id: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell className='align-top'>
-            <Label>{t('clientSecret')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('clientSecretDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Textarea
-              className='h-20'
-              placeholder={`-----BEGIN PRIVATE KEY-----\nMIGTAgEA...\n-----END PRIVATE KEY-----`}
-              defaultValue={data?.config?.client_secret}
-              onBlur={(e) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  client_secret: e.target.value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('redirectUri')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('redirectUriDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder='https://your-domain.com'
-              value={data?.config.redirect_url}
-              onValueBlur={(value) =>
-                updateConfig('config', {
-                  ...data?.config,
-                  redirect_url: value,
-                })
-              }
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}
--- a/apps/admin/app/dashboard/auth-control/device/page.tsx
+++ b/apps/admin/app/dashboard/auth-control/device/page.tsx
@ -1,55 +0,0 @@
-'use client';
-
-import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Page() {
-  const t = useTranslations('device');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getAuthMethodConfig', 'device'],
-    queryFn: async () => {
-      const { data } = await getAuthMethodConfig({
-        method: 'device',
-      });
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: keyof API.UpdateAuthMethodConfigRequest, value: unknown) {
-    try {
-      await updateAuthMethodConfig({
-        ...data,
-        [key]: value,
-      } as API.UpdateAuthMethodConfigRequest);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      toast.error(t('saveFailed'));
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('enable')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enabled}
-              onCheckedChange={(checked) => updateConfig('enabled', checked)}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}
--- a/apps/admin/app/dashboard/auth-control/email/page.tsx
+++ b/apps/admin/app/dashboard/auth-control/email/page.tsx
@ -1,322 +0,0 @@
-'use client';
-
-import {
-  getAuthMethodConfig,
-  testEmailSend,
-  updateAuthMethodConfig,
-} from '@/services/admin/authMethod';
-import { useQuery } from '@tanstack/react-query';
-import { Button } from '@workspace/ui/components/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@workspace/ui/components/card';
-import { Label } from '@workspace/ui/components/label';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
-import { Textarea } from '@workspace/ui/components/textarea';
-import { HTMLEditor } from '@workspace/ui/custom-components/editor';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { useRef, useState } from 'react';
-import { toast } from 'sonner';
-import { LogsTable } from '../log';
-
-export default function Page() {
-  const t = useTranslations('email');
-  const ref = useRef<Partial<API.AuthMethodConfig>>({});
-  const [email, setEmail] = useState<string>();
-
-  const { data, refetch, isFetching } = useQuery({
-    queryKey: ['getAuthMethodConfig', 'email'],
-    queryFn: async () => {
-      const { data } = await getAuthMethodConfig({
-        method: 'email',
-      });
-      ref.current = data.data as API.AuthMethodConfig;
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateAuthMethodConfig({
-        ...ref.current,
-        [key]: value,
-      } as API.UpdateAuthMethodConfigRequest);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      toast.error(t('saveFailed'));
-    }
-  }
-
-  return (
-    <Tabs defaultValue='settings'>
-      <TabsList className='h-full flex-wrap'>
-        <TabsTrigger value='settings'>{t('settings')}</TabsTrigger>
-        <TabsTrigger value='template'>{t('template')}</TabsTrigger>
-        <TabsTrigger value='logs'>{t('logs')}</TabsTrigger>
-      </TabsList>
-      <TabsContent value='settings'>
-        <Table>
-          <TableBody>
-            <TableRow>
-              <TableCell>
-                <Label>{t('enable')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Switch
-                  checked={data?.enabled}
-                  onCheckedChange={(checked) => updateConfig('enabled', checked)}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('emailVerification')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('emailVerificationDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Switch
-                  checked={data?.config?.enable_verify}
-                  onCheckedChange={(checked) =>
-                    updateConfig('config', { ...data?.config, enable_verify: checked })
-                  }
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('emailSuffixWhitelist')}</Label>
-                <p className='text-muted-foreground text-xs'>
-                  {t('emailSuffixWhitelistDescription')}
-                </p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Switch
-                  checked={data?.config?.enable_domain_suffix}
-                  onCheckedChange={(checked) =>
-                    updateConfig('config', { ...data?.config, enable_domain_suffix: checked })
-                  }
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className='align-top'>
-                <Label>{t('whitelistSuffixes')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('whitelistSuffixesDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Textarea
-                  className='h-32'
-                  placeholder={t('whitelistSuffixesPlaceholder')}
-                  defaultValue={data?.config?.domain_suffix_list}
-                  onBlur={(e) =>
-                    updateConfig('config', { ...data?.config, domain_suffix_list: e.target.value })
-                  }
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('smtpServerAddress')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('smtpServerAddressDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  placeholder={t('inputPlaceholder')}
-                  value={data?.config?.platform_config?.host}
-                  onValueBlur={(value) =>
-                    updateConfig('config', {
-                      ...data?.config,
-                      platform_config: {
-                        ...data?.platform_config,
-                        host: value,
-                      },
-                    })
-                  }
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('smtpServerPort')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('smtpServerPortDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  placeholder={t('inputPlaceholder')}
-                  value={data?.config?.platform_config?.port}
-                  type='number'
-                  onValueBlur={(value) =>
-                    updateConfig('config', {
-                      ...data?.config,
-                      platform_config: {
-                        ...ref.current?.config?.platform_config,
-                        port: value,
-                      },
-                    })
-                  }
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('smtpEncryptionMethod')}</Label>
-                <p className='text-muted-foreground text-xs'>
-                  {t('smtpEncryptionMethodDescription')}
-                </p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Switch
-                  checked={data?.config?.platform_config?.ssl}
-                  onCheckedChange={(checked) =>
-                    updateConfig('config', {
-                      ...data?.config,
-                      platform_config: {
-                        ...ref.current?.config?.platform_config,
-                        ssl: checked,
-                      },
-                    })
-                  }
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('smtpAccount')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('smtpAccountDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  placeholder={t('inputPlaceholder')}
-                  value={data?.config?.platform_config?.user}
-                  onValueBlur={(value) =>
-                    updateConfig('config', {
-                      ...data?.config,
-                      platform_config: {
-                        ...ref.current?.config?.platform_config,
-                        user: value,
-                      },
-                    })
-                  }
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('smtpPassword')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('smtpPasswordDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  placeholder={t('inputPlaceholder')}
-                  value={data?.config?.platform_config?.pass}
-                  type='password'
-                  onValueBlur={(value) =>
-                    updateConfig('config', {
-                      ...data?.config,
-                      platform_config: {
-                        ...ref.current?.config?.platform_config,
-                        pass: value,
-                      },
-                    })
-                  }
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('senderAddress')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('senderAddressDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  placeholder={t('inputPlaceholder')}
-                  value={data?.config?.platform_config?.from}
-                  onValueBlur={(value) =>
-                    updateConfig('config', {
-                      ...data?.config,
-                      platform_config: {
-                        ...ref.current?.config?.platform_config,
-                        from: value,
-                      },
-                    })
-                  }
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('sendTestEmail')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('sendTestEmailDescription')}</p>
-              </TableCell>
-              <TableCell className='flex items-center gap-2 text-right'>
-                <EnhancedInput
-                  placeholder='test@example.com'
-                  value={email}
-                  type='email'
-                  onValueChange={(value) => setEmail(value as string)}
-                />
-                <Button
-                  disabled={!email || isFetching}
-                  onClick={async () => {
-                    if (!email) return;
-                    try {
-                      await testEmailSend({ email });
-                      toast.success(t('sendSuccess'));
-                    } catch {
-                      toast.error(t('sendFailure'));
-                    }
-                  }}
-                >
-                  {t('sendTestEmail')}
-                </Button>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </TabsContent>
-
-      <TabsContent value='template'>
-        <div className='grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'>
-          {['verify_email_template', 'expiration_email_template', 'maintenance_email_template'].map(
-            (templateKey) => (
-              <Card key={templateKey}>
-                <CardHeader>
-                  <CardTitle>{t(`${templateKey}`)}</CardTitle>
-                  <CardDescription>
-                    {t(`${templateKey}Description`, { after: '{{', before: '}}' })}
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <HTMLEditor
-                    placeholder={t('inputPlaceholder')}
-                    value={data?.config?.[templateKey] as string}
-                    onBlur={(value) =>
-                      updateConfig('config', {
-                        ...data?.config,
-                        [templateKey]: value,
-                      })
-                    }
-                  />
-                </CardContent>
-              </Card>
-            ),
-          )}
-        </div>
-      </TabsContent>
-
-      <TabsContent value='logs'>
-        <LogsTable type='email' />
-      </TabsContent>
-    </Tabs>
-  );
-}
--- a/apps/admin/app/dashboard/auth-control/facebook/page.tsx
+++ b/apps/admin/app/dashboard/auth-control/facebook/page.tsx
@ -1,92 +0,0 @@
-'use client';
-
-import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Page() {
-  const t = useTranslations('facebook');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getAuthMethodConfig', 'facebook'],
-    queryFn: async () => {
-      const { data } = await getAuthMethodConfig({
-        method: 'facebook',
-      });
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: keyof API.UpdateAuthMethodConfigRequest, value: unknown) {
-    try {
-      await updateAuthMethodConfig({
-        ...data,
-        [key]: value,
-      } as API.UpdateAuthMethodConfigRequest);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      toast.error(t('saveFailed'));
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('enable')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enabled}
-              onCheckedChange={(checked) => updateConfig('enabled', checked)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('clientId')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('clientIdDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder='1234567890123456'
-              value={data?.config?.client_id}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  client_id: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell className='align-top'>
-            <Label>{t('clientSecret')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('clientSecretDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder='1234567890abcdef1234567890abcdef'
-              value={data?.config?.client_secret}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  client_secret: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}
--- a/apps/admin/app/dashboard/auth-control/forms/apple-form.tsx
+++ b/apps/admin/app/dashboard/auth-control/forms/apple-form.tsx
@ -0,0 +1,269 @@
+'use client';
+
+import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Switch } from '@workspace/ui/components/switch';
+import { Textarea } from '@workspace/ui/components/textarea';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const appleSchema = z.object({
+  enabled: z.boolean(),
+  config: z
+    .object({
+      team_id: z.string().optional(),
+      key_id: z.string().optional(),
+      client_id: z.string().optional(),
+      client_secret: z.string().optional(),
+      redirect_url: z.string().optional(),
+    })
+    .optional(),
+});
+
+type AppleFormData = z.infer<typeof appleSchema>;
+
+export default function AppleForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'apple'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'apple',
+      });
+
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<AppleFormData>({
+    resolver: zodResolver(appleSchema),
+    defaultValues: {
+      enabled: false,
+      config: {
+        team_id: '',
+        key_id: '',
+        client_id: '',
+        client_secret: '',
+        redirect_url: '',
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset({
+        enabled: data.enabled || false,
+        config: {
+          team_id: data.config?.team_id || '',
+          key_id: data.config?.key_id || '',
+          client_id: data.config?.client_id || '',
+          client_secret: data.config?.client_secret || '',
+          redirect_url: data.config?.redirect_url || '',
+        },
+      });
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: AppleFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig({
+        ...data,
+        enabled: values.enabled,
+        config: {
+          ...data?.config,
+          ...values.config,
+        },
+      } as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <div className='flex items-center gap-3'>
+            <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+              <Icon icon='mdi:apple' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('apple.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('apple.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('apple.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form id='apple-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-2 pt-4'>
+              <FormField
+                control={form.control}
+                name='enabled'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('apple.enable')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('apple.enableDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.team_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('apple.teamId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='ABCDE1FGHI'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('apple.teamIdDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.key_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('apple.keyId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='ABC1234567'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('apple.keyIdDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.client_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('apple.clientId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='com.your.app.service'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('apple.clientIdDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.client_secret'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('apple.clientSecret')}</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        className='h-20'
+                        placeholder={`-----BEGIN PRIVATE KEY-----\nMIGTAgEA...\n-----END PRIVATE KEY-----`}
+                        value={field.value}
+                        onChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('apple.clientSecretDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.redirect_url'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('apple.redirectUri')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='https://your-domain.com'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('apple.redirectUriDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='apple-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/auth-control/forms/device-form.tsx
+++ b/apps/admin/app/dashboard/auth-control/forms/device-form.tsx
@ -0,0 +1,253 @@
+'use client';
+
+import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Switch } from '@workspace/ui/components/switch';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { uid } from 'radash';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const deviceSchema = z.object({
+  id: z.number(),
+  method: z.string(),
+  enabled: z.boolean(),
+  config: z
+    .object({
+      show_ads: z.boolean().optional(),
+      only_real_device: z.boolean().optional(),
+      enable_security: z.boolean().optional(),
+      security_secret: z.string().optional(),
+    })
+    .optional(),
+});
+
+type DeviceFormData = z.infer<typeof deviceSchema>;
+
+export default function DeviceForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'device'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'device',
+      });
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<DeviceFormData>({
+    resolver: zodResolver(deviceSchema),
+    defaultValues: {
+      id: 0,
+      method: 'device',
+      enabled: false,
+      config: {
+        show_ads: false,
+        only_real_device: false,
+        enable_security: false,
+        security_secret: '',
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: DeviceFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig(values as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function generateSecurityKey() {
+    const id = uid(32).toLowerCase();
+    const formatted = `${id.slice(0, 8)}-${id.slice(8, 12)}-${id.slice(12, 16)}-${id.slice(16, 20)}-${id.slice(20)}`;
+    form.setValue('config.security_secret', formatted);
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <div className='flex items-center gap-3'>
+            <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+              <Icon icon='mdi:devices' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('device.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('device.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('device.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='device-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='enabled'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('device.enable')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('device.enableDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.show_ads'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('device.showAds')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('device.showAdsDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.only_real_device'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('device.blockVirtualMachine')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('device.blockVirtualMachineDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.enable_security'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('device.enableSecurity')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('device.enableSecurityDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.security_secret'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('device.communicationKey')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='e.g., 12345678-1234-1234-1234-123456789abc'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        suffix={
+                          <div className='bg-muted flex h-9 items-center text-nowrap px-3'>
+                            <Icon
+                              icon='mdi:dice-multiple'
+                              onClick={generateSecurityKey}
+                              className='size-4 cursor-pointer'
+                            />
+                          </div>
+                        }
+                      />
+                    </FormControl>
+                    <FormDescription>{t('device.communicationKeyDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='device-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/auth-control/forms/email-settings-form.tsx
+++ b/apps/admin/app/dashboard/auth-control/forms/email-settings-form.tsx
@ -0,0 +1,627 @@
+'use client';
+
+import {
+  getAuthMethodConfig,
+  testEmailSend,
+  updateAuthMethodConfig,
+} from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Switch } from '@workspace/ui/components/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { Textarea } from '@workspace/ui/components/textarea';
+import { HTMLEditor } from '@workspace/ui/custom-components/editor';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const emailSettingsSchema = z.object({
+  id: z.number(),
+  method: z.string(),
+  enabled: z.boolean(),
+  config: z
+    .object({
+      enable_verify: z.boolean(),
+      enable_domain_suffix: z.boolean(),
+      domain_suffix_list: z.string().optional(),
+      verify_email_template: z.string().optional(),
+      expiration_email_template: z.string().optional(),
+      maintenance_email_template: z.string().optional(),
+      traffic_exceed_email_template: z.string().optional(),
+      platform: z.string(),
+      platform_config: z
+        .object({
+          host: z.string().optional(),
+          port: z.number().optional(),
+          ssl: z.boolean(),
+          user: z.string().optional(),
+          pass: z.string().optional(),
+          from: z.string().optional(),
+        })
+        .optional(),
+    })
+    .optional(),
+});
+
+type EmailSettingsFormData = z.infer<typeof emailSettingsSchema>;
+
+export default function EmailSettingsForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [testEmail, setTestEmail] = useState<string>();
+
+  const { data, refetch, isFetching } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'email'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'email',
+      });
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<EmailSettingsFormData>({
+    resolver: zodResolver(emailSettingsSchema),
+    defaultValues: {
+      id: 0,
+      method: 'email',
+      enabled: false,
+      config: {
+        enable_verify: false,
+        enable_domain_suffix: false,
+        domain_suffix_list: '',
+        verify_email_template: '',
+        expiration_email_template: '',
+        maintenance_email_template: '',
+        traffic_exceed_email_template: '',
+        platform: 'smtp',
+        platform_config: {
+          host: '',
+          port: 587,
+          ssl: false,
+          user: '',
+          pass: '',
+          from: '',
+        },
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: EmailSettingsFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig({
+        ...values,
+        config: {
+          ...values.config,
+          platform: 'smtp',
+        },
+      } as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <div className='flex items-center gap-3'>
+            <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+              <Icon icon='mdi:email-outline' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('email.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('email.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('email.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='email-settings-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <Tabs defaultValue='basic' className='space-y-2'>
+                <TabsList className='flex h-full w-full flex-wrap *:flex-auto md:flex-nowrap'>
+                  <TabsTrigger value='basic'>{t('email.basicSettings')}</TabsTrigger>
+                  <TabsTrigger value='smtp'>{t('email.smtpSettings')}</TabsTrigger>
+                  <TabsTrigger value='verify'>{t('email.verifyTemplate')}</TabsTrigger>
+                  <TabsTrigger value='expiration'>{t('email.expirationTemplate')}</TabsTrigger>
+                  <TabsTrigger value='maintenance'>{t('email.maintenanceTemplate')}</TabsTrigger>
+                  <TabsTrigger value='traffic'>{t('email.trafficTemplate')}</TabsTrigger>
+                </TabsList>
+
+                <TabsContent value='basic' className='space-y-2'>
+                  <FormField
+                    control={form.control}
+                    name='enabled'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.enable')}</FormLabel>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            className='float-end !mt-0'
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.enableDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.enable_verify'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.emailVerification')}</FormLabel>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            className='float-end !mt-0'
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.emailVerificationDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.enable_domain_suffix'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.emailSuffixWhitelist')}</FormLabel>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            className='float-end !mt-0'
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          {t('email.emailSuffixWhitelistDescription')}
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.domain_suffix_list'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.whitelistSuffixes')}</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            className='h-32'
+                            placeholder={t('email.whitelistSuffixesPlaceholder')}
+                            value={field.value}
+                            onChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.whitelistSuffixesDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+
+                <TabsContent value='smtp' className='space-y-2'>
+                  <FormField
+                    control={form.control}
+                    name='config.platform_config.host'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.smtpServerAddress')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.smtpServerAddressDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.platform_config.port'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.smtpServerPort')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            type='number'
+                            placeholder='587'
+                            value={field.value?.toString()}
+                            onValueChange={(value) => field.onChange(Number(value))}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.smtpServerPortDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.platform_config.ssl'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.smtpEncryptionMethod')}</FormLabel>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            className='float-end !mt-0'
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          {t('email.smtpEncryptionMethodDescription')}
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.platform_config.user'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.smtpAccount')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.smtpAccountDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.platform_config.pass'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.smtpPassword')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            type='password'
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.smtpPasswordDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='config.platform_config.from'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.senderAddress')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('email.senderAddressDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <div className='space-y-2 border-t pt-4'>
+                    <FormLabel>{t('email.sendTestEmail')}</FormLabel>
+                    <div className='flex items-center gap-2'>
+                      <EnhancedInput
+                        placeholder='test@example.com'
+                        type='email'
+                        value={testEmail}
+                        onValueChange={(value) => setTestEmail(value as string)}
+                      />
+                      <Button
+                        type='button'
+                        disabled={!testEmail || isFetching}
+                        onClick={async () => {
+                          if (!testEmail) return;
+                          try {
+                            await testEmailSend({ email: testEmail });
+                            toast.success(t('email.sendSuccess'));
+                          } catch {
+                            toast.error(t('email.sendFailure'));
+                          }
+                        }}
+                      >
+                        {t('email.sendTestEmail')}
+                      </Button>
+                    </div>
+                    <p className='text-muted-foreground text-xs'>
+                      {t('email.sendTestEmailDescription')}
+                    </p>
+                  </div>
+                </TabsContent>
+
+                <TabsContent value='verify' className='space-y-2'>
+                  <FormField
+                    control={form.control}
+                    name='config.verify_email_template'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.verifyEmailTemplate')}</FormLabel>
+                        <FormControl>
+                          <HTMLEditor
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onBlur={field.onChange}
+                          />
+                        </FormControl>
+                        <div className='mt-4 space-y-2 border-t pt-4'>
+                          <p className='text-muted-foreground text-sm font-medium'>
+                            {t('email.templateVariables.title')}
+                          </p>
+                          <div className='text-muted-foreground space-y-2 text-xs'>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.Type}}'}
+                              </code>
+                              <span>{t('email.templateVariables.type.description')}</span>
+                            </div>
+                            <div className='pl-6 text-orange-600 dark:text-orange-400'>
+                              💡 {t('email.templateVariables.type.conditionalSyntax')}
+                              <br />
+                              <code className='rounded bg-orange-50 px-1 text-xs dark:bg-orange-900/20'>
+                                {'{{if eq .Type 1}}...{{else}}...{{end}}'}
+                              </code>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteLogo}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteLogo.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteName}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteName.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.Expire}}'}
+                              </code>
+                              <span>{t('email.templateVariables.expire.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.Code}}'}
+                              </code>
+                              <span>{t('email.templateVariables.code.description')}</span>
+                            </div>
+                          </div>
+                        </div>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+
+                <TabsContent value='expiration' className='space-y-2'>
+                  <FormField
+                    control={form.control}
+                    name='config.expiration_email_template'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.expirationEmailTemplate')}</FormLabel>
+                        <FormControl>
+                          <HTMLEditor
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onBlur={field.onChange}
+                          />
+                        </FormControl>
+                        <div className='mt-4 space-y-2 border-t pt-4'>
+                          <p className='text-muted-foreground text-sm font-medium'>
+                            {t('email.templateVariables.title')}
+                          </p>
+                          <div className='text-muted-foreground space-y-2 text-xs'>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteLogo}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteLogo.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteName}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteName.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.ExpireDate}}'}
+                              </code>
+                              <span>{t('email.templateVariables.expireDate.description')}</span>
+                            </div>
+                          </div>
+                        </div>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+
+                <TabsContent value='maintenance' className='space-y-2'>
+                  <FormField
+                    control={form.control}
+                    name='config.maintenance_email_template'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.maintenanceEmailTemplate')}</FormLabel>
+                        <FormControl>
+                          <HTMLEditor
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onBlur={field.onChange}
+                          />
+                        </FormControl>
+                        <div className='mt-4 space-y-2 border-t pt-4'>
+                          <p className='text-muted-foreground text-sm font-medium'>
+                            {t('email.templateVariables.title')}
+                          </p>
+                          <div className='text-muted-foreground space-y-2 text-xs'>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteLogo}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteLogo.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteName}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteName.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.MaintenanceDate}}'}
+                              </code>
+                              <span>
+                                {t('email.templateVariables.maintenanceDate.description')}
+                              </span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.MaintenanceTime}}'}
+                              </code>
+                              <span>
+                                {t('email.templateVariables.maintenanceTime.description')}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+
+                <TabsContent value='traffic' className='space-y-2'>
+                  <FormField
+                    control={form.control}
+                    name='config.traffic_exceed_email_template'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('email.trafficExceedEmailTemplate')}</FormLabel>
+                        <FormControl>
+                          <HTMLEditor
+                            placeholder={t('email.inputPlaceholder')}
+                            value={field.value}
+                            onBlur={field.onChange}
+                          />
+                        </FormControl>
+                        <div className='mt-4 space-y-2 border-t pt-4'>
+                          <p className='text-muted-foreground text-sm font-medium'>
+                            {t('email.templateVariables.title')}
+                          </p>
+                          <div className='text-muted-foreground space-y-2 text-xs'>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteLogo}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteLogo.description')}</span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <code className='bg-muted text-foreground rounded px-1.5 py-0.5 font-mono'>
+                                {'{{.SiteName}}'}
+                              </code>
+                              <span>{t('email.templateVariables.siteName.description')}</span>
+                            </div>
+                          </div>
+                        </div>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+              </Tabs>
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='email-settings-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/auth-control/forms/facebook-form.tsx
+++ b/apps/admin/app/dashboard/auth-control/forms/facebook-form.tsx
@ -0,0 +1,198 @@
+'use client';
+
+import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Switch } from '@workspace/ui/components/switch';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const facebookSchema = z.object({
+  enabled: z.boolean(),
+  client_id: z.string().optional(),
+  client_secret: z.string().optional(),
+});
+
+type FacebookFormData = z.infer<typeof facebookSchema>;
+
+export default function FacebookForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch, isFetching } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'facebook'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'facebook',
+      });
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<FacebookFormData>({
+    resolver: zodResolver(facebookSchema),
+    defaultValues: {
+      enabled: false,
+      client_id: '',
+      client_secret: '',
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset({
+        enabled: data.enabled || false,
+        client_id: data.config?.client_id || '',
+        client_secret: data.config?.client_secret || '',
+      });
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: FacebookFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig({
+        ...data,
+        enabled: values.enabled,
+        config: {
+          ...data?.config,
+          client_id: values.client_id,
+          client_secret: values.client_secret,
+        },
+      } as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <div className='flex items-center gap-3'>
+            <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+              <Icon icon='mdi:facebook' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('facebook.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('facebook.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('facebook.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='facebook-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='enabled'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('facebook.enable')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('facebook.enableDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='client_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('facebook.clientId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='1234567890123456'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('facebook.clientIdDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='client_secret'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('facebook.clientSecret')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='1234567890abcdef1234567890abcdef'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        type='password'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('facebook.clientSecretDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='facebook-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/auth-control/forms/github-form.tsx
+++ b/apps/admin/app/dashboard/auth-control/forms/github-form.tsx
@ -0,0 +1,199 @@
+'use client';
+
+import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Switch } from '@workspace/ui/components/switch';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const githubSchema = z.object({
+  enabled: z.boolean(),
+  client_id: z.string().optional(),
+  client_secret: z.string().optional(),
+});
+
+type GithubFormData = z.infer<typeof githubSchema>;
+
+export default function GithubForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'github'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'github',
+      });
+
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<GithubFormData>({
+    resolver: zodResolver(githubSchema),
+    defaultValues: {
+      enabled: false,
+      client_id: '',
+      client_secret: '',
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset({
+        enabled: data.enabled || false,
+        client_id: data.config?.client_id || '',
+        client_secret: data.config?.client_secret || '',
+      });
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: GithubFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig({
+        ...data,
+        enabled: values.enabled,
+        config: {
+          ...data?.config,
+          client_id: values.client_id,
+          client_secret: values.client_secret,
+        },
+      } as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <div className='flex items-center gap-3'>
+            <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+              <Icon icon='mdi:github' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('github.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('github.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('github.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='github-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='enabled'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('github.enable')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('github.enableDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='client_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('github.clientId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='e.g., Iv1.1234567890abcdef'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('github.clientIdDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='client_secret'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('github.clientSecret')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='e.g., 1234567890abcdef1234567890abcdef12345678'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        type='password'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('github.clientSecretDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='github-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/auth-control/forms/google-form.tsx
+++ b/apps/admin/app/dashboard/auth-control/forms/google-form.tsx
@ -0,0 +1,196 @@
+'use client';
+
+import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Switch } from '@workspace/ui/components/switch';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const googleSchema = z.object({
+  id: z.number(),
+  method: z.string().default('google').optional(),
+  enabled: z.boolean().default(false).optional(),
+  config: z
+    .object({
+      client_id: z.string().optional(),
+      client_secret: z.string().optional(),
+    })
+    .optional(),
+});
+
+type GoogleFormData = z.infer<typeof googleSchema>;
+
+export default function GoogleForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch, isFetching } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'google'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'google',
+      });
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<GoogleFormData>({
+    resolver: zodResolver(googleSchema),
+    defaultValues: {
+      id: 0,
+      method: 'google',
+      enabled: false,
+      config: {
+        client_id: '',
+        client_secret: '',
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: GoogleFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig(values as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <div className='flex items-center gap-3'>
+            <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+              <Icon icon='mdi:google' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('google.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('google.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('google.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='google-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='enabled'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('google.enable')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('google.enableDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.client_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('google.clientId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='123456789-abc123def456.apps.googleusercontent.com'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('google.clientIdDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.client_secret'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('google.clientSecret')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='GOCSPX-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        type='password'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('google.clientSecretDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='google-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/auth-control/forms/phone-settings-form.tsx
+++ b/apps/admin/app/dashboard/auth-control/forms/phone-settings-form.tsx
@ -0,0 +1,505 @@
+'use client';
+
+import {
+  getAuthMethodConfig,
+  getSmsPlatform,
+  testSmsSend,
+  updateAuthMethodConfig,
+} from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@workspace/ui/components/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Switch } from '@workspace/ui/components/switch';
+import { Textarea } from '@workspace/ui/components/textarea';
+import { AreaCodeSelect } from '@workspace/ui/custom-components/area-code-select';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import TagInput from '@workspace/ui/custom-components/tag-input';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const phoneSettingsSchema = z.object({
+  id: z.number(),
+  method: z.string(),
+  enabled: z.boolean(),
+  config: z
+    .object({
+      enable_whitelist: z.boolean().optional(),
+      whitelist: z.array(z.string()).optional(),
+      platform: z.string().optional(),
+      platform_config: z
+        .object({
+          access: z.string().optional(),
+          endpoint: z.string().optional(),
+          secret: z.string().optional(),
+          template_code: z.string().optional(),
+          sign_name: z.string().optional(),
+          phone_number: z.string().optional(),
+          template: z.string().optional(),
+        })
+        .optional(),
+    })
+    .optional(),
+});
+
+type PhoneSettingsFormData = z.infer<typeof phoneSettingsSchema>;
+
+export default function PhoneSettingsForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [testParams, setTestParams] = useState<API.TestSmsSendRequest>({
+    telephone: '',
+    area_code: '1',
+  });
+
+  const { data, refetch, isFetching } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'mobile'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'mobile',
+      });
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const { data: platforms } = useQuery({
+    queryKey: ['getSmsPlatform'],
+    queryFn: async () => {
+      const { data } = await getSmsPlatform();
+      return data.data?.list;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<PhoneSettingsFormData>({
+    resolver: zodResolver(phoneSettingsSchema),
+    defaultValues: {
+      id: 0,
+      method: 'mobile',
+      enabled: false,
+      config: {
+        enable_whitelist: false,
+        whitelist: [],
+        platform: '',
+        platform_config: {
+          access: '',
+          endpoint: '',
+          secret: '',
+          template_code: 'code',
+          sign_name: '',
+          phone_number: '',
+          template: '',
+        },
+      },
+    },
+  });
+
+  const selectedPlatform = platforms?.find(
+    (platform) => platform.platform === form.watch('config.platform'),
+  );
+  const { platform_url, platform_field_description: platformConfig } = selectedPlatform ?? {};
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: PhoneSettingsFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig(values as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <div className='flex items-center gap-3'>
+            <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+              <Icon icon='mdi:phone-settings' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('phone.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('phone.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('phone.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='phone-settings-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='enabled'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('phone.enable')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        disabled={isFetching}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('phone.enableTip')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.enable_whitelist'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('phone.whitelistValidation')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('phone.whitelistValidationTip')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.whitelist'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('phone.whitelistAreaCode')}</FormLabel>
+                    <FormControl>
+                      <TagInput
+                        placeholder='1, 852, 886, 888'
+                        value={field.value}
+                        onChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('phone.whitelistAreaCodeTip')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.platform'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('phone.platform')}</FormLabel>
+                    <div className='flex items-center gap-1'>
+                      <FormControl>
+                        <Select
+                          value={field.value}
+                          onValueChange={field.onChange}
+                          disabled={isFetching}
+                        >
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {platforms?.map((item) => (
+                              <SelectItem key={item.platform} value={item.platform}>
+                                {item.platform}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                      {platform_url && (
+                        <Button size='sm' asChild>
+                          <Link href={platform_url} target='_blank'>
+                            {t('phone.applyPlatform')}
+                          </Link>
+                        </Button>
+                      )}
+                    </div>
+                    <FormDescription>{t('phone.platformTip')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='config.platform_config.access'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('phone.accessLabel')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        disabled={isFetching}
+                        placeholder={t('phone.platformConfigTip', { key: platformConfig?.access })}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t('phone.platformConfigTip', { key: platformConfig?.access })}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {platformConfig?.endpoint && (
+                <FormField
+                  control={form.control}
+                  name='config.platform_config.endpoint'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('phone.endpointLabel')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          value={field.value}
+                          onValueChange={field.onChange}
+                          disabled={isFetching}
+                          placeholder={t('phone.platformConfigTip', {
+                            key: platformConfig?.endpoint,
+                          })}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        {t('phone.platformConfigTip', { key: platformConfig?.endpoint })}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              <FormField
+                control={form.control}
+                name='config.platform_config.secret'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('phone.secretLabel')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        type='password'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        disabled={isFetching}
+                        placeholder={t('phone.platformConfigTip', { key: platformConfig?.secret })}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t('phone.platformConfigTip', { key: platformConfig?.secret })}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {platformConfig?.template_code && (
+                <FormField
+                  control={form.control}
+                  name='config.platform_config.template_code'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('phone.templateCodeLabel')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          value={field.value}
+                          onValueChange={field.onChange}
+                          disabled={isFetching}
+                          placeholder={t('phone.platformConfigTip', {
+                            key: platformConfig?.template_code,
+                          })}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        {t('phone.platformConfigTip', { key: platformConfig?.template_code })}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              {platformConfig?.sign_name && (
+                <FormField
+                  control={form.control}
+                  name='config.platform_config.sign_name'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('phone.signNameLabel')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          value={field.value}
+                          onValueChange={field.onChange}
+                          disabled={isFetching}
+                          placeholder={t('phone.platformConfigTip', {
+                            key: platformConfig?.sign_name,
+                          })}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        {t('phone.platformConfigTip', { key: platformConfig?.sign_name })}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              {platformConfig?.phone_number && (
+                <FormField
+                  control={form.control}
+                  name='config.platform_config.phone_number'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('phone.phoneNumberLabel')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          value={field.value}
+                          onValueChange={field.onChange}
+                          disabled={isFetching}
+                          placeholder={t('phone.platformConfigTip', {
+                            key: platformConfig?.phone_number,
+                          })}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        {t('phone.platformConfigTip', { key: platformConfig?.phone_number })}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              {platformConfig?.code_variable && (
+                <FormField
+                  control={form.control}
+                  name='config.platform_config.template'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('phone.template')}</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          value={field.value}
+                          onChange={field.onChange}
+                          disabled={isFetching}
+                          placeholder={t('phone.placeholders.template', {
+                            code: platformConfig?.code_variable,
+                          })}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        {t('phone.templateTip', { code: platformConfig?.code_variable })}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              <div className='space-y-4 border-t pt-4'>
+                <div>
+                  <FormLabel>{t('phone.testSms')}</FormLabel>
+                  <p className='text-muted-foreground mb-3 text-sm'>{t('phone.testSmsTip')}</p>
+                  <div className='flex items-center gap-2'>
+                    <AreaCodeSelect
+                      value={testParams.area_code}
+                      onChange={(value) => {
+                        if (value.phone) {
+                          setTestParams((prev) => ({ ...prev, area_code: value.phone! }));
+                        }
+                      }}
+                    />
+                    <EnhancedInput
+                      placeholder={t('phone.testSmsPhone')}
+                      value={testParams.telephone}
+                      onValueChange={(value) => {
+                        setTestParams((prev) => ({ ...prev, telephone: value as string }));
+                      }}
+                    />
+                    <Button
+                      type='button'
+                      disabled={!testParams.telephone || !testParams.area_code || isFetching}
+                      onClick={async () => {
+                        if (isFetching || !testParams.telephone || !testParams.area_code) return;
+                        try {
+                          await testSmsSend(testParams);
+                          toast.success(t('phone.sendSuccess'));
+                        } catch {
+                          toast.error(t('phone.sendFailed'));
+                        }
+                      }}
+                    >
+                      {t('phone.testSms')}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='phone-settings-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/auth-control/forms/telegram-form.tsx
+++ b/apps/admin/app/dashboard/auth-control/forms/telegram-form.tsx
@ -0,0 +1,199 @@
+'use client';
+
+import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Switch } from '@workspace/ui/components/switch';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const telegramSchema = z.object({
+  enabled: z.boolean(),
+  bot: z.string().optional(),
+  bot_token: z.string().optional(),
+});
+
+type TelegramFormData = z.infer<typeof telegramSchema>;
+
+export default function TelegramForm() {
+  const t = useTranslations('auth-control');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getAuthMethodConfig', 'telegram'],
+    queryFn: async () => {
+      const { data } = await getAuthMethodConfig({
+        method: 'telegram',
+      });
+
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<TelegramFormData>({
+    resolver: zodResolver(telegramSchema),
+    defaultValues: {
+      enabled: false,
+      bot: '',
+      bot_token: '',
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset({
+        enabled: data.enabled || false,
+        bot: data.config?.bot || '',
+        bot_token: data.config?.bot_token || '',
+      });
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: TelegramFormData) {
+    setLoading(true);
+    try {
+      await updateAuthMethodConfig({
+        ...data,
+        enabled: values.enabled,
+        config: {
+          ...data?.config,
+          bot: values.bot,
+          bot_token: values.bot_token,
+        },
+      } as API.UpdateAuthMethodConfigRequest);
+      toast.success(t('common.saveSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('common.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <div className='flex items-center gap-3'>
+            <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+              <Icon icon='mdi:telegram' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('telegram.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('telegram.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('telegram.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='telegram-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='enabled'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('telegram.enable')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('telegram.enableDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='bot'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('telegram.clientId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='6123456789'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('telegram.clientIdDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='bot_token'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('telegram.clientSecret')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder='6123456789:AAHn_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        type='password'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('telegram.clientSecretDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='telegram-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/auth-control/general/invite.tsx
+++ b/apps/admin/app/dashboard/auth-control/general/invite.tsx
@ -1,103 +0,0 @@
-'use client';
-
-import { getInviteConfig, updateInviteConfig } from '@/services/admin/system';
-import { useQuery } from '@tanstack/react-query';
-import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
-import { Label } from '@workspace/ui/components/label';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export function Invite() {
-  const t = useTranslations('auth-control.invite');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getInviteConfig'],
-    queryFn: async () => {
-      const { data } = await getInviteConfig();
-
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateInviteConfig({
-        ...data,
-        [key]: value,
-      } as API.InviteConfig);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('inviteSettings')}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableBody>
-            <TableRow>
-              <TableCell>
-                <Label>{t('enableForcedInvite')}</Label>
-                <p className='text-muted-foreground text-xs'>
-                  {t('enableForcedInviteDescription')}
-                </p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Switch
-                  checked={data?.forced_invite}
-                  onCheckedChange={(checked) => {
-                    updateConfig('forced_invite', checked);
-                  }}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('inviteCommissionPercentage')}</Label>
-                <p className='text-muted-foreground text-xs'>
-                  {t('inviteCommissionPercentageDescription')}
-                </p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  placeholder={t('inputPlaceholder')}
-                  value={data?.referral_percentage}
-                  type='number'
-                  min={0}
-                  max={100}
-                  suffix='%'
-                  onValueBlur={(value) => updateConfig('referral_percentage', value)}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('commissionFirstTimeOnly')}</Label>
-                <p className='text-muted-foreground text-xs'>
-                  {t('commissionFirstTimeOnlyDescription')}
-                </p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Switch
-                  checked={data?.only_first_purchase}
-                  onCheckedChange={(checked) => {
-                    updateConfig('only_first_purchase', checked);
-                  }}
-                />
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  );
-}
--- a/apps/admin/app/dashboard/auth-control/general/page.tsx
+++ b/apps/admin/app/dashboard/auth-control/general/page.tsx
@ -1,17 +0,0 @@
-'use client';
-
-import { Invite } from './invite';
-import { Register } from './register';
-import { Verify } from './verify';
-import { VerifyCode } from './verify-code';
-
-export default function Page() {
-  return (
-    <div className='space-y-3'>
-      <Invite />
-      <Register />
-      <VerifyCode />
-      <Verify />
-    </div>
-  );
-}
--- a/apps/admin/app/dashboard/auth-control/general/register.tsx
+++ b/apps/admin/app/dashboard/auth-control/general/register.tsx
@ -1,201 +0,0 @@
-'use client';
-
-import { getSubscribeList } from '@/services/admin/subscribe';
-import { getRegisterConfig, updateRegisterConfig } from '@/services/admin/system';
-import { useQuery } from '@tanstack/react-query';
-import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
-import { Label } from '@workspace/ui/components/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/ui/components/select';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { Combobox } from '@workspace/ui/custom-components/combobox';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export function Register() {
-  const t = useTranslations('auth-control.register');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getRegisterConfig'],
-    queryFn: async () => {
-      const { data } = await getRegisterConfig();
-
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    await updateRegisterConfig({
-      ...data,
-      [key]: value,
-    } as API.RegisterConfig);
-    toast.success(t('saveSuccess'));
-    refetch();
-  }
-
-  const { data: subscribe } = useQuery({
-    queryKey: ['getSubscribeList', 'all'],
-    queryFn: async () => {
-      const { data } = await getSubscribeList({
-        page: 1,
-        size: 9999,
-      });
-      return data.data?.list as API.Subscribe[];
-    },
-  });
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('registerSettings')}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableBody>
-            <TableRow>
-              <TableCell>
-                <Label>{t('stopNewUserRegistration')}</Label>
-                <p className='text-muted-foreground text-xs'>
-                  {t('stopNewUserRegistrationDescription')}
-                </p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Switch
-                  checked={data?.stop_register}
-                  onCheckedChange={(checked) => {
-                    updateConfig('stop_register', checked);
-                  }}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('ipRegistrationLimit')}</Label>
-                <p className='text-muted-foreground text-xs'>
-                  {t('ipRegistrationLimitDescription')}
-                </p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Switch
-                  checked={data?.enable_ip_register_limit}
-                  onCheckedChange={(checked) => {
-                    updateConfig('enable_ip_register_limit', checked);
-                  }}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('registrationLimitCount')}</Label>
-                <p className='text-muted-foreground text-xs'>
-                  {t('registrationLimitCountDescription')}
-                </p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  type='number'
-                  min={0}
-                  value={data?.ip_register_limit}
-                  onValueBlur={(value) => updateConfig('ip_register_limit', value)}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('penaltyTime')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('penaltyTimeDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  type='number'
-                  min={0}
-                  value={data?.ip_register_limit_duration}
-                  onValueBlur={(value) => updateConfig('ip_register_limit_duration', value)}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('trialRegistration')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('trialRegistrationDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Switch
-                  checked={data?.enable_trial}
-                  onCheckedChange={(checked) => {
-                    updateConfig('enable_trial', checked);
-                  }}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('trialSubscribePlan')}</Label>
-                <p className='text-muted-foreground text-xs'>
-                  {t('trialSubscribePlanDescription')}
-                </p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  placeholder={t('trialDuration')}
-                  type='number'
-                  min={0}
-                  value={data?.trial_time}
-                  onValueBlur={(value) => updateConfig('trial_time', value)}
-                  prefix={
-                    <Select
-                      value={String(data?.trial_subscribe)}
-                      onValueChange={(value) => updateConfig('trial_subscribe', Number(value))}
-                    >
-                      <SelectTrigger className='bg-secondary rounded-r-none'>
-                        {data?.trial_subscribe ? (
-                          <SelectValue placeholder='Select Subscribe' />
-                        ) : (
-                          'Select Subscribe'
-                        )}
-                      </SelectTrigger>
-                      <SelectContent>
-                        {subscribe?.map((item) => (
-                          <SelectItem key={item.id} value={String(item.id)}>
-                            {item.name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  }
-                  suffix={
-                    <Combobox
-                      className='bg-secondary rounded-l-none'
-                      value={data?.trial_time_unit}
-                      onChange={(value) => {
-                        if (value) {
-                          updateConfig('trial_time_unit', value);
-                        }
-                      }}
-                      options={[
-                        { label: t('noLimit'), value: 'NoLimit' },
-                        { label: t('year'), value: 'Year' },
-                        { label: t('month'), value: 'Month' },
-                        { label: t('day'), value: 'Day' },
-                        { label: t('hour'), value: 'Hour' },
-                        { label: t('minute'), value: 'Minute' },
-                      ]}
-                    />
-                  }
-                />
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  );
-}
--- a/apps/admin/app/dashboard/auth-control/general/verify-code.tsx
+++ b/apps/admin/app/dashboard/auth-control/general/verify-code.tsx
@ -1,95 +0,0 @@
-'use client';
-
-import { getVerifyCodeConfig, updateVerifyCodeConfig } from '@/services/admin/system';
-import { useQuery } from '@tanstack/react-query';
-import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
-import { Label } from '@workspace/ui/components/label';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export function VerifyCode() {
-  const t = useTranslations('auth-control.verify-code');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getVerifyCodeConfig'],
-    queryFn: async () => {
-      const { data } = await getVerifyCodeConfig();
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateVerifyCodeConfig({
-        ...data,
-        [key]: value,
-      } as API.VerifyCodeConfig);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Card className='mb-6'>
-      <CardHeader>
-        <CardTitle>{t('verifyCodeSettings')}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableBody>
-            <TableRow>
-              <TableCell>
-                <Label>{t('expireTime')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('expireTimeDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  type='number'
-                  placeholder='300'
-                  value={data?.verify_code_expire_time}
-                  onValueBlur={(value) => updateConfig('verify_code_expire_time', Number(value))}
-                  suffix={t('second')}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('interval')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('intervalDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  type='number'
-                  placeholder='60'
-                  value={data?.verify_code_interval}
-                  onValueBlur={(value) => updateConfig('verify_code_interval', Number(value))}
-                  suffix={t('second')}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('dailyLimit')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('dailyLimitDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  type='number'
-                  placeholder='15'
-                  value={data?.verify_code_limit}
-                  onValueBlur={(value) => updateConfig('verify_code_limit', Number(value))}
-                  suffix={t('times')}
-                />
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  );
-}
--- a/apps/admin/app/dashboard/auth-control/general/verify.tsx
+++ b/apps/admin/app/dashboard/auth-control/general/verify.tsx
@ -1,125 +0,0 @@
-'use client';
-
-import { getVerifyConfig, updateVerifyConfig } from '@/services/admin/system';
-import { useQuery } from '@tanstack/react-query';
-import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
-import { Label } from '@workspace/ui/components/label';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export function Verify() {
-  const t = useTranslations('auth-control.verify');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getVerifyConfig'],
-    queryFn: async () => {
-      const { data } = await getVerifyConfig();
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateVerifyConfig({
-        ...data,
-        [key]: value,
-      } as API.VerifyConfig);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Card className='mb-6'>
-      <CardHeader>
-        <CardTitle>{t('verifySettings')}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableBody>
-            <TableRow>
-              <TableCell>
-                <Label>Turnstile Site Key</Label>
-                <p className='text-muted-foreground text-xs'>{t('turnstileSiteKeyDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  placeholder={t('inputPlaceholder')}
-                  value={data?.turnstile_site_key}
-                  onValueBlur={(value) => updateConfig('turnstile_site_key', value)}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>Turnstile Site Secret</Label>
-                <p className='text-muted-foreground text-xs'>{t('turnstileSecretDescription')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  placeholder={t('inputPlaceholder')}
-                  value={data?.turnstile_secret}
-                  onValueBlur={(value) => updateConfig('turnstile_secret', value)}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('registrationVerificationCode')}</Label>
-                <p className='text-muted-foreground text-xs'>
-                  {t('registrationVerificationCodeDescription')}
-                </p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Switch
-                  checked={data?.enable_register_verify}
-                  onCheckedChange={(checked) => {
-                    updateConfig('enable_register_verify', checked);
-                  }}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('loginVerificationCode')}</Label>
-                <p className='text-muted-foreground text-xs'>
-                  {t('loginVerificationCodeDescription')}
-                </p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Switch
-                  checked={data?.enable_login_verify}
-                  onCheckedChange={(checked) => {
-                    updateConfig('enable_login_verify', checked);
-                  }}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('resetPasswordVerificationCode')}</Label>
-                <p className='text-muted-foreground text-xs'>
-                  {t('resetPasswordVerificationCodeDescription')}
-                </p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Switch
-                  checked={data?.enable_reset_password_verify}
-                  onCheckedChange={(checked) => {
-                    updateConfig('enable_reset_password_verify', checked);
-                  }}
-                />
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  );
-}
--- a/apps/admin/app/dashboard/auth-control/github/page.tsx
+++ b/apps/admin/app/dashboard/auth-control/github/page.tsx
@ -1,91 +0,0 @@
-'use client';
-
-import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Page() {
-  const t = useTranslations('github');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getAuthMethodConfig', 'github'],
-    queryFn: async () => {
-      const { data } = await getAuthMethodConfig({
-        method: 'github',
-      });
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: keyof API.UpdateAuthMethodConfigRequest, value: unknown) {
-    try {
-      await updateAuthMethodConfig({
-        ...data,
-        [key]: value,
-      } as API.UpdateAuthMethodConfigRequest);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      toast.error(t('saveFailed'));
-    }
-  }
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('enable')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enabled}
-              onCheckedChange={(checked) => updateConfig('enabled', checked)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('clientId')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('clientIdDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder='e.g., Iv1.1234567890abcdef'
-              value={data?.config?.client_id}
-              onValueBlur={(value) =>
-                updateConfig('config', {
-                  ...data?.config,
-                  client_id: value,
-                })
-              }
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell className='align-top'>
-            <Label>{t('clientSecret')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('clientSecretDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder='e.g., 1234567890abcdef1234567890abcdef12345678'
-              value={data?.config?.client_secret}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  client_secret: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}
--- a/apps/admin/app/dashboard/auth-control/google/page.tsx
+++ b/apps/admin/app/dashboard/auth-control/google/page.tsx
@ -1,92 +0,0 @@
-'use client';
-
-import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Page() {
-  const t = useTranslations('google');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getAuthMethodConfig', 'google'],
-    queryFn: async () => {
-      const { data } = await getAuthMethodConfig({
-        method: 'google',
-      });
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: keyof API.UpdateAuthMethodConfigRequest, value: unknown) {
-    try {
-      await updateAuthMethodConfig({
-        ...data,
-        [key]: value,
-      } as API.UpdateAuthMethodConfigRequest);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      toast.error(t('saveFailed'));
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('enable')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enabled}
-              onCheckedChange={(checked) => updateConfig('enabled', checked)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('clientId')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('clientIdDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder='123456789-abc123def456.apps.googleusercontent.com'
-              value={data?.config?.client_id}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  client_id: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell className='align-top'>
-            <Label>{t('clientSecret')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('clientSecretDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder='GOCSPX-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
-              value={data?.config?.client_secret}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  client_secret: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}
--- a/apps/admin/app/dashboard/auth-control/layout.tsx
+++ b/apps/admin/app/dashboard/auth-control/layout.tsx
@ -1,29 +0,0 @@
-'use client';
-
-import { AuthControl } from '@/config/navs';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-
-interface AuthControlLayoutProps {
-  children: React.ReactNode;
-}
-
-export default function AuthControlLayout({ children }: Readonly<AuthControlLayoutProps>) {
-  const pathname = usePathname();
-  const t = useTranslations('menu');
-  if (!pathname) return null;
-  return (
-    <Tabs value={pathname}>
-      <TabsList className='h-full flex-wrap'>
-        {AuthControl.map((item) => (
-          <TabsTrigger key={item.url} value={item.url} asChild>
-            <Link href={item.url}>{t(item.title)}</Link>
-          </TabsTrigger>
-        ))}
-      </TabsList>
-      <TabsContent value={pathname}>{children}</TabsContent>
-    </Tabs>
-  );
-}
--- a/apps/admin/app/dashboard/auth-control/log/index.tsx
+++ b/apps/admin/app/dashboard/auth-control/log/index.tsx
@ -1,108 +0,0 @@
-import { ProTable, ProTableActions } from '@/components/pro-table';
-import { getMessageLogList } from '@/services/admin/log';
-import { Badge } from '@workspace/ui/components/badge';
-import { formatDate } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { useRef } from 'react';
-
-export function LogsTable({ type }: { type: 'email' | 'mobile' }) {
-  const t = useTranslations('auth-control.log');
-  const ref = useRef<ProTableActions>(null);
-
-  return (
-    <ProTable<
-      API.MessageLog,
-      {
-        platform?: string;
-        to?: string;
-        subject?: string;
-        content?: string;
-        status?: number;
-      }
-    >
-      action={ref}
-      header={{
-        title: t(`${type}Log`),
-      }}
-      columns={[
-        {
-          accessorKey: 'id',
-          header: 'ID',
-        },
-        {
-          accessorKey: 'platform',
-          header: t('platform'),
-        },
-        {
-          accessorKey: 'to',
-          header: t('to'),
-        },
-        {
-          accessorKey: 'subject',
-          header: t('subject'),
-        },
-        {
-          accessorKey: 'content',
-          header: t('content'),
-        },
-        {
-          accessorKey: 'status',
-          header: t('status'),
-          cell: ({ row }) => {
-            const status = row.getValue('status');
-            const text = status === 1 ? t('sendSuccess') : t('sendFailed');
-            return <Badge variant={status === 1 ? 'default' : 'destructive'}>{text}</Badge>;
-          },
-        },
-        {
-          accessorKey: 'created_at',
-          header: t('createdAt'),
-          cell: ({ row }) => formatDate(row.getValue('created_at')),
-        },
-        {
-          accessorKey: 'updated_at',
-          header: t('updatedAt'),
-          cell: ({ row }) => formatDate(row.getValue('updated_at')),
-        },
-      ]}
-      params={[
-        // {
-        //   key: 'platform',
-        //   placeholder: t('platform'),
-        // },
-        {
-          key: 'to',
-          placeholder: t('to'),
-        },
-        {
-          key: 'subject',
-          placeholder: t('subject'),
-        },
-        {
-          key: 'content',
-          placeholder: t('content'),
-        },
-        {
-          key: 'status',
-          placeholder: t('status'),
-          options: [
-            { label: t('sendSuccess'), value: '1' },
-            { label: t('sendFailed'), value: '0' },
-          ],
-        },
-      ]}
-      request={async (pagination, filter) => {
-        const { data } = await getMessageLogList({
-          ...pagination,
-          ...filter,
-          status: filter.status === undefined ? undefined : Number(filter.status),
-          type: type,
-        });
-        return {
-          list: data.data?.list || [],
-          total: data.data?.total || 0,
-        };
-      }}
-    />
-  );
-}
--- a/apps/admin/app/dashboard/auth-control/page.tsx
+++ b/apps/admin/app/dashboard/auth-control/page.tsx
@ -1,5 +1,61 @@
-import { redirect } from 'next/navigation';
+'use client';
+
+import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
+import { useTranslations } from 'next-intl';
+import AppleForm from './forms/apple-form';
+import DeviceForm from './forms/device-form';
+import EmailSettingsForm from './forms/email-settings-form';
+import FacebookForm from './forms/facebook-form';
+import GithubForm from './forms/github-form';
+import GoogleForm from './forms/google-form';
+import PhoneSettingsForm from './forms/phone-settings-form';
+import TelegramForm from './forms/telegram-form';

 export default function Page() {
-  return redirect('/dashboard/auth-control/general');
+  const t = useTranslations('auth-control');
+
+  const formSections = [
+    {
+      title: t('communicationMethods'),
+      forms: [{ component: EmailSettingsForm }, { component: PhoneSettingsForm }],
+    },
+    {
+      title: t('socialAuthMethods'),
+      forms: [
+        { component: AppleForm },
+        { component: GoogleForm },
+        { component: FacebookForm },
+        { component: GithubForm },
+        { component: TelegramForm },
+      ],
+    },
+    {
+      title: t('deviceAuthMethods'),
+      forms: [{ component: DeviceForm }],
+    },
+  ];
+
+  return (
+    <div className='space-y-8'>
+      {formSections.map((section, sectionIndex) => (
+        <div key={sectionIndex}>
+          <h2 className='mb-4 text-lg font-semibold'>{section.title}</h2>
+          <Table>
+            <TableBody>
+              {section.forms.map((form, formIndex) => {
+                const FormComponent = form.component;
+                return (
+                  <TableRow key={formIndex}>
+                    <TableCell>
+                      <FormComponent />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
+      ))}
+    </div>
+  );
 }
--- a/apps/admin/app/dashboard/auth-control/phone/page.tsx
+++ b/apps/admin/app/dashboard/auth-control/phone/page.tsx
@ -1,395 +0,0 @@
-'use client';
-
-import {
-  getAuthMethodConfig,
-  getSmsPlatform,
-  testSmsSend,
-  updateAuthMethodConfig,
-} from '@/services/admin/authMethod';
-import { useQuery } from '@tanstack/react-query';
-import { Button } from '@workspace/ui/components/button';
-import { Label } from '@workspace/ui/components/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/ui/components/select';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
-import { Textarea } from '@workspace/ui/components/textarea';
-import { AreaCodeSelect } from '@workspace/ui/custom-components/area-code-select';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import TagInput from '@workspace/ui/custom-components/tag-input';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useState } from 'react';
-import { toast } from 'sonner';
-import { LogsTable } from '../log';
-
-export default function Page() {
-  const t = useTranslations('phone');
-  const { data, refetch, isFetching } = useQuery({
-    queryKey: ['getAuthMethodConfig', 'mobile'],
-    queryFn: async () => {
-      const { data } = await getAuthMethodConfig({
-        method: 'mobile',
-      });
-      return data.data;
-    },
-  });
-
-  const { data: platforms } = useQuery({
-    queryKey: ['getSmsPlatform'],
-    queryFn: async () => {
-      const { data } = await getSmsPlatform();
-      return data.data?.list;
-    },
-  });
-
-  const selectedPlatform = platforms?.find(
-    (platform) => platform.platform === data?.config?.platform,
-  );
-  const { platform_url, platform_field_description: platformConfig } = selectedPlatform ?? {};
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-
-    try {
-      await updateAuthMethodConfig({
-        ...data,
-        [key]: value,
-      } as API.UpdateAuthMethodConfigRequest);
-      toast.success(t('updateSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-  const [params, setParams] = useState<API.TestSmsSendRequest>({
-    telephone: '',
-    area_code: '1',
-  });
-
-  return (
-    <Tabs defaultValue='settings' className='w-full'>
-      <TabsList>
-        <TabsTrigger value='settings'>{t('settings')}</TabsTrigger>
-        <TabsTrigger value='logs'>{t('logs')}</TabsTrigger>
-      </TabsList>
-
-      <TabsContent value='settings'>
-        <Table>
-          <TableBody>
-            <TableRow>
-              <TableCell>
-                <Label>{t('enable')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('enableTip')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Switch
-                  checked={data?.enabled}
-                  onCheckedChange={(checked) => updateConfig('enabled', checked)}
-                  disabled={isFetching}
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('whitelistValidation')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('whitelistValidationTip')}</p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <Switch
-                  defaultValue={data?.config?.enable_whitelist}
-                  onCheckedChange={(checked) =>
-                    updateConfig('config', { ...data?.config, enable_whitelist: checked })
-                  }
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('whitelistAreaCode')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('whitelistAreaCodeTip')}</p>
-              </TableCell>
-              <TableCell className='w-1/2 text-right'>
-                <TagInput
-                  placeholder='1, 852, 886, 888'
-                  value={data?.config?.whitelist || []}
-                  onChange={(value) =>
-                    updateConfig('config', { ...data?.config, whitelist: value })
-                  }
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('platform')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('platformTip')}</p>
-              </TableCell>
-              <TableCell className='flex items-center gap-1 text-right'>
-                <Select
-                  value={data?.config?.platform}
-                  onValueChange={(value) =>
-                    updateConfig('config', {
-                      ...data?.config,
-                      platform: value,
-                    })
-                  }
-                  disabled={isFetching}
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {platforms?.map((item) => (
-                      <SelectItem key={item.platform} value={item.platform}>
-                        {item.platform}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                {platform_url && (
-                  <Button size='sm' asChild>
-                    <Link href={platform_url} target='_blank'>
-                      {t('applyPlatform')}
-                    </Link>
-                  </Button>
-                )}
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Label>{t('accessLabel')}</Label>
-                <p className='text-muted-foreground text-xs'>
-                  {t('platformConfigTip', { key: platformConfig?.access })}
-                </p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  value={data?.config?.platform_config.access ?? ''}
-                  onValueBlur={(value) =>
-                    updateConfig('config', {
-                      ...data?.config,
-                      platform_config: {
-                        ...data?.config?.platform_config,
-                        access: value,
-                      },
-                    })
-                  }
-                  disabled={isFetching}
-                  placeholder={t('platformConfigTip', { key: platformConfig?.access })}
-                />
-              </TableCell>
-            </TableRow>
-            {platformConfig?.endpoint && (
-              <TableRow>
-                <TableCell>
-                  <Label>{t('endpointLabel')}</Label>
-                  <p className='text-muted-foreground text-xs'>
-                    {t('platformConfigTip', { key: platformConfig?.endpoint })}
-                  </p>
-                </TableCell>
-                <TableCell className='text-right'>
-                  <EnhancedInput
-                    value={data?.config?.platform_config.endpoint ?? ''}
-                    onValueBlur={(value) =>
-                      updateConfig('config', {
-                        ...data?.config,
-                        platform_config: {
-                          ...data?.config?.platform_config,
-                          endpoint: value,
-                        },
-                      })
-                    }
-                    disabled={isFetching}
-                    placeholder={t('platformConfigTip', { key: platformConfig?.endpoint })}
-                  />
-                </TableCell>
-              </TableRow>
-            )}
-            <TableRow>
-              <TableCell>
-                <Label>{t('secretLabel')}</Label>
-                <p className='text-muted-foreground text-xs'>
-                  {t('platformConfigTip', { key: platformConfig?.secret })}
-                </p>
-              </TableCell>
-              <TableCell className='text-right'>
-                <EnhancedInput
-                  value={data?.config?.platform_config?.secret ?? ''}
-                  onValueBlur={(value) =>
-                    updateConfig('config', {
-                      ...data?.config,
-                      platform_config: {
-                        ...data?.config?.platform_config,
-                        secret: value,
-                      },
-                    })
-                  }
-                  disabled={isFetching}
-                  type='password'
-                  placeholder={t('platformConfigTip', { key: platformConfig?.secret })}
-                />
-              </TableCell>
-            </TableRow>
-            {platformConfig?.template_code && (
-              <TableRow>
-                <TableCell>
-                  <Label>{t('templateCodeLabel')}</Label>
-                  <p className='text-muted-foreground text-xs'>
-                    {t('platformConfigTip', { key: platformConfig?.template_code })}
-                  </p>
-                </TableCell>
-                <TableCell className='text-right'>
-                  <EnhancedInput
-                    value={data?.config?.platform_config?.template_code ?? 'code'}
-                    onValueBlur={(value) =>
-                      updateConfig('config', {
-                        ...data?.config,
-                        platform_config: {
-                          ...data?.config?.platform_config,
-                          template_code: value,
-                        },
-                      })
-                    }
-                    disabled={isFetching}
-                    placeholder={t('platformConfigTip', { key: platformConfig?.template_code })}
-                  />
-                </TableCell>
-              </TableRow>
-            )}
-            {platformConfig?.sign_name && (
-              <TableRow>
-                <TableCell>
-                  <Label>{t('signNameLabel')}</Label>
-                  <p className='text-muted-foreground text-xs'>
-                    {t('platformConfigTip', { key: platformConfig?.sign_name })}
-                  </p>
-                </TableCell>
-                <TableCell className='text-right'>
-                  <EnhancedInput
-                    value={data?.config?.platform_config?.sign_name ?? ''}
-                    onValueBlur={(value) =>
-                      updateConfig('config', {
-                        ...data?.config,
-                        platform_config: {
-                          ...data?.config?.platform_config,
-                          sign_name: value,
-                        },
-                      })
-                    }
-                    disabled={isFetching}
-                    placeholder={t('platformConfigTip', {
-                      key: platformConfig?.sign_name,
-                    })}
-                  />
-                </TableCell>
-              </TableRow>
-            )}
-            {platformConfig?.phone_number && (
-              <TableRow>
-                <TableCell>
-                  <Label>{t('phoneNumberLabel')}</Label>
-                  <p className='text-muted-foreground text-xs'>
-                    {t('platformConfigTip', { key: platformConfig?.phone_number })}
-                  </p>
-                </TableCell>
-                <TableCell className='text-right'>
-                  <EnhancedInput
-                    value={data?.config?.platform_config?.phone_number ?? ''}
-                    onValueBlur={(value) =>
-                      updateConfig('config', {
-                        ...data?.config,
-                        platform_config: {
-                          ...data?.config?.platform_config,
-                          phone_number: value,
-                        },
-                      })
-                    }
-                    disabled={isFetching}
-                    placeholder={t('platformConfigTip', {
-                      key: platformConfig?.phone_number,
-                    })}
-                  />
-                </TableCell>
-              </TableRow>
-            )}
-            {platformConfig?.code_variable && (
-              <TableRow>
-                <TableCell>
-                  <Label>{t('template')}</Label>
-                  <p className='text-muted-foreground text-xs'>
-                    {t('templateTip', { code: platformConfig?.code_variable })}
-                  </p>
-                </TableCell>
-                <TableCell className='text-right'>
-                  <Textarea
-                    defaultValue={data?.config?.platform_config?.template ?? ''}
-                    onBlur={(e) =>
-                      updateConfig('config', {
-                        ...data?.config,
-                        platform_config: {
-                          ...data?.config?.platform_config,
-                          template: e.target.value,
-                        },
-                      })
-                    }
-                    disabled={isFetching}
-                    placeholder={t('placeholders.template', {
-                      code: platformConfig?.code_variable,
-                    })}
-                  />
-                </TableCell>
-              </TableRow>
-            )}
-            <TableRow>
-              <TableCell>
-                <Label>{t('testSms')}</Label>
-                <p className='text-muted-foreground text-xs'>{t('testSmsTip')}</p>
-              </TableCell>
-              <TableCell className='flex items-center gap-2 text-right'>
-                <AreaCodeSelect
-                  value={params.area_code}
-                  onChange={(value) => {
-                    if (value.phone) {
-                      setParams((prev) => ({ ...prev, area_code: value.phone! }));
-                    }
-                  }}
-                />
-                <EnhancedInput
-                  placeholder={t('testSmsPhone')}
-                  value={params.telephone}
-                  onValueChange={(value) => {
-                    setParams((prev) => ({ ...prev, telephone: value as string }));
-                  }}
-                />
-                <Button
-                  disabled={!params.telephone || !params.area_code}
-                  onClick={async () => {
-                    if (isFetching || !params.telephone || !params.area_code) return;
-                    try {
-                      await testSmsSend(params);
-                      toast.success(t('sendSuccess'));
-                    } catch {
-                      toast.error(t('sendFailed'));
-                    }
-                  }}
-                >
-                  {t('testSms')}
-                </Button>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </TabsContent>
-
-      <TabsContent value='logs'>
-        <LogsTable type='mobile' />
-      </TabsContent>
-    </Tabs>
-  );
-}
--- a/apps/admin/app/dashboard/auth-control/telegram/page.tsx
+++ b/apps/admin/app/dashboard/auth-control/telegram/page.tsx
@ -1,92 +0,0 @@
-'use client';
-
-import { getAuthMethodConfig, updateAuthMethodConfig } from '@/services/admin/authMethod';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Page() {
-  const t = useTranslations('telegram');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getAuthMethodConfig', 'telegram'],
-    queryFn: async () => {
-      const { data } = await getAuthMethodConfig({
-        method: 'telegram',
-      });
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: keyof API.UpdateAuthMethodConfigRequest, value: unknown) {
-    try {
-      await updateAuthMethodConfig({
-        ...data,
-        [key]: value,
-      } as API.UpdateAuthMethodConfigRequest);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      toast.error(t('saveFailed'));
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('enable')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enabled}
-              onCheckedChange={(checked) => updateConfig('enabled', checked)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('clientId')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('clientIdDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder='6123456789'
-              value={data?.config?.bot}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  bot: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('clientSecret')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('clientSecretDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder='6123456789:AAHn_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
-              value={data?.config?.bot_token}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  bot_token: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}
--- a/apps/admin/app/dashboard/coupon/coupon-form.tsx
+++ b/apps/admin/app/dashboard/coupon/coupon-form.tsx
@ -1,8 +1,7 @@
 'use client';

-import { getSubscribeList } from '@/services/admin/subscribe';
+import { useSubscribe } from '@/store/subscribe';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import {
  Form,
@ -81,16 +80,7 @@ export default function CouponForm<T extends Record<string, any>>({

  const type = form.watch('type');

-  const { data: subscribe } = useQuery({
-    queryKey: ['getSubscribeList', 'all'],
-    queryFn: async () => {
-      const { data } = await getSubscribeList({
-        page: 1,
-        size: 9999,
-      });
-      return data.data?.list as API.Subscribe[];
-    },
-  });
+  const { subscribes } = useSubscribe();

  return (
    <Sheet open={open} onOpenChange={setOpen}>
@ -247,9 +237,9 @@ export default function CouponForm<T extends Record<string, any>>({
                        onChange={(value) => {
                          form.setValue(field.name, value);
                        }}
-                        options={subscribe?.map((item: API.Subscribe) => ({
-                          value: item.id,
-                          label: item.name,
+                        options={subscribes?.map((item) => ({
+                          value: item.id!,
+                          label: item.name!,
                        }))}
                      />
                    </FormControl>
@ -267,7 +257,7 @@ export default function CouponForm<T extends Record<string, any>>({
                      <DatePicker
                        placeholder={t('form.enterValue')}
                        value={field.value}
-                        disabled={(date) => date < new Date(Date.now() - 24 * 60 * 60 * 1000)}
+                        disabled={(date: Date) => date < new Date(Date.now() - 24 * 60 * 60 * 1000)}
                        onChange={(value) => {
                          form.setValue(field.name, value);
                        }}
@ -307,6 +297,8 @@ export default function CouponForm<T extends Record<string, any>>({
                      <EnhancedInput
                        placeholder={t('form.countPlaceholder')}
                        type='number'
+                        min={0}
+                        step={1}
                        {...field}
                        onValueChange={(value) => {
                          form.setValue(field.name, value);
@ -327,6 +319,8 @@ export default function CouponForm<T extends Record<string, any>>({
                      <EnhancedInput
                        placeholder={t('form.userLimitPlaceholder')}
                        type='number'
+                        min={0}
+                        step={1}
                        {...field}
                        onValueChange={(value) => {
                          form.setValue(field.name, value);
--- a/apps/admin/app/dashboard/coupon/page.tsx
+++ b/apps/admin/app/dashboard/coupon/page.tsx
@ -9,13 +9,12 @@ import {
  getCouponList,
  updateCoupon,
 } from '@/services/admin/coupon';
-import { getSubscribeList } from '@/services/admin/subscribe';
-import { useQuery } from '@tanstack/react-query';
+import { useSubscribe } from '@/store/subscribe';
+import { formatDate } from '@/utils/common';
 import { Badge } from '@workspace/ui/components/badge';
 import { Button } from '@workspace/ui/components/button';
 import { Switch } from '@workspace/ui/components/switch';
 import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
-import { formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
@ -24,16 +23,7 @@ import CouponForm from './coupon-form';
 export default function Page() {
  const t = useTranslations('coupon');
  const [loading, setLoading] = useState(false);
-  const { data } = useQuery({
-    queryKey: ['getSubscribeList', 'all'],
-    queryFn: async () => {
-      const { data } = await getSubscribeList({
-        page: 1,
-        size: 9999,
-      });
-      return data.data?.list as API.SubscribeGroup[];
-    },
-  });
+  const { subscribes } = useSubscribe();
  const ref = useRef<ProTableActions>(null);
  return (
    <ProTable<API.Coupon, { group_id: number; query: string }>
@ -64,17 +54,17 @@ export default function Page() {
        ),
      }}
      params={[
-        {
-          key: 'search',
-        },
        {
          key: 'subscribe',
          placeholder: t('subscribe'),
-          options: data?.map((item) => ({
-            label: item.name,
+          options: subscribes?.map((item) => ({
+            label: item.name!,
            value: String(item.id),
          })),
        },
+        {
+          key: 'search',
+        },
      ]}
      request={async (pagination, filters) => {
        const { data } = await getCouponList({
--- a/apps/admin/app/dashboard/document/page.tsx
+++ b/apps/admin/app/dashboard/document/page.tsx
@ -8,10 +8,10 @@ import {
  getDocumentList,
  updateDocument,
 } from '@/services/admin/document';
+import { formatDate } from '@/utils/common';
 import { Button } from '@workspace/ui/components/button';
 import { Switch } from '@workspace/ui/components/switch';
 import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
-import { formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
--- a/apps/admin/app/dashboard/layout.tsx
+++ b/apps/admin/app/dashboard/layout.tsx
@ -5,7 +5,7 @@ import { cookies } from 'next/headers';

 export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
  const cookieStore = await cookies();
-  const defaultOpen = cookieStore.get('sidebar:state')?.value === 'true';
+  const defaultOpen = cookieStore.get('sidebar_state')?.value === 'true';
  return (
    <SidebarProvider defaultOpen={defaultOpen}>
      <SidebarLeft />
--- a/apps/admin/app/dashboard/log/balance/page.tsx
+++ b/apps/admin/app/dashboard/log/balance/page.tsx
@ -0,0 +1,84 @@
+'use client';
+
+import { UserDetail } from '@/app/dashboard/user/user-detail';
+import { Display } from '@/components/display';
+import { OrderLink } from '@/components/order-link';
+import { ProTable } from '@/components/pro-table';
+import { filterBalanceLog } from '@/services/admin/log';
+import { formatDate } from '@/utils/common';
+import { Badge } from '@workspace/ui/components/badge';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+
+export default function BalanceLogPage() {
+  const t = useTranslations('log');
+  const sp = useSearchParams();
+
+  const today = new Date().toISOString().split('T')[0];
+
+  const getBalanceTypeText = (type: number) => {
+    const typeText = t(`type.${type}`);
+    if (typeText === `log.type.${type}`) {
+      return `${t('unknown')} (${type})`;
+    }
+    return typeText;
+  };
+
+  const initialFilters = {
+    date: sp.get('date') || today,
+    user_id: sp.get('user_id') ? Number(sp.get('user_id')) : undefined,
+  };
+  return (
+    <ProTable<API.BalanceLog, { search?: string }>
+      header={{ title: t('title.balance') }}
+      initialFilters={initialFilters}
+      columns={[
+        {
+          accessorKey: 'user',
+          header: t('column.user'),
+          cell: ({ row }) => <UserDetail id={Number(row.original.user_id)} />,
+        },
+        {
+          accessorKey: 'amount',
+          header: t('column.amount'),
+          cell: ({ row }) => <Display type='currency' value={row.original.amount} />,
+        },
+        {
+          accessorKey: 'order_no',
+          header: t('column.orderNo'),
+          cell: ({ row }) => <OrderLink orderId={row.original.order_no} />,
+        },
+        {
+          accessorKey: 'balance',
+          header: t('column.balance'),
+          cell: ({ row }) => <Display type='currency' value={row.original.balance} />,
+        },
+        {
+          accessorKey: 'type',
+          header: t('column.type'),
+          cell: ({ row }) => <Badge>{getBalanceTypeText(row.original.type)}</Badge>,
+        },
+        {
+          accessorKey: 'timestamp',
+          header: t('column.time'),
+          cell: ({ row }) => formatDate(row.original.timestamp),
+        },
+      ]}
+      params={[
+        { key: 'date', type: 'date' },
+        { key: 'user_id', placeholder: t('column.userId') },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await filterBalanceLog({
+          page: pagination.page,
+          size: pagination.size,
+          date: (filter as any)?.date,
+          user_id: (filter as any)?.user_id,
+        });
+        const list = (data?.data?.list || []) as any[];
+        const total = Number(data?.data?.total || list.length);
+        return { list, total };
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/log/commission/page.tsx
+++ b/apps/admin/app/dashboard/log/commission/page.tsx
@ -0,0 +1,79 @@
+'use client';
+
+import { UserDetail } from '@/app/dashboard/user/user-detail';
+import { Display } from '@/components/display';
+import { OrderLink } from '@/components/order-link';
+import { ProTable } from '@/components/pro-table';
+import { filterCommissionLog } from '@/services/admin/log';
+import { formatDate } from '@/utils/common';
+import { Badge } from '@workspace/ui/components/badge';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+
+export default function CommissionLogPage() {
+  const t = useTranslations('log');
+  const sp = useSearchParams();
+
+  const today = new Date().toISOString().split('T')[0];
+
+  const getCommissionTypeText = (type: number) => {
+    const typeText = t(`type.${type}`);
+    if (typeText === `log.type.${type}`) {
+      return `${t('unknown')} (${type})`;
+    }
+    return typeText;
+  };
+
+  const initialFilters = {
+    date: sp.get('date') || today,
+    user_id: sp.get('user_id') ? Number(sp.get('user_id')) : undefined,
+  };
+  return (
+    <ProTable<API.CommissionLog, { search?: string }>
+      header={{ title: t('title.commission') }}
+      initialFilters={initialFilters}
+      columns={[
+        {
+          accessorKey: 'user',
+          header: t('column.user'),
+          cell: ({ row }) => <UserDetail id={Number(row.original.user_id)} />,
+        },
+        {
+          accessorKey: 'amount',
+          header: t('column.amount'),
+          cell: ({ row }) => <Display type='currency' value={row.original.amount} />,
+        },
+        {
+          accessorKey: 'order_no',
+          header: t('column.orderNo'),
+          cell: ({ row }) => <OrderLink orderId={row.original.order_no} />,
+        },
+        {
+          accessorKey: 'type',
+          header: t('column.type'),
+          cell: ({ row }) => <Badge>{getCommissionTypeText(row.original.type)}</Badge>,
+        },
+        {
+          accessorKey: 'timestamp',
+          header: t('column.time'),
+          cell: ({ row }) => formatDate(row.original.timestamp),
+        },
+      ]}
+      params={[
+        { key: 'date', type: 'date' },
+        { key: 'user_id', placeholder: t('column.userId') },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await filterCommissionLog({
+          page: pagination.page,
+          size: pagination.size,
+          date: (filter as any)?.date,
+          user_id: (filter as any)?.user_id,
+        });
+        const list = (data?.data?.list || []) as any[];
+        const total = Number(data?.data?.total || list.length);
+        return { list, total };
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/log/email/page.tsx
+++ b/apps/admin/app/dashboard/log/email/page.tsx
@ -0,0 +1,84 @@
+'use client';
+
+import { ProTable } from '@/components/pro-table';
+import { filterEmailLog } from '@/services/admin/log';
+import { formatDate } from '@/utils/common';
+import { Badge } from '@workspace/ui/components/badge';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+
+export default function EmailLogPage() {
+  const t = useTranslations('log');
+  const sp = useSearchParams();
+
+  const today = new Date().toISOString().split('T')[0];
+
+  const initialFilters = {
+    search: sp.get('search') || undefined,
+    date: sp.get('date') || today,
+  };
+  return (
+    <ProTable<API.MessageLog, { search?: string }>
+      header={{ title: t('title.email') }}
+      initialFilters={initialFilters}
+      columns={[
+        {
+          accessorKey: 'platform',
+          header: t('column.platform'),
+          cell: ({ row }) => <Badge>{row.getValue('platform')}</Badge>,
+        },
+        { accessorKey: 'to', header: t('column.to') },
+        { accessorKey: 'subject', header: t('column.subject') },
+        {
+          accessorKey: 'content',
+          header: t('column.content'),
+          cell: ({ row }) => (
+            <pre className='max-w-[480px] overflow-auto whitespace-pre-wrap break-words text-xs'>
+              {JSON.stringify(row.original.content || {}, null, 2)}
+            </pre>
+          ),
+        },
+        {
+          accessorKey: 'status',
+          header: t('column.status'),
+          cell: ({ row }) => {
+            const status = row.original.status;
+            const getStatusVariant = (status: any) => {
+              if (status === 1) {
+                return 'default';
+              } else if (status === 0) {
+                return 'destructive';
+              }
+              return 'outline';
+            };
+
+            const getStatusText = (status: any) => {
+              if (status === 1) return t('sent');
+              if (status === 0) return t('failed');
+              return t('unknown');
+            };
+
+            return <Badge variant={getStatusVariant(status)}>{getStatusText(status)}</Badge>;
+          },
+        },
+        {
+          accessorKey: 'created_at',
+          header: t('column.time'),
+          cell: ({ row }) => formatDate(row.original.created_at),
+        },
+      ]}
+      params={[{ key: 'search' }, { key: 'date', type: 'date' }]}
+      request={async (pagination, filter) => {
+        const { data } = await filterEmailLog({
+          page: pagination.page,
+          size: pagination.size,
+          search: filter?.search,
+          date: (filter as any)?.date,
+        });
+        const list = ((data?.data?.list || []) as API.MessageLog[]) || [];
+        const total = Number(data?.data?.total || list.length);
+        return { list, total };
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/log/gift/page.tsx
+++ b/apps/admin/app/dashboard/log/gift/page.tsx
@ -0,0 +1,92 @@
+'use client';
+
+import { UserDetail, UserSubscribeDetail } from '@/app/dashboard/user/user-detail';
+import { Display } from '@/components/display';
+import { OrderLink } from '@/components/order-link';
+import { ProTable } from '@/components/pro-table';
+import { filterGiftLog } from '@/services/admin/log';
+import { formatDate } from '@/utils/common';
+import { Badge } from '@workspace/ui/components/badge';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+
+export default function GiftLogPage() {
+  const t = useTranslations('log');
+  const sp = useSearchParams();
+
+  const today = new Date().toISOString().split('T')[0];
+
+  const getGiftTypeText = (type: number) => {
+    const typeText = t(`type.${type}`);
+    if (typeText === `log.type.${type}`) {
+      return `${t('unknown')} (${type})`;
+    }
+    return typeText;
+  };
+
+  const initialFilters = {
+    date: sp.get('date') || today,
+    user_id: sp.get('user_id') ? Number(sp.get('user_id')) : undefined,
+  };
+  return (
+    <ProTable<API.GiftLog, { search?: string }>
+      header={{ title: t('title.gift') }}
+      initialFilters={initialFilters}
+      columns={[
+        {
+          accessorKey: 'user',
+          header: t('column.user'),
+          cell: ({ row }) => <UserDetail id={Number(row.original.user_id)} />,
+        },
+        {
+          accessorKey: 'subscribe_id',
+          header: t('column.subscribe'),
+          cell: ({ row }) => (
+            <UserSubscribeDetail id={Number(row.original.subscribe_id)} enabled hoverCard />
+          ),
+        },
+        {
+          accessorKey: 'order_no',
+          header: t('column.orderNo'),
+          cell: ({ row }) => <OrderLink orderId={row.original.order_no} />,
+        },
+        {
+          accessorKey: 'amount',
+          header: t('column.amount'),
+          cell: ({ row }) => <Display type='currency' value={row.original.amount} />,
+        },
+        {
+          accessorKey: 'balance',
+          header: t('column.balance'),
+          cell: ({ row }) => <Display type='currency' value={row.original.balance} />,
+        },
+        {
+          accessorKey: 'type',
+          header: t('column.type'),
+          cell: ({ row }) => <Badge>{getGiftTypeText(row.original.type)}</Badge>,
+        },
+        { accessorKey: 'remark', header: t('column.remark') },
+        {
+          accessorKey: 'timestamp',
+          header: t('column.time'),
+          cell: ({ row }) => formatDate(row.original.timestamp),
+        },
+      ]}
+      params={[
+        { key: 'date', type: 'date' },
+        { key: 'user_id', placeholder: t('column.userId') },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await filterGiftLog({
+          page: pagination.page,
+          size: pagination.size,
+          date: (filter as any)?.date,
+          user_id: (filter as any)?.user_id,
+        });
+        const list = (data?.data?.list || []) as any[];
+        const total = Number(data?.data?.total || list.length);
+        return { list, total };
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/log/login/page.tsx
+++ b/apps/admin/app/dashboard/log/login/page.tsx
@ -0,0 +1,100 @@
+'use client';
+
+import { UserDetail } from '@/app/dashboard/user/user-detail';
+import { IpLink } from '@/components/ip-link';
+import { ProTable } from '@/components/pro-table';
+import { filterLoginLog } from '@/services/admin/log';
+import { formatDate } from '@/utils/common';
+import { Badge } from '@workspace/ui/components/badge';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@workspace/ui/components/tooltip';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+
+export default function LoginLogPage() {
+  const t = useTranslations('log');
+  const sp = useSearchParams();
+
+  const today = new Date().toISOString().split('T')[0];
+
+  const initialFilters = {
+    date: sp.get('date') || today,
+    user_id: sp.get('user_id') ? Number(sp.get('user_id')) : undefined,
+  };
+  return (
+    <ProTable<API.LoginLog, { date?: string; user_id?: number }>
+      header={{ title: t('title.login') }}
+      initialFilters={initialFilters}
+      columns={[
+        {
+          accessorKey: 'user',
+          header: t('column.user'),
+          cell: ({ row }) => (
+            <div>
+              <Badge className='capitalize'>{row.original.method}</Badge>{' '}
+              <UserDetail id={Number(row.original.user_id)} />
+            </div>
+          ),
+        },
+
+        {
+          accessorKey: 'login_ip',
+          header: t('column.ip'),
+          cell: ({ row }) => <IpLink ip={String((row.original as any).login_ip || '')} />,
+        },
+        {
+          accessorKey: 'user_agent',
+          header: t('column.userAgent'),
+          cell: ({ row }) => {
+            const userAgent = String(row.original.user_agent || '');
+            return (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div className='max-w-48 cursor-help truncate'>{userAgent}</div>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className='max-w-md break-words'>{userAgent}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            );
+          },
+        },
+        {
+          accessorKey: 'success',
+          header: t('column.success'),
+          cell: ({ row }) => (
+            <Badge variant={row.original.success ? 'default' : 'destructive'}>
+              {row.original.success ? t('success') : t('failed')}
+            </Badge>
+          ),
+        },
+        {
+          accessorKey: 'timestamp',
+          header: t('column.time'),
+          cell: ({ row }) => formatDate(row.original.timestamp),
+        },
+      ]}
+      params={[
+        { key: 'date', type: 'date' },
+        { key: 'user_id', placeholder: t('column.userId') },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await filterLoginLog({
+          page: pagination.page,
+          size: pagination.size,
+          date: (filter as any)?.date,
+          user_id: (filter as any)?.user_id,
+        });
+        const list = ((data?.data?.list || []) as API.LoginLog[]) || [];
+        const total = Number(data?.data?.total || list.length);
+        return { list, total };
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/log/mobile/page.tsx
+++ b/apps/admin/app/dashboard/log/mobile/page.tsx
@ -0,0 +1,83 @@
+'use client';
+
+import { ProTable } from '@/components/pro-table';
+import { filterMobileLog } from '@/services/admin/log';
+import { formatDate } from '@/utils/common';
+import { Badge } from '@workspace/ui/components/badge';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+export default function MobileLogPage() {
+  const t = useTranslations('log');
+  const sp = useSearchParams();
+
+  const today = new Date().toISOString().split('T')[0];
+
+  const initialFilters = {
+    search: sp.get('search') || undefined,
+    date: sp.get('date') || today,
+  };
+  return (
+    <ProTable<API.MessageLog, { search?: string }>
+      header={{ title: t('title.mobile') }}
+      initialFilters={initialFilters}
+      columns={[
+        {
+          accessorKey: 'platform',
+          header: t('column.platform'),
+          cell: ({ row }) => <Badge>{row.getValue('platform')}</Badge>,
+        },
+        { accessorKey: 'to', header: t('column.to') },
+        { accessorKey: 'subject', header: t('column.subject') },
+        {
+          accessorKey: 'content',
+          header: t('column.content'),
+          cell: ({ row }) => (
+            <pre className='max-w-[480px] overflow-auto whitespace-pre-wrap break-words text-xs'>
+              {JSON.stringify(row.original.content || {}, null, 2)}
+            </pre>
+          ),
+        },
+        {
+          accessorKey: 'status',
+          header: t('column.status'),
+          cell: ({ row }) => {
+            const status = row.original.status;
+            const getStatusVariant = (status: any) => {
+              if (status === 1) {
+                return 'default';
+              } else if (status === 0) {
+                return 'destructive';
+              }
+              return 'outline';
+            };
+
+            const getStatusText = (status: any) => {
+              if (status === 1) return t('sent');
+              if (status === 0) return t('failed');
+              return t('unknown');
+            };
+
+            return <Badge variant={getStatusVariant(status)}>{getStatusText(status)}</Badge>;
+          },
+        },
+        {
+          accessorKey: 'created_at',
+          header: t('column.time'),
+          cell: ({ row }) => formatDate(row.original.created_at),
+        },
+      ]}
+      params={[{ key: 'search' }, { key: 'date', type: 'date' }]}
+      request={async (pagination, filter) => {
+        const { data } = await filterMobileLog({
+          page: pagination.page,
+          size: pagination.size,
+          search: filter?.search,
+          date: (filter as any)?.date,
+        });
+        const list = ((data?.data?.list || []) as API.MessageLog[]) || [];
+        const total = Number(data?.data?.total || list.length);
+        return { list, total };
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/log/register/page.tsx
+++ b/apps/admin/app/dashboard/log/register/page.tsx
@ -0,0 +1,95 @@
+'use client';
+
+import { UserDetail } from '@/app/dashboard/user/user-detail';
+import { IpLink } from '@/components/ip-link';
+import { ProTable } from '@/components/pro-table';
+import { filterRegisterLog } from '@/services/admin/log';
+import { formatDate } from '@/utils/common';
+import { Badge } from '@workspace/ui/components/badge';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@workspace/ui/components/tooltip';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+
+export default function RegisterLogPage() {
+  const t = useTranslations('log');
+  const sp = useSearchParams();
+
+  const today = new Date().toISOString().split('T')[0];
+
+  const initialFilters = {
+    date: sp.get('date') || today,
+    user_id: sp.get('user_id') ? Number(sp.get('user_id')) : undefined,
+  };
+  return (
+    <ProTable<API.RegisterLog, { date?: string; user_id?: number }>
+      header={{ title: t('title.register') }}
+      initialFilters={initialFilters}
+      columns={[
+        {
+          accessorKey: 'user',
+          header: t('column.user'),
+          cell: ({ row }) => <UserDetail id={Number(row.original.user_id)} />,
+        },
+        {
+          accessorKey: 'auth_method',
+          header: t('column.identifier'),
+          cell: ({ row }) => (
+            <div className='flex items-center'>
+              <Badge className='capitalize'>{row.original.auth_method}</Badge>
+              <span className='ml-1 text-sm'>{row.original.identifier}</span>
+            </div>
+          ),
+        },
+        {
+          accessorKey: 'register_ip',
+          header: t('column.ip'),
+          cell: ({ row }) => <IpLink ip={String((row.original as any).register_ip || '')} />,
+        },
+        {
+          accessorKey: 'user_agent',
+          header: t('column.userAgent'),
+          cell: ({ row }) => {
+            const userAgent = String(row.original.user_agent || '');
+            return (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div className='max-w-48 cursor-help truncate'>{userAgent}</div>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className='max-w-md break-words'>{userAgent}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            );
+          },
+        },
+        {
+          accessorKey: 'timestamp',
+          header: t('column.time'),
+          cell: ({ row }) => formatDate(row.original.timestamp),
+        },
+      ]}
+      params={[
+        { key: 'date', type: 'date' },
+        { key: 'user_id', placeholder: t('column.userId') },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await filterRegisterLog({
+          page: pagination.page,
+          size: pagination.size,
+          date: (filter as any)?.date,
+          user_id: (filter as any)?.user_id,
+        });
+        const list = (data?.data?.list || []) as any[];
+        const total = Number(data?.data?.total || list.length);
+        return { list, total };
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/log/reset-subscribe/page.tsx
+++ b/apps/admin/app/dashboard/log/reset-subscribe/page.tsx
@ -0,0 +1,82 @@
+'use client';
+
+import { UserDetail, UserSubscribeDetail } from '@/app/dashboard/user/user-detail';
+import { OrderLink } from '@/components/order-link';
+import { ProTable } from '@/components/pro-table';
+import { filterResetSubscribeLog } from '@/services/admin/log';
+import { formatDate } from '@/utils/common';
+import { Badge } from '@workspace/ui/components/badge';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+
+export default function ResetSubscribeLogPage() {
+  const t = useTranslations('log');
+  const sp = useSearchParams();
+
+  const today = new Date().toISOString().split('T')[0];
+
+  const getResetSubscribeTypeText = (type: number) => {
+    const typeText = t(`type.${type}`);
+    if (typeText === `log.type.${type}`) {
+      return `${t('unknown')} (${type})`;
+    }
+    return typeText;
+  };
+
+  const initialFilters = {
+    date: sp.get('date') || today,
+    user_subscribe_id: sp.get('user_subscribe_id')
+      ? Number(sp.get('user_subscribe_id'))
+      : undefined,
+  };
+  return (
+    <ProTable<API.ResetSubscribeLog, { date?: string; user_subscribe_id?: number }>
+      header={{ title: t('title.resetSubscribe') }}
+      initialFilters={initialFilters}
+      columns={[
+        {
+          accessorKey: 'user',
+          header: t('column.user'),
+          cell: ({ row }) => <UserDetail id={Number(row.original.user_id)} />,
+        },
+        {
+          accessorKey: 'user_subscribe_id',
+          header: t('column.subscribeId'),
+          cell: ({ row }) => (
+            <UserSubscribeDetail id={Number(row.original.user_subscribe_id)} enabled hoverCard />
+          ),
+        },
+        {
+          accessorKey: 'type',
+          header: t('column.type'),
+          cell: ({ row }) => <Badge>{getResetSubscribeTypeText(row.original.type)}</Badge>,
+        },
+        {
+          accessorKey: 'order_no',
+          header: t('column.orderNo'),
+          cell: ({ row }) => <OrderLink orderId={row.original.order_no} />,
+        },
+        {
+          accessorKey: 'timestamp',
+          header: t('column.time'),
+          cell: ({ row }) => formatDate(row.original.timestamp),
+        },
+      ]}
+      params={[
+        { key: 'date', type: 'date' },
+        { key: 'user_subscribe_id', placeholder: t('column.subscribeId') },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await filterResetSubscribeLog({
+          page: pagination.page,
+          size: pagination.size,
+          date: (filter as any)?.date,
+          user_subscribe_id: (filter as any)?.user_subscribe_id,
+        });
+        const list = (data?.data?.list || []) as any[];
+        const total = Number(data?.data?.total || list.length);
+        return { list, total };
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/log/server-traffic/page.tsx
+++ b/apps/admin/app/dashboard/log/server-traffic/page.tsx
@ -0,0 +1,86 @@
+'use client';
+
+import { ProTable } from '@/components/pro-table';
+import { filterServerTrafficLog } from '@/services/admin/log';
+import { useServer } from '@/store/server';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import { formatBytes } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+
+export default function ServerTrafficLogPage() {
+  const t = useTranslations('log');
+  const sp = useSearchParams();
+  const { getServerName, getServerById } = useServer();
+
+  const today = new Date().toISOString().split('T')[0];
+
+  const initialFilters = {
+    date: sp.get('date') || today,
+    server_id: sp.get('server_id') ? Number(sp.get('server_id')) : undefined,
+  };
+  return (
+    <ProTable<API.ServerTrafficLog, { date?: string; server_id?: number }>
+      header={{ title: t('title.serverTraffic') }}
+      initialFilters={initialFilters}
+      actions={{
+        render: (row) => [
+          <Button key='detail' asChild>
+            <Link
+              href={`/dashboard/log/traffic-details?date=${row.date}&server_id=${row.server_id}`}
+            >
+              {t('detail')}
+            </Link>
+          </Button>,
+        ],
+      }}
+      columns={[
+        {
+          accessorKey: 'server_id',
+          header: t('column.server'),
+          cell: ({ row }) => {
+            return (
+              <div className='flex items-center gap-2'>
+                <Badge>{row.original.server_id}</Badge>
+                <span>{getServerName(row.original.server_id)}</span>
+              </div>
+            );
+          },
+        },
+        {
+          accessorKey: 'upload',
+          header: t('column.upload'),
+          cell: ({ row }) => formatBytes(row.original.upload),
+        },
+        {
+          accessorKey: 'download',
+          header: t('column.download'),
+          cell: ({ row }) => formatBytes(row.original.download),
+        },
+        {
+          accessorKey: 'total',
+          header: t('column.total'),
+          cell: ({ row }) => formatBytes(row.original.total),
+        },
+        { accessorKey: 'date', header: t('column.date') },
+      ]}
+      params={[
+        { key: 'date', type: 'date' },
+        { key: 'server_id', placeholder: t('column.serverId') },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await filterServerTrafficLog({
+          page: pagination.page,
+          size: pagination.size,
+          date: (filter as any)?.date,
+          server_id: (filter as any)?.server_id,
+        });
+        const list = (data?.data?.list || []) as any[];
+        const total = Number(data?.data?.total || list.length);
+        return { list, total };
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/log/subscribe-traffic/page.tsx
+++ b/apps/admin/app/dashboard/log/subscribe-traffic/page.tsx
@ -0,0 +1,95 @@
+'use client';
+
+import { UserDetail, UserSubscribeDetail } from '@/app/dashboard/user/user-detail';
+import { ProTable } from '@/components/pro-table';
+import { filterUserSubscribeTrafficLog } from '@/services/admin/log';
+import { Button } from '@workspace/ui/components/button';
+import { formatBytes } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+
+export default function SubscribeTrafficLogPage() {
+  const t = useTranslations('log');
+  const sp = useSearchParams();
+
+  const today = new Date().toISOString().split('T')[0];
+
+  const initialFilters = {
+    date: sp.get('date') || today,
+    user_id: sp.get('user_id') ? Number(sp.get('user_id')) : undefined,
+    user_subscribe_id: sp.get('user_subscribe_id')
+      ? Number(sp.get('user_subscribe_id'))
+      : undefined,
+  };
+  return (
+    <ProTable<
+      API.UserSubscribeTrafficLog,
+      { date?: string; user_id?: number; user_subscribe_id?: number }
+    >
+      header={{ title: t('title.subscribeTraffic') }}
+      initialFilters={initialFilters}
+      actions={{
+        render: (row) => [
+          <Button key='detail' asChild>
+            <Link
+              href={`/dashboard/log/traffic-details?date=${row.date}&user_id=${row.user_id}&subscribe_id=${row.subscribe_id}`}
+            >
+              {t('detail')}
+            </Link>
+          </Button>,
+        ],
+      }}
+      columns={[
+        {
+          accessorKey: 'user',
+          header: t('column.user'),
+          cell: ({ row }) => <UserDetail id={Number(row.original.user_id)} />,
+        },
+        {
+          accessorKey: 'subscribe_id',
+          header: t('column.subscribe'),
+          cell: ({ row }) => (
+            <UserSubscribeDetail id={Number(row.original.subscribe_id)} enabled hoverCard />
+          ),
+        },
+        {
+          accessorKey: 'upload',
+          header: t('column.upload'),
+          cell: ({ row }) => formatBytes(row.original.upload),
+        },
+        {
+          accessorKey: 'download',
+          header: t('column.download'),
+          cell: ({ row }) => formatBytes(row.original.download),
+        },
+        {
+          accessorKey: 'total',
+          header: t('column.total'),
+          cell: ({ row }) => formatBytes(row.original.total),
+        },
+        {
+          accessorKey: 'date',
+          header: t('column.date'),
+        },
+      ]}
+      params={[
+        { key: 'date', type: 'date' },
+        { key: 'user_id', placeholder: t('column.userId') },
+        { key: 'user_subscribe_id', placeholder: t('column.subscribeId') },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await filterUserSubscribeTrafficLog({
+          page: pagination.page,
+          size: pagination.size,
+          date: (filter as any)?.date,
+          user_id: (filter as any)?.user_id,
+          user_subscribe_id: (filter as any)?.user_subscribe_id,
+        });
+        const list = ((data?.data?.list || []) as API.UserSubscribeTrafficLog[]) || [];
+        const total = Number(data?.data?.total || list.length);
+        return { list, total };
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/log/subscribe/page.tsx
+++ b/apps/admin/app/dashboard/log/subscribe/page.tsx
@ -0,0 +1,96 @@
+'use client';
+
+import { UserDetail, UserSubscribeDetail } from '@/app/dashboard/user/user-detail';
+import { IpLink } from '@/components/ip-link';
+import { ProTable } from '@/components/pro-table';
+import { filterSubscribeLog } from '@/services/admin/log';
+import { formatDate } from '@/utils/common';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@workspace/ui/components/tooltip';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+
+export default function SubscribeLogPage() {
+  const t = useTranslations('log');
+  const sp = useSearchParams();
+
+  const today = new Date().toISOString().split('T')[0];
+
+  const initialFilters = {
+    date: sp.get('date') || today,
+    user_id: sp.get('user_id') ? Number(sp.get('user_id')) : undefined,
+    user_subscribe_id: sp.get('user_subscribe_id')
+      ? Number(sp.get('user_subscribe_id'))
+      : undefined,
+  };
+  return (
+    <ProTable<API.SubscribeLog, { date?: string; user_id?: number }>
+      header={{ title: t('title.subscribe') }}
+      initialFilters={initialFilters}
+      columns={[
+        {
+          accessorKey: 'user',
+          header: t('column.user'),
+          cell: ({ row }) => <UserDetail id={Number(row.original.user_id)} />,
+        },
+        {
+          accessorKey: 'user_subscribe_id',
+          header: t('column.subscribe'),
+          cell: ({ row }) => (
+            <UserSubscribeDetail id={Number(row.original.user_subscribe_id)} enabled hoverCard />
+          ),
+        },
+        {
+          accessorKey: 'client_ip',
+          header: t('column.ip'),
+          cell: ({ row }) => <IpLink ip={String((row.original as any).client_ip || '')} />,
+        },
+        {
+          accessorKey: 'user_agent',
+          header: t('column.userAgent'),
+          cell: ({ row }) => {
+            const userAgent = String(row.original.user_agent || '');
+            return (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div className='max-w-48 cursor-help truncate'>{userAgent}</div>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className='max-w-md break-words'>{userAgent}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            );
+          },
+        },
+        {
+          accessorKey: 'timestamp',
+          header: t('column.time'),
+          cell: ({ row }) => formatDate(row.original.timestamp),
+        },
+      ]}
+      params={[
+        { key: 'date', type: 'date' },
+        { key: 'user_id', placeholder: t('column.userId') },
+        { key: 'user_subscribe_id', placeholder: t('column.subscribeId') },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await filterSubscribeLog({
+          page: pagination.page,
+          size: pagination.size,
+          date: (filter as any)?.date,
+          user_id: (filter as any)?.user_id,
+          user_subscribe_id: (filter as any)?.user_subscribe_id,
+        });
+        const list = (data?.data?.list || []) as any[];
+        const total = Number(data?.data?.total || list.length);
+        return { list, total };
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/log/traffic-details/page.tsx
+++ b/apps/admin/app/dashboard/log/traffic-details/page.tsx
@ -0,0 +1,88 @@
+'use client';
+
+import { UserDetail, UserSubscribeDetail } from '@/app/dashboard/user/user-detail';
+import { ProTable } from '@/components/pro-table';
+import { filterTrafficLogDetails } from '@/services/admin/log';
+import { useServer } from '@/store/server';
+import { formatDate } from '@/utils/common';
+import { formatBytes } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+
+export default function TrafficDetailsPage() {
+  const t = useTranslations('log');
+  const sp = useSearchParams();
+  const { getServerName } = useServer();
+
+  const today = new Date().toISOString().split('T')[0];
+
+  const initialFilters = {
+    date: sp.get('date') || today,
+    server_id: sp.get('server_id') ? Number(sp.get('server_id')) : undefined,
+    user_id: sp.get('user_id') ? Number(sp.get('user_id')) : undefined,
+    subscribe_id: sp.get('subscribe_id') ? Number(sp.get('subscribe_id')) : undefined,
+  };
+  return (
+    <ProTable<API.TrafficLogDetails, { search?: string }>
+      header={{ title: t('title.trafficDetails') }}
+      initialFilters={initialFilters}
+      columns={[
+        {
+          accessorKey: 'server_id',
+          header: t('column.server'),
+          cell: ({ row }) => (
+            <span>
+              {getServerName(row.original.server_id)} ({row.original.server_id})
+            </span>
+          ),
+        },
+        {
+          accessorKey: 'user_id',
+          header: t('column.user'),
+          cell: ({ row }) => <UserDetail id={Number(row.original.user_id)} />,
+        },
+        {
+          accessorKey: 'subscribe_id',
+          header: t('column.subscribe'),
+          cell: ({ row }) => (
+            <UserSubscribeDetail id={Number(row.original.subscribe_id)} enabled hoverCard />
+          ),
+        },
+        {
+          accessorKey: 'upload',
+          header: t('column.upload'),
+          cell: ({ row }) => formatBytes(row.original.upload),
+        },
+        {
+          accessorKey: 'download',
+          header: t('column.download'),
+          cell: ({ row }) => formatBytes(row.original.download),
+        },
+        {
+          accessorKey: 'timestamp',
+          header: t('column.time'),
+          cell: ({ row }) => formatDate(row.original.timestamp),
+        },
+      ]}
+      params={[
+        { key: 'date', type: 'date' },
+        { key: 'server_id', placeholder: t('column.serverId') },
+        { key: 'user_id', placeholder: t('column.userId') },
+        { key: 'subscribe_id', placeholder: t('column.subscribeId') },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await filterTrafficLogDetails({
+          page: pagination.page,
+          size: pagination.size,
+          date: (filter as any)?.date,
+          server_id: (filter as any)?.server_id,
+          user_id: (filter as any)?.user_id,
+          subscribe_id: (filter as any)?.subscribe_id,
+        });
+        const list = (data?.data?.list || []) as any[];
+        const total = Number(data?.data?.total || list.length);
+        return { list, total };
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/marketing/email/broadcast-form.tsx
+++ b/apps/admin/app/dashboard/marketing/email/broadcast-form.tsx
@ -0,0 +1,508 @@
+'use client';
+
+import { createBatchSendEmailTask, getPreSendEmailCount } from '@/services/admin/marketing';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { Input } from '@workspace/ui/components/input';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@workspace/ui/components/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { Textarea } from '@workspace/ui/components/textarea';
+import { HTMLEditor } from '@workspace/ui/custom-components/editor';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+export default function EmailBroadcastForm() {
+  const t = useTranslations('marketing');
+
+  // Define schema with internationalized error messages
+  const emailBroadcastSchema = z.object({
+    subject: z.string().min(1, t('subject') + ' ' + t('cannotBeEmpty')),
+    content: z.string().min(1, t('content') + ' ' + t('cannotBeEmpty')),
+    scope: z.number(),
+    register_start_time: z.string().optional(),
+    register_end_time: z.string().optional(),
+    additional: z
+      .string()
+      .optional()
+      .refine(
+        (value) => {
+          if (!value || value.trim() === '') return true;
+          const emails = value.split('\n').filter((email) => email.trim() !== '');
+          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+          return emails.every((email) => emailRegex.test(email.trim()));
+        },
+        {
+          message: t('pleaseEnterValidEmailAddresses'),
+        },
+      ),
+    scheduled: z.string().optional(),
+    interval: z.number().min(0.1, t('emailIntervalMinimum')).optional(),
+    limit: z.number().min(1, t('dailyLimit')).optional(),
+  });
+
+  type EmailBroadcastFormData = z.infer<typeof emailBroadcastSchema>;
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [estimatedRecipients, setEstimatedRecipients] = useState<{
+    users: number;
+    additional: number;
+    total: number;
+  }>({ users: 0, additional: 0, total: 0 });
+
+  const form = useForm<EmailBroadcastFormData>({
+    resolver: zodResolver(emailBroadcastSchema),
+    defaultValues: {
+      subject: '',
+      content: '',
+      scope: 1, // ScopeAll
+      register_start_time: '',
+      register_end_time: '',
+      additional: '',
+      scheduled: '',
+      interval: 1,
+      limit: 1000,
+    },
+  });
+
+  // Calculate recipient count
+  const calculateRecipients = async () => {
+    const formData = form.getValues();
+
+    try {
+      // Call API to get actual recipient count
+      const scope = formData.scope || 1; // Default to ScopeAll
+
+      // Convert dates to timestamps if they exist
+      let register_start_time: number = 0;
+      let register_end_time: number = 0;
+
+      if (formData.register_start_time) {
+        register_start_time = Math.floor(new Date(formData.register_start_time).getTime());
+      }
+
+      if (formData.register_end_time) {
+        register_end_time = Math.floor(new Date(formData.register_end_time).getTime());
+      }
+
+      const response = await getPreSendEmailCount({
+        scope,
+        register_start_time,
+        register_end_time,
+      });
+
+      const userCount = response.data?.data?.count || 0;
+
+      // Calculate additional email count
+      const additionalEmails = formData.additional || '';
+      const additionalCount = additionalEmails
+        .split('\n')
+        .filter((email: string) => email.trim() !== '').length;
+
+      const total = userCount + additionalCount;
+
+      setEstimatedRecipients({
+        users: userCount,
+        additional: additionalCount,
+        total,
+      });
+    } catch (error) {
+      console.error('Failed to get recipient count:', error);
+      // Set to 0 if API fails, don't use fallback simulation
+      const additionalEmails = formData.additional || '';
+      const additionalCount = additionalEmails
+        .split('\n')
+        .filter((email: string) => email.trim() !== '').length;
+
+      setEstimatedRecipients({
+        users: 0,
+        additional: additionalCount,
+        total: additionalCount,
+      });
+    }
+  };
+
+  // Listen to form changes
+  const watchedValues = form.watch();
+
+  // Use useEffect to respond to form changes, but only when sheet is open
+  useEffect(() => {
+    if (!open) return; // Only calculate when sheet is open
+
+    const debounceTimer = setTimeout(() => {
+      calculateRecipients();
+    }, 500); // Add debounce to avoid too frequent API calls
+
+    return () => clearTimeout(debounceTimer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    open, // Add open dependency
+    watchedValues.scope,
+    watchedValues.register_start_time,
+    watchedValues.register_end_time,
+    watchedValues.additional,
+  ]);
+
+  const onSubmit = async (data: EmailBroadcastFormData) => {
+    setLoading(true);
+    try {
+      // Validate scheduled send time
+      let scheduled: number | undefined;
+      if (data.scheduled && data.scheduled.trim() !== '') {
+        const scheduledDate = new Date(data.scheduled);
+        const now = new Date();
+        if (scheduledDate <= now) {
+          toast.error(t('scheduledSendTimeMustBeLater'));
+          return;
+        }
+        scheduled = Math.floor(scheduledDate.getTime());
+      }
+
+      let register_start_time: number = 0;
+      let register_end_time: number = 0;
+
+      if (data.register_start_time) {
+        register_start_time = Math.floor(new Date(data.register_start_time).getTime());
+      }
+
+      if (data.register_end_time) {
+        register_end_time = Math.floor(new Date(data.register_end_time).getTime());
+      }
+
+      // Prepare API request data
+      const requestData: API.CreateBatchSendEmailTaskRequest = {
+        subject: data.subject,
+        content: data.content,
+        scope: data.scope,
+        register_start_time,
+        register_end_time,
+        additional: data.additional || undefined,
+        scheduled,
+        interval: data.interval ? data.interval * 1000 : undefined, // Convert seconds to milliseconds
+        limit: data.limit,
+      };
+
+      // Call API to create batch send email task
+      await createBatchSendEmailTask(requestData);
+
+      if (!data.scheduled || data.scheduled.trim() === '') {
+        toast.success(t('emailBroadcastTaskCreatedSuccessfully'));
+      } else {
+        toast.success(t('emailAddedToScheduledQueue'));
+      }
+
+      form.reset();
+      setOpen(false);
+    } catch (error) {
+      console.error('Email broadcast failed:', error);
+      toast.error(t('sendFailed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <div className='flex items-center gap-3'>
+            <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+              <Icon icon='mdi:email-send' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('emailBroadcast')}</p>
+              <p className='text-muted-foreground text-sm'>
+                {t('createNewEmailBroadcastCampaign')}
+              </p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[700px] max-w-full md:max-w-screen-lg'>
+        <SheetHeader>
+          <SheetTitle>{t('createBroadcast')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='broadcast-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <Tabs defaultValue='content' className='space-y-2'>
+                <TabsList className='grid w-full grid-cols-2'>
+                  <TabsTrigger value='content'>{t('content')}</TabsTrigger>
+                  <TabsTrigger value='settings'>{t('sendSettings')}</TabsTrigger>
+                </TabsList>
+                {/* Email Content Tab */}
+                <TabsContent value='content' className='space-y-2'>
+                  <FormField
+                    control={form.control}
+                    name='subject'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('subject')}</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder={`${t('pleaseEnter')} ${t('subject').toLowerCase()}`}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='content'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('content')}</FormLabel>
+                        <FormControl>
+                          <HTMLEditor
+                            value={field.value}
+                            onChange={(value) => {
+                              form.setValue(field.name, value || '');
+                            }}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('useMarkdownEditor')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+
+                {/* Send Settings Tab */}
+                <TabsContent value='settings' className='space-y-2'>
+                  {/* Send scope and estimated recipients */}
+                  <div className='grid grid-cols-2 items-center gap-4'>
+                    <FormField
+                      control={form.control}
+                      name='scope'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('sendScope')}</FormLabel>
+                          <Select
+                            onValueChange={(value) => field.onChange(parseInt(value))}
+                            value={field.value?.toString() || '1'}
+                          >
+                            <FormControl>
+                              <SelectTrigger>
+                                <SelectValue placeholder={t('selectSendScope')} />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              <SelectItem value='1'>{t('allUsers')}</SelectItem> {/* ScopeAll */}
+                              <SelectItem value='2'>{t('subscribedUsersOnly')}</SelectItem>{' '}
+                              {/* ScopeActive */}
+                              <SelectItem value='3'>
+                                {t('expiredSubscriptionUsersOnly')}
+                              </SelectItem>{' '}
+                              {/* ScopeExpired */}
+                              <SelectItem value='4'>{t('noSubscriptionUsersOnly')}</SelectItem>{' '}
+                              {/* ScopeNone */}
+                              <SelectItem value='5'>{t('specificUsersOnly')}</SelectItem>{' '}
+                              {/* ScopeSkip */}
+                            </SelectContent>
+                          </Select>
+                          <FormDescription>{t('sendScopeDescription')}</FormDescription>
+                        </FormItem>
+                      )}
+                    />
+
+                    {/* Estimated recipients info */}
+                    <div className='flex justify-end'>
+                      <div className='border-l-primary bg-primary/10 border-l-4 px-4 py-3 text-sm'>
+                        <span className='text-muted-foreground'>{t('estimatedRecipients')}: </span>
+                        <span className='text-primary text-lg font-medium'>
+                          {estimatedRecipients.total}
+                        </span>
+                        <span className='text-muted-foreground ml-2 text-xs'>
+                          ({t('users')}: {estimatedRecipients.users}, {t('additional')}:{' '}
+                          {estimatedRecipients.additional})
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className='grid grid-cols-2 gap-4'>
+                    <FormField
+                      control={form.control}
+                      name='register_start_time'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('registrationStartDate')}</FormLabel>
+                          <FormControl>
+                            <EnhancedInput
+                              type='datetime-local'
+                              step='1'
+                              disabled={form.watch('scope') === 5} // ScopeSkip
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            />
+                          </FormControl>
+                          <FormDescription>{t('includeUsersRegisteredAfter')}</FormDescription>
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name='register_end_time'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('registrationEndDate')}</FormLabel>
+                          <FormControl>
+                            <EnhancedInput
+                              type='datetime-local'
+                              step='1'
+                              disabled={form.watch('scope') === 5} // ScopeSkip
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            />
+                          </FormControl>
+                          <FormDescription>{t('includeUsersRegisteredBefore')}</FormDescription>
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+
+                  {/* Additional recipients */}
+                  <FormField
+                    control={form.control}
+                    name='additional'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('additionalRecipientEmails')}</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            placeholder={`${t('pleaseEnter')}${t('additionalRecipientEmails').toLowerCase()}，${t('onePerLine')}，for example:\nexample1@domain.com\nexample2@domain.com\nexample3@domain.com`}
+                            className='min-h-[120px] font-mono text-sm'
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('additionalRecipientsDescription')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  {/* Send time settings */}
+                  <FormField
+                    control={form.control}
+                    name='scheduled'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('scheduledSend')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            type='datetime-local'
+                            step='1'
+                            placeholder={t('leaveEmptyForImmediateSend')}
+                            value={field.value}
+                            onValueChange={field.onChange}
+                          />
+                        </FormControl>
+                        <FormDescription>{t('selectSendTime')}</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  {/* Send rate control */}
+                  <div className='grid grid-cols-2 gap-4'>
+                    <FormField
+                      control={form.control}
+                      name='interval'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('emailInterval')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              type='number'
+                              min={1}
+                              step={0.1}
+                              placeholder='1'
+                              {...field}
+                              onChange={(e) => field.onChange(parseFloat(e.target.value) || 1)}
+                            />
+                          </FormControl>
+                          <FormDescription>{t('intervalTimeBetweenEmails')}</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name='limit'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('dailySendLimit')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              type='number'
+                              min={1}
+                              step={1}
+                              placeholder='1000'
+                              {...field}
+                              onChange={(e) => field.onChange(parseInt(e.target.value) || 1000)}
+                            />
+                          </FormControl>
+                          <FormDescription>{t('maximumNumberPerDay')}</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </TabsContent>
+              </Tabs>
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex flex-row items-center justify-end gap-2 pt-3'>
+          <Button variant='outline' onClick={() => setOpen(false)}>
+            {t('cancel')}
+          </Button>
+          <Button type='submit' form='broadcast-form' disabled={loading}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 h-4 w-4 animate-spin' />}
+            {loading
+              ? t('processing')
+              : !form.watch('scheduled') || form.watch('scheduled')?.trim() === ''
+                ? t('sendNow')
+                : t('scheduleSend')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/marketing/email/task-manager.tsx
+++ b/apps/admin/app/dashboard/marketing/email/task-manager.tsx
@ -0,0 +1,259 @@
+'use client';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import { getBatchSendEmailTaskList, stopBatchSendEmailTask } from '@/services/admin/marketing';
+import { formatDate } from '@/utils/common';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@workspace/ui/components/dialog';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+
+export default function EmailTaskManager() {
+  const t = useTranslations('marketing');
+  const ref = useRef<ProTableActions>(null);
+
+  const [selectedTask, setSelectedTask] = useState<API.BatchSendEmailTask | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const stopTask = async (taskId: number) => {
+    try {
+      await stopBatchSendEmailTask({
+        id: taskId,
+      });
+      toast.success(t('taskStoppedSuccessfully'));
+      ref.current?.refresh();
+    } catch (error) {
+      console.error('Failed to stop task:', error);
+      toast.error(t('failedToStopTask'));
+    }
+  };
+
+  const getStatusBadge = (status: number) => {
+    const statusConfig = {
+      0: { label: t('notStarted'), variant: 'secondary' as const },
+      1: { label: t('inProgress'), variant: 'default' as const },
+      2: { label: t('completed'), variant: 'default' as const },
+    };
+
+    const config = statusConfig[status as keyof typeof statusConfig] || {
+      label: `${t('status')} ${status}`,
+      variant: 'secondary' as const,
+    };
+
+    return <Badge variant={config.variant}>{config.label}</Badge>;
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <div className='flex items-center gap-3'>
+            <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+              <Icon icon='mdi:email-multiple' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('emailTaskManager')}</p>
+              <p className='text-muted-foreground text-sm'>
+                {t('viewAndManageEmailBroadcastTasks')}
+              </p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[1000px] max-w-full md:max-w-screen-lg'>
+        <SheetHeader>
+          <SheetTitle>{t('emailBroadcastTasks')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-env(safe-area-inset-top))] px-6'>
+          <div className='mt-4 space-y-4'>
+            <ProTable<API.BatchSendEmailTask, API.GetBatchSendEmailTaskListParams>
+              action={ref}
+              columns={[
+                {
+                  accessorKey: 'subject',
+                  header: t('subject'),
+                  cell: ({ row }) => (
+                    <div
+                      className='max-w-[200px] truncate font-medium'
+                      title={row.getValue('subject') as string}
+                    >
+                      {row.getValue('subject') as string}
+                    </div>
+                  ),
+                },
+                {
+                  accessorKey: 'scope',
+                  header: t('recipientType'),
+                  cell: ({ row }) => {
+                    const scope = row.original.scope;
+                    const scopeLabels = {
+                      1: t('allUsers'), // ScopeAll
+                      2: t('subscribedUsers'), // ScopeActive
+                      3: t('expiredUsers'), // ScopeExpired
+                      4: t('nonSubscribers'), // ScopeNone
+                      5: t('specificUsers'), // ScopeSkip
+                    };
+                    return (
+                      scopeLabels[scope as keyof typeof scopeLabels] || `${t('scope')} ${scope}`
+                    );
+                  },
+                },
+                {
+                  accessorKey: 'status',
+                  header: t('status'),
+                  cell: ({ row }) => getStatusBadge(row.getValue('status') as number),
+                },
+                {
+                  accessorKey: 'progress',
+                  header: t('progress'),
+                  cell: ({ row }) => {
+                    const task = row.original as API.BatchSendEmailTask;
+                    const progress = task.total > 0 ? (task.current / task.total) * 100 : 0;
+                    return (
+                      <div className='space-y-1'>
+                        <div className='flex justify-between text-sm'>
+                          <span>
+                            {task.current} / {task.total}
+                          </span>
+                          <span>{progress.toFixed(1)}%</span>
+                        </div>
+                        <div className='bg-muted h-2 overflow-hidden rounded-full'>
+                          <div
+                            className='bg-primary h-full transition-all duration-300'
+                            style={{ width: `${progress}%` }}
+                          />
+                        </div>
+                      </div>
+                    );
+                  },
+                },
+                {
+                  accessorKey: 'scheduled',
+                  header: t('sendTime'),
+                  cell: ({ row }) => {
+                    const scheduled = row.getValue('scheduled') as number;
+                    return scheduled && scheduled > 0 ? formatDate(scheduled) : '--';
+                  },
+                },
+                {
+                  accessorKey: 'created_at',
+                  header: t('createdAt'),
+                  cell: ({ row }) => {
+                    const createdAt = row.getValue('created_at') as number;
+                    return formatDate(createdAt);
+                  },
+                },
+              ]}
+              request={async (pagination, filters) => {
+                const response = await getBatchSendEmailTaskList({
+                  ...filters,
+                  page: pagination.page,
+                  size: pagination.size,
+                });
+                return {
+                  list: response.data?.data?.list || [],
+                  total: response.data?.data?.total || 0,
+                };
+              }}
+              params={[
+                {
+                  key: 'status',
+                  placeholder: t('status'),
+                  options: [
+                    { label: t('notStarted'), value: '0' },
+                    { label: t('inProgress'), value: '1' },
+                    { label: t('completed'), value: '2' },
+                  ],
+                },
+                {
+                  key: 'scope',
+                  placeholder: t('sendScope'),
+                  options: [
+                    { label: t('allUsers'), value: '1' },
+                    { label: t('subscribedUsers'), value: '2' },
+                    { label: t('expiredUsers'), value: '3' },
+                    { label: t('nonSubscribers'), value: '4' },
+                    { label: t('specificUsers'), value: '5' },
+                  ],
+                },
+              ]}
+              actions={{
+                render: (row) => {
+                  return [
+                    <Dialog key='view-content'>
+                      <DialogTrigger asChild>
+                        <Button
+                          variant='outline'
+                          size='icon'
+                          onClick={() => setSelectedTask(row as API.BatchSendEmailTask)}
+                        >
+                          <Icon icon='mdi:eye' />
+                        </Button>
+                      </DialogTrigger>
+                      <DialogContent className='max-h-[80vh] max-w-4xl'>
+                        <DialogHeader>
+                          <DialogTitle>{t('emailContent')}</DialogTitle>
+                        </DialogHeader>
+                        <ScrollArea className='h-[60vh] pr-4'>
+                          {selectedTask && (
+                            <div className='space-y-4'>
+                              <div>
+                                <h4 className='text-muted-foreground mb-2 text-sm font-medium'>
+                                  {t('subject')}
+                                </h4>
+                                <p className='font-medium'>{selectedTask.subject}</p>
+                              </div>
+                              <div>
+                                <h4 className='text-muted-foreground mb-2 text-sm font-medium'>
+                                  {t('content')}
+                                </h4>
+                                <div dangerouslySetInnerHTML={{ __html: selectedTask.content }} />
+                              </div>
+                              {selectedTask.additional && (
+                                <div>
+                                  <h4 className='text-muted-foreground mb-2 text-sm font-medium'>
+                                    {t('additionalRecipients')}
+                                  </h4>
+                                  <p className='text-sm'>{selectedTask.additional}</p>
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </ScrollArea>
+                      </DialogContent>
+                    </Dialog>,
+                    ...([0, 1].includes(row.status)
+                      ? [
+                          <Button key='stop' variant='destructive' onClick={() => stopTask(row.id)}>
+                            {t('stop')}
+                          </Button>,
+                        ]
+                      : []),
+                  ];
+                },
+              }}
+            />
+          </div>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/marketing/page.tsx
+++ b/apps/admin/app/dashboard/marketing/page.tsx
@ -0,0 +1,47 @@
+'use client';
+
+import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
+import { useTranslations } from 'next-intl';
+import EmailBroadcastForm from './email/broadcast-form';
+import EmailTaskManager from './email/task-manager';
+import QuotaBroadcastForm from './quota/broadcast-form';
+import QuotaTaskManager from './quota/task-manager';
+
+export default function MarketingPage() {
+  const t = useTranslations('marketing');
+
+  const formSections = [
+    {
+      title: t('emailMarketing'),
+      forms: [{ component: EmailBroadcastForm }, { component: EmailTaskManager }],
+    },
+    {
+      title: t('quotaService'),
+      forms: [{ component: QuotaBroadcastForm }, { component: QuotaTaskManager }],
+    },
+  ];
+
+  return (
+    <div className='space-y-8'>
+      {formSections.map((section, sectionIndex) => (
+        <div key={sectionIndex}>
+          <h2 className='mb-4 text-lg font-semibold'>{section.title}</h2>
+          <Table>
+            <TableBody>
+              {section.forms.map((form, formIndex) => {
+                const FormComponent = form.component;
+                return (
+                  <TableRow key={formIndex}>
+                    <TableCell>
+                      <FormComponent />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/apps/admin/app/dashboard/marketing/quota/broadcast-form.tsx
+++ b/apps/admin/app/dashboard/marketing/quota/broadcast-form.tsx
@ -0,0 +1,446 @@
+'use client';
+
+import { Display } from '@/components/display';
+import { createQuotaTask, queryQuotaTaskPreCount } from '@/services/admin/marketing';
+import { useSubscribe } from '@/store/subscribe';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { RadioGroup, RadioGroupItem } from '@workspace/ui/components/radio-group';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Switch } from '@workspace/ui/components/switch';
+import { Combobox } from '@workspace/ui/custom-components/combobox';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { unitConversion } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+export default function QuotaBroadcastForm() {
+  const t = useTranslations('marketing');
+
+  // Define schema with internationalized error messages
+  const quotaBroadcastSchema = z.object({
+    subscribers: z.array(z.number()).min(1, t('pleaseSelectSubscribers')),
+    is_active: z.boolean(),
+    start_time: z.string().optional(),
+    end_time: z.string().optional(),
+    reset_traffic: z.boolean(),
+    days: z.number().optional(),
+    gift_type: z.number(),
+    gift_value: z.number().optional(),
+  });
+
+  type QuotaBroadcastFormData = z.infer<typeof quotaBroadcastSchema>;
+
+  const form = useForm<QuotaBroadcastFormData>({
+    resolver: zodResolver(quotaBroadcastSchema),
+    mode: 'onChange', // Enable real-time validation
+    defaultValues: {
+      subscribers: [],
+      is_active: true,
+      start_time: '',
+      end_time: '',
+      reset_traffic: false,
+      days: 0,
+      gift_type: 1,
+      gift_value: 0,
+    },
+  });
+
+  const [recipients, setRecipients] = useState<number>(0);
+  const [isCalculating, setIsCalculating] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  const { subscribes } = useSubscribe();
+
+  // Calculate recipient count
+  const calculateRecipients = async () => {
+    setIsCalculating(true);
+    try {
+      const formData = form.getValues();
+      let start_time: number = 0;
+      let end_time: number = 0;
+
+      if (formData.start_time) {
+        start_time = new Date(formData.start_time).getTime();
+      }
+
+      if (formData.end_time) {
+        end_time = new Date(formData.end_time).getTime();
+      }
+
+      const response = await queryQuotaTaskPreCount({
+        subscribers: formData.subscribers,
+        is_active: formData.is_active,
+        start_time,
+        end_time,
+      });
+
+      if (response.data?.data?.count !== undefined) {
+        setRecipients(response.data.data.count);
+      }
+    } catch (error) {
+      console.error('Failed to calculate recipients:', error);
+      toast.error(t('failedToCalculateRecipients'));
+      setRecipients(0);
+    } finally {
+      setIsCalculating(false);
+    }
+  };
+
+  // Watch form values and recalculate recipients only when sheet is open
+  const watchedValues = form.watch();
+
+  useEffect(() => {
+    if (!open) return; // Only calculate when sheet is open
+
+    const debounceTimer = setTimeout(() => {
+      calculateRecipients();
+    }, 500); // Add debounce to avoid too frequent API calls
+
+    return () => clearTimeout(debounceTimer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    open,
+    watchedValues.subscribers,
+    watchedValues.is_active,
+    watchedValues.start_time,
+    watchedValues.end_time,
+  ]);
+
+  const onSubmit = async (data: QuotaBroadcastFormData) => {
+    setIsSubmitting(true);
+    try {
+      let start_time: number = 0;
+      let end_time: number = 0;
+
+      if (data.start_time) {
+        start_time = Math.floor(new Date(data.start_time).getTime());
+      }
+
+      if (data.end_time) {
+        end_time = Math.floor(new Date(data.end_time).getTime());
+      }
+
+      await createQuotaTask({
+        subscribers: data.subscribers,
+        is_active: data.is_active,
+        start_time,
+        end_time,
+        reset_traffic: data.reset_traffic,
+        days: data.days || 0,
+        gift_type: data.gift_type,
+        gift_value: data.gift_value || 0,
+      });
+
+      toast.success(t('quotaTaskCreatedSuccessfully'));
+      form.reset();
+      setRecipients(0);
+      setOpen(false); // Close the sheet after successful submission
+    } catch (error) {
+      console.error('Failed to create quota task:', error);
+      toast.error(t('failedToCreateQuotaTask'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <div className='flex items-center gap-3'>
+            <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+              <Icon icon='mdi:gift' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('quotaBroadcast')}</p>
+              <p className='text-muted-foreground text-sm'>{t('createAndSendQuotaTasks')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('createQuotaTask')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-32px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='quota-broadcast-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='mt-4 space-y-6'
+            >
+              {/* Subscribers selection */}
+              <FormField
+                control={form.control}
+                name='subscribers'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('subscribers')}</FormLabel>
+                    <FormControl>
+                      <Combobox
+                        multiple={true}
+                        value={field.value || []}
+                        onChange={field.onChange}
+                        placeholder={t('pleaseSelectSubscribers')}
+                        options={subscribes?.map((subscribe) => ({
+                          value: subscribe.id!,
+                          label: subscribe.name!,
+                          children: (
+                            <div>
+                              <div>{subscribe.name}</div>
+                              <div className='text-muted-foreground text-xs'>
+                                <Display type='traffic' value={subscribe.traffic || 0} /> /{' '}
+                                <Display type='currency' value={subscribe.unit_price || 0} />
+                              </div>
+                            </div>
+                          ),
+                        }))}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Subscription count info and active status */}
+              <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                <FormField
+                  control={form.control}
+                  name='is_active'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('validOnly')}</FormLabel>
+                      <FormControl>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                          className='float-end !mt-0'
+                        />
+                      </FormControl>
+                      <FormDescription>{t('selectValidSubscriptionsOnly')}</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <div className='border-l-primary bg-primary/10 flex items-center border-l-4 px-4 py-3 text-sm'>
+                  <span className='text-muted-foreground'>{t('subscriptionCount')}: </span>
+                  <span className='text-primary text-lg font-medium'>
+                    {isCalculating ? (
+                      <Icon icon='mdi:loading' className='ml-2 h-4 w-4 animate-spin' />
+                    ) : (
+                      recipients.toLocaleString()
+                    )}
+                  </span>
+                </div>
+              </div>
+
+              {/* Subscription validity period range */}
+              <div className='grid grid-cols-2 gap-4'>
+                <FormField
+                  control={form.control}
+                  name='start_time'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('subscriptionValidityStartDate')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          type='datetime-local'
+                          step='1'
+                          value={field.value}
+                          onValueChange={field.onChange}
+                        />
+                      </FormControl>
+                      <FormDescription>{t('includeSubscriptionsValidAfter')}</FormDescription>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='end_time'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('subscriptionValidityEndDate')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          type='datetime-local'
+                          step='1'
+                          value={field.value}
+                          onValueChange={field.onChange}
+                        />
+                      </FormControl>
+                      <FormDescription>{t('includeSubscriptionsValidBefore')}</FormDescription>
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              {/* Reset traffic */}
+              <FormField
+                control={form.control}
+                name='reset_traffic'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('resetTraffic')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('resetTrafficDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Quota days */}
+              <FormField
+                control={form.control}
+                name='days'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('quotaDays')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        type='number'
+                        min={1}
+                        value={field.value?.toString()}
+                        onValueChange={(value) => field.onChange(parseInt(value, 10))}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('numberOfDaysForTheQuota')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Gift configuration */}
+              <FormField
+                control={form.control}
+                name='gift_type'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('giftType')}</FormLabel>
+                    <FormControl>
+                      <RadioGroup
+                        defaultValue={String(field.value)}
+                        onValueChange={(value) => {
+                          field.onChange(Number(value));
+                          form.setValue('gift_value', 0);
+                        }}
+                        className='flex gap-4'
+                      >
+                        <FormItem className='flex items-center space-x-3 space-y-0'>
+                          <FormControl>
+                            <RadioGroupItem value='1' />
+                          </FormControl>
+                          <FormLabel className='font-normal'>{t('fixedAmount')}</FormLabel>
+                        </FormItem>
+                        <FormItem className='flex items-center space-x-3 space-y-0'>
+                          <FormControl>
+                            <RadioGroupItem value='2' />
+                          </FormControl>
+                          <FormLabel className='font-normal'>{t('percentageAmount')}</FormLabel>
+                        </FormItem>
+                      </RadioGroup>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Gift amount based on type */}
+              {form.watch('gift_type') === 1 && (
+                <FormField
+                  control={form.control}
+                  name='gift_value'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('giftAmount')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput<number>
+                          placeholder={t('enterAmount')}
+                          type='number'
+                          value={field.value}
+                          formatInput={(value) => unitConversion('centsToDollars', value)}
+                          formatOutput={(value) => unitConversion('dollarsToCents', value)}
+                          onValueChange={(value) => field.onChange(value)}
+                          min={1}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+              {form.watch('gift_type') === 2 && (
+                <FormField
+                  control={form.control}
+                  name='gift_value'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('giftAmount')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          placeholder={t('enterPercentage')}
+                          type='number'
+                          suffix='%'
+                          value={field.value}
+                          onValueChange={(value) => field.onChange(value)}
+                          min={1}
+                          max={100}
+                        />
+                      </FormControl>
+                      <FormDescription>{t('percentageAmountDescription')}</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex flex-row items-center justify-end gap-2 pt-3'>
+          <Button variant='outline' onClick={() => setOpen(false)}>
+            {t('cancel')}
+          </Button>
+          <Button
+            type='submit'
+            form='quota-broadcast-form'
+            disabled={
+              isSubmitting || !form.formState.isValid || form.watch('subscribers').length === 0
+            }
+          >
+            {isSubmitting && <Icon icon='mdi:loading' className='mr-2 h-4 w-4 animate-spin' />}
+            {t('createQuotaTask')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/marketing/quota/task-manager.tsx
+++ b/apps/admin/app/dashboard/marketing/quota/task-manager.tsx
@ -0,0 +1,230 @@
+'use client';
+
+import { Display } from '@/components/display';
+import { ProTable } from '@/components/pro-table';
+import { queryQuotaTaskList } from '@/services/admin/marketing';
+import { useSubscribe } from '@/store/subscribe';
+import { formatDate } from '@/utils/common';
+import { Badge } from '@workspace/ui/components/badge';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+export default function QuotaTaskManager() {
+  const t = useTranslations('marketing');
+  const [open, setOpen] = useState(false);
+
+  const { subscribes } = useSubscribe();
+  const subscribeMap =
+    subscribes?.reduce(
+      (acc, subscribe) => {
+        acc[subscribe.id!] = subscribe.name!;
+        return acc;
+      },
+      {} as Record<number, string>,
+    ) || {};
+
+  const getStatusBadge = (status: number) => {
+    const statusConfig = {
+      0: { label: t('notStarted'), variant: 'secondary' as const },
+      1: { label: t('inProgress'), variant: 'default' as const },
+      2: { label: t('completed'), variant: 'default' as const },
+    };
+
+    const config = statusConfig[status as keyof typeof statusConfig] || {
+      label: `${t('status')} ${status}`,
+      variant: 'secondary' as const,
+    };
+
+    return <Badge variant={config.variant}>{config.label}</Badge>;
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <div className='flex items-center gap-3'>
+            <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+              <Icon icon='mdi:database-plus' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('quotaTaskManager')}</p>
+              <p className='text-muted-foreground text-sm'>{t('viewAndManageQuotaTasks')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[1000px] max-w-full md:max-w-screen-lg'>
+        <SheetHeader>
+          <SheetTitle>{t('quotaTasks')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-env(safe-area-inset-top))] px-6'>
+          <div className='mt-4 space-y-4'>
+            {open && (
+              <ProTable<API.QuotaTask, API.QueryQuotaTaskListParams>
+                columns={[
+                  {
+                    accessorKey: 'subscribers',
+                    header: t('subscribers'),
+                    size: 200,
+                    cell: ({ row }) => {
+                      const subscribers = row.getValue('subscribers') as number[];
+                      const subscriptionNames =
+                        subscribers?.map((id) => subscribeMap[id]).filter(Boolean) || [];
+
+                      if (subscriptionNames.length === 0) {
+                        return (
+                          <span className='text-muted-foreground text-sm'>
+                            {t('noSubscriptions')}
+                          </span>
+                        );
+                      }
+
+                      return (
+                        <div className='flex flex-wrap gap-1'>
+                          {subscriptionNames.map((name, index) => (
+                            <span key={index} className='bg-muted rounded px-2 py-1 text-xs'>
+                              {name}
+                            </span>
+                          ))}
+                        </div>
+                      );
+                    },
+                  },
+                  {
+                    accessorKey: 'is_active',
+                    header: t('validOnly'),
+                    size: 120,
+                    cell: ({ row }) => {
+                      const isActive = row.getValue('is_active') as boolean;
+                      return <span className='text-sm'>{isActive ? t('yes') : t('no')}</span>;
+                    },
+                  },
+                  {
+                    accessorKey: 'reset_traffic',
+                    header: t('resetTraffic'),
+                    size: 120,
+                    cell: ({ row }) => {
+                      const resetTraffic = row.getValue('reset_traffic') as boolean;
+                      return <span className='text-sm'>{resetTraffic ? t('yes') : t('no')}</span>;
+                    },
+                  },
+                  {
+                    accessorKey: 'gift_value',
+                    header: t('giftAmount'),
+                    size: 120,
+                    cell: ({ row }) => {
+                      const giftValue = row.getValue('gift_value') as number;
+                      const task = row.original as API.QuotaTask;
+                      const giftType = task.gift_type;
+
+                      return (
+                        <div className='text-sm font-medium'>
+                          {giftType === 1 ? (
+                            <Display type='currency' value={giftValue} />
+                          ) : (
+                            `${giftValue}%`
+                          )}
+                        </div>
+                      );
+                    },
+                  },
+                  {
+                    accessorKey: 'days',
+                    header: t('quotaDays'),
+                    size: 100,
+                    cell: ({ row }) => {
+                      const days = row.getValue('days') as number;
+                      return (
+                        <span className='font-medium'>
+                          {days} {t('days')}
+                        </span>
+                      );
+                    },
+                  },
+                  {
+                    accessorKey: 'time_range',
+                    header: t('timeRange'),
+                    size: 180,
+                    cell: ({ row }) => {
+                      const task = row.original as API.QuotaTask;
+                      const startTime = task.start_time;
+                      const endTime = task.end_time;
+
+                      if (!startTime && !endTime) {
+                        return (
+                          <span className='text-muted-foreground text-sm'>{t('noTimeLimit')}</span>
+                        );
+                      }
+
+                      return (
+                        <div className='space-y-1 text-xs'>
+                          {startTime && (
+                            <div>
+                              {t('startTime')}: {formatDate(startTime)}
+                            </div>
+                          )}
+                          {endTime && (
+                            <div>
+                              {t('endTime')}: {formatDate(endTime)}
+                            </div>
+                          )}
+                        </div>
+                      );
+                    },
+                  },
+                  {
+                    accessorKey: 'status',
+                    header: t('status'),
+                    size: 100,
+                    cell: ({ row }) => getStatusBadge(row.getValue('status') as number),
+                  },
+                  {
+                    accessorKey: 'created_at',
+                    header: t('createdAt'),
+                    size: 150,
+                    cell: ({ row }) => {
+                      const createdAt = row.getValue('created_at') as number;
+                      return formatDate(createdAt);
+                    },
+                  },
+                ]}
+                request={async (pagination, filters) => {
+                  const response = await queryQuotaTaskList({
+                    ...filters,
+                    page: pagination.page,
+                    size: pagination.size,
+                  });
+                  return {
+                    list: response.data?.data?.list || [],
+                    total: response.data?.data?.total || 0,
+                  };
+                }}
+                params={[
+                  {
+                    key: 'status',
+                    placeholder: t('status'),
+                    options: [
+                      { label: t('notStarted'), value: '0' },
+                      { label: t('inProgress'), value: '1' },
+                      { label: t('completed'), value: '2' },
+                    ],
+                  },
+                ]}
+              />
+            )}
+          </div>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/nodes/node-form.tsx
+++ b/apps/admin/app/dashboard/nodes/node-form.tsx
@ -0,0 +1,367 @@
+'use client';
+
+import { useNode } from '@/store/node';
+import { useServer } from '@/store/server';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Combobox } from '@workspace/ui/custom-components/combobox';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import TagInput from '@workspace/ui/custom-components/tag-input';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+export type ProtocolName =
+  | 'shadowsocks'
+  | 'vmess'
+  | 'vless'
+  | 'trojan'
+  | 'hysteria'
+  | 'tuic'
+  | 'anytls'
+  | 'naive'
+  | 'http'
+  | 'socks'
+  | 'mieru';
+
+const buildSchema = (t: ReturnType<typeof useTranslations>) =>
+  z.object({
+    name: z.string().trim().min(1, t('errors.nameRequired')),
+    server_id: z
+      .number({ message: t('errors.serverRequired') })
+      .int()
+      .gt(0, t('errors.serverRequired'))
+      .optional(),
+    protocol: z.string().min(1, t('errors.protocolRequired')),
+    address: z.string().trim().min(1, t('errors.serverAddrRequired')),
+    port: z
+      .number({ message: t('errors.portRange') })
+      .int()
+      .min(1, t('errors.portRange'))
+      .max(65535, t('errors.portRange')),
+    tags: z.array(z.string()),
+  });
+
+export type NodeFormValues = z.infer<ReturnType<typeof buildSchema>>;
+
+export default function NodeForm(props: {
+  trigger: string;
+  title: string;
+  loading?: boolean;
+  initialValues?: Partial<NodeFormValues>;
+  onSubmit: (values: NodeFormValues) => Promise<boolean> | boolean;
+}) {
+  const { trigger, title, loading, initialValues, onSubmit } = props;
+  const t = useTranslations('nodes');
+  const Scheme = useMemo(() => buildSchema(t), [t]);
+  const [open, setOpen] = useState(false);
+
+  const [autoFilledFields, setAutoFilledFields] = useState<Set<string>>(new Set());
+
+  const addAutoFilledField = (fieldName: string) => {
+    setAutoFilledFields((prev) => new Set(prev).add(fieldName));
+  };
+
+  const removeAutoFilledField = (fieldName: string) => {
+    setAutoFilledFields((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(fieldName);
+      return newSet;
+    });
+  };
+
+  const form = useForm<NodeFormValues>({
+    resolver: zodResolver(Scheme),
+    defaultValues: {
+      name: '',
+      server_id: undefined,
+      protocol: '',
+      address: '',
+      port: 0,
+      tags: [],
+      ...initialValues,
+    },
+  });
+
+  const serverId = form.watch('server_id');
+
+  const { servers, getAvailableProtocols } = useServer();
+  const { tags } = useNode();
+
+  const existingTags: string[] = tags || [];
+
+  const availableProtocols = getAvailableProtocols(serverId);
+
+  useEffect(() => {
+    if (initialValues) {
+      form.reset({
+        name: '',
+        server_id: undefined,
+        protocol: '',
+        address: '',
+        port: 0,
+        tags: [],
+        ...initialValues,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialValues]);
+
+  function handleServerChange(nextId?: number | null) {
+    const id = nextId ?? undefined;
+    form.setValue('server_id', id);
+
+    if (!id) {
+      setAutoFilledFields(new Set());
+      return;
+    }
+
+    const selectedServer = servers.find((s) => s.id === id);
+    if (!selectedServer) return;
+
+    const currentValues = form.getValues();
+    const fieldsToFill: string[] = [];
+
+    if (!currentValues.name || autoFilledFields.has('name')) {
+      form.setValue('name', selectedServer.name as string, { shouldDirty: false });
+      fieldsToFill.push('name');
+    }
+
+    if (!currentValues.address || autoFilledFields.has('address')) {
+      form.setValue('address', selectedServer.address as string, { shouldDirty: false });
+      fieldsToFill.push('address');
+    }
+
+    const protocols = getAvailableProtocols(id);
+    const firstProtocol = protocols[0];
+
+    if (firstProtocol && (!currentValues.protocol || autoFilledFields.has('protocol'))) {
+      form.setValue('protocol', firstProtocol.protocol, { shouldDirty: false });
+      fieldsToFill.push('protocol');
+
+      if (!currentValues.port || currentValues.port === 0 || autoFilledFields.has('port')) {
+        const port = firstProtocol.port || 0;
+        form.setValue('port', port, { shouldDirty: false });
+        fieldsToFill.push('port');
+      }
+    }
+
+    setAutoFilledFields(new Set(fieldsToFill));
+  }
+
+  const handleManualFieldChange = (fieldName: keyof NodeFormValues, value: any) => {
+    form.setValue(fieldName, value);
+    removeAutoFilledField(fieldName);
+  };
+
+  function handleProtocolChange(nextProto?: ProtocolName | null) {
+    const protocol = (nextProto || '') as ProtocolName | '';
+    form.setValue('protocol', protocol);
+
+    if (!protocol || !serverId) {
+      removeAutoFilledField('protocol');
+      return;
+    }
+
+    const currentValues = form.getValues();
+    const isPortAutoFilled = autoFilledFields.has('port');
+
+    removeAutoFilledField('protocol');
+
+    if (!currentValues.port || currentValues.port === 0 || isPortAutoFilled) {
+      const protocolData = availableProtocols.find((p) => p.protocol === protocol);
+
+      if (protocolData) {
+        const port = protocolData.port || 0;
+        form.setValue('port', port, { shouldDirty: false });
+        addAutoFilledField('port');
+      }
+    }
+  }
+
+  async function handleSubmit(values: NodeFormValues) {
+    const result = await onSubmit(values);
+    if (result) {
+      setOpen(false);
+      setAutoFilledFields(new Set());
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          onClick={() => {
+            form.reset();
+            setAutoFilledFields(new Set());
+          }}
+        >
+          {trigger}
+        </Button>
+      </SheetTrigger>
+
+      <SheetContent className='w-[560px] max-w-full'>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6 pt-4'>
+          <Form {...form}>
+            <form className='grid grid-cols-1 gap-4'>
+              <FormField
+                control={form.control}
+                name='server_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('server')}</FormLabel>
+                    <FormControl>
+                      <Combobox<number, false>
+                        placeholder={t('select_server')}
+                        value={field.value}
+                        options={servers.map((s) => ({
+                          value: s.id,
+                          label: `${s.name} (${(s.address as any) || ''})`,
+                        }))}
+                        onChange={(v) => handleServerChange(v)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='protocol'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('protocol')}</FormLabel>
+                    <FormControl>
+                      <Combobox<string, false>
+                        placeholder={t('select_protocol')}
+                        value={field.value}
+                        options={availableProtocols.map((p) => ({
+                          value: p.protocol,
+                          label: `${p.protocol}${p.port ? ` (${p.port})` : ''}`,
+                        }))}
+                        onChange={(v) => handleProtocolChange((v as ProtocolName) || null)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='name'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('name')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        {...field}
+                        onValueChange={(v) => handleManualFieldChange('name', v as string)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='address'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('address')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        {...field}
+                        onValueChange={(v) => handleManualFieldChange('address', v as string)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='port'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('port')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        {...field}
+                        type='number'
+                        min={1}
+                        max={65535}
+                        placeholder='1-65535'
+                        onValueChange={(v) => handleManualFieldChange('port', Number(v))}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='tags'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('tags')}</FormLabel>
+                    <FormControl>
+                      <TagInput
+                        placeholder={t('tags_placeholder')}
+                        value={field.value || []}
+                        onChange={(v) => form.setValue(field.name, v)}
+                        options={existingTags}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('tags_description')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('cancel')}
+          </Button>
+          <Button
+            disabled={loading}
+            onClick={form.handleSubmit(handleSubmit, (errors) => {
+              const key = Object.keys(errors)[0] as keyof typeof errors;
+              if (key) toast.error(String(errors[key]?.message));
+              return false;
+            })}
+          >
+            {t('confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/nodes/page.tsx
+++ b/apps/admin/app/dashboard/nodes/page.tsx
@ -0,0 +1,246 @@
+'use client';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  createNode,
+  deleteNode,
+  filterNodeList,
+  resetSortWithNode,
+  toggleNodeStatus,
+  updateNode,
+} from '@/services/admin/server';
+import { useNode } from '@/store/node';
+import { useServer } from '@/store/server';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import { Switch } from '@workspace/ui/components/switch';
+import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import NodeForm from './node-form';
+
+export default function NodesPage() {
+  const t = useTranslations('nodes');
+  const ref = useRef<ProTableActions>(null);
+  const [loading, setLoading] = useState(false);
+
+  // Use our zustand store for server data
+  const { getServerName, getServerAddress, getProtocolPort } = useServer();
+  const { fetchNodes, fetchTags } = useNode();
+
+  return (
+    <ProTable<API.Node, { search: string }>
+      action={ref}
+      header={{
+        title: t('pageTitle'),
+        toolbar: (
+          <NodeForm
+            trigger={t('create')}
+            title={t('drawerCreateTitle')}
+            loading={loading}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                const body: API.CreateNodeRequest = {
+                  name: values.name,
+                  server_id: Number(values.server_id!),
+                  protocol: values.protocol,
+                  address: values.address,
+                  port: Number(values.port!),
+                  tags: values.tags || [],
+                  enabled: false,
+                };
+                await createNode(body);
+                toast.success(t('created'));
+                ref.current?.refresh();
+                fetchNodes();
+                fetchTags();
+                setLoading(false);
+                return true;
+              } catch (e) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />
+        ),
+      }}
+      columns={[
+        {
+          id: 'enabled',
+          header: t('enabled'),
+          cell: ({ row }) => (
+            <Switch
+              checked={row.original.enabled}
+              onCheckedChange={async (v) => {
+                await toggleNodeStatus({ id: row.original.id, enable: v });
+                toast.success(v ? t('enabled_on') : t('enabled_off'));
+                ref.current?.refresh();
+                fetchNodes();
+                fetchTags();
+              }}
+            />
+          ),
+        },
+        { accessorKey: 'name', header: t('name') },
+
+        {
+          id: 'address_port',
+          header: `${t('address')}:${t('port')}`,
+          cell: ({ row }) => `${row.original.address || '—'}:${row.original.port || '—'}`,
+        },
+
+        {
+          id: 'server_id',
+          header: t('server'),
+          cell: ({ row }) =>
+            `${getServerName(row.original.server_id)}:${getServerAddress(row.original.server_id)}`,
+        },
+        {
+          id: 'protocol',
+          header: ` ${t('protocol')}:${t('port')}`,
+          cell: ({ row }) =>
+            `${row.original.protocol}:${getProtocolPort(row.original.server_id, row.original.protocol)}`,
+        },
+        {
+          accessorKey: 'tags',
+          header: t('tags'),
+          cell: ({ row }) => (
+            <div className='flex flex-wrap gap-1'>
+              {(row.original.tags || []).length === 0
+                ? '—'
+                : row.original.tags.map((tg) => (
+                    <Badge key={tg} variant='outline'>
+                      {tg}
+                    </Badge>
+                  ))}
+            </div>
+          ),
+        },
+      ]}
+      params={[{ key: 'search' }]}
+      request={async (pagination, filter) => {
+        const { data } = await filterNodeList({
+          page: pagination.page,
+          size: pagination.size,
+          search: filter?.search || undefined,
+        });
+        const list = (data?.data?.list || []) as API.Node[];
+        const total = Number(data?.data?.total || list.length);
+        return { list, total };
+      }}
+      actions={{
+        render: (row) => [
+          <NodeForm
+            key='edit'
+            trigger={t('edit')}
+            title={t('drawerEditTitle')}
+            loading={loading}
+            initialValues={row}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                const body: API.UpdateNodeRequest = {
+                  ...row,
+                  ...values,
+                } as any;
+                await updateNode(body);
+                toast.success(t('updated'));
+                ref.current?.refresh();
+                fetchNodes();
+                fetchTags();
+                setLoading(false);
+                return true;
+              } catch (e) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />,
+          <ConfirmButton
+            key='delete'
+            trigger={<Button variant='destructive'>{t('delete')}</Button>}
+            title={t('confirmDeleteTitle')}
+            description={t('confirmDeleteDesc')}
+            onConfirm={async () => {
+              await deleteNode({ id: row.id } as any);
+              toast.success(t('deleted'));
+              ref.current?.refresh();
+              fetchNodes();
+              fetchTags();
+            }}
+            cancelText={t('cancel')}
+            confirmText={t('confirm')}
+          />,
+          <Button
+            key='copy'
+            variant='outline'
+            onClick={async () => {
+              const { id, enabled, created_at, updated_at, sort, ...rest } = row as any;
+              await createNode({
+                ...rest,
+                enabled: false,
+              });
+              toast.success(t('copied'));
+              ref.current?.refresh();
+              fetchNodes();
+              fetchTags();
+            }}
+          >
+            {t('copy')}
+          </Button>,
+        ],
+        batchRender(rows) {
+          return [
+            <ConfirmButton
+              key='delete'
+              trigger={<Button variant='destructive'>{t('delete')}</Button>}
+              title={t('confirmDeleteTitle')}
+              description={t('confirmDeleteDesc')}
+              onConfirm={async () => {
+                await Promise.all(rows.map((r) => deleteNode({ id: r.id } as any)));
+                toast.success(t('deleted'));
+                ref.current?.refresh();
+                fetchNodes();
+                fetchTags();
+              }}
+              cancelText={t('cancel')}
+              confirmText={t('confirm')}
+            />,
+          ];
+        },
+      }}
+      onSort={async (source, target, items) => {
+        const sourceIndex = items.findIndex((item) => String(item.id) === source);
+        const targetIndex = items.findIndex((item) => String(item.id) === target);
+
+        const originalSorts = items.map((item) => item.sort);
+
+        const [movedItem] = items.splice(sourceIndex, 1);
+        items.splice(targetIndex, 0, movedItem!);
+
+        const updatedItems = items.map((item, index) => {
+          const originalSort = originalSorts[index];
+          const newSort = originalSort !== undefined ? originalSort : item.sort;
+          return { ...item, sort: newSort };
+        });
+
+        const changedItems = updatedItems.filter((item, index) => {
+          return item.sort !== items[index]?.sort;
+        });
+
+        if (changedItems.length > 0) {
+          resetSortWithNode({
+            sort: changedItems.map((item) => ({
+              id: item.id,
+              sort: item.sort,
+            })) as API.SortItem[],
+          });
+          toast.success(t('sorted_success'));
+        }
+        return updatedItems;
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/order/page.tsx
+++ b/apps/admin/app/dashboard/order/page.tsx
@ -1,24 +1,25 @@
 'use client';

-import { useQuery } from '@tanstack/react-query';
 import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
 import { useRef } from 'react';

 import { Display } from '@/components/display';
 import { ProTable, ProTableActions } from '@/components/pro-table';
 import { getOrderList, updateOrderStatus } from '@/services/admin/order';
-import { getSubscribeList } from '@/services/admin/subscribe';
+import { useSubscribe } from '@/store/subscribe';
+import { formatDate } from '@/utils/common';
 import { Badge } from '@workspace/ui/components/badge';
 import { Button } from '@workspace/ui/components/button';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@workspace/ui/components/hover-card';
 import { Separator } from '@workspace/ui/components/separator';
 import { Combobox } from '@workspace/ui/custom-components/combobox';
 import { cn } from '@workspace/ui/lib/utils';
-import { formatDate } from '@workspace/ui/utils';
 import { UserDetail } from '../user/user-detail';

-export default function Page(props: any) {
+export default function Page() {
  const t = useTranslations('order');
+  const sp = useSearchParams();

  const statusOptions = [
    { value: 1, label: t('status.1'), className: 'bg-orange-500' },
@ -30,20 +31,19 @@ export default function Page(props: any) {

  const ref = useRef<ProTableActions>(null);

-  const { data: subscribeList } = useQuery({
-    queryKey: ['getSubscribeList', 'all'],
-    queryFn: async () => {
-      const { data } = await getSubscribeList({
-        page: 1,
-        size: 9999,
-      });
-      return data.data?.list as API.SubscribeGroup[];
-    },
-  });
+  const { subscribes, getSubscribeName } = useSubscribe();
+
+  const initialFilters = {
+    search: sp.get('search') || undefined,
+    status: sp.get('status') || undefined,
+    subscribe_id: sp.get('subscribe_id') || undefined,
+    user_id: sp.get('user_id') || undefined,
+  };

  return (
    <ProTable<API.Order, any>
      action={ref}
+      initialFilters={initialFilters}
      columns={[
        {
          accessorKey: 'order_no',
@ -57,8 +57,14 @@ export default function Page(props: any) {
        {
          accessorKey: 'subscribe_id',
          header: t('subscribe'),
-          cell: ({ row }) =>
-            subscribeList?.find((item) => item.id === row.getValue('subscribe_id'))?.name,
+          cell: ({ row }) => {
+            if (row.original.type === 4) {
+              return t(`type.${row.getValue('type')}`);
+            }
+            const name = getSubscribeName(row.getValue('subscribe_id'));
+            const quantity = row.original.quantity;
+            return name ? `${name} × ${quantity}` : '';
+          },
        },
        {
          accessorKey: 'amount',
@ -116,7 +122,7 @@ export default function Page(props: any) {
                <ul className='grid gap-3'>
                  <li className='flex items-center justify-between'>
                    <span className='text-muted-foreground'>{t('method')}</span>
-                    <span>{t(`methods.${row.original.method}`)}</span>
+                    <span>{row.original?.payment?.name || row.original?.payment?.platform}</span>
                  </li>
                </ul>
              </HoverCardContent>
@ -141,7 +147,7 @@ export default function Page(props: any) {
            if ([1, 3, 4].includes(row.getValue('status'))) {
              return (
                <Combobox<number, false>
-                  placeholder='状态'
+                  placeholder={t('status.0')}
                  value={row.original.status}
                  onChange={async (value) => {
                    await updateOrderStatus({
@ -160,7 +166,6 @@ export default function Page(props: any) {
        },
      ]}
      params={[
-        { key: 'search' },
        {
          key: 'status',
          placeholder: t('status.0'),
@ -172,24 +177,20 @@ export default function Page(props: any) {
        {
          key: 'subscribe_id',
          placeholder: `${t('subscribe')}`,
-          options: subscribeList?.map((item) => ({
-            label: item.name,
+          options: subscribes?.map((item) => ({
+            label: item.name!,
            value: String(item.id),
          })),
        },
-      ].concat(
-        props.userId
-          ? []
-          : [
-              {
-                key: 'user_id',
-                placeholder: `${t('user')} ID`,
-                options: undefined,
-              },
-            ],
-      )}
+        { key: 'search' },
+        {
+          key: 'user_id',
+          placeholder: `${t('user')} ID`,
+          options: undefined,
+        },
+      ]}
      request={async (pagination, filter) => {
-        const { data } = await getOrderList({ ...pagination, ...filter, user_id: props.userId });
+        const { data } = await getOrderList({ ...pagination, ...filter });
        return {
          list: data.data?.list || [],
          total: data.data?.total || 0,
--- a/apps/admin/app/dashboard/payment/alipayf2f.tsx
+++ b/apps/admin/app/dashboard/payment/alipayf2f.tsx
@ -1,256 +0,0 @@
-'use client';
-
-import { getAlipayF2FPaymentConfig, updateAlipayF2FPaymentConfig } from '@/services/admin/payment';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/ui/components/select';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { Textarea } from '@workspace/ui/components/textarea';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { unitConversion } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function AlipayF2F() {
-  const t = useTranslations('payment');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getAlipayF2FPaymentConfig'],
-    queryFn: async () => {
-      const { data } = await getAlipayF2FPaymentConfig();
-
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateAlipayF2FPaymentConfig({
-        ...data,
-        [key]: value,
-      } as API.UpdateAlipayF2fRequest);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('enable')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable}
-              onCheckedChange={(checked) => {
-                updateConfig('enable', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('alipayf2f.sandbox')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('alipayf2f.sandboxDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.config.sandbox}
-              onCheckedChange={(checked) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  sandbox: checked,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('showName')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('showNameDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.name}
-              onValueBlur={(value) => updateConfig('name', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('iconUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('iconUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.icon_url}
-              onValueBlur={(value) => updateConfig('icon', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('notifyUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('notifyUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.domain}
-              onValueBlur={(value) => updateConfig('domain', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feeMode')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feeModeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Select
-              value={String(data?.fee_mode)}
-              onValueChange={(value) => {
-                updateConfig('fee_mode', Number(value));
-              }}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder='请选择' />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value='0'>{t('feeModeItems.0')}</SelectItem>
-                  <SelectItem value='1'>{t('feeModeItems.1')}</SelectItem>
-                  <SelectItem value='2'>{t('feeModeItems.2')}</SelectItem>
-                  <SelectItem value='3'>{t('feeModeItems.3')}</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feePercent')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feePercentDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              type='number'
-              min={0}
-              max={100}
-              maxLength={3}
-              value={data?.fee_percent}
-              onValueBlur={(value) => updateConfig('fee_percent', value)}
-              suffix='%'
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('fixedFee')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('fixedFeeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              min={0}
-              value={data?.fee_amount}
-              formatInput={(value) => unitConversion('centsToDollars', value)}
-              formatOutput={(value) => unitConversion('dollarsToCents', value)}
-              onValueBlur={(value) => updateConfig('fee_amount', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('alipayf2f.appId')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.app_id}
-              onValueBlur={(value) =>
-                updateConfig('config', {
-                  ...data?.config,
-                  app_id: value,
-                })
-              }
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('alipayf2f.privateKey')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <Textarea
-              placeholder={t('inputPlaceholder')}
-              defaultValue={data?.config.private_key}
-              onBlur={(e) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  private_key: e.target.value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('alipayf2f.publicKey')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <Textarea
-              placeholder={t('inputPlaceholder')}
-              defaultValue={data?.config.public_key}
-              onBlur={(e) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  public_key: e.target.value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('alipayf2f.invoiceName')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('alipayf2f.invoiceNameDescription')}
-              value={data?.config.invoice_name}
-              onValueBlur={(value) =>
-                updateConfig('config', {
-                  ...data?.config,
-                  invoice_name: value,
-                })
-              }
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}
--- a/apps/admin/app/dashboard/payment/epay.tsx
+++ b/apps/admin/app/dashboard/payment/epay.tsx
@ -1,221 +0,0 @@
-'use client';
-
-import { getEpayPaymentConfig, updateEpayPaymentConfig } from '@/services/admin/payment';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/ui/components/select';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { unitConversion } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Epay() {
-  const t = useTranslations('payment');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getEpayPaymentConfig'],
-    queryFn: async () => {
-      const { data } = await getEpayPaymentConfig();
-
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateEpayPaymentConfig({
-        ...data,
-        [key]: value,
-      } as API.UpdateEpayRequest);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('enable')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable}
-              onCheckedChange={(checked) => {
-                updateConfig('enable', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('showName')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('showNameDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.name}
-              onValueBlur={(value) => updateConfig('name', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('iconUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('iconUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.icon}
-              onValueBlur={(value) => updateConfig('icon', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('notifyUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('notifyUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.domain}
-              onValueBlur={(value) => updateConfig('domain', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feeMode')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feeModeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Select
-              value={String(data?.fee_mode)}
-              onValueChange={(value) => {
-                updateConfig('fee_mode', Number(value));
-              }}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder='请选择' />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value='0'>{t('feeModeItems.0')}</SelectItem>
-                  <SelectItem value='1'>{t('feeModeItems.1')}</SelectItem>
-                  <SelectItem value='2'>{t('feeModeItems.2')}</SelectItem>
-                  <SelectItem value='3'>{t('feeModeItems.3')}</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feePercent')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feePercentDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              type='number'
-              min={0}
-              max={100}
-              maxLength={3}
-              value={data?.fee_percent}
-              onValueBlur={(value) => updateConfig('fee_percent', value)}
-              suffix='%'
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('fixedFee')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('fixedFeeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              type='number'
-              min={0}
-              value={data?.fee_amount}
-              formatInput={(value) => unitConversion('centsToDollars', value)}
-              formatOutput={(value) => unitConversion('dollarsToCents', value)}
-              onValueBlur={(value) => updateConfig('fee_amount', value)}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('epay.url')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.url}
-              onValueBlur={(value) =>
-                updateConfig('config', {
-                  ...data?.config,
-                  url: value,
-                })
-              }
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('epay.pid')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.pid}
-              onValueBlur={(value) =>
-                updateConfig('config', {
-                  ...data?.config,
-                  pid: value,
-                })
-              }
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('epay.key')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.key}
-              onValueBlur={(value) =>
-                updateConfig('config', {
-                  ...data?.config,
-                  key: value,
-                })
-              }
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}
--- a/apps/admin/app/dashboard/payment/page.tsx
+++ b/apps/admin/app/dashboard/payment/page.tsx
@ -1,34 +1,11 @@
 import Billing from '@/components/billing';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
-import AlipayF2F from './alipayf2f';
-import Epay from './epay';
-import StripeAlipay from './stripe-alipay';
-import StripeWeChatPay from './stripe-wechat-pay';
+import PaymentTable from './payment-table';

 export default async function Page() {
  return (
    <>
-      <Tabs defaultValue='Epay'>
-        <TabsList className='h-full flex-wrap'>
-          <TabsTrigger value='Epay'>Epay</TabsTrigger>
-          <TabsTrigger value='Stripe-Alipay'>Stripe(AliPay)</TabsTrigger>
-          <TabsTrigger value='Strip-WeChatPay'>Stripe(WeChatPay)</TabsTrigger>
-          <TabsTrigger value='AlipayF2F'>AlipayF2F</TabsTrigger>
-        </TabsList>
-        <TabsContent value='Epay'>
-          <Epay />
-        </TabsContent>
-        <TabsContent value='Stripe-Alipay'>
-          <StripeAlipay />
-        </TabsContent>
-        <TabsContent value='Strip-WeChatPay'>
-          <StripeWeChatPay />
-        </TabsContent>
-        <TabsContent value='AlipayF2F'>
-          <AlipayF2F />
-        </TabsContent>
-      </Tabs>
-      <div className='flex flex-col gap-3'>
+      <PaymentTable />
+      <div className='mt-5 flex flex-col gap-3'>
        <Billing type='payment' />
      </div>
    </>
--- a/apps/admin/app/dashboard/payment/payment-form.tsx
+++ b/apps/admin/app/dashboard/payment/payment-form.tsx
@ -0,0 +1,419 @@
+'use client';
+
+import useGlobalStore from '@/config/use-global';
+import { getPaymentPlatform } from '@/services/admin/payment';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { RadioGroup, RadioGroupItem } from '@workspace/ui/components/radio-group';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@workspace/ui/components/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { MarkdownEditor } from '@workspace/ui/custom-components/editor';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { unitConversion } from '@workspace/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+
+interface PaymentFormProps<T> {
+  trigger: React.ReactNode;
+  title: string;
+  loading?: boolean;
+  initialValues?: T;
+  onSubmit: (values: T) => Promise<boolean>;
+  isEdit?: boolean;
+}
+
+export default function PaymentForm<T>({
+  trigger,
+  title,
+  loading,
+  initialValues,
+  onSubmit,
+  isEdit,
+}: PaymentFormProps<T>) {
+  const t = useTranslations('payment');
+  const { common } = useGlobalStore();
+  const { currency } = common;
+  const [open, setOpen] = useState(false);
+
+  const { data: platformData } = useQuery({
+    queryKey: ['getPaymentPlatform'],
+    queryFn: async () => {
+      const { data } = await getPaymentPlatform();
+      return data?.data?.list || [];
+    },
+  });
+
+  const formSchema = z.object({
+    name: z.string().min(1, { message: t('nameRequired') }),
+    platform: z.string().optional(),
+    icon: z.string().optional(),
+    domain: z.string().optional(),
+    config: z.any(),
+    fee_mode: z.number().min(0).max(2),
+    fee_percent: z.number().optional(),
+    fee_amount: z.number().optional(),
+    description: z.string().optional(),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      platform: '',
+      icon: '',
+      domain: '',
+      config: {},
+      fee_mode: 0,
+      fee_percent: 0,
+      fee_amount: 0,
+      ...(initialValues as any),
+    },
+  });
+
+  const feeMode = form.watch('fee_mode');
+  const platformValue = form.watch('platform');
+  const configValues = form.watch('config');
+
+  const currentPlatform = platformData?.find((p) => p.platform === platformValue);
+  const currentFieldDescriptions = currentPlatform?.platform_field_description || {};
+  const configFields = Object.keys(currentFieldDescriptions) || [];
+  const platformUrl = currentPlatform?.platform_url || '';
+
+  useEffect(() => {
+    if (feeMode === 0) {
+      form.setValue('fee_amount', 0);
+      form.setValue('fee_percent', 0);
+    } else if (feeMode === 1) {
+      form.setValue('fee_amount', 0);
+    } else if (feeMode === 2) {
+      form.setValue('fee_percent', 0);
+    }
+  }, [feeMode, form]);
+
+  const handleClose = () => {
+    form.reset();
+    setOpen(false);
+  };
+
+  const handleSubmit = async (values: z.infer<typeof formSchema>) => {
+    const cleanedValues = { ...values };
+
+    if (values.fee_mode === 0) {
+      cleanedValues.fee_amount = undefined;
+      cleanedValues.fee_percent = undefined;
+    } else if (values.fee_mode === 1) {
+      cleanedValues.fee_amount = undefined;
+    } else if (values.fee_mode === 2) {
+      cleanedValues.fee_percent = undefined;
+    }
+
+    const success = await onSubmit(cleanedValues as unknown as T);
+    if (success) {
+      handleClose();
+    }
+  };
+
+  const openPlatformUrl = () => {
+    if (platformUrl) {
+      window.open(platformUrl, '_blank');
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>{trigger}</SheetTrigger>
+      <SheetContent className='w-[550px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100vh-48px-36px-36px-env(safe-area-inset-top))]'>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-6 px-6 pt-4'>
+              <div className='space-y-4'>
+                <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
+                  <FormField
+                    control={form.control}
+                    name='name'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('name')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('namePlaceholder')}
+                            value={field.value}
+                            onValueChange={(value) => form.setValue('name', value as string)}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name='icon'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('icon')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('iconPlaceholder')}
+                            value={field.value}
+                            onValueChange={(value) => form.setValue('icon', value as string)}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+                <FormField
+                  control={form.control}
+                  name='domain'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('domain')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          placeholder='http(s)://example.com'
+                          value={field.value}
+                          onValueChange={(value) => form.setValue('domain', value as string)}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <div className='space-y-4'>
+                <FormField
+                  control={form.control}
+                  name='fee_mode'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('handlingFee')}</FormLabel>
+                      <FormControl>
+                        <RadioGroup
+                          onValueChange={(value) => field.onChange(parseInt(value))}
+                          value={field.value.toString()}
+                          className='flex flex-wrap gap-4'
+                        >
+                          <FormItem className='flex items-center space-x-2'>
+                            <FormControl>
+                              <RadioGroupItem value='0' />
+                            </FormControl>
+                            <FormLabel className='!mt-0 cursor-pointer'>{t('noFee')}</FormLabel>
+                          </FormItem>
+                          <FormItem className='flex items-center space-x-2'>
+                            <FormControl>
+                              <RadioGroupItem value='1' />
+                            </FormControl>
+                            <FormLabel className='!mt-0 cursor-pointer'>
+                              {t('percentFee')}
+                            </FormLabel>
+                          </FormItem>
+                          <FormItem className='flex items-center space-x-2'>
+                            <FormControl>
+                              <RadioGroupItem value='2' />
+                            </FormControl>
+                            <FormLabel className='!mt-0 cursor-pointer'>{t('fixedFee')}</FormLabel>
+                          </FormItem>
+                        </RadioGroup>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {feeMode === 1 && (
+                  <div className='grid grid-cols-1 sm:w-1/2'>
+                    <FormField
+                      control={form.control}
+                      name='fee_percent'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('feePercent')}</FormLabel>
+                          <FormControl>
+                            <EnhancedInput
+                              type='number'
+                              step='0.01'
+                              suffix='%'
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                )}
+
+                {feeMode === 2 && (
+                  <div className='grid grid-cols-1 sm:w-1/2'>
+                    <FormField
+                      control={form.control}
+                      name='fee_amount'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('feeAmount')}</FormLabel>
+                          <FormControl>
+                            <EnhancedInput
+                              type='number'
+                              step='0.01'
+                              prefix={currency.currency_symbol}
+                              suffix={currency.currency_unit}
+                              value={unitConversion('centsToDollars', field.value)}
+                              onValueChange={(value) =>
+                                field.onChange(unitConversion('dollarsToCents', value))
+                              }
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                )}
+              </div>
+
+              <div className='space-y-4'>
+                {(!platformValue || platformData?.find((p) => p.platform === platformValue)) && (
+                  <FormField
+                    control={form.control}
+                    name='platform'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('platform')}</FormLabel>
+                        <Select
+                          onValueChange={(value) => {
+                            form.setValue('platform', value as string);
+                            form.setValue('config', {});
+                          }}
+                          defaultValue={field.value}
+                          value={field.value}
+                          // @ts-expect-error - disabled prop type mismatch with SelectTrigger component
+                          disabled={isEdit && Boolean(initialValues?.platform)}
+                        >
+                          <FormControl>
+                            <SelectTrigger>
+                              <SelectValue placeholder={t('selectPlatform')} />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            {platformData?.map((platform) => (
+                              <SelectItem key={platform.platform} value={platform.platform}>
+                                {platform.platform}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        {platformUrl ? (
+                          <div className='mt-1 flex justify-end'>
+                            <Button
+                              variant='ghost'
+                              size='sm'
+                              className='h-6 px-2 text-xs'
+                              onClick={openPlatformUrl}
+                            >
+                              <Icon icon='tabler:external-link' className='mr-1 h-3 w-3' />
+                              {t('applyForPayment')}
+                            </Button>
+                          </div>
+                        ) : (
+                          <div className='mt-1 h-6'></div>
+                        )}
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
+
+                {configFields.length > 0 && (
+                  <div className='mt-4 space-y-4'>
+                    {configFields.map((fieldKey) => (
+                      <FormItem key={fieldKey}>
+                        <FormLabel>{currentFieldDescriptions[fieldKey]}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('configPlaceholder', {
+                              field: currentFieldDescriptions[fieldKey],
+                            })}
+                            value={
+                              configValues && configValues[fieldKey] !== undefined
+                                ? configValues[fieldKey]
+                                : ''
+                            }
+                            disabled={fieldKey === 'webhook_secret'}
+                            onValueChange={(value) => {
+                              const newConfig = { ...configValues };
+                              newConfig[fieldKey] = value;
+                              form.setValue('config', newConfig);
+                            }}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    ))}
+                  </div>
+                )}
+
+                <FormField
+                  control={form.control}
+                  name='description'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('description')}</FormLabel>
+                      <FormControl>
+                        <MarkdownEditor
+                          value={field.value}
+                          onChange={(value) => form.setValue(field.name, value as string)}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </form>
+          </Form>
+        </ScrollArea>
+
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={handleClose}>
+            {t('cancel')}
+          </Button>
+          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('submit')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/payment/payment-table.tsx
+++ b/apps/admin/app/dashboard/payment/payment-table.tsx
@ -0,0 +1,223 @@
+'use client';
+
+import { Display } from '@/components/display';
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  createPaymentMethod,
+  deletePaymentMethod,
+  getPaymentMethodList,
+  updatePaymentMethod,
+} from '@/services/admin/payment';
+import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/avatar';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import { Switch } from '@workspace/ui/components/switch';
+import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import PaymentForm from './payment-form';
+
+export default function PaymentTable() {
+  const t = useTranslations('payment');
+  const [loading, setLoading] = useState(false);
+  const ref = useRef<ProTableActions>(null);
+
+  return (
+    <ProTable<API.PaymentConfig, { search: string }>
+      action={ref}
+      header={{
+        title: t('paymentManagement'),
+        toolbar: (
+          <PaymentForm<API.CreatePaymentMethodRequest>
+            trigger={<Button>{t('create')}</Button>}
+            title={t('createPayment')}
+            loading={loading}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await createPaymentMethod({
+                  ...values,
+                  enable: false,
+                });
+                toast.success(t('createSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />
+        ),
+      }}
+      columns={[
+        {
+          accessorKey: 'enable',
+          header: t('enable'),
+          cell: ({ row }) => {
+            return (
+              <Switch
+                checked={Boolean(row.getValue('enable'))}
+                onCheckedChange={async (checked) => {
+                  await updatePaymentMethod({
+                    ...row.original,
+                    enable: checked,
+                  });
+                  ref.current?.refresh();
+                }}
+              />
+            );
+          },
+        },
+        {
+          accessorKey: 'icon',
+          header: t('icon'),
+          cell: ({ row }) => {
+            const icon = row.getValue('icon') as string;
+            return (
+              <Avatar className='h-8 w-8'>
+                {icon ? <AvatarImage src={icon} alt={row.getValue('name')} /> : null}
+                <AvatarFallback>
+                  {(row.getValue('name') as string)?.charAt(0) || '?'}
+                </AvatarFallback>
+              </Avatar>
+            );
+          },
+        },
+        {
+          accessorKey: 'name',
+          header: t('name'),
+        },
+        {
+          accessorKey: 'platform',
+          header: t('platform'),
+          cell: ({ row }) => <Badge>{t(row.original.platform)}</Badge>,
+        },
+        {
+          accessorKey: 'notify_url',
+          header: t('notify_url'),
+        },
+        {
+          accessorKey: 'fee',
+          header: t('handlingFee'),
+          cell: ({ row }) => {
+            const feeMode = row.original.fee_mode;
+            if (feeMode === 1) {
+              return <Badge>{row.original.fee_percent}%</Badge>;
+            } else if (feeMode === 2) {
+              return (
+                <Badge>
+                  <Display value={row.original.fee_amount} type='currency' />
+                </Badge>
+              );
+            }
+            return '--';
+          },
+        },
+      ]}
+      params={[
+        {
+          key: 'search',
+          placeholder: t('searchPlaceholder'),
+        },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await getPaymentMethodList({
+          ...pagination,
+          ...filter,
+        });
+        return {
+          list: data?.data?.list || [],
+          total: data?.data?.total || 0,
+        };
+      }}
+      actions={{
+        render: (row) => [
+          <PaymentForm<API.UpdatePaymentMethodRequest>
+            isEdit
+            key='edit'
+            trigger={<Button>{t('edit')}</Button>}
+            title={t('editPayment')}
+            loading={loading}
+            initialValues={row}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await updatePaymentMethod({
+                  ...row,
+                  ...values,
+                });
+                toast.success(t('updateSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />,
+          <ConfirmButton
+            key='delete'
+            trigger={<Button variant='destructive'>{t('delete')}</Button>}
+            title={t('confirmDelete')}
+            description={t('deleteWarning')}
+            onConfirm={async () => {
+              await deletePaymentMethod({
+                id: row.id,
+              });
+              toast.success(t('deleteSuccess'));
+              ref.current?.refresh();
+            }}
+            cancelText={t('cancel')}
+            confirmText={t('confirm')}
+          />,
+          <Button
+            key='copy'
+            variant='outline'
+            onClick={async () => {
+              setLoading(true);
+              try {
+                const { id, ...params } = row;
+                await createPaymentMethod({
+                  ...params,
+                  enable: false,
+                });
+                toast.success(t('copySuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          >
+            {t('copy')}
+          </Button>,
+        ],
+        batchRender(rows) {
+          return [
+            <ConfirmButton
+              key='delete'
+              trigger={<Button variant='destructive'>{t('batchDelete')}</Button>}
+              title={t('confirmDelete')}
+              description={t('deleteWarning')}
+              onConfirm={async () => {
+                for (const row of rows) {
+                  await deletePaymentMethod({ id: row.id });
+                }
+                toast.success(t('deleteSuccess'));
+                ref.current?.refresh();
+              }}
+              cancelText={t('cancel')}
+              confirmText={t('confirm')}
+            />,
+          ];
+        },
+      }}
+    />
+  );
+}
--- a/apps/admin/app/dashboard/payment/stripe-alipay.tsx
+++ b/apps/admin/app/dashboard/payment/stripe-alipay.tsx
@ -1,232 +0,0 @@
-'use client';
-
-import {
-  getStripeAlipayPaymentConfig,
-  updateStripeAlipayPaymentConfig,
-} from '@/services/admin/payment';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/ui/components/select';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { unitConversion } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function Stripe() {
-  const t = useTranslations('payment');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getStripeAlipayPaymentConfig'],
-    queryFn: async () => {
-      const { data } = await getStripeAlipayPaymentConfig();
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateStripeAlipayPaymentConfig({
-        ...data,
-        mark: 'stripe_alipay',
-        [key]: value,
-      } as any);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('aliPay')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable}
-              onCheckedChange={async (checked) => {
-                updateConfig('enable', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('showName')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('showNameDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.name}
-              onValueBlur={(value) => {
-                updateConfig('name', value);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('iconUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('iconUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.icon}
-              onValueBlur={(value) => {
-                updateConfig('icon', value);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('notifyUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('notifyUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.domain}
-              onValueBlur={(value) => {
-                updateConfig('domain', value);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feeMode')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feeModeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Select
-              value={String(data?.fee_mode)}
-              onValueChange={(value) => {
-                updateConfig('fee_mode', Number(value));
-              }}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder='请选择' />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value='0'>{t('feeModeItems.0')}</SelectItem>
-                  <SelectItem value='1'>{t('feeModeItems.1')}</SelectItem>
-                  <SelectItem value='2'>{t('feeModeItems.2')}</SelectItem>
-                  <SelectItem value='3'>{t('feeModeItems.3')}</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feePercent')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feePercentDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              type='number'
-              min={0}
-              max={100}
-              value={data?.fee_percent}
-              onValueBlur={(value) => {
-                updateConfig('fee_percent', value);
-              }}
-              suffix='%'
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('fixedFee')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('fixedFeeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              type='number'
-              min={0}
-              value={data?.fee_amount}
-              formatInput={(value) => unitConversion('centsToDollars', value)}
-              formatOutput={(value) => unitConversion('dollarsToCents', value)}
-              onValueBlur={(value) => updateConfig('fee_amount', value)}
-            />
-          </TableCell>
-        </TableRow>
-
-        <TableRow>
-          <TableCell>
-            <Label>{t('stripe.publicKey')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.public_key}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  public_key: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('stripe.secretKey')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.secret_key}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  secret_key: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('stripe.webhookSecret')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.webhook_secret}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  webhook_secret: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}
--- a/apps/admin/app/dashboard/payment/stripe-wechat-pay.tsx
+++ b/apps/admin/app/dashboard/payment/stripe-wechat-pay.tsx
@ -1,232 +0,0 @@
-'use client';
-
-import {
-  getStripeWeChatPayPaymentConfig,
-  updateStripeWeChatPayPaymentConfig,
-} from '@/services/admin/payment';
-import { useQuery } from '@tanstack/react-query';
-import { Label } from '@workspace/ui/components/label';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/ui/components/select';
-import { Switch } from '@workspace/ui/components/switch';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { unitConversion } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-
-export default function StripeWeChatPay() {
-  const t = useTranslations('payment');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getStripeWeChatPayPaymentConfig'],
-    queryFn: async () => {
-      const { data } = await getStripeWeChatPayPaymentConfig();
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateStripeWeChatPayPaymentConfig({
-        ...data,
-        mark: 'stripe_wechat_pay',
-        [key]: value,
-      } as any);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableCell>
-            <Label>{t('wechatPay')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Switch
-              checked={data?.enable}
-              onCheckedChange={async (checked) => {
-                updateConfig('enable', checked);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('showName')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('showNameDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.name}
-              onValueBlur={(value) => {
-                updateConfig('name', value);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('iconUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('iconUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.icon}
-              onValueBlur={(value) => {
-                updateConfig('icon', value);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('notifyUrl')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('notifyUrlDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.domain}
-              onValueBlur={(value) => {
-                updateConfig('domain', value);
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feeMode')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feeModeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <Select
-              value={String(data?.fee_mode)}
-              onValueChange={(value) => {
-                updateConfig('fee_mode', Number(value));
-              }}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder='请选择' />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value='0'>{t('feeModeItems.0')}</SelectItem>
-                  <SelectItem value='1'>{t('feeModeItems.1')}</SelectItem>
-                  <SelectItem value='2'>{t('feeModeItems.2')}</SelectItem>
-                  <SelectItem value='3'>{t('feeModeItems.3')}</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('feePercent')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('feePercentDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              type='number'
-              min={0}
-              max={100}
-              value={data?.fee_percent}
-              onValueBlur={(value) => {
-                updateConfig('fee_percent', value);
-              }}
-              suffix='%'
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('fixedFee')}</Label>
-            <p className='text-muted-foreground text-xs'>{t('fixedFeeDescription')}</p>
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              type='number'
-              min={0}
-              value={data?.fee_amount}
-              formatInput={(value) => unitConversion('centsToDollars', value)}
-              formatOutput={(value) => unitConversion('dollarsToCents', value)}
-              onValueBlur={(value) => updateConfig('fee_amount', value)}
-            />
-          </TableCell>
-        </TableRow>
-
-        <TableRow>
-          <TableCell>
-            <Label>{t('stripe.publicKey')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.public_key}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  public_key: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('stripe.secretKey')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.secret_key}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  secret_key: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>
-            <Label>{t('stripe.webhookSecret')}</Label>
-            <p className='text-muted-foreground text-xs' />
-          </TableCell>
-          <TableCell className='text-right'>
-            <EnhancedInput
-              placeholder={t('inputPlaceholder')}
-              value={data?.config.webhook_secret}
-              onValueBlur={(value) => {
-                updateConfig('config', {
-                  ...data?.config,
-                  webhook_secret: value,
-                });
-              }}
-            />
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}
--- a/apps/admin/app/dashboard/product/page.tsx
+++ b/apps/admin/app/dashboard/product/page.tsx
@ -0,0 +1,5 @@
+import SubscribeTable from './subscribe-table';
+
+export default async function Page() {
+  return <SubscribeTable />;
+}
--- a/apps/admin/app/dashboard/subscribe/subscribe-form.tsx
+++ b/apps/admin/app/dashboard/subscribe/subscribe-form.tsx
@ -1,9 +1,8 @@
 'use client';

-import { getNodeGroupList, getNodeList } from '@/services/admin/server';
-import { getSubscribeGroupList } from '@/services/admin/subscribe';
+import useGlobalStore from '@/config/use-global';
+import { useNode } from '@/store/node';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useQuery } from '@tanstack/react-query';
 import {
  Accordion,
  AccordionContent,
@ -42,7 +41,7 @@ import { evaluateWithPrecision, unitConversion } from '@workspace/ui/utils';
 import { CreditCard, Server, Settings } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { assign, shake } from 'radash';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
@ -62,8 +61,9 @@ const defaultValues = {
  traffic: 0,
  quota: 0,
  discount: [],
-  server_group: [],
-  server: [],
+  language: '',
+  node_tags: [],
+  nodes: [],
  unit_time: 'Month',
  deduction_ratio: 0,
  purchase_with_discount: false,
@ -79,14 +79,18 @@ export default function SubscribeForm<T extends Record<string, any>>({
  trigger,
  title,
 }: Readonly<SubscribeFormProps<T>>) {
-  const t = useTranslations('subscribe');
+  const { common } = useGlobalStore();
+  const { currency } = common;
+
+  const t = useTranslations('product');
  const [open, setOpen] = useState(false);
+  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  const formSchema = z.object({
    name: z.string(),
    description: z.string().optional(),
    unit_price: z.number(),
-    unit_time: z.string().default('Month'),
+    unit_time: z.string(),
    replacement: z.number().optional(),
    discount: z
      .array(
@ -96,21 +100,21 @@ export default function SubscribeForm<T extends Record<string, any>>({
        }),
      )
      .optional(),
-    inventory: z.number().optional().default(-1),
-    speed_limit: z.number().optional().default(0),
-    device_limit: z.number().optional().default(0),
-    traffic: z.number().optional().default(0),
-    quota: z.number().optional().default(0),
-    group_id: z.number().optional().nullish(),
-    server_group: z.array(z.number()).optional().default([]),
-    server: z.array(z.number()).optional().default([]),
-    deduction_ratio: z.number().optional().default(0),
-    allow_deduction: z.boolean().optional().default(false),
-    reset_cycle: z.number().optional().default(0),
-    renewal_reset: z.boolean().optional().default(false),
+    inventory: z.number().optional(),
+    speed_limit: z.number().optional(),
+    device_limit: z.number().optional(),
+    traffic: z.number().optional(),
+    quota: z.number().optional(),
+    language: z.string().optional(),
+    node_tags: z.array(z.string()).optional(),
+    nodes: z.array(z.number()).optional(),
+    deduction_ratio: z.number().optional(),
+    allow_deduction: z.boolean().optional(),
+    reset_cycle: z.number().optional(),
+    renewal_reset: z.boolean().optional(),
  });

-  const form = useForm({
+  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: assign(
      defaultValues,
@ -118,43 +122,123 @@ export default function SubscribeForm<T extends Record<string, any>>({
    ),
  });

+  const debouncedCalculateDiscount = useCallback(
+    (values: any[], fieldName: string, lastChangedField?: string, changedIndex?: number) => {
+      if (updateTimeoutRef.current) {
+        clearTimeout(updateTimeoutRef.current);
+      }
+
+      updateTimeoutRef.current = setTimeout(() => {
+        const { unit_price } = form.getValues();
+        if (!unit_price || !values?.length) return;
+
+        let hasChanges = false;
+        const calculatedValues = values.map((item: any, index: number) => {
+          const result = { ...item };
+
+          if (changedIndex !== undefined && index !== changedIndex) {
+            return result;
+          }
+
+          const quantity = Number(item.quantity) || 0;
+          const discount = Number(item.discount) || 0;
+          const price = Number(item.price) || 0;
+
+          switch (lastChangedField) {
+            case 'quantity':
+            case 'discount':
+              if (quantity > 0 && discount > 0) {
+                const newPrice = evaluateWithPrecision(
+                  `${unit_price} * ${quantity} * ${discount} / 100`,
+                );
+                if (Math.abs(newPrice - price) > 0.01) {
+                  result.price = newPrice;
+                  hasChanges = true;
+                }
+              }
+              break;
+
+            case 'price':
+              if (quantity > 0 && price > 0) {
+                const newDiscount = evaluateWithPrecision(
+                  `${price} / ${quantity} / ${unit_price} * 100`,
+                );
+                if (Math.abs(newDiscount - discount) > 0.01) {
+                  result.discount = Math.min(100, Math.max(0, newDiscount));
+                  hasChanges = true;
+                }
+              } else if (discount > 0 && price > 0) {
+                const newQuantity = evaluateWithPrecision(
+                  `${price} / ${unit_price} / ${discount} * 100`,
+                );
+                if (Math.abs(newQuantity - quantity) > 0.01 && newQuantity > 0) {
+                  result.quantity = Math.max(1, Math.round(newQuantity));
+                  hasChanges = true;
+                }
+              }
+              break;
+
+            default:
+              if (quantity > 0 && discount > 0 && price === 0) {
+                result.price = evaluateWithPrecision(
+                  `${unit_price} * ${quantity} * ${discount} / 100`,
+                );
+                hasChanges = true;
+              } else if (quantity > 0 && price > 0 && discount === 0) {
+                const newDiscount = evaluateWithPrecision(
+                  `${price} / ${quantity} / ${unit_price} * 100`,
+                );
+                result.discount = Math.min(100, Math.max(0, newDiscount));
+                hasChanges = true;
+              } else if (discount > 0 && price > 0 && quantity === 0) {
+                const newQuantity = evaluateWithPrecision(
+                  `${price} / ${unit_price} / ${discount} * 100`,
+                );
+                if (newQuantity > 0) {
+                  result.quantity = Math.max(1, Math.round(newQuantity));
+                  hasChanges = true;
+                }
+              }
+              break;
+          }
+
+          return result;
+        });
+
+        if (hasChanges) {
+          form.setValue(fieldName as any, calculatedValues, { shouldDirty: true });
+        }
+      }, 300);
+    },
+    [form],
+  );
+
  useEffect(() => {
    form?.reset(
      assign(defaultValues, shake(initialValues, (value) => value === null) as Record<string, any>),
    );
-  }, [form, initialValues]);
+    const discount = form.getValues('discount') || [];
+    if (discount.length > 0) {
+      debouncedCalculateDiscount(discount, 'discount');
+    }
+  }, [form, initialValues, open]);
+
+  useEffect(() => {
+    return () => {
+      if (updateTimeoutRef.current) {
+        clearTimeout(updateTimeoutRef.current);
+      }
+    };
+  }, []);

  async function handleSubmit(data: { [x: string]: any }) {
    const bool = await onSubmit(data as T);
    if (bool) setOpen(false);
  }

-  const { data: group } = useQuery({
-    queryKey: ['getSubscribeGroupList'],
-    queryFn: async () => {
-      const { data } = await getSubscribeGroupList();
-      return data.data?.list as API.SubscribeGroup[];
-    },
-  });
+  const { getAllAvailableTags, getNodesByTag, getNodesWithoutTags } = useNode();

-  const { data: server } = useQuery({
-    queryKey: ['getNodeList', 'all'],
-    queryFn: async () => {
-      const { data } = await getNodeList({
-        page: 1,
-        size: 9999,
-      });
-      return data.data?.list;
-    },
-  });
-
-  const { data: server_groups } = useQuery({
-    queryKey: ['getNodeGroupList'],
-    queryFn: async () => {
-      const { data } = await getNodeGroupList();
-      return (data.data?.list || []) as API.ServerGroup[];
-    },
-  });
+  const tagGroups = getAllAvailableTags();

  const unit_time = form.watch('unit_time');

@ -174,7 +258,7 @@ export default function SubscribeForm<T extends Record<string, any>>({
        <SheetHeader>
          <SheetTitle>{title}</SheetTitle>
        </SheetHeader>
-        <ScrollArea className='h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(handleSubmit)} className='pt-4'>
              <Tabs defaultValue='basic' className='w-full'>
@ -189,7 +273,7 @@ export default function SubscribeForm<T extends Record<string, any>>({
                  </TabsTrigger>
                  <TabsTrigger value='servers' className='flex items-center gap-2'>
                    <Server className='h-4 w-4' />
-                    {t('form.servers')}
+                    {t('form.nodes')}
                  </TabsTrigger>
                </TabsList>

@ -216,21 +300,20 @@ export default function SubscribeForm<T extends Record<string, any>>({
                      />
                      <FormField
                        control={form.control}
-                        name='group_id'
+                        name='language'
                        render={({ field }) => (
                          <FormItem>
-                            <FormLabel>{t('form.groupId')}</FormLabel>
+                            <FormLabel>
+                              {t('form.language')}
+                              <span className='text-muted-foreground ml-1 text-[0.8rem]'>
+                                {t('form.languageDescription')}
+                              </span>
+                            </FormLabel>
                            <FormControl>
-                              <Combobox<number, false>
-                                placeholder={t('form.selectSubscribeGroup')}
+                              <EnhancedInput
                                {...field}
-                                onChange={(value) => {
-                                  form.setValue(field.name, value || 0);
-                                }}
-                                options={group?.map((item) => ({
-                                  label: item.name,
-                                  value: item.id,
-                                }))}
+                                placeholder={t('form.languagePlaceholder')}
+                                onValueChange={(v) => form.setValue(field.name, v as string)}
                              />
                            </FormControl>
                            <FormMessage />
@ -298,6 +381,7 @@ export default function SubscribeForm<T extends Record<string, any>>({
                              <EnhancedInput
                                placeholder={t('form.noLimit')}
                                type='number'
+                                step={1}
                                {...field}
                                onValueChange={(value) => {
                                  form.setValue(field.name, value);
@ -321,7 +405,8 @@ export default function SubscribeForm<T extends Record<string, any>>({
                              <EnhancedInput
                                placeholder={t('form.noLimit')}
                                type='number'
-                                value={field.value === -1 ? 0 : field.value}
+                                step={1}
+                                value={field.value}
                                min={0}
                                onValueChange={(value) => {
                                  form.setValue(field.name, value);
@ -343,6 +428,7 @@ export default function SubscribeForm<T extends Record<string, any>>({
                              <EnhancedInput
                                placeholder={t('form.noLimit')}
                                type='number'
+                                step={1}
                                {...field}
                                onValueChange={(value) => {
                                  form.setValue(field.name, value);
@ -540,11 +626,12 @@ export default function SubscribeForm<T extends Record<string, any>>({
                        <FormItem>
                          <FormLabel>{t('form.discount')}</FormLabel>
                          <FormControl>
-                            <ArrayInput<API.SubscribeDiscount>
+                            <ArrayInput<API.SubscribeDiscount & { price?: number }>
                              fields={[
                                {
                                  name: 'quantity',
                                  type: 'number',
+                                  step: 1,
                                  min: 1,
                                  suffix: unit_time && t(`form.${unit_time}`),
                                },
@ -553,40 +640,63 @@ export default function SubscribeForm<T extends Record<string, any>>({
                                  type: 'number',
                                  min: 1,
                                  max: 100,
+                                  step: 1,
                                  placeholder: t('form.discountPercent'),
                                  suffix: '%',
-                                  calculateValue: function (data) {
-                                    const { unit_price } = form.getValues();
-                                    return {
-                                      ...data,
-                                      price: evaluateWithPrecision(
-                                        `${unit_price} * ${data.quantity} * ${data.discount} / 100`,
-                                      ),
-                                    };
-                                  },
                                },
                                {
                                  name: 'price',
                                  placeholder: t('form.discount_price'),
                                  type: 'number',
                                  min: 0,
+                                  step: 0.01,
+                                  prefix: currency.currency_symbol,
                                  formatInput: (value) => unitConversion('centsToDollars', value),
-                                  formatOutput: (value) => unitConversion('dollarsToCents', value),
-                                  internal: true,
-                                  calculateValue: (data) => {
-                                    const { unit_price } = form.getValues();
-                                    return {
-                                      ...data,
-                                      discount: evaluateWithPrecision(
-                                        `${data.price} / ${data.quantity} / ${unit_price} * 100`,
-                                      ),
-                                    };
-                                  },
+                                  formatOutput: (value) =>
+                                    unitConversion('dollarsToCents', value).toString(),
                                },
                              ]}
                              value={field.value}
-                              onChange={(value) => {
-                                form.setValue(field.name, value);
+                              onChange={(
+                                newValues: (API.SubscribeDiscount & { price?: number })[],
+                              ) => {
+                                const oldValues = field.value || [];
+                                let lastChangedField: string | undefined;
+                                let changedIndex: number | undefined;
+
+                                for (
+                                  let i = 0;
+                                  i < Math.max(newValues.length, oldValues.length);
+                                  i++
+                                ) {
+                                  const newItem = newValues[i] || {};
+                                  const oldItem = oldValues[i] || {};
+
+                                  if ((newItem as any).quantity !== (oldItem as any).quantity) {
+                                    lastChangedField = 'quantity';
+                                    changedIndex = i;
+                                    break;
+                                  }
+                                  if ((newItem as any).discount !== (oldItem as any).discount) {
+                                    lastChangedField = 'discount';
+                                    changedIndex = i;
+                                    break;
+                                  }
+                                  if ((newItem as any).price !== (oldItem as any).price) {
+                                    lastChangedField = 'price';
+                                    changedIndex = i;
+                                    break;
+                                  }
+                                }
+                                form.setValue(field.name, newValues, { shouldDirty: true });
+                                if (newValues?.length > 0) {
+                                  debouncedCalculateDiscount(
+                                    newValues,
+                                    field.name,
+                                    lastChangedField,
+                                    changedIndex,
+                                  );
+                                }
                              }}
                            />
                          </FormControl>
@ -669,53 +779,56 @@ export default function SubscribeForm<T extends Record<string, any>>({
                  <div className='space-y-6'>
                    <FormField
                      control={form.control}
-                      name='server_group'
+                      name='node_tags'
                      render={({ field }) => (
                        <FormItem>
-                          <FormLabel>{t('form.serverGroup')}</FormLabel>
+                          <FormLabel>{t('form.nodeGroup')}</FormLabel>
                          <FormControl>
                            <Accordion type='single' collapsible className='w-full'>
-                              {server_groups?.map((group: API.ServerGroup) => {
+                              {tagGroups.map((tag) => {
                                const value = field.value || [];
+                                const tagId = tag;
+                                const nodesWithTag = getNodesByTag(tag);

                                return (
-                                  <AccordionItem key={group.id} value={String(group.id)}>
+                                  <AccordionItem key={tag} value={String(tag)}>
                                    <AccordionTrigger>
                                      <div className='flex items-center gap-2'>
                                        <Checkbox
-                                          checked={value.includes(group.id!)}
+                                          checked={value.includes(tagId as any)}
                                          onCheckedChange={(checked) => {
                                            return checked
-                                              ? form.setValue(field.name, [...value, group.id])
+                                              ? form.setValue(field.name, [...value, tagId] as any)
                                              : form.setValue(
                                                  field.name,
-                                                  value.filter(
-                                                    (value: number) => value !== group.id,
-                                                  ),
+                                                  value.filter((v: any) => v !== tagId),
                                                );
                                          }}
                                        />
-                                        <Label>{group.name}</Label>
+                                        <Label>
+                                          {tag}
+                                          <span className='text-muted-foreground ml-2 text-xs'>
+                                            ({nodesWithTag.length})
+                                          </span>
+                                        </Label>
                                      </div>
                                    </AccordionTrigger>
                                    <AccordionContent>
-                                      <ul className='list-disc [&>li]:mt-2'>
-                                        {server
-                                          ?.filter(
-                                            (server: API.Server) => server.group_id === group.id,
-                                          )
-                                          ?.map((node: API.Server) => {
-                                            return (
-                                              <li
-                                                key={node.id}
-                                                className='flex items-center justify-between *:flex-1'
-                                              >
-                                                <span>{node.name}</span>
-                                                <span>{node.server_addr}</span>
-                                                <span className='text-right'>{node.protocol}</span>
-                                              </li>
-                                            );
-                                          })}
+                                      <ul className='space-y-1'>
+                                        {getNodesByTag(tag).map((node) => (
+                                          <li
+                                            key={node.id}
+                                            className='flex items-center justify-between gap-3'
+                                          >
+                                            <span className='flex-1'>{node.name}</span>
+                                            <span className='flex-1'>
+                                              {node.address}:{node.port}
+                                            </span>
+                                            <span className='flex-1 text-right'>
+                                              {node.protocol}
+                                            </span>
+                                          </li>
+                                        ))}
                                      </ul>
                                    </AccordionContent>
                                  </AccordionItem>
@ -730,38 +843,38 @@ export default function SubscribeForm<T extends Record<string, any>>({

                    <FormField
                      control={form.control}
-                      name='server'
+                      name='nodes'
                      render={({ field }) => (
                        <FormItem>
-                          <FormLabel>{t('form.server')}</FormLabel>
+                          <FormLabel>{t('form.node')}</FormLabel>
                          <FormControl>
                            <div className='flex flex-col gap-2'>
-                              {server
-                                ?.filter((item: API.Server) => !item.group_id)
-                                ?.map((item: API.Server) => {
-                                  const value = field.value || [];
+                              {getNodesWithoutTags().map((item) => {
+                                const value = field.value || [];

-                                  return (
-                                    <div className='flex items-center gap-2' key={item.id}>
-                                      <Checkbox
-                                        checked={value.includes(item.id!)}
-                                        onCheckedChange={(checked) => {
-                                          return checked
-                                            ? form.setValue(field.name, [...value, item.id])
-                                            : form.setValue(
-                                                field.name,
-                                                value.filter((value: number) => value !== item.id),
-                                              );
-                                        }}
-                                      />
-                                      <Label className='flex w-full items-center justify-between *:flex-1'>
-                                        <span>{item.name}</span>
-                                        <span>{item.server_addr}</span>
-                                        <span className='text-right'>{item.protocol}</span>
-                                      </Label>
-                                    </div>
-                                  );
-                                })}
+                                return (
+                                  <div className='flex items-center gap-2' key={item.id}>
+                                    <Checkbox
+                                      checked={value.includes(item.id!)}
+                                      onCheckedChange={(checked) => {
+                                        return checked
+                                          ? form.setValue(field.name, [...value, item.id])
+                                          : form.setValue(
+                                              field.name,
+                                              value.filter((value: number) => value !== item.id),
+                                            );
+                                      }}
+                                    />
+                                    <Label className='flex w-full items-center justify-between gap-3'>
+                                      <span className='flex-1'>{item.name}</span>
+                                      <span className='flex-1'>
+                                        {item.address}:{item.port}
+                                      </span>
+                                      <span className='flex-1 text-right'>{item.protocol}</span>
+                                    </Label>
+                                  </div>
+                                );
+                              })}
                            </div>
                          </FormControl>
                          <FormMessage />
@ -790,7 +903,8 @@ export default function SubscribeForm<T extends Record<string, any>>({
              const keys = Object.keys(errors);
              for (const key of keys) {
                const formattedKey = key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
-                toast.error(`${t(`form.${formattedKey}`)} is ${errors[key]?.message}`);
+                const error = (errors as any)[key];
+                toast.error(`${t(`form.${formattedKey}`)} is ${error?.message}`);
                return false;
              }
            })}
--- a/apps/admin/app/dashboard/subscribe/subscribe-table.tsx
+++ b/apps/admin/app/dashboard/subscribe/subscribe-table.tsx
@ -6,12 +6,11 @@ import {
  batchDeleteSubscribe,
  createSubscribe,
  deleteSubscribe,
-  getSubscribeGroupList,
  getSubscribeList,
  subscribeSort,
  updateSubscribe,
 } from '@/services/admin/subscribe';
-import { useQuery } from '@tanstack/react-query';
+import { useSubscribe } from '@/store/subscribe';
 import { Badge } from '@workspace/ui/components/badge';
 import { Button } from '@workspace/ui/components/button';
 import { Switch } from '@workspace/ui/components/switch';
@ -22,19 +21,10 @@ import { toast } from 'sonner';
 import SubscribeForm from './subscribe-form';

 export default function SubscribeTable() {
-  const t = useTranslations('subscribe');
+  const t = useTranslations('product');
  const [loading, setLoading] = useState(false);
-  const { data: groups } = useQuery({
-    queryKey: ['getSubscribeGroupList', 'all'],
-    queryFn: async () => {
-      const { data } = await getSubscribeGroupList({
-        page: 1,
-        size: 9999,
-      });
-      return data.data?.list as API.SubscribeGroup[];
-    },
-  });
  const ref = useRef<ProTableActions>(null);
+  const { fetchSubscribes } = useSubscribe();
  return (
    <ProTable<API.SubscribeItem, { group_id: number; query: string }>
      action={ref}
@ -54,6 +44,7 @@ export default function SubscribeTable() {
                });
                toast.success(t('createSuccess'));
                ref.current?.refresh();
+                fetchSubscribes();
                setLoading(false);

                return true;
@ -70,14 +61,6 @@ export default function SubscribeTable() {
        {
          key: 'search',
        },
-        {
-          key: 'group_id',
-          placeholder: t('subscribeGroup'),
-          options: groups?.map((item) => ({
-            label: item.name,
-            value: String(item.id),
-          })),
-        },
      ]}
      request={async (pagination, filters) => {
        const { data } = await getSubscribeList({
@ -103,6 +86,7 @@ export default function SubscribeTable() {
                    show: checked,
                  } as API.UpdateSubscribeRequest);
                  ref.current?.refresh();
+                  fetchSubscribes();
                }}
              />
            );
@ -121,6 +105,7 @@ export default function SubscribeTable() {
                    sell: checked,
                  } as API.UpdateSubscribeRequest);
                  ref.current?.refresh();
+                  fetchSubscribes();
                }}
              />
            );
@ -176,11 +161,11 @@ export default function SubscribeTable() {
          cell: ({ row }) => <Display type='number' value={row.getValue('quota')} unlimited />,
        },
        {
-          accessorKey: 'group_id',
-          header: t('subscribeGroup'),
+          accessorKey: 'language',
+          header: t('language'),
          cell: ({ row }) => {
-            const name = groups?.find((group) => group.id === row.getValue('group_id'))?.name;
-            return name ? <Badge variant='outline'>{name}</Badge> : '--';
+            const language = row.getValue('language') as string;
+            return language ? <Badge variant='outline'>{language}</Badge> : '--';
          },
        },
        {
@ -206,6 +191,7 @@ export default function SubscribeTable() {
                } as API.UpdateSubscribeRequest);
                toast.success(t('updateSuccess'));
                ref.current?.refresh();
+                fetchSubscribes();
                setLoading(false);
                return true;
              } catch (error) {
@ -226,6 +212,7 @@ export default function SubscribeTable() {
              });
              toast.success(t('deleteSuccess'));
              ref.current?.refresh();
+              fetchSubscribes();
            }}
            cancelText={t('cancel')}
            confirmText={t('confirm')}
@ -244,6 +231,7 @@ export default function SubscribeTable() {
                } as API.CreateSubscribeRequest);
                toast.success(t('copySuccess'));
                ref.current?.refresh();
+                fetchSubscribes();
                setLoading(false);
                return true;
              } catch (error) {
@ -268,6 +256,7 @@ export default function SubscribeTable() {

              toast.success(t('deleteSuccess'));
              ref.current?.reset();
+              fetchSubscribes();
            }}
            cancelText={t('cancel')}
            confirmText={t('confirm')}
--- a/apps/admin/app/dashboard/server/form-schema.ts
+++ b/apps/admin/app/dashboard/server/form-schema.ts
@ -1,114 +0,0 @@
-import { z } from 'zod';
-
-export const protocols = ['shadowsocks', 'vmess', 'vless', 'trojan', 'hysteria2', 'tuic'];
-
-const nullableString = z.string().nullish();
-const portSchema = z.number().max(65535).nullish();
-const securityConfigSchema = z
-  .object({
-    sni: nullableString,
-    allow_insecure: z.boolean().nullable().default(false),
-    fingerprint: nullableString,
-    reality_private_key: nullableString,
-    reality_public_key: nullableString,
-    reality_short_id: nullableString,
-    reality_server_addr: nullableString,
-    reality_server_port: portSchema,
-  })
-  .nullish();
-
-const transportConfigSchema = z
-  .object({
-    path: nullableString,
-    host: nullableString,
-    service_name: nullableString,
-  })
-  .nullish();
-
-const baseProtocolSchema = z.object({
-  port: portSchema,
-  transport: z.string(),
-  transport_config: transportConfigSchema,
-  security: z.string(),
-  security_config: securityConfigSchema,
-});
-
-const shadowsocksSchema = z.object({
-  method: z.string(),
-  port: portSchema,
-  server_key: nullableString,
-});
-
-const vmessSchema = baseProtocolSchema;
-
-const vlessSchema = baseProtocolSchema.extend({
-  flow: nullableString,
-});
-
-const trojanSchema = baseProtocolSchema;
-
-const hysteria2Schema = z.object({
-  port: portSchema,
-  hop_ports: nullableString,
-  hop_interval: z.number().nullish(),
-  obfs_password: nullableString,
-  security: z.string(),
-  security_config: securityConfigSchema,
-});
-
-const tuicSchema = z.object({
-  port: portSchema,
-  security: z.string(),
-  security_config: securityConfigSchema,
-});
-
-const protocolConfigSchema = z.discriminatedUnion('protocol', [
-  z.object({
-    protocol: z.literal('shadowsocks'),
-    config: shadowsocksSchema,
-  }),
-  z.object({
-    protocol: z.literal('vmess'),
-    config: vmessSchema,
-  }),
-  z.object({
-    protocol: z.literal('vless'),
-    config: vlessSchema,
-  }),
-  z.object({
-    protocol: z.literal('trojan'),
-    config: trojanSchema,
-  }),
-  z.object({
-    protocol: z.literal('hysteria2'),
-    config: hysteria2Schema,
-  }),
-  z.object({
-    protocol: z.literal('tuic'),
-    config: tuicSchema,
-  }),
-]);
-
-const baseFormSchema = z.object({
-  name: z.string(),
-  tags: z.array(z.string()).nullish().default([]),
-  country: z.string().nullish(),
-  city: z.string().nullish(),
-  server_addr: z.string(),
-  speed_limit: z.number().nullish(),
-  traffic_ratio: z.number().default(1),
-  group_id: z.number().nullish(),
-  relay_mode: z.string().nullish().default('none'),
-  relay_node: z
-    .array(
-      z.object({
-        host: z.string(),
-        port: portSchema,
-        prefix: z.string().nullish(),
-      }),
-    )
-    .nullish()
-    .default([]),
-});
-
-export const formSchema = z.intersection(baseFormSchema, protocolConfigSchema);
--- a/apps/admin/app/dashboard/server/group-form.tsx
+++ b/apps/admin/app/dashboard/server/group-form.tsx
@ -1,145 +0,0 @@
-'use client';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Button } from '@workspace/ui/components/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@workspace/ui/components/form';
-import { ScrollArea } from '@workspace/ui/components/scroll-area';
-import {
-  Sheet,
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@workspace/ui/components/sheet';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { Icon } from '@workspace/ui/custom-components/icon';
-import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-const formSchema = z.object({
-  name: z.string(),
-  description: z.string().optional(),
-});
-
-interface GroupFormProps<T> {
-  onSubmit: (data: T) => Promise<boolean> | boolean;
-  initialValues?: T;
-  loading?: boolean;
-  trigger: string;
-  title: string;
-}
-
-export default function GroupForm<T extends Record<string, any>>({
-  onSubmit,
-  initialValues,
-  loading,
-  trigger,
-  title,
-}: GroupFormProps<T>) {
-  const t = useTranslations('server');
-
-  const [open, setOpen] = useState(false);
-  const form = useForm({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      ...initialValues,
-    },
-  });
-
-  useEffect(() => {
-    form?.reset(initialValues);
-  }, [form, initialValues]);
-
-  async function handleSubmit(data: { [x: string]: any }) {
-    const bool = await onSubmit(data as T);
-
-    if (bool) setOpen(false);
-  }
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
-        <Button
-          onClick={() => {
-            form.reset();
-            setOpen(true);
-          }}
-        >
-          {trigger}
-        </Button>
-      </SheetTrigger>
-      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
-        <SheetHeader>
-          <SheetTitle>{title}</SheetTitle>
-        </SheetHeader>
-        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-4 px-6 pt-4'>
-              <FormField
-                control={form.control}
-                name='name'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('group.form.name')}</FormLabel>
-                    <FormControl>
-                      <EnhancedInput
-                        {...field}
-                        onValueChange={(value) => {
-                          form.setValue(field.name, value);
-                        }}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name='description'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('group.form.description')}</FormLabel>
-                    <FormControl>
-                      <EnhancedInput
-                        {...field}
-                        onValueChange={(value) => {
-                          form.setValue(field.name, value);
-                        }}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </form>
-          </Form>
-        </ScrollArea>
-        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
-          <Button
-            variant='outline'
-            disabled={loading}
-            onClick={() => {
-              setOpen(false);
-            }}
-          >
-            {t('group.form.cancel')}
-          </Button>
-          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
-            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
-            {t('group.form.confirm')}
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-}
--- a/apps/admin/app/dashboard/server/group-table.tsx
+++ b/apps/admin/app/dashboard/server/group-table.tsx
@ -1,140 +0,0 @@
-'use client';
-
-import { ProTable, ProTableActions } from '@/components/pro-table';
-import {
-  batchDeleteNodeGroup,
-  createNodeGroup,
-  deleteNodeGroup,
-  getNodeGroupList,
-  updateNodeGroup,
-} from '@/services/admin/server';
-import { Button } from '@workspace/ui/components/button';
-import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
-import { formatDate } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { useRef, useState } from 'react';
-import { toast } from 'sonner';
-import GroupForm from './group-form';
-
-export default function GroupTable() {
-  const t = useTranslations('server');
-  const [loading, setLoading] = useState(false);
-  const ref = useRef<ProTableActions>(null);
-
-  return (
-    <ProTable<API.ServerGroup, any>
-      action={ref}
-      header={{
-        title: t('group.title'),
-        toolbar: (
-          <GroupForm<API.CreateNodeGroupRequest>
-            trigger={t('group.create')}
-            title={t('group.createNodeGroup')}
-            loading={loading}
-            onSubmit={async (values) => {
-              setLoading(true);
-              try {
-                await createNodeGroup(values);
-                toast.success(t('group.createdSuccessfully'));
-                ref.current?.refresh();
-                setLoading(false);
-
-                return true;
-              } catch (error) {
-                setLoading(false);
-
-                return false;
-              }
-            }}
-          />
-        ),
-      }}
-      columns={[
-        {
-          accessorKey: 'name',
-          header: t('group.name'),
-        },
-        {
-          accessorKey: 'description',
-          header: t('group.description'),
-          cell: ({ row }) => <p className='line-clamp-3'>{row.getValue('description')}</p>,
-        },
-        {
-          accessorKey: 'updated_at',
-          header: t('group.updatedAt'),
-          cell: ({ row }) => formatDate(row.getValue('updated_at')),
-        },
-      ]}
-      request={async () => {
-        const { data } = await getNodeGroupList();
-        return {
-          list: data.data?.list || [],
-          total: data.data?.total || 0,
-        };
-      }}
-      actions={{
-        render: (row) => [
-          <GroupForm<API.ServerGroup>
-            key='edit'
-            trigger={t('group.edit')}
-            title={t('group.editNodeGroup')}
-            loading={loading}
-            initialValues={row}
-            onSubmit={async (values) => {
-              setLoading(true);
-              try {
-                await updateNodeGroup({
-                  ...row,
-                  ...values,
-                });
-                toast.success(t('group.createdSuccessfully'));
-                ref.current?.refresh();
-                setLoading(false);
-
-                return true;
-              } catch (error) {
-                setLoading(false);
-
-                return false;
-              }
-            }}
-          />,
-          <ConfirmButton
-            key='delete'
-            trigger={<Button variant='destructive'>{t('group.delete')}</Button>}
-            title={t('group.confirmDelete')}
-            description={t('group.deleteWarning')}
-            onConfirm={async () => {
-              await deleteNodeGroup({
-                id: row.id!,
-              });
-              toast.success(t('group.deletedSuccessfully'));
-              ref.current?.refresh();
-            }}
-            cancelText={t('group.cancel')}
-            confirmText={t('group.confirm')}
-          />,
-        ],
-        batchRender(rows) {
-          return [
-            <ConfirmButton
-              key='delete'
-              trigger={<Button variant='destructive'>{t('group.delete')}</Button>}
-              title={t('group.confirmDelete')}
-              description={t('group.deleteWarning')}
-              onConfirm={async () => {
-                await batchDeleteNodeGroup({
-                  ids: rows.map((item) => item.id),
-                });
-                toast.success(t('group.deleteSuccess'));
-                ref.current?.refresh();
-              }}
-              cancelText={t('group.cancel')}
-              confirmText={t('group.confirm')}
-            />,
-          ];
-        },
-      }}
-    />
-  );
-}
--- a/apps/admin/app/dashboard/server/node-config.tsx
+++ b/apps/admin/app/dashboard/server/node-config.tsx
@ -1,296 +0,0 @@
-'use client';
-
-import {
-  getNodeConfig,
-  getNodeMultiplier,
-  setNodeMultiplier,
-  updateNodeConfig,
-} from '@/services/admin/system';
-import { useQuery } from '@tanstack/react-query';
-import { Button } from '@workspace/ui/components/button';
-import { ChartContainer, ChartTooltip } from '@workspace/ui/components/chart';
-import { Label } from '@workspace/ui/components/label';
-import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
-import { ArrayInput } from '@workspace/ui/custom-components/dynamic-Inputs';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { DicesIcon } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { uid } from 'radash';
-import { useMemo, useState } from 'react';
-import { Cell, Legend, Pie, PieChart } from 'recharts';
-import { toast } from 'sonner';
-
-const COLORS = [
-  'hsl(var(--chart-1))',
-  'hsl(var(--chart-2))',
-  'hsl(var(--chart-3))',
-  'hsl(var(--chart-4))',
-  'hsl(var(--chart-5))',
-];
-
-const MINUTES_IN_DAY = 1440; // 24 * 60
-
-function getTimeRangeData(slots: API.TimePeriod[]) {
-  const timePoints = slots
-    .filter((slot) => slot.start_time && slot.end_time)
-    .flatMap((slot) => {
-      const [startH = 0, startM = 0] = slot.start_time.split(':').map(Number);
-      const [endH = 0, endM = 0] = slot?.end_time.split(':').map(Number);
-      const start = startH * 60 + startM;
-      let end = endH * 60 + endM;
-      if (end < start) end += MINUTES_IN_DAY;
-      return { start, end, multiplier: slot.multiplier };
-    })
-    .sort((a, b) => a.start - b.start);
-
-  const result = [];
-  let currentMinute = 0;
-
-  timePoints.forEach((point) => {
-    if (point.start > currentMinute) {
-      result.push({
-        name: `${Math.floor(currentMinute / 60)}:${String(currentMinute % 60).padStart(2, '0')} - ${Math.floor(point.start / 60)}:${String(point.start % 60).padStart(2, '0')}`,
-        value: point.start - currentMinute,
-        multiplier: 1,
-      });
-    }
-    result.push({
-      name: `${Math.floor(point.start / 60)}:${String(point.start % 60).padStart(2, '0')} - ${Math.floor((point.end / 60) % 24)}:${String(point.end % 60).padStart(2, '0')}`,
-      value: point.end - point.start,
-      multiplier: point.multiplier,
-    });
-    currentMinute = point.end % MINUTES_IN_DAY;
-  });
-
-  if (currentMinute < MINUTES_IN_DAY) {
-    result.push({
-      name: `${Math.floor(currentMinute / 60)}:${String(currentMinute % 60).padStart(2, '0')} - 24:00`,
-      value: MINUTES_IN_DAY - currentMinute,
-      multiplier: 1,
-    });
-  }
-
-  return result;
-}
-
-export default function NodeConfig() {
-  const t = useTranslations('server.config');
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getNodeConfig'],
-    queryFn: async () => {
-      const { data } = await getNodeConfig();
-
-      return data.data;
-    },
-  });
-
-  async function updateConfig(key: string, value: unknown) {
-    if (data?.[key] === value) return;
-    try {
-      await updateNodeConfig({
-        ...data,
-        [key]: value,
-      } as API.NodeConfig);
-      toast.success(t('saveSuccess'));
-      refetch();
-    } catch (error) {
-      /* empty */
-    }
-  }
-
-  const [timeSlots, setTimeSlots] = useState<API.TimePeriod[]>([]);
-
-  const { data: NodeMultiplier, refetch: refetchNodeMultiplier } = useQuery({
-    queryKey: ['getNodeMultiplier'],
-    queryFn: async () => {
-      const { data } = await getNodeMultiplier();
-      if (timeSlots.length === 0) {
-        setTimeSlots(data.data?.periods || []);
-      }
-      return data.data?.periods || [];
-    },
-  });
-
-  const chartTimeSlots = useMemo(() => {
-    return getTimeRangeData(timeSlots);
-  }, [timeSlots]);
-
-  const chartConfig = useMemo(() => {
-    return chartTimeSlots?.reduce(
-      (acc, item, index) => {
-        acc[item.name] = {
-          label: item.name,
-          color: COLORS[index % COLORS.length] || 'hsl(var(--default-chart-color))',
-        };
-        return acc;
-      },
-      {} as Record<string, { label: string; color: string }>,
-    );
-  }, [data]);
-
-  return (
-    <>
-      <Table>
-        <TableBody>
-          <TableRow>
-            <TableCell>
-              <Label>{t('communicationKey')}</Label>
-              <p className='text-muted-foreground text-xs'>{t('communicationKeyDescription')}</p>
-            </TableCell>
-            <TableCell className='text-right'>
-              <EnhancedInput
-                placeholder={t('inputPlaceholder')}
-                value={data?.node_secret}
-                onValueBlur={(value) => updateConfig('node_secret', value)}
-                suffix={
-                  <div className='bg-muted flex h-9 items-center text-nowrap px-3'>
-                    <DicesIcon
-                      onClick={() => {
-                        const id = uid(32).toLowerCase();
-                        const formatted = `${id.slice(0, 8)}-${id.slice(8, 12)}-${id.slice(12, 16)}-${id.slice(16, 20)}-${id.slice(20)}`;
-                        updateConfig('node_secret', formatted);
-                      }}
-                      className='cursor-pointer'
-                    />
-                  </div>
-                }
-              />
-            </TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>
-              <Label>{t('nodePullInterval')}</Label>
-              <p className='text-muted-foreground text-xs'>{t('nodePullIntervalDescription')}</p>
-            </TableCell>
-            <TableCell className='text-right'>
-              <EnhancedInput
-                type='number'
-                min={0}
-                onValueBlur={(value) => updateConfig('node_pull_interval', value)}
-                suffix='S'
-                value={data?.node_pull_interval}
-                placeholder={t('inputPlaceholder')}
-              />
-            </TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>
-              <Label>{t('nodePushInterval')}</Label>
-              <p className='text-muted-foreground text-xs'>{t('nodePushIntervalDescription')}</p>
-            </TableCell>
-            <TableCell className='text-right'>
-              <EnhancedInput
-                type='number'
-                min={0}
-                step={0.1}
-                value={data?.node_push_interval}
-                onValueBlur={(value) => updateConfig('node_push_interval', value)}
-                placeholder={t('inputPlaceholder')}
-              />
-            </TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>
-              <Label>{t('dynamicMultiplier')}</Label>
-              <p className='text-muted-foreground text-xs'>{t('dynamicMultiplierDescription')}</p>
-            </TableCell>
-            <TableCell className='flex justify-end gap-2'>
-              <Button
-                size='sm'
-                variant='outline'
-                onClick={() => {
-                  setTimeSlots(NodeMultiplier || []);
-                }}
-              >
-                {t('reset')}
-              </Button>
-              <Button
-                size='sm'
-                onClick={() => {
-                  setNodeMultiplier({
-                    periods: timeSlots,
-                  }).then(async () => {
-                    const result = await refetchNodeMultiplier();
-                    if (result.data) setTimeSlots(result.data);
-                    toast.success(t('saveSuccess'));
-                  });
-                }}
-              >
-                {t('save')}
-              </Button>
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-      <div className='flex flex-col-reverse gap-8 px-4 pt-6 md:flex-row md:items-start'>
-        <div className='w-full md:w-1/2'>
-          <ChartContainer config={chartConfig} className='mx-auto aspect-[4/3] max-w-[400px]'>
-            <PieChart>
-              <Pie
-                data={chartTimeSlots}
-                cx='50%'
-                cy='50%'
-                labelLine={false}
-                outerRadius='80%'
-                fill='#8884d8'
-                dataKey='value'
-                label={({ name, percent, multiplier }) =>
-                  `${(multiplier || 0)?.toFixed(2)}x (${(percent * 100).toFixed(0)}%)`
-                }
-              >
-                {chartTimeSlots.map((entry, index) => (
-                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-                ))}
-              </Pie>
-              <ChartTooltip
-                content={({ payload }) => {
-                  if (payload && payload.length) {
-                    const data = payload[0]?.payload;
-                    return (
-                      <div className='bg-background rounded-lg border p-2 shadow-sm'>
-                        <div className='grid grid-cols-2 gap-2'>
-                          <div className='flex flex-col'>
-                            <span className='text-muted-foreground text-[0.70rem] uppercase'>
-                              {t('timeSlot')}
-                            </span>
-                            <span className='text-muted-foreground font-bold'>
-                              {data.name || '其他'}
-                            </span>
-                          </div>
-                          <div className='flex flex-col'>
-                            <span className='text-muted-foreground text-[0.70rem] uppercase'>
-                              {t('multiplier')}
-                            </span>
-                            <span className='font-bold'>{data.multiplier.toFixed(2)}x</span>
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  }
-                  return null;
-                }}
-              />
-              <Legend />
-            </PieChart>
-          </ChartContainer>
-        </div>
-        <div className='w-full md:w-1/2'>
-          <ArrayInput<API.TimePeriod>
-            fields={[
-              {
-                name: 'start_time',
-                prefix: t('startTime'),
-                type: 'time',
-              },
-              { name: 'end_time', prefix: t('endTime'), type: 'time' },
-              { name: 'multiplier', prefix: t('multiplier'), type: 'number', placeholder: '0' },
-            ]}
-            value={timeSlots}
-            onChange={setTimeSlots}
-          />
-        </div>
-      </div>
-    </>
-  );
-}
--- a/apps/admin/app/dashboard/server/node-form.tsx
+++ b/apps/admin/app/dashboard/server/node-form.tsx
@ -1,956 +0,0 @@
-'use client';
-
-import { getNodeGroupList } from '@/services/admin/server';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useQuery } from '@tanstack/react-query';
-import { Button } from '@workspace/ui/components/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@workspace/ui/components/form';
-import { ScrollArea } from '@workspace/ui/components/scroll-area';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/ui/components/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@workspace/ui/components/sheet';
-import { Switch } from '@workspace/ui/components/switch';
-import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
-import { Combobox } from '@workspace/ui/custom-components/combobox';
-import { ArrayInput } from '@workspace/ui/custom-components/dynamic-Inputs';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { Icon } from '@workspace/ui/custom-components/icon';
-import TagInput from '@workspace/ui/custom-components/tag-input';
-import { cn } from '@workspace/ui/lib/utils';
-import { unitConversion } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-import { formSchema, protocols } from './form-schema';
-interface NodeFormProps<T> {
-  onSubmit: (data: T) => Promise<boolean> | boolean;
-  initialValues?: T;
-  loading?: boolean;
-  trigger: string;
-  title: string;
-}
-
-export default function NodeForm<T extends { [x: string]: any }>({
-  onSubmit,
-  initialValues,
-  loading,
-  trigger,
-  title,
-}: Readonly<NodeFormProps<T>>) {
-  const t = useTranslations('server.node');
-
-  const [open, setOpen] = useState(false);
-  const form = useForm({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      tags: [],
-      traffic_ratio: 1,
-      protocol: 'shadowsocks',
-      ...initialValues,
-      config: {
-        security: 'none',
-        transport: 'tcp',
-        ...initialValues?.config,
-      },
-    } as any,
-  });
-  const protocol = form.watch('protocol');
-  const transport = form.watch('config.transport');
-  const security = form.watch('config.security');
-  const relayMode = form.watch('relay_mode');
-  const method = form.watch('config.method');
-
-  useEffect(() => {
-    form?.reset(initialValues);
-  }, [form, initialValues]);
-
-  async function handleSubmit(data: { [x: string]: any }) {
-    const bool = await onSubmit(data as unknown as T);
-    if (bool) setOpen(false);
-  }
-
-  const { data: groups } = useQuery({
-    queryKey: ['getNodeGroupList'],
-    queryFn: async () => {
-      const { data } = await getNodeGroupList();
-      return (data.data?.list || []) as API.ServerGroup[];
-    },
-  });
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
-        <Button
-          onClick={() => {
-            form.reset();
-            setOpen(true);
-          }}
-        >
-          {trigger}
-        </Button>
-      </SheetTrigger>
-      <SheetContent className='w-[520px] max-w-full md:max-w-screen-md'>
-        <SheetHeader>
-          <SheetTitle>{title}</SheetTitle>
-        </SheetHeader>
-        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
-          <Form {...form}>
-            <form className='grid grid-cols-1 gap-2 px-6 pt-4'>
-              <div className='grid grid-cols-2 gap-2'>
-                <FormField
-                  control={form.control}
-                  name='name'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.name')}</FormLabel>
-                      <FormControl>
-                        <EnhancedInput
-                          {...field}
-                          onValueChange={(value) => {
-                            form.setValue(field.name, value);
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name='group_id'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.groupId')}</FormLabel>
-                      <FormControl>
-                        <Combobox<number, false>
-                          placeholder={t('form.selectNodeGroup')}
-                          {...field}
-                          options={groups?.map((item) => ({
-                            value: item.id,
-                            label: item.name,
-                          }))}
-                          onChange={(value) => {
-                            form.setValue(field.name, value || 0);
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-              <div className='grid grid-cols-5 gap-2'>
-                <FormField
-                  control={form.control}
-                  name='tags'
-                  render={({ field }) => (
-                    <FormItem className='col-span-3'>
-                      <FormLabel>{t('form.tags')}</FormLabel>
-                      <FormControl>
-                        <TagInput
-                          placeholder={t('form.tagsPlaceholder')}
-                          value={field.value || []}
-                          onChange={(value) => form.setValue(field.name, value)}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name='country'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.country')}</FormLabel>
-                      <FormControl>
-                        <EnhancedInput
-                          {...field}
-                          onValueChange={(value) => {
-                            form.setValue(field.name, value);
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name='city'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.city')}</FormLabel>
-                      <FormControl>
-                        <EnhancedInput
-                          {...field}
-                          onValueChange={(value) => {
-                            form.setValue(field.name, value);
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-              <div className='grid grid-cols-3 gap-2'>
-                <FormField
-                  control={form.control}
-                  name='server_addr'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.serverAddr')}</FormLabel>
-                      <FormControl>
-                        <EnhancedInput
-                          {...field}
-                          onValueChange={(value) => {
-                            form.setValue(field.name, value);
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name='speed_limit'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.speedLimit')}</FormLabel>
-                      <FormControl>
-                        <EnhancedInput
-                          type='number'
-                          {...field}
-                          placeholder={t('form.speedLimitPlaceholder')}
-                          formatInput={(value) => unitConversion('bitsToMb', value)}
-                          formatOutput={(value) => unitConversion('mbToBits', value)}
-                          onValueChange={(value) => {
-                            form.setValue(field.name, value);
-                          }}
-                          suffix='Mbps'
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name='traffic_ratio'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.trafficRatio')}</FormLabel>
-                      <FormControl>
-                        <EnhancedInput
-                          {...field}
-                          type='number'
-                          onValueChange={(value) => {
-                            form.setValue(field.name, value);
-                          }}
-                          suffix='X'
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-
-              <FormField
-                control={form.control}
-                name='protocol'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('form.protocol')}</FormLabel>
-                    <FormControl>
-                      <Tabs
-                        value={field.value}
-                        onValueChange={(value) => {
-                          form.setValue(field.name, value);
-                          if (['trojan', 'hysteria2', 'tuic'].includes(value)) {
-                            form.setValue('config.security', 'tls');
-                          }
-                        }}
-                      >
-                        <TabsList className='h-full w-full flex-wrap md:flex-nowrap'>
-                          {protocols.map((proto) => (
-                            <TabsTrigger value={proto} key={proto}>
-                              {proto.charAt(0).toUpperCase() + proto.slice(1)}
-                            </TabsTrigger>
-                          ))}
-                        </TabsList>
-                      </Tabs>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {protocol === 'shadowsocks' && (
-                <div className='grid grid-cols-2 gap-2'>
-                  <FormField
-                    control={form.control}
-                    name='config.method'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('form.encryptionMethod')}</FormLabel>
-                        <FormControl>
-                          <Select
-                            onValueChange={(value) => {
-                              form.setValue(field.name, value);
-                            }}
-                            defaultValue={field.value}
-                          >
-                            <FormControl>
-                              <SelectTrigger>
-                                <SelectValue placeholder={t('form.selectEncryptionMethod')} />
-                              </SelectTrigger>
-                            </FormControl>
-                            <SelectContent>
-                              <SelectItem value='aes-128-gcm'>aes-128-gcm</SelectItem>
-                              <SelectItem value='aes-192-gcm'>aes-192-gcm</SelectItem>
-                              <SelectItem value='aes-256-gcm'>aes-256-gcm</SelectItem>
-                              <SelectItem value='chacha20-ietf-poly1305'>
-                                chacha20-ietf-poly1305
-                              </SelectItem>
-                              <SelectItem value='2022-blake3-aes-128-gcm'>
-                                2022-blake3-aes-128-gcm
-                              </SelectItem>
-                              <SelectItem value='2022-blake3-aes-256-gcm'>
-                                2022-blake3-aes-256-gcm
-                              </SelectItem>
-                              <SelectItem value='2022-blake3-chacha20-poly1305'>
-                                2022-blake3-chacha20-poly1305
-                              </SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name='config.port'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('form.port')}</FormLabel>
-                        <FormControl>
-                          <EnhancedInput
-                            {...field}
-                            type='number'
-                            placeholder='1-65535'
-                            min={1}
-                            max={65535}
-                            onValueChange={(value) => {
-                              form.setValue(field.name, value);
-                            }}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  {[
-                    '2022-blake3-aes-128-gcm',
-                    '2022-blake3-aes-256-gcm',
-                    '2022-blake3-chacha20-poly1305',
-                  ].includes(method) && (
-                    <FormField
-                      control={form.control}
-                      name='config.server_key'
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>{t('form.serverKey')}</FormLabel>
-                          <FormControl>
-                            <EnhancedInput
-                              {...field}
-                              onValueChange={(value) => {
-                                form.setValue(field.name, value);
-                              }}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  )}
-                </div>
-              )}
-
-              {['vmess', 'vless', 'trojan', 'hysteria2', 'tuic'].includes(protocol) && (
-                <div className='grid gap-4'>
-                  <div
-                    className={cn('flex gap-4 *:flex-1', {
-                      'grid grid-cols-2': ['hysteria2'].includes(protocol),
-                    })}
-                  >
-                    <FormField
-                      control={form.control}
-                      name='config.port'
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>{t('form.port')}</FormLabel>
-                          <FormControl>
-                            <EnhancedInput
-                              {...field}
-                              type='number'
-                              placeholder='1-65535'
-                              onValueChange={(value) => {
-                                form.setValue(field.name, value);
-                              }}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    {protocol === 'vless' && (
-                      <FormField
-                        control={form.control}
-                        name='config.flow'
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>{t('form.flow')}</FormLabel>
-                            <FormControl>
-                              <Select
-                                value={field.value}
-                                onValueChange={(value) => {
-                                  form.setValue(field.name, value);
-                                }}
-                              >
-                                <FormControl>
-                                  <SelectTrigger>
-                                    <SelectValue placeholder={t('form.pleaseSelect')} />
-                                  </SelectTrigger>
-                                </FormControl>
-                                <SelectContent>
-                                  <SelectItem value='none'>NONE</SelectItem>
-                                  <SelectItem value='xtls-rprx-vision'>xtls-rprx-vision</SelectItem>
-                                </SelectContent>
-                              </Select>
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    )}
-                    {protocol === 'hysteria2' && (
-                      <>
-                        <FormField
-                          control={form.control}
-                          name='config.obfs_password'
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>{t('form.obfsPassword')}</FormLabel>
-                              <FormControl>
-                                <EnhancedInput
-                                  {...field}
-                                  placeholder={t('form.obfsPasswordPlaceholder')}
-                                  onValueChange={(value) => {
-                                    form.setValue(field.name, value);
-                                  }}
-                                />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                        <FormField
-                          control={form.control}
-                          name='config.hop_ports'
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>{t('form.hopPorts')}</FormLabel>
-                              <FormControl>
-                                <EnhancedInput
-                                  placeholder={t('form.hopPortsPlaceholder')}
-                                  {...field}
-                                  onValueChange={(value) => {
-                                    form.setValue(field.name, value);
-                                  }}
-                                />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                        <FormField
-                          control={form.control}
-                          name='config.hop_interval'
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>{t('form.hopInterval')}</FormLabel>
-                              <FormControl>
-                                <EnhancedInput
-                                  {...field}
-                                  type='number'
-                                  onValueChange={(value) => {
-                                    form.setValue(field.name, value);
-                                  }}
-                                  suffix='S'
-                                />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                      </>
-                    )}
-                  </div>
-                  {['vmess', 'vless', 'trojan'].includes(protocol) && (
-                    <Card>
-                      <CardHeader className='flex flex-row items-center justify-between p-3'>
-                        <CardTitle>{t('form.transportConfig')}</CardTitle>
-                        <FormField
-                          control={form.control}
-                          name='config.transport'
-                          render={({ field }) => (
-                            <FormItem className='!mt-0 min-w-32'>
-                              <FormControl>
-                                <Select
-                                  value={field.value}
-                                  onValueChange={(value) => {
-                                    form.setValue(field.name, value);
-                                  }}
-                                >
-                                  <FormControl>
-                                    <SelectTrigger>
-                                      <SelectValue placeholder={t('form.pleaseSelect')} />
-                                    </SelectTrigger>
-                                  </FormControl>
-                                  <SelectContent>
-                                    <SelectItem value='tcp'>TCP</SelectItem>
-                                    <SelectItem value='websocket'>WebSocket</SelectItem>
-                                    {['vless'].includes(protocol) && (
-                                      <SelectItem value='http2'>HTTP/2</SelectItem>
-                                    )}
-                                    <SelectItem value='grpc'>gRPC</SelectItem>
-                                    {['vmess', 'vless'].includes(protocol) && (
-                                      <SelectItem value='httpupgrade'>HTTPUPgrade</SelectItem>
-                                    )}
-                                  </SelectContent>
-                                </Select>
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                      </CardHeader>
-                      {transport !== 'tcp' && (
-                        <CardContent className='flex gap-4 p-3'>
-                          {['websocket', 'http2', 'httpupgrade'].includes(transport) && (
-                            <>
-                              <FormField
-                                control={form.control}
-                                name='config.transport_config.path'
-                                render={({ field }) => (
-                                  <FormItem>
-                                    <FormLabel>PATH</FormLabel>
-                                    <FormControl>
-                                      <EnhancedInput
-                                        {...field}
-                                        onValueChange={(value) => {
-                                          form.setValue(field.name, value);
-                                        }}
-                                      />
-                                    </FormControl>
-                                    <FormMessage />
-                                  </FormItem>
-                                )}
-                              />
-                              <FormField
-                                control={form.control}
-                                name='config.transport_config.host'
-                                render={({ field }) => (
-                                  <FormItem>
-                                    <FormLabel>HOST</FormLabel>
-                                    <FormControl>
-                                      <EnhancedInput
-                                        {...field}
-                                        onValueChange={(value) => {
-                                          form.setValue(field.name, value);
-                                        }}
-                                      />
-                                    </FormControl>
-                                    <FormMessage />
-                                  </FormItem>
-                                )}
-                              />
-                            </>
-                          )}
-                          {['grpc'].includes(transport) && (
-                            <FormField
-                              control={form.control}
-                              name='config.transport_config.service_name'
-                              render={({ field }) => (
-                                <FormItem>
-                                  <FormLabel>Service Name</FormLabel>
-                                  <FormControl>
-                                    <EnhancedInput
-                                      {...field}
-                                      onValueChange={(value) => {
-                                        form.setValue(field.name, value);
-                                      }}
-                                    />
-                                  </FormControl>
-                                  <FormMessage />
-                                </FormItem>
-                              )}
-                            />
-                          )}
-                        </CardContent>
-                      )}
-                    </Card>
-                  )}
-                  <Card>
-                    <CardHeader className='flex flex-row items-center justify-between p-3'>
-                      <CardTitle>{t('form.securityConfig')}</CardTitle>
-                      <FormField
-                        control={form.control}
-                        name='config.security'
-                        render={({ field }) => (
-                          <FormItem className='!mt-0 min-w-32'>
-                            <Select
-                              value={field.value}
-                              onValueChange={(value) => {
-                                form.setValue(field.name, value);
-                              }}
-                            >
-                              <FormControl>
-                                <SelectTrigger>
-                                  <SelectValue placeholder={t('form.pleaseSelect')} />
-                                </SelectTrigger>
-                              </FormControl>
-                              <SelectContent>
-                                {['vmess', 'vless'].includes(protocol) && (
-                                  <SelectItem value='none'>NONE</SelectItem>
-                                )}
-                                <SelectItem value='tls'>TLS</SelectItem>
-                                {protocol === 'vless' && (
-                                  <SelectItem value='reality'>Reality</SelectItem>
-                                )}
-                              </SelectContent>
-                            </Select>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </CardHeader>
-                    {security !== 'none' && (
-                      <CardContent className='grid grid-cols-2 gap-4 p-3'>
-                        <FormField
-                          control={form.control}
-                          name='config.security_config.sni'
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>Server Name(SNI)</FormLabel>
-                              <FormControl>
-                                <EnhancedInput
-                                  {...field}
-                                  onValueChange={(value) => {
-                                    form.setValue(field.name, value);
-                                  }}
-                                />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                        {protocol === 'vless' && security === 'reality' && (
-                          <>
-                            <FormField
-                              control={form.control}
-                              name='config.security_config.reality_server_addr'
-                              render={({ field }) => (
-                                <FormItem>
-                                  <FormLabel>{t('form.security_config.serverAddress')}</FormLabel>
-                                  <FormControl>
-                                    <EnhancedInput
-                                      {...field}
-                                      placeholder={t(
-                                        'form.security_config.serverAddressPlaceholder',
-                                      )}
-                                      onValueChange={(value) => {
-                                        form.setValue(field.name, value);
-                                      }}
-                                    />
-                                  </FormControl>
-                                  <FormMessage />
-                                </FormItem>
-                              )}
-                            />
-                            <FormField
-                              control={form.control}
-                              name='config.security_config.reality_server_port'
-                              render={({ field }) => (
-                                <FormItem>
-                                  <FormLabel>{t('form.security_config.serverPort')}</FormLabel>
-                                  <FormControl>
-                                    <EnhancedInput
-                                      {...field}
-                                      type='number'
-                                      min={1}
-                                      max={65535}
-                                      placeholder={t('form.security_config.serverPortPlaceholder')}
-                                      onValueChange={(value) => {
-                                        form.setValue(field.name, value);
-                                      }}
-                                    />
-                                  </FormControl>
-                                  <FormMessage />
-                                </FormItem>
-                              )}
-                            />
-                            <FormField
-                              control={form.control}
-                              name='config.security_config.reality_private_key'
-                              render={({ field }) => (
-                                <FormItem>
-                                  <FormLabel>{t('form.security_config.privateKey')}</FormLabel>
-                                  <FormControl>
-                                    <EnhancedInput
-                                      {...field}
-                                      placeholder={t('form.security_config.privateKeyPlaceholder')}
-                                      onValueChange={(value) => {
-                                        form.setValue(field.name, value);
-                                      }}
-                                    />
-                                  </FormControl>
-                                  <FormMessage />
-                                </FormItem>
-                              )}
-                            />
-                            <FormField
-                              control={form.control}
-                              name='config.security_config.reality_public_key'
-                              render={({ field }) => (
-                                <FormItem>
-                                  <FormLabel>{t('form.security_config.publicKey')}</FormLabel>
-                                  <FormControl>
-                                    <EnhancedInput
-                                      {...field}
-                                      placeholder={t('form.security_config.publicKeyPlaceholder')}
-                                      onValueChange={(value) => {
-                                        form.setValue(field.name, value);
-                                      }}
-                                    />
-                                  </FormControl>
-                                  <FormMessage />
-                                </FormItem>
-                              )}
-                            />
-                            <FormField
-                              control={form.control}
-                              name='config.security_config.reality_short_id'
-                              render={({ field }) => (
-                                <FormItem>
-                                  <FormLabel>{t('form.security_config.shortId')}</FormLabel>
-                                  <FormControl>
-                                    <EnhancedInput
-                                      {...field}
-                                      placeholder={t('form.security_config.shortIdPlaceholder')}
-                                      onValueChange={(value) => {
-                                        form.setValue(field.name, value);
-                                      }}
-                                    />
-                                  </FormControl>
-                                  <FormMessage />
-                                </FormItem>
-                              )}
-                            />
-                          </>
-                        )}
-                        {protocol === 'vless' && (
-                          <FormField
-                            control={form.control}
-                            name='config.security_config.fingerprint'
-                            render={({ field }) => (
-                              <FormItem>
-                                <FormLabel>{t('form.security_config.fingerprint')}</FormLabel>
-                                <Select
-                                  value={field.value}
-                                  onValueChange={(value) => {
-                                    form.setValue(field.name, value);
-                                  }}
-                                >
-                                  <FormControl>
-                                    <SelectTrigger>
-                                      <SelectValue placeholder={t('form.pleaseSelect')} />
-                                    </SelectTrigger>
-                                  </FormControl>
-                                  <SelectContent>
-                                    <SelectItem value='chrome'>Chrome</SelectItem>
-                                    <SelectItem value='firefox'>Firefox</SelectItem>
-                                    <SelectItem value='safari'>Safari</SelectItem>
-                                    <SelectItem value='ios'>IOS</SelectItem>
-                                    <SelectItem value='android'>Android</SelectItem>
-                                    <SelectItem value='edge'>edge</SelectItem>
-                                    <SelectItem value='360'>360</SelectItem>
-                                    <SelectItem value='qq'>QQ</SelectItem>
-                                  </SelectContent>
-                                </Select>
-                                <FormMessage />
-                                <FormMessage />
-                              </FormItem>
-                            )}
-                          />
-                        )}
-                        <FormField
-                          control={form.control}
-                          name='config.security_config.allow_insecure'
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>Allow Insecure</FormLabel>
-                              <FormControl>
-                                <div className='pt-2'>
-                                  <Switch
-                                    checked={!!field.value}
-                                    onCheckedChange={(value) => {
-                                      form.setValue(field.name, value);
-                                    }}
-                                  />
-                                </div>
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                      </CardContent>
-                    )}
-                  </Card>
-                </div>
-              )}
-
-              <Card>
-                <CardHeader className='flex flex-row items-center justify-between p-3'>
-                  <CardTitle>{t('form.relayMode')}</CardTitle>
-                  <FormField
-                    control={form.control}
-                    name='relay_mode'
-                    render={({ field }) => (
-                      <FormItem className='!mt-0 min-w-32'>
-                        <FormControl>
-                          <Select
-                            value={field.value}
-                            onValueChange={(value) => {
-                              form.setValue(field.name, value);
-                            }}
-                          >
-                            <FormControl>
-                              <SelectTrigger>
-                                <SelectValue placeholder={t('form.selectRelayMode')} />
-                              </SelectTrigger>
-                            </FormControl>
-                            <SelectContent>
-                              <SelectItem value='none'>
-                                {t('form.relayModeOptions.none')}
-                              </SelectItem>
-                              <SelectItem value='all'>{t('form.relayModeOptions.all')}</SelectItem>
-                              <SelectItem value='random'>
-                                {t('form.relayModeOptions.random')}
-                              </SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </CardHeader>
-                {relayMode !== 'none' && (
-                  <CardContent className='w-full space-y-3 px-3'>
-                    <FormField
-                      control={form.control}
-                      name='relay_node'
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <ArrayInput
-                              fields={[
-                                {
-                                  name: 'host',
-                                  type: 'text',
-                                  placeholder: t('form.relayHost'),
-                                },
-                                {
-                                  name: 'port',
-                                  type: 'number',
-                                  min: 1,
-                                  max: 65535,
-                                  placeholder: t('form.relayPort'),
-                                },
-                                {
-                                  name: 'prefix',
-                                  type: 'text',
-                                  placeholder: t('form.relayPrefix'),
-                                },
-                              ]}
-                              value={field.value}
-                              onChange={(value) => {
-                                form.setValue(field.name, value);
-                              }}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  </CardContent>
-                )}
-              </Card>
-            </form>
-          </Form>
-        </ScrollArea>
-        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
-          <Button
-            variant='outline'
-            disabled={loading}
-            onClick={() => {
-              setOpen(false);
-            }}
-          >
-            {t('form.cancel')}
-          </Button>
-          <Button
-            disabled={loading}
-            onClick={form.handleSubmit(handleSubmit, (errors) => {
-              const keys = Object.keys(errors);
-              for (const key of keys) {
-                const formattedKey = key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
-                toast.error(`${t(`form.${formattedKey}`)} is ${errors[key]?.message}`);
-                return false;
-              }
-            })}
-          >
-            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
-            {t('form.confirm')}
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-}
--- a/apps/admin/app/dashboard/server/node-status.tsx
+++ b/apps/admin/app/dashboard/server/node-status.tsx
@ -1,99 +0,0 @@
-'use client';
-
-import { Badge } from '@workspace/ui/components/badge';
-import { Progress } from '@workspace/ui/components/progress';
-import { ScrollArea } from '@workspace/ui/components/scroll-area';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@workspace/ui/components/tooltip';
-import { formatDate } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-
-export function formatPercentage(value: number): string {
-  return `${value.toFixed(1)}%`;
-}
-
-export function NodeStatusCell({ status }: { status: API.NodeStatus }) {
-  const t = useTranslations('server.node');
-
-  const {
-    last_at,
-    online_users,
-    status: serverStatus,
-  } = status || {
-    online_users: [],
-    status: {
-      cpu: 0,
-      mem: 0,
-      disk: 0,
-      updated_at: 0,
-    },
-    last_at: 0,
-  };
-  const isOnline = last_at > 0;
-  const badgeVariant = isOnline ? 'default' : 'destructive';
-  const badgeText = isOnline ? t('normal') : t('abnormal');
-  const onlineCount = Array.isArray(online_users) ? online_users?.length : 0;
-
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <div className='flex items-center gap-2 text-xs *:flex-1'>
-            <div className='flex items-center space-x-1'>
-              <Badge variant={badgeVariant}>{badgeText}</Badge>
-              <span className='font-medium'>
-                {t('onlineCount')}: {onlineCount}
-              </span>
-            </div>
-            <div className='flex flex-col space-y-1'>
-              <div className='flex justify-between'>
-                <span>CPU</span>
-                <span>{formatPercentage(serverStatus?.cpu ?? 0)}</span>
-              </div>
-              <Progress value={serverStatus?.cpu ?? 0} className='h-2' max={100} />
-            </div>
-            <div className='flex flex-col space-y-1'>
-              <div className='flex justify-between'>
-                <span>{t('memory')}</span>
-                <span>{formatPercentage(serverStatus?.mem ?? 0)}</span>
-              </div>
-              <Progress value={serverStatus?.mem ?? 0} className='h-2' max={100} />
-            </div>
-            <div className='flex flex-col space-y-1'>
-              <div className='flex justify-between'>
-                <span>{t('disk')}</span>
-                <span>{formatPercentage(serverStatus?.disk ?? 0)}</span>
-              </div>
-              <Progress value={serverStatus?.disk ?? 0} className='h-2' max={100} />
-            </div>
-            {isOnline && (
-              <div>
-                {t('lastUpdated')}: {formatDate(serverStatus?.updated_at ?? 0)}
-              </div>
-            )}
-          </div>
-        </TooltipTrigger>
-        {isOnline && onlineCount > 0 && (
-          <TooltipContent className='bg-muted text-foreground w-80'>
-            <div className='space-y-4'>
-              <div className='space-y-2'>
-                <h4 className='text-sm font-semibold'>{t('onlineUsers')}</h4>
-                <ScrollArea className='h-[400px] rounded-md border p-2'>
-                  {online_users.map((user, index) => (
-                    <div key={user.uid} className='py-1 text-xs'>
-                      {user.ip} (UID: {user.uid})
-                    </div>
-                  ))}
-                </ScrollArea>
-              </div>
-            </div>
-          </TooltipContent>
-        )}
-      </Tooltip>
-    </TooltipProvider>
-  );
-}
--- a/apps/admin/app/dashboard/server/node-table.tsx
+++ b/apps/admin/app/dashboard/server/node-table.tsx
@ -1,319 +0,0 @@
-'use client';
-
-import { Display } from '@/components/display';
-import { ProTable, ProTableActions } from '@/components/pro-table';
-import {
-  batchDeleteNode,
-  createNode,
-  deleteNode,
-  getNodeGroupList,
-  getNodeList,
-  nodeSort,
-  updateNode,
-} from '@/services/admin/server';
-import { useQuery } from '@tanstack/react-query';
-import { Badge } from '@workspace/ui/components/badge';
-import { Button } from '@workspace/ui/components/button';
-import { Switch } from '@workspace/ui/components/switch';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@workspace/ui/components/tooltip';
-import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
-import { cn } from '@workspace/ui/lib/utils';
-import { useTranslations } from 'next-intl';
-import { useRef, useState } from 'react';
-import { toast } from 'sonner';
-import NodeForm from './node-form';
-import { NodeStatusCell } from './node-status';
-
-export default function NodeTable() {
-  const t = useTranslations('server.node');
-
-  const [loading, setLoading] = useState(false);
-
-  const { data: groups } = useQuery({
-    queryKey: ['getNodeGroupList'],
-    queryFn: async () => {
-      const { data } = await getNodeGroupList();
-      return (data.data?.list || []) as API.ServerGroup[];
-    },
-  });
-
-  const ref = useRef<ProTableActions>(null);
-
-  return (
-    <ProTable<API.Server, { groupId: number; search: string }>
-      action={ref}
-      header={{
-        toolbar: (
-          <NodeForm<API.CreateNodeRequest>
-            trigger={t('create')}
-            title={t('createNode')}
-            loading={loading}
-            onSubmit={async (values) => {
-              setLoading(true);
-              try {
-                await createNode({ ...values, enable: false });
-                toast.success(t('createSuccess'));
-                ref.current?.refresh();
-                setLoading(false);
-                return true;
-              } catch (error) {
-                setLoading(false);
-
-                return false;
-              }
-            }}
-          />
-        ),
-      }}
-      columns={[
-        {
-          accessorKey: 'id',
-          header: 'ID',
-          cell: ({ row }) => (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger>
-                  <Badge
-                    variant='outline'
-                    className={cn('text-primary-foreground', {
-                      'bg-green-500': row.original.protocol === 'shadowsocks',
-                      'bg-rose-500': row.original.protocol === 'vmess',
-                      'bg-blue-500': row.original.protocol === 'vless',
-                      'bg-yellow-500': row.original.protocol === 'trojan',
-                      'bg-purple-500': row.original.protocol === 'hysteria2',
-                      'bg-cyan-500': row.original.protocol === 'tuic',
-                    })}
-                  >
-                    {row.getValue('id')}
-                  </Badge>
-                </TooltipTrigger>
-                <TooltipContent>{row.original.protocol}</TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          ),
-        },
-        {
-          accessorKey: 'enable',
-          header: t('enable'),
-          cell: ({ row }) => {
-            return (
-              <Switch
-                checked={row.getValue('enable')}
-                onCheckedChange={async (checked) => {
-                  await updateNode({
-                    ...row.original,
-                    id: row.original.id!,
-                    enable: checked,
-                  } as API.UpdateNodeRequest);
-                  ref.current?.refresh();
-                }}
-              />
-            );
-          },
-        },
-        {
-          accessorKey: 'name',
-          header: t('name'),
-        },
-        {
-          accessorKey: 'server_addr',
-          header: t('serverAddr'),
-          cell: ({ row }) => {
-            return (
-              <div className='flex gap-1'>
-                <Badge variant='outline'>
-                  {row.original.country} - {row.original.city}
-                </Badge>
-                <Badge variant='outline'>{row.getValue('server_addr')}</Badge>
-              </div>
-            );
-          },
-        },
-        {
-          accessorKey: 'status',
-          header: t('status'),
-          cell: ({ row }) => {
-            return <NodeStatusCell status={row.original?.status} />;
-          },
-        },
-        {
-          accessorKey: 'speed_limit',
-          header: t('speedLimit'),
-          cell: ({ row }) => (
-            <Display type='trafficSpeed' value={row.getValue('speed_limit')} unlimited />
-          ),
-        },
-        {
-          accessorKey: 'traffic_ratio',
-          header: t('trafficRatio'),
-          cell: ({ row }) => <Badge variant='outline'>{row.getValue('traffic_ratio')} X</Badge>,
-        },
-
-        {
-          accessorKey: 'group_id',
-          header: t('nodeGroup'),
-          cell: ({ row }) => {
-            const name = groups?.find((group) => group.id === row.getValue('group_id'))?.name;
-            return name ? <Badge variant='outline'>{name}</Badge> : '--';
-          },
-        },
-        {
-          accessorKey: 'tags',
-          header: t('tags'),
-          cell: ({ row }) => {
-            const tags = (row.getValue('tags') as string[]) || [];
-            return tags.length > 0 ? (
-              <div className='flex gap-1'>
-                {tags.map((tag) => (
-                  <Badge key={tag} variant='outline'>
-                    {tag}
-                  </Badge>
-                ))}
-              </div>
-            ) : (
-              '--'
-            );
-          },
-        },
-      ]}
-      params={[
-        {
-          key: 'search',
-        },
-        {
-          key: 'group_id',
-          placeholder: t('nodeGroup'),
-          options: groups?.map((item) => ({
-            label: item.name,
-            value: String(item.id),
-          })),
-        },
-      ]}
-      request={async (pagination, filter) => {
-        const { data } = await getNodeList({
-          ...pagination,
-          ...filter,
-        });
-        return {
-          list: data.data?.list || [],
-          total: data.data?.total || 0,
-        };
-      }}
-      actions={{
-        render: (row) => [
-          <NodeForm<API.Server>
-            key='edit'
-            trigger={t('edit')}
-            title={t('editNode')}
-            loading={loading}
-            initialValues={row}
-            onSubmit={async (values) => {
-              setLoading(true);
-              try {
-                await updateNode({ ...row, ...values } as API.UpdateNodeRequest);
-                toast.success(t('updateSuccess'));
-                ref.current?.refresh();
-                setLoading(false);
-
-                return true;
-              } catch (error) {
-                setLoading(false);
-
-                return false;
-              }
-            }}
-          />,
-          <ConfirmButton
-            key='delete'
-            trigger={<Button variant='destructive'>{t('delete')}</Button>}
-            title={t('confirmDelete')}
-            description={t('deleteWarning')}
-            onConfirm={async () => {
-              await deleteNode({
-                id: row.id,
-              });
-              toast.success(t('deleteSuccess'));
-              ref.current?.refresh();
-            }}
-            cancelText={t('cancel')}
-            confirmText={t('confirm')}
-          />,
-          <Button
-            key='copy'
-            variant='outline'
-            onClick={async () => {
-              setLoading(true);
-              try {
-                const { id, sort, enable, updated_at, created_at, status, ...params } = row;
-                await createNode({
-                  ...params,
-                  enable: false,
-                } as API.CreateNodeRequest);
-                toast.success(t('copySuccess'));
-                ref.current?.refresh();
-                setLoading(false);
-                return true;
-              } catch (error) {
-                setLoading(false);
-                return false;
-              }
-            }}
-          >
-            {t('copy')}
-          </Button>,
-        ],
-        batchRender(rows) {
-          return [
-            <ConfirmButton
-              key='delete'
-              trigger={<Button variant='destructive'>{t('delete')}</Button>}
-              title={t('group.confirmDelete')}
-              description={t('group.deleteWarning')}
-              onConfirm={async () => {
-                await batchDeleteNode({
-                  ids: rows.map((item) => item.id),
-                });
-                toast.success(t('group.deleteSuccess'));
-                ref.current?.refresh();
-              }}
-              cancelText={t('group.cancel')}
-              confirmText={t('group.confirm')}
-            />,
-          ];
-        },
-      }}
-      onSort={async (source, target, items) => {
-        const sourceIndex = items.findIndex((item) => String(item.id) === source);
-        const targetIndex = items.findIndex((item) => String(item.id) === target);
-
-        const originalSorts = items.map((item) => item.sort);
-
-        const [movedItem] = items.splice(sourceIndex, 1);
-        items.splice(targetIndex, 0, movedItem!);
-
-        const updatedItems = items.map((item, index) => {
-          const originalSort = originalSorts[index];
-          const newSort = originalSort !== undefined ? originalSort : item.sort;
-          return { ...item, sort: newSort };
-        });
-
-        const changedItems = updatedItems.filter((item, index) => {
-          return item.sort !== items[index]?.sort;
-        });
-
-        if (changedItems.length > 0) {
-          nodeSort({
-            sort: changedItems.map((item) => ({ id: item.id, sort: item.sort })),
-          });
-        }
-
-        return updatedItems;
-      }}
-    />
-  );
-}
--- a/apps/admin/app/dashboard/server/page.tsx
+++ b/apps/admin/app/dashboard/server/page.tsx
@ -1,29 +0,0 @@
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
-import { getTranslations } from 'next-intl/server';
-
-import GroupTable from './group-table';
-import NodeConfig from './node-config';
-import NodeTable from './node-table';
-
-export default async function Page() {
-  const t = await getTranslations('server');
-
-  return (
-    <Tabs defaultValue='node'>
-      <TabsList>
-        <TabsTrigger value='node'>{t('tabs.node')}</TabsTrigger>
-        <TabsTrigger value='group'>{t('tabs.nodeGroup')}</TabsTrigger>
-        <TabsTrigger value='config'>{t('tabs.nodeConfig')}</TabsTrigger>
-      </TabsList>
-      <TabsContent value='node'>
-        <NodeTable />
-      </TabsContent>
-      <TabsContent value='group'>
-        <GroupTable />
-      </TabsContent>
-      <TabsContent value='config'>
-        <NodeConfig />
-      </TabsContent>
-    </Tabs>
-  );
-}
--- a/apps/admin/app/dashboard/servers/dynamic-multiplier.tsx
+++ b/apps/admin/app/dashboard/servers/dynamic-multiplier.tsx
@ -0,0 +1,121 @@
+'use client';
+
+import { getNodeMultiplier, setNodeMultiplier } from '@/services/admin/system';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import { Card, CardContent } from '@workspace/ui/components/card';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { ArrayInput } from '@workspace/ui/custom-components/dynamic-Inputs';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+
+export default function DynamicMultiplier() {
+  const t = useTranslations('servers');
+  const [open, setOpen] = useState(false);
+  const [timeSlots, setTimeSlots] = useState<API.TimePeriod[]>([]);
+
+  const { data: periodsResp, refetch: refetchPeriods } = useQuery({
+    queryKey: ['getNodeMultiplier'],
+    queryFn: async () => {
+      const { data } = await getNodeMultiplier();
+      return (data.data?.periods || []) as API.TimePeriod[];
+    },
+    enabled: open,
+  });
+
+  useEffect(() => {
+    if (periodsResp) {
+      setTimeSlots(periodsResp);
+    }
+  }, [periodsResp]);
+
+  async function savePeriods() {
+    await setNodeMultiplier({ periods: timeSlots });
+    await refetchPeriods();
+    toast.success(t('server_config.saveSuccess'));
+    setOpen(false);
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Card>
+          <CardContent className='p-4'>
+            <div className='flex cursor-pointer items-center justify-between'>
+              <div className='flex items-center gap-3'>
+                <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+                  <Icon icon='mdi:clock-time-eight' className='text-primary h-5 w-5' />
+                </div>
+                <div className='flex-1'>
+                  <p className='font-medium'>{t('server_config.dynamic_multiplier')}</p>
+                  <p className='text-muted-foreground truncate text-sm'>
+                    {t('server_config.dynamic_multiplier_desc')}
+                  </p>
+                </div>
+              </div>
+              <Icon icon='mdi:chevron-right' className='size-6' />
+            </div>
+          </CardContent>
+        </Card>
+      </SheetTrigger>
+
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('server_config.dynamic_multiplier')}</SheetTitle>
+          <SheetDescription>{t('server_config.dynamic_multiplier_desc')}</SheetDescription>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-60px-env(safe-area-inset-top))] px-6'>
+          <div className='space-y-4 pt-4'>
+            <ArrayInput<API.TimePeriod>
+              fields={[
+                {
+                  name: 'start_time',
+                  prefix: t('server_config.fields.start_time'),
+                  type: 'time',
+                  step: '1',
+                },
+                {
+                  name: 'end_time',
+                  prefix: t('server_config.fields.end_time'),
+                  type: 'time',
+                  step: '1',
+                },
+                {
+                  name: 'multiplier',
+                  prefix: t('server_config.fields.multiplier'),
+                  type: 'number',
+                  placeholder: '0',
+                },
+              ]}
+              value={timeSlots}
+              onChange={setTimeSlots}
+            />
+          </div>
+        </ScrollArea>
+
+        <SheetFooter className='flex-row justify-between pt-3'>
+          <Button variant='outline' onClick={() => setTimeSlots(periodsResp || [])}>
+            {t('server_config.fields.reset')}
+          </Button>
+          <div className='flex gap-2'>
+            <Button variant='outline' onClick={() => setOpen(false)}>
+              {t('actions.cancel')}
+            </Button>
+            <Button onClick={savePeriods}>{t('actions.save')}</Button>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/servers/form-schema/constants.ts
+++ b/apps/admin/app/dashboard/servers/form-schema/constants.ts
@ -0,0 +1,102 @@
+export const protocols = [
+  'shadowsocks',
+  'vmess',
+  'vless',
+  'trojan',
+  'hysteria',
+  'tuic',
+  'anytls',
+  'socks',
+  'naive',
+  'http',
+  'mieru',
+] as const;
+
+// Global label map for display; fallback to raw value if missing
+export const LABELS = {
+  // transport
+  'tcp': 'TCP',
+  'udp': 'UDP',
+  'websocket': 'WebSocket',
+  'grpc': 'gRPC',
+  'mkcp': 'mKCP',
+  'httpupgrade': 'HTTP Upgrade',
+  'xhttp': 'XHTTP',
+  // security
+  'none': 'NONE',
+  'tls': 'TLS',
+  'reality': 'Reality',
+  // fingerprint
+  'chrome': 'Chrome',
+  'firefox': 'Firefox',
+  'safari': 'Safari',
+  'ios': 'IOS',
+  'android': 'Android',
+  'edge': 'edge',
+  '360': '360',
+  'qq': 'QQ',
+  // multiplex
+  'low': 'Low',
+  'middle': 'Middle',
+  'high': 'High',
+} as const;
+
+// Flat arrays for enum-like sets
+export const SS_CIPHERS = [
+  'aes-128-gcm',
+  'aes-192-gcm',
+  'aes-256-gcm',
+  'chacha20-ietf-poly1305',
+  '2022-blake3-aes-128-gcm',
+  '2022-blake3-aes-256-gcm',
+  '2022-blake3-chacha20-poly1305',
+] as const;
+
+export const TRANSPORTS = {
+  vmess: ['tcp', 'websocket', 'grpc'] as const,
+  vless: ['tcp', 'websocket', 'grpc', 'mkcp', 'httpupgrade', 'xhttp'] as const,
+  trojan: ['tcp', 'websocket', 'grpc'] as const,
+  mieru: ['tcp', 'udp'] as const,
+} as const;
+
+export const SECURITY = {
+  shadowsocks: ['none', 'http', 'tls'] as const,
+  vmess: ['none', 'tls'] as const,
+  vless: ['none', 'tls', 'reality'] as const,
+  trojan: ['tls'] as const,
+  hysteria: ['tls'] as const,
+  tuic: ['tls'] as const,
+  anytls: ['tls'] as const,
+  naive: ['none', 'tls'] as const,
+  http: ['none', 'tls'] as const,
+} as const;
+
+export const FLOWS = {
+  vless: ['none', 'xtls-rprx-direct', 'xtls-rprx-splice', 'xtls-rprx-vision'] as const,
+} as const;
+
+export const TUIC_UDP_RELAY_MODES = ['native', 'quic'] as const;
+export const TUIC_CONGESTION = ['bbr', 'cubic', 'new_reno'] as const;
+export const XHTTP_MODES = ['auto', 'packet-up', 'stream-up', 'stream-one'] as const;
+export const ENCRYPTION_TYPES = ['none', 'mlkem768x25519plus'] as const;
+export const ENCRYPTION_MODES = ['native', 'xorpub', 'random'] as const;
+export const ENCRYPTION_RTT = ['0rtt', '1rtt'] as const;
+export const FINGERPRINTS = [
+  'chrome',
+  'firefox',
+  'safari',
+  'ios',
+  'android',
+  'edge',
+  '360',
+  'qq',
+] as const;
+
+export const CERT_MODES = ['none', 'http', 'dns', 'self'] as const;
+
+export const multiplexLevels = ['none', 'low', 'middle', 'high'] as const;
+
+export function getLabel(value: string): string {
+  const label = (LABELS as Record<string, string>)[value];
+  return label ?? value.toUpperCase();
+}
--- a/apps/admin/app/dashboard/servers/form-schema/defaults.ts
+++ b/apps/admin/app/dashboard/servers/form-schema/defaults.ts
@ -0,0 +1,192 @@
+import { XHTTP_MODES } from './constants';
+import type { ProtocolType } from './types';
+
+export function getProtocolDefaultConfig(proto: ProtocolType) {
+  switch (proto) {
+    case 'shadowsocks':
+      return {
+        type: 'shadowsocks',
+        enable: false,
+        port: null,
+        cipher: 'chacha20-ietf-poly1305',
+        server_key: null,
+        obfs: 'none',
+        obfs_host: null,
+        obfs_path: null,
+        sni: null,
+        allow_insecure: null,
+        cert_mode: 'none',
+        cert_dns_provider: null,
+        cert_dns_env: null,
+        ratio: 1,
+      } as any;
+    case 'vmess':
+      return {
+        type: 'vmess',
+        enable: false,
+        host: null,
+        port: null,
+        transport: 'tcp',
+        security: 'none',
+        path: null,
+        service_name: null,
+        sni: null,
+        allow_insecure: null,
+        fingerprint: 'chrome',
+        cert_mode: 'none',
+        cert_dns_provider: null,
+        cert_dns_env: null,
+        ratio: 1,
+      } as any;
+    case 'vless':
+      return {
+        type: 'vless',
+        enable: false,
+        host: null,
+        port: null,
+        transport: 'tcp',
+        security: 'none',
+        flow: 'none',
+        path: null,
+        service_name: null,
+        sni: null,
+        allow_insecure: null,
+        fingerprint: 'chrome',
+        reality_server_addr: null,
+        reality_server_port: null,
+        reality_private_key: null,
+        reality_public_key: null,
+        reality_short_id: null,
+        xhttp_mode: XHTTP_MODES[0], // 'auto'
+        xhttp_extra: null,
+        encryption: 'none',
+        encryption_mode: null,
+        encryption_rtt: null,
+        encryption_ticket: null,
+        encryption_server_padding: null,
+        encryption_private_key: null,
+        encryption_client_padding: null,
+        encryption_password: null,
+        cert_mode: 'none',
+        cert_dns_provider: null,
+        cert_dns_env: null,
+        ratio: 1,
+      } as any;
+    case 'trojan':
+      return {
+        type: 'trojan',
+        enable: false,
+        host: null,
+        port: null,
+        transport: 'tcp',
+        security: 'tls',
+        path: null,
+        service_name: null,
+        sni: null,
+        allow_insecure: null,
+        fingerprint: 'chrome',
+        cert_mode: 'none',
+        cert_dns_provider: null,
+        cert_dns_env: null,
+        ratio: 1,
+      } as any;
+    case 'hysteria':
+      return {
+        type: 'hysteria',
+        enable: false,
+        port: null,
+        hop_ports: null,
+        hop_interval: null,
+        obfs: 'none',
+        obfs_password: null,
+        security: 'tls',
+        up_mbps: null,
+        down_mbps: null,
+        sni: null,
+        allow_insecure: null,
+        fingerprint: 'chrome',
+        cert_mode: 'none',
+        cert_dns_provider: null,
+        cert_dns_env: null,
+        ratio: 1,
+      } as any;
+    case 'tuic':
+      return {
+        type: 'tuic',
+        enable: false,
+        port: null,
+        disable_sni: false,
+        reduce_rtt: false,
+        udp_relay_mode: 'native',
+        congestion_controller: 'bbr',
+        security: 'tls',
+        sni: null,
+        allow_insecure: false,
+        fingerprint: 'chrome',
+        cert_mode: 'none',
+        cert_dns_provider: null,
+        cert_dns_env: null,
+        ratio: 1,
+      } as any;
+    case 'socks':
+      return {
+        type: 'socks',
+        enable: false,
+        port: null,
+        ratio: 1,
+      } as any;
+    case 'naive':
+      return {
+        type: 'naive',
+        enable: false,
+        port: null,
+        security: 'none',
+        sni: null,
+        allow_insecure: null,
+        fingerprint: 'chrome',
+        cert_mode: 'none',
+        cert_dns_provider: null,
+        cert_dns_env: null,
+        ratio: 1,
+      } as any;
+    case 'http':
+      return {
+        type: 'http',
+        enable: false,
+        port: null,
+        security: 'none',
+        sni: null,
+        allow_insecure: null,
+        fingerprint: 'chrome',
+        cert_mode: 'none',
+        cert_dns_provider: null,
+        cert_dns_env: null,
+        ratio: 1,
+      } as any;
+    case 'mieru':
+      return {
+        type: 'mieru',
+        enable: false,
+        port: null,
+        multiplex: 'none',
+        transport: 'tcp',
+      } as any;
+    case 'anytls':
+      return {
+        type: 'anytls',
+        enable: false,
+        port: null,
+        security: 'tls',
+        padding_scheme: null,
+        sni: null,
+        allow_insecure: false,
+        fingerprint: 'chrome',
+        cert_mode: 'none',
+        cert_dns_provider: null,
+        cert_dns_env: null,
+        ratio: 1,
+      } as any;
+    default:
+      return {} as any;
+  }
+}
--- a/apps/admin/app/dashboard/servers/form-schema/fields.ts
+++ b/apps/admin/app/dashboard/servers/form-schema/fields.ts
--- a/apps/admin/app/dashboard/servers/form-schema/index.ts
+++ b/apps/admin/app/dashboard/servers/form-schema/index.ts
@ -0,0 +1,30 @@
+// Re-export all constants
+export {
+  ENCRYPTION_MODES,
+  ENCRYPTION_RTT,
+  ENCRYPTION_TYPES,
+  FINGERPRINTS,
+  FLOWS,
+  LABELS,
+  SECURITY,
+  SS_CIPHERS,
+  TRANSPORTS,
+  TUIC_CONGESTION,
+  TUIC_UDP_RELAY_MODES,
+  XHTTP_MODES,
+  getLabel,
+  multiplexLevels,
+  protocols,
+} from './constants';
+
+// Re-export all types
+export type { FieldConfig, ProtocolType } from './types';
+
+// Re-export all schemas
+export { formSchema, protocolApiScheme } from './schemas';
+
+// Re-export defaults
+export { getProtocolDefaultConfig } from './defaults';
+
+// Re-export fields
+export { PROTOCOL_FIELDS } from './fields';
--- a/apps/admin/app/dashboard/servers/form-schema/schemas.ts
+++ b/apps/admin/app/dashboard/servers/form-schema/schemas.ts
@ -0,0 +1,225 @@
+import { z } from 'zod';
+import {
+  CERT_MODES,
+  ENCRYPTION_MODES,
+  ENCRYPTION_RTT,
+  ENCRYPTION_TYPES,
+  FLOWS,
+  multiplexLevels,
+  SECURITY,
+  SS_CIPHERS,
+  TRANSPORTS,
+  TUIC_CONGESTION,
+  TUIC_UDP_RELAY_MODES,
+  XHTTP_MODES,
+} from './constants';
+
+const nullableString = z.string().nullish();
+const nullableBool = z.boolean().nullish();
+const nullablePort = z.number().int().min(0).max(65535).nullish();
+const nullableRatio = z.number().min(0).nullish();
+
+const ss = z.object({
+  ratio: nullableRatio,
+  type: z.literal('shadowsocks'),
+  enable: nullableBool,
+  port: nullablePort,
+  cipher: z.enum(SS_CIPHERS).nullish(),
+  server_key: nullableString,
+  obfs: z.enum(['none', 'http', 'tls'] as const).nullish(),
+  obfs_host: nullableString,
+  obfs_path: nullableString,
+  cert_mode: z.enum(CERT_MODES).nullish(),
+  cert_dns_provider: nullableString,
+  cert_dns_env: nullableString,
+});
+
+const vmess = z.object({
+  ratio: nullableRatio,
+  type: z.literal('vmess'),
+  enable: nullableBool,
+  host: nullableString,
+  port: nullablePort,
+  transport: z.enum(TRANSPORTS.vmess).nullish(),
+  security: z.enum(SECURITY.vmess).nullish(),
+  path: nullableString,
+  service_name: nullableString,
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+  cert_mode: z.enum(CERT_MODES).nullish(),
+  cert_dns_provider: nullableString,
+  cert_dns_env: nullableString,
+});
+
+const vless = z.object({
+  ratio: nullableRatio,
+  type: z.literal('vless'),
+  enable: nullableBool,
+  host: nullableString,
+  port: nullablePort,
+  transport: z.enum(TRANSPORTS.vless).nullish(),
+  security: z.enum(SECURITY.vless).nullish(),
+  path: nullableString,
+  service_name: nullableString,
+  flow: z.enum(FLOWS.vless).nullish(),
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+  reality_server_addr: nullableString,
+  reality_server_port: nullablePort,
+  reality_private_key: nullableString,
+  reality_public_key: nullableString,
+  reality_short_id: nullableString,
+  xhttp_mode: z.enum(XHTTP_MODES).nullish(),
+  xhttp_extra: nullableString,
+  encryption: z.enum(ENCRYPTION_TYPES).nullish(),
+  encryption_mode: z.enum(ENCRYPTION_MODES).nullish(),
+  encryption_rtt: z.enum(ENCRYPTION_RTT).nullish(),
+  encryption_ticket: nullableString,
+  encryption_server_padding: nullableString,
+  encryption_private_key: nullableString,
+  encryption_client_padding: nullableString,
+  encryption_password: nullableString,
+  cert_mode: z.enum(CERT_MODES).nullish(),
+  cert_dns_provider: nullableString,
+  cert_dns_env: nullableString,
+});
+
+const trojan = z.object({
+  ratio: nullableRatio,
+  type: z.literal('trojan'),
+  enable: nullableBool,
+  host: nullableString,
+  port: nullablePort,
+  transport: z.enum(TRANSPORTS.trojan).nullish(),
+  security: z.enum(SECURITY.trojan).nullish(),
+  path: nullableString,
+  service_name: nullableString,
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+  cert_mode: z.enum(CERT_MODES).nullish(),
+  cert_dns_provider: nullableString,
+  cert_dns_env: nullableString,
+});
+
+const hysteria = z.object({
+  ratio: nullableRatio,
+  type: z.literal('hysteria'),
+  enable: nullableBool,
+  hop_ports: nullableString,
+  hop_interval: z.number().nullish(),
+  obfs_password: nullableString,
+  obfs: z.enum(['none', 'salamander'] as const).nullish(),
+  port: nullablePort,
+  security: z.enum(SECURITY.hysteria).nullish(),
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+  up_mbps: z.number().nullish(),
+  down_mbps: z.number().nullish(),
+  cert_mode: z.enum(CERT_MODES).nullish(),
+  cert_dns_provider: nullableString,
+  cert_dns_env: nullableString,
+});
+
+const tuic = z.object({
+  ratio: nullableRatio,
+  type: z.literal('tuic'),
+  enable: nullableBool,
+  host: nullableString,
+  port: nullablePort,
+  disable_sni: z.boolean().nullish(),
+  reduce_rtt: z.boolean().nullish(),
+  udp_relay_mode: z.enum(TUIC_UDP_RELAY_MODES).nullish(),
+  congestion_controller: z.enum(TUIC_CONGESTION).nullish(),
+  security: z.enum(SECURITY.tuic).nullish(),
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+  cert_mode: z.enum(CERT_MODES).nullish(),
+  cert_dns_provider: nullableString,
+  cert_dns_env: nullableString,
+});
+
+const anytls = z.object({
+  ratio: nullableRatio,
+  type: z.literal('anytls'),
+  enable: nullableBool,
+  port: nullablePort,
+  security: z.enum(SECURITY.anytls).nullish(),
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+  padding_scheme: nullableString,
+  cert_mode: z.enum(CERT_MODES).nullish(),
+  cert_dns_provider: nullableString,
+  cert_dns_env: nullableString,
+});
+
+const socks = z.object({
+  ratio: nullableRatio,
+  type: z.literal('socks'),
+  enable: nullableBool,
+  port: nullablePort,
+});
+
+const naive = z.object({
+  ratio: nullableRatio,
+  type: z.literal('naive'),
+  enable: nullableBool,
+  port: nullablePort,
+  security: z.enum(SECURITY.naive).nullish(),
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+  cert_mode: z.enum(CERT_MODES).nullish(),
+  cert_dns_provider: nullableString,
+  cert_dns_env: nullableString,
+});
+
+const http = z.object({
+  ratio: nullableRatio,
+  type: z.literal('http'),
+  enable: nullableBool,
+  port: nullablePort,
+  security: z.enum(SECURITY.http).nullish(),
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+  cert_mode: z.enum(CERT_MODES).nullish(),
+  cert_dns_provider: nullableString,
+  cert_dns_env: nullableString,
+});
+
+const mieru = z.object({
+  ratio: nullableRatio,
+  type: z.literal('mieru'),
+  enable: nullableBool,
+  port: nullablePort,
+  multiplex: z.enum(multiplexLevels).nullish(),
+  transport: z.enum(TRANSPORTS.mieru).nullish(),
+});
+
+export const protocolApiScheme = z.discriminatedUnion('type', [
+  ss,
+  vmess,
+  vless,
+  trojan,
+  hysteria,
+  tuic,
+  anytls,
+  socks,
+  naive,
+  http,
+  mieru,
+]);
+
+export const formSchema = z.object({
+  name: z.string().min(1),
+  address: z.string().min(1),
+  country: z.string().optional(),
+  city: z.string().optional(),
+  protocols: z.array(protocolApiScheme),
+});
--- a/apps/admin/app/dashboard/servers/form-schema/types.ts
+++ b/apps/admin/app/dashboard/servers/form-schema/types.ts
@ -0,0 +1,27 @@
+import { protocols } from './constants';
+
+export type FieldConfig = {
+  name: string;
+  type: 'input' | 'select' | 'switch' | 'number' | 'textarea';
+  label: string;
+  placeholder?: string | ((t: (key: string) => string, protocol: any) => string);
+  options?: readonly string[];
+  defaultValue?: any;
+  min?: number;
+  max?: number;
+  step?: number;
+  suffix?: string;
+  generate?: {
+    function?: () => Promise<string | Record<string, string>> | string | Record<string, string>;
+    functions?: {
+      label: string | ((t: (key: string) => string, protocol: any) => string);
+      function: () => Promise<string | Record<string, string>> | string | Record<string, string>;
+    }[];
+    updateFields?: Record<string, string>;
+  };
+  condition?: (protocol: any, values: any) => boolean;
+  group?: 'basic' | 'transport' | 'security' | 'reality' | 'obfs' | 'encryption';
+  gridSpan?: 1 | 2;
+};
+
+export type ProtocolType = (typeof protocols)[number];
--- a/apps/admin/app/dashboard/servers/generate/index.ts
+++ b/apps/admin/app/dashboard/servers/generate/index.ts
@ -0,0 +1,4 @@
+export { generateMLKEM768KeyPair } from './mlkem768';
+export { generateRealityShortId } from './short-id';
+export { generatePassword } from './uid';
+export { generateRealityKeyPair } from './x25519';
--- a/apps/admin/app/dashboard/servers/generate/mlkem768.ts
+++ b/apps/admin/app/dashboard/servers/generate/mlkem768.ts
@ -0,0 +1,16 @@
+import mlkem from 'mlkem-wasm';
+import { toB64Url } from './util';
+
+export async function generateMLKEM768KeyPair() {
+  const mlkemKeyPair = await mlkem.generateKey({ name: 'ML-KEM-768' }, true, [
+    'encapsulateBits',
+    'decapsulateBits',
+  ]);
+  const mlkemPublicKeyRaw = await mlkem.exportKey('raw-public', mlkemKeyPair.publicKey);
+  const mlkemPrivateKeyRaw = await mlkem.exportKey('raw-seed', mlkemKeyPair.privateKey);
+
+  return {
+    publicKey: toB64Url(new Uint8Array(mlkemPublicKeyRaw)),
+    privateKey: toB64Url(new Uint8Array(mlkemPrivateKeyRaw)),
+  };
+}
--- a/apps/admin/app/dashboard/servers/generate/short-id.ts
+++ b/apps/admin/app/dashboard/servers/generate/short-id.ts
@ -0,0 +1,15 @@
+/**
+ * Generate a short ID for Reality
+ * @returns A random hexadecimal string of length 2, 4, 6, 8, 10, 12, 14, or 16
+ */
+export function generateRealityShortId() {
+  const hex = '0123456789abcdef';
+  const lengths = [2, 4, 6, 8, 10, 12, 14, 16];
+  const idx = Math.floor(Math.random() * lengths.length);
+  const len = lengths[idx] ?? 16;
+  let out = '';
+  for (let i = 0; i < len; i++) {
+    out += hex.charAt(Math.floor(Math.random() * hex.length));
+  }
+  return out;
+}
--- a/apps/admin/app/dashboard/servers/generate/uid.ts
+++ b/apps/admin/app/dashboard/servers/generate/uid.ts
@ -0,0 +1,11 @@
+import { uid } from 'radash';
+
+/**
+ * Generate a random password
+ * @param length Length of the password
+ * @param charset Character set to use (defaults to alphanumeric)
+ * @returns Randomly generated password
+ */
+export function generatePassword(length = 16, charset?: string) {
+  return uid(length, charset).toLowerCase();
+}
--- a/apps/admin/app/dashboard/servers/generate/util.ts
+++ b/apps/admin/app/dashboard/servers/generate/util.ts
@ -0,0 +1,6 @@
+export function toB64Url(bytes: Uint8Array) {
+  return btoa(String.fromCharCode(...bytes))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/g, '');
+}
--- a/apps/admin/app/dashboard/servers/generate/x25519.ts
+++ b/apps/admin/app/dashboard/servers/generate/x25519.ts
@ -0,0 +1,11 @@
+import { x25519 } from '@noble/curves/ed25519.js';
+import { toB64Url } from './util';
+
+/**
+ * Generate a Reality key pair
+ * @returns An object containing the private and public keys in base64url format
+ */
+export function generateRealityKeyPair() {
+  const { secretKey, publicKey } = x25519.keygen();
+  return { privateKey: toB64Url(secretKey), publicKey: toB64Url(publicKey) };
+}
--- a/apps/admin/app/dashboard/servers/online-users-cell.tsx
+++ b/apps/admin/app/dashboard/servers/online-users-cell.tsx
@ -0,0 +1,189 @@
+'use client';
+
+import { UserDetail } from '@/app/dashboard/user/user-detail';
+import { IpLink } from '@/components/ip-link';
+import { ProTable } from '@/components/pro-table';
+import { getUserSubscribeById } from '@/services/admin/user';
+import { formatDate } from '@/utils/common';
+import { useQuery } from '@tanstack/react-query';
+import { Badge } from '@workspace/ui/components/badge';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { formatBytes } from '@workspace/ui/utils';
+import { Users } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+function UserSubscribeInfo({
+  subscribeId,
+  open,
+  type,
+}: {
+  subscribeId: number;
+  open: boolean;
+  type: 'account' | 'subscribeName' | 'subscribeId' | 'trafficUsage' | 'expireTime';
+}) {
+  const t = useTranslations('servers');
+  const { data } = useQuery({
+    enabled: subscribeId !== 0 && open,
+    queryKey: ['getUserSubscribeById', subscribeId],
+    queryFn: async () => {
+      const { data } = await getUserSubscribeById({ id: subscribeId });
+      return data.data;
+    },
+  });
+
+  if (!data) return <span className='text-muted-foreground'>--</span>;
+
+  switch (type) {
+    case 'account':
+      if (!data.user_id) return <span className='text-muted-foreground'>--</span>;
+      return <UserDetail id={data.user_id} />;
+
+    case 'subscribeName':
+      if (!data.subscribe?.name) return <span className='text-muted-foreground'>--</span>;
+      return <span className='text-sm'>{data.subscribe.name}</span>;
+
+    case 'subscribeId':
+      if (!data.id) return <span className='text-muted-foreground'>--</span>;
+      return <span className='font-mono text-sm'>{data.id}</span>;
+
+    case 'trafficUsage': {
+      const usedTraffic = data.upload + data.download;
+      const totalTraffic = data.traffic || 0;
+      return (
+        <div className='min-w-0 text-sm'>
+          <div className='break-words'>
+            {formatBytes(usedTraffic)} / {totalTraffic > 0 ? formatBytes(totalTraffic) : '无限制'}
+          </div>
+        </div>
+      );
+    }
+
+    case 'expireTime': {
+      if (!data.expire_time) return <span className='text-muted-foreground'>--</span>;
+      const isExpired = data.expire_time < Date.now() / 1000;
+      return (
+        <div className='flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2'>
+          <span className='text-sm'>{formatDate(data.expire_time)}</span>
+          {isExpired && (
+            <Badge variant='destructive' className='w-fit px-1 py-0 text-xs'>
+              {t('expired')}
+            </Badge>
+          )}
+        </div>
+      );
+    }
+
+    default:
+      return <span className='text-muted-foreground'>--</span>;
+  }
+}
+
+export default function OnlineUsersCell({ status }: { status?: API.ServerStatus }) {
+  const t = useTranslations('servers');
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <button className='hover:text-foreground text-muted-foreground flex items-center gap-2 bg-transparent p-0 text-sm'>
+          <Users className='h-4 w-4' /> {status?.online.length}
+        </button>
+      </SheetTrigger>
+      <SheetContent className='h-screen w-screen max-w-none sm:h-auto sm:w-[900px] sm:max-w-[90vw]'>
+        <SheetHeader>
+          <SheetTitle>{t('onlineUsers')}</SheetTitle>
+        </SheetHeader>
+        <div className='-mx-6 h-[calc(100vh-48px-16px)] overflow-y-auto px-6 py-4 sm:h-[calc(100dvh-48px-16px-env(safe-area-inset-top))]'>
+          <ProTable<API.ServerOnlineUser, Record<string, unknown>>
+            header={{ hidden: true }}
+            columns={[
+              {
+                accessorKey: 'ip',
+                header: t('ipAddresses'),
+                cell: ({ row }) => {
+                  const ips = row.original.ip;
+                  return (
+                    <div className='flex min-w-0 flex-col gap-1'>
+                      {ips.map((item, i) => (
+                        <div className='whitespace-nowrap text-sm' key={i}>
+                          <Badge>{item.protocol}</Badge>
+                          <IpLink ip={item.ip} className='ml-1 font-medium' />
+                        </div>
+                      ))}
+                    </div>
+                  );
+                },
+              },
+              {
+                accessorKey: 'user',
+                header: t('user'),
+                cell: ({ row }) => (
+                  <UserSubscribeInfo
+                    subscribeId={Number(row.original.subscribe_id)}
+                    open={open}
+                    type='account'
+                  />
+                ),
+              },
+              {
+                accessorKey: 'subscription',
+                header: t('subscription'),
+                cell: ({ row }) => (
+                  <UserSubscribeInfo
+                    subscribeId={Number(row.original.subscribe_id)}
+                    open={open}
+                    type='subscribeName'
+                  />
+                ),
+              },
+              {
+                accessorKey: 'subscribeId',
+                header: t('subscribeId'),
+                cell: ({ row }) => (
+                  <UserSubscribeInfo
+                    subscribeId={Number(row.original.subscribe_id)}
+                    open={open}
+                    type='subscribeId'
+                  />
+                ),
+              },
+              {
+                accessorKey: 'traffic',
+                header: t('traffic'),
+                cell: ({ row }) => (
+                  <UserSubscribeInfo
+                    subscribeId={Number(row.original.subscribe_id)}
+                    open={open}
+                    type='trafficUsage'
+                  />
+                ),
+              },
+              {
+                accessorKey: 'expireTime',
+                header: t('expireTime'),
+                cell: ({ row }) => (
+                  <UserSubscribeInfo
+                    subscribeId={Number(row.original.subscribe_id)}
+                    open={open}
+                    type='expireTime'
+                  />
+                ),
+              },
+            ]}
+            request={async () => ({
+              list: status?.online || [],
+              total: status?.online?.length || 0,
+            })}
+          />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/servers/page.tsx
+++ b/apps/admin/app/dashboard/servers/page.tsx
@ -0,0 +1,327 @@
+'use client';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  createServer,
+  deleteServer,
+  filterServerList,
+  resetSortWithServer,
+  updateServer,
+} from '@/services/admin/server';
+import { useNode } from '@/store/node';
+import { useServer } from '@/store/server';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
+import { cn } from '@workspace/ui/lib/utils';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import DynamicMultiplier from './dynamic-multiplier';
+import OnlineUsersCell from './online-users-cell';
+import ServerConfig from './server-config';
+import ServerForm from './server-form';
+import ServerInstall from './server-install';
+
+function PctBar({ value }: { value: number }) {
+  const v = value.toFixed(2);
+  return (
+    <div className='min-w-24'>
+      <div className='text-xs leading-none'>{v}%</div>
+      <div className='bg-muted h-1.5 w-full rounded'>
+        <div className='bg-primary h-1.5 rounded' style={{ width: `${v}%` }} />
+      </div>
+    </div>
+  );
+}
+
+function RegionIpCell({
+  country,
+  city,
+  ip,
+  t,
+}: {
+  country?: string;
+  city?: string;
+  ip?: string;
+  t: (key: string) => string;
+}) {
+  const region = [country, city].filter(Boolean).join(' / ') || t('notAvailable');
+  return (
+    <div className='flex items-center gap-1'>
+      <Badge variant='outline'>{region}</Badge>
+      <Badge variant='secondary'>{ip || t('notAvailable')}</Badge>
+    </div>
+  );
+}
+
+export default function ServersPage() {
+  const t = useTranslations('servers');
+  const { isServerReferencedByNodes } = useNode();
+  const { fetchServers } = useServer();
+
+  const [loading, setLoading] = useState(false);
+  const ref = useRef<ProTableActions>(null);
+
+  return (
+    <div className='space-y-4'>
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <DynamicMultiplier />
+        <ServerConfig />
+      </div>
+      <ProTable<API.Server, { search: string }>
+        action={ref}
+        header={{
+          title: t('pageTitle'),
+          toolbar: (
+            <div className='flex gap-2'>
+              <ServerForm
+                trigger={t('create')}
+                title={t('drawerCreateTitle')}
+                loading={loading}
+                onSubmit={async (values) => {
+                  setLoading(true);
+                  try {
+                    await createServer(values as unknown as API.CreateServerRequest);
+                    toast.success(t('created'));
+                    ref.current?.refresh();
+                    fetchServers();
+                    setLoading(false);
+                    return true;
+                  } catch (e) {
+                    setLoading(false);
+                    return false;
+                  }
+                }}
+              />
+            </div>
+          ),
+        }}
+        columns={[
+          {
+            accessorKey: 'id',
+            header: t('id'),
+            cell: ({ row }) => <Badge>{row.getValue('id')}</Badge>,
+          },
+          { accessorKey: 'name', header: t('name') },
+          {
+            id: 'region_ip',
+            header: t('address'),
+            cell: ({ row }) => (
+              <RegionIpCell
+                country={row.original.country as unknown as string}
+                city={row.original.city as unknown as string}
+                ip={row.original.address as unknown as string}
+                t={t}
+              />
+            ),
+          },
+          {
+            accessorKey: 'protocols',
+            header: t('protocols'),
+            cell: ({ row }) => {
+              const list = row.original.protocols.filter((p) => p.enable) as API.Protocol[];
+              if (!list.length) return '—';
+              return (
+                <div className='flex flex-col gap-1'>
+                  {list.map((p, idx) => {
+                    const ratio = Number(p.ratio ?? 1) || 1;
+                    return (
+                      <div key={idx} className='flex items-center gap-2'>
+                        <Badge variant='outline'>{ratio.toFixed(2)}x</Badge>
+                        <Badge variant='secondary'>{p.type}</Badge>
+                        <Badge variant='secondary'>{p.port}</Badge>
+                      </div>
+                    );
+                  })}
+                </div>
+              );
+            },
+          },
+
+          {
+            id: 'status',
+            header: t('status'),
+            cell: ({ row }) => {
+              const offline = row.original.status.status === 'offline';
+              return (
+                <div className='flex items-center gap-2'>
+                  <span
+                    className={cn(
+                      'inline-block h-2.5 w-2.5 rounded-full',
+                      offline ? 'bg-zinc-400' : 'bg-emerald-500',
+                    )}
+                  />
+                  <span className='text-sm'>{offline ? t('offline') : t('online')}</span>
+                </div>
+              );
+            },
+          },
+          {
+            id: 'cpu',
+            header: t('cpu'),
+            cell: ({ row }) => (
+              <PctBar value={(row.original.status?.cpu as unknown as number) ?? 0} />
+            ),
+          },
+          {
+            id: 'mem',
+            header: t('memory'),
+            cell: ({ row }) => (
+              <PctBar value={(row.original.status?.mem as unknown as number) ?? 0} />
+            ),
+          },
+          {
+            id: 'disk',
+            header: t('disk'),
+            cell: ({ row }) => (
+              <PctBar value={(row.original.status?.disk as unknown as number) ?? 0} />
+            ),
+          },
+
+          {
+            id: 'online_users',
+            header: t('onlineUsers'),
+            cell: ({ row }) => <OnlineUsersCell status={row.original.status as API.ServerStatus} />,
+          },
+          // traffic ratio moved to per-protocol configs; column removed
+        ]}
+        params={[{ key: 'search' }]}
+        request={async (pagination, filter) => {
+          const { data } = await filterServerList({
+            page: pagination.page,
+            size: pagination.size,
+            search: filter?.search || undefined,
+          });
+          const list = (data?.data?.list || []) as API.Server[];
+          const total = (data?.data?.total ?? list.length) as number;
+          return { list, total };
+        }}
+        actions={{
+          render: (row) => [
+            <ServerForm
+              key='edit'
+              trigger={t('edit')}
+              title={t('drawerEditTitle')}
+              initialValues={row}
+              loading={loading}
+              onSubmit={async (values) => {
+                setLoading(true);
+                try {
+                  // ServerForm already returns API-shaped body; add id for update
+                  await updateServer({
+                    id: row.id,
+                    ...(values as unknown as Omit<API.UpdateServerRequest, 'id'>),
+                  });
+                  toast.success(t('updated'));
+                  ref.current?.refresh();
+                  fetchServers();
+                  setLoading(false);
+                  return true;
+                } catch (e) {
+                  setLoading(false);
+                  return false;
+                }
+              }}
+            />,
+            <ServerInstall key='install' server={row} />,
+            <ConfirmButton
+              key='delete'
+              trigger={
+                <Button variant='destructive' disabled={isServerReferencedByNodes(row.id)}>
+                  {t('delete')}
+                </Button>
+              }
+              title={t('confirmDeleteTitle')}
+              description={t('confirmDeleteDesc')}
+              onConfirm={async () => {
+                await deleteServer({ id: row.id } as any);
+                toast.success(t('deleted'));
+                ref.current?.refresh();
+                fetchServers();
+              }}
+              cancelText={t('cancel')}
+              confirmText={t('confirm')}
+            />,
+            <Button
+              key='copy'
+              variant='outline'
+              onClick={async () => {
+                setLoading(true);
+                const { id, created_at, updated_at, last_reported_at, status, ...others } =
+                  row as any;
+                const body: API.CreateServerRequest = {
+                  name: others.name,
+                  country: others.country,
+                  city: others.city,
+                  address: others.address,
+                  protocols: others.protocols || [],
+                };
+                await createServer(body);
+                toast.success(t('copied'));
+                ref.current?.refresh();
+                fetchServers();
+                setLoading(false);
+              }}
+            >
+              {t('copy')}
+            </Button>,
+          ],
+          batchRender(rows) {
+            const hasReferencedServers = rows.some((row) => isServerReferencedByNodes(row.id));
+            return [
+              <ConfirmButton
+                key='delete'
+                trigger={
+                  <Button variant='destructive' disabled={hasReferencedServers}>
+                    {t('delete')}
+                  </Button>
+                }
+                title={t('confirmDeleteTitle')}
+                description={t('confirmDeleteDesc')}
+                onConfirm={async () => {
+                  await Promise.all(rows.map((r) => deleteServer({ id: r.id })));
+                  toast.success(t('deleted'));
+                  ref.current?.refresh();
+                  fetchServers();
+                }}
+                cancelText={t('cancel')}
+                confirmText={t('confirm')}
+              />,
+            ];
+          },
+        }}
+        onSort={async (source, target, items) => {
+          const sourceIndex = items.findIndex((item) => String(item.id) === source);
+          const targetIndex = items.findIndex((item) => String(item.id) === target);
+
+          const originalSorts = items.map((item) => item.sort);
+
+          const [movedItem] = items.splice(sourceIndex, 1);
+          items.splice(targetIndex, 0, movedItem!);
+
+          const updatedItems = items.map((item, index) => {
+            const originalSort = originalSorts[index];
+            const newSort = originalSort !== undefined ? originalSort : item.sort;
+            return { ...item, sort: newSort };
+          });
+
+          const changedItems = updatedItems.filter((item, index) => {
+            return item.sort !== items[index]?.sort;
+          });
+
+          if (changedItems.length > 0) {
+            resetSortWithServer({
+              sort: changedItems.map((item) => ({
+                id: item.id,
+                sort: item.sort,
+              })) as API.SortItem[],
+            });
+            toast.success(t('sorted_success'));
+          }
+          return updatedItems;
+        }}
+      />
+    </div>
+  );
+}
--- a/apps/admin/app/dashboard/servers/server-config.tsx
+++ b/apps/admin/app/dashboard/servers/server-config.tsx
@ -0,0 +1,510 @@
+'use client';
+
+import { getNodeConfig, updateNodeConfig } from '@/services/admin/system';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import { Card, CardContent } from '@workspace/ui/components/card';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@workspace/ui/components/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { Textarea } from '@workspace/ui/components/textarea';
+import { ArrayInput } from '@workspace/ui/custom-components/dynamic-Inputs';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { unitConversion } from '@workspace/ui/utils';
+import { DicesIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { uid } from 'radash';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import { SS_CIPHERS } from './form-schema';
+
+const dnsConfigSchema = z.object({
+  proto: z.string(), // z.enum(['tcp', 'udp', 'tls', 'https', 'quic']),
+  address: z.string(),
+  domains: z.array(z.string()),
+});
+
+const outboundConfigSchema = z.object({
+  name: z.string(),
+  protocol: z.string(),
+  address: z.string(),
+  port: z.number(),
+  cipher: z.string().optional(),
+  password: z.string().optional(),
+  rules: z.array(z.string()).optional(),
+});
+
+const nodeConfigSchema = z.object({
+  node_secret: z.string().optional(),
+  node_pull_interval: z.number().optional(),
+  node_push_interval: z.number().optional(),
+  traffic_report_threshold: z.number().optional(),
+  ip_strategy: z.enum(['prefer_ipv4', 'prefer_ipv6']).optional(),
+  dns: z.array(dnsConfigSchema).optional(),
+  block: z.array(z.string()).optional(),
+  outbound: z.array(outboundConfigSchema).optional(),
+});
+type NodeConfigFormData = z.infer<typeof nodeConfigSchema>;
+
+export default function ServerConfig() {
+  const t = useTranslations('servers');
+  const [open, setOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const { data: cfgResp, refetch: refetchCfg } = useQuery({
+    queryKey: ['getNodeConfig'],
+    queryFn: async () => {
+      const { data } = await getNodeConfig();
+      return data.data as API.NodeConfig | undefined;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<NodeConfigFormData>({
+    resolver: zodResolver(nodeConfigSchema),
+    defaultValues: {
+      node_secret: '',
+      node_pull_interval: undefined,
+      node_push_interval: undefined,
+      traffic_report_threshold: undefined,
+      ip_strategy: 'prefer_ipv4',
+      dns: [],
+      block: [],
+      outbound: [],
+    },
+  });
+
+  useEffect(() => {
+    if (cfgResp) {
+      form.reset({
+        node_secret: cfgResp.node_secret ?? '',
+        node_pull_interval: cfgResp.node_pull_interval as number | undefined,
+        node_push_interval: cfgResp.node_push_interval as number | undefined,
+        traffic_report_threshold: cfgResp.traffic_report_threshold as number | undefined,
+        ip_strategy:
+          (cfgResp.ip_strategy as 'prefer_ipv4' | 'prefer_ipv6' | undefined) || 'prefer_ipv4',
+        dns: cfgResp.dns || [],
+        block: cfgResp.block || [],
+        outbound: cfgResp.outbound || [],
+      });
+    }
+  }, [cfgResp, form]);
+
+  async function onSubmit(values: NodeConfigFormData) {
+    setSaving(true);
+    try {
+      await updateNodeConfig(values as API.NodeConfig);
+      toast.success(t('server_config.saveSuccess'));
+      await refetchCfg();
+      setOpen(false);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Card>
+          <CardContent className='p-4'>
+            <div className='flex cursor-pointer items-center justify-between'>
+              <div className='flex items-center gap-3'>
+                <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+                  <Icon icon='mdi:resistor-nodes' className='text-primary h-5 w-5' />
+                </div>
+                <div className='flex-1'>
+                  <p className='font-medium'>{t('server_config.title')}</p>
+                  <p className='text-muted-foreground truncate text-sm'>
+                    {t('server_config.description')}
+                  </p>
+                </div>
+              </div>
+              <Icon icon='mdi:chevron-right' className='size-6' />
+            </div>
+          </CardContent>
+        </Card>
+      </SheetTrigger>
+
+      <SheetContent className='w-[720px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('server_config.title')}</SheetTitle>
+        </SheetHeader>
+
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Tabs defaultValue='basic' className='pt-4'>
+            <TabsList className='grid w-full grid-cols-4'>
+              <TabsTrigger value='basic'>{t('server_config.tabs.basic')}</TabsTrigger>
+              <TabsTrigger value='dns'>{t('server_config.tabs.dns')}</TabsTrigger>
+              <TabsTrigger value='outbound'>{t('server_config.tabs.outbound')}</TabsTrigger>
+              <TabsTrigger value='block'>{t('server_config.tabs.block')}</TabsTrigger>
+            </TabsList>
+
+            <Form {...form}>
+              <form id='server-config-form' onSubmit={form.handleSubmit(onSubmit)} className='mt-4'>
+                <TabsContent value='basic' className='space-y-4'>
+                  <FormField
+                    control={form.control}
+                    name='node_secret'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('server_config.fields.communication_key')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('server_config.fields.communication_key_placeholder')}
+                            value={field.value || ''}
+                            onValueChange={field.onChange}
+                            suffix={
+                              <div className='bg-muted flex h-9 items-center px-3'>
+                                <DicesIcon
+                                  onClick={() => {
+                                    const id = uid(32).toLowerCase();
+                                    const formatted = `${id.slice(0, 8)}-${id.slice(8, 12)}-${id.slice(12, 16)}-${id.slice(16, 20)}-${id.slice(20)}`;
+                                    form.setValue('node_secret', formatted);
+                                  }}
+                                  className='cursor-pointer'
+                                />
+                              </div>
+                            }
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          {t('server_config.fields.communication_key_desc')}
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='node_pull_interval'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('server_config.fields.node_pull_interval')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            type='number'
+                            min={0}
+                            suffix='S'
+                            value={field.value as any}
+                            onValueChange={field.onChange}
+                            placeholder={t('server_config.fields.communication_key_placeholder')}
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          {t('server_config.fields.node_pull_interval_desc')}
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='node_push_interval'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('server_config.fields.node_push_interval')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            type='number'
+                            min={0}
+                            suffix='S'
+                            step={0.1}
+                            value={field.value as any}
+                            onValueChange={field.onChange}
+                            placeholder={t('server_config.fields.communication_key_placeholder')}
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          {t('server_config.fields.node_push_interval_desc')}
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='traffic_report_threshold'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('server_config.fields.traffic_report_threshold')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            type='number'
+                            min={0}
+                            suffix='MB'
+                            value={unitConversion('bitsToMb', field.value as number | undefined)}
+                            onValueChange={(value) => {
+                              field.onChange(unitConversion('mbToBits', value));
+                            }}
+                            placeholder='1'
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          {t('server_config.fields.traffic_report_threshold_desc')}
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+
+                <TabsContent value='dns' className='space-y-4'>
+                  <FormField
+                    control={form.control}
+                    name='ip_strategy'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('server_config.fields.ip_strategy')}</FormLabel>
+                        <Select onValueChange={field.onChange} value={field.value}>
+                          <FormControl>
+                            <SelectTrigger>
+                              <SelectValue
+                                placeholder={t('server_config.fields.ip_strategy_placeholder')}
+                              />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            <SelectItem value='prefer_ipv4'>
+                              {t('server_config.fields.ip_strategy_ipv4')}
+                            </SelectItem>
+                            <SelectItem value='prefer_ipv6'>
+                              {t('server_config.fields.ip_strategy_ipv6')}
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                        <FormDescription>
+                          {t('server_config.fields.ip_strategy_desc')}
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='dns'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('server_config.fields.dns_config')}</FormLabel>
+                        <FormControl>
+                          <ArrayInput
+                            className='grid grid-cols-2 gap-2'
+                            fields={[
+                              {
+                                name: 'proto',
+                                type: 'select',
+                                placeholder: t('server_config.fields.dns_proto_placeholder'),
+                                options: [
+                                  { label: 'TCP', value: 'tcp' },
+                                  { label: 'UDP', value: 'udp' },
+                                  { label: 'TLS', value: 'tls' },
+                                  { label: 'HTTPS', value: 'https' },
+                                  { label: 'QUIC', value: 'quic' },
+                                ],
+                              },
+                              { name: 'address', type: 'text', placeholder: '8.8.8.8:53' },
+                              {
+                                name: 'domains',
+                                type: 'textarea',
+                                className: 'col-span-2',
+                                placeholder: t('server_config.fields.dns_domains_placeholder'),
+                              },
+                            ]}
+                            value={(field.value || []).map((item) => ({
+                              ...item,
+                              domains: Array.isArray(item.domains) ? item.domains.join('\n') : '',
+                            }))}
+                            onChange={(values) => {
+                              const converted = values.map((item: any) => ({
+                                proto: item.proto,
+                                address: item.address,
+                                domains:
+                                  typeof item.domains === 'string'
+                                    ? item.domains.split('\n').map((d: string) => d.trim())
+                                    : item.domains || [],
+                              }));
+                              field.onChange(converted);
+                            }}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+
+                <TabsContent value='outbound' className='space-y-4'>
+                  <FormField
+                    control={form.control}
+                    name='outbound'
+                    render={({ field }) => {
+                      return (
+                        <FormItem>
+                          <FormControl>
+                            <ArrayInput
+                              className='grid grid-cols-2 gap-2'
+                              fields={[
+                                {
+                                  name: 'name',
+                                  type: 'text',
+                                  className: 'col-span-2',
+                                  placeholder: t('server_config.fields.outbound_name_placeholder'),
+                                },
+                                {
+                                  name: 'protocol',
+                                  type: 'select',
+                                  placeholder: t(
+                                    'server_config.fields.outbound_protocol_placeholder',
+                                  ),
+                                  options: [
+                                    { label: 'HTTP', value: 'http' },
+                                    { label: 'SOCKS', value: 'socks' },
+                                    { label: 'Shadowsocks', value: 'shadowsocks' },
+                                    { label: 'Brook', value: 'brook' },
+                                    { label: 'Snell', value: 'snell' },
+                                    { label: 'VMess', value: 'vmess' },
+                                    { label: 'VLESS', value: 'vless' },
+                                    { label: 'Trojan', value: 'trojan' },
+                                    { label: 'WireGuard', value: 'wireguard' },
+                                    { label: 'Hysteria', value: 'hysteria' },
+                                    { label: 'TUIC', value: 'tuic' },
+                                    { label: 'AnyTLS', value: 'anytls' },
+                                    { label: 'Naive', value: 'naive' },
+                                    { label: 'Direct', value: 'direct' },
+                                    { label: 'Reject', value: 'reject' },
+                                  ],
+                                },
+                                {
+                                  name: 'cipher',
+                                  type: 'select',
+                                  options: SS_CIPHERS.map((cipher) => ({
+                                    label: cipher,
+                                    value: cipher,
+                                  })),
+                                  visible: (item: Record<string, any>) =>
+                                    item.protocol === 'shadowsocks',
+                                },
+                                {
+                                  name: 'address',
+                                  type: 'text',
+                                  placeholder: t(
+                                    'server_config.fields.outbound_address_placeholder',
+                                  ),
+                                },
+                                {
+                                  name: 'port',
+                                  type: 'number',
+                                  placeholder: t('server_config.fields.outbound_port_placeholder'),
+                                },
+                                {
+                                  name: 'password',
+                                  type: 'text',
+                                  placeholder: t(
+                                    'server_config.fields.outbound_password_placeholder',
+                                  ),
+                                },
+                                {
+                                  name: 'rules',
+                                  type: 'textarea',
+                                  className: 'col-span-2',
+                                  placeholder: t('server_config.fields.outbound_rules_placeholder'),
+                                },
+                              ]}
+                              value={(field.value || []).map((item) => ({
+                                ...item,
+                                rules: Array.isArray(item.rules) ? item.rules.join('\n') : '',
+                              }))}
+                              onChange={(values) => {
+                                const converted = values.map((item: any) => ({
+                                  name: item.name,
+                                  protocol: item.protocol,
+                                  address: item.address,
+                                  port: item.port,
+                                  cipher: item.cipher,
+                                  password: item.password,
+                                  rules:
+                                    typeof item.rules === 'string'
+                                      ? item.rules.split('\n').map((r: string) => r.trim())
+                                      : item.rules || [],
+                                }));
+                                field.onChange(converted);
+                              }}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      );
+                    }}
+                  />
+                </TabsContent>
+
+                <TabsContent value='block' className='space-y-4'>
+                  <FormField
+                    control={form.control}
+                    name='block'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <Textarea
+                            placeholder={t('server_config.fields.block_rules_placeholder')}
+                            value={(field.value || []).join('\n')}
+                            onChange={(e) => {
+                              const lines = e.target.value.split('\n').map((line) => line.trim());
+                              field.onChange(lines);
+                            }}
+                            rows={10}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TabsContent>
+              </form>
+            </Form>
+          </Tabs>
+        </ScrollArea>
+
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={saving} onClick={() => setOpen(false)}>
+            {t('actions.cancel')}
+          </Button>
+          <Button disabled={saving} type='submit' form='server-config-form'>
+            <Icon icon='mdi:loading' className={saving ? 'mr-2 animate-spin' : 'hidden'} />
+            {t('actions.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/servers/server-form.tsx
+++ b/apps/admin/app/dashboard/servers/server-form.tsx
@ -0,0 +1,661 @@
+'use client';
+
+import { useNode } from '@/store/node';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@workspace/ui/components/accordion';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@workspace/ui/components/dropdown-menu';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@workspace/ui/components/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Switch } from '@workspace/ui/components/switch';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { cn } from '@workspace/ui/lib/utils';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { toast } from 'sonner';
+import {
+  FieldConfig,
+  formSchema,
+  getLabel,
+  getProtocolDefaultConfig,
+  PROTOCOL_FIELDS,
+  protocols as PROTOCOLS,
+} from './form-schema';
+
+function DynamicField({
+  field,
+  control,
+  form,
+  protocolIndex,
+  protocolData,
+  t,
+}: {
+  field: FieldConfig;
+  control: any;
+  form: any;
+  protocolIndex: number;
+  protocolData: any;
+  t: (key: string) => string;
+}) {
+  const fieldName = `protocols.${protocolIndex}.${field.name}` as const;
+
+  if (field.condition && !field.condition(protocolData, {})) {
+    return null;
+  }
+
+  const commonProps = {
+    control,
+    name: fieldName,
+  };
+
+  switch (field.type) {
+    case 'input':
+      return (
+        <FormField
+          {...commonProps}
+          render={({ field: fieldProps }) => (
+            <FormItem>
+              <FormLabel>{t(field.label)}</FormLabel>
+              <FormControl>
+                <EnhancedInput
+                  {...fieldProps}
+                  type='text'
+                  placeholder={
+                    field.placeholder
+                      ? typeof field.placeholder === 'function'
+                        ? field.placeholder(t, protocolData)
+                        : field.placeholder
+                      : undefined
+                  }
+                  onValueChange={(v) => fieldProps.onChange(v)}
+                  suffix={
+                    field.generate ? (
+                      field.generate.functions && field.generate.functions.length > 0 ? (
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button type='button' variant='ghost' size='sm'>
+                              <Icon icon='mdi:key' className='h-4 w-4' />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align='end'>
+                            {field.generate.functions.map((genFunc, idx) => (
+                              <DropdownMenuItem
+                                key={idx}
+                                onClick={async () => {
+                                  const result = await genFunc.function();
+                                  if (typeof result === 'string') {
+                                    fieldProps.onChange(result);
+                                  } else if (field.generate!.updateFields) {
+                                    Object.entries(field.generate!.updateFields).forEach(
+                                      ([fieldName, resultKey]) => {
+                                        const fullFieldName = `protocols.${protocolIndex}.${fieldName}`;
+                                        form.setValue(fullFieldName, (result as any)[resultKey]);
+                                      },
+                                    );
+                                  } else {
+                                    if (result.privateKey) {
+                                      fieldProps.onChange(result.privateKey);
+                                    }
+                                  }
+                                }}
+                              >
+                                {typeof genFunc.label === 'function'
+                                  ? genFunc.label(t, protocolData)
+                                  : genFunc.label}
+                              </DropdownMenuItem>
+                            ))}
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      ) : field.generate.function ? (
+                        <Button
+                          type='button'
+                          variant='ghost'
+                          size='sm'
+                          onClick={async () => {
+                            const result = await field.generate!.function!();
+                            if (typeof result === 'string') {
+                              fieldProps.onChange(result);
+                            } else if (field.generate!.updateFields) {
+                              Object.entries(field.generate!.updateFields).forEach(
+                                ([fieldName, resultKey]) => {
+                                  const fullFieldName = `protocols.${protocolIndex}.${fieldName}`;
+                                  form.setValue(fullFieldName, (result as any)[resultKey]);
+                                },
+                              );
+                            } else {
+                              if (result.privateKey) {
+                                fieldProps.onChange(result.privateKey);
+                              }
+                            }
+                          }}
+                        >
+                          <Icon icon='mdi:key' className='h-4 w-4' />
+                        </Button>
+                      ) : null
+                    ) : (
+                      field.suffix
+                    )
+                  }
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      );
+
+    case 'number':
+      return (
+        <FormField
+          {...commonProps}
+          render={({ field: fieldProps }) => (
+            <FormItem>
+              <FormLabel>{t(field.label)}</FormLabel>
+              <FormControl>
+                <EnhancedInput
+                  {...fieldProps}
+                  type='number'
+                  min={field.min}
+                  max={field.max}
+                  step={field.step || 1}
+                  suffix={field.suffix}
+                  placeholder={
+                    field.placeholder
+                      ? typeof field.placeholder === 'function'
+                        ? field.placeholder(t, protocolData)
+                        : field.placeholder
+                      : undefined
+                  }
+                  onValueChange={(v) => fieldProps.onChange(v)}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      );
+
+    case 'select':
+      if (!field.options || field.options.length <= 1) {
+        return null;
+      }
+
+      return (
+        <FormField
+          {...commonProps}
+          render={({ field: fieldProps }) => (
+            <FormItem>
+              <FormLabel>{t(field.label)}</FormLabel>
+              <FormControl>
+                <Select
+                  value={fieldProps.value ?? field.defaultValue}
+                  onValueChange={(v) => fieldProps.onChange(v)}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder={t('please_select')} />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {field.options?.map((option) => (
+                      <SelectItem key={option} value={option}>
+                        {getLabel(option)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      );
+
+    case 'switch':
+      return (
+        <FormField
+          {...commonProps}
+          render={({ field: fieldProps }) => (
+            <FormItem>
+              <FormLabel>{t(field.label)}</FormLabel>
+              <FormControl>
+                <div className='pt-2'>
+                  <Switch
+                    checked={!!fieldProps.value}
+                    onCheckedChange={(checked) => fieldProps.onChange(checked)}
+                  />
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      );
+
+    case 'textarea':
+      return (
+        <FormField
+          {...commonProps}
+          render={({ field: fieldProps }) => (
+            <FormItem className='col-span-2'>
+              <FormLabel>{t(field.label)}</FormLabel>
+              <FormControl>
+                <textarea
+                  {...fieldProps}
+                  value={fieldProps.value ?? ''}
+                  className='border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50'
+                  placeholder={
+                    field.placeholder
+                      ? typeof field.placeholder === 'function'
+                        ? field.placeholder(t, protocolData)
+                        : field.placeholder
+                      : undefined
+                  }
+                  onChange={(e) => fieldProps.onChange(e.target.value)}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      );
+
+    default:
+      return null;
+  }
+}
+
+function renderFieldsByGroup(
+  fields: FieldConfig[],
+  group: string,
+  control: any,
+  form: any,
+  protocolIndex: number,
+  protocolData: any,
+  t: (key: string) => string,
+) {
+  const groupFields = fields.filter((field) => field.group === group);
+  if (groupFields.length === 0) return null;
+
+  return (
+    <div className='grid grid-cols-2 gap-4'>
+      {groupFields.map((field) => (
+        <DynamicField
+          key={field.name}
+          field={field}
+          control={control}
+          form={form}
+          protocolIndex={protocolIndex}
+          protocolData={protocolData}
+          t={t}
+        />
+      ))}
+    </div>
+  );
+}
+
+function renderGroupCard(
+  title: string,
+  fields: FieldConfig[],
+  group: string,
+  control: any,
+  form: any,
+  protocolIndex: number,
+  protocolData: any,
+  t: (key: string) => string,
+) {
+  const groupFields = fields.filter((field) => field.group === group);
+  if (groupFields.length === 0) return null;
+
+  const visibleFields = groupFields.filter(
+    (field) => !field.condition || field.condition(protocolData, {}),
+  );
+
+  if (visibleFields.length === 0) return null;
+
+  return (
+    <div className='relative'>
+      <fieldset className='border-border rounded-lg border'>
+        <legend className='text-foreground bg-background ml-3 px-1 py-1 text-sm font-medium'>
+          {t(title)}
+        </legend>
+        <div className='p-4 pt-2'>
+          {renderFieldsByGroup(fields, group, control, form, protocolIndex, protocolData, t)}
+        </div>
+      </fieldset>
+    </div>
+  );
+}
+
+export default function ServerForm(props: {
+  trigger: string;
+  title: string;
+  loading?: boolean;
+  initialValues?: Partial<API.Server>;
+  onSubmit: (values: Partial<API.Server>) => Promise<boolean> | boolean;
+}) {
+  const { trigger, title, loading, initialValues, onSubmit } = props;
+  const t = useTranslations('servers');
+  const [open, setOpen] = useState(false);
+  const [accordionValue, setAccordionValue] = useState<string>();
+
+  const { isProtocolUsedInNodes } = useNode();
+
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      address: '',
+      country: '',
+      city: '',
+      protocols: [] as any[],
+      ...initialValues,
+    },
+  });
+  const { control } = form;
+
+  const protocolsValues = useWatch({ control, name: 'protocols' });
+
+  useEffect(() => {
+    if (initialValues) {
+      form.reset({
+        name: '',
+        address: '',
+        country: '',
+        city: '',
+        ...initialValues,
+        protocols: PROTOCOLS.map((type) => {
+          const existingProtocol = initialValues.protocols?.find((p) => p.type === type);
+          const defaultConfig = getProtocolDefaultConfig(type);
+          return existingProtocol ? { ...defaultConfig, ...existingProtocol } : defaultConfig;
+        }),
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialValues]);
+
+  async function handleSubmit(values: Record<string, any>) {
+    const filteredProtocols = (values?.protocols || []).filter((protocol: any) => {
+      const port = Number(protocol?.port);
+      return protocol && Number.isFinite(port) && port > 0 && port <= 65535;
+    });
+
+    const result = {
+      name: values.name,
+      country: values.country,
+      city: values.city,
+      address: values.address,
+      protocols: filteredProtocols,
+    };
+
+    const ok = await onSubmit(result);
+    if (ok) {
+      form.reset();
+      setOpen(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          onClick={() => {
+            if (!initialValues) {
+              const full = PROTOCOLS.map((t) => getProtocolDefaultConfig(t));
+              form.reset({
+                name: '',
+                address: '',
+                country: '',
+                city: '',
+                protocols: full,
+              });
+            }
+            setOpen(true);
+          }}
+        >
+          {trigger}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className='w-[700px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
+          <Form {...form}>
+            <form className='grid grid-cols-1 gap-2 px-6 pt-4'>
+              <div className='grid grid-cols-2 gap-2 md:grid-cols-4'>
+                <FormField
+                  control={control}
+                  name='name'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('name')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput {...field} onValueChange={(v) => field.onChange(v)} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={control}
+                  name='address'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('address')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          {...field}
+                          placeholder={t('address_placeholder')}
+                          onValueChange={(v) => field.onChange(v)}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={control}
+                  name='country'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('country')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput {...field} onValueChange={(v) => field.onChange(v)} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={control}
+                  name='city'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('city')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput {...field} onValueChange={(v) => field.onChange(v)} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+              <div className='my-3'>
+                <h3 className='text-foreground text-sm font-semibold'>
+                  {t('protocol_configurations')}
+                </h3>
+                <p className='text-muted-foreground mt-1 text-xs'>
+                  {t('protocol_configurations_desc')}
+                </p>
+              </div>
+
+              <Accordion
+                type='single'
+                collapsible
+                className='w-full space-y-3'
+                value={accordionValue}
+                onValueChange={setAccordionValue}
+              >
+                {PROTOCOLS.map((type) => {
+                  const i = Math.max(
+                    0,
+                    PROTOCOLS.findIndex((t) => t === type),
+                  );
+                  const current = (protocolsValues[i] || {}) as Record<string, any>;
+                  const isEnabled = current?.enable;
+                  const fields = PROTOCOL_FIELDS[type] || [];
+                  return (
+                    <AccordionItem key={type} value={type} className='mb-2 rounded-lg border'>
+                      <AccordionTrigger className='px-4 py-3 hover:no-underline'>
+                        <div className='flex w-full items-center justify-between'>
+                          <div className='flex flex-col items-start gap-1'>
+                            <div className='flex items-center gap-1'>
+                              <span className='font-medium capitalize'>{type}</span>
+                              {current.transport && (
+                                <Badge variant='secondary' className='text-xs'>
+                                  {current.transport.toUpperCase()}
+                                </Badge>
+                              )}
+                              {current.security && current.security !== 'none' && (
+                                <Badge variant='outline' className='text-xs'>
+                                  {current.security.toUpperCase()}
+                                </Badge>
+                              )}
+                              {current.port && <Badge className='text-xs'>{current.port}</Badge>}
+                            </div>
+                            <div className='flex items-center gap-1'>
+                              <span
+                                className={cn(
+                                  'text-xs',
+                                  isEnabled ? 'text-green-500' : 'text-muted-foreground',
+                                )}
+                              >
+                                {isEnabled ? t('enabled') : t('disabled')}
+                              </span>
+                            </div>
+                          </div>
+                          <Switch
+                            className='mr-2'
+                            checked={!!isEnabled}
+                            disabled={Boolean(
+                              initialValues?.id &&
+                                isProtocolUsedInNodes(initialValues?.id || 0, type) &&
+                                isEnabled,
+                            )}
+                            onCheckedChange={(checked) => {
+                              form.setValue(`protocols.${i}.enable`, checked);
+                            }}
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        </div>
+                      </AccordionTrigger>
+                      <AccordionContent className='px-4 pb-4 pt-0'>
+                        <div className='-mx-4 space-y-4 rounded-b-lg border-t px-4 pt-4'>
+                          {renderGroupCard('basic', fields, 'basic', control, form, i, current, t)}
+                          {renderGroupCard('obfs', fields, 'obfs', control, form, i, current, t)}
+                          {renderGroupCard(
+                            'transport',
+                            fields,
+                            'transport',
+                            control,
+                            form,
+                            i,
+                            current,
+                            t,
+                          )}
+                          {renderGroupCard(
+                            'security',
+                            fields,
+                            'security',
+                            control,
+                            form,
+                            i,
+                            current,
+                            t,
+                          )}
+                          {renderGroupCard(
+                            'reality',
+                            fields,
+                            'reality',
+                            control,
+                            form,
+                            i,
+                            current,
+                            t,
+                          )}
+                          {renderGroupCard(
+                            'encryption',
+                            fields,
+                            'encryption',
+                            control,
+                            form,
+                            i,
+                            current,
+                            t,
+                          )}
+                        </div>
+                      </AccordionContent>
+                    </AccordionItem>
+                  );
+                })}
+              </Accordion>
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('cancel')}
+          </Button>
+          <Button
+            disabled={loading}
+            onClick={form.handleSubmit(handleSubmit, (errors) => {
+              console.log(errors, form.getValues());
+              const key = Object.keys(errors)[0] as keyof typeof errors;
+              if (key) toast.error(String(errors[key]?.message));
+              return false;
+            })}
+          >
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/servers/server-install.tsx
+++ b/apps/admin/app/dashboard/servers/server-install.tsx
@ -0,0 +1,119 @@
+'use client';
+
+import { getNodeConfig } from '@/services/admin/system';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@workspace/ui/components/dialog';
+import { Input } from '@workspace/ui/components/input';
+import { Label } from '@workspace/ui/components/label';
+import { useTranslations } from 'next-intl';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+type Props = {
+  server: API.Server;
+};
+
+export default function ServerInstall({ server }: Props) {
+  const t = useTranslations('servers');
+  const [open, setOpen] = useState(false);
+  const [domain, setDomain] = useState('');
+
+  const { data: cfgResp } = useQuery({
+    queryKey: ['getNodeConfig'],
+    queryFn: async () => {
+      const { data } = await getNodeConfig();
+      return data.data as API.NodeConfig | undefined;
+    },
+    enabled: open,
+  });
+
+  useEffect(() => {
+    if (open) {
+      const host = localStorage.getItem('API_HOST') ?? window.location.origin;
+      setDomain(host);
+    }
+  }, [open]);
+
+  const installCommand = useMemo(() => {
+    const secret = cfgResp?.node_secret ?? '';
+    return `wget -N https://raw.githubusercontent.com/perfect-panel/ppanel-node/master/scripts/install.sh && bash install.sh --api-host ${domain} --server-id ${server.id} --secret-key ${secret}`;
+  }, [domain, server.id, cfgResp?.node_secret]);
+
+  async function handleCopy() {
+    try {
+      if (navigator?.clipboard?.writeText) {
+        await navigator.clipboard.writeText(installCommand);
+      } else {
+        // fallback for environments without clipboard API
+        const el = document.createElement('textarea');
+        el.value = installCommand;
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand('copy');
+        document.body.removeChild(el);
+      }
+      toast.success(t('copied'));
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('copyFailed'));
+    }
+  }
+
+  const onDomainChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setDomain(e.target.value);
+    localStorage.setItem('API_HOST', e.target.value);
+  }, []);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant='secondary'>{t('connect')}</Button>
+      </DialogTrigger>
+
+      <DialogContent className='w-[720px] max-w-full md:max-w-screen-md'>
+        <DialogHeader>
+          <DialogTitle>{t('oneClickInstall')}</DialogTitle>
+        </DialogHeader>
+
+        <div className='space-y-4'>
+          <div>
+            <Label>{t('apiHost')}</Label>
+            <div className='flex items-center gap-2'>
+              <Input
+                value={domain}
+                placeholder={t('apiHostPlaceholder')}
+                onChange={onDomainChange}
+              />
+            </div>
+          </div>
+
+          <div>
+            <Label>{t('installCommand')}</Label>
+            <div className='flex flex-col gap-2'>
+              <textarea
+                readOnly
+                aria-label={t('installCommand')}
+                value={installCommand}
+                className='min-h-[88px] w-full rounded border p-2 font-mono text-sm'
+              />
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' onClick={() => setOpen(false)}>
+            {t('close')}
+          </Button>
+          <Button onClick={handleCopy}>{t('copyAndClose')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/apps/admin/app/dashboard/subscribe/app/config.tsx
+++ b/apps/admin/app/dashboard/subscribe/app/config.tsx
@ -1,282 +0,0 @@
-'use client';
-
-import {
-  getApplication,
-  getApplicationConfig,
-  updateApplicationConfig,
-} from '@/services/admin/system';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
-import { useQuery } from '@tanstack/react-query';
-import { Button } from '@workspace/ui/components/button';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@workspace/ui/components/form';
-import { ScrollArea } from '@workspace/ui/components/scroll-area';
-import {
-  Sheet,
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@workspace/ui/components/sheet';
-import { Textarea } from '@workspace/ui/components/textarea';
-import { Combobox } from '@workspace/ui/custom-components/combobox';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { UploadImage } from '@workspace/ui/custom-components/upload-image';
-import { DicesIcon } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { uid } from 'radash';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-const formSchema = z.object({
-  app_id: z.number().optional(),
-  encryption_key: z.string().optional(),
-  encryption_method: z.string().optional(),
-  startup_picture: z.string().optional(),
-  startup_picture_skip_time: z.number().optional(),
-  domains: z.array(z.string()).optional(),
-});
-
-type FormSchema = z.infer<typeof formSchema>;
-
-export default function ConfigForm() {
-  const t = useTranslations('subscribe.app');
-  const [open, setOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
-
-  const form = useForm<FormSchema>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      app_id: 0,
-      encryption_key: '',
-      encryption_method: '',
-      startup_picture: '',
-      startup_picture_skip_time: 0,
-      domains: [],
-    },
-  });
-
-  const { data, refetch } = useQuery({
-    queryKey: ['getApplicationConfig'],
-    queryFn: async () => {
-      const { data } = await getApplicationConfig();
-      return data.data;
-    },
-  });
-
-  const { data: applications } = useQuery({
-    queryKey: ['getApplication'],
-    queryFn: async () => {
-      const { data } = await getApplication();
-      return data.data?.applications || [];
-    },
-  });
-
-  useEffect(() => {
-    if (data) {
-      form.reset(data);
-    }
-  }, [data, form]);
-
-  async function onSubmit(values: FormSchema) {
-    setLoading(true);
-    try {
-      await updateApplicationConfig({
-        ...values,
-        domains: values.domains?.filter((domain) => domain),
-      } as API.ApplicationConfig);
-      toast.success(t('updateSuccess'));
-      refetch();
-      setOpen(false);
-    } catch (error) {
-      /* empty */
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
-        <Button variant='outline'>
-          <Icon icon='mdi:cog' className='mr-2' />
-          {t('config')}
-        </Button>
-      </SheetTrigger>
-      <SheetContent className='w-[520px] max-w-full md:max-w-screen-md'>
-        <SheetHeader>
-          <SheetTitle>{t('configApp')}</SheetTitle>
-        </SheetHeader>
-        <ScrollArea className='h-[calc(100dvh-48px-36px-36px)]'>
-          <Form {...form}>
-            <form className='space-y-4 py-4'>
-              <FormField
-                control={form.control}
-                name='app_id'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('selectApp')}</FormLabel>
-                    <FormDescription>{t('selectAppDescription')}</FormDescription>
-                    <FormControl>
-                      <Combobox
-                        {...field}
-                        options={
-                          applications?.map((app) => ({
-                            label: app.name,
-                            value: app.id,
-                          })) || []
-                        }
-                        value={field.value}
-                        onChange={(value) => form.setValue(field.name, value)}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name='encryption_key'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('communicationKey')}</FormLabel>
-                    <FormDescription>{t('communicationKeyDescription')}</FormDescription>
-                    <FormControl>
-                      <EnhancedInput
-                        value={field.value}
-                        onValueChange={(value) => form.setValue(field.name, value as string)}
-                        suffix={
-                          <div className='bg-muted flex h-9 items-center text-nowrap px-3'>
-                            <DicesIcon
-                              onClick={() => {
-                                const id = uid(32).toLowerCase();
-                                const formatted = `${id.slice(0, 8)}-${id.slice(8, 12)}-${id.slice(12, 16)}-${id.slice(16, 20)}-${id.slice(20)}`;
-                                form.setValue(field.name, formatted);
-                              }}
-                              className='cursor-pointer'
-                            />
-                          </div>
-                        }
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name='encryption_method'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('encryption')}</FormLabel>
-                    <FormDescription>{t('encryptionDescription')}</FormDescription>
-                    <FormControl>
-                      <Combobox
-                        options={[
-                          { label: 'none', value: 'none' },
-                          { label: 'AES', value: 'aes' },
-                        ]}
-                        value={field.value}
-                        onChange={(value) => form.setValue(field.name, value)}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name='startup_picture'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('startupPicture')}</FormLabel>
-                    <FormDescription>{t('startupPictureDescription')}</FormDescription>
-                    <FormControl>
-                      <EnhancedInput
-                        value={field.value}
-                        onValueChange={(value) => form.setValue(field.name, value as string)}
-                        suffix={
-                          <UploadImage
-                            className='bg-muted h-9 rounded-none border-none px-2'
-                            onChange={(value) => form.setValue('startup_picture', value as string)}
-                          />
-                        }
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name='startup_picture_skip_time'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('startupPictureSkip')}</FormLabel>
-                    <FormDescription>{t('startupPictureSkipDescription')}</FormDescription>
-                    <FormControl>
-                      <EnhancedInput
-                        {...field}
-                        type='number'
-                        min={0}
-                        suffix='S'
-                        value={field.value}
-                        onValueChange={(value) =>
-                          form.setValue('startup_picture_skip_time', Number(value))
-                        }
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name='domains'
-                render={({ field }) => (
-                  <FormItem className='px-1'>
-                    <FormLabel>{t('backupDomains')}</FormLabel>
-                    <FormDescription>{t('backupDomainsDescription')}</FormDescription>
-                    <FormControl>
-                      <Textarea
-                        className='h-28'
-                        placeholder='example.com'
-                        value={field.value?.join('\n')}
-                        onChange={(e) => {
-                          form.setValue(field.name, e.target.value.split('\n'));
-                        }}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </form>
-          </Form>
-        </ScrollArea>
-        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
-          <Button variant='outline' onClick={() => setOpen(false)}>
-            {t('cancel')}
-          </Button>
-          <Button onClick={form.handleSubmit(onSubmit)} disabled={loading}>
-            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
-            {t('confirm')}
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-}
--- a/apps/admin/app/dashboard/subscribe/app/form.tsx
+++ b/apps/admin/app/dashboard/subscribe/app/form.tsx
@ -1,291 +0,0 @@
-'use client';
-
-import { getSubscribeType } from '@/services/admin/system';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
-import { useQuery } from '@tanstack/react-query';
-import { Button } from '@workspace/ui/components/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@workspace/ui/components/form';
-import { ScrollArea } from '@workspace/ui/components/scroll-area';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@workspace/ui/components/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@workspace/ui/components/sheet';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
-import { ArrayInput } from '@workspace/ui/custom-components/dynamic-Inputs';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { UploadImage } from '@workspace/ui/custom-components/upload-image';
-import { useTranslations } from 'next-intl';
-import { assign, shake } from 'radash';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-const platforms = ['windows', 'macos', 'linux', 'android', 'ios', 'harmony'];
-
-const defaultValues = {
-  subscribe_type: 'Clash',
-  name: '',
-  icon: '',
-  url: '',
-};
-
-const versionSchema = z.object({
-  url: z.string(),
-  version: z.string().optional(),
-  description: z.string().optional(),
-  is_default: z.boolean().optional(),
-});
-
-const formSchema = z.object({
-  icon: z.string(),
-  name: z.string(),
-  subscribe_type: z.string(),
-  platform: z.object({
-    windows: z.array(versionSchema).optional(),
-    macos: z.array(versionSchema).optional(),
-    linux: z.array(versionSchema).optional(),
-    android: z.array(versionSchema).optional(),
-    ios: z.array(versionSchema).optional(),
-    harmony: z.array(versionSchema).optional(),
-  }),
-});
-
-interface FormProps<T> {
-  trigger: React.ReactNode | string;
-  title: string;
-  initialValues?: Partial<T>;
-  onSubmit: (values: T) => Promise<boolean>;
-  loading?: boolean;
-}
-
-export default function SubscribeAppForm<
-  T extends API.CreateApplicationRequest | API.UpdateApplicationRequest,
->({ trigger, title, loading, initialValues, onSubmit }: FormProps<T>) {
-  const t = useTranslations('subscribe.app');
-  const [open, setOpen] = useState(false);
-
-  type FormSchema = z.infer<typeof formSchema>;
-
-  const form = useForm<FormSchema>({
-    resolver: zodResolver(formSchema),
-    defaultValues: assign(
-      defaultValues,
-      shake(initialValues, (value) => value === null),
-    ),
-  });
-
-  useEffect(() => {
-    form.reset(
-      assign(
-        defaultValues,
-        shake(initialValues, (value) => value === null),
-      ),
-    );
-  }, [form, initialValues]);
-
-  const { data: subscribe_types } = useQuery<string[]>({
-    queryKey: ['getSubscribeType'],
-    queryFn: async () => {
-      const { data } = await getSubscribeType();
-      return data.data?.subscribe_types || [];
-    },
-  });
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
-        {typeof trigger === 'string' ? <Button>{trigger}</Button> : trigger}
-      </SheetTrigger>
-      <SheetContent className='w-[520px] max-w-full md:max-w-screen-md'>
-        <SheetHeader>
-          <SheetTitle>{title}</SheetTitle>
-        </SheetHeader>
-        <ScrollArea className='h-[calc(100dvh-48px-36px-36px)]'>
-          <Form {...form}>
-            <form className='space-y-4 py-4'>
-              <div className='grid grid-cols-2 gap-4'>
-                <FormField
-                  control={form.control}
-                  name='icon'
-                  render={({ field }) => (
-                    <FormItem className='col-span-2'>
-                      <FormLabel>{t('appIcon')}</FormLabel>
-                      <FormControl>
-                        <EnhancedInput
-                          required
-                          suffix={
-                            <UploadImage
-                              className='bg-muted h-9 rounded-none border-none px-2'
-                              onChange={(value) => {
-                                form.setValue(field.name, value as string);
-                              }}
-                            />
-                          }
-                          value={field.value}
-                          onValueChange={(value) => {
-                            form.setValue(field.name, value as string);
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name='name'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('appName')}</FormLabel>
-                      <FormControl>
-                        <EnhancedInput
-                          required
-                          type='text'
-                          value={field.value}
-                          onValueChange={(value) => {
-                            form.setValue(field.name, value as string);
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name='subscribe_type'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('subscriptionProtocol')}</FormLabel>
-                      <FormControl>
-                        <Select value={field.value} onValueChange={field.onChange}>
-                          <SelectTrigger>
-                            <SelectValue placeholder={t('subscriptionProtocol')} />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {subscribe_types?.map((type) => (
-                              <SelectItem key={type} value={type}>
-                                {type}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-              <FormItem>
-                <FormLabel>{t('platform')}</FormLabel>
-                <Tabs defaultValue={platforms[0]}>
-                  <TabsList>
-                    {platforms.map((platform) => (
-                      <TabsTrigger key={platform} value={platform} className='uppercase'>
-                        {platform}
-                      </TabsTrigger>
-                    ))}
-                  </TabsList>
-                  {platforms.map((platform) => (
-                    <TabsContent key={platform} value={platform}>
-                      <FormField
-                        control={form.control}
-                        name={`platform.${platform as keyof FormSchema['platform']}`}
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormControl>
-                              <ArrayInput
-                                isReverse
-                                className='grid grid-cols-3 gap-4'
-                                fields={[
-                                  {
-                                    name: 'version',
-                                    type: 'text',
-                                    placeholder: t('version'),
-                                    defaultValue: '1.0.0',
-                                  },
-                                  {
-                                    name: 'description',
-                                    type: 'text',
-                                    placeholder: t('description'),
-                                  },
-                                  {
-                                    name: 'is_default',
-                                    type: 'boolean',
-                                    placeholder: t('defaultVersion'),
-                                    calculateValue: (value) => {
-                                      const newField = field.value?.map((item) => {
-                                        if (item.is_default) {
-                                          item.is_default = false;
-                                        }
-                                        return item;
-                                      });
-                                      form.setValue(field.name, newField);
-                                      return value;
-                                    },
-                                  },
-                                  {
-                                    name: 'url',
-                                    type: 'text',
-                                    placeholder: t('downloadLink'),
-                                    className: 'col-span-3',
-                                  },
-                                ]}
-                                value={field.value}
-                                onChange={(value) => {
-                                  form.setValue(
-                                    field.name,
-                                    value.filter((item) => item.url),
-                                  );
-                                }}
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </TabsContent>
-                  ))}
-                </Tabs>
-              </FormItem>
-            </form>
-          </Form>
-        </ScrollArea>
-        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
-          <Button variant='outline' onClick={() => setOpen(false)}>
-            {t('cancel')}
-          </Button>
-          <Button
-            onClick={form.handleSubmit(async (values) => {
-              const success = await onSubmit(values as unknown as T);
-              if (success) setOpen(false);
-            })}
-            disabled={loading}
-          >
-            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
-            {t('confirm')}
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-}
--- a/apps/admin/app/dashboard/subscribe/app/table.tsx
+++ b/apps/admin/app/dashboard/subscribe/app/table.tsx
@ -1,143 +0,0 @@
-'use client';
-
-import { ProTable, ProTableActions } from '@/components/pro-table';
-import {
-  createApplication,
-  deleteApplication,
-  getApplication,
-  updateApplication,
-} from '@/services/admin/system';
-import { Button } from '@workspace/ui/components/button';
-import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
-import { useTranslations } from 'next-intl';
-import Image from 'next/legacy/image';
-import { useRef, useState } from 'react';
-import { toast } from 'sonner';
-import ConfigForm from './config';
-import SubscribeAppForm from './form';
-
-export default function SubscribeApp() {
-  const t = useTranslations('subscribe.app');
-  const [loading, setLoading] = useState(false);
-  const ref = useRef<ProTableActions>(null);
-
-  return (
-    <ProTable<API.ApplicationResponseInfo, Record<string, unknown>>
-      action={ref}
-      header={{
-        title: t('appList'),
-        toolbar: (
-          <div className='flex items-center gap-2'>
-            <ConfigForm />
-            <SubscribeAppForm<API.CreateApplicationRequest>
-              trigger={t('create')}
-              title={t('createApp')}
-              loading={loading}
-              onSubmit={async (values) => {
-                setLoading(true);
-                try {
-                  await createApplication(values);
-                  toast.success(t('createSuccess'));
-                  ref.current?.refresh();
-                  setLoading(false);
-                  return true;
-                } catch (error) {
-                  setLoading(false);
-                  return false;
-                }
-              }}
-            />
-          </div>
-        ),
-      }}
-      request={async (_pagination, filters) => {
-        const { data } = await getApplication();
-        return {
-          list: data.data?.applications || [],
-          total: 0,
-        };
-      }}
-      columns={[
-        {
-          accessorKey: 'icon',
-          header: t('appIcon'),
-          cell: ({ row }) => (
-            <Image
-              src={row.getValue('icon')}
-              alt={row.getValue('name')}
-              className='h-8 w-8 rounded-md'
-              width={32}
-              height={32}
-            />
-          ),
-        },
-        {
-          accessorKey: 'name',
-          header: t('appName'),
-        },
-        {
-          accessorKey: 'subscribe_type',
-          header: t('subscriptionProtocol'),
-          cell: ({ row }) => row.getValue('subscribe_type'),
-        },
-      ]}
-      actions={{
-        render: (row) => [
-          <SubscribeAppForm<API.UpdateApplicationRequest>
-            key='edit'
-            trigger={<Button>{t('edit')}</Button>}
-            title={t('editApp')}
-            loading={loading}
-            initialValues={{
-              ...row,
-            }}
-            onSubmit={async (values) => {
-              setLoading(true);
-              try {
-                await updateApplication({
-                  ...values,
-                  id: row.id,
-                });
-                toast.success(t('updateSuccess'));
-                ref.current?.refresh();
-                setLoading(false);
-                return true;
-              } catch (error) {
-                setLoading(false);
-                return false;
-              }
-            }}
-          />,
-          <ConfirmButton
-            key='delete'
-            trigger={<Button variant='destructive'>{t('delete')}</Button>}
-            title={t('confirmDelete')}
-            description={t('deleteWarning')}
-            onConfirm={async () => {
-              await deleteApplication({ id: row.id! });
-              toast.success(t('deleteSuccess'));
-              ref.current?.refresh();
-            }}
-            cancelText={t('cancel')}
-            confirmText={t('confirm')}
-          />,
-        ],
-        batchRender: (rows) => [
-          <ConfirmButton
-            key='delete'
-            trigger={<Button variant='destructive'>{t('batchDelete')}</Button>}
-            title={t('confirmDelete')}
-            description={t('deleteWarning')}
-            onConfirm={async () => {
-              await Promise.all(rows.map((row) => deleteApplication({ id: row.id! })));
-              toast.success(t('deleteSuccess'));
-              ref.current?.reset();
-            }}
-            cancelText={t('cancel')}
-            confirmText={t('confirm')}
-          />,
-        ],
-      }}
-    />
-  );
-}
--- a/apps/admin/app/dashboard/subscribe/config-form.tsx
+++ b/apps/admin/app/dashboard/subscribe/config-form.tsx
@ -0,0 +1,258 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import { getSubscribeConfig, updateSubscribeConfig } from '@/services/admin/system';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Switch } from '@workspace/ui/components/switch';
+import { Textarea } from '@workspace/ui/components/textarea';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+
+const subscribeConfigSchema = z.object({
+  single_model: z.boolean().optional(),
+  pan_domain: z.boolean().optional(),
+  subscribe_path: z.string().optional(),
+  subscribe_domain: z.string().optional(),
+  user_agent_limit: z.boolean().optional(),
+  user_agent_list: z.string().optional(),
+});
+
+type SubscribeConfigFormData = z.infer<typeof subscribeConfigSchema>;
+
+export default function ConfigForm() {
+  const t = useTranslations('subscribe');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getSubscribeConfig'],
+    queryFn: async () => {
+      const { data } = await getSubscribeConfig();
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<SubscribeConfigFormData>({
+    resolver: zodResolver(subscribeConfigSchema),
+    defaultValues: {
+      single_model: false,
+      pan_domain: false,
+      subscribe_path: '',
+      subscribe_domain: '',
+      user_agent_limit: false,
+      user_agent_list: '',
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: SubscribeConfigFormData) {
+    setLoading(true);
+    try {
+      await updateSubscribeConfig(values as API.SubscribeConfig);
+      toast.success(t('config.updateSuccess'));
+      refetch();
+      setOpen(false);
+    } catch (error) {
+      toast.error(t('config.updateError'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className='flex cursor-pointer items-center justify-between transition-colors'>
+          <div className='flex items-center gap-3'>
+            <div className='bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg'>
+              <Icon icon='mdi:cog' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('config.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('config.description')}</p>
+            </div>
+          </div>
+          <Icon icon='mdi:chevron-right' className='size-6' />
+        </div>
+      </SheetTrigger>
+      <SheetContent className='w-[600px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('config.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='subscribe-config-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='single_model'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('config.singleSubscriptionMode')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t('config.singleSubscriptionModeDescription')}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='pan_domain'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('config.wildcardResolution')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('config.wildcardResolutionDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='subscribe_path'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('config.subscriptionPath')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('config.subscriptionPathPlaceholder')}
+                        value={field.value}
+                        onValueBlur={field.onChange}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('config.subscriptionPathDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='subscribe_domain'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('config.subscriptionDomain')}</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        className='h-32'
+                        placeholder={`${t('config.subscriptionDomainPlaceholder')}\nexample.com\nwww.example.com`}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('config.subscriptionDomainDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='user_agent_limit'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('config.userAgentLimit', { userAgent: 'User-Agent' })}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t('config.userAgentLimitDescription', { userAgent: 'User-Agent' })}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='user_agent_list'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      {t('config.userAgentList', {
+                        userAgent: 'User-Agent',
+                      })}
+                    </FormLabel>
+                    <FormControl>
+                      <Textarea
+                        className='h-32'
+                        placeholder={`${t('config.userAgentListPlaceholder', { userAgent: 'User-Agent' })}\nClashX\nClashForAndroid\nClash-verge`}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t('config.userAgentListDescription', { userAgent: 'User-Agent' })}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={loading} onClick={() => setOpen(false)}>
+            {t('actions.cancel')}
+          </Button>
+          <Button disabled={loading} type='submit' form='subscribe-config-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('actions.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/apps/admin/app/dashboard/subscribe/group/form.tsx
+++ b/apps/admin/app/dashboard/subscribe/group/form.tsx
@ -1,143 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Button } from '@workspace/ui/components/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@workspace/ui/components/form';
-import { ScrollArea } from '@workspace/ui/components/scroll-area';
-import {
-  Sheet,
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@workspace/ui/components/sheet';
-import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
-import { Icon } from '@workspace/ui/custom-components/icon';
-import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-const formSchema = z.object({
-  name: z.string(),
-  description: z.string().optional(),
-});
-
-interface GroupFormProps<T> {
-  onSubmit: (data: T) => Promise<boolean> | boolean;
-  initialValues?: T;
-  loading?: boolean;
-  trigger: string;
-  title: string;
-}
-
-export default function GroupForm<T extends Record<string, any>>({
-  onSubmit,
-  initialValues,
-  loading,
-  trigger,
-  title,
-}: GroupFormProps<T>) {
-  const t = useTranslations('subscribe');
-
-  const [open, setOpen] = useState(false);
-  const form = useForm({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      ...initialValues,
-    },
-  });
-
-  useEffect(() => {
-    form?.reset(initialValues);
-  }, [form, initialValues]);
-
-  async function handleSubmit(data: { [x: string]: any }) {
-    const bool = await onSubmit(data as T);
-
-    if (bool) setOpen(false);
-  }
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
-        <Button
-          onClick={() => {
-            form.reset();
-            setOpen(true);
-          }}
-        >
-          {trigger}
-        </Button>
-      </SheetTrigger>
-      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
-        <SheetHeader>
-          <SheetTitle>{title}</SheetTitle>
-        </SheetHeader>
-        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-4 px-6 pt-4'>
-              <FormField
-                control={form.control}
-                name='name'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('group.form.name')}</FormLabel>
-                    <FormControl>
-                      <EnhancedInput
-                        {...field}
-                        onValueChange={(value) => {
-                          form.setValue(field.name, value);
-                        }}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name='description'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('group.form.description')}</FormLabel>
-                    <FormControl>
-                      <EnhancedInput
-                        {...field}
-                        onValueChange={(value) => {
-                          form.setValue(field.name, value);
-                        }}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </form>
-          </Form>
-        </ScrollArea>
-        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
-          <Button
-            variant='outline'
-            disabled={loading}
-            onClick={() => {
-              setOpen(false);
-            }}
-          >
-            {t('group.form.cancel')}
-          </Button>
-          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
-            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
-            {t('group.form.confirm')}
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-}
--- a/apps/admin/app/dashboard/subscribe/group/table.tsx
+++ b/apps/admin/app/dashboard/subscribe/group/table.tsx
@ -1,141 +0,0 @@
-'use client';
-
-import { ProTable, ProTableActions } from '@/components/pro-table';
-import {
-  batchDeleteSubscribeGroup,
-  createSubscribeGroup,
-  deleteSubscribeGroup,
-  getSubscribeGroupList,
-  updateSubscribeGroup,
-} from '@/services/admin/subscribe';
-import { Button } from '@workspace/ui/components/button';
-import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
-import { formatDate } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { useRef, useState } from 'react';
-import { toast } from 'sonner';
-import GroupForm from './form';
-
-const GroupTable = () => {
-  const t = useTranslations('subscribe');
-  const [loading, setLoading] = useState(false);
-  const ref = useRef<ProTableActions>(null);
-
-  return (
-    <ProTable<API.SubscribeGroup, any>
-      action={ref}
-      header={{
-        title: t('group.title'),
-        toolbar: (
-          <GroupForm<API.CreateSubscribeGroupRequest>
-            trigger={t('group.create')}
-            title={t('group.createSubscribeGroup')}
-            loading={loading}
-            onSubmit={async (values) => {
-              setLoading(true);
-              try {
-                await createSubscribeGroup(values);
-                toast.success(t('group.createSuccess'));
-                ref.current?.refresh();
-                setLoading(false);
-
-                return true;
-              } catch (error) {
-                setLoading(false);
-
-                return false;
-              }
-            }}
-          />
-        ),
-      }}
-      columns={[
-        {
-          accessorKey: 'name',
-          header: t('group.name'),
-        },
-        {
-          accessorKey: 'description',
-          header: t('group.description'),
-        },
-        {
-          accessorKey: 'updated_at',
-          header: t('group.updatedAt'),
-          cell: ({ row }) => formatDate(row.getValue('updated_at')),
-        },
-      ]}
-      request={async () => {
-        const { data } = await getSubscribeGroupList();
-        return {
-          list: data.data?.list || [],
-          total: data.data?.total || 0,
-        };
-      }}
-      actions={{
-        render: (row) => [
-          <GroupForm<API.SubscribeGroup>
-            key='edit'
-            trigger={t('group.edit')}
-            title={t('group.editSubscribeGroup')}
-            loading={loading}
-            initialValues={row}
-            onSubmit={async (values) => {
-              setLoading(true);
-              try {
-                await updateSubscribeGroup({
-                  ...row,
-                  ...values,
-                });
-                toast.success(t('group.updateSuccess'));
-                ref.current?.refresh();
-                setLoading(false);
-
-                return true;
-              } catch (error) {
-                setLoading(false);
-
-                return false;
-              }
-            }}
-          />,
-          <ConfirmButton
-            key='delete'
-            trigger={<Button variant='destructive'>{t('group.delete')}</Button>}
-            title={t('group.confirmDelete')}
-            description={t('group.deleteWarning')}
-            onConfirm={async () => {
-              await deleteSubscribeGroup({
-                id: row.id,
-              });
-              toast.success(t('group.deleteSuccess'));
-              ref.current?.refresh();
-            }}
-            cancelText={t('group.cancel')}
-            confirmText={t('group.confirm')}
-          />,
-        ],
-        batchRender(rows) {
-          return [
-            <ConfirmButton
-              key='delete'
-              trigger={<Button variant='destructive'>{t('group.delete')}</Button>}
-              title={t('group.confirmDelete')}
-              description={t('group.deleteWarning')}
-              onConfirm={async () => {
-                await batchDeleteSubscribeGroup({
-                  ids: rows.map((item) => item.id),
-                });
-                toast.success(t('group.deleteSuccess'));
-                ref.current?.refresh();
-              }}
-              cancelText={t('group.cancel')}
-              confirmText={t('group.confirm')}
-            />,
-          ];
-        },
-      }}
-    />
-  );
-};
-
-export default GroupTable;
--- a/apps/admin/app/dashboard/subscribe/page.tsx
+++ b/apps/admin/app/dashboard/subscribe/page.tsx
@ -1,35 +1,23 @@
-import { getTranslations } from 'next-intl/server';
+'use client';

-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { Card, CardContent } from '@workspace/ui/components/card';
+import { useTranslations } from 'next-intl';
+import ConfigForm from './config-form';
+import { ProtocolForm } from './protocol-form';

-import SubscribeApp from './app/table';
-import GroupTable from './group/table';
-import SubscribeConfig from './subscribe-config';
-import SubscribeTable from './subscribe-table';
-
-export default async function Page() {
-  const t = await getTranslations('subscribe');
+export default function SubscribePage() {
+  const t = useTranslations('subscribe');

  return (
-    <Tabs defaultValue='subscribe'>
-      <TabsList>
-        <TabsTrigger value='subscribe'>{t('tabs.subscribe')}</TabsTrigger>
-        <TabsTrigger value='group'>{t('tabs.subscribeGroup')}</TabsTrigger>
-        <TabsTrigger value='config'>{t('tabs.subscribeConfig')}</TabsTrigger>
-        <TabsTrigger value='app'>{t('tabs.subscribeApp')}</TabsTrigger>
-      </TabsList>
-      <TabsContent value='subscribe'>
-        <SubscribeTable />
-      </TabsContent>
-      <TabsContent value='group'>
-        <GroupTable />
-      </TabsContent>
-      <TabsContent value='config'>
-        <SubscribeConfig />
-      </TabsContent>
-      <TabsContent value='app'>
-        <SubscribeApp />
-      </TabsContent>
-    </Tabs>
+    <div className='space-y-4'>
+      <h2 className='text-lg font-semibold'>{t('config.title')}</h2>
+      <Card>
+        <CardContent className='p-4'>
+          <ConfigForm />
+        </CardContent>
+      </Card>
+
+      <ProtocolForm />
+    </div>
  );
 }
--- a/apps/admin/app/dashboard/subscribe/protocol-form.tsx
+++ b/apps/admin/app/dashboard/subscribe/protocol-form.tsx
@ -0,0 +1,721 @@
+'use client';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  createSubscribeApplication,
+  deleteSubscribeApplication,
+  getSubscribeApplicationList,
+  updateSubscribeApplication,
+} from '@/services/admin/application';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ColumnDef } from '@tanstack/react-table';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { Input } from '@workspace/ui/components/input';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@workspace/ui/components/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@workspace/ui/components/sheet';
+import { Switch } from '@workspace/ui/components/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
+import { Textarea } from '@workspace/ui/components/textarea';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@workspace/ui/components/tooltip';
+import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
+import { GoTemplateEditor } from '@workspace/ui/custom-components/editor';
+import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { UploadImage } from '@workspace/ui/custom-components/upload-image';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import { subscribeSchema } from './schema';
+import { TemplatePreview } from './template-preview';
+
+const createClientFormSchema = (t: any) =>
+  z.object({
+    name: z.string().min(1, t('form.validation.nameRequired')),
+    description: z.string().optional(),
+    icon: z.string().optional(),
+    user_agent: z.string().min(1, `User-Agent ${t('form.validation.userAgentRequiredSuffix')}`),
+    scheme: z.string().optional(),
+    template: z.string(),
+    output_format: z.string(),
+    download_link: z.object({
+      windows: z.string().optional(),
+      mac: z.string().optional(),
+      linux: z.string().optional(),
+      ios: z.string().optional(),
+      android: z.string().optional(),
+      harmony: z.string().optional(),
+    }),
+  });
+
+type ClientFormData = z.infer<ReturnType<typeof createClientFormSchema>>;
+
+export function ProtocolForm() {
+  const t = useTranslations('subscribe');
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [editingClient, setEditingClient] = useState<API.SubscribeApplication | null>(null);
+  const tableRef = useRef<ProTableActions>(null);
+
+  const clientFormSchema = createClientFormSchema(t);
+
+  const form = useForm<ClientFormData>({
+    resolver: zodResolver(clientFormSchema),
+    defaultValues: {
+      name: '',
+      description: '',
+      icon: '',
+      user_agent: '',
+      scheme: '',
+      template: '',
+      output_format: '',
+      download_link: {
+        windows: '',
+        mac: '',
+        linux: '',
+        ios: '',
+        android: '',
+        harmony: '',
+      },
+    },
+  });
+
+  const request = async (
+    pagination: { page: number; size: number },
+    filter: Record<string, unknown>,
+  ) => {
+    const { data } = await getSubscribeApplicationList({
+      page: pagination.page,
+      size: pagination.size,
+    });
+
+    return {
+      list: data.data?.list || [],
+      total: data.data?.total || 0,
+    };
+  };
+
+  const columns: ColumnDef<API.SubscribeApplication, any>[] = [
+    {
+      accessorKey: 'is_default',
+      header: t('table.columns.default'),
+      cell: ({ row }) => (
+        <Switch
+          checked={row.original.is_default || false}
+          onCheckedChange={async (checked) => {
+            await updateSubscribeApplication({
+              ...row.original,
+              is_default: checked,
+            });
+            tableRef.current?.refresh();
+          }}
+        />
+      ),
+    },
+    {
+      accessorKey: 'name',
+      header: t('table.columns.name'),
+      cell: ({ row }) => (
+        <div className='flex items-center gap-2'>
+          {row.original.icon && (
+            <div className='relative h-6 w-6 flex-shrink-0'>
+              <Image
+                src={row.original.icon}
+                alt={row.original.name}
+                width={24}
+                height={24}
+                className='rounded object-contain'
+                onError={() => {
+                  console.log(`Failed to load image for ${row.original.name}`);
+                }}
+              />
+            </div>
+          )}
+          <span className='font-medium'>{row.original.name}</span>
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'user_agent',
+      header: 'User-Agent',
+      cell: ({ row }) => (
+        <div className='text-muted-foreground max-w-[150px] truncate font-mono text-sm'>
+          {row.original.user_agent}
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'output_format',
+      header: t('table.columns.outputFormat'),
+      cell: ({ row }) => (
+        <Badge variant='secondary' className='text-xs'>
+          {t(`outputFormats.${row.original.output_format}`) || row.original.output_format}
+        </Badge>
+      ),
+    },
+    {
+      accessorKey: 'download_link',
+      header: t('table.columns.supportedPlatforms'),
+      cell: ({ row }) => {
+        return (
+          <div className='flex flex-wrap gap-1'>
+            {Object.entries(row.original.download_link || {}).map(([key, value]) => {
+              if (value) {
+                return (
+                  <Badge key={key} variant='secondary' className='text-xs'>
+                    {t(`platforms.${key}`)}
+                  </Badge>
+                );
+              }
+              return null;
+            })}
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: 'description',
+      header: t('table.columns.description'),
+      cell: ({ row }) => (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger>
+              <div className='text-muted-foreground max-w-[200px] truncate text-sm'>
+                {row.original.description}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent className='max-w-xs'>
+              <p>{row.original.description}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ),
+    },
+  ];
+
+  const handleAdd = () => {
+    setEditingClient(null);
+    form.reset({
+      name: '',
+      description: '',
+      icon: '',
+      user_agent: '',
+      scheme: '',
+      template: '',
+      output_format: '',
+      download_link: {
+        windows: '',
+        mac: '',
+        linux: '',
+        ios: '',
+        android: '',
+        harmony: '',
+      },
+    });
+    setOpen(true);
+  };
+
+  const handleEdit = (client: API.SubscribeApplication) => {
+    setEditingClient(client);
+    form.reset(client);
+    setOpen(true);
+  };
+
+  const handleDelete = async (client: API.SubscribeApplication) => {
+    setLoading(true);
+    try {
+      await deleteSubscribeApplication({ id: client.id });
+      tableRef.current?.refresh();
+      toast.success(t('actions.deleteSuccess'));
+    } catch (error) {
+      console.error('Failed to delete client:', error);
+      toast.error(t('actions.deleteFailed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleBatchDelete = async (clients: API.SubscribeApplication[]) => {
+    setLoading(true);
+    try {
+      await Promise.all(clients.map((client) => deleteSubscribeApplication({ id: client.id })));
+      tableRef.current?.refresh();
+      toast.success(t('actions.batchDeleteSuccess', { count: clients.length }));
+    } catch (error) {
+      console.error('Failed to batch delete clients:', error);
+      toast.error(t('actions.deleteFailed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onSubmit = async (data: ClientFormData) => {
+    setLoading(true);
+    try {
+      if (editingClient) {
+        await updateSubscribeApplication({
+          ...data,
+          is_default: editingClient.is_default,
+          id: editingClient.id,
+        });
+        toast.success(t('actions.updateSuccess'));
+      } else {
+        await createSubscribeApplication({
+          ...data,
+          is_default: false,
+        });
+        toast.success(t('actions.createSuccess'));
+      }
+
+      setOpen(false);
+      tableRef.current?.refresh();
+    } catch (error) {
+      console.error('Failed to save client:', error);
+      toast.error(t('actions.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <ProTable<API.SubscribeApplication, Record<string, unknown>>
+        action={tableRef}
+        columns={columns}
+        request={request}
+        header={{
+          title: (
+            <div className='flex items-center justify-between'>
+              <h2 className='text-lg font-semibold'>{t('protocol.title')}</h2>
+              <a
+                href='https://github.com/perfect-panel/subscription-template'
+                target='_blank'
+                rel='noreferrer'
+                className='text-primary inline-flex items-center gap-2 rounded-md px-3 py-1 text-sm font-medium hover:underline'
+              >
+                <Icon icon='mdi:github' className='h-4 w-4' />
+                <span>Template Repo</span>
+                <Icon icon='mdi:open-in-new' className='text-muted-foreground h-4 w-4' />
+              </a>
+            </div>
+          ),
+          toolbar: <Button onClick={handleAdd}>{t('actions.add')}</Button>,
+        }}
+        actions={{
+          render: (row) => [
+            <TemplatePreview
+              key='preview'
+              applicationId={row.id}
+              output_format={row.output_format}
+            />,
+            <Button
+              key='edit'
+              onClick={() => handleEdit(row as unknown as API.SubscribeApplication)}
+            >
+              {t('actions.edit')}
+            </Button>,
+            <ConfirmButton
+              key='delete'
+              trigger={
+                <Button variant='destructive' disabled={loading}>
+                  {t('actions.delete')}
+                </Button>
+              }
+              title={t('actions.confirmDelete')}
+              description={t('actions.deleteWarning')}
+              onConfirm={() => handleDelete(row as unknown as API.SubscribeApplication)}
+              cancelText={t('actions.cancel')}
+              confirmText={t('actions.confirm')}
+            />,
+          ],
+          batchRender: (rows) => [
+            <ConfirmButton
+              key='batchDelete'
+              trigger={<Button variant='destructive'>{t('actions.batchDelete')}</Button>}
+              title={t('actions.confirmDelete')}
+              description={t('actions.batchDeleteWarning', { count: rows.length })}
+              onConfirm={() => handleBatchDelete(rows as unknown as API.SubscribeApplication[])}
+              cancelText={t('actions.cancel')}
+              confirmText={t('actions.confirm')}
+            />,
+          ],
+        }}
+      />
+
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetContent className='w-[580px] max-w-full md:max-w-screen-md'>
+          <SheetHeader>
+            <SheetTitle>{editingClient ? t('form.editTitle') : t('form.addTitle')}</SheetTitle>
+          </SheetHeader>
+          <ScrollArea className='h-[calc(100dvh-48px-36px-36px)]'>
+            <Form {...form}>
+              <form className='space-y-6 py-4'>
+                <Tabs defaultValue='basic' className='w-full'>
+                  <TabsList className='grid w-full grid-cols-3'>
+                    <TabsTrigger value='basic'>{t('form.tabs.basic')}</TabsTrigger>
+                    <TabsTrigger value='template'>{t('form.tabs.template')}</TabsTrigger>
+                    <TabsTrigger value='download'>{t('form.tabs.download')}</TabsTrigger>
+                  </TabsList>
+
+                  <TabsContent value='basic' className='space-y-4'>
+                    <FormField
+                      control={form.control}
+                      name='icon'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.fields.icon')}</FormLabel>
+                          <FormControl>
+                            <EnhancedInput
+                              type='text'
+                              placeholder='https://example.com/icon.png'
+                              suffix={
+                                <UploadImage
+                                  className='bg-muted h-9 rounded-none border-none px-2'
+                                  onChange={(value) => {
+                                    form.setValue(field.name, value as string);
+                                  }}
+                                />
+                              }
+                              value={field.value}
+                              onValueChange={(value) => {
+                                form.setValue(field.name, value as string);
+                              }}
+                            />
+                          </FormControl>
+                          <FormDescription>{t('form.descriptions.icon')}</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name='name'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.fields.name')}</FormLabel>
+                          <FormControl>
+                            <Input placeholder='Clash for Windows' {...field} />
+                          </FormControl>
+                          <FormDescription>{t('form.descriptions.name')}</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name='user_agent'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>User-Agent</FormLabel>
+                          <FormControl>
+                            <Input placeholder='Clash' {...field} />
+                          </FormControl>
+                          <FormDescription>
+                            {t('form.descriptions.userAgentPrefix')}
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name='description'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.fields.description')}</FormLabel>
+                          <FormControl>
+                            <Textarea placeholder={t('form.descriptions.description')} {...field} />
+                          </FormControl>
+                          <FormDescription>{t('form.descriptions.description')}</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </TabsContent>
+
+                  <TabsContent value='template' className='space-y-4'>
+                    <FormField
+                      control={form.control}
+                      name='output_format'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.fields.outputFormat')}</FormLabel>
+                          <FormControl>
+                            <Select value={field.value} onValueChange={field.onChange}>
+                              <SelectTrigger>
+                                <SelectValue placeholder='Select ...' />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value='base64'>{t('outputFormats.base64')}</SelectItem>
+                                <SelectItem value='yaml'>{t('outputFormats.yaml')}</SelectItem>
+                                <SelectItem value='json'>{t('outputFormats.json')}</SelectItem>
+                                <SelectItem value='conf'>{t('outputFormats.conf')}</SelectItem>
+                                <SelectItem value='plain'>{t('outputFormats.plain')}</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </FormControl>
+                          <FormDescription>{t('form.descriptions.outputFormat')}</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name='scheme'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className='flex items-center gap-2'>
+                            {t('form.fields.scheme')}
+                            <TooltipProvider>
+                              <Tooltip>
+                                <TooltipTrigger
+                                  onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                  }}
+                                >
+                                  <Icon
+                                    icon='mdi:help-circle-outline'
+                                    className='text-muted-foreground h-4 w-4'
+                                  />
+                                </TooltipTrigger>
+                                <TooltipContent
+                                  side='right'
+                                  className='bg-secondary text-secondary-foreground max-w-md'
+                                >
+                                  <div className='space-y-2 text-sm'>
+                                    <div className='font-medium'>
+                                      {t('form.descriptions.scheme.title')}
+                                    </div>
+
+                                    <div>
+                                      <div className='font-medium'>
+                                        {t('form.descriptions.scheme.variables')}
+                                      </div>
+                                      <ul className='ml-2 list-disc space-y-1 text-xs'>
+                                        <li>
+                                          <code className='rounded px-1'>{'${url}'}</code> -{' '}
+                                          {t('form.descriptions.scheme.urlVariable')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>{'${name}'}</code> -{' '}
+                                          {t('form.descriptions.scheme.nameVariable')}
+                                        </li>
+                                      </ul>
+                                    </div>
+
+                                    <div>
+                                      <div className='font-medium'>
+                                        {t('form.descriptions.scheme.functions')}
+                                      </div>
+                                      <ul className='ml-2 list-disc space-y-1 text-xs'>
+                                        <li>
+                                          <code className='rounded px-1'>
+                                            {'${encodeURIComponent(...)}'}
+                                          </code>{' '}
+                                          - {t('form.descriptions.scheme.urlEncoding')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>
+                                            {'${window.btoa(...)}'}
+                                          </code>{' '}
+                                          - {t('form.descriptions.scheme.base64Encoding')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>
+                                            {'${JSON.stringify(...)}'}
+                                          </code>{' '}
+                                          - {t('form.descriptions.scheme.jsonStringify')}
+                                        </li>
+                                      </ul>
+                                    </div>
+                                  </div>
+                                </TooltipContent>
+                              </Tooltip>
+                            </TooltipProvider>
+                          </FormLabel>
+                          <FormControl>
+                            <Input
+                              placeholder='clash://install-config?url=${url}&name=${name}'
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name='template'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className='flex items-center gap-2'>
+                            {t('form.fields.template')}
+                            <TooltipProvider>
+                              <Tooltip>
+                                <TooltipTrigger
+                                  onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                  }}
+                                >
+                                  <Icon
+                                    icon='mdi:help-circle-outline'
+                                    className='text-muted-foreground h-4 w-4'
+                                  />
+                                </TooltipTrigger>
+                                <TooltipContent
+                                  side='right'
+                                  className='bg-secondary text-secondary-foreground max-w-md'
+                                >
+                                  <div className='space-y-2 text-sm'>
+                                    <div className='font-medium'>
+                                      {t('form.descriptions.template.title')}
+                                    </div>
+
+                                    <div>
+                                      <div className='font-medium'>
+                                        {t('form.descriptions.template.variables')}
+                                      </div>
+                                      <ul className='ml-2 list-disc space-y-1 text-xs'>
+                                        <li>
+                                          <code className='rounded px-1'>.SiteName</code> -{' '}
+                                          {t('form.descriptions.template.siteName')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>.SubscribeName</code> -{' '}
+                                          {t('form.descriptions.template.subscribeName')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>.Proxies</code> -{' '}
+                                          {t('form.descriptions.template.nodes')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>.UserInfo</code> -{' '}
+                                          {t('form.descriptions.template.userInfo')}
+                                        </li>
+                                      </ul>
+                                    </div>
+
+                                    <div>
+                                      <div className='font-medium'>
+                                        {t('form.descriptions.template.functions')}
+                                      </div>
+                                      <ul className='ml-2 list-disc space-y-1 text-xs'>
+                                        <li>
+                                          <code className='rounded px-1'>
+                                            {'{{range .Proxies}}...{{end}}'}
+                                          </code>{' '}
+                                          - {t('form.descriptions.template.range')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>
+                                            {'{{if .condition}}...{{end}}'}
+                                          </code>{' '}
+                                          - {t('form.descriptions.template.if')}
+                                        </li>
+                                        <li>
+                                          <code className='rounded px-1'>{'{{sprig_func}}'}</code> -{' '}
+                                          {t('form.descriptions.template.sprig')}
+                                        </li>
+                                      </ul>
+                                    </div>
+                                  </div>
+                                </TooltipContent>
+                              </Tooltip>
+                            </TooltipProvider>
+                          </FormLabel>
+                          <FormControl>
+                            <GoTemplateEditor
+                              showLineNumbers
+                              schema={subscribeSchema}
+                              enableSprig
+                              value={field.value || ''}
+                              onChange={(value) => field.onChange(value)}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </TabsContent>
+
+                  <TabsContent value='download' className='space-y-4'>
+                    <div className='space-y-4'>
+                      <div className='grid gap-3'>
+                        {['windows', 'mac', 'linux', 'ios', 'android', 'harmony'].map((key) => (
+                          <FormField
+                            key={key}
+                            control={form.control}
+                            name={
+                              `download_link.${key}` as `download_link.${keyof ClientFormData['download_link']}`
+                            }
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>{t(`platforms.${key}`)}</FormLabel>
+                                <FormControl>
+                                  <Input {...field} />
+                                </FormControl>
+                                <FormDescription>
+                                  {t(`platforms.${key}`)} {t('form.descriptions.downloadLink')}
+                                </FormDescription>
+                              </FormItem>
+                            )}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                  </TabsContent>
+                </Tabs>
+              </form>
+            </Form>
+          </ScrollArea>
+          <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+            <Button variant='outline' onClick={() => setOpen(false)}>
+              {t('actions.cancel')}
+            </Button>
+            <Button onClick={form.handleSubmit(onSubmit)} disabled={loading}>
+              {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+              {editingClient ? t('actions.update') : t('actions.add')}
+            </Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}
--- a/Show More
+++ b/Show More