Add row selection, bulk delete, row numbers and page size picker to tables; redesign person profile header

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/views/LoyaltyClubView.vue

@@ -754,6 +754,7 @@ onBeforeUnmount(() => {
               <th class="check">
                 <input type="checkbox" :checked="allSelected" @change="toggleAll" />
               </th>
+              <th class="num-col">#</th>
               <th>نام</th>
               <th>شرکت</th>
               <th>سطح فعلی</th>
@@ -763,10 +764,11 @@ onBeforeUnmount(() => {
             </tr>
           </thead>
           <tbody>
-            <tr v-for="m in visibleMembers" :key="m.id">
+            <tr v-for="(m, idx) in visibleMembers" :key="m.id">
               <td class="check">
                 <input type="checkbox" :checked="selected.includes(m.id)" @change="toggleOne(m.id)" />
               </td>
+              <td class="num-col">{{ toFaDigits(idx + 1) }}</td>
               <td>
                 <div class="who">
                   <span class="avatar">{{ initials(m.fullName) }}</span>