feat(MED-97): show benefits amount for each member

packages/features/team-accounts/src/components/members/account-members-table.tsx

@@ -20,6 +20,7 @@ import { If } from '@kit/ui/if';
 import { Input } from '@kit/ui/input';
 import { ProfileAvatar } from '@kit/ui/profile-avatar';
 import { Trans } from '@kit/ui/trans';
+import { formatCurrency } from '@kit/shared/utils';
 
 import { RemoveMemberDialog } from './remove-member-dialog';
 import { RoleBadge } from './role-badge';
@@ -42,6 +43,10 @@ type AccountMembersTableProps = {
   userRoleHierarchy: number;
   isPrimaryOwner: boolean;
   canManageRoles: boolean;
+  membersBenefitsUsage: {
+    personal_account_id: string;
+    benefit_amount: number;
+  }[];
 };
 
 export function AccountMembersTable({
@@ -51,6 +56,7 @@ export function AccountMembersTable({
   isPrimaryOwner,
   userRoleHierarchy,
   canManageRoles,
+  membersBenefitsUsage,
 }: AccountMembersTableProps) {
   const [search, setSearch] = useState('');
   const { t } = useTranslation('teams');
@@ -73,6 +79,7 @@ export function AccountMembersTable({
     currentUserId,
     currentAccountId,
     currentRoleHierarchy: userRoleHierarchy,
+    membersBenefitsUsage,
   });
 
   const filteredMembers = members
@@ -122,9 +129,13 @@ function useGetColumns(
     currentUserId: string;
     currentAccountId: string;
     currentRoleHierarchy: number;
+    membersBenefitsUsage: {
+      personal_account_id: string;
+      benefit_amount: number;
+    }[];
   },
 ): ColumnDef<Members[0]>[] {
-  const { t } = useTranslation('teams');
+  const { t, i18n: { language } } = useTranslation('teams');
 
   return useMemo(
     () => [
@@ -168,6 +179,23 @@ function useGetColumns(
           return row.original.personal_code ?? '-';
         },
       },
+      {
+        header: t('distributedBenefitsAmount'),
+        cell: ({ row }) => {
+          const benefitAmount = params.membersBenefitsUsage.find(
+            (usage) => usage.personal_account_id === row.original.id
+          )?.benefit_amount;
+          if (typeof benefitAmount !== 'number') {
+            return '-';
+          }
+
+          return formatCurrency({
+            currencyCode: 'EUR',
+            locale: language,
+            value: benefitAmount,
+          });
+        },
+      },
       {
         header: t('roleLabel'),
         cell: ({ row }) => {
@@ -175,7 +203,7 @@ function useGetColumns(
           const isPrimaryOwner = primary_owner_user_id === user_id;
 
           return (
-            <span className={'flex items-center space-x-1'}>
+            <span className={'flex items-center space-x-1 flex-wrap space-y-1 sm:space-y-0 sm:flex-nowrap'}>
               <RoleBadge role={role} />
 
               <If condition={isPrimaryOwner}>