From 0c6d8409c77246529dd68bf336b04a329ea923d4 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Mon, 30 Mar 2026 20:27:47 +0200
Subject: [PATCH] fix(tenancy): fix table column alignment with flattened row
 approach

The nested tbody approach caused browsers to collapse all cells into
one column. Replaced with a single flat x-for loop over flattenedRows
(computed property that interleaves member rows and store sub-rows).

Each row is a single <tr> with 4 proper <td> cells, using x-if to
conditionally render member-level or store-level content per column.
Sub-rows are hidden/shown via expandedMembers array.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../static/merchant/js/merchant-team.js       |  15 ++
 .../templates/tenancy/merchant/team.html      | 245 ++++++++----------
 2 files changed, 128 insertions(+), 132 deletions(-)

diff --git a/app/modules/tenancy/static/merchant/js/merchant-team.js b/app/modules/tenancy/static/merchant/js/merchant-team.js
index f02176fa..b7db4dd5 100644
--- a/app/modules/tenancy/static/merchant/js/merchant-team.js
+++ b/app/modules/tenancy/static/merchant/js/merchant-team.js
@@ -131,6 +131,21 @@ function merchantTeam() {
             );
         },
 
+        /**
+         * Flatten members + their stores into a single row list for table rendering.
+         * Each row is either {type:'member', member, key} or {type:'store', member, store, key}
+         */
+        get flattenedRows() {
+            const rows = [];
+            for (const member of this.filteredMembers) {
+                rows.push({ type: 'member', member, key: `m-${member.user_id}` });
+                for (const store of member.stores) {
+                    rows.push({ type: 'store', member, store, key: `s-${member.user_id}-${store.store_id}` });
+                }
+            }
+            return rows;
+        },
+
         /**
          * Toggle expand/collapse for a member's store rows
          */
diff --git a/app/modules/tenancy/templates/tenancy/merchant/team.html b/app/modules/tenancy/templates/tenancy/merchant/team.html
index b5c61c8c..cfed7e6f 100644
--- a/app/modules/tenancy/templates/tenancy/merchant/team.html
+++ b/app/modules/tenancy/templates/tenancy/merchant/team.html
@@ -87,157 +87,138 @@
                 </tr>
             </thead>
             <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
