admin panel beter ui

apps/admin-panel/src/components/common/ListPageHeader.vue

@@ -1,17 +1,14 @@
 <template>
   <!--
-    Standard header for every list page: the section title plus, when the
-    caller has one, an "add" button ABOVE the list — same rid the create
-    route used to gate on, so permissions are not re-derived by hand.
-    Modelled on the one place this already existed (ListUser.vue's add-user
-    button) and generalised so every list page looks the same.
+    Standard "add" button for every list page — same rid the create route
+    used to gate on, so permissions are not re-derived by hand. Rendered
+    inline inside XTable's toolbar (via its #add slot), aligned with the
+    search bar, rather than in a row of its own above the table.
   -->
-  <div class="list-page-header">
-    <a-button v-if="!rid || hasPermission(rid)" type="primary" @click="$emit('add')">
-      <template #icon><PlusOutlined /></template>
-      {{ addLabel }}
-    </a-button>
-  </div>
+  <a-button v-if="!rid || hasPermission(rid)" type="primary" @click="$emit('add')">
+    <template #icon><PlusOutlined /></template>
+    {{ addLabel }}
+  </a-button>
 </template>
 
 <script setup lang="ts">
@@ -32,11 +29,3 @@ defineEmits<{ (e: 'add'): void }>();
 const users = useUsersStore();
 const hasPermission = (id: string) => Boolean(users.hasPermission(id));
 </script>
-
-<style scoped>
-.list-page-header {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 1rem;
-}
-</style>

apps/admin-panel/src/components/x-table/XTable.vue

@@ -13,33 +13,55 @@
   -->
   <div class="x-table">
     <div class="x-table__toolbar">
-      <a-input-search
-        v-if="!model._hideSearch"
-        v-model:value="query.search"
-        placeholder="جستجو"
-        allow-clear
-        style="max-width: 260px"
-        @search="onSearch"
-      />
+      <div class="x-table__search-group">
+        <a-input-search
+          v-if="!model._hideSearch"
+          v-model:value="query.search"
+          placeholder="جستجو"
+          allow-clear
+          style="max-width: 260px"
+          @search="onSearch"
+        />
 
-      <div class="x-table__actions">
-        <a-button v-if="!model._noFilters" :type="activeFilter ? 'primary' : 'default'" @click="toggleVisibleFilter">
-          فیلتر
-          <a-badge v-if="query.filters.length" :count="query.filters.length" />
-        </a-button>
+        <div class="x-table__actions">
+          <a-badge v-if="!model._noFilters" :count="query.filters.length">
+            <a-button type="text" :class="{ 'x-table__action--active': activeFilter }" @click="toggleVisibleFilter">
+              فیلتر
+              <template #icon><FilterOutlined /></template>
+            </a-button>
+          </a-badge>
 
-        <a-dropdown :trigger="['click']">
-          <a-button>ستون‌ها</a-button>
-          <template #overlay>
-            <a-menu>
-              <a-menu-item v-for="col in cols" :key="col.key">
-                <a-checkbox v-model:checked="col.show">{{ col.title }}</a-checkbox>
-              </a-menu-item>
-            </a-menu>
-          </template>
-        </a-dropdown>
+          <a-tooltip title="چاپ">
+            <a-button type="text" shape="circle">
+              <template #icon><PrinterOutlined /></template>
+            </a-button>
+          </a-tooltip>
 
-        <a-button class="refresh-btn" :loading="loading" @click="fetch()">بارگذاری مجدد</a-button>
+          <a-dropdown :trigger="['click']">
+            <a-tooltip title="ستون‌ها">
+              <a-button type="text" shape="circle">
+                <template #icon><SettingOutlined /></template>
+              </a-button>
+            </a-tooltip>
+            <template #overlay>
+              <a-menu>
+                <a-menu-item v-for="col in cols" :key="col.key">
+                  <a-checkbox v-model:checked="col.show">{{ col.title }}</a-checkbox>
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+
+          <a-tooltip title="بارگذاری مجدد">
+            <a-button class="refresh-btn" type="text" shape="circle" :loading="loading" @click="fetch()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+        </div>
+      </div>
+
+      <div v-if="$slots.add" class="x-table__add">
+        <slot name="add" />
       </div>
     </div>
 
@@ -115,6 +137,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue';
+import { FilterOutlined, PrinterOutlined, ReloadOutlined, SettingOutlined } from '@ant-design/icons-vue';
 import api from '../../api/client';
 import type { XTbl } from './model';
 
@@ -336,11 +359,24 @@ defineExpose({ fetch });
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
-  flex-wrap: wrap;
+}
+.x-table__search-group {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-wrap: nowrap;
 }
 .x-table__actions {
   display: flex;
+  align-items: center;
   gap: 8px;
+  flex-wrap: nowrap;
+}
+.x-table__action--active {
+  color: #1677ff;
+}
+.x-table__add {
+  display: flex;
 }
 .x-table__filters {
   background: #fafafa;