Feature/tendering search filters restyle

src/app/app-routing.module.ts

@@ -138,6 +138,11 @@ const routes: Routes = [
     canActivate: [AuthGuard], data: { roles: ['admin'] }
   },
 
+  {
+    path: 'browse',
+    loadComponent: () => import('./pages/browse/browse.component').then(c => c.BrowseComponent),
+  },
+
   {
     path: 'landing-page',
     children: [{

src/app/data/availableFilters.ts

@@ -1,17 +1,29 @@
 export type Filter = {
   name: string
+  label?: string
+  clientSide?: boolean
   children?: Filter[]
 }
 
-const availableFilters: Filter[] = [
+export const availableFilters: Filter[] = [
   {
     name: 'compliance_profile',
+    label: 'Compliance level',
     children: [
       { name: 'Baseline' },
       { name: 'Professional' },
       { name: 'Professional+' },
     ],
   },
+  {
+    name: 'procurement_type',
+    label: 'Procurement type',
+    clientSide: true,
+    children: [
+      { name: 'Ready to Buy' },
+      { name: 'Request Quote' },
+    ],
+  },
 ]
 
 export default availableFilters

src/app/data/categoryIcons.ts

@@ -0,0 +1,29 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {
+  faBolt,
+  faBrain,
+  faCode,
+  faLayerGroup,
+  faPlug,
+  faServer,
+  faShieldHalved,
+  faUserTie
+} from '@fortawesome/pro-solid-svg-icons';
+
+export const DEFAULT_CATEGORY_ICON: IconDefinition = faLayerGroup;
+
+export const CATEGORY_ICONS: Record<string, IconDefinition> = {
+  Security: faShieldHalved,
+  Infrastructure: faServer,
+  Productivity: faBolt,
+  DevOps: faCode,
+  Professional: faUserTie,
+  Specific: faLayerGroup,
+  'Data and AI': faBrain,
+  Integration: faPlug,
+};
+
+export function iconForCategory(name: string | null | undefined): IconDefinition {
+  if (!name) return DEFAULT_CATEGORY_ICON;
+  return CATEGORY_ICONS[name] ?? DEFAULT_CATEGORY_ICON;
+}

src/app/features/quotes/services/quote.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
 import { Observable, map, forkJoin } from 'rxjs';
 import { Quote, Quote_Create, Quote_Update, QuoteStateType } from 'src/app/models/quote.model';
-import { Tender } from 'src/app/models/tender.model';
+import { Tender, TenderStateType } from 'src/app/models/tender.model';
 import { ApiRole, API_ROLES } from 'src/app/models/roles.constants';
 import { QUOTE_STATUSES, QUOTE_CATEGORIES } from 'src/app/models/quote.constants';
 import { environment } from '../../../../environments/environment';
@@ -577,14 +577,16 @@ export class QuoteService {
     // - pending → draft → 'draft'
     // - inProgress → pre-launched → 'pre-launched'
     // - approved → sent → 'launched'
-    // - accepted/cancelled/rejected → closed → 'closed'
-    let state: 'draft' | 'pre-launched' | 'pending' | 'sent' | 'closed' = 'draft';
+    // - accepted → closed → 'closed'
+    // - cancelled → cancelled (preserved to distinguish from accepted/rejected)
+    // - rejected → rejected (preserved to distinguish from accepted/cancelled)
+    let state: TenderStateType = 'draft';
     if (quoteItemState === QUOTE_STATUSES.PENDING) state = 'draft';
     else if (quoteItemState === QUOTE_STATUSES.IN_PROGRESS) state = 'pre-launched';
     else if (quoteItemState === QUOTE_STATUSES.APPROVED) state = 'sent';
     else if (quoteItemState === QUOTE_STATUSES.ACCEPTED) state = 'closed';
-    else if (quoteItemState === QUOTE_STATUSES.CANCELLED) state = 'closed';
-    else if (quoteItemState === QUOTE_STATUSES.REJECTED) state = 'closed';
+    else if (quoteItemState === QUOTE_STATUSES.CANCELLED) state = 'cancelled';
+    else if (quoteItemState === QUOTE_STATUSES.REJECTED) state = 'rejected';
 
     // Extract external_id, provider and buyerPartyId from quote
     const external_id = quote.externalId;

src/app/features/tenders/pages/tender-list/tender-list.component.spec.ts

@@ -0,0 +1,141 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { of } from 'rxjs';
+import { TenderListComponent } from './tender-list.component';
+import { QuoteService } from '../../../quotes/services/quote.service';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+import { NotificationService } from 'src/app/services/notification.service';
+import { AccountServiceService } from 'src/app/services/account-service.service';
+import { ProviderService } from 'src/app/services/provider.service';
+import { ApiServiceService } from 'src/app/services/product-service.service';
+import { QUOTE_CATEGORIES, QUOTE_STATUSES } from 'src/app/models/quote.constants';
+import { UI_ROLES } from 'src/app/models/roles.constants';
+import { Quote } from 'src/app/models/quote.model';
+
+describe('TenderListComponent', () => {
+  let fixture: ComponentFixture<TenderListComponent>;
+  let component: TenderListComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TenderListComponent],
+      providers: [
+        {
+          provide: QuoteService,
+          useValue: {
+            getCoordinatorQuotesByUser: () => of([]),
+            getTenderingQuotesByUser: () => of([]),
+          },
+        },
+        {
+          provide: LocalStorageService,
+          useValue: {
+            getObject: () => ({
+              id: 'user-1',
+              logged_as: 'user-1',
+              partyId: 'party-1',
+              organizations: [],
+            }),
+          },
+        },
+        { provide: NotificationService, useValue: { showError: jasmine.createSpy('showError'), showSuccess: jasmine.createSpy('showSuccess') } },
+        { provide: AccountServiceService, useValue: {} },
+        { provide: ProviderService, useValue: { getProviderCountryOptions: () => of([]) } },
+        { provide: ApiServiceService, useValue: {} },
+        { provide: Router, useValue: { navigate: jasmine.createSpy('navigate') } },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TenderListComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('renders tender status badges with a bordered surface so they remain distinct in tables', () => {
+    fixture.detectChanges();
+
+    component.selectedRole = UI_ROLES.BUYER;
+    component.loading = false;
+    component.error = null;
+    component.filteredQuotes = [
+      {
+        id: 'quote-1',
+        category: QUOTE_CATEGORIES.COORDINATOR,
+        description: 'Tender with closed state',
+        quoteItem: [{ state: QUOTE_STATUSES.ACCEPTED }],
+      } as Quote,
+    ];
+
+    fixture.detectChanges();
+
+    const badge = fixture.nativeElement.querySelector('.status-badge') as HTMLElement;
+
+    expect(badge).not.toBeNull();
+
+    const computedStyle = getComputedStyle(badge);
+
+    expect(computedStyle.borderStyle).not.toBe('none');
+    expect(computedStyle.borderWidth).not.toBe('0px');
+  });
+
+  it('shows tender status filter options with user friendly labels', () => {
+    component.selectedRole = UI_ROLES.BUYER;
+
+    const labels = component.filterStatusOptions.map(option => option.label);
+
+    expect(labels).toContain('Not Yet Submitted');
+    expect(labels).toContain('Invites Sent, Waiting Acceptance');
+    expect(labels).toContain('Tender Started');
+    expect(labels).toContain('Tender Closed');
+    expect(labels.some(label => label.includes('-'))).toBeFalse();
+  });
+
+  it('renders tender status badges with user friendly text', () => {
+    fixture.detectChanges();
+
+    component.selectedRole = UI_ROLES.BUYER;
+    component.loading = false;
+    component.error = null;
+    component.filteredQuotes = [
+      {
+        id: 'quote-1',
+        category: QUOTE_CATEGORIES.COORDINATOR,
+        description: 'Tender with closed state',
+        quoteItem: [{ state: QUOTE_STATUSES.ACCEPTED }],
+      } as Quote,
+    ];
+
+    fixture.detectChanges();
+
+    const badge = fixture.nativeElement.querySelector('.status-badge') as HTMLElement;
+
+    expect(badge.textContent?.trim()).toBe('Tender Closed');
+  });
+
+  it('keeps provider tender status badges readable in the table row', () => {
+    fixture.detectChanges();
+
+    component.selectedRole = UI_ROLES.SELLER;
+    component.loading = false;
+    component.error = null;
+    component.filteredQuotes = [
+      {
+        id: 'quote-1',
+        category: QUOTE_CATEGORIES.TENDER,
+        description: 'Provider invite',
+        quoteDate: '2026-05-22T00:00:00.000Z',
+        quoteItem: [{ state: QUOTE_STATUSES.PENDING }],
+        relatedParty: [],
+      } as Quote,
+    ];
+
+    fixture.detectChanges();
+
+    const badge = fixture.nativeElement.querySelector('.status-badge') as HTMLElement;
+    const row = fixture.nativeElement.querySelector('[data-quote-id="quote-1"]') as HTMLElement;
+
+    expect(badge.textContent?.trim()).toBe('Invite Received');
+    expect(badge.className).toContain('whitespace-nowrap');
+    expect(row.className).toContain('grid-cols-12');
+    expect(row.querySelector('[data-testid="provider-tender-status-cell"]')?.className).toContain('col-span-2');
+  });
+});