From 7cab70c7823be1fe2b905e9517018685c3d0d383 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 8 May 2026 14:00:39 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20Phase=205f-vi=20=E2=80=94=20p?=
 =?UTF-8?q?er-inbound=20client=20expand-row=20table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each multi-user inbound row in the list now expands to show its
client roster, mirroring the legacy aClientTable component.

- ClientRowTable.vue: inner a-table with full desktop column set
  (action icons / enable / online / client-with-status-dot / traffic
  with progress bar / all-time / expiry with reset cycle) and a
  collapsed mobile variant (single dropdown menu + popover info).
  Self-contained: stats are looked up via a per-inbound email->stats
  Map; per-client confirms (reset/delete) live on the row.
- The component emits typed events (edit/qrcode/info/reset-traffic/
  delete/toggle-enable) — InboundsPage routes them back to the
  existing client and info modals (with `findClientIndex` so the
  modal opens focused on the right client).
- InboundList.vue: hooks ClientRowTable into the a-table's
  expandedRowRender slot; row-class-name `hide-expand-icon` and a
  scoped CSS rule hide the chevron for non-multi-user inbounds
  (HTTP/Mixed/Tunnel/WireGuard/SS-single) so they keep looking flat.
- toggle-enable-client routes through updateClient with the same
  `{id, settings: '{"clients": [...]}'}` shape as the other modals,
  so backend parsing stays single-pathed.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/pages/inbounds/ClientRowTable.vue     | 501 ++++++++++++++++++
 frontend/src/pages/inbounds/InboundList.vue   |  39 ++
 frontend/src/pages/inbounds/InboundsPage.vue  |  92 +++-
 3 files changed, 625 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/pages/inbounds/ClientRowTable.vue

