feat: add Paginator component with navigation functionality and integrate into reutilizables test page

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -174,6 +174,20 @@
           <app-button variant="secondary" (click)="clearFile()">Limpiar archivo</app-button>
         </div>
       </div>
+
+      <hr class="section-divider" />
+
+      <div class="paginator-showcase">
+        <h2>Paginator</h2>
+        <p class="text-muted mb-0">
+          Componente shared para navegar por paginas con primera, anterior, siguiente y ultima.
+        </p>
+        <app-paginator
+          [page]="currentPage"
+          [totalPages]="paginatorTotalPages"
+          (pageChange)="currentPage = $event"
+        />
+      </div>
     </div>
   </section>
 

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss

@@ -55,6 +55,13 @@ h1 {
   font-weight: 700;
 }
 
+.paginator-showcase {
+  display: grid;
+  justify-items: center;
+  gap: 0.75rem;
+  text-align: center;
+}
+
 .button-grid--single-char app-button {
   min-width: 3rem;
 }

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts

@@ -1,5 +1,6 @@
 import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
+import { describe, expect, it, vi } from 'vitest';
 import { ReutilizablesTestPageComponent } from './reutilizables-test-page.component';
 import { Tenant } from '../../../../core/services/tenant.interface';
 import { TenantService } from '../../../../core/services/tenant.service';
@@ -63,4 +64,24 @@ describe('ReutilizablesTestPageComponent', () => {
     expect(element.textContent).toContain(tenant.secondary_color);
     expect(element.textContent).toContain(tenant.danger_color);
   });
+
+  it('renders the paginator demo with the initial page status', async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReutilizablesTestPageComponent],
+      providers: [
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub(tenant)
+        }
+      ]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ReutilizablesTestPageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.querySelector('app-paginator')).not.toBeNull();
+    expect(element.querySelector('[data-testid="paginator-status"]')?.textContent?.trim()).toBe('1/8');
+  });
 });

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts

@@ -1,13 +1,14 @@
 import { Component, inject } from '@angular/core';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { InputComponent } from '../../../../shared/components/input/input.component';
+import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
 import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
 import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
 import { TenantService } from '../../../../core/services/tenant.service';
 
 @Component({
   selector: 'app-reutilizables-test-page',
-  imports: [ButtonComponent, InputComponent, ProductCardComponent, StoreSectionComponent],
+  imports: [ButtonComponent, InputComponent, PaginatorComponent, ProductCardComponent, StoreSectionComponent],
   templateUrl: './reutilizables-test-page.component.html',
   styleUrl: './reutilizables-test-page.component.scss'
 })
@@ -29,6 +30,8 @@ export class ReutilizablesTestPageComponent {
   protected fileName = '';
   protected clearTrigger = 0;
   protected editableDisabled = true;
+  protected currentPage = 1;
+  protected readonly paginatorTotalPages = 8;
 
   protected readonly testProducts = [
     {