refactor(frontend): 统一管理页面工具条布局和操作列样式

## 修复内容

### 1. 统一操作列按钮样式
- 所有操作列按钮统一为"图标+文字"垂直排列样式
- UsersView: 编辑和更多按钮添加文字标签
- 与 AccountsView、GroupsView 等页面保持一致

### 2. 统一顶部工具条布局（6个管理页面）
- 使用 flex + justify-between 布局
- 左侧：模糊搜索框、筛选器（可多行排列）
- 右侧：刷新、创建等操作按钮（靠右对齐）
- 响应式：宽度不够时右侧按钮自动换行到上一行

### 3. 修复的页面
- AccountsView: 合并 actions/filters 到单行工具条
- UsersView: 标准左右分栏，操作列添加文字
- GroupsView: 新增搜索框，左右分栏布局
- ProxiesView: 左右分栏，响应式布局
- SubscriptionsView: 新增用户模糊搜索，左右分栏
- UsageView: 补齐所有筛选项，左右分栏

### 4. 新增功能
- GroupsView: 新增分组名称/描述模糊搜索
- SubscriptionsView: 新增用户模糊搜索功能
- UsageView: 补齐 API Key 搜索筛选

### 5. 国际化
- 新增相关搜索框的 placeholder 文案（中英文）

## 技术细节
- 使用 flex-wrap-reverse 实现响应式换行
- 左侧筛选区使用 flex-wrap 支持多行
- 右侧按钮区使用 ml-auto + justify-end 保持右对齐
- 移动端使用 w-full sm:w-* 响应式宽度

## 验证结果
- ✅ TypeScript 类型检查通过
- ✅ 所有页面布局统一
- ✅ 响应式布局正常工作

frontend/src/views/admin/AccountsView.vue

@@ -1,8 +1,26 @@
 <template>
   <AppLayout>
     <TablePageLayout>
-      <template #actions><AccountTableActions :loading="loading" @refresh="load" @sync="showSync = true" @create="showCreate = true" /></template>
-      <template #filters><AccountTableFilters v-model:searchQuery="params.search" :filters="params" @change="reload" @update:searchQuery="debouncedReload" /></template>
+      <template #filters>
+        <div class="flex flex-wrap-reverse items-start justify-between gap-3">
+          <div class="min-w-0 flex-1">
+            <AccountTableFilters
+              v-model:searchQuery="params.search"
+              :filters="params"
+              @change="reload"
+              @update:searchQuery="debouncedReload"
+            />
+          </div>
+          <div class="flex-shrink-0">
+            <AccountTableActions
+              :loading="loading"
+              @refresh="load"
+              @sync="showSync = true"
+              @create="showCreate = true"
+            />
+          </div>
+        </div>
+      </template>
       <template #table>
         <AccountBulkActionsBar :selected-ids="selIds" @delete="handleBulkDelete" @edit="showBulkEdit = true" @clear="selIds = []" @select-page="selectPage" />
         <DataTable :columns="cols" :data="accounts" :loading="loading">

frontend/src/views/admin/GroupsView.vue

@@ -1,49 +1,31 @@
 <template>
   <AppLayout>
     <TablePageLayout>
-      <template #actions>
-        <div class="flex justify-end gap-3">
-          <button
-            @click="loadGroups"
-            :disabled="loading"
-            class="btn btn-secondary"
-            :title="t('common.refresh')"
-          >
-            <svg
-              :class="['h-5 w-5', loading ? 'animate-spin' : '']"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              stroke-width="1.5"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-              />
-            </svg>
-          </button>
-          <button
-            @click="showCreateModal = true"
-            class="btn btn-primary"
-            data-tour="groups-create-btn"
-          >
-            <svg
-              class="mr-2 h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              stroke-width="1.5"
-            >
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-            </svg>
-            {{ t('admin.groups.createGroup') }}
-          </button>
-        </div>
-      </template>
-
       <template #filters>
-        <div class="flex flex-wrap gap-3">
+        <div class="flex flex-col justify-between gap-4 lg:flex-row lg:items-start">
+          <!-- Left: fuzzy search + filters (can wrap to multiple lines) -->
+          <div class="flex flex-1 flex-wrap items-center gap-3">
+            <div class="relative w-full sm:w-72 lg:w-80">
+              <svg
+                class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                />
+              </svg>
+              <input
+                v-model="searchQuery"
+                type="text"
+                :placeholder="t('admin.groups.searchGroups')"
+                class="input pl-10"
+              />
+            </div>
           <Select
             v-model="filters.platform"
             :options="platformFilterOptions"
