enhancements

3 files changed, 34 insertions, 20 deletions

diff --git a/web/html/component/aClientTable.html b/web/html/component/aClientTable.html
index 0626c334..0164161f 100644
--- a/web/html/component/aClientTable.html
+++ b/web/html/component/aClientTable.html
@@ -49,9 +49,9 @@
   <a-space direction="horizontal" :size="2">
     <a-tooltip>
       <template slot="title">
-        <template v-if="isClientDepleted">{{ i18n "depleted" }}</template>
-        <template v-if="!isClientDepleted && !client.enable">{{ i18n "disabled" }}</template>
-        <template v-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</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>
       <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-badge>
     </a-tooltip>
@@ -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>
diff --git a/web/html/inbounds.html b/web/html/inbounds.html
index 5f17c98b..bea8e8d9 100644
--- a/web/html/inbounds.html
+++ b/web/html/inbounds.html
@@ -1434,15 +1434,19 @@
         clientStats = dbInbound.clientStats ? dbInbound.clientStats.find(stats => stats.email === email) : null;
         return clientStats ? clientStats['enable'] : true;
       },
-      // Returns true when client's traffic is exhausted or expiry time is passed
       isClientDepleted(dbInbound, email) {
         if (!email || !dbInbound || !dbInbound.clientStats) return false;
         const stats = dbInbound.clientStats.find(s => s.email === email);
         if (!stats) return false;
-        const now = new Date().getTime();
-        const exhausted = stats.total > 0 && (stats.up + stats.down) >= stats.total;
-        const expired = stats.expiryTime > 0 && now >= stats.expiryTime;
-        return exhausted || expired;
+        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);
diff --git a/web/html/modals/inbound_info_modal.html b/web/html/modals/inbound_info_modal.html
index 55d9919c..25f43506 100644
--- a/web/html/modals/inbound_info_modal.html
+++ b/web/html/modals/inbound_info_modal.html
@@ -180,9 +180,9 @@
         <tr>
           <td>{{ i18n "status" }}</td>
           <td>
-            <a-tag v-if="isEnable && isActive && !isDepleted" color="green">{{ i18n "enabled" }}</a-tag>
-            <a-tag v-if="!isEnable && !isDepleted">{{ i18n "disabled" }}</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>
           </td>
         </tr>
         <tr v-if="infoModal.clientStats">
@@ -524,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 (
         [
@@ -588,11 +588,21 @@
         return infoModal.dbInbound.isEnable;
       },
       get isDepleted() {
-        const stats = this.infoModal.clientStats;
-        if (!stats) return false;
-        const now = new Date().getTime();
-        const expired = stats.expiryTime > 0 && now >= stats.expiryTime;
-        const exhausted = stats.total > 0 && (stats.up + stats.down) >= stats.total;
+        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;
       },
     },