upd: add likeDo footer link

Dev

.env.example

@@ -2,6 +2,12 @@
 # App - Don't add "/" in the end of the url (same in production)
 # -----------------------------------------------------------------------------
 NEXT_PUBLIC_APP_URL=http://localhost:3000
+NEXT_PUBLIC_APP_NAME=WR.DO
+
+# -----------------------------------------------------------------------------
+# Database
+# -----------------------------------------------------------------------------
+DATABASE_URL='postgres://[user]:[password]@[hostname]:5432/[dbname]'
 
 # -----------------------------------------------------------------------------
 # Authentication (NextAuth.js 5.0.x)
@@ -17,24 +23,21 @@ LinuxDo_CLIENT_ID=
 LinuxDo_CLIENT_SECRET=
 
 # -----------------------------------------------------------------------------
-# Database, example: DATABASE_URL='postgres://[user]:[password]@[hostname]:5432/[dbname]'
+# Email api for send email (https://resend.com, https://www.brevo.com)
-# -----------------------------------------------------------------------------
-DATABASE_URL='postgres://[user]:[password]@[neon_hostname]/[dbname]?sslmode=require'
-
-# -----------------------------------------------------------------------------
-# Email api (https://resend.com) for login and send email
 # -----------------------------------------------------------------------------
 RESEND_API_KEY=
-RESEND_FROM_EMAIL="wrdo <support@wr.do>"
+BREVO_API_KEY=
+EMAIL_FROM=service@wr.do
+EMAIL_FROM_NAME=WRDO
 
-# Open Signup
+# Cloudflare R2 Storage custom domain
-NEXT_PUBLIC_OPEN_SIGNUP=1
+NEXT_PUBLIC_EMAIL_R2_DOMAIN=
-
-# Enable subdomain apply, default is false(0). If set to 1, will enable subdomain apply
-NEXT_PUBLIC_ENABLE_SUBDOMAIN_APPLY=1
 
 # Google Analytics
 NEXT_PUBLIC_GOOGLE_ID=
+# Umami Script
+NEXT_PUBLIC_UMAMI_SCRIPT=
+NEXT_PUBLIC_UMAMI_WEBSITE_ID=
 
 # ScreenShot API
 SCREENSHOTONE_BASE_URL=https://shot.wr.do
@@ -42,7 +45,9 @@ SCREENSHOTONE_BASE_URL=https://shot.wr.do
 # GitHub api token for getting gitHub stars count
 GITHUB_TOKEN=
 
-# Skip DB check and migration (only for docker), default is true. if false, will check and migrate database each time start docker compose.
+# Skip DB check and migration. if false, will check and migrate database each time start docker compose.
-SKIP_DB_CHECK=true
+SKIP_DB_CHECK=false
-SKIP_DB_MIGRATION=true
+SKIP_DB_MIGRATION=false
 
+# Support email
+NEXT_PUBLIC_SUPPORT_EMAIL=your_support_email@gmail.com

.eslintrc.json

@@ -15,7 +15,9 @@
     "tailwindcss/enforces-shorthand": "off",
     "react/no-unescaped-entities": "off",
     "@next/next/no-img-element": "off",
