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

## [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))

CHANGELOG.md

@@ -1,39 +1,130 @@
 <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)
+## [1.4.2](https://github.com/perfect-panel/ppanel-web/compare/v1.4.1...v1.4.2) (2025-09-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))
+* Add GitHub template repository link to ProtocolForm header for easier access ([8a0baf3](https://github.com/perfect-panel/ppanel-web/commit/8a0baf3))
-* **editor**: Add Go template editor component and update related schemas ([9d9c3cd](https://github.com/perfect-panel/ppanel-web/commit/9d9c3cd))
+* Add readOnly prop to MonacoEditor and TemplatePreview components for improved content handling ([c4c4d5a](https://github.com/perfect-panel/ppanel-web/commit/c4c4d5a))
-* **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))
+## [1.4.1](https://github.com/perfect-panel/ppanel-web/compare/v1.4.0...v1.4.1) (2025-09-15)
-* **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))
+### 🐛 Bug Fixes
-* **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))
+* Add copy subscription functionality to user subscription dashboard and improve localization for new features ([e2a357f](https://github.com/perfect-panel/ppanel-web/commit/e2a357f))
-* **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))
+* Simplify handleInputBlur function by removing unnecessary setTimeout ([6341562](https://github.com/perfect-panel/ppanel-web/commit/6341562))
-* **protocol**: Add 'conf' output format option and update translations ([292efdf](https://github.com/perfect-panel/ppanel-web/commit/292efdf))
+* Update TemplatePreview to use MonacoEditor for content display and improve error handling ([1d52642](https://github.com/perfect-panel/ppanel-web/commit/1d52642))
-* **protpcp-form**: Rename 'schema' to 'scheme' for consistency across the application ([6ab2ba9](https://github.com/perfect-panel/ppanel-web/commit/6ab2ba9))
+* Update user dashboard link to correct path ([131693b](https://github.com/perfect-panel/ppanel-web/commit/131693b))
-* **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))
+<a name="readme-top"></a>
-* Update privacy policy and terms of service schemas to use correct field names ([0e6ba5b](https://github.com/perfect-panel/ppanel-web/commit/0e6ba5b))
+
+# 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>
 

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                                                     |

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                                                     |

apps/admin/app/dashboard/ads/page.tsx

@@ -2,11 +2,11 @@
 
 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 { formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';

apps/admin/app/dashboard/application/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('product.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>
-  );
-}

apps/admin/app/dashboard/application/form.tsx

@@ -1,303 +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('product.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'),
-                                  },
-                                  {
-                                    name: 'url',
-                                    type: 'text',
-                                    placeholder: t('downloadLink'),
-                                    className: 'col-span-3',
-                                  },
-                                ]}
-                                value={field.value}
-                                onChange={(value) => {
-                                  const filteredValue = value.filter((item) => item.url);
-
-                                  const newDefaultIndex = value.findIndex(
-                                    (item, idx) =>
-                                      item.is_default &&
-                                      (!field.value?.[idx] || !field.value[idx].is_default),
-                                  );
-
-                                  let finalValue = filteredValue;
-
-                                  if (newDefaultIndex >= 0 && filteredValue[newDefaultIndex]) {
-                                    finalValue = filteredValue.map((item, index) => ({
-                                      ...item,
-                                      is_default: index === newDefaultIndex,
-                                    }));
-                                  } else if (
-                                    !filteredValue.some((item) => item.is_default) &&
-                                    filteredValue.length > 0
-                                  ) {
-                                    finalValue = filteredValue.map((item, index) => ({
-                                      ...item,
-                                      is_default: index === 0,
-                                    }));
-                                  }
-
-                                  form.setValue(field.name, finalValue as any);
-                                }}
-                              />
-                            </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>
-  );
-}

apps/admin/app/dashboard/application/page.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('product.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')}
-          />,
-        ],
-      }}
-    />
-  );
-}

apps/admin/app/dashboard/auth-control/forms/apple-form.tsx

@@ -61,6 +61,7 @@ export default function AppleForm() {
 
       return data.data;
     },
+    enabled: open,
   });
 
   const form = useForm<AppleFormData>({

apps/admin/app/dashboard/auth-control/forms/device-form.tsx

@@ -34,8 +34,8 @@ import { z } from 'zod';
 
 const deviceSchema = z.object({
   id: z.number(),
-  method: z.string().default('device'),
+  method: z.string(),
-  enabled: z.boolean().default(false),
+  enabled: z.boolean(),
   config: z
     .object({
       show_ads: z.boolean().optional(),

apps/admin/app/dashboard/auth-control/forms/email-logs-table.tsx

@@ -1,48 +0,0 @@
-'use client';
-
-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';
-import { LogsTable } from '../log';
-
-export default function EmailLogsTable() {
-  const t = useTranslations('auth-control');
-  const [open, setOpen] = useState(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-newsletter' className='text-primary h-5 w-5' />
-            </div>
-            <div className='flex-1'>
-              <p className='font-medium'>{t('email.logs')}</p>
-              <p className='text-muted-foreground text-sm'>{t('email.logsDescription')}</p>
-            </div>
-          </div>
-          <Icon icon='mdi:chevron-right' className='size-6' />
-        </div>
-      </SheetTrigger>
-      <SheetContent className='w-[800px] max-w-full md:max-w-screen-lg'>
-        <SheetHeader>
-          <SheetTitle>{t('email.logs')}</SheetTitle>
-        </SheetHeader>
-        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
-          <div className='px-6 pt-4'>
-            <LogsTable type='email' />
-          </div>
-        </ScrollArea>
-      </SheetContent>
-    </Sheet>
-  );
-}

apps/admin/app/dashboard/auth-control/forms/email-settings-form.tsx

@@ -40,23 +40,23 @@ import { z } from 'zod';
 
 const emailSettingsSchema = z.object({
   id: z.number(),
-  method: z.string().default('email'),
+  method: z.string(),
-  enabled: z.boolean().default(false),
+  enabled: z.boolean(),
   config: z
     .object({
-      enable_verify: z.boolean().default(false),
+      enable_verify: z.boolean(),
-      enable_domain_suffix: z.boolean().default(false),
+      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().default('smtp'),
+      platform: z.string(),
       platform_config: z
         .object({
           host: z.string().optional(),
-          port: z.coerce.number().optional(),
+          port: z.number().optional(),
-          ssl: z.boolean().default(false),
+          ssl: z.boolean(),
           user: z.string().optional(),
           pass: z.string().optional(),
           from: z.string().optional(),

apps/admin/app/dashboard/auth-control/forms/facebook-form.tsx

@@ -52,7 +52,7 @@ export default function FacebookForm() {
       });
       return data.data;
     },
-    // 移除 enabled: open，现在默认加载数据
+    enabled: open,
   });
 
   const form = useForm<FacebookFormData>({

apps/admin/app/dashboard/auth-control/forms/github-form.tsx

@@ -53,6 +53,7 @@ export default function GithubForm() {
 
       return data.data;
     },
+    enabled: open,
   });
 
   const form = useForm<GithubFormData>({

apps/admin/app/dashboard/auth-control/forms/google-form.tsx

@@ -33,8 +33,8 @@ import { z } from 'zod';
 
 const googleSchema = z.object({
   id: z.number(),
-  method: z.string().default('google'),
+  method: z.string().default('google').optional(),
-  enabled: z.boolean().default(false),
+  enabled: z.boolean().default(false).optional(),
   config: z
     .object({
       client_id: z.string().optional(),

apps/admin/app/dashboard/auth-control/forms/phone-logs-table.tsx

@@ -1,48 +0,0 @@
-'use client';
-
-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';
-import { LogsTable } from '../log';
-
-export default function PhoneLogsTable() {
-  const t = useTranslations('auth-control');
-  const [open, setOpen] = useState(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-log' className='text-primary h-5 w-5' />
-            </div>
-            <div className='flex-1'>
-              <p className='font-medium'>{t('phone.logs')}</p>
-              <p className='text-muted-foreground text-sm'>{t('phone.logsDescription')}</p>
-            </div>
-          </div>
-          <Icon icon='mdi:chevron-right' className='size-6' />
-        </div>
-      </SheetTrigger>
-      <SheetContent className='w-[800px] max-w-full md:max-w-screen-lg'>
-        <SheetHeader>
-          <SheetTitle>{t('phone.logs')}</SheetTitle>
-        </SheetHeader>
-        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
-          <div className='px-6 pt-4'>
-            <LogsTable type='mobile' />
-          </div>
-        </ScrollArea>
-      </SheetContent>
-    </Sheet>
-  );
-}

apps/admin/app/dashboard/auth-control/forms/phone-settings-form.tsx

@@ -49,8 +49,8 @@ import { z } from 'zod';
 
 const phoneSettingsSchema = z.object({
   id: z.number(),
-  method: z.string().default('mobile'),
+  method: z.string(),
-  enabled: z.boolean().default(false),
+  enabled: z.boolean(),
   config: z
     .object({
       enable_whitelist: z.boolean().optional(),

apps/admin/app/dashboard/auth-control/forms/telegram-form.tsx

@@ -53,6 +53,7 @@ export default function TelegramForm() {
 
       return data.data;
     },
+    enabled: open,
   });
 
   const form = useForm<TelegramFormData>({

apps/admin/app/dashboard/auth-control/log/index.tsx

@@ -1,104 +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: '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,
-        };
-      }}
-    />
-  );
-}

apps/admin/app/dashboard/auth-control/page.tsx

@@ -4,28 +4,20 @@ import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/
 import { useTranslations } from 'next-intl';
 import AppleForm from './forms/apple-form';
 import DeviceForm from './forms/device-form';
-import EmailLogsTable from './forms/email-logs-table';
 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 PhoneLogsTable from './forms/phone-logs-table';
 import PhoneSettingsForm from './forms/phone-settings-form';
 import TelegramForm from './forms/telegram-form';
 
 export default function Page() {
   const t = useTranslations('auth-control');
 
-  // 定义表单配置
   const formSections = [
     {
       title: t('communicationMethods'),
-      forms: [
+      forms: [{ component: EmailSettingsForm }, { component: PhoneSettingsForm }],
-        { component: EmailSettingsForm },
-        { component: EmailLogsTable },
-        { component: PhoneSettingsForm },
-        { component: PhoneLogsTable },
-      ],
     },
     {
       title: t('socialAuthMethods'),

apps/admin/app/dashboard/coupon/coupon-form.tsx

@@ -267,7 +267,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);
                         }}

apps/admin/app/dashboard/coupon/page.tsx

@@ -10,12 +10,12 @@ import {
   updateCoupon,
 } from '@/services/admin/coupon';
 import { getSubscribeList } from '@/services/admin/subscribe';
+import { formatDate } from '@/utils/common';
 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 { 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';

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';

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 />

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 };
+      }}
+    />
+  );
+}

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 };
+      }}
+    />
+  );
+}

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 };
+      }}
+    />
+  );
+}

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 };
+      }}
+    />
+  );
+}

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 };
+      }}
+    />
+  );
+}

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 };
+      }}
+    />
+  );
+}

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 };
+      }}
+    />
+  );
+}

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 };
+      }}
+    />
+  );
+}

apps/admin/app/dashboard/log/server-traffic/page.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { ProTable } from '@/components/pro-table';
+import { filterServerTrafficLog } from '@/services/admin/log';
+import { filterServerList } from '@/services/admin/server';
+import { useQuery } from '@tanstack/react-query';
+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 today = new Date().toISOString().split('T')[0];
+
+  const { data: servers = [] } = useQuery({
+    queryKey: ['filterServerListAll'],
+    queryFn: async () => {
+      const { data } = await filterServerList({ page: 1, size: 999999999 });
+      return data?.data?.list || [];
+    },
+  });
+
+  const getServerName = (id?: number) =>
+    id ? (servers.find((s) => s.id === id)?.name ?? `Server ${id}`) : 'Unknown';
+
+  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 }) => (
+            <span>
+              {getServerName(row.original.server_id)} ({row.original.server_id})
+            </span>
+          ),
+        },
+        {
+          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 };
+      }}
+    />
+  );
+}

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 };
+      }}
+    />
+  );
+}

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 };
+      }}
+    />
+  );
+}

apps/admin/app/dashboard/log/traffic-details/page.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { UserDetail, UserSubscribeDetail } from '@/app/dashboard/user/user-detail';
+import { ProTable } from '@/components/pro-table';
+import { filterTrafficLogDetails } from '@/services/admin/log';
+import { filterServerList } from '@/services/admin/server';
+import { formatDate } from '@/utils/common';
+import { useQuery } from '@tanstack/react-query';
+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 today = new Date().toISOString().split('T')[0];
+
+  const { data: servers = [] } = useQuery({
+    queryKey: ['filterServerListAll'],
+    queryFn: async () => {
+      const { data } = await filterServerList({ page: 1, size: 999999999 });
+      return data?.data?.list || [];
+    },
+  });
+
+  const getServerName = (id?: number) =>
+    id ? (servers.find((s) => s.id === id)?.name ?? `Server ${id}`) : 'Unknown';
+
+  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 };
+      }}
+    />
+  );
+}

apps/admin/app/dashboard/marketing/email/broadcast-form.tsx

@@ -31,7 +31,7 @@ import {
 } from '@workspace/ui/components/sheet';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
 import { Textarea } from '@workspace/ui/components/textarea';
