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/InvoicesView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
 import TableColumnsMenu from '@/components/TableColumnsMenu.vue';
+import { PAGE_SIZE_OPTIONS, usePageSize } from '@/lib/pageSize';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
@@ -75,7 +76,7 @@ const to = ref(typeof route.query.to === 'string' ? route.query.to : '');
 const amountMin = ref('');
 const amountMax = ref('');
 const page = ref(1);
-const pageSize = ref(10);
+const pageSize = usePageSize('invoices', 10);
 const selected = ref<Set<string>>(new Set());
 const menuId = ref<string | null>(null);
 const filterSheet = ref(false);
@@ -476,6 +477,7 @@ onMounted(load);
                   @change="toggleSelectAll"
                 />
               </th>
+              <th class="num-col">#</th>
               <th>شماره فاکتور</th>
               <th>تاریخ</th>
               <th>مشتری</th>
@@ -488,7 +490,7 @@ onMounted(load);
             </tr>
           </thead>
           <tbody>
-            <tr v-for="r in pageItems" :key="r.id">
+            <tr v-for="(r, idx) in pageItems" :key="r.id">
               <td class="check">
                 <input
                   type="checkbox"
@@ -496,6 +498,7 @@ onMounted(load);
                   @change="toggleSelect(r.id)"
                 />
               </td>
+              <td class="num-col">{{ toFaDigits((page - 1) * pageSize + idx + 1) }}</td>
               <td class="mono" dir="ltr">{{ r.number }}</td>
               <td>{{ formatDate(r.date) }}</td>
               <td>
@@ -591,7 +594,9 @@ onMounted(load);
         :total-pages="pageCount"
         :total-items="filtered.length"
         :page-size="pageSize"
+        :page-size-options="PAGE_SIZE_OPTIONS"
         @update:page="page = $event"
+        @update:page-size="pageSize = $event"
       />
     </template>