Simplify manager user cards

app/composables/graphql/generated.ts

@@ -849,7 +849,7 @@ export type ManagerOrdersQuery = { __typename?: 'Query', managerOrders: Array<{
 export type ManagerUsersQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type ManagerUsersQuery = { __typename?: 'Query', managerUsers: Array<{ __typename?: 'ManagerUser', id: string, email: string, fullName: string, role: UserRole, companyName?: string | null, inn?: string | null, createdAt: any, orderCount: number, lastOrderAt?: any | null }> };
+export type ManagerUsersQuery = { __typename?: 'Query', managerUsers: Array<{ __typename?: 'ManagerUser', id: string, email: string, fullName: string, companyName?: string | null }> };
 
 export type ManagerWithdrawalRequestsQueryVariables = Exact<{
   status?: InputMaybe<WithdrawalStatus>;
@@ -1738,12 +1738,7 @@ export const ManagerUsersDocument = gql`
     id
     email
     fullName
-    role
     companyName
-    inn
-    createdAt
-    orderCount
-    lastOrderAt
   }
 }
     `;

app/pages/clients/index.vue

@@ -97,6 +97,20 @@ const filteredRequests = computed(() => {
       .includes(query);
   });
 });
+
+function userInitials(fullName: string) {
+  const parts = fullName
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2);
+
+  if (!parts.length) {
+    return 'FR';
+  }
+
+  return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
+}
 </script>
 
 <template>
@@ -137,23 +151,23 @@ const filteredRequests = computed(() => {
       <div v-else-if="filteredUsers.length === 0" class="manager-empty-state">
         Пользователи по текущему запросу не найдены.
       </div>
-      <div v-else class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
+      <div v-else class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
         <article
           v-for="user in filteredUsers"
           :key="user.id"
-          class="surface-card rounded-3xl p-5"
+          class="surface-card flex min-h-[260px] flex-col rounded-[32px] p-5"
         >
-          <div class="space-y-1">
-            <h2 class="text-lg font-bold text-[#123824]">{{ user.fullName }}</h2>
-            <p class="text-sm text-[#466653]">{{ user.email }}</p>
-            <p v-if="user.companyName" class="text-sm text-[#466653]">{{ user.companyName }}</p>
+          <div class="mb-5 flex justify-center">
+            <div class="flex h-20 w-20 items-center justify-center rounded-[28px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-2xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]">
+              {{ userInitials(user.fullName) }}
+            </div>
           </div>
 
-          <div class="mt-4 space-y-2 text-sm text-[#355947]">
-            <p v-if="user.inn">ИНН: {{ user.inn }}</p>
-            <p>Заказов: {{ user.orderCount }}</p>
-            <p v-if="user.lastOrderAt">Последний заказ: {{ new Date(user.lastOrderAt).toLocaleString() }}</p>
-            <p>Создан: {{ new Date(user.createdAt).toLocaleDateString() }}</p>
+          <div class="mt-auto space-y-2 text-center">
+            <h2 class="text-lg font-bold leading-tight text-[#123824]">{{ user.fullName }}</h2>
+            <p class="text-sm text-[#466653] break-all">{{ user.email }}</p>
+            <p v-if="user.companyName" class="text-sm text-[#5c7b69]">{{ user.companyName }}</p>
+            <p v-else class="text-sm text-[#8ca896]">Компания не указана</p>
           </div>
         </article>
       </div>

graphql/operations/manager/manager-users.graphql

@@ -3,11 +3,6 @@ query ManagerUsers {
     id
     email
     fullName
-    role
     companyName
-    inn
-    createdAt
-    orderCount
-    lastOrderAt
   }
 }