some ui fix

src/app/uikit/paginator.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, signal } from '@angular/core';
+import { Component, computed, EventEmitter, Input, Output } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 
 @Component({
@@ -7,17 +7,30 @@ import { ButtonModule } from 'primeng/button';
   imports: [ButtonModule],
 })
 export class PaginatorComponent {
-  @Input() totalRecords!: number;
+  @Input() totalPages: number = 1;
   @Input() currentPage: number = 1;
   @Input() perPage: number = 10;
   @Input() loading: boolean = false;
   @Output() onChange = new EventEmitter<number>();
 
-  totalPages = signal<number>(0);
+  pagesToShow = computed(() => {
+    const maxVisible = 5;
 
-  ngOnChanges() {
-    this.totalPages.set(Math.ceil(this.totalRecords / this.perPage));
-  }
+    if (this.totalPages <= maxVisible) {
+      return Array.from({ length: this.totalPages }, (_, i) => i + 1);
+    }
+
+    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);
+  });
 
   onPageChange(newPage: number) {
     this.onChange.emit(newPage);
@@ -29,7 +42,7 @@ export class PaginatorComponent {
     }
   }
   nextPage() {
-    if (this.currentPage < this.totalPages()) {
+    if (this.currentPage < this.totalPages) {
       this.onPageChange(this.currentPage + 1);
     }
   }