feat(users): update user table to include status, traffic usage, and expiry date with improved class names

core/scripts/webpanel/assets/js/users.js

@@ -180,10 +180,10 @@ $(function () {
         $("#userTable tbody tr.user-main-row").each(function () {
             let showRow;
             switch (filter) {
-                case "on-hold":    showRow = $(this).find("td:eq(3) i").hasClass("text-warning"); break;
+                case "on-hold":    showRow = $(this).find("td.status-cell i").hasClass("text-warning"); break;
-                case "online":     showRow = $(this).find("td:eq(3) i").hasClass("text-success"); break;
+                case "online":     showRow = $(this).find("td.status-cell i").hasClass("text-success"); break;
-                case "enable":     showRow = $(this).find("td:eq(8) i").hasClass("text-success"); break;
+                case "enable":     showRow = $(this).find("td.enable-cell i").hasClass("text-success"); break;
-                case "disable":    showRow = $(this).find("td:eq(8) i").hasClass("text-danger"); break;
+                case "disable":    showRow = $(this).find("td.enable-cell i").hasClass("text-danger"); break;
                 default:           showRow = true;
             }
             $(this).toggle(showRow).find(".user-checkbox").prop("checked", false);
@@ -278,11 +278,11 @@ $(function () {
         const dataRow = $(event.relatedTarget).closest("tr.user-main-row");
         const url = GET_USER_URL_TEMPLATE.replace('U', user);
 
-        const trafficText = dataRow.find("td:eq(4)").text();
+        const trafficText = dataRow.find("td.traffic-cell").text();
-        const usageDaysText = dataRow.find("td:eq(6)").text();
+        const usageDaysText = dataRow.find("td.usage-days-cell").text();
         const expiryText = usageDaysText.split('/')[1] || "0";
         const note = dataRow.data('note');
-        const statusText = dataRow.find("td:eq(3)").text().trim();
+        const statusText = dataRow.find("td.status-cell").text().trim();
         
         $('#editPasswordError').text('');
         $('#editExpirationDaysError').text('');
@@ -299,7 +299,7 @@ $(function () {
         }
         
         $("#editNote").val(note || '');
-        $("#editBlocked").prop("checked", !dataRow.find("td:eq(8) i").hasClass("text-success"));
+        $("#editBlocked").prop("checked", !dataRow.find("td.enable-cell i").hasClass("text-success"));
         $("#editUnlimitedIp").prop("checked", dataRow.find(".unlimited-ip-cell i").hasClass("text-primary"));
     
         const passwordInput = $("#editPassword");

core/scripts/webpanel/templates/users.html

@@ -128,8 +128,8 @@
                             <th>Username</th>
                             <th class="d-none d-md-table-cell">Status</th>
                             <th class="d-none d-md-table-cell">Traffic Usage</th>
-                            <th class="d-none d-md-table-cell text-nowrap">Expiry Date</th>
                             <th class="d-none d-md-table-cell text-nowrap">Day Usage</th>
+                            <th class="d-none d-md-table-cell text-nowrap">Expiry Date</th>
                             <th class="d-none d-md-table-cell">Enable</th>
                             <th class="d-none d-md-table-cell">Note</th>
                             <th class="d-none d-md-table-cell text-nowrap requires-iplimit-service" style="display: none;">Unlimited IP</th>

core/scripts/webpanel/templates/users_rows.html

@@ -12,7 +12,7 @@
         </td>
         <td>{{ loop.index + (offset if offset is defined else 0) }}</td>
         <td data-username="{{ user.username }}">{{ user.username }}</td>
-        <td class="d-none d-md-table-cell">
+        <td class="d-none d-md-table-cell status-cell">
             {% if user.status == "Online" %}
                 <i class="fas fa-circle text-success"></i> Online
                 {% if user.online_count and user.online_count > 0 %}
@@ -28,10 +28,10 @@
                 <i class="fas fa-circle text-danger"></i> {{ user.status }}
             {% endif %}
         </td>
-        <td class="d-none d-md-table-cell">{{ user.traffic_used }}</td>
+        <td class="d-none d-md-table-cell traffic-cell">{{ user.traffic_used }}</td>
-        <td class="d-none d-md-table-cell">{{ user.expiry_date }}</td>
+        <td class="d-none d-md-table-cell usage-days-cell">{{ user.usage_days_display }}</td>
-        <td class="d-none d-md-table-cell">{{ user.usage_days_display }}</td>
+        <td class="d-none d-md-table-cell expiry-date-cell">{{ user.expiry_date }}</td>
-        <td class="d-none d-md-table-cell">
+        <td class="d-none d-md-table-cell enable-cell">
             {% if user.enable %}
             <i class="fas fa-check-circle text-success"></i>
             {% else %}
@@ -99,8 +99,8 @@
                     </span>
                 </p>
                 <p><strong>Traffic Usage:</strong> <span>{{ user.traffic_used }}</span></p>
-                <p><strong>Expiry Date:</strong> <span>{{ user.expiry_date }}</span></p>
                 <p><strong>Day Usage:</strong> <span>{{ user.usage_days_display }}</span></p>
+                <p><strong>Expiry Date:</strong> <span>{{ user.expiry_date }}</span></p>
                 <p><strong>Note:</strong> <span>{{ user.note or 'N/A' }}</span></p>
                 <p><strong>Enable:</strong>
                     <span>