From 1713bf9164747192b6be841e307e4cd5a398ecbc Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 7 Sep 2026 21:43:48 +0000
Subject: [PATCH 1/2] fix(teams): show pending invites as an Invited badge

The invited marker sat as parenthesised text next to the role while the
email column stayed empty for those rows, leaving a hole in the table and
a crowded role cell. Move the marker into the empty middle column and
render it with frappe-ui's Badge.

Closes #435

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016kQ1Dp7xRj9mVNuYGeVYB2
---
 .../dashboard/teams/TeamMembersTable.vue          | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/dashboard/src/components/dashboard/teams/TeamMembersTable.vue b/dashboard/src/components/dashboard/teams/TeamMembersTable.vue
index 718a779e..158d3914 100644
--- a/dashboard/src/components/dashboard/teams/TeamMembersTable.vue
+++ b/dashboard/src/components/dashboard/teams/TeamMembersTable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Avatar, Button, Dropdown, dialog, toast } from "frappe-ui"
+import { Avatar, Badge, Button, Dropdown, dialog, toast } from "frappe-ui"
 import { computed, ref } from "vue"
 
 import ChangeRoleDialog from "@/components/dashboard/teams/ChangeRoleDialog.vue"
@@ -170,14 +170,15 @@ function confirmRetract(row: Row) {
 					<span class="truncate text-base text-ink-gray-8">{{ row.name }}</span>
 				</div>
 
-				<!-- An invite has only an address, already shown as its name. -->
-				<span class="truncate text-base text-ink-gray-6">{{ row.member ? row.email : "" }}</span>
-
-				<span class="truncate text-base font-medium text-ink-gray-8">
-					{{ row.role }}
-					<span v-if="!row.member" class="font-normal text-ink-gray-5">({{ __("Invited") }})</span>
+				<!-- An invite has only an address, already shown as its name, so the cell
+				     carries its pending state instead. -->
+				<span class="flex min-w-0 items-center">
+					<span v-if="row.member" class="truncate text-base text-ink-gray-6">{{ row.email }}</span>
+					<Badge v-else theme="gray" variant="subtle" :label="__('Invited')" />
 				</span>
 
+				<span class="truncate text-base font-medium text-ink-gray-8">{{ row.role }}</span>
+
 				<Dropdown v-if="actionsFor(row).length" :options="actionsFor(row)" align="end">
 					<!-- label is the accessible name here: an icon slot makes it icon-only. -->
 					<Button

From be3ba67000c2c8d7b7705b150e387a0d86634f93 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 8 Sep 2026 12:27:52 +0530
Subject: [PATCH 2/2] fix(teams): use amber for the Invited badge

Amber matches the pending state already used for scheduled communications.
---
 dashboard/src/components/dashboard/teams/TeamMembersTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dashboard/src/components/dashboard/teams/TeamMembersTable.vue b/dashboard/src/components/dashboard/teams/TeamMembersTable.vue
index 158d3914..6c2d3400 100644
--- a/dashboard/src/components/dashboard/teams/TeamMembersTable.vue
+++ b/dashboard/src/components/dashboard/teams/TeamMembersTable.vue
@@ -174,7 +174,7 @@ function confirmRetract(row: Row) {
 				     carries its pending state instead. -->
 				<span class="flex min-w-0 items-center">
 					<span v-if="row.member" class="truncate text-base text-ink-gray-6">{{ row.email }}</span>
-					<Badge v-else theme="gray" variant="subtle" :label="__('Invited')" />
+					<Badge v-else size="sm" variant="outline" :label="__('Invited')" />
 				</span>
 
 				<span class="truncate text-base font-medium text-ink-gray-8">{{ row.role }}</span>