Move manager tabs above content canvas

app/pages/clients/index.vue

@@ -3,7 +3,6 @@ import { useQuery } from '@vue/apollo-composable';
 import {
   ManagerUsersDocument,
   RegistrationRequestsDocument,
-  type ManagerUsersQuery,
   type RegistrationRequestsQuery,
 } from '~/composables/graphql/generated';
 import { messengerConnectionAvatarSrc } from '~/composables/useMessengerConnectionPresentation';
@@ -12,11 +11,9 @@ definePageMeta({
   middleware: ['manager-only'],
 });
 
-type ManagerUserItem = ManagerUsersQuery['managerUsers'][number];
 type RequestItem = RegistrationRequestsQuery['registrationRequests'][number];
 
 const route = useRoute();
-const router = useRouter();
 const search = ref('');
 
 const usersQuery = useQuery(ManagerUsersDocument);
@@ -28,15 +25,6 @@ const activeTab = computed<'users' | 'requests'>(() => (
   route.query.tab === 'requests' ? 'requests' : 'users'
 ));
 
-function setTab(tab: 'users' | 'requests') {
-  void router.replace({
-    query: {
-      ...route.query,
-      tab,
-    },
-  });
-}
-
 const filteredUsers = computed(() => {
   const items = usersQuery.result.value?.managerUsers ?? [];
   const query = search.value.trim().toLowerCase();
@@ -108,25 +96,6 @@ function userInitials(fullName: string) {
 
 <template>
   <section class="space-y-6">
-    <div class="manager-page-tabs">
-      <button
-        type="button"
-        class="manager-page-tab"
-        :class="{ 'manager-page-tab--active': activeTab === 'users' }"
-        @click="setTab('users')"
-      >
-        Пользователи
-      </button>
-      <button
-        type="button"
-        class="manager-page-tab"
-        :class="{ 'manager-page-tab--active': activeTab === 'requests' }"
-        @click="setTab('requests')"
-      >
-        Заявки
-      </button>
-    </div>
-
     <UiSectionSearchHero
       v-model="search"
       title="Пользователи"
@@ -147,33 +116,14 @@ function userInitials(fullName: string) {
         Пользователи по текущему запросу не найдены.
       </div>
       <div v-else class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
-        <NuxtLink
+        <UsersGridCard
           v-for="user in filteredUsers"
           :key="user.id"
           :to="`/clients/${user.id}`"
-          class="surface-card surface-card-interactive flex min-h-[280px] flex-col rounded-[32px] p-6"
-        >
-          <div class="flex justify-center">
-            <img
-              v-if="messengerConnectionAvatarSrc(user.telegramConnection)"
-              :src="messengerConnectionAvatarSrc(user.telegramConnection)"
-              :alt="user.fullName"
-              class="h-24 w-24 rounded-[32px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
-            >
-            <div
-              v-else
-              class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]"
-            >
-              {{ userInitials(user.fullName) }}
-            </div>
-          </div>
-
-          <div class="flex-1" />
-
-          <div class="pt-8 text-center">
-            <h2 class="text-lg font-bold leading-tight text-[#123824]">{{ user.fullName }}</h2>
-          </div>
-        </NuxtLink>
+          :full-name="user.fullName"
+          :avatar-src="messengerConnectionAvatarSrc(user.telegramConnection)"
+          :initials="userInitials(user.fullName)"
+        />
       </div>
     </template>