update invoice filter and paginator

src/app/uikit/paginator.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, signal, SimpleChanges } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 
 @Component({
@@ -13,24 +13,30 @@ export class PaginatorComponent {
   @Input() loading: boolean = false;
   @Output() onChange = new EventEmitter<number>();
 
-  pagesToShow = computed(() => {
+  pagesToShow = signal<number[]>([]);
+
+  init() {
     const maxVisible = 5;
 
+    let pagesToShow = [];
+
     if (this.totalPages <= maxVisible) {
-      return Array.from({ length: this.totalPages }, (_, i) => i + 1);
+      pagesToShow = Array.from({ length: this.totalPages }, (_, i) => i + 1);
+    } else {
+      let start = Math.max(1, this.currentPage - Math.floor(maxVisible / 2));
+
+      let end = start + maxVisible - 1;
+
+      if (end > this.totalPages) {
+        end = this.totalPages;
+        start = end - maxVisible + 1;
+      }
+
+      pagesToShow = Array.from({ length: end - start + 1 }, (_, i) => start + i);
     }
 
-    let start = Math.max(1, this.currentPage - Math.floor(maxVisible / 2));
-
-    let end = start + maxVisible - 1;
-
-    if (end > this.totalPages) {
-      end = this.totalPages;
-      start = end - maxVisible + 1;
-    }
-
-    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-  });
+    this.pagesToShow.set(pagesToShow);
+  }
 
   onPageChange(newPage: number) {
     this.onChange.emit(newPage);
@@ -46,4 +52,14 @@ export class PaginatorComponent {
       this.onPageChange(this.currentPage + 1);
     }
   }
+
+  ngOnInit() {
+    this.init();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['totalPages'] || changes['currentPage']) {
+      this.init();
+    }
+  }
 }