-import { MarkdownEditor } from '@workspace/ui/custom-components/editor';
+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';
@@ -47,7 +47,7 @@ export default function EmailBroadcastForm() {
   const emailBroadcastSchema = z.object({
     subject: z.string().min(1, t('subject') + ' ' + t('cannotBeEmpty')),
     content: z.string().min(1, t('content') + ' ' + t('cannotBeEmpty')),
-    scope: z.string().default('all'),
+    scope: z.number(),
     register_start_time: z.string().optional(),
     register_end_time: z.string().optional(),
     additional: z
@@ -83,7 +83,7 @@ export default function EmailBroadcastForm() {
     defaultValues: {
       subject: '',
       content: '',
-      scope: 'all',
+      scope: 1, // ScopeAll
       register_start_time: '',
       register_end_time: '',
       additional: '',
@@ -99,7 +99,7 @@ export default function EmailBroadcastForm() {
 
     try {
       // Call API to get actual recipient count
-      const scope = formData.scope || 'all';
+      const scope = formData.scope || 1; // Default to ScopeAll
 
       // Convert dates to timestamps if they exist
       let register_start_time: number = 0;
@@ -153,8 +153,10 @@ export default function EmailBroadcastForm() {
   // Listen to form changes
   const watchedValues = form.watch();
 
-  // Use useEffect to respond to form changes
+  // 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
@@ -162,6 +164,7 @@ export default function EmailBroadcastForm() {
     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,
@@ -286,7 +289,7 @@ export default function EmailBroadcastForm() {
                       <FormItem>
                         <FormLabel>{t('content')}</FormLabel>
                         <FormControl>
-                          <MarkdownEditor
+                          <HTMLEditor
                             value={field.value}
                             onChange={(value) => {
                               form.setValue(field.name, value || '');
@@ -310,20 +313,27 @@ export default function EmailBroadcastForm() {
                       render={({ field }) => (
                         <FormItem>
                           <FormLabel>{t('sendScope')}</FormLabel>
-                          <Select onValueChange={field.onChange} value={field.value || 'all'}>
+                          <Select
+                            onValueChange={(value) => field.onChange(parseInt(value))}
+                            value={field.value?.toString() || '1'}
+                          >
                             <FormControl>
                               <SelectTrigger>
                                 <SelectValue placeholder={t('selectSendScope')} />
                               </SelectTrigger>
                             </FormControl>
                             <SelectContent>
-                              <SelectItem value='all'>{t('allUsers')}</SelectItem>
+                              <SelectItem value='1'>{t('allUsers')}</SelectItem> {/* ScopeAll */}
-                              <SelectItem value='active'>{t('subscribedUsersOnly')}</SelectItem>
+                              <SelectItem value='2'>{t('subscribedUsersOnly')}</SelectItem>{' '}
-                              <SelectItem value='expired'>
+                              {/* ScopeActive */}
+                              <SelectItem value='3'>
                                 {t('expiredSubscriptionUsersOnly')}
-                              </SelectItem>
+                              </SelectItem>{' '}
-                              <SelectItem value='none'>{t('noSubscriptionUsersOnly')}</SelectItem>
+                              {/* ScopeExpired */}
-                              <SelectItem value='skip'>{t('specificUsersOnly')}</SelectItem>
+                              <SelectItem value='4'>{t('noSubscriptionUsersOnly')}</SelectItem>{' '}
+                              {/* ScopeNone */}
+                              <SelectItem value='5'>{t('specificUsersOnly')}</SelectItem>{' '}
+                              {/* ScopeSkip */}
                             </SelectContent>
                           </Select>
                           <FormDescription>{t('sendScopeDescription')}</FormDescription>
@@ -356,7 +366,7 @@ export default function EmailBroadcastForm() {
                           <FormControl>
                             <EnhancedInput
                               type='datetime-local'
-                              disabled={form.watch('scope') === 'skip'}
+                              disabled={form.watch('scope') === 5} // ScopeSkip
                               value={field.value}
                               onValueChange={field.onChange}
                             />
@@ -374,7 +384,7 @@ export default function EmailBroadcastForm() {
                           <FormControl>
                             <EnhancedInput
                               type='datetime-local'
-                              disabled={form.watch('scope') === 'skip'}
+                              disabled={form.watch('scope') === 5} // ScopeSkip
                               value={field.value}
                               onValueChange={field.onChange}
                             />

apps/admin/app/dashboard/marketing/email/task-manager.tsx

@@ -1,11 +1,8 @@
 'use client';
 
-import { ProTable } from '@/components/pro-table';
+import { ProTable, ProTableActions } from '@/components/pro-table';
-import {
+import { getBatchSendEmailTaskList, stopBatchSendEmailTask } from '@/services/admin/marketing';
-  getBatchSendEmailTaskList,
+import { formatDate } from '@/utils/common';
-  getBatchSendEmailTaskStatus,
-  stopBatchSendEmailTask,
-} from '@/services/admin/marketing';
 import { Badge } from '@workspace/ui/components/badge';
 import { Button } from '@workspace/ui/components/button';
 import {
@@ -24,46 +21,24 @@ import {
   SheetTrigger,
 } from '@workspace/ui/components/sheet';
 import { Icon } from '@workspace/ui/custom-components/icon';
-import { formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { toast } from 'sonner';
 
 export default function EmailTaskManager() {
   const t = useTranslations('marketing');
-  const [refreshing, setRefreshing] = useState<Record<number, boolean>>({});
+  const ref = useRef<ProTableActions>(null);
+
   const [selectedTask, setSelectedTask] = useState<API.BatchSendEmailTask | null>(null);
+  const [open, setOpen] = useState(false);
 
-  // Get task status
-  const refreshTaskStatus = async (taskId: number) => {
-    setRefreshing((prev) => ({ ...prev, [taskId]: true }));
-    try {
-      const response = await getBatchSendEmailTaskStatus({
-        id: taskId,
-      });
-
-      const taskStatus = response.data?.data;
-      if (taskStatus) {
-        // Just show success message, ProTable will auto-refresh
-        toast.success(t('taskStatusRefreshed'));
-      }
-    } catch (error) {
-      console.error('Failed to refresh task status:', error);
-      toast.error(t('failedToRefreshTaskStatus'));
-    } finally {
-      setRefreshing((prev) => ({ ...prev, [taskId]: false }));
-    }
-  };
-
-  // Stop task
   const stopTask = async (taskId: number) => {
     try {
       await stopBatchSendEmailTask({
         id: taskId,
       });
-
       toast.success(t('taskStoppedSuccessfully'));
-      await refreshTaskStatus(taskId);
+      ref.current?.refresh();
     } catch (error) {
       console.error('Failed to stop task:', error);
       toast.error(t('failedToStopTask'));
@@ -86,7 +61,7 @@ export default function EmailTaskManager() {
   };
 
   return (
-    <Sheet>
+    <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'>
@@ -110,11 +85,11 @@ export default function EmailTaskManager() {
         <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'),
-                  size: 200,
                   cell: ({ row }) => (
                     <div
                       className='max-w-[200px] truncate font-medium'
@@ -127,29 +102,28 @@ export default function EmailTaskManager() {
                 {
                   accessorKey: 'scope',
                   header: t('recipientType'),
-                  size: 120,
                   cell: ({ row }) => {
-                    const scope = row.getValue('scope') as string;
+                    const scope = row.original.scope;
                     const scopeLabels = {
-                      all: t('allUsers'),
+                      1: t('allUsers'), // ScopeAll
-                      active: t('subscribedUsers'),
+                      2: t('subscribedUsers'), // ScopeActive
-                      expired: t('expiredUsers'),
+                      3: t('expiredUsers'), // ScopeExpired
-                      none: t('nonSubscribers'),
+                      4: t('nonSubscribers'), // ScopeNone
-                      skip: t('specificUsers'),
+                      5: t('specificUsers'), // ScopeSkip
                     };
-                    return scopeLabels[scope as keyof typeof scopeLabels] || scope;
+                    return (
+                      scopeLabels[scope as keyof typeof scopeLabels] || `${t('scope')} ${scope}`
+                    );
                   },
                 },
                 {
                   accessorKey: 'status',
                   header: t('status'),
-                  size: 100,
                   cell: ({ row }) => getStatusBadge(row.getValue('status') as number),
                 },
                 {
                   accessorKey: 'progress',
                   header: t('progress'),
-                  size: 150,
                   cell: ({ row }) => {
                     const task = row.original as API.BatchSendEmailTask;
                     const progress = task.total > 0 ? (task.current / task.total) * 100 : 0;
@@ -171,24 +145,22 @@ export default function EmailTaskManager() {
                     );
                   },
                 },
-                {
-                  accessorKey: 'created_at',
-                  header: t('createdAt'),
-                  size: 150,
-                  cell: ({ row }) => {
-                    const createdAt = row.getValue('created_at') as number;
-                    return formatDate(createdAt);
-                  },
-                },
                 {
                   accessorKey: 'scheduled',
                   header: t('sendTime'),
-                  size: 150,
                   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({
@@ -215,11 +187,11 @@ export default function EmailTaskManager() {
                   key: 'scope',
                   placeholder: t('sendScope'),
                   options: [
-                    { label: t('allUsers'), value: 'all' },
+                    { label: t('allUsers'), value: '1' },
-                    { label: t('subscribedUsers'), value: 'active' },
+                    { label: t('subscribedUsers'), value: '2' },
-                    { label: t('expiredUsers'), value: 'expired' },
+                    { label: t('expiredUsers'), value: '3' },
-                    { label: t('nonSubscribers'), value: 'none' },
+                    { label: t('nonSubscribers'), value: '4' },
-                    { label: t('specificUsers'), value: 'skip' },
+                    { label: t('specificUsers'), value: '5' },
                   ],
                 },
               ]}
@@ -253,10 +225,7 @@ export default function EmailTaskManager() {
                                 <h4 className='text-muted-foreground mb-2 text-sm font-medium'>
                                   {t('content')}
                                 </h4>
-                                <div
+                                <div dangerouslySetInnerHTML={{ __html: selectedTask.content }} />
-                                  className='prose prose-sm max-w-none'
-                                  dangerouslySetInnerHTML={{ __html: selectedTask.content }}
-                                />
                               </div>
                               {selectedTask.additional && (
                                 <div>
@@ -271,18 +240,6 @@ export default function EmailTaskManager() {
                         </ScrollArea>
                       </DialogContent>
                     </Dialog>,
-                    <Button
-                      key='refresh'
-                      variant='outline'
-                      size='icon'
-                      onClick={() => refreshTaskStatus(row.id)}
-                      disabled={refreshing[row.id]}
-                    >
-                      {refreshing[row.id] && (
-                        <Icon icon='mdi:loading' className='mr-2 h-3 w-3 animate-spin' />
-                      )}
-                      <Icon icon='mdi:refresh' className='h-3 w-3' />
-                    </Button>,
                     ...([0, 1].includes(row.status)
                       ? [
                           <Button key='stop' variant='destructive' onClick={() => stopTask(row.id)}>

apps/admin/app/dashboard/marketing/page.tsx

@@ -4,6 +4,8 @@ import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/
 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');
@@ -13,6 +15,10 @@ export default function MarketingPage() {
       title: t('emailMarketing'),
       forms: [{ component: EmailBroadcastForm }, { component: EmailTaskManager }],
     },
+    {
+      title: t('quotaService'),
+      forms: [{ component: QuotaBroadcastForm }, { component: QuotaTaskManager }],
+    },
   ];
 
   return (

apps/admin/app/dashboard/marketing/quota/broadcast-form.tsx

@@ -0,0 +1,457 @@
+'use client';
+
+import { Display } from '@/components/display';
+import { createQuotaTask, queryQuotaTaskPreCount } from '@/services/admin/marketing';
+import { getSubscribeList } from '@/services/admin/subscribe';
+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 { 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);
+
+  // Get subscribe list
+  const { data: subscribeList } = useQuery({
+    queryKey: ['getSubscribeList', 'all'],
+    queryFn: async () => {
+      const { data } = await getSubscribeList({
+        page: 1,
+        size: 999999999,
+      });
+      return data.data?.list as API.SubscribeItem[];
+    },
+  });
+
+  // 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={
+                          subscribeList?.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'
+                          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'
+                          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>
+  );
+}

apps/admin/app/dashboard/marketing/quota/task-manager.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import { Display } from '@/components/display';
+import { ProTable } from '@/components/pro-table';
+import { queryQuotaTaskList } from '@/services/admin/marketing';
+import { getSubscribeList } from '@/services/admin/subscribe';
+import { formatDate } from '@/utils/common';
+import { useQuery } from '@tanstack/react-query';
+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);
+
+  // Get subscribe list to show subscription names
+  const { data: subscribeList } = useQuery({
+    queryKey: ['getSubscribeList', 'all'],
+    queryFn: async () => {
+      const { data } = await getSubscribeList({
+        page: 1,
+        size: 999999999,
+      });
+      return data.data?.list as API.SubscribeItem[];
+    },
+  });
+
+  // Create a map for quick lookup of subscription names
+  const subscribeMap =
+    subscribeList?.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>
+  );
+}

apps/admin/app/dashboard/nodes/node-form.tsx

@@ -0,0 +1,342 @@
+'use client';
+
+import { filterServerList, queryNodeTag } from '@/services/admin/server';
+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 { 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'
+  | 'hysteria2'
+  | 'tuic'
+  | 'anytls';
+
+type ServerRow = API.Server;
+
+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 form = useForm<NodeFormValues>({
+    resolver: zodResolver(Scheme),
+    defaultValues: {
+      name: '',
+      server_id: undefined,
+      protocol: '',
+      address: '',
+      port: 0,
+      tags: [],
+      ...initialValues,
+    },
+  });
+
+  const serverId = form.watch('server_id');
+
+  const { data } = useQuery({
+    enabled: open,
+    queryKey: ['filterServerListAll'],
+    queryFn: async () => {
+      const { data } = await filterServerList({ page: 1, size: 999999999 });
+      return data?.data?.list || [];
+    },
+  });
+  const servers: ServerRow[] = data as ServerRow[];
+
+  const { data: tagsData } = useQuery({
+    enabled: open,
+    queryKey: ['queryNodeTag'],
+    queryFn: async () => {
+      const { data } = await queryNodeTag();
+      return data?.data?.tags || [];
+    },
+  });
+  const existingTags: string[] = tagsData as string[];
+
+  const currentServer = useMemo(() => servers?.find((s) => s.id === serverId), [servers, serverId]);
+
+  const availableProtocols = useMemo(() => {
+    return (currentServer?.protocols || [])
+      .map((p) => ({
+        protocol: (p as any).type as ProtocolName,
+        port: (p as any).port as number | undefined,
+      }))
+      .filter((p) => !!p.protocol);
+  }, [currentServer]);
+
+  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);
+
+    const sel = servers.find((s) => s.id === id);
+    const dirty = form.formState.dirtyFields as Record<string, any>;
+    const currentValues = form.getValues();
+
+    if (!dirty.name) {
+      form.setValue('name', (sel?.name as string) || '', { shouldDirty: false });
+    }
+
+    if (
+      !dirty.address &&
+      (!currentValues.address || currentValues.address === (sel?.address as string))
+    ) {
+      form.setValue('address', (sel?.address as string) || '', { shouldDirty: false });
+    }
+
+    const allowed = (sel?.protocols || [])
+      .map((p) => (p as any).type as ProtocolName)
+      .filter(Boolean);
+
+    const currentProtocol = form.getValues('protocol') as ProtocolName;
+
+    if (!allowed.includes(currentProtocol)) {
+      const firstProtocol = allowed[0] || '';
+      form.setValue('protocol', firstProtocol as any);
+
+      if (firstProtocol) {
+        handleProtocolChange(firstProtocol);
+      }
+    }
+  }
+
+  function handleProtocolChange(nextProto?: ProtocolName | null) {
+    const p = (nextProto || '') as ProtocolName | '';
+    form.setValue('protocol', p);
+    if (!p || !currentServer) return;
+
+    const dirty = form.formState.dirtyFields as Record<string, any>;
+    const currentValues = form.getValues();
+
+    if (!dirty.port) {
+      const hit = (currentServer.protocols as any[]).find((x) => (x as any).type === p);
+      const port = (hit as any)?.port as number | undefined;
+      const newPort = typeof port === 'number' && port > 0 ? port : 0;
+
+      if (!currentValues.port || currentValues.port === 0 || currentValues.port === newPort) {
+        form.setValue('port', newPort, { shouldDirty: false });
+      }
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button onClick={() => form.reset()}>{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) => form.setValue(field.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) => form.setValue(field.name, 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) => form.setValue(field.name, 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(onSubmit, (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>
+  );
+}

apps/admin/app/dashboard/nodes/page.tsx

@@ -0,0 +1,270 @@
+'use client';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  createNode,
+  deleteNode,
+  filterNodeList,
+  filterServerList,
+  resetSortWithNode,
+  toggleNodeStatus,
+  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 { 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);
+
+  const { data: servers = [] } = useQuery({
+    queryKey: ['filterServerListAll'],
+    queryFn: async () => {
+      const { data } = await filterServerList({ page: 1, size: 999999999 });
+      return data?.data?.list || [];
+    },
+  });
+
+  const getServerName = (id?: number) =>
+    id ? (servers.find((s) => s.id === id)?.name ?? `#${id}`) : '—';
+  const getServerOriginAddr = (id?: number) =>
+    id ? (servers.find((s) => s.id === id)?.address ?? '—') : '—';
+  const getProtocolOriginPort = (id?: number, proto?: string) => {
+    if (!id || !proto) return '—';
+    const hit = servers.find((s) => s.id === id)?.protocols?.find((p) => (p as any).type === proto);
+    const p = (hit as any)?.port as number | undefined;
+    return typeof p === 'number' ? String(p) : '—';
+  };
+
+  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();
+                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();
+              }}
+            />
+          ),
+        },
+        { 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 }) => (
+            <div className='flex flex-wrap gap-2'>
+              <Badge variant='outline'>
+                {getServerName(row.original.server_id)} ·{' '}
+                {getServerOriginAddr(row.original.server_id)}
+              </Badge>
+              <Badge variant='outline'>
+                {row.original.protocol || '—'} ·{' '}
+                {getProtocolOriginPort(row.original.server_id, row.original.protocol)}
+              </Badge>
+            </div>
+          ),
+        },
+        {
+          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={{
+              name: row.name,
+              server_id: row.server_id,
+              protocol: row.protocol as any,
+              address: row.address as any,
+              port: row.port as any,
+              tags: (row.tags as any) || [],
+            }}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                const body: API.UpdateNodeRequest = {
+                  id: row.id,
+                  name: values.name,
+                  server_id: Number(values.server_id!),
+                  protocol: values.protocol,
+                  address: values.address,
+                  port: Number(values.port!),
+                  tags: values.tags || [],
+                  enabled: row.enabled,
+                } as any;
+                await updateNode(body);
+                toast.success(t('updated'));
+                ref.current?.refresh();
+                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();
+            }}
+            cancelText={t('cancel')}
+            confirmText={t('confirm')}
+          />,
+          <Button
+            key='copy'
+            variant='outline'
+            onClick={async () => {
+              const { id, enabled, created_at, updated_at, ...rest } = row as any;
+              await createNode({
+                name: rest.name,
+                server_id: rest.server_id,
+                protocol: rest.protocol,
+                address: rest.address,
+                port: rest.port,
+                tags: rest.tags || [],
+                enabled: false,
+              } as any);
+              toast.success(t('copied'));
+              ref.current?.refresh();
+            }}
+          >
+            {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();
+              }}
+              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[],
+          });
+        }
+        return updatedItems;
+      }}
+    />
+  );
+}

apps/admin/app/dashboard/order/page.tsx

@@ -2,23 +2,25 @@
 
 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 { 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' },
@@ -35,15 +37,23 @@ export default function Page(props: any) {
     queryFn: async () => {
       const { data } = await getSubscribeList({
         page: 1,
-        size: 9999,
+        size: 999999999,
       });
       return data.data?.list as API.SubscribeGroup[];
     },
   });
 
+  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',
@@ -146,7 +156,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({
@@ -182,19 +192,14 @@ export default function Page(props: any) {
           })),
         },
         { key: 'search' },
-      ].concat(
-        props.userId
-          ? []
-          : [
         {
           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,

apps/admin/app/dashboard/payment/payment-form.tsx

@@ -75,9 +75,9 @@ export default function PaymentForm<T>({
     icon: z.string().optional(),
     domain: z.string().optional(),
     config: z.any(),
-    fee_mode: z.coerce.number().min(0).max(2),
+    fee_mode: z.number().min(0).max(2),
-    fee_percent: z.coerce.number().optional(),
+    fee_percent: z.number().optional(),
-    fee_amount: z.coerce.number().optional(),
+    fee_amount: z.number().optional(),
     description: z.string().optional(),
   });
 
@@ -155,7 +155,6 @@ export default function PaymentForm<T>({
         <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
@@ -319,7 +318,7 @@ export default function PaymentForm<T>({
                           }}
                           defaultValue={field.value}
                           value={field.value}
-                          // @ts-expect-error
+                          // @ts-expect-error - disabled prop type mismatch with SelectTrigger component
                           disabled={isEdit && Boolean(initialValues?.platform)}
                         >
                           <FormControl>

apps/admin/app/dashboard/payment/payment-table.tsx

@@ -93,7 +93,7 @@ export default function PaymentTable() {
         {
           accessorKey: 'platform',
           header: t('platform'),
-          cell: ({ row }) => <Badge>{t(row.getValue('platform'))}</Badge>,
+          cell: ({ row }) => <Badge>{t(row.original.platform)}</Badge>,
         },
         {
           accessorKey: 'notify_url',

apps/admin/app/dashboard/product/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('product');
-
-  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>
-  );
-}

apps/admin/app/dashboard/product/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('product');
-  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;

apps/admin/app/dashboard/product/page.tsx

@@ -1,25 +1,9 @@
 import { getTranslations } from 'next-intl/server';
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
-
-import GroupTable from './group/table';
 import SubscribeTable from './subscribe-table';
 
 export default async function Page() {
   const t = await getTranslations('product');
 
-  return (
+  return <SubscribeTable />;
-    <Tabs defaultValue='subscribe'>
-      <TabsList>
-        <TabsTrigger value='subscribe'>{t('tabs.subscribe')}</TabsTrigger>
-        <TabsTrigger value='group'>{t('tabs.subscribeGroup')}</TabsTrigger>
-      </TabsList>
-      <TabsContent value='subscribe'>
-        <SubscribeTable />
-      </TabsContent>
-      <TabsContent value='group'>
-        <GroupTable />
-      </TabsContent>
-    </Tabs>
-  );
 }

apps/admin/app/dashboard/product/subscribe-form.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { getNodeGroupList, getNodeList } from '@/services/admin/server';
+import { filterNodeList, queryNodeTag } from '@/services/admin/server';
-import { getSubscribeGroupList } from '@/services/admin/subscribe';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQuery } from '@tanstack/react-query';
 import {
@@ -62,8 +61,9 @@ const defaultValues = {
   traffic: 0,
   quota: 0,
   discount: [],
-  server_group: [],
+  language: '',
-  server: [],
+  node_tags: [],
+  nodes: [],
   unit_time: 'Month',
   deduction_ratio: 0,
   purchase_with_discount: false,
@@ -87,7 +87,7 @@ export default function SubscribeForm<T extends Record<string, any>>({
     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(
@@ -97,21 +97,21 @@ export default function SubscribeForm<T extends Record<string, any>>({
         }),
       )
       .optional(),
-    inventory: z.number().optional().default(-1),
+    inventory: z.number().optional(),
-    speed_limit: z.number().optional().default(0),
+    speed_limit: z.number().optional(),
-    device_limit: z.number().optional().default(0),
+    device_limit: z.number().optional(),
-    traffic: z.number().optional().default(0),
+    traffic: z.number().optional(),
-    quota: z.number().optional().default(0),
+    quota: z.number().optional(),
-    group_id: z.number().optional().nullish(),
+    language: z.string().optional(),
-    server_group: z.array(z.number()).optional().default([]),
+    node_tags: z.array(z.string()).optional(),
-    server: z.array(z.number()).optional().default([]),
+    nodes: z.array(z.number()).optional(),
-    deduction_ratio: z.number().optional().default(0),
+    deduction_ratio: z.number().optional(),
-    allow_deduction: z.boolean().optional().default(false),
+    allow_deduction: z.boolean().optional(),
-    reset_cycle: z.number().optional().default(0),
+    reset_cycle: z.number().optional(),
-    renewal_reset: z.boolean().optional().default(false),
+    renewal_reset: z.boolean().optional(),
   });
 
-  const form = useForm({
+  const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: assign(
       defaultValues,
@@ -203,7 +203,7 @@ export default function SubscribeForm<T extends Record<string, any>>({
         });
 
         if (hasChanges) {
-          form.setValue(fieldName, calculatedValues, { shouldDirty: true });
+          form.setValue(fieldName as any, calculatedValues, { shouldDirty: true });
         }
       }, 300);
     },
@@ -229,35 +229,37 @@ export default function SubscribeForm<T extends Record<string, any>>({
     if (bool) setOpen(false);
   }
 
-  const { data: group } = useQuery({
+  const { data: nodes } = useQuery({
-    queryKey: ['getSubscribeGroupList'],
+    queryKey: ['filterNodeListAll'],
     queryFn: async () => {
-      const { data } = await getSubscribeGroupList();
+      const { data } = await filterNodeList({ page: 1, size: 999999999 });
-      return data.data?.list as API.SubscribeGroup[];
+      return (data.data?.list || []) as API.Node[];
     },
   });
 
-  const { data: server } = useQuery({
+  const { data: allTagsData } = useQuery({
-    queryKey: ['getNodeList', 'all'],
+    queryKey: ['queryNodeTag'],
     queryFn: async () => {
-      const { data } = await getNodeList({
+      const { data } = await queryNodeTag();
-        page: 1,
+      return data?.data?.tags || [];
-        size: 9999,
-      });
-      return data.data?.list;
     },
   });
 
-  const { data: server_groups } = useQuery({
+  const nodeExtractedTags = Array.from(
-    queryKey: ['getNodeGroupList'],
+    new Set(
-    queryFn: async () => {
+      ((nodes as API.Node[]) || [])
-      const { data } = await getNodeGroupList();
+        .flatMap((n) => (Array.isArray(n.tags) ? n.tags : []))
-      return (data.data?.list || []) as API.ServerGroup[];
+        .filter(Boolean),
-    },
+    ),
-  });
+  ) as string[];
+
+  const allAvailableTags = (allTagsData as string[]) || [];
+
+  const tagGroups = Array.from(new Set([...allAvailableTags, ...nodeExtractedTags])).filter(
+    Boolean,
+  );
 
   const unit_time = form.watch('unit_time');
-  const unit_price = form.watch('unit_price');
 
   return (
     <Sheet open={open} onOpenChange={setOpen}>
@@ -275,7 +277,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'>
@@ -290,7 +292,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>
 
@@ -317,21 +319,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>
+                              <EnhancedInput
-                                placeholder={t('form.selectSubscribeGroup')}
                                 {...field}
-                                onChange={(value) => {
+                                placeholder={t('form.languagePlaceholder')}
-                                  form.setValue(field.name, value || 0);
+                                onValueChange={(v) => form.setValue(field.name, v as string)}
-                                }}
-                                options={group?.map((item) => ({
-                                  label: item.name,
-                                  value: item.id,
-                                }))}
                               />
                             </FormControl>
                             <FormMessage />
@@ -669,7 +670,8 @@ export default function SubscribeForm<T extends Record<string, any>>({
                                   min: 0,
                                   step: 0.01,
                                   formatInput: (value) => unitConversion('centsToDollars', value),
-                                  formatOutput: (value) => unitConversion('dollarsToCents', value),
+                                  formatOutput: (value) =>
+                                    unitConversion('dollarsToCents', value).toString(),
                                 },
                               ]}
                               value={field.value}
@@ -795,53 +797,61 @@ 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 =
+                                  (nodes as API.Node[])?.filter((n) =>
+                                    (n.tags || []).includes(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.filter((v: any) => v !== tagId),
-                                                    (value: number) => value !== group.id,
-                                                  ),
                                                 );
                                           }}
                                         />
-                                        <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'>
+                                      <ul className='space-y-1'>
-                                        {server
+                                        {(nodes as API.Node[])
-                                          ?.filter(
+                                          ?.filter((n) => (n.tags || []).includes(tag))
-                                            (server: API.Server) => server.group_id === group.id,
+                                          ?.map((node) => (
-                                          )
-                                          ?.map((node: API.Server) => {
-                                            return (
                                             <li
                                               key={node.id}
-                                                className='flex items-center justify-between *:flex-1'
+                                              className='flex items-center justify-between gap-3'
                                             >
-                                                <span>{node.name}</span>
+                                              <span className='flex-1'>{node.name}</span>
-                                                <span>{node.server_addr}</span>
+                                              <span className='flex-1'>
-                                                <span className='text-right'>{node.protocol}</span>
+                                                {node.address}:{node.port}
+                                              </span>
+                                              <span className='flex-1 text-right'>
+                                                {node.protocol}
+                                              </span>
                                             </li>
-                                            );
+                                          ))}
-                                          })}
                                       </ul>
                                     </AccordionContent>
                                   </AccordionItem>
@@ -856,15 +866,15 @@ 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
+                              {(nodes as API.Node[])
-                                ?.filter((item: API.Server) => !item.group_id)
+                                ?.filter((item) => (item.tags || []).length === 0)
-                                ?.map((item: API.Server) => {
+                                ?.map((item) => {
                                   const value = field.value || [];
 
                                   return (
@@ -880,10 +890,12 @@ export default function SubscribeForm<T extends Record<string, any>>({
                                               );
                                         }}
                                       />
-                                      <Label className='flex w-full items-center justify-between *:flex-1'>
+                                      <Label className='flex w-full items-center justify-between gap-3'>
-                                        <span>{item.name}</span>
+                                        <span className='flex-1'>{item.name}</span>
-                                        <span>{item.server_addr}</span>
+                                        <span className='flex-1'>
-                                        <span className='text-right'>{item.protocol}</span>
+                                          {item.address}:{item.port}
+                                        </span>
+                                        <span className='flex-1 text-right'>{item.protocol}</span>
                                       </Label>
                                     </div>
                                   );
@@ -916,7 +928,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;
               }
             })}

apps/admin/app/dashboard/product/subscribe-table.tsx

@@ -6,12 +6,10 @@ import {
   batchDeleteSubscribe,
   createSubscribe,
   deleteSubscribe,
-  getSubscribeGroupList,
   getSubscribeList,
   subscribeSort,
   updateSubscribe,
 } from '@/services/admin/subscribe';
-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';
@@ -24,16 +22,6 @@ import SubscribeForm from './subscribe-form';
 export default function SubscribeTable() {
   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);
   return (
     <ProTable<API.SubscribeItem, { group_id: number; query: string }>
@@ -67,14 +55,6 @@ export default function SubscribeTable() {
         ),
       }}
       params={[
-        {
-          key: 'group_id',
-          placeholder: t('subscribeGroup'),
-          options: groups?.map((item) => ({
-            label: item.name,
-            value: String(item.id),
-          })),
-        },
         {
           key: 'search',
         },
@@ -176,11 +156,11 @@ export default function SubscribeTable() {
           cell: ({ row }) => <Display type='number' value={row.getValue('quota')} unlimited />,
         },
         {
-          accessorKey: 'group_id',
+          accessorKey: 'language',
-          header: t('subscribeGroup'),
+          header: t('language'),
           cell: ({ row }) => {
-            const name = groups?.find((group) => group.id === row.getValue('group_id'))?.name;
+            const language = row.getValue('language') as string;
-            return name ? <Badge variant='outline'>{name}</Badge> : '--';
+            return language ? <Badge variant='outline'>{language}</Badge> : '--';
           },
         },
         {

apps/admin/app/dashboard/server/form-schema.ts

@@ -1,126 +0,0 @@
-import { z } from 'zod';
-
-export const protocols = ['shadowsocks', 'vmess', 'vless', 'trojan', 'hysteria2', 'tuic', 'anytls'];
-
-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,
-  disable_sni: z.boolean().default(false),
-  reduce_rtt: z.boolean().default(false),
-  udp_relay_mode: z.string().default('native'),
-  congestion_controller: z.string().default('bbr'),
-  security_config: securityConfigSchema,
-});
-
-const anytlsSchema = z.object({
-  port: portSchema,
-  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,
-  }),
-  z.object({
-    protocol: z.literal('anytls'),
-    config: anytlsSchema,
-  }),
-]);
-
-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);

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('groupForm.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('groupForm.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('groupForm.cancel')}
-          </Button>
-          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
-            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
-            {t('groupForm.confirm')}
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-}

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')}
-            />,
-          ];
-        },
-      }}
-    />
-  );
-}

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>
-    </>
-  );
-}

apps/admin/app/dashboard/server/node-detail.tsx

@@ -1,251 +0,0 @@
-'use client';
-
-import { UserDetail } from '@/app/dashboard/user/user-detail';
-import { ProTable } from '@/components/pro-table';
-import { getUserSubscribeById } from '@/services/admin/user';
-import { useQuery } from '@tanstack/react-query';
-import { Badge } from '@workspace/ui/components/badge';
-import { Button } from '@workspace/ui/components/button';
-import { Progress } from '@workspace/ui/components/progress';
-
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@workspace/ui/components/sheet';
-import { formatBytes, formatDate } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-
-interface NodeDetailDialogProps {
-  node: API.Server;
-  children?: React.ReactNode;
-  trigger?: React.ReactNode;
-}
-
-// 统一的用户订阅信息组件
-function UserSubscribeInfo({
-  userId,
-  type,
-}: {
-  userId: number;
-  type: 'account' | 'subscribeName' | 'subscribeId' | 'trafficUsage' | 'expireTime';
-}) {
-  const { data } = useQuery({
-    enabled: userId !== 0,
-    queryKey: ['getUserSubscribeById', userId],
-    queryFn: async () => {
-      const { data } = await getUserSubscribeById({ id: userId });
-      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'>
-              过期
-            </Badge>
-          )}
-        </div>
-      );
-    }
-
-    default:
-      return <span className='text-muted-foreground'>--</span>;
-  }
-}
-
-export function NodeDetailDialog({ node, children, trigger }: NodeDetailDialogProps) {
-  const t = useTranslations('server.node');
-  const [open, setOpen] = useState(false);
-
-  const { status } = node;
-  const { online, cpu, mem, disk, updated_at } = status || {
-    online: {},
-    cpu: 0,
-    mem: 0,
-    disk: 0,
-    updated_at: 0,
-  };
-
-  const isOnline = updated_at > 0;
-  const onlineCount = (online && Object.keys(online).length) || 0;
-
-  // 转换在线用户数据为ProTable需要的格式
-  const onlineUsersData = Object.entries(online || {}).map(([uid, ips]) => ({
-    uid,
-    ips: ips as string[],
-    primaryIp: ips[0] || '',
-    allIps: (ips as string[]).join(', '),
-  }));
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
-        {trigger || (
-          <Button variant='outline' size='sm'>
-            {t('detail')}
-          </Button>
-        )}
-      </SheetTrigger>
-      <SheetContent className='w-full max-w-full sm:w-[600px] sm:max-w-screen-md'>
-        <SheetHeader>
-          <SheetTitle>
-            {t('nodeDetail')} - {node.name}
-          </SheetTitle>
-        </SheetHeader>
-        <div className='-mx-6 h-[calc(100dvh-48px-16px-env(safe-area-inset-top))] space-y-2 overflow-y-auto px-6 py-4'>
-          <h3 className='text-base font-medium'>{t('nodeStatus')}</h3>
-          <div className='space-y-3'>
-            <div className='flex w-full flex-col gap-2 text-sm sm:flex-row sm:items-center sm:gap-3'>
-              <Badge variant={isOnline ? 'default' : 'destructive'} className='w-fit text-xs'>
-                {isOnline ? t('normal') : t('abnormal')}
-              </Badge>
-              <span className='text-muted-foreground'>
-                {t('onlineCount')}: {onlineCount}
-              </span>
-              {isOnline && (
-                <span className='text-muted-foreground text-xs sm:text-sm'>
-                  {t('lastUpdated')}: {formatDate(updated_at)}
-                </span>
-              )}
-            </div>
-
-            {isOnline && (
-              <div className='grid grid-cols-1 gap-3 sm:grid-cols-3'>
-                <div className='space-y-1'>
-                  <div className='flex justify-between text-xs'>
-                    <span>CPU</span>
-                    <span>{cpu?.toFixed(1)}%</span>
-                  </div>
-                  <Progress value={cpu ?? 0} className='h-1.5' max={100} />
-                </div>
-                <div className='space-y-1'>
-                  <div className='flex justify-between text-xs'>
-                    <span>{t('memory')}</span>
-                    <span>{mem?.toFixed(1)}%</span>
-                  </div>
-                  <Progress value={mem ?? 0} className='h-1.5' max={100} />
-                </div>
-                <div className='space-y-1'>
-                  <div className='flex justify-between text-xs'>
-                    <span>{t('disk')}</span>
-                    <span>{disk?.toFixed(1)}%</span>
-                  </div>
-                  <Progress value={disk ?? 0} className='h-1.5' max={100} />
-                </div>
-              </div>
-            )}
-          </div>
-          {isOnline && onlineCount > 0 && (
-            <div>
-              <h3 className='mb-3 text-lg font-medium'>{t('onlineUsers')}</h3>
-              <div className='overflow-x-auto'>
-                <ProTable
-                  header={{
-                    hidden: true,
-                  }}
-                  columns={[
-                    {
-                      accessorKey: 'allIps',
-                      header: t('ipAddresses'),
-                      cell: ({ row }) => {
-                        const ips = row.original.ips;
-                        return (
-                          <div className='flex min-w-0 flex-col gap-1'>
-                            {ips.map((ip: string, index: number) => (
-                              <div key={ip} className='whitespace-nowrap text-sm'>
-                                {index === 0 ? (
-                                  <span className='font-medium'>{ip}</span>
-                                ) : (
-                                  <span className='text-muted-foreground'>{ip}</span>
-                                )}
-                              </div>
-                            ))}
-                          </div>
-                        );
-                      },
-                    },
-                    {
-                      accessorKey: 'user',
-                      header: t('user'),
-                      cell: ({ row }) => (
-                        <UserSubscribeInfo userId={Number(row.original.uid)} type='account' />
-                      ),
-                    },
-                    {
-                      accessorKey: 'subscribeName',
-                      header: t('subscribeName'),
-                      cell: ({ row }) => (
-                        <UserSubscribeInfo userId={Number(row.original.uid)} type='subscribeName' />
-                      ),
-                    },
-                    {
-                      accessorKey: 'subscribeId',
-                      header: t('subscribeId'),
-                      cell: ({ row }) => (
-                        <UserSubscribeInfo userId={Number(row.original.uid)} type='subscribeId' />
-                      ),
-                    },
-                    {
-                      accessorKey: 'trafficUsage',
-                      header: t('trafficUsage'),
-                      cell: ({ row }) => (
-                        <UserSubscribeInfo userId={Number(row.original.uid)} type='trafficUsage' />
-                      ),
-                    },
-                    {
-                      accessorKey: 'expireTime',
-                      header: t('expireTime'),
-                      cell: ({ row }) => (
-                        <UserSubscribeInfo userId={Number(row.original.uid)} type='expireTime' />
-                      ),
-                    },
-                  ]}
-                  request={async () => ({
-                    list: onlineUsersData,
-                    total: onlineUsersData.length,
-                  })}
-                />
-              </div>
-            </div>
-          )}
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-}

apps/admin/app/dashboard/server/node-status.tsx

@@ -1,266 +0,0 @@
-'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 { useQuery } from '@tanstack/react-query';
-import { Badge } from '@workspace/ui/components/badge';
-import { Progress } from '@workspace/ui/components/progress';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@workspace/ui/components/sheet';
-import { formatBytes, formatDate } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-
-export function formatPercentage(value: number): string {
-  return `${value.toFixed(1)}%`;
-}
-
-// 统一的用户订阅信息组件
-function UserSubscribeInfo({
-  userId,
-  type,
-}: {
-  userId: number;
-  type: 'account' | 'subscribeName' | 'subscribeId' | 'trafficUsage' | 'expireTime';
-}) {
-  const { data } = useQuery({
-    enabled: userId !== 0,
-    queryKey: ['getUserSubscribeById', userId],
-    queryFn: async () => {
-      const { data } = await getUserSubscribeById({ id: userId });
-      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'>
-              过期
-            </Badge>
-          )}
-        </div>
-      );
-    }
-
-    default:
-      return <span className='text-muted-foreground'>--</span>;
-  }
-}
-
-export function NodeStatusCell({ status, node }: { status: API.NodeStatus; node?: API.Server }) {
-  const t = useTranslations('server.node');
-  const [open, setOpen] = useState(false);
-
-  const { online, cpu, mem, disk, updated_at } = status || {
-    online: {},
-    cpu: 0,
-    mem: 0,
-    disk: 0,
-    updated_at: 0,
-  };
-
-  const isOnline = updated_at > 0;
-  const badgeVariant = isOnline ? 'default' : 'destructive';
-  const badgeText = isOnline ? t('normal') : t('abnormal');
-  const onlineCount = (online && Object.keys(online).length) || 0;
-
-  // 转换在线用户数据为ProTable需要的格式
-  const onlineUsersData = Object.entries(online || {}).map(([uid, ips]) => ({
-    uid,
-    ips: ips as string[],
-    primaryIp: ips[0] || '',
-    allIps: (ips as string[]).join(', '),
-  }));
-
-  return (
-    <>
-      <Sheet open={open} onOpenChange={setOpen}>
-        <SheetTrigger asChild>
-          <button className='hover:text-foreground flex cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left text-sm transition-colors'>
-            <Badge variant={badgeVariant}>{badgeText}</Badge>
-            <span className='text-muted-foreground'>
-              {t('onlineCount')}: {onlineCount}
-            </span>
-          </button>
-        </SheetTrigger>
-        {node && (
-          <SheetContent className='h-screen w-screen max-w-none sm:h-auto sm:w-[800px] sm:max-w-[90vw]'>
-            <SheetHeader>
-              <SheetTitle>
-                {t('nodeDetail')} - {node.name}
-              </SheetTitle>
-            </SheetHeader>
-            <div className='-mx-6 h-[calc(100vh-48px-16px)] space-y-2 overflow-y-auto px-6 py-4 sm:h-[calc(100dvh-48px-16px-env(safe-area-inset-top))]'>
-              <h3 className='text-base font-medium'>{t('nodeStatus')}</h3>
-              <div className='space-y-3'>
-                <div className='flex w-full flex-col gap-2 text-sm sm:flex-row sm:items-center sm:gap-3'>
-                  <Badge variant={isOnline ? 'default' : 'destructive'} className='w-fit text-xs'>
-                    {isOnline ? t('normal') : t('abnormal')}
-                  </Badge>
-                  <span className='text-muted-foreground'>
-                    {t('onlineCount')}: {onlineCount}
-                  </span>
-                  {isOnline && (
-                    <span className='text-muted-foreground text-xs sm:text-sm'>
-                      {t('lastUpdated')}: {formatDate(updated_at)}
-                    </span>
-                  )}
-                </div>
-
-                {isOnline && (
-                  <div className='grid grid-cols-1 gap-3 sm:grid-cols-3'>
-                    <div className='space-y-1'>
-                      <div className='flex justify-between text-xs'>
-                        <span>CPU</span>
-                        <span>{cpu?.toFixed(1)}%</span>
-                      </div>
-                      <Progress value={cpu ?? 0} className='h-1.5' max={100} />
-                    </div>
-                    <div className='space-y-1'>
-                      <div className='flex justify-between text-xs'>
-                        <span>{t('memory')}</span>
-                        <span>{mem?.toFixed(1)}%</span>
-                      </div>
-                      <Progress value={mem ?? 0} className='h-1.5' max={100} />
-                    </div>
-                    <div className='space-y-1'>
-                      <div className='flex justify-between text-xs'>
-                        <span>{t('disk')}</span>
-                        <span>{disk?.toFixed(1)}%</span>
-                      </div>
-                      <Progress value={disk ?? 0} className='h-1.5' max={100} />
-                    </div>
-                  </div>
-                )}
-              </div>
-              {isOnline && onlineCount > 0 && (
-                <div>
-                  <h3 className='mb-3 text-lg font-medium'>{t('onlineUsers')}</h3>
-                  <div className='overflow-x-auto'>
-                    <ProTable
-                      header={{
-                        hidden: true,
-                      }}
-                      columns={[
-                        {
-                          accessorKey: 'allIps',
-                          header: t('ipAddresses'),
-                          cell: ({ row }) => {
-                            const ips = row.original.ips;
-                            return (
-                              <div className='flex min-w-0 flex-col gap-1'>
-                                {ips.map((ip: string, index: number) => (
-                                  <div key={ip} className='whitespace-nowrap text-sm'>
-                                    {index === 0 ? (
-                                      <IpLink ip={ip} className='font-medium' />
-                                    ) : (
-                                      <IpLink ip={ip} className='text-muted-foreground' />
-                                    )}
-                                  </div>
-                                ))}
-                              </div>
-                            );
-                          },
-                        },
-                        {
-                          accessorKey: 'user',
-                          header: t('user'),
-                          cell: ({ row }) => (
-                            <UserSubscribeInfo userId={Number(row.original.uid)} type='account' />
-                          ),
-                        },
-                        {
-                          accessorKey: 'subscribeName',
-                          header: t('subscribeName'),
-                          cell: ({ row }) => (
-                            <UserSubscribeInfo
-                              userId={Number(row.original.uid)}
-                              type='subscribeName'
-                            />
-                          ),
-                        },
-                        {
-                          accessorKey: 'subscribeId',
-                          header: t('subscribeId'),
-                          cell: ({ row }) => (
-                            <UserSubscribeInfo
-                              userId={Number(row.original.uid)}
-                              type='subscribeId'
-                            />
-                          ),
-                        },
-                        {
-                          accessorKey: 'trafficUsage',
-                          header: t('trafficUsage'),
-                          cell: ({ row }) => (
-                            <UserSubscribeInfo
-                              userId={Number(row.original.uid)}
-                              type='trafficUsage'
-                            />
-                          ),
-                        },
-                        {
-                          accessorKey: 'expireTime',
-                          header: t('expireTime'),
-                          cell: ({ row }) => (
-                            <UserSubscribeInfo
-                              userId={Number(row.original.uid)}
-                              type='expireTime'
-                            />
-                          ),
-                        },
-                      ]}
-                      request={async () => ({
-                        list: onlineUsersData,
-                        total: onlineUsersData.length,
-                      })}
-                    />
-                  </div>
-                </div>
-              )}
-            </div>
-          </SheetContent>
-        )}
-      </Sheet>
-    </>
-  );
-}

apps/admin/app/dashboard/server/node-table.tsx

@@ -1,320 +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: t('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',
-                      'bg-gray-500': row.original.protocol === 'anytls',
-                    })}
-                  >
-                    {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} node={row.original} />;
-          },
-        },
-        {
-          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> : t('noData');
-          },
-        },
-        {
-          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>
-            ) : (
-              t('noData')
-            );
-          },
-        },
-      ]}
-      params={[
-        {
-          key: 'group_id',
-          placeholder: t('nodeGroup'),
-          options: groups?.map((item) => ({
-            label: item.name,
-            value: String(item.id),
-          })),
-        },
-        {
-          key: 'search',
-        },
-      ]}
-      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('confirmDelete')}
-              description={t('deleteWarning')}
-              onConfirm={async () => {
-                await batchDeleteNode({
-                  ids: rows.map((item) => item.id),
-                });
-                toast.success(t('deleteSuccess'));
-                ref.current?.refresh();
-              }}
-              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) {
-          nodeSort({
-            sort: changedItems.map((item) => ({ id: item.id, sort: item.sort })),
-          });
-        }
-
-        return updatedItems;
-      }}
-    />
-  );
-}

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>
-  );
-}