-                <template x-for="member in filteredMembers" :key="member.user_id">
-                    <tbody class="divide-y dark:divide-gray-700">
-                        {# ── Main member row ── #}
-                        <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
-                            @click="toggleMemberExpand(member.user_id)">
-                            {# Member: Avatar + Name + Email #}
-                            <td class="px-4 py-3">
+                {# Flatten members + stores into a single row list for proper table rendering.
+                   Alpine x-for on <template> inside <tbody> renders each <tr> as a direct child. #}
+                <template x-for="row in flattenedRows" :key="row.key">
+
+                    {# ── Main member row ── #}
+                    <tr x-show="row.type === 'member' || expandedMembers.includes(row.member.user_id)"
+                        :class="row.type === 'member'
+                            ? 'text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer'
+                            : 'bg-gray-50 dark:bg-gray-900/50 text-gray-600 dark:text-gray-400'"
+                        @click="row.type === 'member' && toggleMemberExpand(row.member.user_id)">
+
+                        {# Column 1: Member name OR Store name #}
+                        <td class="px-4 py-3" :class="row.type === 'store' && 'py-2 pl-16'">
+                            {# Member info #}
+                            <template x-if="row.type === 'member'">
                                 <div class="flex items-center text-sm">
                                     <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>
+                                             :class="getMemberStatus(row.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(row.member)"></span>
                                         </div>
                                     </div>
                                     <div class="flex-1">
-                                        <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>
+                                        <p class="font-semibold text-gray-800 dark:text-gray-200" x-text="row.member.full_name"></p>
+                                        <p class="text-xs text-gray-600 dark:text-gray-400" x-text="row.member.email"></p>
                                     </div>
                                     <div class="flex items-center gap-1 ml-2 text-xs text-gray-400">
-                                        <span x-html="$icon(expandedMembers.includes(member.user_id) ? 'chevron-up' : 'chevron-down', 'w-4 h-4')"></span>
-                                        <span x-text="member.stores.length + ' store' + (member.stores.length !== 1 ? 's' : '')"></span>
+                                        <span x-html="$icon(expandedMembers.includes(row.member.user_id) ? 'chevron-up' : 'chevron-down', 'w-4 h-4')"></span>
+                                        <span x-text="row.member.stores.length + ' store' + (row.member.stores.length !== 1 ? 's' : '')"></span>
                                     </div>
                                 </div>
-                            </td>
+                            </template>
+                            {# Store info (sub-row) #}
+                            <template x-if="row.type === 'store'">
+                                <div class="flex items-center gap-2 text-sm">
+                                    <span x-html="$icon('shopping-bag', 'w-3.5 h-3.5 text-gray-400')"></span>
+                                    <span class="font-medium text-gray-700 dark:text-gray-300" x-text="row.store.store_name"></span>
+                                    <span class="text-xs text-gray-400 font-mono" x-text="row.store.store_code"></span>
+                                </div>
+                            </template>
+                        </td>
 
-                            {# Role (summary) #}
-                            <td class="px-4 py-3 text-sm">
-                                <template x-if="member.is_owner">
-                                    <span class="text-xs text-purple-600 dark:text-purple-400 font-medium">Owner</span>
-                                </template>
-                                <template x-if="!member.is_owner && member.stores.length === 1">
-                                    <span class="text-xs text-gray-600 dark:text-gray-400" x-text="member.stores[0].role_name"></span>
-                                </template>
-                                <template x-if="!member.is_owner && member.stores.length > 1">
-                                    <span class="text-xs text-gray-400">{{ _('tenancy.team.multiple_roles') }}</span>
-                                </template>
-                            </td>
+                        {# Column 2: Role #}
+                        <td class="px-4 text-sm" :class="row.type === 'member' ? 'py-3' : 'py-2'">
+                            {# Member-level role summary #}
+                            <template x-if="row.type === 'member' && row.member.is_owner">
+                                <span class="text-xs text-purple-600 dark:text-purple-400 font-medium">Owner</span>
+                            </template>
+                            <template x-if="row.type === 'member' && !row.member.is_owner && row.member.stores.length === 1">
+                                <span class="text-xs text-gray-600 dark:text-gray-400" x-text="row.member.stores[0].role_name"></span>
+                            </template>
+                            <template x-if="row.type === 'member' && !row.member.is_owner && row.member.stores.length > 1">
+                                <span class="text-xs text-gray-400">{{ _('tenancy.team.multiple_roles') }}</span>
+                            </template>
+                            {# Store-level role badge #}
+                            <template x-if="row.type === 'store'">
+                                <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="row.store.role_name || (row.member.is_owner ? 'Owner' : '{{ _('tenancy.team.no_role') }}')"></span>
+                            </template>
+                        </td>
 
-                            {# Overall status #}
-                            <td class="px-4 py-3 text-sm">
-                                <template x-if="member.is_owner">
-                                    <span class="inline-flex items-center px-2 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) === 'active'">
-                                    <span class="inline-flex items-center px-2 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) === 'pending'">
-                                    <span class="inline-flex items-center px-2 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>
-                            </td>
+                        {# Column 3: Status #}
+                        <td class="px-4 text-sm" :class="row.type === 'member' ? 'py-3' : 'py-2'">
+                            {# Member-level status #}
+                            <template x-if="row.type === 'member' && row.member.is_owner">
+                                <span class="inline-flex items-center px-2 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="row.type === 'member' && !row.member.is_owner && getMemberStatus(row.member) === 'active'">
+                                <span class="inline-flex items-center px-2 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="row.type === 'member' && !row.member.is_owner && getMemberStatus(row.member) === 'pending'">
+                                <span class="inline-flex items-center px-2 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>
+                            {# Store-level status #}
+                            <template x-if="row.type === 'store' && row.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="row.type === 'store' && !row.store.is_pending && row.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>
 
-                            {# Member-level actions: fixed 4-slot grid (resend | view | edit | remove) #}
-                            <td class="px-4 py-3 text-sm">
-                                <div class="grid grid-cols-4 gap-1 w-32" @click.stop>
-                                    {# Slot 1: resend (empty at member level) #}
-                                    <span></span>
-                                    {# Slot 2: view #}
-                                    <button @click="openViewModal(member)"
+                        {# Column 4: Actions (4-slot grid) #}
+                        <td class="px-4 text-sm" :class="row.type === 'member' ? 'py-3' : 'py-2'">
+                            <div class="grid grid-cols-4 gap-1 w-32" @click.stop>
+                                {# Slot 1: resend #}
+                                <template x-if="row.type === 'store' && row.store.is_pending && !row.member.is_owner">
+                                    <button @click="resendStoreInvitation(row.store.store_id, row.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>
+                                </template>
+                                <template x-if="!(row.type === 'store' && row.store.is_pending && !row.member.is_owner)"><span></span></template>
+
+                                {# Slot 2: view #}
+                                <template x-if="row.type === 'member'">
+                                    <button @click="openViewModal(row.member)"
                                             class="p-1 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 transition-colors"
                                             :title="$t('tenancy.team.view_member')">
                                         <span x-html="$icon('eye', 'w-4 h-4')"></span>
                                     </button>
-                                    {# Slot 3: edit #}
-                                    <template x-if="!member.is_owner">
-                                        <button @click="openEditModal(member)"
-                                                class="p-1 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 transition-colors"
-                                                :title="$t('tenancy.team.edit_member')">
-                                            <span x-html="$icon('pencil', 'w-4 h-4')"></span>
-                                        </button>
-                                    </template>
-                                    <template x-if="member.is_owner"><span></span></template>
-                                    {# Slot 4: remove (empty at member level — done per-store) #}
-                                    <span></span>
-                                </div>
-                            </td>
-                        </tr>
+                                </template>
+                                <template x-if="row.type !== 'member'"><span></span></template>
 
-                        {# ── 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">
-                                {# Store name (indented) #}
-                                <td class="px-4 py-2 pl-16">
-                                    <div class="flex items-center gap-2 text-sm">
-                                        <span x-html="$icon('shopping-bag', 'w-3.5 h-3.5 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>
+                                {# Slot 3: edit #}
+                                <template x-if="row.type === 'member' && !row.member.is_owner">
+                                    <button @click="openEditModal(row.member)"
+                                            class="p-1 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 transition-colors"
+                                            :title="$t('tenancy.team.edit_member')">
+                                        <span x-html="$icon('pencil', 'w-4 h-4')"></span>
+                                    </button>
+                                </template>
+                                <template x-if="!(row.type === 'member' && !row.member.is_owner)"><span></span></template>
 
-                                {# 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: same 4-slot grid (resend | view | edit | remove) #}
-                                <td class="px-4 py-2 text-sm">
-                                    <div class="grid grid-cols-4 gap-1 w-32">
-                                        {# Slot 1: resend (pending only) #}
-                                        <template x-if="store.is_pending && !member.is_owner">
-                                            <button @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>
-                                        </template>
-                                        <template x-if="!store.is_pending || member.is_owner"><span></span></template>
-                                        {# Slot 2: view (empty at store level) #}
-                                        <span></span>
-                                        {# Slot 3: edit (empty at store level) #}
-                                        <span></span>
-                                        {# Slot 4: remove from store #}
-                                        <template x-if="!member.is_owner">
-                                            <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('x-circle', 'w-3.5 h-3.5')"></span>
-                                            </button>
-                                        </template>
-                                        <template x-if="member.is_owner"><span></span></template>
-                                    </div>
-                                </td>
-                            </tr>
-                        </template>
-                    </tbody>
+                                {# Slot 4: remove #}
+                                <template x-if="row.type === 'store' && !row.member.is_owner">
+                                    <button @click="removeMember(row.store.store_id, row.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('x-circle', 'w-3.5 h-3.5')"></span>
+                                    </button>
+                                </template>
+                                <template x-if="!(row.type === 'store' && !row.member.is_owner)"><span></span></template>
+                            </div>
+                        </td>
+                    </tr>
                 </template>
             </tbody>
         {% endcall %}