Improve owner transfer process and member sorting

Extended the account ownership transfer tests and implemented several updates. This includes transferring the ownership only to an existing account member, sorting team members based on role hierarchy and whether a member is the primary owner. In the permissions check, prevented non-members from creating invitations and enhanced the styling of role badges depending on if they are custom or not.

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

@@ -75,15 +75,27 @@ export function AccountMembersTable({
     currentRoleHierarchy: userRoleHierarchy,
   });
 
-  const filteredMembers = members.filter((member) => {
-    const searchString = search.toLowerCase();
-    const displayName = member.name ?? member.email.split('@')[0];
+  const filteredMembers = members
+    .filter((member) => {
+      const searchString = search.toLowerCase();
+      const displayName = member.name ?? member.email.split('@')[0];
 
-    return (
-      displayName.includes(searchString) ||
-      member.role.toLowerCase().includes(searchString)
-    );
-  });
+      return (
+        displayName.includes(searchString) ||
+        member.role.toLowerCase().includes(searchString)
+      );
+    })
+    .sort((prev, next) => {
+      if (prev.primary_owner_user_id === prev.user_id) {
+        return -1;
+      }
+
+      if (prev.role_hierarchy_level < next.role_hierarchy_level) {
+        return -1;
+      }
+
+      return 1;
+    });
 
   return (
     <div className={'flex flex-col space-y-2'}>

packages/features/team-accounts/src/components/members/role-badge.tsx

@@ -5,13 +5,15 @@ import { Trans } from '@kit/ui/trans';
 
 type Role = string;
 
+const roles = {
+  owner: '',
+  member:
+    'bg-blue-50 hover:bg-blue-50 text-blue-500 dark:bg-blue-500/10 dark:hover:bg-blue-500/10',
+};
+
 const roleClassNameBuilder = cva('font-medium capitalize shadow-none', {
   variants: {
-    role: {
-      owner: '',
-      member:
-        'bg-blue-50 hover:bg-blue-50 text-blue-500 dark:bg-blue-500/10 dark:hover:bg-blue-500/10',
-    },
+    role: roles,
   },
 });
 
@@ -20,9 +22,10 @@ export const RoleBadge: React.FC<{
 }> = ({ role }) => {
   // @ts-expect-error: hard to type this since users can add custom roles
   const className = roleClassNameBuilder({ role });
+  const isCustom = !(role in roles);
 
   return (
-    <Badge className={className}>
+    <Badge className={className} variant={isCustom ? 'outline' : 'default'}>
       <span data-test={'member-role-badge'}>
         <Trans i18nKey={`common:roles.${role}.label`} defaults={role} />
       </span>