apps/admin/app/dashboard/servers/form-schema.ts

@@ -0,0 +1,928 @@
+import { z } from 'zod';
+
+export const protocols = [
+  'shadowsocks',
+  'vmess',
+  'vless',
+  'trojan',
+  'hysteria2',
+  'tuic',
+  'anytls',
+  'socks',
+  'naive',
+  'http',
+  'meru',
+] as const;
+
+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;
+  password?: number;
+  condition?: (protocol: any, values: any) => boolean;
+  group?: 'basic' | 'transport' | 'security' | 'reality' | 'plugin';
+  gridSpan?: 1 | 2;
+};
+
+// 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
+  'off': 'Off',
+  'low': 'Low',
+  'middle': 'Middle',
+  'high': 'High',
+  // ss plugins
+  'v2ray-plugin': 'V2Ray Plugin',
+  'simple-obfs': 'Simple Obfs',
+} 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 SS_PLUGINS = ['none', 'simple-obfs', 'v2ray-plugin'] 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,
+  meru: ['tcp', 'udp'] as const,
+} as const;
+
+export const SECURITY = {
+  vmess: ['none', 'tls'] as const,
+  vless: ['none', 'tls', 'reality'] as const,
+  trojan: ['tls'] as const,
+  hysteria2: ['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 FINGERPRINTS = [
+  'chrome',
+  'firefox',
+  'safari',
+  'ios',
+  'android',
+  'edge',
+  '360',
+  'qq',
+] as const;
+
+export const multiplexLevels = ['off', 'low', 'middle', 'high'] as const;
+
+export function getLabel(value: string): string {
+  const label = (LABELS as Record<string, string>)[value];
+  return label ?? value.toUpperCase();
+}
+
+const nullableString = z.string().nullish();
+const nullableBool = z.boolean().nullish();
+const nullablePort = z.number().int().min(0).max(65535).nullish();
+
+const ss = z.object({
+  type: z.literal('shadowsocks'),
+  host: nullableString,
+  port: nullablePort,
+  cipher: z.enum(SS_CIPHERS as any).nullish(),
+  server_key: nullableString,
+  plugin: z.enum(SS_PLUGINS as any).nullish(),
+  plugin_options: nullableString,
+});
+
+const vmess = z.object({
+  type: z.literal('vmess'),
+  host: nullableString,
+  port: nullablePort,
+  transport: z.enum(TRANSPORTS.vmess as any).nullish(),
+  security: z.enum(SECURITY.vmess as any).nullish(),
+  path: nullableString,
+  service_name: nullableString,
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+});
+
+const vless = z.object({
+  type: z.literal('vless'),
+  host: nullableString,
+  port: nullablePort,
+  transport: z.enum(TRANSPORTS.vless as any).nullish(),
+  security: z.enum(SECURITY.vless as any).nullish(),
+  path: nullableString,
+  service_name: nullableString,
+  flow: z.enum(FLOWS.vless as any).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,
+});
+
+const trojan = z.object({
+  type: z.literal('trojan'),
+  host: nullableString,
+  port: nullablePort,
+  transport: z.enum(TRANSPORTS.trojan as any).nullish(),
+  security: z.enum(SECURITY.trojan as any).nullish(),
+  path: nullableString,
+  service_name: nullableString,
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+});
+
+const hysteria2 = z.object({
+  type: z.literal('hysteria2'),
+  hop_ports: nullableString,
+  hop_interval: z.number().nullish(),
+  obfs_password: nullableString,
+  port: nullablePort,
+  security: z.enum(SECURITY.hysteria2 as any).nullish(),
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+  up_mbps: z.number().nullish(),
+  down_mbps: z.number().nullish(),
+});
+
+const tuic = z.object({
+  type: z.literal('tuic'),
+  host: nullableString,
+  port: nullablePort,
+  disable_sni: z.boolean().nullish(),
+  reduce_rtt: z.boolean().nullish(),
+  udp_relay_mode: z.enum(TUIC_UDP_RELAY_MODES as any).nullish(),
+  congestion_controller: z.enum(TUIC_CONGESTION as any).nullish(),
+  security: z.enum(SECURITY.tuic as any).nullish(),
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+});
+
+const anytls = z.object({
+  type: z.literal('anytls'),
+  port: nullablePort,
+  security: z.enum(SECURITY.anytls as any).nullish(),
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+  padding_scheme: nullableString,
+});
+
+const socks = z.object({
+  type: z.literal('socks'),
+  port: nullablePort,
+});
+
+const naive = z.object({
+  type: z.literal('naive'),
+  port: nullablePort,
+  security: z.enum(SECURITY.naive as any).nullish(),
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+});
+
+const http = z.object({
+  type: z.literal('http'),
+  port: nullablePort,
+  security: z.enum(SECURITY.http as any).nullish(),
+  sni: nullableString,
+  allow_insecure: nullableBool,
+  fingerprint: nullableString,
+});
+
+const meru = z.object({
+  type: z.literal('meru'),
+  port: nullablePort,
+  multiplex: z.enum(multiplexLevels).nullish(),
+  transport: z.enum(TRANSPORTS.meru as any).nullish(),
+});
+
+export const protocolApiScheme = z.discriminatedUnion('type', [
+  ss,
+  vmess,
+  vless,
+  trojan,
+  hysteria2,
+  tuic,
+  anytls,
+  socks,
+  naive,
+  http,
+  meru,
+]);
+
+export const formSchema = z.object({
+  name: z.string().min(1),
+  address: z.string().min(1),
+  country: z.string().optional(),
+  city: z.string().optional(),
+  ratio: z.number().default(1),
+  protocols: z.array(protocolApiScheme),
+});
+
+export type ServerFormValues = z.infer<typeof formSchema>;
+
+export type ProtocolType = (typeof protocols)[number];
+
+export function getProtocolDefaultConfig(proto: ProtocolType) {
+  switch (proto) {
+    case 'shadowsocks':
+      return {
+        type: 'shadowsocks',
+        port: null,
+        cipher: 'chacha20-ietf-poly1305',
+        server_key: null,
+        plugin: 'none',
+        plugin_opts: null,
+      } as any;
+    case 'vmess':
+      return { type: 'vmess', port: null, transport: 'tcp', security: 'none' } as any;
+    case 'vless':
+      return { type: 'vless', port: null, transport: 'tcp', security: 'none', flow: 'none' } as any;
+    case 'trojan':
+      return { type: 'trojan', port: null, transport: 'tcp', security: 'tls' } as any;
+    case 'hysteria2':
+      return {
+        type: 'hysteria2',
+        port: null,
+        hop_ports: null,
+        hop_interval: null,
+        obfs_password: null,
+        security: 'tls',
+        up_mbps: null,
+        down_mbps: null,
+      } as any;
+    case 'tuic':
+      return {
+        type: 'tuic',
+        port: null,
+        disable_sni: false,
+        reduce_rtt: false,
+        udp_relay_mode: 'native',
+        congestion_controller: 'bbr',
+        security: 'tls',
+        sni: null,
+        allow_insecure: false,
+        fingerprint: 'chrome',
+      } as any;
+    case 'socks':
+      return {
+        type: 'socks',
+        port: null,
+      } as any;
+    case 'naive':
+      return {
+        type: 'naive',
+        port: null,
+        security: 'none',
+      } as any;
+    case 'http':
+      return {
+        type: 'http',
+        port: null,
+        security: 'none',
+      } as any;
+    case 'meru':
+      return {
+        type: 'meru',
+        port: null,
+        multiplex: 'off',
+        transport: 'tcp',
+      } as any;
+    case 'anytls':
+      return {
+        type: 'anytls',
+        port: null,
+        security: 'tls',
+        padding_scheme: null,
+        sni: null,
+        allow_insecure: false,
+        fingerprint: 'chrome',
+      } as any;
+    default:
+      return {} as any;
+  }
+}
+
+export const PROTOCOL_FIELDS: Record<string, FieldConfig[]> = {
+  shadowsocks: [
+    {
+      name: 'port',
+      type: 'number',
+      label: 'port',
+      min: 0,
+      max: 65535,
+      placeholder: '1-65535',
+      group: 'basic',
+    },
+    {
+      name: 'cipher',
+      type: 'select',
+      label: 'encryption_method',
+      options: SS_CIPHERS,
+      defaultValue: 'chacha20-ietf-poly1305',
+      group: 'basic',
+    },
+    {
+      name: 'server_key',
+      type: 'input',
+      label: 'server_key',
+      password: 32,
+      group: 'basic',
+      condition: (p) =>
+        [
+          '2022-blake3-aes-128-gcm',
+          '2022-blake3-aes-256-gcm',
+          '2022-blake3-chacha20-poly1305',
+        ].includes(p.cipher),
+    },
+    {
+      name: 'plugin',
+      type: 'select',
+      label: 'plugin',
+      options: SS_PLUGINS,
+      defaultValue: 'none',
+      group: 'plugin',
+    },
+    {
+      name: 'plugin_opts',
+      type: 'textarea',
+      label: 'plugin_opts',
+      placeholder: (t: (key: string) => string, p: any) => {
+        switch (p.plugin) {
+          case 'simple-obfs':
+            return 'obfs=http;obfs-host=www.bing.com;path=/';
+          case 'v2ray-plugin':
+            return 'WebSocket: mode=websocket;host=mydomain.me;path=/;tls=true\n\nQUIC: mode=quic;host=mydomain.me';
+          default:
+            return 'key=value;key2=value2';
+        }
+      },
+      group: 'plugin',
+      condition: (p) => ['simple-obfs', 'v2ray-plugin'].includes(p.plugin),
+    },
+  ],
+  vmess: [
+    {
+      name: 'port',
+      type: 'number',
+      label: 'port',
+      min: 0,
+      max: 65535,
+      placeholder: '1-65535',
+      group: 'basic',
+    },
+    {
+      name: 'transport',
+      type: 'select',
+      label: 'transport',
+      options: TRANSPORTS.vmess,
+      defaultValue: 'tcp',
+      group: 'transport',
+    },
+    {
+      name: 'security',
+      type: 'select',
+      label: 'security',
+      options: SECURITY.vmess,
+      defaultValue: 'none',
+      group: 'security',
+    },
+    {
+      name: 'host',
+      type: 'input',
+      label: 'host',
+      group: 'transport',
+      condition: (p) => ['websocket', 'xhttp', 'httpupgrade'].includes(p.transport),
+    },
+    {
+      name: 'path',
+      type: 'input',
+      label: 'path',
+      group: 'transport',
+      condition: (p) => ['websocket', 'xhttp', 'httpupgrade'].includes(p.transport),
+    },
+    {
+      name: 'service_name',
+      type: 'input',
+      label: 'service_name',
+      group: 'transport',
+      condition: (p) => p.transport === 'grpc',
+    },
+    {
+      name: 'sni',
+      type: 'input',
+      label: 'security_sni',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+    {
+      name: 'allow_insecure',
+      type: 'switch',
+      label: 'security_allow_insecure',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+    {
+      name: 'fingerprint',
+      type: 'select',
+      label: 'security_fingerprint',
+      options: FINGERPRINTS,
+      defaultValue: 'chrome',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+  ],
+  vless: [
+    {
+      name: 'port',
+      type: 'number',
+      label: 'port',
+      min: 0,
+      max: 65535,
+      placeholder: '1-65535',
+      group: 'basic',
+    },
+    {
+      name: 'flow',
+      type: 'select',
+      label: 'flow',
+      options: FLOWS.vless,
+      defaultValue: 'none',
+      group: 'basic',
+    },
+    {
+      name: 'transport',
+      type: 'select',
+      label: 'transport',
+      options: TRANSPORTS.vless,
+      defaultValue: 'tcp',
+      group: 'transport',
+    },
+    {
+      name: 'security',
+      type: 'select',
+      label: 'security',
+      options: SECURITY.vless,
+      defaultValue: 'none',
+      group: 'security',
+    },
+    {
+      name: 'host',
+      type: 'input',
+      label: 'host',
+      group: 'transport',
+      condition: (p) => ['websocket', 'mkcp', 'httpupgrade', 'xhttp'].includes(p.transport),
+    },
+    {
+      name: 'path',
+      type: 'input',
+      label: 'path',
+      group: 'transport',
+      condition: (p) => ['websocket', 'mkcp', 'httpupgrade', 'xhttp'].includes(p.transport),
+    },
+    {
+      name: 'service_name',
+      type: 'input',
+      label: 'service_name',
+      group: 'transport',
+      condition: (p) => p.transport === 'grpc',
+    },
+    {
+      name: 'sni',
+      type: 'input',
+      label: 'security_sni',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+    {
+      name: 'allow_insecure',
+      type: 'switch',
+      label: 'security_allow_insecure',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+    {
+      name: 'fingerprint',
+      type: 'select',
+      label: 'security_fingerprint',
+      options: FINGERPRINTS,
+      defaultValue: 'chrome',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+    {
+      name: 'reality_server_addr',
+      type: 'input',
+      label: 'security_server_address',
+      placeholder: (t) => t('security_server_address_placeholder'),
+      group: 'reality',
+      condition: (p) => p.security === 'reality',
+    },
+    {
+      name: 'reality_server_port',
+      type: 'number',
+      label: 'security_server_port',
+      min: 1,
+      max: 65535,
+      placeholder: '1-65535',
+      group: 'reality',
+      condition: (p) => p.security === 'reality',
+    },
+    {
+      name: 'reality_private_key',
+      type: 'input',
+      label: 'security_private_key',
+      placeholder: (t) => t('security_private_key_placeholder'),
+      group: 'reality',
+      condition: (p) => p.security === 'reality',
+    },
+    {
+      name: 'reality_public_key',
+      type: 'input',
+      label: 'security_public_key',
+      placeholder: (t) => t('security_public_key_placeholder'),
+      group: 'reality',
+      condition: (p) => p.security === 'reality',
+    },
+    {
+      name: 'reality_short_id',
+      type: 'input',
+      label: 'security_short_id',
+      group: 'reality',
+      condition: (p) => p.security === 'reality',
+    },
+  ],
+  trojan: [
+    {
+      name: 'port',
+      type: 'number',
+      label: 'port',
+      min: 0,
+      max: 65535,
+      placeholder: '1-65535',
+      group: 'basic',
+    },
+    {
+      name: 'transport',
+      type: 'select',
+      label: 'transport',
+      options: TRANSPORTS.trojan,
+      defaultValue: 'tcp',
+      group: 'transport',
+    },
+    {
+      name: 'security',
+      type: 'select',
+      label: 'security',
+      options: SECURITY.trojan,
+      defaultValue: 'tls',
+      group: 'security',
+    },
+    {
+      name: 'host',
+      type: 'input',
+      label: 'host',
+      group: 'transport',
+      condition: (p) => ['websocket', 'xhttp', 'httpupgrade'].includes(p.transport),
+    },
+    {
+      name: 'path',
+      type: 'input',
+      label: 'path',
+      group: 'transport',
+      condition: (p) => ['websocket', 'xhttp', 'httpupgrade'].includes(p.transport),
+    },
+    {
+      name: 'service_name',
+      type: 'input',
+      label: 'service_name',
+      group: 'transport',
+      condition: (p) => p.transport === 'grpc',
+    },
+    {
+      name: 'sni',
+      type: 'input',
+      label: 'security_sni',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+    {
+      name: 'allow_insecure',
+      type: 'switch',
+      label: 'security_allow_insecure',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+    {
+      name: 'fingerprint',
+      type: 'select',
+      label: 'security_fingerprint',
+      options: FINGERPRINTS,
+      defaultValue: 'chrome',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+  ],
+  hysteria2: [
+    {
+      name: 'port',
+      type: 'number',
+      label: 'port',
+      min: 0,
+      max: 65535,
+      placeholder: '1-65535',
+      group: 'basic',
+    },
+    {
+      name: 'hop_ports',
+      type: 'input',
+      label: 'hop_ports',
+      placeholder: (t) => t('hop_ports_placeholder'),
+      group: 'basic',
+    },
+    {
+      name: 'hop_interval',
+      type: 'number',
+      label: 'hop_interval',
+      placeholder: 'e.g. 300',
+      min: 0,
+      suffix: 'S',
+      group: 'basic',
+    },
+    {
+      name: 'obfs_password',
+      type: 'input',
+      label: 'obfs_password',
+      placeholder: (t) => t('obfs_password_placeholder'),
+      password: 16,
+      group: 'basic',
+    },
+    {
+      name: 'up_mbps',
+      type: 'number',
+      label: 'up_mbps',
+      min: 0,
+      placeholder: (t) => t('bandwidth_placeholder'),
+      suffix: 'Mbps',
+      group: 'basic',
+    },
+    {
+      name: 'down_mbps',
+      type: 'number',
+      label: 'down_mbps',
+      min: 0,
+      placeholder: (t) => t('bandwidth_placeholder'),
+      suffix: 'Mbps',
+      group: 'basic',
+    },
+    { name: 'sni', type: 'input', label: 'security_sni', group: 'security' },
+    { name: 'allow_insecure', type: 'switch', label: 'security_allow_insecure', group: 'security' },
+    {
+      name: 'fingerprint',
+      type: 'select',
+      label: 'security_fingerprint',
+      options: FINGERPRINTS,
+      defaultValue: 'chrome',
+      group: 'security',
+    },
+  ],
+  tuic: [
+    {
+      name: 'port',
+      type: 'number',
+      label: 'port',
+      min: 0,
+      max: 65535,
+      placeholder: '1-65535',
+      group: 'basic',
+    },
+    {
+      name: 'udp_relay_mode',
+      type: 'select',
+      label: 'udp_relay_mode',
+      options: TUIC_UDP_RELAY_MODES,
+      defaultValue: 'native',
+      group: 'basic',
+    },
+    {
+      name: 'congestion_controller',
+      type: 'select',
+      label: 'congestion_controller',
+      options: TUIC_CONGESTION,
+      defaultValue: 'bbr',
+      group: 'basic',
+    },
+    { name: 'disable_sni', type: 'switch', label: 'disable_sni', group: 'basic' },
+    { name: 'reduce_rtt', type: 'switch', label: 'reduce_rtt', group: 'basic' },
+    { name: 'sni', type: 'input', label: 'security_sni', group: 'security' },
+    { name: 'allow_insecure', type: 'switch', label: 'security_allow_insecure', group: 'security' },
+    {
+      name: 'fingerprint',
+      type: 'select',
+      label: 'security_fingerprint',
+      options: FINGERPRINTS,
+      defaultValue: 'chrome',
+      group: 'security',
+    },
+  ],
+  socks: [
+    {
+      name: 'port',
+      type: 'number',
+      label: 'port',
+      min: 0,
+      max: 65535,
+      placeholder: '1-65535',
+      group: 'basic',
+    },
+  ],
+  naive: [
+    {
+      name: 'port',
+      type: 'number',
+      label: 'port',
+      min: 0,
+      max: 65535,
+      placeholder: '1-65535',
+      group: 'basic',
+    },
+    {
+      name: 'security',
+      type: 'select',
+      label: 'security',
+      options: SECURITY.naive,
+      defaultValue: 'none',
+      group: 'security',
+    },
+    {
+      name: 'sni',
+      type: 'input',
+      label: 'security_sni',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+    {
+      name: 'allow_insecure',
+      type: 'switch',
+      label: 'security_allow_insecure',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+    {
+      name: 'fingerprint',
+      type: 'select',
+      label: 'security_fingerprint',
+      options: FINGERPRINTS,
+      defaultValue: 'chrome',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+  ],
+  http: [
+    {
+      name: 'port',
+      type: 'number',
+      label: 'port',
+      min: 0,
+      max: 65535,
+      placeholder: '1-65535',
+      group: 'basic',
+    },
+    {
+      name: 'security',
+      type: 'select',
+      label: 'security',
+      options: SECURITY.http,
+      defaultValue: 'none',
+      group: 'security',
+    },
+    {
+      name: 'sni',
+      type: 'input',
+      label: 'security_sni',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+    {
+      name: 'allow_insecure',
+      type: 'switch',
+      label: 'security_allow_insecure',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+    {
+      name: 'fingerprint',
+      type: 'select',
+      label: 'security_fingerprint',
+      options: FINGERPRINTS,
+      defaultValue: 'chrome',
+      group: 'security',
+      condition: (p) => p.security !== 'none',
+    },
+  ],
+  meru: [
+    {
+      name: 'port',
+      type: 'number',
+      label: 'port',
+      min: 0,
+      max: 65535,
+      placeholder: '1-65535',
+      group: 'basic',
+    },
+    {
+      name: 'multiplex',
+      type: 'select',
+      label: 'multiplex',
+      options: multiplexLevels,
+      defaultValue: 'off',
+      group: 'basic',
+    },
+    {
+      name: 'transport',
+      type: 'select',
+      label: 'transport',
+      options: TRANSPORTS.meru,
+      defaultValue: 'tcp',
+      group: 'transport',
+    },
+  ],
+  anytls: [
+    {
+      name: 'port',
+      type: 'number',
+      label: 'port',
+      min: 0,
+      max: 65535,
+      placeholder: '1-65535',
+      group: 'basic',
+    },
+    {
+      name: 'padding_scheme',
+      type: 'textarea',
+      label: 'padding_scheme',
+      placeholder: (t: (key: string) => string) => t('padding_scheme_placeholder'),
+      group: 'basic',
+    },
+    { name: 'sni', type: 'input', label: 'security_sni', group: 'security' },
+    { name: 'allow_insecure', type: 'switch', label: 'security_allow_insecure', group: 'security' },
+    {
+      name: 'fingerprint',
+      type: 'select',
+      label: 'security_fingerprint',
+      options: FINGERPRINTS,
+      defaultValue: 'chrome',
+      group: 'security',
+    },
+  ],
+};

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 { 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'>
+          <Badge variant='secondary'>{status?.online.length}</Badge>
+          <span>{t('onlineUsers')}</span>
+        </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>
+  );
+}

apps/admin/app/dashboard/servers/page.tsx

@@ -0,0 +1,370 @@
+'use client';
+// Online users detail moved to separate component
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  createServer,
+  deleteServer,
+  filterServerList,
+  hasMigrateSeverNode,
+  migrateServerNode,
+  resetSortWithServer,
+  updateServer,
+} 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 { Card, CardContent } from '@workspace/ui/components/card';
+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 OnlineUsersCell from './online-users-cell';
+import ServerConfig from './server-config';
+import ServerForm from './server-form';
+
+type ProtocolName = 'shadowsocks' | 'vmess' | 'vless' | 'trojan' | 'hysteria2' | 'tuic' | 'anytls';
+
+const PROTOCOL_COLORS: Record<ProtocolName, string> = {
+  shadowsocks: 'bg-green-500',
+  vmess: 'bg-rose-500',
+  vless: 'bg-blue-500',
+  trojan: 'bg-yellow-500',
+  hysteria2: 'bg-purple-500',
+  tuic: 'bg-cyan-500',
+  anytls: 'bg-gray-500',
+};
+
+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='outline'>{ip || t('notAvailable')}</Badge>
+    </div>
+  );
+}
+
+export default function ServersPage() {
+  const t = useTranslations('servers');
+
+  const [loading, setLoading] = useState(false);
+  const [migrating, setMigrating] = useState(false);
+  const ref = useRef<ProTableActions>(null);
+
+  const { data: hasMigrate, refetch: refetchHasMigrate } = useQuery({
+    queryKey: ['hasMigrateSeverNode'],
+    queryFn: async () => {
+      const { data } = await hasMigrateSeverNode();
+      return data.data?.has_migrate;
+    },
+  });
+
+  const handleMigrate = async () => {
+    setMigrating(true);
+    try {
+      const { data } = await migrateServerNode();
+      const fail = data.data?.fail || 0;
+      if (fail > 0) {
+        toast.error(data.data?.message);
+      } else {
+        toast.success(t('migrated'));
+      }
+      refetchHasMigrate();
+      ref.current?.refresh();
+    } catch (error) {
+      toast.error(t('migrateFailed'));
+    } finally {
+      setMigrating(false);
+    }
+  };
+
+  return (
+    <div className='space-y-4'>
+      <Card>
+        <CardContent className='p-4'>
+          <ServerConfig />
+        </CardContent>
+      </Card>
+      <ProTable<API.Server, { search: string }>
+        action={ref}
+        header={{
+          title: t('pageTitle'),
+          toolbar: (
+            <div className='flex gap-2'>
+              {hasMigrate && (
+                <Button variant='outline' onClick={handleMigrate} disabled={migrating}>
+                  {migrating ? t('migrating') : t('migrate')}
+                </Button>
+              )}
+              <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();
+                    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 || []) as API.Protocol[];
+              if (!list.length) return t('noData');
+              return (
+                <div className='flex flex-wrap gap-1'>
+                  {list.map((p, idx) => {
+                    const proto = ((p as any)?.type || '') as ProtocolName | '';
+                    if (!proto) return null;
+                    const color = PROTOCOL_COLORS[proto as ProtocolName];
+                    const port = (p as any)?.port as number | undefined;
+                    const label = `${proto}${port ? ` (${port})` : ''}`;
+                    return (
+                      <Badge
+                        key={idx}
+                        variant='outline'
+                        className={cn('text-primary-foreground', color)}
+                      >
+                        {label}
+                      </Badge>
+                    );
+                  })}
+                </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} />,
+          },
+          {
+            id: 'traffic_ratio',
+            header: t('traffic_ratio'),
+            cell: ({ row }) => {
+              const raw = row.original.ratio as unknown;
+              const ratio = Number(raw ?? 1) || 1;
+              return <span className='text-sm'>{ratio.toFixed(2)}x</span>;
+            },
+          },
+        ]}
+        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 as any}
+              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();
+                  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 deleteServer({ id: row.id } as any);
+                toast.success(t('deleted'));
+                ref.current?.refresh();
+              }}
+              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,
+                  ratio: others.ratio,
+                  address: others.address,
+                  protocols: others.protocols || [],
+                };
+                await createServer(body);
+                toast.success(t('copied'));
+                ref.current?.refresh();
+                setLoading(false);
+              }}
+            >
+              {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) => deleteServer({ id: r.id })));
+                  toast.success(t('deleted'));
+                  ref.current?.refresh();
+                }}
+                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[],
+            });
+          }
+          return updatedItems;
+        }}
+      />
+    </div>
+  );
+}

