feat: users row actions "Cancel invite" on Pending rows and "Renew invite" on Expired rows

web/src/components/UserCardList.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import InviteStatusBadge from '@/components/InviteStatusBadge.vue'
 import RoleBadge from '@/components/RoleBadge.vue'
+import UserRowAction from '@/components/UserRowAction.vue'
 import UserEmailCell from '@/components/UserEmailCell.vue'
 import { formatCreatedDate } from '@/lib/relativeDate'
 import {
@@ -16,6 +17,13 @@ defineProps<{
 	loading: boolean
 	sessionUserId?: number
 	highlightedKey?: string
+	canManage?: boolean
+	busyKeys?: string[]
+}>()
+
+const emit = defineEmits<{
+	cancel: [item: UserListItem]
+	renew: [item: UserListItem]
 }>()
 
 function rowKey(item: UserListItem) {
@@ -56,6 +64,15 @@ function rowKey(item: UserListItem) {
 					<InviteStatusBadge :status="item.status" size="sm" />
 					<span>Created {{ formatCreatedDate(item.created_at) }}</span>
 				</div>
+				<div v-if="canManage && item.kind === 'invite'" class="flex pt-1">
+					<UserRowAction
+						:item="item"
+						large
+						:busy="busyKeys?.includes(rowKey(item))"
+						@cancel="emit('cancel', item)"
+						@renew="emit('renew', item)"
+					/>
+				</div>
 			</li>
 		</template>
 	</ul>