-    "@typescript-eslint/no-unused-vars": "off"
+    "@typescript-eslint/no-unused-vars": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "tailwindcss/migration-from-tailwind-2": "off"
   },
   "settings": {
     "tailwindcss": {

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,81 @@
+---
+name: Bug Report
+about: 报告软件缺陷或问题
+title: '[BUG] '
+labels: 'bug, needs-triage'
+assignees: ''
+---
+
+## 问题描述 / Bug Description
+<!-- 请简洁明了地描述遇到的问题 -->
+
+## 复现步骤 / Steps to Reproduce
+<!-- 请详细描述如何重现这个问题 -->
+1. 前往 '...'
+2. 点击 '...'
+3. 滚动到 '...'
+4. 看到错误 '...'
+
+## 期望行为 / Expected Behavior
+<!-- 描述你期望发生什么 -->
+
+## 实际行为 / Actual Behavior
+<!-- 描述实际发生了什么 -->
+
+## 截图/视频 / Screenshots/Videos
+<!-- 如果适用，请添加截图或视频来帮助解释问题 -->
+
+## 环境信息 / Environment
+**桌面环境 / Desktop:**
+- 操作系统 / OS: [例如 Windows 11, macOS 14.0, Ubuntu 22.04]
+- 浏览器 / Browser: [例如 Chrome 120, Firefox 119, Safari 17]
+- 版本 / Version: [例如 v1.2.3]
+
+**移动设备 / Mobile:**
+- 设备 / Device: [例如 iPhone 15, Samsung Galaxy S24]
+- 操作系统 / OS: [例如 iOS 17.1, Android 14]
+- 浏览器 / Browser: [例如 Safari, Chrome Mobile]
+- 版本 / Version: [例如 v1.2.3]
+
+## 控制台日志 / Console Logs
+<!-- 如果有相关的错误日志，请贴在这里 -->
+```
+请粘贴相关的错误信息或日志
+```
+
+## 网络信息 / Network Info
+<!-- 如果问题可能与网络相关 -->
+- 网络类型 / Network Type: [例如 WiFi, 4G, 5G, 有线]
+- 网络状况 / Network Status: [例如 正常, 缓慢, 不稳定]
+
+## 频率 / Frequency
+请选择问题发生的频率：
+- [ ] 总是发生 / Always
+- [ ] 经常发生 / Often  
+- [ ] 偶尔发生 / Sometimes
+- [ ] 很少发生 / Rarely
+- [ ] 只发生过一次 / Once
+
+## 严重程度 / Severity
+请选择问题的严重程度：
+- [ ] 严重 / Critical - 系统崩溃或数据丢失
+- [ ] 高 / High - 核心功能无法使用
+- [ ] 中 / Medium - 部分功能受影响
+- [ ] 低 / Low - 界面问题或小的功能缺陷
+
+## 变通方法 / Workaround
+<!-- 如果你找到了临时解决方案，请描述 -->
+
+## 附加信息 / Additional Context
+<!-- 添加任何其他有助于理解问题的信息 -->
+
+## 相关链接 / Related Links
+<!-- 如果有相关的Issue、PR或讨论，请链接 -->
+
+---
+
+**提交前检查清单 / Pre-submission Checklist:**
+- [ ] 我已经搜索了现有的issues，确认这不是重复报告
+- [ ] 我已经尝试了最新版本，问题依然存在
+- [ ] 我已经提供了足够的信息来重现问题
+- [ ] 我已经检查了文档和FAQ

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,45 @@
+---
+name: New Features
+about: 提交新功能需求
+title: '[FEATURE] '
+labels: 'enhancement, feature-request'
+assignees: ''
+---
+
+## 功能描述 / Feature Description
+<!-- 请简洁明了地描述你希望添加的新功能 -->
+
+## 使用场景 / Use Case
+<!-- 描述在什么情况下需要这个功能，解决什么问题 -->
+
+## 期望行为 / Expected Behavior
+<!-- 详细描述你期望这个功能如何工作 -->
+
+## 替代方案 / Alternatives Considered
+<!-- 你是否考虑过其他解决方案？如果有，请描述 -->
+
+## 附加信息 / Additional Context
+<!-- 提供任何其他有助于理解这个功能需求的信息 -->
+
+## 优先级 / Priority
+请选择一个优先级：
+- [ ] 低 (Low) - 有了更好，没有也行
+- [ ] 中 (Medium) - 比较重要，希望能实现
+- [ ] 高 (High) - 非常重要，急需这个功能
+
+## 愿意贡献 / Willing to Contribute
+- [ ] 我愿意提交PR来实现这个功能
+- [ ] 我可以帮助测试这个功能
+- [ ] 我只是提出建议
+
+## 环境信息 / Environment
+- 操作系统 / OS: 
+- 浏览器 / Browser: 
+- 版本 / Version: 
+
+---
+
+**注意事项 / Notes:**
+- 提交前请先搜索现有的issue，避免重复提交
+- 请尽量提供详细的信息，这有助于我们更好地理解和实现你的需求
+- 如果可能，请提供mockup、截图或参考链接

.github/workflows/docker-build-push.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - main
-      - fix/docker
+      - dev
     tags:
       - "v*.*.*"
   pull_request:

.github/workflows/sync.yml

@@ -0,0 +1,124 @@
+name: 上游同步 | Upstream Sync
+
+permissions:
+  contents: write
+  issues: write
+  actions: write
+  pull-requests: write
+
+on:
+  # 默认关闭自动同步，仅支持手动触发
+  # schedule:
+  #   - cron: '0 */6 * * *' # every 6 hours
+  workflow_dispatch:
+    inputs:
+      add_comment:
+        description: '是否在同步后添加评论 | Add comment after sync'
+        required: false
+        default: true
+        type: boolean
+
+jobs:
+  sync_latest_from_upstream:
+    name: 同步上游最新提交 | Sync latest commits from upstream repo
+    runs-on: ubuntu-latest
+    if: ${{ github.event.repository.fork }}
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: 清理失败通知 | Clean issue notice
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'close-issues'
+          labels: '🚨 Sync Fail'
+
+      - name: 同步上游变更 | Sync upstream changes
+        id: sync
+        uses: aormsby/Fork-Sync-With-Upstream-action@v3.4
+        with:
+          upstream_sync_repo: oiov/wr.do
+          upstream_sync_branch: main
+          target_sync_branch: main
+          target_repo_token: ${{ secrets.GITHUB_TOKEN }} # automatically generated, no need to set
+          test_mode: false
+
+      - name: 获取最新提交信息 | Get latest commit info
+        if: success()
+        id: commit_info
+        run: |
+          # 获取最新的 commit SHA 和信息
+          LATEST_COMMIT=$(git rev-parse HEAD)
+          COMMIT_MESSAGE=$(git log -1 --pretty=format:"%s")
+          COMMIT_AUTHOR=$(git log -1 --pretty=format:"%an")
+          SYNC_TIME=$(date -u +"%Y-%m-%d %H:%M:%S UTC")
+
+          echo "latest_commit=$LATEST_COMMIT" >> $GITHUB_OUTPUT
+          echo "commit_message=$COMMIT_MESSAGE" >> $GITHUB_OUTPUT
+          echo "commit_author=$COMMIT_AUTHOR" >> $GITHUB_OUTPUT
+          echo "sync_time=$SYNC_TIME" >> $GITHUB_OUTPUT
+
+      - name: 添加同步评论 | Add sync comment to commit
+        if: success() && github.event.inputs.add_comment == 'true'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const commitSha = '${{ steps.commit_info.outputs.latest_commit }}';
+            const syncTime = '${{ steps.commit_info.outputs.sync_time }}';
+            const commitMsg = '${{ steps.commit_info.outputs.commit_message }}';
+            const commitAuthor = '${{ steps.commit_info.outputs.commit_author }}';
+
+            const commentBody = `## 🔄 同步成功 | Sync Successful
+
+            **同步时间 | Sync Time:** ${syncTime}
+            **源仓库 | Source Repository:** [oiov/wr.do](https://github.com/oiov/wr.do)
+            **同步分支 | Sync Branch:** main → main
+            **最新提交 | Latest Commit:** ${commitMsg}
+            **提交作者 | Commit Author:** ${commitAuthor}
+
+            ---
+            *此评论由 GitHub Actions 自动生成 | This comment was automatically generated by GitHub Actions*`;
+
+            try {
+              await github.rest.repos.createCommitComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                commit_sha: commitSha,
+                body: commentBody
+              });
+              console.log('✅ 成功添加同步评论到 commit:', commitSha);
+            } catch (error) {
+              console.log('❌ 添加评论失败:', error.message);
+            }
+
+      - name: 同步检查 | Sync check
+        if: failure()
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'create-issue'
+          title: '🚨 同步失败 | Sync Fail'
+          labels: '🚨 Sync Fail'
+          body: |
+            ## 同步失败详情 | Sync Failure Details
+
+            **失败时间 | Failure Time:** ${{ steps.commit_info.outputs.sync_time || 'Unknown' }}
+            **源仓库 | Source Repository:** [oiov/wr.do](https://github.com/oiov/wr.do)
+            **目标分支 | Target Branch:** main
+            **工作流运行 | Workflow Run:** [${{ github.run_id }}](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})
+
+            ### 可能的原因 | Possible Causes:
+            - 上游仓库的 workflow 文件发生变更
+            - 存在合并冲突
+            - 网络连接问题
+            - 权限不足
+
+            ### 解决方案 | Solutions:
+            1. 手动执行 Sync Fork 操作
+            2. 检查是否存在合并冲突
+            3. 重新运行此工作流
+
+            ---
+            Due to a change in the workflow file of the [oiov/wr.do](https://github.com/oiov/wr.do) upstream repository, GitHub has automatically suspended the scheduled automatic update. You need to manually sync your fork.
+
+            由于 [oiov/wr.do](https://github.com/oiov/wr.do) 上游仓库的 workflow 文件变更，导致 GitHub 自动暂停了本次自动更新，你需要手动 Sync Fork 一次。
+

.gitignore

@@ -40,4 +40,6 @@ next-env.d.ts
 /.react-email/
 
 .vscode
-.contentlayer
+.contentlayer
+
+public/sw.js.map

Dockerfile

@@ -11,7 +11,7 @@ RUN npm install -g pnpm
 
 COPY . .
 
-RUN pnpm config set registry https://registry.npmmirror.com
+# RUN pnpm config set registry https://registry.npmmirror.com
 
 RUN pnpm i --frozen-lockfile
 

README-en.md

@@ -0,0 +1,199 @@
+<div align="center">
+  <img src="https://wr.do/_static/images/x-preview.png" alt="WR.DO" >
+  <h1>WR.DO</h1>
+  <p>All-in-one domain service platform with integrated short link services, temporary email, subdomain management, file storage, and open API</p>
+  <p><a href="https://wr.do">Official Site</a><a href="https://wr.do/docs/developer">Docs</a> · <a href="https://wr.do/feedback">Feedback</a> · English | <a href="/README.md">简体中文</a></p>
+  <img alt="Vercel" src="https://img.shields.io/badge/vercel-online-55b467?labelColor=black&logo=vercel&style=flat-square">
+  <img alt="Release" src="https://img.shields.io/github/actions/workflow/status/oiov/wr.do/docker-build-push.yml?label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square">
+  <img alt="Release" src="https://img.shields.io/github/release-date/oiov/wr.do?labelColor=black&style=flat-square">
+  <img alt="GitHub Release" src="https://img.shields.io/github/v/release/oiov/wr.do?style=flat-square&label=latest"><br>
+  <img src="https://img.shields.io/github/contributors/oiov/wr.do?color=c4f042&labelColor=black&style=flat-square" alt="contributors"/>
+  <img src="https://img.shields.io/github/stars/oiov/wr.do.svg?logo=github&style=flat-square" alt="star"/>
+  <img alt="GitHub forks" src="https://img.shields.io/github/forks/oiov/wr.do?style=flat-square">
+  <img alt="GitHub Issues or Pull Requests" src="https://img.shields.io/github/issues/oiov/wr.do?style=flat-square"> <br>
+  <img alt="GitHub Actions Workflow Status" src="https://img.shields.io/github/actions/workflow/status/oiov/wr.do/docker-build-push.yml?style=flat-square">
+	<img src="https://img.shields.io/github/license/oiov/wr.do?style=flat-square" alt="MIT"/><br><br>
+  <img width="15" src="https://storage.wr.do/2025/11/20/561763627504_.pic.jpg" /> 免费体验 Sora AI 视频生成 👉 <a href="https://sora.hk/i/5KY5N1FL">点击注册</a> 
+</div>
+
+## Screenshots
+
+<table>
+  <tr>
+    <td><img src="https://wr.do/_static/images/light-preview.png" /></td>
+    <td><img src="https://wr.do/_static/images/example_02.png" /></td>
+  </tr>
+  <tr>
+    <td><img src="https://wr.do/_static/images/example_01.png" /></td>
+    <td><img src="https://wr.do/_static/images/realtime-globe.png" /></td>
+  </tr>
+  <tr>
+    <td><img src="https://wr.do/_static/images/example_03.png" /></td>
+    <td><img src="https://wr.do/_static/images/domains.png" /></td>
+  </tr>
+</table>
+
+## Features
+
+- 🔗 **Short Link Service**:
+  - Custom short links
+  - Generate custom QR codes
+  - Password-protected links
+  - Expiration time control
+  - Access analytics (real-time logs, maps, and multi-dimensional data analysis)
+  - API integration for link creation
+
+- 📮 **Email Service**:
+  - Create custom prefix emails
+  - Filter unread email lists
+  - Unlimited mailbox creation
+  - Receive unlimited emails (powered by Cloudflare Email Worker)
+  - Send emails (powered by Resend)
+  - Support catch-all emails
+  - Support push to telegram groups
+  - API endpoints for mailbox creation
+  - API endpoints for inbox retrieval
+
+- 🌐 **Subdomain Management Service**:
+  - Manage DNS records across multiple Cloudflare accounts and domains
+  - Create various DNS record types (CNAME, A, TXT, etc.)
+  - Support enabling application mode (user submission, admin approval)
+  - Support email notification of administrator and user domain application status
+
+- 💳 **Cloud Storage Service**
+  - Connects to multiple channels (S3 API) cloud storage platforms (Cloudflare R2, AWS S3)
+  - Supports single-channel multi-bucket configuration
+  - Dynamic configuration (user quota settings) for file upload size limits
+  - Supports drag-and-drop, batch, and chunked file uploads
+  - Supports batch file deletion
+  - Quickly generates short links and QR codes for files
+  - Supports online preview of certain file types
+  - Supports file uploads via API calls
+
+- 📡 **Open API Module**:
+  - Website metadata extraction API
+  - Website screenshot capture API
+  - Website QR code generation API
+  - Convert websites to Markdown/Text format
+  - Comprehensive API call logging and statistics
+  - User API key generation for third-party integrations
+  
+- 🔒 **Administrator Module**:
+  - Multi-dimensional dashboard with website analytics
+  - Dynamic service configuration (toggle short links, email, subdomain management)
+  - User management (permissions, quotas, account control)
+  - Dynamically configure login methods (Google, GitHub, Magic Link, Credentials, LinuxDO)
+  - Centralized short link administration
+  - Centralized email management
+  - Centralized subdomain administration
+
+## Quick Start
+
+See step by step installation tutorial at [Quick Start for Developer](https://wr.do/docs/developer/quick-start).
+
+## Self-hosted
+
+### Deploy with Vercel
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/oiov/wr.do.git&project-name=wrdo)
+
+Remember to fill in the necessary environment variables.
+
+### Deploy with Docker Compose
+
+Create a new folder and copy the [`docker-compose.yml`](https://github.com/oiov/wr.do/blob/main/docker-compose.yml)、[`.env`](https://github.com/oiov/wr.do/blob/main/.env.example) file to the folder.
+
+```yml
+- wrdo
+  | - docker-compose.yml
+  | - .env
+```
+
+Fill in the environment variables in the `.env` file, then: 
+
+```bash
+docker compose up -d
+```
+
+## Local development
+
+```bash
+git clone https://github.com/oiov/wr.do
+cd wr.do
+pnpm install
+```
+
+copy `.env.example` to `.env` and fill in the necessary environment variables.
+
+#### Init database
+
+```bash
+pnpm postinstall
+pnpm db:push
+```
+
+```bash
+# run on localhost:3000
+pnpm dev
+```
+
+- Default admin account：`admin@admin.com`
+- Default admin password：`123456`
+
+#### Setup Admin Panel
+
+> After v1.0.2, this setup guide is not needed anymore
+
+Follow https://localhost:3000/setup
+
+
+## Environment Variables
+
+Via [Installation For Developer](https://wr.do/docs/developer).
+
+## Technology Stack
+
+- Next.js + React + TypeScript
+- Tailwind CSS for styling and design
+- Prisma ORM as the database toolkit
+- Cloudflare as the primary cloud infrastructure
+- Vercel as the recommended deployment platform
+- Resend as the primary email service
+
+## Fork Repository Sync
+
+This project is configured with a sync workflow for the upstream repository [oiov/wr.do](https://github.com/oiov/wr.do), featuring:
+
+- 🔄 **Manual Sync Trigger** - Auto-sync disabled by default, full control over sync timing
+- 💬 **Auto Comment After Sync** - Add detailed sync information to related commits
+- 🚨 **Smart Error Handling** - Auto-create detailed Issues when sync fails
+- 🧹 **Auto Cleanup Notifications** - Automatically close previous sync failure Issues
+
+See [How to Trigger Sync](https://wr.do/docs/developer/sync) for details.
+
+## Community Group
+
+- Discord: https://discord.gg/AHPQYuZu3m
+- 微信群：
+
+<img width="300" src="https://wr.do/group" />
+
+## Contributors
+
+<a href="https://github.com/oiov/wr.do/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=oiov/wr.do" />
+</a>
+
+## Star History
+
+<a href="https://star-history.com/#oiov/wr.do&Date">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=oiov/wr.do&type=Date&theme=dark" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=oiov/wr.do&type=Date" />
+   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=oiov/wr.do&type=Date" />
+ </picture>
+</a>
+
+## License
+
+[MIT](/LICENSE.md)

README-zh.md

@@ -1,131 +0,0 @@
-<div align="center">
-  <h1>WR.DO</h1>
-  <p><a href="https://wr.do/docs/developer">开发文档</a> · <a href="https://discord.gg/AHPQYuZu3m">Discord</a> · English | <a href="/README-zh.md">简体中文</a></p>
-  <p>生成短链接, 创建 DNS 记录, 管理临时邮箱</p>
-  <!-- <img src="https://wr.do/_static/images/light-preview.png"/> -->
-</div>
-
-## 简介
-
-WR.DO 是一个一站式网络工具平台，集成短链服务、临时邮箱、子域名管理和开放API接口。支持自定义链接、密码保护、访问统计；提供无限制临时邮箱收发；管理多域名DNS记录；内置网站截图、元数据提取等实用API。完整的管理后台，支持用户权限控制和服务配置。
-
-## 功能列表
-
-- 🔗 **短链服务**：
-  - 支持自定义短链
-  - 支持生成自定义二维码
-  - 支持密码保护链接
-  - 支持设置过期时间
-  - 支持访问统计（实时日志、地图等多维度数据分析）
-  - 支持调用 API 创建短链
-
-- 📮 **临时邮箱服务**：
-  - 支持创建自定义前缀邮箱
-  - 支持过滤未读邮件列表
-  - 可创建无限数量邮箱
-  - 支持接收无限制邮件 （依赖 Cloudflare Email Worker）
-  - 支持发送邮件（依赖 Resend）
-  - 支持调用 API 创建邮箱
-  - 支持调用 API 获取收件箱邮件
-  - 
-- 🌐 **子域名管理服务**：
-  - 支持管理多 Cloudflare 账户下的多个域名的 DNS 记录
-  - 支持创建多种 DNS 记录类型（CNAME、A、TXT 等）
-
-- 📡 **开放接口模块**：
-  - 获取网站元数据 API
-  - 获取网站截图 API
-  - 生成网站二维码 API
-  - 将网站转换为 Markdown、Text
-  - 支持所有类型 API 调用统计日志
-  - 支持生成用户 API Key，用于第三方调用开放接口
-  
-- 🔒 **管理员模块**：
-  - 多维度图表展示网站状态
-  - 域名服务配置（动态配置各项服务是否启用，包括短链、临时邮箱（收发邮件）、子域名管理）
-  - 用户列表管理（设置权限、分配使用额度、禁用用户等）
-  - 短链管理（管理所有用户创建的短链）
-  - 邮箱管理（管理所有用户创建的临时邮箱）
-  - 子域名管理（管理所有用户创建的子域名）
-
-## 截图预览
-
-<table>
-  <tr>
-    <td><img src="https://wr.do/_static/images/light-preview.png" /></td>
-    <td><img src="https://wr.do/_static/images/example_02.png" /></td>
-  </tr>
-  <tr>
-    <td><img src="https://wr.do/_static/images/example_01.png" /></td>
-    <td><img src="https://wr.do/_static/images/realtime-globe.png" /></td>
-  </tr>
-  <tr>
-    <td><img src="https://wr.do/_static/images/example_03.png" /></td>
-    <td><img src="https://wr.do/_static/images/domains.png" /></td>
-  </tr>
-</table>
-
-## 快速开始
-
-查看开发者[快速开始](https://wr.do/docs/developer/quick-start)详细文档。
-
-## 自部署教程
-
-### 使用 Vercel 部署
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/oiov/wr.do.git&project-name=wrdo&env=DATABASE_URL&env=AUTH_SECRET&env=RESEND_API_KEY&env=NEXT_PUBLIC_EMAIL_R2_DOMAIN&env=NEXT_PUBLIC_OPEN_SIGNUP&env=GITHUB_TOKEN)
-
-记得填写必要的环境变量。
-
-### 使用 Docker Compose 部署
-
-在服务器中创建一个文件夹，进入该文件夹并新建`docker-compose.yml`文件，填写必要的环境变量，然后执行：
-
-```bash
-docker compose up -d
-```
-
-## 本地开发
-
-将 `.env.example` 复制为 `.env` 并填写必要的环境变量。
-
-```bash
-git clone https://github.com/oiov/wr.do
-cd wr.do
-pnpm install
-
-# 在 localhost:3000 上运行
-pnpm dev
-```
-
-#### 初始化数据库
-
-```bash
-pnpm postinstall
-pnpm db:push
-```
-
-#### 管理员初始化
-
-Follow https://localhost:3000/setup
-
-## 社区群组
-
-- Discord: https://discord.gg/AHPQYuZu3m
-- 微信群：
-
-![](https://wr.do/s/group)
-
-## 许可证
-
-[MIT](/LICENSE.md)
-
-## Star History
-
-<a href="https://star-history.com/#oiov/wr.do&Date">
- <picture>
-   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=oiov/wr.do&type=Date&theme=dark" />
-   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=oiov/wr.do&type=Date" />
-   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=oiov/wr.do&type=Date" />
- </picture>
-</a>

README.md

@@ -1,53 +1,24 @@
 <div align="center">
+  <img src="https://wr.do/_static/images/x-preview.png" alt="WR.DO" >
   <h1>WR.DO</h1>
-  <p><a href="https://wr.do/docs/developer">Docs</a> · <a href="https://discord.gg/AHPQYuZu3m">Discord</a> · English | <a href="/README-zh.md">简体中文</a></p>
+  <p>一站式域名服务平台，集成短链服务、临时邮箱、子域名管理、文件存储和开放API接口。</p>
-  <p>Make Short Links, Manage DNS Records, Receive Emails.</p>
+  <p>
+    <a href="https://wr.do">官方云部署站点</a> · <a href="https://wr.do/docs/developer">部署文档</a> · <a href="https://wr.do/feedback">反馈讨论</a> · <a href="/README-en.md">English</a> | 简体中文
+  </p>
+  <img alt="Vercel" src="https://img.shields.io/badge/vercel-online-55b467?labelColor=black&logo=vercel&style=flat-square">
+  <img alt="Release" src="https://img.shields.io/github/actions/workflow/status/oiov/wr.do/docker-build-push.yml?label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square">
+  <img alt="Release" src="https://img.shields.io/github/release-date/oiov/wr.do?labelColor=black&style=flat-square">
+  <img alt="GitHub Release" src="https://img.shields.io/github/v/release/oiov/wr.do?style=flat-square&label=latest"><br>
+  <img src="https://img.shields.io/github/contributors/oiov/wr.do?color=c4f042&labelColor=black&style=flat-square" alt="contributors"/>
+  <img src="https://img.shields.io/github/stars/oiov/wr.do.svg?logo=github&style=flat-square" alt="star"/>
+  <img alt="GitHub forks" src="https://img.shields.io/github/forks/oiov/wr.do?style=flat-square">
+  <img alt="GitHub Issues or Pull Requests" src="https://img.shields.io/github/issues/oiov/wr.do?style=flat-square"> <br>
+  <img alt="GitHub Actions Workflow Status" src="https://img.shields.io/github/actions/workflow/status/oiov/wr.do/docker-build-push.yml?style=flat-square">
+	<img src="https://img.shields.io/github/license/oiov/wr.do?style=flat-square" alt="MIT"/><br><br>
+  <img width="15" src="https://storage.wr.do/2025/11/20/561763627504_.pic.jpg" /> 免费体验 Sora AI 视频生成 👉 <a href="https://sora.hk/i/5KY5N1FL">点击注册</a>
 </div>
 
-## Introduction
+## 截图预览
-
-WR.DO is a all-in-one web utility platform featuring short links with analytics, temporary email service, subdomain management, open APIs for screenshots and metadata extraction, plus comprehensive admin dashboard.
-
-## Features
-
-- 🔗 **Short Link Service**:
-  - Custom short links
-  - Generate custom QR codes
-  - Password-protected links
-  - Expiration time control
-  - Access analytics (real-time logs, maps, and multi-dimensional data analysis)
-  - API integration for link creation
-
-- 📮 **Email Service**:
-  - Create custom prefix emails
-  - Filter unread email lists
-  - Unlimited mailbox creation
-  - Receive unlimited emails (powered by Cloudflare Email Worker)
-  - Send emails (powered by Resend)
-  - API endpoints for mailbox creation
-  - API endpoints for inbox retrieval
-
-- 🌐 **Subdomain Management Service**:
-  - Manage DNS records across multiple Cloudflare accounts and domains
-  - Create various DNS record types (CNAME, A, TXT, etc.)
-
-- 📡 **Open API Module**:
-  - Website metadata extraction API
-  - Website screenshot capture API
-  - Website QR code generation API
-  - Convert websites to Markdown/Text format
-  - Comprehensive API call logging and statistics
-  - User API key generation for third-party integrations
-  
-- 🔒 **Administrator Module**:
-  - Multi-dimensional dashboard with website analytics
-  - Dynamic service configuration (toggle short links, email, subdomain management)
-  - User management (permissions, quotas, account control)
-  - Centralized short link administration
-  - Centralized email management
-  - Centralized subdomain administration
-
-## Screenshots
 
 <table>
   <tr>
@@ -65,21 +36,109 @@ WR.DO is a all-in-one web utility platform featuring short links with analytics,
 </table>
 
 
-## Quick Start
+## 功能列表
 
-See step by step installation tutorial at [Quick Start for Developer](https://wr.do/docs/developer/quick-start).
+<details>
+<summary><strong> 🔗 短链服务</strong> - <a href="javascript:;">[功能列表]</a></summary>
+<ul>
+<li>支持自定义短链</li>
+<li>支持生成自定义二维码</li>
+<li>支持密码保护链接</li>
+<li>支持设置过期时间</li>
+<li>支持访问统计（实时日志、地图等多维度数据分析）</li>
+<li>支持调用 API 创建短链</li>
+</ul>
+</details>
 
-## Self-hosted
+<details>
+<summary><strong> 📮 域名邮箱服务</strong> - <a href="javascript:;">[功能列表]</a></summary>
+<ul>
+<li>支持创建自定义前缀邮箱</li>
+<li>支持过滤未读邮件列表</li>
+<li>可创建无限数量邮箱</li>
+<li>支持接收无限制邮件 （依赖 Cloudflare Email Worker）</li>
+<li>支持发送邮件（依赖 Resend）</li>
+<li>支持 Catch-All 配置</li>
+<li>支持 Telegram 推送（多频道/群组）</li>
+<li>支持调用 API 创建邮箱</li>
+<li>支持调用 API 获取收件箱邮件</li>
+</ul>
+</details>
 
-### Deploy with Vercel
+<details>
+<summary><strong>🌐 子域名管理服务</strong> - <a href="javascript:;">[功能列表]</a></summary>
+<ul>
+<li>支持管理多 Cloudflare 账户下的多个域名的 DNS 记录</li>
+<li>支持创建多种 DNS 记录类型（CNAME、A、TXT 等）</li>
+<li>支持开启申请模式（用户提交、管理员审批）</li>
+<li>支持邮件通知管理员、用户域名申请状态</li>
+</ul>
+</details>
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/oiov/wr.do.git&project-name=wrdo&env=DATABASE_URL&env=AUTH_SECRET&env=RESEND_API_KEY&env=NEXT_PUBLIC_EMAIL_R2_DOMAIN&env=NEXT_PUBLIC_OPEN_SIGNUP&env=GITHUB_TOKEN)
+<details>
+<summary><strong>📂 文件存储服务</strong> - <a href="javascript:;">[功能列表]</a></summary>
+<ul>
+<li>支持多渠道（S3 API）云存储平台（Cloudflare R2、AWS S3、OSS等）
+<li>支持单渠道多存储桶配置
+<li>动态配置文件上传大小限制
+<li>支持拖拽、批量、粘贴上传文件
+<li>支持批量删除文件
+<li>快捷生成文件短链、二维码
+<li>支持部分文件在线预览内容
+</ul>
+</details>
 
-Remember to fill in the necessary environment variables.
+<details>
+<summary><strong>📡 开放接口服务</strong> - <a href="javascript:;">[功能列表]</a></summary>
+<ul>
+<li>支持调用 API 获取网站元数据
+<li>支持调用 API 获取网站截图
+<li>支持调用 API 生成网站二维码
+<li>支持调用 API 将网站转换为 Markdown、Text
+<li>支持生成用户 API Key，用于第三方调用开放接口
+</ul>
+</details>
 
-### Deploy with Docker Compose
+<details>
+<summary><strong>👑 管理员模块</strong> - <a href="javascript:;">[功能列表]</a></summary>
+<ul>
+<li>多维度图表展示网站状态
+<li>域名服务配置（动态配置各项服务是否启用，包括短链、临时邮箱（收发邮件）
+<li>用户列表管理（设置权限、分配使用额度、禁用用户等）
+<li>动态配置登录方式 (支持 Google, GitHub, 邮箱验证, 账户密码, LinuxDO)
+<li>短链管理（管理所有用户创建的短链）
+<li>邮箱管理（管理所有用户创建的临时邮箱）
+<li>子域名管理（管理所有用户创建的子域名）
+</ul>
+</details>
 
-Create a new folder and copy the [`docker-compose.yml`](https://github.com/oiov/wr.do/blob/main/docker-compose.yml)、[`.env`](https://github.com/oiov/wr.do/blob/main/.env.example) file to the folder.
+## 技术栈
+
+- Next.js + React + TypeScript
+- Tailwind CSS 用于样式设计
+- Prisma ORM 作为数据库工具
+- Cloudflare 作为主要的云基础设施
+- Vercel 作为推荐的部署平台
+- Resend 作为邮件服务
+- Next-Intl 作为国际化支持
+
+## 快速开始
+
+查看开发者[手把手部署教程](https://wr.do/docs/developer/quick-start-zh)文档。
+
+## 自部署教程
+
+> 注意，任何部署方式都需要先配置环境变量，若部署后修改了环境变量，需要**重新部署**才会生效。
+
+### 使用 Vercel 部署
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/oiov/wr.do.git&project-name=wrdo)
+
+记得填写必要的环境变量。
+
+### 使用 Docker Compose 部署
+
+在服务器中创建一个文件夹，进入该文件夹并新建 [docker-compose.yml](https://github.com/oiov/wr.do/blob/main/docker-compose.yml)、[.env](https://github.com/oiov/wr.do/blob/main/.env.example) 文件：
 
 ```yml
 - wrdo
@@ -87,13 +146,23 @@ Create a new folder and copy the [`docker-compose.yml`](https://github.com/oiov/
   | - .env
 ```
 
-Fill in the environment variables in the `.env` file, then: 
+在 `.env` 中填写必要的环境变量，然后执行: 
 
 ```bash
 docker compose up -d
 ```
 
-## Local development
+> 或只创建 docker-compose.yml 文件，环境变量直接填写在yml中，比如将`DATABASE_URL: ${DATABASE_URL}`替换成`DATABASE_URL: your-database-uri`
+
+### 使用 EdgeOne 部署
+
+> 此方法部署目前无法build成功，不建议使用
+
+[![使用 EdgeOne Pages 部署](https://cdnstatic.tencentcs.com/edgeone/pages/deploy.svg)](https://edgeone.ai/pages/new?repository-url=https%3A%2F%2Fgithub.com%2Foiov%2Fwr.do)
+
+## 本地开发
+
+将 `.env.example` 复制为 `.env` 并填写必要的环境变量。
 
 ```bash
 git clone https://github.com/oiov/wr.do
@@ -101,34 +170,63 @@ cd wr.do
 pnpm install
 ```
 
-copy `.env.example` to `.env` and fill in the necessary environment variables.
+#### 初始化数据库
-
-```bash
-# run on localhost:3000
-pnpm dev
-```
-
-#### Init database
 
 ```bash
 pnpm postinstall
 pnpm db:push
 ```
 
-#### Setup Admin Panel
+```bash
+# 在 localhost:3000 上运行
+pnpm dev
+```
 
-Follow https://localhost:3000/setup
+- 默认账号(管理员)：`admin@admin.com`
+- 默认密码：`123456`
 
-## Community Group
+> 登录后请及时修改密码
+
+#### 管理员初始化
+
+> 此初始化引导在 v1.0.2 版本后, 不再是必要步骤
+
+访问 https://localhost:3000/setup
+
+## 环境变量
+
+查看 [开发者文档](https://wr.do/docs/developer).
+
+## Fork 仓库同步
+
+本项目配置了与上游仓库 [oiov/wr.do](https://github.com/oiov/wr.do) 的同步工作流，支持：
+
+- 🔄 **手动触发同步** - 默认关闭自动同步，完全控制同步时机
+- 💬 **同步后自动评论** - 在相关 commit 上添加详细的同步信息
+- 🚨 **智能错误处理** - 同步失败时自动创建详细的 Issue
+- 🧹 **自动清理通知** - 自动关闭之前的同步失败 Issue
+
+前往[如何手动触发同步](https://wr.do/docs/developer/sync)查看详细文档。
+
+## 社区群组
 
 - Discord: https://discord.gg/AHPQYuZu3m
 - 微信群：
 
-<img width="300" src="https://wr.do/s/group" />
+<img width="300" src="https://wr.do/group" />
 
-## License
+## 贡献者
+
+<a href="https://github.com/oiov/wr.do/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=oiov/wr.do" />
+</a>
+
+## 请作者喝咖啡
+  
+[爱发电主页打赏](wr.do/afdhome)
+
+<img width="100" src="https://wr.do/bbpt9z?ref=https://github.com/oiov/wr.do" />
 
-[MIT](/LICENSE.md)
 
 ## Star History
 
@@ -138,4 +236,9 @@ Follow https://localhost:3000/setup
    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=oiov/wr.do&type=Date" />
    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=oiov/wr.do&type=Date" />
  </picture>
-</a>
+</a>
+
+## 开源协议
+
+[MIT](/LICENSE.md)
+

actions/update-user-password.ts

@@ -0,0 +1,39 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/auth";
+
+import { prisma } from "@/lib/db";
+import { hashPassword } from "@/lib/utils";
+import { userPasswordSchema } from "@/lib/validations/user";
+
+export type FormData = {
+  password: string;
+};
+
+export async function updateUserPassword(userId: string, data: FormData) {
+  try {
+    const session = await auth();
+
+    if (!session?.user || session?.user.id !== userId) {
+      throw new Error("Unauthorized");
+    }
+
+    const { password } = userPasswordSchema.parse(data);
+
+    await prisma.user.update({
+      where: {
+        id: userId,
+      },
+      data: {
+        password: hashPassword(password),
+      },
+    });
+
+    revalidatePath("/dashboard/settings");
+    return { status: "success" };
+  } catch (error) {
+    // console.log(error)
+    return { status: "error" };
+  }
+}

app/(auth)/layout.tsx

@@ -1,6 +1,12 @@
+import Link from "next/link";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 
+import { siteConfig } from "@/config/site";
 import { getCurrentUser } from "@/lib/session";
+import { BackgroundPaths } from "@/components/ui/background-paths";
+import { FlipWords } from "@/components/shared/flip-words";
+import { Icons } from "@/components/shared/icons";
 
 interface AuthLayoutProps {
   children: React.ReactNode;
@@ -8,11 +14,39 @@ interface AuthLayoutProps {
 
 export default async function AuthLayout({ children }: AuthLayoutProps) {
   const user = await getCurrentUser();
+  const t = await getTranslations("Auth");
 
   if (user) {
     if (user.role === "ADMIN") redirect("/admin");
     redirect("/dashboard");
   }
 
-  return <div className="min-h-screen">{children}</div>;
+  // return <div className="min-h-screen">{children}</div>;
+  return (
+    <main className="relative flex h-screen w-full flex-col">
+      <div className="flex-1">
+        <div className="flex min-h-screen w-full">
+          <div className="relative hidden flex-col border-r bg-muted p-16 lg:flex lg:w-1/2">
+            <div className="absolute inset-0 h-full w-full">
+              <BackgroundPaths />
+            </div>
+            <h1 className="z-10 flex items-center gap-3 text-2xl font-semibold duration-1000 animate-in fade-in">
+              <Icons.logo className="size-8" />
+              <Link href="/" style={{ fontFamily: "Bahamas Bold" }}>
+                {siteConfig.name}
+              </Link>
+            </h1>
+            <div className="flex-1" />
+
+            <FlipWords
+              words={[t("description")]}
+              className="mb-4 text-muted-foreground"
+            />
+          </div>
+
+          <div className="w-full p-6 lg:w-1/2">{children}</div>
+        </div>
+      </div>
+    </main>
+  );
 }

app/(auth)/login/page.tsx

@@ -1,6 +1,7 @@
 import { Suspense } from "react";
 import { Metadata } from "next";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 
 import { siteConfig } from "@/config/site";
 import { cn } from "@/lib/utils";
@@ -14,55 +15,49 @@ export const metadata: Metadata = {
 };
 
 export default function LoginPage() {
+  const t = useTranslations("Auth");
   return (
-    <div className="container flex h-screen w-screen flex-col items-center justify-center">
+    <div className="flex h-full flex-col items-center justify-center">
       <Link
         href="/"
         className={cn(
           buttonVariants({ variant: "outline", size: "sm" }),
-          "absolute left-4 top-4 md:left-8 md:top-8",
+          "absolute left-4 top-4 md:left-8 md:top-8 lg:hidden",
         )}
       >
         <>
           <Icons.chevronLeft className="mr-2 size-4" />
-          Back
+          {t("Back")}
         </>
       </Link>
       <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
         <div className="flex flex-col space-y-2 text-center">
-          <Icons.logo className="mx-auto size-12" />
+          {/* <Icons.logo className="mx-auto size-12 lg:hidden" /> */}
           <div className="text-2xl font-semibold tracking-tight">
-            <span>Welcome to</span>{" "}
+            <span>{t("Welcome to")}</span>{" "}
-            <span style={{ fontFamily: "Bahamas Bold" }}>
-              {siteConfig.name}
-            </span>
           </div>
           <p className="text-sm text-muted-foreground">
-            Choose your login method to continue
+            {t("Choose your login method to continue")}
           </p>
         </div>
         <Suspense>
           <UserAuthForm />
         </Suspense>
-        {/* <p className="mt-4 break-all rounded-md border border-dashed bg-neutral-50 p-2 text-left text-sm text-gray-600 dark:border-neutral-600 dark:bg-neutral-800 dark:text-zinc-400">
-          📢 To keep our free resources accessible to all, we're allowing only
-          200 new account sign-ups each day.
-        </p> */}
 
-        <p className="px-8 text-center text-sm text-muted-foreground">
+        <p className="px-2 text-center text-sm text-muted-foreground">
-          By clicking continue, you agree to our{" "}
+          {t("By clicking continue, you agree to our")}{" "}
           <Link
             href="/terms"
             className="hover:text-brand underline underline-offset-4"
           >
-            Terms of Service
+            {t("Terms of Service")}
           </Link>{" "}
-          and{" "}
+          {t("and")}{" "}
           <Link
             href="/privacy"
             className="hover:text-brand underline underline-offset-4"
           >
-            Privacy Policy
+            {t("Privacy Policy")}
           </Link>
           .
         </p>

app/(docs)/docs/[[...slug]]/page.tsx

@@ -7,7 +7,7 @@ import { DocsPageHeader } from "@/components/docs/page-header";
 import { DocsPager } from "@/components/docs/pager";
 import { DashboardTableOfContents } from "@/components/shared/toc";
 
-import "@/styles/mdx.css";
+import "@/styles/mdx.scss";
 
 import { Metadata } from "next";
 

app/(marketing)/[slug]/page.tsx

@@ -3,7 +3,7 @@ import { allPages } from "contentlayer/generated";
 
 import { Mdx } from "@/components/content/mdx-components";
 
-import "@/styles/mdx.css";
+import "@/styles/mdx.scss";
 
 import { Metadata } from "next";
 

app/(marketing)/feedback/loading.tsx

@@ -0,0 +1,9 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function DashboardLoading() {
+  return (
+    <>
+      <Skeleton className="h-full w-full rounded-lg" />
+    </>
+  );
+}

app/(marketing)/feedback/page.tsx

@@ -0,0 +1,11 @@
+import { constructMetadata } from "@/lib/utils";
+import Comment from "@/components/shared/comment";
+
+export const metadata = constructMetadata({
+  title: "Feedback",
+  description: "Help us do better",
+});
+
+export default async function Page() {
+  return <Comment />;
+}

app/(marketing)/layout.tsx

@@ -1,5 +1,6 @@
 import { NavMobile } from "@/components/layout/mobile-nav";
 import { NavBar } from "@/components/layout/navbar";
+import { Notification } from "@/components/layout/notification";
 import { SiteFooter } from "@/components/layout/site-footer";
 
 interface MarketingLayoutProps {
@@ -11,6 +12,7 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
     <div className="flex min-h-screen flex-col dark:bg-black">
       <NavMobile />
       <NavBar scroll={true} />
+      <Notification />
       <main className="flex-1 bg-[radial-gradient(circle_500px_at_50%_300px,#a1fffc36,#ffffff)] dark:bg-[radial-gradient(circle_500px_at_50%_300px,#a1fffc36,#000)]">
         {children}
       </main>

app/(marketing)/page.tsx

@@ -1,10 +1,19 @@
+import { getCurrentUser } from "@/lib/session";
+import { constructMetadata } from "@/lib/utils";
 import HeroLanding, { LandingImages } from "@/components/sections/hero-landing";
 import { PricingSection } from "@/components/sections/pricing";
 
-export default function IndexPage() {
+export const metadata = constructMetadata({
+  title: "WR.DO - Your All-In-One Domain Services Platform",
+  description:
+    "All-in-one domain platform with short links, temp email, subdomain management, file storage, and open APIs",
+});
+
+export default async function IndexPage() {
+  const user = await getCurrentUser();
   return (
     <>
-      <HeroLanding />
+      <HeroLanding userId={user?.id} />
       <LandingImages />
       <PricingSection />
     </>

app/(protected)/admin/api-key-active-chart.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { TrendingUp } from "lucide-react";
+import { useTranslations } from "next-intl";
 import {
   Label,
   PolarGrid,
@@ -29,9 +30,8 @@ export function RadialShapeChart({
   total: number;
   totalUser: number;
 }) {
-  const chartData = [
+  const t = useTranslations("Components");
-    { browser: "safari", actived: total, fill: "var(--color-safari)" },
+  const chartData = [{ actived: total, fill: "var(--color-safari)" }];
-  ];
 
   return (
     <Card className="flex flex-col">
@@ -42,7 +42,7 @@ export function RadialShapeChart({
         >
           <RadialBarChart
             data={chartData}
-            endAngle={total}
+            endAngle={(total / totalUser) * 100}
             innerRadius={80}
             outerRadius={140}
           >
@@ -77,7 +77,7 @@ export function RadialShapeChart({
                           y={(viewBox.cy || 0) + 24}
                           className="fill-muted-foreground"
                         >
-                          Users
+                          {t("Users")}
                         </tspan>
                       </text>
                     );
@@ -94,7 +94,7 @@ export function RadialShapeChart({
           <TrendingUp className="size-4" />
         </div>
         <div className="leading-none text-muted-foreground">
-          Cumulative proportion of activated <strong>Api Key</strong> users
+          {t("Activated Api Key users")}
         </div>
       </CardFooter>
     </Card>

app/(protected)/admin/line-chart-multiple.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ScrapeMeta } from "@prisma/client";
+import { useTranslations } from "next-intl";
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
 import { useElementSize } from "@/hooks/use-element-size";
@@ -58,6 +59,8 @@ export function LineChartMultiple({
   const { ref: wrapperRef, width: wrapperWidth } = useElementSize();
   const processedData = processChartData(chartData, type1, type2);
 
+  const t = useTranslations("Components");
+
   const chartConfig = {
     source1: {
       label: type1,
@@ -69,13 +72,14 @@ export function LineChartMultiple({
     },
   } satisfies ChartConfig;
 
+  const message = type2
+    ? t("total-requests-two-types", { type1, type2 })
+    : t("total-requests-one-type", { type1 });
+
   return (
     <Card>
       <CardHeader>
-        <CardDescription>
+        <CardDescription>{message}</CardDescription>
-          Total requests of {type1}
-          {type2 && ` and ${type2}`}.
-        </CardDescription>
       </CardHeader>
       <CardContent ref={wrapperRef}>
         <ChartContainer config={chartConfig}>

app/(protected)/admin/loading.tsx

@@ -4,10 +4,7 @@ import { DashboardHeader } from "@/components/dashboard/header";
 export default function AdminPanelLoading() {
   return (
     <>
-      <DashboardHeader
+      <DashboardHeader heading="Admin Panel" text="" />
-        heading="Admin Panel"
-        text="Access only for users with ADMIN role."
-      />
       <div className="flex flex-col gap-5">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-3 lg:grid-cols-3">
           <Skeleton className="h-32 w-full rounded-lg" />

app/(protected)/admin/page.tsx

@@ -26,7 +26,7 @@ import { RadialShapeChart } from "./api-key-active-chart";
 import { LineChartMultiple } from "./line-chart-multiple";
 
 export const metadata = constructMetadata({
-  title: "Admin – WR.DO",
+  title: "Admin",
   description: "Admin page for only admin management.",
 });
 
@@ -134,7 +134,6 @@ async function RequestStatsSection() {
 
   return hasStats ? (
     <>
-      <h2 className="my-1 text-xl font-semibold">Request Statistics</h2>
       <DailyPVUVChart
         data={screenshot_stats
           .concat(meta_stats)
@@ -200,7 +199,6 @@ async function MarkdownTextChartSection() {
 async function LogsSection({ userId }: { userId: string }) {
   return (
     <>
-      <h2 className="my-1 text-xl font-semibold">Request Logs</h2>
       <LogsTable userId={userId} target={"/api/v1/scraping/admin/logs"} />
     </>
   );
@@ -213,10 +211,7 @@ export default async function AdminPage() {
 
   return (
     <>
-      <DashboardHeader
+      <DashboardHeader heading="Admin Panel" text="" />
-        heading="Admin Panel"
-        text="Access only for users with ADMIN role."
-      />
       <div className="flex flex-col gap-5">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-3 xl:grid-cols-3">
           <ErrorBoundary

app/(protected)/admin/records/loading.tsx

@@ -4,8 +4,16 @@ import { DashboardHeader } from "@/components/dashboard/header";
 export default function DashboardRecordsLoading() {
   return (
     <>
-      <DashboardHeader heading="DNS Records" text="" />
+      <DashboardHeader
-      <Skeleton className="h-32 w-full rounded-lg" />
+        heading="Manage DNS Records"
+        text="List and manage records"
+      />
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-4">
+        <Skeleton className="h-[102px] w-full rounded-lg" />
+        <Skeleton className="h-[102px] w-full rounded-lg" />
+        <Skeleton className="h-[102px] w-full rounded-lg" />
+        <Skeleton className="h-[102px] w-full rounded-lg" />
+      </div>
       <Skeleton className="h-[400px] w-full rounded-lg" />
     </>
   );

app/(protected)/admin/records/page.tsx

@@ -3,11 +3,12 @@ import { redirect } from "next/navigation";
 import { getCurrentUser } from "@/lib/session";
 import { constructMetadata } from "@/lib/utils";
 import { DashboardHeader } from "@/components/dashboard/header";
+import { UserRecordStatus } from "@/components/dashboard/status-card";
 
 import UserRecordsList from "../../dashboard/records/record-list";
 
 export const metadata = constructMetadata({
-  title: "DNS Records - WR.DO",
+  title: "DNS Records",
   description: "List and manage records.",
 });
 
@@ -19,17 +20,19 @@ export default async function DashboardPage() {
   return (
     <>
       <DashboardHeader
-        heading="Manage&nbsp;&nbsp;DNS&nbsp;&nbsp;Records"
+        heading="Manage DNS Records"
-        text="List and manage records."
+        text="List and manage records"
         link="/docs/dns-records"
-        linkText="DNS records."
+        linkText="DNS records"
       />
+      <UserRecordStatus action="/api/record/admin" />
       <UserRecordsList
         user={{
           id: user.id,
           name: user.name || "",
           apiKey: user.apiKey || "",
           email: user.email || "",
+          role: user.role,
         }}
         action="/api/record/admin"
       />

app/(protected)/admin/storage/loading.tsx

@@ -4,8 +4,11 @@ import { DashboardHeader } from "@/components/dashboard/header";
 export default function DashboardRecordsLoading() {
   return (
     <>
-      <DashboardHeader heading="Domains Management" text="" />
+      <DashboardHeader
-      <Skeleton className="h-32 w-full rounded-lg" />
+        heading="Cloud Storage"
+        text="List and manage cloud storage"
+      />
+      <Skeleton className="h-[58px] w-full rounded-lg" />
       <Skeleton className="h-[400px] w-full rounded-lg" />
     </>
   );

app/(protected)/admin/storage/page.tsx

@@ -0,0 +1,39 @@
+import { redirect } from "next/navigation";
+
+import { getCurrentUser } from "@/lib/session";
+import { constructMetadata } from "@/lib/utils";
+import { DashboardHeader } from "@/components/dashboard/header";
+import UserFileList from "@/components/file";
+
+export const metadata = constructMetadata({
+  title: "Cloud Storage",
+  description: "List and manage cloud storage.",
+});
+
+export default async function DashboardPage() {
+  const user = await getCurrentUser();
+
+  if (!user?.id) redirect("/login");
+
+  return (
+    <>
+      <DashboardHeader
+        heading="Cloud Storage"
+        text="List and manage cloud storage"
+        link="/docs/developer/cloud-storage"
+        linkText="Cloud Storage"
+      />
+      <UserFileList
+        user={{
+          id: user.id,
+          name: user.name || "",
+          apiKey: user.apiKey || "",
+          email: user.email || "",
+          role: user.role,
+          team: user.team,
+        }}
+        action="/api/storage/admin"
+      />
+    </>
+  );
+}

app/(protected)/admin/system/app-configs.tsx

@@ -0,0 +1,864 @@
+"use client";
+
+import { useEffect, useState, useTransition } from "react";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import pkg from "package.json";
+import { toast } from "sonner";
+import useSWR from "swr";
+
+import { siteConfig } from "@/config/site";
+import { fetcher } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { Icons } from "@/components/shared/icons";
+import VersionNotifier from "@/components/shared/version-notifier";
+
+export default function AppConfigs({}: {}) {
+  const [isPending, startTransition] = useTransition();
+  const [loginMethodCount, setLoginMethodCount] = useState(0);
+
+  const {
+    data: configs,
+    isLoading,
+    mutate,
+  } = useSWR<Record<string, any>>("/api/admin/configs", fetcher);
+  const [notification, setNotification] = useState("");
+  const [catchAllEmails, setCatchAllEmails] = useState("");
+  const [forwardEmailTargets, setForwardEmailTargets] = useState("");
+  const [forwardEmailWhiteList, setForwardEmailWhiteList] = useState("");
+  const [emailSuffix, setEmailSuffix] = useState("");
+  const [tgBotToken, setTgBotToken] = useState("");
+  const [tgChatId, setTgChatId] = useState("");
+  const [tgTemplate, setTgTemplate] = useState("");
+  const [tgWhiteList, setTgWhiteList] = useState("");
+
+  const t = useTranslations("Setting");
+
+  useEffect(() => {
+    if (!isLoading && configs) {
+      setNotification(configs?.system_notification);
+      setCatchAllEmails(configs?.catch_all_emails);
+      setEmailSuffix(configs?.email_registration_suffix_limit_white_list);
+      setTgBotToken(configs?.tg_email_bot_token);
+      setTgChatId(configs?.tg_email_chat_id);
+      setTgTemplate(configs?.tg_email_template);
+      setTgWhiteList(configs?.tg_email_target_white_list);
+      setForwardEmailTargets(configs?.email_forward_targets);
+      setForwardEmailWhiteList(configs?.email_forward_white_list);
+    }
+
+    if (!isLoading) {
+      let count = 0;
+      if (configs?.enable_google_oauth) count++;
+      if (configs?.enable_github_oauth) count++;
+      if (configs?.enable_liunxdo_oauth) count++;
+      // if (configs?.enable_resend_email_login) count++;
+      if (configs?.enable_email_password_login) count++;
+      setLoginMethodCount(count);
+    }
+  }, [configs, isLoading]);
+
+  const handleChange = (value: any, key: string, type: string) => {
+    startTransition(async () => {
+      const res = await fetch("/api/admin/configs", {
+        method: "POST",
+        body: JSON.stringify({ key, value, type }),
+      });
+      if (res.ok) {
+        toast.success("Saved");
+        mutate();
+      } else {
+        toast.error("Failed to save", {
+          description: await res.text(),
+        });
+      }
+    });
+  };
+
+  if (isLoading) {
+    return <Skeleton className="h-48 w-full rounded-lg" />;
+  }
+
+  return (
+    <Card>
+      <Collapsible className="group" defaultOpen>
+        <CollapsibleTrigger className="flex w-full items-center justify-between bg-neutral-50 px-4 py-5 dark:bg-neutral-900">
+          <div className="text-lg font-bold">{t("App Configs")}</div>
+          <Icons.chevronDown className="ml-auto size-4" />
+          <Icons.settings className="ml-3 size-4 transition-all group-hover:scale-110" />
+        </CollapsibleTrigger>
+        <CollapsibleContent className="space-y-3 bg-neutral-100 p-4 dark:bg-neutral-800">
+          <div className="space-y-6">
+            <div className="flex items-center justify-between space-x-2">
+              <div className="space-y-1 leading-none">
+                <p className="font-medium">{t("User Registration")}</p>
+                <p className="text-xs text-muted-foreground">
+                  {t("Allow users to sign up")}
+                </p>
+              </div>
+              {configs && (
+                <Switch
+                  defaultChecked={configs.enable_user_registration}
+                  onCheckedChange={(v) =>
+                    handleChange(v, "enable_user_registration", "BOOLEAN")
+                  }
+                />
+              )}
+            </div>
+
+            <Collapsible>
+              <CollapsibleTrigger className="flex w-full items-center justify-between">
+                <div className="space-y-1 text-start leading-none">
+                  <p className="font-medium">{t("Login Methods")}</p>
+
+                  <p className="text-xs text-muted-foreground">
+                    {t("Select the login methods that users can use to log in")}
+                  </p>
+                </div>
+
+                <Icons.chevronDown className="ml-auto mr-2 size-4" />
+                <Badge>{loginMethodCount}</Badge>
+              </CollapsibleTrigger>
+              <CollapsibleContent className="mt-2 space-y-3 rounded-md bg-neutral-100 p-3 dark:bg-neutral-800">
+                {configs && (
+                  <>
+                    <div className="flex items-center justify-between gap-3 transition-all duration-100 hover:cursor-pointer hover:shadow-sm">
+                      <p className="flex items-center gap-2 text-sm">
+                        <Icons.pwdKey className="size-4" />
+                        {t("Email Password")}
+                      </p>
+                      <Switch
+                        defaultChecked={configs.enable_email_password_login}
+                        onCheckedChange={(v) =>
+                          handleChange(
+                            v,
+                            "enable_email_password_login",
+                            "BOOLEAN",
+                          )
+                        }
+                      />
+                    </div>
+                    <div className="flex items-center justify-between gap-3 transition-all duration-100 hover:cursor-pointer hover:shadow-sm">
+                      <p className="flex items-center gap-2 text-sm">
+                        <Icons.github className="size-4" /> GitHub OAuth
+                      </p>
+                      <Switch
+                        defaultChecked={configs.enable_github_oauth}
+                        onCheckedChange={(v) =>
+                          handleChange(v, "enable_github_oauth", "BOOLEAN")
+                        }
+                      />
+                    </div>
+                    <div className="flex items-center justify-between gap-3 transition-all duration-100 hover:cursor-pointer hover:shadow-sm">
+                      <p className="flex items-center gap-2 text-sm">
+                        <Icons.google className="size-4" />
+                        Google OAuth
+                      </p>
+                      <Switch
+                        defaultChecked={configs.enable_google_oauth}
+                        onCheckedChange={(v) =>
+                          handleChange(v, "enable_google_oauth", "BOOLEAN")
+                        }
+                      />
+                    </div>
+                    <div className="flex items-center justify-between gap-3 transition-all duration-100 hover:cursor-pointer hover:shadow-sm">
+                      <p className="flex items-center gap-2 text-sm">
+                        <img
+                          src="/_static/images/linuxdo.webp"
+                          alt="linuxdo"
+                          className="size-4"
+                        />
+                        LinuxDo OAuth
+                      </p>
+                      <Switch
+                        defaultChecked={configs.enable_liunxdo_oauth}
+                        onCheckedChange={(v) =>
+                          handleChange(v, "enable_liunxdo_oauth", "BOOLEAN")
+                        }
+                      />
+                    </div>
+                    {/* <div className="flex items-center justify-between gap-3">
+                      <p className="flex items-center gap-2 text-sm">
+                        <Icons.resend className="size-4" />
+                        {t("Resend Email")}
+                      </p>
+                      <Switch
+                        defaultChecked={configs.enable_resend_email_login}
+                        onCheckedChange={(v) =>
+                          handleChange(
+                            v,
+                            "enable_resend_email_login",
+                            "BOOLEAN",
+                          )
+                        }
+                      />
+                    </div> */}
+                  </>
+                )}
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible>
+              <CollapsibleTrigger className="flex w-full items-center justify-between space-x-2">
+                <div className="space-y-1 leading-none">
+                  <p className="flex items-center gap-2 font-medium">
+                    {t("Email Suffix Limit")}
+                  </p>
+                  <p className="text-start text-xs text-muted-foreground">
+                    {t(
+                      "Enable eamil suffix limit, only works for resend email login and email password login methods",
+                    )}
+                  </p>
+                </div>
+                {configs && (
+                  <div
+                    className="ml-auto flex items-center gap-3"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {configs.enable_email_registration_suffix_limit &&
+                      !configs.email_registration_suffix_limit_white_list && (
+                        <Badge variant="yellow">
+                          <Icons.warning className="mr-1 size-3" />{" "}
+                          {t("Need to configure")}
+                        </Badge>
+                      )}
+                    <Switch
+                      defaultChecked={
+                        configs.enable_email_registration_suffix_limit
+                      }
+                      onCheckedChange={(v) =>
+                        handleChange(
+                          v,
+                          "enable_email_registration_suffix_limit",
+                          "BOOLEAN",
+                        )
+                      }
+                    />
+                    <Icons.chevronDown className="size-4" />
+                  </div>
+                )}
+              </CollapsibleTrigger>
+              <CollapsibleContent className="mt-4 space-y-4 rounded-md border p-4 shadow-md">
+                <div className="flex flex-col items-start justify-start gap-3">
+                  <div className="space-y-1 leading-none">
+                    <p className="font-medium">
+                      {t("Email Suffix White List")}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t(
+                        "Set email suffix white list, split by comma, such as: gmail-com,yahoo-com,hotmail-com",
+                      )}
+                    </p>
+                  </div>
+                  {configs && (
+                    <div className="flex w-full items-start gap-2">
+                      <Textarea
+                        className="h-16 max-h-32 min-h-9 resize-y bg-white dark:bg-neutral-700"
+                        placeholder="gmail.com,yahoo.com,hotmail.com"
+                        rows={5}
+                        value={emailSuffix}
+                        disabled={
+                          !configs.enable_email_registration_suffix_limit
+                        }
+                        onChange={(e) => setEmailSuffix(e.target.value)}
+                      />
+                      <Button
+                        className="h-9 text-nowrap"
+                        disabled={
+                          isPending ||
+                          emailSuffix ===
+                            configs.email_registration_suffix_limit_white_list
+                        }
+                        onClick={() =>
+                          handleChange(
+                            emailSuffix,
+                            "email_registration_suffix_limit_white_list",
+                            "STRING",
+                          )
+                        }
+                      >
+                        {t("Save")}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <div className="flex flex-col items-start justify-start gap-3">
+              <div className="space-y-1 leading-none">
+                <p className="font-medium">{t("Notification")}</p>
+                <p className="text-xs text-muted-foreground">
+                  {t(
+                    "Set system notification, this will be displayed in the header",
+                  )}
+                </p>
+              </div>
+              {configs && (
+                <div className="flex w-full items-start gap-2">
+                  <Textarea
+                    className="h-16 max-h-32 min-h-9 resize-y bg-white dark:bg-neutral-700"
+                    placeholder="Support HTML format, such as <div class='text-red-500'>Info</div>"
+                    rows={5}
+                    // defaultValue={configs.system_notification}
+                    value={notification}
+                    onChange={(e) => setNotification(e.target.value)}
+                  />
+                  <Button
+                    className="h-9 text-nowrap"
+                    disabled={
+                      isPending || notification === configs.system_notification
+                    }
+                    onClick={() =>
+                      handleChange(
+                        notification,
+                        "system_notification",
+                        "STRING",
+                      )
+                    }
+                  >
+                    {t("Save")}
+                  </Button>
+                </div>
+              )}
+            </div>
+
+            <div
+              className="flex items-center gap-1 text-xs text-muted-foreground/90"
+              style={{ fontFamily: "Bahamas Bold" }}
+            >
+              Powered by
+              <Link
+                href={siteConfig.url}
+                target="_blank"
+                rel="noreferrer"
+                className="font-medium underline-offset-2 hover:underline"
+              >
+                {siteConfig.name}
+              </Link>
+              <Link
+                href={`${siteConfig.links.github}/releases/latest`}
+                target="_blank"
+                rel="noreferrer"
+                className="font-thin underline-offset-2 hover:underline"
+              >
+                v{pkg.version}
+              </Link>
+              <VersionNotifier />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      <Collapsible className="group border-y">
+        <CollapsibleTrigger className="flex w-full items-center justify-between bg-neutral-50 px-4 py-5 dark:bg-neutral-900">
+          <div className="text-lg font-bold">{t("Email Configs")}</div>
+          <Icons.chevronDown className="ml-auto size-4" />
+          <Icons.mail className="ml-3 size-4 transition-all group-hover:scale-110" />
+        </CollapsibleTrigger>
+        <CollapsibleContent className="space-y-3 bg-neutral-100 p-4 dark:bg-neutral-800">
+          <div className="space-y-6">
+            {/* Catch-All*/}
+            <Collapsible>
+              <CollapsibleTrigger className="flex w-full items-center justify-between space-x-2">
+                <div className="space-y-1 leading-none">
+                  <p className="flex items-center gap-2 font-medium">
+                    Catch-All
+                  </p>
+                  <p className="text-start text-xs text-muted-foreground">
+                    {t(
+                      "Enable email catch-all, all user's email address which created on this platform will be redirected to the catch-all email address",
+                    )}
+                  </p>
+                </div>
+                {configs && (
+                  <div
+                    className="ml-auto flex items-center gap-3"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {configs.enable_email_catch_all &&
+                      !configs.catch_all_emails && (
+                        <Badge variant="yellow">
+                          <Icons.warning className="mr-1 size-3" />{" "}
+                          {t("Need to configure")}
+                        </Badge>
+                      )}
+                    <Switch
+                      defaultChecked={configs.enable_email_catch_all}
+                      onCheckedChange={(v) =>
+                        handleChange(v, "enable_email_catch_all", "BOOLEAN")
+                      }
+                    />
+
+                    <Icons.chevronDown className="size-4" />
+                  </div>
+                )}
+              </CollapsibleTrigger>
+              <CollapsibleContent className="mt-4 space-y-4 rounded-md border p-4 shadow-md">
+                <div className="flex flex-col items-start justify-start gap-3">
+                  <div className="space-y-1 leading-none">
+                    <p className="font-medium">
+                      {t("Email Forward White List")}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t(
+                        "Set email forward white list, split by comma, such as: a-wrdo,b-wrdo",
+                      )}
+                    </p>
+                  </div>
+                  {configs && (
+                    <div className="flex w-full items-start gap-2">
+                      <Textarea
+                        className="h-16 max-h-32 min-h-9 resize-y bg-white dark:bg-neutral-700"
+                        placeholder="example1@wr.do,example2@wr.do"
+                        rows={5}
+                        value={forwardEmailWhiteList}
+                        onChange={(e) =>
+                          setForwardEmailWhiteList(e.target.value)
+                        }
+                      />
+                      <Button
+                        className="h-9 text-nowrap"
+                        disabled={
+                          isPending ||
+                          forwardEmailWhiteList ===
+                            configs.email_forward_white_list
+                        }
+                        onClick={() =>
+                          handleChange(
+                            forwardEmailWhiteList,
+                            "email_forward_white_list",
+                            "STRING",
+                          )
+                        }
+                      >
+                        {t("Save")}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+                <div className="flex flex-col items-start justify-start gap-3">
+                  <div className="space-y-1 leading-none">
+                    <p className="font-medium">
+                      {t("Catch-All Email Address")}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t(
+                        "Set catch-all email address, split by comma if more than one, such as: 1@a-com,2@b-com, Only works when email catch all is enabled",
+                      )}
+                    </p>
+                  </div>
+                  {configs && (
+                    <div className="flex w-full items-start gap-2">
+                      <Textarea
+                        className="h-16 max-h-32 min-h-9 resize-y bg-white dark:bg-neutral-700"
+                        placeholder="example1@wr.do,example2@wr.do"
+                        rows={5}
+                        value={catchAllEmails}
+                        disabled={!configs.enable_email_catch_all}
+                        onChange={(e) => setCatchAllEmails(e.target.value)}
+                      />
+                      <Button
+                        className="h-9 text-nowrap"
+                        disabled={
+                          isPending ||
+                          catchAllEmails === configs.catch_all_emails
+                        }
+                        onClick={() =>
+                          handleChange(
+                            catchAllEmails,
+                            "catch_all_emails",
+                            "STRING",
+                          )
+                        }
+                      >
+                        {t("Save")}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+            {/* Forward Email to other email address */}
+            <Collapsible>
+              <CollapsibleTrigger className="flex w-full items-center justify-between space-x-2">
+                <div className="space-y-1 leading-none">
+                  <p className="flex items-center gap-2 font-medium">
+                    {t("Email Forwarding")}
+                  </p>
+                  <p className="text-start text-xs text-muted-foreground">
+                    {t(
+                      "If enabled, forward all received emails to other platform email addresses (Send with Resend or Brevo)",
+                    )}
+                  </p>
+                </div>
+                {configs && (
+                  <div
+                    className="ml-auto flex items-center gap-3"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {configs.enable_email_forward &&
+                      !configs.email_forward_targets && (
+                        <Badge variant="yellow">
+                          <Icons.warning className="mr-1 size-3" />{" "}
+                          {t("Need to configure")}
+                        </Badge>
+                      )}
+                    <Switch
+                      defaultChecked={configs.enable_email_forward}
+                      onCheckedChange={(v) =>
+                        handleChange(v, "enable_email_forward", "BOOLEAN")
+                      }
+                    />
+                    <Icons.chevronDown className="size-4" />
+                  </div>
+                )}
+              </CollapsibleTrigger>
+              <CollapsibleContent className="mt-4 space-y-4 rounded-md border p-4 shadow-md">
+                <div className="flex flex-col items-start justify-start gap-3">
+                  <div className="space-y-1 leading-none">
+                    <p className="font-medium">
+                      {t("Email Forward White List")}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t(
+                        "Set email forward white list, split by comma, such as: a-wrdo,b-wrdo",
+                      )}
+                    </p>
+                  </div>
+                  {configs && (
+                    <div className="flex w-full items-start gap-2">
+                      <Textarea
+                        className="h-16 max-h-32 min-h-9 resize-y bg-white dark:bg-neutral-700"
+                        placeholder="example1@wr.do,example2@wr.do"
+                        rows={5}
+                        value={forwardEmailWhiteList}
+                        onChange={(e) =>
+                          setForwardEmailWhiteList(e.target.value)
+                        }
+                      />
+                      <Button
+                        className="h-9 text-nowrap"
+                        disabled={
+                          isPending ||
+                          forwardEmailWhiteList ===
+                            configs.email_forward_white_list
+                        }
+                        onClick={() =>
+                          handleChange(
+                            forwardEmailWhiteList,
+                            "email_forward_white_list",
+                            "STRING",
+                          )
+                        }
+                      >
+                        {t("Save")}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+                <div className="flex flex-col items-start justify-start gap-3">
+                  <div className="space-y-1 leading-none">
+                    <p className="font-medium">{t("Forward Email Targets")}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {t(
+                        "Set forward email address targets, split by comma if more than one, such as: 1@a-com,2@b-com, Only works when email forwarding is enabled",
+                      )}
+                    </p>
+                  </div>
+                  {configs && (
+                    <div className="flex w-full items-start gap-2">
+                      <Textarea
+                        className="h-16 max-h-32 min-h-9 resize-y bg-white dark:bg-neutral-700"
+                        placeholder="example1@wr.do,example2@wr.do"
+                        rows={5}
+                        value={forwardEmailTargets}
+                        disabled={!configs.enable_email_forward}
+                        onChange={(e) => setForwardEmailTargets(e.target.value)}
+                      />
+                      <Button
+                        className="h-9 text-nowrap"
+                        disabled={
+                          isPending ||
+                          forwardEmailTargets === configs.email_forward_targets
+                        }
+                        onClick={() =>
+                          handleChange(
+                            forwardEmailTargets,
+                            "email_forward_targets",
+                            "STRING",
+                          )
+                        }
+                      >
+                        {t("Save")}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            {/* Telegram */}
+            <Collapsible>
+              <CollapsibleTrigger className="flex w-full items-center justify-between space-x-2">
+                <div className="space-y-1 leading-none">
+                  <p className="flex items-center gap-2 font-medium">
+                    {t("Telegram Pusher")}
+                  </p>
+                  <p className="text-start text-xs text-muted-foreground">
+                    {t("Push message to Telegram groups")}.{" "}
+                    <Link
+                      href="/docs/developer/telegram-bot"
+                      className="text-blue-500"
+                      target="_blank"
+                    >
+                      {t("How to configure Telegram bot")} ?
+                    </Link>
+                  </p>
+                </div>
+                {configs && (
+                  <div
+                    className="ml-auto flex items-center gap-3"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {configs.enable_tg_email_push &&
+                      (!configs.tg_email_bot_token ||
+                        !configs.tg_email_chat_id) && (
+                        <Badge variant="yellow">
+                          <Icons.warning className="mr-1 size-3" />{" "}
+                          {t("Need to configure")}
+                        </Badge>
+                      )}
+                    <Switch
+                      defaultChecked={configs.enable_tg_email_push}
+                      onCheckedChange={(v) =>
+                        handleChange(v, "enable_tg_email_push", "BOOLEAN")
+                      }
+                    />
+                    <Icons.chevronDown className="size-4" />
+                  </div>
+                )}
+              </CollapsibleTrigger>
+              <CollapsibleContent className="mt-4 space-y-4 rounded-md border p-4 shadow-md">
+                <div className="flex flex-col items-start justify-start gap-3">
+                  <div className="space-y-1 leading-none">
+                    <p className="font-medium">{t("Telegram Bot Token")}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {t(
+                        "Set Telegram bot token, Only works when Telegram pusher is enabled",
+                      )}
+                    </p>
+                  </div>
+                  {configs && (
+                    <div className="flex w-full items-start gap-2">
+                      <Input
+                        className="bg-white dark:bg-neutral-700"
+                        placeholder="Enter your Telegram bot token"
+                        type="password"
+                        value={tgBotToken}
+                        disabled={!configs.enable_tg_email_push}
+                        onChange={(e) => setTgBotToken(e.target.value)}
+                      />
+                      <Button
+                        className="h-9 text-nowrap"
+                        disabled={
+                          isPending || tgBotToken === configs.tg_email_bot_token
+                        }
+                        onClick={() =>
+                          handleChange(
+                            tgBotToken,
+                            "tg_email_bot_token",
+                            "STRING",
+                          )
+                        }
+                      >
+                        {t("Save")}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+                <div className="flex flex-col items-start justify-start gap-3">
+                  <div className="space-y-1 leading-none">
+                    <p className="font-medium">{t("Telegram Group ID")}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {t(
+                        "Set Telegram group ID, split by comma if more than one, such as: -10054275724,-10045343642",
+                      )}
+                    </p>
+                  </div>
+                  {configs && (
+                    <div className="flex w-full items-start gap-2">
+                      <Textarea
+                        className="h-16 max-h-32 min-h-9 resize-y bg-white dark:bg-neutral-700"
+                        placeholder=""
+                        rows={5}
+                        value={tgChatId}
+                        disabled={!configs.enable_tg_email_push}
+                        onChange={(e) => setTgChatId(e.target.value)}
+                      />
+                      <Button
+                        className="h-9 text-nowrap"
+                        disabled={
+                          isPending || tgChatId === configs.tg_email_chat_id
+                        }
+                        onClick={() =>
+                          handleChange(tgChatId, "tg_email_chat_id", "STRING")
+                        }
+                      >
+                        {t("Save")}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+                <div className="flex flex-col items-start justify-start gap-3">
+                  <div className="space-y-1 leading-none">
+                    <p className="font-medium">
+                      {t("Telegram Message Template")}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t("Set Telegram email message template")}
+                    </p>
+                  </div>
+                  {configs && (
+                    <div className="flex w-full items-start gap-2">
+                      <Textarea
+                        className="h-16 max-h-32 min-h-9 resize-y bg-white dark:bg-neutral-700"
+                        placeholder="Support Markdown, such as: 📧 *New Email* *From:* {{from}} *Subject:* {{subject}} ```content {{text}}```"
+                        rows={5}
+                        value={tgTemplate}
+                        disabled={!configs.enable_tg_email_push}
+                        onChange={(e) => setTgTemplate(e.target.value)}
+                      />
+                      <Button
+                        className="h-9 text-nowrap"
+                        disabled={
+                          isPending || tgTemplate === configs.tg_email_template
+                        }
+                        onClick={() =>
+                          handleChange(
+                            tgTemplate,
+                            "tg_email_template",
+                            "STRING",
+                          )
+                        }
+                      >
+                        {t("Save")}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+                <div className="flex flex-col items-start justify-start gap-3">
+                  <div className="space-y-1 leading-none">
+                    <p className="font-medium">
+                      {t("Telegram Push Email White List")}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t(
+                        "Set Telegram push email white list, split by comma, if not set, will push all emails",
+                      )}
+                    </p>
+                  </div>
+                  {configs && (
+                    <div className="flex w-full items-start gap-2">
+                      <Textarea
+                        className="h-16 max-h-32 min-h-9 resize-y bg-white dark:bg-neutral-700"
+                        placeholder=""
+                        rows={5}
+                        value={tgWhiteList}
+                        disabled={!configs.enable_tg_email_push}
+                        onChange={(e) => setTgWhiteList(e.target.value)}
+                      />
+                      <Button
+                        className="h-9 text-nowrap"
+                        disabled={
+                          isPending ||
+                          tgWhiteList === configs.tg_email_target_white_list
+                        }
+                        onClick={() =>
+                          handleChange(
+                            tgWhiteList,
+                            "tg_email_target_white_list",
+                            "STRING",
+                          )
+                        }
+                      >
+                        {t("Save")}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      <Collapsible className="group">
+        <CollapsibleTrigger className="flex w-full items-center justify-between bg-neutral-50 px-4 py-5 dark:bg-neutral-900">
+          <div className="text-lg font-bold">{t("Subdomain Configs")}</div>
+          <Icons.chevronDown className="ml-auto size-4" />
+          <Icons.globeLock className="ml-3 size-4 transition-all group-hover:scale-110" />
+        </CollapsibleTrigger>
+        <CollapsibleContent className="space-y-3 bg-neutral-100 p-4 dark:bg-neutral-800">
+          <div className="space-y-6">
+            <div className="flex items-center justify-between space-x-2">
+              <div className="space-y-1 leading-none">
+                <p className="font-medium">{t("Subdomain Apply Mode")}</p>
+                <p className="text-xs text-muted-foreground">
+                  {t(
+                    "Enable subdomain apply mode, each submission requires administrator review",
+                  )}
+                </p>
+              </div>
+              {configs && (
+                <Switch
+                  defaultChecked={configs.enable_subdomain_apply}
+                  onCheckedChange={(v) =>
+                    handleChange(v, "enable_subdomain_apply", "BOOLEAN")
+                  }
+                />
+              )}
+            </div>
+
+            <div className="flex items-center justify-between space-x-2">
+              <div className="space-y-1 leading-none">
+                <p className="font-medium">
+                  {t("Application Status Email Notifications")}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {t(
+                    "Send email notifications for subdomain application status updates; Notifies administrators when users submit applications and notifies users of approval results; Only available when subdomain application mode is enabled",
+                  )}
+                  . (Brevo)
+                </p>
+              </div>
+              {configs && (
+                <Switch
+                  defaultChecked={configs.enable_subdomain_status_email_pusher}
+                  onCheckedChange={(v) =>
+                    handleChange(
+                      v,
+                      "enable_subdomain_status_email_pusher",
+                      "BOOLEAN",
+                    )
+                  }
+                />
+              )}
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </Card>
+  );
+}

app/(protected)/admin/system/domain-list.tsx

@@ -1,22 +1,24 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useTransition } from "react";
 import Link from "next/link";
 import { User } from "@prisma/client";
-import { PenLine, RefreshCwIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { toast } from "sonner";
 import useSWR, { useSWRConfig } from "swr";
 
 import { DomainFormData } from "@/lib/dto/domains";
-import { fetcher, timeAgo } from "@/lib/utils";
+import { fetcher } from "@/lib/utils";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import {
-  Card,
+  DropdownMenu,
-  CardContent,
+  DropdownMenuContent,
-  CardDescription,
+  DropdownMenuItem,
-  CardHeader,
+  DropdownMenuSeparator,
-} from "@/components/ui/card";
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Modal } from "@/components/ui/modal";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -34,6 +36,7 @@ import { FormType } from "@/components/forms/record-form";
 import { EmptyPlaceholder } from "@/components/shared/empty-placeholder";
 import { Icons } from "@/components/shared/icons";
 import { PaginationWrapper } from "@/components/shared/pagination";
+import { TimeAgoIntl } from "@/components/shared/time-ago";
 
 export interface DomainListProps {
   user: Pick<User, "id" | "name" | "email" | "apiKey" | "role" | "team">;
@@ -70,12 +73,15 @@ function TableColumnSekleton() {
 
 export default function DomainList({ user, action }: DomainListProps) {
   const { isMobile } = useMediaQuery();
+  const [isPending, startTransition] = useTransition();
+  const t = useTranslations("List");
   const [isShowForm, setShowForm] = useState(false);
+  const [isShowDuplicateForm, setShowDuplicateForm] = useState(false);
   const [formType, setFormType] = useState<FormType>("add");
   const [currentEditDomain, setCurrentEditDomain] =
     useState<DomainFormData | null>(null);
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(15);
   const [searchParams, setSearchParams] = useState({
     slug: "",
     target: "",
@@ -117,7 +123,7 @@ export default function DomainList({ user, action }: DomainListProps) {
     if (res.ok) {
       const data = await res.json();
       if (data) {
-        toast.success("Successed!");
+        toast.success("Saved");
         handleRefresh();
       }
     } else {
@@ -125,12 +131,32 @@ export default function DomainList({ user, action }: DomainListProps) {
     }
   };
 
+  const handleDuplicate = () => {
+    startTransition(async () => {
+      const response = await fetch(`${action}/duplicate`, {
+        method: "POST",
+        body: JSON.stringify({
+          domain: currentEditDomain?.domain_name,
+        }),
+      });
+      if (!response.ok || response.status !== 200) {
+        toast.error("Duplicate Failed!", {
+          description: await response.text(),
+        });
+      } else {
+        toast.success(`Duplicate successfully!`);
+        setShowDuplicateForm(false);
+        handleRefresh();
+      }
+    });
+  };
+
   return (
     <>
       <Card className="xl:col-span-2">
         <CardHeader className="flex flex-row items-center gap-2">
           <div className="flex items-center gap-1 text-lg font-bold">
-            <span className="text-nowrap">Total Domains:</span>
+            <span className="text-nowrap">{t("Total Domains")}:</span>
             {isLoading ? (
               <Skeleton className="h-6 w-16" />
             ) : (
@@ -145,9 +171,9 @@ export default function DomainList({ user, action }: DomainListProps) {
               disabled={isLoading}
             >
               {isLoading ? (
-                <RefreshCwIcon className="size-4 animate-spin" />
+                <Icons.refreshCw className="size-4 animate-spin" />
               ) : (
-                <RefreshCwIcon className="size-4" />
+                <Icons.refreshCw className="size-4" />
               )}
             </Button>
             <Button
@@ -161,7 +187,7 @@ export default function DomainList({ user, action }: DomainListProps) {
               }}
             >
               <Icons.add className="size-4" />
-              <span className="hidden sm:inline">Add Domain</span>
+              <span className="hidden sm:inline">{t("Add Domain")}</span>
             </Button>
           </div>
         </CardHeader>
@@ -170,7 +196,7 @@ export default function DomainList({ user, action }: DomainListProps) {
             <div className="relative w-full">
               <Input
                 className="h-8 text-xs md:text-xs"
-                placeholder="Search by domain name..."
+                placeholder={t("Search by domain name") + "..."}
                 value={searchParams.target}
                 onChange={(e) => {
                   setSearchParams({
@@ -197,25 +223,25 @@ export default function DomainList({ user, action }: DomainListProps) {
             <TableHeader className="bg-gray-100/50 dark:bg-primary-foreground">
               <TableRow className="grid grid-cols-4 items-center text-xs sm:grid-cols-7">
                 <TableHead className="col-span-1 flex items-center font-bold">
-                  Domain
+                  {t("Domain Name")}
                 </TableHead>
                 <TableHead className="col-span-1 hidden items-center text-nowrap font-bold sm:flex">
-                  Shorten
+                  {t("Shorten Service")}
                 </TableHead>
                 <TableHead className="col-span-1 hidden items-center text-nowrap font-bold sm:flex">
-                  Email
+                  {t("Email Service")}
                 </TableHead>
                 <TableHead className="col-span-1 hidden items-center text-nowrap font-bold sm:flex">
-                  Subdomain
+                  {t("Subdomain Service")}
                 </TableHead>
                 <TableHead className="col-span-1 flex items-center text-nowrap font-bold">
-                  Active
+                  {t("Active")}
                 </TableHead>
                 <TableHead className="col-span-1 flex items-center font-bold">
-                  Updated
+                  {t("Updated")}
                 </TableHead>
                 <TableHead className="col-span-1 flex items-center font-bold">
-                  Actions
+                  {t("Actions")}
                 </TableHead>
               </TableRow>
             </TableHeader>
@@ -262,6 +288,14 @@ export default function DomainList({ user, action }: DomainListProps) {
                             handleChangeStatus(value, "enable_email", domain)
                           }
                         />
+                        {domain.email_provider === "Resend" &&
+                          domain.resend_api_key && (
+                            <Icons.resend className="mx-0.5 size-4" />
+                          )}
+                        {domain.email_provider === "Brevo" &&
+                          domain.brevo_api_key && (
+                            <Icons.brevo className="mx-0.5 size-4" />
+                          )}
                       </TableCell>
                       <TableCell className="col-span-1 hidden items-center gap-1 sm:flex">
                         <Switch
@@ -270,6 +304,11 @@ export default function DomainList({ user, action }: DomainListProps) {
                             handleChangeStatus(value, "enable_dns", domain)
                           }
                         />
+                        {domain.cf_zone_id &&
+                          domain.cf_api_key &&
+                          domain.cf_email && (
+                            <Icons.cloudflare className="mx-0.5 size-4" />
+                          )}
                       </TableCell>
                       <TableCell className="col-span-1 flex items-center gap-1">
                         <Switch
@@ -281,45 +320,63 @@ export default function DomainList({ user, action }: DomainListProps) {
                         />
                       </TableCell>
                       <TableCell className="col-span-1 flex items-center truncate">
-                        {timeAgo(domain.updatedAt as Date)}
+                        <TimeAgoIntl date={domain.updatedAt as Date} />
                       </TableCell>
                       <TableCell className="col-span-1 flex items-center gap-1">
-                        <Button
+                        <DropdownMenu>
-                          className="h-7 px-1 text-xs hover:bg-slate-100 dark:hover:text-primary-foreground"
+                          <DropdownMenuTrigger asChild>
-                          size="sm"
-                          variant={"outline"}
-                          onClick={() => {
-                            setCurrentEditDomain(domain);
-                            setShowForm(false);
-                            setFormType("edit");
-                            setShowForm(!isShowForm);
-                          }}
-                        >
-                          <p className="hidden sm:block">Edit</p>
-                          <PenLine className="mx-0.5 size-4 sm:ml-1 sm:size-3" />
-                        </Button>
-                        {domain.cf_zone_id &&
-                          domain.cf_api_key &&
-                          domain.cf_email && (
                             <Button
-                              className="h-7 px-1 text-xs hover:bg-slate-100 dark:hover:text-primary-foreground"
+                              className="size-[25px] p-1.5"
                               size="sm"
                               variant="ghost"
                             >
-                              <Icons.cloudflare className="mx-0.5 size-4" />
+                              <Icons.moreVertical className="size-4" />
                             </Button>
-                          )}
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent>
+                            <DropdownMenuItem asChild>
+                              <Button
+                                className="flex w-full items-center gap-2 text-nowrap"
+                                size="sm"
+                                variant="ghost"
+                                onClick={() => {
+                                  setCurrentEditDomain(domain);
+                                  setShowForm(false);
+                                  setFormType("edit");
+                                  setShowForm(!isShowForm);
+                                }}
+                              >
+                                {/* <PenLine className="mx-0.5 size-4" /> */}
+                                {t("Edit")}
+                              </Button>
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem asChild>
+                              <Button
+                                className="flex w-full items-center gap-2"
+                                size="sm"
+                                variant="ghost"
+                                onClick={() => {
+                                  setCurrentEditDomain(domain);
+                                  setShowDuplicateForm(false);
+                                  setShowDuplicateForm(!isShowDuplicateForm);
+                                }}
+                              >
+                                {t("Duplicate")}
+                              </Button>
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
                       </TableCell>
                     </TableRow>
-                    {/* {isShowDomainInfo && selectedDomain?.id === domain.id && (
-                      <DomainInfo domain={domain} />
-                    )} */}
                   </div>
                 ))
               ) : (
                 <EmptyPlaceholder className="shadow-none">
                   <EmptyPlaceholder.Icon name="globeLock" />
-                  <EmptyPlaceholder.Title>No Domains</EmptyPlaceholder.Title>
+                  <EmptyPlaceholder.Title>
+                    {t("No Domains")}
+                  </EmptyPlaceholder.Title>
                   <EmptyPlaceholder.Description>
                     You don&apos;t have any domains yet. Start creating one.
                   </EmptyPlaceholder.Description>
@@ -342,7 +399,7 @@ export default function DomainList({ user, action }: DomainListProps) {
 
       {/* form */}
       <Modal
-        className="max-h-[90vh] overflow-y-auto md:max-w-2xl"
+        className="md:max-w-2xl"
         showModal={isShowForm}
         setShowModal={setShowForm}
       >
@@ -356,6 +413,42 @@ export default function DomainList({ user, action }: DomainListProps) {
           onRefresh={handleRefresh}
         />
       </Modal>
+
+      <Modal
+        showModal={isShowDuplicateForm}
+        setShowModal={setShowDuplicateForm}
+      >
+        <div className="flex flex-col items-start border-b p-4 pt-8 sm:px-16">
+          <h2 className="mb-2 text-lg font-bold">
+            {t("Confirm duplicate domain")} ?
+          </h2>
+          <p>
+            {t(
+              "This will duplicate all configuration information for the {domain} domain, and create a new domain",
+              { domain: currentEditDomain?.domain_name || "" },
+            )}
+            .
+          </p>
+
+          <div className="mt-6 flex w-full items-center justify-between gap-2">
+            <Button
+              type="reset"
+              variant="destructive"
+              className="w-[100px] px-0"
+              onClick={() => setShowDuplicateForm(false)}
+            >
+              {t("Cancel")}
+            </Button>
+            <Button
+              className="w-full text-nowrap"
+              disabled={isPending}
+              onClick={() => handleDuplicate()}
+            >
+              {t("Duplicate")}
+            </Button>
+          </div>
+        </div>
+      </Modal>
     </>
   );
 }

app/(protected)/admin/system/domains/loading.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function SystemSettingsLoading() {
+  return (
+    <>
+      <Skeleton className="h-48 w-full rounded-lg" />
+      <Skeleton className="h-56 w-full rounded-lg" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
+    </>
+  );
+}

app/(protected)/admin/system/domains/page.tsx

@@ -0,0 +1,38 @@
+import { redirect } from "next/navigation";
+
+import { getCurrentUser } from "@/lib/session";
+import { constructMetadata } from "@/lib/utils";
+
+import DomainList from "../domain-list";
+
+export const metadata = constructMetadata({
+  title: "System Settings",
+  description: "",
+});
+
+export default async function DashboardPage() {
+  const user = await getCurrentUser();
+
+  if (!user?.id) redirect("/login");
+
+  return (
+    <>
+      <DomainList
+        user={{
+          id: user.id,
+          name: user.name || "",
+          apiKey: user.apiKey || "",
+          email: user.email || "",
+          role: user.role,
+          team: user.team,
+        }}
+        action="/api/admin/domain"
+      />
+      <p className="rounded-md border border-dashed bg-muted px-3 py-2 text-xs text-muted-foreground">
+        <strong>Note</strong>: Once the domain is bound to the project, it will
+        be used as a business domain to provide services, and direct access to
+        the business domain will redirect to the main site you deploy.
+      </p>
+    </>
+  );
+}

app/(protected)/admin/system/loading.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { DashboardHeader } from "@/components/dashboard/header";
+
+export default function SystemSettingsLoading() {
+  return (
+    <>
+      <DashboardHeader heading="System Settings" text="" />
+      <Skeleton className="h-48 w-full rounded-lg" />
+      <Skeleton className="h-56 w-full rounded-lg" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
+    </>
+  );
+}

app/(protected)/admin/system/page.tsx

@@ -0,0 +1,29 @@
+import { redirect } from "next/navigation";
+
+import { getCurrentUser } from "@/lib/session";
+import { constructMetadata } from "@/lib/utils";
+import { DashboardHeader } from "@/components/dashboard/header";
+
+import AppConfigs from "./app-configs";
+import DomainList from "./domain-list";
+import PlanList from "./plan-list";
+import S3Configs from "./s3-list";
+
+export const metadata = constructMetadata({
+  title: "System Settings",
+  description: "",
+});
+
+export default async function DashboardPage() {
+  const user = await getCurrentUser();
+
+  if (!user?.id) redirect("/login");
+
+  return (
+    <>
+      <DashboardHeader heading="System Settings" text="" />
+      <AppConfigs />
+      <S3Configs />
+    </>
+  );
+}

app/(protected)/admin/system/plan-list.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { useState } from "react";
+import { User } from "@prisma/client";
+import { PenLine } from "lucide-react";
+import { useTranslations } from "next-intl";
+import useSWR, { useSWRConfig } from "swr";
+
+import { PlanQuotaFormData } from "@/lib/dto/plan";
+import { fetcher, nFormatter } from "@/lib/utils";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Modal } from "@/components/ui/modal";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { PlanForm } from "@/components/forms/plan-form";
+import { FormType } from "@/components/forms/record-form";
+import { EmptyPlaceholder } from "@/components/shared/empty-placeholder";
+import { Icons } from "@/components/shared/icons";
+import { PaginationWrapper } from "@/components/shared/pagination";
+import { TimeAgoIntl } from "@/components/shared/time-ago";
+
+export interface PlanListProps {
+  user: Pick<User, "id" | "name" | "email" | "apiKey" | "role" | "team">;
+  action: string;
+}
+
+function TableColumnSekleton() {
+  return (
+    <TableRow className="grid grid-cols-4 items-center sm:grid-cols-8">
+      <TableCell className="col-span-1 flex">
+        <Skeleton className="h-5 w-20" />
+      </TableCell>
+      <TableCell className="col-span-1 hidden sm:flex">
+        <Skeleton className="h-5 w-16" />
+      </TableCell>
+      <TableCell className="col-span-1 hidden sm:flex">
+        <Skeleton className="h-5 w-16" />
+      </TableCell>
+      <TableCell className="col-span-1 hidden sm:flex">
+        <Skeleton className="h-5 w-16" />
+      </TableCell>
+      <TableCell className="col-span-1 hidden sm:flex">
+        <Skeleton className="h-5 w-16" />
+      </TableCell>
+      <TableCell className="col-span-1 flex">
+        <Skeleton className="h-5 w-16" />
+      </TableCell>
+      <TableCell className="col-span-1 flex">
+        <Skeleton className="h-5 w-16" />
+      </TableCell>
+      <TableCell className="col-span-1 flex">
+        <Skeleton className="h-5 w-32" />
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export default function PlanList({ user, action }: PlanListProps) {
+  const { isMobile } = useMediaQuery();
+  const t = useTranslations("List");
+  const [isShowForm, setShowForm] = useState(false);
+  const [formType, setFormType] = useState<FormType>("add");
+  const [currentEditPlan, setCurrentEditPlan] =
+    useState<PlanQuotaFormData | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(15);
+  const [searchParams, setSearchParams] = useState({
+    slug: "",
+    target: "",
+    userName: "",
+  });
+
+  const { mutate } = useSWRConfig();
+  const { data, isLoading } = useSWR<{
+    total: number;
+    list: PlanQuotaFormData[];
+  }>(
+    `${action}?page=${currentPage}&size=${pageSize}&target=${searchParams.target}`,
+    fetcher,
+  );
+
+  const handleRefresh = () => {
+    mutate(
+      `${action}?page=${currentPage}&size=${pageSize}&target=${searchParams.target}`,
+      undefined,
+    );
+  };
+
+  return (
+    <>
+      <Card className="xl:col-span-2">
+        <CardHeader className="flex flex-row items-center gap-2">
+          <div className="flex items-center gap-1 text-lg font-bold">
+            <span className="text-nowrap">{t("Quota Settings")}</span>
+          </div>
+
+          <div className="ml-auto flex items-center justify-end gap-3">
+            <Button
+              variant={"outline"}
+              onClick={() => handleRefresh()}
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <Icons.refreshCw className="size-4 animate-spin" />
+              ) : (
+                <Icons.refreshCw className="size-4" />
+              )}
+            </Button>
+            <Button
+              className="flex shrink-0 gap-1"
+              variant="default"
+              onClick={() => {
+                setCurrentEditPlan(null);
+                setShowForm(false);
+                setFormType("add");
+                setShowForm(!isShowForm);
+              }}
+            >
+              <Icons.add className="size-4" />
+              <span className="hidden sm:inline">{t("Add Plan")}</span>
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader className="bg-gray-100/50 dark:bg-primary-foreground">
+              <TableRow className="grid grid-cols-4 items-center text-xs sm:grid-cols-8">
+                <TableHead className="col-span-1 flex items-center font-bold">
+                  {t("Plan Name")}
+                </TableHead>
+                <TableHead className="col-span-1 hidden items-center text-nowrap font-bold sm:flex">
+                  {t("Short Limit")}
+                </TableHead>
+                <TableHead className="col-span-1 hidden items-center text-nowrap font-bold sm:flex">
+                  {t("Email Limit")}
+                </TableHead>
+                <TableHead className="col-span-1 hidden items-center text-nowrap font-bold sm:flex">
+                  {t("Send Limit")}
+                </TableHead>
+                <TableHead className="col-span-1 hidden items-center text-nowrap font-bold sm:flex">
+                  {t("Record Limit")}
+                </TableHead>
+                <TableHead className="col-span-1 flex items-center text-nowrap font-bold">
+                  {t("Active")}
+                </TableHead>
+                <TableHead className="col-span-1 flex items-center font-bold">
+                  {t("Updated")}
+                </TableHead>
+                <TableHead className="col-span-1 flex items-center font-bold">
+                  {t("Actions")}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {isLoading ? (
+                <>
+                  <TableColumnSekleton />
+                  <TableColumnSekleton />
+                  <TableColumnSekleton />
+                  <TableColumnSekleton />
+                  <TableColumnSekleton />
+                </>
+              ) : data && data.list && data.list.length ? (
+                data.list.map((plan) => (
+                  <div className="border-b" key={plan.id}>
+                    <TableRow className="grid grid-cols-4 items-center sm:grid-cols-8">
+                      <TableCell className="col-span-1 flex items-center gap-1">
+                        {plan.name}
+                      </TableCell>
+                      <TableCell className="col-span-1 hidden items-center gap-1 sm:flex">
+                        {nFormatter(plan.slNewLinks)}
+                      </TableCell>
+                      <TableCell className="col-span-1 hidden items-center gap-1 sm:flex">
+                        {nFormatter(plan.emEmailAddresses)}
+                      </TableCell>
+                      <TableCell className="col-span-1 hidden items-center gap-1 sm:flex">
+                        {nFormatter(plan.emSendEmails)}
+                      </TableCell>
+                      <TableCell className="col-span-1 hidden items-center gap-1 sm:flex">
+                        {nFormatter(plan.rcNewRecords)}
+                      </TableCell>
+                      <TableCell className="col-span-1 flex items-center gap-1">
+                        <Switch
+                          disabled
+                          defaultChecked={plan.isActive}
+                          // onCheckedChange={(value) =>
+                          // handleChangeStatus(value, "active", domain)
+                          // }
+                        />
+                      </TableCell>
+                      <TableCell className="col-span-1 flex items-center truncate">
+                        <TimeAgoIntl date={plan.updatedAt as Date} />
+                      </TableCell>
+                      <TableCell className="col-span-1 flex items-center gap-1">
+                        <Button
+                          className="h-7 px-1 text-xs hover:bg-slate-100 dark:hover:text-primary-foreground sm:px-1.5"
+                          size="sm"
+                          variant={"outline"}
+                          onClick={() => {
+                            setCurrentEditPlan(plan);
+                            setShowForm(false);
+                            setFormType("edit");
+                            setShowForm(!isShowForm);
+                          }}
+                        >
+                          <p className="hidden text-nowrap sm:block">
+                            {t("Edit")}
+                          </p>
+                          <PenLine className="mx-0.5 size-4 sm:ml-1 sm:size-3" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  </div>
+                ))
+              ) : (
+                <EmptyPlaceholder className="shadow-none">
+                  <EmptyPlaceholder.Icon name="settings" />
+                  <EmptyPlaceholder.Title>
+                    {t("No Plans")}
+                  </EmptyPlaceholder.Title>
+                  <EmptyPlaceholder.Description>
+                    You don&apos;t have any plans yet. Start creating one.
+                  </EmptyPlaceholder.Description>
+                </EmptyPlaceholder>
+              )}
+            </TableBody>
+            {data && Math.ceil(data.total / pageSize) > 1 && (
+              <PaginationWrapper
+                layout={isMobile ? "right" : "split"}
+                total={data.total}
+                currentPage={currentPage}
+                setCurrentPage={setCurrentPage}
+                pageSize={pageSize}
+                setPageSize={setPageSize}
+              />
+            )}
+          </Table>
+        </CardContent>
+      </Card>
+
+      {/* form */}
+      <Modal
+        className="md:max-w-2xl"
+        showModal={isShowForm}
+        setShowModal={setShowForm}
+      >
+        <PlanForm
+          user={{ id: user.id, name: user.name || "" }}
+          isShowForm={isShowForm}
+          setShowForm={setShowForm}
+          type={formType}
+          initData={currentEditPlan}
+          action={action}
+          onRefresh={handleRefresh}
+        />
+      </Modal>
+    </>
+  );
+}

app/(protected)/admin/system/plans/loading.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function SystemSettingsLoading() {
+  return (
+    <>
+      <Skeleton className="h-48 w-full rounded-lg" />
+      <Skeleton className="h-56 w-full rounded-lg" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
+    </>
+  );
+}

app/(protected)/admin/system/plans/page.tsx

@@ -0,0 +1,33 @@
+import { redirect } from "next/navigation";
+
+import { getCurrentUser } from "@/lib/session";
+import { constructMetadata } from "@/lib/utils";
+
+import PlanList from "../plan-list";
+
+export const metadata = constructMetadata({
+  title: "System Settings",
+  description: "",
+});
+
+export default async function DashboardPage() {
+  const user = await getCurrentUser();
+
+  if (!user?.id) redirect("/login");
+
+  return (
+    <>
+      <PlanList
+        user={{
+          id: user.id,
+          name: user.name || "",
+          apiKey: user.apiKey || "",
+          email: user.email || "",
+          role: user.role,
+          team: user.team,
+        }}
+        action="/api/admin/plan"
+      />
+    </>
+  );
+}

app/(protected)/admin/system/s3-list.tsx

@@ -0,0 +1,711 @@
+"use client";
+
+import { useEffect, useMemo, useState, useTransition } from "react";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import useSWR from "swr";
+
+import { BucketItem, CloudStorageCredentials } from "@/lib/s3";
+import { cn, fetcher, formatFileSize } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Icons } from "@/components/shared/icons";
+
+export default function S3Configs({}: {}) {
+  const t = useTranslations("Setting");
+  const [isPending, startTransition] = useTransition();
+  const [s3Configs, setS3Configs] = useState<CloudStorageCredentials[]>([]);
+
+  const {
+    data: configs,
+    isLoading,
+    mutate,
+  } = useSWR<Record<string, any>>("/api/admin/s3", fetcher);
+
+  const S3_PRVIDERS = [
+    {
+      label: "Cloudflare R2",
+      value: "Cloudflare R2",
+      platform: "cloudflare",
+      channel: "r2",
+    },
+    { label: "AWS S3", value: "AWS S3", platform: "aws", channel: "s3" },
+    {
+      label: "Tencent COS",
+      value: "Tencent COS",
+      platform: "tencent",
+      channel: "cos",
+    },
+    { label: "Ali OSS", value: "Ali OSS", platform: "ali", channel: "oss" },
+    {
+      label: "Custom Provider",
+      value: "Custom Provider",
+      platform: "custom provider",
+      channel: "cp",
+    },
+  ];
+
+  useEffect(() => {
+    if (configs && configs?.s3_config_list) {
+      setS3Configs(configs.s3_config_list);
+    }
+  }, [configs]);
+
+  function isProviderNameUnique(array: CloudStorageCredentials[]): boolean {
+    const names = array.map((item) => item.provider_name);
+    return new Set(names).size === names.length;
+  }
+
+  const handleSaveConfigs = (value: any, key: string, type: string) => {
+    if (!isProviderNameUnique(s3Configs)) {
+      toast.error("Provider name must be unique");
+      return;
+    }
+    startTransition(async () => {
+      const res = await fetch("/api/admin/s3", {
+        method: "POST",
+        body: JSON.stringify({ key, value, type }),
+      });
+      if (res.ok) {
+        toast.success("Saved");
+        mutate();
+      } else {
+        toast.error("Failed to save", {
+          description: await res.text(),
+        });
+      }
+    });
+  };
+
+  const canSaveR2Credentials = useMemo(() => {
+    if (!configs) return true;
+
+    return (
+      Object.keys(s3Configs).some(
+        (key) => s3Configs[key] !== configs.s3_config_list[key],
+      ) || configs.s3_config_list.length !== s3Configs.length
+    );
+  }, [s3Configs, configs]);
+
+  if (isLoading) {
+    return <Skeleton className="h-48 w-full rounded-lg" />;
+  }
+
+  return (
+    <Card>
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger className="flex w-full items-center justify-between gap-3 bg-neutral-50 px-4 py-5 dark:bg-neutral-900">
+          <p className="mr-auto text-lg font-bold">
+            {t("Cloud Storage Configs")}
+          </p>
+          {canSaveR2Credentials && (
+            <Button
+              className="h-7 px-2 py-1 text-xs"
+              size={"sm"}
+              disabled={isPending || !canSaveR2Credentials}
+              onClick={(e) => {
+                e.preventDefault();
+                handleSaveConfigs(s3Configs, "s3_config_list", "OBJECT");
+              }}
+            >
+              {isPending ? (
+                <Icons.spinner className="mr-1 size-4 animate-spin" />
+              ) : null}
+              {t("Save Modifications")}
+            </Button>
+          )}
+          <p
+            className="flex h-[30px] items-center gap-1 rounded-md border bg-primary px-2 py-1 text-xs font-medium text-primary-foreground hover:opacity-80"
+            onClick={(e) => {
+              e.preventDefault();
+              setS3Configs([
+                ...s3Configs,
+                {
+                  platform: "cloudflare",
+                  channel: "s3",
+                  provider_name: `Cloudflare R2 (${s3Configs.length + 1})`,
+                  account_id: "",
+                  access_key_id: "",
+                  secret_access_key: "",
+                  endpoint: "",
+                  enabled: true,
+                  buckets: [
+                    {
+                      bucket: "",
+                      prefix: "",
+                      file_types: "",
+                      region: "auto",
+                      custom_domain: "",
+                      file_size: "26214400",
+                      max_storage: "1073741824",
+                      max_files: "1000",
+                      public: true,
+                    },
+                  ],
+                },
+              ]);
+            }}
+          >
+            <Icons.add className="size-3" />
+            {t("Add Provider")}
+          </p>
+          <Icons.chevronDown className="size-4" />
+        </CollapsibleTrigger>
+        <CollapsibleContent className="space-y-3 bg-neutral-100 p-4 dark:bg-neutral-800">
+          {s3Configs.map((config, index) => {
+            const updateBucket = (
+              bucketIndex: number,
+              updates: Partial<BucketItem>,
+            ) => {
+              const newBuckets = [...config.buckets];
+              newBuckets[bucketIndex] = {
+                ...newBuckets[bucketIndex],
+                ...updates,
+              };
+              setS3Configs(
+                s3Configs.map((c, i) => {
+                  if (i === index) {
+                    return {
+                      ...c,
+                      buckets: newBuckets,
+                    };
+                  }
+                  return c;
+                }),
+              );
+            };
+            return (
+              <Collapsible
+                className={cn(
+                  index !== s3Configs.length - 1 && "border-b pb-3",
+                  "group",
+                )}
+                key={index}
+              >
+                <CollapsibleTrigger className="flex w-full items-center justify-between gap-3">
+                  <p className="mr-auto font-semibold group-hover:font-bold">
+                    {config.provider_name}
+                  </p>
+                  <Badge className="text-xs" variant="outline">
+                    {t("{length} Buckets", {
+                      length: config.buckets.length,
+                    })}
+                  </Badge>
+                  <Icons.trash
+                    className="size-6 rounded border p-1 text-muted-foreground hover:border-red-500 hover:bg-red-50 hover:text-red-500"
+                    onClick={() => {
+                      setS3Configs(s3Configs.filter((_, i) => i !== index));
+                    }}
+                  />
+                  <Icons.chevronDown className="size-4" />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="mt-3 space-y-4 rounded-lg border p-6 shadow-md transition-colors duration-75 group-hover:bg-primary-foreground">
+                  {/* Base */}
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                    <div className="space-y-1">
+                      <Label>{t("Provider")}*</Label>
+                      <Select
+                        value={`${config.platform} (${config.channel})`}
+                        onValueChange={(v) => {
+                          const provider = S3_PRVIDERS.find(
+                            (p) => `${p.platform} (${p.channel})` === v,
+                          );
+                          setS3Configs(
+                            s3Configs.map((c, i) => {
+                              if (i === index) {
+                                return {
+                                  ...c,
+                                  provider_name: `${provider?.value} (${index + 1})`,
+                                  channel: provider?.channel || "",
+                                  platform: provider?.platform || "",
+                                };
+                              }
+                              return c;
+                            }),
+                          );
+                        }}
+                      >
+                        <SelectTrigger className="bg-neutral-100 dark:bg-neutral-800">
+                          <SelectValue placeholder="Select a provider" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {S3_PRVIDERS.map((provider) => (
+                            <SelectItem
+                              key={`${provider.platform} (${provider.channel})`}
+                              value={`${provider.platform} (${provider.channel})`}
+                            >
+                              {provider.platform} ({provider.channel})
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-1">
+                      <Label>
+                        {t("Provider Unique Name")}* ({t("Unique")})
+                      </Label>
+                      <Input
+                        value={config.provider_name}
+                        placeholder="provider display name"
+                        onChange={(e) =>
+                          setS3Configs(
+                            s3Configs.map((c, i) => {
+                              if (i === index) {
+                                return {
+                                  ...c,
+                                  provider_name: e.target.value,
+                                };
+                              }
+                              return c;
+                            }),
+                          )
+                        }
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <Label>{t("Endpoint")}*</Label>
+                      <Input
+                        value={config.endpoint}
+                        placeholder="https://<account_id>.r2.cloudflarestorage.com"
+                        onChange={(e) =>
+                          setS3Configs(
+                            s3Configs.map((c, i) => {
+                              if (i === index) {
+                                return {
+                                  ...c,
+                                  endpoint: e.target.value,
+                                };
+                              }
+                              return c;
+                            }),
+                          )
+                        }
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <Label>{t("Access Key ID")}*</Label>
+                      <Input
+                        value={config.access_key_id}
+                        onChange={(e) =>
+                          setS3Configs(
+                            s3Configs.map((c, i) => {
+                              if (i === index) {
+                                return {
+                                  ...c,
+                                  access_key_id: e.target.value,
+                                };
+                              }
+                              return c;
+                            }),
+                          )
+                        }
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <Label>{t("Secret Access Key")}*</Label>
+                      <Input
+                        value={config.secret_access_key}
+                        onChange={(e) =>
+                          setS3Configs(
+                            s3Configs.map((c, i) => {
+                              if (i === index) {
+                                return {
+                                  ...c,
+                                  secret_access_key: e.target.value,
+                                };
+                              }
+                              return c;
+                            }),
+                          )
+                        }
+                      />
+                    </div>
+                    <div className="flex flex-col justify-center space-y-3">
+                      <Label>{t("Enabled")}*</Label>
+                      <Switch
+                        checked={config.enabled}
+                        onCheckedChange={(e) =>
+                          setS3Configs(
+                            s3Configs.map((c, i) => {
+                              if (i === index) {
+                                return {
+                                  ...c,
+                                  enabled: e,
+                                };
+                              }
+                              return c;
+                            }),
+                          )
+                        }
+                      />
+                    </div>
+                  </div>
+                  {/* buckets */}
+                  {config.buckets.map((bucket, index2) => (
+                    <motion.div
+                      className="relative grid grid-cols-1 gap-4 rounded-lg border border-dashed border-muted-foreground px-3 pb-3 pt-10 text-neutral-600 dark:text-neutral-400 sm:grid-cols-4"
+                      key={`bucket-${index2}`}
+                      layout
+                      initial={{ opacity: 0, scale: 0.9 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.9 }}
+                      transition={{
+                        layout: { duration: 0.3, ease: "easeInOut" },
+                        opacity: { duration: 0.2 },
+                        scale: { duration: 0.2 },
+                      }}
+                    >
+                      <p className="absolute left-2 top-3 text-xs text-muted-foreground">
+                        {t("Bucket")} {index2 + 1}
+                      </p>
+
+                      {/* 按钮部分 */}
+                      <div className="absolute right-2 top-2 flex items-center justify-between space-x-2">
+                        {index2 > 0 && (
+                          <Button
+                            className="h-[30px] px-1.5"
+                            size={"sm"}
+                            variant={"ghost"}
+                            onClick={() => {
+                              const newBuckets = [...config.buckets];
+                              newBuckets.splice(index2, 1);
+                              newBuckets.splice(index2 - 1, 0, bucket);
+                              setS3Configs(
+                                s3Configs.map((c, i) => {
+                                  if (i === index) {
+                                    return {
+                                      ...c,
+                                      buckets: newBuckets,
+                                    };
+                                  }
+                                  return c;
+                                }),
+                              );
+                            }}
+                          >
+                            <Icons.arrowUp className="size-4" />
+                          </Button>
+                        )}
+                        {index2 < config.buckets.length - 1 && (
+                          <Button
+                            className="h-[30px] px-1.5"
+                            size={"sm"}
+                            variant={"ghost"}
+                            onClick={() => {
+                              const newBuckets = [...config.buckets];
+                              newBuckets.splice(index2, 1);
+                              newBuckets.splice(index2 + 1, 0, bucket);
+                              setS3Configs(
+                                s3Configs.map((c, i) => {
+                                  if (i === index) {
+                                    return {
+                                      ...c,
+                                      buckets: newBuckets,
+                                    };
+                                  }
+                                  return c;
+                                }),
+                              );
+                            }}
+                          >
+                            <Icons.arrowDown className="size-4" />
+                          </Button>
+                        )}
+                        <Button
+                          className="ml-auto h-[30px] px-1.5"
+                          size={"sm"}
+                          variant={"outline"}
+                          onClick={() => {
+                            const newBuckets = [...config.buckets];
+                            newBuckets.splice(index2 + 1, 0, {
+                              bucket: "",
+                              prefix: "",
+                              file_types: "",
+                              region: "auto",
+                              custom_domain: "",
+                              file_size: "26214400",
+                              max_storage: "1073741824",
+                              max_files: "1000",
+                              public: true,
+                            });
+                            setS3Configs(
+                              s3Configs.map((c, i) => {
+                                if (i === index) {
+                                  return {
+                                    ...c,
+                                    buckets: newBuckets,
+                                  };
+                                }
+                                return c;
+                              }),
+                            );
+                          }}
+                        >
+                          <Icons.add className="size-4" />
+                        </Button>
+                        {index2 !== 0 && (
+                          <Button
+                            className="h-[30px] px-1.5"
+                            size={"sm"}
+                            variant={"outline"}
+                            onClick={() => {
+                              const newBuckets = [...config.buckets];
+                              newBuckets.splice(index2, 1);
+                              setS3Configs(
+                                s3Configs.map((c, i) => {
+                                  if (i === index) {
+                                    return {
+                                      ...c,
+                                      buckets: newBuckets,
+                                    };
+                                  }
+                                  return c;
+                                }),
+                              );
+                            }}
+                          >
+                            <Icons.trash className="size-4" />
+                          </Button>
+                        )}
+                      </div>
+
+                      {/* 使用 updateBucket 函数的输入字段 */}
+                      <div className="space-y-1">
+                        <Label>{t("Bucket Name")}*</Label>
+                        <Input
+                          value={bucket.bucket}
+                          placeholder="bucket name"
+                          onChange={(e) =>
+                            updateBucket(index2, { bucket: e.target.value })
+                          }
+                        />
+                      </div>
+
+                      <div className="space-y-1">
+                        <Label>{t("Public Domain")}*</Label>
+                        <Input
+                          value={bucket.custom_domain}
+                          placeholder="https://endpoint or custom domain"
+                          onChange={(e) =>
+                            updateBucket(index2, {
+                              custom_domain: e.target.value,
+                            })
+                          }
+                        />
+                      </div>
+
+                      <div className="space-y-1">
+                        <Label>{t("Region")}</Label>
+                        <Input
+                          value={bucket.region}
+                          placeholder="auto"
+                          onChange={(e) =>
+                            updateBucket(index2, { region: e.target.value })
+                          }
+                        />
+                      </div>
+
+                      <div className="space-y-1">
+                        <Label>
+                          {t("Prefix")} ({t("Optional")})
+                        </Label>
+                        <Input
+                          value={bucket.prefix}
+                          placeholder="2025/08/08"
+                          onChange={(e) =>
+                            updateBucket(index2, { prefix: e.target.value })
+                          }
+                        />
+                      </div>
+
+                      <div className="mt-1 space-y-2">
+                        <div className="flex items-center gap-1">
+                          <Label>{t("Max File Size")}</Label>
+                          <TooltipProvider>
+                            <Tooltip delayDuration={0}>
+                              <TooltipTrigger>
+                                <Icons.help className="size-4 text-muted-foreground" />
+                              </TooltipTrigger>
+                              <TooltipContent className="max-w-64 text-wrap">
+                                {t("maxFileSizeTooltip")}
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                        </div>
+                        <div className="relative">
+                          <Input
+                            value={bucket.file_size}
+                            placeholder="26214400"
+                            onChange={(e) =>
+                              updateBucket(index2, {
+                                file_size: e.target.value,
+                              })
+                            }
+                          />
+                          {bucket.file_size && (
+                            <span className="absolute right-2 top-[11px] text-xs text-muted-foreground">
+                              ≈{formatFileSize(Number(bucket.file_size))}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                      <div className="space-y-1">
+                        <Label>{t("Max File Count")}</Label>
+                        <Input
+                          value={bucket.max_files}
+                          placeholder="1000"
+                          onChange={(e) =>
+                            updateBucket(index2, {
+                              max_files: e.target.value,
+                            })
+                          }
+                        />
+                      </div>
+                      <div className="mt-1 space-y-2">
+                        <div className="flex items-center gap-1">
+                          <Label>{t("Max Storage")}</Label>
+                          <TooltipProvider>
+                            <Tooltip delayDuration={0}>
+                              <TooltipTrigger>
+                                <Icons.help className="size-4 text-muted-foreground" />
+                              </TooltipTrigger>
+                              <TooltipContent className="max-w-64 text-wrap">
+                                {t("maxStorageTooltip")}
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                        </div>
+                        <div className="relative">
+                          <Input
+                            value={bucket.max_storage}
+                            placeholder="10737418240"
+                            onChange={(e) =>
+                              updateBucket(index2, {
+                                max_storage: e.target.value,
+                              })
+                            }
+                          />
+                          {bucket.max_storage && (
+                            <span className="absolute right-2 top-[11px] text-xs text-muted-foreground">
+                              ≈{formatFileSize(Number(bucket.max_storage))}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+
+                      <div className="flex flex-col justify-center space-y-3">
+                        <div className="flex items-center gap-1">
+                          <Label>{t("Public")}</Label>
+                          <TooltipProvider>
+                            <Tooltip delayDuration={0}>
+                              <TooltipTrigger>
+                                <Icons.help className="size-4 text-muted-foreground" />
+                              </TooltipTrigger>
+                              <TooltipContent className="max-w-56 text-wrap">
+                                {t(
+                                  "Publicize this storage bucket, all registered users can upload files to this storage bucket; If not public, only administrators can upload files to this storage bucket",
+                                )}
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                        </div>
+                        <Switch
+                          checked={bucket.public}
+                          onCheckedChange={(e) =>
+                            updateBucket(index2, { public: e })
+                          }
+                        />
+                      </div>
+                    </motion.div>
+                  ))}
+                  {/* actions */}
+                  <div className="flex items-center justify-between gap-3">
+                    <Link
+                      className="text-sm text-blue-500 hover:underline"
+                      href="/docs/developer/cloud-storage"
+                      target="_blank"
+                    >
+                      {t("How to get the S3 credentials?")}
+                    </Link>
+                    {/* <Button
+                      className="ml-auto"
+                      variant="destructive"
+                      onClick={() => {
+                        setS3Configs([
+                          {
+                            platform: "cloudflare",
+                            channel: "r2",
+                            provider_name: "Cloudflare R2",
+                            endpoint: "",
+                            access_key_id: "",
+                            secret_access_key: "",
+                            buckets: [
+                              {
+                                bucket: "",
+                                prefix: "",
+                                file_types: "",
+                                region: "auto",
+                                custom_domain: "",
+                                file_size: "26214400",
+                                max_storage: "",
+                                public: true,
+                              },
+                            ],
+                            account_id: "",
+                            enabled: false,
+                          },
+                        ]);
+                      }}
+                    >
+                      {t("Clear")}
+                    </Button> */}
+                    <Button
+                      disabled={isPending || !canSaveR2Credentials}
+                      onClick={() => {
+                        handleSaveConfigs(
+                          s3Configs,
+                          "s3_config_list",
+                          "OBJECT",
+                        );
+                      }}
+                    >
+                      {isPending ? (
+                        <Icons.spinner className="mr-1 size-4 animate-spin" />
+                      ) : null}
+                      {t("Save")}
+                    </Button>
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            );
+          })}
+        </CollapsibleContent>
+      </Collapsible>
+    </Card>
+  );
+}

app/(protected)/admin/urls/analytics/loading.tsx

@@ -0,0 +1,9 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function DashboardUrlsLoading() {
+  return (
+    <>
+      <Skeleton className="h-[400px] w-full rounded-lg" />
+    </>
+  );
+}

app/(protected)/admin/urls/analytics/page.tsx

@@ -0,0 +1,22 @@
+import { redirect } from "next/navigation";
+
+import { getCurrentUser } from "@/lib/session";
+import { constructMetadata } from "@/lib/utils";
+import Globe from "@/app/(protected)/dashboard/urls/globe";
+
+export const metadata = constructMetadata({
+  title: "Globe Analytics",
+  description: "Display link's globe analytics.",
+});
+
+export default async function DashboardPage() {
+  const user = await getCurrentUser();
+
+  if (!user?.id) redirect("/login");
+
+  return (
+    <>
+      <Globe isAdmin />
+    </>
+  );
+}

app/(protected)/admin/urls/loading.tsx

@@ -1,11 +1,14 @@
 import { Skeleton } from "@/components/ui/skeleton";
-import { DashboardHeader } from "@/components/dashboard/header";
 
 export default function DashboardUrlsLoading() {
   return (
     <>
-      <DashboardHeader heading="Short Urls" text="" />
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-4">
-      <Skeleton className="h-32 w-full rounded-lg" />
+        <Skeleton className="h-[102px] w-full rounded-lg" />
+        <Skeleton className="h-[102px] w-full rounded-lg" />
+        <Skeleton className="h-[102px] w-full rounded-lg" />
+        <Skeleton className="h-[102px] w-full rounded-lg" />
+      </div>
       <Skeleton className="h-[400px] w-full rounded-lg" />
     </>
   );

app/(protected)/admin/urls/logs/loading.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { DashboardHeader } from "@/components/dashboard/header";
+
+export default function DashboardUrlsLoading() {
+  return (
+    <>
+      <DashboardHeader heading="Live Logs" text="" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
+    </>
+  );
+}

app/(protected)/admin/urls/logs/page.tsx

@@ -0,0 +1,24 @@
+import { redirect } from "next/navigation";
+
+import { getCurrentUser } from "@/lib/session";
+import { constructMetadata } from "@/lib/utils";
+import { DashboardHeader } from "@/components/dashboard/header";
+import LiveLog from "@/app/(protected)/dashboard/urls/live-logs";
+
+export const metadata = constructMetadata({
+  title: "Live Logs",
+  description: "Display link's real-time live logs.",
+});
+
+export default async function DashboardPage() {
+  const user = await getCurrentUser();
+
+  if (!user?.id) redirect("/login");
+
+  return (
+    <>
+      <DashboardHeader heading="Live Logs" text="" />
+      <LiveLog live={true} admin />
+    </>
+  );
+}

app/(protected)/admin/urls/page.tsx

@@ -2,13 +2,12 @@ import { redirect } from "next/navigation";
 
 import { getCurrentUser } from "@/lib/session";
 import { constructMetadata } from "@/lib/utils";
-import { DashboardHeader } from "@/components/dashboard/header";
 
 import UserUrlsList from "../../dashboard/urls/url-list";
 
 export const metadata = constructMetadata({
-  title: "Short URLs - WR.DO",
+  title: "Links",
-  description: "List and manage records.",
+  description: "List and manage short links.",
 });
 
 export default async function DashboardPage() {
@@ -18,13 +17,6 @@ export default async function DashboardPage() {
 
   return (
     <>
-      <DashboardHeader
-        heading="Manage&nbsp;Short&nbsp;URLs"
-        text="List and manage short urls."
-        link="/docs/short-urls"
-        linkText="short urls."
-      />
-
       <UserUrlsList
         user={{
           id: user.id,

app/(protected)/admin/users/loading.tsx

@@ -6,7 +6,7 @@ export default function OrdersLoading() {
     <>
       <DashboardHeader
         heading="User Management"
-        text="List and manage all users."
+        text="List and manage all users"
       />
       <Skeleton className="h-32 w-full rounded-lg" />
       <Skeleton className="h-[400px] w-full rounded-lg" />

app/(protected)/admin/users/page.tsx

@@ -7,7 +7,7 @@ import { DashboardHeader } from "@/components/dashboard/header";
 import UsersList from "./user-list";
 
 export const metadata = constructMetadata({
-  title: "User Management – WR.DO",
+  title: "User Management",
   description: "List and manage all users.",
 });
 
@@ -20,7 +20,7 @@ export default async function UsersPage() {
     <>
       <DashboardHeader
         heading="User Management"
-        text="List and manage all users."
+        text="List and manage all users"
       />
       <UsersList user={{ id: user.id, name: user.name || "" }} />
     </>

app/(protected)/admin/users/user-list.tsx

@@ -2,10 +2,11 @@
 
 import { useState } from "react";
 import { User } from "@prisma/client";
-import { PenLine, RefreshCwIcon } from "lucide-react";
+import { PenLine } from "lucide-react";
+import { useTranslations } from "next-intl";
 import useSWR, { useSWRConfig } from "swr";
 
-import { fetcher, timeAgo } from "@/lib/utils";
+import { fetcher } from "@/lib/utils";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -33,12 +34,11 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { UserForm } from "@/components/forms/user-form";
+import { FormType, UserForm } from "@/components/forms/user-form";
 import { EmptyPlaceholder } from "@/components/shared/empty-placeholder";
 import { Icons } from "@/components/shared/icons";
 import { PaginationWrapper } from "@/components/shared/pagination";
-
+import { TimeAgoIntl } from "@/components/shared/time-ago";
-import CountUpFn from "../../../../components/dashboard/count-up";
 
 export interface UrlListProps {
   user: Pick<User, "id" | "name">;
@@ -74,15 +74,18 @@ function TableColumnSekleton({ className }: { className?: string }) {
 
 export default function UsersList({ user }: UrlListProps) {
   const { isMobile } = useMediaQuery();
+  const [formType, setFormType] = useState<FormType>("add");
   const [isShowForm, setShowForm] = useState(false);
   const [currentEditUser, setcurrentEditUser] = useState<User | null>(null);
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(15);
   const [searchParams, setSearchParams] = useState({
     email: "",
     userName: "",
   });
 
+  const t = useTranslations("List");
+
   const { mutate } = useSWRConfig();
   const { data, isLoading } = useSWR<{ total: number; list: User[] }>(
     `/api/user/admin?page=${currentPage}&size=${pageSize}&email=${searchParams.email}&userName=${searchParams.userName}`,
@@ -104,10 +107,8 @@ export default function UsersList({ user }: UrlListProps) {
       <Card className="xl:col-span-2">
         <CardHeader className="flex flex-row items-center">
           <CardDescription className="text-balance text-lg font-bold">
-            <span>Total Users:</span>{" "}
+            <span>{t("Total Users")}:</span>{" "}
-            <span className="font-bold">
+            <span className="font-bold">{data && data.total}</span>
-              {data && <CountUpFn count={data.total} />}
-            </span>
           </CardDescription>
           <div className="ml-auto flex items-center justify-end gap-3">
             <Button
@@ -116,11 +117,24 @@ export default function UsersList({ user }: UrlListProps) {
               disabled={isLoading}
             >
               {isLoading ? (
-                <RefreshCwIcon className="size-4 animate-spin" />
+                <Icons.refreshCw className="size-4 animate-spin" />
               ) : (
-                <RefreshCwIcon className="size-4" />
+                <Icons.refreshCw className="size-4" />
               )}
             </Button>
+            <Button
+              className="flex shrink-0 gap-1"
+              variant="default"
+              onClick={() => {
+                setcurrentEditUser(null);
+                setShowForm(false);
+                setFormType("add");
+                setShowForm(!isShowForm);
+              }}
+            >
+              <Icons.add className="size-4" />
+              <span className="hidden sm:inline">{t("Add User")}</span>
+            </Button>
           </div>
         </CardHeader>
         <CardContent>
@@ -179,25 +193,25 @@ export default function UsersList({ user }: UrlListProps) {
             <TableHeader className="bg-gray-100/50 dark:bg-primary-foreground">
               <TableRow className="grid grid-cols-3 items-center sm:grid-cols-8">
                 <TableHead className="col-span-1 flex items-center font-bold">
-                  Name
+                  {t("Name")}
                 </TableHead>
                 <TableHead className="col-span-1 flex items-center font-bold sm:col-span-2">
-                  Email
+                  {t("Email")}
                 </TableHead>
                 <TableHead className="col-span-1 hidden items-center justify-center font-bold sm:flex">
-                  Role
+                  {t("Role")}
                 </TableHead>
                 <TableHead className="col-span-1 hidden items-center justify-center font-bold sm:flex">
-                  Plan
+                  {t("Plan")}
                 </TableHead>
                 <TableHead className="col-span-1 hidden items-center justify-center font-bold sm:flex">
-                  Status
+                  {t("Status")}
                 </TableHead>
                 <TableHead className="col-span-1 hidden items-center justify-center font-bold sm:flex">
-                  Join
+                  {t("Join")}
                 </TableHead>
                 <TableHead className="col-span-1 flex items-center justify-center font-bold">
-                  Actions
+                  {t("Actions")}
                 </TableHead>
               </TableRow>
             </TableHeader>
@@ -240,19 +254,19 @@ export default function UsersList({ user }: UrlListProps) {
                     </TableCell>
                     <TableCell className="col-span-1 hidden justify-center sm:flex">
                       <Badge className="text-xs" variant="outline">
-                        {user.role}
+                        {t(user.role)}
                       </Badge>
                     </TableCell>
                     <TableCell className="col-span-1 hidden justify-center sm:flex">
                       <Badge className="text-xs" variant="outline">
-                        {user.team?.toLocaleUpperCase()}
+                        {user.team}
                       </Badge>
                     </TableCell>
                     <TableCell className="col-span-1 hidden justify-center sm:flex">
-                      <Switch defaultChecked={user.active === 1} />
+                      <Switch defaultChecked={user.active === 1} disabled />
                     </TableCell>
                     <TableCell className="col-span-1 hidden justify-center sm:flex">
-                      {timeAgo(user.createdAt || "")}
+                      <TimeAgoIntl date={user.updatedAt as Date} />
                     </TableCell>
                     <TableCell className="col-span-1 flex justify-center">
                       <Button
@@ -262,10 +276,11 @@ export default function UsersList({ user }: UrlListProps) {
                         onClick={() => {
                           setcurrentEditUser(user);
                           setShowForm(false);
+                          setFormType("edit");
                           setShowForm(!isShowForm);
                         }}
                       >
-                        <p>Edit</p>
+                        <p className="text-nowrap">{t("Edit")}</p>
                         <PenLine className="ml-1 size-4" />
                       </Button>
                     </TableCell>
@@ -304,7 +319,7 @@ export default function UsersList({ user }: UrlListProps) {
           user={{ id: user.id, name: user.name || "" }}
           isShowForm={isShowForm}
           setShowForm={setShowForm}
-          type="edit"
+          type={formType}
           initData={currentEditUser}
           onRefresh={handleRefresh}
         />

app/(protected)/dashboard/loading.tsx

@@ -1,10 +1,8 @@
 import { Skeleton } from "@/components/ui/skeleton";
-import { DashboardHeader } from "@/components/dashboard/header";
 
 export default function DashboardLoading() {
   return (
     <>
-      <DashboardHeader heading="Dashboard" text="" />
       <div className="flex flex-col gap-5">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-3 lg:grid-cols-3">
           <Skeleton className="h-32 w-full rounded-lg" />

app/(protected)/dashboard/page.tsx

@@ -2,9 +2,9 @@ import { Suspense } from "react";
 import { redirect } from "next/navigation";
 import { UserRole } from "@prisma/client";
 
-import { TeamPlanQuota } from "@/config/team";
 import { getUserRecordCount } from "@/lib/dto/cloudflare-dns-record";
 import { getAllUserEmailsCount } from "@/lib/dto/email";
+import { getPlanQuota, PlanQuota } from "@/lib/dto/plan";
 import { getUserShortUrlCount } from "@/lib/dto/short-urls";
 import { getCurrentUser } from "@/lib/session";
 import { constructMetadata } from "@/lib/utils";
@@ -13,24 +13,22 @@ import {
   DashboardInfoCard,
   HeroCard,
 } from "@/components/dashboard/dashboard-info-card";
-import { DashboardHeader } from "@/components/dashboard/header";
 import { ErrorBoundary } from "@/components/shared/error-boundary";
 
 import UserRecordsList from "./records/record-list";
-import LiveLog from "./urls/live-logs";
 import UserUrlsList from "./urls/url-list";
 
 export const metadata = constructMetadata({
-  title: "Dashboard - WR.DO",
+  title: "Dashboard",
   description: "List and manage records.",
 });
 
 async function EmailHeroCardSection({
   userId,
-  team,
+  plan,
 }: {
   userId: string;
-  team: string;
+  plan: PlanQuota;
 }) {
   const email_count = await getAllUserEmailsCount(userId);
 
@@ -38,17 +36,17 @@ async function EmailHeroCardSection({
     <HeroCard
       total={email_count.total}
       monthTotal={email_count.month_total}
-      limit={TeamPlanQuota[team].EM_EmailAddresses}
+      limit={plan.emEmailAddresses}
     />
   );
 }
 
 async function ShortUrlsCardSection({
   userId,
-  team,
+  plan,
 }: {
   userId: string;
-  team: string;
+  plan: PlanQuota;
 }) {
   const url_count = await getUserShortUrlCount(userId);
 
@@ -58,7 +56,7 @@ async function ShortUrlsCardSection({
       title="Short URLs"
       total={url_count.total}
       monthTotal={url_count.month_total}
-      limit={TeamPlanQuota[team].SL_NewLinks}
+      limit={plan.slNewLinks}
       link="/dashboard/urls"
       icon="link"
     />
@@ -67,10 +65,10 @@ async function ShortUrlsCardSection({
 
 async function DnsRecordsCardSection({
   userId,
-  team,
+  plan,
 }: {
   userId: string;
-  team: string;
+  plan: PlanQuota;
 }) {
   const record_count = await getUserRecordCount(userId);
 
@@ -80,17 +78,13 @@ async function DnsRecordsCardSection({
       title="DNS Records"
       total={record_count.total}
       monthTotal={record_count.month_total}
-      limit={TeamPlanQuota[team].RC_NewRecords}
+      limit={plan.rcNewRecords}
       link="/dashboard/records"
       icon="globeLock"
     />
   );
 }
 
-async function LiveLogSection() {
-  return <LiveLog admin={false} />;
-}
-
 async function UserUrlsListSection({
   user,
 }: {
@@ -119,7 +113,13 @@ async function UserUrlsListSection({
 async function UserRecordsListSection({
   user,
 }: {
-  user: { id: string; name: string; apiKey: string; email: string };
+  user: {
+    id: string;
+    name: string;
+    apiKey: string;
+    email: string;
+    role: UserRole;
+  };
 }) {
   return (
     <UserRecordsList
@@ -128,6 +128,7 @@ async function UserRecordsListSection({
         name: user.name,
         apiKey: user.apiKey,
         email: user.email,
+        role: user.role,
       }}
       action="/api/record"
     />
@@ -139,9 +140,10 @@ export default async function DashboardPage() {
 
   if (!user?.id) redirect("/login");
 
+  const plan = await getPlanQuota(user.team);
+
   return (
     <>
-      <DashboardHeader heading="Dashboard" text="" />
       <div className="flex flex-col gap-5">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-3 xl:grid-cols-3">
           <ErrorBoundary
@@ -150,7 +152,7 @@ export default async function DashboardPage() {
             <Suspense
               fallback={<Skeleton className="h-32 w-full rounded-lg" />}
             >
-              <EmailHeroCardSection userId={user.id} team={user.team} />
+              <EmailHeroCardSection userId={user.id} plan={plan} />
             </Suspense>
           </ErrorBoundary>
           <ErrorBoundary
@@ -159,7 +161,7 @@ export default async function DashboardPage() {
             <Suspense
               fallback={<Skeleton className="h-32 w-full rounded-lg" />}
             >
-              <ShortUrlsCardSection userId={user.id} team={user.team} />
+              <ShortUrlsCardSection userId={user.id} plan={plan} />
             </Suspense>
           </ErrorBoundary>
           <ErrorBoundary
@@ -168,7 +170,7 @@ export default async function DashboardPage() {
             <Suspense
               fallback={<Skeleton className="h-32 w-full rounded-lg" />}
             >
-              <DnsRecordsCardSection userId={user.id} team={user.team} />
+              <DnsRecordsCardSection userId={user.id} plan={plan} />
             </Suspense>
           </ErrorBoundary>
         </div>
@@ -184,6 +186,7 @@ export default async function DashboardPage() {
                 name: user.name || "",
                 apiKey: user.apiKey || "",
                 email: user.email || "",
+                role: user.role,
               }}
             />
           </Suspense>

app/(protected)/dashboard/records/loading.tsx

@@ -5,10 +5,15 @@ export default function DashboardRecordsLoading() {
   return (
     <>
       <DashboardHeader
-        heading="Manage&nbsp;&nbsp;DNS&nbsp;&nbsp;Records"
+        heading="Manage DNS Records"
-        text="List and manage records."
+        text="List and manage records"
       />
-      <Skeleton className="h-32 w-full rounded-lg" />
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-4">
+        <Skeleton className="h-[102px] w-full rounded-lg" />
+        <Skeleton className="h-[102px] w-full rounded-lg" />
+        <Skeleton className="h-[102px] w-full rounded-lg" />
+        <Skeleton className="h-[102px] w-full rounded-lg" />
+      </div>
       <Skeleton className="h-[400px] w-full rounded-lg" />
     </>
   );

app/(protected)/dashboard/records/page.tsx

@@ -3,11 +3,12 @@ import { redirect } from "next/navigation";
 import { getCurrentUser } from "@/lib/session";
 import { constructMetadata } from "@/lib/utils";
 import { DashboardHeader } from "@/components/dashboard/header";
+import { UserRecordStatus } from "@/components/dashboard/status-card";
 
 import UserRecordsList from "./record-list";
 
 export const metadata = constructMetadata({
-  title: "DNS Records - WR.DO",
+  title: "DNS Records",
   description: "List and manage records.",
 });
 
@@ -19,17 +20,19 @@ export default async function DashboardPage() {
   return (
     <>
       <DashboardHeader
-        heading="Manage&nbsp;&nbsp;DNS&nbsp;&nbsp;Records"
+        heading="Manage DNS Records"
-        text="List and manage records."
+        text="List and manage records"
         link="/docs/dns-records"
-        linkText="DNS records."
+        linkText="DNS records"
       />
+      <UserRecordStatus action="/api/record" />
       <UserRecordsList
         user={{
           id: user.id,
           name: user.name || "",
           apiKey: user.apiKey || "",
           email: user.email || "",
+          role: user.role,
         }}
         action="/api/record"
       />

app/(protected)/dashboard/records/record-list.tsx

@@ -3,13 +3,14 @@
 import { useState } from "react";
 import Link from "next/link";
 import { User } from "@prisma/client";
-import { PenLine, RefreshCwIcon } from "lucide-react";
+import { PenLine } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { toast } from "sonner";
 import useSWR, { useSWRConfig } from "swr";
 
 import { UserRecordFormData } from "@/lib/dto/cloudflare-dns-record";
 import { TTL_ENUMS } from "@/lib/enums";
-import { fetcher, timeAgo } from "@/lib/utils";
+import { fetcher } from "@/lib/utils";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -32,6 +33,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import {
+  ClickableTooltip,
   Tooltip,
   TooltipContent,
   TooltipProvider,
@@ -40,20 +42,18 @@ import {
 import { FormType, RecordForm } from "@/components/forms/record-form";
 import { EmptyPlaceholder } from "@/components/shared/empty-placeholder";
 import { Icons } from "@/components/shared/icons";
-import {
+import { LinkInfoPreviewer } from "@/components/shared/link-previewer";
-  LinkInfoPreviewer,
-  LinkPreviewer,
-} from "@/components/shared/link-previewer";
 import { PaginationWrapper } from "@/components/shared/pagination";
+import { TimeAgoIntl } from "@/components/shared/time-ago";
 
 export interface RecordListProps {
-  user: Pick<User, "id" | "name" | "apiKey" | "email">;
+  user: Pick<User, "id" | "name" | "apiKey" | "email" | "role">;
   action: string;
 }
 
 function TableColumnSekleton() {
   return (
-    <TableRow className="grid grid-cols-3 items-center sm:grid-cols-8">
+    <TableRow className="grid grid-cols-3 items-center sm:grid-cols-9">
       <TableCell className="col-span-1">
         <Skeleton className="h-5 w-24" />
       </TableCell>
@@ -72,6 +72,9 @@ function TableColumnSekleton() {
       <TableCell className="col-span-1 hidden justify-center sm:flex">
         <Skeleton className="h-5 w-16" />
       </TableCell>
+      <TableCell className="col-span-1 hidden justify-center sm:flex">
+        <Skeleton className="h-5 w-16" />
+      </TableCell>
       <TableCell className="col-span-1 flex justify-center">
         <Skeleton className="h-5 w-16" />
       </TableCell>
@@ -86,13 +89,14 @@ export default function UserRecordsList({ user, action }: RecordListProps) {
   const [currentEditRecord, setCurrentEditRecord] =
     useState<UserRecordFormData | null>(null);
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(15);
-  const [tab, setTab] = useState("app");
   const isAdmin = action.includes("/admin");
 
+  const t = useTranslations("List");
+
   const { mutate } = useSWRConfig();
 
-  const { data, error, isLoading } = useSWR<{
+  const { data, isLoading } = useSWR<{
     total: number;
     list: UserRecordFormData[];
   }>(`${action}?page=${currentPage}&size=${pageSize}`, fetcher, {
@@ -109,7 +113,7 @@ export default function UserRecordsList({ user, action }: RecordListProps) {
     setChecked: (value: boolean) => void,
   ) => {
     const originalState = record.active === 1;
-    setChecked(checked); // 立即更新 UI
+    setChecked(checked);
 
     const res = await fetch(`/api/record/update`, {
       method: "PUT",
@@ -138,38 +142,36 @@ export default function UserRecordsList({ user, action }: RecordListProps) {
     }
   };
 
-  const rendeApplyList = () => {};
-
   return (
     <>
       <Card className="xl:col-span-2">
         <CardHeader className="flex flex-row items-center">
           {isAdmin ? (
             <CardDescription className="text-balance text-lg font-bold">
-              <span>Total Subdomains:</span>{" "}
+              <span>{t("Total Subdomains")}:</span>{" "}
               <span className="font-bold">{data && data.total}</span>
             </CardDescription>
           ) : (
             <div className="grid gap-2">
-              <CardTitle>Subdomains</CardTitle>
+              <CardTitle>{t("Subdomain List")}</CardTitle>
               <CardDescription className="hidden text-balance sm:block">
-                Please read the{" "}
+                {t("Before using please read the")}
                 <Link
                   target="_blank"
                   className="font-semibold text-yellow-600 after:content-['↗'] hover:underline"
                   href="/docs/dns-records#legitimacy-review"
                 >
-                  Legitimacy review
+                  {t("legitimacy review")}
-                </Link>{" "}
+                </Link>
-                before using. See{" "}
+                . {t("See")}
                 <Link
                   target="_blank"
                   className="text-blue-500 hover:underline"
                   href="/docs/examples/vercel"
                 >
-                  examples
+                  {t("examples")}
-                </Link>{" "}
+                </Link>
-                for more usage.
+                {t("for more usage")}.
               </CardDescription>
             </div>
           )}
@@ -180,9 +182,9 @@ export default function UserRecordsList({ user, action }: RecordListProps) {
               disabled={isLoading}
             >
               {isLoading ? (
-                <RefreshCwIcon className="size-4 animate-spin" />
+                <Icons.refreshCw className="size-4 animate-spin" />
               ) : (
-                <RefreshCwIcon className="size-4" />
+                <Icons.refreshCw className="size-4" />
               )}
             </Button>
             <Button
@@ -196,34 +198,37 @@ export default function UserRecordsList({ user, action }: RecordListProps) {
               }}
             >
               <Icons.add className="size-4" />
-              <span className="hidden sm:inline">Add Record</span>
+              <span className="hidden sm:inline">{t("Add Record")}</span>
             </Button>
           </div>
         </CardHeader>
         <CardContent>
           <Table>
             <TableHeader className="bg-gray-100/50 dark:bg-primary-foreground">
-              <TableRow className="grid grid-cols-3 items-center sm:grid-cols-8">
+              <TableRow className="grid grid-cols-3 items-center sm:grid-cols-9">
                 <TableHead className="col-span-1 flex items-center font-bold">
-                  Type
+                  {t("Type")}
                 </TableHead>
                 <TableHead className="col-span-1 flex items-center font-bold">
-                  Name
+                  {t("Name")}
                 </TableHead>
                 <TableHead className="col-span-2 hidden items-center font-bold sm:flex">
-                  Content
+                  {t("Content")}
                 </TableHead>
                 <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
-                  TTL
+                  {t("TTL")}
                 </TableHead>
                 <TableHead className="col-span-1 hidden items-center justify-center font-bold sm:flex">
-                  Status
+                  {t("Status")}
+                </TableHead>
+                <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
+                  {t("User")}
                 </TableHead>
                 <TableHead className="col-span-1 hidden items-center justify-center font-bold sm:flex">
-                  Updated
+                  {t("Updated")}
                 </TableHead>
                 <TableHead className="col-span-1 flex items-center justify-center font-bold">
-                  Actions
+                  {t("Actions")}
                 </TableHead>
               </TableRow>
             </TableHeader>
@@ -240,7 +245,7 @@ export default function UserRecordsList({ user, action }: RecordListProps) {
                 data.list.map((record) => (
                   <TableRow
                     key={record.id}
-                    className="grid animate-fade-in grid-cols-3 items-center animate-in sm:grid-cols-8"
+                    className="grid animate-fade-in grid-cols-3 items-center animate-in sm:grid-cols-9"
                   >
                     <TableCell className="col-span-1">
                       <Badge className="text-xs" variant="outline">
@@ -248,11 +253,15 @@ export default function UserRecordsList({ user, action }: RecordListProps) {
                       </Badge>
                     </TableCell>
                     <TableCell className="col-span-1">
-                      <LinkInfoPreviewer
+                      {[0, 1].includes(record.active) ? (
-                        apiKey={user.apiKey ?? ""}
+                        <LinkInfoPreviewer
-                        url={"https://" + record.name}
+                          apiKey={user.apiKey ?? ""}
-                        formatUrl={record.name}
+                          url={"https://" + record.name}
-                      />
+                          formatUrl={record.name}
+                        />
+                      ) : (
+                        record.name
+                      )}
                     </TableCell>
                     <TableCell className="col-span-2 hidden truncate text-nowrap sm:inline-block">
                       <TooltipProvider>
@@ -271,60 +280,157 @@ export default function UserRecordsList({ user, action }: RecordListProps) {
                       }
                     </TableCell>
                     <TableCell className="col-span-1 hidden items-center justify-center gap-1 sm:flex">
-                      <SwitchWrapper
+                      {[0, 1].includes(record.active) && (
-                        record={record}
+                        <SwitchWrapper
-                        onChangeStatu={handleChangeStatu}
+                          record={record}
-                      />
+                          onChangeStatu={handleChangeStatu}
-                      {!record.active && (
+                        />
+                      )}
+                      {record.active === 2 && (
+                        <Badge
+                          className="text-nowrap rounded-md"
+                          variant={"yellow"}
+                        >
+                          {t("Pending")}
+                        </Badge>
+                      )}
+                      {record.active === 3 && (
+                        <Badge
+                          className="text-nowrap rounded-md"
+                          variant={"outline"}
+                        >
+                          {t("Rejected")}
+                        </Badge>
+                      )}
+
+                      {![1, 3].includes(record.active) && (
                         <TooltipProvider>
                           <Tooltip delayDuration={200}>
                             <TooltipTrigger className="truncate">
                               <Icons.help className="size-4 cursor-pointer text-yellow-500 opacity-90" />
                             </TooltipTrigger>
                             <TooltipContent>
-                              <ul className="list-disc px-3">
+                              {record.active === 0 && (
-                                <li>The target is currently inaccessible.</li>
+                                <ul className="list-disc px-3">
-                                <li>Please check the target and try again.</li>
+                                  <li>
-                                <li>
+                                    {t("The target is currently inaccessible")}.
-                                  If the target is not activated within 3 days,{" "}
+                                  </li>
-                                  <br />
+                                  <li>
-                                  the administrator will{" "}
+                                    {t("Please check the target and try again")}
-                                  <strong className="text-red-500">
+                                    .
-                                    delete this record
+                                  </li>
-                                  </strong>
+                                  <li>
-                                  .
+                                    {t(
-                                </li>
+                                      "If the target is not activated within 3 days",
-                              </ul>
+                                    )}
+                                    , <br />
+                                    {t("the administrator will")}{" "}
+                                    <strong className="text-red-500">
+                                      {t("delete this record")}
+                                    </strong>
+                                    .
+                                  </li>
+                                </ul>
+                              )}
+                              {record.active === 2 && (
+                                <ul className="list-disc px-3">
+                                  <li>
+                                    {t(
+                                      "The record is currently pending for admin approval",
+                                    )}
+                                    .
+                                  </li>
+                                </ul>
+                              )}
                             </TooltipContent>
                           </Tooltip>
                         </TooltipProvider>
                       )}
                     </TableCell>
+                    <TableCell className="col-span-1 hidden truncate sm:flex">
+                      <ClickableTooltip
+                        className="cursor-pointer truncate"
+                        content={
+                          <div className="px-2 py-1">
+                            <p>{record.user.name}</p>
+                            <p>{record.user?.email}</p>
+                          </div>
+                        }
+                      >
+                        {record.user.name || record.user.email}
+                      </ClickableTooltip>
+                    </TableCell>
                     <TableCell className="col-span-1 hidden justify-center sm:flex">
-                      {timeAgo(record.modified_on as unknown as Date)}
+                      <TimeAgoIntl
+                        date={record.modified_on as unknown as Date}
+                      />
                     </TableCell>
                     <TableCell className="col-span-1 flex justify-center">
-                      <Button
+                      {record.active === 3 ? (
-                        className="text-sm hover:bg-slate-100 dark:hover:text-primary-foreground"
+                        <Button
-                        size="sm"
+                          className="h-7 text-nowrap px-1 text-xs sm:px-1.5"
-                        variant={"outline"}
+                          size="sm"
-                        onClick={() => {
+                          variant={"outline"}
-                          setCurrentEditRecord(record);
+                          onClick={() => {
-                          setShowForm(false);
+                            setCurrentEditRecord(record);
-                          setFormType("edit");
+                            setShowForm(false);
-                          setShowForm(!isShowForm);
+                            setFormType("edit");
-                        }}
+                            setShowForm(!isShowForm);
-                      >
+                          }}
-                        <p>Edit</p>
+                        >
-                        <PenLine className="ml-1 size-4" />
+                          <p className="hidden text-nowrap sm:block">
-                      </Button>
+                            {t("Reject")}
+                          </p>
+                          <Icons.close className="mx-0.5 size-4 sm:ml-1 sm:size-3" />
+                        </Button>
+                      ) : [0, 1].includes(record.active) ? (
+                        <Button
+                          className="h-7 text-nowrap px-1 text-xs hover:bg-slate-100 dark:hover:text-primary-foreground sm:px-1.5"
+                          size="sm"
+                          variant={"outline"}
+                          onClick={() => {
+                            setCurrentEditRecord(record);
+                            setShowForm(false);
+                            setFormType("edit");
+                            setShowForm(!isShowForm);
+                          }}
+                        >
+                          <p className="hidden text-nowrap sm:block">
+                            {t("Edit")}
+                          </p>
+                          <PenLine className="mx-0.5 size-4 sm:ml-1 sm:size-3" />
+                        </Button>
+                      ) : record.active === 2 &&
+                        user.role === "ADMIN" &&
+                        isAdmin ? (
+                        <Button
+                          className="h-7 text-nowrap px-1 text-xs hover:bg-blue-400 dark:hover:text-primary-foreground sm:px-1.5"
+                          size="sm"
+                          variant={"blue"}
+                          onClick={() => {
+                            setCurrentEditRecord(record);
+                            setShowForm(false);
+                            setFormType("edit");
+                            setShowForm(!isShowForm);
+                          }}
+                        >
+                          <p className="hidden text-nowrap sm:block">
+                            {t("Review")}
+                          </p>
+                          <Icons.eye className="mx-0.5 size-4 sm:ml-1 sm:size-3" />
+                        </Button>
+                      ) : (
+                        "--"
+                      )}
                     </TableCell>
                   </TableRow>
                 ))
               ) : (
                 <EmptyPlaceholder className="shadow-none">
                   <EmptyPlaceholder.Icon name="globe" />
-                  <EmptyPlaceholder.Title>No Subdomain</EmptyPlaceholder.Title>
+                  <EmptyPlaceholder.Title>
+                    {t("No Subdomains")}
+                  </EmptyPlaceholder.Title>
                   <EmptyPlaceholder.Description>
                     You don&apos;t have any subdomain yet. Start creating
                     record.

app/(protected)/dashboard/scrape/charts.tsx

@@ -1,6 +1,5 @@
 import {
   getScrapeStatsByTypeAndUserId,
-  getScrapeStatsByUserId,
   getScrapeStatsByUserId1,
 } from "@/lib/dto/scrape";
 
@@ -21,10 +20,7 @@ export default async function DashboardScrapeCharts({ id }: { id: string }) {
   return (
     <>
       {all_user_logs && all_user_logs.length > 0 && (
-        <>
+        <DailyPVUVChart data={all_user_logs} />
-          <h2 className="my-1 text-xl font-semibold">Request Statistics</h2>
-          <DailyPVUVChart data={all_user_logs} />
-        </>
       )}
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {(screenshot_stats.length > 0 || meta_stats.length > 0) && (
@@ -43,7 +39,6 @@ export default async function DashboardScrapeCharts({ id }: { id: string }) {
         )}
       </div>
 
-      <h2 className="my-1 text-xl font-semibold">Request Logs</h2>
       <LogsTable userId={id} target={"/api/v1/scraping/logs"} />
     </>
   );

app/(protected)/dashboard/scrape/daily-chart.tsx

@@ -3,9 +3,10 @@
 import * as React from "react";
 import Link from "next/link";
 import { ScrapeMeta } from "@prisma/client";
+import { useTranslations } from "next-intl";
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
-import { isLink, nFormatter, removeUrlSuffix, timeAgo } from "@/lib/utils";
+import { isLink, nFormatter, removeUrlPrefix } from "@/lib/utils";
 import {
   Card,
   CardContent,
@@ -18,7 +19,7 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import CountUp from "@/components/dashboard/count-up";
+import { TimeAgoIntl } from "@/components/shared/time-ago";
 
 const chartConfig = {
   request: {
@@ -102,18 +103,21 @@ export function DailyPVUVChart({ data }: { data: ScrapeMeta[] }) {
     (a, b) => new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime(),
   );
   const latestEntry = sort_data[sort_data.length - 1];
-  const latestDate = timeAgo(latestEntry.updatedAt);
   const latestFrom = latestEntry.type;
 
+  const t = useTranslations("Components");
+
+  const lastRequestInfo = t.rich("last-request-info", {
+    location: latestFrom,
+    timeAgo: () => <TimeAgoIntl date={latestEntry.updatedAt} />,
+  });
+
   return (
     <Card>
       <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
         <div className="flex flex-1 flex-col justify-center gap-1 px-5 py-4">
-          <CardTitle>Total Requests of APIs in Last 30 Days</CardTitle>
+          <CardTitle>{t("Total Requests of APIs in Last 30 Days")}</CardTitle>
-          <CardDescription>
+          <CardDescription>{lastRequestInfo}</CardDescription>
-            Last request from <strong>{latestFrom}</strong> api about{" "}
-            {latestDate}.
-          </CardDescription>
         </div>
         <div className="flex">
           {["request", "ip"].map((key) => {
@@ -125,8 +129,8 @@ export function DailyPVUVChart({ data }: { data: ScrapeMeta[] }) {
                 className="relative z-30 flex flex-1 flex-col items-center justify-center gap-1 border-t px-6 py-2 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-3"
                 onClick={() => setActiveChart(chart)}
               >
-                <span className="text-xs text-muted-foreground">
+                <span className="text-nowrap text-xs text-muted-foreground">
-                  {chartConfig[chart].label}
+                  {t(chartConfig[chart].label)}
                 </span>
                 <span className="text-lg font-bold leading-none">
                   {nFormatter(dataTotal[key])}
@@ -264,7 +268,7 @@ export function StatsList({ data, title }: { data: Stat[]; title: string }) {
                 className="truncate font-medium hover:opacity-70 hover:after:content-['↗']"
                 href={ref.dimension}
               >
-                {removeUrlSuffix(ref.dimension)}
+                {removeUrlPrefix(ref.dimension)}
               </Link>
             ) : (
               <p className="font-medium">{decodeURIComponent(ref.dimension)}</p>

app/(protected)/dashboard/scrape/loading.tsx

@@ -5,8 +5,8 @@ export default function DashboardRecordsLoading() {
   return (
     <>
       <DashboardHeader
-        heading="Scraping&nbsp;&nbsp;API&nbsp;&nbsp;Overview"
+        heading="Scraping API Overview"
-        text="Quickly extract valuable structured website data. It's free and unlimited to use!"
+        text="Quickly extract valuable structured website data"
       />
       <div className="flex flex-col gap-5">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-3 lg:grid-cols-3">

app/(protected)/dashboard/scrape/logs.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { RefreshCwIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 import useSWR, { useSWRConfig } from "swr";
 
 import { nFormatter } from "@/lib/utils";
@@ -16,6 +16,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { Icons } from "@/components/shared/icons";
 import { PaginationWrapper } from "@/components/shared/pagination";
 
 export interface LogsTableData {
@@ -49,6 +50,8 @@ const LogsTable = ({ userId, target }) => {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(20);
 
+  const t = useTranslations("Components");
+
   const [filters, setFilters] = useState({
     type: "",
     ip: "",
@@ -129,9 +132,9 @@ const LogsTable = ({ userId, target }) => {
             className="ml-2 h-8 px-2 py-0"
           >
             {isLoading ? (
-              <RefreshCwIcon className={`size-4 animate-spin`} />
+              <Icons.refreshCw className={`size-4 animate-spin`} />
             ) : (
-              <RefreshCwIcon className={`size-4`} />
+              <Icons.refreshCw className={`size-4`} />
             )}
           </Button>
         </div>
@@ -141,13 +144,17 @@ const LogsTable = ({ userId, target }) => {
             <TableHeader className="bg-muted">
               <TableRow className="grid grid-cols-5 items-center sm:grid-cols-6">
                 <TableHead className="hidden items-center justify-start px-2 sm:flex">
-                  Date
+                  {t("Date")}
+                </TableHead>
+                <TableHead className="flex items-center px-2">
+                  {t("Type")}
                 </TableHead>
-                <TableHead className="flex items-center px-2">Type</TableHead>
                 <TableHead className="col-span-3 flex items-center px-2">
-                  Link
+                  {t("Link")}
+                </TableHead>
+                <TableHead className="flex items-center px-2">
+                  {t("User")}
                 </TableHead>
-                <TableHead className="flex items-center px-2">User</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>

app/(protected)/dashboard/scrape/markdown/loading.tsx

@@ -4,7 +4,10 @@ import { DashboardHeader } from "@/components/dashboard/header";
 export default function DashboardRecordsLoading() {
   return (
     <>
-      <DashboardHeader heading="Scraping API" text="" />
+      <DashboardHeader
+        heading="Url to Markdown"
+        text="Quickly extract website content and convert it to Markdown format"
+      />
       <Skeleton className="h-32 w-full rounded-lg" />
       <Skeleton className="h-[400px] w-full rounded-lg" />
     </>

app/(protected)/dashboard/scrape/markdown/page.tsx

@@ -8,7 +8,7 @@ import ApiReference from "@/components/shared/api-reference";
 import { MarkdownScraping, TextScraping } from "../scrapes";
 
 export const metadata = constructMetadata({
-  title: "Url to Markdown API - WR.DO",
+  title: "Url to Markdown API",
   description:
     "Quickly extract website content and convert it to Markdown format",
 });
@@ -21,10 +21,10 @@ export default async function DashboardPage() {
   return (
     <>
       <DashboardHeader
-        heading="Url&nbsp;&nbsp;to&nbsp;&nbsp;Markdown"
+        heading="Url to Markdown"
-        text="Quickly extract website content and convert it to Markdown format."
+        text="Quickly extract website content and convert it to Markdown format"
         link="/docs/open-api/markdown"
-        linkText="Markdown API."
+        linkText="Markdown API"
       />
       <ApiReference
         badge="GET /api/v1/scraping/markdown"

app/(protected)/dashboard/scrape/meta-info/loading.tsx

@@ -4,7 +4,10 @@ import { DashboardHeader } from "@/components/dashboard/header";
 export default function DashboardRecordsLoading() {
   return (
     <>
-      <DashboardHeader heading="Scraping API" text="" />
+      <DashboardHeader
+        heading="Url to Meta Info"
+        text="Quickly extract valuable structured website data"
+      />
       <Skeleton className="h-32 w-full rounded-lg" />
       <Skeleton className="h-[400px] w-full rounded-lg" />
     </>

app/(protected)/dashboard/scrape/meta-info/page.tsx

@@ -5,11 +5,10 @@ import { constructMetadata } from "@/lib/utils";
 import { DashboardHeader } from "@/components/dashboard/header";
 import ApiReference from "@/components/shared/api-reference";
 
-import DashboardScrapeCharts from "../charts";
 import { MetaScraping } from "../scrapes";
 
 export const metadata = constructMetadata({
-  title: "Url to Meta API - WR.DO",
+  title: "Url to Meta API",
   description: "Quickly extract valuable structured website data",
 });
 
@@ -21,10 +20,10 @@ export default async function DashboardPage() {
   return (
     <>
       <DashboardHeader
-        heading="Url&nbsp;&nbsp;to&nbsp;&nbsp;Meta&nbsp;&nbsp;Info"
+        heading="Url to Meta Info"
-        text="Quickly extract valuable structured website data."
+        text="Quickly extract valuable structured website data"
         link="/docs/open-api/meta-info"
-        linkText="Meta Info API."
+        linkText="Meta Info API"
       />
       <ApiReference
         badge="GET /api/v1/scraping/meta"

app/(protected)/dashboard/scrape/page.tsx

@@ -8,7 +8,7 @@ import { DashboardHeader } from "@/components/dashboard/header";
 import DashboardScrapeCharts from "./charts";
 
 export const metadata = constructMetadata({
-  title: "Scraping API - WR.DO",
+  title: "Scraping API",
   description: "Quickly extract valuable structured website data",
 });
 
@@ -20,27 +20,27 @@ export default async function DashboardPage() {
   return (
     <>
       <DashboardHeader
-        heading="Scraping&nbsp;&nbsp;API&nbsp;&nbsp;Overview"
+        heading="Scraping API Overview"
-        text="Quickly extract valuable structured website data. It's free and unlimited to use!"
+        text="Quickly extract valuable structured website data"
         link="/docs/open-api"
         linkText="Open API."
       />
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
         <StaticInfoCard
           title="Url to Screenshot"
-          desc="Take a screenshot of the webpage."
+          desc="Take a screenshot of the webpage"
           link="/dashboard/scrape/screenshot"
           icon="camera"
         />
         <StaticInfoCard
           title="Url to Meta Info"
-          desc="Extract website metadata."
+          desc="Extract website metadata"
           link="/dashboard/scrape/meta-info"
           icon="globe"
         />
         <StaticInfoCard
           title="Url to QR Code"
-          desc="Generate QR Code from URL."
+          desc="Generate QR Code from URL"
           link="/dashboard/scrape/qrcode"
           icon="qrcode"
         />
@@ -48,13 +48,13 @@ export default async function DashboardPage() {
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <StaticInfoCard
           title="Url to Markdown"
-          desc="Convert website content to Markdown format."
+          desc="Convert website content to Markdown format"
           link="/dashboard/scrape/markdown"
           icon="heading1"
         />
         <StaticInfoCard
           title="Url to Text"
-          desc="Extract website text."
+          desc="Convert website content to text"
           link="/dashboard/scrape/markdown"
           icon="fileText"
         />

app/(protected)/dashboard/scrape/qrcode/loading.tsx

@@ -4,7 +4,10 @@ import { DashboardHeader } from "@/components/dashboard/header";
 export default function DashboardRecordsLoading() {
   return (
     <>
-      <DashboardHeader heading="Scraping API" text="" />
+      <DashboardHeader
+        heading="Url to QR Code"
+        text="Generate QR Code from URL"
+      />
       <Skeleton className="h-32 w-full rounded-lg" />
       <Skeleton className="h-[400px] w-full rounded-lg" />
     </>

app/(protected)/dashboard/scrape/qrcode/page.tsx

@@ -6,10 +6,10 @@ import { DashboardHeader } from "@/components/dashboard/header";
 import ApiReference from "@/components/shared/api-reference";
 import QRCodeEditor from "@/components/shared/qr";
 
-import { CodeLight, QrCodeScraping } from "../scrapes";
+import { CodeLight } from "../scrapes";
 
 export const metadata = constructMetadata({
-  title: "Url to QR Code API - WR.DO",
+  title: "Url to QR Code API",
   description: "Generate QR Code from URL",
 });
 
@@ -21,10 +21,10 @@ export default async function DashboardPage() {
   return (
     <>
       <DashboardHeader
-        heading="Url&nbsp;&nbsp;to&nbsp;&nbsp;QR&nbsp;&nbsp;Code"
+        heading="Url to QR Code"
         text="Generate QR Code from URL"
         link="/docs/open-api/qrcode"
-        linkText="QR Code API."
+        linkText="QR Code API"
       />
       <ApiReference
         badge="GET /api/v1/scraping/qrcode"

app/(protected)/dashboard/scrape/scrapes.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import JsonView from "@uiw/react-json-view";
 import { githubLightTheme } from "@uiw/react-json-view/githubLight";
 import { vscodeTheme } from "@uiw/react-json-view/vscode";
+import { useTranslations } from "next-intl";
 import { useTheme } from "next-themes";
 import { toast } from "sonner";
 
@@ -50,6 +51,7 @@ export function ScreenshotScraping({
 }: {
   user: { id: string; apiKey: string };
 }) {
+  const t = useTranslations("Scrape");
   const { theme } = useTheme();
   const [protocol, setProtocol] = useState("https://");
 
@@ -87,10 +89,12 @@ export function ScreenshotScraping({
       <CodeLight content={`https://wr.do/api/v1/scraping/screenshot`} />
       <Card className="bg-gray-50 dark:bg-gray-900">
         <CardHeader>
-          <CardTitle>Playground</CardTitle>
+          <CardTitle>{t("Playground")}</CardTitle>
           <CardDescription>
-            Automate your website screenshots and turn them into stunning
+            {t(
-            visuals for your applications.
+              "Automate your website screenshots and turn them into stunning visuals for your applications",
+            )}
+            .
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -126,9 +130,9 @@ export function ScreenshotScraping({
               variant="blue"
               onClick={handleScrapingScreenshot}
               disabled={isShoting}
-              className="rounded-l-none"
+              className="w-28 rounded-l-none"
             >
-              {isShoting ? "Scraping..." : "Send"}
+              {isShoting ? t("Scraping") : t("Start")}
             </Button>
           </div>
 
@@ -164,6 +168,7 @@ export function MetaScraping({
 }: {
   user: { id: string; apiKey: string };
 }) {
+  const t = useTranslations("Scrape");
   const { theme } = useTheme();
   const [currentLink, setCurrentLink] = useState("wr.do");
   const [protocol, setProtocol] = useState("https://");
@@ -203,8 +208,10 @@ export function MetaScraping({
       <CodeLight content={`https://wr.do/api/v1/scraping/meta`} />
       <Card className="bg-gray-50 dark:bg-gray-900">
         <CardHeader>
-          <CardTitle>Playground</CardTitle>
+          <CardTitle>{t("Playground")}</CardTitle>
-          <CardDescription>Scrape the meta data of a website.</CardDescription>
+          <CardDescription>
+            {t("Scrape the meta data of a website")}.
+          </CardDescription>
         </CardHeader>
         <CardContent>
           <div className="flex items-center">
@@ -239,9 +246,9 @@ export function MetaScraping({
               variant="blue"
               onClick={handleScrapingMeta}
               disabled={isScraping}
-              className="rounded-l-none"
+              className="w-28 rounded-l-none"
             >
-              {isScraping ? "Scraping..." : "Send"}
+              {isScraping ? t("Scraping") : t("Start")}
             </Button>
           </div>
 
@@ -264,6 +271,7 @@ export function MarkdownScraping({
 }: {
   user: { id: string; apiKey: string };
 }) {
+  const t = useTranslations("Scrape");
   const { theme } = useTheme();
   const [currentLink, setCurrentLink] = useState("wr.do");
   const [protocol, setProtocol] = useState("https://");
@@ -334,9 +342,9 @@ export function MarkdownScraping({
               variant="blue"
               onClick={handleScrapingMeta}
               disabled={isScraping}
-              className="rounded-l-none"
+              className="w-28 rounded-l-none"
             >
-              {isScraping ? "Scraping..." : "Send"}
+              {isScraping ? t("Scraping") : t("Start")}
             </Button>
           </div>
 
@@ -359,6 +367,7 @@ export function TextScraping({
 }: {
   user: { id: string; apiKey: string };
 }) {
+  const t = useTranslations("Scrape");
   const { theme } = useTheme();
   const [currentLink, setCurrentLink] = useState("wr.do");
   const [protocol, setProtocol] = useState("https://");
@@ -394,7 +403,7 @@ export function TextScraping({
       <CodeLight content={`https://wr.do/api/v1/scraping/text`} />
       <Card className="bg-gray-50 dark:bg-gray-900">
         <CardHeader>
-          <CardTitle>Text</CardTitle>
+          <CardTitle>{t("Text")}</CardTitle>
         </CardHeader>
         <CardContent>
           <div className="flex items-center">
@@ -429,9 +438,9 @@ export function TextScraping({
               variant="blue"
               onClick={handleScrapingMeta}
               disabled={isScraping}
-              className="rounded-l-none"
+              className="w-28 rounded-l-none"
             >
-              {isScraping ? "Scraping..." : "Send"}
+              {isScraping ? t("Scraping") : t("Start")}
             </Button>
           </div>
 
@@ -454,6 +463,7 @@ export function QrCodeScraping({
 }: {
   user: { id: string; apiKey: string };
 }) {
+  const t = useTranslations("Scrape");
   const { theme } = useTheme();
   const [protocol, setProtocol] = useState("https://");
 
@@ -487,11 +497,7 @@ export function QrCodeScraping({
       <CodeLight content={`https://wr.do/api/v1/scraping/qrcode`} />
       <Card className="bg-gray-50 dark:bg-gray-900">
         <CardHeader>
-          <CardTitle>Playground</CardTitle>
+          <CardTitle>{t("Playground")}</CardTitle>
-          <CardDescription>
-            Automate your website screenshots and turn them into stunning
-            visuals for your applications.
-          </CardDescription>
         </CardHeader>
         <CardContent>
           <div className="flex items-center">
@@ -573,21 +579,7 @@ export const CodeLight = ({ content }: { content: string }) => {
                 {i + 1}
               </span>
               {/* Code content */}
-              <span className="text-blue-400">
+              <span className="text-blue-400">{line}</span>
-                {line
-                  .replace(
-                    /function/,
-                    (match) => `<span class="text-purple-400">${match}</span>`,
-                  )
-                  .replace(
-                    /"[^"]*"/,
-                    (match) => `<span class="text-green-400">${match}</span>`,
-                  )
-                  .replace(
-                    /console/,
-                    (match) => `<span class="text-yellow-400">${match}</span>`,
-                  )}
-              </span>
             </div>
           ))}
         </code>

app/(protected)/dashboard/scrape/screenshot/loading.tsx

@@ -4,7 +4,10 @@ import { DashboardHeader } from "@/components/dashboard/header";
 export default function DashboardRecordsLoading() {
   return (
     <>
-      <DashboardHeader heading="Scraping API" text="" />
+      <DashboardHeader
+        heading="Url to Screenshot"
+        text="Quickly extract website screenshots"
+      />
       <Skeleton className="h-32 w-full rounded-lg" />
       <Skeleton className="h-[400px] w-full rounded-lg" />
     </>

app/(protected)/dashboard/scrape/screenshot/page.tsx

@@ -9,7 +9,7 @@ import DashboardScrapeCharts from "../charts";
 import { ScreenshotScraping } from "../scrapes";
 
 export const metadata = constructMetadata({
-  title: "Url to Screenshot API - WR.DO",
+  title: "Url to Screenshot API",
   description:
     "Quickly extract website screenshots. It's free and unlimited to use!",
 });
@@ -22,10 +22,10 @@ export default async function DashboardPage() {
   return (
     <>
       <DashboardHeader
-        heading="Url&nbsp;&nbsp;to&nbsp;&nbsp;Screenshot"
+        heading="Url to Screenshot"
-        text="Quickly extract website screenshots."
+        text="Quickly extract website screenshots"
         link="/docs/open-api/screenshot"
-        linkText="Screenshot API."
+        linkText="Screenshot API"
       />
       <ApiReference
         badge="GET /api/v1/scraping/screenshot"

app/(protected)/dashboard/settings/loading.tsx

@@ -5,10 +5,11 @@ export default function DashboardSettingsLoading() {
   return (
     <>
       <DashboardHeader
-        heading="Settings"
+        heading="Account Settings"
-        text="Manage account and website settings."
+        text="Manage account and website settings"
       />
       <div className="divide-y divide-muted pb-10">
+        <SkeletonSection />
         <SkeletonSection />
         <SkeletonSection />
         <SkeletonSection card />

app/(protected)/dashboard/settings/page.tsx

@@ -5,7 +5,9 @@ import { constructMetadata } from "@/lib/utils";
 import { DeleteAccountSection } from "@/components/dashboard/delete-account";
 import { DashboardHeader } from "@/components/dashboard/header";
 import { UserApiKeyForm } from "@/components/forms/user-api-key-form";
+import { UserEmailForm } from "@/components/forms/user-email-form";
 import { UserNameForm } from "@/components/forms/user-name-form";
+import { UserPasswordForm } from "@/components/forms/user-password-form";
 import { UserRoleForm } from "@/components/forms/user-role-form";
 
 export const metadata = constructMetadata({
@@ -22,13 +24,22 @@ export default async function SettingsPage() {
     <>
       <DashboardHeader
         heading="Account Settings"
-        text="Manage account and website settings."
+        text="Manage account and website settings"
       />
       <div className="divide-y divide-muted pb-10">
+        <UserEmailForm
+          user={{
+            id: user.id,
+            name: user.name || "",
+            email: user.email || "",
+            emailVerified: user.emailVerified,
+          }}
+        />
         <UserNameForm user={{ id: user.id, name: user.name || "" }} />
         {user.role === "ADMIN" && (
           <UserRoleForm user={{ id: user.id, role: user.role }} />
         )}
+        <UserPasswordForm user={{ id: user.id, name: user.name || "" }} />
         <UserApiKeyForm
           user={{
             id: user.id,

app/(protected)/dashboard/storage/loading.tsx

@@ -0,0 +1,15 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { DashboardHeader } from "@/components/dashboard/header";
+
+export default function DashboardRecordsLoading() {
+  return (
+    <>
+      <DashboardHeader
+        heading="Cloud Storage"
+        text="List and manage cloud storage"
+      />
+      <Skeleton className="h-[58px] w-full rounded-lg" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
+    </>
+  );
+}

app/(protected)/dashboard/storage/page.tsx

@@ -3,12 +3,11 @@ import { redirect } from "next/navigation";
 import { getCurrentUser } from "@/lib/session";
 import { constructMetadata } from "@/lib/utils";
 import { DashboardHeader } from "@/components/dashboard/header";
-
+import UserFileList from "@/components/file";
-import DomainList from "./domain-list";
 
 export const metadata = constructMetadata({
-  title: "Domains - WR.DO",
+  title: "Cloud Storage",
-  description: "List and manage domains.",
+  description: "List and manage cloud storage.",
 });
 
 export default async function DashboardPage() {
@@ -19,12 +18,12 @@ export default async function DashboardPage() {
   return (
     <>
       <DashboardHeader
-        heading="Manage&nbsp;&nbsp;Domains"
+        heading="Cloud Storage"
-        text="List and manage domains."
+        text="List and manage cloud storage"
-        link="/docs/developer/cloudflare"
+        link="/docs/cloud-storage"
-        linkText="domains."
+        linkText="Cloud Storage"
       />
-      <DomainList
+      <UserFileList
         user={{
           id: user.id,
           name: user.name || "",
@@ -33,7 +32,7 @@ export default async function DashboardPage() {
           role: user.role,
           team: user.team,
         }}
-        action="/api/admin/domain"
+        action="/api/storage"
       />
     </>
   );

app/(protected)/dashboard/urls/analytics/loading.tsx

@@ -0,0 +1,9 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function DashboardUrlsLoading() {
+  return (
+    <>
+      <Skeleton className="h-[400px] w-full rounded-lg" />
+    </>
+  );
+}

app/(protected)/dashboard/urls/analytics/page.tsx

@@ -0,0 +1,24 @@
+import { redirect } from "next/navigation";
+
+import { getCurrentUser } from "@/lib/session";
+import { constructMetadata } from "@/lib/utils";
+import { DashboardHeader } from "@/components/dashboard/header";
+
+import Globe from "../globe";
+
+export const metadata = constructMetadata({
+  title: "Globe Analytics",
+  description: "Display link's globe analytics.",
+});
+
+export default async function DashboardPage() {
+  const user = await getCurrentUser();
+
+  if (!user?.id) redirect("/login");
+
+  return (
+    <>
+      <Globe />
+    </>
+  );
+}

app/(protected)/dashboard/urls/api/loading.tsx

@@ -0,0 +1,10 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function DashboardUrlsLoading() {
+  return (
+    <>
+      <Skeleton className="h-[120px] w-full rounded-lg" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
+    </>
+  );
+}

app/(protected)/dashboard/urls/api/page.tsx

@@ -0,0 +1,47 @@
+import { redirect } from "next/navigation";
+
+import { getCurrentUser } from "@/lib/session";
+import { constructMetadata } from "@/lib/utils";
+import { DashboardHeader } from "@/components/dashboard/header";
+import ApiReference from "@/components/shared/api-reference";
+
+import { CodeLight } from "../../scrape/scrapes";
+import LiveLog from "../live-logs";
+
+export const metadata = constructMetadata({
+  title: "Live Logs",
+  description: "Display link's real-time live logs.",
+});
+
+export default async function DashboardPage() {
+  const user = await getCurrentUser();
+
+  if (!user?.id) redirect("/login");
+
+  return (
+    <>
+      <ApiReference
+        badge="POST /api/v1/short"
+        target="creating short urls"
+        link="/docs/short-urls#api-reference"
+      />
+      <CodeLight
+        content={`
+curl -X POST \\
+  -H "Content-Type: application/json" \\
+  -H "wrdo-api-key: YOUR_API_KEY" \\
+  -d '{
+    "target": "https://www.oiov.dev",
+    "url": "abc123",
+    "expiration": "-1",
+    "prefix": "wr.do",
+    "visible": 1,
+    "active": 1,
+    "password": ""
+  }' \\
+  https://wr.do/api/v1/short
+        `}
+      />
+    </>
+  );
+}

app/(protected)/dashboard/urls/export.tsx

@@ -0,0 +1,204 @@
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+
+import { ShortUrlFormData } from "@/lib/dto/short-urls";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Icons } from "@/components/shared/icons";
+
+interface ExportConfig {
+  filename?: string;
+  fields?: (keyof ShortUrlFormData)[];
+  filter?: (item: ShortUrlFormData) => boolean;
+  sort?: (a: ShortUrlFormData, b: ShortUrlFormData) => number;
+  format?: "pretty" | "compact";
+}
+
+export const exportToJsonAdvanced = (
+  data: ShortUrlFormData[],
+  config: ExportConfig = {},
+) => {
+  const {
+    filename = "short-urls",
+    fields,
+    filter,
+    sort,
+    format = "pretty",
+  } = config;
+
+  try {
+    let processedData = [...data];
+
+    // 应用过滤器
+    if (filter) {
+      processedData = processedData.filter(filter);
+    }
+
+    // 应用排序
+    if (sort) {
+      processedData = processedData.sort(sort);
+    }
+
+    // 选择特定字段
+    if (fields) {
+      processedData = processedData.map((item) => {
+        const filteredItem: Partial<ShortUrlFormData> = {};
+        fields.forEach((field) => {
+          filteredItem[field] = item[field] as any;
+        });
+        return filteredItem as ShortUrlFormData;
+      });
+    }
+
+    // 格式化 JSON
+    const indent = format === "pretty" ? 2 : 0;
+    const jsonString = JSON.stringify(processedData, null, indent);
+
+    // 创建并下载文件
+    const blob = new Blob([jsonString], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${filename}.json`;
+
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+
+    return {
+      success: true,
+      exportedCount: processedData.length,
+      totalCount: data.length,
+    };
+  } catch (error) {
+    console.error("Export failed:", error);
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "Unknown error",
+    };
+  }
+};
+
+export const useJsonExport = () => {
+  const [isExporting, setIsExporting] = useState(false);
+  const [exportStatus, setExportStatus] = useState<string>("");
+
+  const exportData = async (
+    data: ShortUrlFormData[],
+    config?: ExportConfig,
+  ) => {
+    setIsExporting(true);
+    setExportStatus("正在导出...");
+
+    try {
+      const result = exportToJsonAdvanced(data, config);
+
+      if (result.success) {
+        setExportStatus(`成功导出 ${result.exportedCount} 条记录`);
+      } else {
+        setExportStatus(`导出失败: ${result.error}`);
+      }
+
+      // 3秒后清除状态
+      setTimeout(() => {
+        setExportStatus("");
+      }, 3000);
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return {
+    exportData,
+    isExporting,
+    exportStatus,
+  };
+};
+
+export const UrlExporter: React.FC<{
+  data: ShortUrlFormData[];
+}> = ({ data }) => {
+  const { exportData } = useJsonExport();
+
+  const t = useTranslations("List");
+
+  const handleExportAll = () => {
+    exportData(data, {
+      filename: "all-urls",
+      format: "pretty",
+    });
+  };
+
+  const handleExportActive = () => {
+    exportData(data, {
+      filename: "active-urls",
+      filter: (item) => item.active === 1,
+      sort: (a, b) =>
+        new Date(b.createdAt!).getTime() - new Date(a.createdAt!).getTime(),
+      format: "pretty",
+    });
+  };
+
+  const handleExportBasicInfo = () => {
+    exportData(data, {
+      filename: "urls",
+      fields: ["prefix", "url", "target"],
+      format: "compact",
+    });
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          className="flex items-center gap-2 text-nowrap"
+          variant={"outline"}
+        >
+          {t("Export")}
+          <Icons.chevronDown className="size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem asChild>
+          <Button
+            className="flex w-full items-center gap-2 text-nowrap"
+            size="sm"
+            variant="ghost"
+            onClick={handleExportAll}
+          >
+            {t("Export All")}
+          </Button>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Button
+            className="flex w-full items-center gap-2"
+            size="sm"
+            variant="ghost"
+            onClick={handleExportActive}
+          >
+            {t("Export Active")}
+          </Button>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Button
+            className="flex w-full items-center gap-2"
+            size="sm"
+            variant="ghost"
+            onClick={handleExportBasicInfo}
+          >
+            {t("Export Basic Info")}
+          </Button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

app/(protected)/dashboard/urls/globe/index.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import dynamic from "next/dynamic";
 import { differenceInMinutes, format } from "date-fns";
+import { useTranslations } from "next-intl";
 
 import { DAILY_DIMENSION_ENUMS } from "@/lib/enums";
 import {
@@ -437,6 +438,7 @@ export function RealtimeTimePicker({
   timeRange: string;
   setTimeRange: (value: string) => void;
 }) {
+  const t = useTranslations("Components");
   return (
     <Select onValueChange={setTimeRange} name="time range" value={timeRange}>
       <SelectTrigger className="left-0 top-0 z-10 h-9 rounded-b-none border-b-0 bg-transparent text-left backdrop-blur-2xl sm:absolute sm:w-[326px]">
@@ -446,7 +448,7 @@ export function RealtimeTimePicker({
         {DAILY_DIMENSION_ENUMS.map((e, i) => (
           <div key={e.value}>
             <SelectItem value={e.value}>
-              <span className="flex items-center gap-1">{e.label}</span>
+              <span className="flex items-center gap-1">{t(e.label)}</span>
             </SelectItem>
             {i % 2 === 0 && i !== DAILY_DIMENSION_ENUMS.length - 1 && (
               <SelectSeparator />

app/(protected)/dashboard/urls/globe/realtime-chart.tsx

@@ -1,13 +1,7 @@
 "use client";
 
-import {
+import { useTranslations } from "next-intl";
-  Bar,
+import { Bar, BarChart, Tooltip, XAxis, YAxis } from "recharts";
-  BarChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
 
 import { cn } from "@/lib/utils";
 import StatusDot from "@/components/dashboard/status-dot";
@@ -29,6 +23,7 @@ export const RealtimeChart = ({
   chartData,
   totalClicks,
 }: RealtimeChartProps) => {
+  const t = useTranslations("Components");
   const getTickInterval = (dataLength: number) => {
     if (dataLength <= 6) return 0;
     if (dataLength <= 12) return 1;
@@ -45,7 +40,7 @@ export const RealtimeChart = ({
     <div className={cn(`rounded-lg border p-3 backdrop-blur-2xl`, className)}>
       <div className="mb-1 flex items-center text-base font-semibold">
         <StatusDot status={1} />
-        <h3 className="ml-2">Realtime Visits</h3>
+        <h3 className="ml-2">{t("Realtime Visits")}</h3>
         <Icons.mousePointerClick className="ml-auto size-4 text-muted-foreground" />
       </div>
       <p className="mb-2 text-lg font-semibold">{totalClicks}</p>
@@ -66,7 +61,9 @@ export const RealtimeChart = ({
           type="category"
           scale="point"
           padding={{ left: 14, right: 20 }}
-          tickFormatter={(value) => value.split(" ")[1]}
+          tickFormatter={(value) =>
+            value.split(" ")[1] ? value.split(" ")[1] : value
+          }
         />
         <YAxis
           domain={[0, "dataMax"]}

app/(protected)/dashboard/urls/globe/realtime-logs.tsx

@@ -98,7 +98,7 @@ const RealtimeLogs = ({
                 <div className="flex items-center gap-1">
                   <Link
                     className="text-sm font-semibold"
-                    href={`https://${loc.userUrl?.prefix}/s/${loc.userUrl?.url}`}
+                    href={`https://${loc.userUrl?.prefix}/${loc.userUrl?.url}`}
                     target="_blank"
                   >
                     {loc.userUrl?.url}

app/(protected)/dashboard/urls/live-logs.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { RefreshCwIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { useTheme } from "next-themes";
 import useSWR, { useSWRConfig } from "swr";
 
@@ -46,14 +47,22 @@ export interface LogEntry {
   isNew?: boolean; // New property to track newly added logs
 }
 
-export default function LiveLog({ admin = false }: { admin?: boolean }) {
+export default function LiveLog({
+  admin = false,
+  live = false,
+}: {
+  admin?: boolean;
+  live?: boolean;
+}) {
   const { theme } = useTheme();
   const { mutate } = useSWRConfig();
-  const [isLive, setIsLive] = useState(false);
+  const [isLive, setIsLive] = useState(live);
   const [logs, setLogs] = useState<LogEntry[]>([]);
   const [limitDiplay, setLimitDisplay] = useState(100);
   const newLogsRef = useRef<Set<string>>(new Set()); // Track new log keys
 
+  const t = useTranslations("Components");
+
   const {
     data: newLogs,
     error,
@@ -151,10 +160,10 @@ export default function LiveLog({ admin = false }: { admin?: boolean }) {
         <div className="flex items-center justify-between gap-2">
           <div>
             <CardTitle className="text-base text-gray-800 dark:text-gray-100">
-              Live Log
+              {t("Live Logs")}
             </CardTitle>
             <CardDescription>
-              Real-time logs of short link visits.
+              {t("Real-time logs of short link visits")}.
             </CardDescription>
           </div>
 
@@ -162,11 +171,12 @@ export default function LiveLog({ admin = false }: { admin?: boolean }) {
             onClick={toggleLive}
             variant={"outline"}
             size="sm"
-            className={`ml-auto gap-2 bg-primary-foreground transition-colors hover:border-blue-600 hover:text-blue-600 ${
+            className={`ml-auto gap-2 text-nowrap bg-primary-foreground transition-colors hover:border-blue-600 hover:text-blue-600 ${
               isLive ? "border-dashed border-blue-600 text-blue-500" : ""
             }`}
           >
-            <Icons.CirclePlay className="h-4 w-4" /> {isLive ? "Stop" : "Live"}
+            <Icons.CirclePlay className="h-4 w-4" />{" "}
+            {isLive ? t("Stop") : t("Live")}
           </Button>
           <Button
             className="bg-primary-foreground"
@@ -176,9 +186,9 @@ export default function LiveLog({ admin = false }: { admin?: boolean }) {
             disabled={!isLive}
           >
             {isLoading ? (
-              <RefreshCwIcon className="size-4 animate-spin" />
+              <Icons.refreshCw className="size-4 animate-spin" />
             ) : (
-              <RefreshCwIcon className="size-4" />
+              <Icons.refreshCw className="size-4" />
             )}
           </Button>
           <Button
@@ -207,22 +217,22 @@ export default function LiveLog({ admin = false }: { admin?: boolean }) {
               <TableHeader>
                 <TableRow className="grid grid-cols-5 bg-gray-100/50 text-sm dark:bg-primary-foreground sm:grid-cols-9">
                   <TableHead className="col-span-2 flex h-8 items-center">
-                    Time
+                    {t("Time")}
                   </TableHead>
                   <TableHead className="col-span-1 flex h-8 items-center">
-                    Slug
+                    {t("Slug")}
                   </TableHead>
                   <TableHead className="col-span-3 hidden h-8 items-center sm:flex">
-                    Target
+                    {t("Target")}
                   </TableHead>
                   <TableHead className="col-span-1 hidden h-8 items-center sm:flex">
                     IP
                   </TableHead>
                   <TableHead className="col-span-1 flex h-8 items-center">
-                    Location
+                    {t("Location")}
                   </TableHead>
                   <TableHead className="col-span-1 flex h-8 items-center">
-                    Clicks
+                    {t("Clicks")}
                   </TableHead>
                 </TableRow>
               </TableHeader>
@@ -283,7 +293,7 @@ export default function LiveLog({ admin = false }: { admin?: boolean }) {
         )}
         {isLive && (
           <div className="flex w-full items-center justify-end gap-2 border-t border-dashed pt-4 text-sm text-gray-500">
-            <p>{logs.length}</p> of
+            <p>{logs.length}</p> {t("of")}
             <Select
               onValueChange={(value: string) => {
                 setLimitDisplay(Number(value));
@@ -302,7 +312,7 @@ export default function LiveLog({ admin = false }: { admin?: boolean }) {
                 ))}
               </SelectContent>
             </Select>
-            <p>total logs</p>
+            <p>{t("total logs")}</p>
           </div>
         )}
       </CardContent>

app/(protected)/dashboard/urls/loading.tsx

@@ -1,14 +1,14 @@
 import { Skeleton } from "@/components/ui/skeleton";
-import { DashboardHeader } from "@/components/dashboard/header";
 
 export default function DashboardUrlsLoading() {
   return (
     <>
-      <DashboardHeader
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-4">
-        heading="Manage&nbsp;Short&nbsp;URLs"
+        <Skeleton className="h-[102px] w-full rounded-lg" />
-        text="List and manage short urls."
+        <Skeleton className="h-[102px] w-full rounded-lg" />
-      />
+        <Skeleton className="h-[102px] w-full rounded-lg" />
-      <Skeleton className="h-32 w-full rounded-lg" />
+        <Skeleton className="h-[102px] w-full rounded-lg" />
+      </div>
       <Skeleton className="h-[400px] w-full rounded-lg" />
     </>
   );

app/(protected)/dashboard/urls/logs/loading.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { DashboardHeader } from "@/components/dashboard/header";
+
+export default function DashboardUrlsLoading() {
+  return (
+    <>
+      <DashboardHeader heading="Live Logs" text="" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
+    </>
+  );
+}

app/(protected)/dashboard/urls/logs/page.tsx

@@ -0,0 +1,25 @@
+import { redirect } from "next/navigation";
+
+import { getCurrentUser } from "@/lib/session";
+import { constructMetadata } from "@/lib/utils";
+import { DashboardHeader } from "@/components/dashboard/header";
+
+import LiveLog from "../live-logs";
+
+export const metadata = constructMetadata({
+  title: "Live Logs",
+  description: "Display link's real-time live logs.",
+});
+
+export default async function DashboardPage() {
+  const user = await getCurrentUser();
+
+  if (!user?.id) redirect("/login");
+
+  return (
+    <>
+      <DashboardHeader heading="Live Logs" text="" />
+      <LiveLog live={true} />
+    </>
+  );
+}

app/(protected)/dashboard/urls/meta-chart.tsx

@@ -7,9 +7,10 @@ import { UrlMeta, User } from "@prisma/client";
 import { VisSingleContainer, VisTooltip, VisTopoJSONMap } from "@unovis/react";
 import { TopoJSONMap } from "@unovis/ts";
 import { WorldMapTopoJSON } from "@unovis/ts/maps";
+import { useTranslations } from "next-intl";
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import useSWR from "swr";
 
-import { TeamPlanQuota } from "@/config/team";
 import {
   getBotName,
   getCountryName,
@@ -19,7 +20,7 @@ import {
   getRegionName,
 } from "@/lib/contries";
 import { DATE_DIMENSION_ENUMS } from "@/lib/enums";
-import { isLink, removeUrlSuffix, timeAgo } from "@/lib/utils";
+import { fetcher, isLink, removeUrlPrefix } from "@/lib/utils";
 import { useElementSize } from "@/hooks/use-element-size";
 import { Button } from "@/components/ui/button";
 import {
@@ -44,6 +45,7 @@ import {
 } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Icons } from "@/components/shared/icons";
+import { TimeAgoIntl } from "@/components/shared/time-ago";
 
 const chartConfig = {
   pv: {
@@ -175,6 +177,13 @@ export function DailyPVUVChart({
   const [activeChart, setActiveChart] =
     React.useState<keyof typeof chartConfig>("pv");
 
+  const t = useTranslations("Components");
+
+  const { data: plan } = useSWR<{ slAnalyticsRetention: number }>(
+    `/api/plan?team=${user.team}`,
+    fetcher,
+  );
+
   const processedData = processUrlMeta(data).map((entry) => ({
     date: entry.date,
     pv: entry.clicks,
@@ -184,13 +193,12 @@ export function DailyPVUVChart({
   const dataTotal = calculateUVAndPV(data);
 
   const latestEntry = data[data.length - 1];
-  const latestDate = timeAgo(latestEntry.updatedAt);
   const latestFrom = [
     latestEntry.city ? decodeURIComponent(latestEntry.city) : "",
-    latestEntry.country ? `(${getCountryName(latestEntry.country)})` : "",
+    latestEntry.country ? `${getCountryName(latestEntry.country)}` : "",
   ]
     .filter(Boolean)
-    .join(" ");
+    .join(",");
 
   // const pointData = data.map((item) => ({
   //   id: item.id,
@@ -238,50 +246,52 @@ export function DailyPVUVChart({
   const regionStats = generateStatsList(data, "region");
   const isBotStats = generateStatsList(data, "isBot");
 
+  const lastVisitorInfo = t.rich("last-visitor-info", {
+    location: latestFrom,
+    timeAgo: () => <TimeAgoIntl date={latestEntry.updatedAt} />,
+  });
+
   return (
     <Card>
       <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
         <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-2 sm:py-3">
-          <CardTitle>Link Analytics</CardTitle>
+          <CardTitle>{t("Link Analytics")}</CardTitle>
-          <CardDescription>
+          <CardDescription>{lastVisitorInfo}</CardDescription>
-            Last visitor from {latestFrom} about {latestDate}.
-          </CardDescription>
         </div>
         <div className="flex items-center">
-          <Select
+          {plan && (
-            onValueChange={(value: string) => {
+            <Select
-              setTimeRange(value);
+              onValueChange={(value: string) => {
-            }}
+                setTimeRange(value);
-            name="time range"
+              }}
-            defaultValue={timeRange}
+              name="time range"
-          >
+              defaultValue={timeRange}
-            <SelectTrigger className="mx-4 w-full shadow-inner">
+            >
-              <SelectValue placeholder="Select a time" />
+              <SelectTrigger className="mx-4 w-full min-w-28 shadow-inner">
-            </SelectTrigger>
+                <SelectValue placeholder="Select a time" />
-            <SelectContent>
+              </SelectTrigger>
-              {DATE_DIMENSION_ENUMS.map((e, i) => (
+              <SelectContent>
-                <div key={e.value}>
+                {DATE_DIMENSION_ENUMS.map((e, i) => (
-                  <SelectItem
+                  <div key={e.value}>
-                    disabled={
+                    <SelectItem
-                      e.key > TeamPlanQuota[user.team!].SL_AnalyticsRetention
+                      disabled={e.key > plan.slAnalyticsRetention}
-                    }
+                      value={e.value}
-                    value={e.value}
+                    >
-                  >
+                      <span className="flex items-center gap-1">
-                    <span className="flex items-center gap-1">
+                        {t(e.label)}
-                      {e.label}
+                        {e.key > plan.slAnalyticsRetention && (
-                      {e.key >
+                          <Icons.crown className="size-3" />
-                        TeamPlanQuota[user.team!].SL_AnalyticsRetention && (
+                        )}
-                        <Icons.crown className="size-3" />
+                      </span>
-                      )}
+                    </SelectItem>
-                    </span>
+                    {i % 2 === 0 && i !== DATE_DIMENSION_ENUMS.length - 1 && (
-                  </SelectItem>
+                      <SelectSeparator />
-                  {i % 2 === 0 && i !== DATE_DIMENSION_ENUMS.length - 1 && (
+                    )}
-                    <SelectSeparator />
+                  </div>
-                  )}
+                ))}
-                </div>
+              </SelectContent>
-              ))}
+            </Select>
-            </SelectContent>
+          )}
-          </Select>
           {["pv", "uv"].map((key) => {
             const chart = key as keyof typeof chartConfig;
             return (
@@ -291,8 +301,8 @@ export function DailyPVUVChart({
                 className="relative z-30 flex flex-1 flex-col items-center justify-center gap-1 border-t px-6 py-2 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-3"
                 onClick={() => setActiveChart(chart)}
               >
-                <span className="text-sm font-semibold text-muted-foreground">
+                <span className="text-nowrap text-sm font-semibold text-muted-foreground">
-                  {chartConfig[chart].label}
+                  {t(chartConfig[chart].label)}
                 </span>
                 <span className="text-lg font-bold leading-none">
                   {dataTotal[key as keyof typeof dataTotal].toLocaleString()}
@@ -403,8 +413,8 @@ export function DailyPVUVChart({
           {/* Referrers、isBotStats */}
           <Tabs defaultValue="referrer">
             <TabsList>
-              <TabsTrigger value="referrer">Referrers</TabsTrigger>
+              <TabsTrigger value="referrer">{t("Referrers")}</TabsTrigger>
-              <TabsTrigger value="isBot">Traffic Type</TabsTrigger>
+              <TabsTrigger value="isBot">{t("Traffic Type")}</TabsTrigger>
             </TabsList>
             <TabsContent className="h-[calc(100%-40px)]" value="referrer">
               {refererStats.length > 0 && (
@@ -420,8 +430,8 @@ export function DailyPVUVChart({
           {/* 国家、城市 */}
           <Tabs defaultValue="country">
             <TabsList>
-              <TabsTrigger value="country">Country</TabsTrigger>
+              <TabsTrigger value="country">{t("Country")}</TabsTrigger>
-              <TabsTrigger value="city">City</TabsTrigger>
+              <TabsTrigger value="city">{t("City")}</TabsTrigger>
             </TabsList>
             <TabsContent className="h-[calc(100%-40px)]" value="country">
               {countryStats.length > 0 && (
@@ -437,8 +447,8 @@ export function DailyPVUVChart({
           {/* browserStats、engineStats */}
           <Tabs defaultValue="browser">
             <TabsList>
-              <TabsTrigger value="browser">Browser</TabsTrigger>
+              <TabsTrigger value="browser">{t("Browser")}</TabsTrigger>
-              <TabsTrigger value="engine">Browser Engine</TabsTrigger>
+              <TabsTrigger value="engine">{t("Engine")}</TabsTrigger>
             </TabsList>
             <TabsContent className="h-[calc(100%-40px)]" value="browser">
               {browserStats.length > 0 && (
@@ -455,8 +465,8 @@ export function DailyPVUVChart({
           {/* Languages、regionStats */}
           <Tabs className="h-full" defaultValue="language">
             <TabsList>
-              <TabsTrigger value="language">Language</TabsTrigger>
+              <TabsTrigger value="language">{t("Language")}</TabsTrigger>
-              <TabsTrigger value="region">Region</TabsTrigger>
+              <TabsTrigger value="region">{t("Region")}</TabsTrigger>
             </TabsList>
             <TabsContent className="h-[calc(100%-40px)]" value="language">
               {languageStats.length > 0 && (
@@ -472,8 +482,8 @@ export function DailyPVUVChart({
           {/* deviceStats、osStats、cpuStats */}
           <Tabs defaultValue="device">
             <TabsList>
-              <TabsTrigger value="device">Device</TabsTrigger>
+              <TabsTrigger value="device">{t("Device")}</TabsTrigger>
-              <TabsTrigger value="os">OS</TabsTrigger>
+              <TabsTrigger value="os">{t("OS")}</TabsTrigger>
               <TabsTrigger value="cpu">CPU</TabsTrigger>
             </TabsList>
             <TabsContent className="h-[calc(100%-40px)]" value="device">
@@ -497,12 +507,12 @@ export function DailyPVUVChart({
 export function StatsList({ data, title }: { data: Stat[]; title: string }) {
   const [showAll, setShowAll] = useState(false);
   const displayedData = showAll ? data.slice(0, 50) : data.slice(0, 8);
-
+  const t = useTranslations("Components");
   return (
     <div className="h-full rounded-lg border">
       <div className="flex items-center justify-between border-b px-5 py-2 text-xs font-medium text-muted-foreground">
-        <span>名称</span>
+        <span>{t("Name")}</span>
-        <span className="">点击量</span>
+        <span className="">{t("Visitors")}</span>
       </div>
       <div
         className={`scrollbar-hidden overflow-hidden overflow-y-auto px-4 pb-4 pt-2 transition-all duration-500 ease-in-out`}
@@ -522,7 +532,7 @@ export function StatsList({ data, title }: { data: Stat[]; title: string }) {
                   href={ref.dimension}
                   target="_blank"
                 >
-                  {removeUrlSuffix(ref.dimension)}
+                  {removeUrlPrefix(ref.dimension)}
                 </Link>
               ) : (
                 <p className="font-medium">

app/(protected)/dashboard/urls/meta.tsx

@@ -2,9 +2,9 @@
 
 import { useState } from "react";
 import { UrlMeta, User } from "@prisma/client";
+import { useTranslations } from "next-intl";
 import useSWR from "swr";
 
-import { TeamPlanQuota } from "@/config/team";
 import { DATE_DIMENSION_ENUMS } from "@/lib/enums";
 import { fetcher } from "@/lib/utils";
 import {
@@ -28,13 +28,19 @@ export interface UrlMetaProps {
 }
 
 export default function UserUrlMetaInfo({ user, action, urlId }: UrlMetaProps) {
-  const [timeRange, setTimeRange] = useState<string>("24h");
+  const t = useTranslations("Components");
+  const [timeRange, setTimeRange] = useState<string>("7d");
   const { data, isLoading } = useSWR<UrlMeta[]>(
     `${action}?id=${urlId}&range=${timeRange}`,
     fetcher,
     { focusThrottleInterval: 30000 }, // 30 seconds,
   );
 
+  const { data: plan } = useSWR<{ slAnalyticsRetention: number }>(
+    `/api/plan?team=${user.team}`,
+    fetcher,
+  );
+
   if (isLoading)
     return (
       <div className="space-y-2">
@@ -45,47 +51,47 @@ export default function UserUrlMetaInfo({ user, action, urlId }: UrlMetaProps) {
   if (!data || data.length === 0) {
     return (
       <EmptyPlaceholder className="shadow-none">
-        <EmptyPlaceholder.Title>No Visits</EmptyPlaceholder.Title>
+        <EmptyPlaceholder.Title>{t("No Visits")}</EmptyPlaceholder.Title>
         <EmptyPlaceholder.Description>
-          You don&apos;t have any visits yet in{" "}
+          {t("You don't have any visits yet in")}{" "}
-          {DATE_DIMENSION_ENUMS.find(
+          {t(
-            (e) => e.value === timeRange,
+            DATE_DIMENSION_ENUMS.find((e) => e.value === timeRange)?.label ||
-          )?.label.toLowerCase()}
+              "",
+          )}
           .
-          <Select
+          {plan && (
-            onValueChange={(value: string) => {
+            <Select
-              setTimeRange(value);
+              onValueChange={(value: string) => {
-            }}
+                setTimeRange(value);
-            name="time range"
+              }}
-            defaultValue={timeRange}
+              name="time range"
-          >
+              defaultValue={timeRange}
-            <SelectTrigger className="mt-4 w-full shadow-inner">
+            >
-              <SelectValue placeholder="Select a time" />
+              <SelectTrigger className="mt-4 w-full shadow-inner">
-            </SelectTrigger>
+                <SelectValue placeholder="Select a time" />
-            <SelectContent>
+              </SelectTrigger>
-              {DATE_DIMENSION_ENUMS.map((e, i) => (
+              <SelectContent>
-                <div key={e.value}>
+                {DATE_DIMENSION_ENUMS.map((e, i) => (
-                  <SelectItem
+                  <div key={e.value}>
-                    disabled={
+                    <SelectItem
-                      e.key > TeamPlanQuota[user.team!].SL_AnalyticsRetention
+                      disabled={e.key > plan.slAnalyticsRetention}
-                    }
+                      value={e.value}
-                    value={e.value}
+                    >
-                  >
+                      <span className="flex items-center gap-1">
-                    <span className="flex items-center gap-1">
+                        {t(e.label)}
-                      {e.label}
+                        {e.key > plan.slAnalyticsRetention && (
-                      {e.key >
+                          <Icons.crown className="size-3" />
-                        TeamPlanQuota[user.team!].SL_AnalyticsRetention && (
+                        )}
-                        <Icons.crown className="size-3" />
+                      </span>
-                      )}
+                    </SelectItem>
-                    </span>
+                    {i % 2 === 0 && i !== DATE_DIMENSION_ENUMS.length - 1 && (
-                  </SelectItem>
+                      <SelectSeparator />
-                  {i % 2 === 0 && i !== DATE_DIMENSION_ENUMS.length - 1 && (
+                    )}
-                    <SelectSeparator />
+                  </div>
-                  )}
+                ))}
-                </div>
+              </SelectContent>
-              ))}
+            </Select>
-            </SelectContent>
+          )}
-          </Select>
         </EmptyPlaceholder.Description>
       </EmptyPlaceholder>
     );

app/(protected)/dashboard/urls/page.tsx

@@ -2,13 +2,12 @@ import { redirect } from "next/navigation";
 
 import { getCurrentUser } from "@/lib/session";
 import { constructMetadata } from "@/lib/utils";
-import { DashboardHeader } from "@/components/dashboard/header";
 
 import UserUrlsList from "./url-list";
 
 export const metadata = constructMetadata({
-  title: "Short URLs - WR.DO",
+  title: "Links",
-  description: "List and manage records.",
+  description: "List and manage short links.",
 });
 
 export default async function DashboardPage() {
@@ -18,12 +17,6 @@ export default async function DashboardPage() {
 
   return (
     <>
-      <DashboardHeader
-        heading="Manage&nbsp;Short&nbsp;URLs"
-        text="List and manage short urls."
-        link="/docs/short-urls"
-        linkText="short urls."
-      />
       <UserUrlsList
         user={{
           id: user.id,

app/(protected)/dashboard/urls/url-list.tsx

@@ -4,21 +4,23 @@ import { useEffect, useMemo, useState, useTransition } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { User } from "@prisma/client";
-import { PenLine, RefreshCwIcon } from "lucide-react";
+import { PenLine } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { toast } from "sonner";
 import useSWR, { useSWRConfig } from "swr";
 
 import { ShortUrlFormData } from "@/lib/dto/short-urls";
 import {
+  addUrlPrefix,
   cn,
   expirationTime,
   extractHostname,
   fetcher,
   nFormatter,
-  removeUrlSuffix,
+  removeUrlPrefix,
-  timeAgo,
 } from "@/lib/utils";
 import { useMediaQuery } from "@/hooks/use-media-query";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -29,6 +31,13 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Modal } from "@/components/ui/modal";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
@@ -41,12 +50,8 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
+import { ClickableTooltip } from "@/components/ui/tooltip";
-  Tooltip,
+import { UrlStatus } from "@/components/dashboard/status-card";
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { FormType } from "@/components/forms/record-form";
 import { UrlForm } from "@/components/forms/url-form";
 import ApiReference from "@/components/shared/api-reference";
@@ -57,9 +62,9 @@ import { Icons } from "@/components/shared/icons";
 import { LinkInfoPreviewer } from "@/components/shared/link-previewer";
 import { PaginationWrapper } from "@/components/shared/pagination";
 import QRCodeEditor from "@/components/shared/qr";
+import { TimeAgoIntl } from "@/components/shared/time-ago";
 
-import Globe from "./globe";
+import { UrlExporter } from "./export";
-import LiveLog from "./live-logs";
 import UserUrlMetaInfo from "./meta";
 
 export interface UrlListProps {
@@ -101,6 +106,7 @@ function TableColumnSekleton() {
 export default function UserUrlsList({ user, action }: UrlListProps) {
   const pathname = usePathname();
   const { isMobile } = useMediaQuery();
+  const t = useTranslations("List");
   const [currentView, setCurrentView] = useState<string>("List");
   const [isShowForm, setShowForm] = useState(false);
   const [formType, setFormType] = useState<FormType>("add");
@@ -108,7 +114,7 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
     null,
   );
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(15);
   const [isShowStats, setShowStats] = useState(false);
   const [isShowQrcode, setShowQrcode] = useState(false);
   const [selectedUrl, setSelectedUrl] = useState<ShortUrlFormData | null>(null);
@@ -122,6 +128,10 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
     Record<string, number>
   >({});
 
+  const [searchType, setSearchType] = useState<"slug" | "target" | "userName">(
+    "slug",
+  );
+
   const { mutate } = useSWRConfig();
   const { data, isLoading } = useSWR<{
     total: number;
@@ -185,87 +195,104 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
   const rendeEmpty = () => (
     <EmptyPlaceholder className="col-span-full shadow-none">
       <EmptyPlaceholder.Icon name="link" />
-      <EmptyPlaceholder.Title>No urls</EmptyPlaceholder.Title>
+      <EmptyPlaceholder.Title>{t("No urls")}</EmptyPlaceholder.Title>
       <EmptyPlaceholder.Description>
         You don&apos;t have any url yet. Start creating url.
       </EmptyPlaceholder.Description>
     </EmptyPlaceholder>
   );
 
-  const rendeSeachInputs = () => (
+  const renderSearchInputs = () => {
-    <div className="mb-2 flex-row items-center gap-2 space-y-2 sm:flex sm:space-y-0">
+    const getCurrentSearchValue = () => {
-      <div className="relative w-full">
+      switch (searchType) {
-        <Input
+        case "slug":
-          className="h-8 text-xs md:text-xs"
+          return searchParams.slug;
-          placeholder="Search by slug..."
+        case "target":
-          value={searchParams.slug}
+          return searchParams.target;
-          onChange={(e) => {
+        case "userName":
-            setSearchParams({
+          return searchParams.userName;
-              ...searchParams,
+        default:
-              slug: e.target.value,
+          return "";
-            });
+      }
-          }}
+    };
-        />
-        {searchParams.slug && (
-          <Button
-            className="absolute right-2 top-1/2 h-6 -translate-y-1/2 rounded-full px-1 text-gray-500 hover:text-gray-700"
-            onClick={() => setSearchParams({ ...searchParams, slug: "" })}
-            variant={"ghost"}
-          >
-            <Icons.close className="size-3" />
-          </Button>
-        )}
-      </div>
 
-      <div className="relative w-full">
+    const handleSearchChange = (value: string) => {
-        <Input
+      setSearchParams({
-          className="h-8 text-xs md:text-xs"
+        ...searchParams,
-          placeholder="Search by target..."
+        slug: searchType === "slug" ? value : "",
-          value={searchParams.target}
+        target: searchType === "target" ? value : "",
-          onChange={(e) => {
+        userName: searchType === "userName" ? value : "",
-            setSearchParams({
+      });
-              ...searchParams,
+    };
-              target: e.target.value,
-            });
-          }}
-        />
-        {searchParams.target && (
-          <Button
-            className="absolute right-2 top-1/2 h-6 -translate-y-1/2 rounded-full px-1 text-gray-500 hover:text-gray-700"
-            onClick={() => setSearchParams({ ...searchParams, target: "" })}
-            variant={"ghost"}
-          >
-            <Icons.close className="size-3" />
-          </Button>
-        )}
-      </div>
 
-      {user.role === "ADMIN" && (
+    const handleClearSearch = () => {
-        <div className="relative w-full">
+      handleSearchChange("");
+    };
+
+    const getPlaceholder = () => {
+      switch (searchType) {
+        case "slug":
+          return t("Search by slug") + "...";
+        case "target":
+          return t("Search by target") + "...";
+        case "userName":
+          return t("Search by username") + "...";
+        default:
+          return "Filter...";
+      }
+    };
+
+    const searchOptions = [
+      { value: "slug", label: t("Link Slug") },
+      { value: "target", label: t("Link Target") },
+      ...(user.role === "ADMIN"
+        ? [{ value: "userName", label: t("Username") }]
+        : []),
+    ];
+
+    const currentSearchValue = getCurrentSearchValue();
+
+    return (
+      <div className="ml-auto flex items-center">
+        <Select
+          value={searchType}
+          onValueChange={(value: typeof searchType) => setSearchType(value)}
+        >
+          <SelectTrigger className="h-10 w-[85px] rounded-r-none bg-muted text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {searchOptions.map((option) => (
+              <SelectItem
+                key={option.value}
+                value={option.value}
+                className="text-sm"
+              >
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <div className="relative flex-1">
           <Input
-            className="h-8 text-xs md:text-xs"
+            className="h-10 rounded-l-none border-l-0 pr-8 text-sm"
-            placeholder="Search by user name..."
+            placeholder={getPlaceholder()}
-            value={searchParams.userName}
+            value={currentSearchValue}
-            onChange={(e) => {
+            onChange={(e) => handleSearchChange(e.target.value)}
-              setSearchParams({
-                ...searchParams,
-                userName: e.target.value,
-              });
-            }}
           />
-          {searchParams.userName && (
+          {currentSearchValue && (
             <Button
               className="absolute right-2 top-1/2 h-6 -translate-y-1/2 rounded-full px-1 text-gray-500 hover:text-gray-700"
-              onClick={() => setSearchParams({ ...searchParams, userName: "" })}
+              onClick={handleClearSearch}
-              variant={"ghost"}
+              variant="ghost"
             >
               <Icons.close className="size-3" />
             </Button>
           )}
         </div>
-      )}
+      </div>
-    </div>
+    );
-  );
+  };
 
   const rendeClicks = (short: ShortUrlFormData) => (
     <>
@@ -299,28 +326,28 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
       <TableHeader className="bg-gray-100/50 dark:bg-primary-foreground">
         <TableRow className="grid grid-cols-3 items-center sm:grid-cols-11">
           <TableHead className="col-span-1 flex items-center font-bold sm:col-span-2">
-            Slug
+            {t("Slug")}
           </TableHead>
           <TableHead className="col-span-1 flex items-center font-bold sm:col-span-2">
-            Target
+            {t("Target")}
           </TableHead>
           <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
-            User
+            {t("User")}
           </TableHead>
           <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
-            Enabled
+            {t("Enabled")}
           </TableHead>
           <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
-            Expiration
+            {t("Expiration")}
           </TableHead>
           <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
-            Clicks
+            {t("Clicks")}
           </TableHead>
           <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
-            Updated
+            {t("Updated")}
           </TableHead>
           <TableHead className="col-span-1 flex items-center font-bold sm:col-span-2">
-            Actions
+            {t("Actions")}
           </TableHead>
         </TableRow>
       </TableHeader>
@@ -340,15 +367,17 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                 <TableCell className="col-span-1 flex items-center gap-1 sm:col-span-2">
                   <Link
                     className="overflow-hidden text-ellipsis whitespace-normal text-slate-600 hover:text-blue-400 hover:underline dark:text-slate-400"
-                    href={`https://${short.prefix}/s/${short.url}${short.password ? `?password=${short.password}` : ""}`}
+                    href={`https://${short.prefix}/${short.url}${short.password ? `?password=${short.password}` : ""}`}
                     target="_blank"
                     prefetch={false}
                     title={short.url}
                   >
-                    {short.url}
+                    <Badge variant="outline">
+                      {short.prefix}/{short.url}
+                    </Badge>
                   </Link>
                   <CopyButton
-                    value={`${short.prefix}/s/${short.url}${short.password ? `?password=${short.password}` : ""}`}
+                    value={`${short.prefix}/${short.url}${short.password ? `?password=${short.password}` : ""}`}
                     className={cn(
                       "size-[25px]",
                       "duration-250 transition-all group-hover:opacity-100",
@@ -361,21 +390,22 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                 <TableCell className="col-span-1 flex items-center justify-start sm:col-span-2">
                   <LinkInfoPreviewer
                     apiKey={user.apiKey ?? ""}
-                    url={short.target}
+                    url={addUrlPrefix(short.target)}
-                    formatUrl={removeUrlSuffix(short.target)}
+                    formatUrl={removeUrlPrefix(short.target)}
                   />
                 </TableCell>
                 <TableCell className="col-span-1 hidden truncate sm:flex">
-                  <TooltipProvider>
+                  <ClickableTooltip
-                    <Tooltip delayDuration={200}>
+                    className="cursor-pointer truncate"
-                      <TooltipTrigger className="truncate">
+                    content={
-                        {short.userName ?? "Anonymous"}
+                      <div className="px-2 py-1">
-                      </TooltipTrigger>
+                        <p>{short.user?.name}</p>
-                      <TooltipContent>
+                        <p>{short.user?.email}</p>
-                        {short.userName ?? "Anonymous"}
+                      </div>
-                      </TooltipContent>
+                    }
-                    </Tooltip>
+                  >
-                  </TooltipProvider>
+                    {short.user?.name || short.user?.email}
+                  </ClickableTooltip>
                 </TableCell>
                 <TableCell className="col-span-1 hidden sm:flex">
                   <Switch
@@ -394,11 +424,11 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                   </div>
                 </TableCell>
                 <TableCell className="col-span-1 hidden truncate sm:flex">
-                  {timeAgo(short.updatedAt as Date)}
+                  <TimeAgoIntl date={short.updatedAt as Date} />
                 </TableCell>
                 <TableCell className="col-span-1 flex items-center gap-1 sm:col-span-2">
                   <Button
-                    className="h-7 px-1 text-xs hover:bg-slate-100 dark:hover:text-primary-foreground"
+                    className="h-7 px-1 text-xs hover:bg-slate-100 dark:hover:text-primary-foreground sm:px-1.5"
                     size="sm"
                     variant={"outline"}
                     onClick={() => {
@@ -408,7 +438,7 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                       setShowForm(!isShowForm);
                     }}
                   >
-                    <p className="hidden sm:block">Edit</p>
+                    <p className="hidden text-nowrap sm:block">{t("Edit")}</p>
                     <PenLine className="mx-0.5 size-4 sm:ml-1 sm:size-3" />
                   </Button>
                   <Button
@@ -490,15 +520,15 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                     <div className="flex items-center">
                       <Link
                         className="overflow-hidden text-ellipsis whitespace-normal text-sm font-semibold text-slate-600 hover:text-blue-400 hover:underline dark:text-slate-300"
-                        href={`https://${short.prefix}/s/${short.url}${short.password ? `?password=${short.password}` : ""}`}
+                        href={`https://${short.prefix}/${short.url}${short.password ? `?password=${short.password}` : ""}`}
                         target="_blank"
                         prefetch={false}
                         title={short.url}
                       >
-                        {short.url}
+                        {short.prefix}/{short.url}
                       </Link>
                       <CopyButton
-                        value={`${short.prefix}/s/${short.url}${short.password ? `?password=${short.password}` : ""}`}
+                        value={`https://${short.prefix}/${short.url}${short.password ? `?password=${short.password}` : ""}`}
                         className={cn(
                           "size-[25px]",
                           "duration-250 transition-all group-hover:opacity-100",
@@ -526,7 +556,7 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                       <LinkInfoPreviewer
                         apiKey={user.apiKey ?? ""}
                         url={short.target}
-                        formatUrl={removeUrlSuffix(short.target)}
+                        formatUrl={removeUrlPrefix(short.target)}
                       />
                     </div>
                   </div>
@@ -561,7 +591,7 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                           }}
                         >
                           <Icons.lineChart className="size-4" />
-                          Analytics
+                          {t("Analytics")}
                         </Button>
                       </DropdownMenuItem>
                       <DropdownMenuSeparator />
@@ -578,7 +608,7 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                           }}
                         >
                           <PenLine className="size-4" />
-                          Edit URL
+                          {t("Edit URL")}
                         </Button>
                       </DropdownMenuItem>
                     </DropdownMenuContent>
@@ -586,16 +616,17 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                 </div>
 
                 <div className="mt-auto flex items-center justify-end gap-1.5 text-xs text-muted-foreground">
-                  <TooltipProvider>
+                  <ClickableTooltip
-                    <Tooltip delayDuration={200}>
+                    className="cursor-pointer truncate"
-                      <TooltipTrigger className="truncate">
+                    content={
-                        {short.userName ?? "Anonymous"}
+                      <div className="px-2 py-1">
-                      </TooltipTrigger>
+                        <p>{short.user?.name}</p>
-                      <TooltipContent>
+                        <p>{short.user?.email}</p>
-                        {short.userName ?? "Anonymous"}
+                      </div>
-                      </TooltipContent>
+                    }
-                    </Tooltip>
+                  >
-                  </TooltipProvider>
+                    {short.user?.name || short.user?.email}
+                  </ClickableTooltip>
                   <Separator
                     className="h-4/5"
                     orientation="vertical"
@@ -612,7 +643,7 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                       ></Separator>
                     </>
                   )}
-                  {timeAgo(short.updatedAt as Date)}
+                  <TimeAgoIntl date={short.updatedAt as Date} />
                   <Switch
                     className="scale-[0.6]"
                     defaultChecked={short.active === 1}
@@ -642,27 +673,19 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
     </>
   );
 
-  const rendLogs = () => (
-    <div className="mt-6 space-y-3">
-      {action.indexOf("admin") > -1 ? <LiveLog admin={true} /> : <LiveLog />}
-      <ApiReference
-        badge="POST /api/v1/short"
-        target="creating short urls"
-        link="/docs/short-urls#api-reference"
-      />
-    </div>
-  );
-
   return (
     <>
       <Tabs
-        className={cn("rounded-lg", pathname === "/dashboard" && "border p-6")}
+        className={cn(
+          "space-y-3 rounded-lg",
+          pathname === "/dashboard" && "border p-6",
+        )}
         value={currentView}
       >
         {/* Tabs */}
-        <div className="mb-4 flex items-center justify-between gap-2">
+        <div className="flex flex-wrap items-center justify-between gap-2">
           {pathname === "/dashboard" && (
-            <h2 className="mr-3 text-lg font-semibold">Short URLs</h2>
+            <h2 className="mr-auto text-lg font-semibold">{t("Short URLs")}</h2>
           )}
           <TabsList>
             <TabsTrigger onClick={() => setCurrentView("List")} value="List">
@@ -673,13 +696,6 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
               <Icons.layoutGrid className="size-4" />
               {/* Grid */}
             </TabsTrigger>
-            <TabsTrigger
-              onClick={() => setCurrentView("Realtime")}
-              value="Realtime"
-            >
-              <Icons.globe className="size-4 text-blue-500" />
-              {/* Realtime */}
-            </TabsTrigger>
             {selectedUrl?.id && (
               <TabsTrigger
                 className="flex items-center gap-1 text-muted-foreground"
@@ -691,47 +707,45 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
               </TabsTrigger>
             )}
           </TabsList>
-          {/* <p>Total: {data?.total || 0}</p> */}
+          <div className="flex items-center justify-end gap-3">
-          <div className="ml-auto flex items-center justify-end gap-3">
+            {renderSearchInputs()}
+            <UrlExporter data={data?.list || []} />
             <Button
               variant={"outline"}
               onClick={() => handleRefresh()}
               disabled={isLoading}
             >
               {isLoading ? (
-                <RefreshCwIcon className="size-4 animate-spin" />
+                <Icons.refreshCw className="size-4 animate-spin" />
               ) : (
-                <RefreshCwIcon className="size-4" />
+                <Icons.refreshCw className="size-4" />
               )}
             </Button>
-            <Button
+            {action.indexOf("admin") === -1 && (
-              className="flex shrink-0 gap-1"
+              <Button
-              variant="default"
+                className="flex shrink-0 gap-1"
-              onClick={() => {
+                variant="default"
-                setCurrentEditUrl(null);
+                onClick={() => {
-                setShowForm(false);
+                  setCurrentEditUrl(null);
-                setFormType("add");
+                  setShowForm(false);
-                setShowForm(!isShowForm);
+                  setFormType("add");
-              }}
+                  setShowForm(!isShowForm);
-            >
+                }}
-              <Icons.add className="size-4" />
+              >
-              <span className="hidden sm:inline">Add URL</span>
+                <Icons.add className="size-4" />
-            </Button>
+                <span className="hidden sm:inline">{t("Add URL")}</span>
+              </Button>
+            )}
           </div>
         </div>
 
-        <TabsContent className="space-y-3" value="List">
+        {pathname !== "/dashboard" && <UrlStatus action={action} />}
-          {rendeSeachInputs()}
+
+        <TabsContent className="mt-0 space-y-3" value="List">
           {rendeList()}
-          {rendLogs()}
         </TabsContent>
-        <TabsContent className="space-y-3" value="Grid">
+        <TabsContent className="mt-0 space-y-3" value="Grid">
-          {rendeSeachInputs()}
           {rendeGrid()}
-          {rendLogs()}
-        </TabsContent>
-        <TabsContent value="Realtime">
-          {action.indexOf("admin") > -1 ? <Globe isAdmin={true} /> : <Globe />}
         </TabsContent>
         {selectedUrl?.id && (
           <TabsContent value={selectedUrl.id}>
@@ -749,7 +763,7 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
         {selectedUrl && (
           <QRCodeEditor
             user={{ id: user.id, apiKey: user.apiKey || "", team: user.team! }}
-            url={`https://${selectedUrl.prefix}/s/${selectedUrl.url}`}
+            url={`https://${selectedUrl.prefix}/${selectedUrl.url}`}
           />
         )}
       </Modal>

app/(protected)/layout.tsx

@@ -8,6 +8,7 @@ import {
   MobileSheetSidebar,
 } from "@/components/layout/dashboard-sidebar";
 import { ModeToggle } from "@/components/layout/mode-toggle";
+import { Notification } from "@/components/layout/notification";
 import { UserAccountNav } from "@/components/layout/user-account-nav";
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
 
@@ -32,6 +33,7 @@ export default async function Dashboard({ children }: ProtectedLayoutProps) {
       <DashboardSidebar links={filteredLinks} />
 
       <div className="flex flex-1 flex-col">
+        <Notification />
         <header className="sticky top-0 z-50 flex h-14 bg-background px-4 lg:h-[60px] xl:px-8">
           <MaxWidthWrapper className="flex max-w-7xl items-center gap-x-3 px-0">
             <MobileSheetSidebar links={filteredLinks} />

app/(protected)/setup/guide.tsx

@@ -1,19 +1,18 @@
 "use client";
 
-import { useEffect, useState, useTransition } from "react";
+import { useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
 import { AnimatePresence, motion } from "framer-motion";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { toast } from "sonner";
 
-import { siteConfig } from "@/config/site";
+import { cn, removeUrlPrefix } from "@/lib/utils";
-import { cn, removeUrlSuffix } from "@/lib/utils";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Modal } from "@/components/ui/modal";
-import { Skeleton } from "@/components/ui/skeleton";
 import { FormSectionColumns } from "@/components/dashboard/form-section-columns";
 import { Icons } from "@/components/shared/icons";
 
@@ -27,26 +26,22 @@ export default function StepGuide({
   const [direction, setDirection] = useState(0);
   const [completedSteps, setCompletedSteps] = useState<number[]>([]);
 
+  const t = useTranslations("Common");
+
   const steps = [
     {
       id: 1,
-      title: "Set up an administrator",
+      title: t("Set up an administrator"),
-      description:
-        "Begin by entering your website URL or selecting an example site to reimagine your website with modern themes.",
       component: () => <SetAdminRole id={user.id} email={user.email} />,
     },
     {
       id: 2,
-      title: "Add the first domain",
+      title: t("Add the first domain"),
-      description:
-        "Check out your reimagined site and click to Migrate & Download.",
       component: () => <AddDomain onNextStep={goToNextStep} />,
     },
     {
       id: 3,
-      title: "Congrats on completing setup 🎉",
+      title: t("Congrats on completing setup 🎉"),
-      description:
-        "Navigate to your GitHub dashboard where you'll manage your repository and project files.",
       component: () => <Congrats />,
     },
   ];
@@ -92,7 +87,7 @@ export default function StepGuide({
     <Modal className="md:max-w-2xl">
       <div className="w-full px-4 py-2 md:px-8 md:py-4">
         <div className="mb-6 mt-3 flex items-center justify-between gap-4">
-          <h2 className="text-2xl font-bold">Admin Setup Guide</h2>
+          <h2 className="text-2xl font-bold">{t("Admin Setup Guide")}</h2>
           <div className="flex items-center gap-2 rounded-full bg-muted/50 px-3 py-1.5 text-sm font-medium">
             <span className="flex size-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
               {currentStep}
@@ -161,7 +156,7 @@ export default function StepGuide({
           )}
         >
           <ChevronLeft className="h-4 w-4" />
-          Previous
+          {t("Previous")}
         </button>
 
         <button
@@ -171,7 +166,7 @@ export default function StepGuide({
             "flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90",
           )}
         >
-          {currentStep === steps.length ? "🚀 Start" : "Next"}
+          {currentStep === steps.length ? t("🚀 Start") : t("Next")}
           <ChevronRight className="h-4 w-4" />
         </button>
       </motion.div>
@@ -182,6 +177,7 @@ export default function StepGuide({
 function SetAdminRole({ id, email }: { id: string; email: string }) {
   const [isPending, startTransition] = useTransition();
   const [isAdmin, setIsAdmin] = useState(false);
+  const t = useTranslations("Common");
   const handleSetAdmin = async () => {
     startTransition(async () => {
       const res = await fetch("/api/setup");
@@ -194,7 +190,7 @@ function SetAdminRole({ id, email }: { id: string; email: string }) {
   const ReadyBadge = (
     <Badge className="text-xs font-semibold" variant="green">
       <Icons.check className="mr-1 size-3" />
-      Ready
+      {t("Ready")}
     </Badge>
   );
 
@@ -202,14 +198,14 @@ function SetAdminRole({ id, email }: { id: string; email: string }) {
     <div className="flex flex-col gap-4 rounded-lg bg-neutral-50 p-4 dark:bg-neutral-900">
       <div className="flex items-center justify-between">
         <span className="text-sm font-semibold text-muted-foreground">
-          Allow Sign Up:
+          {t("Allow Sign Up")}:
         </span>
-        {siteConfig.openSignup ? ReadyBadge : <Skeleton className="h-4 w-12" />}
+        {ReadyBadge}
       </div>
 
       <div className="flex items-center justify-between">
         <span className="text-sm font-semibold text-muted-foreground">
-          Set {email} as ADMIN:
+          {t("Set {email} as ADMIN", { email })}:
         </span>
         {isAdmin ? (
           ReadyBadge
@@ -223,30 +219,39 @@ function SetAdminRole({ id, email }: { id: string; email: string }) {
             {isPending && (
               <Icons.spinner className="mr-2 size-4 animate-spin" />
             )}
-            Active Now
+            {t("Active Now")}
           </Button>
         )}
       </div>
 
       <div className="rounded-md border border-dashed p-2 text-xs text-muted-foreground">
         <p className="flex items-start gap-1">
-          📢 Only by becoming an administrator can one access the admin panel
+          • {t("After v1-0-2, this setup guide is not needed anymore")}.
-          and add domain names.
+        </p>
+        <p className="flex items-start gap-1">
+          •{" "}
+          {t(
+            "Only by becoming an administrator can one access the admin panel and add domain names",
+          )}
+          .
         </p>
         <p className="my-1">
-          📢 Administrators can set all user permissions, allocate quotas, view
+          •{" "}
-          and edit all resources (short links, subdomains, email), etc.
+          {t(
+            "Administrators can set all user permissions, allocate quotas, view and edit all resources (short links, subdomains, email), etc",
+          )}
+          .
         </p>
         <p>
-          📢 Via{" "}
+          •{t("Via")}{" "}
           <a
-            className="text-blue-500"
+            className="text-blue-500 after:content-['_↗']"
             target="_blank"
             href="/docs/developer/quick-start"
           >
-            quick start
+            {t("quick start")}
           </a>{" "}
-          docs to get more information.
+          {t("docs to get more information")}.
         </p>
       </div>
     </div>
@@ -256,6 +261,7 @@ function SetAdminRole({ id, email }: { id: string; email: string }) {
 function AddDomain({ onNextStep }: { onNextStep: () => void }) {
   const [isPending, startTransition] = useTransition();
   const [domain, setDomain] = useState("");
+  const t = useTranslations("Common");
   const handleCreateDomain = async () => {
     if (!domain) {
       toast.warning("Domain name cannot be empty");
@@ -266,7 +272,7 @@ function AddDomain({ onNextStep }: { onNextStep: () => void }) {
         method: "POST",
         body: JSON.stringify({
           data: {
-            domain_name: removeUrlSuffix(domain),
+            domain_name: removeUrlPrefix(domain),
             enable_short_link: true,
             enable_email: true,
             enable_dns: true,
@@ -292,10 +298,10 @@ function AddDomain({ onNextStep }: { onNextStep: () => void }) {
   };
   return (
     <div className="flex flex-col gap-4 rounded-lg bg-neutral-50 p-4 dark:bg-neutral-900">
-      <FormSectionColumns title="Domain Name">
+      <FormSectionColumns title={t("Domain Name")}>
         <div className="flex w-full flex-col items-start justify-between gap-2">
           <Label className="sr-only" htmlFor="domain_name">
-            Domain Name
+            {t("Domain Name")}
           </Label>
           <div className="w-full">
             <Input
@@ -307,7 +313,10 @@ function AddDomain({ onNextStep }: { onNextStep: () => void }) {
             />
           </div>
           <p className="text-xs text-muted-foreground">
-            Please enter a valid domain name (must be hosted on Cloudflare).
+            {t(
+              "Please enter a valid domain name (must be hosted on Cloudflare)",
+            )}
+            .
           </p>
         </div>
 
@@ -318,7 +327,7 @@ function AddDomain({ onNextStep }: { onNextStep: () => void }) {
             size={"sm"}
             onClick={onNextStep}
           >
-            Or add later
+            {t("Or add later")}
           </Button>
           <Button
             className="flex items-center gap-1"
@@ -330,7 +339,7 @@ function AddDomain({ onNextStep }: { onNextStep: () => void }) {
             {isPending && (
               <Icons.spinner className="mr-2 size-4 animate-spin" />
             )}
-            Submit
+            {t("Submit")}
           </Button>
         </div>
       </FormSectionColumns>

app/(protected)/setup/loading.tsx

@@ -4,10 +4,7 @@ import { DashboardHeader } from "@/components/dashboard/header";
 export default function DashboardLoading() {
   return (
     <>
-      <DashboardHeader
+      <DashboardHeader heading="Setup Guide" text="" />
-        heading="Manage&nbsp;Short&nbsp;URLs"
-        text="List and manage short urls."
-      />
       <Skeleton className="h-32 w-full rounded-lg" />
       <Skeleton className="h-[400px] w-full rounded-lg" />
     </>

app/api/admin/configs/route.ts

@@ -0,0 +1,73 @@
+import { NextRequest } from "next/server";
+
+import {
+  getMultipleConfigs,
+  updateSystemConfig,
+} from "@/lib/dto/system-config";
+import { checkUserStatus } from "@/lib/dto/user";
+import { getCurrentUser } from "@/lib/session";
+
+export async function GET(req: NextRequest) {
+  try {
+    const user = checkUserStatus(await getCurrentUser());
+    if (user instanceof Response) return user;
+    if (user.role !== "ADMIN") {
+      return Response.json("Unauthorized", { status: 401 });
+    }
+
+    const configs = await getMultipleConfigs([
+      "enable_user_registration",
+      "enable_subdomain_apply",
+      "system_notification",
+      "enable_github_oauth",
+      "enable_google_oauth",
+      "enable_liunxdo_oauth",
+      "enable_resend_email_login",
+      "enable_email_password_login",
+      "enable_email_catch_all",
+      "catch_all_emails",
+      "enable_tg_email_push",
+      "tg_email_bot_token",
+      "tg_email_chat_id",
+      "tg_email_template",
+      "tg_email_target_white_list",
+      "enable_email_registration_suffix_limit",
+      "email_registration_suffix_limit_white_list",
+      "enable_subdomain_status_email_pusher",
+      "enable_email_forward",
+      "email_forward_targets",
+      "email_forward_white_list",
+    ]);
+
+    return Response.json(configs, { status: 200 });
+  } catch (error) {
+    console.error("[Error]", error);
+    return Response.json(error.message || "Server error", { status: 500 });
+  }
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const user = checkUserStatus(await getCurrentUser());
+    if (user instanceof Response) return user;
+    if (user.role !== "ADMIN") {
+      return Response.json("Unauthorized", { status: 401 });
+    }
+
+    const { key, value, type } = await req.json();
+    if (!key || !type) {
+      return Response.json("key and value is required", { status: 400 });
+    }
+
+    const configs = await getMultipleConfigs([key]);
+
+    if (key in configs) {
+      await updateSystemConfig(key, { value, type });
+      return Response.json("Success", { status: 200 });
+    }
+    return Response.json("Invalid key", { status: 400 });
+  } catch (error) {
+    console.error("[Error]", error);
+    return Response.json(error.message || "Server error", { status: 500 });
+  }
+}

app/api/admin/domain/duplicate/route.ts

@@ -0,0 +1,56 @@
+import { NextRequest } from "next/server";
+
+import { createDomain, getDomainByName } from "@/lib/dto/domains";
+import { checkUserStatus } from "@/lib/dto/user";
+import { getCurrentUser } from "@/lib/session";
+
+export async function POST(req: NextRequest) {
+  try {
+    const user = checkUserStatus(await getCurrentUser());
+    if (user instanceof Response) return user;
+    if (user.role !== "ADMIN") {
+      return Response.json("Unauthorized", { status: 401 });
+    }
+
+    const { domain } = await req.json();
+    if (!domain) {
+      return Response.json("Domain name is required", { status: 400 });
+    }
+
+    const target_domain = await getDomainByName(domain);
+    if (!target_domain) {
+      return Response.json("Domain not found", { status: 404 });
+    }
+
+    const newDomain = await createDomain({
+      domain_name: target_domain.domain_name + "-copy",
+      enable_short_link: !!target_domain.enable_short_link,
+      enable_email: !!target_domain.enable_email,
+      enable_dns: !!target_domain.enable_dns,
+      cf_zone_id: target_domain.cf_zone_id,
+      cf_api_key: target_domain.cf_api_key,
+      cf_email: target_domain.cf_email,
+      cf_record_types: target_domain.cf_record_types,
+      cf_api_key_encrypted: false,
+      email_provider: target_domain.email_provider,
+      resend_api_key: target_domain.resend_api_key,
+      brevo_api_key: target_domain.brevo_api_key,
+      max_short_links: target_domain.max_short_links,
+      max_email_forwards: target_domain.max_email_forwards,
+      max_dns_records: target_domain.max_dns_records,
+      min_url_length: target_domain.min_url_length,
+      min_email_length: target_domain.min_email_length,
+      min_record_length: target_domain.min_record_length,
+      active: true,
+    });
+
+    if (!newDomain) {
+      return Response.json("Failed to create domain", { status: 400 });
+    }
+
+    return Response.json("Success", { status: 200 });
+  } catch (error) {
+    console.error("[Error]", error);
+    return Response.json(error.message || "Server error", { status: 500 });
+  }
+}

app/api/admin/domain/route.ts

@@ -58,11 +58,17 @@ export async function POST(req: NextRequest) {
       cf_zone_id: data.cf_zone_id,
       cf_api_key: data.cf_api_key,
       cf_email: data.cf_email,
+      cf_record_types: data.cf_record_types,
       cf_api_key_encrypted: false,
+      email_provider: data.email_provider,
       resend_api_key: data.resend_api_key,
+      brevo_api_key: data.brevo_api_key,
       max_short_links: data.max_short_links,
       max_email_forwards: data.max_email_forwards,
       max_dns_records: data.max_dns_records,
+      min_url_length: data.min_url_length,
+      min_email_length: data.min_email_length,
+      min_record_length: data.min_record_length,
       active: true,
     });
 
@@ -90,7 +96,13 @@ export async function PUT(req: NextRequest) {
       cf_zone_id,
       cf_api_key,
       cf_email,
+      cf_record_types,
+      email_provider,
       resend_api_key,
+      brevo_api_key,
+      min_url_length,
+      min_email_length,
+      min_record_length,
       max_short_links,
       max_email_forwards,
       max_dns_records,
@@ -110,8 +122,14 @@ export async function PUT(req: NextRequest) {
       cf_zone_id,
       cf_api_key,
       cf_email,
+      cf_record_types,
       cf_api_key_encrypted: false,
+      email_provider,
+      brevo_api_key,
       resend_api_key,
+      min_url_length,
+      min_email_length,
+      min_record_length,
       max_short_links,
       max_email_forwards,
       max_dns_records,

app/api/admin/plan/route.ts

@@ -0,0 +1,144 @@
+import { NextRequest } from "next/server";
+
+import {
+  createPlan,
+  deletePlan,
+  getAllPlans,
+  updatePlanQuota,
+} from "@/lib/dto/plan";
+import { checkUserStatus } from "@/lib/dto/user";
+import { getCurrentUser } from "@/lib/session";
+
+export async function GET(req: NextRequest) {
+  try {
+    const user = checkUserStatus(await getCurrentUser());
+    if (user instanceof Response) return user;
+    if (user.role !== "ADMIN") {
+      return Response.json("Unauthorized", { status: 401 });
+    }
+
+    // const url = new URL(req.url);
+    // const page = url.searchParams.get("page");
+    // const size = url.searchParams.get("size");
+    // const target = url.searchParams.get("target") || "";
+
+    const data = await getAllPlans();
+
+    return Response.json(data, { status: 200 });
+  } catch (error) {
+    console.error("[Error]", error);
+    return Response.json(error.message || "Server error", { status: 500 });
+  }
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const user = checkUserStatus(await getCurrentUser());
+    if (user instanceof Response) return user;
+    if (user.role !== "ADMIN") {
+      return Response.json("Unauthorized", { status: 401 });
+    }
+
+    const { plan } = await req.json();
+
+    const data = await createPlan({
+      name: plan.name,
+      slTrackedClicks: plan.slTrackedClicks,
+      slNewLinks: plan.slNewLinks,
+      slAnalyticsRetention: plan.slAnalyticsRetention,
+      slDomains: plan.slDomains,
+      slAdvancedAnalytics: plan.slAdvancedAnalytics,
+      slCustomQrCodeLogo: plan.slCustomQrCodeLogo,
+      rcNewRecords: plan.rcNewRecords,
+      emEmailAddresses: plan.emEmailAddresses,
+      emDomains: plan.emDomains,
+      stMaxFileSize: plan.stMaxFileSize,
+      stMaxTotalSize: plan.stMaxTotalSize,
+      stMaxFileCount: plan.stMaxFileCount,
+      emSendEmails: plan.emSendEmails,
+      appSupport: plan.appSupport.toUpperCase() as any,
+      appApiAccess: plan.appApiAccess,
+      isActive: true,
+    });
+
+    if (data) {
+      return Response.json(data, { status: 200 });
+    }
+
+    return Response.json(null, { status: 400 });
+  } catch (error) {
+    console.error("[Error]", error);
+    return Response.json(error.message || "Server error", { status: 500 });
+  }
+}
+
+export async function PUT(req: NextRequest) {
+  try {
+    const user = checkUserStatus(await getCurrentUser());
+    if (user instanceof Response) return user;
+    if (user.role !== "ADMIN") {
+      return Response.json("Unauthorized", { status: 401 });
+    }
+
+    const { plan } = await req.json();
+    if (!plan) {
+      return Response.json("Invalid request body", { status: 400 });
+    }
+
+    const res = await updatePlanQuota({
+      id: plan.id,
+      name: plan.name,
+      slTrackedClicks: plan.slTrackedClicks,
+      slNewLinks: plan.slNewLinks,
+      slAnalyticsRetention: plan.slAnalyticsRetention,
+      slDomains: plan.slDomains,
+      slAdvancedAnalytics: plan.slAdvancedAnalytics,
+      slCustomQrCodeLogo: plan.slCustomQrCodeLogo,
+      rcNewRecords: plan.rcNewRecords,
+      emEmailAddresses: plan.emEmailAddresses,
+      emDomains: plan.emDomains,
+      emSendEmails: plan.emSendEmails,
+      stMaxFileSize: plan.stMaxFileSize,
+      stMaxTotalSize: plan.stMaxTotalSize,
+      stMaxFileCount: plan.stMaxFileCount,
+      appSupport: plan.appSupport.toUpperCase() as any,
+      appApiAccess: plan.appApiAccess,
+      isActive: plan.isActive,
+    });
+
+    if (res) {
+      return Response.json(res, { status: 200 });
+    }
+
+    return Response.json(null, { status: 400 });
+  } catch (error) {
+    console.error("[Error]", error);
+    return Response.json(error.message || "Server error", { status: 500 });
+  }
+}
+
+export async function DELETE(req: NextRequest) {
+  try {
+    const user = checkUserStatus(await getCurrentUser());
+    if (user instanceof Response) return user;
+    if (user.role !== "ADMIN") {
+      return Response.json("Unauthorized", { status: 401 });
+    }
+
+    const { id } = await req.json();
+    if (!id) {
+      return Response.json("id is required", { status: 400 });
+    }
+
+    const data = await deletePlan(id);
+
+    if (data) {
+      return Response.json(data, { status: 200 });
+    }
+
+    return Response.json(null, { status: 400 });
+  } catch (error) {
+    console.error("[Error]", error);
+    return Response.json(error.message || "Server error", { status: 500 });
+  }
+}

app/api/admin/s3/route.ts

@@ -0,0 +1,51 @@
+import { NextRequest } from "next/server";
+
+import {
+  getMultipleConfigs,
+  updateSystemConfig,
+} from "@/lib/dto/system-config";
+import { checkUserStatus } from "@/lib/dto/user";
+import { getCurrentUser } from "@/lib/session";
+
+export async function GET(req: NextRequest) {
+  try {
+    const user = checkUserStatus(await getCurrentUser());
+    if (user instanceof Response) return user;
+    if (user.role !== "ADMIN") {
+      return Response.json("Unauthorized", { status: 401 });
+    }
+
+    const configs = await getMultipleConfigs(["s3_config_list"]);
+
+    return Response.json(configs, { status: 200 });
+  } catch (error) {
+    console.error("[Error]", error);
+    return Response.json(error.message || "Server error", { status: 500 });
+  }
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const user = checkUserStatus(await getCurrentUser());
+    if (user instanceof Response) return user;
+    if (user.role !== "ADMIN") {
+      return Response.json("Unauthorized", { status: 401 });
+    }
+
+    const { key, value, type } = await req.json();
+    if (!key || !type) {
+      return Response.json("key and value is required", { status: 400 });
+    }
+
+    const configs = await getMultipleConfigs([key]);
+
+    if (key in configs) {
+      await updateSystemConfig(key, { value, type });
+      return Response.json("Success", { status: 200 });
+    }
+    return Response.json("Invalid key", { status: 400 });
+  } catch (error) {
+    console.error("[Error]", error);
+    return Response.json(error.message || "Server error", { status: 500 });
+  }
+}

app/api/auth/credentials/route.ts

@@ -0,0 +1,53 @@
+import { NextRequest } from "next/server";
+
+import { prisma } from "@/lib/db";
+import { getMultipleConfigs } from "@/lib/dto/system-config";
+import { hashPassword, verifyPassword } from "@/lib/utils";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { email, password, name } = await req.json();
+    if (!email || !password) {
+      return Response.json("email and password is required", { status: 400 });
+    }
+
+    const user = await prisma.user.findUnique({
+      where: {
+        email,
+      },
+    });
+
+    if (!user) {
+      const configs = await getMultipleConfigs(["enable_user_registration"]);
+      if (!configs.enable_user_registration) {
+        return Response.json("User registration is disabled", { status: 403 });
+      }
+      const newUser = await prisma.user.create({
+        data: {
+          name: "",
+          email,
+          password: hashPassword(password),
+          active: 1,
+          role: "USER",
+          team: "free",
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+        },
+      });
+      return Response.json(newUser, { status: 200 });
+    } else {
+      if (user.active === 0) {
+        return Response.json(null, { status: 403 });
+      }
+      const passwordCorrect = verifyPassword(password, user.password || "");
+      if (passwordCorrect) {
+        return Response.json(user, { status: 200 });
+      }
+    }
+
+    return Response.json(null, { status: 400 });
+  } catch (error) {
+    console.error("[Auth Error]", error);
+    return Response.json(error.message || "Server error", { status: 500 });
+  }
+}

app/api/configs/route.ts

@@ -0,0 +1,35 @@
+import { NextRequest } from "next/server";
+
+import { getMultipleConfigs } from "@/lib/dto/system-config";
+
+export const dynamic = "force-dynamic";
+
+const allowed_keys = [
+  "enable_user_registration",
+  "enable_subdomain_apply",
+  "system_notification",
+];
+
+export async function GET(req: NextRequest) {
+  try {
+    const url = new URL(req.url);
+    const keys = url.searchParams.getAll("key") || [];
+
+    if (keys.length === 0) {
+      return Response.json("key is required", { status: 400 });
+    }
+
+    for (const key of keys) {
+      if (!allowed_keys.includes(key)) {
+        return Response.json("Invalid key", { status: 400 });
+      }
+    }
+
+    const configs = await getMultipleConfigs(keys);
+
+    return Response.json(configs, { status: 200 });
+  } catch (error) {
+    console.error("[Error]", error);
+    return Response.json(error.message || "Server error", { status: 500 });
+  }
+}

app/api/domain/check-resend/route.ts

@@ -26,8 +26,10 @@ export async function GET(req: NextRequest) {
     });
 
     if (error) {
-      console.error(error);
+      console.log("Resend error:", error);
-      return Response.json(400, { status: 400 });
+      return Response.json(`${error.message}`, {
+        status: 400,
+      });
     }
 
     return Response.json(200, { status: 200 });

app/api/email/inbox/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 
-import { getEmailsByEmailAddress } from "@/lib/dto/email";
+import { deleteEmailsByIds, getEmailsByEmailAddress } from "@/lib/dto/email";
 import { checkUserStatus } from "@/lib/dto/user";
 import { getCurrentUser } from "@/lib/session";
 
@@ -35,3 +35,22 @@ export async function GET(req: NextRequest) {
     );
   }
 }
+
+export async function DELETE(req: NextRequest) {
+  try {
+    const user = checkUserStatus(await getCurrentUser());
+    if (user instanceof Response) return user;
+
+    const { ids } = await req.json();
+    if (!ids) {
+      return Response.json("ids is required", { status: 400 });
+    }
+
+    await deleteEmailsByIds(ids);
+
+    return Response.json("success", { status: 200 });
+  } catch (error) {
+    console.error("[Error]", error);
+    return Response.json(error.message || "Server error", { status: 500 });
+  }
+}

app/api/email/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 
-import { TeamPlanQuota } from "@/config/team";
 import { createUserEmail, getAllUserEmails } from "@/lib/dto/email";
+import { getPlanQuota } from "@/lib/dto/plan";
 import { checkUserStatus } from "@/lib/dto/user";
 import { reservedAddressSuffix } from "@/lib/enums";
 import { getCurrentUser } from "@/lib/session";
@@ -43,11 +43,13 @@ export async function POST(req: NextRequest) {
   const user = checkUserStatus(await getCurrentUser());
   if (user instanceof Response) return user;
 
+  const plan = await getPlanQuota(user.team);
+
   // check limit
   const limit = await restrictByTimeRange({
     model: "userEmail",
     userId: user.id,
-    limit: TeamPlanQuota[user.team].EM_EmailAddresses,
+    limit: plan.emEmailAddresses,
     rangeType: "month",
   });
   if (limit)
@@ -60,12 +62,6 @@ export async function POST(req: NextRequest) {
   }
 
   const prefix = emailAddress.split("@")[0];
-  if (!prefix || prefix.length < 5) {
-    return NextResponse.json("Email address length must be at least 5", {
-      status: 400,
-    });
-  }
-
   if (reservedAddressSuffix.includes(prefix)) {
     return NextResponse.json("Invalid email address", { status: 400 });
   }

app/api/email/send/route.ts

@@ -1,10 +1,11 @@
 import { NextRequest, NextResponse } from "next/server";
+import { Resend } from "resend";
 
-import { TeamPlanQuota } from "@/config/team";
+import { checkDomainIsConfiguratedEmailProvider } from "@/lib/dto/domains";
-import { checkDomainIsConfiguratedResend } from "@/lib/dto/domains";
 import { getUserSendEmailCount, saveUserSendEmail } from "@/lib/dto/email";
+import { getPlanQuota } from "@/lib/dto/plan";
 import { checkUserStatus } from "@/lib/dto/user";
-import { resend } from "@/lib/email";
+import { brevoSendEmail } from "@/lib/email/brevo";
 import { getCurrentUser } from "@/lib/session";
 import { restrictByTimeRange } from "@/lib/team";
 import { isValidEmail } from "@/lib/utils";
@@ -14,11 +15,13 @@ export async function POST(req: NextRequest) {
     const user = checkUserStatus(await getCurrentUser());
     if (user instanceof Response) return user;
 
+    const plan = await getPlanQuota(user.team);
+
     // check limit
     const limit = await restrictByTimeRange({
       model: "userSendEmail",
       userId: user.id,
-      limit: TeamPlanQuota[user.team].EM_SendEmails,
+      limit: plan.emSendEmails,
       rangeType: "month",
     });
     if (limit)
@@ -34,23 +37,32 @@ export async function POST(req: NextRequest) {
       return NextResponse.json("Invalid email address", { status: 403 });
     }
 
-    if (!(await checkDomainIsConfiguratedResend(from.split("@")[1]))) {
+    const { email_key, provider } =
+      await checkDomainIsConfiguratedEmailProvider(from.split("@")[1]);
+
+    if (!email_key) {
       return NextResponse.json(
         "This domain is not configured for sending emails",
         { status: 400 },
       );
     }
 
-    const { error } = await resend.emails.send({
+    switch (provider) {
-      from,
+      case "Resend":
-      to,
+        const resend = new Resend(email_key);
-      subject,
+        await resend.emails.send({ from, to, subject, html });
-      html,
+        break;
-    });
+      case "Brevo":
-
+        await brevoSendEmail({
-    if (error) {
+          from,
-      console.log("Resend error:", error);
+          fromName: from.split("@")[0],
-      return NextResponse.json("Failed to send email", { status: 500 });
+          to,
+          subject,
+          html,
+        });
+        break;
+      default:
+        break;
     }
 
     await saveUserSendEmail(user.id, from, to, subject, html);