feat: implement invoice payments component and integrate with supplier invoices

src/app/shared/components/pageDataList/page-data-list.component.html

@@ -41,7 +41,15 @@
       <ng-template #header let-columns>
         <tr>
           @for (col of columns; track col.header) {
-            <th [style]="{ width: col.width, minWidth: col.minWidth }">{{ col.header }}</th>
+            <th
+              [style]="
+                col.type === 'index'
+                  ? { width: '3rem', minWidth: '3rem' }
+                  : { width: col.width, minWidth: col.minWidth }
+              "
+            >
+              {{ col.header }}
+            </th>
           }
           @if (actionsCount()) {
             <th type="th" [style]="{ width: `${actionsCount() * 2 + (actionsCount() - 1) * 0.25}rem` }"></th>
@@ -49,11 +57,13 @@
         </tr>
       </ng-template>
 
-      <ng-template #body let-item>
+      <ng-template #body let-item let-i="rowIndex">
         <tr>
           @for (col of columns; track col.field) {
             <td>
-              @if (getTemplate(col)) {
+              @if (col.type === "index") {
+                {{ i * (currentPage || 1) + 1 }}
+              } @else if (getTemplate(col)) {
                 <ng-container
                   [ngTemplateOutlet]="getTemplate(col)"
                   [ngTemplateOutletContext]="{ $implicit: item }"