add self to masters list & border avatar

apps/web/components/orders/components/contacts-grid/components/contacts-grid-base.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { CardSectionHeader } from '@/components/ui';
 // eslint-disable-next-line import/extensions
 import AvatarPlaceholder from '@/public/avatar/avatar_placeholder.png';
@@ -24,6 +23,8 @@ export function ContactsGridBase({ contacts, onSelect, selected, title }: Contac
           {contacts.map((contact) => {
             if (!contact) return null;
 
+            const isCurrentUser = contact?.name === 'Я';
+
             return (
               <Label
                 className="flex cursor-pointer flex-col items-center"
@@ -43,7 +44,14 @@ export function ContactsGridBase({ contacts, onSelect, selected, title }: Contac
                     selected === contact?.documentId ? 'border-primary' : 'border-transparent',
                   )}
                 >
-                  <div className="size-full border-4 border-transparent">
+                  <div
+                    className={cn(
+                      'size-full rounded-full p-1',
+                      isCurrentUser
+                        ? 'bg-gradient-to-r from-purple-500 to-pink-500'
+                        : 'bg-transparent',
+                    )}
+                  >
                     <Image
                       alt={contact?.name}
                       className="size-full rounded-full object-cover"
@@ -53,7 +61,12 @@ export function ContactsGridBase({ contacts, onSelect, selected, title }: Contac
                     />
                   </div>
                 </div>
-                <span className="mt-2 max-w-20 break-words text-center text-sm font-medium">
+                <span
+                  className={cn(
+                    'mt-2 max-w-20 break-words text-center text-sm font-medium',
+                    isCurrentUser && 'font-bold',
+                  )}
+                >
                   {contact?.name}
                 </span>
               </Label>

apps/web/components/orders/components/contacts-grid/index.tsx

@@ -8,7 +8,7 @@ import { withContext } from '@/utils/context';
 import { use, useEffect } from 'react';
 
 export const MastersGrid = withContext(ContactsFilterProvider)(function () {
-  const { contacts, isLoading, setFilter } = useCustomerContacts();
+  const { contacts, isLoading, setFilter } = useCustomerContacts({ includeSelf: true });
   const { masterId, setMasterId } = use(OrderContext);
 
   useEffect(() => {

apps/web/hooks/contacts/use-customer-contacts.ts

@@ -1,27 +1,40 @@
+/* eslint-disable canonical/id-match */
 'use client';
+import { useProfileQuery } from '../profile';
 import { useClientsQuery, useMastersQuery } from './query';
 import { ContactsFilterContext } from '@/context/contacts-filter';
+import { Enum_Customer_Role } from '@repo/graphql/types';
 import { sift } from 'radash';
 import { use, useEffect, useMemo } from 'react';
 
-export function useCustomerContacts() {
+type Parameters_ = {
+  includeSelf: boolean;
+};
+
+export function useCustomerContacts(parameters?: Parameters_) {
   const { filter, setFilter } = use(ContactsFilterContext);
+  const { data: customer, isLoading: isLoadingProfile } = useProfileQuery({});
 
   const {
     data: clientsData,
-    isLoading: loadingClients,
+    isLoading: isLoadingClients,
     refetch: refetchClients,
   } = useClientsQuery();
 
   const {
     data: mastersData,
-    isLoading: loadingMasters,
+    isLoading: isLoadingMasters,
     refetch: refetchMasters,
   } = useMastersQuery();
 
   const clients = clientsData?.clients || [];
-  const masters = mastersData?.masters || [];
-  const isLoading = loadingClients || loadingMasters;
+  let masters = mastersData?.masters || [];
+
+  if (parameters?.includeSelf && customer?.role === Enum_Customer_Role.Master) {
+    masters = [{ ...customer, name: 'Я' }, ...masters];
+  }
+
+  const isLoading = isLoadingClients || isLoadingMasters || isLoadingProfile;
 
   useEffect(() => {
     if (filter === 'clients') {