apps/admin/app/dashboard/servers/server-config.tsx

@@ -0,0 +1,400 @@
+'use client';
+
+import {
+  getNodeConfig,
+  getNodeMultiplier,
+  setNodeMultiplier,
+  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 { ChartContainer, ChartTooltip } from '@workspace/ui/components/chart';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@workspace/ui/components/form';
+import { Label } from '@workspace/ui/components/label';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+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 { DicesIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { uid } from 'radash';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Cell, Legend, Pie, PieChart } from 'recharts';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+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;
+
+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: { name: string; value: number; multiplier: number }[] = [];
+  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;
+}
+
+const nodeConfigSchema = z.object({
+  node_secret: z.string().optional(),
+  node_pull_interval: z.number().optional(),
+  node_push_interval: z.number().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 [timeSlots, setTimeSlots] = useState<API.TimePeriod[]>([]);
+
+  const { data: cfgResp, refetch: refetchCfg } = useQuery({
+    queryKey: ['getNodeConfig'],
+    queryFn: async () => {
+      const { data } = await getNodeConfig();
+      return data.data as API.NodeConfig | undefined;
+    },
+    enabled: open,
+  });
+
+  const { data: periodsResp, refetch: refetchPeriods } = useQuery({
+    queryKey: ['getNodeMultiplier'],
+    queryFn: async () => {
+      const { data } = await getNodeMultiplier();
+      return (data.data?.periods || []) as API.TimePeriod[];
+    },
+    enabled: open,
+  });
+
+  const form = useForm<NodeConfigFormData>({
+    resolver: zodResolver(nodeConfigSchema),
+    defaultValues: {
+      node_secret: '',
+      node_pull_interval: undefined,
+      node_push_interval: undefined,
+    },
+  });
+
+  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,
+      });
+    }
+  }, [cfgResp, form]);
+
+  useEffect(() => {
+    if (periodsResp) {
+      setTimeSlots(periodsResp);
+    }
+  }, [periodsResp]);
+
+  const chartTimeSlots = useMemo(() => 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 }>,
+    );
+  }, [chartTimeSlots]);
+
+  async function onSubmit(values: NodeConfigFormData) {
+    setSaving(true);
+    try {
+      await updateNodeConfig(values as API.NodeConfig);
+      toast.success(t('config.saveSuccess'));
+      await refetchCfg();
+      setOpen(false);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function savePeriods() {
+    await setNodeMultiplier({ periods: timeSlots });
+    await refetchPeriods();
+    toast.success(t('config.saveSuccess'));
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <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('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-[720px] 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='server-config-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-4 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='node_secret'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('config.communicationKey')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('config.inputPlaceholder')}
+                        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('config.communicationKeyDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='node_pull_interval'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('config.nodePullInterval')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        type='number'
+                        min={0}
+                        suffix='S'
+                        value={field.value as any}
+                        onValueChange={field.onChange}
+                        placeholder={t('config.inputPlaceholder')}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('config.nodePullIntervalDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='node_push_interval'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('config.nodePushInterval')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        type='number'
+                        min={0}
+                        suffix='S'
+                        step={0.1}
+                        value={field.value as any}
+                        onValueChange={field.onChange}
+                        placeholder={t('config.inputPlaceholder')}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('config.nodePushIntervalDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className='mt-6 space-y-3'>
+                <Label className='text-base'>{t('config.dynamicMultiplier')}</Label>
+                <p className='text-muted-foreground text-sm'>
+                  {t('config.dynamicMultiplierDescription')}
+                </p>
+
+                <div className='flex flex-col-reverse gap-8 md:flex-row md:items-start'>
+                  <div className='w-full md:w-1/2'>
+                    <ArrayInput<API.TimePeriod>
+                      fields={[
+                        { name: 'start_time', prefix: t('config.startTime'), type: 'time' },
+                        { name: 'end_time', prefix: t('config.endTime'), type: 'time' },
+                        {
+                          name: 'multiplier',
+                          prefix: t('config.multiplier'),
+                          type: 'number',
+                          placeholder: '0',
+                        },
+                      ]}
+                      value={timeSlots}
+                      onChange={setTimeSlots}
+                    />
+                    <div className='mt-3 flex gap-2'>
+                      <Button
+                        size='sm'
+                        variant='outline'
+                        onClick={() => setTimeSlots(periodsResp || [])}
+                      >
+                        {t('config.reset')}
+                      </Button>
+                      <Button size='sm' onClick={savePeriods}>
+                        {t('config.save')}
+                      </Button>
+                    </div>
+                  </div>
+
+                  <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={({ 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 d = payload[0]?.payload as any;
+                              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('config.timeSlot')}
+                                      </span>
+                                      <span className='text-muted-foreground font-bold'>
+                                        {d.name || '—'}
+                                      </span>
+                                    </div>
+                                    <div className='flex flex-col'>
+                                      <span className='text-muted-foreground text-[0.70rem] uppercase'>
+                                        {t('config.multiplier')}
+                                      </span>
+                                      <span className='font-bold'>
+                                        {Number(d.multiplier).toFixed(2)}x
+                                      </span>
+                                    </div>
+                                  </div>
+                                </div>
+                              );
+                            }
+                            return null;
+                          }}
+                        />
+                        <Legend />
+                      </PieChart>
+                    </ChartContainer>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </Form>
+        </ScrollArea>
+
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button variant='outline' disabled={saving} onClick={() => setOpen(false)}>
+            {t('config.actions.cancel')}
+          </Button>
+          <Button disabled={saving} type='submit' form='server-config-form'>
+            <Icon icon='mdi:loading' className={saving ? 'mr-2 animate-spin' : 'hidden'} />
+            {t('config.actions.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/servers/server-form.tsx

@@ -0,0 +1,585 @@
+'use client';
+
+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 {
+  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 { uid } from 'radash';
+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,
+  ServerFormValues,
+} from './form-schema';
+
+function DynamicField({
+  field,
+  control,
+  protocolIndex,
+  protocolData,
+  t,
+}: {
+  field: FieldConfig;
+  control: 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.password ? (
+                      <Button
+                        type='button'
+                        variant='ghost'
+                        onClick={() => {
+                          const length = field.password || 16;
+                          const result = uid(length).toLowerCase();
+                          fieldProps.onChange(result);
+                        }}
+                      >
+                        <Icon icon='mdi:refresh' className='h-4 w-4' />
+                      </Button>
+                    ) : (
+                      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)
+                        : t(field.placeholder)
+                      : undefined
+                  }
+                  onChange={(e) => fieldProps.onChange(e.target.value)}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      );
+
+    default:
+      return null;
+  }
+}
+
+function renderFieldsByGroup(
+  fields: FieldConfig[],
+  group: string,
+  control: 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}
+          protocolIndex={protocolIndex}
+          protocolData={protocolData}
+          t={t}
+        />
+      ))}
+    </div>
+  );
+}
+
+function renderGroupCard(
+  title: string,
+  fields: FieldConfig[],
+  group: string,
+  control: 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, protocolIndex, protocolData, t)}
+        </div>
+      </fieldset>
+    </div>
+  );
+}
+
+export default function ServerForm(props: {
+  trigger: string;
+  title: string;
+  loading?: boolean;
+  initialValues?: Partial<ServerFormValues>;
+  onSubmit: (values: ServerFormValues) => 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 form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      address: '',
+      country: '',
+      city: '',
+      ratio: 1,
+      protocols: [],
+      ...initialValues,
+    },
+  });
+  const { control } = form;
+
+  const protocolsValues = useWatch({ control, name: 'protocols' });
+
+  useEffect(() => {
+    if (initialValues) {
+      form.reset({
+        name: '',
+        address: '',
+        country: '',
+        city: '',
+        ratio: 1,
+        ...initialValues,
+        protocols: PROTOCOLS.map((type) => {
+          const existingProtocol = initialValues.protocols?.find((p) => p.type === type);
+          return existingProtocol || getProtocolDefaultConfig(type);
+        }),
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialValues]);
+
+  async function handleSubmit(values: Record<string, any>) {
+    const filtered = (values?.protocols || []).filter((p: any, index: number) => {
+      const port = Number(p?.port);
+      const protocolType = PROTOCOLS[index];
+      return protocolType && p && Number.isFinite(port) && port > 0 && port <= 65535;
+    });
+
+    if (filtered.length === 0) {
+      toast.error(t('validation_failed'));
+      return;
+    }
+
+    const result = {
+      name: values.name,
+      country: values.country,
+      city: values.city,
+      ratio: Number(values.ratio || 1),
+      address: values.address,
+      protocols: filtered,
+    };
+
+    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: '',
+                ratio: 1,
+                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-3 gap-2'>
+                <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='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='grid grid-cols-2 gap-2'>
+                <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='ratio'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('traffic_ratio')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          {...field}
+                          type='number'
+                          step={0.1}
+                          min={0}
+                          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.port && Number(current.port) > 0;
+                  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'>
+                            <div className='flex items-center gap-2'>
+                              <span className='font-medium capitalize'>{type}</span>
+                            </div>
+                            <span
+                              className={cn(
+                                'text-muted-foreground text-xs',
+                                isEnabled && 'text-green-500',
+                              )}
+                            >
+                              {isEnabled ? t('enabled') : t('disabled')}
+                            </span>
+                          </div>
+                          <div className='mr-2 flex items-center gap-1'>
+                            {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>
+                      </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, i, current, t)}
+                          {renderGroupCard('plugin', fields, 'plugin', control, i, current, t)}
+                          {renderGroupCard(
+                            'transport',
+                            fields,
+                            'transport',
+                            control,
+                            i,
+                            current,
+                            t,
+                          )}
+                          {renderGroupCard('security', fields, 'security', control, i, current, t)}
+                          {renderGroupCard('reality', fields, 'reality', control, 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>
+  );
+}

apps/admin/app/dashboard/subscribe/protocol-form.tsx

@@ -64,9 +64,9 @@ const createClientFormSchema = (t: any) =>
     description: z.string().optional(),
     icon: z.string().optional(),
     user_agent: z.string().min(1, `User-Agent ${t('form.validation.userAgentRequiredSuffix')}`),
-    scheme: z.string().default(''),
+    scheme: z.string().optional(),
-    template: z.string().default(''),
+    template: z.string(),
-    output_format: z.string().default(''),
+    output_format: z.string(),
     download_link: z.object({
       windows: z.string().optional(),
       mac: z.string().optional(),
@@ -83,8 +83,6 @@ export function ProtocolForm() {
   const t = useTranslations('subscribe');
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
-  const [previewOpen, setPreviewOpen] = useState(false);
-  const [previewApplicationId, setPreviewApplicationId] = useState<number | null>(null);
   const [editingClient, setEditingClient] = useState<API.SubscribeApplication | null>(null);
   const tableRef = useRef<ProTableActions>(null);
 
@@ -111,7 +109,6 @@ export function ProtocolForm() {
     },
   });
 
-  // API请求函数
   const request = async (
     pagination: { page: number; size: number },
     filter: Record<string, unknown>,
@@ -127,7 +124,6 @@ export function ProtocolForm() {
     };
   };
 
-  // 表格列定义
   const columns: ColumnDef<API.SubscribeApplication, any>[] = [
     {
       accessorKey: 'is_default',
@@ -138,7 +134,6 @@ export function ProtocolForm() {
           onCheckedChange={async (checked) => {
             await updateSubscribeApplication({
               ...row.original,
-              proxy_template: '',
               is_default: checked,
             });
             tableRef.current?.refresh();
@@ -289,7 +284,6 @@ export function ProtocolForm() {
       if (editingClient) {
         await updateSubscribeApplication({
           ...data,
-          proxy_template: '',
           is_default: editingClient.is_default,
           id: editingClient.id,
         });
@@ -319,7 +313,21 @@ export function ProtocolForm() {
         columns={columns}
         request={request}
         header={{
-          title: <h2 className='text-lg font-semibold'>{t('protocol.title')}</h2>,
+          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={{
@@ -672,6 +680,7 @@ export function ProtocolForm() {
                                         description: 'Node tags',
                                         items: { type: 'string' },
                                       },
+                                      Sort: { type: 'number', description: 'Node sort order' },
                                       // Security Options
                                       Security: {
                                         type: 'string',

apps/admin/app/dashboard/subscribe/template-preview.tsx

@@ -4,8 +4,8 @@ import { previewSubscribeTemplate } from '@/services/admin/application';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@workspace/ui/components/sheet';
+import { MonacoEditor } from '@workspace/ui/custom-components/editor/monaco-editor';
 import { Icon } from '@workspace/ui/custom-components/icon';
-import { Markdown } from '@workspace/ui/custom-components/markdown';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
@@ -27,7 +27,6 @@ export function TemplatePreview({ applicationId, output_format }: TemplatePrevie
 
   const originalContent = data?.data?.data?.template || '';
   const errorMessage = (error as any)?.data?.msg || error?.message || t('failed');
-  const displayContent = originalContent || (error ? errorMessage : '');
 
   const getDecodedContent = () => {
     if (output_format === 'base64' && originalContent) {
@@ -41,19 +40,31 @@ export function TemplatePreview({ applicationId, output_format }: TemplatePrevie
   };
 
   const getDisplayContent = () => {
+    if (error) return errorMessage;
+    if (!originalContent) return '';
     switch (output_format) {
-      case 'base64':
+      case 'base64': {
-        return `\`\`\`base64\n# ${t('base64.originalContent')}\n${displayContent}\n\n# ${t('base64.decodedContent')}\n${getDecodedContent()}\n\`\`\``;
+        const decoded = getDecodedContent();
-      case 'yaml':
+        return `${t('base64.originalContent')}:\n${originalContent}\n\n${t('base64.decodedContent')}:\n${decoded}`;
-        return `\`\`\`yaml\n${displayContent}\n\`\`\``;
+      }
-      case 'json':
-        return `\`\`\`json\n${displayContent}\n\`\`\``;
-      case 'conf':
-        return `\`\`\`ini\n${displayContent}\n\`\`\``;
-      case 'plain':
-        return `\`\`\`text\n${displayContent}\n\`\`\``;
       default:
-        return displayContent;
+        return originalContent;
+    }
+  };
+  const mapLanguage = (fmt?: string) => {
+    switch (fmt) {
+      case 'json':
+        return 'json';
+      case 'yaml':
+        return 'yaml';
+      case 'base64':
+        return 'ini';
+      case 'plain':
+        return 'ini';
+      case 'conf':
+        return 'ini';
+      default:
+        return 'ini';
     }
   };
 
@@ -68,19 +79,22 @@ export function TemplatePreview({ applicationId, output_format }: TemplatePrevie
         {t('preview')}
       </Button>
       <Sheet open={isOpen} onOpenChange={handleOpenChange}>
-        <SheetContent className='w-[800px] max-w-[90vw] md:max-w-screen-md'>
         <SheetHeader>
-            <SheetTitle>{t('title')}</SheetTitle>
+          <SheetTitle></SheetTitle>
         </SheetHeader>
+        <SheetContent className='w-[800px] max-w-[90vw] md:max-w-screen-md'>
           {isLoading ? (
             <div className='flex items-center justify-center'>
               <Icon icon='mdi:loading' className='h-6 w-6 animate-spin' />
               <span className='ml-2'>{t('loading')}</span>
             </div>
           ) : (
-            <div className='*:text-sm [&_pre>div>div+div]:max-h-[calc(100dvh-48px-36px-36px)] [&_pre>div>div+div]:overflow-auto'>
+            <MonacoEditor
-              <Markdown>{getDisplayContent()}</Markdown>
+              title={t('title')}
-            </div>
+              value={getDisplayContent()}
+              language={mapLanguage(output_format)}
+              readOnly
+            />
           )}
         </SheetContent>
       </Sheet>

apps/admin/app/dashboard/system/log-cleanup/log-cleanup-form.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { getLogSetting, updateLogSetting } from '@/services/admin/log';
+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 logCleanupSchema = z.object({
+  auto_clear: z.boolean(),
+  clear_days: z.number().min(1),
+});
+
+type LogCleanupFormData = z.infer<typeof logCleanupSchema>;
+
+export default function LogCleanupForm() {
+  const t = useTranslations('system');
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getLogSetting'],
+    queryFn: async () => {
+      const { data } = await getLogSetting();
+      return data.data;
+    },
+    enabled: open,
+  });
+
+  const form = useForm<LogCleanupFormData>({
+    resolver: zodResolver(logCleanupSchema),
+    defaultValues: {
+      auto_clear: false,
+      clear_days: 30,
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      form.reset(data);
+    }
+  }, [data, form]);
+
+  async function onSubmit(values: LogCleanupFormData) {
+    setLoading(true);
+    try {
+      await updateLogSetting(values as API.LogSetting);
+      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:delete-sweep' className='text-primary h-5 w-5' />
+            </div>
+            <div className='flex-1'>
+              <p className='font-medium'>{t('logCleanup.title')}</p>
+              <p className='text-muted-foreground text-sm'>{t('logCleanup.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('logCleanup.title')}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-6'>
+          <Form {...form}>
+            <form
+              id='log-cleanup-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-2 pt-4'
+            >
+              <FormField
+                control={form.control}
+                name='auto_clear'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('logCleanup.autoClear')}</FormLabel>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        className='float-end !mt-0'
+                      />
+                    </FormControl>
+                    <FormDescription>{t('logCleanup.autoClearDescription')}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='clear_days'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('logCleanup.clearDays')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        type='number'
+                        placeholder={t('logCleanup.clearDaysPlaceholder')}
+                        value={field.value?.toString()}
+                        onValueChange={(value) => field.onChange(Number(value))}
+                        disabled={!form.watch('auto_clear')}
+                      />
+                    </FormControl>
+                    <FormDescription>{t('logCleanup.clearDaysDescription')}</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='log-cleanup-form'>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+            {t('common.save')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/system/page.tsx

@@ -6,6 +6,7 @@ import CurrencyForm from './basic-settings/currency-form';
 import PrivacyPolicyForm from './basic-settings/privacy-policy-form';
 import SiteForm from './basic-settings/site-form';
 import TosForm from './basic-settings/tos-form';
+import LogCleanupForm from './log-cleanup/log-cleanup-form';
 import InviteForm from './user-security/invite-form';
 import RegisterForm from './user-security/register-form';
 import VerifyCodeForm from './user-security/verify-code-form';
@@ -14,7 +15,6 @@ import VerifyForm from './user-security/verify-form';
 export default function Page() {
   const t = useTranslations('system');
 
-  // 定义表单配置
   const formSections = [
     {
       title: t('basicSettings'),
@@ -34,6 +34,10 @@ export default function Page() {
         { component: VerifyCodeForm },
       ],
     },
+    {
+      title: t('logSettings'),
+      forms: [{ component: LogCleanupForm }],
+    },
   ];
 
   return (

apps/admin/app/dashboard/ticket/page.tsx

@@ -7,12 +7,12 @@ import {
   getTicketList,
   updateTicketStatus,
 } from '@/services/admin/ticket';
+import { formatDate } from '@/utils/common';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import {
   Drawer,
   DrawerContent,
-  DrawerDescription,
   DrawerFooter,
   DrawerHeader,
   DrawerTitle,
@@ -23,9 +23,7 @@ import { ScrollArea } from '@workspace/ui/components/scroll-area';
 import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
 import { Icon } from '@workspace/ui/custom-components/icon';
 import { cn } from '@workspace/ui/lib/utils';
-import { formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
-import NextImage from 'next/legacy/image';
 import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { UserDetail } from '../user/user-detail';
@@ -130,7 +128,7 @@ export default function Page() {
           render(row) {
             if (row.status !== 4) {
               return [
-                <Button key='reply' size='sm' onClick={() => setTicketId(row.id)}>
+                <Button key='reply' onClick={() => setTicketId(row.id)}>
                   {t('reply')}
                 </Button>,
                 <ConfirmButton
@@ -166,13 +164,25 @@ export default function Page() {
           if (!open) setTicketId(null);
         }}
       >
-        <DrawerContent className='container mx-auto h-screen'>
+        <DrawerContent className='container mx-auto h-screen *:select-text'>
           <DrawerHeader className='border-b text-left'>
             <DrawerTitle>{ticket?.title}</DrawerTitle>
-            <DrawerDescription>{ticket?.description}</DrawerDescription>
           </DrawerHeader>
           <ScrollArea className='h-full overflow-hidden' ref={scrollRef}>
             <div className='flex h-full flex-col gap-4 p-4'>
+              {/* 显示工单描述作为第一条用户消息 */}
+              {ticket?.description && (
+                <div className='flex items-center gap-4'>
+                  <div className='flex flex-col gap-1'>
+                    <p className='text-muted-foreground text-sm'>{formatDate(ticket.created_at)}</p>
+                    <p className='bg-accent w-fit rounded-lg p-2 font-medium'>
+                      {ticket.description}
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {/* 显示后续跟进消息 */}
               {ticket?.follow?.map((item) => (
                 <div
                   key={item.id}
@@ -193,7 +203,8 @@ export default function Page() {
                     >
                       {item.type === 1 && item.content}
                       {item.type === 2 && (
-                        <NextImage
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img
                           src={item.content!}
                           width={300}
                           height={300}

apps/admin/app/dashboard/tool/page.tsx

@@ -1,351 +0,0 @@
-'use client';
-
-import { getSystemLog, getVersion, restartSystem } from '@/services/admin/tool';
-import { useQuery } from '@tanstack/react-query';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@workspace/ui/components/accordion';
-import {
-  AlertDialog,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '@workspace/ui/components/alert-dialog';
-import { Badge } from '@workspace/ui/components/badge';
-import { Button } from '@workspace/ui/components/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@workspace/ui/components/card';
-import { ScrollArea } from '@workspace/ui/components/scroll-area';
-import { Icon } from '@workspace/ui/custom-components/icon';
-import { formatDate } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-import packageJson from '../../../../../package.json';
-
-const getLogLevelColor = (level: string) => {
-  const colorMap: { [key: string]: string } = {
-    INFO: 'bg-blue-100 text-blue-800 hover:bg-blue-200',
-    WARN: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200',
-    ERROR: 'bg-red-100 text-red-800 hover:bg-red-200',
-  };
-  return colorMap[level] || 'bg-gray-100 text-gray-800 hover:bg-gray-200';
-};
-
-export default function Page() {
-  const t = useTranslations('tool');
-  const {
-    data: logs,
-    refetch,
-    isLoading,
-  } = useQuery({
-    queryKey: ['getSystemLog'],
-    queryFn: async () => {
-      const { data } = await getSystemLog();
-      return data.data?.list || [];
-    },
-  });
-
-  const [openRestart, setOpenRestart] = useState(false);
-  const [isRestarting, setIsRestarting] = useState(false);
-
-  const { data: latestReleases } = useQuery({
-    queryKey: ['getLatestReleases'],
-    queryFn: async () => {
-      try {
-        const [webResponse, serverResponse] = await Promise.all([
-          fetch('https://api.github.com/repos/perfect-panel/ppanel-web/releases/latest'),
-          fetch('https://api.github.com/repos/perfect-panel/server/releases/latest'),
-        ]);
-
-        const webData = webResponse.ok ? await webResponse.json() : null;
-        const serverData = serverResponse.ok ? await serverResponse.json() : null;
-
-        return {
-          web: webData
-            ? {
-                version: webData.tag_name,
-                url: webData.html_url,
-                publishedAt: webData.published_at,
-              }
-            : null,
-          server: serverData
-            ? {
-                version: serverData.tag_name,
-                url: serverData.html_url,
-                publishedAt: serverData.published_at,
-              }
-            : null,
-        };
-      } catch (error) {
-        console.error('Failed to fetch latest releases:', error);
-        return { web: null, server: null };
-      }
-    },
-    staleTime: 60 * 60 * 1000,
-    retry: 1,
-    retryDelay: 10000,
-  });
-
-  // 检查是否有新版本
-  const hasNewVersion =
-    latestReleases?.web && packageJson.version !== latestReleases.web.version.replace(/^v/, '');
-
-  const { data: systemInfo } = useQuery({
-    queryKey: ['getVersion'],
-    queryFn: async () => {
-      const { data } = await getVersion();
-
-      const versionString = data.data?.version || '';
-      const releaseVersionRegex = /^[Vv]?\d+\.\d+\.\d+$/;
-      const timeMatch = versionString.match(/\(([^)]+)\)/);
-      const timeInBrackets = timeMatch ? timeMatch[1] : '';
-
-      const versionWithoutTime = versionString.replace(/\([^)]*\)/, '').trim();
-      const isDevelopment = !releaseVersionRegex.test(versionWithoutTime);
-
-      let baseVersion = versionWithoutTime;
-      let versionSuffix = '';
-      let lastUpdated = '';
-
-      if (isDevelopment && versionWithoutTime.includes('-')) {
-        const parts = versionWithoutTime.split('-');
-        baseVersion = parts[0] || versionWithoutTime;
-        versionSuffix = parts.slice(1).join('-');
-      }
-
-      lastUpdated = formatDate(new Date(timeInBrackets || Date.now())) || '';
-
-      const displayVersion =
-        baseVersion.startsWith('V') || baseVersion.startsWith('v')
-          ? baseVersion
-          : `V${baseVersion}`;
-
-      return {
-        isRelease: !isDevelopment,
-        version: displayVersion,
-        lastUpdated,
-      };
-    },
-  });
-
-  const hasServerNewVersion =
-    latestReleases?.server &&
-    systemInfo &&
-    systemInfo.version.replace(/^V/, '') !== latestReleases.server.version.replace(/^v/, '');
-
-  return (
-    <Card className='border-none'>
-      <CardHeader className='flex flex-col items-start justify-between sm:flex-row sm:items-center'>
-        <div>
-          <CardTitle>{t('systemServices')}</CardTitle>
-          <CardDescription>{t('viewLogsAndManage')}</CardDescription>
-        </div>
-        <div className='mt-4 flex flex-col space-y-2 sm:mt-0 sm:flex-row sm:space-x-2 sm:space-y-0'>
-          {/* <AlertDialog>
-            <AlertDialogTrigger asChild>
-              <Button>{t('systemUpgrade')}</Button>
-            </AlertDialogTrigger>
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>{t('confirmSystemUpgrade')}</AlertDialogTitle>
-                <AlertDialogDescription>{t('upgradeDescription')}</AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
-                <AlertDialogAction>{t('confirmUpgrade')}</AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog> */}
-          <AlertDialog open={openRestart} onOpenChange={setOpenRestart}>
-            <AlertDialogTrigger asChild>
-              <Button variant='destructive'>{t('systemReboot')}</Button>
-            </AlertDialogTrigger>
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>{t('confirmSystemReboot')}</AlertDialogTitle>
-                <AlertDialogDescription>{t('rebootDescription')}</AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
-                <Button
-                  onClick={async () => {
-                    setIsRestarting(true);
-                    await restartSystem();
-                    await new Promise((resolve) => setTimeout(resolve, 5000));
-                    setIsRestarting(false);
-                    setOpenRestart(false);
-                  }}
-                  disabled={isRestarting}
-                >
-                  {isRestarting && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
-                  {isRestarting ? t('rebooting') : t('confirmReboot')}
-                </Button>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className='space-y-4'>
-          {/* 版本信息紧凑显示 */}
-          <div className='flex flex-col space-y-2 sm:flex-row sm:space-x-3 sm:space-y-0'>
-            {/* 用户端/管理端版本 */}
-            <div className='bg-muted/30 flex flex-1 items-center justify-between rounded-md p-2'>
-              <div className='flex items-center'>
-                <Icon icon='mdi:web' className='mr-2 h-4 w-4 text-green-600' />
-                <div className='flex items-center space-x-2'>
-                  <span className='text-xs font-medium'>{t('webVersion')}</span>
-                  <Badge variant='default' className='px-1.5 py-0.5 text-xs'>
-                    V{packageJson.version}
-                  </Badge>
-                  {hasNewVersion && (
-                    <Badge variant='destructive' className='animate-pulse px-1.5 py-0.5 text-xs'>
-                      {t('newVersionAvailable')}
-                    </Badge>
-                  )}
-                </div>
-              </div>
-              {hasNewVersion && (
-                <Button
-                  variant='outline'
-                  size='sm'
-                  className='h-6 px-2 text-xs'
-                  onClick={() =>
-                    window.open(
-                      latestReleases?.web?.url ||
-                        'https://github.com/perfect-panel/ppanel-web/releases',
-                      '_blank',
-                    )
-                  }
-                >
-                  <Icon icon='mdi:open-in-new' className='mr-1 h-3 w-3' />
-                  {t('viewNewVersion')}
-                </Button>
-              )}
-            </div>
-
-            {/* 服务端版本 */}
-            <div className='bg-muted/30 flex flex-1 items-center justify-between rounded-md p-2'>
-              <div className='flex items-center'>
-                <Icon icon='mdi:server' className='mr-2 h-4 w-4 text-blue-600' />
-                <div className='flex items-center space-x-2'>
-                  <span className='text-xs font-medium'>{t('serverVersion')}</span>
-                  <Badge
-                    variant={!systemInfo?.isRelease ? 'destructive' : 'default'}
-                    className='px-1.5 py-0.5 text-xs'
-                  >
-                    {systemInfo?.version || 'V1.0.0'}
-                    {!systemInfo?.isRelease && (
-                      <span className='ml-1'>{t('developmentVersion')}</span>
-                    )}
-                  </Badge>
-                  {hasServerNewVersion && (
-                    <Badge variant='destructive' className='animate-pulse px-1.5 py-0.5 text-xs'>
-                      {t('newVersionAvailable')}
-                    </Badge>
-                  )}
-                </div>
-              </div>
-              <div className='flex items-center space-x-2'>
-                {hasServerNewVersion && (
-                  <Button
-                    variant='outline'
-                    size='sm'
-                    className='h-6 px-2 text-xs'
-                    onClick={() =>
-                      window.open(
-                        latestReleases?.server?.url ||
-                          'https://github.com/perfect-panel/server/releases',
-                        '_blank',
-                      )
-                    }
-                  >
-                    <Icon icon='mdi:open-in-new' className='mr-1 h-3 w-3' />
-                    {t('viewNewVersion')}
-                  </Button>
-                )}
-                <div className='text-muted-foreground hidden text-right text-xs sm:block'>
-                  <div className='font-mono'>{systemInfo?.lastUpdated || '--'}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <Card className='overflow-hidden'>
-            <CardHeader className='bg-secondary py-1'>
-              <div className='flex items-center justify-between'>
-                <CardTitle>{t('systemLogs')}</CardTitle>
-                <Button variant='ghost' size='icon' disabled={isLoading} onClick={() => refetch()}>
-                  <Icon
-                    icon='uil:refresh'
-                    className={`h-5 w-5 ${isLoading ? 'animate-spin' : ''}`}
-                  />
-                  <span className='sr-only'>{t('refreshLogs')}</span>
-                </Button>
-              </div>
-            </CardHeader>
-            <CardContent className='p-0'>
-              <ScrollArea className='h-[calc(100dvh-300px)] w-full rounded-md'>
-                {isLoading ? (
-                  <div className='flex h-full items-center justify-center'>
-                    <Icon icon='uil:loading' className='text-primary h-8 w-8 animate-spin' />
-                  </div>
-                ) : (
-                  <Accordion type='single' collapsible className='w-full'>
-                    {logs?.map((log: any, index: number) => (
-                      <AccordionItem key={index} value={`item-${index}`} className='px-4'>
-                        <AccordionTrigger className='hover:no-underline'>
-                          <div className='flex w-full flex-col items-start space-y-2 sm:flex-row sm:items-center sm:space-x-4 sm:space-y-0'>
-                            <span className='text-xs font-medium sm:text-sm'>{log.timestamp}</span>
-                          </div>
-                        </AccordionTrigger>
-                        <AccordionContent className='px-2'>
-                          {Object.entries(log).map(([key, value]) => (
-                            <div
-                              key={key}
-                              className='grid grid-cols-1 gap-2 text-xs sm:grid-cols-2 sm:text-sm'
-                            >
-                              <span className='font-medium'>{key}:</span>
-                              <span className='break-all'>{value as string}</span>
-                            </div>
-                          ))}
-                          {/* <div className='grid grid-cols-1 gap-2 text-xs sm:grid-cols-2 sm:text-sm'>
-                            <div className='font-medium'>{t('ip')}:</div>
-                            <div>{log.ip}</div>
-                            <div className='font-medium'>{t('request')}:</div>
-                            <div className='break-all'>{log.request}</div>
-                            <div className='font-medium'>{t('status')}:</div>
-                            <div>{log.status}</div>
-                            <div className='font-medium'>{t('caller')}:</div>
-                            <div className='break-all'>{log.caller}</div>
-                            <div className='font-medium'>{t('errors')}:</div>
-                            <div className='break-all'>{log.errors || t('none')}</div>
-                            <div className='font-medium'>{t('query')}:</div>
-                            <div className='break-all'>{log.query || t('none')}</div>
-                            <div className='font-medium'>{t('userAgent')}:</div>
-                            <div className='break-all'>{log['user-agent']}</div>
-                          </div> */}
-                        </AccordionContent>
-                      </AccordionItem>
-                    ))}
-                  </Accordion>
-                )}
-              </ScrollArea>
-            </CardContent>
-          </Card>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

apps/admin/app/dashboard/user/[id]/page.tsx

@@ -1,33 +0,0 @@
-import UserOrderList from '@/app/dashboard/order/page';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
-import { getTranslations } from 'next-intl/server';
-import UserLoginHistory from './user-login-history';
-import { UserProfileForm } from './user-profile';
-import UserSubscription from './user-subscription';
-
-export default async function Page({ params }: { params: Promise<{ id: number }> }) {
-  const t = await getTranslations('user');
-  const { id } = await params;
-  return (
-    <Tabs defaultValue='profile'>
-      <TabsList>
-        <TabsTrigger value='profile'>{t('userProfile')}</TabsTrigger>
-        <TabsTrigger value='subscriptions'>{t('userSubscriptions')}</TabsTrigger>
-        <TabsTrigger value='orders'>{t('userOrders')}</TabsTrigger>
-        <TabsTrigger value='logs'>{t('userLogs')}</TabsTrigger>
-      </TabsList>
-      <TabsContent value='profile'>
-        <UserProfileForm />
-      </TabsContent>
-      <TabsContent value='subscriptions'>
-        <UserSubscription userId={id} />
-      </TabsContent>
-      <TabsContent value='orders'>
-        <UserOrderList userId={id} />
-      </TabsContent>
-      <TabsContent value='logs'>
-        <UserLoginHistory />
-      </TabsContent>
-    </Tabs>
-  );
-}

apps/admin/app/dashboard/user/[id]/user-login-history/index.tsx

@@ -1,55 +0,0 @@
-'use client';
-
-import { IpLink } from '@/components/ip-link';
-import { ProTable } from '@/components/pro-table';
-import { getUserLoginLogs } from '@/services/admin/user';
-import { Badge } from '@workspace/ui/components/badge';
-import { formatDate } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { useParams } from 'next/navigation';
-
-export default function UserLoginHistory() {
-  const t = useTranslations('user');
-  const { id } = useParams<{ id: string }>();
-
-  return (
-    <ProTable<API.UserLoginLog, Record<string, unknown>>
-      columns={[
-        {
-          accessorKey: 'success',
-          header: t('loginStatus'),
-          cell: ({ row }) => (
-            <Badge variant={row.getValue('success') ? 'default' : 'destructive'}>
-              {row.getValue('success') ? t('success') : t('failed')}
-            </Badge>
-          ),
-        },
-        {
-          accessorKey: 'login_ip',
-          header: t('loginIp'),
-          cell: ({ row }) => <IpLink ip={row.getValue('login_ip')} />,
-        },
-        {
-          accessorKey: 'user_agent',
-          header: t('userAgent'),
-        },
-        {
-          accessorKey: 'created_at',
-          header: t('loginTime'),
-          cell: ({ row }) => formatDate(row.getValue('created_at')),
-        },
-      ]}
-      request={async (pagination, filter) => {
-        const { data } = await getUserLoginLogs({
-          user_id: Number(id),
-          ...pagination,
-          ...filter,
-        });
-        return {
-          list: data.data?.list || [],
-          total: data.data?.total || 0,
-        };
-      }}
-    />
-  );
-}

apps/admin/app/dashboard/user/[id]/user-profile/index.tsx

@@ -1,38 +0,0 @@
-'use client';
-
-import { getUserDetail } from '@/services/admin/user';
-import { useQuery } from '@tanstack/react-query';
-import { useParams } from 'next/navigation';
-import { AuthMethodsForm } from './auth-methods-form';
-import { BasicInfoForm } from './basic-info-form';
-import { NotifySettingsForm } from './notify-settings-form';
-
-export function UserProfileForm() {
-  const { id } = useParams<{ id: string }>();
-
-  const { data: user, refetch } = useQuery({
-    queryKey: ['user', id],
-    queryFn: async () => {
-      const { data } = await getUserDetail({
-        id: Number(id),
-      });
-      return data.data;
-    },
-  });
-
-  if (!user) return null;
-
-  return (
-    <div className='grid gap-4 md:grid-cols-2 xl:grid-cols-3'>
-      <div className='md:col-span-2 xl:col-span-1'>
-        <BasicInfoForm user={user} refetch={refetch} />
-      </div>
-      <div>
-        <NotifySettingsForm user={user} refetch={refetch} />
-      </div>
-      <div>
-        <AuthMethodsForm user={user} refetch={refetch} />
-      </div>
-    </div>
-  );
-}

apps/admin/app/dashboard/user/[id]/user-subscription/subscription-detail.tsx

@@ -1,216 +0,0 @@
-'use client';
-
-import { Display } from '@/components/display';
-import { IpLink } from '@/components/ip-link';
-import { ProTable } from '@/components/pro-table';
-import {
-  getUserSubscribeDevices,
-  getUserSubscribeLogs,
-  getUserSubscribeTrafficLogs,
-  kickOfflineByUserDevice,
-} from '@/services/admin/user';
-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 { Switch } from '@workspace/ui/components/switch';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
-import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
-import { formatDate } from '@workspace/ui/utils';
-import { useTranslations } from 'next-intl';
-import { ReactNode, useState } from 'react';
-import { toast } from 'sonner';
-
-export function SubscriptionDetail({
-  trigger,
-  userId,
-  subscriptionId,
-}: {
-  trigger: ReactNode;
-  userId: number;
-  subscriptionId: number;
-}) {
-  const t = useTranslations('user');
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{trigger}</DialogTrigger>
-      <DialogContent className='max-w-5xl'>
-        <DialogHeader>
-          <DialogTitle>{t('subscriptionDetails')}</DialogTitle>
-        </DialogHeader>
-        <div className='mt-4'>
-          <Tabs defaultValue='logs'>
-            <TabsList className='w-full'>
-              <TabsTrigger value='logs' className='flex-1'>
-                {t('subscriptionLogs')}
-              </TabsTrigger>
-              <TabsTrigger value='traffic' className='flex-1'>
-                {t('trafficLogs')}
-              </TabsTrigger>
-              <TabsTrigger value='devices' className='flex-1'>
-                {t('onlineDevices')}
-              </TabsTrigger>
-            </TabsList>
-            <div className='mt-4 max-h-[60dvh] overflow-y-auto'>
-              <TabsContent value='logs'>
-                <ProTable<API.UserSubscribeLog, Record<string, unknown>>
-                  columns={[
-                    {
-                      accessorKey: 'ip',
-                      header: 'IP',
-                      cell: ({ row }) => <IpLink ip={row.getValue('ip')} />,
-                    },
-                    {
-                      accessorKey: 'user_agent',
-                      header: t('userAgent'),
-                    },
-                    {
-                      accessorKey: 'token',
-                      header: t('token'),
-                    },
-                    {
-                      accessorKey: 'created_at',
-                      header: t('time'),
-                      cell: ({ row }) => formatDate(row.getValue('created_at')),
-                    },
-                  ]}
-                  request={async (pagination) => {
-                    const { data } = await getUserSubscribeLogs({
-                      user_id: userId,
-                      subscribe_id: subscriptionId,
-                      ...pagination,
-                    });
-                    return {
-                      list: data.data?.list || [],
-                      total: data.data?.total || 0,
-                    };
-                  }}
-                />
-              </TabsContent>
-              <TabsContent value='traffic'>
-                <ProTable<API.TrafficLog, Record<string, unknown>>
-                  columns={[
-                    {
-                      accessorKey: 'download',
-                      header: t('download'),
-                      cell: ({ row }) => (
-                        <Display type='traffic' value={row.getValue('download')} />
-                      ),
-                    },
-                    {
-                      accessorKey: 'upload',
-                      header: t('upload'),
-                      cell: ({ row }) => <Display type='traffic' value={row.getValue('upload')} />,
-                    },
-                    {
-                      accessorKey: 'timestamp',
-                      header: t('time'),
-                      cell: ({ row }) => formatDate(row.getValue('timestamp')),
-                    },
-                  ]}
-                  request={async (pagination) => {
-                    const { data } = await getUserSubscribeTrafficLogs({
-                      user_id: userId,
-                      subscribe_id: subscriptionId,
-                      ...pagination,
-                    } as API.GetUserSubscribeTrafficLogsParams);
-                    return {
-                      list: data.data?.list || [],
-                      total: data.data?.total || 0,
-                    };
-                  }}
-                />
-              </TabsContent>
-              <TabsContent value='devices'>
-                <ProTable<API.UserDevice, Record<string, unknown>>
-                  columns={[
-                    {
-                      accessorKey: 'enabled',
-                      header: t('enable'),
-                      cell: ({ row }) => (
-                        <Switch
-                          checked={row.getValue('enabled')}
-                          onChange={(checked) => {
-                            console.log('Switch:', checked);
-                          }}
-                        />
-                      ),
-                    },
-                    {
-                      accessorKey: 'id',
-                      header: 'ID',
-                    },
-                    {
-                      accessorKey: 'identifier',
-                      header: 'IMEI',
-                    },
-                    {
-                      accessorKey: 'user_agent',
-                      header: t('userAgent'),
-                    },
-                    {
-                      accessorKey: 'ip',
-                      header: 'IP',
-                      cell: ({ row }) => <IpLink ip={row.getValue('ip')} />,
-                    },
-                    {
-                      accessorKey: 'online',
-                      header: t('loginStatus'),
-                      cell: ({ row }) => (
-                        <Badge variant={row.getValue('online') ? 'default' : 'destructive'}>
-                          {row.getValue('online') ? t('online') : t('offline')}
-                        </Badge>
-                      ),
-                    },
-                    {
-                      accessorKey: 'updated_at',
-                      header: t('lastSeen'),
-                      cell: ({ row }) => formatDate(row.getValue('updated_at')),
-                    },
-                  ]}
-                  request={async (pagination) => {
-                    const { data } = await getUserSubscribeDevices({
-                      user_id: userId,
-                      subscribe_id: subscriptionId,
-                      ...pagination,
-                    });
-                    return {
-                      list: data.data?.list || [],
-                      total: data.data?.total || 0,
-                    };
-                  }}
-                  actions={{
-                    render: (row) => {
-                      if (!row.identifier) return [];
-                      return [
-                        <ConfirmButton
-                          key='offline'
-                          trigger={<Button variant='destructive'>{t('confirmOffline')}</Button>}
-                          title={t('confirmOffline')}
-                          description={t('kickOfflineConfirm', { ip: row.ip })}
-                          onConfirm={async () => {
-                            await kickOfflineByUserDevice({ id: row.id });
-                            toast.success(t('kickOfflineSuccess'));
-                          }}
-                          cancelText={t('cancel')}
-                          confirmText={t('confirm')}
-                        />,
-                      ];
-                    },
-                  }}
-                />
-              </TabsContent>
-            </div>
-          </Tabs>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/admin/app/dashboard/user/page.tsx

@@ -3,24 +3,51 @@
 import { Display } from '@/components/display';
 import { ProTable, ProTableActions } from '@/components/pro-table';
 import { getSubscribeList } from '@/services/admin/subscribe';
-import { createUser, deleteUser, getUserList, updateUserBasicInfo } from '@/services/admin/user';
+import {
+  createUser,
+  deleteUser,
+  getUserDetail,
+  getUserList,
+  updateUserBasicInfo,
+} from '@/services/admin/user';
+import { formatDate } from '@/utils/common';
 import { useQuery } from '@tanstack/react-query';
 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 { ScrollArea } from '@workspace/ui/components/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  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 { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
-import { formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { UserDetail } from './user-detail';
 import UserForm from './user-form';
+import { AuthMethodsForm } from './user-profile/auth-methods-form';
+import { BasicInfoForm } from './user-profile/basic-info-form';
+import { NotifySettingsForm } from './user-profile/notify-settings-form';
+import UserSubscription from './user-subscription';
 
 export default function Page() {
   const t = useTranslations('user');
   const [loading, setLoading] = useState(false);
   const ref = useRef<ProTableActions>(null);
+  const sp = useSearchParams();
 
   const { data: subscribeList } = useQuery({
     queryKey: ['getSubscribeList', 'all'],
@@ -33,9 +60,17 @@ export default function Page() {
     },
   });
 
+  const initialFilters = {
+    search: sp.get('search') || undefined,
+    user_id: sp.get('user_id') || undefined,
+    subscribe_id: sp.get('subscribe_id') || undefined,
+    user_subscribe_id: sp.get('user_subscribe_id') || undefined,
+  };
+
   return (
     <ProTable<API.User, API.GetUserListParams>
       action={ref}
+      initialFilters={initialFilters}
       header={{
         title: t('userList'),
         toolbar: (
@@ -180,9 +215,8 @@ export default function Page() {
       actions={{
         render: (row) => {
           return [
-            <Button key='detail' asChild>
+            <ProfileSheet key='profile' userId={row.id} />,
-              <Link href={`/dashboard/user/${row.id}`}>{t('edit')}</Link>
+            <SubscriptionSheet key='subscription' userId={row.id} />,
-            </Button>,
             <ConfirmButton
               key='edit'
               trigger={<Button variant='destructive'>{t('delete')}</Button>}
@@ -196,9 +230,102 @@ export default function Page() {
               cancelText={t('cancel')}
               confirmText={t('confirm')}
             />,
+            <DropdownMenu key='more'>
+              <DropdownMenuTrigger asChild>
+                <Button variant='outline'>{t('more')}</Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align='end'>
+                <DropdownMenuItem asChild>
+                  <Link href={`/dashboard/order?user_id=${row.id}`}>{t('orderList')}</Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link href={`/dashboard/log/login?user_id=${row.id}`}>{t('loginLogs')}</Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link href={`/dashboard/log/balance?user_id=${row.id}`}>{t('balanceLogs')}</Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link href={`/dashboard/log/commission?user_id=${row.id}`}>
+                    {t('commissionLogs')}
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link href={`/dashboard/log/gift?user_id=${row.id}`}>{t('giftLogs')}</Link>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>,
           ];
         },
       }}
     />
   );
 }
+
+function ProfileSheet({ userId }: { userId: number }) {
+  const t = useTranslations('user');
+  const [open, setOpen] = useState(false);
+  const { data: user, refetch } = useQuery({
+    enabled: open,
+    queryKey: ['user', userId],
+    queryFn: async () => {
+      const { data } = await getUserDetail({ id: userId });
+      return data.data as API.User;
+    },
+  });
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant='default'>{t('edit')}</Button>
+      </SheetTrigger>
+      <SheetContent side='right' className='w-[700px] max-w-full md:max-w-screen-lg'>
+        <SheetHeader>
+          <SheetTitle>
+            {t('userProfile')} · ID: {userId}
+          </SheetTitle>
+        </SheetHeader>
+        {user && (
+          <ScrollArea className='h-[calc(100dvh-140px)] p-2'>
+            <Tabs defaultValue='basic'>
+              <TabsList className='mb-3'>
+                <TabsTrigger value='basic'>{t('basicInfoTitle')}</TabsTrigger>
+                <TabsTrigger value='notify'>{t('notifySettingsTitle')}</TabsTrigger>
+                <TabsTrigger value='auth'>{t('authMethodsTitle')}</TabsTrigger>
+              </TabsList>
+              <TabsContent value='basic' className='mt-0'>
+                <BasicInfoForm user={user} refetch={refetch as any} />
+              </TabsContent>
+              <TabsContent value='notify' className='mt-0'>
+                <NotifySettingsForm user={user} refetch={refetch as any} />
+              </TabsContent>
+              <TabsContent value='auth' className='mt-0'>
+                <AuthMethodsForm user={user} refetch={refetch as any} />
+              </TabsContent>
+            </Tabs>
+          </ScrollArea>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function SubscriptionSheet({ userId }: { userId: number }) {
+  const t = useTranslations('user');
+  const [open, setOpen] = useState(false);
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant='secondary'>订阅</Button>
+      </SheetTrigger>
+      <SheetContent side='right' className='w-[1000px] max-w-full md:max-w-screen-xl'>
+        <SheetHeader>
+          <SheetTitle>
+            {t('subscriptionList')} · ID: {userId}
+          </SheetTitle>
+        </SheetHeader>
+        <div className='mt-2'>
+          <UserSubscription userId={userId} />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/user/user-detail.tsx

@@ -2,14 +2,23 @@
 
 import { Display } from '@/components/display';
 import { getUserDetail, getUserSubscribeById } from '@/services/admin/user';
+import { formatDate } from '@/utils/common';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@workspace/ui/components/hover-card';
-import { formatBytes, formatDate } from '@workspace/ui/utils';
+import { formatBytes } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
-export function UserSubscribeDetail({ id, enabled }: { id: number; enabled: boolean }) {
+export function UserSubscribeDetail({
+  id,
+  enabled,
+  hoverCard = false,
+}: {
+  id: number;
+  enabled: boolean;
+  hoverCard?: boolean;
+}) {
   const t = useTranslations('user');
 
   const { data } = useQuery({
@@ -26,7 +35,7 @@ export function UserSubscribeDetail({ id, enabled }: { id: number; enabled: bool
   const usedTraffic = data ? data.upload + data.download : 0;
   const totalTraffic = data?.traffic || 0;
 
-  return (
+  const subscribeContent = (
     <div className='space-y-4'>
       <div>
         <h3 className='mb-2 text-sm font-medium'>{t('subscriptionInfo')}</h3>
@@ -68,19 +77,11 @@ export function UserSubscribeDetail({ id, enabled }: { id: number; enabled: bool
         </div>
       </div>
 
+      {!hoverCard && (
         <div>
           <h3 className='mb-2 text-sm font-medium'>
             {t('userInfo')}
-          {data?.user_id && (
+            {/* Removed link to legacy user detail page */}
-            <Button
-              variant='link'
-              size='sm'
-              className='text-primary ml-2 h-auto p-0 text-xs'
-              asChild
-            >
-              <Link href={`/dashboard/user/${data.user_id}`}>{t('viewDetails')}</Link>
-            </Button>
-          )}
           </h3>
           <ul className='grid gap-3'>
             <li className='flex items-center justify-between font-semibold'>
@@ -111,8 +112,24 @@ export function UserSubscribeDetail({ id, enabled }: { id: number; enabled: bool
             </li>
           </ul>
         </div>
+      )}
     </div>
   );
+
+  if (hoverCard) {
+    return (
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <Button variant='link' className='p-0'>
+            {data?.subscribe?.name || t('loading')}
+          </Button>
+        </HoverCardTrigger>
+        <HoverCardContent className='w-96'>{subscribeContent}</HoverCardContent>
+      </HoverCard>
+    );
+  }
+
+  return subscribeContent;
 }
 
 export function UserDetail({ id }: { id: number }) {
@@ -129,13 +146,15 @@ export function UserDetail({ id }: { id: number }) {
 
   if (!id) return '--';
 
+  const identifier =
+    data?.auth_methods.find((m) => m.auth_type === 'email')?.auth_identifier ||
+    data?.auth_methods[0]?.auth_identifier;
+
   return (
     <HoverCard>
       <HoverCardTrigger asChild>
         <Button variant='link' className='p-0' asChild>
-          <Link href={`/dashboard/user/${id}`}>
+          <Link href={`/dashboard/user?user_id=${id}`}>{identifier || t('loading')}</Link>
-            {data?.auth_methods[0]?.auth_identifier || t('loading')}
-          </Link>
         </Button>
       </HoverCardTrigger>
       <HoverCardContent>

apps/admin/app/dashboard/user/user-form.tsx

@@ -58,6 +58,8 @@ export default function UserForm<T extends Record<string, any>>({
     password: z.string().optional(),
     referer_id: z.number().optional(),
     refer_code: z.string().optional(),
+    referral_percentage: z.number().optional(),
+    only_first_purchase: z.boolean().optional(),
     is_admin: z.boolean().optional(),
     balance: z.number().optional(),
     gift_amount: z.number().optional(),
@@ -140,7 +142,7 @@ export default function UserForm<T extends Record<string, any>>({
                                     placeholder={t('areaCodePlaceholder')}
                                     value={field.value}
                                     onChange={(value) => {
-                                      form.setValue(field.name, value.phone);
+                                      form.setValue(field.name, value.phone as string);
                                     }}
                                   />
                                 </FormControl>
@@ -218,6 +220,41 @@ export default function UserForm<T extends Record<string, any>>({
                   </FormItem>
                 )}
               />
+              <FormField
+                control={form.control}
+                name='referral_percentage'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('referralPercentage')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        type='number'
+                        min={0}
+                        max={100}
+                        placeholder={t('referralPercentagePlaceholder')}
+                        {...field}
+                        suffix='%'
+                        onValueChange={(value) => {
+                          form.setValue(field.name, Number(value));
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='only_first_purchase'
+                render={({ field }) => (
+                  <FormItem className='flex items-center justify-between space-x-2'>
+                    <FormLabel>{t('onlyFirstPurchase')}</FormLabel>
+                    <FormControl>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
               <FormField
                 control={form.control}
                 name='balance'

apps/admin/app/dashboard/user/user-profile/basic-info-form.tsx

@@ -30,6 +30,8 @@ const basicInfoSchema = z.object({
   gift_amount: z.number().optional(),
   refer_code: z.string().optional(),
   referer_id: z.number().optional(),
+  referral_percentage: z.number().optional(),
+  only_first_purchase: z.boolean().optional(),
   is_admin: z.boolean().optional(),
   password: z.string().optional(),
   enable: z.boolean(),
@@ -52,6 +54,8 @@ export function BasicInfoForm({ user, refetch }: { user: API.User; refetch: () =
       gift_amount: user.gift_amount,
       refer_code: user.refer_code,
       referer_id: user.referer_id,
+      referral_percentage: user.referral_percentage,
+      only_first_purchase: user.only_first_purchase,
       is_admin: user.is_admin,
       enable: user.enable,
     },
@@ -216,6 +220,41 @@ export function BasicInfoForm({ user, refetch }: { user: API.User; refetch: () =
                 )}
               />
             </div>
+
+            <FormField
+              control={form.control}
+              name='referral_percentage'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('referralPercentage')}</FormLabel>
+                  <FormControl>
+                    <EnhancedInput
+                      type='number'
+                      min={0}
+                      max={100}
+                      value={field.value}
+                      suffix='%'
+                      onValueChange={(value) => {
+                        form.setValue(field.name, value as number);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='only_first_purchase'
+              render={({ field }) => (
+                <FormItem className='flex items-center justify-between space-x-2'>
+                  <FormLabel>{t('onlyFirstPurchase')}</FormLabel>
+                  <FormControl>
+                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
             <FormField
               control={form.control}
               name='avatar'

apps/admin/app/dashboard/user/user-subscription/index.tsx

@@ -2,16 +2,24 @@
 
 import { Display } from '@/components/display';
 import { ProTable, ProTableActions } from '@/components/pro-table';
+import useGlobalStore from '@/config/use-global';
 import {
   createUserSubscribe,
   deleteUserSubscribe,
   getUserSubscribe,
   updateUserSubscribe,
 } from '@/services/admin/user';
+import { formatDate } from '@/utils/common';
 import { Button } from '@workspace/ui/components/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@workspace/ui/components/dropdown-menu';
 import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
-import { formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
+import Link from 'next/link';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { SubscriptionDetail } from './subscription-detail';
@@ -21,6 +29,7 @@ export default function UserSubscription({ userId }: { userId: number }) {
   const t = useTranslations('user');
   const [loading, setLoading] = useState(false);
   const ref = useRef<ProTableActions>(null);
+  const { getUserSubscribeUrls } = useGlobalStore();
 
   return (
     <ProTable<API.UserSubscribe, Record<string, unknown>>
@@ -139,12 +148,16 @@ export default function UserSubscription({ userId }: { userId: number }) {
                 return true;
               }}
             />,
-            <SubscriptionDetail
+            <Button
-              key='detail'
+              key='copy'
-              trigger={<Button variant='secondary'>{t('detail')}</Button>}
+              variant='secondary'
-              userId={userId}
+              onClick={async () => {
-              subscriptionId={row.id}
+                await navigator.clipboard.writeText(getUserSubscribeUrls(row.token)[0] || '');
-            />,
+                toast.success(t('copySuccess'));
+              }}
+            >
+              {t('copySubscription')}
+            </Button>,
             <ConfirmButton
               key='delete'
               trigger={<Button variant='destructive'>{t('delete')}</Button>}
@@ -158,9 +171,64 @@ export default function UserSubscription({ userId }: { userId: number }) {
               cancelText={t('cancel')}
               confirmText={t('confirm')}
             />,
+            <RowMoreActions key='more' userId={userId} subId={row.id} />,
           ];
         },
       }}
     />
   );
 }
+
+function RowMoreActions({ userId, subId }: { userId: number; subId: number }) {
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const t = useTranslations('user');
+  return (
+    <div className='inline-flex'>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant='outline'>{t('more')}</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align='end'>
+          <DropdownMenuItem asChild>
+            <Link href={`/dashboard/log/subscribe?user_id=${userId}&user_subscribe_id=${subId}`}>
+              {t('subscriptionLogs')}
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <Link
+              href={`/dashboard/log/reset-subscribe?user_id=${userId}&user_subscribe_id=${subId}`}
+            >
+              {t('resetLogs')}
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <Link
+              href={`/dashboard/log/subscribe-traffic?user_id=${userId}&user_subscribe_id=${subId}`}
+            >
+              {t('trafficStats')}
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <Link href={`/dashboard/log/traffic-details?user_id=${userId}&subscribe_id=${subId}`}>
+              {t('trafficDetails')}
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={(e) => {
+              e.preventDefault();
+              triggerRef.current?.click();
+            }}
+          >
+            {t('onlineDevices')}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <SubscriptionDetail
+        trigger={<Button ref={triggerRef} className='hidden' />}
+        userId={userId}
+        subscriptionId={subId}
+      />
+    </div>
+  );
+}

apps/admin/app/dashboard/user/user-subscription/subscription-detail.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { IpLink } from '@/components/ip-link';
+import { ProTable } from '@/components/pro-table';
+import { getUserSubscribeDevices, kickOfflineByUserDevice } from '@/services/admin/user';
+import { formatDate } from '@/utils/common';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@workspace/ui/components/sheet';
+import { Switch } from '@workspace/ui/components/switch';
+import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
+import { useTranslations } from 'next-intl';
+import { ReactNode, useState } from 'react';
+import { toast } from 'sonner';
+
+export function SubscriptionDetail({
+  trigger,
+  userId,
+  subscriptionId,
+}: {
+  trigger: ReactNode;
+  userId: number;
+  subscriptionId: number;
+}) {
+  const t = useTranslations('user');
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>{trigger}</SheetTrigger>
+      <SheetContent side='right' className='w-[700px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{t('onlineDevices')}</SheetTitle>
+        </SheetHeader>
+        <div className='mt-4 max-h-[calc(100dvh-120px)] overflow-y-auto'>
+          <ProTable<API.UserDevice, Record<string, unknown>>
+            columns={[
+              {
+                accessorKey: 'enabled',
+                header: t('enable'),
+                cell: ({ row }) => (
+                  <Switch
+                    checked={row.getValue('enabled')}
+                    onChange={(checked) => {
+                      console.log('Switch:', checked);
+                    }}
+                  />
+                ),
+              },
+              { accessorKey: 'id', header: 'ID' },
+              { accessorKey: 'identifier', header: 'IMEI' },
+              { accessorKey: 'user_agent', header: t('userAgent') },
+              {
+                accessorKey: 'ip',
+                header: 'IP',
+                cell: ({ row }) => <IpLink ip={row.getValue('ip')} />,
+              },
+              {
+                accessorKey: 'online',
+                header: t('loginStatus'),
+                cell: ({ row }) => (
+                  <Badge variant={row.getValue('online') ? 'default' : 'destructive'}>
+                    {row.getValue('online') ? t('online') : t('offline')}
+                  </Badge>
+                ),
+              },
+              {
+                accessorKey: 'updated_at',
+                header: t('lastSeen'),
+                cell: ({ row }) => formatDate(row.getValue('updated_at')),
+              },
+            ]}
+            request={async (pagination) => {
+              const { data } = await getUserSubscribeDevices({
+                user_id: userId,
+                subscribe_id: subscriptionId,
+                ...pagination,
+              });
+              return {
+                list: data.data?.list || [],
+                total: data.data?.total || 0,
+              };
+            }}
+            actions={{
+              render: (row) => {
+                if (!row.identifier) return [];
+                return [
+                  <ConfirmButton
+                    key='offline'
+                    trigger={<Button variant='destructive'>{t('confirmOffline')}</Button>}
+                    title={t('confirmOffline')}
+                    description={t('kickOfflineConfirm', { ip: row.ip })}
+                    onConfirm={async () => {
+                      await kickOfflineByUserDevice({ id: row.id });
+                      toast.success(t('kickOfflineSuccess'));
+                    }}
+                    cancelText={t('cancel')}
+                    confirmText={t('confirm')}
+                  />,
+                ];
+              },
+            }}
+          />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/dashboard/user/user-subscription/subscription-form.tsx

@@ -205,7 +205,7 @@ export function SubscriptionForm({ trigger, title, loading, initialData, onSubmi
                     <FormControl>
                       <DatePicker
                         placeholder={t('permanent')}
-                        value={field.value}
+                        value={field.value ?? undefined}
                         onChange={(value) => {
                           if (value === field.value) {
                             form.setValue(field.name, 0);

apps/admin/components/billing.tsx

@@ -21,12 +21,12 @@ async function getBillingURL() {
       'https://api.github.com/repos/perfect-panel/ppanel-assets/commits',
     );
     const json = await response.json();
-    const version = json[0]?.sha;
+    const version = json[0]?.sha || 'latest';
-    const url = new URL('https://cdn.jsdelivr.net/gh/perfect-panel/ppanel-assets');
+    const url = new URL('https://cdn.jsdmirror.com/gh/perfect-panel/ppanel-assets');
     url.pathname += `@${version}/billing/index.json`;
     return url.toString();
   } catch (error) {
-    return 'https://cdn.jsdelivr.net/gh/perfect-panel/ppanel-assets/billing/index.json';
+    return 'https://cdn.jsdmirror.com/gh/perfect-panel/ppanel-assets/billing/index.json';
   }
 }
 

apps/admin/components/dashboard/revenue-statistics-card.tsx

@@ -36,6 +36,7 @@ import { Empty } from '../empty';
 
 export function RevenueStatisticsCard() {
   const t = useTranslations('index');
+  const locale = useLocale();
 
   const IncomeStatisticsConfig = {
     new_purchase: {
@@ -46,9 +47,12 @@ export function RevenueStatisticsCard() {
       label: t('repurchase'),
       color: 'hsl(var(--chart-2))',
     },
+    total: {
+      label: t('totalIncome'),
+      color: 'hsl(var(--chart-3))',
+    },
   };
 
-  const locale = useLocale();
   const { data: RevenueStatistics } = useQuery({
     queryKey: ['queryRevenueStatistics'],
     queryFn: async () => {
@@ -175,6 +179,10 @@ export function RevenueStatisticsCard() {
                       date: item.date,
                       new_purchase: unitConversion('centsToDollars', item.new_order_amount),
                       repurchase: unitConversion('centsToDollars', item.renewal_order_amount),
+                      total: unitConversion(
+                        'centsToDollars',
+                        item.new_order_amount + item.renewal_order_amount,
+                      ),
                     })) || []
                   }
                 >
@@ -182,18 +190,60 @@ export function RevenueStatisticsCard() {
                   <XAxis
                     dataKey='date'
                     tickLine={false}
-                    tickMargin={10}
                     axisLine={false}
+                    tickMargin={10}
                     tickFormatter={(value) => {
-                      return new Date(value).toLocaleDateString(locale, {
+                      const [year, month, day] = value.split('-');
+                      return new Date(year, month - 1, day).toLocaleDateString(locale, {
                         month: 'short',
                         day: 'numeric',
                       });
                     }}
                   />
-                  <Bar dataKey='new_purchase' fill='var(--color-new_purchase)' radius={4} />
+                  <Bar
-                  <Bar dataKey='repurchase' fill='var(--color-repurchase)' radius={4} />
+                    dataKey='new_purchase'
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                    fill='var(--color-new_purchase)'
+                    radius={[0, 0, 4, 4]}
+                    stackId='a'
+                  />
+                  <Bar
+                    dataKey='repurchase'
+                    fill='var(--color-repurchase)'
+                    radius={[4, 4, 0, 0]}
+                    stackId='a'
+                  />
+                  <ChartTooltip
+                    content={
+                      <ChartTooltipContent
+                        formatter={(value, name, item, index) => (
+                          <>
+                            <div
+                              className='h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]'
+                              style={
+                                {
+                                  '--color-bg': `var(--color-${name})`,
+                                } as React.CSSProperties
+                              }
+                            />
+                            {IncomeStatisticsConfig[name as keyof typeof IncomeStatisticsConfig]
+                              ?.label || name}
+                            <div className='text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums'>
+                              {value}
+                            </div>
+                            {index === 1 && (
+                              <div className='text-foreground flex basis-full items-center border-t pt-1.5 text-xs font-medium'>
+                                {t('totalIncome')}
+                                <div className='text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums'>
+                                  {item.payload.total}
+                                </div>
+                              </div>
+                            )}
+                          </>
+                        )}
+                      />
+                    }
+                    cursor={false}
+                  />
                   <ChartLegend content={<ChartLegendContent />} />
                 </BarChart>
               </ChartContainer>
@@ -247,6 +297,10 @@ export function RevenueStatisticsCard() {
                       date: item.date,
                       new_purchase: unitConversion('centsToDollars', item.new_order_amount),
                       repurchase: unitConversion('centsToDollars', item.renewal_order_amount),
+                      total: unitConversion(
+                        'centsToDollars',
+                        item.new_order_amount + item.renewal_order_amount,
+                      ),
                     })) || []
                   }
                   margin={{
@@ -259,14 +313,45 @@ export function RevenueStatisticsCard() {
                     dataKey='date'
                     tickLine={false}
                     axisLine={false}
-                    tickMargin={8}
                     tickFormatter={(value) => {
-                      return new Date(value).toLocaleDateString(locale, {
+                      const [year, month] = value.split('-');
+                      return new Date(year, month - 1).toLocaleDateString(locale, {
                         month: 'short',
                       });
                     }}
                   />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent indicator='dot' />} />
+                  <ChartTooltip
+                    cursor={false}
+                    content={
+                      <ChartTooltipContent
+                        formatter={(value, name, item, index) => (
+                          <>
+                            <div
+                              className='h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]'
+                              style={
+                                {
+                                  '--color-bg': `var(--color-${name})`,
+                                } as React.CSSProperties
+                              }
+                            />
+                            {IncomeStatisticsConfig[name as keyof typeof IncomeStatisticsConfig]
+                              ?.label || name}
+                            <div className='text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums'>
+                              {value}
+                            </div>
+                            {index === 1 && (
+                              <div className='text-foreground flex basis-full items-center border-t pt-1.5 text-xs font-medium'>
+                                {t('totalIncome')}
+                                <div className='text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums'>
+                                  {item.payload.total}
+                                </div>
+                              </div>
+                            )}
+                          </>
+                        )}
+                      />
+                    }
+                  />
                   <Area
                     dataKey='new_purchase'
                     type='natural'

apps/admin/components/dashboard/statistics.tsx

@@ -22,19 +22,20 @@ import { useState } from 'react';
 import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from 'recharts';
 import { Empty } from '../empty';
 import { RevenueStatisticsCard } from './revenue-statistics-card';
+import SystemVersionCard from './system-version-card';
 import { UserStatisticsCard } from './user-statistics-card';
 
 export default function Statistics() {
   const t = useTranslations('index');
 
-  const { data: TicketTotal } = useQuery({
+  const { data: TicketTotal, isLoading: ticketLoading } = useQuery({
     queryKey: ['queryTicketWaitReply'],
     queryFn: async () => {
       const { data } = await queryTicketWaitReply();
       return data.data?.count;
     },
   });
-  const { data: ServerTotal } = useQuery({
+  const { data: ServerTotal, isLoading: serverLoading } = useQuery({
     queryKey: ['queryServerTotalData'],
     queryFn: async () => {
       const { data } = await queryServerTotalData();
@@ -42,6 +43,8 @@ export default function Statistics() {
     },
   });
 
+  const isLoading = ticketLoading || serverLoading;
+
   const [dataType, setDataType] = useState<string | 'nodes' | 'users'>('nodes');
   const [timeFrame, setTimeFrame] = useState<string | 'today' | 'yesterday'>('today');
 
@@ -76,65 +79,81 @@ export default function Statistics() {
 
   return (
     <>
-      <div className='grid grid-cols-2 gap-2 md:grid-cols-4'>
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
         {[
           {
-            title: t('onlineIPCount'),
+            title: t('onlineUsersCount'),
-            value: ServerTotal?.online_user_ips || 0,
+            value: ServerTotal?.online_users || 0,
+            subtitle: t('currentlyOnline'),
             icon: 'uil:users-alt',
-            href: '/dashboard/server',
+            href: '/dashboard/user',
+            color: 'text-blue-600 dark:text-blue-400',
+            iconBg: 'bg-blue-100 dark:bg-blue-900/30',
+          },
+
+          {
+            title: t('todayTraffic'),
+            value: formatBytes(
+              (ServerTotal?.today_upload || 0) + (ServerTotal?.today_download || 0),
+            ),
+            subtitle: `↑${formatBytes(ServerTotal?.today_upload || 0)} ↓${formatBytes(ServerTotal?.today_download || 0)}`,
+            icon: 'uil:exchange-alt',
+            color: 'text-purple-600 dark:text-purple-400',
+            iconBg: 'bg-purple-100 dark:bg-purple-900/30',
           },
           {
-            title: t('onlineNodeCount'),
+            title: t('monthTraffic'),
-            value: ServerTotal?.online_servers || 0,
+            value: formatBytes(
+              (ServerTotal?.monthly_upload || 0) + (ServerTotal?.monthly_download || 0),
+            ),
+            subtitle: `↑${formatBytes(ServerTotal?.monthly_upload || 0)} ↓${formatBytes(ServerTotal?.monthly_download || 0)}`,
+            icon: 'uil:cloud-data-connection',
+            color: 'text-orange-600 dark:text-orange-400',
+            iconBg: 'bg-orange-100 dark:bg-orange-900/30',
+          },
+          {
+            title: t('totalServers'),
+            value: (ServerTotal?.online_servers || 0) + (ServerTotal?.offline_servers || 0),
+            subtitle: `${t('online')} ${ServerTotal?.online_servers || 0} ${t('offline')} ${ServerTotal?.offline_servers || 0}`,
             icon: 'uil:server-network',
-            href: '/dashboard/server',
+            href: '/dashboard/servers',
-          },
+            color: 'text-green-600 dark:text-green-400',
-          {
+            iconBg: 'bg-green-100 dark:bg-green-900/30',
-            title: t('offlineNodeCount'),
-            value: ServerTotal?.offline_servers || 0,
-            icon: 'uil:server-network-alt',
-            href: '/dashboard/server',
           },
           {
             title: t('pendingTickets'),
             value: TicketTotal || 0,
+            subtitle: t('pending'),
             icon: 'uil:clipboard-notes',
             href: '/dashboard/ticket',
-          },
+            color: 'text-red-600 dark:text-red-400',
-          {
+            iconBg: 'bg-red-100 dark:bg-red-900/30',
-            title: t('todayUploadTraffic'),
-            value: formatBytes(ServerTotal?.today_upload || 0),
-            icon: 'uil:arrow-up',
-          },
-          {
-            title: t('todayDownloadTraffic'),
-            value: formatBytes(ServerTotal?.today_download || 0),
-            icon: 'uil:arrow-down',
-          },
-          {
-            title: t('monthUploadTraffic'),
-            value: formatBytes(ServerTotal?.monthly_upload || 0),
-            icon: 'uil:cloud-upload',
-          },
-          {
-            title: t('monthDownloadTraffic'),
-            value: formatBytes(ServerTotal?.monthly_download || 0),
-            icon: 'uil:cloud-download',
           },
         ].map((item, index) => (
-          <Link href={item.href || '#'} key={index}>
+          <Link
-            <Card className='cursor-pointer'>
+            href={item.href || '#'}
-              <CardHeader className='p-4'>
+            key={index}
-                <CardTitle>{item.title}</CardTitle>
+            className={!item.href ? 'pointer-events-none' : ''}
-              </CardHeader>
+          >
-              <CardContent className='flex justify-between p-4 text-xl'>
+            <Card className={`group ${item.href ? 'cursor-pointer' : ''}`}>
-                <Icon icon={item.icon} className='text-muted-foreground' />
+              <CardContent className='p-6'>
-                <div className='text-xl font-bold tabular-nums leading-none'>{item.value}</div>
+                <div className='flex items-center justify-between'>
+                  <div className='flex-1'>
+                    <p className='text-muted-foreground mb-2 text-sm font-medium'>{item.title}</p>
+                    <div className={`text-2xl font-bold ${item.color} mb-1`}>{item.value}</div>
+                    <div className={`text-muted-foreground h-4 text-xs`}>{item.subtitle}</div>
+                  </div>
+                  <div
+                    className={`rounded-full p-3 ${item.iconBg} transition-transform duration-300 group-hover:scale-110`}
+                  >
+                    <Icon icon={item.icon} className={`h-6 w-6 ${item.color}`} />
+                  </div>
+                </div>
               </CardContent>
             </Card>
           </Link>
         ))}
+        <SystemVersionCard />
       </div>
       <div className='grid gap-3 md:grid-cols-2 lg:grid-cols-3'>
         <RevenueStatisticsCard />

apps/admin/components/dashboard/system-logs-dialog.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { getSystemLog } from '@/services/admin/tool';
+import { useQuery } from '@tanstack/react-query';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@workspace/ui/components/accordion';
+import { Button } from '@workspace/ui/components/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@workspace/ui/components/dialog';
+import { ScrollArea } from '@workspace/ui/components/scroll-area';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+const getLogLevelColor = (level: string) => {
+  const colorMap: { [key: string]: string } = {
+    INFO: 'bg-blue-100 text-blue-800 hover:bg-blue-200',
+    WARN: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200',
+    ERROR: 'bg-red-100 text-red-800 hover:bg-red-200',
+  };
+  return colorMap[level] || 'bg-gray-100 text-gray-800 hover:bg-gray-200';
+};
+
+interface SystemLogsDialogProps {
+  trigger?: React.ReactNode;
+  variant?: 'default' | 'outline' | 'ghost' | 'secondary';
+  size?: 'sm' | 'default' | 'lg';
+}
+
+export default function SystemLogsDialog({
+  trigger,
+  variant = 'outline',
+  size = 'sm',
+}: SystemLogsDialogProps) {
+  const t = useTranslations('tool');
+  const [open, setOpen] = useState(false);
+
+  const {
+    data: logs,
+    refetch,
+    isLoading,
+  } = useQuery({
+    queryKey: ['getSystemLog'],
+    queryFn: async () => {
+      const { data } = await getSystemLog();
+      return data.data?.list || [];
+    },
+    enabled: open,
+  });
+
+  const defaultTrigger = (
+    <Button variant={variant} size={size}>
+      {t('systemLogs')}
+    </Button>
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger || defaultTrigger}</DialogTrigger>
+      <DialogContent className='max-w-4xl'>
+        <DialogHeader>
+          <DialogTitle>{t('systemLogs')}</DialogTitle>
+        </DialogHeader>
+        <ScrollArea className='bg-muted/30 h-[60vh] max-h-[80vh] min-h-[400px] w-full rounded-lg border p-1'>
+          {isLoading ? (
+            <div className='flex h-full items-center justify-center'>
+              <Icon icon='uil:loading' className='text-primary h-8 w-8 animate-spin' />
+            </div>
+          ) : (
+            <Accordion type='single' collapsible className='w-full'>
+              {logs?.map((log: any, index: number) => (
+                <AccordionItem key={index} value={`item-${index}`} className='px-4'>
+                  <AccordionTrigger className='hover:no-underline'>
+                    <div className='flex w-full flex-col items-start space-y-2 sm:flex-row sm:items-center sm:space-x-4 sm:space-y-0'>
+                      <span className='text-xs font-medium sm:text-sm'>{log.timestamp}</span>
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent className='px-2'>
+                    {Object.entries(log).map(([key, value]) => (
+                      <div
+                        key={key}
+                        className='grid grid-cols-1 gap-2 text-xs sm:grid-cols-2 sm:text-sm'
+                      >
+                        <span className='font-medium'>{key}:</span>
+                        <span className='break-all'>{value as string}</span>
+                      </div>
+                    ))}
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          )}
+        </ScrollArea>
+        <DialogFooter>
+          <Button
+            variant='outline'
+            onClick={() => {
+              refetch();
+            }}
+          >
+            <Icon icon='uil:refresh' className={`h-5 w-5 ${isLoading ? 'animate-spin' : ''}`} />
+            <span>{t('refreshLogs')}</span>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/admin/components/dashboard/system-version-card.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { getVersion, restartSystem } from '@/services/admin/tool';
+import { formatDate } from '@/utils/common';
+import { useQuery } from '@tanstack/react-query';
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@workspace/ui/components/alert-dialog';
+import { Badge } from '@workspace/ui/components/badge';
+import { Button } from '@workspace/ui/components/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useState } from 'react';
+import packageJson from '../../../../package.json';
+import SystemLogsDialog from './system-logs-dialog';
+
+export default function SystemVersionCard() {
+  const t = useTranslations('tool');
+  const [openRestart, setOpenRestart] = useState(false);
+  const [isRestarting, setIsRestarting] = useState(false);
+
+  const { data: versionInfo } = useQuery({
+    queryKey: ['getVersionInfo'],
+    queryFn: async () => {
+      try {
+        const [webResponse, serverResponse, systemResponse] = await Promise.all([
+          fetch(
+            'https://data.jsdelivr.com/v1/packages/gh/perfect-panel/ppanel-web/resolved?specifier=latest',
+          ),
+          fetch(
+            'https://data.jsdelivr.com/v1/packages/gh/perfect-panel/server/resolved?specifier=latest',
+          ),
+          getVersion(),
+        ]);
+
+        const webData = webResponse.ok ? await webResponse.json() : null;
+        const serverData = serverResponse.ok ? await serverResponse.json() : null;
+        const systemData = systemResponse.data.data;
+
+        const rawVersion = (systemData?.version || '').replace(' Develop', '').trim();
+        const timeMatch = rawVersion.match(/\(([^)]+)\)/);
+        const timestamp = timeMatch ? timeMatch[1] : '';
+        const versionWithoutTime = rawVersion.replace(/\([^)]*\)/, '').trim();
+
+        const isDevelopment = !/^[Vv]?\d+\.\d+\.\d+(-[a-zA-Z]+(\.\d+)?)?$/.test(versionWithoutTime);
+
+        let displayVersion = versionWithoutTime;
+        if (
+          !isDevelopment &&
+          !versionWithoutTime.startsWith('V') &&
+          !versionWithoutTime.startsWith('v')
+        ) {
+          displayVersion = `V${versionWithoutTime}`;
+        }
+        const lastUpdated = formatDate(new Date(timestamp || Date.now())) || '';
+
+        const systemInfo = {
+          isRelease: !isDevelopment,
+          version: displayVersion,
+          lastUpdated,
+        };
+
+        const latestReleases = {
+          web: webData
+            ? {
+                version: webData.version,
+                url: `https://github.com/perfect-panel/ppanel-web/releases/tag/v${webData.version}`,
+              }
+            : null,
+          server: serverData
+            ? {
+                version: serverData.version,
+                url: `https://github.com/perfect-panel/server/releases/tag/v${serverData.version}`,
+              }
+            : null,
+        };
+
+        const hasNewVersion =
+          latestReleases.web &&
+          packageJson.version !== latestReleases.web.version.replace(/^v/, '');
+
+        const hasServerNewVersion =
+          latestReleases.server &&
+          systemInfo.version &&
+          systemInfo.version.replace(/^V/, '') !== latestReleases.server.version.replace(/^v/, '');
+
+        return {
+          systemInfo,
+          latestReleases,
+          hasNewVersion,
+          hasServerNewVersion,
+        };
+      } catch (error) {
+        console.error('Failed to fetch version info:', error);
+        return {
+          systemInfo: { isRelease: true, version: 'V1.0.0', lastUpdated: '' },
+          latestReleases: { web: null, server: null },
+          hasNewVersion: false,
+          hasServerNewVersion: false,
+        };
+      }
+    },
+    staleTime: 0,
+    retry: 1,
+    retryDelay: 10000,
+    initialData: {
+      systemInfo: { isRelease: true, version: 'V1.0.0', lastUpdated: '' },
+      latestReleases: { web: null, server: null },
+      hasNewVersion: false,
+      hasServerNewVersion: false,
+    },
+  });
+
+  const { systemInfo, latestReleases, hasNewVersion, hasServerNewVersion } = versionInfo;
+
+  return (
+    <Card className='p-3'>
+      <CardHeader className='mb-2 p-0'>
+        <CardTitle className='flex items-center justify-between'>
+          {t('systemServices')}
+          <div className='flex items-center space-x-2'>
+            <SystemLogsDialog variant='outline' size='sm' />
+            <AlertDialog open={openRestart} onOpenChange={setOpenRestart}>
+              <AlertDialogTrigger asChild>
+                <Button variant='destructive' size='sm'>
+                  {t('systemReboot')}
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>{t('confirmSystemReboot')}</AlertDialogTitle>
+                  <AlertDialogDescription>{t('rebootDescription')}</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+                  <Button
+                    onClick={async () => {
+                      setIsRestarting(true);
+                      await restartSystem();
+                      await new Promise((resolve) => setTimeout(resolve, 5000));
+                      setIsRestarting(false);
+                      setOpenRestart(false);
+                    }}
+                    disabled={isRestarting}
+                  >
+                    {isRestarting && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
+                    {isRestarting ? t('rebooting') : t('confirmReboot')}
+                  </Button>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </div>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-3 p-0'>
+        <div className='flex flex-1 items-center justify-between'>
+          <div className='flex items-center'>
+            <Icon icon='mdi:web' className='mr-2 h-4 w-4 text-green-600' />
+            <span className='text-sm font-medium'>{t('webVersion')}</span>
+          </div>
+          <div className='flex items-center space-x-2'>
+            <Badge>V{packageJson.version}</Badge>
+            {hasNewVersion && (
+              <Link
+                href={
+                  latestReleases?.web?.url || 'https://github.com/perfect-panel/ppanel-web/releases'
+                }
+                target='_blank'
+                rel='noopener noreferrer'
+                className='flex items-center space-x-1'
+              >
+                <Badge variant='destructive' className='animate-pulse px-2 py-0.5 text-xs'>
+                  {t('newVersionAvailable')}
+                  <Icon icon='mdi:open-in-new' />
+                </Badge>
+              </Link>
+            )}
+          </div>
+        </div>
+        <div className='flex flex-1 items-center justify-between'>
+          <div className='flex items-center'>
+            <Icon icon='mdi:server' className='mr-2 h-4 w-4 text-blue-600' />
+            <span className='text-sm font-medium'>{t('serverVersion')}</span>
+          </div>
+          <div className='flex items-center space-x-2'>
+            <Badge variant={!systemInfo?.isRelease ? 'destructive' : 'default'}>
+              {systemInfo?.version || 'V1.0.0'}
+            </Badge>
+            {hasServerNewVersion && (
+              <Link
+                href={
+                  latestReleases?.server?.url || 'https://github.com/perfect-panel/server/releases'
+                }
+                target='_blank'
+                rel='noopener noreferrer'
+                className='flex items-center space-x-1'
+              >
+                <Badge variant='destructive' className='animate-pulse px-2 py-0.5 text-xs'>
+                  {t('newVersionAvailable')}
+                  <Icon icon='mdi:open-in-new' />
+                </Badge>
+              </Link>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

apps/admin/components/dashboard/user-statistics-card.tsx

@@ -34,6 +34,7 @@ import { Empty } from '../empty';
 
 export function UserStatisticsCard() {
   const t = useTranslations('index');
+  const locale = useLocale();
 
   const UserStatisticsConfig = {
     register: {
@@ -49,7 +50,6 @@ export function UserStatisticsCard() {
       color: 'hsl(var(--chart-3))',
     },
   };
-  const locale = useLocale();
 
   const { data: UserStatistics } = useQuery({
     queryKey: ['queryUserStatistics'],
@@ -192,15 +192,31 @@ export function UserStatisticsCard() {
                     tickMargin={10}
                     axisLine={false}
                     tickFormatter={(value) => {
-                      return new Date(value).toLocaleDateString(locale, {
+                      const [year, month, day] = value.split('-');
+                      return new Date(year, month - 1, day).toLocaleDateString(locale, {
                         month: 'short',
                         day: 'numeric',
                       });
                     }}
                   />
-                  <Bar dataKey='register' fill='var(--color-register)' radius={4} />
+                  <Bar
-                  <Bar dataKey='new_purchase' fill='var(--color-new_purchase)' radius={4} />
+                    dataKey='register'
-                  <Bar dataKey='repurchase' fill='var(--color-repurchase)' radius={4} />
+                    fill='var(--color-register)'
+                    radius={[0, 0, 4, 4]}
+                    stackId='a'
+                  />
+                  <Bar
+                    dataKey='new_purchase'
+                    fill='var(--color-new_purchase)'
+                    radius={0}
+                    stackId='a'
+                  />
+                  <Bar
+                    dataKey='repurchase'
+                    fill='var(--color-repurchase)'
+                    radius={[4, 4, 0, 0]}
+                    stackId='a'
+                  />
                   <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
                   <ChartLegend content={<ChartLegendContent />} />
                 </BarChart>
@@ -267,9 +283,9 @@ export function UserStatisticsCard() {
                     dataKey='date'
                     tickLine={false}
                     axisLine={false}
-                    tickMargin={8}
                     tickFormatter={(value) => {
-                      return new Date(value).toLocaleDateString(locale, {
+                      const [year, month] = value.split('-');
+                      return new Date(year, month - 1).toLocaleDateString(locale, {
                         month: 'short',
                       });
                     }}

apps/admin/components/header.tsx

@@ -15,6 +15,7 @@ import { usePathname } from 'next/navigation';
 import { Fragment, useMemo } from 'react';
 import LanguageSwitch from './language-switch';
 import ThemeSwitch from './theme-switch';
+import TimezoneSwitch from './timezone-switch';
 import { UserNav } from './user-nav';
 
 export function Header() {
@@ -48,6 +49,7 @@ export function Header() {
       </div>
       <div className='flex items-center gap-2 px-3'>
         <LanguageSwitch />
+        <TimezoneSwitch />
         <ThemeSwitch />
         <UserNav />
       </div>

apps/admin/components/ip-link.tsx

@@ -11,7 +11,7 @@ interface IpLinkProps {
 }
 
 export function IpLink({ ip, children, className = '', target = '_blank' }: IpLinkProps) {
-  const url = `https://ip.sb/ip/${ip}`;
+  const url = `https://ipinfo.io/${ip}`;
 
   return (
     <a

apps/admin/components/order-link.tsx

@@ -0,0 +1,17 @@
+import { Button } from '@workspace/ui/components/button';
+import Link from 'next/link';
+
+interface OrderLinkProps {
+  orderId?: string | number;
+  className?: string;
+}
+
+export function OrderLink({ orderId, className }: OrderLinkProps) {
+  if (!orderId) return <span>--</span>;
+
+  return (
+    <Button variant='link' className={`p-0 ${className || ''}`} asChild>
+      <Link href={`/dashboard/order?search=${orderId}`}>{orderId}</Link>
+    </Button>
+  );
+}

apps/admin/components/sidebar-left.tsx

@@ -1,28 +1,151 @@
 'use client';
 import { navs } from '@/config/navs';
 import useGlobalStore from '@/config/use-global';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@workspace/ui/components/hover-card';
 import {
   Sidebar,
   SidebarContent,
   SidebarGroup,
   SidebarGroupContent,
-  SidebarGroupLabel,
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  useSidebar,
 } from '@workspace/ui/components/sidebar';
 import { Icon } from '@workspace/ui/custom-components/icon';
+import { cn } from '@workspace/ui/lib/utils';
 import { useTranslations } from 'next-intl';
 import Image from 'next/legacy/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import React, { useState } from 'react';
+
+type Nav = (typeof navs)[number];
+
+function hasChildren(obj: any): obj is { items: any[] } {
+  return obj && Array.isArray((obj as any).items) && (obj as any).items.length > 0;
+}
 
 export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const { common } = useGlobalStore();
   const { site } = common;
   const t = useTranslations('menu');
   const pathname = usePathname();
+  const { state, isMobile } = useSidebar();
+
+  const logsGroupTitle = 'Logs & Analytics';
+  const systemGroupTitle = 'System';
+
+  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>(() => {
+    const groups: Record<string, boolean> = {};
+    (navs as typeof navs).forEach((nav) => {
+      if (hasChildren(nav)) {
+        // Default: open all groups except Logs & Analytics and System
+        groups[nav.title] = nav.title !== logsGroupTitle && nav.title !== systemGroupTitle;
+      }
+    });
+    return groups;
+  });
+
+  const handleToggleGroup = (title: string) => {
+    setOpenGroups((prev) => ({ ...prev, [title]: !prev[title] }));
+  };
+
+  const normalize = (p: string) => (p.endsWith('/') && p !== '/' ? p.replace(/\/+$/, '') : p);
+  const isActiveUrl = (url: string) => {
+    const path = normalize(pathname);
+    const target = normalize(url);
+    if (target === '/dashboard') return path === target;
+    if (path === target) return true;
+    // Only treat as active if next char is a path boundary '/'
+    return path.startsWith(target + '/');
+  };
+
+  const isGroupActive = (nav: Nav) =>
+    (hasChildren(nav) && nav.items.some((i: any) => isActiveUrl(i.url))) ||
+    ('url' in nav && nav.url ? isActiveUrl(nav.url as string) : false);
+
+  // Ensure the group containing the active route is open, without closing others
+  React.useEffect(() => {
+    setOpenGroups((prev) => {
+      const next: Record<string, boolean> = { ...prev };
+      (navs as typeof navs).forEach((nav) => {
+        if (hasChildren(nav) && isGroupActive(nav)) next[nav.title] = true;
+      });
+      return next;
+    });
+  }, [pathname]);
+
+  const renderCollapsedFlyout = (nav: Nav) => {
+    const ParentButton = (
+      <SidebarMenuButton
+        size='sm'
+        className='h-8 justify-center'
+        isActive={false}
+        aria-label={t(nav.title)}
+      >
+        {'url' in nav && nav.url ? (
+          <Link href={nav.url as string}>
+            {'icon' in nav && (nav as any).icon ? (
+              <Icon icon={(nav as any).icon} className='size-4' />
+            ) : null}
+          </Link>
+        ) : (
+          <>
+            {'icon' in nav && (nav as any).icon ? (
+              <Icon icon={(nav as any).icon} className='size-4' />
+            ) : null}
+          </>
+        )}
+      </SidebarMenuButton>
+    );
+
+    if (!hasChildren(nav)) return ParentButton;
+
+    return (
+      <HoverCard openDelay={40} closeDelay={200}>
+        <HoverCardTrigger asChild>{ParentButton}</HoverCardTrigger>
+        <HoverCardContent
+          side='right'
+          align='start'
+          sideOffset={10}
+          className='z-[9999] w-64 p-0'
+          avoidCollisions
+          collisionPadding={8}
+        >
+          <div className='flex items-center gap-2 border-b px-3 py-2'>
+            {'icon' in nav && (nav as any).icon ? (
+              <Icon icon={(nav as any).icon} className='size-4' />
+            ) : null}
+            <span className='text-muted-foreground truncate text-xs font-medium'>
+              {t(nav.title)}
+            </span>
+          </div>
+
+          <ul className='p-1'>
+            {nav.items.map((item: any) => (
+              <li key={item.title}>
+                <Link
+                  href={item.url}
+                  className={[
+                    'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm',
+                    isActiveUrl(item.url)
+                      ? 'bg-accent text-accent-foreground'
+                      : 'hover:bg-accent/60',
+                  ].join(' ')}
+                >
+                  {item.icon && <Icon icon={item.icon} className='size-4' />}
+                  <span className='truncate'>{t(item.title)}</span>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </HoverCardContent>
+      </HoverCard>
+    );
+  };
+
   return (
     <Sidebar className='border-r-0' collapsible='icon' {...props}>
       <SidebarHeader className='p-2'>
@@ -49,27 +172,57 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarHeader>
+
       <SidebarContent className='py-2'>
         <SidebarMenu>
-          {navs.map((nav) => (
+          {!isMobile && state === 'collapsed'
-            <SidebarGroup key={nav.title} className='py-1'>
+            ? (navs as typeof navs).map((nav) => (
-              {nav.items && (
+                <SidebarMenuItem key={nav.title} className='mx-auto'>
-                <SidebarGroupLabel className='py-1 text-xs'>{t(nav.title)}</SidebarGroupLabel>
+                  {renderCollapsedFlyout(nav)}
+                </SidebarMenuItem>
+              ))
+            : (navs as typeof navs).map((nav) => {
+                if (hasChildren(nav)) {
+                  const isOpen = openGroups[nav.title] ?? false;
+                  const groupActive = isGroupActive(nav);
+                  return (
+                    <SidebarGroup key={nav.title} className={cn('py-1')}>
+                      <SidebarMenuButton
+                        size='sm'
+                        // className={cn('mb-2 flex h-8 w-full items-center justify-between', {
+                        //   'bg-accent text-accent-foreground': isOpen || groupActive,
+                        //   'hover:bg-accent/60': !isOpen && !groupActive,
+                        // })}
+                        className={cn(
+                          'hover:bg-accent/60 hover:text-accent-foreground mb-2 flex h-8 w-full items-center justify-between',
                         )}
-              <SidebarGroupContent>
+                        onClick={() => handleToggleGroup(nav.title)}
+                        tabIndex={0}
+                        style={{ fontWeight: 500 }}
+                        isActive={false}
+                      >
+                        <span className='flex min-w-0 items-center gap-2'>
+                          {'icon' in nav && (nav as any).icon ? (
+                            <Icon icon={(nav as any).icon} className='size-4 shrink-0' />
+                          ) : null}
+                          <span className='truncate text-sm'>{t(nav.title)}</span>
+                        </span>
+                        <Icon
+                          icon='mdi:chevron-down'
+                          className={`ml-2 size-4 transition-transform ${isOpen ? '' : '-rotate-90'}`}
+                        />
+                      </SidebarMenuButton>
+                      {isOpen && (
+                        <SidebarGroupContent className='px-4'>
                           <SidebarMenu>
-                  {(nav.items || [nav]).map((item) => (
+                            {nav.items.map((item: any) => (
                               <SidebarMenuItem key={item.title}>
                                 <SidebarMenuButton
                                   asChild
                                   size='sm'
-                        tooltip={t(item.title)}
                                   className='h-8'
-                        isActive={
+                                  tooltip={t(item.title)}
-                          item.url === '/dashboard'
+                                  isActive={isActiveUrl(item.url)}
-                            ? pathname === item.url
-                            : pathname.startsWith(item.url)
-                        }
                                 >
                                   <Link href={item.url}>
                                     {item.icon && <Icon icon={item.icon} className='size-4' />}
@@ -80,8 +233,49 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
                             ))}
                           </SidebarMenu>
                         </SidebarGroupContent>
+                      )}
                     </SidebarGroup>
-          ))}
+                  );
+                }
+
+                return (
+                  <SidebarGroup key={nav.title} className='py-1'>
+                    <SidebarGroupContent>
+                      <SidebarMenu>
+                        <SidebarMenuItem>
+                          <SidebarMenuButton
+                            asChild={'url' in nav && !!(nav as any).url}
+                            size='sm'
+                            className='h-8'
+                            tooltip={t(nav.title)}
+                            isActive={
+                              'url' in nav && (nav as any).url
+                                ? isActiveUrl((nav as any).url)
+                                : false
+                            }
+                          >
+                            {'url' in nav && (nav as any).url ? (
+                              <Link href={(nav as any).url}>
+                                {'icon' in nav && (nav as any).icon ? (
+                                  <Icon icon={(nav as any).icon} className='size-4' />
+                                ) : null}
+                                <span className='text-sm'>{t(nav.title)}</span>
+                              </Link>
+                            ) : (
+                              <>
+                                {'icon' in nav && (nav as any).icon ? (
+                                  <Icon icon={(nav as any).icon} className='size-4' />
+                                ) : null}
+                                <span className='text-sm'>{t(nav.title)}</span>
+                              </>
+                            )}
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      </SidebarMenu>
+                    </SidebarGroupContent>
+                  </SidebarGroup>
+                );
+              })}
         </SidebarMenu>
       </SidebarContent>
     </Sidebar>

apps/admin/components/timezone-switch.tsx

@@ -0,0 +1,281 @@
+'use client';
+
+import { Button } from '@workspace/ui/components/button';
+import {
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@workspace/ui/components/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@workspace/ui/components/popover';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { useLocale } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+
+interface TimezoneOption {
+  value: string;
+  label: string;
+  timezone: string;
+}
+
+function getCurrentTime(timezone: string): string {
+  try {
+    const now = new Date();
+    return now.toLocaleTimeString('en-US', {
+      timeZone: timezone,
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  } catch {
+    return '--:--';
+  }
+}
+
+function getAllTimezones(locale: string = 'en-US'): TimezoneOption[] {
+  try {
+    const timeZones = Intl.supportedValuesOf('timeZone');
+
+    const processed = timeZones
+      .map((tz) => {
+        try {
+          return {
+            value: tz,
+            label: tz,
+            timezone: getTimezoneOffset(tz),
+          };
+        } catch {
+          return {
+            value: tz,
+            label: tz,
+            timezone: 'UTC+00:00',
+          };
+        }
+      })
+      .filter(Boolean)
+      .sort((a, b) => a.label.localeCompare(b.label, locale));
+
+    const hasUTC = processed.some((tz) => tz.value === 'UTC');
+    if (!hasUTC) {
+      processed.unshift({
+        value: 'UTC',
+        label: 'UTC',
+        timezone: 'UTC+00:00',
+      });
+    }
+
+    return processed;
+  } catch {
+    return [
+      {
+        value: 'UTC',
+        label: 'UTC',
+        timezone: 'UTC+00:00',
+      },
+    ];
+  }
+}
+
+function getServerTimezones(): string[] {
+  return ['UTC'];
+}
+
+function getRecommendedTimezones(): string[] {
+  try {
+    const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+    if (browserTimezone.startsWith('Asia/')) {
+      return ['Asia/Shanghai', 'Asia/Tokyo', 'Asia/Kolkata', 'Asia/Singapore', 'Asia/Seoul'];
+    } else if (browserTimezone.startsWith('Europe/')) {
+      return ['Europe/London', 'Europe/Paris', 'Europe/Berlin', 'Europe/Rome', 'Europe/Madrid'];
+    } else if (browserTimezone.startsWith('America/')) {
+      return [
+        'America/New_York',
+        'America/Los_Angeles',
+        'America/Chicago',
+        'America/Denver',
+        'America/Toronto',
+      ];
+    } else if (browserTimezone.startsWith('Australia/')) {
+      return ['Australia/Sydney', 'Australia/Melbourne', 'Australia/Perth', 'Australia/Brisbane'];
+    } else {
+      return [
+        'America/New_York',
+        'Europe/London',
+        'Asia/Shanghai',
+        'Asia/Tokyo',
+        'Australia/Sydney',
+      ];
+    }
+  } catch {
+    return ['America/New_York', 'Europe/London', 'Asia/Shanghai', 'Asia/Tokyo', 'Australia/Sydney'];
+  }
+}
+
+function getTimezoneOffset(timezone: string): string {
+  try {
+    const now = new Date();
+
+    const utc = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
+    const targetTime = new Date(utc.toLocaleString('en-US', { timeZone: timezone }));
+    const offset = (targetTime.getTime() - utc.getTime()) / (1000 * 60 * 60);
+    const sign = offset >= 0 ? '+' : '-';
+    const hours = Math.floor(Math.abs(offset));
+    const minutes = Math.floor((Math.abs(offset) - hours) * 60);
+
+    return `UTC${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+  } catch {
+    return 'UTC+00:00';
+  }
+}
+
+export default function TimezoneSwitch() {
+  const locale = useLocale();
+  const [timezone, setTimezone] = useState<string>('UTC');
+  const [open, setOpen] = useState(false);
+
+  const timezoneOptions = useMemo(() => getAllTimezones(locale), [locale]);
+
+  useEffect(() => {
+    const savedTimezone = localStorage.getItem('timezone');
+    if (savedTimezone) {
+      setTimezone(savedTimezone);
+    } else {
+      try {
+        const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        setTimezone(browserTimezone);
+        localStorage.setItem('timezone', browserTimezone);
+      } catch {
+        setTimezone('UTC');
+      }
+    }
+  }, []);
+
+  const handleTimezoneChange = (newTimezone: string) => {
+    setTimezone(newTimezone);
+    localStorage.setItem('timezone', newTimezone);
+    setOpen(false);
+
+    window.dispatchEvent(
+      new CustomEvent('timezoneChanged', {
+        detail: { timezone: newTimezone },
+      }),
+    );
+  };
+  const serverTimezones = timezoneOptions.filter(
+    (option) => getServerTimezones().includes(option.value) && option.value !== timezone,
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant='ghost' size='icon' className='p-0'>
+          <Icon icon='flat-color-icons:overtime' className='!size-6' />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className='w-80 p-0' align='end'>
+        <Command>
+          <CommandInput placeholder='Search...' />
+          <CommandList>
+            <CommandGroup heading='Current'>
+              {timezoneOptions
+                .filter((option) => option.value === timezone)
+                .map((option) => (
+                  <CommandItem
+                    key={option.value}
+                    value={`${option.label} ${option.value}`}
+                    onSelect={() => handleTimezoneChange(option.value)}
+                    className='bg-primary/10'
+                  >
+                    <div className='flex w-full items-center gap-3'>
+                      <div className='flex flex-1 flex-col'>
+                        <span className='font-medium'>{option.value}</span>
+                        <span className='text-muted-foreground text-xs'>
+                          {option.timezone} • {getCurrentTime(option.value)}
+                        </span>
+                      </div>
+                      <Icon icon='uil:check' className='h-4 w-4 opacity-100' />
+                    </div>
+                  </CommandItem>
+                ))}
+            </CommandGroup>
+            {serverTimezones.length > 0 && (
+              <CommandGroup heading='Server'>
+                {serverTimezones.map((option) => (
+                  <CommandItem
+                    key={option.value}
+                    value={`${option.label} ${option.value}`}
+                    onSelect={() => handleTimezoneChange(option.value)}
+                  >
+                    <div className='flex w-full items-center gap-3'>
+                      <div className='flex flex-1 flex-col'>
+                        <span className='font-medium'>{option.value}</span>
+                        <span className='text-muted-foreground text-xs'>
+                          {option.timezone} • {getCurrentTime(option.value)}
+                        </span>
+                      </div>
+                      <Icon icon='uil:check' className='h-4 w-4 opacity-0' />
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+
+            <CommandGroup heading='Recommended'>
+              {timezoneOptions
+                .filter(
+                  (option) =>
+                    getRecommendedTimezones().includes(option.value) && option.value !== timezone,
+                )
+                .map((option) => (
+                  <CommandItem
+                    key={option.value}
+                    value={`${option.label} ${option.value}`}
+                    onSelect={() => handleTimezoneChange(option.value)}
+                  >
+                    <div className='flex w-full items-center gap-3'>
+                      <div className='flex flex-1 flex-col'>
+                        <span className='font-medium'>{option.value}</span>
+                        <span className='text-muted-foreground text-xs'>
+                          {option.timezone} • {getCurrentTime(option.value)}
+                        </span>
+                      </div>
+                      <Icon icon='uil:check' className='h-4 w-4 opacity-0' />
+                    </div>
+                  </CommandItem>
+                ))}
+            </CommandGroup>
+
+            <CommandGroup heading='All'>
+              {timezoneOptions
+                .filter(
+                  (option) =>
+                    !getServerTimezones().includes(option.value) &&
+                    !getRecommendedTimezones().includes(option.value) &&
+                    option.value !== timezone,
+                )
+                .map((option) => (
+                  <CommandItem
+                    key={option.value}
+                    value={`${option.label} ${option.value}`}
+                    onSelect={() => handleTimezoneChange(option.value)}
+                  >
+                    <div className='flex w-full items-center gap-3'>
+                      <div className='flex flex-1 flex-col'>
+                        <span className='font-medium'>{option.value}</span>
+                        <span className='text-muted-foreground text-xs'>
+                          {option.timezone} • {getCurrentTime(option.value)}
+                        </span>
+                      </div>
+                      <Icon icon='uil:check' className='h-4 w-4 opacity-0' />
+                    </div>
+                  </CommandItem>
+                ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

apps/admin/config/navs.ts

@@ -4,91 +4,28 @@ export const navs = [
     url: '/dashboard',
     icon: 'flat-color-icons:globe',
   },
+
   {
-    title: 'System Management',
+    title: 'Maintenance',
+    icon: 'flat-color-icons:data-protection',
     items: [
       {
-        title: 'System Config',
+        title: 'Server Management',
-        url: '/dashboard/system',
+        url: '/dashboard/servers',
-        icon: 'flat-color-icons:services',
+        icon: 'flat-color-icons:data-protection',
       },
-      {
+      { title: 'Node Management', url: '/dashboard/nodes', icon: 'flat-color-icons:mind-map' },
-        title: 'Auth Control',
+      { title: 'Subscribe Config', url: '/dashboard/subscribe', icon: 'flat-color-icons:ruler' },
-        url: '/dashboard/auth-control',
+      { title: 'Product Management', url: '/dashboard/product', icon: 'flat-color-icons:shop' },
-        icon: 'flat-color-icons:lock-portrait',
+    ],
-      },
-      {
-        title: 'Payment Config',
-        url: '/dashboard/payment',
-        icon: 'flat-color-icons:currency-exchange',
   },
 
   {
-        title: 'ADS Config',
+    title: 'Commerce',
-        url: '/dashboard/ads',
+    icon: 'flat-color-icons:sales-performance',
-        icon: 'flat-color-icons:electrical-sensor',
-      },
-      {
-        title: 'System Tool',
-        url: '/dashboard/tool',
-        icon: 'flat-color-icons:info',
-      },
-    ],
-  },
-  {
-    title: 'Server',
     items: [
-      {
+      { title: 'Order Management', url: '/dashboard/order', icon: 'flat-color-icons:todo-list' },
-        title: 'Subscribe Config',
+      { title: 'Coupon Management', url: '/dashboard/coupon', icon: 'flat-color-icons:bookmark' },
-        url: '/dashboard/subscribe',
-        icon: 'flat-color-icons:ruler',
-      },
-      {
-        title: 'Server Management',
-        url: '/dashboard/server',
-        icon: 'flat-color-icons:data-protection',
-      },
-      {
-        title: 'Product Management',
-        url: '/dashboard/product',
-        icon: 'flat-color-icons:shop',
-      },
-      {
-        title: 'Application Management',
-        url: '/dashboard/application',
-        icon: 'flat-color-icons:touchscreen-smartphone',
-      },
-    ],
-  },
-  {
-    title: 'Finance',
-    items: [
-      {
-        title: 'Order Management',
-        url: '/dashboard/order',
-        icon: 'flat-color-icons:todo-list',
-      },
-      {
-        title: 'Coupon Management',
-        url: '/dashboard/coupon',
-        icon: 'flat-color-icons:bookmark',
-      },
-    ],
-  },
-  {
-    title: 'User',
-    items: [
-      {
-        title: 'User Management',
-        url: '/dashboard/user',
-        icon: 'flat-color-icons:conference-call',
-        items: [
-          {
-            title: 'User Detail',
-            url: '/dashboard/user/:id',
-          },
-        ],
-      },
       {
         title: 'Marketing Management',
         url: '/dashboard/marketing',
@@ -99,6 +36,18 @@ export const navs = [
         url: '/dashboard/announcement',
         icon: 'flat-color-icons:advertising',
       },
+    ],
+  },
+
+  {
+    title: 'Users & Support',
+    icon: 'flat-color-icons:collaboration',
+    items: [
+      {
+        title: 'User Management',
+        url: '/dashboard/user',
+        icon: 'flat-color-icons:conference-call',
+      },
       {
         title: 'Ticket Management',
         url: '/dashboard/ticket',
@@ -111,6 +60,64 @@ export const navs = [
       },
     ],
   },
+
+  {
+    title: 'System',
+    icon: 'flat-color-icons:services',
+    items: [
+      { title: 'System Config', url: '/dashboard/system', icon: 'flat-color-icons:services' },
+      {
+        title: 'Auth Control',
+        url: '/dashboard/auth-control',
+        icon: 'flat-color-icons:lock-portrait',
+      },
+      {
+        title: 'Payment Config',
+        url: '/dashboard/payment',
+        icon: 'flat-color-icons:currency-exchange',
+      },
+      { title: 'ADS Config', url: '/dashboard/ads', icon: 'flat-color-icons:electrical-sensor' },
+    ],
+  },
+
+  {
+    title: 'Logs & Analytics',
+    icon: 'flat-color-icons:statistics',
+    items: [
+      { title: 'Login', url: '/dashboard/log/login', icon: 'flat-color-icons:unlock' },
+      { title: 'Register', url: '/dashboard/log/register', icon: 'flat-color-icons:contacts' },
+      { title: 'Email', url: '/dashboard/log/email', icon: 'flat-color-icons:feedback' },
+      { title: 'Mobile', url: '/dashboard/log/mobile', icon: 'flat-color-icons:sms' },
+      { title: 'Subscribe', url: '/dashboard/log/subscribe', icon: 'flat-color-icons:workflow' },
+      {
+        title: 'Reset Subscribe',
+        url: '/dashboard/log/reset-subscribe',
+        icon: 'flat-color-icons:refresh',
+      },
+      {
+        title: 'Subscribe Traffic',
+        url: '/dashboard/log/subscribe-traffic',
+        icon: 'flat-color-icons:statistics',
+      },
+      {
+        title: 'Server Traffic',
+        url: '/dashboard/log/server-traffic',
+        icon: 'flat-color-icons:statistics',
+      },
+      {
+        title: 'Traffic Details',
+        url: '/dashboard/log/traffic-details',
+        icon: 'flat-color-icons:combo-chart',
+      },
+      {
+        title: 'Balance',
+        url: '/dashboard/log/balance',
+        icon: 'flat-color-icons:sales-performance',
+      },
+      { title: 'Commission', url: '/dashboard/log/commission', icon: 'flat-color-icons:debt' },
+      { title: 'Gift', url: '/dashboard/log/gift', icon: 'flat-color-icons:donate' },
+    ],
+  },
 ];
 
 export function findNavByUrl(url: string) {
@@ -119,7 +126,6 @@ export function findNavByUrl(url: string) {
     const regex = new RegExp(`^${regexPattern}$`);
     return regex.test(path);
   }
-
   function findNav(items: any[], url: string, path: any[] = []): any[] {
     for (const item of items) {
       if (item.url === url || (item.url && matchDynamicRoute(item.url, url))) {
@@ -127,13 +133,10 @@ export function findNavByUrl(url: string) {
       }
       if (item.items) {
         const result = findNav(item.items, url, [...path, item]);
-        if (result.length) {
+        if (result.length) return result;
-          return result;
-        }
       }
     }
     return [];
   }
-
   return findNav(navs, url);
 }

apps/admin/config/use-global.tsx

@@ -1,3 +1,5 @@
+import { NEXT_PUBLIC_API_URL, NEXT_PUBLIC_SITE_URL } from '@/config/constants';
+import { extractDomain } from '@workspace/ui/utils';
 import { create } from 'zustand';
 
 export interface GlobalStore {
@@ -5,9 +7,10 @@ export interface GlobalStore {
   user?: API.User;
   setCommon: (common: Partial<API.GetGlobalConfigResponse>) => void;
   setUser: (user?: API.User) => void;
+  getUserSubscribeUrls: (uuid: string, type?: string) => string[];
 }
 
-export const useGlobalStore = create<GlobalStore>((set) => ({
+export const useGlobalStore = create<GlobalStore>((set, get) => ({
   common: {
     site: {
       host: '',
@@ -77,6 +80,22 @@ export const useGlobalStore = create<GlobalStore>((set) => ({
       },
     })),
   setUser: (user) => set({ user }),
+  getUserSubscribeUrls: (uuid: string, type?: string) => {
+    const { pan_domain, subscribe_domain, subscribe_path } = get().common.subscribe || {};
+    const domains = subscribe_domain
+      ? subscribe_domain.split('\n')
+      : [extractDomain(NEXT_PUBLIC_API_URL || NEXT_PUBLIC_SITE_URL || '', pan_domain)];
+
+    return domains.map((domain) => {
+      if (pan_domain) {
+        if (type) return `https://${uuid}.${type}.${domain}`;
+        return `https://${uuid}.${domain}`;
+      } else {
+        if (type) return `https://${domain}${subscribe_path}?token=${uuid}&type=${type}`;
+        return `https://${domain}${subscribe_path}?token=${uuid}`;
+      }
+    });
+  },
 }));
 
 export default useGlobalStore;

apps/admin/locales/cs-CZ/index.json

@@ -1,14 +1,18 @@
 {
+  "currentlyOnline": "Aktuálně online",
   "email": "e-mail",
   "month": "Tento měsíc",
   "monthDownloadTraffic": "Měsíční objem stažených dat",
+  "monthTraffic": "Trafik tohoto měsíce",
   "monthUploadTraffic": "Tento měsíc nahraný provoz",
   "newPurchase": "Nový nákup",
   "nodeTraffic": "Provoz uzlu",
   "nodes": "uzly",
-  "offlineNodeCount": "Počet offline uzlů",
+  "offline": "Offline",
-  "onlineIPCount": "Počet online IP",
+  "online": "Online",
-  "onlineNodeCount": "Počet online uzlů",
+  "onlineServers": "Online servery",
+  "onlineUsersCount": "Uživatelé online",
+  "pending": "Čekající",
   "pendingTickets": "Čekající lístky",
   "register": "Registrovat se",
   "repurchase": "opětovný nákup",
@@ -16,9 +20,11 @@
   "selectTypePlaceholder": "Vyberte typ",
   "today": "Dnes",
   "todayDownloadTraffic": "Dnešní stahovací provoz",
+  "todayTraffic": "Dnešní trafik",
   "todayUploadTraffic": "Dnešní nahraný provoz",
   "total": "Celkem",
   "totalIncome": "Celkový příjem",
+  "totalServers": "Celkový počet serverů",
   "traffic": "provoz",
   "trafficRank": "Pořadí návštěvnosti",
   "type": "Typ",

apps/admin/locales/cs-CZ/log.json

@@ -0,0 +1,85 @@
+{
+  "column": {
+    "amount": "Částka",
+    "balance": "Zůstatek",
+    "content": "Obsah",
+    "createdAt": "Vytvořeno",
+    "date": "Datum",
+    "download": "Stáhnout",
+    "id": "ID",
+    "identifier": "Identifikátor",
+    "ip": "IP",
+    "method": "Metoda",
+    "orderId": "ID objednávky",
+    "orderNo": "Číslo objednávky",
+    "platform": "Platforma",
+    "remark": "Poznámka",
+    "resetAt": "Resetováno",
+    "server": "Server",
+    "serverId": "ID serveru",
+    "status": "Stav",
+    "subject": "Předmět",
+    "subscribe": "Přihlásit se",
+    "subscribeId": "ID předplatného",
+    "success": "Úspěch",
+    "time": "Čas",
+    "to": "Komu",
+    "token": "Token",
+    "total": "Celkem",
+    "type": "Typ",
+    "updatedAt": "Aktualizováno",
+    "upload": "Nahrát",
+    "user": "Uživatel",
+    "userAgent": "Uživatelská agentura",
+    "userId": "ID uživatele"
+  },
+  "datePlaceholder": "RRRR-MM-DD",
+  "detail": "Detail",
+  "failed": "Neúspěšné",
+  "pending": "Čekající",
+  "placeholder": {
+    "serverName": "Název serveru",
+    "toOrSubject": "Komu / Předmět",
+    "userId": "ID uživatele",
+    "userIdOrIpOrMethodOrUa": "ID uživatele / IP / Metoda / UA",
+    "userIdOrOrderId": "ID uživatele / ID objednávky",
+    "userIdOrOrderNoOrSubscribeId": "ID uživatele / Číslo objednávky / ID předplatného",
+    "userIdOrTokenOrIpOrUa": "ID uživatele / Token / IP / UA"
+  },
+  "sending": "Odesílání",
+  "sent": "Odesláno",
+  "success": "Úspěch",
+  "title": {
+    "balance": "Protokol zůstatku",
+    "commission": "Protokol provizí",
+    "email": "Emailový protokol",
+    "gift": "Protokol dárků",
+    "login": "Protokol přihlášení",
+    "mobile": "Protokol SMS",
+    "register": "Protokol registrace",
+    "resetSubscribe": "Protokol resetování předplatného",
+    "serverTraffic": "Protokol provozu serveru",
+    "subscribe": "Protokol předplatného",
+    "subscribeTraffic": "Protokol provozu předplatného",
+    "trafficDetails": "Podrobnosti o provozu"
+  },
+  "type": {
+    "231": "Automatické resetování",
+    "232": "Předčasné resetování",
+    "233": "Placené resetování",
+    "321": "Dobití",
+    "322": "Výběr",
+    "323": "Platba",
+    "324": "Vrácení",
+    "325": "Odměna",
+    "326": "Úprava správce",
+    "331": "Nákup",
+    "332": "Obnovení",
+    "333": "Vrácení",
+    "334": "Výběr",
+    "335": "Úprava správce",
+    "341": "Zvýšení",
+    "342": "Snížení"
+  },
+  "unknown": "Neznámý"
+}

apps/admin/locales/cs-CZ/marketing.json

@@ -1,4 +1,7 @@
 {
+  "active": "Aktivní",
+  "activeStatus": "Aktivní stav",
+  "addQuotaForUsers": "Přidat kvótu pro předplatné",
   "additional": "Další",
   "additionalRecipientEmails": "Další e-mailové adresy příjemců",
   "additionalRecipients": "Další příjemci",
@@ -6,6 +9,7 @@
   "allUsers": "Všichni uživatelé",
   "broadcastList": "Seznam vysílání",
   "broadcastLogs": "Záznamy vysílání",
+  "calculating": "Vypočítává se...",
   "cancel": "Zrušit",
   "cannotBeEmpty": "nemůže být prázdné",
   "completed": "Dokončeno",
@@ -13,15 +17,27 @@
   "confirmDelete": "Potvrdit smazání",
   "content": "Obsah e-mailu",
   "create": "Vytvořit",
+  "createAndSendQuotaTasks": "Vytvořit a rozeslat úkoly kvóty",
   "createBroadcast": "Vytvořit vysílání",
   "createNewEmailBroadcastCampaign": "Vytvořit novou kampaň e-mailového vysílání",
+  "createQuotaTask": "Vytvořit úkol kvóty",
+  "createQuotaTaskDescription": "Hromadně přidat kvótu pro způsobilá předplatná",
   "createSuccess": "Úspěšně vytvořeno",
+  "createTask": "Vytvořit úkol",
   "createdAt": "Vytvořeno dne",
+  "currentValidSubscriptionsOnly": "Pouze aktuální platná předplatná",
+  "currentValidSubscriptionsOnlyShort": "Pouze platná",
   "dailyLimit": "Denní limit musí být alespoň 1",
   "dailySendLimit": "Denní limit odeslání",
+  "dataQuota": "Datová kvóta",
+  "dayQuota": "Denní kvóta",
+  "days": "Dny",
   "delete": "Smazat",
   "deleteDescription": "Tuto operaci nelze vrátit zpět. Opravdu chcete smazat?",
   "deleteSuccess": "Úspěšně smazáno",
+  "distributionScope": "Rozsah distribuce",
+  "distributionScopeDescription": "Vyberte rozsah předplatného pro přijetí kvóty",
+  "distributionSettings": "Nastavení distribuce",
   "edit": "Upravit",
   "emailAddedToScheduledQueue": "E-mail přidán do naplánované fronty odeslání",
   "emailBroadcast": "E-mailové vysílání",
@@ -32,42 +48,91 @@
   "emailIntervalMinimum": "Interval e-mailu musí být alespoň 0,1 sekundy",
   "emailMarketing": "E-mailový marketing",
   "emailTaskManager": "Správce úkolů e-mailu",
+  "endTime": "Čas ukončení",
+  "enterAmount": "Zadejte částku",
+  "enterPercentage": "Zadejte procento",
   "errorMessage": "Zpráva o chybě",
   "estimatedRecipients": "Odhadovaný počet příjemců",
   "expiredSubscriptionUsersOnly": "Pouze uživatelé s vypršeným předplatným",
   "expiredUsers": "Uživatelé s vypršeným předplatným",
   "failCount": "Počet neúspěchů",
   "failed": "Neúspěšně",
+  "failedToCalculateRecipients": "Nepodařilo se vypočítat příjemce",
+  "failedToCreateQuotaTask": "Nepodařilo se vytvořit úkol kvóty",
   "failedToRefreshTaskStatus": "Nepodařilo se obnovit stav úkolu",
   "failedToStopTask": "Nepodařilo se zastavit úkol",
+  "fixedAmount": "Pevná částka",
+  "gift": "Dárek",
+  "giftAmount": "Částka dárku",
+  "giftRatio": "Poměr dárku",
+  "giftRatioDescription": "Procento kvóty, které se daruje na základě spotřeby předplatného (%)",
+  "giftType": "Typ částky dárku",
+  "giftValue": "Hodnota dárku",
   "inProgress": "Probíhá",
+  "inactive": "Neaktivní",
+  "includeSubscriptionsValidAfter": "Zahrnout předplatná platná po tomto datu",
+  "includeSubscriptionsValidBefore": "Zahrnout předplatná platná před tímto datem",
   "includeUsersRegisteredAfter": "Zahrnout uživatele registrované po tomto datu",
   "includeUsersRegisteredBefore": "Zahrnout uživatele registrované před tímto datem",
   "intervalTimeBetweenEmails": "Časový interval mezi jednotlivými e-maily",
+  "invoiceAmountRatioToGiftAmount": "Poměr částky faktury k částce dárku",
   "leaveEmptyForImmediateSend": "Nechte prázdné pro okamžité odeslání",
   "logList": "Seznam záznamů",
   "marketingManagement": "Správa marketingu",
   "maximumNumberPerDay": "Maximální počet e-mailů k odeslání za den",
+  "mustBeGreaterThanOrEqualToZero": "Musí být větší nebo rovno nule",
+  "no": "Ne",
   "noSubscriptionUsersOnly": "Pouze uživatelé bez předplatného",
+  "noSubscriptions": "Žádná předplatná",
+  "noTimeLimit": "Žádný časový limit",
   "nonSubscribers": "Nepředplatitelé",
   "notStarted": "Nebylo zahájeno",
+  "numberOfDaysForTheQuota": "Počet dní pro prodloužení platnosti předplatného",
   "onePerLine": "jeden na řádek",
   "only": "pouze",
   "pending": "Čeká se",
+  "percentageAmount": "Procentuální částka",
+  "percentageAmountDescription": "Procentuální částka dárku na základě aktuální ceny balíčku",
   "pleaseEnter": "Prosím zadejte",
+  "pleaseEnterAmount": "Prosím zadejte částku",
+  "pleaseEnterPercentage": "Prosím zadejte procento",
   "pleaseEnterValidEmailAddresses": "Prosím zadejte platné e-mailové adresy, jednu na řádek",
+  "pleaseSelectSubscribers": "Prosím vyberte balíčky",
   "processing": "Zpracovává se...",
   "progress": "Pokrok",
+  "quotaBroadcast": "Distribuce kvóty",
+  "quotaDays": "Prodloužení platnosti dní",
+  "quotaService": "Služba kvóty",
+  "quotaTaskCreatedSuccessfully": "Úkol kvóty byl úspěšně vytvořen",
+  "quotaTaskManager": "Správce úkolů kvóty",
+  "quotaTasks": "Úkoly kvóty",
+  "quotaType": "Typ kvóty",
+  "quotaTypeDescription": "Vyberte typ kvóty k distribuci",
   "recipient": "Příjemce",
   "recipientEmail": "E-mail příjemce",
+  "recipientScope": "Rozsah příjemce",
   "recipientType": "Typ příjemce",
   "registrationEndDate": "Datum ukončení registrace",
+  "registrationEndTime": "Čas ukončení registrace",
   "registrationStartDate": "Datum zahájení registrace",
+  "registrationStartTime": "Čas zahájení registrace",
+  "resetTraffic": "Resetovat provoz",
+  "resetTrafficDescription": "Zda resetovat použitý provoz předplatného",
   "scheduleSend": "Naplánovat odeslání",
   "scheduledSend": "Naplánované odeslání",
   "scheduledSendTimeMustBeLater": "Čas naplánovaného odeslání musí být pozdější než aktuální čas",
+  "scheduledTime": "Naplánovaný čas",
+  "selectDistributionScope": "Vyberte rozsah distribuce",
+  "selectGiftType": "Vyberte typ částky dárku",
+  "selectParametersToCalculate": "Vyberte parametry pro výpočet počtu příjemců",
+  "selectQuotaType": "Vyberte typ kvóty",
+  "selectRecipientScope": "Vyberte rozsah příjemce",
+  "selectRegistrationEndTime": "Vyberte čas ukončení registrace",
+  "selectRegistrationStartTime": "Vyberte čas zahájení registrace",
   "selectSendScope": "Vyberte rozsah odeslání",
   "selectSendTime": "Vyberte čas odeslání, nechte prázdné pro okamžité odeslání",
+  "selectSubscribers": "Vyberte balíčky",
+  "selectValidSubscriptionsOnly": "Vyberte pouze aktuálně platná předplatná",
   "sendFailed": "Odeslání selhalo, zkuste to prosím znovu",
   "sendNow": "Odeslat nyní",
   "sendScope": "Rozsah odeslání",
@@ -78,20 +143,33 @@
   "sentAt": "Odesláno dne",
   "specificUsers": "Specifičtí uživatelé",
   "specificUsersOnly": "Pouze další e-maily (přeskočit uživatele platformy)",
+  "startTime": "Čas zahájení",
   "status": "Stav",
   "stop": "Zastavit",
   "stopped": "Zastaveno",
   "subject": "Předmět e-mailu",
   "subscribedUsers": "Přihlášení uživatelé",
   "subscribedUsersOnly": "Pouze přihlášení uživatelé",
+  "subscribers": "Balíčky",
+  "subscriptionCount": "Počet předplatných",
+  "subscriptionValidityEndDate": "Datum konce platnosti předplatného",
+  "subscriptionValidityStartDate": "Datum začátku platnosti předplatného",
+  "subscriptions": "předplatná",
   "successCount": "Počet úspěchů",
   "taskStatusRefreshed": "Stav úkolu obnoven",
   "taskStoppedSuccessfully": "Úkol úspěšně zastaven",
+  "timeQuota": "Časová kvóta",
+  "timeRange": "Časový rozsah",
+  "timeRangeShort": "Čas",
   "totalSent": "Celkem odesláno",
   "updateSuccess": "Úspěšně aktualizováno",
   "useMarkdownEditor": "Použijte editor Markdown pro psaní obsahu e-mailu s funkcí náhledu",
   "users": "uživatelé",
+  "validOnly": "Pouze platné",
+  "validSubscriptionsOnly": "Pouze platná předplatná",
   "view": "Zobrazit",
   "viewAndManageEmailBroadcastTasks": "Zobrazit a spravovat úkoly e-mailového vysílání",
-  "viewContent": "Zobrazit obsah"
+  "viewAndManageQuotaTasks": "Zobrazit a spravovat úkoly kvóty",
+  "viewContent": "Zobrazit obsah",
+  "yes": "Ano"
 }

apps/admin/locales/cs-CZ/menu.json

@@ -1,27 +1,38 @@
 {
   "ADS Config": "Konfigurace ADS",
   "Announcement Management": "Správa oznámení",
-  "Application Management": "Správa aplikací",
   "Auth Control": "Řízení ověřování",
+  "Balance": "Zůstatek",
+  "Commerce": "Obchod",
+  "Commission": "Provize",
   "Coupon Management": "Správa kupónů",
   "Dashboard": "Přístrojová deska",
   "Document Management": "Správa dokumentů",
-  "Finance": "Finance",
+  "Email": "E-mail",
+  "Gift": "Dárek",
+  "Login": "Přihlášení",
+  "Logs & Analytics": "Protokoly a analýzy",
+  "Maintenance": "Údržba",
   "Marketing Management": "Řízení marketingu",
+  "Message": "Zpráva",
+  "Mobile": "SMS",
+  "Node Management": "Správa uzlů",
   "Order Management": "Správa objednávek",
   "Payment Config": "Konfigurace platby",
   "Product Management": "Správa produktů",
-  "Protocol Management": "Správa protokolů",
+  "Register": "Registrace",
-  "Rule Management": "Správa pravidel",
+  "Reset Subscribe": "Obnovit předplatné",
-  "Server": "Server",
   "Server Management": "Správa serveru",
-  "Settings": "Nastavení",
+  "Server Traffic": "Serverový provoz",
+  "Subscribe": "Předplatit",
   "Subscribe Config": "Nastavení odběru",
+  "Subscribe Traffic": "Provoz předplatného",
+  "System": "Systém",
   "System Config": "Systémová konfigurace",
-  "System Management": "Správa systému",
   "System Tool": "Systémový nástroj",
   "Ticket Management": "Správa lístků",
-  "User": "Uživatel",
+  "Traffic Details": "Podrobnosti o provozu",
   "User Detail": "Podrobnosti o uživateli",
-  "User Management": "Správa uživatelů"
+  "User Management": "Správa uživatelů",
+  "Users & Support": "Uživatelé a podpora"
 }