@@ -65,11 +47,56 @@
             class="w-44"
             @change="loadGroups"
           />
+          </div>
+
+          <!-- Right: actions -->
+          <div class="flex w-full flex-shrink-0 flex-wrap items-center justify-end gap-3 lg:w-auto">
+            <button
+              @click="loadGroups"
+              :disabled="loading"
+              class="btn btn-secondary"
+              :title="t('common.refresh')"
+            >
+              <svg
+                :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                />
+              </svg>
+            </button>
+            <button
+              @click="showCreateModal = true"
+              class="btn btn-primary"
+              data-tour="groups-create-btn"
+            >
+              <svg
+                class="mr-2 h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 4.5v15m7.5-7.5h-15"
+                />
+              </svg>
+              {{ t('admin.groups.createGroup') }}
+            </button>
+          </div>
         </div>
       </template>
 
       <template #table>
-        <DataTable :columns="columns" :data="groups" :loading="loading">
+        <DataTable :columns="columns" :data="displayedGroups" :loading="loading">
           <template #cell-name="{ value }">
             <span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
           </template>
@@ -720,6 +747,7 @@ const subscriptionTypeOptions = computed(() => [
 
 const groups = ref<Group[]>([])
 const loading = ref(false)
+const searchQuery = ref('')
 const filters = reactive({
   platform: '',
   status: '',
@@ -734,6 +762,16 @@ const pagination = reactive({
 
 let abortController: AbortController | null = null
 
+const displayedGroups = computed(() => {
+  const q = searchQuery.value.trim().toLowerCase()
+  if (!q) return groups.value
+  return groups.value.filter((group) => {
+    const name = group.name?.toLowerCase?.() ?? ''
+    const description = group.description?.toLowerCase?.() ?? ''
+    return name.includes(q) || description.includes(q)
+  })
+})
+
 const showCreateModal = ref(false)
 const showEditModal = ref(false)
 const showDeleteDialog = ref(false)

frontend/src/views/admin/ProxiesView.vue

@@ -1,82 +1,92 @@
 <template>
   <AppLayout>
     <TablePageLayout>
-      <template #actions>
-        <div class="flex justify-end gap-3">
-          <button
-          @click="loadProxies"
-          :disabled="loading"
-          class="btn btn-secondary"
-          :title="t('common.refresh')"
-        >
-          <svg
-            :class="['h-5 w-5', loading ? 'animate-spin' : '']"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-            />
-          </svg>
-        </button>
-        <button @click="showCreateModal = true" class="btn btn-primary">
-          <svg
-            class="mr-2 h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-          </svg>
-          {{ t('admin.proxies.createProxy') }}
-        </button>
-        </div>
-      </template>
-
       <template #filters>
-        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-          <div class="relative max-w-md flex-1">
-          <svg
-            class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-            />
-          </svg>
-          <input
-            v-model="searchQuery"
-            type="text"
-            :placeholder="t('admin.proxies.searchProxies')"
-            class="input pl-10"
-            @input="handleSearch"
-          />
+        <!-- Top Toolbar: Left (search + filters) / Right (actions) -->
+        <div class="flex flex-wrap items-start justify-between gap-4">
+          <!-- Left: Fuzzy search + filters (wrap to multiple lines) -->
+          <div class="flex flex-1 flex-wrap items-center gap-3">
+            <!-- Search -->
+            <div class="relative w-full sm:flex-1 sm:min-w-[14rem] sm:max-w-md">
+              <svg
+                class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                />
+              </svg>
+              <input
+                v-model="searchQuery"
+                type="text"
+                :placeholder="t('admin.proxies.searchProxies')"
+                class="input pl-10"
+                @input="handleSearch"
+              />
+            </div>
+
+            <!-- Filters -->
+            <div class="w-full sm:w-40">
+              <Select
+                v-model="filters.protocol"
+                :options="protocolOptions"
+                :placeholder="t('admin.proxies.allProtocols')"
+                @change="loadProxies"
+              />
+            </div>
+            <div class="w-full sm:w-36">
+              <Select
+                v-model="filters.status"
+                :options="statusOptions"
+                :placeholder="t('admin.proxies.allStatus')"
+                @change="loadProxies"
+              />
+            </div>
           </div>
-          <div class="flex flex-wrap gap-3">
-          <Select
-            v-model="filters.protocol"
-            :options="protocolOptions"
-            :placeholder="t('admin.proxies.allProtocols')"
-            class="w-40"
-            @change="loadProxies"
-          />
-          <Select
-            v-model="filters.status"
-            :options="statusOptions"
-            :placeholder="t('admin.proxies.allStatus')"
-            class="w-36"
-            @change="loadProxies"
-          />
+
+          <!-- Right: Actions -->
+          <div class="ml-auto flex flex-wrap items-center justify-end gap-3">
+            <button
+              @click="loadProxies"
+              :disabled="loading"
+              class="btn btn-secondary"
+              :title="t('common.refresh')"
+            >
+              <svg
+                :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                />
+              </svg>
+            </button>
+            <button @click="showCreateModal = true" class="btn btn-primary">
+              <svg
+                class="mr-2 h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 4.5v15m7.5-7.5h-15"
+                />
+              </svg>
+              {{ t('admin.proxies.createProxy') }}
+            </button>
           </div>
         </div>
       </template>

frontend/src/views/admin/SubscriptionsView.vue

@@ -1,62 +1,143 @@
 <template>
   <AppLayout>
     <TablePageLayout>
-      <!-- Page Header Actions -->
-      <template #actions>
-      <div class="flex justify-end gap-3">
-        <button
-          @click="loadSubscriptions"
-          :disabled="loading"
-          class="btn btn-secondary"
-          :title="t('common.refresh')"
-        >
-          <svg
-            :class="['h-5 w-5', loading ? 'animate-spin' : '']"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-            />
-          </svg>
-        </button>
-        <button @click="showAssignModal = true" class="btn btn-primary">
-          <svg
-            class="mr-2 h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-          </svg>
-          {{ t('admin.subscriptions.assignSubscription') }}
-        </button>
-      </div>
-      </template>
-
-      <!-- Filters -->
       <template #filters>
-      <div class="flex flex-wrap gap-3">
-        <Select
-          v-model="filters.status"
-          :options="statusOptions"
-          :placeholder="t('admin.subscriptions.allStatus')"
-          class="w-40"
-          @change="loadSubscriptions"
-        />
-        <Select
-          v-model="filters.group_id"
-          :options="groupOptions"
-          :placeholder="t('admin.subscriptions.allGroups')"
-          class="w-48"
-          @change="loadSubscriptions"
-        />
-      </div>
+        <!-- Top Toolbar: Left (search + filters) / Right (actions) -->
+        <div class="flex flex-wrap items-start justify-between gap-4">
+          <!-- Left: Fuzzy user search + filters (wrap to multiple lines) -->
+          <div class="flex flex-1 flex-wrap items-center gap-3">
+            <!-- User Search -->
+            <div
+              class="relative w-full sm:flex-1 sm:min-w-[14rem] sm:max-w-md"
+              data-filter-user-search
+            >
+              <svg
+                class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                />
+              </svg>
+              <input
+                v-model="filterUserKeyword"
+                type="text"
+                :placeholder="t('admin.users.searchUsers')"
+                class="input pl-10 pr-8"
+                @input="debounceSearchFilterUsers"
+                @focus="showFilterUserDropdown = true"
+              />
+              <button
+                v-if="selectedFilterUser"
+                @click="clearFilterUser"
+                type="button"
+                class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                :title="t('common.clear')"
+              >
+                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+
+              <!-- User Dropdown -->
+              <div
+                v-if="showFilterUserDropdown && (filterUserResults.length > 0 || filterUserKeyword)"
+                class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
+              >
+                <div
+                  v-if="filterUserLoading"
+                  class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
+                >
+                  {{ t('common.loading') }}
+                </div>
+                <div
+                  v-else-if="filterUserResults.length === 0 && filterUserKeyword"
+                  class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400"
+                >
+                  {{ t('common.noOptionsFound') }}
+                </div>
+                <button
+                  v-for="user in filterUserResults"
+                  :key="user.id"
+                  type="button"
+                  @click="selectFilterUser(user)"
+                  class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
+                >
+                  <span class="font-medium text-gray-900 dark:text-white">{{ user.email }}</span>
+                  <span class="ml-2 text-gray-500 dark:text-gray-400">#{{ user.id }}</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Filters -->
+            <div class="w-full sm:w-40">
+              <Select
+                v-model="filters.status"
+                :options="statusOptions"
+                :placeholder="t('admin.subscriptions.allStatus')"
+                @change="applyFilters"
+              />
+            </div>
+            <div class="w-full sm:w-48">
+              <Select
+                v-model="filters.group_id"
+                :options="groupOptions"
+                :placeholder="t('admin.subscriptions.allGroups')"
+                @change="applyFilters"
+              />
+            </div>
+          </div>
+
+          <!-- Right: Actions -->
+          <div class="ml-auto flex flex-wrap items-center justify-end gap-3">
+            <button
+              @click="loadSubscriptions"
+              :disabled="loading"
+              class="btn btn-secondary"
+              :title="t('common.refresh')"
+            >
+              <svg
+                :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                />
+              </svg>
+            </button>
+            <button @click="showAssignModal = true" class="btn btn-primary">
+              <svg
+                class="mr-2 h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="1.5"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 4.5v15m7.5-7.5h-15"
+                />
+              </svg>
+              {{ t('admin.subscriptions.assignSubscription') }}
+            </button>
+          </div>
+        </div>
       </template>
 
       <!-- Subscriptions Table -->
@@ -338,7 +419,7 @@
       >
         <div>
           <label class="input-label">{{ t('admin.subscriptions.form.user') }}</label>
-          <div class="relative">
+          <div class="relative" data-assign-user-search>
             <input
               v-model="userSearchKeyword"
               type="text"
@@ -555,6 +636,14 @@ const groups = ref<Group[]>([])
 const loading = ref(false)
 let abortController: AbortController | null = null
 
+// Toolbar user filter (fuzzy search -> select user_id)
+const filterUserKeyword = ref('')
+const filterUserResults = ref<SimpleUser[]>([])
+const filterUserLoading = ref(false)
+const showFilterUserDropdown = ref(false)
+const selectedFilterUser = ref<SimpleUser | null>(null)
+let filterUserSearchTimeout: ReturnType<typeof setTimeout> | null = null
+
 // User search state
 const userSearchKeyword = ref('')
 const userSearchResults = ref<SimpleUser[]>([])
@@ -565,7 +654,8 @@ let userSearchTimeout: ReturnType<typeof setTimeout> | null = null
 
 const filters = reactive({
   status: '',
-  group_id: ''
+  group_id: '',
+  user_id: null as number | null
 })
 const pagination = reactive({
   page: 1,
@@ -604,6 +694,11 @@ const subscriptionGroupOptions = computed(() =>
     .map((g) => ({ value: g.id, label: g.name }))
 )
 
+const applyFilters = () => {
+  pagination.page = 1
+  loadSubscriptions()
+}
+
 const loadSubscriptions = async () => {
   if (abortController) {
     abortController.abort()
@@ -614,12 +709,18 @@ const loadSubscriptions = async () => {
 
   loading.value = true
   try {
-    const response = await adminAPI.subscriptions.list(pagination.page, pagination.page_size, {
-      status: (filters.status as any) || undefined,
-      group_id: filters.group_id ? parseInt(filters.group_id) : undefined
-    }, {
-      signal
-    })
+    const response = await adminAPI.subscriptions.list(
+      pagination.page,
+      pagination.page_size,
+      {
+        status: (filters.status as any) || undefined,
+        group_id: filters.group_id ? parseInt(filters.group_id) : undefined,
+        user_id: filters.user_id || undefined
+      },
+      {
+        signal
+      }
+    )
     if (signal.aborted || abortController !== requestController) return
     subscriptions.value = response.items
     pagination.total = response.total
@@ -646,6 +747,57 @@ const loadGroups = async () => {
   }
 }
 
+// Toolbar user filter search with debounce
+const debounceSearchFilterUsers = () => {
+  if (filterUserSearchTimeout) {
+    clearTimeout(filterUserSearchTimeout)
+  }
+  filterUserSearchTimeout = setTimeout(searchFilterUsers, 300)
+}
+
+const searchFilterUsers = async () => {
+  const keyword = filterUserKeyword.value.trim()
+
+  // Clear active user filter if user modified the search keyword
+  if (selectedFilterUser.value && keyword !== selectedFilterUser.value.email) {
+    selectedFilterUser.value = null
+    filters.user_id = null
+    applyFilters()
+  }
+
+  if (!keyword) {
+    filterUserResults.value = []
+    return
+  }
+
+  filterUserLoading.value = true
+  try {
+    filterUserResults.value = await adminAPI.usage.searchUsers(keyword)
+  } catch (error) {
+    console.error('Failed to search users:', error)
+    filterUserResults.value = []
+  } finally {
+    filterUserLoading.value = false
+  }
+}
+
+const selectFilterUser = (user: SimpleUser) => {
+  selectedFilterUser.value = user
+  filterUserKeyword.value = user.email
+  showFilterUserDropdown.value = false
+  filters.user_id = user.id
+  applyFilters()
+}
+
+const clearFilterUser = () => {
+  selectedFilterUser.value = null
+  filterUserKeyword.value = ''
+  filterUserResults.value = []
+  showFilterUserDropdown.value = false
+  filters.user_id = null
+  applyFilters()
+}
+
 // User search with debounce
 const debounceSearchUsers = () => {
   if (userSearchTimeout) {
@@ -856,9 +1008,8 @@ const formatResetTime = (windowStart: string, period: 'daily' | 'weekly' | 'mont
 // Handle click outside to close user dropdown
 const handleClickOutside = (event: MouseEvent) => {
   const target = event.target as HTMLElement
-  if (!target.closest('.relative')) {
-    showUserDropdown.value = false
-  }
+  if (!target.closest('[data-assign-user-search]')) showUserDropdown.value = false
+  if (!target.closest('[data-filter-user-search]')) showFilterUserDropdown.value = false
 }
 
 onMounted(() => {
@@ -869,6 +1020,9 @@ onMounted(() => {
 
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside)
+  if (filterUserSearchTimeout) {
+    clearTimeout(filterUserSearchTimeout)
+  }
   if (userSearchTimeout) {
     clearTimeout(userSearchTimeout)
   }

frontend/src/views/admin/UsersView.vue

@@ -3,11 +3,11 @@
     <TablePageLayout>
       <!-- Single Row: Search, Filters, and Actions -->
       <template #filters>
-        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div class="flex w-full flex-wrap-reverse items-center justify-between gap-4">
           <!-- Left: Search + Active Filters -->
-          <div class="flex flex-1 flex-wrap items-center gap-3">
+          <div class="flex min-w-[280px] flex-1 flex-wrap content-start items-center gap-3">
             <!-- Search Box -->
-            <div class="relative w-64">
+            <div class="relative w-full sm:w-64">
               <svg
                 class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
                 fill="none"
@@ -31,7 +31,7 @@
             </div>
 
             <!-- Role Filter (visible when enabled) -->
-            <div v-if="visibleFilters.has('role')" class="w-32">
+            <div v-if="visibleFilters.has('role')" class="w-full sm:w-32">
               <Select
                 v-model="filters.role"
                 :options="[
@@ -44,7 +44,7 @@
             </div>
 
             <!-- Status Filter (visible when enabled) -->
-            <div v-if="visibleFilters.has('status')" class="w-32">
+            <div v-if="visibleFilters.has('status')" class="w-full sm:w-32">
               <Select
                 v-model="filters.status"
                 :options="[
@@ -58,7 +58,10 @@
 
             <!-- Dynamic Attribute Filters -->
             <template v-for="(value, attrId) in activeAttributeFilters" :key="attrId">
-              <div v-if="visibleFilters.has(`attr_${attrId}`)" class="relative">
+              <div
+                v-if="visibleFilters.has(`attr_${attrId}`)"
+                class="relative w-full sm:w-36"
+              >
                 <!-- Text/Email/URL/Textarea/Date type: styled input -->
                 <input
                   v-if="['text', 'textarea', 'email', 'url', 'date'].includes(getAttributeDefinition(Number(attrId))?.type || 'text')"
@@ -66,7 +69,7 @@
                   @input="(e) => updateAttributeFilter(Number(attrId), (e.target as HTMLInputElement).value)"
                   @keyup.enter="applyFilter"
                   :placeholder="getAttributeDefinitionName(Number(attrId))"
-                  class="input w-36"
+                  class="input w-full"
                 />
                 <!-- Number type: number input -->
                 <input
@@ -76,11 +79,11 @@
                   @input="(e) => updateAttributeFilter(Number(attrId), (e.target as HTMLInputElement).value)"
                   @keyup.enter="applyFilter"
                   :placeholder="getAttributeDefinitionName(Number(attrId))"
-                  class="input w-32"
+                  class="input w-full"
                 />
                 <!-- Select/Multi-select type -->
                 <template v-else-if="['select', 'multi_select'].includes(getAttributeDefinition(Number(attrId))?.type || '')">
-                  <div class="w-36">
+                  <div class="w-full">
                     <Select
                       :model-value="value"
                       :options="[
@@ -98,14 +101,14 @@
                   @input="(e) => updateAttributeFilter(Number(attrId), (e.target as HTMLInputElement).value)"
                   @keyup.enter="applyFilter"
                   :placeholder="getAttributeDefinitionName(Number(attrId))"
-                  class="input w-36"
+                  class="input w-full"
                 />
               </div>
             </template>
           </div>
 
           <!-- Right: Actions and Settings -->
-          <div class="flex items-center gap-3">
+          <div class="ml-auto flex max-w-full flex-wrap items-center justify-end gap-3">
             <!-- Refresh Button -->
             <button
               @click="loadUsers"
@@ -395,8 +398,7 @@
               <!-- Edit Button -->
               <button
                 @click="handleEdit(row)"
-                class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
-                :title="t('common.edit')"
+                class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
               >
                 <svg
                   class="h-4 w-4"
@@ -411,17 +413,60 @@
                     d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
                   />
                 </svg>
+                <span class="text-xs">{{ t('common.edit') }}</span>
+              </button>
+
+              <!-- Toggle Status Button (not for admin) -->
+              <button
+                v-if="row.role !== 'admin'"
+                @click="handleToggleStatus(row)"
+                :class="[
+                  'flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors',
+                  row.status === 'active'
+                    ? 'hover:bg-orange-50 hover:text-orange-600 dark:hover:bg-orange-900/20 dark:hover:text-orange-400'
+                    : 'hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400'
+                ]"
+              >
+                <svg
+                  v-if="row.status === 'active'"
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                  />
+                </svg>
+                <svg
+                  v-else
+                  class="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <span class="text-xs">{{ row.status === 'active' ? t('admin.users.disable') : t('admin.users.enable') }}</span>
               </button>
 
               <!-- More Actions Menu Trigger -->
               <button
                 :ref="(el) => setActionButtonRef(row.id, el)"
                 @click="openActionMenu(row)"
-                class="action-menu-trigger flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-dark-700 dark:hover:text-white"
+                class="action-menu-trigger flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-dark-700 dark:hover:text-white"
                 :class="{ 'bg-gray-100 text-gray-900 dark:bg-dark-700 dark:text-white': activeMenuId === row.id }"
               >
                 <svg
-                  class="h-5 w-5"
+                  class="h-4 w-4"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -433,6 +478,7 @@
                     d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
                   />
                 </svg>
+                <span class="text-xs">{{ t('common.more') }}</span>
               </button>
             </div>
           </template>
@@ -519,33 +565,6 @@
 
               <div class="my-1 border-t border-gray-100 dark:border-dark-700"></div>
 
-              <!-- Toggle Status (not for admin) -->
-              <button
-                v-if="user.role !== 'admin'"
-                @click="handleToggleStatus(user); closeActionMenu()"
-                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
-              >
-                <svg
-                  v-if="user.status === 'active'"
-                  class="h-4 w-4 text-orange-500"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
-                </svg>
-                <svg
-                  v-else
-                  class="h-4 w-4 text-green-500"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-                {{ user.status === 'active' ? t('admin.users.disable') : t('admin.users.enable') }}
-              </button>
-
               <!-- Delete (not for admin) -->
               <button
                 v-if="user.role !== 'admin'"