From a4b3e195c72d20e60a391de3ae74e434dcc64982 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Sat, 4 Apr 2026 10:13:50 +0700
Subject: [PATCH] Render telegram avatars in user cards

---
 app/composables/graphql/generated.ts             | 11 ++++++++++-
 app/pages/clients/index.vue                      | 12 +++++++++++-
 graphql/operations/manager/manager-users.graphql |  8 ++++++++
 graphql/schema.graphql                           |  1 +
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/app/composables/graphql/generated.ts b/app/composables/graphql/generated.ts
index 60b7b2f..0552da8 100644
--- a/app/composables/graphql/generated.ts
+++ b/app/composables/graphql/generated.ts
@@ -196,6 +196,7 @@ export type ManagerUser = {
   lastOrderAt?: Maybe<Scalars['DateTime']['output']>;
   orderCount: Scalars['Int']['output'];
   role: UserRole;
+  telegramConnection?: Maybe<MessengerConnection>;
 };
 
 export type ManagerWithdrawalRequest = {
@@ -849,7 +850,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, fullName: string }> };
+export type ManagerUsersQuery = { __typename?: 'Query', managerUsers: Array<{ __typename?: 'ManagerUser', id: string, fullName: string, telegramConnection?: { __typename?: 'MessengerConnection', id: string, type: MessengerType, channelId: string, displayName?: string | null, username?: string | null, avatarAvailable: boolean } | null }> };
 
 export type ManagerWithdrawalRequestsQueryVariables = Exact<{
   status?: InputMaybe<WithdrawalStatus>;
@@ -1737,6 +1738,14 @@ export const ManagerUsersDocument = gql`
   managerUsers {
     id
     fullName
+    telegramConnection {
+      id
+      type
+      channelId
+      displayName
+      username
+      avatarAvailable
+    }
   }
 }
     `;
diff --git a/app/pages/clients/index.vue b/app/pages/clients/index.vue
index 90d2359..ab57345 100644
--- a/app/pages/clients/index.vue
+++ b/app/pages/clients/index.vue
@@ -6,6 +6,7 @@ import {
   type ManagerUsersQuery,
   type RegistrationRequestsQuery,
 } from '~/composables/graphql/generated';
+import { messengerConnectionAvatarSrc } from '~/composables/useMessengerConnectionPresentation';
 
 definePageMeta({
   middleware: ['manager-only'],
@@ -150,7 +151,16 @@ function userInitials(fullName: string) {
           class="surface-card flex min-h-[280px] flex-col rounded-[32px] p-6"
         >
           <div class="flex justify-center">
-            <div 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)]">
+            <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>
diff --git a/graphql/operations/manager/manager-users.graphql b/graphql/operations/manager/manager-users.graphql
index 35c9cc6..7d0aeab 100644
--- a/graphql/operations/manager/manager-users.graphql
+++ b/graphql/operations/manager/manager-users.graphql
@@ -2,5 +2,13 @@ query ManagerUsers {
   managerUsers {
     id
     fullName
+    telegramConnection {
+      id
+      type
+      channelId
+      displayName
+      username
+      avatarAvailable
+    }
   }
 }
diff --git a/graphql/schema.graphql b/graphql/schema.graphql
index 957163f..4bc7bab 100644
--- a/graphql/schema.graphql
+++ b/graphql/schema.graphql
@@ -147,6 +147,7 @@ type ManagerUser {
   createdAt: DateTime!
   orderCount: Int!
   lastOrderAt: DateTime
+  telegramConnection: MessengerConnection
 }
 
 type MessengerConnection {