From 704f0988f3543788507f7509b7b2d1dd29b123aa Mon Sep 17 00:00:00 2001
From: Seyed Mahdi <39972836+SeyedHashtag@users.noreply.github.com>
Date: Tue, 8 Apr 2025 20:25:13 +0330
Subject: [PATCH] Refactor: Update traffic usage display and calculations in
 user model and template

---
 .../scripts/webpanel/routers/user/viewmodel.py | 18 ++++++++++++++++--
 core/scripts/webpanel/templates/users.html     | 16 +++++++++-------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/core/scripts/webpanel/routers/user/viewmodel.py b/core/scripts/webpanel/routers/user/viewmodel.py
index 41ed225..477cdc4 100644
--- a/core/scripts/webpanel/routers/user/viewmodel.py
+++ b/core/scripts/webpanel/routers/user/viewmodel.py
@@ -83,12 +83,26 @@ class User(BaseModel):
             except ValueError:
                 pass
 
-        traffic_used = User.__format_traffic(user_data.get("download_bytes", 0) + user_data.get("upload_bytes", 0))
+        # Calculate traffic values and percentage
+        used_bytes = user_data.get("download_bytes", 0) + user_data.get("upload_bytes", 0)
+        quota_bytes = user_data.get('max_download_bytes', 0)
+        
+        # Format individual values for combining
+        used_formatted = User.__format_traffic(used_bytes)
+        quota_formatted = User.__format_traffic(quota_bytes)
+        
+        # Calculate percentage if quota is not zero
+        percentage = 0
+        if quota_bytes > 0:
+            percentage = (used_bytes / quota_bytes) * 100
+        
+        # Combine the values with percentage
+        traffic_used = f"{used_formatted}/{quota_formatted} ({percentage:.1f}%)"
 
         return {
             'username': user_data['username'],
             'status': user_data.get('status', 'Not Active'),
-            'quota': User.__format_traffic(user_data.get('max_download_bytes', 0)),
+            'quota': User.__format_traffic(quota_bytes),
             'traffic_used': traffic_used,
             'expiry_date': expiry_date,
             'expiry_days': expiration_days,
diff --git a/core/scripts/webpanel/templates/users.html b/core/scripts/webpanel/templates/users.html
index 096e618..3bf8876 100644
--- a/core/scripts/webpanel/templates/users.html
+++ b/core/scripts/webpanel/templates/users.html
@@ -75,8 +75,7 @@
                             </th>
                             <th>Status</th>
                             <th>Username</th>
-                            <th>Quota</th>
-                            <th>Used</th>
+                            <th>Traffic Usage</th>
                             <th class="text-nowrap">Expiry Date</th>
                             <th class="text-nowrap">Expiry Days</th>
                             <th>Enable</th>
@@ -100,7 +99,6 @@
                                 {% endif %}
                             </td>
                             <td data-username="{{ user.username }}">{{ user.username }}</td>
-                            <td>{{ user.quota }}</td>
                             <td>{{ user.traffic_used }}</td>
                             <td>{{ user.expiry_date }}</td>
                             <td>{{ user.expiry_days }}</td>
@@ -501,9 +499,11 @@
                         const username = $("#originalUsername").val();
                         const row = $(`td[data-username='${username}']`).closest("tr");
                         row.find("td:eq(2)").text($("#editUsername").val());
+                        // Update traffic usage display after edit (note: this is now just one column)
+                        // The backend will format this properly on page reload
                         row.find("td:eq(3)").text($("#editTrafficLimit").val() + " GB");
-                        row.find("td:eq(6)").text($("#editExpirationDays").val());
-                        row.find("td:eq(7) i")
+                        row.find("td:eq(5)").text($("#editExpirationDays").val());
+                        row.find("td:eq(6) i")
                             .removeClass()
                             .addClass(
                                 $("#editBlocked").prop("checked")
@@ -523,9 +523,11 @@
                         const username = $("#originalUsername").val();
                         const row = $(`td[data-username='${username}']`).closest("tr");
                         row.find("td:eq(2)").text($("#editUsername").val());
+                        // Update traffic usage display after edit (note: this is now just one column)
+                        // The backend will format this properly on page reload
                         row.find("td:eq(3)").text($("#editTrafficLimit").val() + " GB");
-                        row.find("td:eq(6)").text($("#editExpirationDays").val());
-                        row.find("td:eq(7) i")
+                        row.find("td:eq(5)").text($("#editExpirationDays").val());
+                        row.find("td:eq(6) i")
                             .removeClass()
                             .addClass(
                                 $("#editBlocked").prop("checked")