feat(tenancy): expandable per-store rows in merchant team table

Member rows now show a store count with expand/collapse chevron.
Clicking expands sub-rows showing each store with:
- Store name and code
- Per-store role badge
- Per-store status (active/pending independently)
- Per-store actions: resend invitation (pending), remove from store

This fixes the issue where a member active on one store but pending
on another showed misleading combined status and actions.

Member-level actions (view, edit profile) stay on the main row.
Store-level actions (resend, remove) are on each sub-row.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/modules/tenancy/static/merchant/js/merchant-team.js

@@ -31,6 +31,9 @@ function merchantTeam() {
         // Filters
         storeFilter: '',
 
+        // Expanded member rows
+        expandedMembers: [],
+
         // Modal states
         showInviteModal: false,
         showEditModal: false,
@@ -128,6 +131,39 @@ function merchantTeam() {
             );
         },
 
+        /**
+         * Toggle expand/collapse for a member's store rows
+         */
+        toggleMemberExpand(userId) {
+            const idx = this.expandedMembers.indexOf(userId);
+            if (idx > -1) {
+                this.expandedMembers.splice(idx, 1);
+            } else {
+                this.expandedMembers.push(userId);
+            }
+        },
+
+        /**
+         * Resend invitation for a specific store membership
+         */
+        async resendStoreInvitation(storeId, userId) {
+            this.saving = true;
+            try {
+                await apiClient.post(
+                    `/merchants/account/team/stores/${storeId}/members/${userId}/resend`
+                );
+
+                Utils.showToast(I18n.t('tenancy.messages.invitation_resent'), 'success');
+                merchantTeamLog.info('Resent invitation for store:', storeId, 'user:', userId);
+                await this.loadTeamData();
+            } catch (error) {
+                merchantTeamLog.error('Failed to resend invitation:', error);
+                Utils.showToast(error.message || 'Failed to resend invitation', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
         /**
          * Open invite modal with reset form
          */

app/modules/tenancy/templates/tenancy/merchant/team.html

@@ -81,98 +81,131 @@
             {{ table_header([_('tenancy.team.member'), _('tenancy.team.stores_and_roles'), _('tenancy.team.status'), _('tenancy.team.actions')]) }}
             <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                 <template x-for="member in filteredMembers" :key="member.user_id">
-                    <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
+                    <tbody class="divide-y dark:divide-gray-700">
-                        <!-- Member: Avatar + Name + Email -->
+                        {# ── Main member row ── #}
-                        <td class="px-4 py-3">
+                        <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
-                            <div class="flex items-center text-sm">
+                            @click="toggleMemberExpand(member.user_id)">
-                                <div class="relative w-8 h-8 mr-3 rounded-full flex-shrink-0">
+                            {# Member: Avatar + Name + Email #}
-                                    <div class="flex items-center justify-center w-full h-full rounded-full"
+                            <td class="px-4 py-3">
-                                         :class="getMemberStatus(member) === 'active' ? 'bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300' : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'">
+                                <div class="flex items-center text-sm">
-                                        <span class="text-xs font-semibold" x-text="getInitials(member)"></span>
+                                    <div class="relative w-8 h-8 mr-3 rounded-full flex-shrink-0">
+                                        <div class="flex items-center justify-center w-full h-full rounded-full"
+                                             :class="getMemberStatus(member) === 'active' ? 'bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300' : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'">
+                                            <span class="text-xs font-semibold" x-text="getInitials(member)"></span>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <p class="font-semibold text-gray-800 dark:text-gray-200"
+                                           x-text="member.full_name"></p>
+                                        <p class="text-xs text-gray-600 dark:text-gray-400" x-text="member.email"></p>
                                     </div>
                                 </div>
-                                <div>
+                            </td>
-                                    <p class="font-semibold text-gray-800 dark:text-gray-200"
+
-                                       x-text="member.full_name"></p>
+                            {# Store count summary #}
-                                    <p class="text-xs text-gray-600 dark:text-gray-400" x-text="member.email"></p>
+                            <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
+                                <div class="flex items-center gap-1">
+                                    <span x-html="$icon(expandedMembers.includes(member.user_id) ? 'chevron-up' : 'chevron-down', 'w-4 h-4 text-gray-400')"></span>
+                                    <span x-text="member.stores.length + ' store' + (member.stores.length !== 1 ? 's' : '')"></span>
                                 </div>
-                            </div>
+                            </td>
-                        </td>
 
-                        <!-- Stores & Roles -->
+                            {# Overall status #}
-                        <td class="px-4 py-3">
+                            <td class="px-4 py-3 text-sm">
-                            <div class="flex flex-wrap gap-1">
-                                <template x-for="store in member.stores" :key="store.store_id">
-                                    <span class="px-2 py-1 text-xs rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
-                                        <span class="font-medium" x-text="store.store_name"></span>:
-                                        <span x-text="store.role_name || '{{ _('tenancy.team.no_role') }}'"></span>
-                                    </span>
-                                </template>
-                            </div>
-                        </td>
-
-                        <!-- Status -->
-                        <td class="px-4 py-3 text-sm">
-                            <template x-if="member.is_owner">
-                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
-                                    <span x-html="$icon('shield-check', 'w-3 h-3 mr-1')"></span>
-                                    {{ _('tenancy.team.owner') }}
-                                </span>
-                            </template>
-                            <template x-if="!member.is_owner && getMemberStatus(member) === 'pending'">
-                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
-                                    {{ _('common.pending') }}
-                                </span>
-                            </template>
-                            <template x-if="!member.is_owner && getMemberStatus(member) === 'active'">
-                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
-                                    {{ _('common.active') }}
-                                </span>
-                            </template>
-                            <template x-if="!member.is_owner && getMemberStatus(member) === 'inactive'">
-                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
-                                    {{ _('common.inactive') }}
-                                </span>
-                            </template>
-                        </td>
-
-                        <!-- Actions -->
-                        <td class="px-4 py-3 text-sm">
-                            <div class="flex items-center gap-2">
-                                <button @click="openViewModal(member)"
-                                        class="p-1.5 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
-                                        :title="$t('tenancy.team.view_member')">
-                                    <span x-html="$icon('eye', 'w-4 h-4')"></span>
-                                </button>
                                 <template x-if="member.is_owner">
-                                    <span class="inline-flex items-center px-2 py-1 text-xs text-purple-600 dark:text-purple-400">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
-                                        <span x-html="$icon('shield-check', 'w-4 h-4')"></span>
+                                        <span x-html="$icon('shield-check', 'w-3 h-3 mr-1')"></span>
+                                        {{ _('tenancy.team.owner') }}
                                     </span>
                                 </template>
-                                <template x-if="!member.is_owner">
+                                <template x-if="!member.is_owner && getMemberStatus(member) === 'active'">
-                                    <div class="flex items-center gap-2">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
-                                        <button x-show="getMemberStatus(member) === 'pending'"
+                                        {{ _('common.active') }}
-                                                @click="resendInvitation(member)"
+                                    </span>
-                                                :disabled="saving"
+                                </template>
-                                                class="p-1.5 text-gray-500 hover:text-green-600 dark:text-gray-400 dark:hover:text-green-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
+                                <template x-if="!member.is_owner && getMemberStatus(member) === 'pending'">
-                                                :title="$t('tenancy.team.resend_invitation')">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
-                                            <span x-html="$icon('paper-airplane', 'w-4 h-4')"></span>
+                                        {{ _('common.pending') }}
-                                        </button>
+                                    </span>
+                                </template>
+                            </td>
+
+                            {# Member-level actions #}
+                            <td class="px-4 py-3 text-sm">
+                                <div class="flex items-center gap-2" @click.stop>
+                                    <button @click="openViewModal(member)"
+                                            class="p-1.5 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
+                                            :title="$t('tenancy.team.view_member')">
+                                        <span x-html="$icon('eye', 'w-4 h-4')"></span>
+                                    </button>
+                                    <template x-if="!member.is_owner">
                                         <button @click="openEditModal(member)"
                                                 class="p-1.5 text-gray-500 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                                 :title="$t('tenancy.team.edit_member')">
                                             <span x-html="$icon('pencil', 'w-4 h-4')"></span>
                                         </button>
-                                        <button @click="openRemoveModal(member)"
+                                    </template>
-                                                class="p-1.5 text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
+                                </div>
+                            </td>
+                        </tr>
+
+                        {# ── Per-store sub-rows (expanded) ── #}
+                        <template x-for="store in member.stores" :key="store.store_id">
+                            <tr x-show="expandedMembers.includes(member.user_id)"
+                                x-transition
+                                class="bg-gray-50 dark:bg-gray-900/50 text-gray-600 dark:text-gray-400">
+                                {# Indent + Store name #}
+                                <td class="px-4 py-2 pl-16">
+                                    <div class="flex items-center gap-2 text-sm">
+                                        <span x-html="$icon('shopping-bag', 'w-4 h-4 text-gray-400')"></span>
+                                        <span class="font-medium text-gray-700 dark:text-gray-300" x-text="store.store_name"></span>
+                                        <span class="text-xs text-gray-400 font-mono" x-text="store.store_code"></span>
+                                    </div>
+                                </td>
+
+                                {# Role #}
+                                <td class="px-4 py-2 text-sm">
+                                    <span class="px-2 py-0.5 text-xs rounded-full bg-purple-50 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300"
+                                          x-text="store.role_name || (member.is_owner ? 'Owner' : '{{ _('tenancy.team.no_role') }}')"></span>
+                                </td>
+
+                                {# Per-store status #}
+                                <td class="px-4 py-2 text-sm">
+                                    <template x-if="store.is_pending">
+                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-200">
+                                            {{ _('common.pending') }}
+                                        </span>
+                                    </template>
+                                    <template x-if="!store.is_pending && store.is_active">
+                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200">
+                                            {{ _('common.active') }}
+                                        </span>
+                                    </template>
+                                </td>
+
+                                {# Per-store actions #}
+                                <td class="px-4 py-2 text-sm">
+                                    <div class="flex items-center gap-2" x-show="!member.is_owner">
+                                        {# Resend — pending only #}
+                                        <button x-show="store.is_pending"
+                                                @click="resendStoreInvitation(store.store_id, member.user_id)"
+                                                :disabled="saving"
+                                                class="p-1 text-gray-400 hover:text-green-600 dark:hover:text-green-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
+                                                :title="$t('tenancy.team.resend_invitation')">
+                                            <span x-html="$icon('paper-airplane', 'w-3.5 h-3.5')"></span>
+                                        </button>
+                                        {# Remove from this store #}
+                                        <button @click="removeMember(store.store_id, member.user_id)"
+                                                :disabled="saving"
+                                                class="p-1 text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
                                                 :title="$t('tenancy.team.remove_member')">
-                                            <span x-html="$icon('trash', 'w-4 h-4')"></span>
+                                            <span x-html="$icon('x-circle', 'w-3.5 h-3.5')"></span>
                                         </button>
                                     </div>
-                                </template>
+                                </td>
-                            </div>
+                            </tr>
-                        </td>
+                        </template>
-                    </tr>
+                    </tbody>
                 </template>
             </tbody>
         {% endcall %}