Merge branch 'main' into feature/multi-server-support

.github/FUNDING.yml

@@ -11,4 +11,4 @@ issuehunt: # Replace with a single IssueHunt username
 lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
 polar: # Replace with a single Polar username
 buy_me_a_coffee: mhsanaei
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
+custom: https://nowpayments.io/donation/hsanaei

.vscode/launch.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "vscode://schemas/launch",
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run 3x-ui (Debug)",
+      "type": "go",
+      "request": "launch",
+      "mode": "auto",
+      "program": "${workspaceFolder}",
+      "cwd": "${workspaceFolder}",
+      "env": {
+        "XUI_DEBUG": "true"
+      },
+      "console": "integratedTerminal"
+    },
+    {
+      "name": "Run 3x-ui (Debug, custom env)",
+      "type": "go",
+      "request": "launch",
+      "mode": "auto",
+      "program": "${workspaceFolder}",
+      "cwd": "${workspaceFolder}",
+      "env": {
+        // Set to true to serve assets/templates directly from disk for development
+        "XUI_DEBUG": "true",
+        // Uncomment to override DB folder location (by default uses working dir on Windows when debug)
+        // "XUI_DB_FOLDER": "${workspaceFolder}",
+        // Example: override log level (debug|info|notice|warn|error)
+        // "XUI_LOG_LEVEL": "debug"
+      },
+      "console": "integratedTerminal"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,40 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "go: build",
+      "type": "shell",
+      "command": "go",
+      "args": ["build", "-o", "bin/3x-ui.exe", "./main.go"],
+      "options": {
+        "cwd": "${workspaceFolder}"
+      },
+      "problemMatcher": ["$go"],
+      "group": { "kind": "build", "isDefault": true }
+    },
+    {
+      "label": "go: run",
+      "type": "shell",
+      "command": "go",
+      "args": ["run", "./main.go"],
+      "options": {
+        "cwd": "${workspaceFolder}",
+        "env": {
+          "XUI_DEBUG": "true"
+        }
+      },
+      "problemMatcher": ["$go"]
+    },
+    {
+      "label": "go: test",
+      "type": "shell",
+      "command": "go",
+      "args": ["test", "./..."],
+      "options": {
+        "cwd": "${workspaceFolder}"
+      },
+      "problemMatcher": ["$go"],
+      "group": "test"
+    }
+  ]
+}

README.ar_EG.md

@@ -7,11 +7,13 @@
   </picture>
 </p>
 
