🎉 chore(init): project initialization

apps/admin/app/(auth)/page.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import LanguageSwitch from '@/components/language-switch';
+import useGlobalStore from '@/config/use-global';
+import { LoginIcon } from '@repo/ui/lotties';
+import { useTranslations } from 'next-intl';
+import Image from 'next/legacy/image';
+import Link from 'next/link';
+
+import ThemeSwitch from '@/components/theme-switch';
+import UserAuthForm from './user-auth-form';
+
+export default function Page() {
+  const t = useTranslations('auth');
+  const { common } = useGlobalStore();
+  const { site } = common;
+
+  return (
+    <main className='bg-muted/50 flex h-full min-h-screen items-center'>
+      <div className='flex size-full flex-auto flex-col justify-center lg:flex-row'>
+        <div className='flex lg:w-1/2 lg:flex-auto'>
+          <div className='flex w-full flex-col items-center justify-center px-5 py-4 md:px-14 lg:py-14'>
+            <Link className='mb-0 flex flex-col items-center lg:mb-12' href='/'>
+              <Image src={site.site_logo || '/favicon.svg'} height={48} width={48} alt='logo' />
+              <span className='text-2xl font-semibold'>{site.site_name}</span>
+            </Link>
+            <LoginIcon className='mx-auto hidden w-[275px] md:w-1/2 lg:block xl:w-[500px]' />
+            <p className='hidden w-[275px] text-center md:w-1/2 lg:block xl:w-[500px]'>
+              {site.site_desc}
+            </p>
+          </div>
+        </div>
+        <div className='flex flex-initial justify-center p-8 lg:flex-auto lg:justify-end'>
+          <div className='lg:bg-background flex flex-col items-center rounded-2xl md:w-[600px] lg:flex-auto lg:p-10 lg:shadow'>
+            <div className='flex flex-col items-stretch justify-center md:w-[400px] lg:h-full'>
+              <div className='flex flex-col justify-center pb-14 lg:flex-auto lg:pb-20'>
+                <UserAuthForm />
+              </div>
+              <div className='flex items-center justify-between'>
+                <div className='text-primary flex gap-5 text-sm font-semibold'>
+                  <Link href='/tos'>{t('tos')}</Link>
+                </div>
+                <div className='flex items-center gap-5'>
+                  <LanguageSwitch />
+                  <ThemeSwitch />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

apps/admin/app/(auth)/turnstile.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useLocale } from 'next-intl';
+import { useTheme } from 'next-themes';
+import { useEffect } from 'react';
+import Turnstile, { useTurnstile } from 'react-turnstile';
+
+import useGlobalStore from '@/config/use-global';
+
+export default function CloudFlareTurnstile({
+  id,
+  value,
+  onChange,
+}: {
+  id?: string;
+  value?: null | string;
+  onChange: (value?: string) => void;
+}) {
+  const { common } = useGlobalStore();
+  const { verify } = common;
+  const { resolvedTheme } = useTheme();
+  const locale = useLocale();
+  const turnstile = useTurnstile();
+
+  useEffect(() => {
+    if (value === '') {
+      turnstile.reset();
+    }
+  }, [turnstile, value]);
+
+  return (
+    verify.turnstile_site_key && (
+      <Turnstile
+        id={id}
+        sitekey={verify.turnstile_site_key}
+        theme={resolvedTheme as 'light' | 'dark'}
+        language={locale.toLowerCase()}
+        fixedSize
+        onVerify={(token) => onChange(token)}
+        // onError={() => {
+        //   onChange();
+        //   turnstile.reset();
+        // }}
+        onExpire={() => {
+          onChange();
+          turnstile.reset();
+        }}
+        onTimeout={() => {
+          onChange();
+          turnstile.reset();
+        }}
+      />
+    )
+  );
+}

apps/admin/app/(auth)/user-auth-form.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import {
+  NEXT_PUBLIC_DEFAULT_USER_EMAIL,
+  NEXT_PUBLIC_DEFAULT_USER_PASSWORD,
+} from '@/config/constants';
+import useGlobalStore from '@/config/use-global';
+import { checkUser, resetPassword, userLogin, userRegister } from '@/services/common/auth';
+import { getRedirectUrl, setAuthorization } from '@/utils/common';
+import { Icon } from '@iconify/react';
+import { Button } from '@shadcn/ui/button';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { cn } from '@shadcn/ui/lib/utils';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { ReactNode, useState, useTransition } from 'react';
+import UserCheckForm from './user-check-form';
+import UserLoginForm from './user-login-form';
+import UserRegisterForm from './user-register-form';
+import UserResetForm from './user-reset-form';
+
+export default function UserAuthForm() {
+  const t = useTranslations('auth');
+  const { common } = useGlobalStore();
+  const { register } = common;
+  const router = useRouter();
+  const [type, setType] = useState<'login' | 'register' | 'reset'>();
+  const [loading, startTransition] = useTransition();
+  const [initialValues, setInitialValues] = useState<{
+    email?: string;
+    password?: string;
+  }>({
+    email: NEXT_PUBLIC_DEFAULT_USER_EMAIL,
+    password: NEXT_PUBLIC_DEFAULT_USER_PASSWORD,
+  });
+
+  const handleFormSubmit = async (params: any) => {
+    const onLogin = async (token?: string) => {
+      if (!token) return;
+      setAuthorization(token);
+      router.replace(getRedirectUrl());
+      router.refresh();
+    };
+    startTransition(async () => {
+      try {
+        switch (type) {
+          case 'login':
+            // eslint-disable-next-line no-case-declarations
+            const login = await userLogin(params);
+            toast.success(t('login.success'));
+            onLogin(login.data.data?.token);
+            break;
+          case 'register':
+            // eslint-disable-next-line no-case-declarations
+            const create = await userRegister(params);
+            toast.success(t('register.success'));
+            onLogin(create.data.data?.token);
+            break;
+          case 'reset':
+            await resetPassword(params);
+            toast.success(t('reset.success'));
+            setType('login');
+            break;
+          default:
+            if (type === 'reset') break;
+            // eslint-disable-next-line no-case-declarations
+            const response = await checkUser(params);
+            setInitialValues({
+              ...initialValues,
+              ...params,
+            });
+            setType(response.data.data?.exist ? 'login' : 'register');
+            break;
+        }
+      } catch (error) {
+        /* empty */
+      }
+    });
+  };
+  let UserForm: ReactNode = null;
+  switch (type) {
+    case 'login':
+      UserForm = (
+        <UserLoginForm
+          loading={loading}
+          onSubmit={handleFormSubmit}
+          initialValues={initialValues}
+          setInitialValues={setInitialValues}
+          onSwitchForm={setType}
+        />
+      );
+      break;
+    case 'register':
+      UserForm = (
+        <UserRegisterForm
+          loading={loading}
+          onSubmit={handleFormSubmit}
+          initialValues={initialValues}
+          setInitialValues={setInitialValues}
+          onSwitchForm={setType}
+        />
+      );
+      break;
+    case 'reset':
+      UserForm = (
+        <UserResetForm
+          loading={loading}
+          onSubmit={handleFormSubmit}
+          initialValues={initialValues}
+          setInitialValues={setInitialValues}
+          onSwitchForm={setType}
+        />
+      );
+      break;
+    default:
+      UserForm = (
+        <UserCheckForm
+          loading={loading}
+          onSubmit={handleFormSubmit}
+          initialValues={initialValues}
+        />
+      );
+      break;
+  }
+
+  return (
+    <>
+      <div className='mb-11 text-center'>
+        <h1 className='mb-3 text-2xl font-bold'>{t(`${type || 'check'}.title`)}</h1>
+        <div className='text-muted-foreground font-medium'>
+          {t(`${type || 'check'}.description`)}
+        </div>
+      </div>
+      {!((type === 'register' && register.stop_register) || type === 'reset') && (
+        <>
+          <div className='mb-3 flex flex-wrap items-center justify-center gap-3 font-bold'>
+            <Button type='button' variant='outline'>
+              <Icon icon='uil:telegram' className='mr-2 size-5' />
+              Telegram
+            </Button>
+            <Button type='button' variant='outline'>
+              <Icon icon='uil:google' className='mr-2 size-5' />
+              Google
+            </Button>
+            <Button type='button' variant='outline'>
+              <Icon icon='uil:apple' className='mr-2 size-5' />
+              Apple
+            </Button>
+          </div>
+          <div
+            className={cn(
+              'my-14 flex h-0 items-center text-center',
+              'before:mr-4 before:block before:w-1/2 before:border-b-[1px]',
+              'after:ml-4 after:w-1/2 after:border-b-[1px]',
+            )}
+          >
+            <span className='text-muted-foreground w-[125px] text-sm'>{t('orWithEmail')}</span>
+          </div>
+        </>
+      )}
+
+      {UserForm}
+    </>
+  );
+}

apps/admin/app/(auth)/user-check-form.tsx

@@ -0,0 +1,110 @@
+import useGlobalStore from '@/config/use-global';
+import { Icon } from '@iconify/react';
+import { Button } from '@shadcn/ui/button';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@shadcn/ui/form';
+import { Input } from '@shadcn/ui/input';
+import { useForm } from '@shadcn/ui/lib/react-hook-form';
+import { z, zodResolver } from '@shadcn/ui/lib/zod';
+import { useTranslations } from 'next-intl';
+import { useEffect, useRef, useState } from 'react';
+
+export default function UserCheckForm({
+  loading,
+  onSubmit,
+  initialValues,
+}: {
+  loading?: boolean;
+  onSubmit: (data: any) => void;
+  initialValues: any;
+}) {
+  const t = useTranslations('auth.check');
+  const { common } = useGlobalStore();
+  const { register } = common;
+  const formSchema = z.object({
+    email: z
+      .string()
+      .email(t('email'))
+      .refine(
+        (email) => {
+          if (!register.enable_email_domain_suffix) return true;
+          const domain = email.split('@')[1] as string;
+          return register.email_domain_suffix_list.split('\n').includes(domain);
+        },
+        {
+          message: t('whitelist'),
+        },
+      ),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: initialValues,
+  });
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleEmailChange = (value: string) => {
+    form.setValue('email', value);
+
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+
+    typingTimeoutRef.current = setTimeout(async () => {
+      const isValid = await form.trigger('email');
+      if (isValid) {
+        setIsSubmitting(true);
+        form.handleSubmit(onSubmit)();
+      } else {
+        setIsSubmitting(false);
+      }
+    }, 500);
+  };
+
+  useEffect(() => {
+    if (initialValues && initialValues.email) {
+      handleEmailChange(initialValues.email);
+    }
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
+        <FormField
+          control={form.control}
+          name='email'
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Input
+                  disabled={loading}
+                  placeholder='Enter your email...'
+                  type='email'
+                  {...field}
+                  onChange={(e) => handleEmailChange(e.target.value)}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type='submit' disabled={!isSubmitting}>
+          {isSubmitting ? (
+            <>
+              <Icon icon='mdi:loading' className='mr-2 size-5 animate-spin' />
+              {t('checking')}
+            </>
+          ) : (
+            t('continue')
+          )}
+        </Button>
+      </form>
+    </Form>
+  );
+}

apps/admin/app/(auth)/user-login-form.tsx

@@ -0,0 +1,110 @@
+import useGlobalStore from '@/config/use-global';
+import { Icon } from '@iconify/react';
+import { Button } from '@shadcn/ui/button';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@shadcn/ui/form';
+import { Input } from '@shadcn/ui/input';
+import { useForm } from '@shadcn/ui/lib/react-hook-form';
+import { z, zodResolver } from '@shadcn/ui/lib/zod';
+import { useTranslations } from 'next-intl';
+import { Dispatch, SetStateAction } from 'react';
+
+import CloudFlareTurnstile from './turnstile';
+
+export default function UserLoginForm({
+  loading,
+  onSubmit,
+  initialValues,
+  setInitialValues,
+  onSwitchForm,
+}: {
+  loading?: boolean;
+  onSubmit: (data: any) => void;
+  initialValues: any;
+  setInitialValues: Dispatch<SetStateAction<any>>;
+  onSwitchForm: (type?: 'register' | 'reset') => void;
+}) {
+  const t = useTranslations('auth.login');
+  const { common } = useGlobalStore();
+  const { verify } = common;
+
+  const formSchema = z.object({
+    email: z.string(),
+    password: z.string(),
+    cf_token: verify.enable_login_verify ? z.string() : z.string().optional(),
+  });
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: initialValues,
+  });
+
+  return (
+    <>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
+          <FormField
+            control={form.control}
+            name='email'
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <Input disabled placeholder='Enter your email...' type='email' {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name='password'
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <Input
+                    disabled={loading}
+                    placeholder='Enter your password...'
+                    type='password'
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {verify.enable_login_verify && (
+            <FormField
+              control={form.control}
+              name='cf_token'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <CloudFlareTurnstile id='login' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+          <Button type='submit' disabled={loading}>
+            {loading && <Icon icon='mdi:loading' className='animate-spin' />}
+            {t('title')}
+          </Button>
+        </form>
+      </Form>
+      <div className='mt-4 flex w-full justify-between text-sm'>
+        <Button variant='link' type='button' className='p-0' onClick={() => onSwitchForm('reset')}>
+          {t('forgotPassword')}
+        </Button>
+        <Button
+          variant='link'
+          className='p-0'
+          onClick={() => {
+            setInitialValues(undefined);
+            onSwitchForm(undefined);
+          }}
+        >
+          {t('switchAccount')}
+        </Button>
+      </div>
+    </>
+  );
+}

apps/admin/app/(auth)/user-register-form.tsx

@@ -0,0 +1,205 @@
+import useGlobalStore from '@/config/use-global';
+import { sendEmailCode } from '@/services/common/common';
+import { Icon } from '@iconify/react';
+import { Markdown } from '@repo/ui/markdown';
+import { Button } from '@shadcn/ui/button';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@shadcn/ui/form';
+import { Input } from '@shadcn/ui/input';
+import { useForm } from '@shadcn/ui/lib/react-hook-form';
+import { z, zodResolver } from '@shadcn/ui/lib/zod';
+import { useCountDown } from 'ahooks';
+import { useTranslations } from 'next-intl';
+import { Dispatch, SetStateAction, useState } from 'react';
+
+import CloudFlareTurnstile from './turnstile';
+
+export default function UserRegisterForm({
+  loading,
+  onSubmit,
+  initialValues,
+  setInitialValues,
+  onSwitchForm,
+}: {
+  loading?: boolean;
+  onSubmit: (data: any) => void;
+  initialValues: any;
+  setInitialValues: Dispatch<SetStateAction<any>>;
+  onSwitchForm: (type?: 'register' | 'reset') => void;
+}) {
+  const t = useTranslations('auth.register');
+  const { common } = useGlobalStore();
+  const { verify, register, invite } = common;
+
+  const [targetDate, setTargetDate] = useState<number>();
+  const [, { seconds }] = useCountDown({
+    targetDate,
+    onEnd: () => {
+      setTargetDate(undefined);
+    },
+  });
+  const handleSendCode = async () => {
+    await sendEmailCode({
+      email: initialValues.email,
+      type: 1,
+    });
+    setTargetDate(Date.now() + 60000);
+  };
+
+  const formSchema = z
+    .object({
+      email: z.string(),
+      password: z.string(),
+      repeat_password: z.string(),
+      code: register.enable_email_verify ? z.string() : z.string().nullish(),
+      invite: invite.forced_invite ? z.string() : z.string().nullish(),
+      cf_token: verify.enable_register_verify ? z.string() : z.string().nullish(),
+    })
+    .superRefine(({ password, repeat_password }, ctx) => {
+      if (password !== repeat_password) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t('passwordMismatch'),
+          path: ['repeat_password'],
+        });
+      }
+    });
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      ...initialValues,
+      invite: sessionStorage.getItem('invite'),
+    },
+  });
+
+  return (
+    <>
+      {register.stop_register ? (
+        <Markdown>{t('message')}</Markdown>
+      ) : (
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input disabled placeholder='Enter your email...' type='email' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      disabled={loading}
+                      placeholder='Enter your password...'
+                      type='password'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='repeat_password'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      disabled={loading}
+                      placeholder='Enter password again...'
+                      type='password'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {register.enable_email_verify && (
+              <FormField
+                control={form.control}
+                name='code'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <div className='flex items-center gap-2'>
+                        <Input
+                          disabled={loading}
+                          placeholder='Enter code...'
+                          type='text'
+                          {...field}
+                          value={field.value as string}
+                        />
+                        <Button type='button' onClick={handleSendCode} disabled={seconds > 0}>
+                          {seconds > 0 ? `${seconds}s` : t('get')}
+                        </Button>
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+            <FormField
+              control={form.control}
+              name='invite'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      disabled={loading}
+                      placeholder={t('invite')}
+                      {...field}
+                      value={field.value || ''}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {verify.enable_register_verify && (
+              <FormField
+                control={form.control}
+                name='cf_token'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <CloudFlareTurnstile id='register' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+            <Button type='submit' disabled={loading}>
+              {loading && <Icon icon='mdi:loading' className='animate-spin' />}
+              {t('title')}
+            </Button>
+          </form>
+        </Form>
+      )}
+      <div className='mt-4 text-right text-sm'>
+        {t('existingAccount')}
+        <Button
+          variant='link'
+          className='p-0'
+          onClick={() => {
+            setInitialValues(undefined);
+            onSwitchForm(undefined);
+          }}
+        >
+          {t('switchToLogin')}
+        </Button>
+      </div>
+    </>
+  );
+}

apps/admin/app/(auth)/user-reset-form.tsx

@@ -0,0 +1,153 @@
+import useGlobalStore from '@/config/use-global';
+import { sendEmailCode } from '@/services/common/common';
+import { Icon } from '@iconify/react';
+import { Button } from '@shadcn/ui/button';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@shadcn/ui/form';
+import { Input } from '@shadcn/ui/input';
+import { useForm } from '@shadcn/ui/lib/react-hook-form';
+import { z, zodResolver } from '@shadcn/ui/lib/zod';
+import { useCountDown } from 'ahooks';
+import { useTranslations } from 'next-intl';
+import { Dispatch, SetStateAction, useState } from 'react';
+
+import CloudFlareTurnstile from './turnstile';
+
+export default function UserResetForm({
+  loading,
+  onSubmit,
+  initialValues,
+  setInitialValues,
+  onSwitchForm,
+}: {
+  loading?: boolean;
+  onSubmit: (data: any) => void;
+  initialValues: any;
+  setInitialValues: Dispatch<SetStateAction<any>>;
+  onSwitchForm: (type?: 'register' | 'reset') => void;
+}) {
+  const t = useTranslations('auth.reset');
+
+  const { common } = useGlobalStore();
+  const { verify, register } = common;
+
+  const [targetDate, setTargetDate] = useState<number>();
+  const [, { seconds }] = useCountDown({
+    targetDate,
+    onEnd: () => {
+      setTargetDate(undefined);
+    },
+  });
+  const handleSendCode = async () => {
+    await sendEmailCode({
+      email: initialValues.email,
+      type: 2,
+    });
+    setTargetDate(Date.now() + 60000); // 60秒倒计时
+  };
+
+  const formSchema = z.object({
+    email: z.string(),
+    password: z.string(),
+    code: register.enable_email_verify ? z.string() : z.string().nullish(),
+    cf_token: verify.enable_register_verify ? z.string() : z.string().nullish(),
+  });
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: initialValues,
+  });
+
+  return (
+    <>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
+          <FormField
+            control={form.control}
+            name='email'
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <Input disabled placeholder='Enter your email...' type='email' {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name='password'
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <Input
+                    disabled={loading}
+                    placeholder='Enter your password...'
+                    type='password'
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {register.enable_email_verify && (
+            <FormField
+              control={form.control}
+              name='code'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <div className='flex items-center gap-2'>
+                      <Input
+                        disabled={loading}
+                        placeholder='Enter code...'
+                        type='text'
+                        {...field}
+                        value={field.value as string}
+                      />
+                      <Button type='button' onClick={handleSendCode} disabled={seconds > 0}>
+                        {seconds > 0 ? `${seconds}s` : t('get')}
+                      </Button>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+          {verify.enable_reset_password_verify && (
+            <FormField
+              control={form.control}
+              name='cf_token'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <CloudFlareTurnstile id='reset' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+          <Button type='submit' disabled={loading}>
+            {loading && <Icon icon='mdi:loading' className='animate-spin' />}
+            {t('title')}
+          </Button>
+        </form>
+      </Form>
+      <div className='mt-4 text-right text-sm'>
+        {t('existingAccount')}
+        <Button
+          variant='link'
+          className='p-0'
+          onClick={() => {
+            setInitialValues(undefined);
+            onSwitchForm(undefined);
+          }}
+        >
+          {t('switchToLogin')}
+        </Button>
+      </div>
+    </>
+  );
+}

apps/admin/app/dashboard/announcement/notice-form.tsx

@@ -0,0 +1,134 @@
+import { Icon } from '@iconify/react';
+import { MarkdownEditor } from '@repo/ui/editor';
+import { Button } from '@shadcn/ui/button';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@shadcn/ui/form';
+import { Input } from '@shadcn/ui/input';
+import { useForm } from '@shadcn/ui/lib/react-hook-form';
+import { z, zodResolver } from '@shadcn/ui/lib/zod';
+import { ScrollArea } from '@shadcn/ui/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@shadcn/ui/sheet';
+import { useTranslations } from 'next-intl';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+const formSchema = z.object({
+  title: z.string(),
+  content: z.string().optional(),
+});
+
+interface AnnouncementFormProps<T> {
+  onSubmit: (data: T) => Promise<boolean> | boolean;
+  initialValues?: T;
+  loading?: boolean;
+  trigger: string;
+  title: string;
+}
+
+export default function AnnouncementForm<T extends Record<string, any>>({
+  onSubmit,
+  initialValues,
+  loading,
+  trigger,
+  title,
+}: AnnouncementFormProps<T>) {
+  const t = useTranslations('announcement');
+  const { resolvedTheme } = useTheme();
+  const [open, setOpen] = useState(false);
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      title: '',
+      content: '',
+      ...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-[800px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100vh-48px-36px-36px-env(safe-area-inset-top))]'>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-4 px-6 pt-4'>
+              <FormField
+                control={form.control}
+                name='title'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.title')}</FormLabel>
+                    <FormControl>
+                      <Input placeholder={t('form.titlePlaceholder')} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='content'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.content')}</FormLabel>
+                    <FormControl>
+                      <MarkdownEditor
+                        value={field.value}
+                        onChange={(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('form.cancel')}
+          </Button>
+          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
+            {t('form.confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,173 @@
+'use client';
+
+import {
+  createAnnouncement,
+  deleteAnnouncement,
+  getAnnouncementList,
+  updateAnnouncement,
+  updateAnnouncementEnable,
+} from '@/services/admin/announcement';
+import { ConfirmButton } from '@repo/ui/confirm-button';
+import { format } from '@shadcn/ui/lib/date-fns';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { Switch } from '@shadcn/ui/switch';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import { Button } from '@shadcn/ui/button';
+import NoticeForm from './notice-form';
+
+export default function Page() {
+  const t = useTranslations('announcement');
+  const [loading, setLoading] = useState(false);
+  const ref = useRef<ProTableActions>();
+
+  return (
+    <ProTable<API.Announcement, { enable: boolean; search: string }>
+      action={ref}
+      header={{
+        title: t('announcementList'),
+        toolbar: (
+          <NoticeForm<API.CreateAnnouncementRequest>
+            trigger={t('create')}
+            title={t('createAnnouncement')}
+            loading={loading}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await createAnnouncement(values);
+                toast.success(t('createSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />
+        ),
+      }}
+      columns={[
+        {
+          accessorKey: 'enable',
+          header: t('enable'),
+          cell: ({ row }) => {
+            return (
+              <Switch
+                defaultChecked={row.getValue('enable')}
+                onCheckedChange={async (checked) => {
+                  await updateAnnouncementEnable({
+                    id: row.original.id,
+                    enable: checked,
+                  });
+                  ref.current?.refresh();
+                }}
+              />
+            );
+          },
+        },
+        {
+          accessorKey: 'title',
+          header: t('title'),
+        },
+        {
+          accessorKey: 'content',
+          header: t('content'),
+        },
+        {
+          accessorKey: 'updated_at',
+          header: t('updatedAt'),
+          cell: ({ row }) => format(row.getValue('updated_at'), 'yyyy-MM-dd HH:mm:ss'),
+        },
+      ]}
+      params={[
+        {
+          key: 'enable',
+          placeholder: t('enable'),
+          options: [
+            { label: t('show'), value: 'false' },
+            { label: t('hide'), value: 'true' },
+          ],
+        },
+        { key: 'search' },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await getAnnouncementList({
+          ...pagination,
+          ...filter,
+        });
+        return {
+          list: data.data?.list || [],
+          total: data.data?.total || 0,
+        };
+      }}
+      actions={{
+        render(row) {
+          return [
+            <NoticeForm<API.Announcement>
+              key='edit'
+              trigger={t('edit')}
+              title={t('editAnnouncement')}
+              loading={loading}
+              initialValues={row}
+              onSubmit={async (values) => {
+                setLoading(true);
+                try {
+                  await updateAnnouncement({
+                    ...row,
+                    ...values,
+                  });
+                  toast.success(t('updateSuccess'));
+                  ref.current?.refresh();
+                  setLoading(false);
+                  return true;
+                } catch (error) {
+                  setLoading(false);
+                  return false;
+                }
+              }}
+            />,
+            <ConfirmButton
+              key='delete'
+              trigger={<Button variant='destructive'>{t('delete')}</Button>}
+              title={t('confirmDelete')}
+              description={t('deleteDescription')}
+              onConfirm={async () => {
+                await deleteAnnouncement({
+                  id: row.id,
+                });
+                toast.success(t('deleteSuccess'));
+                ref.current?.refresh();
+              }}
+              cancelText={t('cancel')}
+              confirmText={t('confirm')}
+            />,
+          ];
+        },
+        batchRender(rows) {
+          return [
+            <ConfirmButton
+              key='delete'
+              trigger={<Button variant='destructive'>{t('delete')}</Button>}
+              title={t('confirmDelete')}
+              description={t('deleteDescription')}
+              onConfirm={async () => {
+                for (const element of rows) {
+                  await deleteAnnouncement({
+                    id: element.id!,
+                  });
+                }
+                toast.success(t('deleteSuccess'));
+                ref.current?.refresh();
+              }}
+              cancelText={t('cancel')}
+              confirmText={t('confirm')}
+            />,
+          ];
+        },
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,353 @@
+'use client';
+
+import { getSubscribeList } from '@/services/admin/subscribe';
+import { Icon } from '@iconify/react';
+import { Combobox } from '@repo/ui/combobox';
+import { DatePicker } from '@repo/ui/date-picker';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { unitConversion } from '@repo/ui/utils';
+import { Button } from '@shadcn/ui/button';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@shadcn/ui/form';
+import { useForm } from '@shadcn/ui/lib/react-hook-form';
+import { z, zodResolver } from '@shadcn/ui/lib/zod';
+import { RadioGroup, RadioGroupItem } from '@shadcn/ui/radio-group';
+import { ScrollArea } from '@shadcn/ui/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@shadcn/ui/sheet';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
+const formSchema = z.object({
+  name: z.string(),
+  code: z.string().optional(),
+  count: z.number().optional(),
+  type: z.number().optional(),
+  discount: z.number().optional(),
+  start_time: z.number().optional(),
+  expire_time: z.number().optional(),
+  subscribe: z.array(z.number()).nullish(),
+  user_limit: z.number().optional(),
+});
+
+interface CouponFormProps<T> {
+  onSubmit: (data: T) => Promise<boolean> | boolean;
+  initialValues?: T;
+  loading?: boolean;
+  trigger: string;
+  title: string;
+}
+
+export default function CouponForm<T extends Record<string, any>>({
+  onSubmit,
+  initialValues,
+  loading,
+  trigger,
+  title,
+}: CouponFormProps<T>) {
+  const t = useTranslations('coupon');
+
+  const [open, setOpen] = useState(false);
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      type: 1,
+      ...initialValues,
+    } as any,
+  });
+
+  useEffect(() => {
+    form?.reset(initialValues);
+  }, [form, initialValues]);
+
+  async function handleSubmit(data: { [x: string]: any }) {
+    const bool = await onSubmit(data as T);
+    if (bool) setOpen(false);
+  }
+
+  const type = form.watch('type');
+
+  const { data: subscribe } = useQuery({
+    queryKey: ['getSubscribeList', 'all'],
+    queryFn: async () => {
+      const { data } = await getSubscribeList({
+        page: 1,
+        size: 9999,
+      });
+      return data.data?.list as API.Subscribe[];
+    },
+  });
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          onClick={() => {
+            form.reset();
+            setOpen(true);
+          }}
+        >
+          {trigger}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100vh-48px-36px-36px-env(safe-area-inset-top))]'>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-4 px-6 pt-4'>
+              <FormField
+                control={form.control}
+                name='name'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.name')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('form.enterCouponName')}
+                        value={field.value}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='code'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.customCouponCode')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('form.customCouponCodePlaceholder')}
+                        {...field}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='type'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.type')}</FormLabel>
+                    <FormControl>
+                      <RadioGroup
+                        defaultValue={String(field.value)}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, Number(value));
+                          form.setValue('discount', '');
+                        }}
+                        className='flex gap-2'
+                      >
+                        <FormItem className='flex items-center space-x-3 space-y-0'>
+                          <FormControl>
+                            <RadioGroupItem value='1' />
+                          </FormControl>
+                          <FormLabel className='font-normal'>
+                            {t('form.percentageDiscount')}
+                          </FormLabel>
+                        </FormItem>
+                        <FormItem className='flex items-center space-x-3 space-y-0'>
+                          <FormControl>
+                            <RadioGroupItem value='2' />
+                          </FormControl>
+                          <FormLabel className='font-normal'>{t('form.amountDiscount')}</FormLabel>
+                        </FormItem>
+                      </RadioGroup>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {type === 1 && (
+                <FormField
+                  control={form.control}
+                  name='discount'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.percentageDiscount')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          placeholder={t('form.enterValue')}
+                          type='number'
+                          suffix='%'
+                          value={field.value}
+                          onValueChange={(value) => {
+                            form.setValue(field.name, value);
+                          }}
+                          min={1}
+                          max={100}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+              {type === 2 && (
+                <FormField
+                  control={form.control}
+                  name='discount'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.amountDiscount')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          placeholder={t('form.enterValue')}
+                          type='number'
+                          value={field.value}
+                          formatInput={(value) => unitConversion('centsToDollars', value)}
+                          formatOutput={(value) => unitConversion('dollarsToCents', value)}
+                          onValueChange={(value) => {
+                            form.setValue(field.name, value);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+              <FormField
+                control={form.control}
+                name='server'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.specifiedServer')}</FormLabel>
+                    <FormControl>
+                      <Combobox<number, true>
+                        multiple
+                        placeholder={t('form.selectServer')}
+                        value={field.value}
+                        onChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                        options={subscribe?.map((item: API.Subscribe) => ({
+                          value: item.id,
+                          label: item.name,
+                        }))}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='start_time'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.startTime')}</FormLabel>
+                    <FormControl>
+                      <DatePicker
+                        placeholder={t('form.enterValue')}
+                        value={field.value}
+                        disabled={(date) => date < new Date(Date.now() - 24 * 60 * 60 * 1000)}
+                        onChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='expire_time'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.expireTime')}</FormLabel>
+                    <FormControl>
+                      <DatePicker
+                        placeholder={t('form.enterValue')}
+                        value={field.value}
+                        onChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='count'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.count')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('form.countPlaceholder')}
+                        type='number'
+                        {...field}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='user_limit'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.userLimit')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('form.userLimitPlaceholder')}
+                        type='number'
+                        {...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('form.cancel')}
+          </Button>
+          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
+            {t('form.confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,232 @@
+'use client';
+
+import { Display } from '@/components/display';
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  batchDeleteCoupon,
+  createCoupon,
+  deleteCoupon,
+  getCouponList,
+  updateCoupon,
+} from '@/services/admin/coupon';
+import { getSubscribeList } from '@/services/admin/subscribe';
+import { ConfirmButton } from '@repo/ui/confirm-button';
+import { formatDate } from '@repo/ui/utils';
+import { Badge } from '@shadcn/ui/badge';
+import { Button } from '@shadcn/ui/button';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { Switch } from '@shadcn/ui/switch';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import CouponForm from './coupon-form';
+
+export default function Page() {
+  const t = useTranslations('coupon');
+  const [loading, setLoading] = useState(false);
+  const { data } = useQuery({
+    queryKey: ['getSubscribeList', 'all'],
+    queryFn: async () => {
+      const { data } = await getSubscribeList({
+        page: 1,
+        size: 9999,
+      });
+      return data.data?.list as API.SubscribeGroup[];
+    },
+  });
+  const ref = useRef<ProTableActions>();
+  return (
+    <ProTable<API.Coupon, { group_id: number; query: string }>
+      action={ref}
+      header={{
+        toolbar: (
+          <CouponForm<API.CreateCouponRequest>
+            trigger={t('create')}
+            title={t('createCoupon')}
+            loading={loading}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await createCoupon({
+                  ...values,
+                  enable: false,
+                });
+                toast.success(t('createSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />
+        ),
+      }}
+      params={[
+        {
+          key: 'search',
+        },
+        {
+          key: 'subscribe',
+          placeholder: t('subscribe'),
+          options: data?.map((item) => ({
+            label: item.name,
+            value: String(item.id),
+          })),
+        },
+      ]}
+      request={async (pagination, filters) => {
+        const { data } = await getCouponList({
+          ...pagination,
+          ...filters,
+        });
+        return {
+          list: data.data?.list || [],
+          total: data.data?.total || 0,
+        };
+      }}
+      columns={[
+        {
+          accessorKey: 'enable',
+          header: t('enable'),
+          cell: ({ row }) => {
+            return (
+              <Switch
+                defaultChecked={row.getValue('enable')}
+                onCheckedChange={async (checked) => {
+                  await updateCoupon({
+                    ...row,
+                    enable: checked,
+                  } as any);
+                  ref.current?.refresh();
+                }}
+              />
+            );
+          },
+        },
+        {
+          accessorKey: 'name',
+          header: t('name'),
+        },
+        {
+          accessorKey: 'code',
+          header: t('code'),
+        },
+        {
+          accessorKey: 'type',
+          header: t('type'),
+          cell: ({ row }) => (
+            <Badge variant={row.getValue('type') === 1 ? 'default' : 'secondary'}>
+              {row.getValue('type') === 1 ? t('percentage') : t('amount')}
+            </Badge>
+          ),
+        },
+        {
+          accessorKey: 'discount',
+          header: t('discount'),
+          cell: ({ row }) => (
+            <Badge variant={row.getValue('type') === 1 ? 'default' : 'secondary'}>
+              {row.getValue('type') === 1 ? (
+                `${row.original.discount} %`
+              ) : (
+                <Display type='currency' value={row.original.discount} />
+              )}
+            </Badge>
+          ),
+        },
+        {
+          accessorKey: 'count',
+          header: t('count'),
+          cell: ({ row }) => (
+            <div className='flex flex-col'>
+              <span>
+                {t('count')}: {row.original.count === 0 ? t('unlimited') : row.original.count}
+              </span>
+              <span>
+                {t('remainingTimes')}:{' '}
+                {row.original.count === 0
+                  ? t('unlimited')
+                  : row.original.count - row.original.used_count}
+              </span>
+              <span>
+                {t('usedTimes')}: {row.original.used_count}
+              </span>
+            </div>
+          ),
+        },
+        {
+          accessorKey: 'expire',
+          header: t('validityPeriod'),
+          cell: ({ row }) => {
+            const { start_time, expire_time } = row.original;
+            if (start_time) {
+              return expire_time ? (
+                <>
+                  {formatDate(start_time)} - {formatDate(expire_time)}
+                </>
+              ) : start_time ? (
+                formatDate(start_time)
+              ) : (
+                '--'
+              );
+            }
+            return '--';
+          },
+        },
+      ]}
+      actions={{
+        render: (row) => [
+          <CouponForm<API.UpdateCouponRequest>
+            key='edit'
+            trigger={t('edit')}
+            title={t('editCoupon')}
+            loading={loading}
+            initialValues={row}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await updateCoupon({ ...row, ...values });
+                toast.success(t('updateSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />,
+          <ConfirmButton
+            key='delete'
+            trigger={<Button variant='destructive'>{t('delete')}</Button>}
+            title={t('confirmDelete')}
+            description={t('deleteWarning')}
+            onConfirm={async () => {
+              await deleteCoupon({ 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('delete')}</Button>}
+            title={t('confirmDelete')}
+            description={t('deleteWarning')}
+            onConfirm={async () => {
+              await batchDeleteCoupon({ ids: rows.map((item) => item.id) });
+              toast.success(t('deleteSuccess'));
+              ref.current?.reset();
+            }}
+            cancelText={t('cancel')}
+            confirmText={t('confirm')}
+          />,
+        ],
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,154 @@
+import { Icon } from '@iconify/react';
+import { MarkdownEditor } from '@repo/ui/editor';
+import { TagInput } from '@repo/ui/tag-input';
+import { Button } from '@shadcn/ui/button';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@shadcn/ui/form';
+import { Input } from '@shadcn/ui/input';
+import { useForm } from '@shadcn/ui/lib/react-hook-form';
+import { z, zodResolver } from '@shadcn/ui/lib/zod';
+import { ScrollArea } from '@shadcn/ui/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@shadcn/ui/sheet';
+import { useTranslations } from 'next-intl';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+const formSchema = z.object({
+  title: z.string(),
+  tags: z.array(z.string()).nullish(),
+  content: z.string().nullish(),
+});
+
+interface DocumentFormProps<T> {
+  onSubmit: (data: T) => Promise<boolean> | boolean;
+  initialValues?: T;
+  loading?: boolean;
+  trigger: string;
+  title: string;
+}
+
+export default function DocumentForm<T extends Record<string, any>>({
+  onSubmit,
+  initialValues,
+  loading,
+  trigger,
+  title,
+}: DocumentFormProps<T>) {
+  const t = useTranslations('document');
+  const { resolvedTheme } = useTheme();
+  const [open, setOpen] = useState(false);
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      tags: [],
+      ...initialValues,
+    } as any,
+  });
+
+  useEffect(() => {
+    form?.reset({
+      tags: [],
+      ...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(100vh-48px-36px-36px-env(safe-area-inset-top))]'>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-4 px-6 pt-4'>
+              <FormField
+                control={form.control}
+                name='title'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.title')}</FormLabel>
+                    <FormControl>
+                      <Input placeholder={t('form.titlePlaceholder')} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='tags'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.tags')}</FormLabel>
+                    <FormControl>
+                      <TagInput
+                        placeholder={t('form.tagsPlaceholder')}
+                        value={field.value}
+                        onChange={(value) => form.setValue(field.name, value)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='content'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.content')}</FormLabel>
+                    <FormControl>
+                      <MarkdownEditor
+                        value={field.value}
+                        onChange={(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('form.cancel')}
+          </Button>
+          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
+            {t('form.confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,170 @@
+'use client';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  batchDeleteDocument,
+  createDocument,
+  deleteDocument,
+  getDocumentList,
+  updateDocument,
+} from '@/services/admin/document';
+import { ConfirmButton } from '@repo/ui/confirm-button';
+import { formatDate } from '@repo/ui/utils';
+import { Button } from '@shadcn/ui/button';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { Switch } from '@shadcn/ui/switch';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import DocumentForm from './document-form';
+
+export default function Page() {
+  const t = useTranslations('document');
+  const [loading, setLoading] = useState(false);
+
+  const ref = useRef<ProTableActions>();
+  return (
+    <ProTable<API.Document, { tag: string; search: string }>
+      action={ref}
+      header={{
+        title: t('DocumentList'),
+        toolbar: (
+          <DocumentForm<API.CreateDocumentRequest>
+            key='create'
+            trigger={t('create')}
+            title={t('createDocument')}
+            loading={loading}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await createDocument({
+                  ...values,
+                  show: false,
+                });
+                toast.success(t('createSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+                return false;
+              }
+            }}
+          />
+        ),
+      }}
+      columns={[
+        {
+          accessorKey: 'show',
+          header: t('show'),
+          cell: ({ row }) => {
+            return (
+              <Switch
+                defaultChecked={row.getValue('show')}
+                onCheckedChange={async (checked) => {
+                  await updateDocument({
+                    ...row.original,
+                    show: checked,
+                  });
+                  ref.current?.refresh();
+                }}
+              />
+            );
+          },
+        },
+        {
+          accessorKey: 'title',
+          header: t('title'),
+        },
+        {
+          accessorKey: 'tags',
+          header: t('tags'),
+          cell: ({ row }) => row.original.tags.join(', '),
+        },
+        {
+          accessorKey: 'updated_at',
+          header: t('updatedAt'),
+          cell: ({ row }) => formatDate(row.getValue('updated_at')),
+        },
+      ]}
+      params={[
+        {
+          key: 'search',
+        },
+        {
+          key: 'tag',
+          placeholder: t('tags'),
+        },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await getDocumentList({ ...pagination, ...filter });
+        return {
+          list: data.data?.list || [],
+          total: data.data?.total || 0,
+        };
+      }}
+      actions={{
+        render(row) {
+          return [
+            <DocumentForm<API.UpdateDocumentRequest>
+              key='edit'
+              trigger={t('edit')}
+              title={t('editDocument')}
+              loading={loading}
+              initialValues={row}
+              onSubmit={async (values) => {
+                setLoading(true);
+                try {
+                  await updateDocument({
+                    ...row,
+                    ...values,
+                  });
+                  toast.success(t('updateSuccess'));
+                  ref.current?.refresh();
+                  setLoading(false);
+                  return true;
+                } catch (error) {
+                  setLoading(false);
+                  return false;
+                }
+              }}
+            />,
+            <ConfirmButton
+              key='delete'
+              trigger={<Button variant='destructive'>{t('delete')}</Button>}
+              title={t('confirmDelete')}
+              description={t('deleteDescription')}
+              onConfirm={async () => {
+                await deleteDocument({
+                  id: row.id,
+                });
+                toast.success(t('deleteSuccess'));
+                ref.current?.refresh();
+              }}
+              cancelText={t('cancel')}
+              confirmText={t('confirm')}
+            />,
+          ];
+        },
+        batchRender(rows) {
+          return [
+            <ConfirmButton
+              key='delete'
+              trigger={<Button variant='destructive'>{t('delete')}</Button>}
+              title={t('confirmDelete')}
+              description={t('deleteDescription')}
+              onConfirm={async () => {
+                await batchDeleteDocument({
+                  ids: rows.map((item) => item.id),
+                });
+                toast.success(t('deleteSuccess'));
+                ref.current?.refresh();
+              }}
+              cancelText={t('cancel')}
+              confirmText={t('confirm')}
+            />,
+          ];
+        },
+      }}
+    />
+  );
+}

apps/admin/app/dashboard/layout.tsx

@@ -0,0 +1,21 @@
+import { Header } from '@/components/header';
+import { SidebarLeft } from '@/components/sidebar-left';
+import { ScrollArea } from '@shadcn/ui/scroll-area';
+import { SidebarInset, SidebarProvider } from '@shadcn/ui/sidebar';
+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';
+  return (
+    <SidebarProvider defaultOpen={defaultOpen}>
+      <SidebarLeft />
+      <SidebarInset className='flex-grow overflow-hidden'>
+        <Header />
+        <div className='flex h-[calc(100vh-56px)] flex-1 flex-col gap-4 p-4'>
+          <ScrollArea className='h-full flex-grow overflow-hidden'>{children}</ScrollArea>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

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

@@ -0,0 +1,185 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+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 { Combobox } from '@repo/ui/combobox';
+import { formatDate } from '@repo/ui/utils';
+import { Badge } from '@shadcn/ui/badge';
+import { Button } from '@shadcn/ui/button';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@shadcn/ui/hover-card';
+import { cn } from '@shadcn/ui/lib/utils';
+import { Separator } from '@shadcn/ui/separator';
+import { UserDetail } from '../user/user-detail';
+
+export default function Page() {
+  const t = useTranslations('order');
+
+  const statusOptions = [
+    { value: 1, label: t('status.1'), className: 'bg-orange-500' },
+    { value: 2, label: t('status.2'), className: 'bg-green-500' },
+    { value: 3, label: t('status.3'), className: 'bg-gray-500' },
+    { value: 4, label: t('status.4'), className: 'bg-red-500' },
+    { value: 5, label: t('status.5'), className: 'bg-green-500' },
+  ];
+
+  const ref = useRef<ProTableActions>();
+
+  const { data: subscribeList } = useQuery({
+    queryKey: ['getSubscribeList', 'all'],
+    queryFn: async () => {
+      const { data } = await getSubscribeList({
+        page: 1,
+        size: 9999,
+      });
+      return data.data?.list as API.SubscribeGroup[];
+    },
+  });
+
+  return (
+    <ProTable<API.Order, any>
+      action={ref}
+      columns={[
+        {
+          accessorKey: 'order_no',
+          header: t('orderNumber'),
+        },
+        {
+          accessorKey: 'type',
+          header: t('type.0'),
+          cell: ({ row }) => t(`type.${row.getValue('type')}`),
+        },
+        {
+          accessorKey: 'subscribe_id',
+          header: t('subscribe'),
+          cell: ({ row }) =>
+            subscribeList?.find((item) => item.id === row.getValue('subscribe_id'))?.name,
+        },
+        {
+          accessorKey: 'amount',
+          header: t('amount'),
+          cell: ({ row }) => (
+            <HoverCard>
+              <HoverCardTrigger asChild>
+                <Button variant='link' className='p-0'>
+                  <Display type='currency' value={row.original.amount} />
+                </Button>
+              </HoverCardTrigger>
+              <HoverCardContent>
+                <div className='grid gap-3'>
+                  {row.original.trade_no && (
+                    <>
+                      <div className='font-semibold'>{t('tradeNo')}</div>
+                      <span className='text-muted-foreground'>{row.original.trade_no}</span>
+                      <Separator className='my-2' />
+                    </>
+                  )}
+                  <ul className='grid gap-3'>
+                    <li className='flex items-center justify-between'>
+                      <span className='text-muted-foreground'>{t('subscribePrice')}</span>
+                      <span>
+                        <Display type='currency' value={row.original.price} />
+                      </span>
+                    </li>
+                    <li className='flex items-center justify-between'>
+                      <span className='text-muted-foreground'>{t('reductionPrice')}</span>
+                      <span>
+                        <Display type='currency' value={row.original.reduction} />
+                      </span>
+                    </li>
+                    <li className='flex items-center justify-between'>
+                      <span className='text-muted-foreground'>{t('feAmount')}</span>
+                      <span>
+                        <Display type='currency' value={row.original.fee_amount} />
+                      </span>
+                    </li>
+                    <li className='flex items-center justify-between font-semibold'>
+                      <span className='text-muted-foreground'>{t('total')}</span>
+                      <span>
+                        <Display type='currency' value={row.original.amount} />
+                      </span>
+                    </li>
+                  </ul>
+                </div>
+                <Separator className='my-4' />
+                <ul className='grid gap-3'>
+                  <li className='flex items-center justify-between'>
+                    <span className='text-muted-foreground'>支付方式</span>
+                    <span>{t(`methods.${row.original.method}`)}</span>
+                  </li>
+                </ul>
+              </HoverCardContent>
+            </HoverCard>
+          ),
+        },
+        {
+          accessorKey: 'user_id',
+          header: t('user'),
+          cell: ({ row }) => <UserDetail id={row.original.user_id} />,
+        },
+        {
+          accessorKey: 'updated_at',
+          header: t('updateTime'),
+          cell: ({ row }) => formatDate(row.original.updated_at),
+        },
+        {
+          accessorKey: 'status',
+          header: t('status.0'),
+          cell: ({ row }) => {
+            const option = statusOptions.find((opt) => opt.value === row.original.status);
+            if ([1, 3, 4].includes(row.getValue('status'))) {
+              return (
+                <Combobox<number, false>
+                  placeholder='状态'
+                  value={row.original.status}
+                  onChange={async (value) => {
+                    await updateOrderStatus({
+                      id: row.original.id,
+                      status: value,
+                    });
+                    ref.current?.refresh();
+                  }}
+                  options={statusOptions}
+                  className={cn(option?.className)}
+                />
+              );
+            }
+            return <Badge>{t(`status.${row.getValue('status')}`)}</Badge>;
+          },
+        },
+      ]}
+      params={[
+        { key: 'search' },
+        {
+          key: 'status',
+          placeholder: t('status.0'),
+          options: statusOptions.map((item) => ({
+            label: item.label,
+            value: String(item.value),
+          })),
+        },
+        {
+          key: 'subscribe_id',
+          placeholder: `${t('subscribe')}`,
+          options: subscribeList?.map((item) => ({
+            label: item.name,
+            value: String(item.id),
+          })),
+        },
+        { key: 'user_id', placeholder: `${t('user')}ID` },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await getOrderList({ ...pagination, ...filter });
+        return {
+          list: data.data?.list || [],
+          total: data.data?.total || 0,
+        };
+      }}
+    />
+  );
+}

apps/admin/app/dashboard/page.tsx

@@ -0,0 +1,593 @@
+'use client';
+
+import { formatBytes } from '@repo/ui/utils';
+import { Badge } from '@shadcn/ui/badge';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@shadcn/ui/card';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@shadcn/ui/chart';
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Label,
+  Pie,
+  PieChart,
+  XAxis,
+} from '@shadcn/ui/lib/recharts';
+import { Separator } from '@shadcn/ui/separator';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@shadcn/ui/table';
+import { useLocale } from 'next-intl';
+
+const UserStatisticsConfig = {
+  register: {
+    label: '注册',
+    color: 'hsl(var(--chart-1))',
+  },
+  new_purchase: {
+    label: '新购',
+    color: 'hsl(var(--chart-2))',
+  },
+  repurchase: {
+    label: '复购',
+    color: 'hsl(var(--chart-3))',
+  },
+} satisfies ChartConfig;
+
+const IncomeStatisticsConfig = {
+  new_purchase: {
+    label: '新购',
+    color: 'hsl(var(--chart-1))',
+  },
+  repurchase: {
+    label: '复购',
+    color: 'hsl(var(--chart-2))',
+  },
+};
+
+export default function Dashboard() {
+  const locale = useLocale();
+  return (
+    <div className='flex flex-1 flex-col gap-4'>
+      <Card>
+        <CardHeader>
+          <CardTitle>统计</CardTitle>
+        </CardHeader>
+        <CardContent className='grid grid-cols-2 gap-4 lg:grid-cols-4'>
+          <div className='grid flex-1 auto-rows-min gap-0.5'>
+            <div className='text-muted-foreground text-sm'>在线IP数</div>
+            <div className='text-xl font-bold tabular-nums leading-none'>666</div>
+          </div>
+          <div className='grid flex-1 auto-rows-min gap-0.5'>
+            <div className='text-muted-foreground text-sm'>在线节点数</div>
+            <div className='text-xl font-bold tabular-nums leading-none'>99</div>
+          </div>
+          <div className='grid flex-1 auto-rows-min gap-0.5'>
+            <div className='text-muted-foreground text-sm'>离线节点数</div>
+            <div className='text-xl font-bold tabular-nums leading-none'>1</div>
+          </div>
+
+          <div className='grid flex-1 auto-rows-min gap-0.5'>
+            <div className='text-muted-foreground text-sm'>待处理工单</div>
+            <div className='text-xl font-bold tabular-nums leading-none'>1</div>
+          </div>
+          <div className='grid flex-1 auto-rows-min gap-0.5'>
+            <div className='text-muted-foreground text-sm'>今日上传流量</div>
+            <div className='text-xl font-bold tabular-nums leading-none'>
+              {formatBytes(99999999999999)}
+            </div>
+          </div>
+          <div className='grid flex-1 auto-rows-min gap-0.5'>
+            <div className='text-muted-foreground text-sm'>今日下载流量</div>
+            <div className='text-xl font-bold tabular-nums leading-none'>
+              {formatBytes(99999999999999)}
+            </div>
+          </div>
+          <div className='grid flex-1 auto-rows-min gap-0.5'>
+            <div className='text-muted-foreground text-sm'>总上传流量</div>
+            <div className='text-xl font-bold tabular-nums leading-none'>
+              {formatBytes(99999999999999)}
+            </div>
+          </div>
+          <div className='grid flex-1 auto-rows-min gap-0.5'>
+            <div className='text-muted-foreground text-sm'>总下载流量</div>
+            <div className='text-xl font-bold tabular-nums leading-none'>
+              {formatBytes(99999999999999)}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+      <div className='grid gap-4 lg:grid-cols-3'>
+        <Card>
+          <CardHeader className='items-center'>
+            <CardTitle>今日收入统计</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer
+              config={IncomeStatisticsConfig}
+              className='mx-auto aspect-square max-h-[213px]'
+            >
+              <PieChart>
+                <ChartLegend content={<ChartLegendContent />} />
+                <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+                <Pie
+                  data={[
+                    {
+                      type: 'new_purchase',
+                      value: 200,
+                      fill: 'var(--color-new_purchase)',
+                    },
+                    {
+                      type: 'repurchase',
+                      value: 187,
+                      fill: 'var(--color-repurchase)',
+                    },
+                  ]}
+                  dataKey='value'
+                  nameKey='type'
+                  innerRadius={50}
+                  strokeWidth={5}
+                >
+                  <Label
+                    content={({ viewBox }) => {
+                      if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                        return (
+                          <text
+                            x={viewBox.cx}
+                            y={viewBox.cy}
+                            textAnchor='middle'
+                            dominantBaseline='middle'
+                          >
+                            <tspan
+                              x={viewBox.cx}
+                              y={viewBox.cy}
+                              className='fill-foreground text-2xl font-bold'
+                            >
+                              6,666
+                            </tspan>
+                          </text>
+                        );
+                      }
+                    }}
+                  />
+                </Pie>
+              </PieChart>
+            </ChartContainer>
+          </CardContent>
+          <CardFooter className='flex flex-row border-t p-4'>
+            <div className='flex w-full items-center gap-2'>
+              <div className='grid flex-1 auto-rows-min gap-0.5'>
+                <div className='text-muted-foreground text-xs'>总收入</div>
+                <div className='text-xl font-bold tabular-nums leading-none'>6,666</div>
+              </div>
+              <Separator orientation='vertical' className='mx-2 h-10 w-px' />
+              <div className='grid flex-1 auto-rows-min gap-0.5'>
+                <div className='text-muted-foreground text-xs'>
+                  {IncomeStatisticsConfig.new_purchase.label}
+                </div>
+                <div className='text-xl font-bold tabular-nums leading-none'>123</div>
+              </div>
+              <Separator orientation='vertical' className='mx-2 h-10 w-px' />
+              <div className='grid flex-1 auto-rows-min gap-0.5'>
+                <div className='text-muted-foreground text-xs'>
+                  {IncomeStatisticsConfig.repurchase.label}
+                </div>
+                <div className='text-xl font-bold tabular-nums leading-none'>456</div>
+              </div>
+            </div>
+          </CardFooter>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>本月收入统计</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={IncomeStatisticsConfig}>
+              <BarChart
+                accessibilityLayer
+                data={[
+                  { date: '2024-10-01', new_purchase: 98, repurchase: 125 },
+                  { date: '2024-10-02', new_purchase: 110, repurchase: 140 },
+                  { date: '2024-10-03', new_purchase: 100, repurchase: 130 },
+                  { date: '2024-10-04', new_purchase: 115, repurchase: 145 },
+                  { date: '2024-10-05', new_purchase: 108, repurchase: 138 },
+                  { date: '2024-10-06', new_purchase: 120, repurchase: 150 },
+                ]}
+              >
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey='date'
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                  tickFormatter={(value) => {
+                    return new Date(value).toLocaleDateString(locale, {
+                      month: 'short',
+                      day: 'numeric',
+                    });
+                  }}
+                />
+                <Bar dataKey='new_purchase' fill='var(--color-new_purchase)' radius={4} />
+                <Bar dataKey='repurchase' fill='var(--color-repurchase)' radius={4} />
+                <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                <ChartLegend content={<ChartLegendContent />} />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+          <CardFooter className='flex flex-row border-t p-4'>
+            <div className='flex w-full items-center gap-2'>
+              <div className='grid flex-1 auto-rows-min gap-0.5'>
+                <div className='text-muted-foreground text-xs'>总收入</div>
+                <div className='text-xl font-bold tabular-nums leading-none'>654,321</div>
+              </div>
+              <Separator orientation='vertical' className='mx-2 h-10 w-px' />
+              <div className='grid flex-1 auto-rows-min gap-0.5'>
+                <div className='text-muted-foreground text-xs'>
+                  {IncomeStatisticsConfig.new_purchase.label}
+                </div>
+                <div className='text-xl font-bold tabular-nums leading-none'>123</div>
+              </div>
+              <Separator orientation='vertical' className='mx-2 h-10 w-px' />
+              <div className='grid flex-1 auto-rows-min gap-0.5'>
+                <div className='text-muted-foreground text-xs'>
+                  {IncomeStatisticsConfig.repurchase.label}
+                </div>
+                <div className='text-xl font-bold tabular-nums leading-none'>456</div>
+              </div>
+            </div>
+          </CardFooter>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>收入统计</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={IncomeStatisticsConfig}>
+              <AreaChart
+                accessibilityLayer
+                data={[
+                  { date: '2024-07', new_purchase: 98, repurchase: 125 },
+                  { date: '2024-08', new_purchase: 110, repurchase: 140 },
+                  { date: '2024-09', new_purchase: 100, repurchase: 130 },
+                  { date: '2024-10', new_purchase: 115, repurchase: 145 },
+                  { date: '2024-11', new_purchase: 108, repurchase: 138 },
+                  { date: '2024-12', new_purchase: 120, repurchase: 150 },
+                ]}
+                margin={{
+                  left: 12,
+                  right: 12,
+                }}
+              >
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey='date'
+                  tickLine={false}
+                  axisLine={false}
+                  tickMargin={8}
+                  tickFormatter={(value) => {
+                    return new Date(value).toLocaleDateString(locale, {
+                      month: 'short',
+                    });
+                  }}
+                />
+                <ChartTooltip cursor={false} content={<ChartTooltipContent indicator='dot' />} />
+                <Area
+                  dataKey='new_purchase'
+                  type='natural'
+                  fill='var(--color-new_purchase)'
+                  fillOpacity={0.4}
+                  stroke='var(--color-new_purchase)'
+                  stackId='a'
+                />
+                <Area
+                  dataKey='repurchase'
+                  type='natural'
+                  fill='var(--color-repurchase)'
+                  fillOpacity={0.4}
+                  stroke='var(--color-repurchase)'
+                  stackId='a'
+                />
+                <ChartLegend content={<ChartLegendContent />} />
+              </AreaChart>
+            </ChartContainer>
+          </CardContent>
+          <CardFooter className='flex flex-row border-t p-4'>
+            <div className='flex w-full items-center gap-2'>
+              <div className='grid flex-1 auto-rows-min gap-0.5'>
+                <div className='text-muted-foreground text-xs'>总收入</div>
+                <div className='text-xl font-bold tabular-nums leading-none'>987,654,321</div>
+              </div>
+            </div>
+          </CardFooter>
+        </Card>
+
+        <Card>
+          <CardHeader className='items-center'>
+            <CardTitle>今日用户统计</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer
+              config={UserStatisticsConfig}
+              className='mx-auto aspect-square max-h-[213px]'
+            >
+              <PieChart>
+                <ChartLegend content={<ChartLegendContent />} />
+                <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+                <Pie
+                  data={[
+                    {
+                      type: 'register',
+                      value: 275,
+                      fill: 'var(--color-register)',
+                    },
+                    {
+                      type: 'new_purchase',
+                      value: 200,
+                      fill: 'var(--color-new_purchase)',
+                    },
+                    {
+                      type: 'repurchase',
+                      value: 187,
+                      fill: 'var(--color-repurchase)',
+                    },
+                  ]}
+                  dataKey='value'
+                  nameKey='type'
+                  innerRadius={50}
+                  strokeWidth={5}
+                >
+                  <Label
+                    content={({ viewBox }) => {
+                      if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                        return (
+                          <text
+                            x={viewBox.cx}
+                            y={viewBox.cy}
+                            textAnchor='middle'
+                            dominantBaseline='middle'
+                          >
+                            <tspan
+                              x={viewBox.cx}
+                              y={viewBox.cy}
+                              className='fill-foreground text-3xl font-bold'
+                            >
+                              275
+                            </tspan>
+                          </text>
+                        );
+                      }
+                    }}
+                  />
+                </Pie>
+              </PieChart>
+            </ChartContainer>
+          </CardContent>
+          <CardFooter className='flex flex-row border-t p-4'>
+            <div className='flex w-full items-center gap-2'>
+              <div className='grid flex-1 auto-rows-min gap-0.5'>
+                <div className='text-muted-foreground text-xs'>
+                  {UserStatisticsConfig.register.label}
+                </div>
+                <div className='text-xl font-bold tabular-nums leading-none'>789</div>
+              </div>
+              <Separator orientation='vertical' className='mx-2 h-10 w-px' />
+              <div className='grid flex-1 auto-rows-min gap-0.5'>
+                <div className='text-muted-foreground text-xs'>
+                  {UserStatisticsConfig.new_purchase.label}
+                </div>
+                <div className='text-xl font-bold tabular-nums leading-none'>123</div>
+              </div>
+              <Separator orientation='vertical' className='mx-2 h-10 w-px' />
+              <div className='grid flex-1 auto-rows-min gap-0.5'>
+                <div className='text-muted-foreground text-xs'>
+                  {UserStatisticsConfig.repurchase.label}
+                </div>
+                <div className='text-xl font-bold tabular-nums leading-none'>456</div>
+              </div>
+            </div>
+          </CardFooter>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>本月用户统计</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={UserStatisticsConfig}>
+              <BarChart
+                accessibilityLayer
+                data={[
+                  { date: '2024-10-01', register: 215, new_purchase: 98, repurchase: 125 },
+                  { date: '2024-10-02', register: 240, new_purchase: 110, repurchase: 140 },
+                  { date: '2024-10-03', register: 225, new_purchase: 100, repurchase: 130 },
+                  { date: '2024-10-04', register: 250, new_purchase: 115, repurchase: 145 },
+                  { date: '2024-10-05', register: 235, new_purchase: 108, repurchase: 138 },
+                  { date: '2024-10-06', register: 260, new_purchase: 120, repurchase: 150 },
+                ]}
+              >
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey='date'
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                  tickFormatter={(value) => {
+                    return new Date(value).toLocaleDateString(locale, {
+                      month: 'short',
+                      day: 'numeric',
+                    });
+                  }}
+                />
+                <Bar dataKey='register' fill='var(--color-register)' radius={4} />
+                <Bar dataKey='new_purchase' fill='var(--color-new_purchase)' radius={4} />
+                <Bar dataKey='repurchase' fill='var(--color-repurchase)' radius={4} />
+                <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                <ChartLegend content={<ChartLegendContent />} />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+          <CardFooter className='flex flex-row border-t p-4'>
+            <div className='flex w-full items-center gap-2'>
+              <div className='grid flex-1 auto-rows-min gap-0.5'>
+                <div className='text-muted-foreground text-xs'>
+                  {UserStatisticsConfig.register.label}
+                </div>
+                <div className='text-xl font-bold tabular-nums leading-none'>789</div>
+              </div>
+              <Separator orientation='vertical' className='mx-2 h-10 w-px' />
+              <div className='grid flex-1 auto-rows-min gap-0.5'>
+                <div className='text-muted-foreground text-xs'>
+                  {UserStatisticsConfig.new_purchase.label}
+                </div>
+                <div className='text-xl font-bold tabular-nums leading-none'>123</div>
+              </div>
+              <Separator orientation='vertical' className='mx-2 h-10 w-px' />
+              <div className='grid flex-1 auto-rows-min gap-0.5'>
+                <div className='text-muted-foreground text-xs'>
+                  {UserStatisticsConfig.repurchase.label}
+                </div>
+                <div className='text-xl font-bold tabular-nums leading-none'>456</div>
+              </div>
+            </div>
+          </CardFooter>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>用户统计</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={UserStatisticsConfig}>
+              <AreaChart
+                accessibilityLayer
+                data={[
+                  { date: '2024-07', register: 215, new_purchase: 98, repurchase: 125 },
+                  { date: '2024-08', register: 240, new_purchase: 110, repurchase: 140 },
+                  { date: '2024-09', register: 225, new_purchase: 100, repurchase: 130 },
+                  { date: '2024-10', register: 250, new_purchase: 115, repurchase: 145 },
+                  { date: '2024-11', register: 235, new_purchase: 108, repurchase: 138 },
+                  { date: '2024-12', register: 260, new_purchase: 120, repurchase: 150 },
+                ]}
+                margin={{
+                  left: 12,
+                  right: 12,
+                }}
+              >
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey='date'
+                  tickLine={false}
+                  axisLine={false}
+                  tickMargin={8}
+                  tickFormatter={(value) => {
+                    return new Date(value).toLocaleDateString(locale, {
+                      month: 'short',
+                    });
+                  }}
+                />
+                <ChartTooltip cursor={false} content={<ChartTooltipContent indicator='dot' />} />
+                <Area
+                  dataKey='register'
+                  type='natural'
+                  fill='var(--color-register)'
+                  fillOpacity={0.4}
+                  stroke='var(--color-register)'
+                  stackId='a'
+                />
+                <Area
+                  dataKey='new_purchase'
+                  type='natural'
+                  fill='var(--color-new_purchase)'
+                  fillOpacity={0.4}
+                  stroke='var(--color-new_purchase)'
+                  stackId='a'
+                />
+                <Area
+                  dataKey='repurchase'
+                  type='natural'
+                  fill='var(--color-repurchase)'
+                  fillOpacity={0.4}
+                  stroke='var(--color-repurchase)'
+                  stackId='a'
+                />
+                <ChartLegend content={<ChartLegendContent />} />
+              </AreaChart>
+            </ChartContainer>
+          </CardContent>
+          <CardFooter className='flex flex-row border-t p-4'>
+            <div className='flex w-full items-center gap-2'>
+              <div className='grid flex-1 auto-rows-min gap-0.5'>
+                <div className='text-muted-foreground text-xs'>
+                  {UserStatisticsConfig.register.label}
+                </div>
+                <div className='text-xl font-bold tabular-nums leading-none'>987,654,321</div>
+              </div>
+            </div>
+          </CardFooter>
+        </Card>
+      </div>
+      <div className='grid gap-4 lg:grid-cols-2 xl:grid-cols-3'>
+        <Card className='xl:col-span-2'>
+          <CardHeader>
+            <CardTitle>今日节点流量排行</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>类型</TableHead>
+                  <TableHead>节点</TableHead>
+                  <TableHead className='text-right'>流量</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {new Array(10)
+                  .toString()
+                  .split(',')
+                  .map((item, index) => (
+                    <TableRow key={index}>
+                      <TableCell>
+                        <Badge>Trojan</Badge>
+                      </TableCell>
+                      <TableCell>
+                        <div className='font-medium'>节点名称</div>
+                        <div className='text-muted-foreground hidden text-sm md:inline'>
+                          127.0.0.1:443
+                        </div>
+                      </TableCell>
+                      <TableCell className='text-right'>1,000 GB</TableCell>
+                    </TableRow>
+                  ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>今日用户流量排行</CardTitle>
+          </CardHeader>
+          <CardContent className='grid gap-4'>
+            {new Array(15)
+              .toString()
+              .split(',')
+              .map((item, index) => (
+                <div className='flex items-center gap-4' key={index}>
+                  <div className='text-sm font-medium leading-none'>olivia.martin@email.com</div>
+                  <div className='ml-auto font-medium'>100 GB</div>
+                </div>
+              ))}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

apps/admin/app/dashboard/payment/alipayf2f.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import { getAlipayF2FPaymentConfig, updateAlipayF2FPaymentConfig } from '@/services/admin/payment';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { unitConversion } from '@repo/ui/utils';
+import { Label } from '@shadcn/ui/label';
+import { toast } from '@shadcn/ui/lib/sonner';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@shadcn/ui/select';
+import { Switch } from '@shadcn/ui/switch';
+import { Table, TableBody, TableCell, TableRow } from '@shadcn/ui/table';
+import { Textarea } from '@shadcn/ui/textarea';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+
+export default function AlipayF2F() {
+  const t = useTranslations('payment');
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getAlipayF2FPaymentConfig'],
+    queryFn: async () => {
+      const { data } = await getAlipayF2FPaymentConfig();
+
+      return data.data;
+    },
+  });
+
+  async function updateConfig(key: string, value: unknown) {
+    if (data?.[key] === value) return;
+    try {
+      await updateAlipayF2FPaymentConfig({
+        ...data,
+        [key]: value,
+      } as API.PaymentConfig);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <Label>{t('enable')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.enable}
+              onCheckedChange={(checked) => {
+                updateConfig('enable', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('showName')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('showNameDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.name}
+              onValueBlur={(value) => updateConfig('name', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('iconUrl')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('iconUrlDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.icon_url}
+              onValueBlur={(value) => updateConfig('icon', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('notifyUrl')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('notifyUrlDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.domain}
+              onValueBlur={(value) => updateConfig('domain', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('feeMode')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('feeModeDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Select
+              value={String(data?.fee_mode)}
+              onValueChange={(value) => {
+                updateConfig('fee_mode', Number(value));
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder='请选择' />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value='0'>{t('feeModeItems.0')}</SelectItem>
+                  <SelectItem value='1'>{t('feeModeItems.1')}</SelectItem>
+                  <SelectItem value='2'>{t('feeModeItems.2')}</SelectItem>
+                  <SelectItem value='3'>{t('feeModeItems.3')}</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('feePercent')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('feePercentDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              type='number'
+              min={0}
+              max={100}
+              maxLength={3}
+              value={data?.fee_percent}
+              onValueBlur={(value) => updateConfig('fee_percent', value)}
+              suffix='%'
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('fixedFee')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('fixedFeeDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              min={0}
+              value={data?.fee_amount}
+              formatInput={(value) => unitConversion('centsToDollars', value)}
+              formatOutput={(value) => unitConversion('dollarsToCents', value)}
+              onValueBlur={(value) => updateConfig('fee_amount', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('alipayf2f.appId')}</Label>
+            <p className='text-muted-foreground text-xs' />
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.config.app_id}
+              onValueBlur={(value) =>
+                updateConfig('config', {
+                  ...data?.config,
+                  app_id: value,
+                })
+              }
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('alipayf2f.privateKey')}</Label>
+            <p className='text-muted-foreground text-xs' />
+          </TableCell>
+          <TableCell className='text-right'>
+            <Textarea
+              placeholder={t('inputPlaceholder')}
+              defaultValue={data?.config.private_key}
+              onBlur={(e) => {
+                updateConfig('config', {
+                  config: {
+                    ...data?.config,
+                    private_key: e.target.value,
+                  },
+                });
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('alipayf2f.publicKey')}</Label>
+            <p className='text-muted-foreground text-xs' />
+          </TableCell>
+          <TableCell className='text-right'>
+            <Textarea
+              placeholder={t('inputPlaceholder')}
+              value={data?.config.public_key}
+              onBlur={(e) => {
+                updateConfig('config', {
+                  config: {
+                    ...data?.config,
+                    public_key: e.target.value,
+                  },
+                });
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('alipayf2f.invoiceName')}</Label>
+            <p className='text-muted-foreground text-xs' />
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('alipayf2f.invoiceNameDescription')}
+              value={data?.config.invoice_name}
+              onValueBlur={(value) =>
+                updateConfig('config', {
+                  ...data?.config,
+                  invoice_name: value,
+                })
+              }
+            />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}

apps/admin/app/dashboard/payment/epay.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { getEpayPaymentConfig, updateEpayPaymentConfig } from '@/services/admin/payment';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { unitConversion } from '@repo/ui/utils';
+import { Label } from '@shadcn/ui/label';
+import { toast } from '@shadcn/ui/lib/sonner';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@shadcn/ui/select';
+import { Switch } from '@shadcn/ui/switch';
+import { Table, TableBody, TableCell, TableRow } from '@shadcn/ui/table';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+
+export default function Epay() {
+  const t = useTranslations('payment');
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getEpayPaymentConfig'],
+    queryFn: async () => {
+      const { data } = await getEpayPaymentConfig();
+
+      return data.data;
+    },
+  });
+
+  async function updateConfig(key: string, value: unknown) {
+    if (data?.[key] === value) return;
+    try {
+      await updateEpayPaymentConfig({
+        ...data,
+        [key]: value,
+      } as API.PaymentConfig);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <Label>{t('enable')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.enable}
+              onCheckedChange={(checked) => {
+                updateConfig('enable', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('showName')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('showNameDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.name}
+              onValueBlur={(value) => updateConfig('name', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('iconUrl')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('iconUrlDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.icon}
+              onValueBlur={(value) => updateConfig('icon', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('notifyUrl')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('notifyUrlDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.domain}
+              onValueBlur={(value) => updateConfig('domain', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('feeMode')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('feeModeDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Select
+              value={String(data?.fee_mode)}
+              onValueChange={(value) => {
+                updateConfig('fee_mode', Number(value));
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder='请选择' />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value='0'>{t('feeModeItems.0')}</SelectItem>
+                  <SelectItem value='1'>{t('feeModeItems.1')}</SelectItem>
+                  <SelectItem value='2'>{t('feeModeItems.2')}</SelectItem>
+                  <SelectItem value='3'>{t('feeModeItems.3')}</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('feePercent')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('feePercentDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              type='number'
+              min={0}
+              max={100}
+              maxLength={3}
+              value={data?.fee_percent}
+              onValueBlur={(value) => updateConfig('fee_percent', value)}
+              suffix='%'
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('fixedFee')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('fixedFeeDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              type='number'
+              min={0}
+              value={data?.fee_amount}
+              formatInput={(value) => unitConversion('centsToDollars', value)}
+              formatOutput={(value) => unitConversion('dollarsToCents', value)}
+              onValueBlur={(value) => updateConfig('fee_amount', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('epay.url')}</Label>
+            <p className='text-muted-foreground text-xs' />
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.config.url}
+              onValueBlur={(value) =>
+                updateConfig('config', {
+                  ...data?.config,
+                  url: value,
+                })
+              }
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('epay.pid')}</Label>
+            <p className='text-muted-foreground text-xs' />
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.config.pid}
+              onValueBlur={(value) =>
+                updateConfig('config', {
+                  ...data?.config,
+                  pid: value,
+                })
+              }
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('epay.key')}</Label>
+            <p className='text-muted-foreground text-xs' />
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.config.key}
+              onValueBlur={(value) =>
+                updateConfig('config', {
+                  ...data?.config,
+                  key: value,
+                })
+              }
+            />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@shadcn/ui/tabs';
+import AlipayF2F from './alipayf2f';
+import Epay from './epay';
+import StripeAlipay from './stripe-alipay';
+import StripeWeChatPay from './stripe-wechat-pay';
+
+export default function Page() {
+  return (
+    <Tabs defaultValue='Epay'>
+      <TabsList>
+        <TabsTrigger value='Epay'>Epay</TabsTrigger>
+        <TabsTrigger value='Stripe-Alipay'>Stripe(AliPay)</TabsTrigger>
+        <TabsTrigger value='Strip-WeChatPay'>Stripe(WeChatPay)</TabsTrigger>
+        <TabsTrigger value='AlipayF2F'>AlipayF2F</TabsTrigger>
+      </TabsList>
+      <TabsContent value='Epay'>
+        <Epay />
+      </TabsContent>
+      <TabsContent value='Stripe-Alipay'>
+        <StripeAlipay />
+      </TabsContent>
+      <TabsContent value='Strip-WeChatPay'>
+        <StripeWeChatPay />
+      </TabsContent>
+      <TabsContent value='AlipayF2F'>
+        <AlipayF2F />
+      </TabsContent>
+    </Tabs>
+  );
+}

apps/admin/app/dashboard/payment/stripe-alipay.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import {
+  getStripeAlipayPaymentConfig,
+  updateStripeAlipayPaymentConfig,
+} from '@/services/admin/payment';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { unitConversion } from '@repo/ui/utils';
+import { Label } from '@shadcn/ui/label';
+import { toast } from '@shadcn/ui/lib/sonner';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@shadcn/ui/select';
+import { Switch } from '@shadcn/ui/switch';
+import { Table, TableBody, TableCell, TableRow } from '@shadcn/ui/table';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+
+export default function Stripe() {
+  const t = useTranslations('payment');
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getStripeAlipayPaymentConfig'],
+    queryFn: async () => {
+      const { data } = await getStripeAlipayPaymentConfig();
+      return data.data;
+    },
+  });
+
+  async function updateConfig(key: string, value: unknown) {
+    if (data?.[key] === value) return;
+    try {
+      await updateStripeAlipayPaymentConfig({
+        ...data,
+        mark: 'stripe_alipay',
+        [key]: value,
+      } as any);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <Label>{t('aliPay')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.enable}
+              onCheckedChange={async (checked) => {
+                updateConfig('enable', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('showName')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('showNameDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.name}
+              onValueBlur={(value) => {
+                updateConfig('name', value);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('iconUrl')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('iconUrlDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.icon}
+              onValueBlur={(value) => {
+                updateConfig('icon', value);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('notifyUrl')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('notifyUrlDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.domain}
+              onValueBlur={(value) => {
+                updateConfig('domain', value);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('feeMode')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('feeModeDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Select
+              value={String(data?.fee_mode)}
+              onValueChange={(value) => {
+                updateConfig('fee_mode', Number(value));
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder='请选择' />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value='0'>{t('feeModeItems.0')}</SelectItem>
+                  <SelectItem value='1'>{t('feeModeItems.1')}</SelectItem>
+                  <SelectItem value='2'>{t('feeModeItems.2')}</SelectItem>
+                  <SelectItem value='3'>{t('feeModeItems.3')}</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('feePercent')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('feePercentDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              type='number'
+              min={0}
+              max={100}
+              value={data?.fee_percent}
+              onValueBlur={(value) => {
+                updateConfig('fee_percent', value);
+              }}
+              suffix='%'
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('fixedFee')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('fixedFeeDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              type='number'
+              min={0}
+              value={data?.fee_amount}
+              formatInput={(value) => unitConversion('centsToDollars', value)}
+              formatOutput={(value) => unitConversion('dollarsToCents', value)}
+              onValueBlur={(value) => updateConfig('fee_amount', value)}
+            />
+          </TableCell>
+        </TableRow>
+
+        <TableRow>
+          <TableCell>
+            <Label>{t('stripe.publicKey')}</Label>
+            <p className='text-muted-foreground text-xs' />
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.config.public_key}
+              onValueBlur={(value) => {
+                updateConfig('config', {
+                  ...data?.config,
+                  public_key: value,
+                });
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('stripe.secretKey')}</Label>
+            <p className='text-muted-foreground text-xs' />
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.config.secret_key}
+              onValueBlur={(value) => {
+                updateConfig('config', {
+                  ...data?.config,
+                  secret_key: value,
+                });
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('stripe.webhookSecret')}</Label>
+            <p className='text-muted-foreground text-xs' />
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.config.webhook_secret}
+              onValueBlur={(value) => {
+                updateConfig('config', {
+                  ...data?.config,
+                  webhook_secret: value,
+                });
+              }}
+            />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}

apps/admin/app/dashboard/payment/stripe-wechat-pay.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import {
+  getStripeWeChatPayPaymentConfig,
+  updateStripeWeChatPayPaymentConfig,
+} from '@/services/admin/payment';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { unitConversion } from '@repo/ui/utils';
+import { Label } from '@shadcn/ui/label';
+import { toast } from '@shadcn/ui/lib/sonner';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@shadcn/ui/select';
+import { Switch } from '@shadcn/ui/switch';
+import { Table, TableBody, TableCell, TableRow } from '@shadcn/ui/table';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+
+export default function StripeWeChatPay() {
+  const t = useTranslations('payment');
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getStripeWeChatPayPaymentConfig'],
+    queryFn: async () => {
+      const { data } = await getStripeWeChatPayPaymentConfig();
+      return data.data;
+    },
+  });
+
+  async function updateConfig(key: string, value: unknown) {
+    if (data?.[key] === value) return;
+    try {
+      await updateStripeWeChatPayPaymentConfig({
+        ...data,
+        mark: 'stripe_wechat_pay',
+        [key]: value,
+      } as any);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <Label>{t('wechatPay')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.enable}
+              onCheckedChange={async (checked) => {
+                updateConfig('enable', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('showName')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('showNameDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.name}
+              onValueBlur={(value) => {
+                updateConfig('name', value);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('iconUrl')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('iconUrlDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.icon}
+              onValueBlur={(value) => {
+                updateConfig('icon', value);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('notifyUrl')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('notifyUrlDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.domain}
+              onValueBlur={(value) => {
+                updateConfig('domain', value);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('feeMode')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('feeModeDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Select
+              value={String(data?.fee_mode)}
+              onValueChange={(value) => {
+                updateConfig('fee_mode', Number(value));
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder='请选择' />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value='0'>{t('feeModeItems.0')}</SelectItem>
+                  <SelectItem value='1'>{t('feeModeItems.1')}</SelectItem>
+                  <SelectItem value='2'>{t('feeModeItems.2')}</SelectItem>
+                  <SelectItem value='3'>{t('feeModeItems.3')}</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('feePercent')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('feePercentDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              type='number'
+              min={0}
+              max={100}
+              value={data?.fee_percent}
+              onValueBlur={(value) => {
+                updateConfig('fee_percent', value);
+              }}
+              suffix='%'
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('fixedFee')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('fixedFeeDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              type='number'
+              min={0}
+              value={data?.fee_amount}
+              formatInput={(value) => unitConversion('centsToDollars', value)}
+              formatOutput={(value) => unitConversion('dollarsToCents', value)}
+              onValueBlur={(value) => updateConfig('fee_amount', value)}
+            />
+          </TableCell>
+        </TableRow>
+
+        <TableRow>
+          <TableCell>
+            <Label>{t('stripe.publicKey')}</Label>
+            <p className='text-muted-foreground text-xs' />
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.config.public_key}
+              onValueBlur={(value) => {
+                updateConfig('config', {
+                  ...data?.config,
+                  public_key: value,
+                });
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('stripe.secretKey')}</Label>
+            <p className='text-muted-foreground text-xs' />
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.config.secret_key}
+              onValueBlur={(value) => {
+                updateConfig('config', {
+                  ...data?.config,
+                  secret_key: value,
+                });
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('stripe.webhookSecret')}</Label>
+            <p className='text-muted-foreground text-xs' />
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.config.webhook_secret}
+              onValueBlur={(value) => {
+                updateConfig('config', {
+                  ...data?.config,
+                  webhook_secret: value,
+                });
+              }}
+            />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}

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

@@ -0,0 +1,137 @@
+'use client';
+
+import { Icon } from '@iconify/react';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { Button } from '@shadcn/ui/button';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@shadcn/ui/form';
+import { useForm } from '@shadcn/ui/lib/react-hook-form';
+import { z, zodResolver } from '@shadcn/ui/lib/zod';
+import { ScrollArea } from '@shadcn/ui/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@shadcn/ui/sheet';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
+const formSchema = z.object({
+  name: z.string(),
+  description: z.string().optional(),
+});
+
+interface GroupFormProps<T> {
+  onSubmit: (data: T) => Promise<boolean> | boolean;
+  initialValues?: T;
+  loading?: boolean;
+  trigger: string;
+  title: string;
+}
+
+export default function GroupForm<T extends Record<string, any>>({
+  onSubmit,
+  initialValues,
+  loading,
+  trigger,
+  title,
+}: GroupFormProps<T>) {
+  const t = useTranslations('server');
+
+  const [open, setOpen] = useState(false);
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      ...initialValues,
+    },
+  });
+
+  useEffect(() => {
+    form?.reset(initialValues);
+  }, [form, initialValues]);
+
+  async function handleSubmit(data: { [x: string]: any }) {
+    const bool = await onSubmit(data as T);
+
+    if (bool) setOpen(false);
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          onClick={() => {
+            form.reset();
+            setOpen(true);
+          }}
+        >
+          {trigger}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-4 px-6 pt-4'>
+              <FormField
+                control={form.control}
+                name='name'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('group.form.name')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        {...field}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='description'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('group.form.description')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        {...field}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button
+            variant='outline'
+            disabled={loading}
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            {t('group.form.cancel')}
+          </Button>
+          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
+            {t('group.form.confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,140 @@
+'use client';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  batchDeleteNodeGroup,
+  createNodeGroup,
+  deleteNodeGroup,
+  getNodeGroupList,
+  updateNodeGroup,
+} from '@/services/admin/server';
+import { ConfirmButton } from '@repo/ui/confirm-button';
+import { formatDate } from '@repo/ui/utils';
+import { Button } from '@shadcn/ui/button';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import GroupForm from './group-form';
+
+export default function GroupTable() {
+  const t = useTranslations('server');
+  const [loading, setLoading] = useState(false);
+  const ref = useRef<ProTableActions>();
+
+  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-table.tsx

@@ -0,0 +1,225 @@
+'use client';
+
+import { Display } from '@/components/display';
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  batchDeleteNode,
+  createNode,
+  deleteNode,
+  getNodeGroupList,
+  getNodeList,
+  updateNode,
+} from '@/services/admin/server';
+import { ConfirmButton } from '@repo/ui/confirm-button';
+import { Badge } from '@shadcn/ui/badge';
+import { Button } from '@shadcn/ui/button';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { cn } from '@shadcn/ui/lib/utils';
+import { Switch } from '@shadcn/ui/switch';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@shadcn/ui/tooltip';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import NodeForm from './node-form';
+
+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>();
+
+  return (
+    <ProTable<API.Server, { groupId: number; search: string }>
+      action={ref}
+      header={{
+        toolbar: (
+          <NodeForm<API.CreateNodeRequest>
+            trigger={t('create')}
+            title={t('createNode')}
+            loading={loading}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await createNode({ ...values, enable: false });
+                toast.success(t('createSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+                return true;
+              } catch (error) {
+                setLoading(false);
+
+                return false;
+              }
+            }}
+          />
+        ),
+      }}
+      columns={[
+        {
+          accessorKey: 'id',
+          header: 'ID',
+          cell: ({ row }) => (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <Badge
+                    variant='outline'
+                    className={cn('text-primary-foreground', {
+                      'bg-green-500': row.original.protocol === 'shadowsocks',
+                      'bg-rose-500': row.original.protocol === 'vmess',
+                      'bg-blue-500': row.original.protocol === 'vless',
+                      'bg-yellow-500': row.original.protocol === 'trojan',
+                    })}
+                  >
+                    {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'),
+        },
+        {
+          accessorKey: 'speed_limit',
+          header: t('speedLimit'),
+          cell: ({ row }) => (
+            <Display type='traffic' value={row.getValue('speed_limit')} unlimited />
+          ),
+        },
+        {
+          accessorKey: 'traffic_ratio',
+          header: t('trafficRatio'),
+          cell: ({ row }) => <Badge variant='outline'>{row.getValue('traffic_ratio')} X</Badge>,
+        },
+
+        {
+          accessorKey: 'groupId',
+          header: t('nodeGroup'),
+          cell: ({ row }) => {
+            const name = groups?.find((group) => group.id === row.getValue('groupId'))?.name;
+            return name ? <Badge variant='outline'>{name}</Badge> : '--';
+          },
+        },
+      ]}
+      params={[
+        {
+          key: 'search',
+        },
+        {
+          key: 'group_id',
+          placeholder: t('nodeGroup'),
+          options: groups?.map((item) => ({
+            label: item.name,
+            value: String(item.id),
+          })),
+        },
+      ]}
+      request={async (pagination, filter) => {
+        const { data } = await getNodeList({
+          ...pagination,
+          ...filter,
+        });
+        return {
+          list: data.data?.list || [],
+          total: data.data?.total || 0,
+        };
+      }}
+      actions={{
+        render: (row) => [
+          <NodeForm<API.Server>
+            key='edit'
+            trigger={t('edit')}
+            title={t('editNode')}
+            loading={loading}
+            initialValues={row}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await updateNode({ ...row, ...values } as API.UpdateNodeRequest);
+                toast.success(t('updateSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+
+                return true;
+              } catch (error) {
+                setLoading(false);
+
+                return false;
+              }
+            }}
+          />,
+          <ConfirmButton
+            key='delete'
+            trigger={<Button variant='destructive'>{t('delete')}</Button>}
+            title={t('confirmDelete')}
+            description={t('deleteWarning')}
+            onConfirm={async () => {
+              await deleteNode({
+                id: row.id,
+              });
+              toast.success(t('deleteSuccess'));
+              ref.current?.refresh();
+            }}
+            cancelText={t('cancel')}
+            confirmText={t('confirm')}
+          />,
+        ],
+        batchRender(rows) {
+          return [
+            <ConfirmButton
+              key='delete'
+              trigger={<Button variant='destructive'>{t('delete')}</Button>}
+              title={t('group.confirmDelete')}
+              description={t('group.deleteWarning')}
+              onConfirm={async () => {
+                await batchDeleteNode({
+                  ids: rows.map((item) => item.id),
+                });
+                toast.success(t('group.deleteSuccess'));
+                ref.current?.refresh();
+              }}
+              cancelText={t('group.cancel')}
+              confirmText={t('group.confirm')}
+            />,
+          ];
+        },
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,24 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@shadcn/ui/tabs';
+import { getTranslations } from 'next-intl/server';
+
+import GroupTable from './group-table';
+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>
+      </TabsList>
+      <TabsContent value='node'>
+        <NodeTable />
+      </TabsContent>
+      <TabsContent value='group'>
+        <GroupTable />
+      </TabsContent>
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,135 @@
+import { Icon } from '@iconify/react';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { Button } from '@shadcn/ui/button';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@shadcn/ui/form';
+import { useForm } from '@shadcn/ui/lib/react-hook-form';
+import { z, zodResolver } from '@shadcn/ui/lib/zod';
+import { ScrollArea } from '@shadcn/ui/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@shadcn/ui/sheet';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
+const formSchema = z.object({
+  name: z.string(),
+  description: z.string().optional(),
+});
+
+interface GroupFormProps<T> {
+  onSubmit: (data: T) => Promise<boolean> | boolean;
+  initialValues?: T;
+  loading?: boolean;
+  trigger: string;
+  title: string;
+}
+
+export default function GroupForm<T extends Record<string, any>>({
+  onSubmit,
+  initialValues,
+  loading,
+  trigger,
+  title,
+}: GroupFormProps<T>) {
+  const t = useTranslations('subscribe');
+
+  const [open, setOpen] = useState(false);
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      ...initialValues,
+    },
+  });
+
+  useEffect(() => {
+    form?.reset(initialValues);
+  }, [form, initialValues]);
+
+  async function handleSubmit(data: { [x: string]: any }) {
+    const bool = await onSubmit(data as T);
+
+    if (bool) setOpen(false);
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          onClick={() => {
+            form.reset();
+            setOpen(true);
+          }}
+        >
+          {trigger}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className='w-[500px] max-w-full md:max-w-screen-md'>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <ScrollArea className='-mx-6 h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]'>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-4 px-6 pt-4'>
+              <FormField
+                control={form.control}
+                name='name'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('group.form.name')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        {...field}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='description'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('group.form.description')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        {...field}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button
+            variant='outline'
+            disabled={loading}
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            {t('group.form.cancel')}
+          </Button>
+          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
+            {t('group.form.confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,141 @@
+'use client';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  batchDeleteSubscribeGroup,
+  createSubscribeGroup,
+  deleteSubscribeGroup,
+  getSubscribeGroupList,
+  updateSubscribeGroup,
+} from '@/services/admin/subscribe';
+import { ConfirmButton } from '@repo/ui/confirm-button';
+import { formatDate } from '@repo/ui/utils';
+import { Button } from '@shadcn/ui/button';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import GroupForm from './group-form';
+
+const GroupTable = () => {
+  const t = useTranslations('subscribe');
+  const [loading, setLoading] = useState(false);
+  const ref = useRef<ProTableActions>();
+
+  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/subscribe/page.tsx

@@ -0,0 +1,25 @@
+import { getTranslations } from 'next-intl/server';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@shadcn/ui/tabs';
+
+import GroupTable from './group-table';
+import SubscribeTable from './subscribe-table';
+
+export default async function Page() {
+  const t = await getTranslations('subscribe');
+
+  return (
+    <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/subscribe/subscribe-form.tsx

@@ -0,0 +1,586 @@
+import { getNodeGroupList, getNodeList } from '@/services/admin/server';
+import { getSubscribeGroupList } from '@/services/admin/subscribe';
+import { Icon } from '@iconify/react';
+import { Combobox } from '@repo/ui/combobox';
+import { ArrayInput } from '@repo/ui/dynamic-Inputs';
+import { JSONEditor } from '@repo/ui/editor';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { unitConversion } from '@repo/ui/utils';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@shadcn/ui/accordion';
+import { Button } from '@shadcn/ui/button';
+import { Checkbox } from '@shadcn/ui/checkbox';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@shadcn/ui/form';
+import { Label } from '@shadcn/ui/label';
+import { useForm } from '@shadcn/ui/lib/react-hook-form';
+import { z, zodResolver } from '@shadcn/ui/lib/zod';
+import { ScrollArea } from '@shadcn/ui/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@shadcn/ui/sheet';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useTheme } from 'next-themes';
+import { assign, shake } from 'radash';
+import { useEffect, useState } from 'react';
+
+interface SubscribeFormProps<T> {
+  onSubmit: (data: T) => Promise<boolean> | boolean;
+  initialValues?: T;
+  loading?: boolean;
+  trigger: string;
+  title: string;
+}
+
+const defaultValues = {
+  inventory: -1,
+  speed_limit: 0,
+  device_limit: 0,
+  traffic: 0,
+  quota: 0,
+  discount: [],
+  server_group: [],
+  server: [],
+};
+
+export default function SubscribeForm<T extends Record<string, any>>({
+  onSubmit,
+  initialValues,
+  loading,
+  trigger,
+  title,
+}: SubscribeFormProps<T>) {
+  const t = useTranslations('subscribe');
+  const { resolvedTheme } = useTheme();
+
+  const [open, setOpen] = useState(false);
+
+  const formSchema = z.object({
+    name: z.string(),
+    description: z.string().optional(),
+    unit_price: z.number(),
+    replacement: z.number().optional(),
+    discount: z
+      .array(
+        z.object({
+          months: z.number(),
+          discount: z.number(),
+        }),
+      )
+      .optional(),
+    inventory: z.number().optional(),
+    speed_limit: z.number().optional(),
+    device_limit: z.number().optional(),
+    traffic: z.number().optional(),
+    quota: z.number().optional(),
+    group_id: z.number().optional().nullish(),
+    server_group: z.array(z.number()).optional(),
+    server: z.array(z.number()).optional(),
+  });
+
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: assign(
+      defaultValues,
+      shake(initialValues, (value) => value === null) as Record<string, any>,
+    ),
+  });
+  useEffect(() => {
+    form?.reset(
+      assign(defaultValues, shake(initialValues, (value) => value === null) as Record<string, any>),
+    );
+  }, [form, initialValues]);
+
+  async function handleSubmit(data: { [x: string]: any }) {
+    const bool = await onSubmit(data as T);
+
+    if (bool) setOpen(false);
+  }
+  const { data: group } = useQuery({
+    queryKey: ['getSubscribeGroupList'],
+    queryFn: async () => {
+      const { data } = await getSubscribeGroupList();
+      return data.data?.list as API.SubscribeGroup[];
+    },
+  });
+
+  const { data: server } = useQuery({
+    queryKey: ['getNodeList', 'all'],
+    queryFn: async () => {
+      const { data } = await getNodeList({
+        page: 1,
+        size: 9999,
+      });
+      return data.data?.list;
+    },
+  });
+
+  const { data: server_groups } = useQuery({
+    queryKey: ['getNodeGroupList'],
+    queryFn: async () => {
+      const { data } = await getNodeGroupList();
+      return (data.data?.list || []) as API.ServerGroup[];
+    },
+  });
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          onClick={() => {
+            form.reset();
+            setOpen(true);
+          }}
+        >
+          {trigger}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className='w-screen max-w-full md:max-w-full'>
+        <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='grid gap-4 px-6 pt-4 lg:grid-cols-3'
+            >
+              <div className='flex flex-col gap-4'>
+                <FormField
+                  control={form.control}
+                  name='name'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.name')}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          {...field}
+                          onValueChange={(value) => {
+                            form.setValue(field.name, value);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='description'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <JSONEditor
+                          title={t('form.description')}
+                          value={field.value}
+                          onChange={(value) => {
+                            form.setValue(field.name, value);
+                          }}
+                          placeholder={{
+                            description: 'description',
+                            features: [
+                              {
+                                type: 'default',
+                                icon: '',
+                                label: 'label',
+                              },
+                            ],
+                          }}
+                          schema={{
+                            type: 'object',
+                            properties: {
+                              description: {
+                                type: 'string',
+                                description: 'A brief description of the item.',
+                              },
+                              features: {
+                                type: 'array',
+                                items: {
+                                  type: 'object',
+                                  properties: {
+                                    icon: {
+                                      type: 'string',
+                                      description:
+                                        "Enter an Iconify icon identifier (e.g., 'mdi:account').",
+                                      pattern: '^[a-z0-9]+:[a-z0-9-]+$',
+                                      examples: [
+                                        'uil:shield-check',
+                                        'uil:shield-exclamation',
+                                        'uil:database',
+                                        'uil:server',
+                                        'Visit https://icon-sets.iconify.design to browse available icons.',
+                                      ],
+                                    },
+                                    label: {
+                                      type: 'string',
+                                      description: 'The label describing the feature.',
+                                    },
+                                    type: {
+                                      type: 'string',
+                                      enum: ['default', 'success', 'destructive'],
+                                      description:
+                                        'The type of feature, limited to specific values.',
+                                    },
+                                  },
+                                },
+                                description: 'A list of feature objects.',
+                              },
+                            },
+                            required: ['description', 'features'],
+                            additionalProperties: false,
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+              <div className='flex flex-col gap-4'>
+                <div className='grid grid-cols-3 gap-4'>
+                  <FormField
+                    control={form.control}
+                    name='unit_price'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('form.unit_price')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            type='number'
+                            {...field}
+                            min={0}
+                            formatInput={(value) => unitConversion('centsToDollars', value)}
+                            formatOutput={(value) => unitConversion('dollarsToCents', value)}
+                            onValueChange={(value) => {
+                              form.setValue(field.name, value);
+                            }}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name='replacement'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('form.replacement')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            type='number'
+                            {...field}
+                            min={0}
+                            formatInput={(value) => unitConversion('centsToDollars', value)}
+                            formatOutput={(value) => unitConversion('dollarsToCents', value)}
+                            onValueChange={(value) => {
+                              form.setValue(field.name, value);
+                            }}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name='traffic'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('form.traffic')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('form.noLimit')}
+                            type='number'
+                            {...field}
+                            formatInput={(value) => unitConversion('bytesToGb', value)}
+                            formatOutput={(value) => unitConversion('gbToBytes', value)}
+                            suffix='GB'
+                            onValueChange={(value) => {
+                              form.setValue(field.name, value);
+                            }}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name='speed_limit'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('form.speedLimit')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('form.noLimit')}
+                            type='number'
+                            {...field}
+                            formatInput={(value) => unitConversion('bitsToMb', value)}
+                            formatOutput={(value) => unitConversion('mbToBits', value)}
+                            suffix='MB'
+                            onValueChange={(value) => {
+                              form.setValue(field.name, value);
+                            }}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name='device_limit'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('form.deviceLimit')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('form.noLimit')}
+                            type='number'
+                            {...field}
+                            onValueChange={(value) => {
+                              form.setValue(field.name, value);
+                            }}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name='inventory'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('form.inventory')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={`-1 ${t('form.noLimit')}`}
+                            type='number'
+                            {...field}
+                            min={-1}
+                            onValueChange={(value) => {
+                              form.setValue(field.name, value);
+                            }}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name='quota'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('form.quota')}</FormLabel>
+                        <FormControl>
+                          <EnhancedInput
+                            placeholder={t('form.noLimit')}
+                            type='number'
+                            {...field}
+                            onValueChange={(value) => {
+                              form.setValue(field.name, value);
+                            }}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name='group_id'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('form.subscribeGroup')}</FormLabel>
+                        <FormControl>
+                          <Combobox<number, false>
+                            placeholder={t('form.selectSubscribeGroup')}
+                            {...field}
+                            onChange={(value) => {
+                              form.setValue(field.name, value);
+                            }}
+                            options={group?.map((item) => ({
+                              label: item.name,
+                              value: item.id,
+                            }))}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <div className='col-span-3'>
+                    <FormField
+                      control={form.control}
+                      name='discount'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('form.discount')}</FormLabel>
+                          <FormControl>
+                            <ArrayInput<API.SubscribeDiscount>
+                              fields={[
+                                {
+                                  name: 'months',
+                                  type: 'number',
+                                  min: 1,
+                                  suffix: t('form.discountMonths'),
+                                },
+                                {
+                                  name: 'discount',
+                                  type: 'number',
+                                  min: 1,
+                                  max: 100,
+                                  placeholder: t('form.discountPercent'),
+                                  suffix: '%',
+                                },
+                              ]}
+                              value={field.value}
+                              onChange={(value) => {
+                                form.setValue(field.name, value);
+                              }}
+                            />
+                          </FormControl>
+                          <FormDescription>{t('form.discountDescription')}</FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className='grid grid-cols-2 gap-4'>
+                <FormField
+                  control={form.control}
+                  name='server_group'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.serverGroup')}</FormLabel>
+                      <FormControl>
+                        <Accordion type='single' collapsible className='w-full'>
+                          {server_groups?.map((group: API.ServerGroup) => {
+                            const value = field.value || [];
+
+                            return (
+                              <AccordionItem key={group.id} value={String(group.id)}>
+                                <AccordionTrigger>
+                                  <div className='flex items-center gap-2'>
+                                    <Checkbox
+                                      checked={value.includes(group.id!)}
+                                      onCheckedChange={(checked) => {
+                                        return checked
+                                          ? form.setValue(field.name, [...value, group.id])
+                                          : form.setValue(
+                                              field.name,
+                                              value.filter((value: number) => value !== group.id),
+                                            );
+                                      }}
+                                    />
+                                    <Label>{group.name}</Label>
+                                  </div>
+                                </AccordionTrigger>
+                                <AccordionContent>
+                                  <ul className='list-disc [&>li]:mt-2'>
+                                    {server
+                                      ?.filter((server: API.Server) => server.groupId === group.id)
+                                      ?.map((node: API.Server) => {
+                                        return (
+                                          <li
+                                            key={node.id}
+                                            className='flex items-center justify-between *:flex-1'
+                                          >
+                                            <span>{node.name}</span>
+                                            <span>{node.server_addr}</span>
+                                            <span className='text-right'>{node.protocol}</span>
+                                          </li>
+                                        );
+                                      })}
+                                  </ul>
+                                </AccordionContent>
+                              </AccordionItem>
+                            );
+                          })}
+                        </Accordion>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name='server'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.server')}</FormLabel>
+                      <FormControl>
+                        <div className='flex flex-col gap-2'>
+                          {server
+                            ?.filter((item: API.Server) => !item.groupId)
+                            ?.map((item: API.Server) => {
+                              const value = field.value || [];
+
+                              return (
+                                <div className='flex items-center gap-2' key={item.id}>
+                                  <Checkbox
+                                    checked={value.includes(item.id!)}
+                                    onCheckedChange={(checked) => {
+                                      return checked
+                                        ? form.setValue(field.name, [...value, item.id])
+                                        : form.setValue(
+                                            field.name,
+                                            value.filter((value: number) => value !== item.id),
+                                          );
+                                    }}
+                                  />
+                                  <Label className='flex w-full items-center justify-between *:flex-1'>
+                                    <span>{item.name}</span>
+                                    <span>{item.server_addr}</span>
+                                    <span className='text-right'>{item.protocol}</span>
+                                  </Label>
+                                </div>
+                              );
+                            })}
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button
+            variant='outline'
+            disabled={loading}
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            {t('form.cancel')}
+          </Button>
+          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
+            {t('form.confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,242 @@
+'use client';
+
+import { Display } from '@/components/display';
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  batchDeleteSubscribe,
+  createSubscribe,
+  deleteSubscribe,
+  getSubscribeGroupList,
+  getSubscribeList,
+  updateSubscribe,
+} from '@/services/admin/subscribe';
+import { ConfirmButton } from '@repo/ui/confirm-button';
+import { Badge } from '@shadcn/ui/badge';
+import { Button } from '@shadcn/ui/button';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { Switch } from '@shadcn/ui/switch';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import SubscribeForm from './subscribe-form';
+
+export default function SubscribeTable() {
+  const t = useTranslations('subscribe');
+  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>();
+  return (
+    <ProTable<API.Subscribe, { group_id: number; query: string }>
+      action={ref}
+      header={{
+        toolbar: (
+          <SubscribeForm<API.CreateSubscribeRequest>
+            trigger={t('create')}
+            title={t('createSubscribe')}
+            loading={loading}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await createSubscribe({
+                  ...values,
+                  show: false,
+                  sell: false,
+                });
+                toast.success(t('createSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+
+                return true;
+              } catch (error) {
+                setLoading(false);
+
+                return false;
+              }
+            }}
+          />
+        ),
+      }}
+      params={[
+        {
+          key: 'search',
+        },
+        {
+          key: 'group_id',
+          placeholder: t('subscribeGroup'),
+          options: groups?.map((item) => ({
+            label: item.name,
+            value: String(item.id),
+          })),
+        },
+      ]}
+      request={async (pagination, filters) => {
+        const { data } = await getSubscribeList({
+          ...pagination,
+          ...filters,
+        });
+        return {
+          list: data.data?.list || [],
+          total: data.data?.total || 0,
+        };
+      }}
+      columns={[
+        {
+          accessorKey: 'show',
+          header: t('show'),
+          cell: ({ row }) => {
+            return (
+              <Switch
+                defaultChecked={row.getValue('show')}
+                onCheckedChange={async (checked) => {
+                  await updateSubscribe({
+                    ...row.original,
+                    show: checked,
+                  } as API.UpdateSubscribeRequest);
+                  ref.current?.refresh();
+                }}
+              />
+            );
+          },
+        },
+        {
+          accessorKey: 'sell',
+          header: t('sell'),
+          cell: ({ row }) => {
+            return (
+              <Switch
+                defaultChecked={row.getValue('sell')}
+                onCheckedChange={async (checked) => {
+                  await updateSubscribe({
+                    ...row.original,
+                    sell: checked,
+                  } as API.UpdateSubscribeRequest);
+                  ref.current?.refresh();
+                }}
+              />
+            );
+          },
+        },
+        {
+          accessorKey: 'name',
+          header: t('name'),
+        },
+        {
+          accessorKey: 'unit_price',
+          header: t('unitPrice'),
+          cell: ({ row }) => <Display type='currency' value={row.getValue('unit_price')} />,
+        },
+        {
+          accessorKey: 'replacement',
+          header: t('replacement'),
+          cell: ({ row }) => <Display type='currency' value={row.getValue('replacement')} />,
+        },
+        {
+          accessorKey: 'traffic',
+          header: t('traffic'),
+          cell: ({ row }) => <Display type='traffic' value={row.getValue('traffic')} unlimited />,
+        },
+        {
+          accessorKey: 'device_limit',
+          header: t('deviceLimit'),
+          cell: ({ row }) => (
+            <Display type='number' value={row.getValue('device_limit')} unlimited />
+          ),
+        },
+        {
+          accessorKey: 'inventory',
+          header: t('inventory'),
+          cell: ({ row }) => (
+            <Display
+              type='number'
+              value={row.getValue('inventory') === -1 ? 0 : row.getValue('inventory')}
+              unlimited
+            />
+          ),
+        },
+        {
+          accessorKey: 'quota',
+          header: t('quota'),
+          cell: ({ row }) => <Display type='number' value={row.getValue('quota')} unlimited />,
+        },
+        {
+          accessorKey: 'group_id',
+          header: t('subscribeGroup'),
+          cell: ({ row }) => {
+            const name = groups?.find((group) => group.id === row.getValue('group_id'))?.name;
+            return name ? <Badge variant='outline'>{name}</Badge> : '--';
+          },
+        },
+      ]}
+      actions={{
+        render: (row) => [
+          <SubscribeForm<API.Subscribe>
+            key='edit'
+            trigger={t('edit')}
+            title={t('editSubscribe')}
+            loading={loading}
+            initialValues={row}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await updateSubscribe({
+                  ...row,
+                  ...values,
+                } as API.UpdateSubscribeRequest);
+                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 deleteSubscribe({
+                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('delete')}</Button>}
+            title={t('confirmDelete')}
+            description={t('deleteWarning')}
+            onConfirm={async () => {
+              await batchDeleteSubscribe({
+                ids: rows.map((item) => item.id),
+              });
+
+              toast.success(t('deleteSuccess'));
+              ref.current?.reset();
+            }}
+            cancelText={t('cancel')}
+            confirmText={t('confirm')}
+          />,
+        ],
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,80 @@
+'use client';
+
+import { getCurrencyConfig, updateCurrencyConfig } from '@/services/admin/system';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { Label } from '@shadcn/ui/label';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { Table, TableBody, TableCell, TableRow } from '@shadcn/ui/table';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+
+export default function Site() {
+  const t = useTranslations('system.currency');
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getCurrencyConfig'],
+    queryFn: async () => {
+      const { data } = await getCurrencyConfig();
+      return data.data;
+    },
+  });
+
+  async function updateConfig(key: string, value: unknown) {
+    if (data?.[key] === value) return;
+    try {
+      await updateCurrencyConfig({
+        ...data,
+        [key]: value,
+      } as API.UpdateCurrencyConfigRequest);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <Label>{t('accessKey')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('accessKeyDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              value={data?.access_key}
+              onValueBlur={(value) => updateConfig('access_key', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('currencyUnit')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('currencyUnitDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder='USD'
+              value={data?.currency_unit}
+              onValueBlur={(value) => updateConfig('currency_unit', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('currencySymbol')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('currencySymbolDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder='$'
+              value={data?.currency_symbol}
+              onValueBlur={(value) => updateConfig('currency_symbol', value)}
+            />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}

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

@@ -0,0 +1,150 @@
+'use client';
+
+import { getEmailSmtpConfig, testEmailSmtp, updateEmailSmtpConfig } from '@/services/admin/system';
+import { HTMLEditor } from '@repo/ui/editor';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { Button } from '@shadcn/ui/button';
+import { Label } from '@shadcn/ui/label';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { Switch } from '@shadcn/ui/switch';
+import { Table, TableBody, TableCell, TableRow } from '@shadcn/ui/table';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+export default function Email() {
+  const t = useTranslations('system.email');
+
+  const { data, refetch, isFetching } = useQuery({
+    queryKey: ['getEmailSmtpConfig'],
+    queryFn: async () => {
+      const { data } = await getEmailSmtpConfig();
+      return data.data;
+    },
+  });
+
+  const [email, setEmail] = useState<string>();
+
+  async function updateConfig(key: string, value: unknown) {
+    if (data?.[key] === value) return;
+    try {
+      await updateEmailSmtpConfig({
+        ...data,
+        [key]: value,
+      } as API.UpdateEmailSmtpConfigRequest);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  return (
+    <>
+      <Table>
+        <TableBody>
+          {[
+            {
+              key: 'email_smtp_host',
+              label: t('smtpServerAddress'),
+              description: t('smtpServerAddressDescription'),
+            },
+            {
+              key: 'email_smtp_port',
+              label: t('smtpServerPort'),
+              description: t('smtpServerPortDescription'),
+              type: 'number',
+            },
+            {
+              key: 'email_smtp_ssl',
+              label: t('smtpEncryptionMethod'),
+              description: t('smtpEncryptionMethodDescription'),
+              component: 'switch',
+            },
+            {
+              key: 'email_smtp_user',
+              label: t('smtpAccount'),
+              description: t('smtpAccountDescription'),
+            },
+            {
+              key: 'email_smtp_pass',
+              label: t('smtpPassword'),
+              description: t('smtpPasswordDescription'),
+              type: 'password',
+            },
+            {
+              key: 'email_smtp_from',
+              label: t('senderAddress'),
+              description: t('senderAddressDescription'),
+            },
+          ].map(({ key, label, description, type = 'text', component = 'input' }) => (
+            <TableRow key={key}>
+              <TableCell>
+                <Label>{label}</Label>
+                <p className='text-muted-foreground text-xs'>{description}</p>
+              </TableCell>
+              <TableCell className='text-right'>
+                {component === 'input' ? (
+                  <EnhancedInput
+                    placeholder={t('inputPlaceholder')}
+                    value={data?.[key]}
+                    type={type}
+                    onValueBlur={(value) => updateConfig(key, value)}
+                  />
+                ) : (
+                  <Switch
+                    checked={data?.[key]}
+                    onCheckedChange={(checked) => updateConfig(key, checked)}
+                  />
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+          <TableRow>
+            <TableCell>
+              <Label>{t('sendTestEmail')}</Label>
+              <p className='text-muted-foreground text-xs'>{t('sendTestEmailDescription')}</p>
+            </TableCell>
+            <TableCell className='flex items-center gap-2 text-right'>
+              <EnhancedInput
+                placeholder={t('inputPlaceholder')}
+                value={email}
+                onValueChange={(value) => setEmail(value as string)}
+              />
+              <Button
+                disabled={!email}
+                onClick={async () => {
+                  if (isFetching || !email) return;
+                  try {
+                    await testEmailSmtp({ email });
+                    toast.success(t('sendSuccess'));
+                  } catch {
+                    toast.error(t('sendFailure'));
+                  }
+                }}
+              >
+                {t('sendTestEmail')}
+              </Button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <div className='grid grid-cols-1 gap-4 py-4 md:grid-cols-3'>
+        {['verify_email_template', 'expiration_email_template', 'maintenance_email_template'].map(
+          (templateKey) => (
+            <HTMLEditor
+              key={templateKey}
+              title={t(`${templateKey}`)}
+              description={t(`${templateKey}Description`, { after: '{{', before: '}}' })}
+              placeholder={t('inputPlaceholder')}
+              value={data?.[templateKey]}
+              onBlur={(value) => {
+                updateConfig(templateKey, value);
+              }}
+            />
+          ),
+        )}
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,93 @@
+'use client';
+
+import { getInviteConfig, updateInviteConfig } from '@/services/admin/system';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { Label } from '@shadcn/ui/label';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { Switch } from '@shadcn/ui/switch';
+import { Table, TableBody, TableCell, TableRow } from '@shadcn/ui/table';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+
+export default function Invite() {
+  const t = useTranslations('system.invite');
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getInviteConfig'],
+    queryFn: async () => {
+      const { data } = await getInviteConfig();
+
+      return data.data;
+    },
+  });
+
+  async function updateConfig(key: string, value: unknown) {
+    if (data?.[key] === value) return;
+    try {
+      await updateInviteConfig({
+        ...data,
+        [key]: value,
+      } as API.UpdateInviteConfigRequest);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <Label>{t('enableForcedInvite')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('enableForcedInviteDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.forced_invite}
+              onCheckedChange={(checked) => {
+                updateConfig('forced_invite', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('inviteCommissionPercentage')}</Label>
+            <p className='text-muted-foreground text-xs'>
+              {t('inviteCommissionPercentageDescription')}
+            </p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              value={data?.referral_percentage}
+              type='number'
+              min={0}
+              max={100}
+              suffix='%'
+              onValueBlur={(value) => updateConfig('referral_percentage', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('commissionFirstTimeOnly')}</Label>
+            <p className='text-muted-foreground text-xs'>
+              {t('commissionFirstTimeOnlyDescription')}
+            </p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.only_first_purchase}
+              onCheckedChange={(checked) => {
+                updateConfig('only_first_purchase', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}

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

@@ -0,0 +1,97 @@
+'use client';
+
+import { getNodeConfig, updateNodeConfig } from '@/services/admin/system';
+import { Icon } from '@iconify/react';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { Label } from '@shadcn/ui/label';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { Table, TableBody, TableCell, TableRow } from '@shadcn/ui/table';
+import { useQuery } from '@tanstack/react-query';
+import { nanoid } from 'nanoid';
+import { useTranslations } from 'next-intl';
+
+export default function Node() {
+  const t = useTranslations('system.node');
+
+  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.GetNodeConfigResponse);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  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={
+                <Icon
+                  icon='uil:arrow-random'
+                  onClick={() => {
+                    updateConfig('node_secret', nanoid());
+                  }}
+                />
+              }
+            />
+          </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}
+              value={data?.node_push_interval}
+              onValueBlur={(value) => updateConfig('node_push_interval', value)}
+              placeholder={t('inputPlaceholder')}
+            />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}

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

@@ -0,0 +1,64 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@shadcn/ui/tabs';
+import { getTranslations } from 'next-intl/server';
+
+import Currency from './currency';
+import Email from './email';
+import Invite from './invite';
+import Node from './node';
+import Register from './register';
+import Site from './site';
+import Subscription from './subscription';
+import Telegram from './telegram';
+import Tos from './tos';
+import Verify from './verify';
+
+export default async function Page() {
+  const t = await getTranslations('system');
+
+  return (
+    <Tabs defaultValue='site'>
+      <TabsList className='h-full flex-wrap'>
+        <TabsTrigger value='site'>{t('tabs.site')}</TabsTrigger>
+        <TabsTrigger value='currency'>{t('tabs.currency')}</TabsTrigger>
+        <TabsTrigger value='subscription'>{t('tabs.subscription')}</TabsTrigger>
+        <TabsTrigger value='register'>{t('tabs.register')}</TabsTrigger>
+        <TabsTrigger value='verify'>{t('tabs.verify')}</TabsTrigger>
+        <TabsTrigger value='email'>{t('tabs.email')}</TabsTrigger>
+        <TabsTrigger value='node'>{t('tabs.node')}</TabsTrigger>
+        <TabsTrigger value='invite'>{t('tabs.invite')}</TabsTrigger>
+        <TabsTrigger value='telegram'>{t('tabs.telegram')}</TabsTrigger>
+        <TabsTrigger value='tos'>{t('tabs.tos')}</TabsTrigger>
+      </TabsList>
+      <TabsContent value='site'>
+        <Site />
+      </TabsContent>
+      <TabsContent value='currency'>
+        <Currency />
+      </TabsContent>
+      <TabsContent value='subscription'>
+        <Subscription />
+      </TabsContent>
+      <TabsContent value='register'>
+        <Register />
+      </TabsContent>
+      <TabsContent value='verify'>
+        <Verify />
+      </TabsContent>
+      <TabsContent value='email'>
+        <Email />
+      </TabsContent>
+      <TabsContent value='node'>
+        <Node />
+      </TabsContent>
+      <TabsContent value='invite'>
+        <Invite />
+      </TabsContent>
+      <TabsContent value='telegram'>
+        <Telegram />
+      </TabsContent>
+      <TabsContent value='tos'>
+        <Tos />
+      </TabsContent>
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,163 @@
+'use client';
+
+import { getRegisterConfig, updateRegisterConfig } from '@/services/admin/system';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { Label } from '@shadcn/ui/label';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { Switch } from '@shadcn/ui/switch';
+import { Table, TableBody, TableCell, TableRow } from '@shadcn/ui/table';
+import { Textarea } from '@shadcn/ui/textarea';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+
+export default function Register() {
+  const t = useTranslations('system.register');
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getRegisterConfig'],
+    queryFn: async () => {
+      const { data } = await getRegisterConfig();
+
+      return data.data;
+    },
+  });
+
+  async function updateConfig(key: string, value: unknown) {
+    if (data?.[key] === value) return;
+    try {
+      await updateRegisterConfig({
+        ...data,
+        [key]: value,
+      } as API.GetRegisterConfigResponse);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <Label>{t('stopNewUserRegistration')}</Label>
+            <p className='text-muted-foreground text-xs'>
+              {t('stopNewUserRegistrationDescription')}
+            </p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.stop_register}
+              onCheckedChange={(checked) => {
+                updateConfig('stop_register', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('emailVerification')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('emailVerificationDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.enable_email_verify}
+              onCheckedChange={(checked) => {
+                updateConfig('enable_email_verify', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('emailSuffixWhitelist')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('emailSuffixWhitelistDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.enable_email_domain_suffix}
+              onCheckedChange={(checked) => {
+                updateConfig('enable_email_domain_suffix', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className='align-top'>
+            <Label>{t('whitelistSuffixes')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('whitelistSuffixesDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Textarea
+              className='h-52'
+              placeholder={t('whitelistSuffixesPlaceholder')}
+              defaultValue={data?.email_domain_suffix_list}
+              onBlur={(e) => {
+                updateConfig('email_domain_suffix_list', e.target.value);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('ipRegistrationLimit')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('ipRegistrationLimitDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.enable_ip_register_limit}
+              onCheckedChange={(checked) => {
+                updateConfig('enable_ip_register_limit', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('registrationLimitCount')}</Label>
+            <p className='text-muted-foreground text-xs'>
+              {t('registrationLimitCountDescription')}
+            </p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              type='number'
+              min={0}
+              value={data?.ip_register_limit}
+              onValueBlur={(value) => updateConfig('ip_register_limit', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('penaltyTime')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('penaltyTimeDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              type='number'
+              min={0}
+              value={data?.ip_register_limit_duration}
+              onValueBlur={(value) => updateConfig('ip_register_limit_duration', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('trialRegistration')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('trialRegistrationDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.enable_trial}
+              onCheckedChange={(checked) => {
+                updateConfig('enable_trial', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}

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

@@ -0,0 +1,98 @@
+'use client';
+
+import { getSiteConfig, updateSiteConfig } from '@/services/admin/system';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { Label } from '@shadcn/ui/label';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { Table, TableBody, TableCell, TableRow } from '@shadcn/ui/table';
+import { Textarea } from '@shadcn/ui/textarea';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+
+export default function Site() {
+  const t = useTranslations('system.site');
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getSiteConfig'],
+    queryFn: async () => {
+      const { data } = await getSiteConfig();
+      return data.data;
+    },
+  });
+
+  async function updateConfig(key: string, value: unknown) {
+    if (data?.[key] === value) return;
+    try {
+      await updateSiteConfig({
+        ...data,
+        [key]: value,
+      } as API.SiteConfig);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <Label>{t('logo')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('logoDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('logoPlaceholder')}
+              value={data?.site_logo}
+              onValueBlur={(value) => updateConfig('site_logo', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('siteName')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('siteNameDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('siteNamePlaceholder')}
+              value={data?.site_name}
+              onValueBlur={(value) => updateConfig('site_name', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('siteDesc')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('siteDescDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('siteDescPlaceholder')}
+              value={data?.site_desc}
+              onValueBlur={(value) => updateConfig('site_desc', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className='align-top'>
+            <Label>{t('siteDomain')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('siteDomainDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Textarea
+              className='h-52'
+              placeholder={t('siteDomainPlaceholder')}
+              defaultValue={data?.host}
+              onBlur={(e) => {
+                updateConfig('host', e.target.value);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}

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

@@ -0,0 +1,334 @@
+'use client';
+
+import { toast } from '@shadcn/ui/lib/sonner';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
+import {
+  createApplication,
+  deleteApplication,
+  getApplication,
+  getSubscribeConfig,
+  getSubscribeType,
+  updateApplication,
+  updateSubscribeConfig,
+} from '@/services/admin/system';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { Button } from '@shadcn/ui/button';
+import { Label } from '@shadcn/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@shadcn/ui/select';
+import { Switch } from '@shadcn/ui/switch';
+import { Table, TableBody, TableCell, TableRow } from '@shadcn/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@shadcn/ui/tabs';
+import { Textarea } from '@shadcn/ui/textarea';
+
+function compareData(
+  originalData: API.GetApplicationResponse,
+  modifiedData: API.GetApplicationResponse,
+): {
+  added: API.Application[];
+  deleted: API.Application[];
+  updated: API.Application[];
+} {
+  const added: API.Application[] = [];
+  const deleted: API.Application[] = [];
+  const updated: API.Application[] = [];
+
+  const findById = (array: API.Application[], id: number): API.Application | undefined => {
+    return array.find((item) => item.id === id);
+  };
+
+  const isUpdated = (original: API.Application, modified: API.Application): boolean => {
+    return (
+      original.name !== modified.name ||
+      original.platform !== modified.platform ||
+      original.subscribe_type !== modified.subscribe_type ||
+      original.url !== modified.url ||
+      original.icon !== modified.icon
+    );
+  };
+
+  Object.values(originalData).forEach((platformData) => {
+    platformData.forEach((originalApp) => {
+      const modifiedApp = findById(
+        modifiedData[originalApp.platform as API.CreateApplicationRequest['platform']],
+        originalApp.id,
+      );
+
+      if (!modifiedApp) {
+        deleted.push(originalApp);
+      } else if (isUpdated(originalApp, modifiedApp)) {
+        updated.push(modifiedApp);
+      }
+    });
+  });
+
+  Object.values(modifiedData).forEach((platformData) => {
+    platformData.forEach((modifiedApp) => {
+      if (
+        !findById(
+          originalData[modifiedApp.platform as API.CreateApplicationRequest['platform']],
+          modifiedApp.id,
+        )
+      ) {
+        added.push(modifiedApp);
+      }
+    });
+  });
+
+  return { added, deleted, updated };
+}
+
+export default function Subscription() {
+  const t = useTranslations('system.subscription');
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getSubscribeConfig'],
+    queryFn: async () => {
+      const { data } = await getSubscribeConfig();
+
+      return data.data;
+    },
+  });
+
+  const { data: apps, refetch: appsRefetch } = useQuery({
+    queryKey: ['getApplication'],
+    queryFn: async () => {
+      const { data } = await getApplication();
+
+      return data.data;
+    },
+  });
+
+  async function updateConfig(key: string, value: unknown) {
+    if (data?.[key] === value) return;
+    try {
+      await updateSubscribeConfig({
+        ...data,
+        [key]: value,
+      } as API.GetSubscribeConfigResponse);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  const { data: subscribe_types } = useQuery<string[]>({
+    queryKey: ['getSubscribeType'],
+    queryFn: async () => {
+      const { data } = await getSubscribeType();
+
+      return data.data?.subscribe_types || [];
+    },
+  });
+  const [app, setApp] = useState<API.GetApplicationResponse>();
+  const appTypes = Object.keys(apps || {});
+
+  useEffect(() => {
+    if (!app) setApp(apps);
+  }, [app, apps]);
+
+  return (
+    <>
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <Label>{t('singleSubscriptionMode')}</Label>
+              <p className='text-muted-foreground text-xs'>
+                {t('singleSubscriptionModeDescription')}
+              </p>
+            </TableCell>
+            <TableCell className='text-right'>
+              <Switch
+                checked={data?.single_model}
+                onCheckedChange={(checked) => {
+                  updateConfig('single_model', checked);
+                }}
+              />
+            </TableCell>
+          </TableRow>
+
+          <TableRow>
+            <TableCell>
+              <Label>{t('wildcardResolution')}</Label>
+              <p className='text-muted-foreground text-xs'>{t('wildcardResolutionDescription')}</p>
+            </TableCell>
+            <TableCell className='text-right'>
+              <Switch
+                checked={data?.pan_domain}
+                onCheckedChange={(checked) => {
+                  updateConfig('pan_domain', checked);
+                }}
+              />
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Label>{t('subscriptionPath')}</Label>
+              <p className='text-muted-foreground text-xs'>{t('subscriptionPathDescription')}</p>
+            </TableCell>
+            <TableCell className='flex items-center gap-2 text-right'>
+              <EnhancedInput
+                placeholder={t('subscriptionPathPlaceholder')}
+                value={data?.subscribe_path}
+                onValueBlur={(value) => updateConfig('subscribe_path', value)}
+              />
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className='align-top'>
+              <Label>{t('subscriptionDomain')}</Label>
+              <p className='text-muted-foreground text-xs'>{t('subscriptionDomainDescription')}</p>
+            </TableCell>
+            <TableCell className='text-right'>
+              <Textarea
+                className='h-52'
+                placeholder={t('subscriptionDomainPlaceholder')}
+                defaultValue={data?.subscribe_domain}
+                onBlur={(e) => {
+                  updateConfig('subscribe_domain', e.target.value);
+                }}
+              />
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Label>{t('app')}</Label>
+              <p className='text-muted-foreground text-xs'>{t('appDescription')}</p>
+            </TableCell>
+            <TableCell className='flex justify-end gap-2'>
+              <Button
+                size='sm'
+                variant='outline'
+                onClick={() => {
+                  setApp(apps);
+                }}
+              >
+                {t('reset')}
+              </Button>
+              <Button
+                size='sm'
+                onClick={() => {
+                  const { added, deleted, updated } = compareData(apps!, app!);
+
+                  added.forEach(async (item) => {
+                    await createApplication(item as API.CreateApplicationRequest);
+                  });
+                  deleted.forEach(async (item) => {
+                    await deleteApplication({
+                      id: item.id,
+                    });
+                  });
+                  updated.forEach(async (item) => {
+                    await updateApplication(item);
+                  });
+                  toast.success(t('saveSuccess'));
+                  appsRefetch();
+                }}
+              >
+                {t('save')}
+              </Button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <Tabs defaultValue='windows'>
+        <TabsList className='h-full flex-wrap'>
+          {appTypes.map((type) => {
+            return (
+              <TabsTrigger value={type} key={type} className='uppercase'>
+                {type}
+              </TabsTrigger>
+            );
+          })}
+        </TabsList>
+        {appTypes.map((type) => {
+          const list = (app?.[type] as API.Application[]) || [];
+          const updatedList = (key: string, value: string, index: number) => {
+            const newList = list.map((item, i) => (i === index ? { ...item, [key]: value } : item));
+
+            setApp({
+              ...app,
+              [type]: newList,
+            } as API.GetApplicationResponse);
+          };
+
+          return (
+            <TabsContent value={type} key={type} className='mt-4 space-y-4'>
+              {list.map((item, index) => {
+                return (
+                  <div className='flex flex-col items-center gap-2 lg:flex-row' key={index}>
+                    <Select
+                      value={item.subscribe_type}
+                      onValueChange={(value) => {
+                        updatedList('subscribe_type', value, index);
+                      }}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder={t('subscriptionProtocol')} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {subscribe_types?.map((item) => (
+                          <SelectItem key={item} value={item}>
+                            {item}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <EnhancedInput
+                      placeholder={t('appName')}
+                      value={item.name}
+                      onValueChange={(value) => updatedList('name', value as string, index)}
+                    />
+                    <EnhancedInput
+                      placeholder={t('appIcon')}
+                      value={item.icon}
+                      onValueChange={(value) => updatedList('icon', value as string, index)}
+                    />
+                    <EnhancedInput
+                      placeholder={t('appDownloadURL')}
+                      value={item.url}
+                      onValueChange={(value) => updatedList('url', value as string, index)}
+                    />
+                    <Button
+                      variant='destructive'
+                      size='sm'
+                      onClick={() => {
+                        setApp({
+                          ...app,
+                          [type]: list.filter((l, i) => i !== index),
+                        } as API.GetApplicationResponse);
+                      }}
+                    >
+                      {t('delete')}
+                    </Button>
+                  </div>
+                );
+              })}
+              <Button
+                className='w-full'
+                variant='outline'
+                onClick={() => {
+                  setApp({
+                    ...app,
+                    [type]: [
+                      ...list,
+                      {
+                        platform: type,
+                      },
+                    ],
+                  } as API.GetApplicationResponse);
+                }}
+              >
+                {t('add')}
+              </Button>
+            </TabsContent>
+          );
+        })}
+      </Tabs>
+    </>
+  );
+}

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

@@ -0,0 +1,86 @@
+'use client';
+
+import { getTelegramConfig, updateTelegramConfig } from '@/services/admin/system';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { Label } from '@shadcn/ui/label';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { Switch } from '@shadcn/ui/switch';
+import { Table, TableBody, TableCell, TableRow } from '@shadcn/ui/table';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+
+export default function Telegram() {
+  const t = useTranslations('system.telegram');
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getTelegramConfig'],
+    queryFn: async () => {
+      const { data } = await getTelegramConfig();
+
+      return data.data;
+    },
+  });
+
+  async function updateConfig(key: string, value: unknown) {
+    if (data?.[key] === value) return;
+    try {
+      await updateTelegramConfig({
+        ...data,
+        [key]: value,
+      } as API.GetTelegramConfigResponse);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <Label>{t('botToken')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('botTokenDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholderBotToken')}
+              value={data?.telegram_bot_token}
+              onValueBlur={(value) => updateConfig('telegram_bot_token', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('enableBotNotifications')}</Label>
+            <p className='text-muted-foreground text-xs'>
+              {t('enableBotNotificationsDescription')}
+            </p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.telegram_notify}
+              onCheckedChange={(checked) => {
+                updateConfig('telegram_notify', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('groupURL')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('groupURLDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholderGroupURL')}
+              value={data?.telegram_group_url}
+              onValueBlur={(value) => updateConfig('telegram_group_url', value)}
+            />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}

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

@@ -0,0 +1,51 @@
+'use client';
+
+import { getTosConfig, updateTosConfig } from '@/services/admin/system';
+import { MarkdownEditor } from '@repo/ui/editor';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useTheme } from 'next-themes';
+
+export default function Tos() {
+  const t = useTranslations('system.tos');
+  const { resolvedTheme } = useTheme();
+  const { data, refetch, isFetched } = useQuery({
+    queryKey: ['getTosConfig'],
+    queryFn: async () => {
+      const { data } = await getTosConfig();
+
+      return data.data;
+    },
+  });
+
+  async function updateConfig(key: string, value: unknown) {
+    if (data?.[key] === value) return;
+    try {
+      await updateTosConfig({
+        ...data,
+        [key]: value,
+      } as API.GetTosConfigResponse);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  return (
+    isFetched && (
+      <div className='h-[calc(100dvh-132px-env(safe-area-inset-top))] overflow-hidden'>
+        <MarkdownEditor
+          title={t('title')}
+          value={data?.tos_content}
+          onBlur={(value) => {
+            if (data?.tos_content !== value) {
+              updateConfig('tos_content', value);
+            }
+          }}
+        />
+      </div>
+    )
+  );
+}

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

@@ -0,0 +1,115 @@
+'use client';
+
+import { getVerifyConfig, updateVerifyConfig } from '@/services/admin/system';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { Label } from '@shadcn/ui/label';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { Switch } from '@shadcn/ui/switch';
+import { Table, TableBody, TableCell, TableRow } from '@shadcn/ui/table';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+
+export default function Verify() {
+  const t = useTranslations('system.verify');
+
+  const { data, refetch } = useQuery({
+    queryKey: ['getVerifyConfig'],
+    queryFn: async () => {
+      const { data } = await getVerifyConfig();
+      return data.data;
+    },
+  });
+
+  async function updateConfig(key: string, value: unknown) {
+    if (data?.[key] === value) return;
+    try {
+      await updateVerifyConfig({
+        ...data,
+        [key]: value,
+      } as API.GetVerifyConfigResponse);
+      toast.success(t('saveSuccess'));
+      refetch();
+    } catch (error) {
+      /* empty */
+    }
+  }
+
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <Label>{t('turnstileSiteKey')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('turnstileSiteKeyDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              defaultValue={data?.turnstile_site_key}
+              onValueBlur={(value) => updateConfig('turnstile_site_key', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('turnstileSecret')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('turnstileSecretDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <EnhancedInput
+              placeholder={t('inputPlaceholder')}
+              defaultValue={data?.turnstile_secret}
+              onValueBlur={(value) => updateConfig('turnstile_secret', value)}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('registrationVerificationCode')}</Label>
+            <p className='text-muted-foreground text-xs'>
+              {t('registrationVerificationCodeDescription')}
+            </p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.enable_register_verify}
+              onCheckedChange={(checked) => {
+                updateConfig('enable_register_verify', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('loginVerificationCode')}</Label>
+            <p className='text-muted-foreground text-xs'>{t('loginVerificationCodeDescription')}</p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.enable_login_verify}
+              onCheckedChange={(checked) => {
+                updateConfig('enable_login_verify', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <Label>{t('resetPasswordVerificationCode')}</Label>
+            <p className='text-muted-foreground text-xs'>
+              {t('resetPasswordVerificationCodeDescription')}
+            </p>
+          </TableCell>
+          <TableCell className='text-right'>
+            <Switch
+              checked={data?.enable_reset_password_verify}
+              onCheckedChange={(checked) => {
+                updateConfig('enable_reset_password_verify', checked);
+              }}
+            />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}

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

@@ -0,0 +1,308 @@
+'use client';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import {
+  createTicketFollow,
+  getTicket,
+  getTicketList,
+  updateTicketStatus,
+} from '@/services/admin/ticket';
+import { Icon } from '@iconify/react';
+import { ConfirmButton } from '@repo/ui/confirm-button';
+import { formatDate } from '@repo/ui/utils';
+import { Button } from '@shadcn/ui/button';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@shadcn/ui/drawer';
+import { Input } from '@shadcn/ui/input';
+import { Label } from '@shadcn/ui/label';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { cn } from '@shadcn/ui/lib/utils';
+import { ScrollArea } from '@shadcn/ui/scroll-area';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import NextImage from 'next/legacy/image';
+import { useEffect, useRef, useState } from 'react';
+import { UserDetail } from '../user/user-detail';
+
+export default function Page() {
+  const t = useTranslations('ticket');
+
+  const [ticketId, setTicketId] = useState<any>(null);
+
+  const [message, setMessage] = useState('');
+
+  const { data: ticket, refetch: refetchTicket } = useQuery({
+    queryKey: ['getTicket', ticketId],
+    queryFn: async () => {
+      const { data } = await getTicket({
+        id: ticketId,
+      });
+      return data.data as API.Ticket;
+    },
+    enabled: !!ticketId,
+    refetchInterval: 5000,
+  });
+
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    setTimeout(() => {
+      if (scrollRef.current) {
+        scrollRef.current.children[1]?.scrollTo({
+          top: scrollRef.current.children[1].scrollHeight,
+          behavior: 'smooth',
+        });
+      }
+    }, 66);
+  }, [ticket?.follow?.length]);
+
+  const ref = useRef<ProTableActions>();
+  return (
+    <>
+      <ProTable<API.Ticket, { status: number }>
+        action={ref}
+        header={{
+          title: t('ticketList'),
+        }}
+        columns={[
+          {
+            accessorKey: 'title',
+            header: t('title'),
+          },
+          {
+            accessorKey: 'user_id',
+            header: t('user'),
+            cell: ({ row }) => <UserDetail id={row.original.user_id} />,
+          },
+          {
+            accessorKey: 'status',
+            header: t('status.0'),
+            cell: ({ row }) => (
+              <span
+                className={cn(
+                  'flex items-center gap-2 before:block before:size-1.5 before:animate-pulse before:rounded-full before:ring-2 before:ring-opacity-50',
+                  {
+                    'before:bg-rose-500 before:ring-rose-500': row.original.status === 1,
+                    'before:bg-yellow-500 before:ring-yellow-500': row.original.status === 2,
+                    'before:bg-green-500 before:ring-green-500': row.original.status === 3,
+                    'before:bg-zinc-500 before:ring-zinc-500': row.original.status === 4,
+                  },
+                )}
+              >
+                {t(`status.${row.original.status}`)}
+              </span>
+            ),
+          },
+          {
+            accessorKey: 'updated_at',
+            header: t('updatedAt'),
+            cell: ({ row }) => formatDate(row.getValue('updated_at')),
+          },
+        ]}
+        params={[
+          {
+            key: 'status',
+            placeholder: t('status.0'),
+            options: [
+              {
+                label: t('close'),
+                value: '4',
+              },
+            ],
+          },
+        ]}
+        request={async (pagination, filters) => {
+          const { data } = await getTicketList({
+            ...pagination,
+            ...filters,
+          });
+          return {
+            list: data.data?.list || [],
+            total: data.data?.total || 0,
+          };
+        }}
+        actions={{
+          render(row) {
+            if (row.status !== 4) {
+              return [
+                <Button key='reply' size='sm' onClick={() => setTicketId(row.id)}>
+                  {t('reply')}
+                </Button>,
+                <ConfirmButton
+                  key='colse'
+                  trigger={<Button variant='destructive'>{t('close')}</Button>}
+                  title={t('confirmClose')}
+                  description={t('closeWarning')}
+                  onConfirm={async () => {
+                    await updateTicketStatus({
+                      id: row.id,
+                      status: 4,
+                    });
+                    toast.success(t('closeSuccess'));
+                    ref.current?.refresh();
+                  }}
+                  cancelText={t('cancel')}
+                  confirmText={t('confirm')}
+                />,
+              ];
+            }
+            return [
+              <Button key='check' size='sm' onClick={() => setTicketId(row.id)}>
+                {t('check')}
+              </Button>,
+            ];
+          },
+        }}
+      />
+
+      <Drawer
+        open={!!ticketId}
+        onOpenChange={(open) => {
+          if (!open) setTicketId(null);
+        }}
+      >
+        <DrawerContent className='container mx-auto h-screen'>
+          <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-screen flex-col gap-4 p-4'>
+              {ticket?.follow?.map((item) => (
+                <div
+                  key={item.id}
+                  className={cn('flex items-center gap-4', {
+                    'flex-row-reverse': item.from === 'System',
+                  })}
+                >
+                  <div
+                    className={cn('flex flex-col gap-1', {
+                      'items-end': item.from === 'System',
+                    })}
+                  >
+                    <p className='text-muted-foreground text-sm'>{formatDate(item.created_at)}</p>
+                    <p
+                      className={cn('bg-accent w-fit rounded-lg p-2 font-medium', {
+                        'bg-primary text-primary-foreground': item.from === 'System',
+                      })}
+                    >
+                      {item.type === 1 && item.content}
+                      {item.type === 2 && (
+                        <NextImage
+                          src={item.content!}
+                          width={300}
+                          height={300}
+                          className='!size-auto object-cover'
+                          alt='image'
+                        />
+                      )}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+          {ticket?.status !== 4 && (
+            <DrawerFooter>
+              <form
+                className='flex w-full flex-row items-center gap-2'
+                onSubmit={async (event) => {
+                  event.preventDefault();
+                  if (message) {
+                    await createTicketFollow({
+                      ticket_id: ticketId,
+                      from: 'System',
+                      type: 1,
+                      content: message,
+                    });
+                    refetchTicket();
+                    setMessage('');
+                  }
+                }}
+              >
+                <Button type='button' variant='outline' className='p-0'>
+                  <Label htmlFor='picture' className='p-2'>
+                    <Icon icon='uil:image-upload' className='text-2xl' />
+                  </Label>
+                  <Input
+                    id='picture'
+                    type='file'
+                    className='hidden'
+                    accept='image/*'
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      if (file && file.type.startsWith('image/')) {
+                        const reader = new FileReader();
+                        reader.readAsDataURL(file);
+                        reader.onload = (e) => {
+                          const img = new Image();
+                          img.src = e.target?.result as string;
+                          img.onload = () => {
+                            const canvas = document.createElement('canvas');
+                            const ctx = canvas.getContext('2d');
+
+                            const maxWidth = 300;
+                            const maxHeight = 300;
+                            let width = img.width;
+                            let height = img.height;
+
+                            if (width > height) {
+                              if (width > maxWidth) {
+                                height = Math.round((maxWidth / width) * height);
+                                width = maxWidth;
+                              }
+                            } else {
+                              if (height > maxHeight) {
+                                width = Math.round((maxHeight / height) * width);
+                                height = maxHeight;
+                              }
+                            }
+
+                            canvas.width = width;
+                            canvas.height = height;
+                            ctx?.drawImage(img, 0, 0, width, height);
+
+                            canvas.toBlob(
+                              (blob) => {
+                                const reader = new FileReader();
+                                reader.readAsDataURL(blob!);
+                                reader.onloadend = async () => {
+                                  await createTicketFollow({
+                                    ticket_id: ticketId,
+                                    from: 'System',
+                                    type: 2,
+                                    content: reader.result as string,
+                                  });
+                                  refetchTicket();
+                                };
+                              },
+                              'image/webp',
+                              0.8,
+                            );
+                          };
+                        };
+                      }
+                    }}
+                  />
+                </Button>
+                <Input
+                  placeholder={t('inputPlaceholder')}
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                />
+                <Button type='submit' disabled={!message}>
+                  <Icon icon='uil:navigator' />
+                </Button>
+              </form>
+            </DrawerFooter>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}

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

@@ -0,0 +1,146 @@
+'use client';
+
+import { ProTable, ProTableActions } from '@/components/pro-table';
+import { createUser, deleteUser, getUserList, updateUser } from '@/services/admin/user';
+import { ConfirmButton } from '@repo/ui/confirm-button';
+import { formatDate, unitConversion } from '@repo/ui/utils';
+import { Button } from '@shadcn/ui/button';
+import { toast } from '@shadcn/ui/lib/sonner';
+import { Switch } from '@shadcn/ui/switch';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import { UserDetail } from './user-detail';
+import UserForm from './user-form';
+
+export default function Page() {
+  const t = useTranslations('user');
+  const [loading, setLoading] = useState(false);
+  const ref = useRef<ProTableActions>();
+
+  return (
+    <ProTable<API.User, any>
+      action={ref}
+      header={{
+        title: t('userList'),
+        toolbar: (
+          <UserForm<API.CreateUserRequest>
+            key='create'
+            trigger={t('create')}
+            title={t('createUser')}
+            loading={loading}
+            onSubmit={async (values) => {
+              setLoading(true);
+              try {
+                await createUser(values);
+                toast.success(t('createSuccess'));
+                ref.current?.refresh();
+                setLoading(false);
+
+                return true;
+              } catch (error) {
+                setLoading(false);
+
+                return false;
+              }
+            }}
+          />
+        ),
+      }}
+      columns={[
+        {
+          accessorKey: 'enable',
+          header: t('enable'),
+          cell: ({ row }) => {
+            return (
+              <Switch
+                defaultChecked={row.getValue('enable')}
+                onCheckedChange={async (checked) => {
+                  await updateUser({
+                    ...row.original,
+                    enable: checked,
+                  } as unknown as API.UpdateUserRequest);
+                  toast.success(t('updateSuccess'));
+                  ref.current?.refresh();
+                }}
+              />
+            );
+          },
+        },
+        {
+          accessorKey: 'id',
+          header: 'ID',
+        },
+        {
+          accessorKey: 'email',
+          header: t('userName'),
+        },
+        {
+          accessorKey: 'balance',
+          header: t('balance'),
+          cell: ({ row }) => unitConversion('centsToDollars', row.getValue('balance')),
+        },
+        {
+          accessorKey: 'referer_id',
+          header: t('referer'),
+          cell: ({ row }) => <UserDetail id={row.original.referer_id} />,
+        },
+        {
+          accessorKey: 'created_at',
+          header: t('createdAt'),
+          cell: ({ row }) => formatDate(row.getValue('created_at')),
+        },
+      ]}
+      request={async (pagination) => {
+        const { data } = await getUserList(pagination);
+        return {
+          list: data.data?.list || [],
+          total: data.data?.total || 0,
+        };
+      }}
+      actions={{
+        render: (row) => {
+          return [
+            <UserForm<API.UpdateUserRequest>
+              key='edit'
+              trigger={t('edit')}
+              title={t('editUser')}
+              loading={loading}
+              initialValues={row as unknown as API.UpdateUserRequest}
+              onSubmit={async (values) => {
+                setLoading(true);
+                try {
+                  await updateUser({
+                    ...row,
+                    ...values,
+                  });
+                  toast.success(t('updateSuccess'));
+                  ref.current?.refresh();
+                  setLoading(false);
+
+                  return true;
+                } catch (error) {
+                  setLoading(false);
+
+                  return false;
+                }
+              }}
+            />,
+            <ConfirmButton
+              key='edit'
+              trigger={<Button variant='destructive'>{t('delete')}</Button>}
+              title={t('confirmDelete')}
+              description={t('deleteDescription')}
+              onConfirm={async () => {
+                await deleteUser({ id: row.id });
+                toast.success(t('deleteSuccess'));
+                ref.current?.refresh();
+              }}
+              cancelText={t('cancel')}
+              confirmText={t('confirm')}
+            />,
+          ];
+        },
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,57 @@
+'use client';
+
+import { getUserDetail } from '@/services/admin/user';
+import { formatDate, unitConversion } from '@repo/ui/utils';
+import { Button } from '@shadcn/ui/button';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@shadcn/ui/hover-card';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+export function UserDetail({ id }: { id: number }) {
+  const t = useTranslations('user');
+  const [shouldFetch, setShouldFetch] = useState(false);
+
+  const { data } = useQuery({
+    enabled: id !== 0 && shouldFetch,
+    queryKey: ['getUserDetail', id],
+    queryFn: async () => {
+      const { data } = await getUserDetail({ id });
+      return data.data;
+    },
+  });
+
+  if (!id) return '--';
+
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild onMouseEnter={() => setShouldFetch(true)}>
+        <Button variant='link' className='p-0'>
+          @{data?.email?.split('@')[0] || 'Loading...'}
+        </Button>
+      </HoverCardTrigger>
+      <HoverCardContent>
+        <div className='grid gap-3'>
+          <ul className='grid gap-3'>
+            <li className='flex items-center justify-between font-semibold'>
+              <span className='text-muted-foreground'>ID</span>
+              <span>{data?.id}</span>
+            </li>
+            <li className='flex items-center justify-between font-semibold'>
+              <span className='text-muted-foreground'>{t('email')}</span>
+              <span>{data?.email}</span>
+            </li>
+            <li className='flex items-center justify-between font-semibold'>
+              <span className='text-muted-foreground'>{t('balance')}</span>
+              <span>{unitConversion('centsToDollars', data?.balance)}</span>
+            </li>
+            <li className='flex items-center justify-between'>
+              <span className='text-muted-foreground'>{t('createdAt')}</span>
+              <span>{data?.created_at && formatDate(data?.created_at)}</span>
+            </li>
+          </ul>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  );
+}

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

@@ -0,0 +1,224 @@
+'use client';
+
+import { Icon } from '@iconify/react';
+import { EnhancedInput } from '@repo/ui/enhanced-input';
+import { unitConversion } from '@repo/ui/utils';
+import { Button } from '@shadcn/ui/button';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@shadcn/ui/form';
+import { useForm } from '@shadcn/ui/lib/react-hook-form';
+import { z, zodResolver } from '@shadcn/ui/lib/zod';
+import { ScrollArea } from '@shadcn/ui/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@shadcn/ui/sheet';
+import { Switch } from '@shadcn/ui/switch';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
+interface UserFormProps<T> {
+  onSubmit: (data: T) => Promise<boolean> | boolean;
+  initialValues?: T;
+  loading?: boolean;
+  trigger: string;
+  title: string;
+  update?: boolean;
+}
+
+export default function UserForm<T extends Record<string, any>>({
+  onSubmit,
+  initialValues,
+  loading,
+  trigger,
+  title,
+}: UserFormProps<T>) {
+  const t = useTranslations('user');
+
+  const [open, setOpen] = useState(false);
+  const formSchema = z.object({
+    email: z.string().email(t('form.invalidEmailFormat')),
+    password: z.string().optional(),
+    referer_id: z.number().optional(),
+    refer_code: z.string().optional(),
+    is_admin: z.boolean().optional(),
+    balance: z.number().optional(),
+  });
+  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
+          size='sm'
+          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='email'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.userEmail')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('form.userEmailPlaceholder')}
+                        {...field}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='password'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.password')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('form.passwordPlaceholder')}
+                        {...field}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='referer_id'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.refererId')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('form.refererIdPlaceholder')}
+                        {...field}
+                        type='number'
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='refer_code'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.inviteCode')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        placeholder={t('form.inviteCodePlaceholder')}
+                        {...field}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='balance'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.balance')}</FormLabel>
+                    <FormControl>
+                      <EnhancedInput
+                        prefix='¥'
+                        placeholder={t('form.balancePlaceholder')}
+                        type='number'
+                        {...field}
+                        formatInput={(value) => unitConversion('centsToDollars', value)}
+                        formatOutput={(value) => unitConversion('dollarsToCents', value)}
+                        onValueChange={(value) => {
+                          form.setValue(field.name, value);
+                        }}
+                        min={0}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='is_admin'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.manager')}</FormLabel>
+                    <FormControl>
+                      <div className='pt-2'>
+                        <Switch checked={!!field.value} onCheckedChange={field.onChange} />
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
+        <SheetFooter className='flex-row justify-end gap-2 pt-3'>
+          <Button
+            variant='outline'
+            disabled={loading}
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            {t('form.cancel')}
+          </Button>
+          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
+            {loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}
+            {t('form.confirm')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/admin/app/layout.tsx

@@ -0,0 +1,77 @@
+import Providers from '@/components/providers';
+import { geistMono, geistSans } from '@/config/fonts';
+import { currentUser } from '@/services/admin/user';
+import { getGlobalConfig } from '@/services/common/common';
+import '@shadcn/ui/globals.css';
+import { Toaster } from '@shadcn/ui/sonner';
+import { Metadata } from 'next';
+import { NextIntlClientProvider } from 'next-intl';
+import { getLocale, getMessages } from 'next-intl/server';
+import { PublicEnvScript } from 'next-runtime-env';
+import { cookies } from 'next/headers';
+import NextTopLoader from 'nextjs-toploader';
+import React from 'react';
+
+export async function generateMetadata(): Promise<Metadata> {
+  const config = await getGlobalConfig({ skipErrorHandler: true }).then((res) => res.data.data!);
+  const site = config.site || {};
+  return {
+    title: {
+      default: `${site.site_name}`,
+      template: `%s | ${site.site_name}`,
+    },
+    description: site.site_desc,
+    icons: {
+      icon: site.site_logo
+        ? [
+            {
+              url: site.site_logo,
+              sizes: 'any',
+            },
+          ]
+        : [],
+    },
+  };
+}
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const locale = await getLocale();
+  const messages = await getMessages();
+
+  let config, user;
+
+  try {
+    config = await getGlobalConfig({ skipErrorHandler: true }).then((res) => res.data.data);
+  } catch (error) {
+    /* empty */
+  }
+
+  try {
+    user = await currentUser({
+      skipErrorHandler: true,
+      Authorization: (await cookies()).get('Authorization')?.value,
+    }).then((res) => res.data.data);
+  } catch (error) {
+    /* empty */
+  }
+
+  return (
+    <html suppressHydrationWarning lang={locale}>
+      <head>
+        <PublicEnvScript />
+      </head>
+      <body
+        suppressHydrationWarning
+        className={`${geistSans.variable} ${geistMono.variable} size-full min-h-[calc(100dvh-env(safe-area-inset-top))] antialiased`}
+      >
+        <NextIntlClientProvider messages={messages}>
+          <NextTopLoader showSpinner={false} />
+          <Providers common={{ ...config }} user={user}>
+            <Toaster richColors closeButton />
+            {children}
+          </Providers>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}