From 045ef3a8467d4f0db46617c21bf4b679ed572291 Mon Sep 17 00:00:00 2001
From: Vishal05-dev <vishalvenugopal00@gmail.com>
Date: Thu, 28 May 2026 11:47:08 +0530
Subject: [PATCH 1/2] Updated UI for pagination and pages handle

---
 .../app/core/services/data-storage.service.ts |   2 +-
 .../lost-rid-status.component.html            | 170 ++++++------------
 .../lost-rid-status.component.scss            |  64 +++++++
 .../lost-rid-status.component.ts              |  66 ++++---
 4 files changed, 152 insertions(+), 150 deletions(-)

diff --git a/admin-ui/src/app/core/services/data-storage.service.ts b/admin-ui/src/app/core/services/data-storage.service.ts
index 12b7dba3..f8c50b31 100644
--- a/admin-ui/src/app/core/services/data-storage.service.ts
+++ b/admin-ui/src/app/core/services/data-storage.service.ts
@@ -192,7 +192,7 @@ export class DataStorageService {
 
   getlostridDetails(request: RequestModel): Observable<any> {
     delete request['request']['languageCode'];
-    delete request['request']['pagination'];
+    // delete request['request']['pagination'];
     //request['request']['filters'].push({"columnName": "registrationDate", "fromValue": "2021-11-01", "toValue": "2021-11-17", "type": "between", "value": ""});
     //request['request']['filters'].push({"columnName": "name", "type": "equals", "value": "MOSIP-17076"});
     return this.http.post(this.BASE_URL + appConstants.URL["lost-rid-status"], request);
diff --git a/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.html b/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.html
index bf6d8e7c..4e75d439 100644
--- a/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.html
+++ b/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.html
@@ -1,148 +1,83 @@
 <ng-container>
-  <span
-    ><h3 class="header">{{ "lostRID.titleTxt" | translate }}</h3></span
-  >
+  <span>
+    <h3 class="header">{{ "lostRID.titleTxt" | translate }}</h3>
+  </span>
   <div id="flex-single-view" style="padding-top: 12px; padding-bottom: 10px">
     <div id="flex-container">
-      <div
-        id="myDiv"
-        class="flex-body"
-        *ngIf="displayedColumns && actionEllipsis"
-      >
+      <div id="myDiv" class="flex-body" *ngIf="displayedColumns && actionEllipsis">
         <mat-card *ngIf="filterColumns">
           <div class="example-container">
-            <span
-              ><h3 class="header">
+            <span>
+              <h3 class="header">
                 {{ "lostRID.subtitleenrollment" | translate }}
-              </h3></span
-            >
-            <div
-              *ngFor="let field of filterColumns; let i = index"
-              style="display: inline-flex"
-            >
-              <mat-form-field
-                *ngIf="
+              </h3>
+            </span>
+            <div *ngFor="let field of filterColumns; let i = index" style="display: inline-flex">
+              <mat-form-field *ngIf="
                   field.dropdown === 'false' && field.datePicker !== 'true'
-                "
-                style="padding: 10px; width: 255px"
-              >
-                <input
-                  #{{field.filtername}}
-                  id="{{ field.filtername }}"
-                  (blur)="captureValue($event, field.filtername)"
-                  matInput
-                  placeholder="{{ field.filterlabel[primaryLang] | translate }}"
-                  required="{{ field.ismandatory }}"
-                  [value]="fieldNameList[field.filtername]"
-                />
+                " style="padding: 10px; width: 255px">
+                <input #{{field.filtername}} id="{{ field.filtername }}" (blur)="captureValue($event, field.filtername)"
+                  matInput placeholder="{{ field.filterlabel[primaryLang] | translate }}"
+                  required="{{ field.ismandatory }}" [value]="fieldNameList[field.filtername]" />
               </mat-form-field>
 
-              <mat-form-field
-                *ngIf="field.dropdown !== 'true' && field.datePicker === 'true'"
-                style="padding: 10px; width: 255px"
-              >
-                <input
-                  matInput
-                  [matDatepicker]="picker"
-                  placeholder="{{ field.filterlabel[primaryLang] | translate }}"
-                  id="{{ field.filtername }}"
-                  (dateChange)="
+              <mat-form-field *ngIf="field.dropdown !== 'true' && field.datePicker === 'true'"
+                style="padding: 10px; width: 255px">
+                <input matInput [matDatepicker]="picker" placeholder="{{ field.filterlabel[primaryLang] | translate }}"
+                  id="{{ field.filtername }}" (dateChange)="
                     captureDatePickerValue($event, field.filtername)
-                  "
-                  required="{{ field.ismandatory }}"
-                  [value]="fieldNameList[field.filtername]"
-                />
-                <mat-datepicker-toggle
-                  matSuffix
-                  [for]="picker"
-                ></mat-datepicker-toggle>
+                  " required="{{ field.ismandatory }}" [value]="fieldNameList[field.filtername]" />
+                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                 <mat-datepicker #picker></mat-datepicker>
               </mat-form-field>
             </div>
-            <span
-              ><h3 class="header">
+            <span>
+              <h3 class="header">
                 {{ "lostRID.subtitlelocation" | translate }}
-              </h3></span
-            >
-            <div
-              *ngFor="let field of filterColumns; let i = index"
-              style="display: inline-flex"
-            >
-              <mat-form-field
-                *ngIf="
+              </h3>
+            </span>
+            <div *ngFor="let field of filterColumns; let i = index" style="display: inline-flex">
+              <mat-form-field *ngIf="
                   field.dropdown === 'true' &&
                   field.datePicker !== 'true' &&
                   dynamicDropDown[field.filtername] &&
                   field.filtername !== 'centerId'
-                "
-                style="padding: 10px; width: 255px"
-              >
-                <mat-select
-                  id="{{ field.filtername }}"
-                  required="{{ field.ismandatory }}"
+                " style="padding: 10px; width: 255px">
+                <mat-select id="{{ field.filtername }}" required="{{ field.ismandatory }}"
                   placeholder="{{ field.filterlabel[primaryLang] | translate }}"
-                  [value]="fieldNameList[field.filtername]"
-                >
-                  <mat-option
-                    *ngFor="let data of dynamicDropDown[field.filtername]"
-                    (onSelectionChange)="
+                  [value]="fieldNameList[field.filtername]">
+                  <mat-option *ngFor="let data of dynamicDropDown[field.filtername]" (onSelectionChange)="
                       captureDropDownValue($event, field.filtername)
-                    "
-                    [value]="data.fieldValue"
-                  >
+                    " [value]="data.fieldValue">
                     {{ data.fieldValue }}
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <mat-form-field
-                *ngIf="
+              <mat-form-field *ngIf="
                   field.dropdown === 'true' &&
                   field.datePicker !== 'true' &&
                   field.filtername === 'centerId'
-                "
-                style="padding: 10px; width: 255px"
-              >
-                <mat-select
-                  id="{{ field.filtername }}"
-                  required="{{ field.ismandatory }}"
+                " style="padding: 10px; width: 255px">
+                <mat-select id="{{ field.filtername }}" required="{{ field.ismandatory }}"
                   placeholder="{{ field.filterlabel[primaryLang] | translate }}"
-                  [value]="fieldNameList[field.filtername]"
-                >
-                  <mat-option
-                    *ngFor="let data of dynamicDropDown[field.filtername]"
-                    (onSelectionChange)="
+                  [value]="fieldNameList[field.filtername]">
+                  <mat-option *ngFor="let data of dynamicDropDown[field.filtername]" (onSelectionChange)="
                       captureDropDownValue($event, field.filtername)
-                    "
-                    [value]="data.fieldCode"
-                  >
+                    " [value]="data.fieldCode">
                     {{ data.fieldValue }} ({{ data.fieldCode }})
                   </mat-option>
                 </mat-select>
               </mat-form-field>
             </div>
 
-            <button
-              mat-raised-button
-              class="footer-button"
-              (click)="resetForm()"
-              style="color: #ff4081; background-color: white"
-              id="reset"
-            >
-              {{ "lostRID.clearbtn" | translate }}</button
-            >&nbsp;&nbsp;&nbsp;&nbsp;
-            <button
-              mat-raised-button
-              type="submit"
-              mat-button
-              class="footer-button"
-              (click)="submit()"
-              style="
+            <button mat-raised-button class="footer-button" (click)="resetForm()"
+              style="color: #ff4081; background-color: white" id="reset">
+              {{ "lostRID.clearbtn" | translate }}</button>&nbsp;&nbsp;&nbsp;&nbsp;
+            <button mat-raised-button type="submit" mat-button class="footer-button" (click)="submit()" style="
                 background-color: #ff4081;
                 color: white;
                 width: 90px !important;
-              "
-              id="applyTxt"
-            >
+              " id="applyTxt">
               {{ "lostRID.searchbtn" | translate }}
             </button>
           </div>
@@ -162,12 +97,7 @@
       (sort)="getSortColumn($event)"
     ></app-table> -->
 
-      <table
-        mat-table
-        *ngIf="dataSource.length > 0"
-        [dataSource]="dataSource"
-        class="tableMain"
-      >
+      <table mat-table *ngIf="paginatedData.length > 0" [dataSource]="paginatedData" class="tableMain">
         <!-- ID Column -->
         <ng-container matColumnDef="id">
           <th mat-header-cell *matHeaderCellDef>AID</th>
@@ -187,12 +117,7 @@
         <ng-container matColumnDef="action">
           <th mat-header-cell *matHeaderCellDef>Action</th>
           <td mat-cell *matCellDef="let element; let i = index">
-            <button
-              mat-icon-button
-              color="primary"
-              [disabled]="actionButton"
-              (click)="fetchLostRidDetails(element, i)"
-            >
+            <button mat-icon-button color="primary" [disabled]="actionButton" (click)="fetchLostRidDetails(element, i)">
               <mat-icon>remove_red_eye</mat-icon>
             </button>
           </td>
@@ -201,6 +126,11 @@
         <tr mat-header-row *matHeaderRowDef="displayedColumns1"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns1"></tr>
       </table>
+
+      <!-- Pagination -->
+
+      <mat-paginator [length]="totalRecords" [pageSize]="pageSize" [pageIndex]="pageIndex"
+        (page)="handlePageEvent($event)"></mat-paginator>
       <!--   <table *ngFor="let data of datas; let i = index">
       <tr>
         <td>{{data.registrationId}}</td>
@@ -209,4 +139,4 @@
     </table> -->
     </mat-card>
   </ng-container>
-</ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.scss b/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.scss
index 3dfd3a25..0f43a807 100644
--- a/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.scss
+++ b/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.scss
@@ -141,3 +141,67 @@ h3 {
 .padding{
     padding-left: 16px !important;
 }
+
+$paginator-accent:        #ff4081;
+$paginator-disabled-bg:   #e0e0e0;
+$paginator-disabled-icon: #9e9e9e;
+$paginator-border:        #e0e0e0;
+$paginator-text:          #444;
+$paginator-btn-size:      28px;
+$paginator-icon-size:     18px;
+
+@mixin nav-btn-state($bg, $icon-fill, $opacity: 1) {
+  background-color: $bg !important;
+  opacity: $opacity !important;
+
+  .mat-paginator-icon {
+    fill: $icon-fill !important;
+  }
+}
+
+::ng-deep {
+  .mat-paginator {
+    background: #fff;
+    border-top: 1px solid $paginator-border;
+    padding: 8px 12px;
+    border-radius: 6px;
+  }
+
+  .mat-paginator-navigation-first,
+  .mat-paginator-navigation-previous,
+  .mat-paginator-navigation-next,
+  .mat-paginator-navigation-last {
+    width: $paginator-btn-size !important;
+    height: $paginator-btn-size !important;
+    line-height: $paginator-btn-size !important;
+    min-width: $paginator-btn-size !important;
+    padding: 0 !important;
+    border-radius: 4px !important;
+    margin: 0 2px;
+
+    .mat-paginator-icon {
+      width: $paginator-icon-size !important;
+    }
+
+    &:not([disabled]) {
+      @include nav-btn-state($paginator-accent, white);
+    }
+
+    &[disabled] {
+      @include nav-btn-state($paginator-disabled-bg, $paginator-disabled-icon, 0.5);
+    }
+  }
+
+  .mat-paginator-range-label {
+    margin: 0 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: $paginator-text;
+    min-width: 95px;
+    text-align: center;
+  }
+
+  .mat-paginator-page-size-select {
+    margin: 0 8px;
+  }
+}
\ No newline at end of file
diff --git a/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.ts b/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.ts
index 2e4f1f72..37f5f839 100644
--- a/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.ts
+++ b/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.ts
@@ -67,8 +67,13 @@ export class LostRidStatusComponent implements OnInit {
   locCode = 0;
   displayedColumns1: string[] = ["id", "registrationDate", "action"];
   isTableMain = true;
-   lostRidRoles=[];
-   actionButton =true;
+  lostRidRoles = [];
+  actionButton = true;
+
+  pageSize = 10;
+  pageIndex = 0;
+  totalRecords = 0;
+  paginatedData = [];
 
 
   constructor(
@@ -265,18 +270,18 @@ export class LostRidStatusComponent implements OnInit {
   }
 
   submit() {
-    let count=0;
-    this.lostRidRoles =this.headerService.getRoles().split(',')
-       for(let i=0;i<this.lostRidRoles.length;i++){
-          if(this.lostRidRoles[i].trim() == 'BIOMETRIC READ' || this.lostRidRoles[i].trim()=='DATA READ'){
-              count++
-          } if( count==2){
-            break;
-          }
-       }
-        if(count==2){
-          this.actionButton=false;
-        }
+    let count = 0;
+    this.lostRidRoles = this.headerService.getRoles().split(',')
+    for (let i = 0; i < this.lostRidRoles.length; i++) {
+      if (this.lostRidRoles[i].trim() == 'BIOMETRIC READ' || this.lostRidRoles[i].trim() == 'DATA READ') {
+        count++
+      } if (count == 2) {
+        break;
+      }
+    }
+    if (count == 2) {
+      this.actionButton = false;
+    }
     let self = this;
     let mandatoryFieldName = [];
     let mandatoryFieldLabel = [];
@@ -294,7 +299,7 @@ export class LostRidStatusComponent implements OnInit {
       if (!self.fieldNameList[mandatoryFieldName[i]]) {
         this.showErrorPopup(
           mandatoryFieldLabel[i] +
-            this.popupMessages.genericerror.fieldNameValidation
+          this.popupMessages.genericerror.fieldNameValidation
         );
         break;
       } else if (len === i + 1) {
@@ -307,14 +312,14 @@ export class LostRidStatusComponent implements OnInit {
     let filter = [];
     let name1: string = "";
     for (let value of this.filterColumns) {
-      
-      
+
+
       let count: number = 0;
       if (this.fieldNameList[value.filtername]) {
         if (value.dropdown !== "true" && value.datePicker !== "true") {
           if (
             value.fieldName !== "phone" ||
-            value.fieldName !== "email" 
+            value.fieldName !== "email"
           ) {
             if (count === 0) {
               name1 += this.fieldNameList[value.filtername];
@@ -347,7 +352,7 @@ export class LostRidStatusComponent implements OnInit {
             type: "equals",
             value: this.fieldNameList[value.filtername],
           });
-        } 
+        }
       }
     }
     if (name1) {
@@ -370,7 +375,7 @@ export class LostRidStatusComponent implements OnInit {
     if (this.sortFilter.length == 0) {
       this.sortFilter.push({ sortType: "desc", sortField: "registrationDate" });
     }
-
+    filters.pagination = { pageStart: this.pageIndex * this.pageSize, pageFetch: this.pageSize };
     this.requestModel = new RequestModel(null, null, filters);
     if (filters.filters.length > 0)
       this.dataStroageService
@@ -381,13 +386,12 @@ export class LostRidStatusComponent implements OnInit {
             this.paginatorOptions.pageIndex = 0;
             this.paginatorOptions.pageSize = 0;
             if (response.data.length) {
-              this.dataSource = [...response.data];
-              console.log("dataSource",this.dataSource);
-              
-              this.datas = [...response.data];
-              this.datas.forEach((element, index) => {
-                this.datas[index]["name"] = element.additionalInfo.name;
-              });
+              this.totalRecords = response.totalRecord;
+              this.paginatedData = response.data.map((element) => ({
+                ...element,
+                registrationDate: element.registartionDate,
+                name: element.additionalInfo && element.additionalInfo.name ? element.additionalInfo.name : '',
+              }));
               this.showTable = true;
             } else {
               this.noData = true;
@@ -433,7 +437,7 @@ export class LostRidStatusComponent implements OnInit {
       .subscribe(
         (response: any) => {
           const lostData = response.response.lostRidDataMap;
-          this.openDialog(lostData, this.dataSource, index);
+          this.openDialog(lostData, this.paginatedData, index);
         },
         (error: any) => {
           console.error("Error fetching details", error);
@@ -450,7 +454,11 @@ export class LostRidStatusComponent implements OnInit {
     });
   }
 
-  
+  handlePageEvent(event: PageEvent) {
+    this.pageSize = event.pageSize;
+    this.pageIndex = event.pageIndex;
+    this.getlostridDetails();
+  }
 
   ngOnDestroy() {
     this.subscribed.unsubscribe();

From 40efe083379207858d7f1f9e1ab8ed10dc6c89d9 Mon Sep 17 00:00:00 2001
From: Vishal05-dev <vishalvenugopal00@gmail.com>
Date: Fri, 29 May 2026 12:38:07 +0530
Subject: [PATCH 2/2] Updated paginator control buttons

---
 .../lost-rid-status.component.html            |  16 ++-
 .../lost-rid-status.component.scss            | 124 ++++++++++--------
 2 files changed, 80 insertions(+), 60 deletions(-)

diff --git a/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.html b/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.html
index 4e75d439..adc08c27 100644
--- a/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.html
+++ b/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.html
@@ -86,7 +86,7 @@ <h3 class="header">
     </div>
   </div>
   <ng-container>
-    <mat-card class="mat-elevation-z5" *ngIf="dataSource.length > 0">
+    <mat-card class="mat-elevation-z5" *ngIf="paginatedData.length > 0">
       <!-- <app-table
       *ngIf="datas && displayedColumns && actionButtons"
       [data]="datas"
@@ -129,8 +129,18 @@ <h3 class="header">
 
       <!-- Pagination -->
 
-      <mat-paginator [length]="totalRecords" [pageSize]="pageSize" [pageIndex]="pageIndex"
-        (page)="handlePageEvent($event)"></mat-paginator>
+      <div class="paginator-wrapper">
+    <span style="flex: 1 1 auto;"></span>
+    <span class="paginator-custom-label">Items per page</span>
+    <mat-paginator
+      [length]="totalRecords"
+      [pageSize]="pageSize"
+      [pageSizeOptions]="[5, 10, 25, 50]"
+      showFirstLastButtons="true"
+      [pageIndex]="pageIndex"
+      (page)="handlePageEvent($event)">
+    </mat-paginator>
+  </div>
       <!--   <table *ngFor="let data of datas; let i = index">
       <tr>
         <td>{{data.registrationId}}</td>
diff --git a/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.scss b/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.scss
index 0f43a807..03b4bbeb 100644
--- a/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.scss
+++ b/admin-ui/src/app/features/lost-rid-status/lost-rid-status/lost-rid-status.component.scss
@@ -142,66 +142,76 @@ h3 {
     padding-left: 16px !important;
 }
 
-$paginator-accent:        #ff4081;
-$paginator-disabled-bg:   #e0e0e0;
-$paginator-disabled-icon: #9e9e9e;
-$paginator-border:        #e0e0e0;
-$paginator-text:          #444;
-$paginator-btn-size:      28px;
-$paginator-icon-size:     18px;
-
-@mixin nav-btn-state($bg, $icon-fill, $opacity: 1) {
-  background-color: $bg !important;
-  opacity: $opacity !important;
-
-  .mat-paginator-icon {
-    fill: $icon-fill !important;
-  }
+.paginator-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  background: white;
+  height: 4.5em;
+  border: 1px solid rgba(0,0,0,0.12);
+  border-top: none;
+  padding: 0 8px;
 }
 
-::ng-deep {
-  .mat-paginator {
-    background: #fff;
-    border-top: 1px solid $paginator-border;
-    padding: 8px 12px;
-    border-radius: 6px;
-  }
+.paginator-custom-label {
+  margin: 0 10px;
+  font-size: 9.5px;
+  color: #3b4141;
+  white-space: nowrap;
+}
 
-  .mat-paginator-navigation-first,
-  .mat-paginator-navigation-previous,
-  .mat-paginator-navigation-next,
-  .mat-paginator-navigation-last {
-    width: $paginator-btn-size !important;
-    height: $paginator-btn-size !important;
-    line-height: $paginator-btn-size !important;
-    min-width: $paginator-btn-size !important;
-    padding: 0 !important;
-    border-radius: 4px !important;
-    margin: 0 2px;
-
-    .mat-paginator-icon {
-      width: $paginator-icon-size !important;
-    }
-
-    &:not([disabled]) {
-      @include nav-btn-state($paginator-accent, white);
-    }
-
-    &[disabled] {
-      @include nav-btn-state($paginator-disabled-bg, $paginator-disabled-icon, 0.5);
-    }
-  }
+:host ::ng-deep .paginator-wrapper .mat-paginator-container {
+  min-height: 50px;
+  padding: 0 8px;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+}
 
-  .mat-paginator-range-label {
-    margin: 0 16px;
-    font-size: 14px;
-    font-weight: 500;
-    color: $paginator-text;
-    min-width: 95px;
-    text-align: center;
-  }
+:host ::ng-deep .paginator-wrapper .mat-paginator-page-size-label {
+  display: none;
+}
 
-  .mat-paginator-page-size-select {
-    margin: 0 8px;
-  }
+:host ::ng-deep .paginator-wrapper .mat-paginator-range-label {
+  margin: 0 20px;
+  font-size: 10px !important;
+  color: #3b4141;
+  white-space: nowrap;
+}
+
+:host ::ng-deep .paginator-wrapper .mat-paginator-page-size {
+  align-items: center;
+}
+
+:host ::ng-deep .paginator-wrapper .mat-form-field-appearance-legacy .mat-form-field-infix {
+  border: 0.9px solid #b5b7b7;
+  height: 25px;
+  padding: 0.3em 0;
+}
+
+:host ::ng-deep .paginator-wrapper .mat-form-field-appearance-legacy .mat-form-field-underline {
+  background-color: transparent;
+}
+
+:host ::ng-deep .paginator-wrapper .mat-paginator-page-size-select {
+  width: 50px !important;
+}
+
+:host ::ng-deep .paginator-wrapper .mat-select-value {
+  font-size: 9.5px !important;
+  color: #3b4141;
+  padding-left: 10px;
+}
+
+:host ::ng-deep .paginator-wrapper .mat-icon-button {
+  height: 25px !important;
+  width: 28px !important;
+  border-radius: 0 !important;
+  line-height: 25px;
+  border: 0.9px solid #b5b7b7 !important;
+  padding: 0 !important;
+}
+
+:host ::ng-deep .paginator-wrapper .mat-paginator-icon {
+  width: 18px;
+  fill: #3b4141;
 }
\ No newline at end of file