feat(cashier): add server-side pagination to GL entries closing report

- Backend: add offset/limit query params to gl-entries endpoint
- Backend: return totalFilteredRecords + pageItems response structure
- Backend: totals (DR/CR) computed from all records regardless of page
- Frontend: integrate mat-paginator with page size options 10/20/50/100
- Frontend: reset offset to 0 on filter change

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/cashier/cashier.service.ts

@@ -134,8 +134,8 @@ export class CashierService {
     return this.http.get('/cashreports/cashier-day-status');
   }
 
-  getGlEntries(date: string, cashierId?: number, tellerId?: number): Observable<any> {
+  getGlEntries(date: string, cashierId?: number, tellerId?: number, offset = 0, limit = 20): Observable<any> {
-    let params = new HttpParams().set('date', date);
+    let params = new HttpParams().set('date', date).set('offset', String(offset)).set('limit', String(limit));
     if (cashierId) params = params.set('cashierId', String(cashierId));
     if (tellerId) params = params.set('tellerId', String(tellerId));
     return this.http.get('/cashreports/gl-entries', { params });

src/app/cashier/closing-cash-report/closing-cash-report.component.html

@@ -262,12 +262,20 @@
           </tbody>
           <tfoot>
             <tr class="gl-foot">
-              <td colspan="6" class="gl-foot__label">Total</td>
+              <td colspan="6" class="gl-foot__label">Total (All Pages)</td>
               <td class="num gl-amt--dr gl-foot__val">₹{{ glTotalDr | number: '1.2-2' }}</td>
               <td class="num gl-amt--cr gl-foot__val">₹{{ glTotalCr | number: '1.2-2' }}</td>
             </tr>
           </tfoot>
         </table>
+        <mat-paginator
+          [length]="glTotal"
+          [pageSize]="glPageSize"
+          [pageSizeOptions]="glPageSizeOptions"
+          [pageIndex]="glOffset / glPageSize"
+          showFirstLastButtons
+          (page)="onGlPageChange($event)"
+        ></mat-paginator>
       }
     </div>
   }

src/app/cashier/closing-cash-report/closing-cash-report.component.ts

@@ -10,6 +10,7 @@ import { Component, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { CashierService } from '../cashier.service';
 
 /** Day-wise denomination-wise closing cash collected from deposits. */
@@ -21,7 +22,8 @@ import { CashierService } from '../cashier.service';
   imports: [
     CommonModule,
     FormsModule,
-    MatIconModule
+    MatIconModule,
+    MatPaginatorModule
   ]
 })
 export class ClosingCashReportComponent implements OnInit {
@@ -44,6 +46,17 @@ export class ClosingCashReportComponent implements OnInit {
   glLoading = false;
   glLoaded = false;
 
+  // GL Pagination
+  glTotal = 0;
+  glOffset = 0;
+  glPageSize = 20;
+  glPageSizeOptions = [
+    10,
+    20,
+    50,
+    100
+  ];
+
   // Filters for GL
   tellers: any[] = [];
   cashiers: any[] = [];
@@ -111,22 +124,37 @@ export class ClosingCashReportComponent implements OnInit {
         error: () => {}
       });
     }
+    this.glOffset = 0;
     this.glLoaded = false;
     this.loadGl();
   }
 
   onCashierChange(): void {
+    this.glOffset = 0;
     this.glLoaded = false;
     this.loadGl();
   }
 
+  onGlPageChange(event: PageEvent): void {
+    this.glPageSize = event.pageSize;
+    this.glOffset = event.pageIndex * event.pageSize;
+    this.loadGl();
+  }
+
   loadGl(): void {
     this.glLoading = true;
     this.service
-      .getGlEntries(this.date, this.selectedCashierId || undefined, this.selectedTellerId || undefined)
+      .getGlEntries(
+        this.date,
+        this.selectedCashierId || undefined,
+        this.selectedTellerId || undefined,
+        this.glOffset,
+        this.glPageSize
+      )
       .subscribe({
         next: (res: any) => {
-          this.glRows = res?.rows || [];
+          this.glRows = res?.pageItems || [];
+          this.glTotal = Number(res?.totalFilteredRecords || 0);
           this.glTotalDr = Number(res?.totalDr || 0);
           this.glTotalCr = Number(res?.totalCr || 0);
           this.glLoading = false;
@@ -134,6 +162,7 @@ export class ClosingCashReportComponent implements OnInit {
         },
         error: () => {
           this.glRows = [];
+          this.glTotal = 0;
           this.glTotalDr = 0;
           this.glTotalCr = 0;
           this.glLoading = false;