223 changed files with 39203 additions and 15363 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@ -1,34 +0,0 @@
 {
  "permissions": {
    "allow": [
      "Bash(npm install)",
      "Bash(docker ps:*)",
      "Bash(docker cp:*)",
      "Bash(docker exec:*)",
      "Bash(find:*)",
      "Bash(docker restart:*)",
      "Bash(npm run build)",
      "Bash(rm:*)",
      "Bash(npm audit fix:*)",
      "Bash(sudo chown:*)",
      "Bash(chmod:*)",
      "Bash(npm audit:*)",
      "Bash(npm view:*)",
      "Bash(npm run build:ssr:*)",
      "Bash(pkill:*)",
      "WebSearch",
      "Bash(lsof:*)",
      "Bash(xargs:*)",
      "Bash(curl:*)",
      "Bash(grep:*)",
      "Bash(cat:*)",
      "Bash(NODE_ENV=development npm run build:ssr:*)",
      "Bash(ls:*)",
      "WebFetch(domain:angular.dev)",
      "Bash(killall:*)",
      "Bash(echo:*)",
      "Bash(npm run build:*)",
      "Bash(npx tsc:*)"
    ]
  }
 }
--- a/.dockerignore
+++ b/.dockerignore
@ -1,6 +0,0 @@
 node_modules
 .git
 .idea
 .vscode
 dist
 coverage
--- a/.gitattributes
+++ b/.gitattributes
@ -1,4 +0,0 @@
 * text=auto eol=lf
 *.png binary
 *.jpg binary
 *.jpeg binary
--- a/CHANGES.md
+++ b/CHANGES.md
@ -1,647 +0,0 @@
 # Changelog - BizMatch Project
 Dokumentation aller wichtigen Änderungen am BizMatch-Projekt. Diese Datei listet Feature-Implementierungen, Bugfixes, Datenbank-Migrationen und architektonische Verbesserungen auf.
 ---
 ## Inhaltsverzeichnis
 1. [Datenbank-Änderungen](#1-datenbank-änderungen)
 2. [Backend-Änderungen](#2-backend-änderungen)
 3. [Frontend-Änderungen](#3-frontend-änderungen)
 4. [SEO-Verbesserungen](#4-seo-verbesserungen)
 5. [Code-Cleanup & Wartung](#5-code-cleanup--wartung)
 6. [Bekannte Issues & Workarounds](#6-bekannte-issues--workarounds)
 ---
 ## 1) Datenbank-Änderungen
 ### 1.1 Schema-Migration: JSON-basierte Speicherung
 **Datum:** November 2025
 **Status:** ✅ Abgeschlossen
 #### Zusammenfassung der Änderungen
 Die Datenbank wurde von einem **relationalen Schema** zu einem **JSON-basierten Schema** migriert. Dies bedeutet:
 - ✅ **Neue Tabellen wurden erstellt** (`users_json`, `businesses_json`, `commercials_json`)
 - ❌ **Alte Tabellen wurden NICHT gelöscht** (`users`, `businesses`, `commercials` existieren noch)
 - ✅ **Alle Daten wurden migriert** (kopiert von alten zu neuen Tabellen)
 - ✅ **Anwendung nutzt ausschließlich neue Tabellen** (alte Tabellen dienen nur als Backup)
 #### Detaillierte Tabellenstruktur
 **ALTE Tabellen (nicht mehr in Verwendung, aber noch vorhanden):**
 ```sql
 -- users (relational)
 CREATE TABLE users (
  id UUID PRIMARY KEY,
  email VARCHAR(255),
  firstname VARCHAR(100),
  lastname VARCHAR(100),
  phone VARCHAR(50),
  location_name VARCHAR(255),
  location_state VARCHAR(2),
  location_latitude FLOAT,
  location_longitude FLOAT,
  customer_type VARCHAR(50),
  customer_sub_type VARCHAR(50),
  show_in_directory BOOLEAN,
  created TIMESTAMP,
  updated TIMESTAMP,
  -- ... weitere 20+ Spalten
 );
 -- businesses (relational)
 CREATE TABLE businesses (
  id UUID PRIMARY KEY,
  email VARCHAR(255),
  title VARCHAR(500),
  asking_price DECIMAL,
  established INTEGER,
  revenue DECIMAL,
  cash_flow DECIMAL,
  -- ... weitere 30+ Spalten für alle Business-Eigenschaften
 );
 -- commercials (relational)
 CREATE TABLE commercials (
  id UUID PRIMARY KEY,
  email VARCHAR(255),
  title VARCHAR(500),
  asking_price DECIMAL,
  property_type VARCHAR(100),
  -- ... weitere 25+ Spalten für alle Property-Eigenschaften
 );
 ```
 **NEUE Tabellen (aktuell in Verwendung):**
 ```sql
 -- users_json (JSON-basiert)
 CREATE TABLE users_json (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email VARCHAR(255) UNIQUE NOT NULL,
  data JSONB NOT NULL
 );
 -- businesses_json (JSON-basiert)
 CREATE TABLE businesses_json (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email VARCHAR(255) NOT NULL,
  data JSONB NOT NULL
 );
 -- commercials_json (JSON-basiert)
 CREATE TABLE commercials_json (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email VARCHAR(255) NOT NULL,
  data JSONB NOT NULL
 );
 ```
 #### Was wurde NICHT geändert
 **❌ Folgende Dinge wurden NICHT geändert:**
 1. **Alte Tabellen existieren weiterhin** - Sie wurden nicht gelöscht, um als Backup zu dienen
 2. **Datenbank-Name** - Weiterhin `bizmatch` (keine Änderung)
 3. **Datenbank-User** - Weiterhin `bizmatch` (keine Änderung)
 4. **Datenbank-Passwort** - Keine Änderung
 5. **Datenbank-Port** - Weiterhin `5432` (keine Änderung)
 6. **Docker-Container-Name** - Weiterhin `bizmatchdb` (keine Änderung)
 7. **Indices** - PostgreSQL JSONB-Indices wurden automatisch erstellt
 #### Was wurde geändert
 **✅ Folgende Dinge wurden geändert:**
 1. **Anwendungs-Code verwendet nur noch neue Tabellen:**
   - Backend liest/schreibt nur noch in `users_json`, `businesses_json`, `commercials_json`
   - Drizzle ORM Schema wurde aktualisiert (`bizmatch-server/src/drizzle/schema.ts`)
   - Alle Services wurden angepasst (user.service.ts, business-listing.service.ts, etc.)
 2. **Datenstruktur in JSONB-Spalten:**
   - Alle Felder, die vorher einzelne Spalten waren, sind jetzt in der `data`-Spalte als JSON
   - Nested Objects möglich (z.B. `location` mit `name`, `state`, `latitude`, `longitude`)
   - Arrays direkt im JSON speicherbar (z.B. `imageOrder`, `areasServed`)
 3. **Query-Syntax:**
   - Statt `WHERE firstname = 'John'` → `WHERE (data->>'firstname') = 'John'`
   - Statt `WHERE location_state = 'TX'` → `WHERE (data->'location'->>'state') = 'TX'`
   - Haversine-Formel für Radius-Suche nutzt jetzt JSON-Pfade
 #### Beispiel: User-Datensatz Vorher/Nachher
 **VORHER (relationale Tabelle `users`):**
 | id | email | firstname | lastname | phone | location_name | location_state | location_latitude | location_longitude | customer_type | customer_sub_type | show_in_directory | created | updated |
 |---|---|---|---|---|---|---|---|---|---|---|---|---|---|
 | abc-123 | john@example.com | John | Doe | +1-555-0123 | Austin | TX | 30.2672 | -97.7431 | professional | broker | true | 2025-11-01 | 2025-11-25 |
 **NACHHER (JSON-Tabelle `users_json`):**
 | id | email | data (JSONB) |
 |---|---|---|
 | abc-123 | john@example.com | `{"firstname": "John", "lastname": "Doe", "phone": "+1-555-0123", "location": {"name": "Austin", "state": "TX", "latitude": 30.2672, "longitude": -97.7431}, "customerType": "professional", "customerSubType": "broker", "showInDirectory": true, "created": "2025-11-01T10:00:00Z", "updated": "2025-11-25T15:30:00Z"}` |
 #### Vorteile der neuen Struktur
 - ✅ **Keine Schema-Migrationen mehr nötig** - Neue Felder einfach im JSON hinzufügen
 - ✅ **Flexiblere Datenstrukturen** - Nested Objects und Arrays direkt speicherbar
 - ✅ **Einfacheres ORM-Mapping** - TypeScript-Interfaces direkt zu JSON serialisierbar
 - ✅ **Bessere Performance** - PostgreSQL JSONB ist indexierbar und schnell durchsuchbar
 - ✅ **Reduzierte Code-Komplexität** - Weniger Join-Operationen, weniger Spalten-Mapping
 #### Migration durchführen (Referenz)
 Die Migration wurde bereits durchgeführt. Falls nötig, Backup-Prozess:
 ```bash
 # 1. Backup der alten relationalen Tabellen
 docker exec -it bizmatchdb \
  pg_dump -U bizmatch -d bizmatch -t users -t businesses -t commercials \
  -F c -Z 9 -f /tmp/backup_relational_tables.dump
 # 2. Neue Tabellen sind bereits vorhanden und in Verwendung
 # 3. Alte Tabellen können bei Bedarf gelöscht werden (NICHT empfohlen vor finalem Produktions-Test)
 ```
 ### 1.2 Location-Datenstruktur bei Professionals
 **Datum:** November 2025
 **Status:** ✅ Abgeschlossen
 #### Problem
 Professionals-Suche funktionierte nicht, da die Datenstruktur für `location` falsch angenommen wurde.
 #### Lösung
 - Professionals verwenden `location`-Objekt (nicht `areasServed`-Array)
 - Struktur: `{ name: 'Austin', state: 'TX', latitude: 30.2672, longitude: -97.7431 }`
 #### Betroffene Queries
 - Exact City Search: `location.name` ILIKE-Vergleich
 - Radius Search: Haversine-Formel mit `location.latitude` und `location.longitude`
 ---
 ## 2) Backend-Änderungen
 ### 2.1 Professionals Search Fix
 **Datei:** `bizmatch-server/src/user/user.service.ts`
 **Status:** ✅ Abgeschlossen
 #### Änderungen
 **Exact City Search (Zeile 28-30):**
 ```typescript
 if (criteria.city && criteria.searchType === 'exact') {
  whereConditions.push(sql`(${schema.users_json.data}->'location'->>'name') ILIKE ${criteria.city.name}`);
 }
 ```
 **Radius Search (Zeile 32-36):**
 ```typescript
 if (criteria.city && criteria.radius && criteria.searchType === 'radius' && criteria.radius) {
  const cityGeo = this.geoService.getCityWithCoords(criteria.state, criteria.city.name);
  const distanceQuery = getDistanceQuery(schema.users_json, cityGeo.latitude, cityGeo.longitude);
  whereConditions.push(sql`${distanceQuery} <= ${criteria.radius}`);
 }
 ```
 **State Filter (Zeile 55-57):**
 ```typescript
 if (criteria.state) {
  whereConditions.push(sql`(${schema.users_json.data}->'location'->>'state') = ${criteria.state}`);
 }
 ```
 **County Filter (Zeile 51-53):**
 ```typescript
 if (criteria.counties && criteria.counties.length > 0) {
  whereConditions.push(or(...criteria.counties.map(county =>
    sql`(${schema.users_json.data}->'location'->>'county') ILIKE ${`%${county}%`}`
  )));
 }
 ```
 ### 2.2 TypeScript-Fehler behoben
 **Problem:**
 Kompilierungsfehler wegen falscher Parameter-Übergabe an `getDistanceQuery()`
 **Lösung:**
 - ❌ Alt: `getDistanceQuery(schema.users_json.data, 'location', lat, lon)`
 - ✅ Neu: `getDistanceQuery(schema.users_json, lat, lon)`
 ### 2.3 Slug-Unterstützung für SEO-freundliche URLs
 **Status:** ✅ Implementiert
 Business- und Commercial-Property-Listings können nun über SEO-freundliche Slugs aufgerufen werden:
 - `/business/austin-coffee-shop-for-sale` statt `/business/uuid-123-456`
 - `/commercial-property/downtown-retail-space-dallas` statt `/commercial-property/uuid-789`
 **Implementierung:**
 - Automatische Slug-Generierung aus Listing-Titeln
 - Slug-basierte Routen in allen Controllern
 - Fallback auf ID, falls kein Slug vorhanden
 ---
 ## 3) Frontend-Änderungen
 ### 3.1 Breadcrumbs-Navigation
 **Datum:** November 2025
 **Status:** ✅ Abgeschlossen
 #### Implementierte Komponenten
 **Betroffene Seiten:**
 - ✅ Business Detail Pages (`details-business-listing.component.ts`)
 - ✅ Commercial Property Detail Pages (`details-commercial-property-listing.component.ts`)
 - ✅ User Detail Pages (`details-user.component.ts`)
 - ✅ 404 Not Found Page (`not-found.component.ts`)
 - ✅ Business Listings Overview (`business-listings.component.ts`)
 - ✅ Commercial Property Listings Overview (`commercial-property-listings.component.ts`)
 **Beispiel-Struktur:**
 ```
 Home > Commercial Properties > Austin Office Space for Sale
 Home > Business Listings > Restaurant for Sale in Dallas
 Home > 404 - Page Not Found
 ```
 **Komponente:** `bizmatch/src/app/components/breadcrumbs/breadcrumbs.component.ts`
 ### 3.2 Automatische 50-Meilen-Radius-Auswahl
 **Datum:** November 2025
 **Status:** ✅ Abgeschlossen
 #### Änderungen
 Bei Auswahl einer Stadt in den Suchfiltern wird automatisch:
 - **Search Type** auf `"radius"` gesetzt
 - **Radius** auf `50` Meilen gesetzt
 - Filter-UI aktualisiert (Radius-Feld aktiv und ausgefüllt)
 **Betroffene Dateien:**
 - `bizmatch/src/app/components/search-modal/search-modal.component.ts` (Business)
 - `bizmatch/src/app/components/search-modal/search-modal-commercial.component.ts` (Properties)
 - `bizmatch/src/app/components/search-modal/search-modal-broker.component.ts` (Professionals)
 **Implementierung (Zeilen 255-269 in search-modal.component.ts):**
 ```typescript
 setCity(city: any): void {
  const updates: any = {};
  if (city) {
    updates.city = city;
    updates.state = city.state;
    // Automatically set radius to 50 miles and enable radius search
    updates.searchType = 'radius';
    updates.radius = 50;
  } else {
    updates.city = null;
    updates.radius = null;
    updates.searchType = 'exact';
  }
  this.updateCriteria(updates);
 }
 ```
 ### 3.3 Error Handling Verbesserungen
 **Betroffene Komponenten:**
 - `details-business-listing.component.ts`
 - `details-commercial-property-listing.component.ts`
 **Änderungen:**
 - ✅ Safe Navigation für `listing.imageOrder` (Null-Check vor forEach)
 - ✅ Verbesserte Error-Message-Extraktion mit Optional Chaining
 - ✅ Default-Breadcrumbs auch bei Fehlerfall
 - ✅ Korrekte Navigation zu 404-Seite bei fehlenden Listings
 **Beispiel (Zeile 139 in details-commercial-property-listing.component.ts):**
 ```typescript
 if (this.listing.imageOrder && Array.isArray(this.listing.imageOrder)) {
  this.listing.imageOrder.forEach(image => {
    const imageURL = `${this.env.imageBaseUrl}/pictures/property/${this.listing.imagePath}/${this.listing.serialId}/${image}`;
    this.images.push(new ImageItem({ src: imageURL, thumb: imageURL }));
  });
 }
 ```
 ### 3.4 Business Location Privacy - Stadt-Grenze statt exakter Adresse
 **Datum:** November 2025
 **Status:** ✅ Abgeschlossen
 #### Problem & Motivation
 Bei Business-Listings für verkaufende Unternehmen sollte die **exakte Adresse nicht öffentlich angezeigt** werden, um:
 - ✅ Konkurrierende Unternehmen nicht zu informieren
 - ✅ Kunden nicht zu verunsichern
 - ✅ Mitarbeiter vor Verunsicherung zu schützen
 Nur die **ungefähre Stadt-Region** soll angezeigt werden. Die genaue Adresse wird erst nach Kontaktaufnahme mitgeteilt.
 #### Implementierung
 **Betroffene Dateien:**
 - `bizmatch/src/app/services/geo.service.ts` - Neue Methode `getCityBoundary()`
 - `bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.ts` - Override von Map-Methoden
 **Unterschied: Business vs. Commercial Property**
 | Listing-Typ | Map-Anzeige | Adresse-Anzeige | Begründung |
 |---|---|---|---|
 | **Business Listings** | Stadt-Grenze (rotes Polygon) | Nur Stadt, County, State | Privacy: Verkäufer-Schutz |
 | **Commercial Properties** | Exakter Pin-Marker | Vollständige Straßenadresse | Immobilie muss sichtbar sein |
 **Technische Umsetzung:**
 1. **Nominatim API Integration** ([geo.service.ts:33-37](bizmatch/src/app/services/geo.service.ts#L33-L37)):
 ```typescript
 getCityBoundary(cityName: string, state: string): Observable<any> {
  const query = `${cityName}, ${state}, USA`;
  let headers = new HttpHeaders().set('X-Hide-Loading', 'true').set('Accept-Language', 'en-US');
  return this.http.get(`${this.baseUrl}?q=${encodeURIComponent(query)}&format=json&polygon_geojson=1&limit=1`, { headers });
 }
 ```
 2. **City Boundary Polygon** ([details-business-listing.component.ts:322-430](bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.ts#L322-L430)):
 - Lädt Stadt-Grenz-Polygon von OpenStreetMap Nominatim API
 - Zeigt rote Umrandung der Stadt (wie Google Maps)
 - Unterstützt `Polygon` und `MultiPolygon` Geometrien
 - **Fallback:** 8km-Radius-Kreis bei API-Fehler oder fehlenden Daten
 3. **Karten-Konfiguration:**
 ```typescript
 // Rotes Polygon (wie Google Maps)
 const cityPolygon = polygon(latlngs, {
  color: '#ef4444',       // Rot
  fillColor: '#ef4444',   // Rot
  fillOpacity: 0.1,       // Sehr transparent (90% durchsichtig)
  weight: 2               // Linienstärke
 });
 // Popup zeigt nur allgemeine Information
 cityPolygon.bindPopup(`
  <div style="padding: 8px;">
    <strong>General Area:</strong><br/>
    ${cityName}, ${county ? county + ', ' : ''}${state}<br/>
    <small style="color: #666;">City boundary shown for privacy.<br/>Exact location provided after contact.</small>
  </div>
 `);
 ```
 4. **Address Control Override:**
 - Zeigt nur: "Austin, Travis County, TX"
 - **NICHT** angezeigt: Straßenname, Hausnummer, PLZ
 5. **OpenStreetMap Link Override:**
 - Zoom-Level 11 (Stadt-Ansicht) statt Zoom-Level 15 (Straßen-Ansicht)
 - Keine Marker auf exakter Position
 **Entwicklungs-Verlauf (Entscheidungen):**
 | Ansatz | Grund für Ablehnung | Status |
 |---|---|---|
 | 2km Fuzzy-Radius | Zu klein - bei wenigen Businesses in Stadt identifizierbar | ❌ Abgelehnt |
 | County-Level | Zu groß - schlechte UX, schlechtes SEO | ❌ Abgelehnt |
 | Stadt-Center + 8km-Kreis | Funktioniert, aber nicht professionell aussehend | ⚠️ Fallback |
 | **Stadt-Grenz-Polygon (wie Google Maps)** | Professionell, präzise, gute Privacy | ✅ **Implementiert** |
 **Vorteile der Lösung:**
 - ✅ **Privacy by Design** - Exakte Location nicht sichtbar
 - ✅ **Professionelles Erscheinungsbild** - Wie Google Maps Stadt-Grenzen
 - ✅ **Genaue Stadt-Darstellung** - Nutzt offizielle OSM-Daten
 - ✅ **Robust** - Fallback auf Kreis bei API-Problemen
 - ✅ **SEO-freundlich** - Stadt-Namen bleiben in Metadaten erhalten
 - ✅ **Multi-Polygon Support** - Städte mit mehreren Bereichen (Inseln, etc.)
 **Was NICHT geändert wurde:**
 - ❌ **Commercial Property Listings** zeigen weiterhin exakte Adressen
 - ❌ **User/Professional Locations** zeigen weiterhin Stadt-Pins
 - ❌ **Datenbank** - Location-Daten bleiben unverändert gespeichert
 - ❌ **Backend** - Keine API-Änderungen nötig
 ---
 ## 4) SEO-Verbesserungen
 ### 4.1 Meta-Tags & Structured Data
 **Status:** ✅ Implementiert
 **Neue SEO-Features:**
 - ✅ Dynamische Title & Description für alle Listing-Seiten
 - ✅ Open Graph Tags für Social Media Sharing
 - ✅ JSON-LD Structured Data (Schema.org)
 - ✅ Canonical URLs
 - ✅ Noindex für 404-Seiten
 **Implementierung:**
 - `bizmatch/src/app/services/seo.service.ts`
 - Automatische Meta-Tag-Generierung basierend auf Listing-Daten
 ### 4.2 Sitemap-Generierung
 **Status:** ✅ Implementiert
 **Endpunkte:**
 - `/bizmatch/sitemap.xml` - Haupt-Sitemap (Index)
 - `/bizmatch/sitemap/static.xml` - Statische Seiten
 - `/bizmatch/sitemap/business-1.xml` - Business-Listings (paginiert)
 - `/bizmatch/sitemap/commercial-1.xml` - Commercial-Properties (paginiert)
 **Controller:** `bizmatch-server/src/sitemap/sitemap.controller.ts`
 ### 4.3 SEO-freundliche 404-Seite
 **Datei:** `bizmatch/src/app/components/not-found/not-found.component.ts`
 **Features:**
 - ✅ Breadcrumbs für bessere Navigation
 - ✅ `noindex` Meta-Tag (verhindert Indexierung)
 - ✅ Aussagekräftige Title & Description
 - ✅ Link zurück zur Homepage
 ---
 ## 5) Code-Cleanup & Wartung
 ### 5.1 Gelöschte temporäre Dateien
 **Datum:** November 2025
 **Status:** ✅ Abgeschlossen
 **Markdown-Dokumentation (7 Dateien):**
 - ❌ `DATABASE-FIX-INSTRUCTIONS.md`
 - ❌ `DEPLOYMENT-GUIDE.md`
 - ❌ `PROFESSIONALS-TAB-IMPLEMENTATION.md`
 - ❌ `RESTART-BACKEND.md`
 - ❌ `SEO-IMPROVEMENTS-SUMMARY.md`
 - ❌ `bizmatch-server/SEO-DEPLOYMENT-SUCCESS.md`
 - ❌ `bizmatch-server/TYPESCRIPT-FIX-SUMMARY.md`
 **Shell-Scripts (33 Dateien):**
 - ❌ Alle `.sh`-Dateien in `bizmatch-server/` (check-*, fix-*, test-*, run-*, setup-*, etc.)
 **SQL-Test-Dateien (5 Dateien):**
 - ❌ `create-schema.sql`
 - ❌ `insert-professionals-json.sql`
 - ❌ `insert-professionals-simple.sql`
 - ❌ `insert-test-professionals.sql`
 - ❌ `insert-test-professionals-fixed.sql`
 **Debug-JavaScript (2 Dateien):**
 - ❌ `check-db.js`
 - ❌ `verify.js`
 **Komplette Verzeichnisse:**
 - ❌ `bizmatch-server/scripts/` (~13 Dateien)
 - ❌ `bizmatch-server/src/scripts/` (~13 Dateien)
 - ❌ `.claude/` (Verzeichnis)
 **Gesamt:** ~75 temporäre Dateien und 3 Verzeichnisse entfernt
 ### 5.2 Beibehaltene Konfigurationsdateien
 **✅ Wichtige Dateien (nicht gelöscht):**
 - `README.md` (Projekt-Dokumentation)
 - `bizmatch-server/README.md` (Server-Dokumentation)
 - `.eslintrc.js` (Code-Style-Konfiguration)
 - `docker-compose.yml` (Container-Konfiguration)
 - `.gitignore` (Git-Konfiguration)
 ---
 ## 6) Bekannte Issues & Workarounds
 ### 6.1 Docker-Container-Neustart nach Code-Änderungen
 **Problem:**
 TypeScript-Kompilierungsfehler können dazu führen, dass der Backend-Container nicht startet.
 **Lösung:**
 ```bash
 # Container-Logs prüfen
 docker logs bizmatch-app --tail 50
 # Bei TypeScript-Fehlern: Container neu starten
 docker restart bizmatch-app
 # Prüfen, ob App erfolgreich gestartet ist
 docker logs bizmatch-app | grep "Nest application successfully started"
 ```
 ### 6.2 Database Connection Issues
 **Problem:**
 `password authentication failed for user "bizmatch"`
 **Lösung:**
 Siehe [README.md - Abschnitt 4.1](README.md#41-password-authentication-failed-for-user-bizmatch)
 ### 6.3 Frontend Proxy-Fehler
 **Problem:**
 `http proxy error: /bizmatch/select-options` während Backend-Neustart
 **Lösung:**
 - Warten, bis Backend vollständig gestartet ist (~30 Sekunden)
 - Frontend-Dev-Server bei Bedarf neu starten: `npm start`
 ---
 ## Migration-Guide: JSON-Schema
 ### Von relationaler DB zu JSON-Schema
 **Beispiel: User-Daten**
 **Alt (relationale Tabelle):**
 ```sql
 CREATE TABLE users (
  id UUID PRIMARY KEY,
  email VARCHAR(255),
  firstname VARCHAR(100),
  lastname VARCHAR(100),
  phone VARCHAR(50),
  ...
 );
 ```
 **Neu (JSON-Schema):**
 ```sql
 CREATE TABLE users_json (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email VARCHAR(255),
  data JSONB
 );
 ```
 **JSON-Struktur in `data`-Spalte:**
 ```json
 {
  "firstname": "John",
  "lastname": "Doe",
  "email": "john.doe@example.com",
  "phone": "+1-555-0123",
  "customerType": "professional",
  "customerSubType": "broker",
  "location": {
    "name": "Austin",
    "state": "TX",
    "latitude": 30.2672,
    "longitude": -97.7431
  },
  "showInDirectory": true,
  "created": "2025-11-25T10:30:00Z",
  "updated": "2025-11-25T10:30:00Z"
 }
 ```
 **Query-Beispiele:**
 ```sql
 -- Alle Professionals in Texas finden
 SELECT * FROM users_json
 WHERE (data->>'customerType') = 'professional'
  AND (data->'location'->>'state') = 'TX';
 -- Nach Name suchen
 SELECT * FROM users_json
 WHERE (data->>'firstname') ILIKE '%John%';
 -- Radius-Suche (50 Meilen um Austin)
 SELECT * FROM users_json
 WHERE (
  3959 * 2 * ASIN(SQRT(
    POWER(SIN((30.2672 - (data->'location'->>'latitude')::float) * PI() / 180 / 2), 2) +
    COS(30.2672 * PI() / 180) * COS((data->'location'->>'latitude')::float * PI() / 180) *
    POWER(SIN((-97.7431 - (data->'location'->>'longitude')::float) * PI() / 180 / 2), 2)
  ))
 ) <= 50;
 ```
 ---
 ## Support & Fragen
 Bei Fragen zu diesen Änderungen:
 1. README.md für Setup-Informationen konsultieren
 2. Docker-Logs prüfen: `docker logs bizmatch-app` und `docker logs bizmatchdb`
 3. Git-History für Details zu Änderungen durchsuchen
 **Letzte Aktualisierung:** November 2025
--- a/DOCKER_SYNC_GUIDE.md
+++ b/DOCKER_SYNC_GUIDE.md
@ -1,27 +0,0 @@
 # Docker Code Sync Guide
 If you have made changes to the backend code and they don't seem to take effect (even though the files on disk are updated), it's because the Docker container is running from a pre-compiled `dist/` directory.
 ### The Problem
 The `bizmatch-app` container compiles the TypeScript code *only once* when the container starts. It does not automatically watch for changes and recompile while running.
 ### The Solution
 You must restart or recreate the container to trigger a new build.
 **Option 1: Quick Restart (Recommended)**
 Run this in the `bizmatch-server` directory:
 ```bash
 docker-compose restart app
 ```
 **Option 2: Force Rebuild (If changes aren't picked up)**
 If a simple restart doesn't work, use this to force a fresh build:
 ```bash
 docker-compose up -d --build app
 ```
 ### Summary for Other Laptops
 1. **Pull** the latest changes from Git.
 2. **Execute** `docker-compose restart app`.
 3. **Verify** the logs for the new `WARN` debug messages.
 .
--- a/FINAL_SUMMARY.md
+++ b/FINAL_SUMMARY.md
@ -1,73 +0,0 @@
 # Final Project Summary & Deployment Guide
 ## Recent Changes (Last 3 Git Pushes)
 Here is a summary of the most recent activity on the repository:
 1.  **`e3e726d`** - Timo, 3 minutes ago
    *   **Message**: `feat: Initialize BizMatch application with core UI components, routing, listing pages, backend services, migration scripts, and vulnerability management.`
    *   **Impact**: Major initialization of the application structure, including core features and security baselines.
 2.  **`e32e43d`** - Timo, 10 hours ago
    *   **Message**: `docs: Add comprehensive deployment guide for BizMatch project.`
    *   **Impact**: Added documentation for deployment procedures.
 3.  **`b52e47b`** - Timo, 10 hours ago
    *   **Message**: `feat: Initialize Angular SSR application with core pages, components, and server setup.`
    *   **Impact**: Initial naming and setup of the Angular SSR environment.
 ---
 ## Deployment Instructions
 ### 1. Prerequisites
 *   **Node.js**: Version **20.x** or higher is recommended.
 *   **Package Manager**: `npm`.
 ### 2. Building for Production (SSR)
 The application is configured for **Angular SSR (Server-Side Rendering)**. You must build the application specifically for this mode.
 **Steps:**
 1.  Navigate to the project directory:
    ```bash
    cd bizmatch
    ```
 2.  Install dependencies:
    ```bash
    npm install
    ```
 3.  Build the project:
    ```bash
    npm run build:ssr
    ```
    *   This command executes `node version.js` (to update build versions) and then `ng build --configuration prod`.
    *   Output will be generated in `dist/bizmatch/browser` and `dist/bizmatch/server`.
 ### 3. Running the Application
 To start the production server:
 ```bash
 npm run serve:ssr
 ```
 *   **Entry Point**: `dist/bizmatch/server/server.mjs`
 *   **Port**: The server listens on `process.env.PORT` or defaults to **4200**.
 ### 4. Critical Deployment Checks (SSR & Polyfills)
 **⚠️ IMPORTANT:**
 The application uses a custom **DOM Polyfill** to support third-party libraries that might rely on browser-specific objects (like `window`, `document`) during server-side rendering.
 *   **Polyfill Location**: `src/ssr-dom-polyfill.ts`
 *   **Server Verification**: Open `server.ts` and ensure the polyfill is imported **BEFORE** any other imports:
    ```typescript
    // IMPORTANT: DOM polyfill must be imported FIRST
    import './src/ssr-dom-polyfill';
    ```
 *   **Why is this important?**
    If this import is removed or moved down, you may encounter `ReferenceError: window is not defined` or `document is not defined` errors when the server tries to render pages containing Leaflet maps or other browser-only libraries.
 ### 5. Environment Variables & Security
 *   Ensure all necessary environment variables (e.g., Database URLs, API Keys) are configured in your deployment environment.
 *   Since `server.ts` is an Express app, you can extend it to handle specialized headers or proxy configurations if needed.
 ### 6. Vulnerability Status
 *   Please refer to `FINAL_VULNERABILITY_STATUS.md` for the most recent security audit and known issues.
--- a/FINAL_VULNERABILITY_STATUS.md
+++ b/FINAL_VULNERABILITY_STATUS.md
@ -1,210 +0,0 @@
 # Final Vulnerability Status - BizMatch Project
 **Updated**: 2026-01-03
 **Status**: Production-Ready ✅
 ---
 ## 📊 Current Vulnerability Count
 ### bizmatch-server
 - **Total**: 41 vulnerabilities
 - **Critical**: 0 ❌
 - **High**: 33 (all mjml-related, NOT USED) ✅
 - **Moderate**: 7 (dev tools only) ✅
 - **Low**: 1 ✅
 ### bizmatch (Frontend)
 - **Total**: 10 vulnerabilities
 - **Moderate**: 10 (dev tools + legacy dependencies) ✅
 - **All are acceptable for production** ✅
 ---
 ## ✅ What Was Fixed
 ### Backend (bizmatch-server)
 1. ✅ **nodemailer** 6.9 → 7.0.12 (Fixed 3 DoS vulnerabilities)
 2. ✅ **firebase** 11.3 → 11.9 (Fixed undici vulnerabilities)
 3. ✅ **drizzle-kit** 0.23 → 0.31 (Fixed esbuild dev vulnerability)
 ### Frontend (bizmatch)
 1. ✅ **Angular 18 → 19** (Fixed 17 XSS vulnerabilities)
 2. ✅ **@angular/fire** 18.0 → 19.2 (Angular 19 compatibility)
 3. ✅ **zone.js** 0.14 → 0.15 (Angular 19 requirement)
 ---
 ## ⚠️ Remaining Vulnerabilities (ACCEPTABLE)
 ### bizmatch-server: 33 High (mjml-related)
 **Package**: `@nestjs-modules/mailer` depends on `mjml`
 **Why These Are Safe**:
 ```typescript
 // mail.module.ts uses Handlebars, NOT MJML!
 template: {
  adapter: new HandlebarsAdapter({...}),  // ← Using Handlebars
  // MJML is NOT used anywhere in the code
 }
 ```
 **Vulnerabilities**:
 - `html-minifier` (ReDoS) - via mjml
 - `mjml-*` packages (33 packages) - NOT USED
 - `glob` 10.x (Command Injection) - via mjml
 - `preview-email` - via mjml
 **Mitigation**:
 - ✅ MJML is never called in production code
 - ✅ Only Handlebars templates are used
 - ✅ These packages are dead code in node_modules
 - ✅ Production builds don't include unused dependencies
 **To verify MJML is not used**:
 ```bash
 cd bizmatch-server
 grep -r "mjml" src/  # Returns NO results in source code
 ```
 ### bizmatch-server: 7 Moderate (dev tools)
 1. **esbuild** (dev server vulnerability) - drizzle-kit dev dependency
 2. **pg-promise** (SQL injection) - pg-to-ts type generation tool only
 **Why Safe**: Development tools, not in production runtime
 ### bizmatch: 10 Moderate (legacy deps)
 1. **inflight** - deprecated but stable
 2. **rimraf** v3 - old version but safe
 3. **glob** v7 - old version in dev dependencies
 4. **@types/cropperjs** - type definitions only
 **Why Safe**: All are development dependencies or stable legacy packages
 ---
 ## 🚀 Installation Commands
 ### Fresh Install (Recommended)
 ```bash
 # Backend
 cd /home/timo/bizmatch-project/bizmatch-server
 sudo rm -rf node_modules package-lock.json
 npm install
 # Frontend
 cd /home/timo/bizmatch-project/bizmatch
 sudo rm -rf node_modules package-lock.json
 npm install --legacy-peer-deps
 ```
 ### Verify Production Security
 ```bash
 # Check ONLY production dependencies
 cd bizmatch-server
 npm audit --production
 cd ../bizmatch
 npm audit --omit=dev
 ```
 ---
 ## 📈 Production Security Score
 ### Runtime Dependencies Only
 **bizmatch-server** (production):
 - ✅ **0 Critical**
 - ✅ **0 High** (mjml not in runtime)
 - ✅ **2 Moderate** (nodemailer already latest)
 **bizmatch** (production):
 - ✅ **0 High**
 - ✅ **3 Moderate** (stable legacy deps)
 **Overall Grade**: **A** ✅
 ---
 ## 🔍 Security Audit Commands
 ### Check Production Only
 ```bash
 # Server (excludes dev deps and mjml unused code)
 npm audit --production
 # Frontend (excludes dev deps)
 npm audit --omit=dev
 ```
 ### Full Audit (includes dev tools)
 ```bash
 npm audit
 ```
 ---
 ## 🛡️ Why This Is Production-Safe
 1. **No Critical Vulnerabilities** ❌→✅
 2. **All High-Severity Fixed** (Angular XSS, etc.) ✅
 3. **Remaining "High" are Unused Code** (mjml never called) ✅
 4. **Dev Dependencies Don't Affect Production** ✅
 5. **Latest Versions of All Active Packages** ✅
 ---
 ## 📝 Next Steps
 ### Immediate (Done) ✅
 - [x] Update Angular 18 → 19
 - [x] Update nodemailer 6 → 7
 - [x] Update @angular/fire 18 → 19
 - [x] Update firebase to latest
 - [x] Update zone.js for Angular 19
 ### Optional (Future Improvements)
 - [ ] Consider replacing `@nestjs-modules/mailer` with direct `nodemailer` usage
  - This would eliminate all 33 mjml vulnerabilities from `npm audit`
  - Benefit: Cleaner audit report
  - Cost: Some refactoring needed
  - **Not urgent**: mjml code is dead and never executed
 - [ ] Set up Dependabot for automatic security updates
 - [ ] Add monthly security audit to CI/CD pipeline
 ---
 ## 🔒 Security Best Practices Applied
 1. ✅ **Principle of Least Privilege**: Only using necessary features
 2. ✅ **Defense in Depth**: Multiple layers (no mjml usage even if vulnerable)
 3. ✅ **Keep Dependencies Updated**: Latest stable versions
 4. ✅ **Audit Regularly**: Monthly reviews recommended
 5. ✅ **Production Hardening**: Dev deps excluded from production
 ---
 ## 📞 Support & Questions
 **Q: Why do we still see 41 vulnerabilities in `npm audit`?**
 A: 33 are in unused mjml code, 7 are dev tools. Only 0-2 affect production runtime.
 **Q: Should we remove @nestjs-modules/mailer?**
 A: Optional. It works fine with Handlebars. Removal would clean audit report but requires refactoring.
 **Q: Are we safe to deploy?**
 A: **YES**. All runtime vulnerabilities are fixed. Remaining ones are unused code or dev tools.
 **Q: What about future updates?**
 A: Run `npm audit` monthly and update packages quarterly.
 ---
 **Security Status**: ✅ **PRODUCTION-READY**
 **Risk Level**: 🟢 **LOW**
 **Confidence**: 💯 **HIGH**
--- a/README.md
+++ b/README.md
@ -1,195 +0,0 @@
 # bizmatch-project
 Monorepo bestehend aus **Client** (`bizmatch-project/bizmatch`) und **Server/API** (`bizmatch-project/bizmatch-server`). Diese README führt dich vom frischen Clone bis zum laufenden System mit Produktivdaten im lokalen Dev-Setup.
 ---
 ## Voraussetzungen
 - **Node.js** ≥ 20.x (empfohlen LTS) und **npm**
 - **Docker** ≥ 24.x und **Docker Compose**
 - Netzwerkzugriff auf die lokalen Ports (Standard: App 3001, Postgres 5433)
 > **Hinweis zu Container-Namen/Ports**
 > In Beispielen wird der DB-Container als `bizmatchdb` angesprochen. Falls deine Compose andere Namen/Ports nutzt (z. B. `bizmatchdb-prod` oder Ports 5433/3001), passe die Befehle entsprechend an.
 ---
 ## Repository-Struktur (Auszug)
 ```
 bizmatch-project/
 ├─ bizmatch/                 # Client (Angular/React/…)
 ├─ bizmatch-server/          # Server (NestJS + Postgres via Docker)
 │  ├─ docker-compose.yml
 │  ├─ env.prod               # Umgebungsvariablen (Beispiel)
 │  ├─ bizmatchdb-data-prod/  # (Volume-Pfad für Postgres-Daten)
 │  └─ initdb/                # (optional: SQL-Skripte für Erstinitialisierung)
 └─ README.md
 ```
 ---
 ## 1) Client starten (Ordner `bizmatch`)
 ```bash
 cd ~/git/bizmatch-project/bizmatch
 npm install
 npm start
 ```
 - Der Client startet im Dev-Modus (Standardport: meist `http://localhost:4200` oder projektspezifisch; siehe `package.json`).
 - API-URL ggf. in den Client-Env-Dateien anpassen (z. B. `environment.ts`).
 ---
 ## 2) Server & Datenbank starten (Ordner `bizmatch-server`)
 ### 2.1 .env-Datei anlegen
 Lege im Ordner `bizmatch-server` eine `.env` (oder `env.prod`) mit folgenden **Beispiel-/Dummy-Werten** an:
 ```
 POSTGRES_DB=bizmatch
 POSTGRES_USER=bizmatch
 POSTGRES_PASSWORD=qG5LZhL7Y3
 DATABASE_URL=postgresql://bizmatch:qG5LZhL7Y3@postgres:5432/bizmatch
 OPENAI_API_KEY=sk-proj-3PVgp1dMTxnigr4nxgg
 ```
 > **Wichtig:** Wenn du `DATABASE_URL` verwendest und dein Passwort Sonderzeichen wie `@ : / % # ?` enthält, **URL-encoden** (z. B. `@` → `%40`). Alternativ nur die Einzel-Variablen `POSTGRES_*` in der App verwenden.
 ### 2.2 Docker-Services starten
 ```bash
 cd ~/git/bizmatch-project/bizmatch-server
 # Erststart/Neustart der Services
 docker compose up -d
 ```
 - Der Server-Container baut die App (NestJS) und startet auf Port **3001** (Host), intern **3000** (Container), sofern so in `docker-compose.yml` konfiguriert.
 - Postgres läuft im Container auf **5432**; per Port-Mapping meist auf **5433** am Host erreichbar (siehe `docker-compose.yml`).
 > Warte nach dem Start, bis in den DB-Logs „database system is ready to accept connections“ erscheint:
 >
 > ```bash
 > docker logs -f bizmatchdb
 > ```
 ---
 ## 3) Produktiv-Dump lokal importieren
 Falls du einen Dump aus der Produktion hast (Datei `prod.dump`), kannst du ihn in deine lokale DB importieren.
 ### 3.1 Dump in den DB-Container kopieren
 ```bash
 # im Ordner bizmatch-server
 docker cp prod.dump bizmatchdb:/tmp/prod.dump
 ```
 > **Container-Name:** Falls dein DB-Container anders heißt (z. B. `bizmatchdb-prod`), ersetze den Namen im Befehl entsprechend.
 ### 3.2 Restore ausführen
 ```bash
 docker exec -it bizmatchdb \
  sh -c 'pg_restore -U "$POSTGRES_USER" --clean --no-owner -d "$POSTGRES_DB" /tmp/prod.dump'
 ```
 - `--clean` löscht vorhandene Objekte vor dem Einspielen
 - `--no-owner` ignoriert Besitzer/Role-Bindungen (praktisch für Dev)
 ### 3.3 Smoke-Test: DB erreichbar?
 ```bash
 # Ping/Verbindung testen (pSQL muss im Container verfügbar sein)
 docker exec -it bizmatchdb \
  sh -lc 'PGPASSWORD="$POSTGRES_PASSWORD" psql -h /var/run/postgresql -U "$POSTGRES_USER" -d "$POSTGRES_DB" -c "select current_user, now();"'
 ```
 ---
 ## 4) Häufige Probleme & Lösungen
 ### 4.1 `password authentication failed for user "bizmatch"`
 - Prüfe, ob die Passwortänderung **in der DB** erfolgt ist (Env-Änderung allein genügt nicht, wenn das Volume existiert).
 - Passwort in Postgres setzen:
  ```bash
  docker exec -u postgres -it bizmatchdb \
    psql -d postgres -c "ALTER ROLE bizmatch WITH LOGIN PASSWORD 'NEUES_PWD';"
  ```
 - App-Umgebung (`.env`) anpassen und App neu starten:
  ```bash
  docker compose restart app
  ```
 - Bei Nutzung von `DATABASE_URL`: Sonderzeichen **URL-encoden**.
 ### 4.2 Container-Hostnamen stimmen nicht
 - Innerhalb des Compose-Netzwerks ist der **Service-Name** der Host (z. B. `postgres` oder `postgres-prod`). Achte darauf, dass `DB_HOST`/`DATABASE_URL` dazu passen.
 ### 4.3 Dump/Restore vs. Datenverzeichnis-Kopie
 - **Empfehlung:** `pg_dump/pg_restore` für Prod→Dev.
 - Ganze Datenverzeichnisse (Volume) nur **bei gestoppter** DB und **identischer Postgres-Major-Version** kopieren.
 ### 4.4 Ports
 - API nicht erreichbar? Prüfe Port-Mapping in `docker-compose.yml` (z. B. `3001:3000`) und Firewall.
 - Postgres-Hostport (z. B. `5433`) gegen Client-Konfiguration prüfen.
 ---
 ## 5) Nützliche Befehle (Cheatsheet)
 ```bash
 # Compose starten/stoppen
 cd ~/git/bizmatch-project/bizmatch-server
 docker compose up -d
 docker compose stop
 # Logs
 docker logs -f bizmatchdb
 docker logs -f bizmatch-app
 # Shell in Container
 docker exec -it bizmatchdb sh
 # Datenbankbenutzer-Passwort ändern
 docker exec -u postgres -it bizmatchdb \
  psql -d postgres -c "ALTER ROLE bizmatch WITH LOGIN PASSWORD 'NEUES_PWD';"
 # Dump aus laufender DB (vom Host, falls Port veröffentlicht ist)
 PGPASSWORD="$POSTGRES_PASSWORD" \
 pg_dump -h 127.0.0.1 -p 5433 -U "$POSTGRES_USER" -d "$POSTGRES_DB" \
  -F c -Z 9 -f ./prod.dump
 ```
 ---
 ## 6) Sicherheit & Datenschutz
 - Lege **keine echten Secrets** (API-Keys, Prod-Passwörter) im Repo ab. Nutze `.env`-Dateien außerhalb der Versionskontrolle oder einen Secrets-Manager.
 - Bei Produktivdaten in Dev: **Anonymisierung** (Masking) für personenbezogene Daten erwägen.
 ---
 ## 7) Erweiterungen (optional)
 - **Init-Skripte**: Lege SQL-Dateien in `bizmatch-server/initdb/` ab, um beim Erststart Benutzer/Schema anzulegen.
 - **Multi-Stage Dockerfile** für den App-Container (schnellere, reproduzierbare Builds ohne devDependencies).
 - **Makefile/Skripte** für häufige Tasks (z. B. `make db-backup`, `make db-restore`).
 ---
 ## 8) Support
 Bei Fragen zu Setup, Dumps oder Container-Namen/Ports: Logs und Compose-Datei prüfen, anschließend die oben beschriebenen Tests (DNS/Ports, psql) durchführen. Anschließend Issue/Notiz anlegen mit Logs & `docker-compose.yml`-Ausschnitt.
--- a/VULNERABILITY_FIXES.md
+++ b/VULNERABILITY_FIXES.md
@ -1,281 +0,0 @@
 # Security Vulnerability Fixes
 ## Overview
 This document details all security vulnerability fixes applied to the BizMatch project.
 **Date**: 2026-01-03
 **Total Vulnerabilities Before**: 81 (45 server + 36 frontend)
 **Critical Updates Required**: Yes
 ---
 ## 🔴 Critical Fixes (Server)
 ### 1. Underscore.js Arbitrary Code Execution
 **Vulnerability**: CVE (Arbitrary Code Execution)
 **Severity**: Critical
 **Status**: ✅ **FIXED** (via nodemailer-smtp-transport dependency update)
 ### 2. HTML Minifier ReDoS
 **Vulnerability**: GHSA-pfq8-rq6v-vf5m (ReDoS in kangax html-minifier)
 **Severity**: High
 **Status**: ✅ **FIXED** (via @nestjs-modules/mailer 2.0.2 → 2.1.0)
 **Impact**: Fixes 33 high-severity vulnerabilities in mjml-* packages
 ---
 ## 🟠 High Severity Fixes (Frontend)
 ### 1. Angular XSS Vulnerability
 **Vulnerability**: GHSA-58c5-g7wp-6w37 (XSRF Token Leakage via Protocol-Relative URLs)
 **Severity**: High
 **Package**: @angular/common, @angular/compiler, and all Angular packages
 **Status**: ✅ **FIXED** (Angular 18.1.3 → 19.2.16)
 **Files Updated**:
 - @angular/animations: 18.1.3 → 19.2.16
 - @angular/common: 18.1.3 → 19.2.16
 - @angular/compiler: 18.1.3 → 19.2.16
 - @angular/core: 18.1.3 → 19.2.16
 - @angular/forms: 18.1.3 → 19.2.16
 - @angular/platform-browser: 18.1.3 → 19.2.16
 - @angular/platform-browser-dynamic: 18.1.3 → 19.2.16
 - @angular/platform-server: 18.1.3 → 19.2.16
 - @angular/router: 18.1.3 → 19.2.16
 - @angular/ssr: 18.2.21 → 19.2.16
 - @angular/cdk: 18.0.6 → 19.1.5
 - @angular/cli: 18.1.3 → 19.2.16
 - @angular-devkit/build-angular: 18.1.3 → 19.2.16
 - @angular/compiler-cli: 18.1.3 → 19.2.16
 ### 2. Angular Stored XSS via SVG/MathML
 **Vulnerability**: GHSA-v4hv-rgfq-gp49
 **Severity**: High
 **Status**: ✅ **FIXED** (via Angular 19 update)
 ---
 ## 🟡 Moderate Severity Fixes
 ### 1. Nodemailer Vulnerabilities (Server)
 **Vulnerabilities**:
 - GHSA-mm7p-fcc7-pg87 (Email to unintended domain)
 - GHSA-rcmh-qjqh-p98v (DoS via recursive calls in addressparser)
 - GHSA-46j5-6fg5-4gv3 (DoS via uncontrolled recursion)
 **Severity**: Moderate
 **Package**: nodemailer
 **Status**: ✅ **FIXED** (nodemailer 6.9.10 → 7.0.12)
 ### 2. Undici Vulnerabilities (Frontend)
 **Vulnerabilities**:
 - GHSA-c76h-2ccp-4975 (Use of Insufficiently Random Values)
 - GHSA-cxrh-j4jr-qwg3 (DoS via bad certificate data)
 **Severity**: Moderate
 **Package**: undici (via Firebase dependencies)
 **Status**: ✅ **FIXED** (firebase 11.3.1 → 11.9.0)
 ### 3. Esbuild Development Server Vulnerability
 **Vulnerability**: GHSA-67mh-4wv8-2f99
 **Severity**: Moderate
 **Status**: ✅ **FIXED** (drizzle-kit 0.23.2 → 0.31.8)
 **Note**: Development-only vulnerability, does not affect production
 ---
 ## ⚠️ Accepted Risks (Development-Only)
 ### 1. pg-promise SQL Injection (Server)
 **Vulnerability**: GHSA-ff9h-848c-4xfj
 **Severity**: Moderate
 **Package**: pg-promise (used by pg-to-ts dev tool)
 **Status**: ⚠️ **ACCEPTED RISK**
 **Reason**:
 - No fix available
 - Only used in development tool (pg-to-ts)
 - Not used in production runtime
 - pg-to-ts is only for type generation
 ### 2. tmp Symbolic Link Vulnerability (Frontend)
 **Vulnerability**: GHSA-52f5-9888-hmc6
 **Severity**: Low
 **Package**: tmp (used by Angular CLI)
 **Status**: ⚠️ **ACCEPTED RISK**
 **Reason**:
 - Development tool only
 - Angular CLI dependency
 - Not included in production build
 ### 3. esbuild (Various)
 **Vulnerability**: GHSA-67mh-4wv8-2f99
 **Severity**: Moderate
 **Status**: ⚠️ **PARTIALLY FIXED**
 **Reason**:
 - Development server only
 - Fixed in drizzle-kit
 - Remaining instances in vite are dev-only
 ---
 ## 📦 Package Updates Summary
 ### bizmatch-server/package.json
 ```json
 {
  "dependencies": {
    "@nestjs-modules/mailer": "^2.0.2" → "^2.1.0",
    "firebase": "^11.3.1" → "^11.9.0",
    "nodemailer": "^6.9.10" → "^7.0.12"
  },
  "devDependencies": {
    "drizzle-kit": "^0.23.2" → "^0.31.8"
  }
 }
 ```
 ### bizmatch/package.json
 ```json
 {
  "dependencies": {
    "@angular/animations": "^18.1.3" → "^19.2.16",
    "@angular/cdk": "^18.0.6" → "^19.1.5",
    "@angular/common": "^18.1.3" → "^19.2.16",
    "@angular/compiler": "^18.1.3" → "^19.2.16",
    "@angular/core": "^18.1.3" → "^19.2.16",
    "@angular/forms": "^18.1.3" → "^19.2.16",
    "@angular/platform-browser": "^18.1.3" → "^19.2.16",
    "@angular/platform-browser-dynamic": "^18.1.3" → "^19.2.16",
    "@angular/platform-server": "^18.1.3" → "^19.2.16",
    "@angular/router": "^18.1.3" → "^19.2.16",
    "@angular/ssr": "^18.2.21" → "^19.2.16"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.1.3" → "^19.2.16",
    "@angular/cli": "^18.1.3" → "^19.2.16",
    "@angular/compiler-cli": "^18.1.3" → "^19.2.16"
  }
 }
 ```
 ---
 ## 🚀 Installation Instructions
 ### Automatic Installation (Recommended)
 ```bash
 cd /home/timo/bizmatch-project
 bash fix-vulnerabilities.sh
 ```
 ### Manual Installation
 **If you encounter permission errors:**
 ```bash
 # Fix permissions first
 cd /home/timo/bizmatch-project/bizmatch-server
 sudo rm -rf node_modules package-lock.json
 cd /home/timo/bizmatch-project/bizmatch
 sudo rm -rf node_modules package-lock.json
 # Then install
 cd /home/timo/bizmatch-project/bizmatch-server
 npm install
 cd /home/timo/bizmatch-project/bizmatch
 npm install
 ```
 ### Verify Installation
 ```bash
 # Check server
 cd /home/timo/bizmatch-project/bizmatch-server
 npm audit --production
 # Check frontend
 cd /home/timo/bizmatch-project/bizmatch
 npm audit --production
 ```
 ---
 ## ⚠️ Breaking Changes Warning
 ### Angular 18 → 19 Migration
 **Potential Issues**:
 1. **Route configuration**: Some routing APIs may have changed
 2. **Template syntax**: Check for deprecated template features
 3. **Third-party libraries**: Some Angular libraries may not yet support v19
   - @angular/fire: Still on v18.0.1 (compatible but check for updates)
   - @bluehalo/ngx-leaflet: May need testing
   - @ng-select/ng-select: May need testing
 **Testing Required**:
 ```bash
 cd /home/timo/bizmatch-project/bizmatch
 npm run build
 npm run serve:ssr
 # Test all major features
 ```
 ### Nodemailer 6 → 7 Migration
 **Potential Issues**:
 1. **SMTP configuration**: Minor API changes
 2. **Email templates**: Should be compatible
 **Testing Required**:
 ```bash
 # Test email functionality
 # - User registration emails
 # - Password reset emails
 # - Contact form emails
 ```
 ---
 ## 📊 Expected Results
 ### Before Updates
 - **bizmatch-server**: 45 vulnerabilities (4 critical, 33 high, 7 moderate, 1 low)
 - **bizmatch**: 36 vulnerabilities (17 high, 13 moderate, 6 low)
 ### After Updates (Production Only)
 - **bizmatch-server**: ~5-10 vulnerabilities (mostly dev-only)
 - **bizmatch**: ~3-5 vulnerabilities (mostly dev-only)
 ### Remaining Vulnerabilities
 All remaining vulnerabilities should be:
 - Development dependencies only (not in production builds)
 - Low/moderate severity
 - Acceptable risk or no fix available
 ---
 ## 🔒 Security Best Practices
 After applying these fixes:
 1. **Regular Updates**: Run `npm audit` monthly
 2. **Production Builds**: Always use production builds for deployment
 3. **Dependency Review**: Review new dependencies before adding
 4. **Testing**: Thoroughly test after major updates
 5. **Monitoring**: Set up dependabot or similar tools
 ---
 ## 📞 Support
 If you encounter issues during installation:
 1. Check the permission errors first
 2. Ensure Node.js and npm are up to date
 3. Review breaking changes section
 4. Test each component individually
 ---
 **Last Updated**: 2026-01-03
 **Next Review**: 2026-02-03 (monthly)
--- a/bizmatch-server/.env.development
+++ b/bizmatch-server/.env.development
@ -0,0 +1,4 @@
 REALM=bizmatch-dev
 usersURL=/admin/realms/bizmatch-dev/users
 WEB_HOST=https://dev.bizmatch.net
 STRIPE_WEBHOOK_SECRET=whsec_w2yvJY8qFMfO5wJgyNHCn6oYT7o2J5pS
--- a/bizmatch-server/.env.production
+++ b/bizmatch-server/.env.production
@ -0,0 +1,2 @@
 REALM=bizmatch
 WEB_HOST=https://www.bizmatch.net
--- a/bizmatch-server/Dockerfile
+++ b/bizmatch-server/Dockerfile
@ -1,25 +0,0 @@
 # --- STAGE 1: Build ---
 FROM node:22-alpine AS builder
 WORKDIR /app
 # HIER KEIN NODE_ENV=production setzen! Wir brauchen devDependencies zum Bauen.
 COPY package*.json ./
 RUN npm ci
 COPY . .
 RUN npm run build
 # --- STAGE 2: Runtime ---
 FROM node:22-alpine
 WORKDIR /app
 # HIER ist es richtig!
 ENV NODE_ENV=production
 COPY --from=builder /app/dist /app/dist
 COPY --from=builder /app/package*.json /app/
 # Installiert nur "dependencies" (Nest core, TypeORM, Helmet, Sharp etc.)
 # "devDependencies" (TypeScript, Jest, ESLint) werden weggelassen.
 RUN npm ci --omit=dev
 # WICHTIG: Pfad prüfen (siehe Punkt 2 unten)
 CMD ["node", "dist/src/main.js"]
--- a/bizmatch-server/drizzle.config.ts
+++ b/bizmatch-server/drizzle.config.ts
@ -3,6 +3,7 @@ export default defineConfig({
  schema: './src/drizzle/schema.ts',
  out: './src/drizzle/migrations',
  dialect: 'postgresql',
  // driver: 'pg',
  dbCredentials: {
    url: process.env.DATABASE_URL,
  },
--- a/bizmatch-server/fix-sequence.sql
+++ b/bizmatch-server/fix-sequence.sql
@ -1,12 +0,0 @@
 -- Create missing sequence for commercials_json serialId
 -- This sequence is required for generating unique serialId values for commercial property listings
 CREATE SEQUENCE IF NOT EXISTS commercials_json_serial_id_seq START WITH 100000;
 -- Verify the sequence was created
 SELECT sequence_name, start_value, last_value
 FROM information_schema.sequences
 WHERE sequence_name = 'commercials_json_serial_id_seq';
 -- Also verify all sequences to check if business listings sequence exists
 \ds
--- a/bizmatch-server/package.json
+++ b/bizmatch-server/package.json
@ -23,16 +23,10 @@
    "drop": "drizzle-kit drop",
    "migrate": "tsx src/drizzle/migrate.ts",
    "import": "tsx src/drizzle/import.ts",
-    "generateTypes": "tsx src/drizzle/generateTypes.ts src/drizzle/schema.ts src/models/db.model.ts",
+    "generateTypes": "tsx src/drizzle/generateTypes.ts src/drizzle/schema.ts src/models/db.model.ts"
    "create-tables": "node src/scripts/create-tables.js",
    "seed": "node src/scripts/seed-database.js",
    "create-user": "node src/scripts/create-test-user.js",
    "seed:all": "npm run create-user && npm run seed",
    "setup": "npm run create-tables && npm run seed"
  },
  "dependencies": {
    "@nestjs-modules/mailer": "^2.0.2",
    "@nestjs/cli": "^11.0.11",
    "@nestjs/common": "^11.0.11",
    "@nestjs/config": "^4.0.0",
    "@nestjs/core": "^11.0.11",
@ -42,21 +36,21 @@
    "cls-hooked": "^4.2.2",
    "cors": "^2.8.5",
    "drizzle-orm": "^0.32.0",
-    "firebase": "^11.9.0",
+    "firebase": "^11.3.1",
    "firebase-admin": "^13.1.0",
    "fs-extra": "^11.2.0",
    "groq-sdk": "^0.5.0",
    "handlebars": "^4.7.8",
    "helmet": "^8.1.0",
    "nest-winston": "^1.9.4",
    "nestjs-cls": "^5.4.0",
-    "nodemailer": "^7.0.12",
+    "nodemailer": "^6.9.10",
    "nodemailer-smtp-transport": "^2.7.4",
    "openai": "^4.52.6",
    "pg": "^8.11.5",
    "pgvector": "^0.2.0",
    "reflect-metadata": "^0.2.0",
    "rxjs": "^7.8.1",
-    "sharp": "^0.33.5",
+    "sharp": "^0.33.2",
    "stripe": "^16.8.0",
    "tsx": "^4.16.2",
    "urlcat": "^3.1.0",
@ -71,11 +65,11 @@
    "@nestjs/testing": "^11.0.11",
    "@types/express": "^4.17.17",
    "@types/multer": "^1.4.11",
-    "@types/node": "^20.19.25",
+    "@types/node": "^20.11.19",
    "@types/nodemailer": "^6.4.14",
    "@types/pg": "^8.11.5",
    "commander": "^12.0.0",
-    "drizzle-kit": "^0.31.8",
+    "drizzle-kit": "^0.23.0",
    "esbuild-register": "^3.5.0",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^9.0.0",
@ -91,7 +85,7 @@
    "ts-loader": "^9.4.3",
    "ts-node": "^10.9.2",
    "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.1.3"
  },
  "jest": {
    "moduleFileExtensions": [
--- a/bizmatch-server/prod.dump
+++ b/bizmatch-server/prod.dump
--- a/bizmatch-server/scripts/migrate-slugs.sql
+++ b/bizmatch-server/scripts/migrate-slugs.sql
@ -1,117 +0,0 @@
 -- =============================================================
 -- SEO SLUG MIGRATION SCRIPT
 -- Run this directly in your PostgreSQL database
 -- =============================================================
 -- First, let's see how many listings need slugs
 SELECT 'Businesses without slugs: ' || COUNT(*) FROM businesses_json 
 WHERE data->>'slug' IS NULL OR data->>'slug' = '';
 SELECT 'Commercial properties without slugs: ' || COUNT(*) FROM commercials_json 
 WHERE data->>'slug' IS NULL OR data->>'slug' = '';
 -- =============================================================
 -- UPDATE BUSINESS LISTINGS WITH SEO SLUGS
 -- Format: title-city-state-shortid (e.g., restaurant-austin-tx-a3f7b2c1)
 -- =============================================================
 UPDATE businesses_json
 SET data = jsonb_set(
    data::jsonb,
    '{slug}',
    to_jsonb(
        LOWER(
            REGEXP_REPLACE(
                REGEXP_REPLACE(
                    CONCAT(
                        -- Title (first 50 chars, cleaned)
                        SUBSTRING(
                            REGEXP_REPLACE(
                                LOWER(COALESCE(data->>'title', '')), 
                                '[^a-z0-9\s-]', '', 'g'
                            ), 1, 50
                        ),
                        '-',
                        -- City or County
                        REGEXP_REPLACE(
                            LOWER(COALESCE(data->'location'->>'name', data->'location'->>'county', '')),
                            '[^a-z0-9\s-]', '', 'g'
                        ),
                        '-',
                        -- State
                        LOWER(COALESCE(data->'location'->>'state', '')),
                        '-',
                        -- First 8 chars of UUID
                        SUBSTRING(id::text, 1, 8)
                    ),
                    '\s+', '-', 'g'  -- Replace spaces with hyphens
                ),
                '-+', '-', 'g'  -- Replace multiple hyphens with single
            )
        )
    )
 )
 WHERE data->>'slug' IS NULL OR data->>'slug' = '';
 -- =============================================================
 -- UPDATE COMMERCIAL PROPERTIES WITH SEO SLUGS
 -- =============================================================
 UPDATE commercials_json
 SET data = jsonb_set(
    data::jsonb,
    '{slug}',
    to_jsonb(
        LOWER(
            REGEXP_REPLACE(
                REGEXP_REPLACE(
                    CONCAT(
                        -- Title (first 50 chars, cleaned)
                        SUBSTRING(
                            REGEXP_REPLACE(
                                LOWER(COALESCE(data->>'title', '')), 
                                '[^a-z0-9\s-]', '', 'g'
                            ), 1, 50
                        ),
                        '-',
                        -- City or County
                        REGEXP_REPLACE(
                            LOWER(COALESCE(data->'location'->>'name', data->'location'->>'county', '')),
                            '[^a-z0-9\s-]', '', 'g'
                        ),
                        '-',
                        -- State
                        LOWER(COALESCE(data->'location'->>'state', '')),
                        '-',
                        -- First 8 chars of UUID
                        SUBSTRING(id::text, 1, 8)
                    ),
                    '\s+', '-', 'g'  -- Replace spaces with hyphens
                ),
                '-+', '-', 'g'  -- Replace multiple hyphens with single
            )
        )
    )
 )
 WHERE data->>'slug' IS NULL OR data->>'slug' = '';
 -- =============================================================
 -- VERIFY THE RESULTS
 -- =============================================================
 SELECT 'Migration complete! Checking results...' AS status;
 -- Show sample of updated slugs
 SELECT 
    id,
    data->>'title' AS title,
    data->>'slug' AS slug
 FROM businesses_json 
 LIMIT 5;
 SELECT 
    id,
    data->>'title' AS title,
    data->>'slug' AS slug
 FROM commercials_json 
 LIMIT 5;
--- a/bizmatch-server/scripts/migrate-slugs.ts
+++ b/bizmatch-server/scripts/migrate-slugs.ts
@ -1,162 +0,0 @@
 /**
 * Migration Script: Generate Slugs for Existing Listings
 * 
 * This script generates SEO-friendly slugs for all existing businesses
 * and commercial properties that don't have slugs yet.
 * 
 * Run with: npx ts-node scripts/migrate-slugs.ts
 */
 import { Pool } from 'pg';
 import { drizzle, NodePgDatabase } from 'drizzle-orm/node-postgres';
 import { sql, eq, isNull } from 'drizzle-orm';
 import * as schema from '../src/drizzle/schema';
 // Slug generation function (copied from utils for standalone execution)
 function generateSlug(title: string, location: any, id: string): string {
    if (!title || !id) return id; // Fallback to ID if no title
    const titleSlug = title
        .toLowerCase()
        .trim()
        .replace(/[^\w\s-]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-')
        .substring(0, 50);
    let locationSlug = '';
    if (location) {
        const locationName = location.name || location.county || '';
        const state = location.state || '';
        if (locationName) {
            locationSlug = locationName
                .toLowerCase()
                .trim()
                .replace(/[^\w\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-');
        }
        if (state) {
            locationSlug = locationSlug
                ? `${locationSlug}-${state.toLowerCase()}`
                : state.toLowerCase();
        }
    }
    const shortId = id.substring(0, 8);
    const parts = [titleSlug, locationSlug, shortId].filter(Boolean);
    return parts.join('-').replace(/-+/g, '-').replace(/^-|-$/g, '').toLowerCase();
 }
 async function migrateBusinessSlugs(db: NodePgDatabase<typeof schema>) {
    console.log('🔄 Migrating Business Listings...');
    // Get all businesses without slugs
    const businesses = await db
        .select({
            id: schema.businesses_json.id,
            email: schema.businesses_json.email,
            data: schema.businesses_json.data,
        })
        .from(schema.businesses_json);
    let updated = 0;
    let skipped = 0;
    for (const business of businesses) {
        const data = business.data as any;
        // Skip if slug already exists
        if (data.slug) {
            skipped++;
            continue;
        }
        const slug = generateSlug(data.title || '', data.location || {}, business.id);
        // Update with new slug
        const updatedData = { ...data, slug };
        await db
            .update(schema.businesses_json)
            .set({ data: updatedData })
            .where(eq(schema.businesses_json.id, business.id));
        console.log(`  ✓ ${data.title?.substring(0, 40)}... → ${slug}`);
        updated++;
    }
    console.log(`✅ Business Listings: ${updated} updated, ${skipped} skipped (already had slugs)`);
    return updated;
 }
 async function migrateCommercialSlugs(db: NodePgDatabase<typeof schema>) {
    console.log('\n🔄 Migrating Commercial Properties...');
    // Get all commercial properties without slugs
    const properties = await db
        .select({
            id: schema.commercials_json.id,
            email: schema.commercials_json.email,
            data: schema.commercials_json.data,
        })
        .from(schema.commercials_json);
    let updated = 0;
    let skipped = 0;
    for (const property of properties) {
        const data = property.data as any;
        // Skip if slug already exists
        if (data.slug) {
            skipped++;
            continue;
        }
        const slug = generateSlug(data.title || '', data.location || {}, property.id);
        // Update with new slug
        const updatedData = { ...data, slug };
        await db
            .update(schema.commercials_json)
            .set({ data: updatedData })
            .where(eq(schema.commercials_json.id, property.id));
        console.log(`  ✓ ${data.title?.substring(0, 40)}... → ${slug}`);
        updated++;
    }
    console.log(`✅ Commercial Properties: ${updated} updated, ${skipped} skipped (already had slugs)`);
    return updated;
 }
 async function main() {
    console.log('═══════════════════════════════════════════════════════');
    console.log('         SEO SLUG MIGRATION SCRIPT');
    console.log('═══════════════════════════════════════════════════════\n');
    // Connect to database
    const connectionString = process.env.DATABASE_URL || 'postgresql://postgres:postgres@localhost:5432/bizmatch';
    console.log(`📡 Connecting to database...`);
    const pool = new Pool({ connectionString });
    const db = drizzle(pool, { schema });
    try {
        const businessCount = await migrateBusinessSlugs(db);
        const commercialCount = await migrateCommercialSlugs(db);
        console.log('\n═══════════════════════════════════════════════════════');
        console.log(`🎉 Migration complete! Total: ${businessCount + commercialCount} listings updated`);
        console.log('═══════════════════════════════════════════════════════\n');
    } catch (error) {
        console.error('❌ Migration failed:', error);
        process.exit(1);
    } finally {
        await pool.end();
    }
 }
 main();
--- a/bizmatch-server/scripts/reproduce-favorites.ts
+++ b/bizmatch-server/scripts/reproduce-favorites.ts
@ -1,119 +0,0 @@
 import { Pool } from 'pg';
 import { drizzle, NodePgDatabase } from 'drizzle-orm/node-postgres';
 import { sql, eq, and } from 'drizzle-orm';
 import * as schema from '../src/drizzle/schema';
 import { users_json } from '../src/drizzle/schema';
 // Mock JwtUser
 interface JwtUser {
    email: string;
 }
 // Logic from UserService.addFavorite
 async function addFavorite(db: NodePgDatabase<typeof schema>, id: string, user: JwtUser) {
    console.log(`[Action] Adding favorite. Target ID: ${id}, Favoriter Email: ${user.email}`);
    await db
        .update(schema.users_json)
        .set({
            data: sql`jsonb_set(${schema.users_json.data}, '{favoritesForUser}',
          coalesce((${schema.users_json.data}->'favoritesForUser')::jsonb, '[]'::jsonb) || to_jsonb(${user.email}::text))`,
        } as any)
        .where(eq(schema.users_json.id, id));
 }
 // Logic from UserService.getFavoriteUsers
 async function getFavoriteUsers(db: NodePgDatabase<typeof schema>, user: JwtUser) {
    console.log(`[Action] Fetching favorites for ${user.email}`);
    // Corrected query using `?` operator (matches array element check)
    const data = await db
        .select()
        .from(schema.users_json)
        .where(sql`${schema.users_json.data}->'favoritesForUser' ? ${user.email}`);
    return data;
 }
 // Logic from UserService.deleteFavorite
 async function deleteFavorite(db: NodePgDatabase<typeof schema>, id: string, user: JwtUser) {
    console.log(`[Action] Removing favorite. Target ID: ${id}, Favoriter Email: ${user.email}`);
    await db
        .update(schema.users_json)
        .set({
            data: sql`jsonb_set(${schema.users_json.data}, '{favoritesForUser}',
          (SELECT coalesce(jsonb_agg(elem), '[]'::jsonb)
           FROM jsonb_array_elements(coalesce(${schema.users_json.data}->'favoritesForUser', '[]'::jsonb)) AS elem
           WHERE elem::text != to_jsonb(${user.email}::text)::text))`,
        } as any)
        .where(eq(schema.users_json.id, id));
 }
 async function main() {
    console.log('═══════════════════════════════════════════════════════');
    console.log('      FAVORITES REPRODUCTION SCRIPT');
    console.log('═══════════════════════════════════════════════════════\n');
    const connectionString = process.env.DATABASE_URL || 'postgresql://postgres:postgres@localhost:5432/bizmatch';
    const pool = new Pool({ connectionString });
    const db = drizzle(pool, { schema });
    try {
        // 1. Find a "professional" user to be the TARGET listing
        // filtering by customerType = 'professional' inside the jsonb data
        const targets = await db.select().from(users_json).limit(1);
        if (targets.length === 0) {
            console.error("No users found in DB to test with.");
            return;
        }
        const targetUser = targets[0];
        console.log(`Found target user: ID=${targetUser.id}, Email=${targetUser.email}`);
        // 2. Define a "favoriter" user (doesn't need to exist in DB for the logic to work, but better if it's realistic)
        // We'll just use a dummy email or one from DB if available.
        const favoriterEmail = 'test-repro-favoriter@example.com';
        const favoriter: JwtUser = { email: favoriterEmail };
        // 3. Clear any existing favorite for this pair first
        await deleteFavorite(db, targetUser.id, favoriter);
        // 4. Add Favorite
        await addFavorite(db, targetUser.id, favoriter);
        // 5. Verify it was added by checking the raw data
        const updatedTarget = await db.select().from(users_json).where(eq(users_json.id, targetUser.id));
        const favoritesData = (updatedTarget[0].data as any).favoritesForUser;
        console.log(`\n[Check] Raw favoritesForUser data on target:`, favoritesData);
        if (!favoritesData || !favoritesData.includes(favoriterEmail)) {
            console.error("❌ Add Favorite FAILED. Email not found in favoritesForUser array.");
        } else {
            console.log("✅ Add Favorite SUCCESS. Email found in JSON.");
        }
        // 6. Test retrieval using the getFavoriteUsers query
        const retrievedFavorites = await getFavoriteUsers(db, favoriter);
        console.log(`\n[Check] retrievedFavorites count: ${retrievedFavorites.length}`);
        const found = retrievedFavorites.find(u => u.id === targetUser.id);
        if (found) {
            console.log("✅ Get Favorites SUCCESS. Target user returned in query.");
        } else {
            console.log("❌ Get Favorites FAILED. Target user NOT returned by query.");
            console.log("Query used: favoritesForUser @> [email]");
        }
        // 7. Cleanup
        await deleteFavorite(db, targetUser.id, favoriter);
        console.log("\n[Cleanup] Removed test favorite.");
    } catch (error) {
        console.error('❌ Script failed:', error);
    } finally {
        await pool.end();
    }
 }
 main();
--- a/bizmatch-server/src/app.module.ts
+++ b/bizmatch-server/src/app.module.ts
@ -25,7 +25,6 @@ import { LoggingInterceptor } from './interceptors/logging.interceptor';
 import { UserInterceptor } from './interceptors/user.interceptor';
 import { RequestDurationMiddleware } from './request-duration/request-duration.middleware';
 import { SelectOptionsModule } from './select-options/select-options.module';
 import { SitemapModule } from './sitemap/sitemap.module';
 import { UserModule } from './user/user.module';
 //loadEnvFiles();
@ -71,7 +70,6 @@ console.log('Loaded environment variables:');
    // PaymentModule,
    EventModule,
    FirebaseAdminModule,
    SitemapModule,
  ],
  controllers: [AppController, LogController],
  providers: [
--- a/bizmatch-server/src/auth/auth.controller.ts
+++ b/bizmatch-server/src/auth/auth.controller.ts
@ -20,31 +20,21 @@ export class AuthController {
    }
    try {
-      // Step 1: Get the user by email address
+      // Schritt 1: Hole den Benutzer anhand der E-Mail-Adresse
      const userRecord = await this.firebaseAdmin.auth().getUserByEmail(email);
      if (userRecord.emailVerified) {
-        // Even if already verified, we'll still return a valid token
+        return { message: 'Email is already verified' };
        const customToken = await this.firebaseAdmin.auth().createCustomToken(userRecord.uid);
        return {
          message: 'Email is already verified',
          token: customToken,
        };
      }
-      // Step 2: Update the user status to set emailVerified to true
+      // Schritt 2: Aktualisiere den Benutzerstatus
      // Hinweis: Wir können den oobCode nicht serverseitig validieren.
      // Wir nehmen an, dass der oobCode korrekt ist, da er von Firebase generiert wurde.
      await this.firebaseAdmin.auth().updateUser(userRecord.uid, {
        emailVerified: true,
      });
-      // Step 3: Generate a custom Firebase token for the user
+      return { message: 'Email successfully verified' };
      // This token can be used on the client side to authenticate with Firebase
      const customToken = await this.firebaseAdmin.auth().createCustomToken(userRecord.uid);
      return {
        message: 'Email successfully verified',
        token: customToken,
      };
    } catch (error) {
      throw new HttpException(error.message || 'Failed to verify email', HttpStatus.BAD_REQUEST);
    }
--- a/bizmatch-server/src/drizzle/drizzle.module.ts
+++ b/bizmatch-server/src/drizzle/drizzle.module.ts
@ -9,20 +9,14 @@ import * as schema from './schema';
 import { PG_CONNECTION } from './schema';
 const { Pool } = pkg;
@Module({
-  imports: [ConfigModule],
+  imports: [ConfigModule], 
  providers: [
    {
      provide: PG_CONNECTION,
      inject: [ConfigService, WINSTON_MODULE_PROVIDER, ClsService],
      useFactory: async (configService: ConfigService, logger: Logger, cls: ClsService) => {
        const connectionString = configService.get<string>('DATABASE_URL');
-        // const dbHost = configService.get<string>('DB_HOST');
+        console.log('--->',connectionString)
        // const dbPort = configService.get<string>('DB_PORT');
        // const dbName = configService.get<string>('DB_NAME');
        // const dbUser = configService.get<string>('DB_USER');
        const dbPassword = configService.get<string>('DB_PASSWORD');
        // logger.info(`Drizzle Connection - URL: ${connectionString}, Host: ${dbHost}, Port: ${dbPort}, DB: ${dbName}, User: ${dbUser}`);
        // console.log(`---> Drizzle Connection - URL: ${connectionString}, Host: ${dbHost}, Port: ${dbPort}, DB: ${dbName}, User: ${dbUser}`);
        const pool = new Pool({
          connectionString,
          // ssl: true, // Falls benötigt
--- a/bizmatch-server/src/drizzle/schema.ts
+++ b/bizmatch-server/src/drizzle/schema.ts
@ -8,56 +8,6 @@ export const customerSubTypeEnum = pgEnum('customerSubType', ['broker', 'cpa', '
 export const listingsCategoryEnum = pgEnum('listingsCategory', ['commercialProperty', 'business']);
 export const subscriptionTypeEnum = pgEnum('subscriptionType', ['free', 'professional', 'broker']);
 // Neue JSONB-basierte Tabellen
 export const users_json = pgTable(
  'users_json',
  {
    id: uuid('id').primaryKey().defaultRandom().notNull(),
    email: varchar('email', { length: 255 }).notNull().unique(),
    data: jsonb('data'),
  },
  table => ({
    emailIdx: index('idx_users_json_email').on(table.email),
  }),
 );
 export const businesses_json = pgTable(
  'businesses_json',
  {
    id: uuid('id').primaryKey().defaultRandom().notNull(),
    email: varchar('email', { length: 255 }).references(() => users_json.email),
    data: jsonb('data'),
  },
  table => ({
    emailIdx: index('idx_businesses_json_email').on(table.email),
  }),
 );
 export const commercials_json = pgTable(
  'commercials_json',
  {
    id: uuid('id').primaryKey().defaultRandom().notNull(),
    email: varchar('email', { length: 255 }).references(() => users_json.email),
    data: jsonb('data'),
  },
  table => ({
    emailIdx: index('idx_commercials_json_email').on(table.email),
  }),
 );
 export const listing_events_json = pgTable(
  'listing_events_json',
  {
    id: uuid('id').primaryKey().defaultRandom().notNull(),
    email: varchar('email', { length: 255 }),
    data: jsonb('data'),
  },
  table => ({
    emailIdx: index('idx_listing_events_json_email').on(table.email),
  }),
 );
 // Bestehende Tabellen bleiben unverändert
 export const users = pgTable(
  'users',
  {
@ -84,6 +34,10 @@ export const users = pgTable(
    subscriptionPlan: subscriptionTypeEnum('subscriptionPlan'),
    location: jsonb('location'),
    showInDirectory: boolean('showInDirectory').default(true),
    // city: varchar('city', { length: 255 }),
    // state: char('state', { length: 2 }),
    // latitude: doublePrecision('latitude'),
    // longitude: doublePrecision('longitude'),
  },
  table => ({
    locationUserCityStateIdx: index('idx_user_location_city_state').on(
@ -91,7 +45,6 @@ export const users = pgTable(
    ),
  }),
 );
 export const businesses = pgTable(
  'businesses',
  {
@ -103,7 +56,7 @@ export const businesses = pgTable(
    price: doublePrecision('price'),
    favoritesForUser: varchar('favoritesForUser', { length: 30 }).array(),
    draft: boolean('draft'),
-    listingsCategory: listingsCategoryEnum('listingsCategory'),
+    listingsCategory: listingsCategoryEnum('listingsCategory'), //varchar('listingsCategory', { length: 255 }),
    realEstateIncluded: boolean('realEstateIncluded'),
    leasedLocation: boolean('leasedLocation'),
    franchiseResale: boolean('franchiseResale'),
@ -117,19 +70,24 @@ export const businesses = pgTable(
    brokerLicencing: varchar('brokerLicencing', { length: 255 }),
    internals: text('internals'),
    imageName: varchar('imageName', { length: 200 }),
    slug: varchar('slug', { length: 300 }).unique(),
    created: timestamp('created'),
    updated: timestamp('updated'),
    location: jsonb('location'),
    // city: varchar('city', { length: 255 }),
    // state: char('state', { length: 2 }),
    // zipCode: integer('zipCode'),
    // county: varchar('county', { length: 255 }),
    // street: varchar('street', { length: 255 }),
    // housenumber: varchar('housenumber', { length: 10 }),
    // latitude: doublePrecision('latitude'),
    // longitude: doublePrecision('longitude'),
  },
  table => ({
    locationBusinessCityStateIdx: index('idx_business_location_city_state').on(
      sql`((${table.location}->>'name')::varchar), ((${table.location}->>'state')::varchar), ((${table.location}->>'latitude')::float), ((${table.location}->>'longitude')::float)`,
    ),
    slugIdx: index('idx_business_slug').on(table.slug),
  }),
 );
 export const commercials = pgTable(
  'commercials',
  {
@ -141,35 +99,52 @@ export const commercials = pgTable(
    description: text('description'),
    price: doublePrecision('price'),
    favoritesForUser: varchar('favoritesForUser', { length: 30 }).array(),
-    listingsCategory: listingsCategoryEnum('listingsCategory'),
+    listingsCategory: listingsCategoryEnum('listingsCategory'), //listingsCategory: varchar('listingsCategory', { length: 255 }),
    draft: boolean('draft'),
    imageOrder: varchar('imageOrder', { length: 200 }).array(),
    imagePath: varchar('imagePath', { length: 200 }),
    slug: varchar('slug', { length: 300 }).unique(),
    created: timestamp('created'),
    updated: timestamp('updated'),
    location: jsonb('location'),
    // city: varchar('city', { length: 255 }),
    // state: char('state', { length: 2 }),
    // zipCode: integer('zipCode'),
    // county: varchar('county', { length: 255 }),
    // street: varchar('street', { length: 255 }),
    // housenumber: varchar('housenumber', { length: 10 }),
    // latitude: doublePrecision('latitude'),
    // longitude: doublePrecision('longitude'),
  },
  table => ({
    locationCommercialsCityStateIdx: index('idx_commercials_location_city_state').on(
      sql`((${table.location}->>'name')::varchar), ((${table.location}->>'state')::varchar), ((${table.location}->>'latitude')::float), ((${table.location}->>'longitude')::float)`,
    ),
    slugIdx: index('idx_commercials_slug').on(table.slug),
  }),
 );
-
+// export const geo = pgTable('geo', {
-export const listing_events = pgTable('listing_events', {
+//   id: uuid('id').primaryKey().defaultRandom().notNull(),
 //   country: varchar('country', { length: 255 }).default('us'),
 //   state: char('state', { length: 2 }),
 //   city: varchar('city', { length: 255 }),
 //   zipCode: integer('zipCode'),
 //   county: varchar('county', { length: 255 }),
 //   street: varchar('street', { length: 255 }),
 //   housenumber: varchar('housenumber', { length: 10 }),
 //   latitude: doublePrecision('latitude'),
 //   longitude: doublePrecision('longitude'),
 // });
 export const listingEvents = pgTable('listing_events', {
  id: uuid('id').primaryKey().defaultRandom().notNull(),
-  listingId: varchar('listing_id', { length: 255 }),
+  listingId: varchar('listing_id', { length: 255 }), // Assuming listings are referenced by UUID, adjust as necessary
  email: varchar('email', { length: 255 }),
-  eventType: varchar('event_type', { length: 50 }),
+  eventType: varchar('event_type', { length: 50 }), // 'view', 'print', 'email', 'facebook', 'x', 'linkedin', 'contact'
  eventTimestamp: timestamp('event_timestamp').defaultNow(),
-  userIp: varchar('user_ip', { length: 45 }),
+  userIp: varchar('user_ip', { length: 45 }), // Optional if you choose to track IP in frontend or backend
-  userAgent: varchar('user_agent', { length: 255 }),
+  userAgent: varchar('user_agent', { length: 255 }), // Store User-Agent as string
-  locationCountry: varchar('location_country', { length: 100 }),
+  locationCountry: varchar('location_country', { length: 100 }), // Country from IP
-  locationCity: varchar('location_city', { length: 100 }),
+  locationCity: varchar('location_city', { length: 100 }), // City from IP
-  locationLat: varchar('location_lat', { length: 20 }),
+  locationLat: varchar('location_lat', { length: 20 }), // Latitude from IP, stored as varchar
-  locationLng: varchar('location_lng', { length: 20 }),
+  locationLng: varchar('location_lng', { length: 20 }), // Longitude from IP, stored as varchar
-  referrer: varchar('referrer', { length: 255 }),
+  referrer: varchar('referrer', { length: 255 }), // Referrer URL if applicable
-  additionalData: jsonb('additional_data'),
+  additionalData: jsonb('additional_data'), // JSON for any other optional data (like email, social shares etc.)
 });
--- a/bizmatch-server/src/event/event.service.ts
+++ b/bizmatch-server/src/event/event.service.ts
@ -2,22 +2,17 @@ import { Inject, Injectable } from '@nestjs/common';
 import { NodePgDatabase } from 'drizzle-orm/node-postgres';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import { ListingEvent } from 'src/models/db.model';
 import { Logger } from 'winston';
 import * as schema from '../drizzle/schema';
-import { listing_events_json, PG_CONNECTION } from '../drizzle/schema';
+import { listingEvents, PG_CONNECTION } from '../drizzle/schema';
@Injectable()
 export class EventService {
  constructor(
    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
  ) {}
  async createEvent(event: ListingEvent) {
    // Speichere das Event in der Datenbank
    event.eventTimestamp = new Date();
-    const { id, email, ...rest } = event;
+    await this.conn.insert(listingEvents).values(event).execute();
    const convertedEvent = { email, data: rest };
    await this.conn.insert(listing_events_json).values(convertedEvent).execute();
  }
 }
--- a/bizmatch-server/src/listings/business-listing.service.ts
+++ b/bizmatch-server/src/listings/business-listing.service.ts
@ -1,229 +1,169 @@
-import { BadRequestException, Inject, Injectable, NotFoundException } from '@nestjs/common';
+import { BadRequestException, Inject, Injectable } from '@nestjs/common';
-import { and, arrayContains, asc, count, desc, eq, gte, inArray, lte, or, SQL, sql } from 'drizzle-orm';
+import { and, arrayContains, asc, count, desc, eq, gte, ilike, inArray, lte, ne, or, SQL, sql } from 'drizzle-orm';
 import { NodePgDatabase } from 'drizzle-orm/node-postgres';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import { Logger } from 'winston';
 import { ZodError } from 'zod';
 import * as schema from '../drizzle/schema';
-import { businesses_json, PG_CONNECTION } from '../drizzle/schema';
+import { businesses, PG_CONNECTION } from '../drizzle/schema';
 import { FileService } from '../file/file.service';
 import { GeoService } from '../geo/geo.service';
 import { BusinessListing, BusinessListingSchema } from '../models/db.model';
 import { BusinessListingCriteria, JwtUser } from '../models/main.model';
 import { getDistanceQuery, splitName } from '../utils';
 import { generateSlug, extractShortIdFromSlug, isSlug } from '../utils/slug.utils';
@Injectable()
 export class BusinessListingService {
  constructor(
    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
    private fileService?: FileService,
    private geoService?: GeoService,
-  ) { }
+  ) {}
  private getWhereConditions(criteria: BusinessListingCriteria, user: JwtUser): SQL[] {
    const whereConditions: SQL[] = [];
    this.logger.info('getWhereConditions start', { criteria: JSON.stringify(criteria) });
    if (criteria.city && criteria.searchType === 'exact') {
-      whereConditions.push(sql`(${businesses_json.data}->'location'->>'name') ILIKE ${criteria.city.name}`);
+      whereConditions.push(sql`${businesses.location}->>'name' ilike ${criteria.city.name}`);
      //whereConditions.push(ilike(businesses.location-->'city', `%${criteria.city.name}%`));
    }
    if (criteria.city && criteria.radius && criteria.searchType === 'radius' && criteria.radius) {
      this.logger.debug('Adding radius search filter', { city: criteria.city.name, radius: criteria.radius });
      const cityGeo = this.geoService.getCityWithCoords(criteria.state, criteria.city.name);
-      whereConditions.push(sql`(${getDistanceQuery(businesses_json, cityGeo.latitude, cityGeo.longitude)} <= ${criteria.radius})`);
+      whereConditions.push(sql`${getDistanceQuery(businesses, cityGeo.latitude, cityGeo.longitude)} <= ${criteria.radius}`);
    }
    if (criteria.types && criteria.types.length > 0) {
-      this.logger.warn('Adding business category filter', { types: criteria.types });
+      whereConditions.push(inArray(businesses.type, criteria.types));
      // Use explicit SQL with IN for robust JSONB comparison
      const typeValues = criteria.types.map(t => sql`${t}`);
      whereConditions.push(sql`((${businesses_json.data}->>'type') IN (${sql.join(typeValues, sql`, `)}))`);
    }
    if (criteria.state) {
-      this.logger.debug('Adding state filter', { state: criteria.state });
+      whereConditions.push(sql`${businesses.location}->>'state' = ${criteria.state}`);
      whereConditions.push(sql`(${businesses_json.data}->'location'->>'state') = ${criteria.state}`);
    }
-    if (criteria.minPrice !== undefined && criteria.minPrice !== null) {
+    if (criteria.minPrice) {
-      whereConditions.push(
+      whereConditions.push(gte(businesses.price, criteria.minPrice));
        and(
          sql`(${businesses_json.data}->>'price') IS NOT NULL`,
          sql`(${businesses_json.data}->>'price') != ''`,
          gte(sql`REPLACE(${businesses_json.data}->>'price', ',', '')::double precision`, criteria.minPrice)
        )
      );
    }
-    if (criteria.maxPrice !== undefined && criteria.maxPrice !== null) {
+    if (criteria.maxPrice) {
-      whereConditions.push(
+      whereConditions.push(lte(businesses.price, criteria.maxPrice));
        and(
          sql`(${businesses_json.data}->>'price') IS NOT NULL`,
          sql`(${businesses_json.data}->>'price') != ''`,
          lte(sql`REPLACE(${businesses_json.data}->>'price', ',', '')::double precision`, criteria.maxPrice)
        )
      );
    }
    if (criteria.minRevenue) {
-      whereConditions.push(gte(sql`(${businesses_json.data}->>'salesRevenue')::double precision`, criteria.minRevenue));
+      whereConditions.push(gte(businesses.salesRevenue, criteria.minRevenue));
    }
    if (criteria.maxRevenue) {
-      whereConditions.push(lte(sql`(${businesses_json.data}->>'salesRevenue')::double precision`, criteria.maxRevenue));
+      whereConditions.push(lte(businesses.salesRevenue, criteria.maxRevenue));
    }
    if (criteria.minCashFlow) {
-      whereConditions.push(gte(sql`(${businesses_json.data}->>'cashFlow')::double precision`, criteria.minCashFlow));
+      whereConditions.push(gte(businesses.cashFlow, criteria.minCashFlow));
    }
    if (criteria.maxCashFlow) {
-      whereConditions.push(lte(sql`(${businesses_json.data}->>'cashFlow')::double precision`, criteria.maxCashFlow));
+      whereConditions.push(lte(businesses.cashFlow, criteria.maxCashFlow));
    }
    if (criteria.minNumberEmployees) {
-      whereConditions.push(gte(sql`(${businesses_json.data}->>'employees')::integer`, criteria.minNumberEmployees));
+      whereConditions.push(gte(businesses.employees, criteria.minNumberEmployees));
    }
    if (criteria.maxNumberEmployees) {
-      whereConditions.push(lte(sql`(${businesses_json.data}->>'employees')::integer`, criteria.maxNumberEmployees));
+      whereConditions.push(lte(businesses.employees, criteria.maxNumberEmployees));
    }
-    if (criteria.establishedMin) {
+    if (criteria.establishedSince) {
-      whereConditions.push(gte(sql`(${businesses_json.data}->>'established')::integer`, criteria.establishedMin));
+      whereConditions.push(gte(businesses.established, criteria.establishedSince));
    }
    if (criteria.establishedUntil) {
      whereConditions.push(lte(businesses.established, criteria.establishedUntil));
    }
    if (criteria.realEstateChecked) {
-      whereConditions.push(eq(sql`(${businesses_json.data}->>'realEstateIncluded')::boolean`, criteria.realEstateChecked));
+      whereConditions.push(eq(businesses.realEstateIncluded, criteria.realEstateChecked));
    }
    if (criteria.leasedLocation) {
-      whereConditions.push(eq(sql`(${businesses_json.data}->>'leasedLocation')::boolean`, criteria.leasedLocation));
+      whereConditions.push(eq(businesses.leasedLocation, criteria.leasedLocation));
    }
    if (criteria.franchiseResale) {
-      whereConditions.push(eq(sql`(${businesses_json.data}->>'franchiseResale')::boolean`, criteria.franchiseResale));
+      whereConditions.push(eq(businesses.franchiseResale, criteria.franchiseResale));
    }
-    if (criteria.title && criteria.title.trim() !== '') {
+    if (criteria.title) {
-      const searchTerm = `%${criteria.title.trim()}%`;
+      whereConditions.push(or(ilike(businesses.title, `%${criteria.title}%`), ilike(businesses.description, `%${criteria.title}%`)));
      whereConditions.push(
        sql`((${businesses_json.data}->>'title') ILIKE ${searchTerm} OR (${businesses_json.data}->>'description') ILIKE ${searchTerm})`
      );
    }
    if (criteria.brokerName) {
      const { firstname, lastname } = splitName(criteria.brokerName);
      if (firstname === lastname) {
-        whereConditions.push(
+        whereConditions.push(or(ilike(schema.users.firstname, `%${firstname}%`), ilike(schema.users.lastname, `%${lastname}%`)));
          sql`((${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} OR (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`})`
        );
      } else {
-        whereConditions.push(
+        whereConditions.push(and(ilike(schema.users.firstname, `%${firstname}%`), ilike(schema.users.lastname, `%${lastname}%`)));
          sql`((${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} AND (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`})`
        );
      }
    }
-    if (criteria.email) {
+    if (!user?.roles?.includes('ADMIN')) {
-      whereConditions.push(eq(schema.users_json.email, criteria.email));
+      whereConditions.push(or(eq(businesses.email, user?.username), ne(businesses.draft, true)));
    }
-    if (user?.role !== 'admin') {
+    whereConditions.push(and(eq(schema.users.customerType, 'professional'), eq(schema.users.customerSubType, 'broker')));
      whereConditions.push(
        sql`((${businesses_json.email} = ${user?.email || null}) OR (${businesses_json.data}->>'draft')::boolean IS NOT TRUE)`
      );
    }
    this.logger.warn('whereConditions count', { count: whereConditions.length });
    return whereConditions;
  }
  async searchBusinessListings(criteria: BusinessListingCriteria, user: JwtUser) {
    const start = criteria.start ? criteria.start : 0;
    const length = criteria.length ? criteria.length : 12;
    const query = this.conn
      .select({
-        business: businesses_json,
+        business: businesses,
-        brokerFirstName: sql`${schema.users_json.data}->>'firstname'`.as('brokerFirstName'),
+        brokerFirstName: schema.users.firstname,
-        brokerLastName: sql`${schema.users_json.data}->>'lastname'`.as('brokerLastName'),
+        brokerLastName: schema.users.lastname,
      })
-      .from(businesses_json)
+      .from(businesses)
-      .leftJoin(schema.users_json, eq(businesses_json.email, schema.users_json.email));
+      .leftJoin(schema.users, eq(businesses.email, schema.users.email));
    const whereConditions = this.getWhereConditions(criteria, user);
    this.logger.warn('Filter Criteria:', { criteria: JSON.stringify(criteria) });
    if (whereConditions.length > 0) {
-      const whereClause = sql.join(whereConditions, sql` AND `);
+      const whereClause = and(...whereConditions);
-      query.where(sql`(${whereClause})`);
+      query.where(whereClause);
      this.logger.warn('Generated SQL:', { sql: query.toSQL().sql, params: query.toSQL().params });
    }
    // Sortierung
    switch (criteria.sortBy) {
      case 'priceAsc':
-        query.orderBy(asc(sql`(${businesses_json.data}->>'price')::double precision`));
+        query.orderBy(asc(businesses.price));
        break;
      case 'priceDesc':
-        query.orderBy(desc(sql`(${businesses_json.data}->>'price')::double precision`));
+        query.orderBy(desc(businesses.price));
        break;
      case 'srAsc':
-        query.orderBy(asc(sql`(${businesses_json.data}->>'salesRevenue')::double precision`));
+        query.orderBy(asc(businesses.salesRevenue));
        break;
      case 'srDesc':
-        query.orderBy(desc(sql`(${businesses_json.data}->>'salesRevenue')::double precision`));
+        query.orderBy(desc(businesses.salesRevenue));
        break;
      case 'cfAsc':
-        query.orderBy(asc(sql`(${businesses_json.data}->>'cashFlow')::double precision`));
+        query.orderBy(asc(businesses.cashFlow));
        break;
      case 'cfDesc':
-        query.orderBy(desc(sql`(${businesses_json.data}->>'cashFlow')::double precision`));
+        query.orderBy(desc(businesses.cashFlow));
        break;
      case 'creationDateFirst':
-        query.orderBy(asc(sql`${businesses_json.data}->>'created'`));
+        query.orderBy(asc(businesses.created));
        break;
      case 'creationDateLast':
-        query.orderBy(desc(sql`${businesses_json.data}->>'created'`));
+        query.orderBy(desc(businesses.created));
        break;
-      default: {
+      default:
-        // NEU (created < 14 Tage) > UPDATED (updated < 14 Tage) > Rest
+        // Keine spezifische Sortierung, Standardverhalten kann hier eingefügt werden
        const recencyRank = sql`
      CASE
        WHEN ((${businesses_json.data}->>'created')::timestamptz >= (now() - interval '14 days')) THEN 2
        WHEN ((${businesses_json.data}->>'updated')::timestamptz >= (now() - interval '14 days')) THEN 1
        ELSE 0
      END
    `;
        // Innerhalb der Gruppe:
        // NEW  → created DESC
        // UPDATED → updated DESC
        // Rest → created DESC
        const groupTimestamp = sql`
      CASE
        WHEN ((${businesses_json.data}->>'created')::timestamptz >= (now() - interval '14 days'))
          THEN (${businesses_json.data}->>'created')::timestamptz
        WHEN ((${businesses_json.data}->>'updated')::timestamptz >= (now() - interval '14 days'))
          THEN (${businesses_json.data}->>'updated')::timestamptz
        ELSE (${businesses_json.data}->>'created')::timestamptz
      END
    `;
        query.orderBy(desc(recencyRank), desc(groupTimestamp), desc(sql`(${businesses_json.data}->>'created')::timestamptz`));
        break;
      }
    }
    // Paginierung
    query.limit(length).offset(start);
    const data = await query;
    const totalCount = await this.getBusinessListingsCount(criteria, user);
-    const results = data.map(r => ({
+    const results = data.map(r => r.business);
      id: r.business.id,
      email: r.business.email,
      ...(r.business.data as BusinessListing),
      brokerFirstName: r.brokerFirstName,
      brokerLastName: r.brokerLastName,
    }));
    return {
      results,
      totalCount,
@ -231,79 +171,31 @@ export class BusinessListingService {
  }
  async getBusinessListingsCount(criteria: BusinessListingCriteria, user: JwtUser): Promise<number> {
-    const countQuery = this.conn.select({ value: count() }).from(businesses_json).leftJoin(schema.users_json, eq(businesses_json.email, schema.users_json.email));
+    const countQuery = this.conn.select({ value: count() }).from(businesses).leftJoin(schema.users, eq(businesses.email, schema.users.email));
    const whereConditions = this.getWhereConditions(criteria, user);
    if (whereConditions.length > 0) {
-      const whereClause = sql.join(whereConditions, sql` AND `);
+      const whereClause = and(...whereConditions);
-      countQuery.where(sql`(${whereClause})`);
+      countQuery.where(whereClause);
    }
    const [{ value: totalCount }] = await countQuery;
    return totalCount;
  }
  /**
   * Find business by slug or ID
   * Supports both slug (e.g., "restaurant-austin-tx-a3f7b2c1") and UUID
   */
  async findBusinessBySlugOrId(slugOrId: string, user: JwtUser): Promise<BusinessListing> {
    this.logger.debug(`findBusinessBySlugOrId called with: ${slugOrId}`);
    let id = slugOrId;
    // Check if it's a slug (contains multiple hyphens) vs UUID
    if (isSlug(slugOrId)) {
      this.logger.debug(`Detected as slug: ${slugOrId}`);
      // Extract short ID from slug and find by slug field
      const listing = await this.findBusinessBySlug(slugOrId);
      if (listing) {
        this.logger.debug(`Found listing by slug: ${slugOrId} -> ID: ${listing.id}`);
        id = listing.id;
      } else {
        this.logger.warn(`Slug not found in database: ${slugOrId}`);
        throw new NotFoundException(
          `Business listing not found with slug: ${slugOrId}. ` +
          `The listing may have been deleted or the URL may be incorrect.`
        );
      }
    } else {
      this.logger.debug(`Detected as UUID: ${slugOrId}`);
    }
    return this.findBusinessesById(id, user);
  }
  /**
   * Find business by slug
   */
  async findBusinessBySlug(slug: string): Promise<BusinessListing | null> {
    const result = await this.conn
      .select()
      .from(businesses_json)
      .where(sql`${businesses_json.data}->>'slug' = ${slug}`)
      .limit(1);
    if (result.length > 0) {
      return { id: result[0].id, email: result[0].email, ...(result[0].data as BusinessListing) } as BusinessListing;
    }
    return null;
  }
  async findBusinessesById(id: string, user: JwtUser): Promise<BusinessListing> {
    const conditions = [];
-    if (user?.role !== 'admin') {
+    if (!user?.roles?.includes('ADMIN')) {
-      conditions.push(or(eq(businesses_json.email, user?.email), sql`(${businesses_json.data}->>'draft')::boolean IS NOT TRUE`));
+      conditions.push(or(eq(businesses.email, user?.username), ne(businesses.draft, true)));
    }
-    conditions.push(eq(businesses_json.id, id));
+    conditions.push(sql`${businesses.id} = ${id}`);
    const result = await this.conn
      .select()
-      .from(businesses_json)
+      .from(businesses)
      .where(and(...conditions));
    if (result.length > 0) {
-      return { id: result[0].id, email: result[0].email, ...(result[0].data as BusinessListing) } as BusinessListing;
+      return result[0] as BusinessListing;
    } else {
      throw new BadRequestException(`No entry available for ${id}`);
    }
@ -311,40 +203,35 @@ export class BusinessListingService {
  async findBusinessesByEmail(email: string, user: JwtUser): Promise<BusinessListing[]> {
    const conditions = [];
-    conditions.push(eq(businesses_json.email, email));
+    conditions.push(eq(businesses.email, email));
-    if (email !== user?.email && user?.role !== 'admin') {
+    if (email !== user?.username && (!user?.roles?.includes('ADMIN'))) {
-      conditions.push(sql`(${businesses_json.data}->>'draft')::boolean IS NOT TRUE`);
+      conditions.push(ne(businesses.draft, true));
    }
-    const listings = await this.conn
+    const listings = (await this.conn
      .select()
-      .from(businesses_json)
+      .from(businesses)
-      .where(and(...conditions));
+      .where(and(...conditions))) as BusinessListing[];
    return listings.map(l => ({ id: l.id, email: l.email, ...(l.data as BusinessListing) }) as BusinessListing);
  }
    return listings;
  }
  // #### Find Favorites ########################################
  async findFavoriteListings(user: JwtUser): Promise<BusinessListing[]> {
    const userFavorites = await this.conn
      .select()
-      .from(businesses_json)
+      .from(businesses)
-      .where(sql`${businesses_json.data}->'favoritesForUser' ? ${user.email}`);
+      .where(arrayContains(businesses.favoritesForUser, [user.username]));
-    return userFavorites.map(l => ({ id: l.id, email: l.email, ...(l.data as BusinessListing) }) as BusinessListing);
+    return userFavorites;
  }
-
+  // #### CREATE ########################################
  async createListing(data: BusinessListing): Promise<BusinessListing> {
    try {
      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
      data.updated = new Date();
      BusinessListingSchema.parse(data);
-      const { id, email, ...rest } = data;
+      const convertedBusinessListing = data;
-      const convertedBusinessListing = { email, data: rest };
+      delete convertedBusinessListing.id;
-      const [createdListing] = await this.conn.insert(businesses_json).values(convertedBusinessListing).returning();
+      const [createdListing] = await this.conn.insert(businesses).values(convertedBusinessListing).returning();
-
+      return createdListing;
      // Generate and update slug after creation (we need the ID first)
      const slug = generateSlug(data.title, data.location, createdListing.id);
      const listingWithSlug = { ...(createdListing.data as any), slug };
      await this.conn.update(businesses_json).set({ data: listingWithSlug }).where(eq(businesses_json.id, createdListing.id));
      return { id: createdListing.id, email: createdListing.email, ...(createdListing.data as BusinessListing), slug } as any;
    } catch (error) {
      if (error instanceof ZodError) {
        const filteredErrors = error.errors
@ -358,37 +245,15 @@ export class BusinessListingService {
      throw error;
    }
  }
-
+  // #### UPDATE Business ########################################
-  async updateBusinessListing(id: string, data: BusinessListing, user: JwtUser): Promise<BusinessListing> {
+  async updateBusinessListing(id: string, data: BusinessListing): Promise<BusinessListing> {
    try {
      const [existingListing] = await this.conn.select().from(businesses_json).where(eq(businesses_json.id, id));
      if (!existingListing) {
        throw new NotFoundException(`Business listing with id ${id} not found`);
      }
      data.updated = new Date();
      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
-      if (existingListing.email === user?.email) {
+      BusinessListingSchema.parse(data);
-        data.favoritesForUser = (<BusinessListing>existingListing.data).favoritesForUser || [];
+      const convertedBusinessListing = data;
-      }
+      const [updateListing] = await this.conn.update(businesses).set(convertedBusinessListing).where(eq(businesses.id, id)).returning();
-
+      return updateListing;
      // Regenerate slug if title or location changed
      const existingData = existingListing.data as BusinessListing;
      let slug: string;
      if (data.title !== existingData.title || JSON.stringify(data.location) !== JSON.stringify(existingData.location)) {
        slug = generateSlug(data.title, data.location, id);
      } else {
        // Keep existing slug
        slug = (existingData as any).slug || generateSlug(data.title, data.location, id);
      }
      // Add slug to data before validation
      const dataWithSlug = { ...data, slug };
      BusinessListingSchema.parse(dataWithSlug);
      const { id: _, email, ...rest } = dataWithSlug;
      const convertedBusinessListing = { email, data: rest };
      const [updateListing] = await this.conn.update(businesses_json).set(convertedBusinessListing).where(eq(businesses_json.id, id)).returning();
      return { id: updateListing.id, email: updateListing.email, ...(updateListing.data as BusinessListing) };
    } catch (error) {
      if (error instanceof ZodError) {
        const filteredErrors = error.errors
@ -402,30 +267,17 @@ export class BusinessListingService {
      throw error;
    }
  }
-
+  // #### DELETE  ########################################
  async deleteListing(id: string): Promise<void> {
-    await this.conn.delete(businesses_json).where(eq(businesses_json.id, id));
+    await this.conn.delete(businesses).where(eq(businesses.id, id));
  }
-
+  // #### DELETE Favorite ###################################
  async addFavorite(id: string, user: JwtUser): Promise<void> {
    await this.conn
      .update(businesses_json)
      .set({
        data: sql`jsonb_set(${businesses_json.data}, '{favoritesForUser}',
          coalesce((${businesses_json.data}->'favoritesForUser')::jsonb, '[]'::jsonb) || to_jsonb(${user.email}::text))`,
      })
      .where(eq(businesses_json.id, id));
  }
  async deleteFavorite(id: string, user: JwtUser): Promise<void> {
    await this.conn
-      .update(businesses_json)
+      .update(businesses)
      .set({
-        data: sql`jsonb_set(${businesses_json.data}, '{favoritesForUser}',
+        favoritesForUser: sql`array_remove(${businesses.favoritesForUser}, ${user.username})`,
          (SELECT coalesce(jsonb_agg(elem), '[]'::jsonb)
           FROM jsonb_array_elements(coalesce(${businesses_json.data}->'favoritesForUser', '[]'::jsonb)) AS elem
           WHERE elem::text != to_jsonb(${user.email}::text)::text))`,
      })
-      .where(eq(businesses_json.id, id));
+      .where(sql`${businesses.id} = ${id}`);
  }
 }
--- a/bizmatch-server/src/listings/business-listings.controller.ts
+++ b/bizmatch-server/src/listings/business-listings.controller.ts
@ -13,21 +13,18 @@ export class BusinessListingsController {
  constructor(
    private readonly listingsService: BusinessListingService,
    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
-  ) { }
+  ) {}
  @UseGuards(OptionalAuthGuard)
  @Get(':id')
  async findById(@Request() req, @Param('id') id: string): Promise<any> {
    return await this.listingsService.findBusinessesById(id, req.user as JwtUser);
  }
  @UseGuards(AuthGuard)
-  @Post('favorites/all')
+  @Get('favorites/all')
  async findFavorites(@Request() req): Promise<any> {
    return await this.listingsService.findFavoriteListings(req.user as JwtUser);
  }
  @UseGuards(OptionalAuthGuard)
  @Get(':slugOrId')
  async findById(@Request() req, @Param('slugOrId') slugOrId: string): Promise<any> {
    // Support both slug (e.g., "restaurant-austin-tx-a3f7b2c1") and UUID
    return await this.listingsService.findBusinessBySlugOrId(slugOrId, req.user as JwtUser);
  }
  @UseGuards(OptionalAuthGuard)
  @Get('user/:userid')
  async findByUserId(@Request() req, @Param('userid') userid: string): Promise<BusinessListing[]> {
@ -53,8 +50,8 @@ export class BusinessListingsController {
  @UseGuards(OptionalAuthGuard)
  @Put()
-  async update(@Request() req, @Body() listing: any) {
+  async update(@Body() listing: any) {
-    return await this.listingsService.updateBusinessListing(listing.id, listing, req.user as JwtUser);
+    return await this.listingsService.updateBusinessListing(listing.id, listing);
  }
  @UseGuards(OptionalAuthGuard)
@ -63,17 +60,9 @@ export class BusinessListingsController {
    await this.listingsService.deleteListing(id);
  }
  @UseGuards(AuthGuard)
  @Post('favorite/:id')
  async addFavorite(@Request() req, @Param('id') id: string) {
    await this.listingsService.addFavorite(id, req.user as JwtUser);
    return { success: true, message: 'Added to favorites' };
  }
  @UseGuards(AuthGuard)
  @Delete('favorite/:id')
  async deleteFavorite(@Request() req, @Param('id') id: string) {
    await this.listingsService.deleteFavorite(id, req.user as JwtUser);
    return { success: true, message: 'Removed from favorites' };
  }
 }
--- a/bizmatch-server/src/listings/commercial-property-listings.controller.ts
+++ b/bizmatch-server/src/listings/commercial-property-listings.controller.ts
@ -15,19 +15,18 @@ export class CommercialPropertyListingsController {
    private readonly listingsService: CommercialPropertyService,
    private fileService: FileService,
    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
-  ) { }
+  ) {}
  @UseGuards(AuthGuard)
  @Post('favorites/all')
  async findFavorites(@Request() req): Promise<any> {
    return await this.listingsService.findFavoriteListings(req.user as JwtUser);
  }
  @UseGuards(OptionalAuthGuard)
-  @Get(':slugOrId')
+  @Get(':id')
-  async findById(@Request() req, @Param('slugOrId') slugOrId: string): Promise<any> {
+  async findById(@Request() req, @Param('id') id: string): Promise<any> {
-    // Support both slug (e.g., "office-space-austin-tx-a3f7b2c1") and UUID
+    return await this.listingsService.findCommercialPropertiesById(id, req.user as JwtUser);
-    return await this.listingsService.findCommercialBySlugOrId(slugOrId, req.user as JwtUser);
+  }
  @UseGuards(AuthGuard)
  @Get('favorites/all')
  async findFavorites(@Request() req): Promise<any> {
    return await this.listingsService.findFavoriteListings(req.user as JwtUser);
  }
  @UseGuards(OptionalAuthGuard)
@ -55,8 +54,8 @@ export class CommercialPropertyListingsController {
  @UseGuards(OptionalAuthGuard)
  @Put()
-  async update(@Request() req, @Body() listing: any) {
+  async update(@Body() listing: any) {
-    return await this.listingsService.updateCommercialPropertyListing(listing.id, listing, req.user as JwtUser);
+    return await this.listingsService.updateCommercialPropertyListing(listing.id, listing);
  }
  @UseGuards(OptionalAuthGuard)
@ -65,18 +64,9 @@ export class CommercialPropertyListingsController {
    await this.listingsService.deleteListing(id);
    this.fileService.deleteDirectoryIfExists(imagePath);
  }
  @UseGuards(AuthGuard)
  @Post('favorite/:id')
  async addFavorite(@Request() req, @Param('id') id: string) {
    await this.listingsService.addFavorite(id, req.user as JwtUser);
    return { success: true, message: 'Added to favorites' };
  }
  @UseGuards(AuthGuard)
  @Delete('favorite/:id')
  async deleteFavorite(@Request() req, @Param('id') id: string) {
    await this.listingsService.deleteFavorite(id, req.user as JwtUser);
    return { success: true, message: 'Removed from favorites' };
  }
 }
--- a/bizmatch-server/src/listings/commercial-property.service.ts
+++ b/bizmatch-server/src/listings/commercial-property.service.ts
@ -1,17 +1,16 @@
-import { BadRequestException, Inject, Injectable, NotFoundException } from '@nestjs/common';
+import { BadRequestException, Inject, Injectable } from '@nestjs/common';
-import { and, arrayContains, asc, count, desc, eq, gte, inArray, lte, or, SQL, sql } from 'drizzle-orm';
+import { and, arrayContains, asc, count, desc, eq, gte, ilike, inArray, lte, ne, or, SQL, sql } from 'drizzle-orm';
 import { NodePgDatabase } from 'drizzle-orm/node-postgres';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import { Logger } from 'winston';
 import { ZodError } from 'zod';
 import * as schema from '../drizzle/schema';
-import { commercials_json, PG_CONNECTION } from '../drizzle/schema';
+import { commercials, PG_CONNECTION } from '../drizzle/schema';
 import { FileService } from '../file/file.service';
 import { GeoService } from '../geo/geo.service';
 import { CommercialPropertyListing, CommercialPropertyListingSchema } from '../models/db.model';
 import { CommercialPropertyListingCriteria, JwtUser } from '../models/main.model';
-import { getDistanceQuery, splitName } from '../utils';
+import { getDistanceQuery } from '../utils';
 import { generateSlug, extractShortIdFromSlug, isSlug } from '../utils/slug.utils';
@Injectable()
 export class CommercialPropertyService {
@ -20,93 +19,66 @@ export class CommercialPropertyService {
    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
    private fileService?: FileService,
    private geoService?: GeoService,
-  ) { }
+  ) {}
  private getWhereConditions(criteria: CommercialPropertyListingCriteria, user: JwtUser): SQL[] {
    const whereConditions: SQL[] = [];
    if (criteria.city && criteria.searchType === 'exact') {
-      whereConditions.push(sql`(${commercials_json.data}->'location'->>'name') ILIKE ${criteria.city.name}`);
+      whereConditions.push(sql`${commercials.location}->>'name' ilike ${criteria.city.name}`);
    }
    if (criteria.city && criteria.radius && criteria.searchType === 'radius' && criteria.radius) {
      const cityGeo = this.geoService.getCityWithCoords(criteria.state, criteria.city.name);
-      whereConditions.push(sql`${getDistanceQuery(commercials_json, cityGeo.latitude, cityGeo.longitude)} <= ${criteria.radius}`);
+      whereConditions.push(sql`${getDistanceQuery(commercials, cityGeo.latitude, cityGeo.longitude)} <= ${criteria.radius}`);
    }
    if (criteria.types && criteria.types.length > 0) {
-      this.logger.warn('Adding commercial property type filter', { types: criteria.types });
+      whereConditions.push(inArray(schema.commercials.type, criteria.types));
      // Use explicit SQL with IN for robust JSONB comparison
      const typeValues = criteria.types.map(t => sql`${t}`);
      whereConditions.push(sql`((${commercials_json.data}->>'type') IN (${sql.join(typeValues, sql`, `)}))`);
    }
    if (criteria.state) {
-      whereConditions.push(sql`(${commercials_json.data}->'location'->>'state') = ${criteria.state}`);
+      whereConditions.push(sql`${schema.commercials.location}->>'state' = ${criteria.state}`);
    }
    if (criteria.minPrice) {
-      whereConditions.push(gte(sql`(${commercials_json.data}->>'price')::double precision`, criteria.minPrice));
+      whereConditions.push(gte(schema.commercials.price, criteria.minPrice));
    }
    if (criteria.maxPrice) {
-      whereConditions.push(lte(sql`(${commercials_json.data}->>'price')::double precision`, criteria.maxPrice));
+      whereConditions.push(lte(schema.commercials.price, criteria.maxPrice));
    }
    if (criteria.title) {
-      whereConditions.push(
+      whereConditions.push(or(ilike(schema.commercials.title, `%${criteria.title}%`), ilike(schema.commercials.description, `%${criteria.title}%`)));
        sql`((${commercials_json.data}->>'title') ILIKE ${`%${criteria.title}%`} OR (${commercials_json.data}->>'description') ILIKE ${`%${criteria.title}%`})`
      );
    }
-
+    if (!user?.roles?.includes('ADMIN')) {
-    if (criteria.brokerName) {
+      whereConditions.push(or(eq(commercials.email, user?.username), ne(commercials.draft, true)));
      const { firstname, lastname } = splitName(criteria.brokerName);
      if (firstname === lastname) {
        // Single word: search either first OR last name
        whereConditions.push(
          sql`((${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} OR (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`})`
        );
      } else {
        // Multiple words: search both first AND last name
        whereConditions.push(
          sql`((${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} AND (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`})`
        );
      }
    }
-
+    // whereConditions.push(and(eq(schema.users.customerType, 'professional')));
    if (user?.role !== 'admin') {
      whereConditions.push(
        sql`((${commercials_json.email} = ${user?.email || null}) OR (${commercials_json.data}->>'draft')::boolean IS NOT TRUE)`
      );
    }
    this.logger.warn('whereConditions count', { count: whereConditions.length });
    return whereConditions;
  }
  // #### Find by criteria ########################################
  async searchCommercialProperties(criteria: CommercialPropertyListingCriteria, user: JwtUser): Promise<any> {
    const start = criteria.start ? criteria.start : 0;
    const length = criteria.length ? criteria.length : 12;
-    const query = this.conn.select({ commercial: commercials_json }).from(commercials_json).leftJoin(schema.users_json, eq(commercials_json.email, schema.users_json.email));
+    const query = this.conn.select({ commercial: commercials }).from(commercials).leftJoin(schema.users, eq(commercials.email, schema.users.email));
    const whereConditions = this.getWhereConditions(criteria, user);
    this.logger.warn('Filter Criteria:', { criteria: JSON.stringify(criteria) });
    if (whereConditions.length > 0) {
-      const whereClause = sql.join(whereConditions, sql` AND `);
+      const whereClause = and(...whereConditions);
-      query.where(sql`(${whereClause})`);
+      query.where(whereClause);
      this.logger.warn('Generated SQL:', { sql: query.toSQL().sql, params: query.toSQL().params });
    }
    // Sortierung
    switch (criteria.sortBy) {
      case 'priceAsc':
-        query.orderBy(asc(sql`(${commercials_json.data}->>'price')::double precision`));
+        query.orderBy(asc(commercials.price));
        break;
      case 'priceDesc':
-        query.orderBy(desc(sql`(${commercials_json.data}->>'price')::double precision`));
+        query.orderBy(desc(commercials.price));
        break;
      case 'creationDateFirst':
-        query.orderBy(asc(sql`${commercials_json.data}->>'created'`));
+        query.orderBy(asc(commercials.created));
        break;
      case 'creationDateLast':
-        query.orderBy(desc(sql`${commercials_json.data}->>'created'`));
+        query.orderBy(desc(commercials.created));
        break;
      default:
        // Keine spezifische Sortierung, Standardverhalten kann hier eingefügt werden
@ -117,7 +89,7 @@ export class CommercialPropertyService {
    query.limit(length).offset(start);
    const data = await query;
-    const results = data.map(r => ({ id: r.commercial.id, email: r.commercial.email, ...(r.commercial.data as CommercialPropertyListing) }));
+    const results = data.map(r => r.commercial);
    const totalCount = await this.getCommercialPropertiesCount(criteria, user);
    return {
@ -126,12 +98,12 @@ export class CommercialPropertyService {
    };
  }
  async getCommercialPropertiesCount(criteria: CommercialPropertyListingCriteria, user: JwtUser): Promise<number> {
-    const countQuery = this.conn.select({ value: count() }).from(commercials_json).leftJoin(schema.users_json, eq(commercials_json.email, schema.users_json.email));
+    const countQuery = this.conn.select({ value: count() }).from(schema.commercials).leftJoin(schema.users, eq(commercials.email, schema.users.email));
    const whereConditions = this.getWhereConditions(criteria, user);
    if (whereConditions.length > 0) {
-      const whereClause = sql.join(whereConditions, sql` AND `);
+      const whereClause = and(...whereConditions);
-      countQuery.where(sql`(${whereClause})`);
+      countQuery.where(whereClause);
    }
    const [{ value: totalCount }] = await countQuery;
@ -139,66 +111,18 @@ export class CommercialPropertyService {
  }
  // #### Find by ID ########################################
  /**
   * Find commercial property by slug or ID
   * Supports both slug (e.g., "office-space-austin-tx-a3f7b2c1") and UUID
   */
  async findCommercialBySlugOrId(slugOrId: string, user: JwtUser): Promise<CommercialPropertyListing> {
    this.logger.debug(`findCommercialBySlugOrId called with: ${slugOrId}`);
    let id = slugOrId;
    // Check if it's a slug (contains multiple hyphens) vs UUID
    if (isSlug(slugOrId)) {
      this.logger.debug(`Detected as slug: ${slugOrId}`);
      // Extract short ID from slug and find by slug field
      const listing = await this.findCommercialBySlug(slugOrId);
      if (listing) {
        this.logger.debug(`Found listing by slug: ${slugOrId} -> ID: ${listing.id}`);
        id = listing.id;
      } else {
        this.logger.warn(`Slug not found in database: ${slugOrId}`);
        throw new NotFoundException(
          `Commercial property listing not found with slug: ${slugOrId}. ` +
          `The listing may have been deleted or the URL may be incorrect.`
        );
      }
    } else {
      this.logger.debug(`Detected as UUID: ${slugOrId}`);
    }
    return this.findCommercialPropertiesById(id, user);
  }
  /**
   * Find commercial property by slug
   */
  async findCommercialBySlug(slug: string): Promise<CommercialPropertyListing | null> {
    const result = await this.conn
      .select()
      .from(commercials_json)
      .where(sql`${commercials_json.data}->>'slug' = ${slug}`)
      .limit(1);
    if (result.length > 0) {
      return { id: result[0].id, email: result[0].email, ...(result[0].data as CommercialPropertyListing) } as CommercialPropertyListing;
    }
    return null;
  }
  async findCommercialPropertiesById(id: string, user: JwtUser): Promise<CommercialPropertyListing> {
    const conditions = [];
-    if (user?.role !== 'admin') {
+    if (!user?.roles?.includes('ADMIN')) {
-      conditions.push(or(eq(commercials_json.email, user?.email), sql`(${commercials_json.data}->>'draft')::boolean IS NOT TRUE`));
+      conditions.push(or(eq(commercials.email, user?.username), ne(commercials.draft, true)));
    }
-    conditions.push(eq(commercials_json.id, id));
+    conditions.push(sql`${commercials.id} = ${id}`);
    const result = await this.conn
      .select()
-      .from(commercials_json)
+      .from(commercials)
      .where(and(...conditions));
    if (result.length > 0) {
-      return { id: result[0].id, email: result[0].email, ...(result[0].data as CommercialPropertyListing) } as CommercialPropertyListing;
+      return result[0] as CommercialPropertyListing;
    } else {
      throw new BadRequestException(`No entry available for ${id}`);
    }
@ -207,55 +131,42 @@ export class CommercialPropertyService {
  // #### Find by User EMail ########################################
  async findCommercialPropertiesByEmail(email: string, user: JwtUser): Promise<CommercialPropertyListing[]> {
    const conditions = [];
-    conditions.push(eq(commercials_json.email, email));
+    conditions.push(eq(commercials.email, email));
-    if (email !== user?.email && user?.role !== 'admin') {
+    if (email !== user?.username && (!user?.roles?.includes('ADMIN'))) {
-      conditions.push(sql`(${commercials_json.data}->>'draft')::boolean IS NOT TRUE`);
+      conditions.push(ne(commercials.draft, true));
    }
-    const listings = await this.conn
+    const listings = (await this.conn
      .select()
-      .from(commercials_json)
+      .from(commercials)
-      .where(and(...conditions));
+      .where(and(...conditions))) as CommercialPropertyListing[];
-    return listings.map(l => ({ id: l.id, email: l.email, ...(l.data as CommercialPropertyListing) }) as CommercialPropertyListing);
+    return listings as CommercialPropertyListing[];
  }
  // #### Find Favorites ########################################
  async findFavoriteListings(user: JwtUser): Promise<CommercialPropertyListing[]> {
    const userFavorites = await this.conn
      .select()
-      .from(commercials_json)
+      .from(commercials)
-      .where(sql`${commercials_json.data}->'favoritesForUser' ? ${user.email}`);
+      .where(arrayContains(commercials.favoritesForUser, [user.username]));
-    return userFavorites.map(l => ({ id: l.id, email: l.email, ...(l.data as CommercialPropertyListing) }) as CommercialPropertyListing);
+    return userFavorites;
  }
  // #### Find by imagePath ########################################
  async findByImagePath(imagePath: string, serial: string): Promise<CommercialPropertyListing> {
    const result = await this.conn
      .select()
-      .from(commercials_json)
+      .from(commercials)
-      .where(and(sql`(${commercials_json.data}->>'imagePath') = ${imagePath}`, sql`(${commercials_json.data}->>'serialId')::integer = ${serial}`));
+      .where(and(sql`${commercials.imagePath} = ${imagePath}`, sql`${commercials.serialId} = ${serial}`));
-    if (result.length > 0) {
+    return result[0] as CommercialPropertyListing;
      return { id: result[0].id, email: result[0].email, ...(result[0].data as CommercialPropertyListing) } as CommercialPropertyListing;
    }
  }
  // #### CREATE ########################################
  async createListing(data: CommercialPropertyListing): Promise<CommercialPropertyListing> {
    try {
      // Generate serialId based on timestamp + random number (temporary solution until sequence is created)
      // This ensures uniqueness without requiring a database sequence
      const serialId = Date.now() % 1000000 + Math.floor(Math.random() * 1000);
      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
      data.updated = new Date();
      data.serialId = Number(serialId);
      CommercialPropertyListingSchema.parse(data);
-      const { id, email, ...rest } = data;
+      const convertedCommercialPropertyListing = data;
-      const convertedCommercialPropertyListing = { email, data: rest };
+      delete convertedCommercialPropertyListing.id;
-      const [createdListing] = await this.conn.insert(commercials_json).values(convertedCommercialPropertyListing).returning();
+      const [createdListing] = await this.conn.insert(commercials).values(convertedCommercialPropertyListing).returning();
-
+      return createdListing;
      // Generate and update slug after creation (we need the ID first)
      const slug = generateSlug(data.title, data.location, createdListing.id);
      const listingWithSlug = { ...(createdListing.data as any), slug };
      await this.conn.update(commercials_json).set({ data: listingWithSlug }).where(eq(commercials_json.id, createdListing.id));
      return { id: createdListing.id, email: createdListing.email, ...(createdListing.data as CommercialPropertyListing), slug } as any;
    } catch (error) {
      if (error instanceof ZodError) {
        const filteredErrors = error.errors
@ -270,42 +181,20 @@ export class CommercialPropertyService {
    }
  }
  // #### UPDATE CommercialProps ########################################
-  async updateCommercialPropertyListing(id: string, data: CommercialPropertyListing, user: JwtUser): Promise<CommercialPropertyListing> {
+  async updateCommercialPropertyListing(id: string, data: CommercialPropertyListing): Promise<CommercialPropertyListing> {
    try {
      const [existingListing] = await this.conn.select().from(commercials_json).where(eq(commercials_json.id, id));
      if (!existingListing) {
        throw new NotFoundException(`Business listing with id ${id} not found`);
      }
      data.updated = new Date();
      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
-      if (existingListing.email === user?.email || !user) {
+      CommercialPropertyListingSchema.parse(data);
-        data.favoritesForUser = (<CommercialPropertyListing>existingListing.data).favoritesForUser || [];
+      const imageOrder = await this.fileService.getPropertyImages(data.imagePath, String(data.serialId));
-      }
+      const difference = imageOrder.filter(x => !data.imageOrder.includes(x)).concat(data.imageOrder.filter(x => !imageOrder.includes(x)));
      // Regenerate slug if title or location changed
      const existingData = existingListing.data as CommercialPropertyListing;
      let slug: string;
      if (data.title !== existingData.title || JSON.stringify(data.location) !== JSON.stringify(existingData.location)) {
        slug = generateSlug(data.title, data.location, id);
      } else {
        // Keep existing slug
        slug = (existingData as any).slug || generateSlug(data.title, data.location, id);
      }
      // Add slug to data before validation
      const dataWithSlug = { ...data, slug };
      CommercialPropertyListingSchema.parse(dataWithSlug);
      const imageOrder = await this.fileService.getPropertyImages(dataWithSlug.imagePath, String(dataWithSlug.serialId));
      const difference = imageOrder.filter(x => !dataWithSlug.imageOrder.includes(x)).concat(dataWithSlug.imageOrder.filter(x => !imageOrder.includes(x)));
      if (difference.length > 0) {
-        this.logger.warn(`changes between image directory and imageOrder in listing ${dataWithSlug.serialId}: ${difference.join(',')}`);
+        this.logger.warn(`changes between image directory and imageOrder in listing ${data.serialId}: ${difference.join(',')}`);
-        dataWithSlug.imageOrder = imageOrder;
+        data.imageOrder = imageOrder;
      }
-      const { id: _, email, ...rest } = dataWithSlug;
+      const convertedCommercialPropertyListing = data;
-      const convertedCommercialPropertyListing = { email, data: rest };
+      const [updateListing] = await this.conn.update(commercials).set(convertedCommercialPropertyListing).where(eq(commercials.id, id)).returning();
-      const [updateListing] = await this.conn.update(commercials_json).set(convertedCommercialPropertyListing).where(eq(commercials_json.id, id)).returning();
+      return updateListing;
      return { id: updateListing.id, email: updateListing.email, ...(updateListing.data as CommercialPropertyListing) };
    } catch (error) {
      if (error instanceof ZodError) {
        const filteredErrors = error.errors
@ -323,42 +212,39 @@ export class CommercialPropertyService {
  // Images for commercial Properties
  // ##############################################################
  async deleteImage(imagePath: string, serial: string, name: string) {
-    const listing = await this.findByImagePath(imagePath, serial);
+    const listing = (await this.findByImagePath(imagePath, serial)) as unknown as CommercialPropertyListing;
    const index = listing.imageOrder.findIndex(im => im === name);
    if (index > -1) {
      listing.imageOrder.splice(index, 1);
-      await this.updateCommercialPropertyListing(listing.id, listing, null);
+      await this.updateCommercialPropertyListing(listing.id, listing);
    }
  }
  async addImage(imagePath: string, serial: string, imagename: string) {
-    const listing = await this.findByImagePath(imagePath, serial);
+    const listing = (await this.findByImagePath(imagePath, serial)) as unknown as CommercialPropertyListing;
    listing.imageOrder.push(imagename);
-    await this.updateCommercialPropertyListing(listing.id, listing, null);
+    await this.updateCommercialPropertyListing(listing.id, listing);
  }
  // #### DELETE  ########################################
  async deleteListing(id: string): Promise<void> {
-    await this.conn.delete(commercials_json).where(eq(commercials_json.id, id));
+    await this.conn.delete(commercials).where(eq(commercials.id, id));
  }
  // #### ADD Favorite ######################################
  async addFavorite(id: string, user: JwtUser): Promise<void> {
    await this.conn
      .update(commercials_json)
      .set({
        data: sql`jsonb_set(${commercials_json.data}, '{favoritesForUser}',
          coalesce((${commercials_json.data}->'favoritesForUser')::jsonb, '[]'::jsonb) || to_jsonb(${user.email}::text))`,
      })
      .where(eq(commercials_json.id, id));
  }
  // #### DELETE Favorite ###################################
  async deleteFavorite(id: string, user: JwtUser): Promise<void> {
    await this.conn
-      .update(commercials_json)
+      .update(commercials)
      .set({
-        data: sql`jsonb_set(${commercials_json.data}, '{favoritesForUser}',
+        favoritesForUser: sql`array_remove(${commercials.favoritesForUser}, ${user.username})`,
          (SELECT coalesce(jsonb_agg(elem), '[]'::jsonb)
           FROM jsonb_array_elements(coalesce(${commercials_json.data}->'favoritesForUser', '[]'::jsonb)) AS elem
           WHERE elem::text != to_jsonb(${user.email}::text)::text))`,
      })
-      .where(eq(commercials_json.id, id));
+      .where(sql`${commercials.id} = ${id}`);
  }
  // ##############################################################
  // States
  // ##############################################################
  // async getStates(): Promise<any[]> {
  //   return await this.conn
  //     .select({ state: commercials.state, count: sql<number>`count(${commercials.id})`.mapWith(Number) })
  //     .from(commercials)
  //     .groupBy(sql`${commercials.state}`)
  //     .orderBy(sql`count desc`);
  // }
 }
--- a/bizmatch-server/src/listings/listings.module.ts
+++ b/bizmatch-server/src/listings/listings.module.ts
@ -6,7 +6,6 @@ import { UserService } from '../user/user.service';
 import { BrokerListingsController } from './broker-listings.controller';
 import { BusinessListingsController } from './business-listings.controller';
 import { CommercialPropertyListingsController } from './commercial-property-listings.controller';
 import { UserListingsController } from './user-listings.controller';
 import { FirebaseAdminModule } from 'src/firebase-admin/firebase-admin.module';
 import { GeoModule } from '../geo/geo.module';
@ -17,7 +16,7 @@ import { UnknownListingsController } from './unknown-listings.controller';
@Module({
  imports: [DrizzleModule, AuthModule, GeoModule,FirebaseAdminModule],
-  controllers: [BusinessListingsController, CommercialPropertyListingsController, UnknownListingsController, BrokerListingsController, UserListingsController],
+  controllers: [BusinessListingsController, CommercialPropertyListingsController, UnknownListingsController, BrokerListingsController],
  providers: [BusinessListingService, CommercialPropertyService, FileService, UserService, BusinessListingService, CommercialPropertyService, GeoService],
  exports: [BusinessListingService, CommercialPropertyService],
 })
--- a/bizmatch-server/src/listings/user-listings.controller.ts
+++ b/bizmatch-server/src/listings/user-listings.controller.ts
@ -1,29 +0,0 @@
 import { Controller, Delete, Param, Post, Request, UseGuards } from '@nestjs/common';
 import { AuthGuard } from '../jwt-auth/auth.guard';
 import { JwtUser } from '../models/main.model';
 import { UserService } from '../user/user.service';
@Controller('listings/user')
 export class UserListingsController {
  constructor(private readonly userService: UserService) { }
  @UseGuards(AuthGuard)
  @Post('favorite/:id')
  async addFavorite(@Request() req, @Param('id') id: string) {
    await this.userService.addFavorite(id, req.user as JwtUser);
    return { success: true, message: 'Added to favorites' };
  }
  @UseGuards(AuthGuard)
  @Delete('favorite/:id')
  async deleteFavorite(@Request() req, @Param('id') id: string) {
    await this.userService.deleteFavorite(id, req.user as JwtUser);
    return { success: true, message: 'Removed from favorites' };
  }
  @UseGuards(AuthGuard)
  @Post('favorites/all')
  async getFavorites(@Request() req) {
    return await this.userService.getFavoriteUsers(req.user as JwtUser);
  }
 }
--- a/bizmatch-server/src/main.ts
+++ b/bizmatch-server/src/main.ts
@ -1,7 +1,6 @@
 import { LoggerService } from '@nestjs/common';
 import { NestFactory } from '@nestjs/core';
 import express from 'express';
 import helmet from 'helmet';
 import { WINSTON_MODULE_NEST_PROVIDER } from 'nest-winston';
 import { AppModule } from './app.module';
@ -13,9 +12,6 @@ async function bootstrap() {
  const logger = app.get<LoggerService>(WINSTON_MODULE_NEST_PROVIDER);
  app.useLogger(logger);
  //app.use('/bizmatch/payment/webhook', bodyParser.raw({ type: 'application/json' }));
  // Serve static files from pictures directory
  app.use('/pictures', express.static('pictures'));
  app.setGlobalPrefix('bizmatch');
  app.enableCors({
@ -23,37 +19,6 @@ async function bootstrap() {
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    allowedHeaders: 'Content-Type, Accept, Authorization, x-hide-loading',
  });
-
+  await app.listen(3000);
  // Security Headers with helmet
  app.use(
    helmet({
      contentSecurityPolicy: {
        directives: {
          defaultSrc: ["'self'"],
          scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'", "https://fonts.googleapis.com"],
          styleSrc: ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
          imgSrc: ["'self'", "data:", "https:", "blob:"],
          connectSrc: ["'self'", "https://api.bizmatch.net", "https://*.firebaseapp.com", "https://*.googleapis.com"],
          fontSrc: ["'self'", "https://fonts.gstatic.com", "data:"],
          objectSrc: ["'none'"],
          mediaSrc: ["'self'"],
          frameSrc: ["'self'"],
        },
      },
      crossOriginEmbedderPolicy: false, // Disable for now to avoid breaking existing functionality
      hsts: {
        maxAge: 31536000,
        includeSubDomains: true,
        preload: true,
      },
      frameguard: {
        action: 'sameorigin', // Allow same-origin framing
      },
      crossOriginOpenerPolicy: { policy: 'same-origin-allow-popups' }, // Allow popups for OAuth
      crossOriginResourcePolicy: { policy: 'cross-origin' }, // Allow cross-origin resources
    }),
  );
  await app.listen(process.env.PORT || 3001);
 }
 bootstrap();
--- a/bizmatch-server/src/models/db.model.ts
+++ b/bizmatch-server/src/models/db.model.ts
@ -34,7 +34,6 @@ export const CustomerTypeEnum = z.enum(['buyer', 'seller', 'professional']);
 export const SubscriptionTypeEnum = z.enum(['free', 'professional', 'broker']);
 export const CustomerSubTypeEnum = z.enum(['broker', 'cpa', 'attorney', 'titleCompany', 'surveyor', 'appraiser']);
 export const ListingsCategoryEnum = z.enum(['commercialProperty', 'business']);
 export const ShareCategoryEnum = z.enum(['commercialProperty', 'business', 'user']);
 export const ZodEventTypeEnum = z.enum(['view', 'print', 'email', 'facebook', 'x', 'linkedin', 'contact', 'favorite', 'emailus', 'pricing']);
 export type EventTypeEnum = z.infer<typeof ZodEventTypeEnum>;
 const PropertyTypeEnum = z.enum(['retail', 'land', 'industrial', 'office', 'mixedUse', 'multifamily', 'uncategorized']);
@ -154,10 +153,10 @@ export const GeoSchema = z
    zipCode: z.number().optional().nullable(),
  })
  .superRefine((data, ctx) => {
-    if (!data.state) {
+    if (!data.name && !data.county) {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
-        message: 'You need to select at least a state',
+        message: 'You need to select either a city or a county',
        path: ['name'],
      });
    }
@ -166,8 +165,8 @@ const phoneRegex = /^(\+1|1)?[-.\s]?\(?[2-9]\d{2}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/;
 export const UserSchema = z
  .object({
    id: z.string().uuid().optional().nullable(),
-    firstname: z.string().min(3, { message: 'First name must contain at least 2 characters' }),
+    firstname: z.string().min(2, { message: 'First name must contain at least 2 characters' }),
-    lastname: z.string().min(3, { message: 'Last name must contain at least 2 characters' }),
+    lastname: z.string().min(2, { message: 'Last name must contain at least 2 characters' }),
    email: z.string().email({ message: 'Invalid email address' }),
    phoneNumber: z.string().optional().nullable(),
    description: z.string().optional().nullable(),
@ -187,7 +186,6 @@ export const UserSchema = z
    updated: z.date().optional().nullable(),
    subscriptionId: z.string().optional().nullable(),
    subscriptionPlan: SubscriptionTypeEnum.optional().nullable(),
    favoritesForUser: z.array(z.string()),
    showInDirectory: z.boolean(),
  })
  .superRefine((data, ctx) => {
@ -199,13 +197,7 @@ export const UserSchema = z
          path: ['customerSubType'],
        });
      }
-      if (!data.companyName || data.companyName.length < 6) {
+
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
          message: 'Company Name must contain at least 6 characters for professional customers',
          path: ['companyName'],
        });
      }
      if (!data.phoneNumber || !phoneRegex.test(data.phoneNumber)) {
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
@ -260,62 +252,35 @@ export type AreasServed = z.infer<typeof AreasServedSchema>;
 export type LicensedIn = z.infer<typeof LicensedInSchema>;
 export type User = z.infer<typeof UserSchema>;
-export const BusinessListingSchema = z
+export const BusinessListingSchema = z.object({
-  .object({
+  id: z.string().uuid().optional().nullable(),
-    id: z.string().uuid().optional().nullable(),
+  email: z.string().email(),
-    email: z.string().email(),
+  type: z.string().refine(val => TypeEnum.safeParse(val).success, {
-    type: z.string().refine(val => TypeEnum.safeParse(val).success, {
+    message: 'Invalid type. Must be one of: ' + TypeEnum.options.join(', '),
-      message: 'Invalid type. Must be one of: ' + TypeEnum.options.join(', '),
+  }),
-    }),
+  title: z.string().min(10),
-    title: z.string().min(10),
+  description: z.string().min(10),
-    description: z.string().min(10),
+  location: GeoSchema,
-    location: GeoSchema,
+  price: z.number().positive().max(1000000000),
-    price: z.number().positive().optional().nullable(),
+  favoritesForUser: z.array(z.string()),
-    favoritesForUser: z.array(z.string()),
+  draft: z.boolean(),
-    draft: z.boolean(),
+  listingsCategory: ListingsCategoryEnum,
-    listingsCategory: ListingsCategoryEnum,
+  realEstateIncluded: z.boolean().optional().nullable(),
-    realEstateIncluded: z.boolean().optional().nullable(),
+  leasedLocation: z.boolean().optional().nullable(),
-    leasedLocation: z.boolean().optional().nullable(),
+  franchiseResale: z.boolean().optional().nullable(),
-    franchiseResale: z.boolean().optional().nullable(),
+  salesRevenue: z.number().positive().max(100000000),
-    salesRevenue: z.number().positive().nullable(),
+  cashFlow: z.number().positive().max(100000000),
-    cashFlow: z.number().optional().nullable(),
+  supportAndTraining: z.string().min(5),
-    ffe: z.number().optional().nullable(),
+  employees: z.number().int().positive().max(100000).optional().nullable(),
-    inventory: z.number().optional().nullable(),
+  established: z.number().int().min(1800).max(2030).optional().nullable(),
-    supportAndTraining: z.string().min(5).optional().nullable(),
+  internalListingNumber: z.number().int().positive().optional().nullable(),
-    employees: z.number().int().positive().max(100000).optional().nullable(),
+  reasonForSale: z.string().min(5).optional().nullable(),
-    established: z.number().int().min(1).max(250).optional().nullable(),
+  brokerLicencing: z.string().optional().nullable(),
-    internalListingNumber: z.number().int().positive().optional().nullable(),
+  internals: z.string().min(5).optional().nullable(),
-    reasonForSale: z.string().min(5).optional().nullable(),
+  imageName: z.string().optional().nullable(),
-    brokerLicencing: z.string().optional().nullable(),
+  created: z.date(),
-    internals: z.string().min(5).optional().nullable(),
+  updated: z.date(),
-    imageName: z.string().optional().nullable(),
+});
    slug: z.string().optional().nullable(),
    created: z.date(),
    updated: z.date(),
  })
  .superRefine((data, ctx) => {
    if (data.price && data.price > 1000000000) {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: 'Price must less than or equal $1,000,000,000',
        path: ['price'],
      });
    }
    if (data.salesRevenue && data.salesRevenue > 100000000) {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: 'SalesRevenue must less than or equal $100,000,000',
        path: ['salesRevenue'],
      });
    }
    if (data.cashFlow && data.cashFlow > 100000000) {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: 'CashFlow must less than or equal $100,000,000',
        path: ['cashFlow'],
      });
    }
  });
 export type BusinessListing = z.infer<typeof BusinessListingSchema>;
 export const CommercialPropertyListingSchema = z
@ -329,26 +294,16 @@ export const CommercialPropertyListingSchema = z
    title: z.string().min(10),
    description: z.string().min(10),
    location: GeoSchema,
-    price: z.number().positive().optional().nullable(),
+    price: z.number().positive().max(1000000000),
    favoritesForUser: z.array(z.string()),
    listingsCategory: ListingsCategoryEnum,
    internalListingNumber: z.number().int().positive().optional().nullable(),
    draft: z.boolean(),
    imageOrder: z.array(z.string()),
    imagePath: z.string().nullable().optional(),
    slug: z.string().optional().nullable(),
    created: z.date(),
    updated: z.date(),
  })
-  .superRefine((data, ctx) => {
+  .strict();
    if (data.price && data.price > 1000000000) {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: 'Price must less than or equal $1,000,000,000',
        path: ['price'],
      });
    }
  });
 export type CommercialPropertyListing = z.infer<typeof CommercialPropertyListingSchema>;
@ -371,7 +326,7 @@ export const ShareByEMailSchema = z.object({
  listingTitle: z.string().optional().nullable(),
  url: z.string().url({ message: 'Invalid URL format' }).optional().nullable(),
  id: z.string().optional().nullable(),
-  type: ShareCategoryEnum,
+  type: ListingsCategoryEnum,
 });
 export type ShareByEMail = z.infer<typeof ShareByEMailSchema>;
@ -388,6 +343,6 @@ export const ListingEventSchema = z.object({
  locationLat: z.string().max(20).optional().nullable(), // Latitude, als String
  locationLng: z.string().max(20).optional().nullable(), // Longitude, als String
  referrer: z.string().max(255).optional().nullable(), // Referrer URL, optional
-  additionalData: z.record(z.string(), z.any()).optional().nullable(), // JSON für zusätzliche Daten, z.B. soziale Medien, optional
+  additionalData: z.record(z.any()).optional().nullable(), // JSON für zusätzliche Daten, z.B. soziale Medien, optional
 });
 export type ListingEvent = z.infer<typeof ListingEventSchema>;
--- a/bizmatch-server/src/models/main.model.ts
+++ b/bizmatch-server/src/models/main.model.ts
@ -1,3 +1,4 @@
 import Stripe from 'stripe';
 import { BusinessListing, CommercialPropertyListing, Sender, SortByOptions, SortByTypes, User } from './db.model';
 import { State } from './server.model';
@ -68,11 +69,11 @@ export interface ListCriteria {
  state: string;
  city: GeoResult;
  prompt: string;
  sortBy: SortByOptions;
  searchType: 'exact' | 'radius';
  // radius: '5' | '20' | '50' | '100' | '200' | '300' | '400' | '500';
  radius: number;
  criteriaType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings';
  sortBy?: SortByOptions;
 }
 export interface BusinessListingCriteria extends ListCriteria {
  minPrice: number;
@ -83,20 +84,19 @@ export interface BusinessListingCriteria extends ListCriteria {
  maxCashFlow: number;
  minNumberEmployees: number;
  maxNumberEmployees: number;
-  establishedMin: number;
+  establishedSince: number;
  establishedUntil: number;
  realEstateChecked: boolean;
  leasedLocation: boolean;
  franchiseResale: boolean;
  title: string;
  brokerName: string;
  email: string;
  criteriaType: 'businessListings';
 }
 export interface CommercialPropertyListingCriteria extends ListCriteria {
  minPrice: number;
  maxPrice: number;
  title: string;
  brokerName: string;
  criteriaType: 'commercialPropertyListings';
 }
 export interface UserListingCriteria extends ListCriteria {
@ -123,9 +123,11 @@ export interface KeycloakUser {
  attributes?: Attributes;
 }
 export interface JwtUser {
-  email: string;
+  userId: string;
-  role: string;
+  username: string;
-  uid: string;
+  firstname: string;
  lastname: string;
  roles: string[];
 }
 interface Attributes {
  [key: string]: any;
@ -359,8 +361,6 @@ export function createDefaultUser(email: string, firstname: string, lastname: st
    updated: new Date(),
    subscriptionId: null,
    subscriptionPlan: subscriptionPlan,
    favoritesForUser: [],
    showInDirectory: false,
  };
 }
 export function createDefaultCommercialPropertyListing(): CommercialPropertyListing {
@ -410,6 +410,8 @@ export function createDefaultBusinessListing(): BusinessListing {
    listingsCategory: 'business',
  };
 }
 export type StripeSubscription = Stripe.Subscription;
 export type StripeUser = Stripe.Customer;
 export type IpInfo = {
  ip: string;
  city: string;
@ -423,6 +425,8 @@ export type IpInfo = {
 export interface CombinedUser {
  keycloakUser?: KeycloakUser;
  appUser?: User;
  stripeUser?: StripeUser;
  stripeSubscription?: StripeSubscription;
 }
 export interface RealIpInfo {
  ip: string;
--- a/bizmatch-server/src/payment/payment.controller.ts
+++ b/bizmatch-server/src/payment/payment.controller.ts
@ -0,0 +1,76 @@
 import { Body, Controller, Get, HttpException, HttpStatus, Param, Post, Req, Res, UseGuards } from '@nestjs/common';
 import { Request, Response } from 'express';
 import { OptionalAuthGuard } from 'src/jwt-auth/optional-auth.guard';
 import { Checkout } from 'src/models/main.model';
 import Stripe from 'stripe';
 import { PaymentService } from './payment.service';
@Controller('payment')
 export class PaymentController {
  constructor(private readonly paymentService: PaymentService) {}
  // @Post()
  // async createSubscription(@Body() subscriptionData: any) {
  //   return this.paymentService.createSubscription(subscriptionData);
  // }
  // @UseGuards(AdminAuthGuard)
  // @Get('user/all')
  // async getAllStripeCustomer(): Promise<Stripe.Customer[]> {
  //   return await this.paymentService.getAllStripeCustomer();
  // }
  // @UseGuards(AdminAuthGuard)
  // @Get('subscription/all')
  // async getAllStripeSubscriptions(): Promise<Stripe.Subscription[]> {
  //   return await this.paymentService.getAllStripeSubscriptions();
  // }
  // @UseGuards(AdminAuthGuard)
  // @Get('paymentmethod/:email')
  // async getStripePaymentMethods(@Param('email') email: string): Promise<Stripe.PaymentMethod[]> {
  //   return await this.paymentService.getStripePaymentMethod(email);
  // }
  @UseGuards(OptionalAuthGuard)
  @Post('create-checkout-session')
  async createCheckoutSession(@Body() checkout: Checkout) {
    return await this.paymentService.createCheckoutSession(checkout);
  }
  @Post('webhook')
  async handleWebhook(@Req() req: Request, @Res() res: Response): Promise<void> {
    const signature = req.headers['stripe-signature'] as string;
    try {
      // Konvertieren Sie den req.body Buffer in einen lesbaren String
      const payload = req.body instanceof Buffer ? req.body.toString('utf8') : req.body;
      const event = await this.paymentService.constructEvent(payload, signature);
      // const event = await this.paymentService.constructEvent(req.body, signature);
      if (event.type === 'checkout.session.completed') {
        await this.paymentService.handleCheckoutSessionCompleted(event.data.object as Stripe.Checkout.Session);
      }
      res.status(200).send('Webhook received');
    } catch (error) {
      console.error(`Webhook Error: ${error.message}`);
      throw new HttpException('Webhook Error', HttpStatus.BAD_REQUEST);
    }
  }
  @UseGuards(OptionalAuthGuard)
  @Get('subscriptions/:email')
  async findSubscriptionsById(@Param('email') email: string): Promise<any> {
    return await this.paymentService.getSubscription(email);
  }
  /**
   * Endpoint zum Löschen eines Stripe-Kunden.
   * Beispiel: DELETE /stripe/customer/cus_12345
   */
  // @UseGuards(AdminAuthGuard)
  // @Delete('customer/:id')
  // @HttpCode(HttpStatus.NO_CONTENT)
  // async deleteCustomer(@Param('id') customerId: string): Promise<void> {
  //   await this.paymentService.deleteCustomerCompletely(customerId);
  // }
 }
--- a/bizmatch-server/src/payment/payment.module.ts
+++ b/bizmatch-server/src/payment/payment.module.ts
@ -0,0 +1,20 @@
 import { Module } from '@nestjs/common';
 import { AuthModule } from '../auth/auth.module';
 import { FirebaseAdminModule } from 'src/firebase-admin/firebase-admin.module';
 import { DrizzleModule } from '../drizzle/drizzle.module';
 import { FileService } from '../file/file.service';
 import { GeoService } from '../geo/geo.service';
 import { MailModule } from '../mail/mail.module';
 import { MailService } from '../mail/mail.service';
 import { UserModule } from '../user/user.module';
 import { UserService } from '../user/user.service';
 import { PaymentController } from './payment.controller';
 import { PaymentService } from './payment.service';
@Module({
  imports: [DrizzleModule, UserModule, MailModule, AuthModule,FirebaseAdminModule],
  providers: [PaymentService, UserService, MailService, FileService, GeoService],
  controllers: [PaymentController],
 })
 export class PaymentModule {}
--- a/bizmatch-server/src/payment/payment.service.ts
+++ b/bizmatch-server/src/payment/payment.service.ts
@ -0,0 +1,216 @@
 import { BadRequestException, Inject, Injectable, InternalServerErrorException } from '@nestjs/common';
 import { NodePgDatabase } from 'drizzle-orm/node-postgres/driver';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import Stripe from 'stripe';
 import { Logger } from 'winston';
 import * as schema from '../drizzle/schema';
 import { PG_CONNECTION } from '../drizzle/schema';
 import { MailService } from '../mail/mail.service';
 import { Checkout } from '../models/main.model';
 import { UserService } from '../user/user.service';
 export interface BillingAddress {
  country: string;
  state: string;
 }
@Injectable()
 export class PaymentService {
  private stripe: Stripe;
  constructor(
    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
    private readonly userService: UserService,
    private readonly mailService: MailService,
  ) {
    this.stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
      apiVersion: '2024-06-20',
    });
  }
  async createCheckoutSession(checkout: Checkout) {
    try {
      let customerId;
      const existingCustomers = await this.stripe.customers.list({
        email: checkout.email,
        limit: 1,
      });
      if (existingCustomers.data.length > 0) {
        // Kunde existiert
        customerId = existingCustomers.data[0].id;
      } else {
        // Kunde existiert nicht, neuen Kunden erstellen
        const newCustomer = await this.stripe.customers.create({
          email: checkout.email,
          name: checkout.name,
          shipping: {
            name: checkout.name,
            address: {
              city: '',
              state: '',
              country: 'US',
            },
          },
        });
        customerId = newCustomer.id;
      }
      const price = await this.stripe.prices.retrieve(checkout.priceId);
      if (price.product) {
        const product = await this.stripe.products.retrieve(price.product as string);
        const session = await this.stripe.checkout.sessions.create({
          mode: 'subscription',
          payment_method_types: ['card'],
          line_items: [
            {
              price: checkout.priceId,
              quantity: 1,
            },
          ],
          success_url: `${process.env.WEB_HOST}/success`,
          cancel_url: `${process.env.WEB_HOST}/pricing`,
          customer: customerId,
          shipping_address_collection: {
            allowed_countries: ['US'],
          },
          client_reference_id: btoa(checkout.name),
          locale: 'en',
          subscription_data: {
            trial_end: Math.floor(new Date().setMonth(new Date().getMonth() + 3) / 1000),
            metadata: { plan: product.name },
          },
        });
        return session;
      } else {
        return null;
      }
    } catch (e) {
      throw new BadRequestException(`error during checkout: ${e}`);
    }
  }
  async constructEvent(body: string | Buffer, signature: string) {
    return this.stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET!);
  }
  async handleCheckoutSessionCompleted(session: Stripe.Checkout.Session): Promise<void> {
    // try {
    //   const keycloakUsers = await this.authService.getUsers();
    //   const keycloakUser = keycloakUsers.find(u => u.email === session.customer_details.email);
    //   const user = await this.userService.getUserByMail(session.customer_details.email, {
    //     userId: keycloakUser.id,
    //     firstname: keycloakUser.firstName,
    //     lastname: keycloakUser.lastName,
    //     username: keycloakUser.email,
    //     roles: [],
    //   });
    //   user.subscriptionId = session.subscription as string;
    //   const subscription = await this.stripe.subscriptions.retrieve(user.subscriptionId);
    //   user.customerType = 'professional';
    //   if (subscription.metadata['plan'] === 'Broker Plan') {
    //     user.customerSubType = 'broker';
    //   }
    //   user.subscriptionPlan = subscription.metadata['plan'] === 'Broker Plan' ? 'broker' : 'professional'; //session.metadata['subscriptionPlan'] as 'free' | 'professional' | 'broker';
    //   await this.userService.saveUser(user, false);
    //   await this.mailService.sendSubscriptionConfirmation(user);
    // } catch (error) {
    //   this.logger.error(error);
    // }
  }
  async getSubscription(email: string): Promise<Stripe.Subscription[]> {
    const existingCustomers = await this.stripe.customers.list({
      email: email,
      limit: 1,
    });
    if (existingCustomers.data.length > 0) {
      const subscriptions = await this.stripe.subscriptions.list({
        customer: existingCustomers.data[0].id,
        status: 'all', // Optional: Gibt Abos in allen Status zurück, wie 'active', 'canceled', etc.
        limit: 20, // Optional: Begrenze die Anzahl der zurückgegebenen Abonnements
      });
      return subscriptions.data.filter(s => s.status === 'active' || s.status === 'trialing');
    } else {
      return [];
    }
  }
  /**
   * Ruft alle Stripe-Kunden ab, indem die Paginierung gehandhabt wird.
   * @returns Ein Array von Stripe.Customer Objekten.
   */
  async getAllStripeCustomer(): Promise<Stripe.Customer[]> {
    const allCustomers: Stripe.Customer[] = [];
    let hasMore = true;
    let startingAfter: string | undefined = undefined;
    try {
      while (hasMore) {
        const response = await this.stripe.customers.list({
          limit: 100, // Maximale Anzahl pro Anfrage
          starting_after: startingAfter,
        });
        allCustomers.push(...response.data);
        hasMore = response.has_more;
        if (hasMore && response.data.length > 0) {
          startingAfter = response.data[response.data.length - 1].id;
        }
      }
      return allCustomers;
    } catch (error) {
      console.error('Fehler beim Abrufen der Stripe-Kunden:', error);
      throw new Error('Kunden konnten nicht abgerufen werden.');
    }
  }
  async getAllStripeSubscriptions(): Promise<Stripe.Subscription[]> {
    const allSubscriptions: Stripe.Subscription[] = [];
    const response = await this.stripe.subscriptions.list({
      limit: 100,
    });
    allSubscriptions.push(...response.data);
    return allSubscriptions;
  }
  async getStripePaymentMethod(email: string): Promise<Stripe.PaymentMethod[]> {
    const existingCustomers = await this.stripe.customers.list({
      email: email,
      limit: 1,
    });
    const allPayments: Stripe.PaymentMethod[] = [];
    if (existingCustomers.data.length > 0) {
      const response = await this.stripe.paymentMethods.list({
        customer: existingCustomers.data[0].id,
        limit: 10,
      });
      allPayments.push(...response.data);
    }
    return allPayments;
  }
  async deleteCustomerCompletely(customerId: string): Promise<void> {
    try {
      // 1. Abonnements kündigen und löschen
      const subscriptions = await this.stripe.subscriptions.list({
        customer: customerId,
        limit: 100,
      });
      for (const subscription of subscriptions.data) {
        await this.stripe.subscriptions.cancel(subscription.id);
        this.logger.info(`Abonnement ${subscription.id} gelöscht.`);
      }
      // 2. Zahlungsmethoden entfernen
      const paymentMethods = await this.stripe.paymentMethods.list({
        customer: customerId,
        type: 'card',
      });
      for (const paymentMethod of paymentMethods.data) {
        await this.stripe.paymentMethods.detach(paymentMethod.id);
        this.logger.info(`Zahlungsmethode ${paymentMethod.id} entfernt.`);
      }
      // 4. Kunden löschen
      await this.stripe.customers.del(customerId);
      this.logger.info(`Kunde ${customerId} erfolgreich gelöscht.`);
    } catch (error) {
      this.logger.error(`Fehler beim Löschen des Kunden ${customerId}:`, error);
      throw new InternalServerErrorException('Fehler beim Löschen des Stripe-Kunden.');
    }
  }
 }
--- a/bizmatch-server/src/scripts/debug-favorites.ts
+++ b/bizmatch-server/src/scripts/debug-favorites.ts
@ -1,60 +0,0 @@
 import { drizzle } from 'drizzle-orm/node-postgres';
 import { Client } from 'pg';
 import * as schema from '../drizzle/schema';
 import { sql } from 'drizzle-orm';
 import * as dotenv from 'dotenv';
 dotenv.config();
 const client = new Client({
    connectionString: process.env.PG_CONNECTION,
 });
 async function main() {
    await client.connect();
    const db = drizzle(client, { schema });
    const testEmail = 'knuth.timo@gmail.com';
    const targetEmail = 'target.user@example.com';
    console.log('--- Starting Debug Script ---');
    // 1. Simulate finding a user to favorite (using a dummy or existing one)
    // For safety, let's just query existing users to see if any have favorites set
    const usersWithFavorites = await db.select({
        id: schema.users_json.id,
        email: schema.users_json.email,
        favorites: sql`${schema.users_json.data}->'favoritesForUser'`
    }).from(schema.users_json);
    console.log(`Found ${usersWithFavorites.length} users.`);
    const usersWithAnyFavorites = usersWithFavorites.filter(u => u.favorites !== null);
    console.log(`Users with 'favoritesForUser' field:`, JSON.stringify(usersWithAnyFavorites, null, 2));
    // 2. Test the specific WHERE clause used in the service
    // .where(sql`${schema.users_json.data}->'favoritesForUser' @> ${JSON.stringify([user.email])}::jsonb`);
    console.log(`Testing query for email: ${testEmail}`);
    try {
        const result = await db
            .select({
                id: schema.users_json.id,
                email: schema.users_json.email
            })
            .from(schema.users_json)
            .where(sql`${schema.users_json.data}->'favoritesForUser' @> ${JSON.stringify([testEmail])}::jsonb`);
        console.log('Query Result:', result);
    } catch (e) {
        console.error('Query Failed:', e);
    }
    await client.end();
 }
 main().catch(console.error);
 //test
--- a/bizmatch-server/src/select-options/select-options.service.ts
+++ b/bizmatch-server/src/select-options/select-options.service.ts
@ -5,7 +5,7 @@ import { ImageType, KeyValue, KeyValueAsSortBy, KeyValueStyle } from '../models/
 export class SelectOptionsService {
  constructor() {}
  public typesOfBusiness: Array<KeyValueStyle> = [
-    { name: 'Automotive', value: 'automotive', oldValue: '1', icon: 'fa-solid fa-car', textColorClass: 'text-green-500' },
+    { name: 'Automotive', value: 'automotive', oldValue: '1', icon: 'fa-solid fa-car', textColorClass: 'text-green-400' },
    { name: 'Industrial Services', value: 'industrialServices', oldValue: '2', icon: 'fa-solid fa-industry', textColorClass: 'text-yellow-400' },
    { name: 'Food and Restaurant', value: 'foodAndRestaurant', oldValue: '13', icon: 'fa-solid fa-utensils', textColorClass: 'text-amber-700' },
    { name: 'Real Estate', value: 'realEstate', oldValue: '3', icon: 'fa-solid fa-building', textColorClass: 'text-blue-400' },
--- a/bizmatch-server/src/sitemap/sitemap.controller.ts
+++ b/bizmatch-server/src/sitemap/sitemap.controller.ts
@ -1,62 +0,0 @@
 import { Controller, Get, Header, Param, ParseIntPipe } from '@nestjs/common';
 import { SitemapService } from './sitemap.service';
@Controller()
 export class SitemapController {
  constructor(private readonly sitemapService: SitemapService) { }
  /**
   * Main sitemap index - lists all sitemap files
   * Route: /sitemap.xml
   */
  @Get('sitemap.xml')
  @Header('Content-Type', 'application/xml')
  @Header('Cache-Control', 'public, max-age=3600')
  async getSitemapIndex(): Promise<string> {
    return await this.sitemapService.generateSitemapIndex();
  }
  /**
   * Static pages sitemap
   * Route: /sitemap/static.xml
   */
  @Get('sitemap/static.xml')
  @Header('Content-Type', 'application/xml')
  @Header('Cache-Control', 'public, max-age=3600')
  async getStaticSitemap(): Promise<string> {
    return await this.sitemapService.generateStaticSitemap();
  }
  /**
   * Business listings sitemap (paginated)
   * Route: /sitemap/business-1.xml, /sitemap/business-2.xml, etc.
   */
  @Get('sitemap/business-:page.xml')
  @Header('Content-Type', 'application/xml')
  @Header('Cache-Control', 'public, max-age=3600')
  async getBusinessSitemap(@Param('page', ParseIntPipe) page: number): Promise<string> {
    return await this.sitemapService.generateBusinessSitemap(page);
  }
  /**
   * Commercial property sitemap (paginated)
   * Route: /sitemap/commercial-1.xml, /sitemap/commercial-2.xml, etc.
   */
  @Get('sitemap/commercial-:page.xml')
  @Header('Content-Type', 'application/xml')
  @Header('Cache-Control', 'public, max-age=3600')
  async getCommercialSitemap(@Param('page', ParseIntPipe) page: number): Promise<string> {
    return await this.sitemapService.generateCommercialSitemap(page);
  }
  /**
   * Broker profiles sitemap (paginated)
   * Route: /sitemap/brokers-1.xml, /sitemap/brokers-2.xml, etc.
   */
  @Get('sitemap/brokers-:page.xml')
  @Header('Content-Type', 'application/xml')
  @Header('Cache-Control', 'public, max-age=3600')
  async getBrokerSitemap(@Param('page', ParseIntPipe) page: number): Promise<string> {
    return await this.sitemapService.generateBrokerSitemap(page);
  }
 }
--- a/bizmatch-server/src/sitemap/sitemap.module.ts
+++ b/bizmatch-server/src/sitemap/sitemap.module.ts
@ -1,12 +0,0 @@
 import { Module } from '@nestjs/common';
 import { SitemapController } from './sitemap.controller';
 import { SitemapService } from './sitemap.service';
 import { DrizzleModule } from '../drizzle/drizzle.module';
@Module({
  imports: [DrizzleModule],
  controllers: [SitemapController],
  providers: [SitemapService],
  exports: [SitemapService],
 })
 export class SitemapModule {}
--- a/bizmatch-server/src/sitemap/sitemap.service.ts
+++ b/bizmatch-server/src/sitemap/sitemap.service.ts
@ -1,362 +0,0 @@
 import { Inject, Injectable } from '@nestjs/common';
 import { eq, sql } from 'drizzle-orm';
 import { NodePgDatabase } from 'drizzle-orm/node-postgres';
 import * as schema from '../drizzle/schema';
 import { PG_CONNECTION } from '../drizzle/schema';
 interface SitemapUrl {
  loc: string;
  lastmod?: string;
  changefreq?: 'always' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'never';
  priority?: number;
 }
 interface SitemapIndexEntry {
  loc: string;
  lastmod?: string;
 }
@Injectable()
 export class SitemapService {
  private readonly baseUrl = 'https://www.bizmatch.net';
  private readonly URLS_PER_SITEMAP = 10000; // Google best practice
  constructor(@Inject(PG_CONNECTION) private readonly db: NodePgDatabase<typeof schema>) { }
  /**
   * Generate sitemap index (main sitemap.xml)
   * Lists all sitemap files: static, business-1, business-2, commercial-1, etc.
   */
  async generateSitemapIndex(): Promise<string> {
    const sitemaps: SitemapIndexEntry[] = [];
    // Add static pages sitemap
    sitemaps.push({
      loc: `${this.baseUrl}/bizmatch/sitemap/static.xml`,
      lastmod: this.formatDate(new Date()),
    });
    // Count business listings
    const businessCount = await this.getBusinessListingsCount();
    const businessPages = Math.ceil(businessCount / this.URLS_PER_SITEMAP) || 1;
    for (let page = 1; page <= businessPages; page++) {
      sitemaps.push({
        loc: `${this.baseUrl}/bizmatch/sitemap/business-${page}.xml`,
        lastmod: this.formatDate(new Date()),
      });
    }
    // Count commercial property listings
    const commercialCount = await this.getCommercialPropertiesCount();
    const commercialPages = Math.ceil(commercialCount / this.URLS_PER_SITEMAP) || 1;
    for (let page = 1; page <= commercialPages; page++) {
      sitemaps.push({
        loc: `${this.baseUrl}/bizmatch/sitemap/commercial-${page}.xml`,
        lastmod: this.formatDate(new Date()),
      });
    }
    // Count broker profiles
    const brokerCount = await this.getBrokerProfilesCount();
    const brokerPages = Math.ceil(brokerCount / this.URLS_PER_SITEMAP) || 1;
    for (let page = 1; page <= brokerPages; page++) {
      sitemaps.push({
        loc: `${this.baseUrl}/bizmatch/sitemap/brokers-${page}.xml`,
        lastmod: this.formatDate(new Date()),
      });
    }
    return this.buildXmlSitemapIndex(sitemaps);
  }
  /**
   * Generate static pages sitemap
   */
  async generateStaticSitemap(): Promise<string> {
    const urls = this.getStaticPageUrls();
    return this.buildXmlSitemap(urls);
  }
  /**
   * Generate business listings sitemap (paginated)
   */
  async generateBusinessSitemap(page: number): Promise<string> {
    const offset = (page - 1) * this.URLS_PER_SITEMAP;
    const urls = await this.getBusinessListingUrls(offset, this.URLS_PER_SITEMAP);
    return this.buildXmlSitemap(urls);
  }
  /**
   * Generate commercial property sitemap (paginated)
   */
  async generateCommercialSitemap(page: number): Promise<string> {
    const offset = (page - 1) * this.URLS_PER_SITEMAP;
    const urls = await this.getCommercialPropertyUrls(offset, this.URLS_PER_SITEMAP);
    return this.buildXmlSitemap(urls);
  }
  /**
   * Build XML sitemap index
   */
  private buildXmlSitemapIndex(sitemaps: SitemapIndexEntry[]): string {
    const sitemapElements = sitemaps
      .map(sitemap => {
        let element = `  <sitemap>\n    <loc>${sitemap.loc}</loc>`;
        if (sitemap.lastmod) {
          element += `\n    <lastmod>${sitemap.lastmod}</lastmod>`;
        }
        element += '\n  </sitemap>';
        return element;
      })
      .join('\n');
    return `<?xml version="1.0" encoding="UTF-8"?>
 <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 ${sitemapElements}
 </sitemapindex>`;
  }
  /**
   * Build XML sitemap string
   */
  private buildXmlSitemap(urls: SitemapUrl[]): string {
    const urlElements = urls.map(url => this.buildUrlElement(url)).join('\n  ');
    return `<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  ${urlElements}
 </urlset>`;
  }
  /**
   * Build single URL element
   */
  private buildUrlElement(url: SitemapUrl): string {
    let element = `<url>\n    <loc>${url.loc}</loc>`;
    if (url.lastmod) {
      element += `\n    <lastmod>${url.lastmod}</lastmod>`;
    }
    if (url.changefreq) {
      element += `\n    <changefreq>${url.changefreq}</changefreq>`;
    }
    if (url.priority !== undefined) {
      element += `\n    <priority>${url.priority.toFixed(1)}</priority>`;
    }
    element += '\n  </url>';
    return element;
  }
  /**
   * Get static page URLs
   */
  private getStaticPageUrls(): SitemapUrl[] {
    return [
      {
        loc: `${this.baseUrl}/`,
        changefreq: 'daily',
        priority: 1.0,
      },
      {
        loc: `${this.baseUrl}/home`,
        changefreq: 'daily',
        priority: 1.0,
      },
      {
        loc: `${this.baseUrl}/businessListings`,
        changefreq: 'daily',
        priority: 0.9,
      },
      {
        loc: `${this.baseUrl}/commercialPropertyListings`,
        changefreq: 'daily',
        priority: 0.9,
      },
      {
        loc: `${this.baseUrl}/brokerListings`,
        changefreq: 'daily',
        priority: 0.8,
      },
      {
        loc: `${this.baseUrl}/terms-of-use`,
        changefreq: 'monthly',
        priority: 0.5,
      },
      {
        loc: `${this.baseUrl}/privacy-statement`,
        changefreq: 'monthly',
        priority: 0.5,
      },
    ];
  }
  /**
   * Count business listings (non-draft)
   */
  private async getBusinessListingsCount(): Promise<number> {
    try {
      const result = await this.db
        .select({ count: sql<number>`count(*)` })
        .from(schema.businesses_json)
        .where(sql`(${schema.businesses_json.data}->>'draft')::boolean IS NOT TRUE`);
      return Number(result[0]?.count || 0);
    } catch (error) {
      console.error('Error counting business listings:', error);
      return 0;
    }
  }
  /**
   * Count commercial properties (non-draft)
   */
  private async getCommercialPropertiesCount(): Promise<number> {
    try {
      const result = await this.db
        .select({ count: sql<number>`count(*)` })
        .from(schema.commercials_json)
        .where(sql`(${schema.commercials_json.data}->>'draft')::boolean IS NOT TRUE`);
      return Number(result[0]?.count || 0);
    } catch (error) {
      console.error('Error counting commercial properties:', error);
      return 0;
    }
  }
  /**
   * Get business listing URLs from database (paginated, slug-based)
   */
  private async getBusinessListingUrls(offset: number, limit: number): Promise<SitemapUrl[]> {
    try {
      const listings = await this.db
        .select({
          id: schema.businesses_json.id,
          slug: sql<string>`${schema.businesses_json.data}->>'slug'`,
          updated: sql<Date>`(${schema.businesses_json.data}->>'updated')::timestamptz`,
          created: sql<Date>`(${schema.businesses_json.data}->>'created')::timestamptz`,
        })
        .from(schema.businesses_json)
        .where(sql`(${schema.businesses_json.data}->>'draft')::boolean IS NOT TRUE`)
        .limit(limit)
        .offset(offset);
      return listings.map(listing => {
        const urlSlug = listing.slug || listing.id;
        return {
          loc: `${this.baseUrl}/business/${urlSlug}`,
          lastmod: this.formatDate(listing.updated || listing.created),
          changefreq: 'weekly' as const,
          priority: 0.8,
        };
      });
    } catch (error) {
      console.error('Error fetching business listings for sitemap:', error);
      return [];
    }
  }
  /**
   * Get commercial property URLs from database (paginated, slug-based)
   */
  private async getCommercialPropertyUrls(offset: number, limit: number): Promise<SitemapUrl[]> {
    try {
      const properties = await this.db
        .select({
          id: schema.commercials_json.id,
          slug: sql<string>`${schema.commercials_json.data}->>'slug'`,
          updated: sql<Date>`(${schema.commercials_json.data}->>'updated')::timestamptz`,
          created: sql<Date>`(${schema.commercials_json.data}->>'created')::timestamptz`,
        })
        .from(schema.commercials_json)
        .where(sql`(${schema.commercials_json.data}->>'draft')::boolean IS NOT TRUE`)
        .limit(limit)
        .offset(offset);
      return properties.map(property => {
        const urlSlug = property.slug || property.id;
        return {
          loc: `${this.baseUrl}/commercial-property/${urlSlug}`,
          lastmod: this.formatDate(property.updated || property.created),
          changefreq: 'weekly' as const,
          priority: 0.8,
        };
      });
    } catch (error) {
      console.error('Error fetching commercial properties for sitemap:', error);
      return [];
    }
  }
  /**
   * Format date to ISO 8601 format (YYYY-MM-DD)
   */
  private formatDate(date: Date | string): string {
    if (!date) return new Date().toISOString().split('T')[0];
    const d = typeof date === 'string' ? new Date(date) : date;
    return d.toISOString().split('T')[0];
  }
  /**
   * Generate broker profiles sitemap (paginated)
   */
  async generateBrokerSitemap(page: number): Promise<string> {
    const offset = (page - 1) * this.URLS_PER_SITEMAP;
    const urls = await this.getBrokerProfileUrls(offset, this.URLS_PER_SITEMAP);
    return this.buildXmlSitemap(urls);
  }
  /**
   * Count broker profiles (professionals with showInDirectory=true)
   */
  private async getBrokerProfilesCount(): Promise<number> {
    try {
      const result = await this.db
        .select({ count: sql<number>`count(*)` })
        .from(schema.users_json)
        .where(sql`
          (${schema.users_json.data}->>'customerType') = 'professional'
          AND (${schema.users_json.data}->>'showInDirectory')::boolean IS TRUE
        `);
      return Number(result[0]?.count || 0);
    } catch (error) {
      console.error('Error counting broker profiles:', error);
      return 0;
    }
  }
  /**
   * Get broker profile URLs from database (paginated)
   */
  private async getBrokerProfileUrls(offset: number, limit: number): Promise<SitemapUrl[]> {
    try {
      const brokers = await this.db
        .select({
          email: schema.users_json.email,
          updated: sql<Date>`(${schema.users_json.data}->>'updated')::timestamptz`,
          created: sql<Date>`(${schema.users_json.data}->>'created')::timestamptz`,
        })
        .from(schema.users_json)
        .where(sql`
          (${schema.users_json.data}->>'customerType') = 'professional'
          AND (${schema.users_json.data}->>'showInDirectory')::boolean IS TRUE
        `)
        .limit(limit)
        .offset(offset);
      return brokers.map(broker => ({
        loc: `${this.baseUrl}/details-user/${encodeURIComponent(broker.email)}`,
        lastmod: this.formatDate(broker.updated || broker.created),
        changefreq: 'weekly' as const,
        priority: 0.7,
      }));
    } catch (error) {
      console.error('Error fetching broker profiles for sitemap:', error);
      return [];
    }
  }
 }
--- a/bizmatch-server/src/user/user.service.ts
+++ b/bizmatch-server/src/user/user.service.ts
@ -1,5 +1,5 @@
 import { Inject, Injectable } from '@nestjs/common';
-import { and, asc, count, desc, eq, inArray, or, SQL, sql } from 'drizzle-orm';
+import { and, asc, count, desc, eq, ilike, inArray, or, SQL, sql } from 'drizzle-orm';
 import { NodePgDatabase } from 'drizzle-orm/node-postgres/driver';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import { Logger } from 'winston';
@ -9,7 +9,7 @@ import { FileService } from '../file/file.service';
 import { GeoService } from '../geo/geo.service';
 import { User, UserSchema } from '../models/db.model';
 import { createDefaultUser, emailToDirName, JwtUser, UserListingCriteria } from '../models/main.model';
-import { getDistanceQuery, splitName } from '../utils';
+import { DrizzleUser, getDistanceQuery, splitName } from '../utils';
 type CustomerSubType = (typeof customerSubTypeEnum.enumValues)[number];
@Injectable()
@ -19,54 +19,51 @@ export class UserService {
    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
    private fileService: FileService,
    private geoService: GeoService,
-  ) { }
+  ) {}
  private getWhereConditions(criteria: UserListingCriteria): SQL[] {
    const whereConditions: SQL[] = [];
-    whereConditions.push(sql`(${schema.users_json.data}->>'customerType') = 'professional'`);
+    whereConditions.push(eq(schema.users.customerType, 'professional'));
    if (criteria.city && criteria.searchType === 'exact') {
-      whereConditions.push(sql`(${schema.users_json.data}->'location'->>'name') ILIKE ${criteria.city.name}`);
+      whereConditions.push(sql`${schema.users.location}->>'name' ilike ${criteria.city.name}`);
    }
    if (criteria.city && criteria.radius && criteria.searchType === 'radius' && criteria.radius) {
      const cityGeo = this.geoService.getCityWithCoords(criteria.state, criteria.city.name);
-      const distanceQuery = getDistanceQuery(schema.users_json, cityGeo.latitude, cityGeo.longitude);
+      whereConditions.push(sql`${getDistanceQuery(schema.users, cityGeo.latitude, cityGeo.longitude)} <= ${criteria.radius}`);
      whereConditions.push(sql`${distanceQuery} <= ${criteria.radius}`);
    }
    if (criteria.types && criteria.types.length > 0) {
      // whereConditions.push(inArray(schema.users.customerSubType, criteria.types));
-      whereConditions.push(inArray(sql`${schema.users_json.data}->>'customerSubType'`, criteria.types as CustomerSubType[]));
+      whereConditions.push(inArray(schema.users.customerSubType, criteria.types as CustomerSubType[]));
    }
    if (criteria.brokerName) {
      const { firstname, lastname } = splitName(criteria.brokerName);
-      whereConditions.push(sql`(${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} OR (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`}`);
+      whereConditions.push(or(ilike(schema.users.firstname, `%${firstname}%`), ilike(schema.users.lastname, `%${lastname}%`)));
    }
    if (criteria.companyName) {
-      whereConditions.push(sql`(${schema.users_json.data}->>'companyName') ILIKE ${`%${criteria.companyName}%`}`);
+      whereConditions.push(ilike(schema.users.companyName, `%${criteria.companyName}%`));
    }
    if (criteria.counties && criteria.counties.length > 0) {
-      whereConditions.push(or(...criteria.counties.map(county => sql`(${schema.users_json.data}->'location'->>'county') ILIKE ${`%${county}%`}`)));
+      whereConditions.push(or(...criteria.counties.map(county => sql`EXISTS (SELECT 1 FROM jsonb_array_elements(${schema.users.areasServed}) AS area WHERE area->>'county' ILIKE ${`%${county}%`})`)));
    }
    if (criteria.state) {
-      whereConditions.push(sql`(${schema.users_json.data}->'location'->>'state') = ${criteria.state}`);
+      whereConditions.push(sql`EXISTS (SELECT 1 FROM jsonb_array_elements(${schema.users.areasServed}) AS area WHERE area->>'state' = ${criteria.state})`);
    }
-
+    
    //never show user which denied
-    whereConditions.push(sql`(${schema.users_json.data}->>'showInDirectory')::boolean IS TRUE`);
+    whereConditions.push(eq(schema.users.showInDirectory, true))
-
+    
    return whereConditions;
  }
  async searchUserListings(criteria: UserListingCriteria): Promise<{ results: User[]; totalCount: number }> {
    const start = criteria.start ? criteria.start : 0;
    const length = criteria.length ? criteria.length : 12;
-    const query = this.conn.select().from(schema.users_json);
+    const query = this.conn.select().from(schema.users);
    const whereConditions = this.getWhereConditions(criteria);
-
+    
    if (whereConditions.length > 0) {
      const whereClause = and(...whereConditions);
      query.where(whereClause);
@ -74,10 +71,10 @@ export class UserService {
    // Sortierung
    switch (criteria.sortBy) {
      case 'nameAsc':
-        query.orderBy(asc(sql`${schema.users_json.data}->>'lastname'`));
+        query.orderBy(asc(schema.users.lastname));
        break;
      case 'nameDesc':
-        query.orderBy(desc(sql`${schema.users_json.data}->>'lastname'`));
+        query.orderBy(desc(schema.users.lastname));
        break;
      default:
        // Keine spezifische Sortierung, Standardverhalten kann hier eingefügt werden
@ -87,7 +84,7 @@ export class UserService {
    query.limit(length).offset(start);
    const data = await query;
-    const results = data.map(u => ({ id: u.id, email: u.email, ...(u.data as User) }) as User);
+    const results = data;
    const totalCount = await this.getUserListingsCount(criteria);
    return {
@ -96,7 +93,7 @@ export class UserService {
    };
  }
  async getUserListingsCount(criteria: UserListingCriteria): Promise<number> {
-    const countQuery = this.conn.select({ value: count() }).from(schema.users_json);
+    const countQuery = this.conn.select({ value: count() }).from(schema.users);
    const whereConditions = this.getWhereConditions(criteria);
    if (whereConditions.length > 0) {
@ -108,29 +105,35 @@ export class UserService {
    return totalCount;
  }
  async getUserByMail(email: string, jwtuser?: JwtUser) {
-    const users = await this.conn.select().from(schema.users_json).where(eq(schema.users_json.email, email));
+    const users = (await this.conn
      .select()
      .from(schema.users)
      .where(sql`email = ${email}`)) as User[];
    if (users.length === 0) {
-      const user: User = { id: undefined, customerType: 'professional', ...createDefaultUser(email, '', '', null) };
+      const user: User = { id: undefined, customerType: 'professional', ...createDefaultUser(email, jwtuser.firstname ? jwtuser.firstname : '', jwtuser.lastname ? jwtuser.lastname : '', null) };
      const u = await this.saveUser(user, false);
      return u;
    } else {
-      const user = { id: users[0].id, email: users[0].email, ...(users[0].data as User) } as User;
+      const user = users[0];
      user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
      user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
      return user;
    }
  }
  async getUserById(id: string) {
-    const users = await this.conn.select().from(schema.users_json).where(eq(schema.users_json.id, id));
+    const users = (await this.conn
      .select()
      .from(schema.users)
      .where(sql`id = ${id}`)) as User[];
-    const user = { id: users[0].id, email: users[0].email, ...(users[0].data as User) } as User;
+    const user = users[0];
    user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
    user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
    return user;
  }
  async getAllUser() {
-    const users = await this.conn.select().from(schema.users_json);
+    const users = await this.conn.select().from(schema.users);
-    return users.map(u => ({ id: u.id, email: u.email, ...(u.data as User) }) as User);
+    return users;
  }
  async saveUser(user: User, processValidation = true): Promise<User> {
    try {
@ -145,51 +148,16 @@ export class UserService {
        validatedUser = UserSchema.parse(user);
      }
      //const drizzleUser = convertUserToDrizzleUser(validatedUser);
-      const { id: _, ...rest } = validatedUser;
+      const drizzleUser = validatedUser as DrizzleUser;
      const drizzleUser = { email: user.email, data: rest };
      if (user.id) {
-        const [updateUser] = await this.conn.update(schema.users_json).set(drizzleUser).where(eq(schema.users_json.id, user.id)).returning();
+        const [updateUser] = await this.conn.update(schema.users).set(drizzleUser).where(eq(schema.users.id, user.id)).returning();
-        return { id: updateUser.id, email: updateUser.email, ...(updateUser.data as User) } as User;
+        return updateUser as User;
      } else {
-        const [newUser] = await this.conn.insert(schema.users_json).values(drizzleUser).returning();
+        const [newUser] = await this.conn.insert(schema.users).values(drizzleUser).returning();
-        return { id: newUser.id, email: newUser.email, ...(newUser.data as User) } as User;
+        return newUser as User;
      }
    } catch (error) {
      throw error;
    }
  }
  async addFavorite(id: string, user: JwtUser): Promise<void> {
    const existingUser = await this.getUserById(id);
    if (!existingUser) return;
    const favorites = existingUser.favoritesForUser || [];
    if (!favorites.includes(user.email)) {
      existingUser.favoritesForUser = [...favorites, user.email];
      const { id: _, ...rest } = existingUser;
      const drizzleUser = { email: existingUser.email, data: rest };
      await this.conn.update(schema.users_json).set(drizzleUser).where(eq(schema.users_json.id, id));
    }
  }
  async deleteFavorite(id: string, user: JwtUser): Promise<void> {
    const existingUser = await this.getUserById(id);
    if (!existingUser) return;
    const favorites = existingUser.favoritesForUser || [];
    if (favorites.includes(user.email)) {
      existingUser.favoritesForUser = favorites.filter(email => email !== user.email);
      const { id: _, ...rest } = existingUser;
      const drizzleUser = { email: existingUser.email, data: rest };
      await this.conn.update(schema.users_json).set(drizzleUser).where(eq(schema.users_json.id, id));
    }
  }
  async getFavoriteUsers(user: JwtUser): Promise<User[]> {
    const data = await this.conn
      .select()
      .from(schema.users_json)
      .where(sql`${schema.users_json.data}->'favoritesForUser' ? ${user.email}`);
    return data.map(u => ({ id: u.id, email: u.email, ...(u.data as User) }) as User);
  }
 }
--- a/bizmatch-server/src/utils.ts
+++ b/bizmatch-server/src/utils.ts
@ -1,5 +1,5 @@
 import { sql } from 'drizzle-orm';
-import { businesses, businesses_json, commercials, commercials_json, users, users_json } from './drizzle/schema';
+import { businesses, commercials, users } from './drizzle/schema';
 export const EARTH_RADIUS_KM = 6371; // Erdradius in Kilometern
 export const EARTH_RADIUS_MILES = 3959; // Erdradius in Meilen
 export function convertStringToNullUndefined(value) {
@ -16,13 +16,21 @@ export function convertStringToNullUndefined(value) {
  return value;
 }
-export const getDistanceQuery = (schema: typeof businesses_json | typeof commercials_json | typeof users_json, lat: number, lon: number, unit: 'km' | 'miles' = 'miles') => {
+export const getDistanceQuery = (schema: typeof businesses | typeof commercials | typeof users, lat: number, lon: number, unit: 'km' | 'miles' = 'miles') => {
  const radius = unit === 'km' ? EARTH_RADIUS_KM : EARTH_RADIUS_MILES;
  // return sql`
  //   ${radius} * 2 * ASIN(SQRT(
  //     POWER(SIN((${lat} - ${schema.latitude}) * PI() / 180 / 2), 2) +
  //     COS(${lat} * PI() / 180) * COS(${schema.latitude} * PI() / 180) *
  //     POWER(SIN((${lon} - ${schema.longitude}) * PI() / 180 / 2), 2)
  //   ))
  // `;
  return sql`
    ${radius} * 2 * ASIN(SQRT(
-      POWER(SIN((${lat} - (${schema.data}->'location'->>'latitude')::float) * PI() / 180 / 2), 2) +
+      POWER(SIN((${lat} - (${schema.location}->>'latitude')::float) * PI() / 180 / 2), 2) +
-      COS(${lat} * PI() / 180) * COS((${schema.data}->'location'->>'latitude')::float * PI() / 180) *
+      COS(${lat} * PI() / 180) * COS((${schema.location}->>'latitude')::float * PI() / 180) *
-      POWER(SIN((${lon} - (${schema.data}->'location'->>'longitude')::float) * PI() / 180 / 2), 2)
+      POWER(SIN((${lon} - (${schema.location}->>'longitude')::float) * PI() / 180 / 2), 2)
    ))
  `;
 };
@ -30,7 +38,121 @@ export const getDistanceQuery = (schema: typeof businesses_json | typeof commerc
 export type DrizzleUser = typeof users.$inferSelect;
 export type DrizzleBusinessListing = typeof businesses.$inferSelect;
 export type DrizzleCommercialPropertyListing = typeof commercials.$inferSelect;
 // export function convertBusinessToDrizzleBusiness(businessListing: Partial<BusinessListing>): DrizzleBusinessListing {
 //   const drizzleBusinessListing = flattenObject(businessListing);
 //   drizzleBusinessListing.city = drizzleBusinessListing.name;
 //   delete drizzleBusinessListing.name;
 //   return drizzleBusinessListing;
 // }
 // export function convertDrizzleBusinessToBusiness(drizzleBusinessListing: Partial<DrizzleBusinessListing>): BusinessListing {
 //   const o = {
 //     location: drizzleBusinessListing.city ? undefined : null,
 //     location_name: drizzleBusinessListing.city ? drizzleBusinessListing.city : undefined,
 //     location_state: drizzleBusinessListing.state ? drizzleBusinessListing.state : undefined,
 //     location_latitude: drizzleBusinessListing.latitude ? drizzleBusinessListing.latitude : undefined,
 //     location_longitude: drizzleBusinessListing.longitude ? drizzleBusinessListing.longitude : undefined,
 //     ...drizzleBusinessListing,
 //   };
 //   Object.keys(o).forEach(key => (o[key] === undefined ? delete o[key] : {}));
 //   delete o.city;
 //   delete o.state;
 //   delete o.latitude;
 //   delete o.longitude;
 //   return unflattenObject(o);
 // }
 // export function convertCommercialToDrizzleCommercial(commercialPropertyListing: Partial<CommercialPropertyListing>): DrizzleCommercialPropertyListing {
 //   const drizzleCommercialPropertyListing = flattenObject(commercialPropertyListing);
 //   drizzleCommercialPropertyListing.city = drizzleCommercialPropertyListing.name;
 //   delete drizzleCommercialPropertyListing.name;
 //   return drizzleCommercialPropertyListing;
 // }
 // export function convertDrizzleCommercialToCommercial(drizzleCommercialPropertyListing: Partial<DrizzleCommercialPropertyListing>): CommercialPropertyListing {
 //   const o = {
 //     location: drizzleCommercialPropertyListing.city ? undefined : null,
 //     location_name: drizzleCommercialPropertyListing.city ? drizzleCommercialPropertyListing.city : undefined,
 //     location_state: drizzleCommercialPropertyListing.state ? drizzleCommercialPropertyListing.state : undefined,
 //     location_street: drizzleCommercialPropertyListing.street ? drizzleCommercialPropertyListing.street : undefined,
 //     location_housenumber: drizzleCommercialPropertyListing.housenumber ? drizzleCommercialPropertyListing.housenumber : undefined,
 //     location_county: drizzleCommercialPropertyListing.county ? drizzleCommercialPropertyListing.county : undefined,
 //     location_zipCode: drizzleCommercialPropertyListing.zipCode ? drizzleCommercialPropertyListing.zipCode : undefined,
 //     location_latitude: drizzleCommercialPropertyListing.latitude ? drizzleCommercialPropertyListing.latitude : undefined,
 //     location_longitude: drizzleCommercialPropertyListing.longitude ? drizzleCommercialPropertyListing.longitude : undefined,
 //     ...drizzleCommercialPropertyListing,
 //   };
 //   Object.keys(o).forEach(key => (o[key] === undefined ? delete o[key] : {}));
 //   delete o.city;
 //   delete o.state;
 //   delete o.street;
 //   delete o.housenumber;
 //   delete o.county;
 //   delete o.zipCode;
 //   delete o.latitude;
 //   delete o.longitude;
 //   return unflattenObject(o);
 // }
 // export function convertUserToDrizzleUser(user: Partial<User>): DrizzleUser {
 //   const drizzleUser = flattenObject(user);
 //   drizzleUser.city = drizzleUser.name;
 //   delete drizzleUser.name;
 //   return drizzleUser;
 // }
 // export function convertDrizzleUserToUser(drizzleUser: Partial<DrizzleUser>): User {
 //   const o: any = {
 //     companyLocation: drizzleUser.city ? undefined : null,
 //     companyLocation_name: drizzleUser.city ? drizzleUser.city : undefined,
 //     companyLocation_state: drizzleUser.state ? drizzleUser.state : undefined,
 //     companyLocation_latitude: drizzleUser.latitude ? drizzleUser.latitude : undefined,
 //     companyLocation_longitude: drizzleUser.longitude ? drizzleUser.longitude : undefined,
 //     ...drizzleUser,
 //   };
 //   Object.keys(o).forEach(key => (o[key] === undefined ? delete o[key] : {}));
 //   delete o.city;
 //   delete o.state;
 //   delete o.latitude;
 //   delete o.longitude;
 //   return unflattenObject(o);
 // }
 // function flattenObject(obj: any, res: any = {}): any {
 //   for (const key in obj) {
 //     if (obj.hasOwnProperty(key)) {
 //       const value = obj[key];
 //       if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
 //         if (value instanceof Date) {
 //           res[key] = value;
 //         } else {
 //           flattenObject(value, res);
 //         }
 //       } else {
 //         res[key] = value;
 //       }
 //     }
 //   }
 //   return res;
 // }
 // function unflattenObject(obj: any, separator: string = '_'): any {
 //   const result: any = {};
 //   for (const key in obj) {
 //     if (obj.hasOwnProperty(key)) {
 //       const keys = key.split(separator);
 //       keys.reduce((acc, curr, idx) => {
 //         if (idx === keys.length - 1) {
 //           acc[curr] = obj[key];
 //         } else {
 //           if (!acc[curr]) {
 //             acc[curr] = {};
 //           }
 //         }
 //         return acc[curr];
 //       }, result);
 //     }
 //   }
 //   return result;
 // }
 export function splitName(fullName: string): { firstname: string; lastname: string } {
  const parts = fullName.trim().split(/\s+/); // Teile den Namen am Leerzeichen auf
--- a/bizmatch-server/src/utils/slug.utils.ts
+++ b/bizmatch-server/src/utils/slug.utils.ts
@ -1,183 +0,0 @@
 /**
 * Utility functions for generating and parsing SEO-friendly URL slugs
 *
 * Slug format: {title}-{location}-{short-id}
 * Example: italian-restaurant-austin-tx-a3f7b2c1
 */
 /**
 * Generate a SEO-friendly URL slug from listing data
 *
 * @param title - The listing title (e.g., "Italian Restaurant")
 * @param location - Location object with name, county, and state
 * @param id - The listing UUID
 * @returns SEO-friendly slug (e.g., "italian-restaurant-austin-tx-a3f7b2c1")
 */
 export function generateSlug(title: string, location: any, id: string): string {
  if (!title || !id) {
    throw new Error('Title and ID are required to generate a slug');
  }
  // Clean and slugify the title
  const titleSlug = title
    .toLowerCase()
    .trim()
    .replace(/[^\w\s-]/g, '') // Remove special characters
    .replace(/\s+/g, '-')     // Replace spaces with hyphens
    .replace(/-+/g, '-')      // Replace multiple hyphens with single hyphen
    .substring(0, 50);        // Limit title to 50 characters
  // Get location string
  let locationSlug = '';
  if (location) {
    const locationName = location.name || location.county || '';
    const state = location.state || '';
    if (locationName) {
      locationSlug = locationName
        .toLowerCase()
        .trim()
        .replace(/[^\w\s-]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-');
    }
    if (state) {
      locationSlug = locationSlug
        ? `${locationSlug}-${state.toLowerCase()}`
        : state.toLowerCase();
    }
  }
  // Get first 8 characters of UUID for uniqueness
  const shortId = id.substring(0, 8);
  // Combine parts: title-location-id
  const parts = [titleSlug, locationSlug, shortId].filter(Boolean);
  const slug = parts.join('-');
  // Final cleanup
  return slug
    .replace(/-+/g, '-')  // Remove duplicate hyphens
    .replace(/^-|-$/g, '') // Remove leading/trailing hyphens
    .toLowerCase();
 }
 /**
 * Extract the UUID from a slug
 * The UUID is always the last segment (8 characters)
 *
 * @param slug - The URL slug (e.g., "italian-restaurant-austin-tx-a3f7b2c1")
 * @returns The short ID (e.g., "a3f7b2c1")
 */
 export function extractShortIdFromSlug(slug: string): string {
  if (!slug) {
    throw new Error('Slug is required');
  }
  const parts = slug.split('-');
  return parts[parts.length - 1];
 }
 /**
 * Validate if a string looks like a valid slug
 *
 * @param slug - The string to validate
 * @returns true if the string looks like a valid slug
 */
 export function isValidSlug(slug: string): boolean {
  if (!slug || typeof slug !== 'string') {
    return false;
  }
  // Check if slug contains only lowercase letters, numbers, and hyphens
  const slugPattern = /^[a-z0-9-]+$/;
  if (!slugPattern.test(slug)) {
    return false;
  }
  // Check if slug has a reasonable length (at least 10 chars for short-id + some content)
  if (slug.length < 10) {
    return false;
  }
  // Check if last segment looks like a UUID prefix (8 chars of alphanumeric)
  const parts = slug.split('-');
  const lastPart = parts[parts.length - 1];
  return lastPart.length === 8 && /^[a-z0-9]{8}$/.test(lastPart);
 }
 /**
 * Check if a parameter is a slug (vs a UUID)
 *
 * @param param - The URL parameter
 * @returns true if it's a slug, false if it's likely a UUID
 */
 export function isSlug(param: string): boolean {
  if (!param) {
    return false;
  }
  // UUIDs have a specific format with hyphens at specific positions
  // e.g., "a3f7b2c1-4d5e-6789-abcd-1234567890ef"
  const uuidPattern = /^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$/i;
  if (uuidPattern.test(param)) {
    return false; // It's a UUID
  }
  // If it contains at least 3 parts (e.g., title-state-id or title-city-state-id) and looks like our slug format, it's probably a slug
  return param.split('-').length >= 3 && isValidSlug(param);
 }
 /**
 * Regenerate slug from updated listing data
 * Useful when title or location changes
 *
 * @param title - Updated title
 * @param location - Updated location
 * @param existingSlug - The current slug (to preserve short-id)
 * @returns New slug with same short-id
 */
 export function regenerateSlug(title: string, location: any, existingSlug: string): string {
  if (!existingSlug) {
    throw new Error('Existing slug is required to regenerate');
  }
  const shortId = extractShortIdFromSlug(existingSlug);
  // Reconstruct full UUID from short-id (not possible, so we use full existing slug's ID)
  // In practice, you'd need the full UUID from the database
  // For now, we'll construct a new slug with the short-id
  const titleSlug = title
    .toLowerCase()
    .trim()
    .replace(/[^\w\s-]/g, '')
    .replace(/\s+/g, '-')
    .replace(/-+/g, '-')
    .substring(0, 50);
  let locationSlug = '';
  if (location) {
    const locationName = location.name || location.county || '';
    const state = location.state || '';
    if (locationName) {
      locationSlug = locationName
        .toLowerCase()
        .trim()
        .replace(/[^\w\s-]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-');
    }
    if (state) {
      locationSlug = locationSlug
        ? `${locationSlug}-${state.toLowerCase()}`
        : state.toLowerCase();
    }
  }
  const parts = [titleSlug, locationSlug, shortId].filter(Boolean);
  return parts.join('-').replace(/-+/g, '-').replace(/^-|-$/g, '').toLowerCase();
 }
--- a/bizmatch-server/tsconfig.json
+++ b/bizmatch-server/tsconfig.json
@ -19,12 +19,5 @@
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": false,
    "esModuleInterop": true
-  },
+  }
  "exclude": [
    "node_modules",
    "dist",
    "src/scripts/seed-database.ts",
    "src/scripts/create-test-user.ts",
    "src/sitemap"
  ]
 }
--- a/bizmatch-static/index-bg.webp
+++ b/bizmatch-static/index-bg.webp
--- a/bizmatch-static/index.html
+++ b/bizmatch-static/index.html
@ -0,0 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Under Construction</title>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <div class="container">
        <h1>Welcome to bizmatch.net!</h1>
        <p>We're currently under construction to bring you a new and improved experience. Our website is diligently being developed to ensure that we meet your needs with the highest quality of service.</p>
        <p>Please check back soon for updates. In the meantime, feel free to <a href="mailto:info@bizmatch.net">contact us</a> for any inquiries or further information.</p>
        <p>Thank you for your patience and support!</p>
        <p>The bizmatch.net Team</p>
    </div>
 </body>
 </html>
--- a/bizmatch-static/style.css
+++ b/bizmatch-static/style.css
@ -0,0 +1,52 @@
 body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #e6f7ff; /* Hintergrundfarbe leicht blau */
    color: #05386b; /* Dunkelblau für Text */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
 		background-image: url(./index-bg.webp);
    background-size: cover;
    background-position: center;
    height: 100vh;
 }
 .container {
    max-width: 600px;
    padding: 40px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border-left: 5px solid #379683; /* Grüne Akzentlinie links */
 }
 h1 {
    color: #379683; /* Grünton für Überschriften */
 }
 p {
    line-height: 1.6;
    margin: 20px 0;
 }
 a {
    color: #5cdb95; /* Helles Grün für Links */
    text-decoration: none;
    font-weight: bold;
 }
 a:hover {
    text-decoration: underline;
 }
@media (max-width: 768px) {
    .container {
        padding: 20px;
    }
 }
--- a/bizmatch/DEPLOYMENT.md
+++ b/bizmatch/DEPLOYMENT.md
@ -1,91 +0,0 @@
 # BizMatch Deployment Guide
 ## Übersicht
 | Umgebung | Befehl | Port | SSR |
 |----------|--------|------|-----|
 | **Development** | `npm start` | 4200 | ❌ Aus |
 | **Production** | `npm run build:ssr` → `npm run serve:ssr` | 4200 | ✅ An |
 ---
 ## Development (Lokale Entwicklung)
 ```bash
 cd ~/bizmatch-project/bizmatch
 npm start
 ```
 - Läuft auf http://localhost:4200
 - Hot-Reload aktiv
 - Kein SSR (schneller für Entwicklung)
 ---
 ## Production Deployment
 ### 1. Build erstellen
 ```bash
 npm run build:ssr
 ```
 Erstellt optimierte Bundles in `dist/bizmatch/`
 ### 2. Server starten
 **Direkt (zum Testen):**
 ```bash
 npm run serve:ssr
 ```
 **Mit PM2 (empfohlen für Production):**
 ```bash
 # Einmal PM2 installieren
 npm install -g pm2
 # Server starten
 pm2 start dist/bizmatch/server/server.mjs --name "bizmatch"
 # Nach Code-Änderungen
 npm run build:ssr && pm2 restart bizmatch
 # Logs anzeigen
 pm2 logs bizmatch
 # Status prüfen
 pm2 status
 ```
 ### 3. Nginx Reverse Proxy (optional)
 ```nginx
 server {
    listen 80;
    server_name deinedomain.com;
    location / {
        proxy_pass http://localhost:4200;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
 }
 ```
 ---
 ## SEO Features (aktiv mit SSR)
 - ✅ Server-Side Rendering für alle Seiten
 - ✅ Meta-Tags und Titel werden serverseitig generiert
 - ✅ Sitemaps unter `/sitemap.xml`
 - ✅ robots.txt konfiguriert
 - ✅ Strukturierte Daten (Schema.org)
 ---
 ## Wichtige Dateien
 | Datei | Zweck |
 |-------|-------|
 | `server.ts` | Express SSR Server |
 | `src/main.server.ts` | Angular Server Entry Point |
 | `src/ssr-dom-polyfill.ts` | DOM Polyfills für SSR |
 | `dist/bizmatch/server/` | Kompilierte Server-Bundles |
--- a/bizmatch/Dockerfile
+++ b/bizmatch/Dockerfile
@ -1,41 +0,0 @@
 # STAGE 1: Build
 FROM node:22-alpine AS builder
 # Wir erstellen ein Arbeitsverzeichnis, das eine Ebene über dem Projekt liegt
 WORKDIR /usr/src/app
 # 1. Wir kopieren die Backend-Models an die Stelle, wo Angular sie erwartet
 # Deine Pfade suchen nach ../bizmatch-server, also legen wir es daneben.
 COPY bizmatch-server/src/models ./bizmatch-server/src/models
 # 2. Jetzt kümmern wir uns um das Frontend
 # Wir kopieren erst die package Files für besseres Caching
 COPY bizmatch/package*.json ./bizmatch/
 # Wechseln in den Frontend Ordner zum Installieren
 WORKDIR /usr/src/app/bizmatch
 RUN npm ci
 # 3. Den Rest des Frontends kopieren
 COPY bizmatch/ .
 # 4. Bauen
 RUN npm run build:ssr
 # --- STAGE 2: Runtime ---
 FROM node:22-alpine
 WORKDIR /app
 ENV NODE_ENV=production
 ENV PORT=4000
 # Kopiere das Ergebnis aus dem Builder (Pfad beachten!)
 COPY --from=builder /usr/src/app/bizmatch/dist /app/dist
 COPY --from=builder /usr/src/app/bizmatch/package*.json /app/
 RUN npm ci --omit=dev
 EXPOSE 4000
 CMD ["node", "dist/bizmatch/server/server.mjs"]
--- a/bizmatch/SSR_ANLEITUNG.md
+++ b/bizmatch/SSR_ANLEITUNG.md
@ -1,275 +0,0 @@
 # BizMatch SSR - Schritt-für-Schritt-Anleitung
 ## Problem: SSR startet nicht auf neuem Laptop?
 Diese Anleitung hilft Ihnen, BizMatch mit Server-Side Rendering (SSR) auf einem neuen Rechner zum Laufen zu bringen.
 ---
 ## Voraussetzungen prüfen
 ```bash
 # Node.js Version prüfen (mind. v18 erforderlich)
 node --version
 # npm Version prüfen
 npm --version
 # Falls Node.js fehlt oder veraltet ist:
 # https://nodejs.org/ → LTS Version herunterladen
 ```
 ---
 ## Schritt 1: Repository klonen (falls noch nicht geschehen)
 ```bash
 git clone https://gitea.bizmatch.net/aknuth/bizmatch-project.git
 cd bizmatch-project/bizmatch
 ```
 ---
 ## Schritt 2: Dependencies installieren
 **WICHTIG:** Dieser Schritt ist essentiell und wird oft vergessen!
 ```bash
 cd ~/bizmatch-project/bizmatch
 npm install
 ```
 > **Tipp:** Bei Problemen versuchen Sie: `rm -rf node_modules package-lock.json && npm install`
 ---
 ## ⚠️ WICHTIG: Erstes Setup auf neuem Laptop
 **Wenn Sie das Projekt zum ersten Mal auf einem neuen Rechner klonen, müssen Sie ZUERST einen Build erstellen!**
 ```bash
 cd ~/bizmatch-project/bizmatch
 # 1. Dependencies installieren
 npm install
 # 2. Build erstellen (erstellt dist/bizmatch/server/index.server.html)
 npm run build:ssr
 ```
 **Warum?**
 - Die `dist/` Folder werden NICHT ins Git eingecheckt (`.gitignore`)
 - Die Datei `dist/bizmatch/server/index.server.html` fehlt nach `git clone`
 - Ohne Build → `npm run serve:ssr` crasht mit "Cannot find index.server.html"
 **Nach dem ersten Build** können Sie dann Development-Befehle nutzen.
 ---
 ## Schritt 3: Umgebung wählen
 ### Option A: Entwicklung (OHNE SSR)
 Schnellster Weg für lokale Entwicklung:
 ```bash
 npm start
 ```
 - Öffnet automatisch: http://localhost:4200
 - Hot-Reload aktiv (Code-Änderungen werden sofort sichtbar)
 - **Kein SSR** (schneller für Entwicklung)
 ### Option B: Development mit SSR
 Für SSR-Testing während der Entwicklung:
 ```bash
 npm run dev:ssr
 ```
 - Öffnet: http://localhost:4200
 - Hot-Reload aktiv
 - **SSR aktiv** (simuliert Production)
 - Nutzt DOM-Polyfills via `ssr-dom-preload.mjs`
 ### Option C: Production Build mit SSR
 Für finalen Production-Test:
 ```bash
 # 1. Build erstellen
 npm run build:ssr
 # 2. Server starten
 npm run serve:ssr
 ```
 - Server läuft auf: http://localhost:4200
 - **Vollständiges SSR** (wie in Production)
 - Kein Hot-Reload (für Änderungen erneut builden)
 ---
 ## Schritt 4: Testen
 Öffnen Sie http://localhost:4200 im Browser.
 ### SSR funktioniert, wenn:
 1. **Seitenquelltext ansehen** (Rechtsklick → "Seitenquelltext anzeigen"):
   - HTML-Inhalt ist bereits vorhanden (nicht nur `<app-root></app-root>`)
   - Meta-Tags sind sichtbar
 2. **JavaScript deaktivieren** (Chrome DevTools → Settings → Disable JavaScript):
   - Seite zeigt Inhalt an (wenn auch nicht interaktiv)
 3. **Network-Tab** (Chrome DevTools → Network → Doc):
   - HTML-Response enthält bereits gerenderten Content
 ---
 ## Häufige Probleme und Lösungen
 ### Problem 1: `npm: command not found`
 **Lösung:** Node.js installieren
 ```bash
 # Ubuntu/Debian
 curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
 sudo apt-get install -y nodejs
 # macOS
 brew install node
 # Windows
 # https://nodejs.org/ → Installer herunterladen
 ```
 ### Problem 2: `Cannot find module '@angular/ssr'`
 **Lösung:** Dependencies neu installieren
 ```bash
 rm -rf node_modules package-lock.json
 npm install
 ```
 ### Problem 3: `Error: EADDRINUSE: address already in use :::4200`
 **Lösung:** Port ist bereits belegt
 ```bash
 # Prozess finden und beenden
 lsof -i :4200
 kill -9 <PID>
 # Oder anderen Port nutzen
 PORT=4300 npm run serve:ssr
 ```
 ### Problem 4: `Error loading @angular/platform-server` oder "Cannot find index.server.html"
 **Lösung:** Build fehlt oder ist veraltet
 ```bash
 # dist-Ordner löschen und neu builden
 rm -rf dist
 npm run build:ssr
 # Dann starten
 npm run serve:ssr
 ```
 **Häufiger Fehler auf neuem Laptop:**
 - Nach `git pull` fehlt der `dist/` Ordner komplett
 - `index.server.html` wird beim Build erstellt, nicht ins Git eingecheckt
 - **Lösung:** Immer erst `npm run build:ssr` ausführen!
 ### Problem 5: "Seite lädt nicht" oder "White Screen"
 **Lösung:**
 1. Browser-Cache leeren (Strg+Shift+R / Cmd+Shift+R)
 2. DevTools öffnen → Console-Tab → Fehler prüfen
 3. Sicherstellen, dass Backend läuft (falls API-Calls)
 ### Problem 6: "Module not found: Error: Can't resolve 'window'"
 **Lösung:** Browser-spezifischer Code wird im SSR-Build verwendet
 - Prüfen Sie `ssr-dom-polyfill.ts` - DOM-Mocks sollten vorhanden sein
 - Code mit `isPlatformBrowser()` schützen:
 ```typescript
 import { isPlatformBrowser } from '@angular/common';
 import { PLATFORM_ID } from '@angular/core';
 constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
 ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
    // Nur im Browser ausführen
    window.scrollTo(0, 0);
  }
 }
 ```
 ---
 ## Production Deployment mit PM2
 Für dauerhaften Betrieb (Server-Umgebung):
 ```bash
 # PM2 global installieren
 npm install -g pm2
 # Production Build
 npm run build:ssr
 # Server mit PM2 starten
 pm2 start dist/bizmatch/server/server.mjs --name "bizmatch"
 # Auto-Start bei Server-Neustart
 pm2 startup
 pm2 save
 # Logs anzeigen
 pm2 logs bizmatch
 # Server neustarten nach Updates
 npm run build:ssr && pm2 restart bizmatch
 ```
 ---
 ## Unterschiede der Befehle
 | Befehl | SSR | Hot-Reload | Verwendung |
 |--------|-----|-----------|------------|
 | `npm start` | ❌ | ✅ | Entwicklung (schnell) |
 | `npm run dev:ssr` | ✅ | ✅ | Entwicklung mit SSR |
 | `npm run build:ssr` | ✅ Build | ❌ | Production Build erstellen |
 | `npm run serve:ssr` | ✅ | ❌ | Production Server starten |
 ---
 ## Nächste Schritte
 1. Für normale Entwicklung: **`npm start`** verwenden
 2. Vor Production-Deployment: **`npm run build:ssr`** testen
 3. SSR-Funktionalität prüfen (siehe "Schritt 4: Testen")
 4. Bei Problemen: Logs prüfen und obige Lösungen durchgehen
 ---
 ## Support
 Bei weiteren Problemen:
 1. **Logs prüfen:** `npm run serve:ssr` zeigt Fehler in der Konsole
 2. **Browser DevTools:** Console + Network Tab
 3. **Build-Output:** `npm run build:ssr` zeigt Build-Fehler
 4. **Node-Version:** `node --version` (sollte ≥ v18 sein)
--- a/bizmatch/SSR_DOKUMENTATION.md
+++ b/bizmatch/SSR_DOKUMENTATION.md
@ -1,784 +0,0 @@
 # BizMatch SSR - Technische Dokumentation
 ## Was ist Server-Side Rendering (SSR)?
 Server-Side Rendering bedeutet, dass die Angular-Anwendung nicht nur im Browser, sondern auch auf dem Server läuft und HTML vorab generiert.
 ---
 ## Unterschied: SPA vs. SSR vs. Prerendering
 ### 1. Single Page Application (SPA) - OHNE SSR
 **Ablauf:**
 ```
 Browser → lädt index.html
       → index.html enthält nur <app-root></app-root>
       → lädt JavaScript-Bundles
       → JavaScript rendert die Seite
 ```
 **HTML-Response:**
 ```html
 <!doctype html>
 <html>
  <head><title>BizMatch</title></head>
  <body>
    <app-root></app-root>  <!-- LEER! -->
    <script src="main.js"></script>
  </body>
 </html>
 ```
 **Nachteile:**
 - ❌ Suchmaschinen sehen leeren Content
 - ❌ Langsamer "First Contentful Paint"
 - ❌ Schlechtes SEO
 - ❌ Kein Social-Media-Preview (Open Graph)
 ---
 ### 2. Server-Side Rendering (SSR)
 **Ablauf:**
 ```
 Browser → fragt Server nach /business/123
       → Server rendert Angular-App mit Daten
       → Server sendet vollständiges HTML
       → Browser zeigt sofort Inhalt
       → JavaScript lädt im Hintergrund
       → Anwendung wird "hydrated" (interaktiv)
 ```
 **HTML-Response:**
 ```html
 <!doctype html>
 <html>
  <head>
    <title>Restaurant "Zum Löwen" | BizMatch</title>
    <meta name="description" content="Restaurant in München...">
  </head>
  <body>
    <app-root>
      <div class="listing-page">
        <h1>Restaurant "Zum Löwen"</h1>
        <p>Traditionelles deutsches Restaurant...</p>
        <!-- Kompletter gerendeter Content! -->
      </div>
    </app-root>
    <script src="main.js"></script>
  </body>
 </html>
 ```
 **Vorteile:**
 - ✅ Suchmaschinen sehen vollständigen Inhalt
 - ✅ Schneller First Contentful Paint
 - ✅ Besseres SEO
 - ✅ Social-Media-Previews funktionieren
 **Nachteile:**
 - ⚠️ Komplexere Konfiguration
 - ⚠️ Server-Ressourcen erforderlich
 - ⚠️ Code muss browser- und server-kompatibel sein
 ---
 ### 3. Prerendering (Static Site Generation)
 **Ablauf:**
 ```
 Build-Zeit → Rendert ALLE Seiten zu statischen HTML-Dateien
          → /business/123.html, /business/456.html, etc.
          → HTML-Dateien werden auf CDN deployed
 ```
 **Unterschied zu SSR:**
 - Prerendering: HTML wird **zur Build-Zeit** generiert
 - SSR: HTML wird **zur Request-Zeit** generiert
 **BizMatch nutzt SSR, NICHT Prerendering**, weil:
 - Listings dynamisch sind (neue Einträge täglich)
 - Benutzerdaten personalisiert sind
 - Suche und Filter zur Laufzeit erfolgen
 ---
 ## Wie funktioniert SSR in BizMatch?
 ### Architektur-Überblick
 ```
 ┌─────────────────────────────────────────────────────────────┐
 │                     Browser Request                          │
 │                  GET /business/restaurant-123                │
 └────────────────────────────┬────────────────────────────────┘
                             │
                             ▼
 ┌─────────────────────────────────────────────────────────────┐
 │                    Express Server                            │
 │                   (server.ts:30-41)                          │
 ├─────────────────────────────────────────────────────────────┤
 │  1. Empfängt Request                                         │
 │  2. Ruft AngularNodeAppEngine auf                            │
 │  3. Rendert Angular-Komponente serverseitig                  │
 │  4. Sendet HTML zurück                                       │
 └────────────────────────────┬────────────────────────────────┘
                             │
                             ▼
 ┌─────────────────────────────────────────────────────────────┐
 │              AngularNodeAppEngine                            │
 │              (@angular/ssr/node)                             │
 ├─────────────────────────────────────────────────────────────┤
 │  1. Lädt main.server.ts                                      │
 │  2. Bootstrapped Angular in Node.js                          │
 │  3. Führt Routing aus (/business/restaurant-123)             │
 │  4. Rendert Component-Tree zu HTML-String                    │
 │  5. Injiziert Meta-Tags, Titel                               │
 └────────────────────────────┬────────────────────────────────┘
                             │
                             ▼
 ┌─────────────────────────────────────────────────────────────┐
 │                 Angular Application                          │
 │                 (Browser-Code im Server)                     │
 ├─────────────────────────────────────────────────────────────┤
 │  • Komponenten werden ausgeführt                             │
 │  • API-Calls werden gemacht (TransferState)                  │
 │  • DOM wird SIMULIERT (ssr-dom-polyfill.ts)                  │
 │  • HTML-Output wird generiert                                │
 └─────────────────────────────────────────────────────────────┘
 ```
 ---
 ## Wichtige Dateien und ihre Rolle
 ### 1. `server.ts` - Express Server
 ```typescript
 const angularApp = new AngularNodeAppEngine();
 server.get('*', (req, res, next) => {
  angularApp.handle(req)  // ← Rendert Angular serverseitig
    .then((response) => {
      if (response) {
        writeResponseToNodeResponse(response, res);
      }
    });
 });
 ```
 **Rolle:**
 - HTTP-Server (Express)
 - Nimmt Requests entgegen
 - Delegiert an Angular SSR Engine
 - Sendet gerenderte HTML-Responses zurück
 ---
 ### 2. `src/main.server.ts` - Server Entry Point
 ```typescript
 import './ssr-dom-polyfill';  // ← WICHTIG: DOM-Mocks laden
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { config } from './app/app.config.server';
 const bootstrap = () => bootstrapApplication(AppComponent, config);
 export default bootstrap;
 ```
 **Rolle:**
 - Entry Point für SSR
 - Lädt DOM-Polyfills **VOR** allen anderen Imports
 - Bootstrapped Angular im Server-Kontext
 ---
 ### 3. `dist/bizmatch/server/index.server.html` - Server Template
 **WICHTIG:** Diese Datei wird **beim Build erstellt**, nicht manuell geschrieben!
 ```bash
 # Build-Prozess erstellt automatisch:
 npm run build:ssr
  → dist/bizmatch/server/index.server.html  ✅
  → dist/bizmatch/server/server.mjs         ✅
  → dist/bizmatch/browser/index.csr.html    ✅
 ```
 **Quelle:**
 - Angular nimmt `src/index.html` als Vorlage
 - Fügt SSR-spezifische Meta-Tags hinzu
 - Generiert `index.server.html` für serverseitiges Rendering
 - Generiert `index.csr.html` für clientseitiges Rendering (Fallback)
 **Warum nicht im Git?**
 - Build-Artefakte werden nicht eingecheckt (`.gitignore`)
 - Jeder Build erstellt sie neu
 - Verhindert Merge-Konflikte bei generierten Dateien
 **Fehlerquelle bei neuem Laptop:**
 ```
 git clone → dist/ Ordner fehlt
          → index.server.html fehlt
          → npm run serve:ssr crasht ❌
 Lösung:   → npm run build:ssr
          → index.server.html wird erstellt ✅
 ```
 ---
 ### 4. `src/ssr-dom-polyfill.ts` - DOM-Mocks
 ```typescript
 const windowMock = {
  document: { createElement: () => ({ ... }) },
  localStorage: { getItem: () => null },
  navigator: { userAgent: 'node' },
  // ... etc
 };
 if (typeof window === 'undefined') {
  (global as any).window = windowMock;
 }
 ```
 **Rolle:**
 - Simuliert Browser-APIs in Node.js
 - Verhindert `ReferenceError: window is not defined`
 - Ermöglicht die Ausführung von Browser-Code im Server
 - Kritisch für Libraries wie Leaflet, die `window` erwarten
 **Warum notwendig?**
 - Angular-Code nutzt `window`, `document`, `localStorage`, etc.
 - Node.js hat diese APIs nicht
 - Ohne Polyfills: Crash beim Server-Start
 ---
 ### 4. `ssr-dom-preload.mjs` - Node.js Preload Script
 ```javascript
 import { isMainThread } from 'node:worker_threads';
 if (!isMainThread) {
  // Skip polyfills in worker threads (sass, esbuild)
 } else {
  globalThis.window = windowMock;
  globalThis.document = documentMock;
 }
 ```
 **Rolle:**
 - Wird beim `dev:ssr` verwendet
 - Lädt DOM-Mocks **VOR** allen anderen Modulen
 - Nutzt Node.js `--import` Flag
 - Vermeidet Probleme mit early imports
 **Verwendung:**
 ```bash
 NODE_OPTIONS='--import ./ssr-dom-preload.mjs' ng serve
 ```
 ---
 ### 5. `app.config.server.ts` - Server-spezifische Config
 Enthält Provider, die nur im Server-Kontext geladen werden:
 - `provideServerRendering()`
 - Server-spezifische HTTP-Interceptors
 - TransferState für API-Daten
 ---
 ## Rendering-Ablauf im Detail
 ### Phase 1: Server-Side Rendering
 ```
 1. Request kommt an: GET /business/restaurant-123
 2. Express Router:
   → server.get('*', ...)
 3. AngularNodeAppEngine:
   → bootstrapApplication(AppComponent, serverConfig)
   → Angular läuft in Node.js
 4. Angular Router:
   → Route /business/:slug matched
   → ListingDetailComponent wird aktiviert
 5. Component Lifecycle:
   → ngOnInit() wird ausgeführt
   → API-Call: fetch('/api/listings/restaurant-123')
   → Daten werden geladen
   → Template wird mit Daten gerendert
 6. TransferState:
   → API-Response wird in HTML injiziert
   → <script>window.__NG_STATE__ = {...}</script>
 7. Meta-Tags:
   → Title-Service setzt <title>
   → Meta-Service setzt <meta name="description">
 8. HTML-Output:
   → Komplettes HTML mit Daten
   → Wird an Browser gesendet
 ```
 **Server-Output:**
 ```html
 <!doctype html>
 <html>
  <head>
    <title>Restaurant "Zum Löwen" | BizMatch</title>
    <meta name="description" content="Traditionelles Restaurant...">
  </head>
  <body>
    <app-root>
      <!-- Vollständig gerenderte Component -->
      <div class="listing-detail">
        <h1>Restaurant "Zum Löwen"</h1>
        <p>Adresse: Hauptstraße 1, München</p>
        <!-- etc. -->
      </div>
    </app-root>
    <!-- TransferState: verhindert doppelte API-Calls -->
    <script id="ng-state" type="application/json">
      {"listings":{"restaurant-123":{...}}}
    </script>
    <script src="main.js" defer></script>
  </body>
 </html>
 ```
 ---
 ### Phase 2: Client-Side Hydration
 ```
 1. Browser empfängt HTML:
   → Zeigt sofort gerenderten Content an ✅
   → User sieht Inhalt ohne Verzögerung
 2. JavaScript lädt:
   → main.js wird heruntergeladen
   → Angular-Runtime startet
 3. Hydration beginnt:
   → Angular scannt DOM
   → Vergleicht Server-HTML mit Client-Template
   → Attachiert Event Listener
   → Aktiviert Interaktivität
 4. TransferState wiederverwenden:
   → Liest window.__NG_STATE__
   → Überspringt erneute API-Calls ✅
   → Daten sind bereits vorhanden
 5. App ist interaktiv:
   → Buttons funktionieren
   → Routing funktioniert
   → SPA-Verhalten aktiviert
 ```
 **Wichtig:**
 - **Kein Flickern** (Server-HTML = Client-HTML)
 - **Keine doppelten API-Calls** (TransferState)
 - **Schneller First Contentful Paint** (HTML sofort sichtbar)
 ---
 ## SSR vs. Non-SSR: Was wird wann gerendert?
 ### Ohne SSR (`npm start`)
 | Zeitpunkt | Server | Browser |
 |-----------|--------|---------|
 | T0: Request | Sendet leere `index.html` | - |
 | T1: HTML empfangen | - | Leeres `<app-root></app-root>` |
 | T2: JS geladen | - | Angular startet |
 | T3: API-Call | - | Lädt Daten |
 | T4: Rendering | - | **Erst jetzt sichtbar** ❌ |
 **Time to First Contentful Paint:** ~2-3 Sekunden
 ---
 ### Mit SSR (`npm run serve:ssr`)
 | Zeitpunkt | Server | Browser |
 |-----------|--------|---------|
 | T0: Request | Angular rendert + API-Call | - |
 | T1: HTML empfangen | - | **Inhalt sofort sichtbar** ✅ |
 | T2: JS geladen | - | Hydration beginnt |
 | T3: Interaktiv | - | Event Listener attached |
 **Time to First Contentful Paint:** ~200-500ms
 ---
 ## Prerendering vs. SSR: Wann wird gerendert?
 ### Prerendering (Static Site Generation)
 ```
 Build-Zeit (npm run build):
  → ng build
  → Rendert /business/1.html
  → Rendert /business/2.html
  → Rendert /business/3.html
  → ...
  → Alle HTML-Dateien auf Server deployed
 Request-Zeit:
  → Nginx sendet vorgefertigte HTML-Datei
  → KEIN Server-Side Rendering
 ```
 **Vorteile:**
 - Extrem schnell (statisches HTML)
 - Kein Node.js-Server erforderlich
 - Günstig (CDN-Hosting)
 **Nachteile:**
 - Nicht für dynamische Daten geeignet
 - Re-Build bei jeder Änderung nötig
 - Tausende Seiten = lange Build-Zeit
 ---
 ### SSR (Server-Side Rendering)
 ```
 Build-Zeit (npm run build:ssr):
  → ng build (Client-Bundles)
  → ng build (Server-Bundles)
  → KEINE HTML-Dateien generiert
 Request-Zeit:
  → Node.js Server empfängt Request
  → Angular rendert HTML on-the-fly
  → Frische Daten aus DB
  → Sendet HTML zurück
 ```
 **Vorteile:**
 - Immer aktuelle Daten
 - Personalisierte Inhalte
 - Keine lange Build-Zeit
 **Nachteile:**
 - Server-Ressourcen erforderlich
 - Langsamer als Prerendering (Rendering kostet Zeit)
 - Komplexere Infrastruktur
 ---
 ### BizMatch: Warum SSR statt Prerendering?
 **Gründe:**
 1. **Dynamische Listings:**
   - Neue Businesses werden täglich hinzugefügt
   - Prerendering würde tägliche Re-Builds erfordern
 2. **Personalisierte Daten:**
   - Benutzer sehen unterschiedliche Inhalte (Favoriten, etc.)
   - Prerendering kann nicht personalisieren
 3. **Suche und Filter:**
   - Unendliche Kombinationen von Filtern
   - Unmöglich, alle Varianten vorzurendern
 4. **Skalierung:**
   - 10.000+ Listings → Prerendering = 10.000+ HTML-Dateien
   - SSR = 1 Server, rendert on-demand
 ---
 ## Client-Side Hydration im Detail
 ### Was ist Hydration?
 **Hydration** = Angular "erweckt" das Server-HTML zum Leben.
 **Ohne Hydration:**
 - HTML ist statisch
 - Buttons funktionieren nicht
 - Routing funktioniert nicht
 - Kein JavaScript-Event-Handling
 **Nach Hydration:**
 - Angular übernimmt Kontrolle
 - Event Listener werden attached
 - SPA-Routing funktioniert
 - Interaktivität aktiviert
 ---
 ### Hydration-Ablauf
 ```typescript
 // 1. Server rendert HTML
 <button (click)="openModal()">Details</button>
 // 2. Browser empfängt HTML
 // → Button ist sichtbar, aber (click) funktioniert NICHT
 // 3. Angular-JavaScript lädt
 // → main.js wird ausgeführt
 // 4. Hydration scannt DOM
 angular.hydrate({
  serverHTML: '<button>Details</button>',
  clientTemplate: '<button (click)="openModal()">Details</button>',
  // Vergleich: HTML matches Template? ✅
  // → Reuse DOM node
  // → Attach Event Listener
 });
 // 5. Button ist jetzt interaktiv
 // → (click) funktioniert ✅
 ```
 ---
 ### Probleme bei Hydration
 #### Problem 1: Mismatch zwischen Server und Client
 **Ursache:**
 ```typescript
 // Server rendert:
 <div>Server Time: {{ serverTime }}</div>
 // Client rendert:
 <div>Server Time: {{ clientTime }}</div>  // ← Unterschiedlich!
 ```
 **Folge:**
 - Angular erkennt Mismatch
 - Wirft Warnung in Console
 - Re-rendert Component (Performance-Verlust)
 **Lösung:**
 - TransferState nutzen für gemeinsame Daten
 - `isPlatformServer()` für unterschiedliche Logik
 ---
 #### Problem 2: Browser-only Code wird im Server ausgeführt
 **Ursache:**
 ```typescript
 ngOnInit() {
  window.scrollTo(0, 0);  // ← CRASH: window ist undefined im Server
 }
 ```
 **Lösung:**
 ```typescript
 import { isPlatformBrowser } from '@angular/common';
 import { PLATFORM_ID } from '@angular/core';
 constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
 ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
    window.scrollTo(0, 0);  // ← Nur im Browser
  }
 }
 ```
 ---
 ## TransferState: Verhindert doppelte API-Calls
 ### Problem ohne TransferState
 ```
 Server:
  → GET /api/listings/123  ← API-Call 1
  → Rendert HTML mit Daten
 Browser (nach JS-Load):
  → GET /api/listings/123  ← API-Call 2 (doppelt!)
  → Re-rendert Component
 ```
 **Problem:**
 - Doppelter Netzwerk-Traffic
 - Langsamere Hydration
 - Flickern beim Re-Render
 ---
 ### Lösung: TransferState
 **Server-Side:**
 ```typescript
 import { TransferState, makeStateKey } from '@angular/platform-browser';
 const LISTING_KEY = makeStateKey<Listing>('listing-123');
 ngOnInit() {
  this.http.get('/api/listings/123').subscribe(data => {
    this.transferState.set(LISTING_KEY, data);  // ← Speichern
    this.listing = data;
  });
 }
 ```
 **HTML-Output:**
 ```html
 <script id="ng-state" type="application/json">
  {"listing-123": {"name": "Restaurant", "address": "..."}}
 </script>
 ```
 **Client-Side:**
 ```typescript
 ngOnInit() {
  const cachedData = this.transferState.get(LISTING_KEY, null);
  if (cachedData) {
    this.listing = cachedData;  // ← Wiederverwenden ✅
  } else {
    this.http.get('/api/listings/123').subscribe(...);  // ← Nur wenn nicht cached
  }
  this.transferState.remove(LISTING_KEY);  // ← Cleanup
 }
 ```
 **Ergebnis:**
 - ✅ Nur 1 API-Call (serverseitig)
 - ✅ Kein Flickern
 - ✅ Schnellere Hydration
 ---
 ## Performance-Vergleich
 ### Metriken
 | Metrik | Ohne SSR | Mit SSR | Verbesserung |
 |--------|----------|---------|--------------|
 | **Time to First Byte (TTFB)** | 50ms | 200ms | -150ms ❌ |
 | **First Contentful Paint (FCP)** | 2.5s | 0.5s | **-2s ✅** |
 | **Largest Contentful Paint (LCP)** | 3.2s | 0.8s | **-2.4s ✅** |
 | **Time to Interactive (TTI)** | 3.5s | 2.8s | -0.7s ✅ |
 | **SEO Score (Lighthouse)** | 60 | 95 | +35 ✅ |
 **Wichtig:**
 - TTFB ist langsamer (Server muss rendern)
 - Aber FCP viel schneller (HTML sofort sichtbar)
 - User-Wahrnehmung: SSR fühlt sich schneller an
 ---
 ## SEO-Vorteile
 ### Google Crawler
 **Ohne SSR:**
 ```html
 <!-- Google sieht nur: -->
 <app-root></app-root>
 <script src="main.js"></script>
 ```
 → ❌ Kein Content indexiert
 → ❌ Kein Ranking
 → ❌ Keine Rich Snippets
 ---
 **Mit SSR:**
 ```html
 <!-- Google sieht: -->
 <title>Restaurant "Zum Löwen" | BizMatch</title>
 <meta name="description" content="Traditionelles Restaurant in München">
 <h1>Restaurant "Zum Löwen"</h1>
 <p>Adresse: Hauptstraße 1, 80331 München</p>
 <div itemscope itemtype="https://schema.org/Restaurant">
  <span itemprop="name">Restaurant "Zum Löwen"</span>
  <span itemprop="address">München</span>
 </div>
 ```
 → ✅ Vollständiger Content indexiert
 → ✅ Besseres Ranking
 → ✅ Rich Snippets (Sterne, Adresse, etc.)
 ---
 ### Social Media Previews (Open Graph)
 **Ohne SSR:**
 ```html
 <!-- Facebook/Twitter sehen nur: -->
 <title>BizMatch</title>
 ```
 → ❌ Kein Preview-Bild
 → ❌ Keine Beschreibung
 ---
 **Mit SSR:**
 ```html
 <meta property="og:title" content="Restaurant 'Zum Löwen'" />
 <meta property="og:description" content="Traditionelles Restaurant..." />
 <meta property="og:image" content="https://bizmatch.net/images/restaurant.jpg" />
 <meta property="og:url" content="https://bizmatch.net/business/restaurant-123" />
 ```
 → ✅ Schönes Preview beim Teilen
 → ✅ Mehr Klicks
 → ✅ Bessere User Experience
 ---
 ## Zusammenfassung
 ### SSR in BizMatch bedeutet:
 1. **Server rendert HTML vorab** (nicht erst im Browser)
 2. **Browser zeigt sofort Inhalt** (schneller First Paint)
 3. **JavaScript hydrated im Hintergrund** (macht HTML interaktiv)
 4. **Kein Flickern, keine doppelten API-Calls** (TransferState)
 5. **Besseres SEO** (Google sieht vollständigen Content)
 6. **Social-Media-Previews funktionieren** (Open Graph Tags)
 ### Technischer Stack:
 - **@angular/ssr**: SSR-Engine
 - **Express**: HTTP-Server
 - **AngularNodeAppEngine**: Rendert Angular in Node.js
 - **ssr-dom-polyfill.ts**: Simuliert Browser-APIs
 - **TransferState**: Verhindert doppelte API-Calls
 ### Wann wird was gerendert?
 - **Build-Zeit:** Nichts (kein Prerendering)
 - **Request-Zeit:** Server rendert HTML on-the-fly
 - **Nach JS-Load:** Hydration macht HTML interaktiv
 ### Best Practices:
 1. Browser-Code mit `isPlatformBrowser()` schützen
 2. TransferState für API-Daten nutzen
 3. DOM-Polyfills für Third-Party-Libraries
 4. Meta-Tags serverseitig setzen
 5. Server-Build vor Deployment testen
--- a/bizmatch/angular.json
+++ b/bizmatch/angular.json
@ -21,42 +21,19 @@
            "outputPath": "dist/bizmatch",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "server": "src/main.server.ts",
            "prerender": false,
            "ssr": {
              "entry": "server.ts"
            },
            "allowedCommonJsDependencies": [
              "quill-delta",
              "leaflet",
              "dayjs",
              "qs"
            ],
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              },
              "src/favicon.ico",
-              "src/assets",
+              "src/assets"
              "src/robots.txt",
              {
                "glob": "**/*",
                "input": "node_modules/leaflet/dist/images",
                "output": "assets/leaflet/"
              }
            ],
            "styles": [
              "src/styles.scss",
              "src/styles/lazy-load.css",
              "node_modules/quill/dist/quill.snow.css",
-              "node_modules/leaflet/dist/leaflet.css",
+              "node_modules/leaflet/dist/leaflet.css"
              "node_modules/ngx-sharebuttons/themes/default.scss"
            ]
          },
          "configurations": {
@ -69,8 +46,8 @@
                },
                {
                  "type": "anyComponentStyle",
-                  "maximumWarning": "30kb",
+                  "maximumWarning": "2kb",
-                  "maximumError": "30kb"
+                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
@ -78,8 +55,7 @@
            "development": {
              "optimization": false,
              "extractLicenses": false,
-              "sourceMap": true,
+              "sourceMap": true
              "ssr": false
            },
            "dev": {
              "fileReplacements": [
@ -91,18 +67,6 @@
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            },
            "prod": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "extractLicenses": false,
              "sourceMap": true,
              "outputHashing": "all"
            }
          },
          "defaultConfiguration": "production"
--- a/bizmatch/package.json
+++ b/bizmatch/package.json
@ -7,37 +7,32 @@
    "prebuild": "node version.js",
    "build": "node version.js && ng build",
    "build.dev": "node version.js && ng build --configuration dev --output-hashing=all",
    "build.prod": "node version.js && ng build --configuration prod --output-hashing=all",
    "build:ssr": "node version.js && ng build --configuration prod",
    "build:ssr:dev": "node version.js && ng build --configuration dev",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
-    "serve:ssr": "node dist/bizmatch/server/server.mjs",
+    "serve:ssr:bizmatch": "node dist/bizmatch/server/server.mjs"
    "serve:ssr:bizmatch": "node dist/bizmatch/server/server.mjs",
    "dev:ssr": "NODE_OPTIONS='--import ./ssr-dom-preload.mjs' ng serve"
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^19.2.16",
+    "@angular/animations": "^18.1.3",
-    "@angular/cdk": "^19.1.5",
+    "@angular/cdk": "^18.0.6",
-    "@angular/common": "^19.2.16",
+    "@angular/common": "^18.1.3",
-    "@angular/compiler": "^19.2.16",
+    "@angular/compiler": "^18.1.3",
-    "@angular/core": "^19.2.16",
+    "@angular/core": "^18.1.3",
-    "@angular/fire": "^19.2.0",
+    "@angular/fire": "^18.0.1",
-    "@angular/forms": "^19.2.16",
+    "@angular/forms": "^18.1.3",
-    "@angular/platform-browser": "^19.2.16",
+    "@angular/platform-browser": "^18.1.3",
-    "@angular/platform-browser-dynamic": "^19.2.16",
+    "@angular/platform-browser-dynamic": "^18.1.3",
-    "@angular/platform-server": "^19.2.16",
+    "@angular/platform-server": "^18.1.3",
-    "@angular/router": "^19.2.16",
+    "@angular/router": "^18.1.3",
-    "@angular/ssr": "^19.2.16",
+    "@bluehalo/ngx-leaflet": "^18.0.2",
-    "@bluehalo/ngx-leaflet": "^19.0.0",
+    "@fortawesome/angular-fontawesome": "^0.15.0",
    "@fortawesome/angular-fontawesome": "^1.0.0",
    "@fortawesome/fontawesome-free": "^6.7.2",
    "@fortawesome/fontawesome-svg-core": "^6.7.2",
    "@fortawesome/free-brands-svg-icons": "^6.7.2",
    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@ng-select/ng-select": "^14.9.0",
+    "@ng-select/ng-select": "^13.4.1",
    "@ngneat/until-destroy": "^10.0.0",
    "@stripe/stripe-js": "^4.3.0",
    "@types/cropperjs": "^1.3.0",
    "@types/leaflet": "^1.9.12",
    "@types/uuid": "^10.0.0",
@ -49,25 +44,23 @@
    "leaflet": "^1.9.4",
    "memoize-one": "^6.0.0",
    "ng-gallery": "^11.0.0",
-    "ngx-currency": "^19.0.0",
+    "ngx-currency": "^18.0.0",
    "ngx-image-cropper": "^8.0.0",
    "ngx-mask": "^18.0.0",
-    "ngx-quill": "^27.1.2",
+    "ngx-quill": "^26.0.5",
    "ngx-sharebuttons": "^15.0.3",
    "ngx-stripe": "^18.1.0",
    "on-change": "^5.0.1",
    "posthog-js": "^1.259.0",
    "quill": "2.0.2",
    "rxjs": "~7.8.1",
    "tslib": "^2.6.3",
    "urlcat": "^3.1.0",
    "uuid": "^10.0.0",
-    "zone.js": "~0.15.0",
+    "zone.js": "~0.14.7"
    "zod": "^4.1.12"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.16",
+    "@angular-devkit/build-angular": "^18.1.3",
-    "@angular/cli": "^19.2.16",
+    "@angular/cli": "^18.1.3",
-    "@angular/compiler-cli": "^19.2.16",
+    "@angular/compiler-cli": "^18.1.3",
    "@types/express": "^4.17.21",
    "@types/jasmine": "~5.1.4",
    "@types/node": "^20.14.9",
@ -81,6 +74,6 @@
    "karma-jasmine-html-reporter": "~2.1.0",
    "postcss": "^8.4.39",
    "tailwindcss": "^3.4.4",
-    "typescript": "~5.7.2"
+    "typescript": "~5.4.5"
  }
-}
+}
--- a/bizmatch/proxy.conf.json
+++ b/bizmatch/proxy.conf.json
@ -1,12 +1,12 @@
 {
  "/bizmatch": {
-    "target": "http://localhost:3001",
+    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  },
  "/pictures": {
-    "target": "http://localhost:8081",
+    "target": "http://localhost:8080",
    "secure": false
  },
  "/ipify": {
--- a/bizmatch/public/googleccd5315437d68a49.html
+++ b/bizmatch/public/googleccd5315437d68a49.html
@ -1 +0,0 @@
 google-site-verification: googleccd5315437d68a49.html
--- a/bizmatch/server.ts
+++ b/bizmatch/server.ts
@ -1,152 +1,56 @@
-// IMPORTANT: DOM polyfill must be imported FIRST, before any browser-dependent libraries
+// import { APP_BASE_HREF } from '@angular/common';
-import './src/ssr-dom-polyfill';
+// import { CommonEngine } from '@angular/ssr';
 // import express from 'express';
 // import { fileURLToPath } from 'node:url';
 // import { dirname, join, resolve } from 'node:path';
 // import bootstrap from './src/main.server';
-import { APP_BASE_HREF } from '@angular/common';
+// // The Express app is exported so that it can be used by serverless Functions.
-import { AngularNodeAppEngine, createNodeRequestHandler, writeResponseToNodeResponse } from '@angular/ssr/node';
+// export function app(): express.Express {
-import { ɵsetAngularAppEngineManifest as setAngularAppEngineManifest } from '@angular/ssr';
+//   const server = express();
-import express from 'express';
+//   const serverDistFolder = dirname(fileURLToPath(import.meta.url));
-import { fileURLToPath } from 'node:url';
+//   const browserDistFolder = resolve(serverDistFolder, '../browser');
-import { dirname, join, resolve } from 'node:path';
+//   const indexHtml = join(serverDistFolder, 'index.server.html');
-// The Express app is exported so that it can be used by serverless Functions.
+//   const commonEngine = new CommonEngine();
 export async function app(): Promise<express.Express> {
  const server = express();
  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
  const browserDistFolder = resolve(serverDistFolder, '../browser');
  const indexHtml = join(serverDistFolder, 'index.server.html');
-  // Explicitly load and set the Angular app engine manifest
+//   server.set('view engine', 'html');
-  // This is required for environments where the manifest is not auto-loaded
+//   server.set('views', browserDistFolder);
  const manifestPath = join(serverDistFolder, 'angular-app-engine-manifest.mjs');
  const manifest = await import(manifestPath);
  setAngularAppEngineManifest(manifest.default);
-  const angularApp = new AngularNodeAppEngine();
+//   // Example Express Rest API endpoints
 //   // server.get('/api/**', (req, res) => { });
 //   // Serve static files from /browser
 //   server.get('*.*', express.static(browserDistFolder, {
 //     maxAge: '1y'
 //   }));
-  server.set('view engine', 'html');
+//   // All regular routes use the Angular engine
-  server.set('views', browserDistFolder);
+//   server.get('*', (req, res, next) => {
 //     const { protocol, originalUrl, baseUrl, headers } = req;
-  // Sitemap XML endpoints - MUST be before static files middleware
+//     commonEngine
-  server.get('/sitemap.xml', async (req, res) => {
+//       .render({
-    try {
+//         bootstrap,
-      const sitemapIndexXml = `<?xml version="1.0" encoding="UTF-8"?>
+//         documentFilePath: indexHtml,
-<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+//         url: `${protocol}://${headers.host}${originalUrl}`,
-  <sitemap>
+//         publicPath: browserDistFolder,
-    <loc>https://www.bizmatch.net/sitemap-static.xml</loc>
+//         providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
-    <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
+//       })
-  </sitemap>
+//       .then((html) => res.send(html))
-</sitemapindex>`;
+//       .catch((err) => next(err));
 //   });
-      res.header('Content-Type', 'application/xml; charset=utf-8');
+//   return server;
-      res.send(sitemapIndexXml);
+// }
    } catch (error) {
      console.error('[SSR] Error generating sitemap index:', error);
      res.status(500).send('Error generating sitemap');
    }
  });
-  server.get('/sitemap-static.xml', async (req, res) => {
+// function run(): void {
-    try {
+//   const port = process.env['PORT'] || 4000;
      const sitemapXml = `<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.bizmatch.net/</loc>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.bizmatch.net/home</loc>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.bizmatch.net/businessListings</loc>
    <changefreq>daily</changefreq>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>https://www.bizmatch.net/commercialPropertyListings</loc>
    <changefreq>daily</changefreq>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>https://www.bizmatch.net/brokerListings</loc>
    <changefreq>daily</changefreq>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>https://www.bizmatch.net/terms-of-use</loc>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>https://www.bizmatch.net/privacy-statement</loc>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
 </urlset>`;
-      res.header('Content-Type', 'application/xml; charset=utf-8');
+//   // Start up the Node server
-      res.send(sitemapXml);
+//   const server = app();
-    } catch (error) {
+//   server.listen(port, () => {
-      console.error('[SSR] Error generating static sitemap:', error);
+//     console.log(`Node Express server listening on http://localhost:${port}`);
-      res.status(500).send('Error generating sitemap');
+//   });
-    }
+// }
  });
-  // Example Express Rest API endpoints
+// run();
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(browserDistFolder, {
    maxAge: '1y'
  }));
  // All regular routes use the Angular engine
  server.get('*', async (req, res, next) => {
    console.log(`[SSR] Handling request: ${req.method} ${req.url}`);
    // Cache SSR-rendered pages at CDN level
    res.setHeader('Cache-Control', 'public, s-maxage=300, stale-while-revalidate=600');
    try {
      const response = await angularApp.handle(req);
      if (response) {
        console.log(`[SSR] Response received for ${req.url}, status: ${response.status}`);
        writeResponseToNodeResponse(response, res);
      } else {
        console.log(`[SSR] No response for ${req.url} - Angular engine returned null`);
        console.log(`[SSR] This usually means the route couldn't be rendered. Check for:
   1. Browser API usage in components
   2. Missing platform checks
   3. Errors during component initialization`);
        res.sendStatus(404);
      }
    } catch (err) {
      console.error(`[SSR] Error handling ${req.url}:`, err);
      console.error(`[SSR] Stack trace:`, err.stack);
      next(err);
    }
  });
  return server;
 }
 // Global error handlers for debugging
 process.on('unhandledRejection', (reason, promise) => {
  console.error('[SSR] Unhandled Rejection at:', promise, 'reason:', reason);
 });
 process.on('uncaughtException', (error) => {
  console.error('[SSR] Uncaught Exception:', error);
  console.error('[SSR] Stack:', error.stack);
 });
 async function run(): Promise<void> {
  const port = process.env['PORT'] || 4200;
  // Start up the Node server
  const server = await app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
 }
 run();
--- a/bizmatch/src/app/app.component.html
+++ b/bizmatch/src/app/app.component.html
@ -3,16 +3,10 @@
  @if (actualRoute !=='home' && actualRoute !=='login' && actualRoute!=='emailVerification' && actualRoute!=='email-authorized'){
  <header></header>
  }
-  <main class="flex-1 flex">
+  <main class="flex-1 bg-slate-100">
-    @if (isFilterRoute()) {
+    <router-outlet></router-outlet>
    <div class="hidden md:block w-1/4 bg-white shadow-lg p-6 overflow-y-auto">
      <app-search-modal [isModal]="false"></app-search-modal>
    </div>
    }
    <div [ngClass]="{ 'w-full': !isFilterRoute(), 'md:w-3/4': isFilterRoute() }">
      <router-outlet></router-outlet>
    </div>
  </main>
  <app-footer></app-footer>
 </div>
@ -41,6 +35,5 @@
 <app-message-container></app-message-container>
 <app-search-modal></app-search-modal>
 <app-search-modal-commercial></app-search-modal-commercial>
 <app-confirmation></app-confirmation>
 <app-email></app-email>
--- a/bizmatch/src/app/app.component.scss
+++ b/bizmatch/src/app/app.component.scss
@ -1,3 +1,25 @@
 // .progress-spinner {
 //   position: fixed;
 //   z-index: 999;
 //   top: 0;
 //   left: 0;
 //   bottom: 0;
 //   right: 0;
 //   display: flex;
 //   flex-direction: column;
 //   align-items: center;
 // }
 // .progress-spinner:before {
 //   content: '';
 //   display: block;
 //   position: fixed;
 //   top: 0;
 //   left: 0;
 //   width: 100%;
 //   height: 100%;
 //   background-color: rgba(0, 0, 0, 0.3);
 // }
 .spinner-text {
  margin-top: 20px; /* Abstand zwischen Spinner und Text anpassen */
  font-size: 20px; /* Schriftgröße nach Bedarf anpassen */
--- a/bizmatch/src/app/app.component.ts
+++ b/bizmatch/src/app/app.component.ts
@ -1,7 +1,7 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { AfterViewInit, Component, HostListener, PLATFORM_ID, inject } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
-import { initFlowbite } from 'flowbite';
+
 import { filter } from 'rxjs/operators';
 import build from '../build';
 import { ConfirmationComponent } from './components/confirmation/confirmation.component';
@ -10,7 +10,6 @@ import { EMailComponent } from './components/email/email.component';
 import { FooterComponent } from './components/footer/footer.component';
 import { HeaderComponent } from './components/header/header.component';
 import { MessageContainerComponent } from './components/message/message-container.component';
 import { SearchModalCommercialComponent } from './components/search-modal/search-modal-commercial.component';
 import { SearchModalComponent } from './components/search-modal/search-modal.component';
 import { AuditService } from './services/audit.service';
 import { GeoService } from './services/geo.service';
@ -20,17 +19,15 @@ import { UserService } from './services/user.service';
@Component({
  selector: 'app-root',
  standalone: true,
-  imports: [CommonModule, RouterOutlet, HeaderComponent, FooterComponent, MessageContainerComponent, SearchModalComponent, SearchModalCommercialComponent, ConfirmationComponent, EMailComponent],
+  imports: [CommonModule, RouterOutlet, HeaderComponent, FooterComponent, MessageContainerComponent, SearchModalComponent, ConfirmationComponent, EMailComponent],
  providers: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
 })
-export class AppComponent implements AfterViewInit {
+export class AppComponent {
  build = build;
  title = 'bizmatch';
  actualRoute = '';
  private platformId = inject(PLATFORM_ID);
  private isBrowser = isPlatformBrowser(this.platformId);
  public constructor(
    public loadingService: LoadingService,
@ -48,38 +45,44 @@ export class AppComponent implements AfterViewInit {
      }
      // Hier haben Sie Zugriff auf den aktuellen Route-Pfad
      this.actualRoute = currentRoute.snapshot.url[0].path;
      // Re-initialize Flowbite after navigation to ensure all components are ready
      if (this.isBrowser) {
        setTimeout(() => {
          initFlowbite();
        }, 50);
      }
    });
  }
  ngOnInit() {
-    // Navigation tracking moved from constructor
+    // this.keycloakService.keycloakEvents$.subscribe({
    //   next: event => {
    //     if (event.type === KeycloakEventType.OnTokenExpired) {
    //       this.handleTokenExpiration();
    //     }
    //   },
    // });
  }
-
+  // private async handleTokenExpiration(): Promise<void> {
-  ngAfterViewInit() {
+  //   try {
-    // Initialize Flowbite for dropdowns, modals, and other interactive components
+  //     // Versuche, den Token zu erneuern
-    // Note: Drawers work automatically with data-drawer-target attributes
+  //     const refreshed = await this.keycloakService.updateToken();
-    if (this.isBrowser) {
+  //     if (!refreshed) {
-      initFlowbite();
+  //       // Wenn der Token nicht erneuert werden kann, leite zur Login-Seite weiter
-    }
+  //       this.keycloakService.login({
-  }
+  //         redirectUri: window.location.href, // oder eine andere Seite
-
+  //       });
  //     }
  //   } catch (error) {
  //     if (error.error === 'invalid_grant' && error.error_description === 'Token is not active') {
  //       // Hier wird der Fehler "invalid_grant" abgefangen
  //       this.keycloakService.login({
  //         redirectUri: window.location.href,
  //       });
  //     }
  //   }
  // }
  @HostListener('window:keydown', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
    if (event.shiftKey && event.ctrlKey && event.key === 'V') {
      this.showVersionDialog();
    }
  }
  showVersionDialog() {
    this.confirmationService.showConfirmation({ message: `App Version: ${this.build.timestamp}`, buttons: 'none' });
  }
  isFilterRoute(): boolean {
    const filterRoutes = ['/businessListings', '/commercialPropertyListings', '/brokerListings'];
    return filterRoutes.includes(this.actualRoute);
  }
 }
--- a/bizmatch/src/app/app.config.server.ts
+++ b/bizmatch/src/app/app.config.server.ts
@ -1,15 +1,11 @@
 import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
 import { provideServerRendering } from '@angular/platform-server';
 import { provideServerRouting } from '@angular/ssr';
 import { appConfig } from './app.config';
 import { serverRoutes } from './app.routes.server';
 const serverConfig: ApplicationConfig = {
  providers: [
-    provideServerRendering(),
+    provideServerRendering()
    provideServerRouting(serverRoutes)
  ]
 };
 export const config = mergeApplicationConfig(appConfig, serverConfig);
--- a/bizmatch/src/app/app.config.ts
+++ b/bizmatch/src/app/app.config.ts
@ -1,6 +1,4 @@
-import { IMAGE_CONFIG, isPlatformBrowser } from '@angular/common';
+import { APP_INITIALIZER, ApplicationConfig, ErrorHandler } from '@angular/core';
 import { APP_INITIALIZER, ApplicationConfig, ErrorHandler, PLATFORM_ID, inject } from '@angular/core';
 import { provideClientHydration } from '@angular/platform-browser';
 import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router';
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
@ -11,21 +9,19 @@ import { GALLERY_CONFIG, GalleryConfig } from 'ng-gallery';
 import { provideQuillConfig } from 'ngx-quill';
 import { provideShareButtonsOptions, SharerMethods, withConfig } from 'ngx-sharebuttons';
 import { shareIcons } from 'ngx-sharebuttons/icons';
 import { provideNgxStripe } from 'ngx-stripe';
 import { environment } from '../environments/environment';
 import { routes } from './app.routes';
 import { AuthInterceptor } from './interceptors/auth.interceptor';
 import { LoadingInterceptor } from './interceptors/loading.interceptor';
 import { TimeoutInterceptor } from './interceptors/timeout.interceptor';
 import { GlobalErrorHandler } from './services/globalErrorHandler';
 import { POSTHOG_INIT_PROVIDER } from './services/posthog.factory';
 import { SelectOptionsService } from './services/select-options.service';
 import { createLogger } from './utils/utils';
-
+// provideClientHydration()
 const logger = createLogger('ApplicationConfig');
 export const appConfig: ApplicationConfig = {
  providers: [
    // Temporarily disabled for SSR debugging
    // provideClientHydration(),
    provideHttpClient(withInterceptorsFromDi()),
    {
      provide: APP_INITIALIZER,
@ -56,12 +52,6 @@ export const appConfig: ApplicationConfig = {
      } as GalleryConfig,
    },
    { provide: ErrorHandler, useClass: GlobalErrorHandler }, // Registriere den globalen ErrorHandler
    {
      provide: IMAGE_CONFIG,
      useValue: {
        disableImageSizeWarning: true,
      },
    },
    provideShareButtonsOptions(
      shareIcons(),
      withConfig({
@ -77,8 +67,8 @@ export const appConfig: ApplicationConfig = {
        anchorScrolling: 'enabled',
      }),
    ),
    ...(environment.production ? [POSTHOG_INIT_PROVIDER] : []),
    provideAnimations(),
    provideNgxStripe('pk_test_IlpbVQhxAXZypLgnCHOCqlj8'),
    provideQuillConfig({
      modules: {
        syntax: true,
@ -93,6 +83,7 @@ export const appConfig: ApplicationConfig = {
    }),
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideAuth(() => getAuth()),
    // provideFirestore(() => getFirestore()),
  ],
 };
 function initServices(selectOptions: SelectOptionsService) {
--- a/bizmatch/src/app/app.routes.server.ts
+++ b/bizmatch/src/app/app.routes.server.ts
@ -1,24 +0,0 @@
 import { RenderMode, ServerRoute } from '@angular/ssr';
 export const serverRoutes: ServerRoute[] = [
    { path: 'home', renderMode: RenderMode.Server }, // Das hatten wir vorhin gefixt
    // WICHTIG: Alle geschützten Routen nur im Browser rendern!
    // Damit überspringt der Server den AuthGuard Check komplett und schickt
    // nur eine leere Hülle (index.html), die der Browser dann füllt.
    { path: 'account', renderMode: RenderMode.Client },
    { path: 'account/**', renderMode: RenderMode.Client },
    { path: 'myListings', renderMode: RenderMode.Client },
    { path: 'myFavorites', renderMode: RenderMode.Client },
    { path: 'createBusinessListing', renderMode: RenderMode.Client },
    { path: 'createCommercialPropertyListing', renderMode: RenderMode.Client },
    { path: 'editBusinessListing/**', renderMode: RenderMode.Client },
    { path: 'editCommercialPropertyListing/**', renderMode: RenderMode.Client },
    // Statische Seiten
    { path: 'terms-of-use', renderMode: RenderMode.Prerender },
    { path: 'privacy-statement', renderMode: RenderMode.Prerender },
    // Fallback
    { path: '**', renderMode: RenderMode.Server }
 ];
--- a/bizmatch/src/app/app.routes.ts
+++ b/bizmatch/src/app/app.routes.ts
@ -1,189 +1,181 @@
-import { Routes } from '@angular/router';
+import { Routes } from '@angular/router';
-// Core components (eagerly loaded - needed for initial navigation)
+import { LogoutComponent } from './components/logout/logout.component';
-import { LogoutComponent } from './components/logout/logout.component';
+import { NotFoundComponent } from './components/not-found/not-found.component';
-import { NotFoundComponent } from './components/not-found/not-found.component';
+
-import { TestSsrComponent } from './components/test-ssr/test-ssr.component';
+import { EmailAuthorizedComponent } from './components/email-authorized/email-authorized.component';
-import { EmailAuthorizedComponent } from './components/email-authorized/email-authorized.component';
+import { EmailVerificationComponent } from './components/email-verification/email-verification.component';
-import { EmailVerificationComponent } from './components/email-verification/email-verification.component';
+import { LoginRegisterComponent } from './components/login-register/login-register.component';
-import { LoginRegisterComponent } from './components/login-register/login-register.component';
+import { AuthGuard } from './guards/auth.guard';
-
+import { ListingCategoryGuard } from './guards/listing-category.guard';
-// Guards
+import { UserListComponent } from './pages/admin/user-list/user-list.component';
-import { AuthGuard } from './guards/auth.guard';
+import { DetailsBusinessListingComponent } from './pages/details/details-business-listing/details-business-listing.component';
-import { ListingCategoryGuard } from './guards/listing-category.guard';
+import { DetailsCommercialPropertyListingComponent } from './pages/details/details-commercial-property-listing/details-commercial-property-listing.component';
-
+import { DetailsUserComponent } from './pages/details/details-user/details-user.component';
-// Public pages - HomeComponent stays eagerly loaded as landing page
+import { HomeComponent } from './pages/home/home.component';
-import { HomeComponent } from './pages/home/home.component';
+import { BrokerListingsComponent } from './pages/listings/broker-listings/broker-listings.component';
-import { SuccessComponent } from './pages/success/success.component';
+import { BusinessListingsComponent } from './pages/listings/business-listings/business-listings.component';
-import { TermsOfUseComponent } from './pages/legal/terms-of-use.component';
+import { CommercialPropertyListingsComponent } from './pages/listings/commercial-property-listings/commercial-property-listings.component';
-import { PrivacyStatementComponent } from './pages/legal/privacy-statement.component';
+import { PricingComponent } from './pages/pricing/pricing.component';
-
+import { AccountComponent } from './pages/subscription/account/account.component';
-// Note: All listing and details components are now lazy-loaded for better initial bundle size
+import { EditBusinessListingComponent } from './pages/subscription/edit-business-listing/edit-business-listing.component';
-
+import { EditCommercialPropertyListingComponent } from './pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component';
-
+import { EmailUsComponent } from './pages/subscription/email-us/email-us.component';
-export const routes: Routes = [
+import { FavoritesComponent } from './pages/subscription/favorites/favorites.component';
-  {
+import { MyListingComponent } from './pages/subscription/my-listing/my-listing.component';
-    path: 'test-ssr',
+import { SuccessComponent } from './pages/success/success.component';
-    component: TestSsrComponent,
+
-  },
+export const routes: Routes = [
-  {
+  {
-    path: 'businessListings',
+    path: 'businessListings',
-    loadComponent: () => import('./pages/listings/business-listings/business-listings.component').then(m => m.BusinessListingsComponent),
+    component: BusinessListingsComponent,
-    runGuardsAndResolvers: 'always',
+    runGuardsAndResolvers: 'always',
-  },
+  },
-  {
+  {
-    path: 'commercialPropertyListings',
+    path: 'commercialPropertyListings',
-    loadComponent: () => import('./pages/listings/commercial-property-listings/commercial-property-listings.component').then(m => m.CommercialPropertyListingsComponent),
+    component: CommercialPropertyListingsComponent,
-    runGuardsAndResolvers: 'always',
+    runGuardsAndResolvers: 'always',
-  },
+  },
-  {
+  {
-    path: 'brokerListings',
+    path: 'brokerListings',
-    loadComponent: () => import('./pages/listings/broker-listings/broker-listings.component').then(m => m.BrokerListingsComponent),
+    component: BrokerListingsComponent,
-    runGuardsAndResolvers: 'always',
+    runGuardsAndResolvers: 'always',
-  },
+  },
-  {
+  {
-    path: 'home',
+    path: 'home',
-    component: HomeComponent,
+    component: HomeComponent,
-  },
+  },
-  // #########
+  // #########
-  // Listings Details - New SEO-friendly slug-based URLs
+  // Listings  Details
-  {
+  {
-    path: 'business/:slug',
+    path: 'details-business-listing/:id',
-    loadComponent: () => import('./pages/details/details-business-listing/details-business-listing.component').then(m => m.DetailsBusinessListingComponent),
+    component: DetailsBusinessListingComponent,
-  },
+  },
-  {
+  {
-    path: 'commercial-property/:slug',
+    path: 'details-commercial-property-listing/:id',
-    loadComponent: () => import('./pages/details/details-commercial-property-listing/details-commercial-property-listing.component').then(m => m.DetailsCommercialPropertyListingComponent),
+    component: DetailsCommercialPropertyListingComponent,
-  },
+  },
-  // Backward compatibility redirects for old UUID-based URLs
+  {
-  {
+    path: 'listing/:id',
-    path: 'details-business-listing/:id',
+    canActivate: [ListingCategoryGuard],
-    redirectTo: 'business/:id',
+    component: NotFoundComponent, // Dummy-Komponente, wird nie angezeigt, da der Guard weiterleitet
-    pathMatch: 'full',
+  },
-  },
+  // {
-  {
+  //   path: 'login/:page',
-    path: 'details-commercial-property-listing/:id',
+  //   component: LoginComponent, // Dummy-Komponente, wird nie angezeigt, da der Guard weiterleitet
-    redirectTo: 'commercial-property/:id',
+  // },
-    pathMatch: 'full',
+  {
-  },
+    path: 'login/:page',
-  {
+    component: LoginRegisterComponent, // Dummy-Komponente, wird nie angezeigt, da der Guard weiterleitet
-    path: 'listing/:id',
+  },
-    canActivate: [ListingCategoryGuard],
+  {
-    component: NotFoundComponent, // Dummy-Komponente, wird nie angezeigt, da der Guard weiterleitet
+    path: 'login',
-  },
+    component: LoginRegisterComponent, // Dummy-Komponente, wird nie angezeigt, da der Guard weiterleitet
-  // {
+  },
-  //   path: 'login/:page',
+  {
-  //   component: LoginComponent, // Dummy-Komponente, wird nie angezeigt, da der Guard weiterleitet
+    path: 'notfound',
-  // },
+    component: NotFoundComponent,
-  {
+  },
-    path: 'login/:page',
+  // #########
-    component: LoginRegisterComponent, // Dummy-Komponente, wird nie angezeigt, da der Guard weiterleitet
+  // User  Details
-  },
+  {
-  {
+    path: 'details-user/:id',
-    path: 'login',
+    component: DetailsUserComponent,
-    component: LoginRegisterComponent, // Dummy-Komponente, wird nie angezeigt, da der Guard weiterleitet
+  },
-  },
+  // #########
-  {
+  // User  edit
-    path: 'notfound',
+  {
-    component: NotFoundComponent,
+    path: 'account',
-  },
+    component: AccountComponent,
-  // #########
+    canActivate: [AuthGuard],
-  // User  Details
+  },
-  {
+  {
-    path: 'details-user/:id',
+    path: 'account/:id',
-    loadComponent: () => import('./pages/details/details-user/details-user.component').then(m => m.DetailsUserComponent),
+    component: AccountComponent,
-  },
+    canActivate: [AuthGuard],
-  // #########
+  },
-  // User  edit (lazy-loaded)
+  // #########
-  {
+  // Create, Update Listings
-    path: 'account',
+  {
-    loadComponent: () => import('./pages/subscription/account/account.component').then(m => m.AccountComponent),
+    path: 'editBusinessListing/:id',
-    canActivate: [AuthGuard],
+    component: EditBusinessListingComponent,
-  },
+    canActivate: [AuthGuard],
-  {
+  },
-    path: 'account/:id',
+  {
-    loadComponent: () => import('./pages/subscription/account/account.component').then(m => m.AccountComponent),
+    path: 'createBusinessListing',
-    canActivate: [AuthGuard],
+    component: EditBusinessListingComponent,
-  },
+    canActivate: [AuthGuard],
-  // #########
+  },
-  // Create, Update Listings (lazy-loaded)
+  {
-  {
+    path: 'editCommercialPropertyListing/:id',
-    path: 'editBusinessListing/:id',
+    component: EditCommercialPropertyListingComponent,
-    loadComponent: () => import('./pages/subscription/edit-business-listing/edit-business-listing.component').then(m => m.EditBusinessListingComponent),
+    canActivate: [AuthGuard],
-    canActivate: [AuthGuard],
+  },
-  },
+  {
-  {
+    path: 'createCommercialPropertyListing',
-    path: 'createBusinessListing',
+    component: EditCommercialPropertyListingComponent,
-    loadComponent: () => import('./pages/subscription/edit-business-listing/edit-business-listing.component').then(m => m.EditBusinessListingComponent),
+    canActivate: [AuthGuard],
-    canActivate: [AuthGuard],
+  },
-  },
+  // #########
-  {
+  // My Listings
-    path: 'editCommercialPropertyListing/:id',
+  {
-    loadComponent: () => import('./pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component').then(m => m.EditCommercialPropertyListingComponent),
+    path: 'myListings',
-    canActivate: [AuthGuard],
+    component: MyListingComponent,
-  },
+    canActivate: [AuthGuard],
-  {
+  },
-    path: 'createCommercialPropertyListing',
+  // #########
-    loadComponent: () => import('./pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component').then(m => m.EditCommercialPropertyListingComponent),
+  // My Favorites
-    canActivate: [AuthGuard],
+  {
-  },
+    path: 'myFavorites',
-  // #########
+    component: FavoritesComponent,
-  // My Listings (lazy-loaded)
+    canActivate: [AuthGuard],
-  {
+  },
-    path: 'myListings',
+  // #########
-    loadComponent: () => import('./pages/subscription/my-listing/my-listing.component').then(m => m.MyListingComponent),
+  // EMAil Us
-    canActivate: [AuthGuard],
+  {
-  },
+    path: 'emailUs',
-  // #########
+    component: EmailUsComponent,
-  // My Favorites (lazy-loaded)
+    // canActivate: [AuthGuard],
-  {
+  },
-    path: 'myFavorites',
+  // #########
-    loadComponent: () => import('./pages/subscription/favorites/favorites.component').then(m => m.FavoritesComponent),
+  // Logout
-    canActivate: [AuthGuard],
+  {
-  },
+    path: 'logout',
-  // #########
+    component: LogoutComponent,
-  // Email Us (lazy-loaded)
+    canActivate: [AuthGuard],
-  {
+  },
-    path: 'emailUs',
+  // #########
-    loadComponent: () => import('./pages/subscription/email-us/email-us.component').then(m => m.EmailUsComponent),
+  // Pricing
-    // canActivate: [AuthGuard],
+  {
-  },
+    path: 'pricing',
-  // #########
+    component: PricingComponent,
-  // Logout
+  },
-  {
+  {
-    path: 'logout',
+    path: 'emailVerification',
-    component: LogoutComponent,
+    component: EmailVerificationComponent,
-    canActivate: [AuthGuard],
+  },
-  },
+  {
-  // #########
+    path: 'email-authorized',
-  // Email Verification
+    component: EmailAuthorizedComponent,
-  {
+  },
-    path: 'emailVerification',
+  {
-    component: EmailVerificationComponent,
+    path: 'pricingOverview',
-  },
+    component: PricingComponent,
-  {
+    data: {
-    path: 'email-authorized',
+      pricingOverview: true,
-    component: EmailAuthorizedComponent,
+    },
-  },
+  },
-  {
+  {
-    path: 'success',
+    path: 'pricing/:id',
-    component: SuccessComponent,
+    component: PricingComponent,
-  },
+  },
-  // #########
+  {
-  // Admin Pages (lazy-loaded)
+    path: 'success',
-  {
+    component: SuccessComponent,
-    path: 'admin/users',
+  },
-    loadComponent: () => import('./pages/admin/user-list/user-list.component').then(m => m.UserListComponent),
+  {
-    canActivate: [AuthGuard],
+    path: 'admin/users',
-  },
+    component: UserListComponent,
-  // #########
+    canActivate: [AuthGuard],
-  // Legal Pages
+  },
-  {
+  { path: '**', redirectTo: 'home' },
-    path: 'terms-of-use',
+];
    component: TermsOfUseComponent,
  },
  {
    path: 'privacy-statement',
    component: PrivacyStatementComponent,
  },
  { path: '**', redirectTo: 'home' },
 ];
--- a/bizmatch/src/app/components/base-input/base-input.component.ts
+++ b/bizmatch/src/app/components/base-input/base-input.component.ts
@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { initFlowbite } from 'flowbite';
 import { Subscription } from 'rxjs';
 import { ValidationMessagesService } from '../validation-messages.service';
@ -24,7 +25,9 @@ export abstract class BaseInputComponent implements ControlValueAccessor {
    this.subscription = this.validationMessagesService.messages$.subscribe(() => {
      this.updateValidationMessage();
    });
-    // Flowbite is now initialized once in AppComponent
+    setTimeout(() => {
      initFlowbite();
    }, 10);
  }
  ngOnDestroy() {
--- a/bizmatch/src/app/components/breadcrumbs/breadcrumbs.component.ts
+++ b/bizmatch/src/app/components/breadcrumbs/breadcrumbs.component.ts
@ -1,68 +0,0 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { RouterModule } from '@angular/router';
 export interface BreadcrumbItem {
  label: string;
  url?: string;
  icon?: string;
 }
@Component({
  selector: 'app-breadcrumbs',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <nav aria-label="Breadcrumb" class="mb-4">
      <ol
        class="flex flex-wrap items-center text-sm text-neutral-600"
        itemscope
        itemtype="https://schema.org/BreadcrumbList"
      >
        @for (item of breadcrumbs; track $index) {
        <li
          class="inline-flex items-center"
          itemprop="itemListElement"
          itemscope
          itemtype="https://schema.org/ListItem"
        >
          @if ($index > 0) {
          <span class="inline-flex items-center mx-2 text-neutral-400 select-none">
            <i class="fas fa-chevron-right text-xs"></i>
          </span>
          }
          @if (item.url && $index < breadcrumbs.length - 1) {
          <a
            [routerLink]="item.url"
            class="inline-flex items-center hover:text-blue-600 transition-colors"
            itemprop="item"
          >
            @if (item.icon) {
            <i [class]="item.icon + ' mr-1'"></i>
            }
            <span itemprop="name">{{ item.label }}</span>
          </a>
          } @else {
          <span
            class="inline-flex items-center font-semibold text-neutral-900"
            itemprop="item"
          >
            @if (item.icon) {
            <i [class]="item.icon + ' mr-1'"></i>
            }
            <span itemprop="name">{{ item.label }}</span>
          </span>
          }
          <meta itemprop="position" [content]="($index + 1).toString()" />
        </li>
        }
      </ol>
    </nav>
  `,
  styles: []
 })
 export class BreadcrumbsComponent {
  @Input() breadcrumbs: BreadcrumbItem[] = [];
 }
--- a/bizmatch/src/app/components/confirmation/confirmation.component.ts
+++ b/bizmatch/src/app/components/confirmation/confirmation.component.ts
@ -13,7 +13,7 @@ import { ConfirmationService } from './confirmation.service';
          <button
            (click)="confirmationService.reject()"
            type="button"
-            class="absolute top-3 end-2.5 text-gray-600 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+            class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
          >
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
@ -21,11 +21,11 @@ import { ConfirmationService } from './confirmation.service';
            <span class="sr-only">Close modal</span>
          </button>
          <div class="p-4 md:p-5 text-center">
-            <svg class="mx-auto mb-4 text-gray-600 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+            <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
            </svg>
            @let confirmation = (confirmationService.confirmation$ | async);
-            <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-600">{{ confirmation?.message }}</h3>
+            <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ confirmation?.message }}</h3>
            @if(confirmation?.buttons==='both'){
            <button
              (click)="confirmationService.accept()"
@ -37,7 +37,7 @@ import { ConfirmationService } from './confirmation.service';
            <button
              (click)="confirmationService.reject()"
              type="button"
-              class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-600 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+              class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
            >
              No, cancel
            </button>
--- a/bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.html
+++ b/bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.html
@ -1,8 +1,20 @@
 <div #_container class="container">
  <!-- <div
    *ngFor="let item of items"
    cdkDrag
    (cdkDragEnded)="dragEnded($event)"
    (cdkDragStarted)="dragStarted()"
    (cdkDragMoved)="dragMoved($event)"
    class="item"
    [class.animation]="isAnimationActive"
    [class.large]="item === 3"
  >
    Drag Item {{ item }}
  </div> -->
  <div *ngFor="let item of items" cdkDrag (cdkDragEnded)="dragEnded($event)" (cdkDragStarted)="dragStarted()" (cdkDragMoved)="dragMoved($event)" [class.animation]="isAnimationActive" class="grid-item item">
    <div class="image-box hover:cursor-pointer">
-      <img [src]="getImageUrl(item)" class="w-full h-full object-cover rounded-lg drop-shadow-custom-bg" />
+      <img [src]="getImageUrl(item)" class="w-full h-full object-cover rounded-lg shadow-md" />
-      <div class="absolute top-2 right-2 bg-white rounded-full p-1 drop-shadow-custom-bg" (click)="imageToDelete.emit(item)">
+      <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md" (click)="imageToDelete.emit(item)">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
--- a/bizmatch/src/app/components/dropdown/dropdown.component.ts
+++ b/bizmatch/src/app/components/dropdown/dropdown.component.ts
@ -1,5 +1,4 @@
-import { AfterViewInit, Component, ElementRef, HostBinding, Input, OnDestroy, ViewChild, PLATFORM_ID, inject } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, HostBinding, Input, OnDestroy, ViewChild } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { createPopper, Instance as PopperInstance } from '@popperjs/core';
@Component({
@ -24,8 +23,6 @@ export class DropdownComponent implements AfterViewInit, OnDestroy {
  @HostBinding('class.hidden') isHidden: boolean = true;
  private platformId = inject(PLATFORM_ID);
  private isBrowser = isPlatformBrowser(this.platformId);
  private popperInstance: PopperInstance | null = null;
  isVisible: boolean = false;
  private clickOutsideListener: any;
@ -33,8 +30,6 @@ export class DropdownComponent implements AfterViewInit, OnDestroy {
  private hoverHideListener: any;
  ngAfterViewInit() {
    if (!this.isBrowser) return;
    if (!this.triggerEl) {
      console.error('Trigger element is not provided to the dropdown component.');
      return;
@ -63,8 +58,6 @@ export class DropdownComponent implements AfterViewInit, OnDestroy {
  }
  private setupEventListeners() {
    if (!this.isBrowser) return;
    if (this.triggerType === 'click') {
      this.triggerEl.addEventListener('click', () => this.toggle());
    } else if (this.triggerType === 'hover') {
@ -81,8 +74,6 @@ export class DropdownComponent implements AfterViewInit, OnDestroy {
  }
  private removeEventListeners() {
    if (!this.isBrowser) return;
    if (this.triggerType === 'click') {
      this.triggerEl.removeEventListener('click', () => this.toggle());
    } else if (this.triggerType === 'hover') {
@ -113,7 +104,7 @@ export class DropdownComponent implements AfterViewInit, OnDestroy {
  }
  private handleClickOutside(event: MouseEvent) {
-    if (!this.isVisible || !this.isBrowser) return;
+    if (!this.isVisible) return;
    const clickedElement = event.target as HTMLElement;
    if (this.ignoreClickOutsideClass) {
--- a/bizmatch/src/app/components/email-authorized/email-authorized.component.html
+++ b/bizmatch/src/app/components/email-authorized/email-authorized.component.html
@ -1,35 +1,16 @@
-<div class="container mx-auto py-8 px-4 max-w-md">
+<div class="container mx-auto p-4 text-center min-h-screen bg-gray-100">
-  <div class="bg-white p-6 rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg text-center">
+  <ng-container *ngIf="verificationStatus === 'pending'">
-    <!-- Loading state -->
+    <p class="text-lg text-gray-600">Verifying your email...</p>
-    <ng-container *ngIf="verificationStatus === 'pending'">
+  </ng-container>
      <div class="flex justify-center mb-4">
        <div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
      </div>
      <p class="text-gray-700">Verifying your email address...</p>
    </ng-container>
-    <!-- Success state -->
+  <ng-container *ngIf="verificationStatus === 'success'">
-    <ng-container *ngIf="verificationStatus === 'success'">
+    <h2 class="text-2xl font-bold text-green-600 mb-5">Your email has been verified</h2>
-      <div class="flex justify-center mb-4">
+    <!-- <p class="text-gray-700 mb-4">You can now sign in with your new account</p> -->
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <a routerLink="/account" class="inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">Follow this link to access your Account Page </a>
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+  </ng-container>
        </svg>
      </div>
      <h2 class="text-2xl font-bold text-green-600 mb-5">Your email has been verified</h2>
      <p class="text-gray-700 mb-4">You will be redirected to your account page in 5 seconds</p>
      <a routerLink="/account" class="inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"> Go to Account Page Now </a>
    </ng-container>
-    <!-- Error state -->
+  <ng-container *ngIf="verificationStatus === 'error'">
-    <ng-container *ngIf="verificationStatus === 'error'">
+    <h2 class="text-2xl font-bold text-red-600 mb-2">Verification failed</h2>
-      <div class="flex justify-center mb-4">
+    <p class="text-gray-700">{{ errorMessage }}</p>
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  </ng-container>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </div>
      <h2 class="text-2xl font-bold text-red-600 mb-3">Verification Failed</h2>
      <p class="text-gray-700 mb-4">{{ errorMessage }}</p>
      <a routerLink="/login" class="inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"> Return to Login </a>
    </ng-container>
  </div>
 </div>
--- a/bizmatch/src/app/components/email-authorized/email-authorized.component.ts
+++ b/bizmatch/src/app/components/email-authorized/email-authorized.component.ts
@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { ActivatedRoute, RouterModule } from '@angular/router';
 import { environment } from '../../../environments/environment';
 import { AuthService } from '../../services/auth.service';
 import { UserService } from '../../services/user.service';
@ -16,7 +16,7 @@ export class EmailAuthorizedComponent implements OnInit {
  verificationStatus: 'pending' | 'success' | 'error' = 'pending';
  errorMessage: string | null = null;
-  constructor(private route: ActivatedRoute, private router: Router, private http: HttpClient, private authService: AuthService, private userService: UserService) {}
+  constructor(private route: ActivatedRoute, private http: HttpClient, private authService: AuthService, private userService: UserService) {}
  ngOnInit(): void {
    const oobCode = this.route.snapshot.queryParamMap.get('oobCode');
@ -32,32 +32,11 @@ export class EmailAuthorizedComponent implements OnInit {
  }
  private verifyEmail(oobCode: string, email: string): void {
-    this.http.post<{ message: string; token: string }>(`${environment.apiBaseUrl}/bizmatch/auth/verify-email`, { oobCode, email }).subscribe({
+    this.http.post(`${environment.apiBaseUrl}/bizmatch/auth/verify-email`, { oobCode, email }).subscribe({
-      next: async response => {
+      next: async () => {
        this.verificationStatus = 'success';
-
+        await this.authService.refreshToken();
-        try {
+        const user = await this.userService.getByMail(email);
          // Use the custom token from the server to sign in with Firebase
          await this.authService.signInWithCustomToken(response.token);
          // Try to get user info
          try {
            const user = await this.userService.getByMail(email);
            console.log('User retrieved:', user);
          } catch (userError) {
            console.error('Error getting user:', userError);
            // Don't change verification status - it's still a success
          }
          // Redirect to dashboard after a short delay
          setTimeout(() => {
            this.router.navigate(['/account']);
          }, 5000);
        } catch (authError) {
          console.error('Error signing in with custom token:', authError);
          // Keep success status for verification, but add warning about login
          this.errorMessage = 'Email verified, but there was an issue signing you in. Please try logging in manually.';
        }
      },
      error: err => {
        this.verificationStatus = 'error';
--- a/bizmatch/src/app/components/email-verification/email-verification.component.html
+++ b/bizmatch/src/app/components/email-verification/email-verification.component.html
@ -1,5 +1,5 @@
 <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-  <div class="bg-white p-8 rounded drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg w-full max-w-md text-center">
+  <div class="bg-white p-8 rounded shadow-md w-full max-w-md text-center">
    <h2 class="text-2xl font-bold mb-4">Email Verification</h2>
    <p class="mb-4">A verification email has been sent to your email address. Please check your inbox and click the link to verify your account.</p>
    <p>Once verified, please return to the application.</p>
--- a/bizmatch/src/app/components/email/email.component.html
+++ b/bizmatch/src/app/components/email/email.component.html
@ -9,7 +9,7 @@
        <button
          (click)="eMailService.reject()"
          type="button"
-          class="end-2.5 text-gray-600 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
        >
          <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
--- a/bizmatch/src/app/components/email/email.component.ts
+++ b/bizmatch/src/app/components/email/email.component.ts
@ -17,15 +17,7 @@ import { EMailService } from './email.service';
  template: ``,
 })
 export class EMailComponent {
-  shareByEMail: ShareByEMail = {
+  shareByEMail: ShareByEMail = {};
    yourName: '',
    recipientEmail: '',
    yourEmail: '',
    type: 'business',
    listingTitle: '',
    url: '',
    id: ''
  };
  constructor(public eMailService: EMailService, private mailService: MailService, private validationMessagesService: ValidationMessagesService) {}
  ngOnInit() {
    this.eMailService.shareByEMail$.pipe(untilDestroyed(this)).subscribe(val => {
--- a/bizmatch/src/app/components/faq/faq.component.ts
+++ b/bizmatch/src/app/components/faq/faq.component.ts
@ -1,93 +0,0 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
 import { SeoService } from '../../services/seo.service';
 export interface FAQItem {
  question: string;
  answer: string;
 }
@Component({
  selector: 'app-faq',
  standalone: true,
  imports: [CommonModule],
  template: `
    <section class="bg-white rounded-lg shadow-lg p-6 md:p-8 my-8">
      <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-6">Frequently Asked Questions</h2>
      <div class="space-y-4">
        @for (item of faqItems; track $index) {
        <div class="border-b border-gray-200 pb-4">
          <button
            (click)="toggle($index)"
            class="w-full text-left flex justify-between items-center py-2 hover:text-blue-600 transition-colors"
            [attr.aria-expanded]="openIndex === $index"
          >
            <h3 class="text-lg font-semibold text-gray-800">{{ item.question }}</h3>
            <svg
              class="w-5 h-5 transition-transform"
              [class.rotate-180]="openIndex === $index"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </button>
          @if (openIndex === $index) {
          <div class="mt-3 text-gray-600 leading-relaxed">
            <p [innerHTML]="item.answer"></p>
          </div>
          }
        </div>
        }
      </div>
    </section>
  `,
  styles: [`
    .rotate-180 {
      transform: rotate(180deg);
    }
  `]
 })
 export class FaqComponent implements OnInit {
  @Input() faqItems: FAQItem[] = [];
  openIndex: number | null = null;
  constructor(private seoService: SeoService) {}
  ngOnInit() {
    // Generate and inject FAQ Schema for rich snippets
    if (this.faqItems.length > 0) {
      const faqSchema = {
        '@context': 'https://schema.org',
        '@type': 'FAQPage',
        'mainEntity': this.faqItems.map(item => ({
          '@type': 'Question',
          'name': item.question,
          'acceptedAnswer': {
            '@type': 'Answer',
            'text': this.stripHtml(item.answer)
          }
        }))
      };
      this.seoService.injectStructuredData(faqSchema);
    }
  }
  toggle(index: number) {
    this.openIndex = this.openIndex === index ? null : index;
  }
  private stripHtml(html: string): string {
    const tmp = document.createElement('DIV');
    tmp.innerHTML = html;
    return tmp.textContent || tmp.innerText || '';
  }
  ngOnDestroy() {
    this.seoService.clearStructuredData();
  }
 }
--- a/bizmatch/src/app/components/footer/footer.component.html
+++ b/bizmatch/src/app/components/footer/footer.component.html
--- a/bizmatch/src/app/components/footer/footer.component.ts
+++ b/bizmatch/src/app/components/footer/footer.component.ts
@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { Router, RouterModule } from '@angular/router';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-
+import { initFlowbite } from 'flowbite';
@Component({
  selector: 'app-footer',
  standalone: true,
@ -17,6 +17,10 @@ export class FooterComponent {
  currentYear: number = new Date().getFullYear();
  constructor(private router: Router) {}
  ngOnInit() {
-    // Flowbite is now initialized once in AppComponent
+    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        initFlowbite();
      }
    });
  }
 }
--- a/bizmatch/src/app/components/header/header.component.html
+++ b/bizmatch/src/app/components/header/header.component.html
@ -1,210 +1,258 @@
-<nav class="bg-white border-neutral-200 dark:bg-neutral-900 print:hidden">
+<nav class="bg-white border-gray-200 dark:bg-gray-900 print:hidden">
  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
    <a routerLink="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
-      <img src="/assets/images/header-logo.png" class="h-10 w-auto"
+      <img src="assets/images/header-logo.png" class="h-8" alt="Flowbite Logo" />
        alt="BizMatch - Business Marketplace for Buying and Selling Businesses" width="150" height="40" />
    </a>
    <div class="flex items-center md:order-2 space-x-3 rtl:space-x-reverse">
      <!-- Filter button -->
      @if(isFilterUrl()){
-
+      <button
        type="button"
        #triggerButton
        (click)="openModal()"
        id="filterDropdownButton"
        class="max-sm:hidden px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
      >
        <i class="fas fa-filter mr-2"></i>Filter ({{ getNumberOfFiltersSet() }})
      </button>
      <!-- Sort button -->
      <div class="relative">
-        <button type="button" id="sortDropdownButton" aria-label="Sort listings" aria-haspopup="listbox"
+        <button
-          class="max-sm:hidden px-4 py-2 text-sm font-medium bg-white border border-neutral-200 rounded-lg hover:bg-neutral-100 hover:text-primary-600 dark:bg-neutral-800 dark:text-neutral-400 dark:border-neutral-600 dark:hover:text-white dark:hover:bg-neutral-700"
+          type="button"
          id="sortDropdownButton"
          class="max-sm:hidden px-4 py-2 text-sm font-medium bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
          (click)="toggleSortDropdown()"
-          [ngClass]="{ 'text-primary-500': selectOptions.getSortByOption(sortBy) !== 'Sort', 'text-neutral-900': selectOptions.getSortByOption(sortBy) === 'Sort' }">
+          [ngClass]="{ 'text-blue-500': selectOptions.getSortByOption(criteria?.sortBy) !== 'Sort', 'text-gray-900': selectOptions.getSortByOption(criteria?.sortBy) === 'Sort' }"
-          <i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(sortBy) }}
+        >
          <i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(criteria?.sortBy) }}
        </button>
        <!-- Sort options dropdown -->
-        <div *ngIf="sortDropdownVisible"
+        <div *ngIf="sortDropdownVisible" class="absolute right-0 z-50 w-48 md:mt-2 max-md:mt-20 max-md:mr-[-2.5rem] bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-600">
-          class="absolute right-0 z-50 w-48 md:mt-2 max-md:mt-20 max-md:mr-[-2.5rem] bg-white border border-neutral-200 rounded-lg drop-shadow-custom-bg dark:bg-neutral-800 dark:border-neutral-600">
+          <ul class="py-1 text-sm text-gray-700 dark:text-gray-200">
          <ul class="py-1 text-sm text-neutral-700 dark:text-neutral-200">
            @for(item of sortByOptions; track item){
-            <li (click)="sortByFct(item.value)"
+            <li (click)="sortBy(item.value)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">{{ item.selectName ? item.selectName : item.name }}</li>
              class="block px-4 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-700 cursor-pointer">{{ item.selectName ?
              item.selectName : item.name }}</li>
            }
            <!-- <li (click)="sortBy('priceAsc')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Price Ascending</li>
            <li (click)="sortBy('priceDesc')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Price Descending</li>
            <li (click)="sortBy('creationDateFirst')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Creation Date First</li>
            <li (click)="sortBy('creationDateLast')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Creation Date Last</li>
            <li (click)="sortBy(null)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Default Sorting</li> -->
          </ul>
        </div>
      </div>
      }
-      <button type="button"
+      <button
-        class="flex text-sm bg-neutral-400 rounded-full md:me-0 focus:ring-4 focus:ring-neutral-300 dark:focus:ring-neutral-600"
+        type="button"
-        id="user-menu-button" aria-expanded="false" [attr.data-dropdown-toggle]="user ? 'user-login' : 'user-unknown'">
+        class="flex text-sm bg-gray-400 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
        id="user-menu-button"
        aria-expanded="false"
        [attr.data-dropdown-toggle]="user ? 'user-login' : 'user-unknown'"
        data-dropdown-placement="bottom"
      >
        <span class="sr-only">Open user menu</span>
-        @if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
+        @if(user?.hasProfile){
-        <img class="w-8 h-8 rounded-full object-cover" src="{{ profileUrl }}"
+        <img class="w-8 h-8 rounded-full object-cover" src="{{ profileUrl }}" alt="user photo" />
          alt="{{ user?.firstname }} {{ user?.lastname }} profile photo" width="32" height="32" />
        } @else {
        <i class="flex justify-center items-center text-stone-50 w-8 h-8 rounded-full fa-solid fa-bars"></i>
        }
      </button>
      <!-- Dropdown menu -->
      @if(user){
-      <div
+      <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-login">
        class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-neutral-100 rounded-lg shadow dark:bg-neutral-700 dark:divide-neutral-600"
        id="user-login">
        <div class="px-4 py-3">
-          <span class="block text-sm text-neutral-900 dark:text-white">Welcome, {{ user.firstname }} </span>
+          <span class="block text-sm text-gray-900 dark:text-white">Welcome, {{ user.firstname }} </span>
-          <span class="block text-sm text-neutral-500 truncate dark:text-neutral-400">{{ user.email }}</span>
+          <span class="block text-sm text-gray-500 truncate dark:text-gray-400">{{ user.email }}</span>
        </div>
        <ul class="py-2" aria-labelledby="user-menu-button">
          <li>
-            <a routerLink="/account" (click)="closeDropdown()"
+            <a routerLink="/account" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Account</a>
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">Account</a>
          </li>
-          @if((user.customerType==='professional' && user.customerSubType==='broker') || user.customerType==='seller' ||
+          @if(user.customerType==='professional' || user.customerType==='seller' || (authService.isAdmin() | async)){
          (authService.isAdmin() | async)){
          <li>
-            @if(user.customerType==='professional'){
+            @if(user.customerSubType==='broker'){
-            <a routerLink="/createBusinessListing" (click)="closeDropdown()"
+            <a routerLink="/createBusinessListing" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">Create
+              >Create Listing</a
-              Listing</a>
+            >
            }@else {
-            <a routerLink="/createCommercialPropertyListing" (click)="closeDropdown()"
+            <a routerLink="/createCommercialPropertyListing" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">Create
+              >Create Listing</a
-              Listing</a>
+            >
            }
          </li>
          <li>
-            <a routerLink="/myListings" (click)="closeDropdown()"
+            <a routerLink="/myListings" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Listings</a>
-              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">My
+          </li>
-              Listings</a>
+          <li>
            <a routerLink="/myFavorites" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Favorites</a>
          </li>
          }
          <li>
-            <a routerLink="/myFavorites" (click)="closeDropdown()"
+            <a routerLink="/emailUs" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">EMail Us</a>
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">My
              Favorites</a>
          </li>
          <li>
-            <a routerLink="/emailUs" (click)="closeDropdown()"
+            <a routerLink="/logout" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Logout</a>
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">EMail
              Us</a>
          </li>
          <li>
            <a routerLink="/logout" (click)="closeDropdown()"
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">Logout</a>
          </li>
        </ul>
        @if(authService.isAdmin() | async){
        <ul class="py-2">
          <li>
-            <a routerLink="admin/users" (click)="closeDropdown()"
+            <a routerLink="admin/users" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Users (Admin)</a>
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">Users
              (Admin)</a>
          </li>
        </ul>
        }
        <ul class="py-2 md:hidden">
          <li>
-            <a routerLink="/businessListings"
+            <a
-              [ngClass]="{ 'text-primary-600': isActive('/businessListings'), 'text-neutral-700': !isActive('/businessListings') }"
+              routerLink="/businessListings"
              [ngClass]="{ 'text-blue-700': isActive('/businessListings'), 'text-gray-700': !isActive('/businessListings') }"
              class="block px-4 py-2 text-sm font-semibold"
-              (click)="closeMenusAndSetCriteria('businessListings')">Businesses</a>
+              (click)="closeMenusAndSetCriteria('businessListings')"
              >Businesses</a
            >
          </li>
          @if ((numberOfCommercial$ | async) > 0) {
          <li>
-            <a routerLink="/commercialPropertyListings"
+            <a
-              [ngClass]="{ 'text-primary-600': isActive('/commercialPropertyListings'), 'text-neutral-700': !isActive('/commercialPropertyListings') }"
+              routerLink="/commercialPropertyListings"
              [ngClass]="{ 'text-blue-700': isActive('/commercialPropertyListings'), 'text-gray-700': !isActive('/commercialPropertyListings') }"
              class="block px-4 py-2 text-sm font-semibold"
-              (click)="closeMenusAndSetCriteria('commercialPropertyListings')">Properties</a>
+              (click)="closeMenusAndSetCriteria('commercialPropertyListings')"
              >Properties</a
            >
          </li>
          } @if ((numberOfBroker$ | async) > 0) {
          <li>
            <a
              routerLink="/brokerListings"
              [ngClass]="{ 'text-blue-700': isActive('/brokerListings'), 'text-gray-700': !isActive('/brokerListings') }"
              class="block px-4 py-2 text-sm font-semibold"
              (click)="closeMenusAndSetCriteria('brokerListings')"
              >Professionals</a
            >
          </li>
          }
          <li>
            <a routerLink="/brokerListings"
              [ngClass]="{ 'text-primary-600': isActive('/brokerListings'), 'text-neutral-700': !isActive('/brokerListings') }"
              class="block px-4 py-2 text-sm font-semibold"
              (click)="closeMenusAndSetCriteria('brokerListings')">Professionals</a>
          </li>
        </ul>
      </div>
      } @else {
-      <div
+      <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-unknown">
        class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-neutral-100 rounded-lg shadow dark:bg-neutral-700 dark:divide-neutral-600"
        id="user-unknown">
        <ul class="py-2" aria-labelledby="user-menu-button">
          <li>
-            <a routerLink="/login" [queryParams]="{ mode: 'login' }"
+            <a routerLink="/login" [queryParams]="{ mode: 'login' }" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Log In</a>
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">Log
              In</a>
          </li>
          <li>
-            <a routerLink="/login" [queryParams]="{ mode: 'register' }"
+            <a routerLink="/login" [queryParams]="{ mode: 'register' }" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Register</a>
              class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 dark:text-neutral-200 dark:hover:text-white">Sign
              Up</a>
          </li>
        </ul>
        <ul class="py-2 md:hidden">
          <li>
-            <a routerLink="/businessListings"
+            <a
-              [ngClass]="{ 'text-primary-600': isActive('/businessListings'), 'text-neutral-700': !isActive('/businessListings') }"
+              routerLink="/businessListings"
              [ngClass]="{ 'text-blue-700': isActive('/businessListings'), 'text-gray-700': !isActive('/businessListings') }"
              class="block px-4 py-2 text-sm font-bold"
-              (click)="closeMenusAndSetCriteria('businessListings')">Businesses</a>
+              (click)="closeMenusAndSetCriteria('businessListings')"
              >Businesses</a
            >
          </li>
          @if ((numberOfCommercial$ | async) > 0) {
          <li>
-            <a routerLink="/commercialPropertyListings"
+            <a
-              [ngClass]="{ 'text-primary-600': isActive('/commercialPropertyListings'), 'text-neutral-700': !isActive('/commercialPropertyListings') }"
+              routerLink="/commercialPropertyListings"
              [ngClass]="{ 'text-blue-700': isActive('/commercialPropertyListings'), 'text-gray-700': !isActive('/commercialPropertyListings') }"
              class="block px-4 py-2 text-sm font-bold"
-              (click)="closeMenusAndSetCriteria('commercialPropertyListings')">Properties</a>
+              (click)="closeMenusAndSetCriteria('commercialPropertyListings')"
              >Properties</a
            >
          </li>
          } @if ((numberOfBroker$ | async) > 0) {
          <li>
            <a
              routerLink="/brokerListings"
              [ngClass]="{ 'text-blue-700': isActive('/brokerListings'), 'text-gray-700': !isActive('/brokerListings') }"
              class="block px-4 py-2 text-sm font-bold"
              (click)="closeMenusAndSetCriteria('brokerListings')"
              >Professionals</a
            >
          </li>
          }
          <li>
            <a routerLink="/brokerListings"
              [ngClass]="{ 'text-primary-600': isActive('/brokerListings'), 'text-neutral-700': !isActive('/brokerListings') }"
              class="block px-4 py-2 text-sm font-bold"
              (click)="closeMenusAndSetCriteria('brokerListings')">Professionals</a>
          </li>
        </ul>
      </div>
      }
      <!-- <button
        data-collapse-toggle="navbar-user"
        type="button"
        class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
        aria-controls="navbar-user"
        aria-expanded="false"
      >
        <span class="sr-only">Open main menu</span>
        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
        </svg>
      </button> -->
    </div>
    <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
      <ul
-        class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-neutral-100 rounded-lg bg-neutral-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-neutral-800 md:dark:bg-neutral-900 dark:border-neutral-700">
+        class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"
      >
        <li>
-          <a routerLinkActive="active-link" routerLink="/businessListings"
+          <a
-            [ngClass]="{ 'bg-primary-600 text-white md:text-primary-600 md:bg-transparent md:dark:text-primary-500': isActive('/businessListings') }"
+            routerLinkActive="active-link"
-            class="block py-2 px-3 rounded hover:bg-neutral-100 md:hover:bg-transparent md:hover:text-primary-600 md:p-0 dark:text-white md:dark:hover:text-primary-500 dark:hover:bg-neutral-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-neutral-700 inline-flex items-center"
+            routerLink="/businessListings"
-            aria-current="page" (click)="closeMenusAndSetCriteria('businessListings')">
+            [ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/businessListings') }"
-            <img src="/assets/images/business_logo.png" alt="Business" class="w-5 h-5 mr-2 object-contain" width="20"
+            class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-              height="20" />
+            aria-current="page"
-            <span>Businesses</span>
+            (click)="closeMenusAndSetCriteria('businessListings')"
-          </a>
+            >Businesses</a
          >
        </li>
        @if ((numberOfCommercial$ | async) > 0) {
        <li>
-          <a routerLinkActive="active-link" routerLink="/commercialPropertyListings"
+          <a
-            [ngClass]="{ 'bg-primary-600 text-white md:text-primary-600 md:bg-transparent md:dark:text-primary-500': isActive('/commercialPropertyListings') }"
+            routerLinkActive="active-link"
-            class="block py-2 px-3 rounded hover:bg-neutral-100 md:hover:bg-transparent md:hover:text-primary-600 md:p-0 dark:text-white md:dark:hover:text-primary-500 dark:hover:bg-neutral-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-neutral-700 inline-flex items-center"
+            routerLink="/commercialPropertyListings"
-            (click)="closeMenusAndSetCriteria('commercialPropertyListings')">
+            [ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/commercialPropertyListings') }"
-            <img src="/assets/images/properties_logo.png" alt="Properties" class="w-5 h-5 mr-2 object-contain"
+            class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-              width="20" height="20" />
+            (click)="closeMenusAndSetCriteria('commercialPropertyListings')"
-            <span>Properties</span>
+            >Properties</a
-          </a>
+          >
        </li>
        } @if ((numberOfBroker$ | async) > 0) {
        <li>
          <a
            routerLinkActive="active-link"
            routerLink="/brokerListings"
            [ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/brokerListings') }"
            class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
            (click)="closeMenusAndSetCriteria('brokerListings')"
            >Professionals</a
          >
        </li>
        }
        <li>
          <a routerLinkActive="active-link" routerLink="/brokerListings"
            [ngClass]="{ 'bg-primary-600 text-white md:text-primary-600 md:bg-transparent md:dark:text-primary-500': isActive('/brokerListings') }"
            class="inline-flex items-center py-2 px-3 rounded hover:bg-neutral-100 md:hover:bg-transparent md:hover:text-primary-600 md:p-0 dark:text-white md:dark:hover:text-primary-500 dark:hover:bg-neutral-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-neutral-700"
            (click)="closeMenusAndSetCriteria('brokerListings')">
            <img src="/assets/images/icon_professionals.png" alt="Professionals"
              class="w-5 h-5 mr-2 object-contain bg-transparent" style="mix-blend-mode: darken;" width="20" height="20" />
            <span>Professionals</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Mobile filter button -->
  @if(isFilterUrl()){
  <div class="md:hidden flex justify-center pb-4">
-    <button (click)="toggleSortDropdown()" type="button" id="sortDropdownMobileButton" aria-label="Sort listings" aria-haspopup="listbox"
+    <button
-      class="mx-4 w-1/2 px-4 py-2 text-sm font-medium bg-white border border-neutral-200 rounded-lg hover:bg-neutral-100 hover:text-primary-600 focus:ring-2 focus:ring-primary-600 focus:text-primary-600 dark:bg-neutral-800 dark:text-neutral-400 dark:border-neutral-600 dark:hover:text-white dark:hover:bg-neutral-700"
+      (click)="openModal()"
-      [ngClass]="{ 'text-primary-500': selectOptions.getSortByOption(sortBy) !== 'Sort', 'text-neutral-900': selectOptions.getSortByOption(sortBy) === 'Sort' }">
+      type="button"
-      <i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(sortBy) }}
+      id="filterDropdownMobileButton"
      class="w-full mx-4 px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
    >
      <i class="fas fa-filter mr-2"></i>Filter ({{ getNumberOfFiltersSet() }})
    </button>
    <!-- Sorting -->
    <button
      (click)="toggleSortDropdown()"
      type="button"
      id="sortDropdownMobileButton"
      class="mx-4 w-1/2 px-4 py-2 text-sm font-medium bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
      [ngClass]="{ 'text-blue-500': selectOptions.getSortByOption(criteria?.sortBy) !== 'Sort', 'text-gray-900': selectOptions.getSortByOption(criteria?.sortBy) === 'Sort' }"
    >
      <i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(criteria?.sortBy) }}
    </button>
  </div>
-</nav>
+  }
 </nav>
--- a/bizmatch/src/app/components/header/header.component.ts
+++ b/bizmatch/src/app/components/header/header.component.ts
@ -1,215 +1,131 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { BreakpointObserver } from '@angular/cdk/layout';
-import { Component, HostListener, OnDestroy, OnInit, AfterViewInit, PLATFORM_ID, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { Component, HostListener } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
-import { APP_ICONS } from '../../utils/fontawesome-icons';
+import { faUserGear } from '@fortawesome/free-solid-svg-icons';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Collapse, Dropdown, initFlowbite } from 'flowbite';
-import { filter, Observable, Subject, takeUntil } from 'rxjs';
+import { filter, Observable, Subject, Subscription } from 'rxjs';
 import { SortByOptions, User } from '../../../../../bizmatch-server/src/models/db.model';
-import { emailToDirName, KeycloakUser, KeyValueAsSortBy, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
+import { BusinessListingCriteria, CommercialPropertyListingCriteria, emailToDirName, KeycloakUser, KeyValueAsSortBy, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../environments/environment';
 import { AuthService } from '../../services/auth.service';
-import { FilterStateService } from '../../services/filter-state.service';
+import { CriteriaChangeService } from '../../services/criteria-change.service';
 import { ListingsService } from '../../services/listings.service';
 import { SearchService } from '../../services/search.service';
 import { SelectOptionsService } from '../../services/select-options.service';
 import { SharedService } from '../../services/shared.service';
 import { UserService } from '../../services/user.service';
-import { map2User } from '../../utils/utils';
+import { assignProperties, compareObjects, createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, getCriteriaProxy, map2User } from '../../utils/utils';
-
+import { DropdownComponent } from '../dropdown/dropdown.component';
 import { ModalService } from '../search-modal/modal.service';
@UntilDestroy()
@Component({
  selector: 'header',
  standalone: true,
-  imports: [CommonModule, RouterModule, FormsModule],
+  imports: [CommonModule, RouterModule, DropdownComponent, FormsModule],
  templateUrl: './header.component.html',
  styleUrl: './header.component.scss',
 })
-export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
+export class HeaderComponent {
  public buildVersion = environment.buildVersion;
  user$: Observable<KeycloakUser>;
  keycloakUser: KeycloakUser;
  user: User;
  activeItem;
-  faUserGear = APP_ICONS.faUserGear;
+  faUserGear = faUserGear;
  profileUrl: string;
  env = environment;
  private filterDropdown: Dropdown | null = null;
  isMobile: boolean = false;
  private destroy$ = new Subject<void>();
  prompt: string;
-  private platformId = inject(PLATFORM_ID);
+  private subscription: Subscription;
-  private isBrowser = isPlatformBrowser(this.platformId);
+  criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
-
+  private routerSubscription: Subscription | undefined;
-  // Aktueller Listing-Typ basierend auf Route
+  baseRoute: string;
-  currentListingType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings' | null = null;
+  sortDropdownVisible: boolean;
  // Sortierung
  sortDropdownVisible: boolean = false;
  sortByOptions: KeyValueAsSortBy[] = [];
  sortBy: SortByOptions = null;
  // Observable für Anzahl der Listings
  numberOfBroker$: Observable<number>;
  numberOfCommercial$: Observable<number>;
  constructor(
    private router: Router,
    private userService: UserService,
    private sharedService: SharedService,
    private breakpointObserver: BreakpointObserver,
    private modalService: ModalService,
    private searchService: SearchService,
-    private filterStateService: FilterStateService,
+    private criteriaChangeService: CriteriaChangeService,
    public selectOptions: SelectOptionsService,
    public authService: AuthService,
    private listingService: ListingsService,
-  ) { }
+  ) {}
  @HostListener('document:click', ['$event'])
  handleGlobalClick(event: Event) {
    const target = event.target as HTMLElement;
-    // Don't close sort dropdown when clicking on sort buttons or user menu button
+    if (target.id !== 'sortDropdownButton' && target.id !== 'sortDropdownMobileButton') {
    const excludedIds = ['sortDropdownButton', 'sortDropdownMobileButton', 'user-menu-button'];
    if (!excludedIds.includes(target.id) && !target.closest('#user-menu-button')) {
      this.sortDropdownVisible = false;
      // Close User Menu if clicked outside
      // We check if the click was inside the menu containers
      const userLogin = document.getElementById('user-login');
      const userUnknown = document.getElementById('user-unknown');
      const clickedInsideMenu = (userLogin && userLogin.contains(target)) || (userUnknown && userUnknown.contains(target));
      if (!clickedInsideMenu) {
        this.closeDropdown();
      }
    }
  }
  async ngOnInit() {
    // User Setup
    const token = await this.authService.getToken();
    this.keycloakUser = map2User(token);
    if (this.keycloakUser) {
      this.user = await this.userService.getByMail(this.keycloakUser?.email);
      this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
    }
    this.numberOfBroker$ = this.userService.getNumberOfBroker(createEmptyUserListingCriteria());
    this.numberOfCommercial$ = this.listingService.getNumberOfListings(createEmptyCommercialPropertyListingCriteria(), 'commercialProperty');
    setTimeout(() => {
      initFlowbite();
    }, 10);
-    // Lade Anzahl der Listings
+    this.sharedService.currentProfilePhoto.subscribe(photoUrl => {
    this.numberOfBroker$ = this.userService.getNumberOfBroker(this.createEmptyUserListingCriteria());
    this.numberOfCommercial$ = this.listingService.getNumberOfListings('commercialProperty');
    // Flowbite is now initialized once in AppComponent
    // Profile Photo Updates
    this.sharedService.currentProfilePhoto.pipe(untilDestroyed(this)).subscribe(photoUrl => {
      this.profileUrl = photoUrl;
    });
-    // User Updates - re-initialize Flowbite when user state changes
+    this.checkCurrentRoute(this.router.url);
-    // This ensures the dropdown bindings are updated when the dropdown target changes
+    this.setupSortByOptions();
-    this.userService.currentUser.pipe(untilDestroyed(this)).subscribe(u => {
+
-      const previousUser = this.user;
+    this.routerSubscription = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: any) => {
-      this.user = u;
+      this.checkCurrentRoute(event.urlAfterRedirects);
-      // Re-initialize Flowbite if user logged in/out state changed
+      this.setupSortByOptions();
      if ((previousUser === null) !== (u === null) && this.isBrowser) {
        setTimeout(() => initFlowbite(), 50);
      }
    });
-    // Router Events
+    this.userService.currentUser.pipe(untilDestroyed(this)).subscribe(u => {
-    this.router.events
+      this.user = u;
-      .pipe(
+    });
        filter(event => event instanceof NavigationEnd),
        untilDestroyed(this),
      )
      .subscribe((event: NavigationEnd) => {
        this.checkCurrentRoute(event.urlAfterRedirects);
      });
    // Initial Route Check
    this.checkCurrentRoute(this.router.url);
  }
  private checkCurrentRoute(url: string): void {
-    const baseRoute = url.split('/')[1];
+    this.baseRoute = url.split('/')[1]; // Nimmt den ersten Teil der Route nach dem ersten '/'
-
+    const specialRoutes = [, '', ''];
-    // Bestimme den aktuellen Listing-Typ
+    this.criteria = getCriteriaProxy(this.baseRoute, this);
-    if (baseRoute === 'businessListings') {
+    // this.searchService.search(this.criteria);
      this.currentListingType = 'businessListings';
    } else if (baseRoute === 'commercialPropertyListings') {
      this.currentListingType = 'commercialPropertyListings';
    } else if (baseRoute === 'brokerListings') {
      this.currentListingType = 'brokerListings';
    } else {
      this.currentListingType = null;
      return; // Keine relevante Route für Filter/Sort
    }
    // Setup für diese Route
    this.setupSortByOptions();
    this.subscribeToStateChanges();
  }
-
+  setupSortByOptions() {
  private subscribeToStateChanges(): void {
    if (!this.currentListingType) return;
    // Abonniere State-Änderungen für den aktuellen Listing-Typ
    this.filterStateService
      .getState$(this.currentListingType)
      .pipe(takeUntil(this.destroy$))
      .subscribe(state => {
        this.sortBy = state.sortBy;
      });
  }
  private setupSortByOptions(): void {
    this.sortByOptions = [];
-
+    if (this.isProfessionalListing()) {
-    if (!this.currentListingType) return;
+      this.sortByOptions = [...this.sortByOptions, ...this.selectOptions.sortByOptions.filter(s => s.type === 'professional')];
-
+    }
-    switch (this.currentListingType) {
+    if (this.isBusinessListing()) {
-      case 'brokerListings':
+      this.sortByOptions = [...this.sortByOptions, ...this.selectOptions.sortByOptions.filter(s => s.type === 'business' || s.type === 'listing')];
-        this.sortByOptions = [...this.selectOptions.sortByOptions.filter(s => s.type === 'professional')];
+    }
-        break;
+    if (this.isCommercialPropertyListing()) {
-      case 'businessListings':
+      this.sortByOptions = [...this.sortByOptions, ...this.selectOptions.sortByOptions.filter(s => s.type === 'commercial' || s.type === 'listing')];
        this.sortByOptions = [...this.selectOptions.sortByOptions.filter(s => s.type === 'business' || s.type === 'listing')];
        break;
      case 'commercialPropertyListings':
        this.sortByOptions = [...this.selectOptions.sortByOptions.filter(s => s.type === 'commercial' || s.type === 'listing')];
        break;
    }
    // Füge generische Optionen hinzu (ohne type)
    this.sortByOptions = [...this.sortByOptions, ...this.selectOptions.sortByOptions.filter(s => !s.type)];
  }
-
+  ngAfterViewInit() {}
  sortByFct(selectedSortBy: SortByOptions): void {
    if (!this.currentListingType) return;
    this.sortDropdownVisible = false;
    // Update sortBy im State
    this.filterStateService.updateSortBy(this.currentListingType, selectedSortBy);
    // Trigger search
    this.searchService.search(this.currentListingType);
  }
  async openModal() {
-    if (!this.currentListingType) return;
+    const modalResult = await this.modalService.showModal(this.criteria);
    const criteria = this.filterStateService.getCriteria(this.currentListingType);
    const modalResult = await this.modalService.showModal(criteria);
    if (modalResult.accepted) {
-      this.searchService.search(this.currentListingType);
+      this.searchService.search(this.criteria);
    } else {
      this.criteria = assignProperties(this.criteria, modalResult.criteria);
    }
  }
  navigateWithState(dest: string, state: any) {
    this.router.navigate([dest], { state: state });
  }
@ -217,26 +133,22 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
  isActive(route: string): boolean {
    return this.router.url === route;
  }
  isFilterUrl(): boolean {
    return ['/businessListings', '/commercialPropertyListings', '/brokerListings'].includes(this.router.url);
  }
  isBusinessListing(): boolean {
-    return this.router.url === '/businessListings';
+    return ['/businessListings'].includes(this.router.url);
  }
  isCommercialPropertyListing(): boolean {
-    return this.router.url === '/commercialPropertyListings';
+    return ['/commercialPropertyListings'].includes(this.router.url);
  }
  isProfessionalListing(): boolean {
-    return this.router.url === '/brokerListings';
+    return ['/brokerListings'].includes(this.router.url);
  }
-
+  // isSortingUrl(): boolean {
  //   return ['/businessListings', '/commercialPropertyListings'].includes(this.router.url);
  // }
  closeDropdown() {
    if (!this.isBrowser) return;
    const dropdownButton = document.getElementById('user-menu-button');
    const dropdownMenu = this.user ? document.getElementById('user-login') : document.getElementById('user-unknown');
@ -245,10 +157,7 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
      dropdown.hide();
    }
  }
  closeMobileMenu() {
    if (!this.isBrowser) return;
    const targetElement = document.getElementById('navbar-user');
    const triggerElement = document.querySelector('[data-collapse-toggle="navbar-user"]');
@ -257,66 +166,36 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
      collapse.collapse();
    }
  }
  closeMenusAndSetCriteria(path: string) {
    this.closeDropdown();
    this.closeMobileMenu();
-
+    const criteria = getCriteriaProxy(path, this);
-    // Bestimme Listing-Typ aus dem Pfad
+    criteria.page = 1;
-    let listingType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings' | null = null;
+    criteria.start = 0;
    if (path === 'businessListings') {
      listingType = 'businessListings';
    } else if (path === 'commercialPropertyListings') {
      listingType = 'commercialPropertyListings';
    } else if (path === 'brokerListings') {
      listingType = 'brokerListings';
    }
    if (listingType) {
      // Reset Pagination beim Wechsel zwischen Views
      this.filterStateService.updateCriteria(listingType, {
        page: 1,
        start: 0,
      });
    }
  }
  toggleSortDropdown() {
    this.sortDropdownVisible = !this.sortDropdownVisible;
  }
  get isProfessional() {
    return this.user?.customerType === 'professional';
  }
  // Helper method für leere UserListingCriteria
  private createEmptyUserListingCriteria(): UserListingCriteria {
    return {
      criteriaType: 'brokerListings',
      types: [],
      state: null,
      city: null,
      radius: null,
      searchType: 'exact' as const,
      brokerName: null,
      companyName: null,
      counties: [],
      prompt: null,
      page: 1,
      start: 0,
      length: 12,
    };
  }
  ngAfterViewInit(): void {
    // Flowbite initialization is now handled manually or via AppComponent
  }
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
  getNumberOfFiltersSet() {
    if (this.criteria?.criteriaType === 'brokerListings') {
      return compareObjects(createEmptyUserListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius', 'sortBy']);
    } else if (this.criteria?.criteriaType === 'businessListings') {
      return compareObjects(createEmptyBusinessListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius', 'sortBy']);
    } else if (this.criteria?.criteriaType === 'commercialPropertyListings') {
      return compareObjects(createEmptyCommercialPropertyListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius', 'sortBy']);
    } else {
      return 0;
    }
  }
  sortBy(sortBy: SortByOptions) {
    this.criteria.sortBy = sortBy;
    this.sortDropdownVisible = false;
    this.searchService.search(this.criteria);
  }
  toggleSortDropdown() {
    this.sortDropdownVisible = !this.sortDropdownVisible;
  }
 }
--- a/bizmatch/src/app/components/login-register/login-register.component.html
+++ b/bizmatch/src/app/components/login-register/login-register.component.html
@ -1,13 +1,5 @@
-<div class="flex flex-col items-center justify-center min-h-screen">
+<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-  <div class="bg-white p-8 rounded-lg drop-shadow-custom-bg w-full max-w-md">
+  <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
    <!-- Home Button -->
    <div class="flex justify-end mb-4">
      <a [routerLink]="['/home']" class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
        <i class="fas fa-home mr-2"></i>
        Home
      </a>
    </div>
    <h2 class="text-2xl font-bold mb-6 text-center text-gray-800">
      {{ isLoginMode ? 'Login' : 'Sign Up' }}
    </h2>
@ -33,9 +25,9 @@
          type="email"
          [(ngModel)]="email"
          placeholder="Please enter E-Mail Address"
-          class="w-full px-3 py-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          class="w-full px-3 py-2 pl-10 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        />
-        <fa-icon [icon]="envelope" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-600"></fa-icon>
+        <fa-icon [icon]="envelope" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></fa-icon>
      </div>
    </div>
@ -48,9 +40,9 @@
          type="password"
          [(ngModel)]="password"
          placeholder="Please enter Password"
-          class="w-full px-3 py-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          class="w-full px-3 py-2 pl-10 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        />
-        <fa-icon [icon]="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-600"></fa-icon>
+        <fa-icon [icon]="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></fa-icon>
      </div>
    </div>
@ -63,9 +55,9 @@
          type="password"
          [(ngModel)]="confirmPassword"
          placeholder="Repeat Password"
-          class="w-full px-3 py-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          class="w-full px-3 py-2 pl-10 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        />
-        <fa-icon [icon]="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-600"></fa-icon>
+        <fa-icon [icon]="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></fa-icon>
      </div>
    </div>
@ -79,7 +71,7 @@
      <!-- <fa-icon [icon]="isLoginMode ? 'fas fas-user-plus' : 'userplus'" class="mr-2"></fa-icon> -->
      <i *ngIf="isLoginMode" class="fa-solid fa-user-plus mr-2"></i>
      <i *ngIf="!isLoginMode" class="fa-solid fa-arrow-right mr-2"></i>
-      {{ isLoginMode ? 'Sign in with Email' : 'Sign Up' }}
+      {{ isLoginMode ? 'Sign in with Email' : 'Register' }}
    </button>
    <!-- Trennlinie -->
@ -91,6 +83,12 @@
    <!-- Google Button -->
    <button (click)="loginWithGoogle()" class="w-full flex items-center justify-center bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 py-2.5 rounded-lg transition-colors duration-200">
      <!-- <svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M12.24 10.32V13.8H15.48C15.336 14.688 14.568 16.368 12.24 16.368C10.224 16.368 8.568 14.688 8.568 12.672C8.568 10.656 10.224 8.976 12.24 8.976C13.32 8.976 14.16 9.432 14.688 10.08L16.704 8.208C15.528 7.032 14.04 6.384 12.24 6.384C8.832 6.384 6 9.216 6 12.672C6 16.128 8.832 18.96 12.24 18.96C15.696 18.96 18.12 16.656 18.12 12.672C18.12 11.952 18.024 11.28 17.88 10.656L12.24 10.32Z"
          fill="currentColor"
        />
      </svg> -->
      <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
        <path
          fill="#FFC107"
@ -102,5 +100,17 @@
      </svg>
      Continue with Google
    </button>
    <!-- <button (click)="loginWithGoogle()" class="bg-white text-blue-600 px-6 py-3 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 flex items-center justify-center">
      <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
        <path
          fill="#FFC107"
          d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
        />
        <path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" />
        <path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0124 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" />
        <path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 01-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" />
      </svg>
      Continue with Google
    </button> -->
  </div>
 </div>
--- a/bizmatch/src/app/components/login-register/login-register.component.ts
+++ b/bizmatch/src/app/components/login-register/login-register.component.ts
@ -1,15 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { APP_ICONS } from '../../utils/fontawesome-icons';
+import { faArrowRight, faEnvelope, faLock, faUserPlus } from '@fortawesome/free-solid-svg-icons';
 import { AuthService } from '../../services/auth.service';
 import { LoadingService } from '../../services/loading.service';
@Component({
  selector: 'app-login-register',
  standalone: true,
-  imports: [CommonModule, FormsModule, FontAwesomeModule, RouterModule],
+  imports: [CommonModule, FormsModule, FontAwesomeModule],
  templateUrl: './login-register.component.html',
 })
 export class LoginRegisterComponent {
@ -18,10 +18,10 @@ export class LoginRegisterComponent {
  confirmPassword: string = '';
  isLoginMode: boolean = true; // true: Login, false: Registration
  errorMessage: string = '';
-  envelope = APP_ICONS.faEnvelope;
+  envelope = faEnvelope;
-  lock = APP_ICONS.faLock;
+  lock = faLock;
-  arrowRight = APP_ICONS.faArrowRight;
+  arrowRight = faArrowRight;
-  userplus = APP_ICONS.faUserPlus;
+  userplus = faUserPlus;
  constructor(private authService: AuthService, private route: ActivatedRoute, private router: Router, private loadingService: LoadingService) {}
  ngOnInit(): void {
@ -45,7 +45,7 @@ export class LoginRegisterComponent {
        .loginWithEmail(this.email, this.password)
        .then(userCredential => {
          console.log('Successfully logged in:', userCredential);
-          this.router.navigate([`myListing`]);
+          this.router.navigate([`home`]);
        })
        .catch(error => {
          console.error('Error during email login:', error);
@ -85,7 +85,7 @@ export class LoginRegisterComponent {
      .loginWithGoogle()
      .then(userCredential => {
        console.log('Successfully logged in with Google:', userCredential);
-        this.router.navigate([`myListing`]);
+        this.router.navigate([`home`]);
      })
      .catch(error => {
        console.error('Error during Google login:', error);
--- a/bizmatch/src/app/components/not-found/not-found.component.html
+++ b/bizmatch/src/app/components/not-found/not-found.component.html
@ -14,11 +14,6 @@
 </section> -->
 <section class="bg-white dark:bg-gray-900">
  <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
    <!-- Breadcrumbs -->
    <div class="mb-4">
      <app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
    </div>
    <div class="mx-auto max-w-screen-sm text-center">
      <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-blue-700 dark:text-blue-500">404</h1>
      <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">Something's missing.</p>
--- a/bizmatch/src/app/components/not-found/not-found.component.ts
+++ b/bizmatch/src/app/components/not-found/not-found.component.ts
@ -1,32 +1,11 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { SeoService } from '../../services/seo.service';
 import { BreadcrumbItem, BreadcrumbsComponent } from '../breadcrumbs/breadcrumbs.component';
@Component({
  selector: 'app-not-found',
  standalone: true,
-  imports: [CommonModule, RouterModule, BreadcrumbsComponent],
+  imports: [CommonModule, RouterModule],
  templateUrl: './not-found.component.html',
 })
-export class NotFoundComponent implements OnInit {
+export class NotFoundComponent {}
  breadcrumbs: BreadcrumbItem[] = [
    { label: 'Home', url: '/home', icon: 'fas fa-home' },
    { label: '404 - Page Not Found' }
  ];
  constructor(private seoService: SeoService) {}
  ngOnInit(): void {
    // Set noindex to prevent 404 pages from being indexed
    this.seoService.setNoIndex();
    // Set appropriate meta tags for 404 page
    this.seoService.updateMetaTags({
      title: '404 - Page Not Found | BizMatch',
      description: 'The page you are looking for could not be found. Return to BizMatch to browse businesses for sale or commercial properties.',
      type: 'website'
    });
  }
 }
--- a/bizmatch/src/app/components/search-modal/modal.service.ts
+++ b/bizmatch/src/app/components/search-modal/modal.service.ts
@ -1,3 +1,4 @@
 // 1. Shared Service (modal.service.ts)
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { BusinessListingCriteria, CommercialPropertyListingCriteria, ModalResult, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
@ -6,33 +7,28 @@ import { BusinessListingCriteria, CommercialPropertyListingCriteria, ModalResult
  providedIn: 'root',
 })
 export class ModalService {
-  private modalVisibleSubject = new BehaviorSubject<{ visible: boolean; type?: string }>({ visible: false });
+  private modalVisibleSubject = new BehaviorSubject<boolean>(false);
  private messageSubject = new BehaviorSubject<BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria>(null);
  private resolvePromise!: (value: ModalResult) => void;
-  modalVisible$: Observable<{ visible: boolean; type?: string }> = this.modalVisibleSubject.asObservable();
+  modalVisible$: Observable<boolean> = this.modalVisibleSubject.asObservable();
  message$: Observable<BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria> = this.messageSubject.asObservable();
  showModal(message: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria): Promise<ModalResult> {
    this.messageSubject.next(message);
-    this.modalVisibleSubject.next({ visible: true, type: message.criteriaType });
+    this.modalVisibleSubject.next(true);
    return new Promise<ModalResult>(resolve => {
      this.resolvePromise = resolve;
    });
  }
  sendCriteria(message: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria): Promise<ModalResult> {
    this.messageSubject.next(message);
    return new Promise<ModalResult>(resolve => {
      this.resolvePromise = resolve;
    });
  }
  accept(): void {
-    this.modalVisibleSubject.next({ visible: false });
+    this.modalVisibleSubject.next(false);
    this.resolvePromise({ accepted: true });
  }
  reject(backupCriteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria): void {
-    this.modalVisibleSubject.next({ visible: false });
+    this.modalVisibleSubject.next(false);
    this.resolvePromise({ accepted: false, criteria: backupCriteria });
  }
 }
--- a/bizmatch/src/app/components/search-modal/search-modal-broker.component.html
+++ b/bizmatch/src/app/components/search-modal/search-modal-broker.component.html
@ -1,260 +0,0 @@
 <div
  *ngIf="isModal && (modalService.modalVisible$ | async)?.visible && (modalService.modalVisible$ | async)?.type === 'brokerListings'"
  class="fixed inset-0 bg-neutral-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50"
 >
  <div class="relative w-full h-screen max-h-screen">
    <div class="relative bg-white rounded-lg shadow h-full">
      <div class="flex items-start justify-between p-4 border-b rounded-t bg-primary-600">
        <h3 class="text-xl font-semibold text-white p-2 rounded">Professional Search</h3>
        <button (click)="closeAndSearch()" type="button" class="text-white bg-transparent hover:bg-gray-200 hover:text-neutral-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center">
          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
          </svg>
          <span class="sr-only">Close Modal</span>
        </button>
      </div>
      <div class="p-6 space-y-6">
        <div class="flex space-x-4 mb-4">
          <button class="text-primary-600 font-medium border-b-2 border-primary-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
          <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
          <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
            Clear all Filter
            <div class="tooltip-arrow" data-popper-arrow></div>
          </div>
        </div>
        <!-- Display active filters as tags -->
        <div class="flex flex-wrap gap-2 mb-4" *ngIf="hasActiveFilters()">
          <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.types?.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Types: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Professional Name: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.companyName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Company: {{ criteria.companyName }} <button (click)="removeFilter('companyName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.counties?.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Areas Served: {{ criteria.counties.join(', ') }} <button (click)="removeFilter('counties')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
        </div>
        @if(criteria.criteriaType==='brokerListings') {
        <div class="grid grid-cols-1 gap-6">
          <div class="space-y-4">
            <div>
              <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
              <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
            </div>
            <div>
              <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
            </div>
            <div *ngIf="criteria.city">
              <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
              <div class="flex items-center space-x-4">
                <label class="inline-flex items-center">
                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
                  <span class="ml-2">Exact City</span>
                </label>
                <label class="inline-flex items-center">
                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
                  <span class="ml-2">Radius Search</span>
                </label>
              </div>
            </div>
            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
              <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
              <div class="flex flex-wrap">
                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
                <button
                  type="button"
                  class="px-3 py-2 text-xs font-medium text-center border border-neutral-200 hover:bg-gray-500 hover:text-white"
                  [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-neutral-900 bg-white'"
                  (click)="setRadius(radius)"
                >
                  {{ radius }}
                </button>
                }
              </div>
            </div>
            <div>
              <label class="block mb-2 text-sm font-medium text-neutral-900">Professional Type</label>
              <ng-select
                class="custom"
                [items]="selectOptions.customerSubTypes"
                bindLabel="name"
                bindValue="value"
                [ngModel]="criteria.types"
                (ngModelChange)="onCategoryChange($event)"
                [multiple]="true"
                [closeOnSelect]="true"
                placeholder="Select professional types"
              ></ng-select>
            </div>
            <div>
              <label for="brokerName" class="block mb-2 text-sm font-medium text-neutral-900">Professional Name</label>
              <input
                type="text"
                id="brokerName"
                [ngModel]="criteria.brokerName"
                (ngModelChange)="updateCriteria({ brokerName: $event })"
                class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
                placeholder="e.g. John Smith"
              />
            </div>
            <div>
              <label for="companyName" class="block mb-2 text-sm font-medium text-neutral-900">Company Name</label>
              <input
                type="text"
                id="companyName"
                [ngModel]="criteria.companyName"
                (ngModelChange)="updateCriteria({ companyName: $event })"
                class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
                placeholder="e.g. ABC Brokers"
              />
            </div>
            <div>
              <label class="block mb-2 text-sm font-medium text-neutral-900">Counties / Areas Served</label>
              <ng-select
                class="custom"
                [items]="counties$ | async"
                [multiple]="true"
                [loading]="countyLoading"
                [typeahead]="countyInput$"
                [ngModel]="criteria.counties"
                (ngModelChange)="onCountiesChange($event)"
                [closeOnSelect]="true"
                placeholder="Type to search counties"
              ></ng-select>
            </div>
          </div>
        </div>
        }
      </div>
    </div>
  </div>
 </div>
 <div *ngIf="!isModal" class="space-y-6 pb-10">
  <div class="flex space-x-4 mb-4">
    <h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
    <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
    <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
      Clear all Filter
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
  </div>
  <!-- Display active filters as tags -->
  <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
    <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.types?.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Types: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Professional Name: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.companyName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Company: {{ criteria.companyName }} <button (click)="removeFilter('companyName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.counties?.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Areas Served: {{ criteria.counties.join(', ') }} <button (click)="removeFilter('counties')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
  </div>
  @if(criteria.criteriaType==='brokerListings') {
  <div class="space-y-4">
    <div>
      <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
      <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
    </div>
    <div>
      <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
    </div>
    <div *ngIf="criteria.city">
      <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
      <div class="flex items-center space-x-4">
        <label class="inline-flex items-center">
          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
          <span class="ml-2">Exact City</span>
        </label>
        <label class="inline-flex items-center">
          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
          <span class="ml-2">Radius Search</span>
        </label>
      </div>
    </div>
    <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
      <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
      <div class="flex flex-wrap">
        @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
        <button
          type="button"
          class="px-3 py-2 text-xs font-medium text-center border border-neutral-200 hover:bg-gray-500 hover:text-white"
          [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-neutral-900 bg-white'"
          (click)="setRadius(radius)"
        >
          {{ radius }}
        </button>
        }
      </div>
    </div>
    <div>
      <label class="block mb-2 text-sm font-medium text-neutral-900">Professional Type</label>
      <ng-select
        class="custom"
        [items]="selectOptions.customerSubTypes"
        bindLabel="name"
        bindValue="value"
        [ngModel]="criteria.types"
        (ngModelChange)="onCategoryChange($event)"
        [multiple]="true"
        [closeOnSelect]="true"
        placeholder="Select professional types"
      ></ng-select>
    </div>
    <div>
      <label for="brokerName" class="block mb-2 text-sm font-medium text-neutral-900">Professional Name</label>
      <input
        type="text"
        id="brokerName"
        [ngModel]="criteria.brokerName"
        (ngModelChange)="updateCriteria({ brokerName: $event })"
        class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
        placeholder="e.g. John Smith"
      />
    </div>
    <div>
      <label for="companyName" class="block mb-2 text-sm font-medium text-neutral-900">Company Name</label>
      <input
        type="text"
        id="companyName"
        [ngModel]="criteria.companyName"
        (ngModelChange)="updateCriteria({ companyName: $event })"
        class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
        placeholder="e.g. ABC Brokers"
      />
    </div>
    <div>
      <label class="block mb-2 text-sm font-medium text-neutral-900">Counties / Areas Served</label>
      <ng-select
        class="custom"
        [items]="counties$ | async"
        [multiple]="true"
        [loading]="countyLoading"
        [typeahead]="countyInput$"
        [ngModel]="criteria.counties"
        (ngModelChange)="onCountiesChange($event)"
        [closeOnSelect]="true"
        placeholder="Type to search counties"
      ></ng-select>
    </div>
  </div>
  }
 </div>
--- a/bizmatch/src/app/components/search-modal/search-modal-broker.component.ts
+++ b/bizmatch/src/app/components/search-modal/search-modal-broker.component.ts
@ -1,316 +0,0 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { catchError, concat, debounceTime, distinctUntilChanged, map, Observable, of, Subject, switchMap, takeUntil, tap } from 'rxjs';
 import { CountyResult, GeoResult, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
 import { FilterStateService } from '../../services/filter-state.service';
 import { GeoService } from '../../services/geo.service';
 import { SearchService } from '../../services/search.service';
 import { SelectOptionsService } from '../../services/select-options.service';
 import { UserService } from '../../services/user.service';
 import { ValidatedCityComponent } from '../validated-city/validated-city.component';
 import { ModalService } from './modal.service';
@UntilDestroy()
@Component({
  selector: 'app-search-modal-broker',
  standalone: true,
  imports: [CommonModule, FormsModule, NgSelectModule, ValidatedCityComponent],
  templateUrl: './search-modal-broker.component.html',
  styleUrls: ['./search-modal.component.scss'],
 })
 export class SearchModalBrokerComponent implements OnInit, OnDestroy {
  @Input() isModal: boolean = true;
  private destroy$ = new Subject<void>();
  private searchDebounce$ = new Subject<void>();
  // State
  criteria: UserListingCriteria;
  backupCriteria: any;
  // Geo search
  counties$: Observable<CountyResult[]>;
  countyLoading = false;
  countyInput$ = new Subject<string>();
  // Results count
  numberOfResults$: Observable<number>;
  cancelDisable = false;
  constructor(
    public selectOptions: SelectOptionsService,
    public modalService: ModalService,
    private geoService: GeoService,
    private filterStateService: FilterStateService,
    private userService: UserService,
    private searchService: SearchService,
  ) {}
  ngOnInit(): void {
    // Load counties
    this.loadCounties();
    if (this.isModal) {
      // Modal mode: Wait for messages from ModalService
      this.modalService.message$.pipe(untilDestroyed(this)).subscribe(criteria => {
        if (criteria?.criteriaType === 'brokerListings') {
          this.initializeWithCriteria(criteria);
        }
      });
      this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
        if (val.visible && val.type === 'brokerListings') {
          // Reset pagination when modal opens
          if (this.criteria) {
            this.criteria.page = 1;
            this.criteria.start = 0;
          }
        }
      });
    } else {
      // Embedded mode: Subscribe to state changes
      this.subscribeToStateChanges();
    }
    // Setup debounced search
    this.searchDebounce$.pipe(debounceTime(400), takeUntil(this.destroy$)).subscribe(() => {
      this.triggerSearch();
    });
  }
  private initializeWithCriteria(criteria: UserListingCriteria): void {
    this.criteria = criteria;
    this.backupCriteria = JSON.parse(JSON.stringify(criteria));
    this.setTotalNumberOfResults();
  }
  private subscribeToStateChanges(): void {
    if (!this.isModal) {
      this.filterStateService
        .getState$('brokerListings')
        .pipe(takeUntil(this.destroy$))
        .subscribe(state => {
          this.criteria = { ...state.criteria };
          this.setTotalNumberOfResults();
        });
    }
  }
  private loadCounties(): void {
    this.counties$ = concat(
      of([]), // default items
      this.countyInput$.pipe(
        distinctUntilChanged(),
        tap(() => (this.countyLoading = true)),
        switchMap(term =>
          this.geoService.findCountiesStartingWith(term).pipe(
            catchError(() => of([])),
            map(counties => counties.map(county => county.name)),
            tap(() => (this.countyLoading = false)),
          ),
        ),
      ),
    );
  }
  // Filter removal methods
  removeFilter(filterType: string): void {
    const updates: any = {};
    switch (filterType) {
      case 'state':
        updates.state = null;
        updates.city = null;
        updates.radius = null;
        updates.searchType = 'exact';
        break;
      case 'city':
        updates.city = null;
        updates.radius = null;
        updates.searchType = 'exact';
        break;
      case 'types':
        updates.types = [];
        break;
      case 'brokerName':
        updates.brokerName = null;
        break;
      case 'companyName':
        updates.companyName = null;
        break;
      case 'counties':
        updates.counties = [];
        break;
    }
    this.updateCriteria(updates);
  }
  // Professional type handling
  onCategoryChange(selectedCategories: string[]): void {
    this.updateCriteria({ types: selectedCategories });
  }
  categoryClicked(checked: boolean, value: string): void {
    const types = [...(this.criteria.types || [])];
    if (checked) {
      if (!types.includes(value)) {
        types.push(value);
      }
    } else {
      const index = types.indexOf(value);
      if (index > -1) {
        types.splice(index, 1);
      }
    }
    this.updateCriteria({ types });
  }
  // Counties handling
  onCountiesChange(selectedCounties: string[]): void {
    this.updateCriteria({ counties: selectedCounties });
  }
  // Location handling
  setState(state: string): void {
    const updates: any = { state };
    if (!state) {
      updates.city = null;
      updates.radius = null;
      updates.searchType = 'exact';
    }
    this.updateCriteria(updates);
  }
  setCity(city: any): void {
    const updates: any = {};
    if (city) {
      updates.city = city;
      updates.state = city.state;
      // Automatically set radius to 50 miles and enable radius search
      updates.searchType = 'radius';
      updates.radius = 50;
    } else {
      updates.city = null;
      updates.radius = null;
      updates.searchType = 'exact';
    }
    this.updateCriteria(updates);
  }
  setRadius(radius: number): void {
    this.updateCriteria({ radius });
  }
  onCriteriaChange(): void {
    this.triggerSearch();
  }
  // Debounced search for text inputs
  debouncedSearch(): void {
    this.searchDebounce$.next();
  }
  // Clear all filters
  clearFilter(): void {
    if (this.isModal) {
      // In modal: Reset locally
      const defaultCriteria = this.getDefaultCriteria();
      this.criteria = defaultCriteria;
      this.setTotalNumberOfResults();
    } else {
      // Embedded: Use state service
      this.filterStateService.clearFilters('brokerListings');
    }
  }
  // Modal-specific methods
  closeAndSearch(): void {
    if (this.isModal) {
      // Save changes to state
      this.filterStateService.setCriteria('brokerListings', this.criteria);
      this.modalService.accept();
      this.searchService.search('brokerListings');
    }
  }
  close(): void {
    if (this.isModal) {
      // Discard changes
      this.modalService.reject(this.backupCriteria);
    }
  }
  // Helper methods
  public updateCriteria(updates: any): void {
    if (this.isModal) {
      // In modal: Update locally only
      this.criteria = { ...this.criteria, ...updates };
      this.setTotalNumberOfResults();
    } else {
      // Embedded: Update through state service
      this.filterStateService.updateCriteria('brokerListings', updates);
    }
    // Trigger search after update
    this.debouncedSearch();
  }
  private triggerSearch(): void {
    if (this.isModal) {
      // In modal: Only update count
      this.setTotalNumberOfResults();
      this.cancelDisable = true;
    } else {
      // Embedded: Full search
      this.searchService.search('brokerListings');
    }
  }
  private setTotalNumberOfResults(): void {
    this.numberOfResults$ = this.userService.getNumberOfBroker(this.criteria);
  }
  private getDefaultCriteria(): UserListingCriteria {
    return {
      criteriaType: 'brokerListings',
      types: [],
      state: null,
      city: null,
      radius: null,
      searchType: 'exact' as const,
      brokerName: null,
      companyName: null,
      counties: [],
      prompt: null,
      page: 1,
      start: 0,
      length: 12,
    };
  }
  hasActiveFilters(): boolean {
    if (!this.criteria) return false;
    return !!(
      this.criteria.state ||
      this.criteria.city ||
      this.criteria.types?.length ||
      this.criteria.brokerName ||
      this.criteria.companyName ||
      this.criteria.counties?.length
    );
  }
  trackByFn(item: GeoResult): any {
    return item.id;
  }
  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
 }
--- a/bizmatch/src/app/components/search-modal/search-modal-commercial.component.html
+++ b/bizmatch/src/app/components/search-modal/search-modal-commercial.component.html
@ -1,250 +0,0 @@
 <div
  *ngIf="isModal && (modalService.modalVisible$ | async)?.visible && (modalService.modalVisible$ | async)?.type === 'commercialPropertyListings'"
  class="fixed inset-0 bg-neutral-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50"
 >
  <div class="relative w-full h-screen max-h-screen">
    <div class="relative bg-white rounded-lg shadow h-full">
      <div class="flex items-start justify-between p-4 border-b rounded-t bg-primary-600">
        <h3 class="text-xl font-semibold text-white p-2 rounded">Commercial Property Listing Search</h3>
        <button (click)="closeAndSearch()" type="button" class="text-white bg-transparent hover:bg-gray-200 hover:text-neutral-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center">
          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
          </svg>
          <span class="sr-only">Close Modal</span>
        </button>
      </div>
      <div class="p-6 space-y-6">
        <div class="flex space-x-4 mb-4">
          <button class="text-primary-600 font-medium border-b-2 border-primary-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
          <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
          <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
            Clear all Filter
            <div class="tooltip-arrow" data-popper-arrow></div>
          </div>
        </div>
        <!-- Display active filters as tags -->
        <div class="flex flex-wrap gap-2 mb-4" *ngIf="hasActiveFilters()">
          <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.types.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.title" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Title: {{ criteria.title }} <button (click)="removeFilter('title')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
          <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
          </span>
        </div>
        @if(criteria.criteriaType==='commercialPropertyListings') {
        <div class="grid grid-cols-1 gap-6">
          <div class="space-y-4">
            <div>
              <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
              <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
            </div>
            <div>
              <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
            </div>
            <div *ngIf="criteria.city">
              <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
              <div class="flex items-center space-x-4">
                <label class="inline-flex items-center">
                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
                  <span class="ml-2">Exact City</span>
                </label>
                <label class="inline-flex items-center">
                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
                  <span class="ml-2">Radius Search</span>
                </label>
              </div>
            </div>
            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
              <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
              <div class="flex flex-wrap">
                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
                <button
                  type="button"
                  class="px-3 py-2 text-xs font-medium text-center border border-neutral-200 hover:bg-gray-500 hover:text-white"
                  [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-neutral-900 bg-white'"
                  (click)="setRadius(radius)"
                >
                  {{ radius }}
                </button>
                }
              </div>
            </div>
            <div>
              <label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
              <div class="flex items-center space-x-2">
                <app-validated-price name="price-from" [ngModel]="criteria.minPrice" (ngModelChange)="updateCriteria({ minPrice: $event })" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5">
                </app-validated-price>
                <span>-</span>
                <app-validated-price name="price-to" [ngModel]="criteria.maxPrice" (ngModelChange)="updateCriteria({ maxPrice: $event })" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5">
                </app-validated-price>
              </div>
            </div>
            <div>
              <label for="title" class="block mb-2 text-sm font-medium text-neutral-900">Title / Description (Free Search)</label>
              <input
                type="text"
                id="title"
                [ngModel]="criteria.title"
                (ngModelChange)="updateCriteria({ title: $event })"
                class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
                placeholder="e.g. Office Space"
              />
            </div>
            <div>
              <label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
              <ng-select
                class="custom"
                [items]="selectOptions.typesOfCommercialProperty"
                bindLabel="name"
                bindValue="value"
                [ngModel]="criteria.types"
                (ngModelChange)="onCategoryChange($event)"
                [multiple]="true"
                [closeOnSelect]="true"
                placeholder="Select categories"
              ></ng-select>
            </div>
            <div>
              <label for="brokername" class="block mb-2 text-sm font-medium text-neutral-900">Broker Name / Company Name</label>
              <input
                type="text"
                id="brokername"
                [ngModel]="criteria.brokerName"
                (ngModelChange)="updateCriteria({ brokerName: $event })"
                class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
                placeholder="e.g. Brokers Invest"
              />
            </div>
          </div>
        </div>
        }
      </div>
    </div>
  </div>
 </div>
 <div *ngIf="!isModal" class="space-y-6 pb-10">
  <div class="flex space-x-4 mb-4">
    <h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
    <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
    <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
      Clear all Filter
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
  </div>
  <!-- Display active filters as tags -->
  <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
    <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.types.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.title" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Title: {{ criteria.title }} <button (click)="removeFilter('title')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
    <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
    </span>
  </div>
  @if(criteria.criteriaType==='commercialPropertyListings') {
  <div class="space-y-4">
    <div>
      <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
      <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
    </div>
    <div>
      <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
    </div>
    <div *ngIf="criteria.city">
      <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
      <div class="flex items-center space-x-4">
        <label class="inline-flex items-center">
          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
          <span class="ml-2">Exact City</span>
        </label>
        <label class="inline-flex items-center">
          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
          <span class="ml-2">Radius Search</span>
        </label>
      </div>
    </div>
    <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
      <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
      <div class="flex flex-wrap">
        @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
        <button
          type="button"
          class="px-3 py-2 text-xs font-medium text-center border border-neutral-200 hover:bg-gray-500 hover:text-white"
          [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-neutral-900 bg-white'"
          (click)="setRadius(radius)"
        >
          {{ radius }}
        </button>
        }
      </div>
    </div>
    <div>
      <label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
      <ng-select
        class="custom"
        [items]="selectOptions.typesOfCommercialProperty"
        bindLabel="name"
        bindValue="value"
        [ngModel]="criteria.types"
        (ngModelChange)="onCategoryChange($event)"
        [multiple]="true"
        [closeOnSelect]="true"
        placeholder="Select categories"
      ></ng-select>
    </div>
    <div>
      <label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
      <div class="flex items-center space-x-2">
        <app-validated-price name="price-from" [ngModel]="criteria.minPrice" (ngModelChange)="updateCriteria({ minPrice: $event })" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"> </app-validated-price>
        <span>-</span>
        <app-validated-price name="price-to" [ngModel]="criteria.maxPrice" (ngModelChange)="updateCriteria({ maxPrice: $event })" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"> </app-validated-price>
      </div>
    </div>
    <div>
      <label for="title" class="block mb-2 text-sm font-medium text-neutral-900">Title / Description (Free Search)</label>
      <input
        type="text"
        id="title"
        [ngModel]="criteria.title"
        (ngModelChange)="updateCriteria({ title: $event })"
        class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
        placeholder="e.g. Office Space"
      />
    </div>
    <div>
      <label for="brokername-embedded" class="block mb-2 text-sm font-medium text-neutral-900">Broker Name / Company Name</label>
      <input
        type="text"
        id="brokername-embedded"
        [ngModel]="criteria.brokerName"
        (ngModelChange)="updateCriteria({ brokerName: $event })"
        class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
        placeholder="e.g. Brokers Invest"
      />
    </div>
  </div>
  }
 </div>
--- a/bizmatch/src/app/components/search-modal/search-modal-commercial.component.ts
+++ b/bizmatch/src/app/components/search-modal/search-modal-commercial.component.ts
@ -1,316 +0,0 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { catchError, concat, debounceTime, distinctUntilChanged, map, Observable, of, Subject, switchMap, takeUntil, tap } from 'rxjs';
 import { CommercialPropertyListingCriteria, CountyResult, GeoResult } from '../../../../../bizmatch-server/src/models/main.model';
 import { FilterStateService } from '../../services/filter-state.service';
 import { GeoService } from '../../services/geo.service';
 import { ListingsService } from '../../services/listings.service';
 import { SearchService } from '../../services/search.service';
 import { SelectOptionsService } from '../../services/select-options.service';
 import { ValidatedCityComponent } from '../validated-city/validated-city.component';
 import { ValidatedPriceComponent } from '../validated-price/validated-price.component';
 import { ModalService } from './modal.service';
@UntilDestroy()
@Component({
  selector: 'app-search-modal-commercial',
  standalone: true,
  imports: [CommonModule, FormsModule, NgSelectModule, ValidatedCityComponent, ValidatedPriceComponent],
  templateUrl: './search-modal-commercial.component.html',
  styleUrls: ['./search-modal.component.scss'],
 })
 export class SearchModalCommercialComponent implements OnInit, OnDestroy {
  @Input() isModal: boolean = true;
  private destroy$ = new Subject<void>();
  private searchDebounce$ = new Subject<void>();
  // State
  criteria: CommercialPropertyListingCriteria;
  backupCriteria: any;
  // Geo search
  counties$: Observable<CountyResult[]>;
  countyLoading = false;
  countyInput$ = new Subject<string>();
  // Results count
  numberOfResults$: Observable<number>;
  cancelDisable = false;
  constructor(
    public selectOptions: SelectOptionsService,
    public modalService: ModalService,
    private geoService: GeoService,
    private filterStateService: FilterStateService,
    private listingService: ListingsService,
    private searchService: SearchService,
  ) { }
  ngOnInit(): void {
    // Load counties
    this.loadCounties();
    if (this.isModal) {
      // Modal mode: Wait for messages from ModalService
      this.modalService.message$.pipe(untilDestroyed(this)).subscribe(criteria => {
        if (criteria?.criteriaType === 'commercialPropertyListings') {
          this.initializeWithCriteria(criteria);
        }
      });
      this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
        if (val.visible && val.type === 'commercialPropertyListings') {
          // Reset pagination when modal opens
          if (this.criteria) {
            this.criteria.page = 1;
            this.criteria.start = 0;
          }
        }
      });
    } else {
      // Embedded mode: Subscribe to state changes
      this.subscribeToStateChanges();
    }
    // Setup debounced search
    this.searchDebounce$.pipe(debounceTime(400), takeUntil(this.destroy$)).subscribe(() => {
      this.triggerSearch();
    });
  }
  private initializeWithCriteria(criteria: CommercialPropertyListingCriteria): void {
    this.criteria = criteria;
    this.backupCriteria = JSON.parse(JSON.stringify(criteria));
    this.setTotalNumberOfResults();
  }
  private subscribeToStateChanges(): void {
    if (!this.isModal) {
      this.filterStateService
        .getState$('commercialPropertyListings')
        .pipe(takeUntil(this.destroy$))
        .subscribe(state => {
          this.criteria = { ...state.criteria };
          this.setTotalNumberOfResults();
        });
    }
  }
  private loadCounties(): void {
    this.counties$ = concat(
      of([]), // default items
      this.countyInput$.pipe(
        distinctUntilChanged(),
        tap(() => (this.countyLoading = true)),
        switchMap(term =>
          this.geoService.findCountiesStartingWith(term).pipe(
            catchError(() => of([])),
            map(counties => counties.map(county => county.name)),
            tap(() => (this.countyLoading = false)),
          ),
        ),
      ),
    );
  }
  // Filter removal methods
  removeFilter(filterType: string): void {
    const updates: any = {};
    switch (filterType) {
      case 'state':
        updates.state = null;
        updates.city = null;
        updates.radius = null;
        updates.searchType = 'exact';
        break;
      case 'city':
        updates.city = null;
        updates.radius = null;
        updates.searchType = 'exact';
        break;
      case 'price':
        updates.minPrice = null;
        updates.maxPrice = null;
        break;
      case 'types':
        updates.types = [];
        break;
      case 'title':
        updates.title = null;
        break;
      case 'brokerName':
        updates.brokerName = null;
        break;
    }
    this.updateCriteria(updates);
  }
  // Category handling
  onCategoryChange(selectedCategories: string[]): void {
    this.updateCriteria({ types: selectedCategories });
  }
  categoryClicked(checked: boolean, value: string): void {
    const types = [...(this.criteria.types || [])];
    if (checked) {
      if (!types.includes(value)) {
        types.push(value);
      }
    } else {
      const index = types.indexOf(value);
      if (index > -1) {
        types.splice(index, 1);
      }
    }
    this.updateCriteria({ types });
  }
  // Location handling
  setState(state: string): void {
    const updates: any = { state };
    if (!state) {
      updates.city = null;
      updates.radius = null;
      updates.searchType = 'exact';
    }
    this.updateCriteria(updates);
  }
  setCity(city: any): void {
    const updates: any = {};
    if (city) {
      updates.city = city;
      updates.state = city.state;
      // Automatically set radius to 50 miles and enable radius search
      updates.searchType = 'radius';
      updates.radius = 50;
    } else {
      updates.city = null;
      updates.radius = null;
      updates.searchType = 'exact';
    }
    this.updateCriteria(updates);
  }
  setRadius(radius: number): void {
    this.updateCriteria({ radius });
  }
  onCriteriaChange(): void {
    this.triggerSearch();
  }
  // Debounced search for text inputs
  debouncedSearch(): void {
    this.searchDebounce$.next();
  }
  // Clear all filters
  clearFilter(): void {
    if (this.isModal) {
      // In modal: Reset locally
      const defaultCriteria = this.getDefaultCriteria();
      this.criteria = defaultCriteria;
      this.setTotalNumberOfResults();
    } else {
      // Embedded: Use state service
      this.filterStateService.clearFilters('commercialPropertyListings');
    }
  }
  // Modal-specific methods
  closeAndSearch(): void {
    if (this.isModal) {
      // Save changes to state
      this.filterStateService.setCriteria('commercialPropertyListings', this.criteria);
      this.modalService.accept();
      this.searchService.search('commercialPropertyListings');
    }
  }
  close(): void {
    if (this.isModal) {
      // Discard changes
      this.modalService.reject(this.backupCriteria);
    }
  }
  // Helper methods
  public updateCriteria(updates: any): void {
    if (this.isModal) {
      // In modal: Update locally only
      this.criteria = { ...this.criteria, ...updates };
      this.setTotalNumberOfResults();
    } else {
      // Embedded: Update through state service
      this.filterStateService.updateCriteria('commercialPropertyListings', updates);
    }
    // Trigger search after update
    this.debouncedSearch();
  }
  private triggerSearch(): void {
    if (this.isModal) {
      // In modal: Only update count
      this.setTotalNumberOfResults();
      this.cancelDisable = true;
    } else {
      // Embedded: Full search
      this.searchService.search('commercialPropertyListings');
    }
  }
  private setTotalNumberOfResults(): void {
    this.numberOfResults$ = this.listingService.getNumberOfListings('commercialProperty', this.criteria);
  }
  private getDefaultCriteria(): CommercialPropertyListingCriteria {
    // Access the private method through a workaround or create it here
    return {
      criteriaType: 'commercialPropertyListings',
      types: [],
      state: null,
      city: null,
      radius: null,
      searchType: 'exact' as const,
      minPrice: null,
      maxPrice: null,
      title: null,
      brokerName: null,
      prompt: null,
      page: 1,
      start: 0,
      length: 12,
    };
  }
  hasActiveFilters(): boolean {
    if (!this.criteria) return false;
    return !!(
      this.criteria.state ||
      this.criteria.city ||
      this.criteria.minPrice ||
      this.criteria.maxPrice ||
      this.criteria.types?.length ||
      this.criteria.title ||
      this.criteria.brokerName
    );
  }
  trackByFn(item: GeoResult): any {
    return item.id;
  }
  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
 }
--- a/bizmatch/src/app/components/search-modal/search-modal.component.html
+++ b/bizmatch/src/app/components/search-modal/search-modal.component.html
@ -1,12 +1,15 @@
-<div
+<div *ngIf="modalService.modalVisible$ | async" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
-  *ngIf="isModal && (modalService.modalVisible$ | async)?.visible && (modalService.modalVisible$ | async)?.type === 'businessListings'"
+  <div class="relative w-full max-w-4xl max-h-full">
  class="fixed inset-0 bg-neutral-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50"
 >
  <div class="relative w-full max-h-full">
    <div class="relative bg-white rounded-lg shadow">
-      <div class="flex items-start justify-between p-4 border-b rounded-t bg-primary-600">
+      <div class="flex items-start justify-between p-4 border-b rounded-t">
-        <h3 class="text-xl font-semibold text-white p-2 rounded">Business Listing Search</h3>
+        @if(criteria.criteriaType==='businessListings'){
-        <button (click)="closeAndSearch()" type="button" class="text-white bg-transparent hover:bg-neutral-200 hover:text-neutral-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center">
+        <h3 class="text-xl font-semibold text-gray-900">Business Listing Search</h3>
        } @else if (criteria.criteriaType==='commercialPropertyListings'){
        <h3 class="text-xl font-semibold text-gray-900">Property Listing Search</h3>
        } @else {
        <h3 class="text-xl font-semibold text-gray-900">Professional Listing Search</h3>
        }
        <button (click)="close()" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center">
          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
          </svg>
@ -15,80 +18,309 @@
      </div>
      <div class="p-6 space-y-6">
        <div class="flex space-x-4 mb-4">
-          <button class="text-primary-600 font-medium border-b-2 border-primary-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
+          <button class="text-blue-600 font-medium border-b-2 border-blue-600 pb-2">Classic Search</button>
-          <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
+          <!-- <button class="text-gray-500">AI Search <span class="bg-gray-200 text-xs font-semibold px-2 py-1 rounded">BETA</span></button> -->
-          <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
+          <i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-blue-500" (click)="clearFilter()"></i>
          <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 tooltip">
            Clear all Filter
            <div class="tooltip-arrow" data-popper-arrow></div>
          </div>
        </div>
-        <!-- Display active filters as tags -->
+        @if(criteria.criteriaType==='businessListings'){
-        <div class="flex flex-wrap gap-2 mb-4" *ngIf="hasActiveFilters()">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            State: {{ criteria.state }} <button (click)="removeFilter('state')" aria-label="Remove state filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            City: {{ criteria.city.name }} <button (click)="removeFilter('city')" aria-label="Remove city filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" aria-label="Remove price filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.minRevenue || criteria.maxRevenue" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" aria-label="Remove revenue filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.minCashFlow || criteria.maxCashFlow" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" aria-label="Remove cashflow filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.title" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Title: {{ criteria.title }} <button (click)="removeFilter('title')" aria-label="Remove title filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.types.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" aria-label="Remove categories filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="selectedPropertyType" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" aria-label="Remove property type filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.minNumberEmployees || criteria.maxNumberEmployees" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" aria-label="Remove employees filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.establishedMin" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Established: {{ criteria.establishedMin || 'Any' }} <button (click)="removeFilter('established')" aria-label="Remove established filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
          <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
            Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" aria-label="Remove broker filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
          </span>
        </div>
        <div class="grid grid-cols-1 gap-6">
          <div class="space-y-4">
            <div>
-              <label for="state-select" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
+              <label for="state" class="block mb-2 text-sm font-medium text-gray-900">Location - State</label>
-              <ng-select id="state-select" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state" aria-label="Location - State"></ng-select>
+              <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"> </ng-select>
            </div>
            <div>
-              <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
+              <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-gray-900 font-medium" [state]="criteria.state"></app-validated-city>
            </div>
            <!-- <div>
              <label for="city" class="block mb-2 text-sm font-medium text-gray-900">Location - City</label>
              <ng-select
                class="custom"
                [multiple]="false"
                [hideSelected]="true"
                [trackByFn]="trackByFn"
                [minTermLength]="2"
                [loading]="cityLoading"
                typeToSearchText="Please enter 2 or more characters"
                [typeahead]="cityInput$"
                [ngModel]="criteria.city"
                (ngModelChange)="setCity($event)"
              >
                @for (city of cities$ | async; track city.id) {
                <ng-option [value]="city">{{ city.city }} - {{ city.state }}</ng-option>
                }
              </ng-select>
            </div> -->
            <!-- New section for city search type -->
            <div *ngIf="criteria.city">
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
+              <label class="block mb-2 text-sm font-medium text-gray-900">Search Type</label>
              <div class="flex items-center space-x-4">
                <label class="inline-flex items-center">
-                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
+                  <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="exact" />
                  <span class="ml-2">Exact City</span>
                </label>
                <label class="inline-flex items-center">
-                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
+                  <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="radius" />
                  <span class="ml-2">Radius Search</span>
                </label>
              </div>
            </div>
            <!-- New section for radius selection -->
            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
+              <label class="block mb-2 text-sm font-medium text-gray-900">Select Radius (in miles)</label>
              <div class="flex flex-wrap">
                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
                <button
                  type="button"
-                  class="px-3 py-2 text-xs font-medium text-center border border-neutral-200 hover:bg-neutral-500 hover:text-white"
+                  class="px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
-                  [ngClass]="criteria.radius === radius ? 'text-white bg-neutral-500' : 'text-neutral-900 bg-white'"
+                  [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
-                  (click)="setRadius(radius)"
+                  (click)="criteria.radius = radius"
                >
                  {{ radius }}
                </button>
                }
              </div>
            </div>
            <div>
              <label for="price" class="block mb-2 text-sm font-medium text-gray-900">Price</label>
              <div class="flex items-center space-x-2">
                <app-validated-price name="price-from" [(ngModel)]="criteria.minPrice" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
                <!-- <input
                  type="number"
                  id="price-from"
                  [(ngModel)]="criteria.minPrice"
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                  placeholder="From"
                /> -->
                <span>-</span>
                <!-- <input
                  type="number"
                  id="price-to"
                  [(ngModel)]="criteria.maxPrice"
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                  placeholder="To"
                /> -->
                <app-validated-price name="price-to" [(ngModel)]="criteria.maxPrice" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
              </div>
            </div>
            <div>
              <label for="salesRevenue" class="block mb-2 text-sm font-medium text-gray-900">Sales Revenue</label>
              <div class="flex items-center space-x-2">
                <!-- <input
                  type="number"
                  id="salesRevenue-from"
                  [(ngModel)]="criteria.minRevenue"
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                  placeholder="From"
                /> -->
                <app-validated-price name="salesRevenue-from" [(ngModel)]="criteria.minRevenue" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
                <span>-</span>
                <!-- <input
                  type="number"
                  id="salesRevenue-to"
                  [(ngModel)]="criteria.maxRevenue"
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                  placeholder="To"
                /> -->
                <app-validated-price name="salesRevenue-to" [(ngModel)]="criteria.maxRevenue" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
              </div>
            </div>
            <div>
              <label for="cashflow" class="block mb-2 text-sm font-medium text-gray-900">Cashflow</label>
              <div class="flex items-center space-x-2">
                <!-- <input
                  type="number"
                  id="cashflow-from"
                  [(ngModel)]="criteria.minCashFlow"
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                  placeholder="From"
                /> -->
                <app-validated-price name="cashflow-from" [(ngModel)]="criteria.minCashFlow" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
                <span>-</span>
                <app-validated-price name="cashflow-to" [(ngModel)]="criteria.maxCashFlow" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
                <!-- <input
                  type="number"
                  id="cashflow-to"
                  [(ngModel)]="criteria.maxCashFlow"
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                  placeholder="To"
                /> -->
              </div>
            </div>
            <div>
              <label for="title" class="block mb-2 text-sm font-medium text-gray-900">Title / Description (Free Search)</label>
              <input
                type="text"
                id="title"
                [(ngModel)]="criteria.title"
                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                placeholder="e.g. Restaurant"
              />
            </div>
          </div>
          <div class="space-y-4">
            <div>
              <label class="block mb-2 text-sm font-medium text-gray-900">Category</label>
              <div class="grid grid-cols-2 gap-2">
                @for(tob of selectOptions.typesOfBusiness; track tob){
                <div class="flex items-center">
                  <input
                    type="checkbox"
                    id="automotive"
                    [ngModel]="isTypeOfBusinessClicked(tob)"
                    (ngModelChange)="categoryClicked($event, tob.value)"
                    value="{{ tob.value }}"
                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <label for="automotive" class="ml-2 text-sm font-medium text-gray-900">{{ tob.name }}</label>
                </div>
                }
              </div>
            </div>
            <div>
              <label class="block mb-2 text-sm font-medium text-gray-900">Type of Property</label>
              <div class="space-y-2">
                <div class="flex items-center">
                  <input
                    [(ngModel)]="criteria.realEstateChecked"
                    (ngModelChange)="onCheckboxChange('realEstateChecked', $event)"
                    type="checkbox"
                    name="realEstateChecked"
                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <label for="realEstateChecked" class="ml-2 text-sm font-medium text-gray-900">Real Estate</label>
                </div>
                <div class="flex items-center">
                  <input
                    [(ngModel)]="criteria.leasedLocation"
                    (ngModelChange)="onCheckboxChange('leasedLocation', $event)"
                    type="checkbox"
                    name="leasedLocation"
                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <label for="leasedLocation" class="ml-2 text-sm font-medium text-gray-900">Leased Location</label>
                </div>
                <div class="flex items-center">
                  <input
                    [(ngModel)]="criteria.franchiseResale"
                    (ngModelChange)="onCheckboxChange('franchiseResale', $event)"
                    type="checkbox"
                    name="franchiseResale"
                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <label for="franchiseResale" class="ml-2 text-sm font-medium text-gray-900">Franchise</label>
                </div>
              </div>
            </div>
            <div>
              <label for="numberEmployees" class="block mb-2 text-sm font-medium text-gray-900">Number of Employees</label>
              <div class="flex items-center space-x-2">
                <input
                  type="number"
                  id="numberEmployees-from"
                  [(ngModel)]="criteria.minNumberEmployees"
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                  placeholder="From"
                />
                <span>-</span>
                <input
                  type="number"
                  id="numberEmployees-to"
                  [(ngModel)]="criteria.maxNumberEmployees"
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                  placeholder="To"
                />
              </div>
            </div>
            <div>
              <label for="establishedSince" class="block mb-2 text-sm font-medium text-gray-900">Established Since</label>
              <div class="flex items-center space-x-2">
                <input
                  type="number"
                  id="establishedSince-From"
                  [(ngModel)]="criteria.establishedSince"
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                  placeholder="YYYY"
                />
                <span>-</span>
                <input
                  type="number"
                  id="establishedSince-To"
                  [(ngModel)]="criteria.establishedUntil"
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                  placeholder="YYYY"
                />
              </div>
            </div>
            <div>
              <label for="brokername" class="block mb-2 text-sm font-medium text-gray-900">Broker Name / Company Name</label>
              <input
                type="text"
                id="brokername"
                [(ngModel)]="criteria.brokerName"
                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                placeholder="e.g. Brokers Invest"
              />
            </div>
          </div>
        </div>
        } @if(criteria.criteriaType==='commercialPropertyListings'){
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="space-y-4">
            <div>
              <label for="state" class="block mb-2 text-sm font-medium text-gray-900">Location - State</label>
              <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"> </ng-select>
            </div>
            <div>
              <!-- <label for="city" class="block mb-2 text-sm font-medium text-gray-900">Location - City</label>
              <ng-select
                class="custom"
                [multiple]="false"
                [hideSelected]="true"
                [trackByFn]="trackByFn"
                [minTermLength]="2"
                [loading]="cityLoading"
                typeToSearchText="Please enter 2 or more characters"
                [typeahead]="cityInput$"
                [ngModel]="criteria.city"
                (ngModelChange)="setCity($event)"
              >
                @for (city of cities$ | async; track city.id) {
                <ng-option [value]="city">{{ city.city }} - {{ selectOptions.getStateInitials(city.state) }}</ng-option>
                }
              </ng-select> -->
              <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-gray-900 font-medium" [state]="criteria.state"></app-validated-city>
            </div>
            <!-- New section for city search type -->
            <div *ngIf="criteria.city">
              <label class="block mb-2 text-sm font-medium text-gray-900">Search Type</label>
              <div class="flex items-center space-x-4">
                <label class="inline-flex items-center">
                  <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="exact" />
                  <span class="ml-2">Exact City</span>
                </label>
                <label class="inline-flex items-center">
                  <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="radius" />
                  <span class="ml-2">Radius Search</span>
                </label>
              </div>
            </div>
            <!-- New section for radius selection -->
            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
              <label class="block mb-2 text-sm font-medium text-gray-900">Select Radius (in miles)</label>
              <div class="flex flex-wrap">
                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
                <button
                  type="button"
                  class="px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
                  [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
                  (click)="criteria.radius = radius"
                >
                  {{ radius }}
                </button>
@ -96,322 +328,185 @@
              </div>
            </div>
            <div>
-              <label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
+              <label for="price" class="block mb-2 text-sm font-medium text-gray-900">Price</label>
              <div class="flex items-center space-x-2">
-                <app-validated-price name="price-from" [ngModel]="criteria.minPrice" (ngModelChange)="updateCriteria({ minPrice: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
+                <!-- <input
-                </app-validated-price>
+                  type="number"
                  id="price-from"
                  [(ngModel)]="criteria.minPrice"
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                  placeholder="From"
                /> -->
                <app-validated-price name="price-from" [(ngModel)]="criteria.minPrice" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
                <span>-</span>
-                <app-validated-price name="price-to" [ngModel]="criteria.maxPrice" (ngModelChange)="updateCriteria({ maxPrice: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
+                <app-validated-price name="price-to" [(ngModel)]="criteria.maxPrice" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
-                </app-validated-price>
+                <!-- <input
                  type="number"
                  id="price-to"
                  [(ngModel)]="criteria.maxPrice"
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
                  placeholder="To"
                /> -->
              </div>
            </div>
            <div>
-              <label for="salesRevenue" class="block mb-2 text-sm font-medium text-neutral-900">Sales Revenue</label>
+              <label for="title" class="block mb-2 text-sm font-medium text-gray-900">Title / Description (Free Search)</label>
              <div class="flex items-center space-x-2">
                <app-validated-price name="salesRevenue-from" [ngModel]="criteria.minRevenue" (ngModelChange)="updateCriteria({ minRevenue: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
                </app-validated-price>
                <span>-</span>
                <app-validated-price name="salesRevenue-to" [ngModel]="criteria.maxRevenue" (ngModelChange)="updateCriteria({ maxRevenue: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p.2.5">
                </app-validated-price>
              </div>
            </div>
            <div>
              <label for="cashflow" class="block mb-2 text-sm font-medium text-neutral-900">Cashflow</label>
              <div class="flex items-center space-x-2">
                <app-validated-price name="cashflow-from" [ngModel]="criteria.minCashFlow" (ngModelChange)="updateCriteria({ minCashFlow: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
                </app-validated-price>
                <span>-</span>
                <app-validated-price name="cashflow-to" [ngModel]="criteria.maxCashFlow" (ngModelChange)="updateCriteria({ maxCashFlow: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
                </app-validated-price>
              </div>
            </div>
            <div>
              <label for="title" class="block mb-2 text-sm font-medium text-neutral-900">Title / Description (Free Search)</label>
              <input
                type="text"
                id="title"
-                [ngModel]="criteria.title"
+                [(ngModel)]="criteria.title"
-                (ngModelChange)="updateCriteria({ title: $event })"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
                placeholder="e.g. Restaurant"
              />
            </div>
          </div>
          <div class="space-y-4">
            <div>
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
+              <label class="block mb-2 text-sm font-medium text-gray-900">Category</label>
-              <ng-select
+              <div class="grid grid-cols-2 gap-2">
-                class="custom"
+                @for(tob of selectOptions.typesOfCommercialProperty; track tob){
-                [items]="selectOptions.typesOfBusiness"
+                <div class="flex items-center">
-                bindLabel="name"
+                  <input
-                bindValue="value"
+                    type="checkbox"
-                [ngModel]="criteria.types"
+                    id="automotive"
-                (ngModelChange)="onCategoryChange($event)"
+                    [ngModel]="isTypeOfBusinessClicked(tob)"
-                [multiple]="true"
+                    (ngModelChange)="categoryClicked($event, tob.value)"
-                [closeOnSelect]="true"
+                    value="{{ tob.value }}"
-                placeholder="Select categories"
+                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
-                aria-label="Category"
+                  />
-              ></ng-select>
+                  <label for="automotive" class="ml-2 text-sm font-medium text-gray-900">{{ tob.name }}</label>
-            </div>
+                </div>
-            <div>
+                }
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Type of Property</label>
+              </div>
-              <ng-select
+            </div>
-                class="custom"
+          </div>
-                [items]="propertyTypeOptions"
+        </div>
-                bindLabel="name"
+        } @if(criteria.criteriaType==='brokerListings'){
-                bindValue="value"
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                [ngModel]="selectedPropertyType"
+          <div class="space-y-4">
-                (ngModelChange)="onPropertyTypeChange($event)"
+            <div>
-                placeholder="Select property type"
+              <label for="states" class="block mb-2 text-sm font-medium text-gray-900">Locations served - States</label>
-                aria-label="Type of Property"
+              <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state" [multiple]="false"> </ng-select>
-              ></ng-select>
+            </div>
-            </div>
+            <div>
-            <div>
+              <label for="counties" class="block mb-2 text-sm font-medium text-gray-900">Locations served - Counties</label>
-              <label for="numberEmployees" class="block mb-2 text-sm font-medium text-neutral-900">Number of Employees</label>
+              <ng-select
-              <div class="flex items-center space-x-2">
+                [items]="counties$ | async"
-                <input
+                bindLabel="name"
-                  type="number"
+                class="custom"
-                  id="numberEmployees-from"
+                [multiple]="false"
-                  [ngModel]="criteria.minNumberEmployees"
+                [hideSelected]="true"
-                  (ngModelChange)="updateCriteria({ minNumberEmployees: $event })"
+                [trackByFn]="trackByFn"
-                  class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
+                [minTermLength]="2"
-                  placeholder="From"
+                [loading]="countyLoading"
-                />
+                typeToSearchText="Please enter 2 or more characters"
-                <span>-</span>
+                [typeahead]="countyInput$"
-                <input
+                [(ngModel)]="criteria.counties"
-                  type="number"
+              >
-                  id="numberEmployees-to"
+              </ng-select>
-                  [ngModel]="criteria.maxNumberEmployees"
+            </div>
-                  (ngModelChange)="updateCriteria({ maxNumberEmployees: $event })"
+            <div>
-                  class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
+              <!-- <label for="city" class="block mb-2 text-sm font-medium text-gray-900">Location - City</label>
-                  placeholder="To"
+              <ng-select
-                />
+                class="custom"
                [multiple]="false"
                [hideSelected]="true"
                [trackByFn]="trackByFn"
                [minTermLength]="2"
                [loading]="cityLoading"
                typeToSearchText="Please enter 2 or more characters"
                [typeahead]="cityInput$"
                [ngModel]="criteria.city"
                (ngModelChange)="setCity($event)"
              >
                @for (city of cities$ | async; track city.id) {
                <ng-option [value]="city">{{ city.name }} - {{ selectOptions.getStateInitials(city.state) }}</ng-option>
                }
              </ng-select> -->
              <app-validated-city
                label="Company Location - City"
                name="city"
                [ngModel]="criteria.city"
                (ngModelChange)="setCity($event)"
                labelClasses="text-gray-900 font-medium"
                [state]="criteria.state"
              ></app-validated-city>
            </div>
            <!-- New section for city search type -->
            <div *ngIf="criteria.city">
              <label class="block mb-2 text-sm font-medium text-gray-900">Search Type</label>
              <div class="flex items-center space-x-4">
                <label class="inline-flex items-center">
                  <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="exact" />
                  <span class="ml-2">Exact City</span>
                </label>
                <label class="inline-flex items-center">
                  <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="radius" />
                  <span class="ml-2">Radius Search</span>
                </label>
              </div>
            </div>
            <div>
              <label for="brokername" class="block mb-2 text-sm font-medium text-gray-900">Name of Professional</label>
              <input
                type="text"
                id="brokername"
                [(ngModel)]="criteria.brokerName"
                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
              />
            </div>
            <!-- New section for radius selection -->
            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
              <label class="block mb-2 text-sm font-medium text-gray-900">Select Radius (in miles)</label>
              <div class="flex flex-wrap">
                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
                <button
                  type="button"
                  class="px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
                  [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
                  (click)="criteria.radius = radius"
                >
                  {{ radius }}
                </button>
                }
              </div>
            </div>
          </div>
          <div class="space-y-4">
            <div>
              <label class="block mb-2 text-sm font-medium text-gray-900">Category</label>
              <div class="grid grid-cols-2 gap-2">
                @for(tob of selectOptions.customerSubTypes; track tob){
                <div class="flex items-center">
                  <input
                    type="checkbox"
                    id="automotive"
                    [ngModel]="isTypeOfProfessionalClicked(tob)"
                    (ngModelChange)="categoryClicked($event, tob.value)"
                    value="{{ tob.value }}"
                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <label for="automotive" class="ml-2 text-sm font-medium text-gray-900">{{ tob.name }}</label>
                </div>
                }
              </div>
            </div>
            <div>
              <label for="establishedMin" class="block mb-2 text-sm font-medium text-neutral-900">Minimum years established</label>
              <div class="flex items-center space-x-2">
                <input
                  type="number"
                  id="establishedMin"
                  [ngModel]="criteria.establishedMin"
                  (ngModelChange)="updateCriteria({ establishedMin: $event })"
                  class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
                  placeholder="YY"
                />
              </div>
            </div>
            <div>
              <label for="brokername" class="block mb-2 text-sm font-medium text-neutral-900">Broker Name / Company Name</label>
              <input
                type="text"
                id="brokername"
                [ngModel]="criteria.brokerName"
                (ngModelChange)="updateCriteria({ brokerName: $event })"
                class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
                placeholder="e.g. Brokers Invest"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 </div>
 <!-- ################################################################################## -->
 <!-- ################################################################################## -->
 <!-- ################################################################################## -->
 <div *ngIf="!isModal" class="space-y-6">
  <div class="flex space-x-4 mb-4">
    <h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
    <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
    <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
      Clear all Filter
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
  </div>
  <!-- Display active filters as tags -->
  <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
    <span *ngIf="criteria.state" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      State: {{ criteria.state }} <button (click)="removeFilter('state')" aria-label="Remove state filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.city" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" aria-label="Remove city filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" aria-label="Remove price filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.minRevenue || criteria.maxRevenue" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" aria-label="Remove revenue filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.minCashFlow || criteria.maxCashFlow" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" aria-label="Remove cashflow filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.title" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Title: {{ criteria.title }} <button (click)="removeFilter('title')" aria-label="Remove title filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.types.length" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" aria-label="Remove categories filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="selectedPropertyType" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" aria-label="Remove property type filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.minNumberEmployees || criteria.maxNumberEmployees" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" aria-label="Remove employees filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.establishedMin" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Years established: {{ criteria.establishedMin || 'Any' }} <button (click)="removeFilter('established')" aria-label="Remove established filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
    <span *ngIf="criteria.brokerName" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
      Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" aria-label="Remove broker filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
    </span>
  </div>
  @if(criteria.criteriaType==='businessListings') {
  <div class="space-y-4">
    <div>
      <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
      <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
    </div>
    <div>
      <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
    </div>
    <div *ngIf="criteria.city">
      <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
      <div class="flex items-center space-x-4">
        <label class="inline-flex items-center">
          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
          <span class="ml-2">Exact City</span>
        </label>
        <label class="inline-flex items-center">
          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
          <span class="ml-2">Radius Search</span>
        </label>
      </div>
    </div>
    <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
      <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
      <div class="flex flex-wrap">
        @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
        <button
          type="button"
          class="px-3 py-2 text-xs font-medium text-center border border-neutral-200 hover:bg-neutral-500 hover:text-white"
          [ngClass]="criteria.radius === radius ? 'text-white bg-neutral-500' : 'text-neutral-900 bg-white'"
          (click)="setRadius(radius)"
        >
          {{ radius }}
        </button>
        }
      </div>
-    </div>
+      <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b">
-    <div>
+        <button type="button" (click)="modalService.accept()" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
-      <label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
+          Search ({{ numberOfResults$ | async }})
-      <div class="flex items-center space-x-2">
+        </button>
-        <app-validated-price name="price-from" [ngModel]="criteria.minPrice" (ngModelChange)="updateCriteria({ minPrice: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5"> </app-validated-price>
+        <button
-        <span>-</span>
+          type="button"
-        <app-validated-price name="price-to" [ngModel]="criteria.maxPrice" (ngModelChange)="updateCriteria({ maxPrice: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5"> </app-validated-price>
+          (click)="close()"
          class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10"
        >
          Cancel
        </button>
      </div>
    </div>
    <div>
      <label for="salesRevenue" class="block mb-2 text-sm font-medium text-neutral-900">Sales Revenue</label>
      <div class="flex items-center space-x-2">
        <app-validated-price name="salesRevenue-from" [ngModel]="criteria.minRevenue" (ngModelChange)="updateCriteria({ minRevenue: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
        </app-validated-price>
        <span>-</span>
        <app-validated-price name="salesRevenue-to" [ngModel]="criteria.maxRevenue" (ngModelChange)="updateCriteria({ maxRevenue: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p.2.5">
        </app-validated-price>
      </div>
    </div>
    <div>
      <label for="cashflow" class="block mb-2 text-sm font-medium text-neutral-900">Cashflow</label>
      <div class="flex items-center space-x-2">
        <app-validated-price name="cashflow-from" [ngModel]="criteria.minCashFlow" (ngModelChange)="updateCriteria({ minCashFlow: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
        </app-validated-price>
        <span>-</span>
        <app-validated-price name="cashflow-to" [ngModel]="criteria.maxCashFlow" (ngModelChange)="updateCriteria({ maxCashFlow: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
        </app-validated-price>
      </div>
    </div>
    <div>
      <label for="title" class="block mb-2 text-sm font-medium text-neutral-900">Title / Description (Free Search)</label>
      <input
        type="text"
        id="title"
        [ngModel]="criteria.title"
        (ngModelChange)="updateCriteria({ title: $event })"
        class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
        placeholder="e.g. Restaurant"
      />
    </div>
    <div>
      <label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
      <ng-select
        class="custom"
        [items]="selectOptions.typesOfBusiness"
        bindLabel="name"
        bindValue="value"
        [ngModel]="criteria.types"
        (ngModelChange)="onCategoryChange($event)"
        [multiple]="true"
        [closeOnSelect]="true"
        placeholder="Select categories"
      ></ng-select>
    </div>
    <div>
      <label class="block mb-2 text-sm font-medium text-neutral-900">Type of Property</label>
      <ng-select
        class="custom"
        [items]="propertyTypeOptions"
        bindLabel="name"
        bindValue="value"
        [ngModel]="selectedPropertyType"
        (ngModelChange)="onPropertyTypeChange($event)"
        placeholder="Select property type"
      ></ng-select>
    </div>
    <div>
      <label for="numberEmployees" class="block mb-2 text-sm font-medium text-neutral-900">Number of Employees</label>
      <div class="flex items-center space-x-2">
        <input
          type="number"
          id="numberEmployees-from"
          [ngModel]="criteria.minNumberEmployees"
          (ngModelChange)="updateCriteria({ minNumberEmployees: $event })"
          class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
          placeholder="From"
        />
        <span>-</span>
        <input
          type="number"
          id="numberEmployees-to"
          [ngModel]="criteria.maxNumberEmployees"
          (ngModelChange)="updateCriteria({ maxNumberEmployees: $event })"
          class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
          placeholder="To"
        />
      </div>
    </div>
    <div>
      <label for="establishedMin" class="block mb-2 text-sm font-medium text-neutral-900">Minimum years established</label>
      <div class="flex items-center space-x-2">
        <input
          type="number"
          id="establishedMin"
          [ngModel]="criteria.establishedMin"
          (ngModelChange)="updateCriteria({ establishedMin: $event })"
          class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
          placeholder="YY"
        />
      </div>
    </div>
    <div>
      <label for="brokername" class="block mb-2 text-sm font-medium text-neutral-900">Broker Name / Company Name</label>
      <input
        type="text"
        id="brokername"
        [ngModel]="criteria.brokerName"
        (ngModelChange)="updateCriteria({ brokerName: $event })"
        class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
        placeholder="e.g. Brokers Invest"
      />
    </div>
  </div>
  }
 </div>
--- a/bizmatch/src/app/components/search-modal/search-modal.component.scss
+++ b/bizmatch/src/app/components/search-modal/search-modal.component.scss
@ -1,12 +1,9 @@
 :host ::ng-deep .ng-select.custom .ng-select-container {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-  min-height: 46px;
+  height: 46px;
  border-radius: 0.5rem;
  .ng-value-container .ng-input {
    top: 10px;
  }
 }
 :host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
  position: unset;
 }
--- a/bizmatch/src/app/components/search-modal/search-modal.component.ts
+++ b/bizmatch/src/app/components/search-modal/search-modal.component.ts
@ -1,20 +1,19 @@
 import { AsyncPipe, NgIf } from '@angular/common';
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { catchError, concat, debounceTime, distinctUntilChanged, map, Observable, of, Subject, switchMap, takeUntil, tap } from 'rxjs';
+import { catchError, concat, debounceTime, distinctUntilChanged, map, Observable, of, Subject, Subscription, switchMap, tap } from 'rxjs';
-import { BusinessListingCriteria, CountyResult, GeoResult, KeyValue, KeyValueStyle } from '../../../../../bizmatch-server/src/models/main.model';
+import { BusinessListingCriteria, CommercialPropertyListingCriteria, CountyResult, GeoResult, KeyValue, KeyValueStyle, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
-import { FilterStateService } from '../../services/filter-state.service';
+import { CriteriaChangeService } from '../../services/criteria-change.service';
 import { GeoService } from '../../services/geo.service';
 import { ListingsService } from '../../services/listings.service';
 import { SearchService } from '../../services/search.service';
 import { SelectOptionsService } from '../../services/select-options.service';
 import { UserService } from '../../services/user.service';
 import { SharedModule } from '../../shared/shared/shared.module';
 import { resetBusinessListingCriteria, resetCommercialPropertyListingCriteria, resetUserListingCriteria } from '../../utils/utils';
 import { ValidatedCityComponent } from '../validated-city/validated-city.component';
 import { ValidatedPriceComponent } from '../validated-price/validated-price.component';
 import { ModalService } from './modal.service';
@UntilDestroy()
@Component({
  selector: 'app-search-modal',
@ -23,105 +22,55 @@ import { ModalService } from './modal.service';
  templateUrl: './search-modal.component.html',
  styleUrl: './search-modal.component.scss',
 })
-export class SearchModalComponent implements OnInit, OnDestroy {
+export class SearchModalComponent {
-  @Input() isModal: boolean = true;
+  // cities$: Observable<GeoResult[]>;
  private destroy$ = new Subject<void>();
  private searchDebounce$ = new Subject<void>();
  // State
  criteria: BusinessListingCriteria;
  backupCriteria: any;
  currentListingType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings';
  // Geo search
  counties$: Observable<CountyResult[]>;
  // cityLoading = false;
  countyLoading = false;
  // cityInput$ = new Subject<string>();
  countyInput$ = new Subject<string>();
-
+  private criteriaChangeSubscription: Subscription;
-  // Property type for business listings
+  public criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
-  selectedPropertyType: string | null = null;
+  backupCriteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
  propertyTypeOptions = [
    { name: 'Real Estate', value: 'realEstateChecked' },
    { name: 'Leased Location', value: 'leasedLocation' },
    { name: 'Franchise', value: 'franchiseResale' },
  ];
  // Results count
  numberOfResults$: Observable<number>;
-
+  cancelDisable = false;
  constructor(
    public selectOptions: SelectOptionsService,
    public modalService: ModalService,
    private geoService: GeoService,
-    private filterStateService: FilterStateService,
+    private criteriaChangeService: CriteriaChangeService,
    private listingService: ListingsService,
    private userService: UserService,
    private searchService: SearchService,
  ) {}
-
+  ngOnInit() {
-  ngOnInit(): void {
+    this.setupCriteriaChangeListener();
-    // Load counties
+    this.modalService.message$.pipe(untilDestroyed(this)).subscribe(msg => {
      this.criteria = msg;
      this.backupCriteria = JSON.parse(JSON.stringify(msg));
      this.setTotalNumberOfResults();
    });
    this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
      if (val) {
        this.criteria.page = 1;
        this.criteria.start = 0;
      }
    });
    // this.loadCities();
    this.loadCounties();
  }
-    if (this.isModal) {
+  ngOnChanges() {}
-      // Modal mode: Wait for messages from ModalService
+  categoryClicked(checked: boolean, value: string) {
-      this.modalService.message$.pipe(untilDestroyed(this)).subscribe(criteria => {
+    if (checked) {
-        this.initializeWithCriteria(criteria);
+      this.criteria.types.push(value);
      });
      this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
        if (val.visible) {
          // Reset pagination when modal opens
          if (this.criteria) {
            this.criteria.page = 1;
            this.criteria.start = 0;
          }
        }
      });
    } else {
-      // Embedded mode: Determine type from route and subscribe to state
+      const index = this.criteria.types.findIndex(t => t === value);
-      this.determineListingType();
+      if (index > -1) {
-      this.subscribeToStateChanges();
+        this.criteria.types.splice(index, 1);
-    }
+      }
    // Setup debounced search
    this.searchDebounce$.pipe(debounceTime(400), takeUntil(this.destroy$)).subscribe(() => this.triggerSearch());
  }
  private initializeWithCriteria(criteria: any): void {
    this.criteria = criteria;
    this.currentListingType = criteria?.criteriaType;
    this.backupCriteria = JSON.parse(JSON.stringify(criteria));
    this.updateSelectedPropertyType();
    this.setTotalNumberOfResults();
  }
  private determineListingType(): void {
    const url = window.location.pathname;
    if (url.includes('businessListings')) {
      this.currentListingType = 'businessListings';
    } else if (url.includes('commercialPropertyListings')) {
      this.currentListingType = 'commercialPropertyListings';
    } else if (url.includes('brokerListings')) {
      this.currentListingType = 'brokerListings';
    }
  }
-
+  private loadCounties() {
  private subscribeToStateChanges(): void {
    if (!this.isModal && this.currentListingType) {
      this.filterStateService
        .getState$(this.currentListingType)
        .pipe(takeUntil(this.destroy$))
        .subscribe(state => {
          this.criteria = { ...state.criteria };
          this.updateSelectedPropertyType();
          this.setTotalNumberOfResults();
        });
    }
  }
  private loadCounties(): void {
    this.counties$ = concat(
      of([]), // default items
      this.countyInput$.pipe(
@ -129,317 +78,87 @@ export class SearchModalComponent implements OnInit, OnDestroy {
        tap(() => (this.countyLoading = true)),
        switchMap(term =>
          this.geoService.findCountiesStartingWith(term).pipe(
-            catchError(() => of([])),
+            catchError(() => of([])), // empty list on error
-            map(counties => counties.map(county => county.name)),
+            map(counties => counties.map(county => county.name)), // transform the list of objects to a list of city names
            tap(() => (this.countyLoading = false)),
          ),
        ),
      ),
    );
  }
-
+  setCity(city) {
  // Filter removal methods
  removeFilter(filterType: string): void {
    const updates: any = {};
    switch (filterType) {
      case 'state':
        updates.state = null;
        updates.city = null;
        updates.radius = null;
        updates.searchType = 'exact';
        break;
      case 'city':
        updates.city = null;
        updates.radius = null;
        updates.searchType = 'exact';
        break;
      case 'price':
        updates.minPrice = null;
        updates.maxPrice = null;
        break;
      case 'revenue':
        updates.minRevenue = null;
        updates.maxRevenue = null;
        break;
      case 'cashflow':
        updates.minCashFlow = null;
        updates.maxCashFlow = null;
        break;
      case 'types':
        updates.types = [];
        break;
      case 'propertyType':
        updates.realEstateChecked = false;
        updates.leasedLocation = false;
        updates.franchiseResale = false;
        this.selectedPropertyType = null;
        break;
      case 'employees':
        updates.minNumberEmployees = null;
        updates.maxNumberEmployees = null;
        break;
      case 'established':
        updates.establishedMin = null;
        break;
      case 'brokerName':
        updates.brokerName = null;
        break;
      case 'title':
        updates.title = null;
        break;
    }
    this.updateCriteria(updates);
  }
  // Category handling
  onCategoryChange(selectedCategories: string[]): void {
    this.updateCriteria({ types: selectedCategories });
  }
  categoryClicked(checked: boolean, value: string): void {
    const types = [...(this.criteria.types || [])];
    if (checked) {
      if (!types.includes(value)) {
        types.push(value);
      }
    } else {
      const index = types.indexOf(value);
      if (index > -1) {
        types.splice(index, 1);
      }
    }
    this.updateCriteria({ types });
  }
  // Property type handling (Business listings only)
  onPropertyTypeChange(value: string): void {
    const updates: any = {
      realEstateChecked: false,
      leasedLocation: false,
      franchiseResale: false,
    };
    if (value) {
      updates[value] = true;
    }
    this.selectedPropertyType = value;
    this.updateCriteria(updates);
  }
  onCheckboxChange(checkbox: string, value: boolean): void {
    const updates: any = {
      realEstateChecked: false,
      leasedLocation: false,
      franchiseResale: false,
    };
    updates[checkbox] = value;
    this.selectedPropertyType = value ? checkbox : null;
    this.updateCriteria(updates);
  }
  // Location handling
  setState(state: string): void {
    const updates: any = { state };
    if (!state) {
      updates.city = null;
      updates.radius = null;
      updates.searchType = 'exact';
    }
    this.updateCriteria(updates);
  }
  setCity(city: any): void {
    const updates: any = {};
    if (city) {
-      updates.city = city;
+      this.criteria.city = city;
-      updates.state = city.state;
+      this.criteria.state = city.state;
      // Automatically set radius to 50 miles and enable radius search
      updates.searchType = 'radius';
      updates.radius = 50;
    } else {
-      updates.city = null;
+      this.criteria.city = null;
-      updates.radius = null;
+      this.criteria.radius = null;
-      updates.searchType = 'exact';
+      this.criteria.searchType = 'exact';
    }
    this.updateCriteria(updates);
  }
-
+  setState(state: string) {
-  setRadius(radius: number): void {
+    if (state) {
-    this.updateCriteria({ radius });
+      this.criteria.state = state;
    } else {
      this.criteria.state = null;
      this.setCity(null);
    }
  }
-
+  private setupCriteriaChangeListener() {
-  onCriteriaChange(): void {
+    this.criteriaChangeSubscription = this.criteriaChangeService.criteriaChange$.pipe(debounceTime(400)).subscribe(() => {
    this.triggerSearch();
  }
  // Debounced search for text inputs
  debouncedSearch(): void {
    this.searchDebounce$.next();
  }
  // Clear all filters
  clearFilter(): void {
    if (this.isModal) {
      // In modal: Reset locally
      const defaultCriteria = this.getDefaultCriteria();
      this.criteria = defaultCriteria;
      this.updateSelectedPropertyType();
      this.setTotalNumberOfResults();
-    } else {
+      this.cancelDisable = true;
-      // Embedded: Use state service
+    });
      this.filterStateService.clearFilters(this.currentListingType);
    }
  }
-
+  trackByFn(item: GeoResult) {
  // Modal-specific methods
  closeAndSearch(): void {
    if (this.isModal) {
      // Save changes to state
      this.filterStateService.setCriteria(this.currentListingType, this.criteria);
      this.modalService.accept();
      this.searchService.search(this.currentListingType);
    }
  }
  close(): void {
    if (this.isModal) {
      // Discard changes
      this.modalService.reject(this.backupCriteria);
    }
  }
  // Helper methods
  public updateCriteria(updates: any): void {
    if (this.isModal) {
      // In modal: Update locally only
      this.criteria = { ...this.criteria, ...updates };
      this.setTotalNumberOfResults();
    } else {
      // Embedded: Update through state service
      this.filterStateService.updateCriteria(this.currentListingType, updates);
    }
    // Trigger search after update
    this.debouncedSearch();
  }
  private triggerSearch(): void {
    if (this.isModal) {
      // In modal: Only update count
      this.setTotalNumberOfResults();
    } else {
      // Embedded: Full search
      this.searchService.search(this.currentListingType);
    }
  }
  private updateSelectedPropertyType(): void {
    if (this.currentListingType === 'businessListings') {
      const businessCriteria = this.criteria as BusinessListingCriteria;
      if (businessCriteria.realEstateChecked) {
        this.selectedPropertyType = 'realEstateChecked';
      } else if (businessCriteria.leasedLocation) {
        this.selectedPropertyType = 'leasedLocation';
      } else if (businessCriteria.franchiseResale) {
        this.selectedPropertyType = 'franchiseResale';
      } else {
        this.selectedPropertyType = null;
      }
    }
  }
  private setTotalNumberOfResults(): void {
    if (!this.criteria) return;
    switch (this.currentListingType) {
      case 'businessListings':
        this.numberOfResults$ = this.listingService.getNumberOfListings('business', this.criteria);
        break;
      case 'commercialPropertyListings':
        this.numberOfResults$ = this.listingService.getNumberOfListings('commercialProperty', this.criteria);
        break;
      case 'brokerListings':
        this.numberOfResults$ = this.userService.getNumberOfBroker();
        break;
    }
  }
  private getDefaultCriteria(): any {
    switch (this.currentListingType) {
      case 'businessListings':
        return this.filterStateService['createEmptyBusinessListingCriteria']();
      case 'commercialPropertyListings':
        return this.filterStateService['createEmptyCommercialPropertyListingCriteria']();
      case 'brokerListings':
        return this.filterStateService['createEmptyUserListingCriteria']();
    }
  }
  hasActiveFilters(): boolean {
    if (!this.criteria) return false;
    // Check all possible filter properties
    const hasBasicFilters = !!(this.criteria.state || this.criteria.city || this.criteria.types?.length);
    // Check business-specific filters
    if (this.currentListingType === 'businessListings') {
      const bc = this.criteria as BusinessListingCriteria;
      return (
        hasBasicFilters ||
        !!(
          bc.minPrice ||
          bc.maxPrice ||
          bc.minRevenue ||
          bc.maxRevenue ||
          bc.minCashFlow ||
          bc.maxCashFlow ||
          bc.minNumberEmployees ||
          bc.maxNumberEmployees ||
          bc.establishedMin ||
          bc.brokerName ||
          bc.title ||
          this.selectedPropertyType
        )
      );
    }
    // Check commercial property filters
    // if (this.currentListingType === 'commercialPropertyListings') {
    //   const cc = this.criteria as CommercialPropertyListingCriteria;
    //   return hasBasicFilters || !!(cc.minPrice || cc.maxPrice || cc.title);
    // }
    // Check user/broker filters
    // if (this.currentListingType === 'brokerListings') {
    //   const uc = this.criteria as UserListingCriteria;
    //   return hasBasicFilters || !!(uc.brokerName || uc.companyName || uc.counties?.length);
    // }
    return hasBasicFilters;
  }
  getSelectedPropertyTypeName(): string | null {
    return this.selectedPropertyType ? this.propertyTypeOptions.find(opt => opt.value === this.selectedPropertyType)?.name || null : null;
  }
  isTypeOfBusinessClicked(v: KeyValueStyle): boolean {
    return !!this.criteria.types?.find(t => t === v.value);
  }
  isTypeOfProfessionalClicked(v: KeyValue): boolean {
    return !!this.criteria.types?.find(t => t === v.value);
  }
  trackByFn(item: GeoResult): any {
    return item.id;
  }
  search() {
    console.log('Search criteria:', this.criteria);
  }
  getCounties() {
    this.geoService.findCountiesStartingWith('');
  }
  closeModal() {
    console.log('Closing modal');
  }
  isTypeOfBusinessClicked(v: KeyValueStyle) {
    return this.criteria.types.find(t => t === v.value);
  }
  isTypeOfProfessionalClicked(v: KeyValue) {
    return this.criteria.types.find(t => t === v.value);
  }
  setTotalNumberOfResults() {
    if (this.criteria) {
      console.log(`Getting total number of results for ${this.criteria.criteriaType}`);
      if (this.criteria.criteriaType === 'businessListings' || this.criteria.criteriaType === 'commercialPropertyListings') {
        this.numberOfResults$ = this.listingService.getNumberOfListings(this.criteria, this.criteria.criteriaType === 'businessListings' ? 'business' : 'commercialProperty');
      } else if (this.criteria.criteriaType === 'brokerListings') {
        this.numberOfResults$ = this.userService.getNumberOfBroker(this.criteria);
      } else {
        this.numberOfResults$ = of();
      }
    }
  }
  clearFilter() {
    if (this.criteria.criteriaType === 'businessListings') {
      resetBusinessListingCriteria(this.criteria);
    } else if (this.criteria.criteriaType === 'commercialPropertyListings') {
      resetCommercialPropertyListingCriteria(this.criteria);
    } else {
      resetUserListingCriteria(this.criteria);
    }
  }
  close() {
    this.modalService.reject(this.backupCriteria);
  }
  onCheckboxChange(checkbox: string, value: boolean) {
    // Deaktivieren Sie alle Checkboxes
    (<BusinessListingCriteria>this.criteria).realEstateChecked = false;
    (<BusinessListingCriteria>this.criteria).leasedLocation = false;
    (<BusinessListingCriteria>this.criteria).franchiseResale = false;
-  ngOnDestroy(): void {
+    // Aktivieren Sie nur die aktuell ausgewählte Checkbox
-    this.destroy$.next();
+    this.criteria[checkbox] = value;
    this.destroy$.complete();
  }
 }
--- a/bizmatch/src/app/components/test-ssr/test-ssr.component.ts
+++ b/bizmatch/src/app/components/test-ssr/test-ssr.component.ts
@ -1,24 +0,0 @@
 import { Component } from '@angular/core';
@Component({
  selector: 'app-test-ssr',
  standalone: true,
  template: `
    <div>
      <h1>SSR Test Component</h1>
      <p>If you see this, SSR is working!</p>
    </div>
  `,
  styles: [`
    div {
      padding: 20px;
      background: #f0f0f0;
    }
    h1 { color: green; }
  `]
 })
 export class TestSsrComponent {
  constructor() {
    console.log('[SSR] TestSsrComponent constructor called');
  }
 }
--- a/bizmatch/src/app/components/tooltip/tooltip.component.ts
+++ b/bizmatch/src/app/components/tooltip/tooltip.component.ts
@ -1,5 +1,6 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { Component, Input, SimpleChanges, PLATFORM_ID, inject } from '@angular/core';
+import { Component, Input, SimpleChanges } from '@angular/core';
 import { initFlowbite } from 'flowbite';
@Component({
  selector: 'app-tooltip',
@ -12,9 +13,6 @@ export class TooltipComponent {
  @Input() text: string;
  @Input() isVisible: boolean = false;
  private platformId = inject(PLATFORM_ID);
  private isBrowser = isPlatformBrowser(this.platformId);
  ngOnInit() {
    this.initializeTooltip();
  }
@ -26,12 +24,12 @@ export class TooltipComponent {
  }
  private initializeTooltip() {
-    // Flowbite is now initialized once in AppComponent
+    setTimeout(() => {
      initFlowbite();
    }, 10);
  }
  private updateTooltipVisibility() {
    if (!this.isBrowser) return;
    const tooltipElement = document.getElementById(this.id);
    if (tooltipElement) {
      if (this.isVisible) {
--- a/bizmatch/src/app/components/validated-input/validated-input.component.ts
+++ b/bizmatch/src/app/components/validated-input/validated-input.component.ts
@ -10,7 +10,7 @@ import { ValidationMessagesService } from '../validation-messages.service';
  selector: 'app-validated-input',
  templateUrl: './validated-input.component.html',
  standalone: true,
-  imports: [CommonModule, FormsModule, TooltipComponent, NgxMaskDirective],
+  imports: [CommonModule, FormsModule, TooltipComponent, NgxMaskDirective, NgxMaskPipe],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
--- a/bizmatch/src/app/components/validated-price/validated-price.component.ts
+++ b/bizmatch/src/app/components/validated-price/validated-price.component.ts
@ -1,9 +1,7 @@
 import { CommonModule } from '@angular/common';
-import { Component, forwardRef, Input, OnInit, OnDestroy } from '@angular/core';
+import { Component, forwardRef, Input } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgxCurrencyDirective } from 'ngx-currency';
 import { Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { BaseInputComponent } from '../base-input/base-input.component';
 import { TooltipComponent } from '../tooltip/tooltip.component';
 import { ValidationMessagesService } from '../validation-messages.service';
@ -22,39 +20,15 @@ import { ValidationMessagesService } from '../validation-messages.service';
  templateUrl: './validated-price.component.html',
  styles: `:host{width:100%}`,
 })
-export class ValidatedPriceComponent extends BaseInputComponent implements OnInit, OnDestroy {
+export class ValidatedPriceComponent extends BaseInputComponent {
  @Input() inputClasses: string;
  @Input() placeholder: string = '';
  @Input() debounceTimeMs: number = 400; // Configurable debounce time in milliseconds
  private inputChange$ = new Subject<any>();
  private destroy$ = new Subject<void>();
  constructor(validationMessagesService: ValidationMessagesService) {
    super(validationMessagesService);
  }
  override ngOnInit(): void {
    // Setup debounced onChange
    this.inputChange$
      .pipe(
        debounceTime(this.debounceTimeMs),
        takeUntil(this.destroy$)
      )
      .subscribe(value => {
        this.value = value;
        this.onChange(this.value);
      });
  }
  override ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
  onInputChange(event: Event): void {
-    const newValue = !event ? null : event;
+    this.value = !event ? null : event;
-    // Send signal to Subject instead of calling onChange directly
+    this.onChange(this.value);
    this.inputChange$.next(newValue);
  }
 }
--- a/bizmatch/src/app/components/validated-quill/validated-quill.component.ts
+++ b/bizmatch/src/app/components/validated-quill/validated-quill.component.ts
@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, forwardRef, ViewEncapsulation } from '@angular/core';
+import { Component, forwardRef } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { QuillModule } from 'ngx-quill';
 import { BaseInputComponent } from '../base-input/base-input.component';
@ -9,11 +9,9 @@ import { ValidationMessagesService } from '../validation-messages.service';
@Component({
  selector: 'app-validated-quill',
  templateUrl: './validated-quill.component.html',
-  styleUrls: ['../../../../node_modules/quill/dist/quill.snow.css'],
+  styles: `quill-editor {
  styles: [`quill-editor {
            width: 100%;
-          }`],
+          }`,
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [CommonModule, FormsModule, QuillModule, TooltipComponent],
  providers: [
--- a/bizmatch/src/app/directives/lazy-load-image.directive.ts
+++ b/bizmatch/src/app/directives/lazy-load-image.directive.ts
@ -1,90 +0,0 @@
 import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
@Directive({
  selector: 'img[appLazyLoad]',
  standalone: true
 })
 export class LazyLoadImageDirective implements OnInit {
  @Input() appLazyLoad: string = '';
  @Input() placeholder: string = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"%3E%3Crect fill="%23f3f4f6" width="400" height="300"/%3E%3C/svg%3E';
  private observer: IntersectionObserver | null = null;
  constructor(
    private el: ElementRef<HTMLImageElement>,
    private renderer: Renderer2
  ) {}
  ngOnInit() {
    // Add loading="lazy" attribute for native lazy loading
    this.renderer.setAttribute(this.el.nativeElement, 'loading', 'lazy');
    // Set placeholder while image loads
    if (this.placeholder) {
      this.renderer.setAttribute(this.el.nativeElement, 'src', this.placeholder);
    }
    // Add a CSS class for styling during loading
    this.renderer.addClass(this.el.nativeElement, 'lazy-loading');
    // Use Intersection Observer for enhanced lazy loading
    if ('IntersectionObserver' in window) {
      this.observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              this.loadImage();
            }
          });
        },
        {
          rootMargin: '50px' // Start loading 50px before image enters viewport
        }
      );
      this.observer.observe(this.el.nativeElement);
    } else {
      // Fallback for browsers without Intersection Observer
      this.loadImage();
    }
  }
  private loadImage() {
    const img = this.el.nativeElement;
    const src = this.appLazyLoad || img.getAttribute('data-src');
    if (src) {
      // Create a new image to preload
      const tempImg = new Image();
      tempImg.onload = () => {
        this.renderer.setAttribute(img, 'src', src);
        this.renderer.removeClass(img, 'lazy-loading');
        this.renderer.addClass(img, 'lazy-loaded');
        // Disconnect observer after loading
        if (this.observer) {
          this.observer.disconnect();
        }
      };
      tempImg.onerror = () => {
        console.error('Failed to load image:', src);
        this.renderer.removeClass(img, 'lazy-loading');
        this.renderer.addClass(img, 'lazy-error');
        if (this.observer) {
          this.observer.disconnect();
        }
      };
      tempImg.src = src;
    }
  }
  ngOnDestroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
  }
 }
--- a/bizmatch/src/app/guards/auth.guard.ts
+++ b/bizmatch/src/app/guards/auth.guard.ts
@ -1,27 +1,15 @@
-import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { CanActivate, Router } from '@angular/router';
 import { AuthService } from '../services/auth.service';
-import { isPlatformBrowser } from '@angular/common';
+import { createLogger } from '../utils/utils';
-
+const logger = createLogger('AuthGuard');
@Injectable({
  providedIn: 'root',
 })
 export class AuthGuard implements CanActivate {
-  
+  constructor(private authService: AuthService, private router: Router) {}
  constructor(
    private authService: AuthService, 
    private router: Router,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}
  async canActivate(): Promise<boolean> {
    // 1. SSR CHECK: Wenn wir auf dem Server sind, immer erlauben!
    // Der Server soll nicht redirecten, sondern einfach das HTML rendern.
    if (!isPlatformBrowser(this.platformId)) {
      return true; 
    }
    // 2. CLIENT CHECK: Das läuft nur im Browser
    const token = await this.authService.getToken();
    if (token) {
      return true;
--- a/bizmatch/src/app/guards/listing-category.guard.ts
+++ b/bizmatch/src/app/guards/listing-category.guard.ts
@ -19,11 +19,10 @@ export class ListingCategoryGuard implements CanActivate {
    return this.http.get<any>(url).pipe(
      tap(response => {
        const category = response.listingsCategory;
        const slug = response.slug || id;
        if (category === 'business') {
-          this.router.navigate(['business', slug]);
+          this.router.navigate(['details-business-listing', id]);
        } else if (category === 'commercialProperty') {
-          this.router.navigate(['commercial-property', slug]);
+          this.router.navigate(['details-commercial-property-listing', id]);
        } else {
          this.router.navigate(['not-found']);
        }
--- a/bizmatch/src/app/pages/admin/user-list/user-list.component.html
+++ b/bizmatch/src/app/pages/admin/user-list/user-list.component.html
@ -32,7 +32,7 @@
  </div>
  <!-- Benutzertabelle -->
-  <div class="overflow-x-auto drop-shadow-custom-bg rounded-lg bg-white">
+  <div class="overflow-x-auto shadow-md rounded-lg bg-white">
    <table class="min-w-full divide-y divide-gray-200">
      <thead class="bg-gray-50">
        <tr>
@ -107,7 +107,7 @@
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
              </button>
-              <div *ngIf="dropdown.classList.contains('active')" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md drop-shadow-custom-bg bg-white ring-1 ring-black ring-opacity-5 z-10">
+              <div *ngIf="dropdown.classList.contains('active')" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
                <div class="py-1" role="menu" aria-orientation="vertical">
                  <a (click)="changeUserRole(user, 'admin'); dropdown.classList.remove('active')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">Admin</a>
                  <a (click)="changeUserRole(user, 'pro'); dropdown.classList.remove('active')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">Pro</a>
--- a/Show More
+++ b/Show More
		`@ -0,0 +1,2 @@`
							`REALM=bizmatch`
							`WEB_HOST=https://www.bizmatch.net`
		`@ -1 +0,0 @@`
			`google-site-verification: googleccd5315437d68a49.html`