diff --git a/frontend/src/pages/inbounds/ClientRowTable.vue b/frontend/src/pages/inbounds/ClientRowTable.vue
new file mode 100644
index 00000000..71e9f400
--- /dev/null
+++ b/frontend/src/pages/inbounds/ClientRowTable.vue
@@ -0,0 +1,501 @@
+<script setup>
+import { computed } from 'vue';
+import {
+  EditOutlined,
+  InfoCircleOutlined,
+  QrcodeOutlined,
+  RetweetOutlined,
+  DeleteOutlined,
+  EllipsisOutlined,
+} from '@ant-design/icons-vue';
+import { Modal } from 'ant-design-vue';
+
+import { SizeFormatter, IntlUtil, ColorUtils } from '@/utils';
+
+// Per-inbound expand-row table. Rendered inside the inbound list's
+// a-table#expandedRowRender slot for any inbound where
+// `dbInbound.isMultiUser()` returns true. Mirrors the legacy
+// component/aClientTable layout.
+//
+// The component itself does no API calls — it emits typed events the
+// parent routes back to the existing modals/handlers (edit, qr, info,
+// reset traffic, delete, toggle-enable).
+
+const props = defineProps({
+  dbInbound: { type: Object, required: true },
+  isMobile: { type: Boolean, default: false },
+  trafficDiff: { type: Number, default: 0 },
+  expireDiff: { type: Number, default: 0 },
+  onlineClients: { type: Array, default: () => [] },
+  lastOnlineMap: { type: Object, default: () => ({}) },
+  isDarkTheme: { type: Boolean, default: false },
+});
+
+const emit = defineEmits([
+  'edit-client',
+  'qrcode-client',
+  'info-client',
+  'reset-traffic-client',
+  'delete-client',
+  'toggle-enable-client',
+]);
+
+// Surface the parsed Inbound so we can read its clients array
+// directly. legacy used dbInbound.toInbound().clients via a
+// `getInboundClients` helper; the parsed cache is invalidated on
+// every refresh by useInbounds.setInbounds.
+const inbound = computed(() => props.dbInbound.toInbound());
+const clients = computed(() => inbound.value?.clients || []);
+
+// === Per-client stats lookup =======================================
+// Mirrors the legacy lazy-built email->stats Map cached on the
+// dbInbound; recomputed when the underlying clientStats array is
+// replaced by a refresh.
+const statsMap = computed(() => {
+  const m = new Map();
+  for (const cs of (props.dbInbound.clientStats || [])) m.set(cs.email, cs);
+  return m;
+});
+function statsFor(email) {
+  return email ? statsMap.value.get(email) : null;
+}
+
+function getUp(email) { return statsFor(email)?.up || 0; }
+function getDown(email) { return statsFor(email)?.down || 0; }
+function getSum(email) { const s = statsFor(email); return s ? s.up + s.down : 0; }
+function getRem(email) {
+  const s = statsFor(email);
+  if (!s) return 0;
+  const r = s.total - s.up - s.down;
+  return r > 0 ? r : 0;
+}
+function getAllTime(email) {
+  const s = statsFor(email);
+  if (!s) return 0;
+  // allTime is the cumulative-historical counter; never let it dip
+  // below up+down (manual edits / partial migrations can push it under).
+  const current = (s.up || 0) + (s.down || 0);
+  return s.allTime > current ? s.allTime : current;
+}
+function isClientDepleted(email) {
+  const s = statsFor(email);
+  if (!s) return false;
+  const total = s.total ?? 0;
+  const used = (s.up ?? 0) + (s.down ?? 0);
+  if (total > 0 && used >= total) return true;
+  const exp = s.expiryTime ?? 0;
+  if (exp > 0 && Date.now() >= exp) return true;
+  return false;
+}
+function isClientOnline(email) {
+  return !!email && props.onlineClients.includes(email);
+}
+function lastOnlineLabel(email) {
+  const ts = props.lastOnlineMap[email];
+  if (!ts) return '-';
+  return IntlUtil.formatDate(ts);
+}
+
+function statsProgress(email) {
+  const s = statsFor(email);
+  if (!s) return 0;
+  if (s.total === 0) return 100;
+  return (100 * (s.down + s.up)) / s.total;
+}
+function expireProgress(expTime, reset) {
+  const now = Date.now();
+  const remainedSec = expTime < 0 ? -expTime / 1000 : (expTime - now) / 1000;
+  const resetSec = reset * 86400;
+  if (remainedSec >= resetSec) return 0;
+  return 100 * (1 - remainedSec / resetSec);
+}
+function clientStatsColor(email) {
+  return ColorUtils.clientUsageColor(statsFor(email), props.trafficDiff);
+}
+function statsExpColor(email) {
+  if (!email) return '#7a316f';
+  const s = statsFor(email);
+  if (!s) return '#7a316f';
+  const a = ColorUtils.usageColor(s.down + s.up, props.trafficDiff, s.total);
+  const b = ColorUtils.usageColor(Date.now(), props.expireDiff, s.expiryTime);
+  if (a === 'red' || b === 'red') return '#cf3c3c';
+  if (a === 'orange' || b === 'orange') return '#f37b24';
+  if (a === 'green' || b === 'green') return '#008771';
+  return '#7a316f';
+}
+
+// === Helpers ========================================================
+const isRemovable = computed(() => clients.value.length > 1);
+
+function totalGbDisplay(client) {
+  if (!client.totalGB || client.totalGB <= 0) return '∞';
+  // The model class exposes ._totalGB as bytes->GB for the form, but
+  // the table shows a coarser rounding. Match legacy: tail with 'GB'.
+  return `${Math.round((client.totalGB / 1073741824) * 100) / 100} GB`;
+}
+
+function statusBadgeColor(client) {
+  if (!client.enable) return props.isDarkTheme ? '#2c3950' : '#bcbcbc';
+  return statsExpColor(client.email);
+}
+
+// === Action confirms (mounted on the row, not a modal) ==============
+function confirmReset(client) {
+  Modal.confirm({
+    title: `Reset traffic for ${client.email}?`,
+    content: 'Resets up/down counters to 0 for this client.',
+    okText: 'Reset',
+    cancelText: 'Cancel',
+    onOk: () => emit('reset-traffic-client', { dbInbound: props.dbInbound, client }),
+  });
+}
+function confirmDelete(client) {
+  Modal.confirm({
+    title: `Delete client ${client.email}?`,
+    content: 'This cannot be undone.',
+    okText: 'Delete',
+    okType: 'danger',
+    cancelText: 'Cancel',
+    onOk: () => emit('delete-client', { dbInbound: props.dbInbound, client }),
+  });
+}
+
+// === Columns ========================================================
+// Two layouts: desktop has icon-row actions across; mobile collapses
+// the per-row actions into a single dropdown + an info popover.
+const desktopColumns = [
+  { title: 'Action', key: 'actions', width: 140 },
+  { title: 'Enable', key: 'enable', width: 60 },
+  { title: 'Online', key: 'online', width: 80 },
+  { title: 'Client', key: 'client', width: 160 },
+  { title: 'Traffic', key: 'traffic', align: 'center', width: 200 },
+  { title: 'All-time', key: 'allTime', align: 'center', width: 110 },
+  { title: 'Expiry', key: 'expiryTime', align: 'center', width: 180 },
+];
+const mobileColumns = [
+  { title: 'Action', key: 'actionMenu', align: 'center', width: 10 },
+  { title: 'Client', key: 'client', align: 'left', width: 90 },
+  { title: 'Info', key: 'info', align: 'center', width: 10 },
+];
+
+const columns = computed(() => (props.isMobile ? mobileColumns : desktopColumns));
+</script>
+
+<template>
+  <a-table
+    :columns="columns"
+    :data-source="clients"
+    :row-key="(c) => c.email || c.id || c.password"
+    :pagination="false"
+    :scroll="isMobile ? {} : { x: 'max-content' }"
+    size="small"
+    class="client-row-table"
+  >
+    <template #bodyCell="{ column, record }">
+      <!-- ============== Desktop action icons ============== -->
+      <template v-if="column.key === 'actions'">
+        <a-space :size="6">
+          <a-tooltip v-if="dbInbound.hasLink()" title="QR code">
+            <QrcodeOutlined
+              class="row-icon"
+              @click="emit('qrcode-client', { dbInbound, client: record })"
+            />
+          </a-tooltip>
+          <a-tooltip title="Edit">
+            <EditOutlined
+              class="row-icon"
+              @click="emit('edit-client', { dbInbound, client: record })"
+            />
+          </a-tooltip>
+          <a-tooltip title="Info">
+            <InfoCircleOutlined
+              class="row-icon"
+              @click="emit('info-client', { dbInbound, client: record })"
+            />
+          </a-tooltip>
+          <a-tooltip v-if="record.email" title="Reset traffic">
+            <RetweetOutlined class="row-icon" @click="confirmReset(record)" />
+          </a-tooltip>
+          <a-tooltip v-if="isRemovable" title="Delete">
+            <DeleteOutlined class="row-icon danger" @click="confirmDelete(record)" />
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- ============== Enable switch ============== -->
+      <template v-else-if="column.key === 'enable'">
+        <a-switch
+          :checked="record.enable"
+          @change="(next) => emit('toggle-enable-client', { dbInbound, client: record, next })"
+        />
+      </template>
+
+      <!-- ============== Online tag ============== -->
+      <template v-else-if="column.key === 'online'">
+        <a-popover>
+          <template #content>Last online: {{ lastOnlineLabel(record.email) }}</template>
+          <a-tag v-if="record.enable && isClientOnline(record.email)" color="green">online</a-tag>
+          <a-tag v-else>offline</a-tag>
+        </a-popover>
+      </template>
+
+      <!-- ============== Client identity (status dot + email + comment) ============== -->
+      <template v-else-if="column.key === 'client'">
+        <a-space :size="2" class="client-id-cell" :style="{ flexWrap: 'nowrap' }">
+          <a-tooltip>
+            <template #title>
+              <template v-if="isClientDepleted(record.email)">depleted</template>
+              <template v-else-if="!record.enable">disabled</template>
+              <template v-else-if="isClientOnline(record.email)">online</template>
+              <template v-else>offline</template>
+            </template>
+            <a-badge :color="statusBadgeColor(record)" />
+          </a-tooltip>
+          <a-space direction="vertical" :size="2" class="client-id-stack">
+            <a-tooltip :title="record.email">
+              <span class="client-email">{{ record.email }}</span>
+            </a-tooltip>
+            <span v-if="record.comment && record.comment.trim()" class="client-comment">
+              {{ record.comment.length > 50 ? record.comment.substring(0, 47) + '…' : record.comment }}
+            </span>
+          </a-space>
+        </a-space>
+      </template>
+
+      <!-- ============== Traffic with progress bar ============== -->
+      <template v-else-if="column.key === 'traffic'">
+        <a-popover>
+          <template v-if="record.email" #content>
+            <table cellpadding="2">
+              <tbody>
+                <tr>
+                  <td>↑ {{ SizeFormatter.sizeFormat(getUp(record.email)) }}</td>
+                  <td>↓ {{ SizeFormatter.sizeFormat(getDown(record.email)) }}</td>
+                </tr>
+                <tr v-if="record.totalGB > 0">
+                  <td>Remaining</td>
+                  <td>{{ SizeFormatter.sizeFormat(getRem(record.email)) }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </template>
+          <div class="traffic-cell">
+            <div class="traffic-text">{{ SizeFormatter.sizeFormat(getSum(record.email)) }}</div>
+            <div class="traffic-bar" v-if="!record.enable">
+              <a-progress
+                :stroke-color="isDarkTheme ? 'rgb(72,84,105)' : '#bcbcbc'"
+                :show-info="false"
+                :percent="statsProgress(record.email)"
+              />
+            </div>
+            <div class="traffic-bar" v-else-if="record.totalGB > 0">
+              <a-progress
+                :stroke-color="clientStatsColor(record.email)"
+                :show-info="false"
+                :status="isClientDepleted(record.email) ? 'exception' : ''"
+                :percent="statsProgress(record.email)"
+              />
+            </div>
+            <div class="traffic-bar infinite" v-else>
+              <a-progress :show-info="false" :percent="100" />
+            </div>
+            <div class="traffic-text">{{ totalGbDisplay(record) }}</div>
+          </div>
+        </a-popover>
+      </template>
+
+      <!-- ============== All-time ============== -->
+      <template v-else-if="column.key === 'allTime'">
+        <a-tag>{{ SizeFormatter.sizeFormat(getAllTime(record.email)) }}</a-tag>
+      </template>
+
+      <!-- ============== Expiry ============== -->
+      <template v-else-if="column.key === 'expiryTime'">
+        <template v-if="record.expiryTime !== 0 && record.reset > 0">
+          <a-popover>
+            <template #content>
+              <span v-if="record.expiryTime < 0">Delayed start</span>
+              <span v-else>{{ IntlUtil.formatDate(record.expiryTime) }}</span>
+            </template>
+            <div class="traffic-cell">
+              <div class="traffic-text">{{ IntlUtil.formatRelativeTime(record.expiryTime) }}</div>
+              <div class="traffic-bar infinite">
+                <a-progress
+                  :show-info="false"
+                  :status="isClientDepleted(record.email) ? 'exception' : ''"
+                  :percent="expireProgress(record.expiryTime, record.reset)"
+                />
+              </div>
+              <div class="traffic-text">{{ record.reset }}d</div>
+            </div>
+          </a-popover>
+        </template>
+        <template v-else>
+          <a-popover v-if="record.expiryTime !== 0">
+            <template #content>
+              <span v-if="record.expiryTime < 0">Delayed start</span>
+              <span v-else>{{ IntlUtil.formatDate(record.expiryTime) }}</span>
+            </template>
+            <a-tag
+              :style="{ minWidth: '50px', border: 'none' }"
+              :color="ColorUtils.userExpiryColor(expireDiff, record, isDarkTheme)"
+            >
+              {{ IntlUtil.formatRelativeTime(record.expiryTime) }}
+            </a-tag>
+          </a-popover>
+          <a-tag
+            v-else
+            :color="ColorUtils.userExpiryColor(expireDiff, record, isDarkTheme)"
+            :style="{ border: 'none' }"
+          >
+            ∞
+          </a-tag>
+        </template>
+      </template>
+
+      <!-- ============== Mobile-only action menu ============== -->
+      <template v-else-if="column.key === 'actionMenu'">
+        <a-dropdown :trigger="['click']">
+          <EllipsisOutlined class="row-icon" @click.prevent />
+          <template #overlay>
+            <a-menu>
+              <a-menu-item
+                v-if="dbInbound.hasLink()"
+                @click="emit('qrcode-client', { dbInbound, client: record })"
+              ><QrcodeOutlined /> QR code</a-menu-item>
+              <a-menu-item @click="emit('edit-client', { dbInbound, client: record })">
+                <EditOutlined /> Edit
+              </a-menu-item>
+              <a-menu-item @click="emit('info-client', { dbInbound, client: record })">
+                <InfoCircleOutlined /> Info
+              </a-menu-item>
+              <a-menu-item v-if="record.email" @click="confirmReset(record)">
+                <RetweetOutlined /> Reset traffic
+              </a-menu-item>
+              <a-menu-item v-if="isRemovable" @click="confirmDelete(record)">
+                <DeleteOutlined /> <span class="danger">Delete</span>
+              </a-menu-item>
+              <a-menu-item>
+                <a-switch
+                  size="small"
+                  :checked="record.enable"
+                  @change="(next) => emit('toggle-enable-client', { dbInbound, client: record, next })"
+                />
+                Enable
+              </a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
+      </template>
+
+      <!-- ============== Mobile info popover ============== -->
+      <template v-else-if="column.key === 'info'">
+        <a-popover :placement="isMobile ? 'bottomLeft' : 'bottomRight'" trigger="click">
+          <template #content>
+            <table cellpadding="2">
+              <tbody>
+                <tr>
+                  <td colspan="2" class="text-center">Traffic</td>
+                </tr>
+                <tr>
+                  <td class="num-cell">
+                    {{ SizeFormatter.sizeFormat(getSum(record.email)) }}
+                  </td>
+                  <td class="num-cell">{{ totalGbDisplay(record) }}</td>
+                </tr>
+                <tr>
+                  <td colspan="2" class="text-center">
+                    <a-divider style="margin: 0" />
+                    Expiry
+                  </td>
+                </tr>
+                <tr>
+                  <td colspan="2" class="text-center">
+                    <a-tag v-if="record.expiryTime > 0">
+                      {{ IntlUtil.formatRelativeTime(record.expiryTime) }}
+                    </a-tag>
+                    <a-tag v-else-if="record.expiryTime < 0" color="green">
+                      {{ -record.expiryTime / 86400000 }} d (delayed)
+                    </a-tag>
+                    <a-tag v-else color="purple">∞</a-tag>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </template>
+          <a-button shape="round" size="small">
+            <InfoCircleOutlined />
+          </a-button>
+        </a-popover>
+      </template>
+    </template>
+  </a-table>
+</template>
+
+<style scoped>
+.client-row-table {
+  margin: -10px 22px -21px;
+}
+:deep(.client-row-table .ant-table-tbody > tr > td) {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.row-icon {
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 4px;
+}
+.row-icon.danger,
+.danger {
+  color: #ff4d4f;
+}
+
+.client-id-cell {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+.client-id-stack {
+  min-width: 0;
+  overflow: hidden;
+}
+.client-email {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+  display: inline-block;
+}
+.client-comment {
+  font-size: 11px;
+  opacity: 0.7;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+  display: inline-block;
+}
+
+.traffic-cell {
+  display: grid;
+  grid-template-columns: minmax(60px, auto) 1fr minmax(50px, auto);
+  align-items: center;
+  gap: 6px;
+  min-width: 180px;
+}
+.traffic-text {
+  font-size: 12px;
+  white-space: nowrap;
+}
+.traffic-bar {
+  min-width: 40px;
+}
+.traffic-bar.infinite :deep(.ant-progress-inner) {
+  background: rgba(122, 49, 111, 0.15);
+}
+
+.text-center { text-align: center; }
+.num-cell { text-align: right; font-size: 12px; padding: 2px 6px; }
+</style>
diff --git a/frontend/src/pages/inbounds/InboundList.vue b/frontend/src/pages/inbounds/InboundList.vue
index 0f0468c2..47508fc8 100644
--- a/frontend/src/pages/inbounds/InboundList.vue
+++ b/frontend/src/pages/inbounds/InboundList.vue
@@ -27,16 +27,19 @@ import {
 import { HttpUtil, ObjectUtil, SizeFormatter, IntlUtil, ColorUtils } from '@/utils';
 import { DBInbound } from '@/models/dbinbound.js';
 import { Inbound } from '@/models/inbound.js';
+import ClientRowTable from './ClientRowTable.vue';
 
 const props = defineProps({
   dbInbounds: { type: Array, required: true },
   clientCount: { type: Object, required: true },
   onlineClients: { type: Array, required: true },
+  lastOnlineMap: { type: Object, default: () => ({}) },
   refreshing: { type: Boolean, default: false },
   expireDiff: { type: Number, default: 0 },
   trafficDiff: { type: Number, default: 0 },
   pageSize: { type: Number, default: 0 },
   isMobile: { type: Boolean, default: false },
+  isDarkTheme: { type: Boolean, default: false },
   subEnable: { type: Boolean, default: false },
 });
 
@@ -45,6 +48,13 @@ const emit = defineEmits([
   'add-inbound',
   'general-action',
   'row-action',
+  // Per-client events surfaced from the expand-row table.
+  'edit-client',
+  'qrcode-client',
+  'info-client',
+  'reset-traffic-client',
+  'delete-client',
+  'toggle-enable-client',
 ]);
 
 // ============ Toolbar / search & filter =============================
@@ -302,7 +312,30 @@ function showQrCodeMenu(dbInbound) {
         :scroll="isMobile ? {} : { x: 1000 }"
         :style="{ marginTop: '10px' }"
         size="small"
+        :row-class-name="(r) => (r.isMultiUser() ? '' : 'hide-expand-icon')"
       >
+        <!-- Per-inbound client list, expanded by clicking the row's
+             default expand chevron. Hidden via row-class-name for
+             non-multi-user inbounds (matches legacy behavior). -->
+        <template #expandedRowRender="{ record }">
+          <ClientRowTable
+            v-if="record.isMultiUser()"
+            :db-inbound="record"
+            :is-mobile="isMobile"
+            :traffic-diff="trafficDiff"
+            :expire-diff="expireDiff"
+            :online-clients="onlineClients"
+            :last-online-map="lastOnlineMap"
+            :is-dark-theme="isDarkTheme"
+            @edit-client="(p) => emit('edit-client', p)"
+            @qrcode-client="(p) => emit('qrcode-client', p)"
+            @info-client="(p) => emit('info-client', p)"
+            @reset-traffic-client="(p) => emit('reset-traffic-client', p)"
+            @delete-client="(p) => emit('delete-client', p)"
+            @toggle-enable-client="(p) => emit('toggle-enable-client', p)"
+          />
+        </template>
+
         <template #bodyCell="{ column, record }">
           <!-- ============== Action dropdown ============== -->
           <template v-if="column.key === 'action'">
@@ -517,4 +550,10 @@ function showQrCodeMenu(dbInbound) {
 .danger-item {
   color: #ff4d4f;
 }
+
+/* Hide the expand chevron on rows whose inbound has no client list
+ * (HTTP/Mixed/Tunnel/WireGuard single-config). */
+:deep(.hide-expand-icon .ant-table-row-expand-icon) {
+  visibility: hidden;
+}
 </style>
diff --git a/frontend/src/pages/inbounds/InboundsPage.vue b/frontend/src/pages/inbounds/InboundsPage.vue
index 6c0d3b4c..6dfd9a5a 100644
--- a/frontend/src/pages/inbounds/InboundsPage.vue
+++ b/frontend/src/pages/inbounds/InboundsPage.vue
@@ -109,12 +109,82 @@ function checkFallback(dbInbound) {
   return dbInbound;
 }
 
-function findClientIndex(dbInbound) {
-  // For now we always show client 0 — multi-client navigation lives
-  // in the per-inbound expand-row table (5f-vi). A future commit will
-  // route client.email through this helper.
-  void dbInbound;
-  return 0;
+function findClientIndex(dbInbound, client) {
+  if (!client) return 0;
+  const inbound = dbInbound.toInbound();
+  const clients = inbound?.clients || [];
+  const idx = clients.findIndex((c) => {
+    if (!c) return false;
+    switch (dbInbound.protocol) {
+      case 'trojan':
+      case 'shadowsocks':
+        return c.password === client.password && c.email === client.email;
+      default:
+        return c.id === client.id && c.email === client.email;
+    }
+  });
+  return idx >= 0 ? idx : 0;
+}
+
+function getClientId(protocol, client) {
+  switch (protocol) {
+    case 'trojan': return client.password;
+    case 'shadowsocks': return client.email;
+    case 'hysteria': return client.auth;
+    default: return client.id;
+  }
+}
+
+// === Per-client handlers (called from the expand-row table) =========
+function onEditClient({ dbInbound, client }) {
+  clientMode.value = 'edit';
+  clientDbInbound.value = dbInbound;
+  clientIndex.value = findClientIndex(dbInbound, client);
+  clientOpen.value = true;
+}
+
+function onQrcodeClient({ dbInbound, client }) {
+  // Reuse the inbound info modal focused on the chosen client — that's
+  // where per-client share links and the per-link QRs live.
+  infoDbInbound.value = checkFallback(dbInbound);
+  infoClientIndex.value = findClientIndex(dbInbound, client);
+  infoOpen.value = true;
+}
+
+function onInfoClient({ dbInbound, client }) {
+  infoDbInbound.value = checkFallback(dbInbound);
+  infoClientIndex.value = findClientIndex(dbInbound, client);
+  infoOpen.value = true;
+}
+
+async function onResetTrafficClient({ dbInbound, client }) {
+  const msg = await HttpUtil.post(
+    `/panel/api/inbounds/${dbInbound.id}/resetClientTraffic/${client.email}`,
+  );
+  if (msg?.success) await refresh();
+}
+
+async function onDeleteClient({ dbInbound, client }) {
+  const clientId = getClientId(dbInbound.protocol, client);
+  const msg = await HttpUtil.post(`/panel/api/inbounds/${dbInbound.id}/delClient/${clientId}`);
+  if (msg?.success) await refresh();
+}
+
+async function onToggleEnableClient({ dbInbound, client, next }) {
+  // Mirror legacy: clone the parsed inbound, flip enable on the matching
+  // client, and post the whole client back through updateClient. This
+  // keeps the wire shape identical to the modal save path.
+  const inbound = dbInbound.toInbound();
+  const clients = inbound?.clients || [];
+  const idx = findClientIndex(dbInbound, client);
+  if (idx < 0 || !clients[idx]) return;
+  clients[idx].enable = next;
+  const clientId = getClientId(dbInbound.protocol, clients[idx]);
+  const msg = await HttpUtil.post(`/panel/api/inbounds/updateClient/${clientId}`, {
+    id: dbInbound.id,
+    settings: `{"clients": [${clients[idx].toString()}]}`,
+  });
+  if (msg?.success) await refresh();
 }
 
 function onAddInbound() {
@@ -258,7 +328,7 @@ function onRowAction({ key, dbInbound }) {
       break;
     case 'showInfo':
       infoDbInbound.value = checkFallback(dbInbound);
-      infoClientIndex.value = findClientIndex(dbInbound);
+      infoClientIndex.value = findClientIndex(dbInbound, null);
       infoOpen.value = true;
       break;
     case 'qrcode':
@@ -364,6 +434,8 @@ function onRowAction({ key, dbInbound }) {
                   :db-inbounds="dbInbounds"
                   :client-count="clientCount"
                   :online-clients="onlineClients"
+                  :last-online-map="lastOnlineMap"
+                  :is-dark-theme="themeState.isDark"
                   :refreshing="refreshing"
                   :expire-diff="expireDiff"
                   :traffic-diff="trafficDiff"
@@ -374,6 +446,12 @@ function onRowAction({ key, dbInbound }) {
                   @add-inbound="onAddInbound"
                   @general-action="onGeneralAction"
                   @row-action="onRowAction"
+                  @edit-client="onEditClient"
+                  @qrcode-client="onQrcodeClient"
+                  @info-client="onInfoClient"
+                  @reset-traffic-client="onResetTrafficClient"
+                  @delete-client="onDeleteClient"
+                  @toggle-enable-client="onToggleEnableClient"
                 />
               </a-col>
             </a-row>