-[![](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/releases)
+[![Release](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg)](https://github.com/MHSanaei/3x-ui/releases)
-[![](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/actions)
+[![Build](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg)](https://github.com/MHSanaei/3x-ui/actions)
-[![GO Version](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui.svg?style=for-the-badge)](#)
+[![GO Version](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui.svg)](#)
-[![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/releases/latest)
+[![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg)](https://github.com/MHSanaei/3x-ui/releases/latest)
-[![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true&style=for-the-badge)](https://www.gnu.org/licenses/gpl-3.0.en.html)
+[![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true)](https://www.gnu.org/licenses/gpl-3.0.en.html)
+[![Go Reference](https://pkg.go.dev/badge/github.com/mhsanaei/3x-ui/v2.svg)](https://pkg.go.dev/github.com/mhsanaei/3x-ui/v2)
+[![Go Report Card](https://goreportcard.com/badge/github.com/mhsanaei/3x-ui/v2)](https://goreportcard.com/report/github.com/mhsanaei/3x-ui/v2)
 
 **3X-UI** — لوحة تحكم متقدمة مفتوحة المصدر تعتمد على الويب مصممة لإدارة خادم Xray-core. توفر واجهة سهلة الاستخدام لتكوين ومراقبة بروتوكولات VPN والوكيل المختلفة.
 
@@ -41,15 +43,13 @@ bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.
 
 **إذا كان هذا المشروع مفيدًا لك، فقد ترغب في إعطائه**:star2:
 
-<p align="left">
+<a href="https://www.buymeacoffee.com/MHSanaei" target="_blank">
-  <a href="https://buymeacoffee.com/mhsanaei" target="_blank">
+<img src="./media/default-yellow.png" alt="Buy Me A Coffee" style="height: 70px !important;width: 277px !important;" >
-    <img src="./media/buymeacoffe.png" alt="Image">
+</a>
-  </a>
+</br>
-</p>
+<a href="https://nowpayments.io/donation/hsanaei" target="_blank" rel="noreferrer noopener">
-
+   <img src="./media/donation-button-black.svg" alt="Crypto donation button by NOWPayments">
-- USDT (TRC20): `TXncxkvhkDWGts487Pjqq1qT9JmwRUz8CC`
+</a>
-- POL (polygon): `0x41C9548675D044c6Bfb425786C765bc37427256A`
-- LTC (Litecoin): `ltc1q2ach7x6d2zq0n4l0t4zl7d7xe2s6fs7a3vspwv`
 
 ## النجوم عبر الزمن
 

README.es_ES.md

@@ -7,11 +7,13 @@
   </picture>
 </p>
 
-[![](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/releases)
+[![Release](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg)](https://github.com/MHSanaei/3x-ui/releases)
-[![](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/actions)
+[![Build](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg)](https://github.com/MHSanaei/3x-ui/actions)
-[![GO Version](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui.svg?style=for-the-badge)](#)
+[![GO Version](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui.svg)](#)
-[![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/releases/latest)
+[![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg)](https://github.com/MHSanaei/3x-ui/releases/latest)
-[![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true&style=for-the-badge)](https://www.gnu.org/licenses/gpl-3.0.en.html)
+[![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true)](https://www.gnu.org/licenses/gpl-3.0.en.html)
+[![Go Reference](https://pkg.go.dev/badge/github.com/mhsanaei/3x-ui/v2.svg)](https://pkg.go.dev/github.com/mhsanaei/3x-ui/v2)
+[![Go Report Card](https://goreportcard.com/badge/github.com/mhsanaei/3x-ui/v2)](https://goreportcard.com/report/github.com/mhsanaei/3x-ui/v2)
 
 **3X-UI** — panel de control avanzado basado en web de código abierto diseñado para gestionar el servidor Xray-core. Ofrece una interfaz fácil de usar para configurar y monitorear varios protocolos VPN y proxy.
 
@@ -41,15 +43,14 @@ Para documentación completa, visita la [Wiki del proyecto](https://github.com/M
 
 **Si este proyecto te es útil, puedes darle una**:star2:
 
-<p align="left">
+<a href="https://www.buymeacoffee.com/MHSanaei" target="_blank">
-  <a href="https://buymeacoffee.com/mhsanaei" target="_blank">
+<img src="./media/default-yellow.png" alt="Buy Me A Coffee" style="height: 70px !important;width: 277px !important;" >
-    <img src="./media/buymeacoffe.png" alt="Image">
+</a>
-  </a>
-</p>
 
-- USDT (TRC20): `TXncxkvhkDWGts487Pjqq1qT9JmwRUz8CC`
+</br>
-- POL (polygon): `0x41C9548675D044c6Bfb425786C765bc37427256A`
+<a href="https://nowpayments.io/donation/hsanaei" target="_blank" rel="noreferrer noopener">
-- LTC (Litecoin): `ltc1q2ach7x6d2zq0n4l0t4zl7d7xe2s6fs7a3vspwv`
+   <img src="./media/donation-button-black.svg" alt="Crypto donation button by NOWPayments">
+</a>
 
 ## Estrellas a lo Largo del Tiempo
 

README.fa_IR.md

@@ -7,11 +7,13 @@
   </picture>
 </p>
 
-[![](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/releases)
+[![Release](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg)](https://github.com/MHSanaei/3x-ui/releases)
-[![](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/actions)
+[![Build](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg)](https://github.com/MHSanaei/3x-ui/actions)
-[![GO Version](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui.svg?style=for-the-badge)](#)
+[![GO Version](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui.svg)](#)
-[![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/releases/latest)
+[![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg)](https://github.com/MHSanaei/3x-ui/releases/latest)
-[![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true&style=for-the-badge)](https://www.gnu.org/licenses/gpl-3.0.en.html)
+[![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true)](https://www.gnu.org/licenses/gpl-3.0.en.html)
+[![Go Reference](https://pkg.go.dev/badge/github.com/mhsanaei/3x-ui/v2.svg)](https://pkg.go.dev/github.com/mhsanaei/3x-ui/v2)
+[![Go Report Card](https://goreportcard.com/badge/github.com/mhsanaei/3x-ui/v2)](https://goreportcard.com/report/github.com/mhsanaei/3x-ui/v2)
 
 **3X-UI** — یک پنل کنترل پیشرفته مبتنی بر وب با کد باز که برای مدیریت سرور Xray-core طراحی شده است. این پنل یک رابط کاربری آسان برای پیکربندی و نظارت بر پروتکل‌های مختلف VPN و پراکسی ارائه می‌دهد.
 
@@ -41,15 +43,14 @@ bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.
 
 **اگر این پروژه برای شما مفید است، می‌توانید به آن یک**:star2: بدهید
 
-<p align="left">
+<a href="https://www.buymeacoffee.com/MHSanaei" target="_blank">
-  <a href="https://buymeacoffee.com/mhsanaei" target="_blank">
+<img src="./media/default-yellow.png" alt="Buy Me A Coffee" style="height: 70px !important;width: 277px !important;" >
-    <img src="./media/buymeacoffe.png" alt="Image">
+</a>
-  </a>
-</p>
 
-- USDT (TRC20): `TXncxkvhkDWGts487Pjqq1qT9JmwRUz8CC`
+</br>
-- POL (polygon): `0x41C9548675D044c6Bfb425786C765bc37427256A`
+<a href="https://nowpayments.io/donation/hsanaei" target="_blank" rel="noreferrer noopener">
-- LTC (Litecoin): `ltc1q2ach7x6d2zq0n4l0t4zl7d7xe2s6fs7a3vspwv`
+   <img src="./media/donation-button-black.svg" alt="Crypto donation button by NOWPayments">
+</a>
 
 ## ستاره‌ها در طول زمان
 

README.md

@@ -7,11 +7,13 @@
   </picture>
 </p>
 
-[![](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/releases)
+[![Release](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg)](https://github.com/MHSanaei/3x-ui/releases)
-[![](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/actions)
+[![Build](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg)](https://github.com/MHSanaei/3x-ui/actions)
-[![GO Version](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui.svg?style=for-the-badge)](#)
+[![GO Version](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui.svg)](#)
-[![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/releases/latest)
+[![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg)](https://github.com/MHSanaei/3x-ui/releases/latest)
-[![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true&style=for-the-badge)](https://www.gnu.org/licenses/gpl-3.0.en.html)
+[![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true)](https://www.gnu.org/licenses/gpl-3.0.en.html)
+[![Go Reference](https://pkg.go.dev/badge/github.com/mhsanaei/3x-ui/v2.svg)](https://pkg.go.dev/github.com/mhsanaei/3x-ui/v2)
+[![Go Report Card](https://goreportcard.com/badge/github.com/mhsanaei/3x-ui/v2)](https://goreportcard.com/report/github.com/mhsanaei/3x-ui/v2)
 
 **3X-UI** — advanced, open-source web-based control panel designed for managing Xray-core server. It offers a user-friendly interface for configuring and monitoring various VPN and proxy protocols.
 
@@ -41,15 +43,14 @@ For full documentation, please visit the [project Wiki](https://github.com/MHSan
 
 **If this project is helpful to you, you may wish to give it a**:star2:
 
-<p align="left">
+<a href="https://www.buymeacoffee.com/MHSanaei" target="_blank">
-  <a href="https://buymeacoffee.com/mhsanaei" target="_blank">
+<img src="./media/default-yellow.png" alt="Buy Me A Coffee" style="height: 70px !important;width: 277px !important;" >
-    <img src="./media/buymeacoffe.png" alt="Image">
+</a>
-  </a>
-</p>
 
-- USDT (TRC20): `TXncxkvhkDWGts487Pjqq1qT9JmwRUz8CC`
+</br>
-- POL (polygon): `0x41C9548675D044c6Bfb425786C765bc37427256A`
+<a href="https://nowpayments.io/donation/hsanaei" target="_blank" rel="noreferrer noopener">
-- LTC (Litecoin): `ltc1q2ach7x6d2zq0n4l0t4zl7d7xe2s6fs7a3vspwv`
+   <img src="./media/donation-button-black.svg" alt="Crypto donation button by NOWPayments">
+</a>
 
 ## Stargazers over Time
 

README.ru_RU.md

@@ -7,11 +7,13 @@
   </picture>
 </p>
 
-[![](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/releases)
+[![Release](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg)](https://github.com/MHSanaei/3x-ui/releases)
-[![](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/actions)
+[![Build](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg)](https://github.com/MHSanaei/3x-ui/actions)
-[![GO Version](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui.svg?style=for-the-badge)](#)
+[![GO Version](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui.svg)](#)
-[![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/releases/latest)
+[![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg)](https://github.com/MHSanaei/3x-ui/releases/latest)
-[![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true&style=for-the-badge)](https://www.gnu.org/licenses/gpl-3.0.en.html)
+[![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true)](https://www.gnu.org/licenses/gpl-3.0.en.html)
+[![Go Reference](https://pkg.go.dev/badge/github.com/mhsanaei/3x-ui/v2.svg)](https://pkg.go.dev/github.com/mhsanaei/3x-ui/v2)
+[![Go Report Card](https://goreportcard.com/badge/github.com/mhsanaei/3x-ui/v2)](https://goreportcard.com/report/github.com/mhsanaei/3x-ui/v2)
 
 **3X-UI** — продвинутая панель управления с открытым исходным кодом на основе веб-интерфейса, разработанная для управления сервером Xray-core. Предоставляет удобный интерфейс для настройки и мониторинга различных VPN и прокси-протоколов.
 
@@ -41,15 +43,14 @@ bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.
 
 **Если этот проект полезен для вас, вы можете поставить ему**:star2:
 
-<p align="left">
+<a href="https://www.buymeacoffee.com/MHSanaei" target="_blank">
-  <a href="https://buymeacoffee.com/mhsanaei" target="_blank">
+<img src="./media/default-yellow.png" alt="Buy Me A Coffee" style="height: 70px !important;width: 277px !important;" >
-    <img src="./media/buymeacoffe.png" alt="Image">
+</a>
-  </a>
-</p>
 
-- USDT (TRC20): `TXncxkvhkDWGts487Pjqq1qT9JmwRUz8CC`
+</br>
-- POL (polygon): `0x41C9548675D044c6Bfb425786C765bc37427256A`
+<a href="https://nowpayments.io/donation/hsanaei" target="_blank" rel="noreferrer noopener">
-- LTC (Litecoin): `ltc1q2ach7x6d2zq0n4l0t4zl7d7xe2s6fs7a3vspwv`
+   <img src="./media/donation-button-black.svg" alt="Crypto donation button by NOWPayments">
+</a>
 
 ## Звезды с течением времени
 

README.zh_CN.md

@@ -7,11 +7,13 @@
   </picture>
 </p>
 
-[![](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/releases)
+[![Release](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg)](https://github.com/MHSanaei/3x-ui/releases)
-[![](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/actions)
+[![Build](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg)](https://github.com/MHSanaei/3x-ui/actions)
-[![GO Version](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui.svg?style=for-the-badge)](#)
+[![GO Version](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui.svg)](#)
-[![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg?style=for-the-badge)](https://github.com/MHSanaei/3x-ui/releases/latest)
+[![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg)](https://github.com/MHSanaei/3x-ui/releases/latest)
-[![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true&style=for-the-badge)](https://www.gnu.org/licenses/gpl-3.0.en.html)
+[![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true)](https://www.gnu.org/licenses/gpl-3.0.en.html)
+[![Go Reference](https://pkg.go.dev/badge/github.com/mhsanaei/3x-ui/v2.svg)](https://pkg.go.dev/github.com/mhsanaei/3x-ui/v2)
+[![Go Report Card](https://goreportcard.com/badge/github.com/mhsanaei/3x-ui/v2)](https://goreportcard.com/report/github.com/mhsanaei/3x-ui/v2)
 
 **3X-UI** — 一个基于网页的高级开源控制面板，专为管理 Xray-core 服务器而设计。它提供了用户友好的界面，用于配置和监控各种 VPN 和代理协议。
 
@@ -41,15 +43,14 @@ bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.
 
 **如果这个项目对您有帮助，您可以给它一个**:star2:
 
-<p align="left">
+<a href="https://www.buymeacoffee.com/MHSanaei" target="_blank">
-  <a href="https://buymeacoffee.com/mhsanaei" target="_blank">
+<img src="./media/default-yellow.png" alt="Buy Me A Coffee" style="height: 70px !important;width: 277px !important;" >
-    <img src="./media/buymeacoffe.png" alt="Image">
+</a>
-  </a>
-</p>
 
-- USDT (TRC20): `TXncxkvhkDWGts487Pjqq1qT9JmwRUz8CC`
+</br>
-- POL (polygon): `0x41C9548675D044c6Bfb425786C765bc37427256A`
+<a href="https://nowpayments.io/donation/hsanaei" target="_blank" rel="noreferrer noopener">
-- LTC (Litecoin): `ltc1q2ach7x6d2zq0n4l0t4zl7d7xe2s6fs7a3vspwv`
+   <img src="./media/donation-button-black.svg" alt="Crypto donation button by NOWPayments">
+</a>
 
 ## 随时间变化的星标数
 

config/version

@@ -1 +1 @@
-2.7.0
+2.8.2

database/db.go

@@ -9,10 +9,10 @@ import (
 	"path"
 	"slices"
 
-	"x-ui/config"
+	"github.com/mhsanaei/3x-ui/v2/config"
-	"x-ui/database/model"
+	"github.com/mhsanaei/3x-ui/v2/database/model"
-	"x-ui/util/crypto"
+	"github.com/mhsanaei/3x-ui/v2/util/crypto"
-	"x-ui/xray"
+	"github.com/mhsanaei/3x-ui/v2/xray"
 
 	"gorm.io/driver/sqlite"
 	"gorm.io/gorm"
@@ -142,6 +142,9 @@ func InitDB(dbPath string) error {
 	}
 
 	isUsersEmpty, err := isTableEmpty("users")
+	if err != nil {
+		return err
+	}
 
 	if err := initUser(); err != nil {
 		return err

database/model/model.go

@@ -3,8 +3,8 @@ package model
 import (
 	"fmt"
 
-	"x-ui/util/json_util"
+	"github.com/mhsanaei/3x-ui/v2/util/json_util"
-	"x-ui/xray"
+	"github.com/mhsanaei/3x-ui/v2/xray"
 )
 
 type Protocol string
@@ -34,8 +34,10 @@ type Inbound struct {
 	Total                int64                `json:"total" form:"total"`
 	AllTime              int64                `json:"allTime" form:"allTime" gorm:"default:0"`
 	Remark               string               `json:"remark" form:"remark"`
-	Enable      bool                 `json:"enable" form:"enable"`
+	Enable               bool                 `json:"enable" form:"enable" gorm:"index:idx_enable_traffic_reset,priority:1"`
 	ExpiryTime           int64                `json:"expiryTime" form:"expiryTime"`
+	TrafficReset         string               `json:"trafficReset" form:"trafficReset" gorm:"default:never;index:idx_enable_traffic_reset,priority:2"`
+	LastTrafficResetTime int64                `json:"lastTrafficResetTime" form:"lastTrafficResetTime" gorm:"default:0"`
 	ClientStats          []xray.ClientTraffic `gorm:"foreignKey:InboundId;references:Id" json:"clientStats" form:"clientStats"`
 
 	// config part

go.mod

@@ -1,4 +1,4 @@
-module x-ui
+module github.com/mhsanaei/3x-ui/v2
 
 go 1.25.1
 
@@ -15,11 +15,13 @@ require (
 	github.com/pelletier/go-toml/v2 v2.2.4
 	github.com/robfig/cron/v3 v3.0.1
 	github.com/shirou/gopsutil/v4 v4.25.8
+	github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e
 	github.com/valyala/fasthttp v1.65.0
 	github.com/xlzd/gotp v0.1.0
 	github.com/xtls/xray-core v1.250911.0
 	go.uber.org/atomic v1.11.0
 	golang.org/x/crypto v0.42.0
+	golang.org/x/sys v0.36.0
 	golang.org/x/text v0.29.0
 	google.golang.org/grpc v1.75.1
 	gorm.io/driver/sqlite v1.6.0
@@ -89,7 +91,6 @@ require (
 	golang.org/x/mod v0.28.0 // indirect
 	golang.org/x/net v0.44.0 // indirect
 	golang.org/x/sync v0.17.0 // indirect
-	golang.org/x/sys v0.36.0 // indirect
 	golang.org/x/time v0.13.0 // indirect
 	golang.org/x/tools v0.36.0 // indirect
 	golang.zx2c4.com/wintun v0.0.0-20230126152724-0fa3db229ce2 // indirect

go.sum

@@ -142,6 +142,8 @@ github.com/seiflotfy/cuckoofilter v0.0.0-20240715131351-a2f2c23f1771 h1:emzAzMZ1
 github.com/seiflotfy/cuckoofilter v0.0.0-20240715131351-a2f2c23f1771/go.mod h1:bR6DqgcAl1zTcOX8/pE2Qkj9XO00eCNqmKb7lXP8EAg=
 github.com/shirou/gopsutil/v4 v4.25.8 h1:NnAsw9lN7587WHxjJA9ryDnqhJpFH6A+wagYWTOH970=
 github.com/shirou/gopsutil/v4 v4.25.8/go.mod h1:q9QdMmfAOVIw7a+eF86P7ISEU6ka+NLgkUxlopV4RwI=
+github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e h1:MRM5ITcdelLK2j1vwZ3Je0FKVCfqOLp5zO6trqMLYs0=
+github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e/go.mod h1:XV66xRDqSt+GTGFMVlhk3ULuV0y9ZmzeVGR4mloJI3M=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
 github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=

main.go

@@ -9,14 +9,14 @@ import (
 	"syscall"
 	_ "unsafe"
 
-	"x-ui/config"
+	"github.com/mhsanaei/3x-ui/v2/config"
-	"x-ui/database"
+	"github.com/mhsanaei/3x-ui/v2/database"
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/sub"
+	"github.com/mhsanaei/3x-ui/v2/sub"
-	"x-ui/util/crypto"
+	"github.com/mhsanaei/3x-ui/v2/util/crypto"
-	"x-ui/web"
+	"github.com/mhsanaei/3x-ui/v2/web"
-	"x-ui/web/global"
+	"github.com/mhsanaei/3x-ui/v2/web/global"
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
 
 	"github.com/joho/godotenv"
 	"github.com/op/go-logging"

sub/sub.go

@@ -3,21 +3,42 @@ package sub
 import (
 	"context"
 	"crypto/tls"
+	"html/template"
 	"io"
+	"io/fs"
 	"net"
 	"net/http"
+	"os"
+	"path/filepath"
 	"strconv"
+	"strings"
 
-	"x-ui/config"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/util/common"
-	"x-ui/util/common"
+	webpkg "github.com/mhsanaei/3x-ui/v2/web"
-	"x-ui/web/middleware"
+	"github.com/mhsanaei/3x-ui/v2/web/locale"
-	"x-ui/web/network"
+	"github.com/mhsanaei/3x-ui/v2/web/middleware"
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/network"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
 
 	"github.com/gin-gonic/gin"
 )
 
+// setEmbeddedTemplates parses and sets embedded templates on the engine
+func setEmbeddedTemplates(engine *gin.Engine) error {
+	t, err := template.New("").Funcs(engine.FuncMap).ParseFS(
+		webpkg.EmbeddedHTML(),
+		"html/common/page.html",
+		"html/component/aThemeSwitch.html",
+		"html/settings/panel/subscription/subpage.html",
+	)
+	if err != nil {
+		return err
+	}
+	engine.SetHTMLTemplate(t)
+	return nil
+}
+
 type Server struct {
 	httpServer *http.Server
 	listener   net.Listener
@@ -38,13 +59,10 @@ func NewServer() *Server {
 }
 
 func (s *Server) initRouter() (*gin.Engine, error) {
-	if config.IsDebug() {
+	// Always run in release mode for the subscription server
-		gin.SetMode(gin.DebugMode)
-	} else {
 	gin.DefaultWriter = io.Discard
 	gin.DefaultErrorWriter = io.Discard
 	gin.SetMode(gin.ReleaseMode)
-	}
 
 	engine := gin.Default()
 
@@ -67,6 +85,17 @@ func (s *Server) initRouter() (*gin.Engine, error) {
 		return nil, err
 	}
 
+	// Determine if JSON subscription endpoint is enabled
+	subJsonEnable, err := s.settingService.GetSubJsonEnable()
+	if err != nil {
+		return nil, err
+	}
+
+	// Set base_path based on LinksPath for template rendering
+	engine.Use(func(c *gin.Context) {
+		c.Set("base_path", LinksPath)
+	})
+
 	Encrypt, err := s.settingService.GetSubEncrypt()
 	if err != nil {
 		return nil, err
@@ -112,15 +141,87 @@ func (s *Server) initRouter() (*gin.Engine, error) {
 		SubTitle = ""
 	}
 
+	// set per-request localizer from headers/cookies
+	engine.Use(locale.LocalizerMiddleware())
+
+	// register i18n function similar to web server
+	i18nWebFunc := func(key string, params ...string) string {
+		return locale.I18n(locale.Web, key, params...)
+	}
+	engine.SetFuncMap(map[string]any{"i18n": i18nWebFunc})
+
+	// Templates: prefer embedded; fallback to disk if necessary
+	if err := setEmbeddedTemplates(engine); err != nil {
+		logger.Warning("sub: failed to parse embedded templates:", err)
+		if files, derr := s.getHtmlFiles(); derr == nil {
+			engine.LoadHTMLFiles(files...)
+		} else {
+			logger.Error("sub: no templates available (embedded parse and disk load failed)", err, derr)
+		}
+	}
+
+	// Assets: use disk if present, fallback to embedded
+	// Serve under both root (/assets) and under the subscription path prefix (LinksPath + "assets")
+	// so reverse proxies with a URI prefix can load assets correctly.
+	// Determine LinksPath earlier to compute prefixed assets mount.
+	// Note: LinksPath always starts and ends with "/" (validated in settings).
+	var linksPathForAssets string
+	if LinksPath == "/" {
+		linksPathForAssets = "/assets"
+	} else {
+		// ensure single slash join
+		linksPathForAssets = strings.TrimRight(LinksPath, "/") + "/assets"
+	}
+
+	if _, err := os.Stat("web/assets"); err == nil {
+		engine.StaticFS("/assets", http.FS(os.DirFS("web/assets")))
+		if linksPathForAssets != "/assets" {
+			engine.StaticFS(linksPathForAssets, http.FS(os.DirFS("web/assets")))
+		}
+	} else {
+		if subFS, err := fs.Sub(webpkg.EmbeddedAssets(), "assets"); err == nil {
+			engine.StaticFS("/assets", http.FS(subFS))
+			if linksPathForAssets != "/assets" {
+				engine.StaticFS(linksPathForAssets, http.FS(subFS))
+			}
+		} else {
+			logger.Error("sub: failed to mount embedded assets:", err)
+		}
+	}
+
 	g := engine.Group("/")
 
 	s.sub = NewSUBController(
-		g, LinksPath, JsonPath, Encrypt, ShowInfo, RemarkModel, SubUpdates,
+		g, LinksPath, JsonPath, subJsonEnable, Encrypt, ShowInfo, RemarkModel, SubUpdates,
 		SubJsonFragment, SubJsonNoises, SubJsonMux, SubJsonRules, SubTitle)
 
 	return engine, nil
 }
 
+// getHtmlFiles loads templates from local folder (used in debug mode)
+func (s *Server) getHtmlFiles() ([]string, error) {
+	dir, _ := os.Getwd()
+	files := []string{}
+	// common layout
+	common := filepath.Join(dir, "web", "html", "common", "page.html")
+	if _, err := os.Stat(common); err == nil {
+		files = append(files, common)
+	}
+	// components used
+	theme := filepath.Join(dir, "web", "html", "component", "aThemeSwitch.html")
+	if _, err := os.Stat(theme); err == nil {
+		files = append(files, theme)
+	}
+	// page itself
+	page := filepath.Join(dir, "web", "html", "subpage.html")
+	if _, err := os.Stat(page); err == nil {
+		files = append(files, page)
+	} else {
+		return nil, err
+	}
+	return files, nil
+}
+
 func (s *Server) Start() (err error) {
 	// This is an anonymous function, no function name
 	defer func() {

sub/subController.go

@@ -2,9 +2,11 @@ package sub
 
 import (
 	"encoding/base64"
-	"net"
+	"fmt"
 	"strings"
 
+	"github.com/mhsanaei/3x-ui/v2/config"
+
 	"github.com/gin-gonic/gin"
 )
 
@@ -12,6 +14,7 @@ type SUBController struct {
 	subTitle       string
 	subPath        string
 	subJsonPath    string
+	jsonEnabled    bool
 	subEncrypt     bool
 	updateInterval string
 
@@ -23,6 +26,7 @@ func NewSUBController(
 	g *gin.RouterGroup,
 	subPath string,
 	jsonPath string,
+	jsonEnabled bool,
 	encrypt bool,
 	showInfo bool,
 	rModel string,
@@ -38,6 +42,7 @@ func NewSUBController(
 		subTitle:       subTitle,
 		subPath:        subPath,
 		subJsonPath:    jsonPath,
+		jsonEnabled:    jsonEnabled,
 		subEncrypt:     encrypt,
 		updateInterval: update,
 
@@ -50,29 +55,17 @@ func NewSUBController(
 
 func (a *SUBController) initRouter(g *gin.RouterGroup) {
 	gLink := g.Group(a.subPath)
-	gJson := g.Group(a.subJsonPath)
-
 	gLink.GET(":subid", a.subs)
+	if a.jsonEnabled {
+		gJson := g.Group(a.subJsonPath)
 		gJson.GET(":subid", a.subJsons)
+	}
 }
 
 func (a *SUBController) subs(c *gin.Context) {
 	subId := c.Param("subid")
-	var host string
+	scheme, host, hostWithPort, hostHeader := a.subService.ResolveRequest(c)
-	if h, err := getHostFromXFH(c.GetHeader("X-Forwarded-Host")); err == nil {
+	subs, lastOnline, traffic, err := a.subService.GetSubs(subId, host)
-		host = h
-	}
-	if host == "" {
-		host = c.GetHeader("X-Real-IP")
-	}
-	if host == "" {
-		var err error
-		host, _, err = net.SplitHostPort(c.Request.Host)
-		if err != nil {
-			host = c.Request.Host
-		}
-	}
-	subs, header, err := a.subService.GetSubs(subId, host)
 	if err != nil || len(subs) == 0 {
 		c.String(400, "Error!")
 	} else {
@@ -81,10 +74,42 @@ func (a *SUBController) subs(c *gin.Context) {
 			result += sub + "\n"
 		}
 
+		// If the request expects HTML (e.g., browser) or explicitly asked (?html=1 or ?view=html), render the info page here
+		accept := c.GetHeader("Accept")
+		if strings.Contains(strings.ToLower(accept), "text/html") || c.Query("html") == "1" || strings.EqualFold(c.Query("view"), "html") {
+			// Build page data in service
+			subURL, subJsonURL := a.subService.BuildURLs(scheme, hostWithPort, a.subPath, a.subJsonPath, subId)
+			if !a.jsonEnabled {
+				subJsonURL = ""
+			}
+			page := a.subService.BuildPageData(subId, hostHeader, traffic, lastOnline, subs, subURL, subJsonURL)
+			c.HTML(200, "subpage.html", gin.H{
+				"title":        "subscription.title",
+				"cur_ver":      config.GetVersion(),
+				"host":         page.Host,
+				"base_path":    page.BasePath,
+				"sId":          page.SId,
+				"download":     page.Download,
+				"upload":       page.Upload,
+				"total":        page.Total,
+				"used":         page.Used,
+				"remained":     page.Remained,
+				"expire":       page.Expire,
+				"lastOnline":   page.LastOnline,
+				"datepicker":   page.Datepicker,
+				"downloadByte": page.DownloadByte,
+				"uploadByte":   page.UploadByte,
+				"totalByte":    page.TotalByte,
+				"subUrl":       page.SubUrl,
+				"subJsonUrl":   page.SubJsonUrl,
+				"result":       page.Result,
+			})
+			return
+		}
+
 		// Add headers
-		c.Writer.Header().Set("Subscription-Userinfo", header)
+		header := fmt.Sprintf("upload=%d; download=%d; total=%d; expire=%d", traffic.Up, traffic.Down, traffic.Total, traffic.ExpiryTime/1000)
-		c.Writer.Header().Set("Profile-Update-Interval", a.updateInterval)
+		a.ApplyCommonHeaders(c, header, a.updateInterval, a.subTitle)
-		c.Writer.Header().Set("Profile-Title", "base64:"+base64.StdEncoding.EncodeToString([]byte(a.subTitle)))
 
 		if a.subEncrypt {
 			c.String(200, base64.StdEncoding.EncodeToString([]byte(result)))
@@ -96,41 +121,21 @@ func (a *SUBController) subs(c *gin.Context) {
 
 func (a *SUBController) subJsons(c *gin.Context) {
 	subId := c.Param("subid")
-	var host string
+	_, host, _, _ := a.subService.ResolveRequest(c)
-	if h, err := getHostFromXFH(c.GetHeader("X-Forwarded-Host")); err == nil {
-		host = h
-	}
-	if host == "" {
-		host = c.GetHeader("X-Real-IP")
-	}
-	if host == "" {
-		var err error
-		host, _, err = net.SplitHostPort(c.Request.Host)
-		if err != nil {
-			host = c.Request.Host
-		}
-	}
 	jsonSub, header, err := a.subJsonService.GetJson(subId, host)
 	if err != nil || len(jsonSub) == 0 {
 		c.String(400, "Error!")
 	} else {
 
 		// Add headers
-		c.Writer.Header().Set("Subscription-Userinfo", header)
+		a.ApplyCommonHeaders(c, header, a.updateInterval, a.subTitle)
-		c.Writer.Header().Set("Profile-Update-Interval", a.updateInterval)
-		c.Writer.Header().Set("Profile-Title", "base64:"+base64.StdEncoding.EncodeToString([]byte(a.subTitle)))
 
 		c.String(200, jsonSub)
 	}
 }
 
-func getHostFromXFH(s string) (string, error) {
+func (a *SUBController) ApplyCommonHeaders(c *gin.Context, header, updateInterval, profileTitle string) {
-	if strings.Contains(s, ":") {
+	c.Writer.Header().Set("Subscription-Userinfo", header)
-		realHost, _, err := net.SplitHostPort(s)
+	c.Writer.Header().Set("Profile-Update-Interval", updateInterval)
-		if err != nil {
+	c.Writer.Header().Set("Profile-Title", "base64:"+base64.StdEncoding.EncodeToString([]byte(profileTitle)))
-			return "", err
-		}
-		return realHost, nil
-	}
-	return s, nil
 }

sub/subJsonService.go

@@ -6,12 +6,12 @@ import (
 	"fmt"
 	"strings"
 
-	"x-ui/database/model"
+	"github.com/mhsanaei/3x-ui/v2/database/model"
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/util/json_util"
+	"github.com/mhsanaei/3x-ui/v2/util/json_util"
-	"x-ui/util/random"
+	"github.com/mhsanaei/3x-ui/v2/util/random"
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
-	"x-ui/xray"
+	"github.com/mhsanaei/3x-ui/v2/xray"
 )
 
 //go:embed default.json
@@ -292,34 +292,25 @@ func (s *SubJsonService) realityData(rData map[string]any) map[string]any {
 
 func (s *SubJsonService) genVnext(inbound *model.Inbound, streamSettings json_util.RawMessage, client model.Client, encryption string) json_util.RawMessage {
 	outbound := Outbound{}
-	usersData := make([]UserVnext, 1)
-
-	usersData[0].ID = client.ID
-	usersData[0].Level = 8
-	if inbound.Protocol == model.VMESS {
-		usersData[0].Security = client.Security
-	}
-	if inbound.Protocol == model.VLESS {
-		usersData[0].Flow = client.Flow
-		usersData[0].Encryption = encryption
-	}
-
-	vnextData := make([]VnextSetting, 1)
-	vnextData[0] = VnextSetting{
-		Address: inbound.Listen,
-		Port:    inbound.Port,
-		Users:   usersData,
-	}
-
 	outbound.Protocol = string(inbound.Protocol)
 	outbound.Tag = "proxy"
 	if s.mux != "" {
 		outbound.Mux = json_util.RawMessage(s.mux)
 	}
 	outbound.StreamSettings = streamSettings
-	outbound.Settings = OutboundSettings{
+	// Emit flattened settings inside Settings to match new Xray format
-		Vnext: vnextData,
+	settings := make(map[string]any)
+	settings["address"] = inbound.Listen
+	settings["port"] = inbound.Port
+	settings["id"] = client.ID
+	if inbound.Protocol == model.VLESS {
+		settings["flow"] = client.Flow
+		settings["encryption"] = encryption
 	}
+	if inbound.Protocol == model.VMESS {
+		settings["security"] = client.Security
+	}
+	outbound.Settings = settings
 
 	result, _ := json.MarshalIndent(outbound, "", "  ")
 	return result
@@ -356,8 +347,8 @@ func (s *SubJsonService) genServer(inbound *model.Inbound, streamSettings json_u
 		outbound.Mux = json_util.RawMessage(s.mux)
 	}
 	outbound.StreamSettings = streamSettings
-	outbound.Settings = OutboundSettings{
+	outbound.Settings = map[string]any{
-		Servers: serverData,
+		"servers": serverData,
 	}
 
 	result, _ := json.MarshalIndent(outbound, "", "  ")
@@ -369,28 +360,10 @@ type Outbound struct {
 	Tag            string               `json:"tag"`
 	StreamSettings json_util.RawMessage `json:"streamSettings"`
 	Mux            json_util.RawMessage `json:"mux,omitempty"`
-	ProxySettings  map[string]any       `json:"proxySettings,omitempty"`
+	Settings       map[string]any       `json:"settings,omitempty"`
-	Settings       OutboundSettings     `json:"settings,omitempty"`
 }
 
-type OutboundSettings struct {
+// Legacy vnext-related structs removed for flattened schema
-	Vnext   []VnextSetting  `json:"vnext,omitempty"`
-	Servers []ServerSetting `json:"servers,omitempty"`
-}
-
-type VnextSetting struct {
-	Address string      `json:"address"`
-	Port    int         `json:"port"`
-	Users   []UserVnext `json:"users"`
-}
-
-type UserVnext struct {
-	Encryption string `json:"encryption,omitempty"`
-	Flow       string `json:"flow,omitempty"`
-	ID         string `json:"id"`
-	Security   string `json:"security,omitempty"`
-	Level      int    `json:"level"`
-}
 
 type ServerSetting struct {
 	Password string `json:"password"`

sub/subService.go

@@ -3,19 +3,21 @@ package sub
 import (
 	"encoding/base64"
 	"fmt"
+	"net"
 	"net/url"
 	"strings"
 	"time"
 
-	"x-ui/database"
+	"github.com/gin-gonic/gin"
-	"x-ui/database/model"
-	"x-ui/logger"
-	"x-ui/util/common"
-	"x-ui/util/random"
-	"x-ui/web/service"
-	"x-ui/xray"
-
 	"github.com/goccy/go-json"
+
+	"github.com/mhsanaei/3x-ui/v2/database"
+	"github.com/mhsanaei/3x-ui/v2/database/model"
+	"github.com/mhsanaei/3x-ui/v2/logger"
+	"github.com/mhsanaei/3x-ui/v2/util/common"
+	"github.com/mhsanaei/3x-ui/v2/util/random"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
+	"github.com/mhsanaei/3x-ui/v2/xray"
 )
 
 type SubService struct {
@@ -34,19 +36,19 @@ func NewSubService(showInfo bool, remarkModel string) *SubService {
 	}
 }
 
-func (s *SubService) GetSubs(subId string, host string) ([]string, string, error) {
+func (s *SubService) GetSubs(subId string, host string) ([]string, int64, xray.ClientTraffic, error) {
 	s.address = host
 	var result []string
-	var header string
 	var traffic xray.ClientTraffic
+	var lastOnline int64
 	var clientTraffics []xray.ClientTraffic
 	inbounds, err := s.getInboundsBySubId(subId)
 	if err != nil {
-		return nil, "", err
+		return nil, 0, traffic, err
 	}
 
 	if len(inbounds) == 0 {
-		return nil, "", common.NewError("No inbounds found with ", subId)
+		return nil, 0, traffic, common.NewError("No inbounds found with ", subId)
 	}
 
 	s.datepicker, err = s.settingService.GetDatepicker()
@@ -73,7 +75,11 @@ func (s *SubService) GetSubs(subId string, host string) ([]string, string, error
 			if client.Enable && client.SubID == subId {
 				link := s.getLink(inbound, client.Email)
 				result = append(result, link)
-				clientTraffics = append(clientTraffics, s.getClientTraffics(inbound.ClientStats, client.Email))
+				ct := s.getClientTraffics(inbound.ClientStats, client.Email)
+				clientTraffics = append(clientTraffics, ct)
+				if ct.LastOnline > lastOnline {
+					lastOnline = ct.LastOnline
+				}
 			}
 		}
 	}
@@ -100,8 +106,7 @@ func (s *SubService) GetSubs(subId string, host string) ([]string, string, error
 			}
 		}
 	}
-	header = fmt.Sprintf("upload=%d; download=%d; total=%d; expire=%d", traffic.Up, traffic.Down, traffic.Total, traffic.ExpiryTime/1000)
+	return result, lastOnline, traffic, nil
-	return result, header, nil
 }
 
 func (s *SubService) getInboundsBySubId(subId string) ([]*model.Inbound, error) {
@@ -1022,3 +1027,135 @@ func searchHost(headers any) string {
 
 	return ""
 }
+
+// PageData is a view model for subpage.html
+type PageData struct {
+	Host         string
+	BasePath     string
+	SId          string
+	Download     string
+	Upload       string
+	Total        string
+	Used         string
+	Remained     string
+	Expire       int64
+	LastOnline   int64
+	Datepicker   string
+	DownloadByte int64
+	UploadByte   int64
+	TotalByte    int64
+	SubUrl       string
+	SubJsonUrl   string
+	Result       []string
+}
+
+// ResolveRequest extracts scheme and host info from request/headers consistently.
+func (s *SubService) ResolveRequest(c *gin.Context) (scheme string, host string, hostWithPort string, hostHeader string) {
+	// scheme
+	scheme = "http"
+	if c.Request.TLS != nil || strings.EqualFold(c.GetHeader("X-Forwarded-Proto"), "https") {
+		scheme = "https"
+	}
+
+	// base host (no port)
+	if h, err := getHostFromXFH(c.GetHeader("X-Forwarded-Host")); err == nil && h != "" {
+		host = h
+	}
+	if host == "" {
+		host = c.GetHeader("X-Real-IP")
+	}
+	if host == "" {
+		var err error
+		host, _, err = net.SplitHostPort(c.Request.Host)
+		if err != nil {
+			host = c.Request.Host
+		}
+	}
+
+	// host:port for URLs
+	hostWithPort = c.GetHeader("X-Forwarded-Host")
+	if hostWithPort == "" {
+		hostWithPort = c.Request.Host
+	}
+	if hostWithPort == "" {
+		hostWithPort = host
+	}
+
+	// header display host
+	hostHeader = c.GetHeader("X-Forwarded-Host")
+	if hostHeader == "" {
+		hostHeader = c.GetHeader("X-Real-IP")
+	}
+	if hostHeader == "" {
+		hostHeader = host
+	}
+	return
+}
+
+// BuildURLs constructs absolute subscription and json URLs.
+func (s *SubService) BuildURLs(scheme, hostWithPort, subPath, subJsonPath, subId string) (subURL, subJsonURL string) {
+	if strings.HasSuffix(subPath, "/") {
+		subURL = scheme + "://" + hostWithPort + subPath + subId
+	} else {
+		subURL = scheme + "://" + hostWithPort + strings.TrimRight(subPath, "/") + "/" + subId
+	}
+	if strings.HasSuffix(subJsonPath, "/") {
+		subJsonURL = scheme + "://" + hostWithPort + subJsonPath + subId
+	} else {
+		subJsonURL = scheme + "://" + hostWithPort + strings.TrimRight(subJsonPath, "/") + "/" + subId
+	}
+	return
+}
+
+// BuildPageData parses header and prepares the template view model.
+func (s *SubService) BuildPageData(subId string, hostHeader string, traffic xray.ClientTraffic, lastOnline int64, subs []string, subURL, subJsonURL string) PageData {
+	download := common.FormatTraffic(traffic.Down)
+	upload := common.FormatTraffic(traffic.Up)
+	total := "∞"
+	used := common.FormatTraffic(traffic.Up + traffic.Down)
+	remained := ""
+	if traffic.Total > 0 {
+		total = common.FormatTraffic(traffic.Total)
+		left := traffic.Total - (traffic.Up + traffic.Down)
+		if left < 0 {
+			left = 0
+		}
+		remained = common.FormatTraffic(left)
+	}
+
+	datepicker := s.datepicker
+	if datepicker == "" {
+		datepicker = "gregorian"
+	}
+
+	return PageData{
+		Host:         hostHeader,
+		BasePath:     "/", // kept as "/"; templates now use context base_path injected from router
+		SId:          subId,
+		Download:     download,
+		Upload:       upload,
+		Total:        total,
+		Used:         used,
+		Remained:     remained,
+		Expire:       traffic.ExpiryTime / 1000,
+		LastOnline:   lastOnline,
+		Datepicker:   datepicker,
+		DownloadByte: traffic.Down,
+		UploadByte:   traffic.Up,
+		TotalByte:    traffic.Total,
+		SubUrl:       subURL,
+		SubJsonUrl:   subJsonURL,
+		Result:       subs,
+	}
+}
+
+func getHostFromXFH(s string) (string, error) {
+	if strings.Contains(s, ":") {
+		realHost, _, err := net.SplitHostPort(s)
+		if err != nil {
+			return "", err
+		}
+		return realHost, nil
+	}
+	return s, nil
+}

util/common/err.go

@@ -4,7 +4,7 @@ import (
 	"errors"
 	"fmt"
 
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
 )
 
 func NewErrorf(format string, a ...any) error {

util/sys/sys_darwin.go

@@ -4,7 +4,12 @@
 package sys
 
 import (
+	"encoding/binary"
+	"fmt"
+	"sync"
+
 	"github.com/shirou/gopsutil/v4/net"
+	"golang.org/x/sys/unix"
 )
 
 func GetTCPCount() (int, error) {
@@ -22,3 +27,69 @@ func GetUDPCount() (int, error) {
 	}
 	return len(stats), nil
 }
+
+// --- CPU Utilization (macOS native) ---
+
+// sysctl kern.cp_time returns an array of 5 longs: user, nice, sys, idle, intr.
+// We compute utilization deltas without cgo.
+var (
+	cpuMu       sync.Mutex
+	lastTotals  [5]uint64
+	hasLastCPUT bool
+)
+
+func CPUPercentRaw() (float64, error) {
+	raw, err := unix.SysctlRaw("kern.cp_time")
+	if err != nil {
+		return 0, err
+	}
+	// Expect either 5*8 bytes (uint64) or 5*4 bytes (uint32)
+	var out [5]uint64
+	switch len(raw) {
+	case 5 * 8:
+		for i := 0; i < 5; i++ {
+			out[i] = binary.LittleEndian.Uint64(raw[i*8 : (i+1)*8])
+		}
+	case 5 * 4:
+		for i := 0; i < 5; i++ {
+			out[i] = uint64(binary.LittleEndian.Uint32(raw[i*4 : (i+1)*4]))
+		}
+	default:
+		return 0, fmt.Errorf("unexpected kern.cp_time size: %d", len(raw))
+	}
+
+	// user, nice, sys, idle, intr
+	user := out[0]
+	nice := out[1]
+	sysv := out[2]
+	idle := out[3]
+	intr := out[4]
+
+	cpuMu.Lock()
+	defer cpuMu.Unlock()
+
+	if !hasLastCPUT {
+		lastTotals = out
+		hasLastCPUT = true
+		return 0, nil
+	}
+
+	dUser := user - lastTotals[0]
+	dNice := nice - lastTotals[1]
+	dSys := sysv - lastTotals[2]
+	dIdle := idle - lastTotals[3]
+	dIntr := intr - lastTotals[4]
+
+	lastTotals = out
+
+	totald := dUser + dNice + dSys + dIdle + dIntr
+	if totald == 0 {
+		return 0, nil
+	}
+	busy := totald - dIdle
+	pct := float64(busy) / float64(totald) * 100.0
+	if pct > 100 {
+		pct = 100
+	}
+	return pct, nil
+}

util/sys/sys_linux.go

@@ -4,10 +4,14 @@
 package sys
 
 import (
+	"bufio"
 	"bytes"
 	"fmt"
 	"io"
 	"os"
+	"strconv"
+	"strings"
+	"sync"
 )
 
 func getLinesNum(filename string) (int, error) {
@@ -79,3 +83,99 @@ func safeGetLinesNum(path string) (int, error) {
 	}
 	return getLinesNum(path)
 }
+
+// --- CPU Utilization (Linux native) ---
+
+var (
+	cpuMu       sync.Mutex
+	lastTotal   uint64
+	lastIdleAll uint64
+	hasLast     bool
+)
+
+// CPUPercentRaw returns instantaneous total CPU utilization by reading /proc/stat.
+// First call initializes and returns 0; subsequent calls return busy/total * 100.
+func CPUPercentRaw() (float64, error) {
+	f, err := os.Open("/proc/stat")
+	if err != nil {
+		return 0, err
+	}
+	defer f.Close()
+
+	rd := bufio.NewReader(f)
+	line, err := rd.ReadString('\n')
+	if err != nil && err != io.EOF {
+		return 0, err
+	}
+	// Expect line like: cpu  user nice system idle iowait irq softirq steal guest guest_nice
+	fields := strings.Fields(line)
+	if len(fields) < 5 || fields[0] != "cpu" {
+		return 0, fmt.Errorf("unexpected /proc/stat format")
+	}
+
+	var nums []uint64
+	for i := 1; i < len(fields); i++ {
+		v, err := strconv.ParseUint(fields[i], 10, 64)
+		if err != nil {
+			break
+		}
+		nums = append(nums, v)
+	}
+	if len(nums) < 4 { // need at least user,nice,system,idle
+		return 0, fmt.Errorf("insufficient cpu fields")
+	}
+
+	// Conform with standard Linux CPU accounting
+	var user, nice, system, idle, iowait, irq, softirq, steal uint64
+	user = nums[0]
+	if len(nums) > 1 {
+		nice = nums[1]
+	}
+	if len(nums) > 2 {
+		system = nums[2]
+	}
+	if len(nums) > 3 {
+		idle = nums[3]
+	}
+	if len(nums) > 4 {
+		iowait = nums[4]
+	}
+	if len(nums) > 5 {
+		irq = nums[5]
+	}
+	if len(nums) > 6 {
+		softirq = nums[6]
+	}
+	if len(nums) > 7 {
+		steal = nums[7]
+	}
+
+	idleAll := idle + iowait
+	nonIdle := user + nice + system + irq + softirq + steal
+	total := idleAll + nonIdle
+
+	cpuMu.Lock()
+	defer cpuMu.Unlock()
+
+	if !hasLast {
+		lastTotal = total
+		lastIdleAll = idleAll
+		hasLast = true
+		return 0, nil
+	}
+
+	totald := total - lastTotal
+	idled := idleAll - lastIdleAll
+	lastTotal = total
+	lastIdleAll = idleAll
+
+	if totald == 0 {
+		return 0, nil
+	}
+	busy := totald - idled
+	pct := float64(busy) / float64(totald) * 100.0
+	if pct > 100 {
+		pct = 100
+	}
+	return pct, nil
+}

util/sys/sys_windows.go

@@ -5,6 +5,9 @@ package sys
 
 import (
 	"errors"
+	"sync"
+	"syscall"
+	"unsafe"
 
 	"github.com/shirou/gopsutil/v4/net"
 )
@@ -28,3 +31,81 @@ func GetTCPCount() (int, error) {
 func GetUDPCount() (int, error) {
 	return GetConnectionCount("udp")
 }
+
+// --- CPU Utilization (Windows native) ---
+
+var (
+	modKernel32        = syscall.NewLazyDLL("kernel32.dll")
+	procGetSystemTimes = modKernel32.NewProc("GetSystemTimes")
+
+	cpuMu      sync.Mutex
+	lastIdle   uint64
+	lastKernel uint64
+	lastUser   uint64
+	hasLast    bool
+)
+
+type filetime struct {
+	LowDateTime  uint32
+	HighDateTime uint32
+}
+
+func ftToUint64(ft filetime) uint64 {
+	return (uint64(ft.HighDateTime) << 32) | uint64(ft.LowDateTime)
+}
+
+// CPUPercentRaw returns the instantaneous total CPU utilization percentage using
+// Windows GetSystemTimes across all logical processors. The first call returns 0
+// as it initializes the baseline. Subsequent calls compute deltas.
+func CPUPercentRaw() (float64, error) {
+	var idleFT, kernelFT, userFT filetime
+	r1, _, e1 := procGetSystemTimes.Call(
+		uintptr(unsafe.Pointer(&idleFT)),
+		uintptr(unsafe.Pointer(&kernelFT)),
+		uintptr(unsafe.Pointer(&userFT)),
+	)
+	if r1 == 0 { // failure
+		if e1 != nil {
+			return 0, e1
+		}
+		return 0, syscall.GetLastError()
+	}
+
+	idle := ftToUint64(idleFT)
+	kernel := ftToUint64(kernelFT)
+	user := ftToUint64(userFT)
+
+	cpuMu.Lock()
+	defer cpuMu.Unlock()
+
+	if !hasLast {
+		lastIdle = idle
+		lastKernel = kernel
+		lastUser = user
+		hasLast = true
+		return 0, nil
+	}
+
+	idleDelta := idle - lastIdle
+	kernelDelta := kernel - lastKernel
+	userDelta := user - lastUser
+
+	// Update for next call
+	lastIdle = idle
+	lastKernel = kernel
+	lastUser = user
+
+	total := kernelDelta + userDelta
+	if total == 0 {
+		return 0, nil
+	}
+	// On Windows, kernel time includes idle time; busy = total - idle
+	busy := total - idleDelta
+
+	pct := float64(busy) / float64(total) * 100.0
+	// lower bound not needed; ratios of uint64 are non-negative
+	if pct > 100 {
+		pct = 100
+	}
+	return pct, nil
+}

web/assets/js/model/dbinbound.js

@@ -10,6 +10,8 @@ class DBInbound {
         this.remark = "";
         this.enable = true;
         this.expiryTime = 0;
+        this.trafficReset = "never";
+        this.lastTrafficResetTime = 0;
 
         this.listen = "";
         this.port = 0;

web/assets/js/model/outbound.js

@@ -647,10 +647,6 @@ class Outbound extends CommonClass {
         ].includes(this.protocol);
     }
 
-    hasVnext() {
-        return [Protocols.VMess, Protocols.VLESS].includes(this.protocol);
-    }
-
     hasServers() {
         return [Protocols.Trojan, Protocols.Shadowsocks, Protocols.Socks, Protocols.HTTP].includes(this.protocol);
     }
@@ -690,13 +686,22 @@ class Outbound extends CommonClass {
             if (this.stream?.sockopt)
                 stream = { sockopt: this.stream.sockopt.toJson() };
         }
+        // For VMess/VLESS, emit settings as a flat object
+        let settingsOut = this.settings instanceof CommonClass ? this.settings.toJson() : this.settings;
+        // Remove undefined/null keys
+        if (settingsOut && typeof settingsOut === 'object') {
+            Object.keys(settingsOut).forEach(k => {
+                if (settingsOut[k] === undefined || settingsOut[k] === null) delete settingsOut[k];
+            });
+        }
         return {
-            tag: this.tag == '' ? undefined : this.tag,
             protocol: this.protocol,
-            settings: this.settings instanceof CommonClass ? this.settings.toJson() : this.settings,
+            settings: settingsOut,
-            streamSettings: stream,
+            // Only include tag, streamSettings, sendThrough, mux if present and not empty
-            sendThrough: this.sendThrough != "" ? this.sendThrough : undefined,
+            ...(this.tag ? { tag: this.tag } : {}),
-            mux: this.mux?.enabled ? this.mux : undefined,
+            ...(stream ? { streamSettings: stream } : {}),
+            ...(this.sendThrough ? { sendThrough: this.sendThrough } : {}),
+            ...(this.mux?.enabled ? { mux: this.mux } : {}),
         };
     }
 
@@ -908,7 +913,7 @@ Outbound.FreedomSettings = class extends CommonClass {
     toJson() {
         return {
             domainStrategy: ObjectUtil.isEmpty(this.domainStrategy) ? undefined : this.domainStrategy,
-            redirect: ObjectUtil.isEmpty(this.redirect) ? undefined: this.redirect,
+            redirect: ObjectUtil.isEmpty(this.redirect) ? undefined : this.redirect,
             fragment: Object.keys(this.fragment).length === 0 ? undefined : this.fragment,
             noises: this.noises.length === 0 ? undefined : Outbound.FreedomSettings.Noise.toJsonArray(this.noises),
         };
@@ -1026,22 +1031,21 @@ Outbound.VmessSettings = class extends CommonClass {
     }
 
     static fromJson(json = {}) {
-        if (ObjectUtil.isArrEmpty(json.vnext)) return new Outbound.VmessSettings();
+        if (ObjectUtil.isEmpty(json.address) || ObjectUtil.isEmpty(json.port)) return new Outbound.VmessSettings();
         return new Outbound.VmessSettings(
-            json.vnext[0].address,
+            json.address,
-            json.vnext[0].port,
+            json.port,
-            json.vnext[0].users[0].id,
+            json.id,
-            json.vnext[0].users[0].security,
+            json.security,
         );
     }
 
     toJson() {
         return {
-            vnext: [{
             address: this.address,
             port: this.port,
-                users: [{ id: this.id, security: this.security }],
+            id: this.id,
-            }],
+            security: this.security,
         };
     }
 };
@@ -1056,23 +1060,23 @@ Outbound.VLESSSettings = class extends CommonClass {
     }
 
     static fromJson(json = {}) {
-        if (ObjectUtil.isArrEmpty(json.vnext)) return new Outbound.VLESSSettings();
+        if (ObjectUtil.isEmpty(json.address) || ObjectUtil.isEmpty(json.port)) return new Outbound.VLESSSettings();
         return new Outbound.VLESSSettings(
-            json.vnext[0].address,
+            json.address,
-            json.vnext[0].port,
+            json.port,
-            json.vnext[0].users[0].id,
+            json.id,
-            json.vnext[0].users[0].flow,
+            json.flow,
-            json.vnext[0].users[0].encryption,
+            json.encryption
         );
     }
 
     toJson() {
         return {
-            vnext: [{
             address: this.address,
             port: this.port,
-                users: [{ id: this.id, flow: this.flow, encryption: this.encryption }],
+            id: this.id,
-            }],
+            flow: this.flow,
+            encryption: this.encryption,
         };
     }
 };

web/assets/js/model/setting.js

@@ -26,7 +26,8 @@ class AllSetting {
         this.twoFactorEnable = false;
         this.twoFactorToken = "";
         this.xrayTemplateConfig = "";
-        this.subEnable = false;
+        this.subEnable = true;
+        this.subJsonEnable = false;
         this.subTitle = "";
         this.subListen = "";
         this.subPort = 2096;

web/assets/js/subscription.js

@@ -0,0 +1,157 @@
+(function () {
+  // Vue app for Subscription page
+  const el = document.getElementById('subscription-data');
+  if (!el) return;
+  const textarea = document.getElementById('subscription-links');
+  const rawLinks = (textarea?.value || '').split('\n').filter(Boolean);
+
+  const data = {
+    sId: el.getAttribute('data-sid') || '',
+    subUrl: el.getAttribute('data-sub-url') || '',
+    subJsonUrl: el.getAttribute('data-subjson-url') || '',
+    download: el.getAttribute('data-download') || '',
+    upload: el.getAttribute('data-upload') || '',
+    used: el.getAttribute('data-used') || '',
+    total: el.getAttribute('data-total') || '',
+    remained: el.getAttribute('data-remained') || '',
+    expireMs: (parseInt(el.getAttribute('data-expire') || '0', 10) || 0) * 1000,
+    lastOnlineMs: (parseInt(el.getAttribute('data-lastonline') || '0', 10) || 0),
+    downloadByte: parseInt(el.getAttribute('data-downloadbyte') || '0', 10) || 0,
+    uploadByte: parseInt(el.getAttribute('data-uploadbyte') || '0', 10) || 0,
+    totalByte: parseInt(el.getAttribute('data-totalbyte') || '0', 10) || 0,
+    datepicker: el.getAttribute('data-datepicker') || 'gregorian',
+  };
+
+  // Normalize lastOnline to milliseconds if it looks like seconds
+  if (data.lastOnlineMs && data.lastOnlineMs < 10_000_000_000) {
+    data.lastOnlineMs *= 1000;
+  }
+
+  function renderLink(item) {
+    return (
+      Vue.h('a-list-item', {}, [
+        Vue.h('a-space', { props: { size: 'small' } }, [
+          Vue.h('a-button', { props: { size: 'small' }, on: { click: () => copy(item) } }, [Vue.h('a-icon', { props: { type: 'copy' } })]),
+          Vue.h('span', { class: 'break-all' }, item)
+        ])
+      ])
+    );
+  }
+
+  function copy(text) {
+    ClipboardManager.copyText(text).then(ok => {
+      const messageType = ok ? 'success' : 'error';
+      Vue.prototype.$message[messageType](ok ? 'Copied' : 'Copy failed');
+    });
+  }
+
+  function open(url) {
+    window.location.href = url;
+  }
+
+  function drawQR(value) {
+    try {
+      new QRious({ element: document.getElementById('qrcode'), value, size: 220 });
+    } catch (e) {
+      console.warn(e);
+    }
+  }
+
+  // Try to extract a human label (email/ps) from different link types
+  function linkName(link, idx) {
+    try {
+      if (link.startsWith('vmess://')) {
+        const json = JSON.parse(atob(link.replace('vmess://', '')));
+        if (json.ps) return json.ps;
+        if (json.add && json.id) return json.add; // fallback host
+      } else if (link.startsWith('vless://') || link.startsWith('trojan://')) {
+        const hashIdx = link.indexOf('#');
+        if (hashIdx !== -1) return decodeURIComponent(link.substring(hashIdx + 1));
+        const qIdx = link.indexOf('?');
+        if (qIdx !== -1) {
+          const qs = new URL('http://x/?' + link.substring(qIdx + 1, hashIdx !== -1 ? hashIdx : undefined)).searchParams;
+          if (qs.get('remark')) return qs.get('remark');
+          if (qs.get('email')) return qs.get('email');
+        }
+        const at = link.indexOf('@');
+        const protSep = link.indexOf('://');
+        if (at !== -1 && protSep !== -1) return link.substring(protSep + 3, at);
+      } else if (link.startsWith('ss://')) {
+        const hashIdx = link.indexOf('#');
+        if (hashIdx !== -1) return decodeURIComponent(link.substring(hashIdx + 1));
+      }
+    } catch (e) { /* ignore and fallback */ }
+    return 'Link ' + (idx + 1);
+  }
+
+  const app = new Vue({
+    delimiters: ['[[', ']]'],
+    el: '#app',
+    data: {
+      themeSwitcher,
+      app: data,
+      links: rawLinks,
+      lang: '',
+      viewportWidth: (typeof window !== 'undefined' ? window.innerWidth : 1024),
+    },
+    async mounted() {
+      this.lang = LanguageManager.getLanguage();
+      const tpl = document.getElementById('subscription-data');
+      const sj = tpl ? tpl.getAttribute('data-subjson-url') : '';
+      if (sj) this.app.subJsonUrl = sj;
+      drawQR(this.app.subUrl);
+      try {
+        const elJson = document.getElementById('qrcode-subjson');
+        if (elJson && this.app.subJsonUrl) {
+          new QRious({ element: elJson, value: this.app.subJsonUrl, size: 220 });
+        }
+      } catch (e) { /* ignore */ }
+      this._onResize = () => { this.viewportWidth = window.innerWidth; };
+      window.addEventListener('resize', this._onResize);
+    },
+    beforeDestroy() {
+      if (this._onResize) window.removeEventListener('resize', this._onResize);
+    },
+    computed: {
+      isMobile() {
+        return this.viewportWidth < 576;
+      },
+      isUnlimited() {
+        return !this.app.totalByte;
+      },
+      isActive() {
+        const now = Date.now();
+        const expiryOk = !this.app.expireMs || this.app.expireMs >= now;
+        const trafficOk = !this.app.totalByte || (this.app.uploadByte + this.app.downloadByte) <= this.app.totalByte;
+        return expiryOk && trafficOk;
+      },
+      shadowrocketUrl() {
+        const rawUrl = this.app.subUrl + '?flag=shadowrocket';
+        const base64Url = btoa(rawUrl);
+        const remark = encodeURIComponent(this.app.sId || 'Subscription');
+        return `shadowrocket://add/sub/${base64Url}?remark=${remark}`;
+      },
+      v2boxUrl() {
+        return `v2box://install-sub?url=${encodeURIComponent(this.app.subUrl)}&name=${encodeURIComponent(this.app.sId)}`;
+      },
+      streisandUrl() {
+        return `streisand://import/${encodeURIComponent(this.app.subUrl)}`;
+      },
+      v2raytunUrl() {
+        return this.app.subUrl; 
+      },
+      npvtunUrl() {
+        return this.app.subUrl; 
+      }
+    },
+    methods: {
+      renderLink,
+      copy,
+      open,
+      linkName,
+      i18nLabel(key) {
+        return '{{ i18n "' + key + '" }}';
+      },
+    },
+  });
+})();

web/controller/api.go

@@ -1,7 +1,7 @@
 package controller
 
 import (
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
 
 	"github.com/gin-gonic/gin"
 )

web/controller/base.go

@@ -3,9 +3,9 @@ package controller
 import (
 	"net/http"
 
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/web/locale"
+	"github.com/mhsanaei/3x-ui/v2/web/locale"
-	"x-ui/web/session"
+	"github.com/mhsanaei/3x-ui/v2/web/session"
 
 	"github.com/gin-gonic/gin"
 )

web/controller/inbound.go

@@ -5,10 +5,10 @@ import (
 	"fmt"
 	"strconv"
 
-	"x-ui/database/model"
+
-	"x-ui/web/middleware"
+	"github.com/mhsanaei/3x-ui/v2/database/model"
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
-	"x-ui/web/session"
+	"github.com/mhsanaei/3x-ui/v2/web/session"
 
 	"github.com/gin-gonic/gin"
 )
@@ -109,8 +109,7 @@ func (a *InboundController) addInbound(c *gin.Context) {
 		inbound.Tag = fmt.Sprintf("inbound-%v:%v", inbound.Listen, inbound.Port)
 	}
 
-	needRestart := false
+	inbound, needRestart, err := a.inboundService.AddInbound(inbound)
-	inbound, needRestart, err = a.inboundService.AddInbound(inbound)
 	if err != nil {
 		jsonMsg(c, I18nWeb(c, "somethingWentWrong"), err)
 		return
@@ -127,8 +126,7 @@ func (a *InboundController) delInbound(c *gin.Context) {
 		jsonMsg(c, I18nWeb(c, "pages.inbounds.toasts.inboundDeleteSuccess"), err)
 		return
 	}
-	needRestart := true
+	needRestart, err := a.inboundService.DelInbound(id)
-	needRestart, err = a.inboundService.DelInbound(id)
 	if err != nil {
 		jsonMsg(c, I18nWeb(c, "somethingWentWrong"), err)
 		return
@@ -153,8 +151,7 @@ func (a *InboundController) updateInbound(c *gin.Context) {
 		jsonMsg(c, I18nWeb(c, "pages.inbounds.toasts.inboundUpdateSuccess"), err)
 		return
 	}
-	needRestart := true
+	inbound, needRestart, err := a.inboundService.UpdateInbound(inbound)
-	inbound, needRestart, err = a.inboundService.UpdateInbound(inbound)
 	if err != nil {
 		jsonMsg(c, I18nWeb(c, "somethingWentWrong"), err)
 		return
@@ -196,9 +193,7 @@ func (a *InboundController) addInboundClient(c *gin.Context) {
 		return
 	}
 
-	needRestart := true
+	needRestart, err := a.inboundService.AddInboundClient(data)
-
-	needRestart, err = a.inboundService.AddInboundClient(data)
 	if err != nil {
 		jsonMsg(c, I18nWeb(c, "somethingWentWrong"), err)
 		return
@@ -217,9 +212,7 @@ func (a *InboundController) delInboundClient(c *gin.Context) {
 	}
 	clientId := c.Param("clientId")
 
-	needRestart := true
+	needRestart, err := a.inboundService.DelInboundClient(id, clientId)
-
-	needRestart, err = a.inboundService.DelInboundClient(id, clientId)
 	if err != nil {
 		jsonMsg(c, I18nWeb(c, "somethingWentWrong"), err)
 		return
@@ -240,9 +233,7 @@ func (a *InboundController) updateInboundClient(c *gin.Context) {
 		return
 	}
 
-	needRestart := true
+	needRestart, err := a.inboundService.UpdateInboundClient(inbound, clientId)
-
-	needRestart, err = a.inboundService.UpdateInboundClient(inbound, clientId)
 	if err != nil {
 		jsonMsg(c, I18nWeb(c, "somethingWentWrong"), err)
 		return

web/controller/index.go

@@ -5,9 +5,9 @@ import (
 	"text/template"
 	"time"
 
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
-	"x-ui/web/session"
+	"github.com/mhsanaei/3x-ui/v2/web/session"
 
 	"github.com/gin-contrib/sessions"
 	"github.com/gin-gonic/gin"

web/controller/server.go

@@ -4,10 +4,11 @@ import (
 	"fmt"
 	"net/http"
 	"regexp"
+	"strconv"
 	"time"
 
-	"x-ui/web/global"
+	"github.com/mhsanaei/3x-ui/v2/web/global"
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
 
 	"github.com/gin-gonic/gin"
 )
@@ -21,16 +22,13 @@ type ServerController struct {
 	settingService service.SettingService
 
 	lastStatus *service.Status
-	lastGetStatusTime time.Time
 
 	lastVersions        []string
-	lastGetVersionsTime time.Time
+	lastGetVersionsTime int64 // unix seconds
 }
 
 func NewServerController(g *gin.RouterGroup) *ServerController {
-	a := &ServerController{
+	a := &ServerController{}
-		lastGetStatusTime: time.Now(),
-	}
 	a.initRouter(g)
 	a.startTask()
 	return a
@@ -39,6 +37,7 @@ func NewServerController(g *gin.RouterGroup) *ServerController {
 func (a *ServerController) initRouter(g *gin.RouterGroup) {
 
 	g.GET("/status", a.status)
+	g.GET("/cpuHistory/:bucket", a.getCpuHistoryBucket)
 	g.GET("/getXrayVersion", a.getXrayVersion)
 	g.GET("/getConfigJson", a.getConfigJson)
 	g.GET("/getDb", a.getDb)
@@ -61,29 +60,50 @@ func (a *ServerController) initRouter(g *gin.RouterGroup) {
 
 func (a *ServerController) refreshStatus() {
 	a.lastStatus = a.serverService.GetStatus(a.lastStatus)
+	// collect cpu history when status is fresh
+	if a.lastStatus != nil {
+		a.serverService.AppendCpuSample(time.Now(), a.lastStatus.Cpu)
+	}
 }
 
 func (a *ServerController) startTask() {
 	webServer := global.GetWebServer()
 	c := webServer.GetCron()
 	c.AddFunc("@every 2s", func() {
-		now := time.Now()
+		// Always refresh to keep CPU history collected continuously.
-		if now.Sub(a.lastGetStatusTime) > time.Minute*3 {
+		// Sampling is lightweight and capped to ~6 hours in memory.
-			return
-		}
 		a.refreshStatus()
 	})
 }
 
-func (a *ServerController) status(c *gin.Context) {
+func (a *ServerController) status(c *gin.Context) { jsonObj(c, a.lastStatus, nil) }
-	a.lastGetStatusTime = time.Now()
 
-	jsonObj(c, a.lastStatus, nil)
+func (a *ServerController) getCpuHistoryBucket(c *gin.Context) {
+	bucketStr := c.Param("bucket")
+	bucket, err := strconv.Atoi(bucketStr)
+	if err != nil || bucket <= 0 {
+		jsonMsg(c, "invalid bucket", fmt.Errorf("bad bucket"))
+		return
+	}
+	allowed := map[int]bool{
+		2:   true, // Real-time view
+		30:  true, // 30s intervals
+		60:  true, // 1m intervals
+		120: true, // 2m intervals
+		180: true, // 3m intervals
+		300: true, // 5m intervals
+	}
+	if !allowed[bucket] {
+		jsonMsg(c, "invalid bucket", fmt.Errorf("unsupported bucket"))
+		return
+	}
+	points := a.serverService.AggregateCpuHistory(bucket, 60)
+	jsonObj(c, points, nil)
 }
 
 func (a *ServerController) getXrayVersion(c *gin.Context) {
-	now := time.Now()
+	now := time.Now().Unix()
-	if now.Sub(a.lastGetVersionsTime) <= time.Minute {
+	if now-a.lastGetVersionsTime <= 60 { // 1 minute cache
 		jsonObj(c, a.lastVersions, nil)
 		return
 	}
@@ -95,7 +115,7 @@ func (a *ServerController) getXrayVersion(c *gin.Context) {
 	}
 
 	a.lastVersions = versions
-	a.lastGetVersionsTime = time.Now()
+	a.lastGetVersionsTime = now
 
 	jsonObj(c, versions, nil)
 }
@@ -113,7 +133,6 @@ func (a *ServerController) updateGeofile(c *gin.Context) {
 }
 
 func (a *ServerController) stopXrayService(c *gin.Context) {
-	a.lastGetStatusTime = time.Now()
 	err := a.serverService.StopXrayService()
 	if err != nil {
 		jsonMsg(c, I18nWeb(c, "pages.xray.stopError"), err)
@@ -229,9 +248,7 @@ func (a *ServerController) importDB(c *gin.Context) {
 	defer file.Close()
 	// Always restart Xray before return
 	defer a.serverService.RestartXrayService()
-	defer func() {
+	// lastGetStatusTime removed; no longer needed
-		a.lastGetStatusTime = time.Now()
-	}()
 	// Import it
 	err = a.serverService.ImportDB(file)
 	if err != nil {

web/controller/setting.go

@@ -4,10 +4,10 @@ import (
 	"errors"
 	"time"
 
-	"x-ui/util/crypto"
+	"github.com/mhsanaei/3x-ui/v2/util/crypto"
-	"x-ui/web/entity"
+	"github.com/mhsanaei/3x-ui/v2/web/entity"
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
-	"x-ui/web/session"
+	"github.com/mhsanaei/3x-ui/v2/web/session"
 
 	"github.com/gin-gonic/gin"
 )

web/controller/util.go

@@ -5,9 +5,9 @@ import (
 	"net/http"
 	"strings"
 
-	"x-ui/config"
+	"github.com/mhsanaei/3x-ui/v2/config"
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/web/entity"
+	"github.com/mhsanaei/3x-ui/v2/web/entity"
 
 	"github.com/gin-gonic/gin"
 )

web/controller/xray_setting.go

@@ -1,7 +1,7 @@
 package controller
 
 import (
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
 
 	"github.com/gin-gonic/gin"
 )
@@ -23,13 +23,13 @@ func NewXraySettingController(g *gin.RouterGroup) *XraySettingController {
 
 func (a *XraySettingController) initRouter(g *gin.RouterGroup) {
 	g = g.Group("/xray")
+	g.GET("/getDefaultJsonConfig", a.getDefaultXrayConfig)
+	g.GET("/getOutboundsTraffic", a.getOutboundsTraffic)
+	g.GET("/getXrayResult", a.getXrayResult)
 
 	g.POST("/", a.getXraySetting)
-	g.POST("/update", a.updateSetting)
-	g.GET("/getXrayResult", a.getXrayResult)
-	g.GET("/getDefaultJsonConfig", a.getDefaultXrayConfig)
 	g.POST("/warp/:action", a.warp)
-	g.GET("/getOutboundsTraffic", a.getOutboundsTraffic)
+	g.POST("/update", a.updateSetting)
 	g.POST("/resetOutboundsTraffic", a.resetOutboundsTraffic)
 }
 

web/entity/entity.go

@@ -7,7 +7,7 @@ import (
 	"strings"
 	"time"
 
-	"x-ui/util/common"
+	"github.com/mhsanaei/3x-ui/v2/util/common"
 )
 
 type Msg struct {
@@ -42,6 +42,7 @@ type AllSetting struct {
 	TwoFactorEnable             bool   `json:"twoFactorEnable" form:"twoFactorEnable"`
 	TwoFactorToken              string `json:"twoFactorToken" form:"twoFactorToken"`
 	SubEnable                   bool   `json:"subEnable" form:"subEnable"`
+	SubJsonEnable               bool   `json:"subJsonEnable" form:"subJsonEnable"`
 	SubTitle                    string `json:"subTitle" form:"subTitle"`
 	SubListen                   string `json:"subListen" form:"subListen"`
 	SubPort                     int    `json:"subPort" form:"subPort"`

web/html/component/aClientTable.html

@@ -49,7 +49,7 @@
   <a-space direction="horizontal" :size="2">
     <a-tooltip>
       <template slot="title">
-        <template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
+        <template v-if="isClientDepleted(record, client.email)">{{ i18n "depleted" }}</template>
         <template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
         <template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
       </template>
@@ -90,7 +90,7 @@
           <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'" :show-info="false" :percent="statsProgress(record, client.email)" />
         </td>
         <td class="tr-table-bar" v-else-if="client.totalGB > 0">
-          <a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="statsProgress(record, client.email)" />
+          <a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false" :status="isClientDepleted(record, client.email)? 'exception' : ''" :percent="statsProgress(record, client.email)" />
         </td>
         <td v-else class="infinite-bar tr-table-bar">
           <a-progress :show-info="false" :percent="100"></a-progress>
@@ -126,7 +126,7 @@
         <tr class="tr-table-box">
           <td class="tr-table-rt"> [[ remainedDays(client.expiryTime) ]] </td>
           <td class="infinite-bar tr-table-bar">
-            <a-progress :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="expireProgress(client.expiryTime, client.reset)" />
+            <a-progress :show-info="false" :status="isClientDepleted(record, client.email)? 'exception' : ''" :percent="expireProgress(client.expiryTime, client.reset)" />
           </td>
           <td class="tr-table-lt">[[ client.reset + "d" ]]</td>
         </tr>
@@ -213,7 +213,7 @@
                   </tr>
                 </table>
               </template>
-              <a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="statsProgress(record, client.email)" />
+              <a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false" :status="isClientDepleted(record, client.email)? 'exception' : ''" :percent="statsProgress(record, client.email)" />
             </a-popover>
           </td>
           <td width="120px" v-else class="infinite-bar">
@@ -247,7 +247,7 @@
                     </template>
                   </span>
                 </template>
-                <a-progress :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="expireProgress(client.expiryTime, client.reset)" />
+                <a-progress :show-info="false" :status="isClientDepleted(record, client.email)? 'exception' : ''" :percent="expireProgress(client.expiryTime, client.reset)" />
               </a-popover>
             </td>
             <td width="60px">[[ client.reset + "d" ]]</td>

web/html/form/inbound.html

@@ -44,6 +44,30 @@
         <a-input-number v-model.number="dbInbound.totalGB" :min="0"></a-input-number>
     </a-form-item>
 
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.periodicTrafficResetDesc" }}</span>
+                    <br v-if="dbInbound.lastTrafficResetTime && dbInbound.lastTrafficResetTime > 0">
+                    <span v-if="dbInbound.lastTrafficResetTime && dbInbound.lastTrafficResetTime > 0">
+                        <strong>{{ i18n "pages.inbounds.lastReset" }}:</strong> 
+                        <span v-if="datepicker == 'gregorian'">[[ moment(dbInbound.lastTrafficResetTime).format('YYYY-MM-DD HH:mm:ss') ]]</span>
+                        <span v-else>[[ DateUtil.convertToJalalian(moment(dbInbound.lastTrafficResetTime)) ]]</span>
+                    </span>
+                </template>
+                {{ i18n "pages.inbounds.periodicTrafficResetTitle" }}
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-select v-model="dbInbound.trafficReset" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="never">{{ i18n "pages.inbounds.periodicTrafficReset.never" }}</a-select-option>
+            <a-select-option value="daily">{{ i18n "pages.inbounds.periodicTrafficReset.daily" }}</a-select-option>
+            <a-select-option value="weekly">{{ i18n "pages.inbounds.periodicTrafficReset.weekly" }}</a-select-option>
+            <a-select-option value="monthly">{{ i18n "pages.inbounds.periodicTrafficReset.monthly" }}</a-select-option>
+        </a-select>
+    </a-form-item>
+
     <a-form-item>
         <template slot="label">
             <a-tooltip>

web/html/form/outbound.html

@@ -210,7 +210,7 @@
         </a-form-item>
       </template>
 
-      <!-- Vnext (vless/vmess) settings -->
+  <!-- VLESS/VMess user settings -->
       <template v-if="[Protocols.VMess, Protocols.VLESS].includes(outbound.protocol)">
         <a-form-item label='ID'>
           <a-input v-model.trim="outbound.settings.id"></a-input>

web/html/form/reality_settings.html

@@ -22,10 +22,10 @@
         <a-input-number v-model.number="inbound.stream.reality.maxTimediff" :min="0"></a-input-number>
     </a-form-item>
     <a-form-item label='Min Client Ver'>
-        <a-input v-model.trim="inbound.stream.reality.minClientVer"></a-input>
+        <a-input v-model.trim="inbound.stream.reality.minClientVer" placeholder='25.9.11'></a-input>
     </a-form-item>
     <a-form-item label='Max Client Ver'>
-        <a-input v-model.trim="inbound.stream.reality.maxClientVer"></a-input>
+        <a-input v-model.trim="inbound.stream.reality.maxClientVer" placeholder='25.9.11'></a-input>
     </a-form-item>
     <a-form-item>
         <template slot="label">

web/html/inbounds.html

@@ -1,165 +1,21 @@
 {{ template "page/head_start" .}}
-<style>
-  .ant-table:not(.ant-table-expanded-row .ant-table) {
-    outline: 1px solid #f0f0f0;
-    outline-offset: -1px;
-    border-radius: 1rem;
-    overflow-x: hidden;
-  }
-  .dark .ant-table:not(.ant-table-expanded-row .ant-table) {
-    outline-color: var(--dark-color-table-ring);
-  }
-  .ant-table .ant-table-content .ant-table-scroll .ant-table-body {
-    overflow-y: hidden;
-  }
-  .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper {
-	  margin:-10px 22px !important;
-  }
-  .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper .ant-table {
-    border-bottom-left-radius: 1rem;
-    border-bottom-right-radius: 1rem;
-  }
-  .ant-table .ant-table-content .ant-table-tbody tr:last-child tr:last-child td {
-	  border-bottom-color: transparent;
-  }
-  .ant-table .ant-table-tbody tr:last-child.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody>tr:last-child>td:first-child {
-    border-bottom-left-radius: 6px;
-  }
-  .ant-table .ant-table-tbody tr:last-child.ant-table-expanded-row .ant-table-wrapper .ant-table-tbody>tr:last-child>td:last-child {
-    border-bottom-right-radius: 6px;
-  }
-  @media (min-width: 769px) {
-    .ant-layout-content {
-      margin: 24px 16px;
-    }
-  }
-  @media (max-width: 768px) {
-    .ant-card-body {
-      padding: .5rem;
-    }
-    .ant-table .ant-table-content .ant-table-tbody tr:last-child .ant-table-wrapper {
-	    margin:-10px 2px !important;
-    }
-  }
-  .dark .ant-switch-small:not(.ant-switch-checked) {
-    background-color: var(--dark-color-surface-100) !important;
-  }
-  .ant-custom-popover-title {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin: 5px 0;
-  }
-  .ant-col-sm-24 {
-    margin: 0.5rem -2rem 0.5rem 2rem;
-  }
-  tr.hideExpandIcon .ant-table-row-expand-icon {
-    display: none;
-  }
-  .infinite-tag {
-    padding: 0 5px;
-    border-radius: 2rem;
-    min-width: 50px;
-    min-height: 22px;
-  }
-  .infinite-bar .ant-progress-inner .ant-progress-bg {
-    background-color: #F2EAF1;
-    border: #D5BED2 solid 1px;
-  }
-  .dark .infinite-bar .ant-progress-inner .ant-progress-bg {
-    background-color: #7a316f !important;
-    border: #7a316f solid 1px;
-  }
-  .ant-collapse {
-    margin: 5px 0;
-  }
-  .info-large-tag {
-    max-width: 200px;
-    overflow: hidden;
-  }
-  .client-comment {
-    font-size: 12px;
-    opacity: 0.75;
-    cursor: help;
-  }
-  .client-email {
-    font-weight: 500;
-  }
-  .client-popup-item {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-  }
-  .online-animation .ant-badge-status-dot {
-    animation: onlineAnimation 1.2s linear infinite;
-  }
-  @keyframes onlineAnimation {
-    0%,
-    50%,
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    10% {
-      transform: scale(1.5);
-      opacity: .2;
-    }
-  }
-  .tr-table-box {
-    display: flex;
-    gap: 4px;
-    justify-content: center;
-    align-items: center;
-  }
-  .tr-table-rt {
-    flex-basis: 70px;
-    min-width: 70px;
-    text-align: end;
-  }
-  .tr-table-lt {
-    flex-basis: 70px;
-    min-width: 70px;
-    text-align: start;
-  }
-  .tr-table-bar {
-    flex-basis: 160px;
-    min-width: 60px;
-  }
-  .tr-infinity-ch {
-    font-size: 14pt;
-    max-height: 24px;
-    display: inline-flex;
-    align-items: center;
-  }
-  .ant-table-expanded-row .ant-table .ant-table-body {
-    overflow-x: hidden;
-  }
-  .ant-table-expanded-row .ant-table-tbody>tr>td {
-    padding: 10px 2px;
-  }
-  .ant-table-expanded-row .ant-table-thead>tr>th {
-    padding: 12px 2px;
-  }
-</style>
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' inbounds-page'">
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>
       <a-spin :spinning="loadingStates.spinning" :delay="500" tip='{{ i18n "loading"}}'>
         <transition name="list" appear>
           <a-alert type="error" v-if="showAlert && loadingStates.fetched" :style="{ marginBottom: '10px' }"
-            message='{{ i18n "secAlertTitle" }}'
+            message='{{ i18n "secAlertTitle" }}' color="red" description='{{ i18n "secAlertSsl" }}' show-icon closable>
-            color="red"
-            description='{{ i18n "secAlertSsl" }}'
-            show-icon closable>
           </a-alert>
         </transition>
         <transition name="list" appear>
           <a-row v-if="!loadingStates.fetched">
-            <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
+            <a-card
+              :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
               <a-spin tip='{{ i18n "loading" }}'></a-spin>
             </a-card>
           </a-row>
@@ -168,40 +24,47 @@
               <a-card size="small" :style="{ padding: '16px' }" hoverable>
                 <a-row>
                   <a-col :sm="12" :md="5">
-                    <a-custom-statistic title='{{ i18n "pages.inbounds.totalDownUp" }}' :value="`${SizeFormatter.sizeFormat(total.up)} / ${SizeFormatter.sizeFormat(total.down)}`">
+                    <a-custom-statistic title='{{ i18n "pages.inbounds.totalDownUp" }}'
+                      :value="`${SizeFormatter.sizeFormat(total.up)} / ${SizeFormatter.sizeFormat(total.down)}`">
                       <template #prefix>
                         <a-icon type="swap"></a-icon>
                       </template>
                     </a-custom-statistic>
                   </a-col>
                   <a-col :sm="12" :md="5">
-                    <a-custom-statistic title='{{ i18n "pages.inbounds.totalUsage" }}' :value="SizeFormatter.sizeFormat(total.up + total.down)" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                    <a-custom-statistic title='{{ i18n "pages.inbounds.totalUsage" }}'
+                      :value="SizeFormatter.sizeFormat(total.up + total.down)"
+                      :style="{ marginTop: isMobile ? '10px' : 0 }">
                       <template #prefix>
                         <a-icon type="pie-chart"></a-icon>
                       </template>
                     </a-custom-statistic>
                   </a-col>
                   <a-col :sm="12" :md="5">
-                    <a-custom-statistic title='{{ i18n "pages.inbounds.allTimeTrafficUsage" }}' :value="SizeFormatter.sizeFormat(total.allTime)" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                    <a-custom-statistic title='{{ i18n "pages.inbounds.allTimeTrafficUsage" }}'
+                      :value="SizeFormatter.sizeFormat(total.allTime)" :style="{ marginTop: isMobile ? '10px' : 0 }">
                       <template #prefix>
                         <a-icon type="history"></a-icon>
                       </template>
                     </a-custom-statistic>
                   </a-col>
                   <a-col :sm="12" :md="5">
-                    <a-custom-statistic title='{{ i18n "pages.inbounds.inboundCount" }}' :value="dbInbounds.length" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                    <a-custom-statistic title='{{ i18n "pages.inbounds.inboundCount" }}' :value="dbInbounds.length"
+                      :style="{ marginTop: isMobile ? '10px' : 0 }">
                       <template #prefix>
                         <a-icon type="bars"></a-icon>
                       </template>
                     </a-custom-statistic>
                   </a-col>
                   <a-col :sm="12" :md="4">
-                    <a-custom-statistic title='{{ i18n "clients" }}' value=" " :style="{ marginTop: isMobile ? '10px' : 0 }">
+                    <a-custom-statistic title='{{ i18n "clients" }}' value=" "
+                      :style="{ marginTop: isMobile ? '10px' : 0 }">
                       <template #prefix>
                         <a-space direction="horizontal">
                           <a-icon type="team"></a-icon>
                           <div>
-                            <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
+                            <a-back-top :target="() => document.getElementById('content-layout')"
+                              visibility-height="200"></a-back-top>
                             <a-tag color="green">[[ total.clients ]]</a-tag>
                             <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
                               <template slot="content">
@@ -215,7 +78,8 @@
                               </template>
                               <a-tag color="red" v-if="total.depleted.length">[[ total.depleted.length ]]</a-tag>
                             </a-popover>
-                            <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                            <a-popover title='{{ i18n "depletingSoon" }}'
+                              :overlay-class-name="themeSwitcher.currentTheme">
                               <template slot="content">
                                 <div v-for="clientEmail in total.expiring"><span>[[ clientEmail ]]</span></div>
                               </template>
@@ -288,11 +152,8 @@
                       <template #content>
                         <a-space direction="vertical">
                           <span>{{ i18n "pages.inbounds.autoRefreshInterval" }}</span>
-                          <a-select v-model="refreshInterval"
+                          <a-select v-model="refreshInterval" :disabled="!isRefreshEnabled" :style="{ width: '100%' }"
-                              :disabled="!isRefreshEnabled"
+                            @change="changeRefreshInterval" :dropdown-class-name="themeSwitcher.currentTheme">
-                              :style="{ width: '100%' }"
-                              @change="changeRefreshInterval"
-                              :dropdown-class-name="themeSwitcher.currentTheme">
                             <a-select-option v-for="key in [5,10,30,60]" :value="key*1000">[[ key ]]s</a-select-option>
                           </a-select>
                         </a-space>
@@ -309,8 +170,10 @@
                       <a-icon slot="checkedChildren" type="search"></a-icon>
                       <a-icon slot="unCheckedChildren" type="filter"></a-icon>
                     </a-switch>
-                    <a-input v-if="!enableFilter" v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus :style="{ maxWidth: '300px' }" :size="isMobile ? 'small' : ''"></a-input>
+                    <a-input v-if="!enableFilter" v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus
-                    <a-radio-group v-if="enableFilter" v-model="filterBy" @change="filterInbounds" button-style="solid" :size="isMobile ? 'small' : ''">
+                      :style="{ maxWidth: '300px' }" :size="isMobile ? 'small' : ''"></a-input>
+                    <a-radio-group v-if="enableFilter" v-model="filterBy" @change="filterInbounds" button-style="solid"
+                      :size="isMobile ? 'small' : ''">
                       <a-radio-button value="">{{ i18n "none" }}</a-radio-button>
                       <a-radio-button value="deactive">{{ i18n "disabled" }}</a-radio-button>
                       <a-radio-button value="depleted">{{ i18n "depleted" }}</a-radio-button>
@@ -319,25 +182,24 @@
                     </a-radio-group>
                   </div>
                   <a-table :columns="isMobile ? mobileColumns : columns" :row-key="dbInbound => dbInbound.id"
-                      :data-source="searchedInbounds"
+                    :data-source="searchedInbounds" :scroll="isMobile ? {} : { x: 1000 }"
-                      :scroll="isMobile ? {} : { x: 1000 }"
+                    :pagination=pagination(searchedInbounds) :expand-icon-as-cell="false" :expand-row-by-click="false"
-                      :pagination=pagination(searchedInbounds)
+                    :expand-icon-column-index="0" :indent-size="0"
-                      :expand-icon-as-cell="false"
-                      :expand-row-by-click="false"
-                      :expand-icon-column-index="0"
-                      :indent-size="0"
                     :row-class-name="dbInbound => (dbInbound.isMultiUser() ? '' : 'hideExpandIcon')"
                     :style="{ marginTop: '10px' }"
                     :locale='{ filterConfirm: `{{ i18n "confirm" }}`, filterReset: `{{ i18n "reset" }}`, emptyText: `{{ i18n "noData" }}` }'>
                     <template slot="action" slot-scope="text, dbInbound">
                       <a-dropdown :trigger="['click']">
-                        <a-icon @click="e => e.preventDefault()" type="more" :style="{ fontSize: '20px', textDecoration: 'solid' }"></a-icon>
+                        <a-icon @click="e => e.preventDefault()" type="more"
-                        <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="themeSwitcher.currentTheme">
+                          :style="{ fontSize: '20px', textDecoration: 'solid' }"></a-icon>
+                        <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)"
+                          :theme="themeSwitcher.currentTheme">
                           <a-menu-item key="edit">
                             <a-icon type="edit"></a-icon>
                             {{ i18n "edit" }}
                           </a-menu-item>
-                          <a-menu-item key="qrcode" v-if="(dbInbound.isSS && !dbInbound.toInbound().isSSMultiUser) || dbInbound.isWireguard">
+                          <a-menu-item key="qrcode"
+                            v-if="(dbInbound.isSS && !dbInbound.toInbound().isSSMultiUser) || dbInbound.isWireguard">
                             <a-icon type="qrcode"></a-icon>
                             {{ i18n "qrCode" }}
                           </a-menu-item>
@@ -389,7 +251,8 @@
                             </span>
                           </a-menu-item>
                           <a-menu-item v-if="isMobile">
-                            <a-switch size="small" v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
+                            <a-switch size="small" v-model="dbInbound.enable"
+                              @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
                             {{ i18n "pages.inbounds.enable" }}
                           </a-menu-item>
                         </a-menu>
@@ -399,8 +262,10 @@
                       <a-tag :style="{ margin: '0' }" color="purple">[[ dbInbound.protocol ]]</a-tag>
                       <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
                         <a-tag :style="{ margin: '0' }" color="green">[[ dbInbound.toInbound().stream.network ]]</a-tag>
-                        <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isTls" color="blue">TLS</a-tag>
+                        <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isTls"
-                        <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isReality" color="blue">Reality</a-tag>
+                          color="blue">TLS</a-tag>
+                        <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isReality"
+                          color="blue">Reality</a-tag>
                       </template>
                     </template>
                     <template slot="clients" slot-scope="text, dbInbound">
@@ -408,59 +273,75 @@
                         <a-tag :style="{ margin: '0' }" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag>
                         <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
                           <template slot="content">
-                            <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
+                            <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail"
+                              class="client-popup-item">
                               <span>[[ clientEmail ]]</span>
                               <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
                                 <template #title>
                                   [[ clientCount[dbInbound.id].comments.get(clientEmail) ]]
                                 </template>
-                                <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
+                                <a-icon type="message"
+                                  v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
                               </a-tooltip>
                             </div>
                           </template>
-                          <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
+                          <a-tag :style="{ margin: '0', padding: '0 2px' }"
+                            v-if="clientCount[dbInbound.id].deactive.length">[[
+                            clientCount[dbInbound.id].deactive.length ]]</a-tag>
                         </a-popover>
                         <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
                           <template slot="content">
-                            <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
+                            <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail"
+                              class="client-popup-item">
                               <span>[[ clientEmail ]]</span>
                               <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
                                 <template #title>
                                   [[ clientCount[dbInbound.id].comments.get(clientEmail) ]]
                                 </template>
-                                <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
+                                <a-icon type="message"
+                                  v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
                               </a-tooltip>
                             </div>
                           </template>
-                          <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
+                          <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red"
+                            v-if="clientCount[dbInbound.id].depleted.length">[[
+                            clientCount[dbInbound.id].depleted.length ]]</a-tag>
                         </a-popover>
                         <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
                           <template slot="content">
-                            <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
+                            <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail"
+                              class="client-popup-item">
                               <span>[[ clientEmail ]]</span>
                               <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
                                 <template #title>
                                   [[ clientCount[dbInbound.id].comments.get(clientEmail) ]]
                                 </template>
-                                <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
+                                <a-icon type="message"
+                                  v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
                               </a-tooltip>
                             </div>
                           </template>
-                          <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
+                          <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange"
+                            v-if="clientCount[dbInbound.id].expiring.length">[[
+                            clientCount[dbInbound.id].expiring.length ]]</a-tag>
                         </a-popover>
                         <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
                           <template slot="content">
-                            <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
+                            <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail"
+                              class="client-popup-item">
                               <span>[[ clientEmail ]]</span>
                               <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
                                 <template #title>
                                   [[ clientCount[dbInbound.id].comments.get(clientEmail) ]]
                                 </template>
-                                <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
+                                <a-icon type="message"
+                                  v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
                               </a-tooltip>
                             </div>
                           </template>
-                          <a-tag :style="{ margin: '0', padding: '0 2px' }" color="blue" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
+                          <a-tag :style="{ margin: '0', padding: '0 2px' }" color="blue"
+                            v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length
+                            ]]</a-tag>
                         </a-popover>
                       </template>
                     </template>
@@ -478,14 +359,17 @@
                             </tr>
                           </table>
                         </template>
-                        <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
+                        <a-tag
+                          :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
                           [[ SizeFormatter.sizeFormat(dbInbound.up + dbInbound.down) ]] /
                           <template v-if="dbInbound.total > 0">
                             [[ SizeFormatter.sizeFormat(dbInbound.total) ]]
                           </template>
                           <template v-else>
                             <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-                              <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
+                              <path
+                                d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z"
+                                fill="currentColor"></path>
                             </svg>
                           </template>
                         </a-tag>
@@ -495,7 +379,8 @@
                       <a-tag>[[ SizeFormatter.sizeFormat(dbInbound.allTime || 0) ]]</a-tag>
                     </template>
                     <template slot="enable" slot-scope="text, dbInbound">
-                      <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
+                      <a-switch v-model="dbInbound.enable"
+                        @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
                     </template>
                     <template slot="expiryTime" slot-scope="text, dbInbound">
                       <a-popover v-if="dbInbound.expiryTime > 0" :overlay-class-name="themeSwitcher.currentTheme">
@@ -505,28 +390,36 @@
                         <template v-else slot="content">
                           [[ DateUtil.convertToJalalian(moment(dbInbound.expiryTime)) ]]
                         </template>
-                        <a-tag :style="{ minWidth: '50px' }" :color="ColorUtils.usageColor(new Date().getTime(), app.expireDiff, dbInbound._expiryTime)">
+                        <a-tag :style="{ minWidth: '50px' }"
+                          :color="ColorUtils.usageColor(new Date().getTime(), app.expireDiff, dbInbound._expiryTime)">
                           [[ remainedDays(dbInbound._expiryTime) ]]
                         </a-tag>
                       </a-popover>
                       <a-tag v-else color="purple" class="infinite-tag">
                         <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-                          <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
+                          <path
+                            d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z"
+                            fill="currentColor"></path>
                         </svg>
                       </a-tag>
                     </template>
                     <template slot="info" slot-scope="text, dbInbound">
-                      <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
+                      <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme"
+                        trigger="click">
                         <template slot="content">
                           <table cellpadding="2">
                             <tr>
                               <td>{{ i18n "pages.inbounds.protocol" }}</td>
                               <td>
                                 <a-tag :style="{ margin: '0' }" color="purple">[[ dbInbound.protocol ]]</a-tag>
-                                <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
+                                <template
-                                  <a-tag :style="{ margin: '0' }" color="blue">[[ dbInbound.toInbound().stream.network ]]</a-tag>
+                                  v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
-                                  <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isTls" color="green">tls</a-tag>
+                                  <a-tag :style="{ margin: '0' }" color="blue">[[ dbInbound.toInbound().stream.network
-                                  <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isReality" color="green">reality</a-tag>
+                                    ]]</a-tag>
+                                  <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isTls"
+                                    color="green">tls</a-tag>
+                                  <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isReality"
+                                    color="green">reality</a-tag>
                                 </template>
                               </td>
                             </tr>
@@ -537,62 +430,82 @@
                             <tr v-if="clientCount[dbInbound.id]">
                               <td>{{ i18n "clients" }}</td>
                               <td>
-                                <a-tag :style="{ margin: '0' }" color="blue">[[ clientCount[dbInbound.id].clients ]]</a-tag>
+                                <a-tag :style="{ margin: '0' }" color="blue">[[ clientCount[dbInbound.id].clients
-                                <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                                  ]]</a-tag>
+                                <a-popover title='{{ i18n "disabled" }}'
+                                  :overlay-class-name="themeSwitcher.currentTheme">
                                   <template slot="content">
-                                    <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
+                                    <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail"
+                                      class="client-popup-item">
                                       <span>[[ clientEmail ]]</span>
                                       <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
                                         <template #title>
                                           [[ clientCount[dbInbound.id].comments.get(clientEmail) ]]
                                         </template>
-                                        <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
+                                        <a-icon type="message"
+                                          v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
                                       </a-tooltip>
                                     </div>
                                   </template>
-                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
+                                  <a-tag :style="{ margin: '0', padding: '0 2px' }"
+                                    v-if="clientCount[dbInbound.id].deactive.length">[[
+                                    clientCount[dbInbound.id].deactive.length ]]</a-tag>
                                 </a-popover>
-                                <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                                <a-popover title='{{ i18n "depleted" }}'
+                                  :overlay-class-name="themeSwitcher.currentTheme">
                                   <template slot="content">
-                                    <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
+                                    <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail"
+                                      class="client-popup-item">
                                       <span>[[ clientEmail ]]</span>
                                       <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
                                         <template #title>
                                           [[ clientCount[dbInbound.id].comments.get(clientEmail) ]]
                                         </template>
-                                        <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
+                                        <a-icon type="message"
+                                          v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
                                       </a-tooltip>
                                     </div>
                                   </template>
-                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
+                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red"
+                                    v-if="clientCount[dbInbound.id].depleted.length">[[
+                                    clientCount[dbInbound.id].depleted.length ]]</a-tag>
                                 </a-popover>
-                                <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                                <a-popover title='{{ i18n "depletingSoon" }}'
+                                  :overlay-class-name="themeSwitcher.currentTheme">
                                   <template slot="content">
-                                    <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
+                                    <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail"
+                                      class="client-popup-item">
                                       <span>[[ clientEmail ]]</span>
                                       <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
                                         <template #title>
                                           [[ clientCount[dbInbound.id].comments.get(clientEmail) ]]
                                         </template>
-                                        <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
+                                        <a-icon type="message"
+                                          v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
                                       </a-tooltip>
                                     </div>
                                   </template>
-                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
+                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange"
+                                    v-if="clientCount[dbInbound.id].expiring.length">[[
+                                    clientCount[dbInbound.id].expiring.length ]]</a-tag>
                                 </a-popover>
                                 <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                   <template slot="content">
-                                    <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
+                                    <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail"
+                                      class="client-popup-item">
                                       <span>[[ clientEmail ]]</span>
                                       <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
                                         <template #title>
                                           [[ clientCount[dbInbound.id].comments.get(clientEmail) ]]
                                         </template>
-                                        <a-icon type="message" v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
+                                        <a-icon type="message"
+                                          v-if="clientCount[dbInbound.id].comments.get(clientEmail)"></a-icon>
                                       </a-tooltip>
                                     </div>
                                   </template>
-                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" color="green" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
+                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" color="green"
+                                    v-if="clientCount[dbInbound.id].online.length">[[
+                                    clientCount[dbInbound.id].online.length ]]</a-tag>
                                 </a-popover>
                               </td>
                             </tr>
@@ -606,20 +519,25 @@
                                         <td>↑[[ SizeFormatter.sizeFormat(dbInbound.up) ]]</td>
                                         <td>↓[[ SizeFormatter.sizeFormat(dbInbound.down) ]]</td>
                                       </tr>
-                                      <tr v-if="dbInbound.total > 0 &&  dbInbound.up + dbInbound.down < dbInbound.total">
+                                      <tr
+                                        v-if="dbInbound.total > 0 &&  dbInbound.up + dbInbound.down < dbInbound.total">
                                         <td>{{ i18n "remained" }}</td>
-                                        <td>[[ SizeFormatter.sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
+                                        <td>[[ SizeFormatter.sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down)
+                                          ]]</td>
                                       </tr>
                                     </table>
                                   </template>
-                                  <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
+                                  <a-tag
+                                    :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
                                     [[ SizeFormatter.sizeFormat(dbInbound.up + dbInbound.down) ]] /
                                     <template v-if="dbInbound.total > 0">
                                       [[ SizeFormatter.sizeFormat(dbInbound.total) ]]
                                     </template>
                                     <template v-else>
                                       <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-                                        <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
+                                        <path
+                                          d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z"
+                                          fill="currentColor"></path>
                                       </svg>
                                     </template>
                                   </a-tag>
@@ -629,8 +547,8 @@
                             <tr>
                               <td>{{ i18n "pages.inbounds.expireDate" }}</td>
                               <td>
-                                <a-tag :style="{ minWidth: '50px', textAlign: 'center' }" v-if="dbInbound.expiryTime > 0"
+                                <a-tag :style="{ minWidth: '50px', textAlign: 'center' }"
-                                  :color="dbInbound.isExpiry? 'red': 'blue'">
+                                  v-if="dbInbound.expiryTime > 0" :color="dbInbound.isExpiry? 'red': 'blue'">
                                   <template v-if="app.datepicker === 'gregorian'">
                                     [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
                                   </template>
@@ -640,15 +558,24 @@
                                 </a-tag>
                                 <a-tag v-else :style="{ textAlign: 'center' }" color="purple" class="infinite-tag">
                                   <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-                                    <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
+                                    <path
+                                      d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z"
+                                      fill="currentColor"></path>
                                   </svg>
                                 </a-tag>
                               </td>
                             </tr>
+                            <tr>
+                              <td>{{ i18n "pages.inbounds.periodicTrafficResetTitle" }}</td>
+                              <td>
+                                <a-tag color="blue">[[ dbInbound.trafficReset ]]</a-tag>
+                              </td>
+                            </tr>
                           </table>
                         </template>
                         <a-badge>
-                          <a-icon v-if="!dbInbound.enable" slot="count" type="pause-circle" :style="{ color: themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc' }"></a-icon>
+                          <a-icon v-if="!dbInbound.enable" slot="count" type="pause-circle"
+                            :style="{ color: themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc' }"></a-icon>
                           <a-button shape="round" size="small" :style="{ fontSize: '14px', padding: '0 10px' }">
                             <a-icon type="info"></a-icon>
                           </a-button>
@@ -656,11 +583,8 @@
                       </a-popover>
                     </template>
                     <template slot="expandedRowRender" slot-scope="record">
-                      <a-table
+                      <a-table :row-key="client => client.id" :columns="isMobile ? innerMobileColumns : innerColumns"
-                        :row-key="client => client.id"
+                        :data-source="getInboundClients(record)" :pagination=pagination(getInboundClients(record))
-                        :columns="isMobile ? innerMobileColumns : innerColumns"
-                        :data-source="getInboundClients(record)"
-                        :pagination=pagination(getInboundClients(record))
                         :style="{ margin: `-10px ${isMobile ? '2px' : '22px'} -11px` }">
                         {{template "component/aClientTable"}}
                       </a-table>
@@ -812,10 +736,11 @@
       refreshing: false,
       refreshInterval: Number(localStorage.getItem("refreshInterval")) || 5000,
       subSettings: {
-                enable : false,
+        enable: true,
-                subTitle : '',
+        subTitle: '',
-                subURI : '',
+        subURI: '',
-                subJsonURI : '',
+        subJsonURI: '',
+        subJsonEnable: false,
       },
       remarkModel: '-ieo',
       datepicker: 'gregorian',
@@ -861,17 +786,18 @@
         if (!msg.success) {
           return;
         }
-                with(msg.obj){
+        with (msg.obj) {
           this.expireDiff = expireDiff * 86400000;
           this.trafficDiff = trafficDiff * 1073741824;
           this.defaultCert = defaultCert;
           this.defaultKey = defaultKey;
           this.tgBotEnable = tgBotEnable;
           this.subSettings = {
-                        enable : subEnable,
+            enable: subEnable,
-                        subTitle : subTitle,
+            subTitle: subTitle,
             subURI: subURI,
-                        subJsonURI: subJsonURI
+            subJsonURI: subJsonURI,
+            subJsonEnable: subJsonEnable,
           };
           this.pageSize = pageSize;
           this.remarkModel = remarkModel;
@@ -898,7 +824,7 @@
         if (!this.loadingStates.fetched) {
           this.loadingStates.fetched = true
         }
-                if(this.enableFilter){
+        if (this.enableFilter) {
           this.filterInbounds();
         } else {
           this.searchInbounds(this.searchKey);
@@ -923,12 +849,15 @@
                 deactive.push(client.email);
               }
             });
-                        clientStats.forEach(client => {
+            clientStats.forEach(stats => {
-                            if (!client.enable) {
+              const exhausted = stats.total > 0 && (stats.up + stats.down) >= stats.total;
-                                depleted.push(client.email);
+              const expired = stats.expiryTime > 0 && stats.expiryTime <= now;
+              if (expired || exhausted) {
+                depleted.push(stats.email);
               } else {
-                                if ((client.expiryTime > 0 && (client.expiryTime - now < this.expireDiff)) ||
+                const expiringSoon = (stats.expiryTime > 0 && (stats.expiryTime - now < this.expireDiff)) ||
-                                    (client.total > 0 && (client.total - (client.up + client.down) < this.trafficDiff))) expiring.push(client.email);
+                  (stats.total > 0 && (stats.total - (stats.up + stats.down) < this.trafficDiff));
+                if (expiringSoon) expiring.push(stats.email);
               }
             });
           } else {
@@ -979,7 +908,7 @@
           this.dbInbounds.forEach(inbound => {
             const newInbound = new DBInbound(inbound);
             const inboundSettings = JSON.parse(inbound.settings);
-                        if (this.clientCount[inbound.id] && this.clientCount[inbound.id].hasOwnProperty(this.filterBy)){
+            if (this.clientCount[inbound.id] && this.clientCount[inbound.id].hasOwnProperty(this.filterBy)) {
               const list = this.clientCount[inbound.id][this.filterBy];
               if (list.length > 0) {
                 const filteredSettings = { "clients": [] };
@@ -997,8 +926,8 @@
           });
         }
       },
-            toggleFilter(){
+      toggleFilter() {
-                if(this.enableFilter) {
+        if (this.enableFilter) {
           this.searchKey = '';
         } else {
           this.filterBy = '';
@@ -1093,6 +1022,8 @@
           remark: dbInbound.remark + " - Cloned",
           enable: dbInbound.enable,
           expiryTime: dbInbound.expiryTime,
+          trafficReset: dbInbound.trafficReset,
+          lastTrafficResetTime: dbInbound.lastTrafficResetTime,
 
           listen: '',
           port: RandomUtil.randomInteger(10000, 60000),
@@ -1137,13 +1068,15 @@
           remark: dbInbound.remark,
           enable: dbInbound.enable,
           expiryTime: dbInbound.expiryTime,
+          trafficReset: dbInbound.trafficReset,
+          lastTrafficResetTime: dbInbound.lastTrafficResetTime,
 
           listen: inbound.listen,
           port: inbound.port,
           protocol: inbound.protocol,
           settings: inbound.settings.toString(),
         };
-                if (inbound.canEnableStream()){
+        if (inbound.canEnableStream()) {
           data.streamSettings = inbound.stream.toString();
         } else if (inbound.stream?.sockopt) {
           data.streamSettings = JSON.stringify({ sockopt: inbound.stream.sockopt.toJson() }, null, 2);
@@ -1160,13 +1093,15 @@
           remark: dbInbound.remark,
           enable: dbInbound.enable,
           expiryTime: dbInbound.expiryTime,
+          trafficReset: dbInbound.trafficReset,
+          lastTrafficResetTime: dbInbound.lastTrafficResetTime,
 
           listen: inbound.listen,
           port: inbound.port,
           protocol: inbound.protocol,
           settings: inbound.settings.toString(),
         };
-                if (inbound.canEnableStream()){
+        if (inbound.canEnableStream()) {
           data.streamSettings = inbound.stream.toString();
         } else if (inbound.stream?.sockopt) {
           data.streamSettings = JSON.stringify({ sockopt: inbound.stream.sockopt.toJson() }, null, 2);
@@ -1263,10 +1198,10 @@
           onOk: () => this.submit('/panel/api/inbounds/del/' + dbInboundId),
         });
       },
-            delClient(dbInboundId, client,confirmation = true) {
+      delClient(dbInboundId, client, confirmation = true) {
         dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
         clientId = this.getClientId(dbInbound.protocol, client);
-                if (confirmation){
+        if (confirmation) {
           this.$confirm({
             title: '{{ i18n "pages.inbounds.deleteClient"}}' + ' ' + client.email,
             content: '{{ i18n "pages.inbounds.deleteClientContent"}}',
@@ -1318,10 +1253,10 @@
       },
       checkFallback(dbInbound) {
         newDbInbound = new DBInbound(dbInbound);
-                if (dbInbound.listen.startsWith("@")){
+        if (dbInbound.listen.startsWith("@")) {
           rootInbound = this.inbounds.find((i) =>
             i.isTcp &&
-                        ['trojan','vless'].includes(i.protocol) &&
+            ['trojan', 'vless'].includes(i.protocol) &&
             i.settings.fallbacks.find(f => f.dest === dbInbound.listen)
           );
           if (rootInbound) {
@@ -1343,8 +1278,8 @@
       },
       showInfo(dbInboundId, client) {
         dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
-                index=0;
+        index = 0;
-                if (dbInbound.isMultiUser()){
+        if (dbInbound.isMultiUser()) {
           inbound = dbInbound.toInbound();
           clients = inbound.clients;
           index = this.findIndexOfClient(dbInbound.protocol, clients, client);
@@ -1352,7 +1287,7 @@
         newDbInbound = this.checkFallback(dbInbound);
         infoModal.show(newDbInbound, index);
       },
-            switchEnable(dbInboundId,state) {
+      switchEnable(dbInboundId, state) {
         dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
         dbInbound.enable = state;
         this.submit(`/panel/api/inbounds/update/${dbInboundId}`, dbInbound);
@@ -1378,7 +1313,7 @@
         return dbInbound.toInbound().clients;
       },
       resetClientTraffic(client, dbInboundId, confirmation = true) {
-                if (confirmation){
+        if (confirmation) {
           this.$confirm({
             title: '{{ i18n "pages.inbounds.resetTraffic"}}' + ' ' + client.email,
             content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
@@ -1450,7 +1385,7 @@
         clientStats = dbInbound.clientStats.find(stats => stats.email === email);
         if (!clientStats) return 0;
         remained = clientStats.total - (clientStats.up + clientStats.down);
-                return remained>0 ? remained : 0;
+        return remained > 0 ? remained : 0;
       },
       clientStatsColor(dbInbound, email) {
         if (email.length == 0) return ColorUtils.clientUsageColor();
@@ -1462,23 +1397,23 @@
         clientStats = dbInbound.clientStats.find(stats => stats.email === email);
         if (!clientStats) return 0;
         if (clientStats.total == 0) return 100;
-                return 100*(clientStats.down + clientStats.up)/clientStats.total;
+        return 100 * (clientStats.down + clientStats.up) / clientStats.total;
       },
       expireProgress(expTime, reset) {
         now = new Date().getTime();
-                remainedSeconds = expTime < 0 ? -expTime/1000 : (expTime-now)/1000;
+        remainedSeconds = expTime < 0 ? -expTime / 1000 : (expTime - now) / 1000;
         resetSeconds = reset * 86400;
         if (remainedSeconds >= resetSeconds) return 0;
-                return 100*(1-(remainedSeconds/resetSeconds));
+        return 100 * (1 - (remainedSeconds / resetSeconds));
       },
-            remainedDays(expTime){
+      remainedDays(expTime) {
         if (expTime == 0) return null;
-                if (expTime < 0) return TimeFormatter.formatSecond(expTime/-1000);
+        if (expTime < 0) return TimeFormatter.formatSecond(expTime / -1000);
         now = new Date().getTime();
         if (expTime < now) return '{{ i18n "depleted" }}';
-                return TimeFormatter.formatSecond((expTime-now)/1000);
+        return TimeFormatter.formatSecond((expTime - now) / 1000);
       },
-            statsExpColor(dbInbound, email){
+      statsExpColor(dbInbound, email) {
         if (email.length == 0) return '#7a316f';
         clientStats = dbInbound.clientStats.find(stats => stats.email === email);
         if (!clientStats) return '#7a316f';
@@ -1499,6 +1434,20 @@
         clientStats = dbInbound.clientStats ? dbInbound.clientStats.find(stats => stats.email === email) : null;
         return clientStats ? clientStats['enable'] : true;
       },
+      isClientDepleted(dbInbound, email) {
+        if (!email || !dbInbound || !dbInbound.clientStats) return false;
+        const stats = dbInbound.clientStats.find(s => s.email === email);
+        if (!stats) return false;
+        const total = stats.total ?? 0;
+        const used = (stats.up ?? 0) + (stats.down ?? 0);
+        const hasTotal = total > 0;
+        const exhausted = hasTotal && used >= total;
+        const expiryTime = stats.expiryTime ?? 0;
+        const hasExpiry = expiryTime > 0;
+        const now = Date.now();
+        const expired = hasExpiry && expiryTime <= now;
+        return expired || exhausted;
+      },
       isClientOnline(email) {
         return this.onlineClients.includes(email);
       },
@@ -1525,9 +1474,9 @@
         const dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
         const clients = this.getInboundClients(dbInbound);
         let subLinks = []
-                if (clients != null){
+        if (clients != null) {
           clients.forEach(c => {
-                        if (c.subId && c.subId.length>0){
+            if (c.subId && c.subId.length > 0) {
               subLinks.push(this.subSettings.subURI + c.subId)
             }
           })
@@ -1544,7 +1493,7 @@
           value: '',
           okText: '{{ i18n "pages.inbounds.import" }}',
           confirm: async (dbInboundText) => {
-                        await this.submit('/panel/api/inbounds/import', {data: dbInboundText}, promptModal);
+            await this.submit('/panel/api/inbounds/import', { data: dbInboundText }, promptModal);
           },
         });
       },
@@ -1552,9 +1501,9 @@
         let subLinks = []
         for (const dbInbound of this.dbInbounds) {
           const clients = this.getInboundClients(dbInbound);
-                    if (clients != null){
+          if (clients != null) {
             clients.forEach(c => {
-                            if (c.subId && c.subId.length>0){
+              if (c.subId && c.subId.length > 0) {
                 subLinks.push(this.subSettings.subURI + c.subId)
               }
             })
@@ -1602,11 +1551,11 @@
           this.loadingStates.spinning = false;
         }
       },
-            pagination(obj){
+      pagination(obj) {
-                if (this.pageSize > 0 && obj.length>this.pageSize) {
+        if (this.pageSize > 0 && obj.length > this.pageSize) {
           // Set page options based on object size
           sizeOptions = [];
-                    for (i=this.pageSize;i<=obj.length;i=i+this.pageSize) {
+          for (i = this.pageSize; i <= obj.length; i = i + this.pageSize) {
             sizeOptions.push(i.toString());
           }
           // Add option to see all in one page

web/html/index.html

@@ -1,93 +1,21 @@
 {{ template "page/head_start" .}}
-<style>
-  @media (min-width: 769px) {
-    .ant-layout-content {
-      margin: 24px 16px;
-    }
-  }
-  .ant-card-dark h2 {
-    color: var(--dark-color-text-primary);
-  }
-  .ant-backup-list-item {
-    gap: 10px;
-  }
-  .ant-version-list-item {
-    --padding: 12px;
-    padding: var(--padding) !important;
-    gap: var(--padding);
-  }
-  .dark .ant-version-list-item svg{
-    color: var(--dark-color-text-primary);
-  }
-  .dark .ant-backup-list-item svg,
-  .dark .ant-badge-status-text,
-  .dark .ant-card-extra {
-    color: var(--dark-color-text-primary);
-  }
-  .dark .ant-card-actions>li {
-    color: rgba(255, 255, 255, 0.55);
-  }
-  .dark .ant-radio-inner {
-    background-color: var(--dark-color-surface-100);
-    border-color: var(--dark-color-surface-600);
-  }
-  .dark .ant-radio-checked .ant-radio-inner {
-    border-color: var(--color-primary-100);
-  }
-  .dark .ant-backup-list, 
-  .dark .ant-version-list,
-  .dark .ant-card-actions,
-  .dark .ant-card-actions>li:not(:last-child) {
-    border-color: var(--dark-color-stroke);
-  }
-  .ant-card-actions {
-    background: transparent;
-  }
-  .ip-hidden {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    filter: blur(10px);
-  }
-  .running-animation .ant-badge-status-dot {
-    animation: runningAnimation 1.2s linear infinite;
-  }
-  .running-animation .ant-badge-status-processing:after {
-    border-color: var(--color-primary-100);
-  }
-  @keyframes runningAnimation {
-    0%,
-    50%,
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    10% {
-      transform: scale(1.5);
-      opacity: .2;
-    }
-  }
-</style>
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' index-page'">
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>
       <a-spin :spinning="loadingStates.spinning" :delay="200" :tip="loadingTip">
         <transition name="list" appear>
-          <a-alert type="error" v-if="showAlert && loadingStates.fetched" :style="{ marginBottom: '10px' }"
+          <a-alert type="error" v-if="showAlert && loadingStates.fetched" class="mb-10"
-            message='{{ i18n "secAlertTitle" }}'
+            message='{{ i18n "secAlertTitle" }}' color="red" description='{{ i18n "secAlertSsl" }}' show-icon closable>
-            color="red"
-            description='{{ i18n "secAlertSsl" }}'
-            show-icon closable>
           </a-alert>
         </transition>
         <transition name="list" appear>
           <template>
             <a-row v-if="!loadingStates.fetched">
-              <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
+              <a-card class="card-placeholder text-center">
                 <a-spin tip='{{ i18n "loading" }}'></a-spin>
               </a-card>
             </a-row>
@@ -97,9 +25,8 @@
                   <a-row :gutter="[0, isMobile ? 16 : 0]">
                     <a-col :sm="24" :md="12">
                       <a-row>
-                        <a-col :span="12" :style="{ textAlign: 'center' }">
+                        <a-col :span="12" class="text-center">
-                          <a-progress type="dashboard" status="normal"
+                          <a-progress type="dashboard" status="normal" :stroke-color="status.cpu.color"
-                            :stroke-color="status.cpu.color"
                             :percent="status.cpu.percent"></a-progress>
                           <div>
                             <b>{{ i18n "pages.index.cpu" }}:</b> [[ CPUFormatter.cpuCoreFormat(status.cpuCores) ]]
@@ -107,37 +34,43 @@
                               <a-icon type="area-chart"></a-icon>
                               <template slot="title">
                                 <div><b>{{ i18n "pages.index.logicalProcessors" }}:</b> [[ (status.logicalPro) ]]</div>
-                                <div><b>{{ i18n "pages.index.frequency" }}:</b> [[ CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
+                                <div><b>{{ i18n "pages.index.frequency" }}:</b> [[
+                                  CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
                               </template>
                             </a-tooltip>
+                            <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                              <a-button size="small" shape="circle" class="ml-8" @click="openCpuHistory()">
+                                <a-icon type="history" />
+                              </a-button>
+                            </a-tooltip>
                           </div>
                         </a-col>
-                        <a-col :span="12" :style="{ textAlign: 'center' }">
+                        <a-col :span="12" class="text-center">
-                          <a-progress type="dashboard" status="normal"
+                          <a-progress type="dashboard" status="normal" :stroke-color="status.mem.color"
-                            :stroke-color="status.mem.color"
                             :percent="status.mem.percent"></a-progress>
                           <div>
-                            <b>{{ i18n "pages.index.memory"}}:</b> [[ SizeFormatter.sizeFormat(status.mem.current) ]] / [[ SizeFormatter.sizeFormat(status.mem.total) ]]
+                            <b>{{ i18n "pages.index.memory"}}:</b> [[ SizeFormatter.sizeFormat(status.mem.current) ]] /
+                            [[ SizeFormatter.sizeFormat(status.mem.total) ]]
                           </div>
                         </a-col>
                       </a-row>
                     </a-col>
                     <a-col :sm="24" :md="12">
                       <a-row>
-                        <a-col :span="12" :style="{ textAlign: 'center' }">
+                        <a-col :span="12" class="text-center">
-                          <a-progress type="dashboard" status="normal"
+                          <a-progress type="dashboard" status="normal" :stroke-color="status.swap.color"
-                            :stroke-color="status.swap.color"
                             :percent="status.swap.percent"></a-progress>
                           <div>
-                            <b>{{ i18n "pages.index.swap" }}:</b> [[ SizeFormatter.sizeFormat(status.swap.current) ]] / [[ SizeFormatter.sizeFormat(status.swap.total) ]]
+                            <b>{{ i18n "pages.index.swap" }}:</b> [[ SizeFormatter.sizeFormat(status.swap.current) ]] /
+                            [[ SizeFormatter.sizeFormat(status.swap.total) ]]
                           </div>
                         </a-col>
-                        <a-col :span="12" :style="{ textAlign: 'center' }">
+                        <a-col :span="12" class="text-center">
-                          <a-progress type="dashboard" status="normal"
+                          <a-progress type="dashboard" status="normal" :stroke-color="status.disk.color"
-                            :stroke-color="status.disk.color"
                             :percent="status.disk.percent"></a-progress>
                           <div>
-                            <b>{{ i18n "pages.index.storage"}}:</b> [[ SizeFormatter.sizeFormat(status.disk.current) ]] / [[ SizeFormatter.sizeFormat(status.disk.total) ]]
+                            <b>{{ i18n "pages.index.storage"}}:</b> [[ SizeFormatter.sizeFormat(status.disk.current) ]]
+                            / [[ SizeFormatter.sizeFormat(status.disk.total) ]]
                           </div>
                         </a-col>
                       </a-row>
@@ -157,7 +90,9 @@
                   </template>
                   <template #extra>
                     <template v-if="status.xray.state != 'error'">
-                      <a-badge status="processing" class="running-animation" :text="status.xray.stateMsg" :color="status.xray.color"/>
+                      <a-badge status="processing"
+                        :class="({ green: 'xray-running-animation', orange: 'xray-stop-animation' }[status.xray.color]) || 'xray-processing-animation'"
+                        :text="status.xray.stateMsg" :color="status.xray.color" />
                     </template>
                     <template v-else>
                       <a-popover :overlay-class-name="themeSwitcher.currentTheme">
@@ -167,34 +102,36 @@
                               <span>{{ i18n "pages.index.xrayErrorPopoverTitle" }}</span>
                             </a-col>
                             <a-col>
-                              <a-icon type="bars" :style="{ cursor: 'pointer', float: 'right' }" @click="openLogs()"></a-icon>
+                              <a-icon type="bars" class="cursor-pointer float-right" @click="openLogs()"></a-icon>
                             </a-col>
                           </a-row>
                         </span>
                         <template slot="content">
-                          <span :style="{ maxWidth: '400px' }" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</span>
+                          <span class="max-w-400" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</span>
                         </template>
-                        <a-badge :text="status.xray.stateMsg" :color="status.xray.color"/>
+                        <a-badge :text="status.xray.stateMsg" :color="status.xray.color"
+                          :class="status.xray.color === 'red' ? 'xray-error-animation' : ''" />
                       </a-popover>
                     </template>
                   </template>
                   <template #actions>
-                    <a-space v-if="app.ipLimitEnable" direction="horizontal" @click="openXrayLogs()" :style="{ justifyContent: 'center' }">
+                    <a-space v-if="app.ipLimitEnable" direction="horizontal" @click="openXrayLogs()" class="jc-center">
                       <a-icon type="bars"></a-icon>
                       <span v-if="!isMobile">{{ i18n "pages.index.logs" }}</span>
                     </a-space>
-                    <a-space direction="horizontal" @click="stopXrayService" :style="{ justifyContent: 'center' }">
+                    <a-space direction="horizontal" @click="stopXrayService" class="jc-center">
                       <a-icon type="poweroff"></a-icon>
                       <span v-if="!isMobile">{{ i18n "pages.index.stopXray" }}</span>
                     </a-space>
-                    <a-space direction="horizontal" @click="restartXrayService" :style="{ justifyContent: 'center' }">
+                    <a-space direction="horizontal" @click="restartXrayService" class="jc-center">
                       <a-icon type="reload"></a-icon>
                       <span v-if="!isMobile">{{ i18n "pages.index.restartXray" }}</span>
                     </a-space>
-                    <a-space direction="horizontal" @click="openSelectV2rayVersion" :style="{ justifyContent: 'center' }">
+                    <a-space direction="horizontal" @click="openSelectV2rayVersion" class="jc-center">
                       <a-icon type="tool"></a-icon>
                       <span v-if="!isMobile">
-                        [[ status.xray.version != 'Unknown' ? `v${status.xray.version}` : '{{ i18n "pages.index.xraySwitch" }}' ]]
+                        [[ status.xray.version != 'Unknown' ? `v${status.xray.version}` : '{{ i18n
+                        "pages.index.xraySwitch" }}' ]]
                       </span>
                     </a-space>
                   </template>
@@ -203,15 +140,15 @@
               <a-col :sm="24" :lg="12">
                 <a-card title='{{ i18n "menu.link" }}' hoverable>
                   <template #actions>
-                    <a-space direction="horizontal" @click="openLogs()" :style="{ justifyContent: 'center' }">
+                    <a-space direction="horizontal" @click="openLogs()" class="jc-center">
                       <a-icon type="bars"></a-icon>
                       <span v-if="!isMobile">{{ i18n "pages.index.logs" }}</span>
                     </a-space>
-                    <a-space direction="horizontal" @click="openConfig" :style="{ justifyContent: 'center' }">
+                    <a-space direction="horizontal" @click="openConfig" class="jc-center">
                       <a-icon type="control"></a-icon>
                       <span v-if="!isMobile">{{ i18n "pages.index.config" }}</span>
                     </a-space>
-                    <a-space direction="horizontal" @click="openBackup" :style="{ justifyContent: 'center' }">
+                    <a-space direction="horizontal" @click="openBackup" class="jc-center">
                       <a-icon type="cloud-server"></a-icon>
                       <span v-if="!isMobile">{{ i18n "pages.index.backup" }}</span>
                     </a-space>
@@ -239,7 +176,8 @@
               </a-col>
               <a-col :sm="24" :lg="12">
                 <a-card title='{{ i18n "pages.index.operationHours" }}' hoverable>
-                  <a-tag :color="status.xray.color">Xray: [[ TimeFormatter.formatSecond(status.appStats.uptime) ]]</a-tag>
+                  <a-tag :color="status.xray.color">Xray: [[ TimeFormatter.formatSecond(status.appStats.uptime)
+                    ]]</a-tag>
                   <a-tag color="green">OS: [[ TimeFormatter.formatSecond(status.uptime) ]]</a-tag>
                 </a-card>
               </a-col>
@@ -257,7 +195,8 @@
               </a-col>
               <a-col :sm="24" :lg="12">
                 <a-card title='{{ i18n "usage"}}' hoverable>
-                  <a-tag color="green"> {{ i18n "pages.index.memory" }}: [[ SizeFormatter.sizeFormat(status.appStats.mem) ]] </a-tag>
+                  <a-tag color="green"> {{ i18n "pages.index.memory" }}: [[
+                    SizeFormatter.sizeFormat(status.appStats.mem) ]] </a-tag>
                   <a-tag color="green"> {{ i18n "pages.index.threads" }}: [[ status.appStats.threads ]] </a-tag>
                 </a-card>
               </a-col>
@@ -265,7 +204,8 @@
                 <a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable>
                   <a-row :gutter="isMobile ? [8,8] : 0">
                     <a-col :span="12">
-                      <a-custom-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)">
+                      <a-custom-statistic title='{{ i18n "pages.index.upload" }}'
+                        :value="SizeFormatter.sizeFormat(status.netIO.up)">
                         <template #prefix>
                           <a-icon type="arrow-up" />
                         </template>
@@ -275,7 +215,8 @@
                       </a-custom-statistic>
                     </a-col>
                     <a-col :span="12">
-                      <a-custom-statistic title='{{ i18n "pages.index.download" }}' :value="SizeFormatter.sizeFormat(status.netIO.down)">
+                      <a-custom-statistic title='{{ i18n "pages.index.download" }}'
+                        :value="SizeFormatter.sizeFormat(status.netIO.down)">
                         <template #prefix>
                           <a-icon type="arrow-down" />
                         </template>
@@ -291,14 +232,16 @@
                 <a-card title='{{ i18n "pages.index.totalData" }}' hoverable>
                   <a-row :gutter="isMobile ? [8,8] : 0">
                     <a-col :span="12">
-                      <a-custom-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
+                      <a-custom-statistic title='{{ i18n "pages.index.sent" }}'
+                        :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
                         <template #prefix>
                           <a-icon type="cloud-upload" />
                         </template>
                       </a-custom-statistic>
                     </a-col>
                     <a-col :span="12">
-                      <a-custom-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
+                      <a-custom-statistic title='{{ i18n "pages.index.received" }}'
+                        :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
                         <template #prefix>
                           <a-icon type="cloud-download" />
                         </template>
@@ -314,7 +257,8 @@
                       <template #title>
                         {{ i18n "pages.index.toggleIpVisibility" }}
                       </template>
-                      <a-icon :type="showIp ? 'eye' : 'eye-invisible'" :style="{ fontSize: '1rem' }" @click="showIp = !showIp"></a-icon>
+                      <a-icon :type="showIp ? 'eye' : 'eye-invisible'" class="fs-1rem"
+                        @click="showIp = !showIp"></a-icon>
                     </a-tooltip>
                   </template>
                   <a-row :class="showIp ? 'ip-visible' : 'ip-hidden'" :gutter="isMobile ? [8,8] : 0">
@@ -361,57 +305,54 @@
       </a-spin>
     </a-layout-content>
   </a-layout>
-  <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}' :closable="true"
+  <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}'
-      @ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
+    :closable="true" @ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
     <a-collapse default-active-key="1">
       <a-collapse-panel key="1" header='Xray'>
-        <a-alert type="warning" :style="{ marginBottom: '12px', width: '100%' }" message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
+        <a-alert type="warning" class="mb-12 w-100" message='{{ i18n "pages.index.xraySwitchClickDesk" }}'
-        <a-list class="ant-version-list" bordered :style="{ width: '100%' }">
+          show-icon></a-alert>
+        <a-list class="ant-version-list w-100" bordered>
           <a-list-item class="ant-version-list-item" v-for="version, index in versionModal.versions">
             <a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ version ]]</a-tag>
-            <a-radio :class="themeSwitcher.currentTheme" :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio>
+            <a-radio :class="themeSwitcher.currentTheme" :checked="version === `v${status.xray.version}`"
+              @click="switchV2rayVersion(version)"></a-radio>
           </a-list-item>
         </a-list>
       </a-collapse-panel>
       <a-collapse-panel key="2" header='Geofiles'>
-        <a-list class="ant-version-list" bordered :style="{ width: '100%' }">
+        <a-list class="ant-version-list w-100" bordered>
-          <a-list-item class="ant-version-list-item" v-for="file, index in ['geosite.dat', 'geoip.dat', 'geosite_IR.dat', 'geoip_IR.dat', 'geosite_RU.dat', 'geoip_RU.dat']">
+          <a-list-item class="ant-version-list-item"
+            v-for="file, index in ['geosite.dat', 'geoip.dat', 'geosite_IR.dat', 'geoip_IR.dat', 'geosite_RU.dat', 'geoip_RU.dat']">
             <a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ file ]]</a-tag>
-            <a-icon type="reload" @click="updateGeofile(file)" :style="{ marginRight: '8px' }"/>
+            <a-icon type="reload" @click="updateGeofile(file)" class="mr-8" />
           </a-list-item>
         </a-list>
-        <div style="margin-top: 5px; display: flex; justify-content: flex-end;">
+        <div class="mt-5 d-flex justify-end"><a-button @click="updateGeofile('')">{{ i18n
-          <a-button @click="updateGeofile('')">{{ i18n "pages.index.geofilesUpdateAll" }}</a-button>
+            "pages.index.geofilesUpdateAll" }}</a-button></div>
-        </div>
       </a-collapse-panel>
     </a-collapse>
   </a-modal>
-  <a-modal id="log-modal" v-model="logModal.visible"
+  <a-modal id="log-modal" v-model="logModal.visible" :closable="true" @cancel="() => logModal.visible = false"
-      :closable="true" @cancel="() => logModal.visible = false"
+    :class="themeSwitcher.currentTheme" width="800px" footer="">
-      :class="themeSwitcher.currentTheme"
-      width="800px" footer="">
     <template slot="title">
       {{ i18n "pages.index.logs" }}
-      <a-icon :spin="logModal.loading"
+      <a-icon :spin="logModal.loading" type="sync" class="va-middle ml-10" :disabled="logModal.loading"
-        type="sync"
-        :style="{ verticalAlign: 'middle', marginLeft: '10px' }"
-        :disabled="logModal.loading"
         @click="openLogs()">
       </a-icon>
     </template>
     <a-form layout="inline">
-      <a-form-item :style="{ marginRight: '0.5rem' }">
+      <a-form-item class="mr-05">
         <a-input-group compact>
-          <a-select size="small" v-model="logModal.rows" :style="{ width: '70px' }"
+          <a-select size="small" v-model="logModal.rows" :style="{ width: '70px' }" @change="openLogs()"
-              @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
+            :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="10">10</a-select-option>
             <a-select-option value="20">20</a-select-option>
             <a-select-option value="50">50</a-select-option>
             <a-select-option value="100">100</a-select-option>
             <a-select-option value="500">500</a-select-option>
           </a-select>
-          <a-select size="small" v-model="logModal.level" :style="{ width: '95px' }"
+          <a-select size="small" v-model="logModal.level" :style="{ width: '95px' }" @change="openLogs()"
-              @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
+            :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="debug">Debug</a-select-option>
             <a-select-option value="info">Info</a-select-option>
             <a-select-option value="notice">Notice</a-select-option>
@@ -423,32 +364,25 @@
       <a-form-item>
         <a-checkbox v-model="logModal.syslog" @change="openLogs()">SysLog</a-checkbox>
       </a-form-item>
-      <a-form-item :style="{ float: 'right' }">
+      <a-form-item style="float: right;">
         <a-button type="primary" icon="download" @click="FileManager.downloadTextFile(logModal.logs?.join('\n'), 'x-ui.log')"></a-button>
       </a-form-item>
     </a-form>
-    <div class="ant-input" :style="{ height: 'auto', maxHeight: '500px', overflow: 'auto', marginTop: '0.5rem' }" v-html="logModal.formattedLogs"></div>
+    <div class="ant-input log-container" v-html="logModal.formattedLogs"></div>
   </a-modal>
-  <a-modal id="xraylog-modal"
+  <a-modal id="xraylog-modal" v-model="xraylogModal.visible" :closable="true"
-      v-model="xraylogModal.visible"
+    @cancel="() => xraylogModal.visible = false" :class="themeSwitcher.currentTheme" width="80vw" footer="">
-      :closable="true" @cancel="() => xraylogModal.visible = false"
-      :class="themeSwitcher.currentTheme"
-      width="80vw"
-      footer="">
     <template slot="title">
       {{ i18n "pages.index.logs" }}
-      <a-icon :spin="xraylogModal.loading"
+      <a-icon :spin="xraylogModal.loading" type="sync" class="va-middle ml-10" :disabled="xraylogModal.loading"
-        type="sync"
-        :style="{ verticalAlign: 'middle', marginLeft: '10px' }"
-        :disabled="xraylogModal.loading"
         @click="openXrayLogs()">
       </a-icon>
     </template>
     <a-form layout="inline">
-      <a-form-item :style="{ marginRight: '0.5rem' }">
+      <a-form-item class="mr-05">
         <a-input-group compact>
-          <a-select size="small" v-model="xraylogModal.rows" :style="{ width: '70px' }"
+          <a-select size="small" v-model="xraylogModal.rows" :style="{ width: '70px' }" @change="openXrayLogs()"
-              @change="openXrayLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
+            :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="10">10</a-select-option>
             <a-select-option value="20">20</a-select-option>
             <a-select-option value="50">50</a-select-option>
@@ -465,25 +399,21 @@
         <a-checkbox v-model="xraylogModal.showBlocked" @change="openXrayLogs()">Blocked</a-checkbox>
         <a-checkbox v-model="xraylogModal.showProxy" @change="openXrayLogs()">Proxy</a-checkbox>
       </a-form-item>
-      <a-form-item :style="{ float: 'right' }">
+      <a-form-item style="float: right;">
-        <a-button type="primary" icon="download" @click="FileManager.downloadTextFile(xraylogModal.logs?.join('\n'), 'x-ui.log')"></a-button>
+        <a-button type="primary" icon="download" @click="downloadXrayLogs"></a-button>
       </a-form-item>
     </a-form>
-    <div class="ant-input" :style="{ height: 'auto', maxHeight: '500px', overflow: 'auto', marginTop: '0.5rem' }" v-html="xraylogModal.formattedLogs"></div>
+    <div class="ant-input log-container" v-html="xraylogModal.formattedLogs"></div>
   </a-modal>
-  <a-modal id="backup-modal" 
+  <a-modal id="backup-modal" v-model="backupModal.visible" title='{{ i18n "pages.index.backupTitle" }}' :closable="true"
-      v-model="backupModal.visible" 
+    footer="" :class="themeSwitcher.currentTheme">
-      title='{{ i18n "pages.index.backupTitle" }}'
+    <a-list class="ant-backup-list w-100" bordered>
-      :closable="true"
-      footer=""
-      :class="themeSwitcher.currentTheme">
-    <a-list class="ant-backup-list" bordered :style="{ width: '100%' }">
       <a-list-item class="ant-backup-list-item">
         <a-list-item-meta>
           <template #title>{{ i18n "pages.index.exportDatabase" }}</template>
           <template #description>{{ i18n "pages.index.exportDatabaseDesc" }}</template>
         </a-list-item-meta>
-        <a-button @click="exportDatabase()" type="primary" icon="download"/>
+        <a-button @click="exportDatabase()" type="primary" icon="download" />
       </a-list-item>
       <a-list-item class="ant-backup-list-item">
         <a-list-item-meta>
@@ -494,6 +424,28 @@
       </a-list-item>
     </a-list>
   </a-modal>
+  <!-- CPU History Modal -->
+  <a-modal id="cpu-history-modal" v-model="cpuHistoryModal.visible" :closable="true"
+    @cancel="() => cpuHistoryModal.visible = false" :class="themeSwitcher.currentTheme" width="900px" footer="">
+    <template slot="title">
+      CPU History
+      <a-select size="small" v-model="cpuHistoryModal.bucket" class="ml-10" style="width: 80px"
+        @change="fetchCpuHistoryBucket">
+        <a-select-option :value="2">2m</a-select-option>
+        <a-select-option :value="30">30m</a-select-option>
+        <a-select-option :value="60">1h</a-select-option>
+        <a-select-option :value="120">2h</a-select-option>
+        <a-select-option :value="180">3h</a-select-option>
+        <a-select-option :value="300">5h</a-select-option>
+      </a-select>
+    </template>
+    <div style="padding:16px">
+      <sparkline :data="cpuHistoryLong" :labels="cpuHistoryLabels" :vb-width="840" :height="220"
+        :stroke="status.cpu.color" :stroke-width="2.2" :show-grid="true" :show-axes="true" :tick-count-x="5"
+        :max-points="cpuHistoryLong.length" :fill-opacity="0.18" :marker-radius="3.2" :show-tooltip="true" />
+      <div style="margin-top:4px;font-size:11px;opacity:0.65">Timeframe: [[ cpuHistoryModal.bucket ]] sec per point (total [[ cpuHistoryLong.length ]] points)</div>
+    </div>
+  </a-modal>
 </a-layout>
 {{template "page/body_scripts" .}}
 {{template "component/aSidebar" .}}
@@ -501,6 +453,192 @@
 {{template "component/aCustomStatistic" .}}
 {{template "modals/textModal"}}
 <script>
+  // Tiny Sparkline component using an inline SVG polyline
+  Vue.component('sparkline', {
+    props: {
+      data: { type: Array, required: true },
+      // viewBox width for drawing space; SVG width will be 100% of container
+      vbWidth: { type: Number, default: 320 },
+      height: { type: Number, default: 80 },
+      stroke: { type: String, default: '#008771' },
+      strokeWidth: { type: Number, default: 2 },
+      maxPoints: { type: Number, default: 120 },
+      showGrid: { type: Boolean, default: true },
+      gridColor: { type: String, default: 'rgba(0,0,0,0.1)' },
+      fillOpacity: { type: Number, default: 0.15 },
+      showMarker: { type: Boolean, default: true },
+      markerRadius: { type: Number, default: 2.8 },
+      // New opts for axes/labels/tooltip
+      labels: { type: Array, default: () => [] }, // same length as data for x labels (e.g., timestamps)
+      showAxes: { type: Boolean, default: false },
+      yTickStep: { type: Number, default: 25 }, // percent ticks
+      tickCountX: { type: Number, default: 4 },
+      paddingLeft: { type: Number, default: 32 },
+      paddingRight: { type: Number, default: 6 },
+      paddingTop: { type: Number, default: 6 },
+      paddingBottom: { type: Number, default: 20 },
+      showTooltip: { type: Boolean, default: false },
+    },
+    data() {
+      return {
+        hoverIdx: -1,
+      }
+    },
+    computed: {
+      viewBoxAttr() {
+        return '0 0 ' + this.vbWidth + ' ' + this.height
+      },
+      drawWidth() {
+        return Math.max(1, this.vbWidth - this.paddingLeft - this.paddingRight)
+      },
+      drawHeight() {
+        return Math.max(1, this.height - this.paddingTop - this.paddingBottom)
+      },
+      nPoints() {
+        return Math.min(this.data.length, this.maxPoints)
+      },
+      dataSlice() {
+        const n = this.nPoints
+        if (n === 0) return []
+        return this.data.slice(this.data.length - n)
+      },
+      labelsSlice() {
+        const n = this.nPoints
+        if (!this.labels || this.labels.length === 0 || n === 0) return []
+        const start = Math.max(0, this.labels.length - n)
+        return this.labels.slice(start)
+      },
+      pointsArr() {
+        const n = this.nPoints
+        if (n === 0) return []
+        const slice = this.dataSlice
+        const max = 100
+        const w = this.drawWidth
+        const h = this.drawHeight
+        const dx = n > 1 ? w / (n - 1) : 0
+        return slice.map((v, i) => {
+          const x = Math.round(this.paddingLeft + i * dx)
+          const y = Math.round(this.paddingTop + (h - (Math.max(0, Math.min(100, v)) / max) * h))
+          return [x, y]
+        })
+      },
+      points() {
+        return this.pointsArr.map(p => `${p[0]},${p[1]}`).join(' ')
+      },
+      areaPath() {
+        if (this.pointsArr.length === 0) return ''
+        const first = this.pointsArr[0]
+        const last = this.pointsArr[this.pointsArr.length - 1]
+        const line = this.points
+        // Close to bottom to create an area fill
+        return `M ${first[0]},${this.paddingTop + this.drawHeight} L ${line.replace(/ /g, ' L ')} L ${last[0]},${this.paddingTop + this.drawHeight} Z`
+      },
+      gridLines() {
+        if (!this.showGrid) return []
+        const h = this.drawHeight
+        const w = this.drawWidth
+        // draw at 25%, 50%, 75%
+        return [0, 0.25, 0.5, 0.75, 1]
+          .map(r => Math.round(this.paddingTop + h * r))
+          .map(y => ({ x1: this.paddingLeft, y1: y, x2: this.paddingLeft + w, y2: y }))
+      },
+      lastPoint() {
+        if (this.pointsArr.length === 0) return null
+        return this.pointsArr[this.pointsArr.length - 1]
+      },
+      yTicks() {
+        if (!this.showAxes) return []
+        const step = Math.max(1, this.yTickStep)
+        const ticks = []
+        for (let p = 0; p <= 100; p += step) {
+          const y = Math.round(this.paddingTop + (this.drawHeight - (p / 100) * this.drawHeight))
+          ticks.push({ y, label: `${p}%` })
+        }
+        return ticks
+      },
+      xTicks() {
+        if (!this.showAxes) return []
+        const labels = this.labelsSlice
+        const n = this.nPoints
+        const m = Math.max(2, this.tickCountX)
+        const ticks = []
+        if (n === 0) return ticks
+        const w = this.drawWidth
+        const dx = n > 1 ? w / (n - 1) : 0
+        const positions = []
+        for (let i = 0; i < m; i++) {
+          const idx = Math.round((i * (n - 1)) / (m - 1))
+          positions.push(idx)
+        }
+        positions.forEach(idx => {
+          const label = labels[idx] != null ? String(labels[idx]) : String(idx)
+          const x = Math.round(this.paddingLeft + idx * dx)
+          ticks.push({ x, label })
+        })
+        return ticks
+      },
+    },
+    methods: {
+      onMouseMove(evt) {
+        if (!this.showTooltip || this.pointsArr.length === 0) return
+        const rect = evt.currentTarget.getBoundingClientRect()
+        const px = evt.clientX - rect.left
+        // translate to viewBox space
+        const x = (px / rect.width) * this.vbWidth
+        const n = this.nPoints
+        const dx = n > 1 ? this.drawWidth / (n - 1) : 0
+        const idx = Math.max(0, Math.min(n - 1, Math.round((x - this.paddingLeft) / (dx || 1))))
+        this.hoverIdx = idx
+      },
+      onMouseLeave() {
+        this.hoverIdx = -1
+      },
+      fmtHoverText() {
+        const labels = this.labelsSlice
+        const idx = this.hoverIdx
+        if (idx < 0 || idx >= this.dataSlice.length) return ''
+        const raw = Math.max(0, Math.min(100, Number(this.dataSlice[idx] || 0)))
+        const val = Number.isFinite(raw) ? raw.toFixed(2) : raw
+        const lab = labels[idx] != null ? labels[idx] : ''
+        return `${val}%${lab ? ' • ' + lab : ''}`
+      },
+    },
+    template: `
+      <svg width="100%" :height="height" :viewBox="viewBoxAttr" preserveAspectRatio="none" class="idx-cpu-history-svg"
+           @mousemove="onMouseMove" @mouseleave="onMouseLeave">
+        <defs>
+          <linearGradient id="spkGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" :stop-color="stroke" :stop-opacity="fillOpacity"/>
+            <stop offset="100%" :stop-color="stroke" stop-opacity="0"/>
+          </linearGradient>
+        </defs>
+        <g v-if="showGrid">
+          <line v-for="(g,i) in gridLines" :key="i" :x1="g.x1" :y1="g.y1" :x2="g.x2" :y2="g.y2" :stroke="gridColor" stroke-width="1" class="cpu-grid-line" />
+        </g>
+        <g v-if="showAxes">
+          <!-- Y ticks/labels -->
+          <g v-for="(t,i) in yTicks" :key="'y'+i">
+            <text class="cpu-grid-y-text" :x="Math.max(0, paddingLeft - 4)" :y="t.y + 4" text-anchor="end" font-size="10" fill="rgba(0,0,0,0.3)" v-text="t.label"></text>
+          </g>
+          <!-- X ticks/labels -->
+          <g v-for="(t,i) in xTicks" :key="'x'+i">
+            <text class="cpu-grid-x-text" :x="t.x" :y="paddingTop + drawHeight + 22" text-anchor="middle" font-size="10" fill="rgba(0,0,0,0.3)" v-text="t.label"></text>
+          </g>
+        </g>
+        <path v-if="areaPath" :d="areaPath" fill="url(#spkGrad)" stroke="none" />
+        <polyline :points="points" fill="none" :stroke="stroke" :stroke-width="strokeWidth" stroke-linecap="round" stroke-linejoin="round"/>
+        <circle v-if="showMarker && lastPoint" :cx="lastPoint[0]" :cy="lastPoint[1]" :r="markerRadius" :fill="stroke" />
+        <!-- Hover marker/tooltip -->
+        <g v-if="showTooltip && hoverIdx >= 0">
+          <line class="cpu-grid-h-line" :x1="pointsArr[hoverIdx][0]" :x2="pointsArr[hoverIdx][0]" :y1="paddingTop" :y2="paddingTop + drawHeight" stroke="rgba(0,0,0,0.2)" stroke-width="1" />
+          <circle :cx="pointsArr[hoverIdx][0]" :cy="pointsArr[hoverIdx][1]" r="3.5" :fill="stroke" />
+          <text class="cpu-grid-text" :x="pointsArr[hoverIdx][0]" :y="paddingTop + 12" text-anchor="middle" font-size="11" fill="rgba(0,0,0,0.8)" v-text="fmtHoverText()"></text>
+        </g>
+      </svg>
+    `,
+  })
+
+
   class CurTotal {
 
     constructor(current, total) {
@@ -544,7 +682,7 @@
       this.udpCount = 0;
       this.uptime = 0;
       this.appUptime = 0;
-            this.appStats = {threads: 0, mem: 0, uptime: 0};
+      this.appStats = { threads: 0, mem: 0, uptime: 0 };
 
       this.xray = { state: 'stop', stateMsg: "", errorMsg: "", version: "", color: "" };
 
@@ -580,7 +718,7 @@
           break;
         case 'error':
           this.xray.color = "red";
-                    this.xray.stateMsg ='{{ i18n "pages.index.xrayStatusError" }}';
+          this.xray.stateMsg = '{{ i18n "pages.index.xrayStatusError" }}';
           break;
         default:
           this.xray.color = "gray";
@@ -616,30 +754,30 @@
     },
     formatLogs(logs) {
       let formattedLogs = '';
-            const levels = ["DEBUG","INFO","NOTICE","WARNING","ERROR"];
+      const levels = ["DEBUG", "INFO", "NOTICE", "WARNING", "ERROR"];
-            const levelColors = ["#3c89e8","#008771","#008771","#f37b24","#e04141","#bcbcbc"];
+      const levelColors = ["#3c89e8", "#008771", "#008771", "#f37b24", "#e04141", "#bcbcbc"];
 
       logs.forEach((log, index) => {
-                let [data, message] = log.split(" - ",2);
+        let [data, message] = log.split(" - ", 2);
         const parts = data.split(" ")
-                if(index>0) formattedLogs += '<br>';
+        if (index > 0) formattedLogs += '<br>';
 
         if (parts.length === 3) {
           const d = parts[0];
           const t = parts[1];
           const level = parts[2];
-                    const levelIndex = levels.indexOf(level,levels) || 5;
+          const levelIndex = levels.indexOf(level, levels) || 5;
 
           //formattedLogs += `<span style="color: gray;">${index + 1}.</span>`;
           formattedLogs += `<span style="color: ${levelColors[0]};">${d} ${t}</span> `;
           formattedLogs += `<span style="color: ${levelColors[levelIndex]}">${level}</span>`;
         } else {
-                    const levelIndex = levels.indexOf(data,levels) || 5;
+          const levelIndex = levels.indexOf(data, levels) || 5;
           formattedLogs += `<span style="color: ${levelColors[levelIndex]}">${data}</span>`;
         }
 
-                if(message){
+        if (message) {
-                    if(message.startsWith("XRAY:"))
+          if (message.startsWith("XRAY:"))
             message = "<b>XRAY: </b>" + message.substring(5);
           else
             message = "<b>X-UI: </b>" + message;
@@ -669,46 +807,61 @@
         this.formattedLogs = this.logs?.length > 0 ? this.formatLogs(this.logs) : "No Record...";
       },
       formatLogs(logs) {
-            let formattedLogs = '';
+        let formattedLogs = `
+<style>
+  table {
+    border-collapse: collapse;
+    width: auto;
+  }
 
-          logs.forEach((log, index) => {
+  table td, table th {
-            if(index > 0) formattedLogs += '<br>';
+    padding: 2px 15px;
+  }
+</style>
 
-            const parts = log.split(' ');
+<table>
-
+    <tr>
-            if(parts.length === 10) {
+        <th>Date</th>
-              const dateTime = `<b>${parts[0]} ${parts[1]}</b>`;
+        <th>From</th>
-              const from = `<b>${parts[3]}</b>`;
+        <th>To</th>
-              const to = `<b>${parts[5].replace(/^\/+/, "")}</b>`;
+        <th>Inbound</th>
+        <th>Outbound</th>
+        <th>Email</th>
+    </tr>
+`;
 
+        logs.reverse().forEach((log, index) => {
           let outboundColor = '';
-              if (parts[9] === "b") {
+          if (log.Event === 1) {
             outboundColor = ' style="color: #e04141;"'; //red for blocked
           }
-              else if (parts[9] === "p") {
+          else if (log.Event === 2) {
             outboundColor = ' style="color: #3c89e8;"'; //blue for proxies
           }
 
-              formattedLogs += `<span${outboundColor}>
+          let text = ``;
-${dateTime}
+          if (log.Email !== "") {
- ${parts[2]}
+            text = `<td>${log.Email}</td>`;
- ${from}
- ${parts[4]}
- ${to}
- ${parts.slice(6, 9).join(' ')}
-</span>`;
-            } else {
-              formattedLogs += `<span>${log}</span>`;
           }
+
+          formattedLogs += `
+<tr ${outboundColor}>
+    <td><b>${new Date(log.DateTime).toLocaleString()}</b></td>
+    <td>${log.FromAddress}</td>
+    <td>${log.ToAddress}</td>
+    <td>${log.Inbound}</td>
+    <td>${log.Outbound}</td>
+    ${text}
+</tr>
+`;
         });
 
-            return formattedLogs;
+        return formattedLogs += "</table>";
       },
       hide() {
         this.visible = false;
       },
     };
-
   const backupModal = {
     visible: false,
     show() {
@@ -730,6 +883,10 @@ ${dateTime}
         spinning: false
       },
       status: new Status(),
+  cpuHistory: [], // small live widget history
+  cpuHistoryLong: [], // aggregated points from backend
+  cpuHistoryLabels: [],
+  cpuHistoryModal: { visible: false, bucket: 2 },
       versionModal,
       logModal,
       xraylogModal,
@@ -760,6 +917,43 @@ ${dateTime}
       },
       setStatus(data) {
         this.status = new Status(data);
+        // Push CPU percent into history (clamped 0..100)
+        const v = Math.max(0, Math.min(100, Number(data?.cpu ?? 0)))
+        this.cpuHistory.push(v)
+        const maxPoints = this.isMobile ? 60 : 120
+        if (this.cpuHistory.length > maxPoints) {
+          this.cpuHistory.splice(0, this.cpuHistory.length - maxPoints)
+        }
+        // If modal open, refresh current bucketed data
+        if (this.cpuHistoryModal.visible) {
+          this.fetchCpuHistoryBucket()
+        }
+      },
+      openCpuHistory() {
+        this.cpuHistoryModal.visible = true
+        this.fetchCpuHistoryBucket()
+      },
+      async fetchCpuHistoryBucket() {
+        const bucket = this.cpuHistoryModal.bucket || 2
+        try {
+          const msg = await HttpUtil.get(`/panel/api/server/cpuHistory/${bucket}`)
+          if (msg.success && Array.isArray(msg.obj)) {
+            const vals = []
+            const labels = []
+            for (const p of msg.obj) {
+              const d = new Date(p.t * 1000)
+              const hh = String(d.getHours()).padStart(2,'0')
+              const mm = String(d.getMinutes()).padStart(2,'0')
+              const ss = String(d.getSeconds()).padStart(2,'0')
+              labels.push(bucket>=60 ? `${hh}:${mm}` : `${hh}:${mm}:${ss}`)
+              vals.push(Math.max(0, Math.min(100, p.cpu)))
+            }
+            this.cpuHistoryLabels = labels
+            this.cpuHistoryLong = vals
+          }
+        } catch(e) {
+          console.error('Failed to fetch bucketed cpu history', e)
+        }
       },
       async openSelectV2rayVersion() {
         this.loading(true);
@@ -822,9 +1016,9 @@ ${dateTime}
           return;
         }
       },
-            async openLogs(){
+      async openLogs() {
         logModal.loading = true;
-                const msg = await HttpUtil.post('/panel/api/server/logs/'+logModal.rows,{level: logModal.level, syslog: logModal.syslog});
+        const msg = await HttpUtil.post('/panel/api/server/logs/' + logModal.rows, { level: logModal.level, syslog: logModal.syslog });
         if (!msg.success) {
           return;
         }
@@ -832,9 +1026,9 @@ ${dateTime}
         await PromiseUtil.sleep(500);
         logModal.loading = false;
       },
-            async openXrayLogs(){
+      async openXrayLogs() {
         xraylogModal.loading = true;
-                const msg = await HttpUtil.post('/panel/api/server/xraylogs/'+xraylogModal.rows,{filter: xraylogModal.filter, showDirect: xraylogModal.showDirect, showBlocked: xraylogModal.showBlocked, showProxy: xraylogModal.showProxy});
+        const msg = await HttpUtil.post('/panel/api/server/xraylogs/' + xraylogModal.rows, { filter: xraylogModal.filter, showDirect: xraylogModal.showDirect, showBlocked: xraylogModal.showBlocked, showProxy: xraylogModal.showProxy });
         if (!msg.success) {
           return;
         }
@@ -842,6 +1036,25 @@ ${dateTime}
         await PromiseUtil.sleep(500);
         xraylogModal.loading = false;
       },
+      downloadXrayLogs() {
+        if (!Array.isArray(this.xraylogModal.logs) || this.xraylogModal.logs.length === 0) {
+          FileManager.downloadTextFile('', 'x-ui.log');
+          return;
+        }
+        const lines = this.xraylogModal.logs.map(l => {
+          try {
+            const dt = l.DateTime ? new Date(l.DateTime) : null;
+            const dateStr = dt && !isNaN(dt.getTime()) ? dt.toISOString() : '';
+            const eventMap = { 0: 'DIRECT', 1: 'BLOCKED', 2: 'PROXY' };
+            const eventText = eventMap[l.Event] || String(l.Event ?? '');
+            const emailPart = l.Email ? ` Email=${l.Email}` : '';
+            return `${dateStr} FROM=${l.FromAddress || ''} TO=${l.ToAddress || ''} INBOUND=${l.Inbound || ''} OUTBOUND=${l.Outbound || ''}${emailPart} EVENT=${eventText}`.trim();
+          } catch (e) {
+            return JSON.stringify(l);
+          }
+        }).join('\n');
+        FileManager.downloadTextFile(lines, 'x-ui.log');
+      },
       async openConfig() {
         this.loading(true);
         const msg = await HttpUtil.get('/panel/api/server/getConfigJson');

web/html/login.html

@@ -1,456 +1,10 @@
 {{ template "page/head_start" .}}
-<style>
-  html * {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  h1 {
-    text-align: center;
-    /*margin: 20px 0 50px 0;*/
-    height: 110px;
-  }
-
-  .ant-form-item-children .ant-btn,
-  .ant-input {
-    height: 50px;
-    border-radius: 30px;
-  }
-
-  .ant-input-group-addon {
-    border-radius: 0 30px 30px 0;
-    width: 50px;
-    font-size: 18px;
-  }
-
-  .ant-input-affix-wrapper .ant-input-prefix {
-    left: 23px;
-  }
-
-  .ant-input-affix-wrapper .ant-input:not(:first-child) {
-    padding-left: 50px;
-  }
-
-  .centered {
-    display: flex;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-  }
-
-  .title {
-    font-size: 2rem;
-    margin-block-end: 2rem;
-  }
-
-  .title b {
-    font-weight: bold !important;
-  }
-
-  #app {
-    overflow: hidden;
-  }
-
-  #login {
-    animation: charge 0.5s both;
-    background-color: #fff;
-    border-radius: 2rem;
-    padding: 4rem 3rem;
-    transition: all 0.3s;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-  }
-
-  #login:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
-  }
-
-  @keyframes charge {
-    from {
-      transform: translateY(5rem);
-      opacity: 0;
-    }
-
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  .under {
-    background-color: #c7ebe2;
-    z-index: 0;
-  }
-
-  .dark .under {
-    background-color: var(--dark-color-login-wave);
-  }
-
-  .dark #login {
-    background-color: var(--dark-color-surface-100);
-  }
-
-  .dark h1 {
-    color: rgba(255, 255, 255);
-  }
-
-  .ant-btn-primary-login {
-    width: 100%;
-  }
-
-  .ant-btn-primary-login:focus,
-  .ant-btn-primary-login:hover {
-    color: #fff;
-    background-color: #006655;
-    border-color: #006655;
-    background-image: linear-gradient(270deg,
-        rgba(123, 199, 77, 0) 30%,
-        #009980,
-        rgba(123, 199, 77, 0) 100%);
-    background-repeat: no-repeat;
-    animation: ma-bg-move ease-in-out 5s infinite;
-    background-position-x: -500px;
-    width: 95%;
-    animation-delay: -0.5s;
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
-  }
-
-  .ant-btn-primary-login.active,
-  .ant-btn-primary-login:active {
-    color: #fff;
-    background-color: #006655;
-    border-color: #006655;
-  }
-
-  @keyframes ma-bg-move {
-    0% {
-      background-position: -500px 0;
-    }
-
-    50% {
-      background-position: 1000px 0;
-    }
-
-    100% {
-      background-position: 1000px 0;
-    }
-  }
-
-  .wave-btn-bg {
-    position: relative;
-    border-radius: 25px;
-    width: 100%;
-    transition: all 0.3s cubic-bezier(.645, .045, .355, 1);
-  }
-
-  .dark .wave-btn-bg {
-    color: #fff;
-    position: relative;
-    background-color: #0a7557;
-    border: 2px double transparent;
-    background-origin: border-box;
-    background-clip: padding-box, border-box;
-    background-size: 300%;
-    width: 100%;
-    z-index: 1;
-  }
-
-  .dark .wave-btn-bg:hover {
-    animation: wave-btn-tara 4s ease infinite;
-  }
-
-  .dark .wave-btn-bg-cl {
-    background-image: linear-gradient(rgba(13, 14, 33, 0), rgba(13, 14, 33, 0)),
-      radial-gradient(circle at left top, #006655, #009980, #006655) !important;
-    border-radius: 3em;
-  }
-
-  .dark .wave-btn-bg-cl:hover {
-    width: 95%;
-  }
-
-  .dark .wave-btn-bg-cl:before {
-    position: absolute;
-    content: "";
-    top: -5px;
-    left: -5px;
-    bottom: -5px;
-    right: -5px;
-    z-index: -1;
-    background: inherit;
-    background-size: inherit;
-    border-radius: 4em;
-    opacity: 0;
-    transition: 0.5s;
-  }
-
-  .dark .wave-btn-bg-cl:hover::before {
-    opacity: 1;
-    filter: blur(20px);
-    animation: wave-btn-tara 8s linear infinite;
-  }
-
-  @keyframes wave-btn-tara {
-    to {
-      background-position: 300%;
-    }
-  }
-
-  .dark .ant-btn-primary-login {
-    font-size: 14px;
-    color: #fff;
-    text-align: center;
-    background-image: linear-gradient(rgba(13, 14, 33, 0.45),
-        rgba(13, 14, 33, 0.35));
-    border-radius: 2rem;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    height: 46px;
-    position: relative;
-    white-space: nowrap;
-    cursor: pointer;
-    touch-action: manipulation;
-    padding: 0 15px;
-    width: 100%;
-    animation: none;
-    background-position-x: 0;
-    box-shadow: none;
-  }
-
-  .waves-header {
-    position: fixed;
-    width: 100%;
-    text-align: center;
-    background-color: #dbf5ed;
-    color: white;
-    z-index: -1;
-  }
-
-  .dark .waves-header {
-    background-color: var(--dark-color-login-background);
-  }
-
-  .waves-inner-header {
-    height: 50vh;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-  }
-
-  .waves {
-    position: relative;
-    width: 100%;
-    height: 15vh;
-    margin-bottom: -8px;
-    /*Fix for safari gap*/
-    min-height: 100px;
-    max-height: 150px;
-  }
-
-  .parallax>use {
-    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
-  }
-
-  .dark .parallax>use {
-    fill: var(--dark-color-login-wave);
-  }
-
-  .parallax>use:nth-child(1) {
-    animation-delay: -2s;
-    animation-duration: 4s;
-    opacity: 0.2;
-  }
-
-  .parallax>use:nth-child(2) {
-    animation-delay: -3s;
-    animation-duration: 7s;
-    opacity: 0.4;
-  }
-
-  .parallax>use:nth-child(3) {
-    animation-delay: -4s;
-    animation-duration: 10s;
-    opacity: 0.6;
-  }
-
-  .parallax>use:nth-child(4) {
-    animation-delay: -5s;
-    animation-duration: 13s;
-  }
-
-  @keyframes move-forever {
-    0% {
-      transform: translate3d(-90px, 0, 0);
-    }
-
-    100% {
-      transform: translate3d(85px, 0, 0);
-    }
-  }
-
-  @media (max-width: 768px) {
-    .waves {
-      height: 40px;
-      min-height: 40px;
-    }
-  }
-
-  .words-wrapper {
-    width: 100%;
-    display: inline-block;
-    position: relative;
-    text-align: center;
-  }
-
-  .words-wrapper b {
-    width: 100%;
-    display: inline-block;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-
-  .words-wrapper b.is-visible {
-    position: relative;
-  }
-
-  .headline.zoom .words-wrapper {
-    -webkit-perspective: 300px;
-    -moz-perspective: 300px;
-    perspective: 300px;
-  }
-
-  .headline {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .headline.zoom b {
-    opacity: 0;
-  }
-
-  .headline.zoom b.is-visible {
-    opacity: 1;
-    -webkit-animation: zoom-in 0.8s;
-    -moz-animation: zoom-in 0.8s;
-    animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-in 0.8s;
-  }
-
-  .headline.zoom b.is-hidden {
-    -webkit-animation: zoom-out 0.8s;
-    -moz-animation: zoom-out 0.8s;
-    animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-out 0.4s;
-  }
-
-  @-webkit-keyframes zoom-in {
-    0% {
-      opacity: 0;
-      -webkit-transform: translateZ(100px);
-    }
-
-    100% {
-      opacity: 1;
-      -webkit-transform: translateZ(0);
-    }
-  }
-
-  @-moz-keyframes zoom-in {
-    0% {
-      opacity: 0;
-      -moz-transform: translateZ(100px);
-    }
-
-    100% {
-      opacity: 1;
-      -moz-transform: translateZ(0);
-    }
-  }
-
-  @keyframes zoom-in {
-    0% {
-      opacity: 0;
-      -webkit-transform: translateZ(100px);
-      -moz-transform: translateZ(100px);
-      -ms-transform: translateZ(100px);
-      -o-transform: translateZ(100px);
-      transform: translateZ(100px);
-    }
-
-    100% {
-      opacity: 1;
-      -webkit-transform: translateZ(0);
-      -moz-transform: translateZ(0);
-      -ms-transform: translateZ(0);
-      -o-transform: translateZ(0);
-      transform: translateZ(0);
-    }
-  }
-
-  @-webkit-keyframes zoom-out {
-    0% {
-      opacity: 1;
-      -webkit-transform: translateZ(0);
-    }
-
-    100% {
-      opacity: 0;
-      -webkit-transform: translateZ(-100px);
-    }
-  }
-
-  @-moz-keyframes zoom-out {
-    0% {
-      opacity: 1;
-      -moz-transform: translateZ(0);
-    }
-
-    100% {
-      opacity: 0;
-      -moz-transform: translateZ(-100px);
-    }
-  }
-
-  @keyframes zoom-out {
-    0% {
-      opacity: 1;
-      -webkit-transform: translateZ(0);
-      -moz-transform: translateZ(0);
-      -ms-transform: translateZ(0);
-      -o-transform: translateZ(0);
-      transform: translateZ(0);
-    }
-
-    100% {
-      opacity: 0;
-      -webkit-transform: translateZ(-100px);
-      -moz-transform: translateZ(-100px);
-      -ms-transform: translateZ(-100px);
-      -o-transform: translateZ(-100px);
-      transform: translateZ(-100px);
-    }
-  }
-
-  .setting-section {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 22px;
-  }
-
-  .ant-space-item .ant-switch {
-    margin: 2px 0 4px;
-  }
-</style>
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' login-app'">
   <transition name="list" appear>
-    <a-layout-content class="under" :style="{ minHeight: '0' }">
+  <a-layout-content class="under min-h-0">
       <div class="waves-header">
         <div class="waves-inner-header"></div>
         <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -466,11 +20,10 @@
           </g>
         </svg>
       </div>
-      <a-row type="flex" justify="center" align="middle"
+  <a-row type="flex" justify="center" align="middle" class="h-100 overflow-y-auto overflow-x-hidden">
-        :style="{ height: '100%', overflow: 'auto', overflowX: 'hidden' }">
+        <a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" class="my-3rem">
-        <a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" :style="{ margin: '3rem 0' }">
           <template v-if="!loadingStates.fetched">
-            <div :style="{ textAlign: 'center' }">
+            <div class="text-center">
               <a-spin size="large" />
             </div>
           </template>
@@ -482,7 +35,7 @@
                   <a-space direction="vertical" :size="10">
                     <a-theme-switch-login></a-theme-switch-login>
                     <span>{{ i18n "pages.settings.language" }}</span>
-                    <a-select ref="selectLang" :style="{ width: '100%' }" v-model="lang"
+                    <a-select ref="selectLang" class="w-100" v-model="lang"
                       @change="LanguageManager.setLanguage(lang)" :dropdown-class-name="themeSwitcher.currentTheme">
                       <a-select-option :value="l.value" label="English" v-for="l in LanguageManager.supportedLanguages">
                         <span role="img" aria-label="l.name" v-text="l.icon"></span>
@@ -511,26 +64,24 @@
                     <a-form-item>
                       <a-input autocomplete="username" name="username" v-model.trim="user.username"
                         placeholder='{{ i18n "username" }}' autofocus required>
-                        <a-icon slot="prefix" type="user" :style="{ fontSize: '1rem' }"></a-icon>
+                        <a-icon slot="prefix" type="user" class="fs-1rem"></a-icon>
                       </a-input>
                     </a-form-item>
                     <a-form-item>
                       <a-input-password autocomplete="password" name="password" v-model.trim="user.password"
                         placeholder='{{ i18n "password" }}' required>
-                        <a-icon slot="prefix" type="lock" :style="{ fontSize: '1rem' }"></a-icon>
+                        <a-icon slot="prefix" type="lock" class="fs-1rem"></a-icon>
                       </a-input-password>
                     </a-form-item>
                     <a-form-item v-if="twoFactorEnable">
                       <a-input autocomplete="one-time-code" name="twoFactorCode" v-model.trim="user.twoFactorCode"
                         placeholder='{{ i18n "twoFactorCode" }}' required>
-                        <a-icon slot="prefix" type="key" :style="{ fontSize: '1rem' }"></a-icon>
+                        <a-icon slot="prefix" type="key" class="fs-1rem"></a-icon>
                       </a-input>
                     </a-form-item>
                     <a-form-item>
                       <a-row justify="center" class="centered">
-                        <div
+                        <div class="wave-btn-bg wave-btn-bg-cl h-50px mt-1rem" :style="loadingStates.spinning ? 'width: 52px' : 'display: inline-block'">
-                          :style="{ height: '50px', marginTop: '1rem', ...loadingStates.spinning ? { width: '52px' } : { display: 'inline-block' } }"
-                          class="wave-btn-bg wave-btn-bg-cl">
                           <a-button class="ant-btn-primary-login" type="primary" :loading="loadingStates.spinning"
                             :icon="loadingStates.spinning ? 'poweroff' : undefined" html-type="submit">
                             [[ loadingStates.spinning ? '' : '{{ i18n "login" }}' ]]
@@ -633,5 +184,80 @@
       newWord.classList.add('is-visible');
     }
   });
+
+  const pm_input_selector = 'input.ant-input, textarea.ant-input';
+  const pm_strip_props = [
+    'background',
+    'background-color',
+    'background-image',
+    'color'
+  ];
+
+  const pm_observed_forms = new WeakSet();
+
+  function pm_strip_inline(el) {
+    if (!el || el.nodeType !== 1 || !el.matches?.(pm_input_selector)) return;
+
+    let did_change = false;
+    for (const prop of pm_strip_props) {
+      if (el.style.getPropertyValue(prop)) {
+        el.style.removeProperty(prop);
+        did_change = true;
+      }
+    }
+
+    if (did_change && el.style.length === 0) {
+      el.removeAttribute('style');
+    }
+  }
+
+  function pm_attach_observer(form) {
+    if (pm_observed_forms.has(form)) return;
+    pm_observed_forms.add(form);
+
+    form.querySelectorAll(pm_input_selector).forEach(pm_strip_inline);
+
+    const pm_mo = new MutationObserver(mutations => {
+      for (const m of mutations) {
+        if (m.type === 'attributes') {
+          pm_strip_inline(m.target);
+        } else if (m.type === 'childList') {
+          for (const n of m.addedNodes) {
+            if (n.nodeType !== 1) continue;
+            if (n.matches?.(pm_input_selector)) pm_strip_inline(n);
+            n.querySelectorAll?.(pm_input_selector).forEach(pm_strip_inline);
+          }
+        }
+      }
+    });
+
+    pm_mo.observe(form, {
+      attributes: true,
+      attributeFilter: ['style'],
+      childList: true,
+      subtree: true
+    });
+  }
+
+  function pm_init() {
+    document.querySelectorAll('form.ant-form').forEach(pm_attach_observer);
+    const pm_host = document.getElementById('login') || document.body;
+    const pm_wait_for_forms = new MutationObserver(mutations => {
+      for (const m of mutations) {
+        for (const n of m.addedNodes) {
+          if (n.nodeType !== 1) continue;
+          if (n.matches?.('form.ant-form')) pm_attach_observer(n);
+          n.querySelectorAll?.('form.ant-form').forEach(pm_attach_observer);
+        }
+      }
+    });
+    pm_wait_for_forms.observe(pm_host, { childList: true, subtree: true });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', pm_init, { once: true });
+  } else {
+    pm_init();
+  }
 </script>
 {{ template "page/body_end" .}}

web/html/modals/inbound_info_modal.html

@@ -102,14 +102,15 @@
       <a-tag :color="inbound.stream.security == 'none' ? 'red' : 'green'">[[ inbound.stream.security ]]</a-tag>
       <br />
       <td>Authentication</td>
-        <a-tag :color="inbound.settings.selectedAuth ? 'green' : 'red'">[[ inbound.settings.selectedAuth ? inbound.settings.selectedAuth : '' ]]</a-tag>
+        <a-tag v-if="inbound.settings.selectedAuth" color="green">[[ inbound.settings.selectedAuth ? inbound.settings.selectedAuth : '' ]]</a-tag>
+        <a-tag v-else color="red">{{ i18n "none" }}</a-tag>
       <br />
       {{ i18n "encryption" }}
         <a-tag :color="inbound.settings.encryption ? 'green' : 'red'">[[ inbound.settings.encryption ? inbound.settings.encryption : '' ]]</a-tag>
       <br />
       <template v-if="inbound.stream.security != 'none'">
         {{ i18n "domainName" }}
-        <a-tag v-if="inbound.serverName" :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
+        <a-tag v-if="inbound.serverName" color="green">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
         <a-tag v-else color="orange">{{ i18n "none" }}</a-tag>
       </template>
     </template>
@@ -179,9 +180,9 @@
         <tr>
           <td>{{ i18n "status" }}</td>
           <td>
-            <a-tag v-if="isEnable" color="green">{{ i18n "enabled" }}</a-tag>
+            <a-tag v-if="isDepleted" color="red">{{ i18n "depleted" }}</a-tag>
+            <a-tag v-else-if="isEnable" color="green">{{ i18n "enabled" }}</a-tag>
             <a-tag v-else>{{ i18n "disabled" }}</a-tag>
-            <a-tag v-if="!isActive" color="red">{{ i18n "depleted" }}</a-tag>
           </td>
         </tr>
         <tr v-if="infoModal.clientStats">
@@ -307,7 +308,7 @@
           </tr-info-title>
           <a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a>
         </tr-info-row>
-        <tr-info-row class="tr-info-row">
+        <tr-info-row class="tr-info-row" v-if="app.subSettings.subJsonEnable">
           <tr-info-title class="tr-info-title">
             <a-tag color="purple">Json Link</a-tag>
             <a-tooltip title='{{ i18n "copy" }}'>
@@ -523,7 +524,7 @@
       this.dbInbound = new DBInbound(dbInbound);
       this.clientSettings = this.inbound.clients ? this.inbound.clients[index] : null;
       this.isExpired = this.inbound.clients ? this.inbound.isExpiry(index) : this.dbInbound.isExpiry;
-      this.clientStats = this.inbound.clients ? this.dbInbound.clientStats.find(row => row.email === this.clientSettings.email) : [];
+      this.clientStats = this.inbound.clients ? (this.dbInbound.clientStats.find(row => row.email === this.clientSettings.email) || null) : null;
 
       if (
         [
@@ -547,7 +548,7 @@
       if (this.clientSettings) {
         if (this.clientSettings.subId) {
           this.subLink = this.genSubLink(this.clientSettings.subId);
-          this.subJsonLink = this.genSubJsonLink(this.clientSettings.subId);
+          this.subJsonLink = app.subSettings.subJsonEnable ? this.genSubJsonLink(this.clientSettings.subId) : '';
         }
       }
       this.visible = true;
@@ -586,6 +587,24 @@
         }
         return infoModal.dbInbound.isEnable;
       },
+      get isDepleted() {
+        const stats = infoModal.clientStats;
+        const settings = infoModal.clientSettings;
+        if (!stats || !settings) {
+          return false;
+        }
+        const total = stats.total ?? 0;
+        const used = (stats.up ?? 0) + (stats.down ?? 0);
+        const hasTotal = total > 0;
+        const exhausted = hasTotal && used >= total;
+
+        const expiryTime = settings.expiryTime ?? 0;
+        const hasExpiry = expiryTime > 0;
+        const now = Date.now();
+        const expired = hasExpiry && now >= expiryTime;
+
+        return expired || exhausted;
+      },
     },
     methods: {
       copy(content) {

web/html/modals/qrcode_modal.html

@@ -30,7 +30,7 @@
           </tr-qr-bg-inner>
         </tr-qr-bg>
       </tr-qr-box>
-      <tr-qr-box class="qr-box">
+      <tr-qr-box class="qr-box" v-if="app.subSettings.subJsonEnable">
         <a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}} Json</span></a-tag>
         <tr-qr-bg class="qr-bg-sub">
           <tr-qr-bg-inner class="qr-bg-sub-inner">
@@ -262,8 +262,10 @@
       if (qrModal.client && qrModal.client.subId) {
         qrModal.subId = qrModal.client.subId;
         this.setQrCode("qrCode-sub", this.genSubLink(qrModal.subId));
+        if (app.subSettings.subJsonEnable) {
           this.setQrCode("qrCode-subJson", this.genSubJsonLink(qrModal.subId));
         }
+      }
       qrModal.qrcodes.forEach((element, index) => {
         this.setQrCode("qrCode-" + index, element.link);
         // Update links based on current toggle state

web/html/modals/xray_rule_modal.html

@@ -9,7 +9,7 @@
           </template> Source IPs <a-icon type="question-circle"></a-icon>
         </a-tooltip>
       </template>
-      <a-input v-model.trim="ruleModal.rule.sourceIP"></a-input>
+      <a-input v-model.trim="ruleModal.rule.sourceIP" placeholder="e.g. 0.0.0.0/8, fc00::/7, geoip:ir"></a-input>
     </a-form-item>
     <a-form-item>
       <template slot="label">
@@ -19,7 +19,17 @@
           </template> Source Port <a-icon type="question-circle"></a-icon>
         </a-tooltip>
       </template>
-      <a-input v-model.trim="ruleModal.rule.sourcePort"></a-input>
+      <a-input v-model.trim="ruleModal.rule.sourcePort" placeholder="e.g. 53,443,1000-2000"></a-input>
+    </a-form-item>
+    <a-form-item>
+      <template slot="label">
+        <a-tooltip>
+          <template slot="title">
+            <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+          </template> VLESS Route <a-icon type="question-circle"></a-icon>
+        </a-tooltip>
+      </template>
+      <a-input v-model.trim="ruleModal.rule.vlessRoute" placeholder="e.g. 53,443,1000-2000"></a-input>
     </a-form-item>
     <a-form-item label='Network'>
       <a-select v-model="ruleModal.rule.network" :dropdown-class-name="themeSwitcher.currentTheme">
@@ -52,7 +62,7 @@
           </template> IP <a-icon type="question-circle"></a-icon>
         </a-tooltip>
       </template>
-      <a-input v-model.trim="ruleModal.rule.ip"></a-input>
+      <a-input v-model.trim="ruleModal.rule.ip" placeholder="e.g. 0.0.0.0/8, fc00::/7, geoip:ir"></a-input>
     </a-form-item>
     <a-form-item>
       <template slot="label">
@@ -62,7 +72,7 @@
           </template> Domain <a-icon type="question-circle"></a-icon>
         </a-tooltip>
       </template>
-      <a-input v-model.trim="ruleModal.rule.domain"></a-input>
+      <a-input v-model.trim="ruleModal.rule.domain" placeholder="e.g. google.com, geosite:cn"></a-input>
     </a-form-item>
     <a-form-item>
       <template slot="label">
@@ -72,7 +82,7 @@
           </template> User <a-icon type="question-circle"></a-icon>
         </a-tooltip>
       </template>
-      <a-input v-model.trim="ruleModal.rule.user"></a-input>
+      <a-input v-model.trim="ruleModal.rule.user" placeholder="e.g. email address"></a-input>
     </a-form-item>
     <a-form-item>
       <template slot="label">
@@ -82,7 +92,7 @@
           </template> Port <a-icon type="question-circle"></a-icon>
         </a-tooltip>
       </template>
-      <a-input v-model.trim="ruleModal.rule.port"></a-input>
+      <a-input v-model.trim="ruleModal.rule.port" placeholder="e.g. 53,443,1000-2000"></a-input>
     </a-form-item>
     <a-form-item label='Inbound Tags'>
       <a-select v-model="ruleModal.rule.inboundTag" mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme">
@@ -122,6 +132,7 @@
       ip: "",
       port: "",
       sourcePort: "",
+      vlessRoute: "",
       network: "",
       sourceIP: "",
       user: "",
@@ -155,6 +166,7 @@
         this.rule.ip = rule.ip ? rule.ip.join(',') : [];
         this.rule.port = rule.port;
         this.rule.sourcePort = rule.sourcePort;
+        this.rule.vlessRoute = rule.vlessRoute;
         this.rule.network = rule.network;
         this.rule.sourceIP = rule.sourceIP ? rule.sourceIP.join(',') : [];
         this.rule.user = rule.user ? rule.user.join(',') : [];
@@ -169,6 +181,7 @@
           ip: "",
           port: "",
           sourcePort: "",
+          vlessRoute: "",
           network: "",
           sourceIP: "",
           user: "",
@@ -210,6 +223,7 @@
       rule.ip = value.ip.length > 0 ? value.ip.split(',') : [];
       rule.port = value.port;
       rule.sourcePort = value.sourcePort;
+      rule.vlessRoute = value.vlessRoute;
       rule.network = value.network;
       rule.sourceIP = value.sourceIP.length > 0 ? value.sourceIP.split(',') : [];
       rule.user = value.user.length > 0 ? value.user.split(',') : [];

web/html/settings.html

@@ -1,67 +1,8 @@
 {{ template "page/head_start" .}}
-<style>
-  @media (min-width: 769px) {
-    .ant-layout-content {
-      margin: 24px 16px;
-    }
-  }
-  @media (max-width: 768px) {
-    .ant-tabs-nav .ant-tabs-tab {
-      margin: 0;
-      padding: 12px .5rem;
-    }
-  }
-  .ant-tabs-bar {
-    margin: 0;
-  }
-  .ant-list-item {
-    display: block;
-  }
-  .alert-msg {
-    color: rgb(194, 117, 18);
-    font-weight: normal;
-    font-size: 16px;
-    padding: .5rem 1rem;
-    text-align: center;
-    background: rgb(255 145 0 / 15%);
-    margin: 1.5rem 2.5rem 0rem;
-    border-radius: .5rem;
-    transition: all 0.5s;
-    animation: signal 3s cubic-bezier(0.18, 0.89, 0.32, 1.28) infinite;
-  }
-  .alert-msg:hover {
-    cursor: default;
-    transition-duration: .3s;
-    animation: signal 0.9s ease infinite;
-  }
-  @keyframes signal {
-    0% {
-      box-shadow: 0 0 0 0 rgba(194, 118, 18, 0.5);
-    }
-
-    50% {
-      box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
-    }
-
-    100% {
-      box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
-    }
-  }
-  .alert-msg>i {
-    color: inherit;
-    font-size: 24px;
-  }
-  .dark .ant-input-password-icon {
-    color: var(--dark-color-text-primary);
-  }
-  .ant-collapse-content-box .ant-alert {
-    margin-block-end: 12px;
-  }
-</style>
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' settings-page'">
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>
@@ -138,7 +79,7 @@
                     </template>
                     {{ template "settings/panel/subscription/general" . }}
                   </a-tab-pane>
-                  <a-tab-pane key="5" v-if="allSetting.subEnable" :style="{ paddingTop: '20px' }">
+                  <a-tab-pane key="5" v-if="allSetting.subJsonEnable" :style="{ paddingTop: '20px' }">
                     <template #tab>
                       <a-icon type="code"></a-icon>
                       <span>{{ i18n "pages.settings.subSettings" }} (JSON)</span>
@@ -582,6 +523,8 @@
           if (this.allSetting.subEnable) {
             subPath = this.allSetting.subURI.length > 0 ? new URL(this.allSetting.subURI).pathname : this.allSetting.subPath;
             if (subPath == '/sub/') alerts.push('{{ i18n "secAlertSubURI" }}');
+          }
+          if (this.allSetting.subJsonEnable) {
             subJsonPath = this.allSetting.subJsonURI.length > 0 ? new URL(this.allSetting.subJsonURI).pathname : this.allSetting.subJsonPath;
             if (subJsonPath == '/json/') alerts.push('{{ i18n "secAlertSubJsonURI" }}');
           }

web/html/settings/panel/subscription/general.html

@@ -8,6 +8,13 @@
                 <a-switch v-model="allSetting.subEnable"></a-switch>
             </template>
         </a-setting-list-item>
+        <a-setting-list-item paddings="small">
+            <template #title>JSON Subscription</template>
+            <template #description>{{ i18n "pages.settings.subJsonEnable"}}</template>
+            <template #control>
+                <a-switch v-model="allSetting.subJsonEnable"></a-switch>
+            </template>
+        </a-setting-list-item>
         <a-setting-list-item paddings="small">
             <template #title>{{ i18n "pages.settings.subTitle"}}</template>
             <template #description>{{ i18n "pages.settings.subTitleDesc"}}</template>

web/html/settings/panel/subscription/subpage.html

@@ -0,0 +1,276 @@
+{{ template "page/head_start" .}}
+<script src="{{ .base_path }}assets/moment/moment.min.js"></script>
+<script src="{{ .base_path }}assets/moment/moment-jalali.min.js?{{ .cur_ver }}"></script>
+<script src="{{ .base_path }}assets/vue/vue.min.js?{{ .cur_ver }}"></script>
+<script src="{{ .base_path }}assets/ant-design-vue/antd.min.js"></script>
+<script src="{{ .base_path }}assets/js/util/index.js?{{ .cur_ver }}"></script>
+<script src="{{ .base_path }}assets/js/util/date-util.js?{{ .cur_ver }}"></script>
+<script src="{{ .base_path }}assets/qrcode/qrious2.min.js?{{ .cur_ver }}"></script>
+{{ template "page/head_end" .}}
+
+{{ template "page/body_start" .}}
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' subscription-page'">
+    <a-layout-content class="p-2">
+        <a-row type="flex" justify="center" class="mt-2">
+            <a-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">
+                <a-card hoverable class="subscription-card">
+                    <template #title>
+                        <a-space>
+                            <span>{{ i18n "subscription.title" }}</span>
+                            <a-tag>{{ .sId }}</a-tag>
+                        </a-space>
+                    </template>
+                    <template #extra>
+                        <a-popover
+                            :overlay-class-name="themeSwitcher.currentTheme"
+                            title='{{ i18n "menu.settings" }}'
+                            placement="bottomRight" trigger="click">
+                            <template #content>
+                                <a-space direction="vertical" :size="10">
+                                    <a-theme-switch-login></a-theme-switch-login>
+                                    <span>{{ i18n "pages.settings.language"
+                                        }}</span>
+                                    <a-select ref="selectLang" class="w-100"
+                                        v-model="lang"
+                                        @change="LanguageManager.setLanguage(lang)"
+                                        :dropdown-class-name="themeSwitcher.currentTheme">
+                                        <a-select-option :value="l.value"
+                                            label="English"
+                                            v-for="l in LanguageManager.supportedLanguages"
+                                            :key="l.value">
+                                            <span role="img"
+                                                :aria-label="l.name"
+                                                v-text="l.icon"></span>
+                                            &nbsp;&nbsp;<span
+                                                v-text="l.name"></span>
+                                        </a-select-option>
+                                    </a-select>
+                                </a-space>
+                            </template>
+                            <a-button shape="circle" icon="setting"></a-button>
+                        </a-popover>
+                    </template>
+
+                    <a-form layout="vertical">
+                        <a-form-item>
+                            <a-space direction="vertical" align="center">
+                                <a-row type="flex" :gutter="[8,8]"
+                                    justify="center" style="width:100%">
+                                    <a-col :xs="24" :sm="app.subJsonUrl ? 12 : 24"
+                                        style="text-align:center;">
+                                        <tr-qr-box class="qr-box">
+                                            <a-tag color="purple"
+                                                class="qr-tag">
+                                                <span>{{ i18n
+                                                    "pages.settings.subSettings"}}</span>
+                                            </a-tag>
+                                            <tr-qr-bg class="qr-bg-sub">
+                                                <tr-qr-bg-inner
+                                                    class="qr-bg-sub-inner">
+                                                    <canvas id="qrcode"
+                                                        class="qr-cv"
+                                                        title='{{ i18n "copy" }}'
+                                                        @click="copy(app.subUrl)"></canvas>
+                                                </tr-qr-bg-inner>
+                                            </tr-qr-bg>
+                                        </tr-qr-box>
+                                    </a-col>
+                                    <a-col v-if="app.subJsonUrl" :xs="24" :sm="12"
+                                        style="text-align:center;">
+                                        <tr-qr-box class="qr-box">
+                                            <a-tag color="purple"
+                                                class="qr-tag">
+                                                <span>{{ i18n
+                                                    "pages.settings.subSettings"}}
+                                                    Json</span>
+                                            </a-tag>
+                                            <tr-qr-bg class="qr-bg-sub">
+                                                <tr-qr-bg-inner
+                                                    class="qr-bg-sub-inner">
+                                                    <canvas id="qrcode-subjson"
+                                                        class="qr-cv"
+                                                        title='{{ i18n "copy" }}'
+                                                        @click="copy(app.subJsonUrl)"></canvas>
+                                                </tr-qr-bg-inner>
+                                            </tr-qr-bg>
+                                        </tr-qr-box>
+                                    </a-col>
+                                </a-row>
+                            </a-space>
+                        </a-form-item>
+
+                        <a-form-item>
+                            <a-descriptions bordered :column="1" size="small">
+                                <a-descriptions-item
+                                    label='{{ i18n "subscription.subId" }}'>[[
+                                    app.sId
+                                    ]]</a-descriptions-item>
+                                <a-descriptions-item
+                                    label='{{ i18n "subscription.status" }}'>
+                                    <template v-if="isUnlimited">
+                                        <a-tag color="purple">{{ i18n
+                                            "subscription.unlimited" }}</a-tag>
+                                    </template>
+                                    <template v-else>
+                                        <a-tag
+                                            :color="isActive ? 'green' : 'red'">[[
+                                            isActive ? '{{ i18n
+                                            "subscription.active" }}' : '{{ i18n
+                                            "subscription.inactive" }}'
+                                            ]]</a-tag>
+                                    </template>
+                                </a-descriptions-item>
+                                <a-descriptions-item
+                                    label='{{ i18n "subscription.downloaded" }}'>[[
+                                    app.download
+                                    ]]</a-descriptions-item>
+                                <a-descriptions-item
+                                    label='{{ i18n "subscription.uploaded" }}'>[[
+                                    app.upload
+                                    ]]</a-descriptions-item>
+                                <a-descriptions-item
+                                    label='{{ i18n "usage" }}'>[[ app.used
+                                    ]]</a-descriptions-item>
+                                <a-descriptions-item
+                                    label='{{ i18n "subscription.totalQuota" }}'>[[
+                                    app.total
+                                    ]]</a-descriptions-item>
+                                <a-descriptions-item v-if="app.totalByte > 0"
+                                    label='{{ i18n "remained" }}'>[[
+                                    app.remained ]]</a-descriptions-item>
+                                <a-descriptions-item
+                                    label='{{ i18n "lastOnline" }}'>
+                                    <template v-if="app.lastOnlineMs > 0">
+                                        <template
+                                            v-if="app.datepicker === 'gregorian'">
+                                            [[
+                                            DateUtil.formatMillis(app.lastOnlineMs)
+                                            ]]
+                                        </template>
+                                        <template v-else>
+                                            [[
+                                            DateUtil.convertToJalalian(moment(app.lastOnlineMs))
+                                            ]]
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <span>-</span>
+                                    </template>
+                                </a-descriptions-item>
+                                <a-descriptions-item
+                                    label='{{ i18n "subscription.expiry" }}'>
+                                    <template v-if="app.expireMs === 0">
+                                        {{ i18n "subscription.noExpiry" }}
+                                    </template>
+                                    <template v-else>
+                                        <template
+                                            v-if="app.datepicker === 'gregorian'">
+                                            [[
+                                            DateUtil.formatMillis(app.expireMs)
+                                            ]]
+                                        </template>
+                                        <template v-else>
+                                            [[
+                                            DateUtil.convertToJalalian(moment(app.expireMs))
+                                            ]]
+                                        </template>
+                                    </template>
+                                </a-descriptions-item>
+                            </a-descriptions>
+                        </a-form-item>
+                    </a-form>
+
+                    <br />
+                    <a-list bordered>
+                        <a-list-item v-for="(link, idx) in links" :key="link">
+                            <div style="width:100%; text-align:center;">
+                                <a-button type="primary" :block="isMobile"
+                                    @click="copy(link)">[[ linkName(link, idx)
+                                    ]]</a-button>
+                            </div>
+                        </a-list-item>
+                    </a-list>
+                    <br />
+
+                    <a-form layout="vertical">
+                        <a-form-item>
+                            <a-row type="flex" justify="center" :gutter="[8,8]"
+                                style="width:100%">
+                                <a-col :xs="24" :sm="12"
+                                    style="text-align:center;">
+                                    <!-- Android dropdown -->
+                                    <a-dropdown :trigger="['click']">
+                                        <a-button icon="android" :block="isMobile"
+                                            :style="{ marginTop: isMobile ? '6px' : 0 }"
+                                            size="large" type="primary">
+                                            Android <a-icon type="down" />
+                                        </a-button>
+                                        <a-menu slot="overlay"
+                                            :class="themeSwitcher.currentTheme">
+                                            <a-menu-item key="android-v2box"
+                                                @click="open('v2box://install-sub?url=' + encodeURIComponent(app.subUrl) + '&name=' + encodeURIComponent(app.sId))">V2Box</a-menu-item>
+                                            <a-menu-item key="android-v2rayng"
+                                                @click="open('v2rayng://install-config?url=' + encodeURIComponent(app.subUrl))">V2RayNG</a-menu-item>
+                                            <a-menu-item key="android-singbox"
+                                                @click="copy(app.subUrl)">Sing-box</a-menu-item>
+                                            <a-menu-item key="android-v2raytun"
+                                                @click="copy(app.subUrl)">V2RayTun</a-menu-item>
+                                            <a-menu-item key="android-npvtunnel"
+                                                @click="copy(app.subUrl)">NPV
+                                                Tunnel</a-menu-item>
+                                        </a-menu>
+                                    </a-dropdown>
+                                </a-col>
+                                <a-col :xs="24" :sm="12"
+                                    style="text-align:center;">
+                                    <!-- iOS dropdown -->
+                                    <a-dropdown :trigger="['click']">
+                                        <a-button icon="apple" :block="isMobile"
+                                            :style="{ marginTop: isMobile ? '6px' : 0 }"
+                                            size="large" type="primary">
+                                            iOS <a-icon type="down" />
+                                        </a-button>
+                                        <a-menu slot="overlay"
+                                            :class="themeSwitcher.currentTheme">
+                                            <a-menu-item key="ios-shadowrocket"
+                                                @click="open(shadowrocketUrl)">Shadowrocket</a-menu-item>
+                                            <a-menu-item key="ios-v2box"
+                                                @click="open(v2boxUrl)">V2Box</a-menu-item>
+                                            <a-menu-item key="ios-streisand"
+                                                @click="open(streisandUrl)">Streisand</a-menu-item>
+                                            <a-menu-item key="ios-v2raytun"
+                                                @click="copy(v2raytunUrl)">V2RayTun</a-menu-item>
+                                            <a-menu-item key="ios-npvtunnel"
+                                                @click="copy(npvtunUrl)">NPV
+                                                Tunnel
+                                            </a-menu-item>
+                                        </a-menu>
+                                    </a-dropdown>
+                                </a-col>
+                            </a-row>
+                        </a-form-item>
+                    </a-form>
+                </a-card>
+            </a-col>
+        </a-row>
+    </a-layout-content>
+</a-layout>
+
+<!-- Bootstrap data for external JS -->
+<template id="subscription-data" data-sid="{{ .sId }}"
+    data-sub-url="{{ .subUrl }}" data-subjson-url="{{ .subJsonUrl }}"
+    data-download="{{ .download }}"
+    data-upload="{{ .upload }}" data-used="{{ .used }}"
+    data-total="{{ .total }}" data-remained="{{ .remained }}"
+    data-expire="{{ .expire }}" data-lastonline="{{ .lastOnline }}"
+    data-downloadbyte="{{ .downloadByte }}"
+    data-uploadbyte="{{ .uploadByte }}" data-totalbyte="{{ .totalByte }}"
+    data-datepicker="{{ .datepicker }}"></template>
+<textarea id="subscription-links"
+    style="display:none">{{ range .result }}{{ . }}
+{{ end }}</textarea>
+
+{{template "component/aThemeSwitch" .}}
+<script src="{{ .base_path }}assets/js/subscription.js?{{ .cur_ver }}"></script>
+
+{{ template "page/body_end" .}}

web/html/settings/xray/routing.html

@@ -67,18 +67,22 @@
         </template>
         <template slot="info" slot-scope="text, rule, index">
             <a-popover placement="bottomRight"
-                v-if="(rule.source+rule.sourcePort+rule.network+rule.protocol+rule.attrs+rule.ip+rule.domain+rule.port).length>0"
+                v-if="(rule.sourceIP+rule.sourcePort+rule.vlessRoute+rule.network+rule.protocol+rule.attrs+rule.ip+rule.domain+rule.port).length>0"
                 :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
                 <template slot="content">
                     <table cellpadding="2" :style="{ maxWidth: '300px' }">
-                        <tr v-if="rule.source">
+                        <tr v-if="rule.sourceIP">
-                            <td>Source</td>
+                            <td>Source IP</td>
-                            <td><a-tag color="blue" v-for="r in rule.source.split(',')">[[ r ]]</a-tag></td>
+                            <td><a-tag color="blue" v-for="r in rule.sourceIP.split(',')">[[ r ]]</a-tag></td>
                         </tr>
                         <tr v-if="rule.sourcePort">
                             <td>Source Port</td>
                             <td><a-tag color="green" v-for="r in rule.sourcePort.split(',')">[[ r ]]</a-tag></td>
                         </tr>
+                        <tr v-if="rule.vlessRoute">
+                            <td>VLESS Route</td>
+                            <td><a-tag color="geekblue" v-for="r in rule.vlessRoute.split(',')">[[ r ]]</a-tag></td>
+                        </tr>
                         <tr v-if="rule.network">
                             <td>Network</td>
                             <td><a-tag color="blue" v-for="r in rule.network.split(',')">[[ r ]]</a-tag></td>

web/html/xray.html

@@ -3,45 +3,10 @@
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/fold/foldgutter.css">
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/xq.min.css?{{ .cur_ver }}">
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/lint/lint.css">
-<style>
-  @media (min-width: 769px) {
-    .ant-layout-content {
-      margin: 24px 16px;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .ant-tabs-nav .ant-tabs-tab {
-      margin: 0;
-      padding: 12px .5rem;
-    }
-
-    .ant-table-thead>tr>th,
-    .ant-table-tbody>tr>td {
-      padding: 10px 0px;
-    }
-  }
-
-  .ant-tabs-bar {
-    margin: 0;
-  }
-
-  .ant-list-item {
-    display: block;
-  }
-
-  .ant-list-item>li {
-    padding: 10px 20px !important;
-  }
-
-  .ant-collapse-content-box .ant-alert {
-    margin-block-end: 12px;
-  }
-</style>
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' xray-page'">
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>
@@ -181,8 +146,9 @@
     { title: "#", align: 'center', width: 15, scopedSlots: { customRender: 'action' } },
     {
       title: '{{ i18n "pages.xray.rules.source"}}', children: [
-        { title: 'IP', dataIndex: "source", align: 'center', width: 20, ellipsis: true },
+        { title: 'IP', dataIndex: "sourceIP", align: 'center', width: 20, ellipsis: true },
-        { title: '{{ i18n "pages.inbounds.port" }}', dataIndex: 'sourcePort', align: 'center', width: 10, ellipsis: true }]
+        { title: '{{ i18n "pages.inbounds.port" }}', dataIndex: 'sourcePort', align: 'center', width: 10, ellipsis: true },
+        { title: 'VLESS Route', dataIndex: 'vlessRoute', align: 'center', width: 15, ellipsis: true }]
     },
     {
       title: '{{ i18n "pages.inbounds.network"}}', children: [
@@ -569,7 +535,9 @@
         switch (o.protocol) {
           case Protocols.VMess:
           case Protocols.VLESS:
-            serverObj = o.settings.vnext;
+            if (o.settings && o.settings.address && o.settings.port) {
+              return [o.settings.address + ':' + o.settings.port];
+            }
             break;
           case Protocols.HTTP:
           case Protocols.Mixed:

web/job/check_client_ip_job.go

@@ -12,10 +12,10 @@ import (
 	"sort"
 	"time"
 
-	"x-ui/database"
+	"github.com/mhsanaei/3x-ui/v2/database"
-	"x-ui/database/model"
+	"github.com/mhsanaei/3x-ui/v2/database/model"
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/xray"
+	"github.com/mhsanaei/3x-ui/v2/xray"
 )
 
 type CheckClientIpJob struct {

web/job/check_cpu_usage.go

@@ -4,7 +4,7 @@ import (
 	"strconv"
 	"time"
 
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
 
 	"github.com/shirou/gopsutil/v4/cpu"
 )

web/job/check_hash_storage.go

@@ -1,7 +1,7 @@
 package job
 
 import (
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
 )
 
 type CheckHashStorageJob struct {

web/job/check_xray_running_job.go

@@ -1,8 +1,8 @@
 package job
 
 import (
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
 )
 
 type CheckXrayRunningJob struct {

web/job/clear_logs_job.go

@@ -5,8 +5,8 @@ import (
 	"os"
 	"path/filepath"
 
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/xray"
+	"github.com/mhsanaei/3x-ui/v2/xray"
 )
 
 type ClearLogsJob struct{}

web/job/periodic_traffic_reset_job.go

@@ -0,0 +1,48 @@
+package job
+
+import (
+	"github.com/mhsanaei/3x-ui/v2/logger"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
+)
+
+type Period string
+
+type PeriodicTrafficResetJob struct {
+	inboundService service.InboundService
+	period         Period
+}
+
+func NewPeriodicTrafficResetJob(period Period) *PeriodicTrafficResetJob {
+	return &PeriodicTrafficResetJob{
+		period: period,
+	}
+}
+
+func (j *PeriodicTrafficResetJob) Run() {
+	inbounds, err := j.inboundService.GetInboundsByTrafficReset(string(j.period))
+	if err != nil {
+		logger.Warning("Failed to get inbounds for traffic reset:", err)
+		return
+	}
+
+	if len(inbounds) == 0 {
+		return
+	}
+	logger.Infof("Running periodic traffic reset job for period: %s (%d matching inbounds)", j.period, len(inbounds))
+
+	resetCount := 0
+
+	for _, inbound := range inbounds {
+		if err := j.inboundService.ResetAllClientTraffics(inbound.Id); err != nil {
+			logger.Warning("Failed to reset traffic for inbound", inbound.Id, ":", err)
+			continue
+		}
+
+		resetCount++
+		logger.Infof("Reset traffic for inbound %d (%s)", inbound.Id, inbound.Remark)
+	}
+
+	if resetCount > 0 {
+		logger.Infof("Periodic traffic reset completed: %d inbounds reset", resetCount)
+	}
+}

web/job/stats_notify_job.go

@@ -1,7 +1,7 @@
 package job
 
 import (
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
 )
 
 type LoginStatus byte

web/job/xray_traffic_job.go

@@ -2,9 +2,10 @@ package job
 
 import (
 	"encoding/json"
-	"x-ui/logger"
+
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/xray"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
+	"github.com/mhsanaei/3x-ui/v2/xray"
 
 	"github.com/valyala/fasthttp"
 )

web/locale/locale.go

@@ -3,9 +3,10 @@ package locale
 import (
 	"embed"
 	"io/fs"
+	"os"
 	"strings"
 
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
 
 	"github.com/gin-gonic/gin"
 	"github.com/nicksnyder/go-i18n/v2/i18n"
@@ -48,10 +49,10 @@ func InitLocalizer(i18nFS embed.FS, settingService SettingService) error {
 	return nil
 }
 
-func createTemplateData(params []string, seperator ...string) map[string]any {
+func createTemplateData(params []string, separator ...string) map[string]any {
 	var sep string = "=="
-	if len(seperator) > 0 {
+	if len(separator) > 0 {
-		sep = seperator[0]
+		sep = separator[0]
 	}
 
 	templateData := make(map[string]any)
@@ -78,6 +79,11 @@ func I18n(i18nType I18nType, key string, params ...string) string {
 
 	templateData := createTemplateData(params)
 
+	if localizer == nil {
+		// Fallback to key if localizer not ready; prevents nil panic on pages like sub
+		return key
+	}
+
 	msg, err := localizer.Localize(&i18n.LocalizeConfig{
 		MessageID:    key,
 		TemplateData: templateData,
@@ -102,6 +108,15 @@ func initTGBotLocalizer(settingService SettingService) error {
 
 func LocalizerMiddleware() gin.HandlerFunc {
 	return func(c *gin.Context) {
+		// Ensure bundle is initialized so creating a Localizer won't panic
+		if i18nBundle == nil {
+			i18nBundle = i18n.NewBundle(language.MustParse("en-US"))
+			i18nBundle.RegisterUnmarshalFunc("toml", toml.Unmarshal)
+			// Try lazy-load from disk when running sub server without InitLocalizer
+			if err := loadTranslationsFromDisk(i18nBundle); err != nil {
+				logger.Warning("i18n lazy load failed:", err)
+			}
+		}
 		var lang string
 
 		if cookie, err := c.Request.Cookie("lang"); err == nil {
@@ -118,6 +133,25 @@ func LocalizerMiddleware() gin.HandlerFunc {
 	}
 }
 
+// loadTranslationsFromDisk attempts to load translation files from "web/translation" using the local filesystem.
+func loadTranslationsFromDisk(bundle *i18n.Bundle) error {
+	root := os.DirFS("web")
+	return fs.WalkDir(root, "translation", func(path string, d fs.DirEntry, err error) error {
+		if err != nil {
+			return err
+		}
+		if d.IsDir() {
+			return nil
+		}
+		data, err := fs.ReadFile(root, path)
+		if err != nil {
+			return err
+		}
+		_, err = bundle.ParseMessageFileBytes(data, path)
+		return err
+	})
+}
+
 func parseTranslationFiles(i18nFS embed.FS, i18nBundle *i18n.Bundle) error {
 	err := fs.WalkDir(i18nFS, "translation",
 		func(path string, d fs.DirEntry, err error) error {

web/service/inbound.go

@@ -11,11 +11,11 @@ import (
 	"strings"
 	"time"
 
-	"x-ui/database"
+	"github.com/mhsanaei/3x-ui/v2/database"
-	"x-ui/database/model"
+	"github.com/mhsanaei/3x-ui/v2/database/model"
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/util/common"
+	"github.com/mhsanaei/3x-ui/v2/util/common"
-	"x-ui/xray"
+	"github.com/mhsanaei/3x-ui/v2/xray"
 
 	"gorm.io/gorm"
 )
@@ -44,6 +44,16 @@ func (s *InboundService) GetAllInbounds() ([]*model.Inbound, error) {
 	return inbounds, nil
 }
 
+func (s *InboundService) GetInboundsByTrafficReset(period string) ([]*model.Inbound, error) {
+	db := database.GetDB()
+	var inbounds []*model.Inbound
+	err := db.Model(model.Inbound{}).Where("traffic_reset = ?", period).Find(&inbounds).Error
+	if err != nil && err != gorm.ErrRecordNotFound {
+		return nil, err
+	}
+	return inbounds, nil
+}
+
 func (s *InboundService) checkPortExist(listen string, port int, ignoreId int) (bool, error) {
 	db := database.GetDB()
 	if listen == "" || listen == "0.0.0.0" || listen == "::" || listen == "::0" {
@@ -412,6 +422,7 @@ func (s *InboundService) UpdateInbound(inbound *model.Inbound) (*model.Inbound,
 	oldInbound.Remark = inbound.Remark
 	oldInbound.Enable = inbound.Enable
 	oldInbound.ExpiryTime = inbound.ExpiryTime
+	oldInbound.TrafficReset = inbound.TrafficReset
 	oldInbound.Listen = inbound.Listen
 	oldInbound.Port = inbound.Port
 	oldInbound.Protocol = inbound.Protocol
@@ -711,6 +722,7 @@ func (s *InboundService) DelInboundClient(inboundId int, clientId string) (bool,
 }
 
 func (s *InboundService) UpdateInboundClient(data *model.Inbound, clientId string) (bool, error) {
+	// TODO: check if TrafficReset field is updating
 	clients, err := s.GetClients(data)
 	if err != nil {
 		return false, err
@@ -1279,7 +1291,7 @@ func (s *InboundService) AddClientStat(tx *gorm.DB, inboundId int, client *model
 	clientTraffic.Email = client.Email
 	clientTraffic.Total = client.TotalGB
 	clientTraffic.ExpiryTime = client.ExpiryTime
-	clientTraffic.Enable = true
+	clientTraffic.Enable = client.Enable
 	clientTraffic.Up = 0
 	clientTraffic.Down = 0
 	clientTraffic.Reset = client.Reset
@@ -1292,7 +1304,7 @@ func (s *InboundService) UpdateClientStat(tx *gorm.DB, email string, client *mod
 	result := tx.Model(xray.ClientTraffic{}).
 		Where("email = ?", email).
 		Updates(map[string]any{
-			"enable":      true,
+			"enable":      client.Enable,
 			"email":       client.Email,
 			"total":       client.TotalGB,
 			"expiry_time": client.ExpiryTime,
@@ -1703,6 +1715,7 @@ func (s *InboundService) ResetClientTrafficLimitByEmail(clientEmail string, tota
 func (s *InboundService) ResetClientTrafficByEmail(clientEmail string) error {
 	db := database.GetDB()
 
+	// Reset traffic stats in ClientTraffic table
 	result := db.Model(xray.ClientTraffic{}).
 		Where("email = ?", clientEmail).
 		Updates(map[string]any{"enable": true, "up": 0, "down": 0})
@@ -1711,6 +1724,7 @@ func (s *InboundService) ResetClientTrafficByEmail(clientEmail string) error {
 	if err != nil {
 		return err
 	}
+
 	return nil
 }
 
@@ -1778,7 +1792,9 @@ func (s *InboundService) ResetClientTraffic(id int, clientEmail string) (bool, e
 
 func (s *InboundService) ResetAllClientTraffics(id int) error {
 	db := database.GetDB()
+	now := time.Now().Unix() * 1000
 
+	return db.Transaction(func(tx *gorm.DB) error {
 		whereText := "inbound_id "
 		if id == -1 {
 			whereText += " > ?"
@@ -1786,12 +1802,29 @@ func (s *InboundService) ResetAllClientTraffics(id int) error {
 			whereText += " = ?"
 		}
 
-	result := db.Model(xray.ClientTraffic{}).
+		// Reset client traffics
+		result := tx.Model(xray.ClientTraffic{}).
 			Where(whereText, id).
 			Updates(map[string]any{"enable": true, "up": 0, "down": 0})
 
-	err := result.Error
+		if result.Error != nil {
-	return err
+			return result.Error
+		}
+
+		// Update lastTrafficResetTime for the inbound(s)
+		inboundWhereText := "id "
+		if id == -1 {
+			inboundWhereText += " > ?"
+		} else {
+			inboundWhereText += " = ?"
+		}
+
+		result = tx.Model(model.Inbound{}).
+			Where(inboundWhereText, id).
+			Update("last_traffic_reset_time", now)
+
+		return result.Error
+	})
 }
 
 func (s *InboundService) ResetAllTraffics() error {
@@ -1823,8 +1856,14 @@ func (s *InboundService) DelDepletedClients(id int) (err error) {
 		whereText += "= ?"
 	}
 
+	// Only consider truly depleted clients: expired OR traffic exhausted
+	now := time.Now().Unix() * 1000
 	depletedClients := []xray.ClientTraffic{}
-	err = db.Model(xray.ClientTraffic{}).Where(whereText+" and enable = ?", id, false).Select("inbound_id, GROUP_CONCAT(email) as email").Group("inbound_id").Find(&depletedClients).Error
+	err = db.Model(xray.ClientTraffic{}).
+		Where(whereText+" and ((total > 0 and up + down >= total) or (expiry_time > 0 and expiry_time <= ?))", id, now).
+		Select("inbound_id, GROUP_CONCAT(email) as email").
+		Group("inbound_id").
+		Find(&depletedClients).Error
 	if err != nil {
 		return err
 	}
@@ -1875,7 +1914,8 @@ func (s *InboundService) DelDepletedClients(id int) (err error) {
 		}
 	}
 
-	err = tx.Where(whereText+" and enable = ?", id, false).Delete(xray.ClientTraffic{}).Error
+	// Delete stats only for truly depleted clients
+	err = tx.Where(whereText+" and ((total > 0 and up + down >= total) or (expiry_time > 0 and expiry_time <= ?))", id, now).Delete(xray.ClientTraffic{}).Error
 	if err != nil {
 		return err
 	}
@@ -1923,18 +1963,17 @@ func (s *InboundService) GetClientTrafficTgBot(tgId int64) ([]*xray.ClientTraffi
 }
 
 func (s *InboundService) GetClientTrafficByEmail(email string) (traffic *xray.ClientTraffic, err error) {
-	db := database.GetDB()
+	// Prefer retrieving along with client to reflect actual enabled state from inbound settings
-	var traffics []*xray.ClientTraffic
+	t, client, err := s.GetClientByEmail(email)
-
-	err = db.Model(xray.ClientTraffic{}).Where("email = ?", email).Find(&traffics).Error
 	if err != nil {
 		logger.Warningf("Error retrieving ClientTraffic with email %s: %v", email, err)
 		return nil, err
 	}
-	if len(traffics) > 0 {
+	if t != nil && client != nil {
-		return traffics[0], nil
+		t.Enable = client.Enable
+		t.SubId = client.SubID
+		return t, nil
 	}
-
 	return nil, nil
 }
 
@@ -1969,6 +2008,13 @@ func (s *InboundService) GetClientTrafficByID(id string) ([]xray.ClientTraffic,
 		logger.Debug(err)
 		return nil, err
 	}
+	// Reconcile enable flag with client settings per email to avoid stale DB value
+	for i := range traffics {
+		if ct, client, e := s.GetClientByEmail(traffics[i].Email); e == nil && ct != nil && client != nil {
+			traffics[i].Enable = client.Enable
+			traffics[i].SubId = client.SubID
+		}
+	}
 	return traffics, err
 }
 

web/service/outbound.go

@@ -1,10 +1,10 @@
 package service
 
 import (
-	"x-ui/database"
+	"github.com/mhsanaei/3x-ui/v2/database"
-	"x-ui/database/model"
+	"github.com/mhsanaei/3x-ui/v2/database/model"
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/xray"
+	"github.com/mhsanaei/3x-ui/v2/xray"
 
 	"gorm.io/gorm"
 )

web/service/panel.go

@@ -5,7 +5,7 @@ import (
 	"syscall"
 	"time"
 
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
 )
 
 type PanelService struct{}

web/service/server.go

@@ -16,14 +16,15 @@ import (
 	"runtime"
 	"strconv"
 	"strings"
+	"sync"
 	"time"
 
-	"x-ui/config"
+	"github.com/mhsanaei/3x-ui/v2/config"
-	"x-ui/database"
+	"github.com/mhsanaei/3x-ui/v2/database"
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/util/common"
+	"github.com/mhsanaei/3x-ui/v2/util/common"
-	"x-ui/util/sys"
+	"github.com/mhsanaei/3x-ui/v2/util/sys"
-	"x-ui/xray"
+	"github.com/mhsanaei/3x-ui/v2/xray"
 
 	"github.com/google/uuid"
 	"github.com/shirou/gopsutil/v4/cpu"
@@ -98,6 +99,89 @@ type ServerService struct {
 	cachedIPv4         string
 	cachedIPv6         string
 	noIPv6             bool
+	mu                 sync.Mutex
+	lastCPUTimes       cpu.TimesStat
+	hasLastCPUSample   bool
+	emaCPU             float64
+	cpuHistory         []CPUSample
+	cachedCpuSpeedMhz  float64
+	lastCpuInfoAttempt time.Time
+}
+
+// AggregateCpuHistory returns up to maxPoints averaged buckets of size bucketSeconds over recent data.
+func (s *ServerService) AggregateCpuHistory(bucketSeconds int, maxPoints int) []map[string]any {
+	if bucketSeconds <= 0 || maxPoints <= 0 {
+		return nil
+	}
+	cutoff := time.Now().Add(-time.Duration(bucketSeconds*maxPoints) * time.Second).Unix()
+	s.mu.Lock()
+	// find start index (history sorted ascending)
+	hist := s.cpuHistory
+	// binary-ish scan (simple linear from end since size capped ~10800 is fine)
+	startIdx := 0
+	for i := len(hist) - 1; i >= 0; i-- {
+		if hist[i].T < cutoff {
+			startIdx = i + 1
+			break
+		}
+	}
+	if startIdx >= len(hist) {
+		s.mu.Unlock()
+		return []map[string]any{}
+	}
+	slice := hist[startIdx:]
+	// copy for unlock
+	tmp := make([]CPUSample, len(slice))
+	copy(tmp, slice)
+	s.mu.Unlock()
+	if len(tmp) == 0 {
+		return []map[string]any{}
+	}
+	var out []map[string]any
+	var acc []float64
+	bSize := int64(bucketSeconds)
+	curBucket := (tmp[0].T / bSize) * bSize
+	flush := func(ts int64) {
+		if len(acc) == 0 {
+			return
+		}
+		sum := 0.0
+		for _, v := range acc {
+			sum += v
+		}
+		avg := sum / float64(len(acc))
+		out = append(out, map[string]any{"t": ts, "cpu": avg})
+		acc = acc[:0]
+	}
+	for _, p := range tmp {
+		b := (p.T / bSize) * bSize
+		if b != curBucket {
+			flush(curBucket)
+			curBucket = b
+		}
+		acc = append(acc, p.Cpu)
+	}
+	flush(curBucket)
+	if len(out) > maxPoints {
+		out = out[len(out)-maxPoints:]
+	}
+	return out
+}
+
+// CPUSample single CPU utilization sample
+type CPUSample struct {
+	T   int64   `json:"t"`   // unix seconds
+	Cpu float64 `json:"cpu"` // percent 0..100
+}
+
+type LogEntry struct {
+	DateTime    time.Time
+	FromAddress string
+	ToAddress   string
+	Inbound     string
+	Outbound    string
+	Email       string
+	Event       int
 }
 
 func getPublicIP(url string) string {
@@ -139,11 +223,11 @@ func (s *ServerService) GetStatus(lastStatus *Status) *Status {
 	}
 
 	// CPU stats
-	percents, err := cpu.Percent(0, false)
+	util, err := s.sampleCPUUtilization()
 	if err != nil {
 		logger.Warning("get cpu percent failed:", err)
 	} else {
-		status.Cpu = percents[0]
+		status.Cpu = util
 	}
 
 	status.CpuCores, err = cpu.Counts(false)
@@ -153,14 +237,31 @@ func (s *ServerService) GetStatus(lastStatus *Status) *Status {
 
 	status.LogicalPro = runtime.NumCPU()
 
+	if status.CpuSpeedMhz = s.cachedCpuSpeedMhz; s.cachedCpuSpeedMhz == 0 && time.Since(s.lastCpuInfoAttempt) > 5*time.Minute {
+		s.lastCpuInfoAttempt = time.Now()
+		done := make(chan struct{})
+		go func() {
+			defer close(done)
 			cpuInfos, err := cpu.Info()
 			if err != nil {
 				logger.Warning("get cpu info failed:", err)
-	} else if len(cpuInfos) > 0 {
+				return
-		status.CpuSpeedMhz = cpuInfos[0].Mhz
+			}
+			if len(cpuInfos) > 0 {
+				s.cachedCpuSpeedMhz = cpuInfos[0].Mhz
+				status.CpuSpeedMhz = s.cachedCpuSpeedMhz
 			} else {
 				logger.Warning("could not find cpu info")
 			}
+		}()
+		select {
+		case <-done:
+		case <-time.After(1500 * time.Millisecond):
+			logger.Warning("cpu info query timed out; will retry later")
+		}
+	} else if s.cachedCpuSpeedMhz != 0 {
+		status.CpuSpeedMhz = s.cachedCpuSpeedMhz
+	}
 
 	// Uptime
 	upTime, err := host.Uptime()
@@ -307,6 +408,103 @@ func (s *ServerService) GetStatus(lastStatus *Status) *Status {
 	return status
 }
 
+func (s *ServerService) AppendCpuSample(t time.Time, v float64) {
+	const capacity = 9000 // ~5 hours @ 2s interval
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	p := CPUSample{T: t.Unix(), Cpu: v}
+	if n := len(s.cpuHistory); n > 0 && s.cpuHistory[n-1].T == p.T {
+		s.cpuHistory[n-1] = p
+	} else {
+		s.cpuHistory = append(s.cpuHistory, p)
+	}
+	if len(s.cpuHistory) > capacity {
+		s.cpuHistory = s.cpuHistory[len(s.cpuHistory)-capacity:]
+	}
+}
+
+func (s *ServerService) sampleCPUUtilization() (float64, error) {
+	// Prefer native Windows API to avoid external deps for CPU percent
+	if runtime.GOOS == "windows" {
+		if pct, err := sys.CPUPercentRaw(); err == nil {
+			s.mu.Lock()
+			// Smooth with EMA
+			const alpha = 0.3
+			if s.emaCPU == 0 {
+				s.emaCPU = pct
+			} else {
+				s.emaCPU = alpha*pct + (1-alpha)*s.emaCPU
+			}
+			val := s.emaCPU
+			s.mu.Unlock()
+			return val, nil
+		}
+		// If native call fails, fall back to gopsutil times
+	}
+	// Read aggregate CPU times (all CPUs combined)
+	times, err := cpu.Times(false)
+	if err != nil {
+		return 0, err
+	}
+	if len(times) == 0 {
+		return 0, fmt.Errorf("no cpu times available")
+	}
+
+	cur := times[0]
+
+	s.mu.Lock()
+	defer s.mu.Unlock()
+
+	// If this is the first sample, initialize and return current EMA (0 by default)
+	if !s.hasLastCPUSample {
+		s.lastCPUTimes = cur
+		s.hasLastCPUSample = true
+		return s.emaCPU, nil
+	}
+
+	// Compute busy and total deltas
+	idleDelta := cur.Idle - s.lastCPUTimes.Idle
+	// Sum of busy deltas (exclude Idle)
+	busyDelta := (cur.User - s.lastCPUTimes.User) +
+		(cur.System - s.lastCPUTimes.System) +
+		(cur.Nice - s.lastCPUTimes.Nice) +
+		(cur.Iowait - s.lastCPUTimes.Iowait) +
+		(cur.Irq - s.lastCPUTimes.Irq) +
+		(cur.Softirq - s.lastCPUTimes.Softirq) +
+		(cur.Steal - s.lastCPUTimes.Steal) +
+		(cur.Guest - s.lastCPUTimes.Guest) +
+		(cur.GuestNice - s.lastCPUTimes.GuestNice)
+
+	totalDelta := busyDelta + idleDelta
+
+	// Update last sample for next time
+	s.lastCPUTimes = cur
+
+	// Guard against division by zero or negative deltas (e.g., counter resets)
+	if totalDelta <= 0 {
+		return s.emaCPU, nil
+	}
+
+	raw := 100.0 * (busyDelta / totalDelta)
+	if raw < 0 {
+		raw = 0
+	}
+	if raw > 100 {
+		raw = 100
+	}
+
+	// Exponential moving average to smooth spikes
+	const alpha = 0.3 // smoothing factor (0<alpha<=1). Higher = more responsive, lower = smoother
+	if s.emaCPU == 0 {
+		// Initialize EMA with the first real reading to avoid long warm-up from zero
+		s.emaCPU = raw
+	} else {
+		s.emaCPU = alpha*raw + (1-alpha)*s.emaCPU
+	}
+
+	return s.emaCPU, nil
+}
+
 func (s *ServerService) GetXrayVersions() ([]string, error) {
 	const (
 		XrayURL    = "https://api.github.com/repos/XTLS/Xray-core/releases"
@@ -516,19 +714,25 @@ func (s *ServerService) GetXrayLogs(
 	showBlocked string,
 	showProxy string,
 	freedoms []string,
-	blackholes []string) []string {
+	blackholes []string) []LogEntry {
+
+	const (
+		Direct = iota
+		Blocked
+		Proxied
+	)
 
 	countInt, _ := strconv.Atoi(count)
-	var lines []string
+	var entries []LogEntry
 
 	pathToAccessLog, err := xray.GetAccessLogPath()
 	if err != nil {
-		return lines
+		return nil
 	}
 
 	file, err := os.Open(pathToAccessLog)
 	if err != nil {
-		return lines
+		return nil
 	}
 	defer file.Close()
 
@@ -547,37 +751,62 @@ func (s *ServerService) GetXrayLogs(
 			continue
 		}
 
-		//adding suffixes to further distinguish entries by outbound
+		var entry LogEntry
-		if hasSuffix(line, freedoms) {
+		parts := strings.Fields(line)
+
+		for i, part := range parts {
+
+			if i == 0 {
+				dateTime, err := time.Parse("2006/01/02 15:04:05.999999", parts[0]+" "+parts[1])
+				if err != nil {
+					continue
+				}
+				entry.DateTime = dateTime
+			}
+
+			if part == "from" {
+				entry.FromAddress = parts[i+1]
+			} else if part == "accepted" {
+				entry.ToAddress = parts[i+1]
+			} else if strings.HasPrefix(part, "[") {
+				entry.Inbound = part[1:]
+			} else if strings.HasSuffix(part, "]") {
+				entry.Outbound = part[:len(part)-1]
+			} else if part == "email:" {
+				entry.Email = parts[i+1]
+			}
+		}
+
+		if logEntryContains(line, freedoms) {
 			if showDirect == "false" {
 				continue
 			}
-			line = line + " f"
+			entry.Event = Direct
-		} else if hasSuffix(line, blackholes) {
+		} else if logEntryContains(line, blackholes) {
 			if showBlocked == "false" {
 				continue
 			}
-			line = line + " b"
+			entry.Event = Blocked
 		} else {
 			if showProxy == "false" {
 				continue
 			}
-			line = line + " p"
+			entry.Event = Proxied
 		}
 
-		lines = append(lines, line)
+		entries = append(entries, entry)
 	}
 
-	if len(lines) > countInt {
+	if len(entries) > countInt {
-		lines = lines[len(lines)-countInt:]
+		entries = entries[len(entries)-countInt:]
 	}
 
-	return lines
+	return entries
 }
 
-func hasSuffix(line string, suffixes []string) bool {
+func logEntryContains(line string, suffixes []string) bool {
 	for _, sfx := range suffixes {
-		if strings.HasSuffix(line, sfx+"]") {
+		if strings.Contains(line, sfx+"]") {
 			return true
 		}
 	}

web/service/setting.go

@@ -10,14 +10,14 @@ import (
 	"strings"
 	"time"
 
-	"x-ui/database"
+	"github.com/mhsanaei/3x-ui/v2/database"
-	"x-ui/database/model"
+	"github.com/mhsanaei/3x-ui/v2/database/model"
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/util/common"
+	"github.com/mhsanaei/3x-ui/v2/util/common"
-	"x-ui/util/random"
+	"github.com/mhsanaei/3x-ui/v2/util/random"
-	"x-ui/util/reflect_util"
+	"github.com/mhsanaei/3x-ui/v2/util/reflect_util"
-	"x-ui/web/entity"
+	"github.com/mhsanaei/3x-ui/v2/web/entity"
-	"x-ui/xray"
+	"github.com/mhsanaei/3x-ui/v2/xray"
 )
 
 //go:embed config.json
@@ -50,7 +50,8 @@ var defaultValueMap = map[string]string{
 	"tgLang":                      "en-US",
 	"twoFactorEnable":             "false",
 	"twoFactorToken":              "",
-	"subEnable":                   "false",
+	"subEnable":                   "true",
+	"subJsonEnable":               "false",
 	"subTitle":                    "",
 	"subListen":                   "",
 	"subPort":                     "2096",
@@ -442,6 +443,10 @@ func (s *SettingService) GetSubEnable() (bool, error) {
 	return s.getBool("subEnable")
 }
 
+func (s *SettingService) GetSubJsonEnable() (bool, error) {
+	return s.getBool("subJsonEnable")
+}
+
 func (s *SettingService) GetSubTitle() (string, error) {
 	return s.getString("subTitle")
 }
@@ -590,6 +595,7 @@ func (s *SettingService) GetDefaultSettings(host string) (any, error) {
 		"defaultKey":    func() (any, error) { return s.GetKeyFile() },
 		"tgBotEnable":   func() (any, error) { return s.GetTgbotEnabled() },
 		"subEnable":     func() (any, error) { return s.GetSubEnable() },
+		"subJsonEnable": func() (any, error) { return s.GetSubJsonEnable() },
 		"subTitle":      func() (any, error) { return s.GetSubTitle() },
 		"subURI":        func() (any, error) { return s.GetSubURI() },
 		"subJsonURI":    func() (any, error) { return s.GetSubJsonURI() },
@@ -608,7 +614,14 @@ func (s *SettingService) GetDefaultSettings(host string) (any, error) {
 		result[key] = value
 	}
 
-	if result["subEnable"].(bool) && (result["subURI"].(string) == "" || result["subJsonURI"].(string) == "") {
+	subEnable := result["subEnable"].(bool)
+	subJsonEnable := false
+	if v, ok := result["subJsonEnable"]; ok {
+		if b, ok2 := v.(bool); ok2 {
+			subJsonEnable = b
+		}
+	}
+	if (subEnable && result["subURI"].(string) == "") || (subJsonEnable && result["subJsonURI"].(string) == "") {
 		subURI := ""
 		subTitle, _ := s.GetSubTitle()
 		subPort, _ := s.GetSubPort()
@@ -634,13 +647,13 @@ func (s *SettingService) GetDefaultSettings(host string) (any, error) {
 		} else {
 			subURI += fmt.Sprintf("%s:%d", subDomain, subPort)
 		}
-		if result["subURI"].(string) == "" {
+		if subEnable && result["subURI"].(string) == "" {
 			result["subURI"] = subURI + subPath
 		}
 		if result["subTitle"].(string) == "" {
 			result["subTitle"] = subTitle
 		}
-		if result["subJsonURI"].(string) == "" {
+		if subJsonEnable && result["subJsonURI"].(string) == "" {
 			result["subJsonURI"] = subURI + subJsonPath
 		}
 	}

web/service/tgbot.go

@@ -7,8 +7,10 @@ import (
 	"encoding/base64"
 	"errors"
 	"fmt"
+	"io"
 	"math/big"
 	"net"
+	"net/http"
 	"net/url"
 	"os"
 	"regexp"
@@ -16,19 +18,20 @@ import (
 	"strings"
 	"time"
 
-	"x-ui/config"
+	"github.com/mhsanaei/3x-ui/v2/config"
-	"x-ui/database"
+	"github.com/mhsanaei/3x-ui/v2/database"
-	"x-ui/database/model"
+	"github.com/mhsanaei/3x-ui/v2/database/model"
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/util/common"
+	"github.com/mhsanaei/3x-ui/v2/util/common"
-	"x-ui/web/global"
+	"github.com/mhsanaei/3x-ui/v2/web/global"
-	"x-ui/web/locale"
+	"github.com/mhsanaei/3x-ui/v2/web/locale"
-	"x-ui/xray"
+	"github.com/mhsanaei/3x-ui/v2/xray"
 
 	"github.com/google/uuid"
 	"github.com/mymmrac/telego"
 	th "github.com/mymmrac/telego/telegohandler"
 	tu "github.com/mymmrac/telego/telegoutil"
+	"github.com/skip2/go-qrcode"
 	"github.com/valyala/fasthttp"
 	"github.com/valyala/fasthttp/fasthttpproxy"
 )
@@ -545,6 +548,57 @@ func (t *Tgbot) answerCallback(callbackQuery *telego.CallbackQuery, isAdmin bool
 		if len(dataArray) >= 2 && len(dataArray[1]) > 0 {
 			email := dataArray[1]
 			switch dataArray[0] {
+			case "get_clients_for_sub":
+				inboundId := dataArray[1]
+				inboundIdInt, err := strconv.Atoi(inboundId)
+				if err != nil {
+					t.sendCallbackAnswerTgBot(callbackQuery.ID, err.Error())
+					return
+				}
+				clientsKB, err := t.getInboundClientsFor(inboundIdInt, "client_sub_links")
+				if err != nil {
+					t.sendCallbackAnswerTgBot(callbackQuery.ID, err.Error())
+					return
+				}
+				inbound, _ := t.inboundService.GetInbound(inboundIdInt)
+				t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.chooseClient", "Inbound=="+inbound.Remark), clientsKB)
+			case "get_clients_for_individual":
+				inboundId := dataArray[1]
+				inboundIdInt, err := strconv.Atoi(inboundId)
+				if err != nil {
+					t.sendCallbackAnswerTgBot(callbackQuery.ID, err.Error())
+					return
+				}
+				clientsKB, err := t.getInboundClientsFor(inboundIdInt, "client_individual_links")
+				if err != nil {
+					t.sendCallbackAnswerTgBot(callbackQuery.ID, err.Error())
+					return
+				}
+				inbound, _ := t.inboundService.GetInbound(inboundIdInt)
+				t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.chooseClient", "Inbound=="+inbound.Remark), clientsKB)
+			case "get_clients_for_qr":
+				inboundId := dataArray[1]
+				inboundIdInt, err := strconv.Atoi(inboundId)
+				if err != nil {
+					t.sendCallbackAnswerTgBot(callbackQuery.ID, err.Error())
+					return
+				}
+				clientsKB, err := t.getInboundClientsFor(inboundIdInt, "client_qr_links")
+				if err != nil {
+					t.sendCallbackAnswerTgBot(callbackQuery.ID, err.Error())
+					return
+				}
+				inbound, _ := t.inboundService.GetInbound(inboundIdInt)
+				t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.chooseClient", "Inbound=="+inbound.Remark), clientsKB)
+			case "client_sub_links":
+				t.sendClientSubLinks(chatId, email)
+				return
+			case "client_individual_links":
+				t.sendClientIndividualLinks(chatId, email)
+				return
+			case "client_qr_links":
+				t.sendClientQRLinks(chatId, email)
+				return
 			case "client_get_usage":
 				t.sendCallbackAnswerTgBot(callbackQuery.ID, t.I18nBot("tgbot.messages.email", "Email=="+email))
 				t.searchClient(chatId, email)
@@ -802,7 +856,7 @@ func (t *Tgbot) answerCallback(callbackQuery *telego.CallbackQuery, isAdmin bool
 				if len(dataArray) == 3 {
 					days, err := strconv.Atoi(dataArray[2])
 					if err == nil {
-						var date int64 = 0
+						var date int64
 						if days > 0 {
 							traffic, err := t.inboundService.GetClientTrafficByEmail(email)
 							if err != nil {
@@ -906,7 +960,7 @@ func (t *Tgbot) answerCallback(callbackQuery *telego.CallbackQuery, isAdmin bool
 			case "add_client_reset_exp_c":
 				client_ExpiryTime = 0
 				days, _ := strconv.Atoi(dataArray[1])
-				var date int64 = 0
+				var date int64
 				if client_ExpiryTime > 0 {
 					if client_ExpiryTime-time.Now().Unix()*1000 < 0 {
 						date = -int64(days * 24 * 60 * 60000)
@@ -1324,6 +1378,27 @@ func (t *Tgbot) answerCallback(callbackQuery *telego.CallbackQuery, isAdmin bool
 				}
 				t.sendCallbackAnswerTgBot(callbackQuery.ID, t.I18nBot("tgbot.buttons.allClients"))
 				t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.chooseInbound"), inbounds)
+			case "admin_client_sub_links":
+				inbounds, err := t.getInboundsFor("get_clients_for_sub")
+				if err != nil {
+					t.sendCallbackAnswerTgBot(callbackQuery.ID, err.Error())
+					return
+				}
+				t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.chooseInbound"), inbounds)
+			case "admin_client_individual_links":
+				inbounds, err := t.getInboundsFor("get_clients_for_individual")
+				if err != nil {
+					t.sendCallbackAnswerTgBot(callbackQuery.ID, err.Error())
+					return
+				}
+				t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.chooseInbound"), inbounds)
+			case "admin_client_qr_links":
+				inbounds, err := t.getInboundsFor("get_clients_for_qr")
+				if err != nil {
+					t.sendCallbackAnswerTgBot(callbackQuery.ID, err.Error())
+					return
+				}
+				t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.chooseInbound"), inbounds)
 			}
 
 		}
@@ -1355,6 +1430,73 @@ func (t *Tgbot) answerCallback(callbackQuery *telego.CallbackQuery, isAdmin bool
 	case "client_commands":
 		t.sendCallbackAnswerTgBot(callbackQuery.ID, t.I18nBot("tgbot.buttons.commands"))
 		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.commands.helpClientCommands"))
+	case "client_sub_links":
+		// show user's own clients to choose one for sub links
+		tgUserID := callbackQuery.From.ID
+		traffics, err := t.inboundService.GetClientTrafficTgBot(tgUserID)
+		if err != nil {
+			// fallback to message
+			t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.errorOperation")+"\r\n"+err.Error())
+			return
+		}
+		if len(traffics) == 0 {
+			t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.askToAddUserId", "TgUserID=="+strconv.FormatInt(tgUserID, 10)))
+			return
+		}
+		var buttons []telego.InlineKeyboardButton
+		for _, tr := range traffics {
+			buttons = append(buttons, tu.InlineKeyboardButton(tr.Email).WithCallbackData(t.encodeQuery("client_sub_links "+tr.Email)))
+		}
+		cols := 1
+		if len(buttons) >= 6 {
+			cols = 2
+		}
+		keyboard := tu.InlineKeyboardGrid(tu.InlineKeyboardCols(cols, buttons...))
+		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.commands.pleaseChoose"), keyboard)
+	case "client_individual_links":
+		// show user's clients to choose for individual links
+		tgUserID := callbackQuery.From.ID
+		traffics, err := t.inboundService.GetClientTrafficTgBot(tgUserID)
+		if err != nil {
+			t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.errorOperation")+"\r\n"+err.Error())
+			return
+		}
+		if len(traffics) == 0 {
+			t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.askToAddUserId", "TgUserID=="+strconv.FormatInt(tgUserID, 10)))
+			return
+		}
+		var buttons2 []telego.InlineKeyboardButton
+		for _, tr := range traffics {
+			buttons2 = append(buttons2, tu.InlineKeyboardButton(tr.Email).WithCallbackData(t.encodeQuery("client_individual_links "+tr.Email)))
+		}
+		cols2 := 1
+		if len(buttons2) >= 6 {
+			cols2 = 2
+		}
+		keyboard2 := tu.InlineKeyboardGrid(tu.InlineKeyboardCols(cols2, buttons2...))
+		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.commands.pleaseChoose"), keyboard2)
+	case "client_qr_links":
+		// show user's clients to choose for QR codes
+		tgUserID := callbackQuery.From.ID
+		traffics, err := t.inboundService.GetClientTrafficTgBot(tgUserID)
+		if err != nil {
+			t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.errorOccurred")+"\r\n"+err.Error())
+			return
+		}
+		if len(traffics) == 0 {
+			t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.askToAddUserId", "TgUserID=="+strconv.FormatInt(tgUserID, 10)))
+			return
+		}
+		var buttons3 []telego.InlineKeyboardButton
+		for _, tr := range traffics {
+			buttons3 = append(buttons3, tu.InlineKeyboardButton(tr.Email).WithCallbackData(t.encodeQuery("client_qr_links "+tr.Email)))
+		}
+		cols3 := 1
+		if len(buttons3) >= 6 {
+			cols3 = 2
+		}
+		keyboard3 := tu.InlineKeyboardGrid(tu.InlineKeyboardCols(cols3, buttons3...))
+		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.commands.pleaseChoose"), keyboard3)
 	case "onlines":
 		t.sendCallbackAnswerTgBot(callbackQuery.ID, t.I18nBot("tgbot.buttons.onlines"))
 		t.onlineClients(chatId)
@@ -1654,6 +1796,22 @@ func (t *Tgbot) answerCallback(callbackQuery *telego.CallbackQuery, isAdmin bool
 			t.SendMsgToTgbot(chatId, msg, tu.ReplyKeyboardRemove())
 
 		}
+	default:
+		if after, ok := strings.CutPrefix(callbackQuery.Data, "client_sub_links "); ok {
+			email := after
+			t.sendClientSubLinks(chatId, email)
+			return
+		}
+		if after, ok := strings.CutPrefix(callbackQuery.Data, "client_individual_links "); ok {
+			email := after
+			t.sendClientIndividualLinks(chatId, email)
+			return
+		}
+		if after, ok := strings.CutPrefix(callbackQuery.Data, "client_qr_links "); ok {
+			email := after
+			t.sendClientQRLinks(chatId, email)
+			return
+		}
 	}
 }
 
@@ -1840,6 +1998,11 @@ func (t *Tgbot) SendAnswer(chatId int64, msg string, isAdmin bool) {
 			tu.InlineKeyboardButton(t.I18nBot("tgbot.buttons.allClients")).WithCallbackData(t.encodeQuery("get_inbounds")),
 			tu.InlineKeyboardButton(t.I18nBot("tgbot.buttons.addClient")).WithCallbackData(t.encodeQuery("add_client")),
 		),
+		tu.InlineKeyboardRow(
+			tu.InlineKeyboardButton(t.I18nBot("pages.settings.subSettings")).WithCallbackData(t.encodeQuery("admin_client_sub_links")),
+			tu.InlineKeyboardButton(t.I18nBot("subscription.individualLinks")).WithCallbackData(t.encodeQuery("admin_client_individual_links")),
+			tu.InlineKeyboardButton(t.I18nBot("qrCode")).WithCallbackData(t.encodeQuery("admin_client_qr_links")),
+		),
 		// TODOOOOOOOOOOOOOO: Add restart button here.
 	)
 	numericKeyboardClient := tu.InlineKeyboard(
@@ -1847,6 +2010,13 @@ func (t *Tgbot) SendAnswer(chatId int64, msg string, isAdmin bool) {
 			tu.InlineKeyboardButton(t.I18nBot("tgbot.buttons.clientUsage")).WithCallbackData(t.encodeQuery("client_traffic")),
 			tu.InlineKeyboardButton(t.I18nBot("tgbot.buttons.commands")).WithCallbackData(t.encodeQuery("client_commands")),
 		),
+		tu.InlineKeyboardRow(
+			tu.InlineKeyboardButton(t.I18nBot("pages.settings.subSettings")).WithCallbackData(t.encodeQuery("client_sub_links")),
+			tu.InlineKeyboardButton(t.I18nBot("subscription.individualLinks")).WithCallbackData(t.encodeQuery("client_individual_links")),
+		),
+		tu.InlineKeyboardRow(
+			tu.InlineKeyboardButton(t.I18nBot("qrCode")).WithCallbackData(t.encodeQuery("client_qr_links")),
+		),
 	)
 
 	var ReplyMarkup telego.ReplyMarkup
@@ -1908,6 +2078,266 @@ func (t *Tgbot) SendMsgToTgbot(chatId int64, msg string, replyMarkup ...telego.R
 	}
 }
 
+// buildSubscriptionURLs builds the HTML sub page URL and JSON subscription URL for a client email
+func (t *Tgbot) buildSubscriptionURLs(email string) (string, string, error) {
+	// Resolve subId from client email
+	traffic, client, err := t.inboundService.GetClientByEmail(email)
+	_ = traffic
+	if err != nil || client == nil {
+		return "", "", errors.New("client not found")
+	}
+
+	// Gather settings to construct absolute URLs
+	subDomain, _ := t.settingService.GetSubDomain()
+	subPort, _ := t.settingService.GetSubPort()
+	subPath, _ := t.settingService.GetSubPath()
+	subJsonPath, _ := t.settingService.GetSubJsonPath()
+	subJsonEnable, _ := t.settingService.GetSubJsonEnable()
+	subKeyFile, _ := t.settingService.GetSubKeyFile()
+	subCertFile, _ := t.settingService.GetSubCertFile()
+
+	tls := (subKeyFile != "" && subCertFile != "")
+	scheme := "http"
+	if tls {
+		scheme = "https"
+	}
+
+	// Fallbacks
+	if subDomain == "" {
+		// try panel domain, otherwise OS hostname
+		if d, err := t.settingService.GetWebDomain(); err == nil && d != "" {
+			subDomain = d
+		} else if hostname != "" {
+			subDomain = hostname
+		} else {
+			subDomain = "localhost"
+		}
+	}
+
+	host := subDomain
+	if (subPort == 443 && tls) || (subPort == 80 && !tls) {
+		// standard ports: no port in host
+	} else {
+		host = fmt.Sprintf("%s:%d", subDomain, subPort)
+	}
+
+	// Ensure paths
+	if !strings.HasPrefix(subPath, "/") {
+		subPath = "/" + subPath
+	}
+	if !strings.HasSuffix(subPath, "/") {
+		subPath = subPath + "/"
+	}
+	if !strings.HasPrefix(subJsonPath, "/") {
+		subJsonPath = "/" + subJsonPath
+	}
+	if !strings.HasSuffix(subJsonPath, "/") {
+		subJsonPath = subJsonPath + "/"
+	}
+
+	subURL := fmt.Sprintf("%s://%s%s%s", scheme, host, subPath, client.SubID)
+	subJsonURL := fmt.Sprintf("%s://%s%s%s", scheme, host, subJsonPath, client.SubID)
+	if !subJsonEnable {
+		subJsonURL = ""
+	}
+	return subURL, subJsonURL, nil
+}
+
+func (t *Tgbot) sendClientSubLinks(chatId int64, email string) {
+	subURL, subJsonURL, err := t.buildSubscriptionURLs(email)
+	if err != nil {
+		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.errorOperation")+"\r\n"+err.Error())
+		return
+	}
+	msg := "Subscription URL:\r\n<code>" + subURL + "</code>"
+	if subJsonURL != "" {
+		msg += "\r\n\r\nJSON URL:\r\n<code>" + subJsonURL + "</code>"
+	}
+	inlineKeyboard := tu.InlineKeyboard(
+		tu.InlineKeyboardRow(
+			tu.InlineKeyboardButton(t.I18nBot("subscription.individualLinks")).WithCallbackData(t.encodeQuery("client_individual_links "+email)),
+		),
+		tu.InlineKeyboardRow(
+			tu.InlineKeyboardButton(t.I18nBot("qrCode")).WithCallbackData(t.encodeQuery("client_qr_links "+email)),
+		),
+	)
+	t.SendMsgToTgbot(chatId, msg, inlineKeyboard)
+}
+
+// sendClientIndividualLinks fetches the subscription content (individual links) and sends it to the user
+func (t *Tgbot) sendClientIndividualLinks(chatId int64, email string) {
+	// Build the HTML sub page URL; we'll call it with header Accept to get raw content
+	subURL, _, err := t.buildSubscriptionURLs(email)
+	if err != nil {
+		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.errorOperation")+"\r\n"+err.Error())
+		return
+	}
+
+	// Try to fetch raw subscription links. Prefer plain text response.
+	req, err := http.NewRequest("GET", subURL, nil)
+	if err != nil {
+		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.errorOperation")+"\r\n"+err.Error())
+		return
+	}
+	// Force plain text to avoid HTML page; controller respects Accept header
+	req.Header.Set("Accept", "text/plain, */*;q=0.1")
+
+	// Use default client with reasonable timeout via context
+	ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+	defer cancel()
+	req = req.WithContext(ctx)
+
+	resp, err := http.DefaultClient.Do(req)
+	if err != nil {
+		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.errorOperation")+"\r\n"+err.Error())
+		return
+	}
+	defer resp.Body.Close()
+
+	bodyBytes, err := io.ReadAll(resp.Body)
+	if err != nil {
+		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.errorOperation")+"\r\n"+err.Error())
+		return
+	}
+
+	// If service is configured to encode (Base64), decode it
+	encoded, _ := t.settingService.GetSubEncrypt()
+	var content string
+	if encoded {
+		decoded, err := base64.StdEncoding.DecodeString(string(bodyBytes))
+		if err != nil {
+			// fallback to raw text
+			content = string(bodyBytes)
+		} else {
+			content = string(decoded)
+		}
+	} else {
+		content = string(bodyBytes)
+	}
+
+	// Normalize line endings and trim
+	lines := strings.Split(strings.ReplaceAll(content, "\r\n", "\n"), "\n")
+	var cleaned []string
+	for _, l := range lines {
+		l = strings.TrimSpace(l)
+		if l != "" {
+			cleaned = append(cleaned, l)
+		}
+	}
+	if len(cleaned) == 0 {
+		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.noResult"))
+		return
+	}
+
+	// Send in chunks to respect message length; use monospace formatting
+	const maxPerMessage = 50
+	for i := 0; i < len(cleaned); i += maxPerMessage {
+		j := i + maxPerMessage
+		if j > len(cleaned) {
+			j = len(cleaned)
+		}
+		chunk := cleaned[i:j]
+		msg := t.I18nBot("subscription.individualLinks") + ":\r\n"
+		for _, link := range chunk {
+			// wrap each link in <code>
+			msg += "<code>" + link + "</code>\r\n"
+		}
+		t.SendMsgToTgbot(chatId, msg)
+	}
+}
+
+// sendClientQRLinks generates QR images for subscription URL, JSON URL, and a few individual links, then sends them
+func (t *Tgbot) sendClientQRLinks(chatId int64, email string) {
+	subURL, subJsonURL, err := t.buildSubscriptionURLs(email)
+	if err != nil {
+		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.errorOperation")+"\r\n"+err.Error())
+		return
+	}
+
+	// Helper to create QR PNG bytes from content
+	createQR := func(content string, size int) ([]byte, error) {
+		if size <= 0 {
+			size = 256
+		}
+		return qrcode.Encode(content, qrcode.Medium, size)
+	}
+
+	// Inform user
+	t.SendMsgToTgbot(chatId, "QRCode"+":")
+
+	// Send sub URL QR (filename: sub.png)
+	if png, err := createQR(subURL, 320); err == nil {
+		document := tu.Document(
+			tu.ID(chatId),
+			tu.FileFromBytes(png, "sub.png"),
+		)
+		_, _ = bot.SendDocument(context.Background(), document)
+	} else {
+		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.errorOperation")+"\r\n"+err.Error())
+	}
+
+	// Send JSON URL QR (filename: subjson.png) when available
+	if subJsonURL != "" {
+		if png, err := createQR(subJsonURL, 320); err == nil {
+			document := tu.Document(
+				tu.ID(chatId),
+				tu.FileFromBytes(png, "subjson.png"),
+			)
+			_, _ = bot.SendDocument(context.Background(), document)
+		} else {
+			t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.errorOperation")+"\r\n"+err.Error())
+		}
+	}
+
+	// Also generate a few individual links' QRs (first up to 5)
+	subPageURL := subURL
+	req, err := http.NewRequest("GET", subPageURL, nil)
+	if err == nil {
+		req.Header.Set("Accept", "text/plain, */*;q=0.1")
+		ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+		defer cancel()
+		req = req.WithContext(ctx)
+		if resp, err := http.DefaultClient.Do(req); err == nil {
+			body, _ := io.ReadAll(resp.Body)
+			_ = resp.Body.Close()
+			encoded, _ := t.settingService.GetSubEncrypt()
+			var content string
+			if encoded {
+				if dec, err := base64.StdEncoding.DecodeString(string(body)); err == nil {
+					content = string(dec)
+				} else {
+					content = string(body)
+				}
+			} else {
+				content = string(body)
+			}
+			lines := strings.Split(strings.ReplaceAll(content, "\r\n", "\n"), "\n")
+			var cleaned []string
+			for _, l := range lines {
+				l = strings.TrimSpace(l)
+				if l != "" {
+					cleaned = append(cleaned, l)
+				}
+			}
+			if len(cleaned) > 0 {
+				max := min(len(cleaned), 5)
+				for i := range max {
+					if png, err := createQR(cleaned[i], 320); err == nil {
+						// Use the email as filename for individual link QR
+						filename := email + ".png"
+						document := tu.Document(
+							tu.ID(chatId),
+							tu.FileFromBytes(png, filename),
+						)
+						_, _ = bot.SendDocument(context.Background(), document)
+						time.Sleep(200 * time.Millisecond)
+					}
+				}
+			}
+		}
+	}
+}
+
 func (t *Tgbot) SendMsgToTgbotAdmins(msg string, replyMarkup ...telego.ReplyMarkup) {
 	if len(replyMarkup) > 0 {
 		for _, adminId := range adminIds {
@@ -2116,6 +2546,74 @@ func (t *Tgbot) getInbounds() (*telego.InlineKeyboardMarkup, error) {
 	return keyboard, nil
 }
 
+// getInboundsFor builds an inline keyboard of inbounds where each button leads to a custom next action
+// nextAction should be one of: get_clients_for_sub|get_clients_for_individual|get_clients_for_qr
+func (t *Tgbot) getInboundsFor(nextAction string) (*telego.InlineKeyboardMarkup, error) {
+	inbounds, err := t.inboundService.GetAllInbounds()
+	if err != nil {
+		logger.Warning("GetAllInbounds run failed:", err)
+		return nil, errors.New(t.I18nBot("tgbot.answers.getInboundsFailed"))
+	}
+
+	if len(inbounds) == 0 {
+		logger.Warning("No inbounds found")
+		return nil, errors.New(t.I18nBot("tgbot.answers.getInboundsFailed"))
+	}
+
+	var buttons []telego.InlineKeyboardButton
+	for _, inbound := range inbounds {
+		status := "❌"
+		if inbound.Enable {
+			status = "✅"
+		}
+		callbackData := t.encodeQuery(fmt.Sprintf("%s %d", nextAction, inbound.Id))
+		buttons = append(buttons, tu.InlineKeyboardButton(fmt.Sprintf("%v - %v", inbound.Remark, status)).WithCallbackData(callbackData))
+	}
+
+	cols := 1
+	if len(buttons) >= 6 {
+		cols = 2
+	}
+
+	keyboard := tu.InlineKeyboardGrid(tu.InlineKeyboardCols(cols, buttons...))
+	return keyboard, nil
+}
+
+// getInboundClientsFor lists clients of an inbound with a specific action prefix to be appended with email
+func (t *Tgbot) getInboundClientsFor(inboundID int, action string) (*telego.InlineKeyboardMarkup, error) {
+	inbound, err := t.inboundService.GetInbound(inboundID)
+	if err != nil {
+		logger.Warning("getInboundClientsFor run failed:", err)
+		return nil, errors.New(t.I18nBot("tgbot.answers.getInboundsFailed"))
+	}
+	clients, err := t.inboundService.GetClients(inbound)
+	var buttons []telego.InlineKeyboardButton
+
+	if err != nil {
+		logger.Warning("GetInboundClients run failed:", err)
+		return nil, errors.New(t.I18nBot("tgbot.answers.getInboundsFailed"))
+	} else {
+		if len(clients) > 0 {
+			for _, client := range clients {
+				buttons = append(buttons, tu.InlineKeyboardButton(client.Email).WithCallbackData(t.encodeQuery(action+" "+client.Email)))
+			}
+
+		} else {
+			return nil, errors.New(t.I18nBot("tgbot.answers.getClientsFailed"))
+		}
+
+	}
+	cols := 0
+	if len(buttons) < 6 {
+		cols = 3
+	} else {
+		cols = 2
+	}
+	keyboard := tu.InlineKeyboardGrid(tu.InlineKeyboardCols(cols, buttons...))
+
+	return keyboard, nil
+}
+
 func (t *Tgbot) getInboundsAddClient() (*telego.InlineKeyboardMarkup, error) {
 	inbounds, err := t.inboundService.GetAllInbounds()
 	if err != nil {

web/service/user.go

@@ -3,10 +3,10 @@ package service
 import (
 	"errors"
 
-	"x-ui/database"
+	"github.com/mhsanaei/3x-ui/v2/database"
-	"x-ui/database/model"
+	"github.com/mhsanaei/3x-ui/v2/database/model"
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/util/crypto"
+	"github.com/mhsanaei/3x-ui/v2/util/crypto"
 
 	"github.com/xlzd/gotp"
 	"gorm.io/gorm"

web/service/warp.go

@@ -7,8 +7,9 @@ import (
 	"net/http"
 	"os"
 	"time"
-	"x-ui/logger"
+
-	"x-ui/util/common"
+	"github.com/mhsanaei/3x-ui/v2/logger"
+	"github.com/mhsanaei/3x-ui/v2/util/common"
 )
 
 type WarpService struct {

web/service/xray.go

@@ -6,8 +6,8 @@ import (
 	"runtime"
 	"sync"
 
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/xray"
+	"github.com/mhsanaei/3x-ui/v2/xray"
 
 	"go.uber.org/atomic"
 )

web/service/xray_setting.go

@@ -4,8 +4,8 @@ import (
 	_ "embed"
 	"encoding/json"
 
-	"x-ui/util/common"
+	"github.com/mhsanaei/3x-ui/v2/util/common"
-	"x-ui/xray"
+	"github.com/mhsanaei/3x-ui/v2/xray"
 )
 
 type XraySettingService struct {

web/session/session.go

@@ -2,8 +2,9 @@ package session
 
 import (
 	"encoding/gob"
+	"net/http"
 
-	"x-ui/database/model"
+	"github.com/mhsanaei/3x-ui/v2/database/model"
 
 	"github.com/gin-contrib/sessions"
 	"github.com/gin-gonic/gin"
@@ -32,6 +33,7 @@ func SetMaxAge(c *gin.Context, maxAge int) {
 		Path:     defaultPath,
 		MaxAge:   maxAge,
 		HttpOnly: true,
+		SameSite: http.SameSiteLaxMode,
 	})
 }
 
@@ -61,5 +63,6 @@ func ClearSession(c *gin.Context) {
 		Path:     defaultPath,
 		MaxAge:   -1,
 		HttpOnly: true,
+		SameSite: http.SameSiteLaxMode,
 	})
 }

web/translation/translate.ar_EG.toml

@@ -72,6 +72,20 @@
 "emptyReverseDesc" = "مفيش بروكسي عكسي مضاف."
 "somethingWentWrong" = "حدث خطأ ما"
 
+[subscription]
+"title" = "معلومات الاشتراك"
+"subId" = "معرّف الاشتراك"
+"status" = "الحالة"
+"downloaded" = "التنزيل"
+"uploaded" = "الرفع"
+"expiry" = "تاريخ الانتهاء"
+"totalQuota" = "الحصة الإجمالية"
+"individualLinks" = "روابط فردية"
+"active" = "نشط"
+"inactive" = "غير نشط"
+"unlimited" = "غير محدود"
+"noExpiry" = "بدون انتهاء"
+
 [menu]
 "theme" = "الثيم"
 "dark" = "داكن"
@@ -230,6 +244,9 @@
 "exportInbound" = "تصدير الإدخال"
 "import" = "استيراد"
 "importInbound" = "استيراد إدخال"
+"periodicTrafficResetTitle" = "إعادة تعيين حركة المرور"
+"periodicTrafficResetDesc" = "إعادة تعيين عداد حركة المرور تلقائيًا في فترات محددة"
+"lastReset" = "آخر إعادة تعيين"
 
 [pages.client]
 "add" = "أضف عميل"
@@ -249,6 +266,12 @@
 "renew" = "تجديد تلقائي"
 "renewDesc" = "تجديد تلقائي بعد انتهاء الصلاحية. (0 = تعطيل)(الوحدة: يوم)"
 
+[pages.inbounds.periodicTrafficReset]
+"never" = "أبداً"
+"daily" = "يومياً"
+"weekly" = "أسبوعياً"
+"monthly" = "شهرياً"
+
 [pages.inbounds.toasts]
 "obtain" = "تم الحصول عليه"
 "updateSuccess" = "تم التحديث بنجاح"
@@ -348,6 +371,7 @@
 "subSettings" = "الاشتراك"
 "subEnable" = "تفعيل خدمة الاشتراك"
 "subEnableDesc" = "يفعل خدمة الاشتراك."
+"subJsonEnable" = "تمكين/تعطيل نقطة نهاية اشتراك JSON بشكل مستقل."
 "subTitle" = "عنوان الاشتراك"
 "subTitleDesc" = "العنوان اللي هيظهر في عميل VPN"
 "subListen" = "IP الاستماع"

web/translation/translate.en_US.toml

@@ -72,6 +72,20 @@
 "emptyReverseDesc" = "No added reverse proxies."
 "somethingWentWrong" = "Something went wrong"
 
+[subscription]
+"title" = "Subscription info"
+"subId" = "Subscription ID"
+"status" = "Status"
+"downloaded" = "Downloaded"
+"uploaded" = "Uploaded"
+"expiry" = "Expiry"
+"totalQuota" = "Total quota"
+"individualLinks" = "Individual links"
+"active" = "Active"
+"inactive" = "Inactive"
+"unlimited" = "Unlimited"
+"noExpiry" = "No expiry"
+
 [menu]
 "theme" = "Theme"
 "dark" = "Dark"
@@ -230,6 +244,9 @@
 "exportInbound" = "Export Inbound"
 "import" = "Import"
 "importInbound" = "Import an Inbound"
+"periodicTrafficResetTitle" = "Traffic Reset"
+"periodicTrafficResetDesc" = "Automatically reset traffic counter at specified intervals"
+"lastReset" = "Last Reset"
 
 [pages.client]
 "add" = "Add Client"
@@ -249,6 +266,12 @@
 "renew" = "Auto Renew"
 "renewDesc" = "Auto-renewal after expiration. (0 = disable)(unit: day)"
 
+[pages.inbounds.periodicTrafficReset]
+"never" = "Never"
+"daily" = "Daily"
+"weekly" = "Weekly"
+"monthly" = "Monthly"
+
 [pages.inbounds.toasts]
 "obtain" = "Obtain"
 "updateSuccess" = "The update was successful."
@@ -346,8 +369,9 @@
 "timeZone" = "Time Zone"
 "timeZoneDesc" = "Scheduled tasks will run based on this time zone."
 "subSettings" = "Subscription"
-"subEnable" = "Enable Subscription Service"
+"subEnable" = "Subscription Service"
-"subEnableDesc" = "Enables the subscription service."
+"subEnableDesc" = "Enable/Disable the subscription service."
+"subJsonEnable" = "Enable/Disable the JSON subscription endpoint independently."
 "subTitle" = "Subscription Title"
 "subTitleDesc" = "Title shown in VPN client"
 "subListen" = "Listen IP"

web/translation/translate.es_ES.toml

@@ -72,6 +72,20 @@
 "emptyReverseDesc" = "No hay proxies inversos añadidos."
 "somethingWentWrong" = "Algo salió mal"
 
+[subscription]
+"title" = "Información de suscripción"
+"subId" = "ID de suscripción"
+"status" = "Estado"
+"downloaded" = "Descargado"
+"uploaded" = "Subido"
+"expiry" = "Caducidad"
+"totalQuota" = "Cuota total"
+"individualLinks" = "Enlaces individuales"
+"active" = "Activo"
+"inactive" = "Inactivo"
+"unlimited" = "Ilimitado"
+"noExpiry" = "Sin caducidad"
+
 [menu]
 "theme" = "Tema"
 "dark" = "Oscuro"
@@ -230,6 +244,9 @@
 "exportInbound" = "Exportación entrante"
 "import" = "Importar"
 "importInbound" = "Importar un entrante"
+"periodicTrafficResetTitle" = "Reset de Tráfico"
+"periodicTrafficResetDesc" = "Reiniciar automáticamente el contador de tráfico en intervalos especificados"
+"lastReset" = "Último reinicio"
 
 [pages.client]
 "add" = "Agregar Cliente"
@@ -249,6 +266,12 @@
 "renew" = "Renovación automática"
 "renewDesc" = "Renovación automática después de la expiración. (0 = desactivar) (unidad: día)"
 
+[pages.inbounds.periodicTrafficReset]
+"never" = "Nunca"
+"daily" = "Diariamente"
+"weekly" = "Semanalmente"
+"monthly" = "Mensualmente"
+
 [pages.inbounds.toasts]
 "obtain" = "Recibir"
 "updateSuccess" = "La actualización fue exitosa"
@@ -348,6 +371,7 @@
 "subSettings" = "Suscripción"
 "subEnable" = "Habilitar Servicio"
 "subEnableDesc" = "Función de suscripción con configuración separada."
+"subJsonEnable" = "Habilitar/Deshabilitar el endpoint de suscripción JSON de forma independiente."
 "subTitle" = "Título de la Suscripción"
 "subTitleDesc" = "Título mostrado en el cliente de VPN"
 "subListen" = "Listening IP"

web/translation/translate.fa_IR.toml

@@ -72,6 +72,20 @@
 "emptyReverseDesc" = "هیچ پروکسی معکوس اضافه نشده است."
 "somethingWentWrong" = "مشکلی پیش آمد"
 
+[subscription]
+"title" = "اطلاعات سابسکریپشن"
+"subId" = "شناسه اشتراک"
+"status" = "وضعیت"
+"downloaded" = "دانلود"
+"uploaded" = "آپلود"
+"expiry" = "تاریخ پایان"
+"totalQuota" = "حجم کلی"
+"individualLinks" = "لینک‌های تکی"
+"active" = "فعال"
+"inactive" = "غیرفعال"
+"unlimited" = "نامحدود"
+"noExpiry" = "بدون انقضا"
+
 [menu]
 "theme" = "تم"
 "dark" = "تیره"
@@ -230,6 +244,9 @@
 "exportInbound" = "استخراج ورودی"
 "import" = "افزودن"
 "importInbound" = "افزودن یک ورودی"
+"periodicTrafficResetTitle" = "بازنشانی ترافیک"
+"periodicTrafficResetDesc" = "بازنشانی خودکار شمارنده ترافیک در فواصل زمانی مشخص"
+"lastReset" = "آخرین بازنشانی"
 
 [pages.client]
 "add" = "کاربر جدید"
@@ -247,7 +264,13 @@
 "expireDays" = "مدت زمان"
 "days" = "(روز)"
 "renew" = "تمدید خودکار"
-"renewDesc" = "(تمدید خودکار پس‌از ‌انقضا. (0 = غیرفعال)(واحد: روز"
+"renewDesc" = "تمدید خودکار پس‌از ‌انقضا. (0 = غیرفعال)(واحد: روز)"
+
+[pages.inbounds.periodicTrafficReset]
+"never" = "هرگز"
+"daily" = "روزانه"
+"weekly" = "هفتگی"
+"monthly" = "ماهانه"
 
 [pages.inbounds.toasts]
 "obtain" = "فراهم‌سازی"
@@ -348,6 +371,7 @@
 "subSettings" = "سابسکریپشن"
 "subEnable" = "فعال‌سازی سرویس سابسکریپشن"
 "subEnableDesc" = "سرویس سابسکریپشن‌ را فعال‌می‌کند"
+"subJsonEnable" = "فعال/غیرفعال‌سازی مستقل نقطه دسترسی سابسکریپشن JSON."
 "subTitle" = "عنوان اشتراک"
 "subTitleDesc" = "عنوان نمایش داده شده در کلاینت VPN"
 "subListen" = "آدرس آی‌پی"

web/translation/translate.id_ID.toml

@@ -72,6 +72,20 @@
 "emptyReverseDesc" = "Tidak ada proxy terbalik yang ditambahkan."
 "somethingWentWrong" = "Terjadi kesalahan"
 
+[subscription]
+"title" = "Info langganan"
+"subId" = "ID langganan"
+"status" = "Status"
+"downloaded" = "Diunduh"
+"uploaded" = "Diunggah"
+"expiry" = "Kedaluwarsa"
+"totalQuota" = "Kuota total"
+"individualLinks" = "Tautan individual"
+"active" = "Aktif"
+"inactive" = "Nonaktif"
+"unlimited" = "Tanpa batas"
+"noExpiry" = "Tanpa kedaluwarsa"
+
 [menu]
 "theme" = "Tema"
 "dark" = "Gelap"
@@ -230,6 +244,9 @@
 "exportInbound" = "Ekspor Masuk"
 "import" = "Impor"
 "importInbound" = "Impor Masuk"
+"periodicTrafficResetTitle" = "Reset Trafik Berkala"
+"periodicTrafficResetDesc" = "Reset otomatis penghitung trafik pada interval tertentu"
+"lastReset" = "Reset Terakhir"
 
 [pages.client]
 "add" = "Tambah Klien"
@@ -249,6 +266,12 @@
 "renew" = "Perpanjang Otomatis"
 "renewDesc" = "Perpanjangan otomatis setelah kedaluwarsa. (0 = nonaktif)(unit: hari)"
 
+[pages.inbounds.periodicTrafficReset]
+"never" = "Tidak Pernah"
+"daily" = "Harian"
+"weekly" = "Mingguan"
+"monthly" = "Bulanan"
+
 [pages.inbounds.toasts]
 "obtain" = "Dapatkan"
 "updateSuccess" = "Pembaruan berhasil"
@@ -348,6 +371,7 @@
 "subSettings" = "Langganan"
 "subEnable" = "Aktifkan Layanan Langganan"
 "subEnableDesc" = "Mengaktifkan layanan langganan."
+"subJsonEnable" = "Aktifkan/Nonaktifkan endpoint langganan JSON secara mandiri."
 "subTitle" = "Judul Langganan"
 "subTitleDesc" = "Judul yang ditampilkan di klien VPN"
 "subListen" = "IP Pendengar"

web/translation/translate.ja_JP.toml

@@ -72,6 +72,20 @@
 "emptyReverseDesc" = "追加されたリバースプロキシはありません。"
 "somethingWentWrong" = "エラーが発生しました"
 
+[subscription]
+"title" = "サブスクリプション情報"
+"subId" = "サブスクリプションID"
+"status" = "ステータス"
+"downloaded" = "ダウンロード"
+"uploaded" = "アップロード"
+"expiry" = "有効期限"
+"totalQuota" = "合計クォータ"
+"individualLinks" = "個別リンク"
+"active" = "有効"
+"inactive" = "無効"
+"unlimited" = "無制限"
+"noExpiry" = "期限なし"
+
 [menu]
 "theme" = "テーマ"
 "dark" = "ダーク"
@@ -230,6 +244,9 @@
 "exportInbound" = "インバウンドルールをエクスポート"
 "import" = "インポート"
 "importInbound" = "インバウンドルールをインポート"
+"periodicTrafficResetTitle" = "トラフィックリセット"
+"periodicTrafficResetDesc" = "指定された間隔でトラフィックカウンタを自動的にリセット"
+"lastReset" = "最後のリセット"
 
 [pages.client]
 "add" = "クライアント追加"
@@ -249,6 +266,12 @@
 "renew" = "自動更新"
 "renewDesc" = "期限が切れた後に自動更新。（0 = 無効）（単位：日）"
 
+[pages.inbounds.periodicTrafficReset]
+"never" = "なし"
+"daily" = "毎日"
+"weekly" = "毎週"
+"monthly" = "毎月"
+
 [pages.inbounds.toasts]
 "obtain" = "取得"
 "updateSuccess" = "更新が成功しました"
@@ -348,6 +371,7 @@
 "subSettings" = "サブスクリプション設定"
 "subEnable" = "サブスクリプションサービスを有効にする"
 "subEnableDesc" = "サブスクリプションサービス機能を有効にする"
+"subJsonEnable" = "JSON サブスクリプションのエンドポイントを個別に有効/無効にする。"
 "subTitle" = "サブスクリプションタイトル"
 "subTitleDesc" = "VPNクライアントに表示されるタイトル"
 "subListen" = "監視IP"

web/translation/translate.pt_BR.toml

@@ -72,6 +72,20 @@
 "emptyReverseDesc" = "Nenhum proxy reverso adicionado."
 "somethingWentWrong" = "Algo deu errado"
 
+[subscription]
+"title" = "Informações da assinatura"
+"subId" = "ID da assinatura"
+"status" = "Status"
+"downloaded" = "Baixado"
+"uploaded" = "Enviado"
+"expiry" = "Validade"
+"totalQuota" = "Cota total"
+"individualLinks" = "Links individuais"
+"active" = "Ativo"
+"inactive" = "Inativo"
+"unlimited" = "Ilimitado"
+"noExpiry" = "Sem validade"
+
 [menu]
 "theme" = "Tema"
 "dark" = "Escuro"
@@ -230,6 +244,9 @@
 "exportInbound" = "Exportar Inbound"
 "import" = "Importar"
 "importInbound" = "Importar um Inbound"
+"periodicTrafficResetTitle" = "Reset de Tráfego"
+"periodicTrafficResetDesc" = "Reinicia automaticamente o contador de tráfego em intervalos especificados"
+"lastReset" = "Último Reset"
 
 [pages.client]
 "add" = "Adicionar Cliente"
@@ -249,6 +266,12 @@
 "renew" = "Renovação Automática"
 "renewDesc" = "Renovação automática após expiração. (0 = desativado)(unidade: dia)"
 
+[pages.inbounds.periodicTrafficReset]
+"never" = "Nunca"
+"daily" = "Diariamente"
+"weekly" = "Semanalmente"
+"monthly" = "Mensalmente"
+
 [pages.inbounds.toasts]
 "obtain" = "Obter"
 "updateSuccess" = "A atualização foi bem-sucedida"
@@ -348,6 +371,7 @@
 "subSettings" = "Assinatura"
 "subEnable" = "Ativar Serviço de Assinatura"
 "subEnableDesc" = "Ativa o serviço de assinatura."
+"subJsonEnable" = "Ativar/Desativar o endpoint de assinatura JSON de forma independente."
 "subTitle" = "Título da Assinatura"
 "subTitleDesc" = "Título exibido no cliente VPN"
 "subListen" = "IP de Escuta"

web/translation/translate.ru_RU.toml

@@ -72,6 +72,20 @@
 "emptyReverseDesc" = "Нет добавленных реверс-прокси."
 "somethingWentWrong" = "Что-то пошло не так"
 
+[subscription]
+"title" = "Информация о подписке"
+"subId" = "ID подписки"
+"status" = "Статус"
+"downloaded" = "Загружено"
+"uploaded" = "Отправлено"
+"expiry" = "Срок действия"
+"totalQuota" = "Общий лимит"
+"individualLinks" = "Индивидуальные ссылки"
+"active" = "Активна"
+"inactive" = "Неактивна"
+"unlimited" = "Безлимит"
+"noExpiry" = "Без срока"
+
 [menu]
 "theme" = "Тема"
 "dark" = "Темная"
@@ -230,6 +244,9 @@
 "exportInbound" = "Экспорт инбаундов"
 "import" = "Импортировать"
 "importInbound" = "Импорт инбаундов"
+"periodicTrafficResetTitle" = "Сброс трафика"
+"periodicTrafficResetDesc" = "Автоматический сброс счетчика трафика через указанные интервалы"
+"lastReset" = "Последний сброс"
 
 [pages.client]
 "add" = "Создать клиента"
@@ -249,6 +266,12 @@
 "renew" = "Автопродление"
 "renewDesc" = "Автопродление после истечения срока действия. (0 = отключить)(единица: день)"
 
+[pages.inbounds.periodicTrafficReset]
+"never" = "Никогда"
+"daily" = "Ежедневно"
+"weekly" = "Еженедельно"
+"monthly" = "Ежемесячно"
+
 [pages.inbounds.toasts]
 "obtain" = "Получить"
 "updateSuccess" = "Обновление прошло успешно"
@@ -348,6 +371,7 @@
 "subSettings" = "Подписка"
 "subEnable" = "Включить подписку"
 "subEnableDesc" = "Функция подписки с отдельной конфигурацией"
+"subJsonEnable" = "Включить/отключить JSON-эндпоинт подписки независимо."
 "subTitle" = "Заголовок подписки"
 "subTitleDesc" = "Название подписки, которое видит клиент в VPN клиенте"
 "subListen" = "Прослушивание IP"

web/translation/translate.tr_TR.toml

@@ -72,6 +72,20 @@
 "emptyReverseDesc" = "Eklenmiş ters proxy yok."
 "somethingWentWrong" = "Bir şeyler yanlış gitti"
 
+[subscription]
+"title" = "Abonelik Bilgisi"
+"subId" = "Abonelik Kimliği"
+"status" = "Durum"
+"downloaded" = "İndirilen"
+"uploaded" = "Yüklenen"
+"expiry" = "Son Kullanma"
+"totalQuota" = "Toplam Kota"
+"individualLinks" = "Bireysel Bağlantılar"
+"active" = "Aktif"
+"inactive" = "Pasif"
+"unlimited" = "Sınırsız"
+"noExpiry" = "Süresiz"
+
 [menu]
 "theme" = "Tema"
 "dark" = "Koyu"
@@ -230,6 +244,9 @@
 "exportInbound" = "Geleni Dışa Aktar"
 "import" = "İçe Aktar"
 "importInbound" = "Bir Gelen İçe Aktar"
+"periodicTrafficResetTitle" = "Trafik Sıfırlama"
+"periodicTrafficResetDesc" = "Belirtilen aralıklarla trafik sayacını otomatik olarak sıfırla"
+"lastReset" = "Son Sıfırlama"
 
 [pages.client]
 "add" = "Müşteri Ekle"
@@ -249,6 +266,12 @@
 "renew" = "Otomatik Yenile"
 "renewDesc" = "Süresi dolduktan sonra otomatik yenileme. (0 = devre dışı)(birim: gün)"
 
+[pages.inbounds.periodicTrafficReset]
+"never" = "Asla"
+"daily" = "Günlük"
+"weekly" = "Haftalık"
+"monthly" = "Aylık"
+
 [pages.inbounds.toasts]
 "obtain" = "Elde Et"
 "updateSuccess" = "Güncelleme başarılı oldu"
@@ -348,6 +371,7 @@
 "subSettings" = "Abonelik"
 "subEnable" = "Abonelik Hizmetini Etkinleştir"
 "subEnableDesc" = "Abonelik hizmetini etkinleştirir."
+"subJsonEnable" = "JSON abonelik uç noktasını bağımsız olarak Etkinleştir/Devre Dışı bırak."
 "subTitle" = "Abonelik Başlığı"
 "subTitleDesc" = "VPN istemcisinde gösterilen başlık"
 "subListen" = "Dinleme IP"

web/translation/translate.uk_UA.toml

@@ -72,6 +72,20 @@
 "emptyReverseDesc" = "Немає доданих зворотних проксі."
 "somethingWentWrong" = "Щось пішло не так"
 
+[subscription]
+"title" = "Інформація про підписку"
+"subId" = "ID підписки"
+"status" = "Статус"
+"downloaded" = "Завантажено"
+"uploaded" = "Відвантажено"
+"expiry" = "Термін дії"
+"totalQuota" = "Загальна квота"
+"individualLinks" = "Окремі посилання"
+"active" = "Активна"
+"inactive" = "Неактивна"
+"unlimited" = "Безліміт"
+"noExpiry" = "Без строку"
+
 [menu]
 "theme" = "Тема"
 "dark" = "Темна"
@@ -230,6 +244,9 @@
 "exportInbound" = "Експортувати вхідні"
 "import" = "Імпорт"
 "importInbound" = "Імпортувати вхідний"
+"periodicTrafficResetTitle" = "Скидання трафіку"
+"periodicTrafficResetDesc" = "Автоматично скидати лічильник трафіку через певні проміжки часу"
+"lastReset" = "Останнє скидання"
 
 [pages.client]
 "add" = "Додати клієнта"
@@ -249,6 +266,12 @@
 "renew" = "Автоматичне оновлення"
 "renewDesc" = "Автоматичне поновлення після закінчення терміну дії. (0 = вимкнено)(одиниця: день)"
 
+[pages.inbounds.periodicTrafficReset]
+"never" = "Ніколи"
+"daily" = "Щодня"
+"weekly" = "Щотижня"
+"monthly" = "Щомісяця"
+
 [pages.inbounds.toasts]
 "obtain" = "Отримати"
 "updateSuccess" = "Оновлення пройшло успішно"
@@ -348,6 +371,7 @@
 "subSettings" = "Підписка"
 "subEnable" = "Увімкнути службу підписки"
 "subEnableDesc" = "Вмикає службу підписки."
+"subJsonEnable" = "Увімкнути/вимкнути JSON-кінець підписки незалежно."
 "subTitle" = "Назва Підписки"
 "subTitleDesc" = "Назва, яка відображається у VPN-клієнті"
 "subListen" = "Слухати IP"

web/translation/translate.vi_VN.toml

@@ -72,6 +72,20 @@
 "emptyReverseDesc" = "Không có proxy ngược nào được thêm."
 "somethingWentWrong" = "Đã xảy ra lỗi"
 
+[subscription]
+"title" = "Thông tin đăng ký"
+"subId" = "ID đăng ký"
+"status" = "Trạng thái"
+"downloaded" = "Đã tải xuống"
+"uploaded" = "Đã tải lên"
+"expiry" = "Hết hạn"
+"totalQuota" = "Tổng hạn mức"
+"individualLinks" = "Liên kết riêng lẻ"
+"active" = "Hoạt động"
+"inactive" = "Không hoạt động"
+"unlimited" = "Không giới hạn"
+"noExpiry" = "Không hết hạn"
+
 [menu]
 "theme" = "Chủ đề"
 "dark" = "Tối"
@@ -230,6 +244,9 @@
 "exportInbound" = "Xuất nhập khẩu"
 "import" = "Nhập"
 "importInbound" = "Nhập inbound"
+"periodicTrafficResetTitle" = "Đặt lại lưu lượng"
+"periodicTrafficResetDesc" = "Tự động đặt lại bộ đếm lưu lượng theo khoảng thời gian xác định"
+"lastReset" = "Đặt lại lần cuối"
 
 [pages.client]
 "add" = "Thêm người dùng"
@@ -249,6 +266,12 @@
 "renew" = "Tự động gia hạn"
 "renewDesc" = "Tự động gia hạn sau khi hết hạn. (0 = tắt)(đơn vị: ngày)"
 
+[pages.inbounds.periodicTrafficReset]
+"never" = "Không bao giờ"
+"daily" = "Hàng ngày"
+"weekly" = "Hàng tuần"
+"monthly" = "Hàng tháng"
+
 [pages.inbounds.toasts]
 "obtain" = "Nhận"
 "updateSuccess" = "Cập nhật thành công"
@@ -348,6 +371,7 @@
 "subSettings" = "Gói đăng ký"
 "subEnable" = "Bật dịch vụ"
 "subEnableDesc" = "Tính năng gói đăng ký với cấu hình riêng"
+"subJsonEnable" = "Bật/Tắt điểm cuối đăng ký JSON độc lập."
 "subTitle" = "Tiêu đề Đăng ký"
 "subTitleDesc" = "Tiêu đề hiển thị trong ứng dụng VPN"
 "subListen" = "Listening IP"

web/translation/translate.zh_CN.toml

@@ -72,6 +72,20 @@
 "emptyReverseDesc" = "未添加反向代理。"
 "somethingWentWrong" = "出了点问题"
 
+[subscription]
+"title" = "订阅信息"
+"subId" = "订阅 ID"
+"status" = "状态"
+"downloaded" = "已下载"
+"uploaded" = "已上传"
+"expiry" = "到期"
+"totalQuota" = "总配额"
+"individualLinks" = "单独链接"
+"active" = "启用"
+"inactive" = "停用"
+"unlimited" = "无限制"
+"noExpiry" = "无到期"
+
 [menu]
 "theme" = "主题"
 "dark" = "暗色"
@@ -230,6 +244,9 @@
 "exportInbound" = "导出入站规则"
 "import"="导入"
 "importInbound" = "导入入站规则"
+"periodicTrafficResetTitle" = "流量重置"
+"periodicTrafficResetDesc" = "按指定间隔自动重置流量计数器"
+"lastReset" = "上次重置"
 
 [pages.client]
 "add" = "添加客户端"
@@ -249,6 +266,12 @@
 "renew" = "自动续订"
 "renewDesc" = "到期后自动续订。(0 = 禁用)(单位: 天)"
 
+[pages.inbounds.periodicTrafficReset]
+"never" = "从不"
+"daily" = "每日"
+"weekly" = "每周"
+"monthly" = "每月"
+
 [pages.inbounds.toasts]
 "obtain" = "获取"
 "updateSuccess" = "更新成功"
@@ -348,6 +371,7 @@
 "subSettings" = "订阅设置"
 "subEnable" = "启用订阅服务"
 "subEnableDesc" = "启用订阅服务功能"
+"subJsonEnable" = "单独启用/禁用 JSON 订阅端点。"
 "subTitle" = "订阅标题"
 "subTitleDesc" = "在VPN客户端中显示的标题"
 "subListen" = "监听 IP"

web/translation/translate.zh_TW.toml

@@ -72,6 +72,20 @@
 "emptyReverseDesc" = "未添加反向代理。"
 "somethingWentWrong" = "發生錯誤"
 
+[subscription]
+"title" = "訂閱資訊"
+"subId" = "訂閱 ID"
+"status" = "狀態"
+"downloaded" = "已下載"
+"uploaded" = "已上傳"
+"expiry" = "到期"
+"totalQuota" = "總配額"
+"individualLinks" = "個別連結"
+"active" = "啟用"
+"inactive" = "停用"
+"unlimited" = "無限制"
+"noExpiry" = "無到期"
+
 [menu]
 "theme" = "主題"
 "dark" = "深色"
@@ -230,6 +244,9 @@
 "exportInbound" = "匯出入站規則"
 "import"="匯入"
 "importInbound" = "匯入入站規則"
+"periodicTrafficResetTitle" = "流量重置"
+"periodicTrafficResetDesc" = "按指定間隔自動重置流量計數器"
+"lastReset" = "上次重置"
 
 [pages.client]
 "add" = "新增客戶端"
@@ -249,6 +266,12 @@
 "renew" = "自動續訂"
 "renewDesc" = "到期後自動續訂。(0 = 禁用)(單位: 天)"
 
+[pages.inbounds.periodicTrafficReset]
+"never" = "從不"
+"daily" = "每日"
+"weekly" = "每週"
+"monthly" = "每月"
+
 [pages.inbounds.toasts]
 "obtain" = "獲取"
 "updateSuccess" = "更新成功"
@@ -348,6 +371,7 @@
 "subSettings" = "訂閱設定"
 "subEnable" = "啟用訂閱服務"
 "subEnableDesc" = "啟用訂閱服務功能"
+"subJsonEnable" = "獨立啟用/停用 JSON 訂閱端點。"
 "subTitle" = "訂閱標題"
 "subTitleDesc" = "在VPN客戶端中顯示的標題"
 "subListen" = "監聽 IP"

web/web.go

@@ -14,15 +14,15 @@ import (
 	"strings"
 	"time"
 
-	"x-ui/config"
+	"github.com/mhsanaei/3x-ui/v2/config"
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/util/common"
+	"github.com/mhsanaei/3x-ui/v2/util/common"
-	"x-ui/web/controller"
+	"github.com/mhsanaei/3x-ui/v2/web/controller"
-	"x-ui/web/job"
+	"github.com/mhsanaei/3x-ui/v2/web/job"
-	"x-ui/web/locale"
+	"github.com/mhsanaei/3x-ui/v2/web/locale"
-	"x-ui/web/middleware"
+	"github.com/mhsanaei/3x-ui/v2/web/middleware"
-	"x-ui/web/network"
+	"github.com/mhsanaei/3x-ui/v2/web/network"
-	"x-ui/web/service"
+	"github.com/mhsanaei/3x-ui/v2/web/service"
 
 	"github.com/gin-contrib/gzip"
 	"github.com/gin-contrib/sessions"
@@ -31,7 +31,7 @@ import (
 	"github.com/robfig/cron/v3"
 )
 
-//go:embed assets/*
+//go:embed assets
 var assetsFS embed.FS
 
 //go:embed html/*
@@ -78,6 +78,15 @@ func (f *wrapAssetsFileInfo) ModTime() time.Time {
 	return startTime
 }
 
+// Expose embedded resources for reuse by other servers (e.g., sub server)
+func EmbeddedHTML() embed.FS {
+	return htmlFS
+}
+
+func EmbeddedAssets() embed.FS {
+	return assetsFS
+}
+
 type Server struct {
 	httpServer *http.Server
 	listener   net.Listener
@@ -180,6 +189,15 @@ func (s *Server) initRouter() (*gin.Engine, error) {
 	assetsBasePath := basePath + "assets/"
 
 	store := cookie.NewStore(secret)
+	// Configure default session cookie options, including expiration (MaxAge)
+	if sessionMaxAge, err := s.settingService.GetSessionMaxAge(); err == nil {
+		store.Options(sessions.Options{
+			Path:     "/",
+			MaxAge:   sessionMaxAge * 60, // minutes -> seconds
+			HttpOnly: true,
+			SameSite: http.SameSiteLaxMode,
+		})
+	}
 	engine.Use(sessions.Sessions("3x-ui", store))
 	engine.Use(func(c *gin.Context) {
 		c.Set("base_path", basePath)
@@ -201,7 +219,11 @@ func (s *Server) initRouter() (*gin.Engine, error) {
 	i18nWebFunc := func(key string, params ...string) string {
 		return locale.I18n(locale.Web, key, params...)
 	}
-	engine.FuncMap["i18n"] = i18nWebFunc
+	// Register template functions before loading templates
+	funcMap := template.FuncMap{
+		"i18n": i18nWebFunc,
+	}
+	engine.SetFuncMap(funcMap)
 	engine.Use(locale.LocalizerMiddleware())
 
 	// set static files and template
@@ -211,11 +233,12 @@ func (s *Server) initRouter() (*gin.Engine, error) {
 		if err != nil {
 			return nil, err
 		}
+		// Use the registered func map with the loaded templates
 		engine.LoadHTMLFiles(files...)
 		engine.StaticFS(basePath+"assets", http.FS(os.DirFS("web/assets")))
 	} else {
 		// for production
-		template, err := s.getHtmlTemplate(engine.FuncMap)
+		template, err := s.getHtmlTemplate(funcMap)
 		if err != nil {
 			return nil, err
 		}
@@ -266,6 +289,14 @@ func (s *Server) startTask() {
 	// check client ips from log file every day
 	s.cron.AddJob("@daily", job.NewClearLogsJob())
 
+	// Inbound traffic reset jobs
+	// Run once a day, midnight
+	s.cron.AddJob("@daily", job.NewPeriodicTrafficResetJob("daily"))
+	// Run once a week, midnight between Sat/Sun
+	s.cron.AddJob("@weekly", job.NewPeriodicTrafficResetJob("weekly"))
+	// Run once a month, midnight, first of month
+	s.cron.AddJob("@monthly", job.NewPeriodicTrafficResetJob("monthly"))
+
 	// Make a traffic condition every day, 8:30
 	var entry cron.EntryID
 	isTgbotenabled, err := s.settingService.GetTgbotEnabled()

xray/api.go

@@ -4,12 +4,12 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
+	"math"
 	"regexp"
 	"time"
-	"math"
 
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/util/common"
+	"github.com/mhsanaei/3x-ui/v2/util/common"
 
 	"github.com/xtls/xray-core/app/proxyman/command"
 	statsService "github.com/xtls/xray-core/app/stats/command"

xray/client_traffic.go

@@ -5,6 +5,7 @@ type ClientTraffic struct {
 	InboundId  int    `json:"inboundId" form:"inboundId"`
 	Enable     bool   `json:"enable" form:"enable"`
 	Email      string `json:"email" form:"email" gorm:"unique"`
+	SubId      string `json:"subId" form:"subId" gorm:"-"`
 	Up         int64  `json:"up" form:"up"`
 	Down       int64  `json:"down" form:"down"`
 	AllTime    int64  `json:"allTime" form:"allTime"`

xray/config.go

@@ -3,7 +3,7 @@ package xray
 import (
 	"bytes"
 
-	"x-ui/util/json_util"
+	"github.com/mhsanaei/3x-ui/v2/util/json_util"
 )
 
 type Config struct {

xray/inbound.go

@@ -3,7 +3,7 @@ package xray
 import (
 	"bytes"
 
-	"x-ui/util/json_util"
+	"github.com/mhsanaei/3x-ui/v2/util/json_util"
 )
 
 type InboundConfig struct {

xray/log_writer.go

@@ -2,9 +2,10 @@ package xray
 
 import (
 	"regexp"
+	"runtime"
 	"strings"
 
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
 )
 
 func NewLogWriter() *LogWriter {
@@ -20,6 +21,12 @@ func (lw *LogWriter) Write(m []byte) (n int, err error) {
 
 	// Convert the data to a string
 	message := strings.TrimSpace(string(m))
+	msgLowerAll := strings.ToLower(message)
+
+	// Suppress noisy Windows process-kill signal that surfaces as exit status 1
+	if runtime.GOOS == "windows" && strings.Contains(msgLowerAll, "exit status 1") {
+		return len(m), nil
+	}
 
 	// Check if the message contains a crash
 	if crashRegex.MatchString(message) {

xray/process.go

@@ -9,12 +9,13 @@ import (
 	"os"
 	"os/exec"
 	"runtime"
+	"strings"
 	"syscall"
 	"time"
 
-	"x-ui/config"
+	"github.com/mhsanaei/3x-ui/v2/config"
-	"x-ui/logger"
+	"github.com/mhsanaei/3x-ui/v2/logger"
-	"x-ui/util/common"
+	"github.com/mhsanaei/3x-ui/v2/util/common"
 )
 
 func GetBinaryName() string {
@@ -224,6 +225,15 @@ func (p *process) Start() (err error) {
 	go func() {
 		err := cmd.Run()
 		if err != nil {
+			// On Windows, killing the process results in "exit status 1" which isn't an error for us
+			if runtime.GOOS == "windows" {
+				errStr := strings.ToLower(err.Error())
+				if strings.Contains(errStr, "exit status 1") {
+					// Suppress noisy log on graceful stop
+					p.exitErr = err
+					return
+				}
+			}
 			logger.Error("Failure in running xray-core:", err)
 			p.exitErr = err
 		}