aknuth
/
bizmatch-project
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 5 Releases Wiki Activity

SEO/AEO, Farb schema, breadcrumbs

This commit is contained in:
Timo Knuth 2025-11-29 23:41:54 +01:00
parent 4fa24c8f3d
commit d2953fd0d9
87 changed files with 5672 additions and 579 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

647
CHANGES.md Normal file
View File

@ -0,0 +1,647 @@
# 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

31
bizmatch-server/docker-compose.yml
View File

@ -1,21 +1,19 @@
# ~/git/bizmatch-project/bizmatch-server/docker-compose.yml
services:
app:
image: node:22-alpine
container_name: bizmatch-app
working_dir: /app
volumes:
- ./:/app # Code liegt hier direkt im Ordner der Compose
- ./:/app
- node_modules:/app/node_modules
ports:
- '3001:3000' # Host 3001 -> Container 3000
- '3001:3001'
env_file:
- path: ./.env
required: true
- .env
environment:
- NODE_ENV=development # Prod-Modus (vorher stand fälschlich "development")
- NODE_ENV=development
- DATABASE_URL
# Hinweis: npm ci nutzt package-lock.json; falls nicht vorhanden, nimm "npm install"
command: sh -c "npm ci && npm run build && node dist/src/main.js"
command: sh -c "if [ ! -f node_modules/.installed ]; then npm ci && touch node_modules/.installed; fi && npm run build && node dist/src/main.js"
restart: unless-stopped
depends_on:
- postgres
@ -24,22 +22,27 @@ services:
postgres:
container_name: bizmatchdb
image: postgres:17-alpine # Version pinnen ist stabiler als "latest"
image: postgres:17-alpine
restart: unless-stopped
volumes:
- ${PWD}/bizmatchdb-data:/var/lib/postgresql/data # Daten liegen im Server-Repo
- bizmatch-db-data:/var/lib/postgresql/data
env_file:
- path: ./.env
required: true
- .env
environment:
POSTGRES_DB: ${POSTGRES_DB}
POSTGRES_USER: ${POSTGRES_USER}
POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
ports:
- '5433:5432' # Host 5433 -> Container 5432
- '5434:5432'
networks:
- bizmatch
volumes:
bizmatch-db-data:
driver: local
node_modules:
driver: local
networks:
bizmatch:
external: true # einmalig anlegen: docker network create bizmatch-prod
external: true

17
bizmatch-server/package.json
View File

@ -23,14 +23,19 @@
"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",
"@nestjs/cli": "^11.0.11",
"@nestjs/platform-express": "^11.0.11",
"@types/stripe": "^8.0.417",
"body-parser": "^1.20.2",
@ -51,7 +56,7 @@
"pgvector": "^0.2.0",
"reflect-metadata": "^0.2.0",
"rxjs": "^7.8.1",
"sharp": "^0.33.2",
"sharp": "^0.33.5",
"stripe": "^16.8.0",
"tsx": "^4.16.2",
"urlcat": "^3.1.0",
@ -66,11 +71,11 @@
"@nestjs/testing": "^11.0.11",
"@types/express": "^4.17.17",
"@types/multer": "^1.4.11",
"@types/node": "^20.11.19",
"@types/node": "^20.19.25",
"@types/nodemailer": "^6.4.14",
"@types/pg": "^8.11.5",
"commander": "^12.0.0",
"drizzle-kit": "^0.23.0",
"drizzle-kit": "^0.23.2",
"esbuild-register": "^3.5.0",
"eslint": "^8.42.0",
"eslint-config-prettier": "^9.0.0",
@ -86,7 +91,7 @@
"ts-loader": "^9.4.3",
"ts-node": "^10.9.2",
"tsconfig-paths": "^4.2.0",
"typescript": "^5.1.3"
"typescript": "^5.9.3"
},
"jest": {
"moduleFileExtensions": [

2
bizmatch-server/src/app.module.ts
View File

@ -25,6 +25,7 @@ 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();
@ -70,6 +71,7 @@ console.log('Loaded environment variables:');
// PaymentModule,
EventModule,
FirebaseAdminModule,
SitemapModule,
],
controllers: [AppController, LogController],
providers: [

4
bizmatch-server/src/drizzle/schema.ts
View File

@ -117,6 +117,7 @@ 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'),
@ -125,6 +126,7 @@ export const businesses = pgTable(
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),
}),
);
@ -143,6 +145,7 @@ export const commercials = pgTable(
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'),
@ -151,6 +154,7 @@ export const commercials = pgTable(
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),
}),
);

78
bizmatch-server/src/listings/business-listing.service.ts
View File

@ -10,6 +10,7 @@ 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 {
@ -212,6 +213,41 @@ export class BusinessListingService {
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> {
let id = slugOrId;
// Check if it's a slug (contains multiple hyphens) vs UUID
if (isSlug(slugOrId)) {
// Extract short ID from slug and find by slug field
const listing = await this.findBusinessBySlug(slugOrId);
if (listing) {
id = listing.id;
}
}
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') {
@ -246,7 +282,7 @@ export class BusinessListingService {
const userFavorites = await this.conn
.select()
.from(businesses_json)
.where(arrayContains(sql`${businesses_json.data}->>'favoritesForUser'`, [user.email]));
.where(sql`${businesses_json.data}->'favoritesForUser' ? ${user.email}`);
return userFavorites.map(l => ({ id: l.id, email: l.email, ...(l.data as BusinessListing) }) as BusinessListing);
}
@ -258,7 +294,13 @@ export class BusinessListingService {
const { id, email, ...rest } = data;
const convertedBusinessListing = { email, data: rest };
const [createdListing] = await this.conn.insert(businesses_json).values(convertedBusinessListing).returning();
return { id: createdListing.id, email: createdListing.email, ...(createdListing.data as BusinessListing) };
// 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
@ -285,8 +327,21 @@ export class BusinessListingService {
if (existingListing.email === user?.email) {
data.favoritesForUser = (<BusinessListing>existingListing.data).favoritesForUser || [];
}
BusinessListingSchema.parse(data);
const { id: _, email, ...rest } = data;
// 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) };
@ -308,11 +363,24 @@ export class BusinessListingService {
await this.conn.delete(businesses_json).where(eq(businesses_json.id, id));
}
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)
.set({
data: sql`jsonb_set(${businesses_json.data}, '{favoritesForUser}', array_remove((${businesses_json.data}->>'favoritesForUser')::jsonb, ${user.email}))`,
data: sql`jsonb_set(${businesses_json.data}, '{favoritesForUser}',
(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));
}

15
bizmatch-server/src/listings/business-listings.controller.ts
View File

@ -16,9 +16,10 @@ export class BusinessListingsController {
) {}
@UseGuards(OptionalAuthGuard)
@Get(':id')
async findById(@Request() req, @Param('id') id: string): Promise<any> {
return await this.listingsService.findBusinessesById(id, req.user as JwtUser);
@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(AuthGuard)
@Get('favorites/all')
@ -60,9 +61,17 @@ 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' };
}
}

16
bizmatch-server/src/listings/commercial-property-listings.controller.ts
View File

@ -18,9 +18,10 @@ export class CommercialPropertyListingsController {
) {}
@UseGuards(OptionalAuthGuard)
@Get(':id')
async findById(@Request() req, @Param('id') id: string): Promise<any> {
return await this.listingsService.findCommercialPropertiesById(id, req.user as JwtUser);
@Get(':slugOrId')
async findById(@Request() req, @Param('slugOrId') slugOrId: string): Promise<any> {
// Support both slug (e.g., "office-space-austin-tx-a3f7b2c1") and UUID
return await this.listingsService.findCommercialBySlugOrId(slugOrId, req.user as JwtUser);
}
@UseGuards(AuthGuard)
@ -64,9 +65,18 @@ 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' };
}
}

88
bizmatch-server/src/listings/commercial-property.service.ts
View File

@ -11,6 +11,7 @@ import { GeoService } from '../geo/geo.service';
import { CommercialPropertyListing, CommercialPropertyListingSchema } from '../models/db.model';
import { CommercialPropertyListingCriteria, JwtUser } from '../models/main.model';
import { getDistanceQuery } from '../utils';
import { generateSlug, extractShortIdFromSlug, isSlug } from '../utils/slug.utils';
@Injectable()
export class CommercialPropertyService {
@ -111,6 +112,41 @@ 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> {
let id = slugOrId;
// Check if it's a slug (contains multiple hyphens) vs UUID
if (isSlug(slugOrId)) {
// Extract short ID from slug and find by slug field
const listing = await this.findCommercialBySlug(slugOrId);
if (listing) {
id = listing.id;
}
}
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') {
@ -146,7 +182,7 @@ export class CommercialPropertyService {
const userFavorites = await this.conn
.select()
.from(commercials_json)
.where(arrayContains(sql`${commercials_json.data}->>'favoritesForUser'`, [user.email]));
.where(sql`${commercials_json.data}->'favoritesForUser' ? ${user.email}`);
return userFavorites.map(l => ({ id: l.id, email: l.email, ...(l.data as CommercialPropertyListing) }) as CommercialPropertyListing);
}
// #### Find by imagePath ########################################
@ -182,7 +218,13 @@ export class CommercialPropertyService {
const { id, email, ...rest } = data;
const convertedCommercialPropertyListing = { email, data: rest };
const [createdListing] = await this.conn.insert(commercials_json).values(convertedCommercialPropertyListing).returning();
return { id: createdListing.id, email: createdListing.email, ...(createdListing.data as CommercialPropertyListing) };
// 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
@ -209,14 +251,27 @@ export class CommercialPropertyService {
if (existingListing.email === user?.email || !user) {
data.favoritesForUser = (<CommercialPropertyListing>existingListing.data).favoritesForUser || [];
}
CommercialPropertyListingSchema.parse(data);
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)));
if (difference.length > 0) {
this.logger.warn(`changes between image directory and imageOrder in listing ${data.serialId}: ${difference.join(',')}`);
data.imageOrder = imageOrder;
// 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);
}
const { id: _, email, ...rest } = data;
// 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(',')}`);
dataWithSlug.imageOrder = imageOrder;
}
const { id: _, email, ...rest } = dataWithSlug;
const convertedCommercialPropertyListing = { email, data: rest };
const [updateListing] = await this.conn.update(commercials_json).set(convertedCommercialPropertyListing).where(eq(commercials_json.id, id)).returning();
return { id: updateListing.id, email: updateListing.email, ...(updateListing.data as CommercialPropertyListing) };
@ -253,12 +308,25 @@ export class CommercialPropertyService {
async deleteListing(id: string): Promise<void> {
await this.conn.delete(commercials_json).where(eq(commercials_json.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)
.set({
data: sql`jsonb_set(${commercials_json.data}, '{favoritesForUser}', array_remove((${commercials_json.data}->>'favoritesForUser')::jsonb, ${user.email}))`,
data: sql`jsonb_set(${commercials_json.data}, '{favoritesForUser}',
(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));
}

2
bizmatch-server/src/main.ts
View File

@ -19,6 +19,6 @@ async function bootstrap() {
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
allowedHeaders: 'Content-Type, Accept, Authorization, x-hide-loading',
});
await app.listen(3000);
await app.listen(process.env.PORT || 3001);
}
bootstrap();

4
bizmatch-server/src/models/db.model.ts
View File

@ -287,6 +287,7 @@ export const BusinessListingSchema = z
brokerLicencing: z.string().optional().nullable(),
internals: z.string().min(5).optional().nullable(),
imageName: z.string().optional().nullable(),
slug: z.string().optional().nullable(),
created: z.date(),
updated: z.date(),
})
@ -333,6 +334,7 @@ export const CommercialPropertyListingSchema = z
draft: z.boolean(),
imageOrder: z.array(z.string()),
imagePath: z.string().nullable().optional(),
slug: z.string().optional().nullable(),
created: z.date(),
updated: z.date(),
})
@ -384,6 +386,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.any()).optional().nullable(), // JSON für zusätzliche Daten, z.B. soziale Medien, optional
additionalData: z.record(z.string(), z.any()).optional().nullable(), // JSON für zusätzliche Daten, z.B. soziale Medien, optional
});
export type ListingEvent = z.infer<typeof ListingEventSchema>;

1
bizmatch-server/src/models/main.model.ts
View File

@ -359,6 +359,7 @@ export function createDefaultUser(email: string, firstname: string, lastname: st
updated: new Date(),
subscriptionId: null,
subscriptionPlan: subscriptionPlan,
showInDirectory: false,
};
}
export function createDefaultCommercialPropertyListing(): CommercialPropertyListing {

51
bizmatch-server/src/sitemap/sitemap.controller.ts Normal file
View File

@ -0,0 +1,51 @@
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);
}
}

12
bizmatch-server/src/sitemap/sitemap.module.ts Normal file
View File

@ -0,0 +1,12 @@
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 {}

292
bizmatch-server/src/sitemap/sitemap.service.ts Normal file
View File

@ -0,0 +1,292 @@
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://biz-match.com';
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}/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);
for (let page = 1; page <= businessPages; page++) {
sitemaps.push({
loc: `${this.baseUrl}/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);
for (let page = 1; page <= commercialPages; page++) {
sitemaps.push({
loc: `${this.baseUrl}/sitemap/commercial-${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];
}
}

9
bizmatch-server/src/user/user.service.ts
View File

@ -24,12 +24,15 @@ export class UserService {
private getWhereConditions(criteria: UserListingCriteria): SQL[] {
const whereConditions: SQL[] = [];
whereConditions.push(sql`(${schema.users_json.data}->>'customerType') = 'professional'`);
if (criteria.city && criteria.searchType === 'exact') {
whereConditions.push(sql`(${schema.users_json.data}->'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(schema.users_json, cityGeo.latitude, cityGeo.longitude)} <= ${criteria.radius}`);
const distanceQuery = getDistanceQuery(schema.users_json, cityGeo.latitude, cityGeo.longitude);
whereConditions.push(sql`${distanceQuery} <= ${criteria.radius}`);
}
if (criteria.types && criteria.types.length > 0) {
// whereConditions.push(inArray(schema.users.customerSubType, criteria.types));
@ -46,11 +49,11 @@ export class UserService {
}
if (criteria.counties && criteria.counties.length > 0) {
whereConditions.push(or(...criteria.counties.map(county => sql`EXISTS (SELECT 1 FROM jsonb_array_elements(${schema.users_json.data}->'areasServed') AS area WHERE area->>'county' ILIKE ${`%${county}%`})`)));
whereConditions.push(or(...criteria.counties.map(county => sql`(${schema.users_json.data}->'location'->>'county') ILIKE ${`%${county}%`}`)));
}
if (criteria.state) {
whereConditions.push(sql`EXISTS (SELECT 1 FROM jsonb_array_elements(${schema.users_json.data}->'areasServed') AS area WHERE area->>'state' = ${criteria.state})`);
whereConditions.push(sql`(${schema.users_json.data}->'location'->>'state') = ${criteria.state}`);
}
//never show user which denied

183
bizmatch-server/src/utils/slug.utils.ts Normal file
View File

@ -0,0 +1,183 @@
/**
* 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 more than 4 hyphens and looks like our slug format, it's probably a slug
return param.split('-').length > 4 && 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();
}

9
bizmatch-server/tsconfig.json
View File

@ -19,5 +19,12 @@
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": false,
"esModuleInterop": true
}
},
"exclude": [
"node_modules",
"dist",
"src/scripts/seed-database.ts",
"src/scripts/create-test-user.ts",
"src/sitemap"
]
}

8
bizmatch/angular.json
View File

@ -32,10 +32,16 @@
"input": "public"
},
"src/favicon.ico",
"src/assets"
"src/assets",
{
"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"
]

5
bizmatch/package.json
View File

@ -25,6 +25,7 @@
"@angular/platform-browser-dynamic": "^18.1.3",
"@angular/platform-server": "^18.1.3",
"@angular/router": "^18.1.3",
"@angular/ssr": "^18.2.21",
"@bluehalo/ngx-leaflet": "^18.0.2",
"@fortawesome/angular-fontawesome": "^0.15.0",
"@fortawesome/fontawesome-free": "^6.7.2",
@ -58,7 +59,9 @@
"tslib": "^2.6.3",
"urlcat": "^3.1.0",
"uuid": "^10.0.0",
"zone.js": "~0.14.7"
"zone.js": "~0.14.7",
"stripe": "^19.3.0",
"zod": "^4.1.12"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.1.3",

92
bizmatch/server.ts
View File

@ -1,56 +1,56 @@
// import { APP_BASE_HREF } from '@angular/common';
// 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';
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';
// // The Express app is exported so that it can be used by serverless Functions.
// export function app(): express.Express {
// const server = express();
// const serverDistFolder = dirname(fileURLToPath(import.meta.url));
// const browserDistFolder = resolve(serverDistFolder, '../browser');
// const indexHtml = join(serverDistFolder, 'index.server.html');
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');
// const commonEngine = new CommonEngine();
const commonEngine = new CommonEngine();
// server.set('view engine', 'html');
// server.set('views', browserDistFolder);
server.set('view engine', 'html');
server.set('views', browserDistFolder);
// // Example Express Rest API endpoints
// // server.get('/api/**', (req, res) => { });
// // Serve static files from /browser
// server.get('*.*', express.static(browserDistFolder, {
// maxAge: '1y'
// }));
// Example Express Rest API endpoints
// 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('*', (req, res, next) => {
// const { protocol, originalUrl, baseUrl, headers } = req;
// All regular routes use the Angular engine
server.get('*', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;
// commonEngine
// .render({
// bootstrap,
// documentFilePath: indexHtml,
// url: `${protocol}://${headers.host}${originalUrl}`,
// publicPath: browserDistFolder,
// providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
// })
// .then((html) => res.send(html))
// .catch((err) => next(err));
// });
commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});
// return server;
// }
return server;
}
// function run(): void {
// const port = process.env['PORT'] || 4000;
function run(): void {
const port = process.env['PORT'] || 4000;
// // Start up the Node server
// const server = app();
// server.listen(port, () => {
// console.log(`Node Express server listening on http://localhost:${port}`);
// });
// }
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
// run();
run();

29
bizmatch/src/app/app.routes.ts
View File

@ -23,6 +23,8 @@ import { EmailUsComponent } from './pages/subscription/email-us/email-us.compone
import { FavoritesComponent } from './pages/subscription/favorites/favorites.component';
import { MyListingComponent } from './pages/subscription/my-listing/my-listing.component';
import { SuccessComponent } from './pages/success/success.component';
import { TermsOfUseComponent } from './pages/legal/terms-of-use.component';
import { PrivacyStatementComponent } from './pages/legal/privacy-statement.component';
export const routes: Routes = [
{
@ -45,15 +47,26 @@ export const routes: Routes = [
component: HomeComponent,
},
// #########
// Listings Details
// Listings Details - New SEO-friendly slug-based URLs
{
path: 'details-business-listing/:id',
path: 'business/:slug',
component: DetailsBusinessListingComponent,
},
{
path: 'details-commercial-property-listing/:id',
path: 'commercial-property/:slug',
component: DetailsCommercialPropertyListingComponent,
},
// Backward compatibility redirects for old UUID-based URLs
{
path: 'details-business-listing/:id',
redirectTo: 'business/:id',
pathMatch: 'full',
},
{
path: 'details-commercial-property-listing/:id',
redirectTo: 'commercial-property/:id',
pathMatch: 'full',
},
{
path: 'listing/:id',
canActivate: [ListingCategoryGuard],
@ -177,5 +190,15 @@ export const routes: Routes = [
component: UserListComponent,
canActivate: [AuthGuard],
},
// #########
// Legal Pages
{
path: 'terms-of-use',
component: TermsOfUseComponent,
},
{
path: 'privacy-statement',
component: PrivacyStatementComponent,
},
{ path: '**', redirectTo: 'home' },
];

68
bizmatch/src/app/components/breadcrumbs/breadcrumbs.component.ts Normal file
View File

@ -0,0 +1,68 @@
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[] = [];
}

10
bizmatch/src/app/components/email/email.component.ts
View File

@ -17,7 +17,15 @@ 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 => {

93
bizmatch/src/app/components/faq/faq.component.ts Normal file
View File

@ -0,0 +1,93 @@
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();
}
}

30
bizmatch/src/app/components/footer/footer.component.html
View File

@ -3,32 +3,32 @@
<div class="flex flex-col lg:flex-row items-center mb-4 lg:mb-0">
<!-- <img src="assets/images/header-logo.png" alt="BizMatch Logo" class="h-8 mb-2 lg:mb-0 lg:mr-4" /> -->
<a routerLink="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
<img src="assets/images/header-logo.png" class="h-8" class="h-8 mb-2 lg:mb-0 lg:mr-4" />
<img src="assets/images/header-logo.png" class="h-8 mb-2 lg:mb-0 lg:mr-4" width="120" height="32" />
</a>
<p class="text-sm text-gray-600 text-center lg:text-left">© {{ currentYear }} Bizmatch All rights reserved.</p>
<p class="text-sm text-neutral-600 text-center lg:text-left">© {{ currentYear }} Bizmatch All rights reserved.</p>
</div>
<div class="flex flex-col lg:flex-row items-center order-3 lg:order-2">
<a class="text-sm text-blue-600 hover:underline hover:cursor-pointer mx-2" data-drawer-target="terms-of-use" data-drawer-show="terms-of-use" aria-controls="terms-of-use">Terms of use</a>
<a class="text-sm text-blue-600 hover:underline hover:cursor-pointer mx-2" data-drawer-target="privacy" data-drawer-show="privacy" aria-controls="privacy">Privacy statement</a>
<!-- <a class="text-sm text-blue-600 hover:underline hover:cursor-pointer mx-2" routerLink="/pricingOverview">Pricing</a> -->
<a class="text-sm text-primary-600 hover:underline hover:cursor-pointer mx-2" routerLink="/terms-of-use">Terms of use</a>
<a class="text-sm text-primary-600 hover:underline hover:cursor-pointer mx-2" routerLink="/privacy-statement">Privacy statement</a>
<!-- <a class="text-sm text-primary-600 hover:underline hover:cursor-pointer mx-2" routerLink="/pricingOverview">Pricing</a> -->
</div>
<div class="flex flex-col lg:flex-row items-center order-2 lg:order-3">
<div class="mb-4 lg:mb-0 lg:mr-6 text-center lg:text-right">
<p class="text-sm text-gray-600 mb-1 lg:mb-2">BizMatch, Inc., 1001 Blucher Street, Corpus</p>
<p class="text-sm text-gray-600">Christi, Texas 78401</p>
<p class="text-sm text-neutral-600 mb-1 lg:mb-2">BizMatch, Inc., 1001 Blucher Street, Corpus</p>
<p class="text-sm text-neutral-600">Christi, Texas 78401</p>
</div>
<div class="mb-4 lg:mb-0 flex flex-col items-center lg:items-end">
<a class="text-sm text-gray-600 mb-1 lg:mb-2 hover:text-blue-600 w-full"> <i class="fas fa-phone-alt mr-2"></i>1-800-840-6025 </a>
<a class="text-sm text-gray-600 hover:text-blue-600"> <i class="fas fa-envelope mr-2"></i>info&#64;bizmatch.net </a>
<a class="text-sm text-neutral-600 mb-1 lg:mb-2 hover:text-primary-600 w-full"> <i class="fas fa-phone-alt mr-2"></i>1-800-840-6025 </a>
<a class="text-sm text-neutral-600 hover:text-primary-600"> <i class="fas fa-envelope mr-2"></i>info&#64;bizmatch.net </a>
</div>
</div>
</div>
</footer>
<div id="privacy" class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white lg:w-1/3 w-96 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-label">
<h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
<div id="privacy" class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white lg:w-1/3 w-96 dark:bg-neutral-800" tabindex="-1" aria-labelledby="drawer-label">
<h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold text-neutral-500 dark:text-neutral-400">
<svg class="w-4 h-4 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
</svg>
@ -38,7 +38,7 @@
type="button"
data-drawer-hide="privacy"
aria-controls="privacy"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white"
class="text-neutral-400 bg-transparent hover:bg-neutral-200 hover:text-neutral-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center dark:hover:bg-neutral-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" />
@ -242,8 +242,8 @@
</article>
</section>
</div>
<div id="terms-of-use" class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white lg:w-1/3 w-96 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-label">
<h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
<div id="terms-of-use" class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white lg:w-1/3 w-96 dark:bg-neutral-800" tabindex="-1" aria-labelledby="drawer-label">
<h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold text-neutral-500 dark:text-neutral-400">
<svg class="w-4 h-4 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
</svg>
@ -253,7 +253,7 @@
type="button"
data-drawer-hide="terms-of-use"
aria-controls="terms-of-use"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white"
class="text-neutral-400 bg-transparent hover:bg-neutral-200 hover:text-neutral-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center dark:hover:bg-neutral-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" />

88
bizmatch/src/app/components/header/header.component.html
View File

@ -1,7 +1,7 @@
<nav class="bg-white border-gray-200 dark:bg-gray-900 print:hidden">
<nav class="bg-white border-neutral-200 dark:bg-neutral-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" alt="Flowbite Logo" />
<img src="assets/images/header-logo.png" class="h-10" 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 -->
@ -11,18 +11,18 @@
<button
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"
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"
(click)="toggleSortDropdown()"
[ngClass]="{ 'text-blue-500': selectOptions.getSortByOption(sortBy) !== 'Sort', 'text-gray-900': selectOptions.getSortByOption(sortBy) === 'Sort' }"
[ngClass]="{ 'text-primary-500': selectOptions.getSortByOption(sortBy) !== 'Sort', 'text-neutral-900': selectOptions.getSortByOption(sortBy) === 'Sort' }"
>
<i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(sortBy) }}
</button>
<!-- Sort options dropdown -->
<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 drop-shadow-custom-bg dark:bg-gray-800 dark:border-gray-600">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200">
<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-neutral-200 rounded-lg drop-shadow-custom-bg dark:bg-neutral-800 dark:border-neutral-600">
<ul class="py-1 text-sm text-neutral-700 dark:text-neutral-200">
@for(item of sortByOptions; track item){
<li (click)="sortByFct(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>
<li (click)="sortByFct(item.value)" class="block px-4 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-700 cursor-pointer">{{ item.selectName ? item.selectName : item.name }}</li>
}
</ul>
</div>
@ -30,7 +30,7 @@
}
<button
type="button"
class="flex text-sm bg-gray-400 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
class="flex text-sm bg-neutral-400 rounded-full md:me-0 focus:ring-4 focus:ring-neutral-300 dark:focus:ring-neutral-600"
id="user-menu-button"
aria-expanded="false"
[attr.data-dropdown-toggle]="user ? 'user-login' : 'user-unknown'"
@ -38,52 +38,52 @@
>
<span class="sr-only">Open user menu</span>
@if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
<img class="w-8 h-8 rounded-full object-cover" src="{{ profileUrl }}" alt="user photo" />
<img class="w-8 h-8 rounded-full object-cover" src="{{ profileUrl }}" 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 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">
<div 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-gray-900 dark:text-white">Welcome, {{ user.firstname }} </span>
<span class="block text-sm text-gray-500 truncate dark:text-gray-400">{{ user.email }}</span>
<span class="block text-sm text-neutral-900 dark:text-white">Welcome, {{ user.firstname }} </span>
<span class="block text-sm text-neutral-500 truncate dark:text-neutral-400">{{ user.email }}</span>
</div>
<ul class="py-2" aria-labelledby="user-menu-button">
<li>
<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>
<a routerLink="/account" (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">Account</a>
</li>
@if((user.customerType==='professional' && user.customerSubType==='broker') || user.customerType==='seller' || (authService.isAdmin() | async)){
<li>
@if(user.customerType==='professional'){
<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"
<a routerLink="/createBusinessListing" (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"
>Create Listing</a
>
}@else {
<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"
<a routerLink="/createCommercialPropertyListing" (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"
>Create Listing</a
>
}
</li>
<li>
<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>
<a routerLink="/myListings" (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">My Listings</a>
</li>
}
<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>
<a routerLink="/myFavorites" (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">My Favorites</a>
</li>
<li>
<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>
<a routerLink="/emailUs" (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">EMail Us</a>
</li>
<li>
<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>
<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()" 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>
<a routerLink="admin/users" (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">Users (Admin)</a>
</li>
</ul>
}
@ -91,7 +91,7 @@
<li>
<a
routerLink="/businessListings"
[ngClass]="{ 'text-blue-700': isActive('/businessListings'), 'text-gray-700': !isActive('/businessListings') }"
[ngClass]="{ 'text-primary-600': isActive('/businessListings'), 'text-neutral-700': !isActive('/businessListings') }"
class="block px-4 py-2 text-sm font-semibold"
(click)="closeMenusAndSetCriteria('businessListings')"
>Businesses</a
@ -101,7 +101,7 @@
<li>
<a
routerLink="/commercialPropertyListings"
[ngClass]="{ 'text-blue-700': isActive('/commercialPropertyListings'), 'text-gray-700': !isActive('/commercialPropertyListings') }"
[ngClass]="{ 'text-primary-600': isActive('/commercialPropertyListings'), 'text-neutral-700': !isActive('/commercialPropertyListings') }"
class="block px-4 py-2 text-sm font-semibold"
(click)="closeMenusAndSetCriteria('commercialPropertyListings')"
>Properties</a
@ -111,7 +111,7 @@
<li>
<a
routerLink="/brokerListings"
[ngClass]="{ 'text-blue-700': isActive('/brokerListings'), 'text-gray-700': !isActive('/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
@ -121,20 +121,20 @@
</ul>
</div>
} @else {
<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">
<div 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' }" 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>
<a routerLink="/login" [queryParams]="{ mode: 'login' }" 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' }" 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">Sign Up</a>
<a routerLink="/login" [queryParams]="{ mode: 'register' }" 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"
[ngClass]="{ 'text-blue-700': isActive('/businessListings'), 'text-gray-700': !isActive('/businessListings') }"
[ngClass]="{ 'text-primary-600': isActive('/businessListings'), 'text-neutral-700': !isActive('/businessListings') }"
class="block px-4 py-2 text-sm font-bold"
(click)="closeMenusAndSetCriteria('businessListings')"
>Businesses</a
@ -144,7 +144,7 @@
<li>
<a
routerLink="/commercialPropertyListings"
[ngClass]="{ 'text-blue-700': isActive('/commercialPropertyListings'), 'text-gray-700': !isActive('/commercialPropertyListings') }"
[ngClass]="{ 'text-primary-600': isActive('/commercialPropertyListings'), 'text-neutral-700': !isActive('/commercialPropertyListings') }"
class="block px-4 py-2 text-sm font-bold"
(click)="closeMenusAndSetCriteria('commercialPropertyListings')"
>Properties</a
@ -154,7 +154,7 @@
<li>
<a
routerLink="/brokerListings"
[ngClass]="{ 'text-blue-700': isActive('/brokerListings'), 'text-gray-700': !isActive('/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
@ -167,40 +167,46 @@
</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-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"
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"
>
<li>
<a
routerLinkActive="active-link"
routerLink="/businessListings"
[ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/businessListings') }"
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"
[ngClass]="{ 'bg-primary-600 text-white md:text-primary-600 md:bg-transparent md:dark:text-primary-500': isActive('/businessListings') }"
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"
aria-current="page"
(click)="closeMenusAndSetCriteria('businessListings')"
>Businesses</a
>
<img src="assets/images/business_logo.png" alt="Business" class="w-5 h-5 mr-2 object-contain" />
<span>Businesses</span>
</a>
</li>
@if ((numberOfCommercial$ | async) > 0) {
<li>
<a
routerLinkActive="active-link"
routerLink="/commercialPropertyListings"
[ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/commercialPropertyListings') }"
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"
[ngClass]="{ 'bg-primary-600 text-white md:text-primary-600 md:bg-transparent md:dark:text-primary-500': isActive('/commercialPropertyListings') }"
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"
(click)="closeMenusAndSetCriteria('commercialPropertyListings')"
>Properties</a
>
<img src="assets/images/properties_logo.png" alt="Properties" class="w-5 h-5 mr-2 object-contain" />
<span>Properties</span>
</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"
[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')"
>Professionals</a
>
<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;" />
<span>Professionals</span>
</a>
</li>
}
</ul>
@ -212,8 +218,8 @@
(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(sortBy) !== 'Sort', 'text-gray-900': selectOptions.getSortByOption(sortBy) === 'Sort' }"
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"
[ngClass]="{ 'text-primary-500': selectOptions.getSortByOption(sortBy) !== 'Sort', 'text-neutral-900': selectOptions.getSortByOption(sortBy) === 'Sort' }"
>
<i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(sortBy) }}
</button>

14
bizmatch/src/app/components/login-register/login-register.component.html
View File

@ -1,5 +1,13 @@
<div class="flex flex-col items-center justify-center min-h-screen">
<div class="bg-white p-8 rounded-lg drop-shadow-custom-bg 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>
@ -25,7 +33,7 @@
type="email"
[(ngModel)]="email"
placeholder="Please enter E-Mail Address"
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"
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"
/>
<fa-icon [icon]="envelope" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></fa-icon>
</div>
@ -40,7 +48,7 @@
type="password"
[(ngModel)]="password"
placeholder="Please enter Password"
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"
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"
/>
<fa-icon [icon]="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></fa-icon>
</div>
@ -55,7 +63,7 @@
type="password"
[(ngModel)]="confirmPassword"
placeholder="Repeat Password"
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"
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"
/>
<fa-icon [icon]="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></fa-icon>
</div>

8
bizmatch/src/app/components/login-register/login-register.component.ts
View File

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faArrowRight, faEnvelope, faLock, faUserPlus } from '@fortawesome/free-solid-svg-icons';
import { AuthService } from '../../services/auth.service';
@ -9,7 +9,7 @@ import { LoadingService } from '../../services/loading.service';
@Component({
selector: 'app-login-register',
standalone: true,
imports: [CommonModule, FormsModule, FontAwesomeModule],
imports: [CommonModule, FormsModule, FontAwesomeModule, RouterModule],
templateUrl: './login-register.component.html',
})
export class LoginRegisterComponent {
@ -45,7 +45,7 @@ export class LoginRegisterComponent {
.loginWithEmail(this.email, this.password)
.then(userCredential => {
console.log('Successfully logged in:', userCredential);
this.router.navigate([`home`]);
this.router.navigate([`myListing`]);
})
.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([`home`]);
this.router.navigate([`myListing`]);
})
.catch(error => {
console.error('Error during Google login:', error);

5
bizmatch/src/app/components/not-found/not-found.component.html
View File

@ -14,6 +14,11 @@
</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>

27
bizmatch/src/app/components/not-found/not-found.component.ts
View File

@ -1,11 +1,32 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { Component, OnInit } 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],
imports: [CommonModule, RouterModule, BreadcrumbsComponent],
templateUrl: './not-found.component.html',
})
export class NotFoundComponent {}
export class NotFoundComponent implements OnInit {
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'
});
}
}

260
bizmatch/src/app/components/search-modal/search-modal-broker.component.html Normal file
View File

@ -0,0 +1,260 @@
<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>
<i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-primary-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-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">×</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">×</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">×</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">×</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">×</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">×</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 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>
<i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-primary-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-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">×</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">×</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">×</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">×</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">×</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">×</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 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>

316
bizmatch/src/app/components/search-modal/search-modal-broker.component.ts Normal file
View File

@ -0,0 +1,316 @@
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();
}
}

74
bizmatch/src/app/components/search-modal/search-modal-commercial.component.html
View File

@ -1,12 +1,12 @@
<div
*ngIf="isModal && (modalService.modalVisible$ | async)?.visible && (modalService.modalVisible$ | async)?.type === 'commercialPropertyListings'"
class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50"
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-blue-600">
<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-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center">
<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>
@ -15,28 +15,28 @@
</div>
<div class="p-6 space-y-6">
<div class="flex space-x-4 mb-4">
<button class="text-blue-600 font-medium border-b-2 border-blue-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
<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">
<button class="text-primary-600 font-medium border-b-2 border-primary-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
<i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-primary-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-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-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.city" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.types.length" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.title" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
</div>
@ -44,14 +44,14 @@
<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-gray-900">Location - State</label>
<label for="state" class="block mb-2 text-sm font-medium text-neutral-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>
<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>
<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-gray-900">Search Type</label>
<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" />
@ -64,13 +64,13 @@
</div>
</div>
<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>
<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-gray-200 hover:bg-gray-500 hover:text-white"
[ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
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 }}
@ -79,7 +79,7 @@
</div>
</div>
<div>
<label for="price" class="block mb-2 text-sm font-medium text-gray-900">Price</label>
<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>
@ -89,7 +89,7 @@
</div>
</div>
<div>
<label for="title" class="block mb-2 text-sm font-medium text-gray-900">Title / Description (Free Search)</label>
<label for="title" class="block mb-2 text-sm font-medium text-neutral-900">Title / Description (Free Search)</label>
<input
type="text"
id="title"
@ -100,7 +100,7 @@
/>
</div>
<div>
<label class="block mb-2 text-sm font-medium text-gray-900">Category</label>
<label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
<ng-select
class="custom"
[items]="selectOptions.typesOfCommercialProperty"
@ -122,42 +122,42 @@
</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-gray-900">Filter ({{ numberOfResults$ | async }})</h3>
<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">
<h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
<i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-primary-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-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-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.city" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.types.length" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.title" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</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-gray-900">Location - State</label>
<label for="state" class="block mb-2 text-sm font-medium text-neutral-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>
<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>
<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-gray-900">Search Type</label>
<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" />
@ -170,13 +170,13 @@
</div>
</div>
<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>
<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-gray-200 hover:bg-gray-500 hover:text-white"
[ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
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 }}
@ -185,7 +185,7 @@
</div>
</div>
<div>
<label class="block mb-2 text-sm font-medium text-gray-900">Category</label>
<label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
<ng-select
class="custom"
[items]="selectOptions.typesOfCommercialProperty"
@ -199,7 +199,7 @@
></ng-select>
</div>
<div>
<label for="price" class="block mb-2 text-sm font-medium text-gray-900">Price</label>
<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>
@ -207,7 +207,7 @@
</div>
</div>
<div>
<label for="title" class="block mb-2 text-sm font-medium text-gray-900">Title / Description (Free Search)</label>
<label for="title" class="block mb-2 text-sm font-medium text-neutral-900">Title / Description (Free Search)</label>
<input
type="text"
id="title"

3
bizmatch/src/app/components/search-modal/search-modal-commercial.component.ts
View File

@ -184,6 +184,9 @@ export class SearchModalCommercialComponent implements OnInit, OnDestroy {
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;

166
bizmatch/src/app/components/search-modal/search-modal.component.html
View File

@ -1,12 +1,12 @@
<div
*ngIf="isModal && (modalService.modalVisible$ | async)?.visible && (modalService.modalVisible$ | async)?.type === 'businessListings'"
class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50"
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-blue-600">
<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">Business Listing Search</h3>
<button (click)="closeAndSearch()" type="button" class="text-white 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">
<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">
<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,60 +15,60 @@
</div>
<div class="p-6 space-y-6">
<div class="flex space-x-4 mb-4">
<button class="text-blue-600 font-medium border-b-2 border-blue-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
<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">
<button class="text-primary-600 font-medium border-b-2 border-primary-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
<i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-primary-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-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-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.city" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.minRevenue || criteria.maxRevenue" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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')" class="ml-1 text-red-500 hover:text-red-700">×</button>
</span>
<span *ngIf="criteria.minCashFlow || criteria.maxCashFlow" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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')" class="ml-1 text-red-500 hover:text-red-700">×</button>
</span>
<span *ngIf="criteria.title" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.types.length" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="selectedPropertyType" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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')" class="ml-1 text-red-500 hover:text-red-700">×</button>
</span>
<span *ngIf="criteria.minNumberEmployees || criteria.maxNumberEmployees" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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')" class="ml-1 text-red-500 hover:text-red-700">×</button>
</span>
<span *ngIf="criteria.establishedMin" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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')" class="ml-1 text-red-500 hover:text-red-700">×</button>
</span>
<span *ngIf="criteria.brokerName" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
</div>
<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-gray-900">Location - State</label>
<label for="state" class="block mb-2 text-sm font-medium text-neutral-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>
<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>
<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-gray-900">Search Type</label>
<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" />
@ -81,13 +81,13 @@
</div>
</div>
<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>
<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-gray-200 hover:bg-gray-500 hover:text-white"
[ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
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 }}
@ -96,48 +96,48 @@
</div>
</div>
<div>
<label for="price" class="block mb-2 text-sm font-medium text-gray-900">Price</label>
<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 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>
<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 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>
</div>
</div>
<div>
<label for="salesRevenue" class="block mb-2 text-sm font-medium text-gray-900">Sales Revenue</label>
<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-gray-50 text-sm !mt-0 p-2.5">
<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-gray-50 text-sm !mt-0 p.2.5">
<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-gray-900">Cashflow</label>
<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-gray-50 text-sm !mt-0 p-2.5">
<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-gray-50 text-sm !mt-0 p-2.5">
<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-gray-900">Title / Description (Free Search)</label>
<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"
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-gray-900">Category</label>
<label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
<ng-select
class="custom"
[items]="selectOptions.typesOfBusiness"
@ -151,7 +151,7 @@
></ng-select>
</div>
<div>
<label class="block mb-2 text-sm font-medium text-gray-900">Type of Property</label>
<label class="block mb-2 text-sm font-medium text-neutral-900">Type of Property</label>
<ng-select
class="custom"
[items]="propertyTypeOptions"
@ -163,14 +163,14 @@
></ng-select>
</div>
<div>
<label for="numberEmployees" class="block mb-2 text-sm font-medium text-gray-900">Number of Employees</label>
<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-gray-50 border border-gray-300 text-sm rounded-lg block w-1/2 p-2.5"
class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
placeholder="From"
/>
<span>-</span>
@ -179,32 +179,32 @@
id="numberEmployees-to"
[ngModel]="criteria.maxNumberEmployees"
(ngModelChange)="updateCriteria({ maxNumberEmployees: $event })"
class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-1/2 p-2.5"
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-gray-900">Minimum years established</label>
<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-gray-50 border border-gray-300 text-sm rounded-lg block w-1/2 p-2.5"
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-gray-900">Broker Name / Company Name</label>
<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"
class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
placeholder="e.g. Brokers Invest"
/>
</div>
@ -219,60 +219,60 @@
<!-- ################################################################################## -->
<div *ngIf="!isModal" class="space-y-6">
<div class="flex space-x-4 mb-4">
<h3 class="text-xl font-semibold text-gray-900">Filter ({{ numberOfResults$ | async }})</h3>
<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">
<h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
<i data-tooltip-target="tooltip-light" class="fa-solid fa-trash-can flex self-center ml-2 hover:cursor-pointer text-primary-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-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-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.city" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.minRevenue || criteria.maxRevenue" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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')" class="ml-1 text-red-500 hover:text-red-700">×</button>
</span>
<span *ngIf="criteria.minCashFlow || criteria.maxCashFlow" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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')" class="ml-1 text-red-500 hover:text-red-700">×</button>
</span>
<span *ngIf="criteria.title" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="criteria.types.length" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</button>
</span>
<span *ngIf="selectedPropertyType" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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')" class="ml-1 text-red-500 hover:text-red-700">×</button>
</span>
<span *ngIf="criteria.minNumberEmployees || criteria.maxNumberEmployees" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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')" class="ml-1 text-red-500 hover:text-red-700">×</button>
</span>
<span *ngIf="criteria.establishedMin" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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')" class="ml-1 text-red-500 hover:text-red-700">×</button>
</span>
<span *ngIf="criteria.brokerName" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
<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">×</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-gray-900">Location - State</label>
<label for="state" class="block mb-2 text-sm font-medium text-neutral-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>
<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>
<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-gray-900">Search Type</label>
<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" />
@ -285,13 +285,13 @@
</div>
</div>
<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>
<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-gray-200 hover:bg-gray-500 hover:text-white"
[ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
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 }}
@ -300,46 +300,46 @@
</div>
</div>
<div>
<label for="price" class="block mb-2 text-sm font-medium text-gray-900">Price</label>
<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>
<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>
<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>
<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>
</div>
</div>
<div>
<label for="salesRevenue" class="block mb-2 text-sm font-medium text-gray-900">Sales Revenue</label>
<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-gray-50 text-sm !mt-0 p-2.5">
<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-gray-50 text-sm !mt-0 p.2.5">
<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-gray-900">Cashflow</label>
<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-gray-50 text-sm !mt-0 p-2.5">
<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-gray-50 text-sm !mt-0 p-2.5">
<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-gray-900">Title / Description (Free Search)</label>
<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"
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-gray-900">Category</label>
<label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
<ng-select
class="custom"
[items]="selectOptions.typesOfBusiness"
@ -353,7 +353,7 @@
></ng-select>
</div>
<div>
<label class="block mb-2 text-sm font-medium text-gray-900">Type of Property</label>
<label class="block mb-2 text-sm font-medium text-neutral-900">Type of Property</label>
<ng-select
class="custom"
[items]="propertyTypeOptions"
@ -365,14 +365,14 @@
></ng-select>
</div>
<div>
<label for="numberEmployees" class="block mb-2 text-sm font-medium text-gray-900">Number of Employees</label>
<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-gray-50 border border-gray-300 text-sm rounded-lg block w-1/2 p-2.5"
class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
placeholder="From"
/>
<span>-</span>
@ -381,32 +381,32 @@
id="numberEmployees-to"
[ngModel]="criteria.maxNumberEmployees"
(ngModelChange)="updateCriteria({ maxNumberEmployees: $event })"
class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-1/2 p-2.5"
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-gray-900">Minimum years established</label>
<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-gray-50 border border-gray-300 text-sm rounded-lg block w-1/2 p-2.5"
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-gray-900">Broker Name / Company Name</label>
<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"
class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
placeholder="e.g. Brokers Invest"
/>
</div>

3
bizmatch/src/app/components/search-modal/search-modal.component.ts
View File

@ -257,6 +257,9 @@ export class SearchModalComponent implements OnInit, OnDestroy {
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;

90
bizmatch/src/app/directives/lazy-load-image.directive.ts Normal file
View File

@ -0,0 +1,90 @@
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();
}
}
}

5
bizmatch/src/app/guards/listing-category.guard.ts
View File

@ -19,10 +19,11 @@ 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(['details-business-listing', id]);
this.router.navigate(['business', slug]);
} else if (category === 'commercialProperty') {
this.router.navigate(['details-commercial-property-listing', id]);
this.router.navigate(['commercial-property', slug]);
} else {
this.router.navigate(['not-found']);
}

53
bizmatch/src/app/pages/details/base-details.component.ts
View File

@ -31,18 +31,42 @@ export abstract class BaseDetailsComponent {
if (latitude && longitude) {
this.mapCenter = latLng(latitude, longitude);
this.mapLayers = [
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors',
}),
new Marker([latitude, longitude], {
// Build address string from available location data
const addressParts = [];
if (this.listing.location.housenumber) addressParts.push(this.listing.location.housenumber);
if (this.listing.location.street) addressParts.push(this.listing.location.street);
if (this.listing.location.name) addressParts.push(this.listing.location.name);
else if (this.listing.location.county) addressParts.push(this.listing.location.county);
if (this.listing.location.state) addressParts.push(this.listing.location.state);
if (this.listing.location.zipCode) addressParts.push(this.listing.location.zipCode);
const fullAddress = addressParts.join(', ');
const marker = new Marker([latitude, longitude], {
icon: icon({
...Icon.Default.prototype.options,
iconUrl: 'assets/leaflet/marker-icon.png',
iconRetinaUrl: 'assets/leaflet/marker-icon-2x.png',
shadowUrl: 'assets/leaflet/marker-shadow.png',
}),
});
// Add popup to marker with address
if (fullAddress) {
marker.bindPopup(`
<div style="padding: 8px;">
<strong>Location:</strong><br/>
${fullAddress}
</div>
`);
}
this.mapLayers = [
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors',
}),
marker
];
this.mapOptions = {
...this.mapOptions,
@ -52,17 +76,26 @@ export abstract class BaseDetailsComponent {
}
}
onMapReady(map: Map) {
if (this.listing.location.street) {
// Build comprehensive address for the control
const addressParts = [];
if (this.listing.location.housenumber) addressParts.push(this.listing.location.housenumber);
if (this.listing.location.street) addressParts.push(this.listing.location.street);
if (this.listing.location.name) addressParts.push(this.listing.location.name);
else if (this.listing.location.county) addressParts.push(this.listing.location.county);
if (this.listing.location.state) addressParts.push(this.listing.location.state);
if (this.listing.location.zipCode) addressParts.push(this.listing.location.zipCode);
if (addressParts.length > 0) {
const addressControl = new Control({ position: 'topright' });
addressControl.onAdd = () => {
const container = DomUtil.create('div', 'address-control bg-white p-2 rounded shadow');
const address = `${this.listing.location.housenumber ? this.listing.location.housenumber : ''} ${this.listing.location.street}, ${
this.listing.location.name ? this.listing.location.name : this.listing.location.county
}, ${this.listing.location.state}`;
const address = addressParts.join(', ');
container.innerHTML = `
<div style="max-width: 250px;">
${address}<br/>
<a href="#" id="view-full-map">View larger map</a>
<a href="#" id="view-full-map" style="color: #2563eb; text-decoration: underline;">View larger map</a>
</div>
`;
// Verhindere, dass die Karte durch das Klicken des Links bewegt wird

65
bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html
View File

@ -1,4 +1,9 @@
<div class="container mx-auto p-4">
<!-- Breadcrumbs for SEO and Navigation -->
@if(breadcrumbs.length > 0) {
<app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
}
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden relative">
<button
(click)="historyService.goBack()"
@ -14,16 +19,16 @@
<p class="mb-4" [innerHTML]="description"></p>
<div class="space-y-2">
<div *ngFor="let detail of listingDetails; let i = index" class="flex flex-col sm:flex-row" [ngClass]="{ 'bg-gray-100': i % 2 === 0 }">
<div *ngFor="let detail of listingDetails; let i = index" class="flex flex-col sm:flex-row" [ngClass]="{ 'bg-neutral-100': i % 2 === 0 }">
<div class="w-full sm:w-1/3 font-semibold p-2">{{ detail.label }}</div>
<div class="w-full sm:w-2/3 p-2" *ngIf="!detail.isHtml && !detail.isListingBy">{{ detail.value }}</div>
<div class="w-full sm:w-2/3 p-2 flex space-x-2" [innerHTML]="detail.value" *ngIf="detail.isHtml && !detail.isListingBy"></div>
<div class="w-full sm:w-2/3 p-2 flex space-x-2" *ngIf="detail.isListingBy">
<a routerLink="/details-user/{{ listingUser.id }}" class="text-blue-600 dark:text-blue-500 hover:underline">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" />
<div class="w-full sm:w-2/3 p-2 flex space-x-2" *ngIf="detail.isListingBy && listingUser">
<a routerLink="/details-user/{{ listingUser.id }}" class="text-primary-600 dark:text-primary-500 hover:underline">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
<img *ngIf="listing.imageName" src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" width="100" height="30" />
</div>
</div>
</div>
@ -61,8 +66,8 @@
<share-button button="linkedin" showText="true" (click)="createEvent('linkedin')"></share-button>
</div>
<!-- Karte hinzufügen, wenn Straße vorhanden ist -->
<div *ngIf="listing.location.street" class="mt-6">
<h2 class="text-lg font-semibold mb-2">Location Map</h2>
<div *ngIf="listing.location.latitude && listing.location.longitude" class="mt-6">
<h2 class="text-xl font-semibold mb-2">Location Map</h2>
<!-- <div style="height: 300px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers" [leafletCenter]="mapCenter" [leafletZoom]="mapZoom"></div> -->
<div style="height: 400px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers" [leafletCenter]="mapCenter" [leafletZoom]="mapZoom" (leafletMapReady)="onMapReady($event)"></div>
</div>
@ -70,8 +75,7 @@
<!-- Right column -->
<div class="w-full lg:w-1/2 mt-6 lg:mt-0 print:hidden">
<!-- <h2 class="text-lg font-semibold my-4">Contact the Author of this Listing</h2> -->
<div class="md:mt-8 mb-4 text-2xl font-bold mb-4">Contact the Author of this Listing</div>
<h2 class="md:mt-8 mb-4 text-xl font-bold">Contact the Author of this Listing</h2>
<p class="text-sm mb-4">Please include your contact info below</p>
<form class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@ -88,10 +92,53 @@
<div>
<app-validated-textarea label="Questions/Comments" name="comments" [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
</div>
<button (click)="mail()" class="w-full sm:w-auto px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Submit</button>
<button (click)="mail()" class="w-full sm:w-auto px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-opacity-50">Submit</button>
</form>
</div>
</div>
}
</div>
<!-- Related Listings Section for SEO Internal Linking -->
@if(relatedListings && relatedListings.length > 0) {
<div class="container mx-auto p-4 mt-8">
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
<h2 class="text-2xl font-bold mb-6 text-gray-900">Similar Businesses You May Like</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
@for (related of relatedListings; track related.id) {
<a [routerLink]="['/business', related.slug || related.id]" class="block group">
<div class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
<div class="p-4">
<div class="flex items-center mb-3">
<i [class]="selectOptions.getIconAndTextColorType(related.type)" class="mr-2 text-lg"></i>
<span [class]="selectOptions.getTextColorType(related.type)" class="font-semibold text-sm">{{ selectOptions.getBusiness(related.type) }}</span>
</div>
<h3 class="text-lg font-bold mb-2 text-gray-900 group-hover:text-primary-600 transition-colors line-clamp-2">{{ related.title }}</h3>
<div class="space-y-1 text-sm text-gray-600">
<div class="flex justify-between">
<span class="font-medium">Price:</span>
<span class="font-bold text-primary-600">${{ related.price?.toLocaleString() || 'Contact' }}</span>
</div>
@if(related.salesRevenue) {
<div class="flex justify-between">
<span class="font-medium">Revenue:</span>
<span>${{ related.salesRevenue?.toLocaleString() }}</span>
</div>
}
<div class="flex justify-between">
<span class="font-medium">Location:</span>
<span>{{ related.location.name || related.location.county }}, {{ selectOptions.getState(related.location.state) }}</span>
</div>
</div>
<div class="mt-4">
<span class="inline-block bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded">View Details →</span>
</div>
</div>
</div>
</a>
}
</div>
</div>
</div>
}
</div>

294
bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.ts
View File

@ -13,24 +13,27 @@ import { ValidatedInputComponent } from '../../../components/validated-input/val
import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component';
import { ValidatedTextareaComponent } from '../../../components/validated-textarea/validated-textarea.component';
import { ValidationMessagesService } from '../../../components/validation-messages.service';
import { BreadcrumbItem, BreadcrumbsComponent } from '../../../components/breadcrumbs/breadcrumbs.component';
import { AuditService } from '../../../services/audit.service';
import { GeoService } from '../../../services/geo.service';
import { HistoryService } from '../../../services/history.service';
import { ListingsService } from '../../../services/listings.service';
import { MailService } from '../../../services/mail.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { SeoService } from '../../../services/seo.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { createMailInfo, map2User } from '../../../utils/utils';
// Import für Leaflet
// Benannte Importe für Leaflet
import { circle, Circle, Control, DomEvent, DomUtil, latLng, LatLngBounds, polygon, Polygon, tileLayer } from 'leaflet';
import dayjs from 'dayjs';
import { AuthService } from '../../../services/auth.service';
import { BaseDetailsComponent } from '../base-details.component';
@Component({
selector: 'app-details-business-listing',
standalone: true,
imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ShareButton, ValidatedNgSelectComponent, LeafletModule],
imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ShareButton, ValidatedNgSelectComponent, LeafletModule, BreadcrumbsComponent],
providers: [],
templateUrl: './details-business-listing.component.html',
styleUrl: '../details.scss',
@ -54,7 +57,7 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
numScroll: 1,
},
];
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
private id: string | undefined = this.activatedRoute.snapshot.params['slug'] as string | undefined;
override listing: BusinessListing;
mailinfo: MailInfo;
environment = environment;
@ -65,6 +68,8 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
private history: string[] = [];
ts = new Date().getTime();
env = environment;
breadcrumbs: BreadcrumbItem[] = [];
relatedListings: BusinessListing[] = [];
constructor(
private activatedRoute: ActivatedRoute,
@ -82,6 +87,7 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
private geoService: GeoService,
public authService: AuthService,
private cdref: ChangeDetectorRef,
private seoService: SeoService,
) {
super();
this.router.events.subscribe(event => {
@ -89,11 +95,17 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
this.history.push(event.urlAfterRedirects);
}
});
this.mailinfo = { sender: {}, email: '', url: environment.mailinfoUrl };
this.mailinfo = { sender: { name: '', email: '', phoneNumber: '', state: '', comments: '' }, email: '', url: environment.mailinfoUrl };
// Initialisiere die Map-Optionen
}
async ngOnInit() {
// Initialize default breadcrumbs first
this.breadcrumbs = [
{ label: 'Home', url: '/home', icon: 'fas fa-home' },
{ label: 'Business Listings', url: '/businessListings' }
];
const token = await this.authService.getToken();
this.keycloakUser = map2User(token);
if (this.keycloakUser) {
@ -105,17 +117,85 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
this.auditService.createEvent(this.listing.id, 'view', this.user?.email);
this.listingUser = await this.userService.getByMail(this.listing.email);
this.description = this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
if (this.listing.location.street) {
if (this.listing.location.latitude && this.listing.location.longitude) {
this.configureMap();
}
// Update SEO meta tags for this business listing
const seoData = {
businessName: this.listing.title,
description: this.listing.description?.replace(/<[^>]*>/g, '').substring(0, 200) || '',
askingPrice: this.listing.price,
city: this.listing.location.name || this.listing.location.county || '',
state: this.listing.location.state,
industry: this.selectOptions.getBusiness(this.listing.type),
images: this.listing.imageName ? [this.listing.imageName] : [],
id: this.listing.id
};
this.seoService.updateBusinessListingMeta(seoData);
// Inject structured data (Schema.org JSON-LD) - Using Product schema for better SEO
const productSchema = this.seoService.generateProductSchema({
businessName: this.listing.title,
description: this.listing.description?.replace(/<[^>]*>/g, '') || '',
images: this.listing.imageName ? [this.listing.imageName] : [],
address: this.listing.location.street,
city: this.listing.location.name,
state: this.listing.location.state,
zip: this.listing.location.zipCode,
askingPrice: this.listing.price,
annualRevenue: this.listing.salesRevenue,
yearEstablished: this.listing.established,
category: this.selectOptions.getBusiness(this.listing.type),
id: this.listing.id,
slug: this.listing.slug
});
const breadcrumbSchema = this.seoService.generateBreadcrumbSchema([
{ name: 'Home', url: '/' },
{ name: 'Business Listings', url: '/businessListings' },
{ name: this.selectOptions.getBusiness(this.listing.type), url: `/business/${this.listing.slug || this.listing.id}` }
]);
this.seoService.injectMultipleSchemas([productSchema, breadcrumbSchema]);
// Generate breadcrumbs
this.breadcrumbs = [
{ label: 'Home', url: '/home', icon: 'fas fa-home' },
{ label: 'Business Listings', url: '/businessListings' },
{ label: this.selectOptions.getBusiness(this.listing.type), url: '/businessListings' },
{ label: this.listing.title }
];
// Load related listings for internal linking (SEO improvement)
this.loadRelatedListings();
} catch (error) {
this.auditService.log({ severity: 'error', text: error.error.message });
// Set default breadcrumbs even on error
this.breadcrumbs = [
{ label: 'Home', url: '/home', icon: 'fas fa-home' },
{ label: 'Business Listings', url: '/businessListings' }
];
const errorMessage = error?.error?.message || error?.message || 'An error occurred while loading the listing';
this.auditService.log({ severity: 'error', text: errorMessage });
this.router.navigate(['notfound']);
}
}
/**
* Load related business listings based on same category, location, and price range
* Improves SEO through internal linking
*/
private async loadRelatedListings() {
try {
this.relatedListings = (await this.listingsService.getRelatedListings(this.listing, 'business', 3)) as BusinessListing[];
} catch (error) {
console.error('Error loading related listings:', error);
this.relatedListings = [];
}
}
ngOnDestroy() {
this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
this.seoService.clearStructuredData(); // Clean up SEO structured data
}
async mail() {
@ -197,9 +277,9 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
}
return result;
}
save() {
async save() {
await this.listingsService.addToFavorites(this.listing.id, 'business');
this.listing.favoritesForUser.push(this.user.email);
this.listingsService.save(this.listing, 'business');
this.auditService.createEvent(this.listing.id, 'favorite', this.user?.email);
}
isAlreadyFavorite() {
@ -207,8 +287,9 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
}
async showShareByEMail() {
const result = await this.emailService.showShareByEMail({
yourEmail: this.user ? this.user.email : null,
yourName: this.user ? `${this.user.firstname} ${this.user.lastname}` : null,
yourEmail: this.user ? this.user.email : '',
yourName: this.user ? `${this.user.firstname} ${this.user.lastname}` : '',
recipientEmail: '',
url: environment.mailinfoUrl,
listingTitle: this.listing.title,
id: this.listing.id,
@ -233,4 +314,199 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
dateInserted() {
return dayjs(this.listing.created).format('DD/MM/YYYY');
}
/**
* Override configureMap to show city boundary polygon for privacy
* Business listings show city boundary instead of exact address
*/
protected override configureMap() {
// For business listings, show city boundary polygon instead of exact location
// This protects seller privacy (competition, employees, customers)
const latitude = this.listing.location.latitude;
const longitude = this.listing.location.longitude;
const cityName = this.listing.location.name;
const county = this.listing.location.county || '';
const state = this.listing.location.state;
if (latitude && longitude && cityName && state) {
this.mapCenter = latLng(latitude, longitude);
this.mapZoom = 11; // Zoom out to show city area
// Fetch city boundary from Nominatim API
this.geoService.getCityBoundary(cityName, state).subscribe({
next: (data) => {
if (data && data.length > 0 && data[0].geojson && data[0].geojson.type === 'Polygon') {
const coordinates = data[0].geojson.coordinates[0]; // Get outer boundary
// Convert GeoJSON coordinates [lon, lat] to Leaflet LatLng [lat, lon]
const latlngs = coordinates.map((coord: number[]) => latLng(coord[1], coord[0]));
// Create red outlined polygon for city boundary
const cityPolygon = polygon(latlngs, {
color: '#ef4444', // Red color (like Google Maps)
fillColor: '#ef4444',
fillOpacity: 0.1,
weight: 2
});
// Add popup to polygon
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>
`);
this.mapLayers = [
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors',
}),
cityPolygon
];
// Fit map to polygon bounds
const bounds = cityPolygon.getBounds();
this.mapOptions = {
...this.mapOptions,
center: bounds.getCenter(),
zoom: this.mapZoom,
};
} else if (data && data.length > 0 && data[0].geojson && data[0].geojson.type === 'MultiPolygon') {
// Handle MultiPolygon case (cities with multiple areas)
const allPolygons: Polygon[] = [];
data[0].geojson.coordinates.forEach((polygonCoords: number[][][]) => {
const latlngs = polygonCoords[0].map((coord: number[]) => latLng(coord[1], coord[0]));
const cityPolygon = polygon(latlngs, {
color: '#ef4444',
fillColor: '#ef4444',
fillOpacity: 0.1,
weight: 2
});
allPolygons.push(cityPolygon);
});
// Add popup to first polygon
if (allPolygons.length > 0) {
allPolygons[0].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>
`);
}
this.mapLayers = [
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors',
}),
...allPolygons
];
// Calculate combined bounds
if (allPolygons.length > 0) {
const bounds = new LatLngBounds([]);
allPolygons.forEach(p => bounds.extend(p.getBounds()));
this.mapOptions = {
...this.mapOptions,
center: bounds.getCenter(),
zoom: this.mapZoom,
};
}
} else {
// Fallback: Use circle if no polygon data available
this.useFallbackCircle(latitude, longitude, cityName, county, state);
}
},
error: (err) => {
console.error('Error fetching city boundary:', err);
// Fallback: Use circle on error
this.useFallbackCircle(latitude, longitude, cityName, county, state);
}
});
}
}
private useFallbackCircle(latitude: number, longitude: number, cityName: string, county: string, state: string) {
this.mapCenter = latLng(latitude, longitude);
this.mapZoom = 11;
const locationCircle = circle([latitude, longitude], {
color: '#ef4444', // Red to match polygon style
fillColor: '#ef4444',
fillOpacity: 0.1,
radius: 8000, // 8km radius circle as fallback
weight: 2
});
locationCircle.bindPopup(`
<div style="padding: 8px;">
<strong>General Area:</strong><br/>
${cityName}, ${county ? county + ', ' : ''}${state}<br/>
<small style="color: #666;">Approximate area shown for privacy.<br/>Exact location provided after contact.</small>
</div>
`);
this.mapLayers = [
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors',
}),
locationCircle
];
this.mapOptions = {
...this.mapOptions,
center: this.mapCenter,
zoom: this.mapZoom,
};
}
/**
* Override onMapReady to show privacy-friendly address control
*/
override onMapReady(map: any) {
// Show only city, county, state - no street address
const cityName = this.listing.location.name || '';
const county = this.listing.location.county || '';
const state = this.listing.location.state || '';
if (cityName && state) {
const addressControl = new Control({ position: 'topright' });
addressControl.onAdd = () => {
const container = DomUtil.create('div', 'address-control bg-white p-2 rounded shadow');
const locationText = county ? `${cityName}, ${county}, ${state}` : `${cityName}, ${state}`;
container.innerHTML = `
<div style="max-width: 250px;">
<strong>General Area:</strong><br/>
${locationText}<br/>
<small style="color: #666; font-size: 11px;">Approximate location shown for privacy</small>
</div>
`;
// Prevent map dragging when clicking the control
DomEvent.disableClickPropagation(container);
return container;
};
addressControl.addTo(map);
}
}
/**
* Override openFullMap to open city-area map instead of exact location
*/
override openFullMap() {
const latitude = this.listing.location.latitude;
const longitude = this.listing.location.longitude;
if (latitude && longitude) {
// Open map with zoom level 11 to show large city area, not exact location
const url = `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=11/${latitude}/${longitude}`;
window.open(url, '_blank');
}
}
}

54
bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
View File

@ -1,4 +1,7 @@
<div class="container mx-auto p-4">
<!-- Breadcrumbs for SEO and Navigation -->
<app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
<div class="bg-white drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg rounded-lg overflow-hidden">
@if(listing){
<div class="p-6 relative">
@ -14,7 +17,7 @@
<p class="mb-4" [innerHTML]="description"></p>
<div class="space-y-2">
<div *ngFor="let detail of propertyDetails; let i = index" class="flex flex-col sm:flex-row" [ngClass]="{ 'bg-gray-100': i % 2 === 0 }">
<div *ngFor="let detail of propertyDetails; let i = index" class="flex flex-col sm:flex-row" [ngClass]="{ 'bg-neutral-100': i % 2 === 0 }">
<div class="w-full sm:w-1/3 font-semibold p-2">{{ detail.label }}</div>
<!-- Standard Text -->
@ -24,9 +27,9 @@
<div class="w-full sm:w-2/3 p-2 flex space-x-2" [innerHTML]="detail.value" *ngIf="detail.isHtml && !detail.isListingBy"></div>
<!-- Speziell für Listing By mit RouterLink -->
<div class="w-full sm:w-2/3 p-2 flex space-x-2" *ngIf="detail.isListingBy">
<a [routerLink]="['/details-user', detail.user.id]" class="text-blue-600 dark:text-blue-500 hover:underline"> {{ detail.user.firstname }} {{ detail.user.lastname }} </a>
<img *ngIf="detail.user.hasCompanyLogo" [src]="detail.imageBaseUrl + '/pictures/logo/' + detail.imagePath + '.avif?_ts=' + detail.ts" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" />
<div class="w-full sm:w-2/3 p-2 flex space-x-2" *ngIf="detail.isListingBy && detail.user">
<a [routerLink]="['/details-user', detail.user.id]" class="text-primary-600 dark:text-primary-500 hover:underline"> {{ detail.user.firstname }} {{ detail.user.lastname }} </a>
<img *ngIf="detail.user.hasCompanyLogo" [src]="detail.imageBaseUrl + '/pictures/logo/' + detail.imagePath + '.avif?_ts=' + detail.ts" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" width="100" height="30" />
</div>
</div>
</div>
@ -64,7 +67,7 @@
<share-button button="linkedin" showText="true" (click)="createEvent('linkedin')"></share-button>
</div>
<!-- Karte hinzufügen, wenn Straße vorhanden ist -->
<div *ngIf="listing.location.street" class="mt-6">
<div *ngIf="listing.location.latitude && listing.location.longitude" class="mt-6">
<h2 class="text-lg font-semibold mb-2">Location Map</h2>
<!-- <div style="height: 300px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers" [leafletCenter]="mapCenter" [leafletZoom]="mapZoom"></div> -->
<div style="height: 400px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers" [leafletCenter]="mapCenter" [leafletZoom]="mapZoom" (leafletMapReady)="onMapReady($event)"></div>
@ -83,7 +86,7 @@
}@else {
<div class="text-2xl font-bold mb-4">Contact the Author of this Listing</div>
}
<p class="text-sm text-gray-600 mb-4">Please include your contact info below</p>
<p class="text-sm text-neutral-600 mb-4">Please include your contact info below</p>
<form class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-input label="Your Name" name="name" [(ngModel)]="mailinfo.sender.name"></app-validated-input>
@ -99,7 +102,7 @@
</div>
<div class="flex items-center justify-between">
<button (click)="mail()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Submit</button>
<button (click)="mail()" class="bg-primary-500 text-white px-4 py-2 rounded hover:bg-primary-600">Submit</button>
</div>
</form>
</div>
@ -108,4 +111,41 @@
</div>
}
</div>
<!-- Related Listings Section for SEO Internal Linking -->
@if(relatedListings && relatedListings.length > 0) {
<div class="container mx-auto p-4 mt-8">
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
<h2 class="text-2xl font-bold mb-6 text-gray-900">Similar Properties You May Like</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
@for (related of relatedListings; track related.id) {
<a [routerLink]="['/commercial-property', related.slug || related.id]" class="block group">
<div class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
<div class="p-4">
<div class="flex items-center mb-3">
<i [class]="selectOptions.getIconAndTextColorType(related.type)" class="mr-2 text-lg"></i>
<span [class]="selectOptions.getTextColorType(related.type)" class="font-semibold text-sm">{{ selectOptions.getCommercialProperty(related.type) }}</span>
</div>
<h3 class="text-lg font-bold mb-2 text-gray-900 group-hover:text-primary-600 transition-colors line-clamp-2">{{ related.title }}</h3>
<div class="space-y-1 text-sm text-gray-600">
<div class="flex justify-between">
<span class="font-medium">Price:</span>
<span class="font-bold text-primary-600">${{ related.price?.toLocaleString() || 'Contact' }}</span>
</div>
<div class="flex justify-between">
<span class="font-medium">Location:</span>
<span>{{ related.location.name || related.location.county }}, {{ selectOptions.getState(related.location.state) }}</span>
</div>
</div>
<div class="mt-4">
<span class="inline-block bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded">View Details →</span>
</div>
</div>
</div>
</a>
}
</div>
</div>
</div>
}
</div>

94
bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.ts
View File

@ -23,15 +23,17 @@ import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
import { MailService } from '../../../services/mail.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { SeoService } from '../../../services/seo.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { createMailInfo, map2User } from '../../../utils/utils';
import { BaseDetailsComponent } from '../base-details.component';
import { BreadcrumbItem, BreadcrumbsComponent } from '../../../components/breadcrumbs/breadcrumbs.component';
@Component({
selector: 'app-details-commercial-property-listing',
standalone: true,
imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ShareButton, ValidatedNgSelectComponent, GalleryModule, LeafletModule],
imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ShareButton, ValidatedNgSelectComponent, GalleryModule, LeafletModule, BreadcrumbsComponent],
providers: [],
templateUrl: './details-commercial-property-listing.component.html',
styleUrl: '../details.scss',
@ -54,7 +56,7 @@ export class DetailsCommercialPropertyListingComponent extends BaseDetailsCompon
numScroll: 1,
},
];
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
private id: string | undefined = this.activatedRoute.snapshot.params['slug'] as string | undefined;
override listing: CommercialPropertyListing;
criteria: CommercialPropertyListingCriteria;
mailinfo: MailInfo;
@ -69,6 +71,8 @@ export class DetailsCommercialPropertyListingComponent extends BaseDetailsCompon
faTimes = faTimes;
propertyDetails = [];
images: Array<ImageItem> = [];
relatedListings: CommercialPropertyListing[] = [];
breadcrumbs: BreadcrumbItem[] = [];
constructor(
private activatedRoute: ActivatedRoute,
private listingsService: ListingsService,
@ -85,12 +89,19 @@ export class DetailsCommercialPropertyListingComponent extends BaseDetailsCompon
private auditService: AuditService,
private emailService: EMailService,
public authService: AuthService,
private seoService: SeoService,
) {
super();
this.mailinfo = { sender: {}, email: '', url: environment.mailinfoUrl };
this.mailinfo = { sender: { name: '', email: '', phoneNumber: '', state: '', comments: '' }, email: '', url: environment.mailinfoUrl };
}
async ngOnInit() {
// Initialize default breadcrumbs first
this.breadcrumbs = [
{ label: 'Home', url: '/home', icon: 'fas fa-home' },
{ label: 'Commercial Properties', url: '/commercialPropertyListings' }
];
const token = await this.authService.getToken();
this.keycloakUser = map2User(token);
if (this.keycloakUser) {
@ -125,22 +136,86 @@ export class DetailsCommercialPropertyListingComponent extends BaseDetailsCompon
if (this.listing.draft) {
this.propertyDetails.push({ label: 'Draft', value: this.listing.draft ? 'Yes' : 'No' });
}
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 }));
});
if (this.listing.location.street) {
}
if (this.listing.location.latitude && this.listing.location.longitude) {
this.configureMap();
}
// Update SEO meta tags for commercial property
const propertyData = {
id: this.listing.id,
propertyType: this.selectOptions.getCommercialProperty(this.listing.type),
propertyDescription: this.listing.description?.replace(/<[^>]*>/g, '').substring(0, 200) || '',
askingPrice: this.listing.price,
city: this.listing.location.name || this.listing.location.county || '',
state: this.listing.location.state,
address: this.listing.location.street || '',
zip: this.listing.location.zipCode || '',
latitude: this.listing.location.latitude,
longitude: this.listing.location.longitude,
squareFootage: (this.listing as any).squareFeet,
yearBuilt: (this.listing as any).yearBuilt,
images: this.listing.imageOrder?.length > 0
? this.listing.imageOrder.map(img =>
`${this.env.imageBaseUrl}/pictures/property/${this.listing.imagePath}/${this.listing.serialId}/${img}`)
: []
};
this.seoService.updateCommercialPropertyMeta(propertyData);
// Add RealEstateListing structured data
const realEstateSchema = this.seoService.generateRealEstateListingSchema(propertyData);
const breadcrumbSchema = this.seoService.generateBreadcrumbSchema([
{ name: 'Home', url: '/' },
{ name: 'Commercial Properties', url: '/commercialPropertyListings' },
{ name: propertyData.propertyType, url: `/details-commercial-property/${this.listing.id}` }
]);
this.seoService.injectMultipleSchemas([realEstateSchema, breadcrumbSchema]);
// Generate breadcrumbs for navigation
this.breadcrumbs = [
{ label: 'Home', url: '/home', icon: 'fas fa-home' },
{ label: 'Commercial Properties', url: '/commercialPropertyListings' },
{ label: propertyData.propertyType, url: '/commercialPropertyListings' },
{ label: this.listing.title }
];
// Load related listings for internal linking (SEO improvement)
this.loadRelatedListings();
} catch (error) {
this.auditService.log({ severity: 'error', text: error.error.message });
// Set default breadcrumbs even on error
this.breadcrumbs = [
{ label: 'Home', url: '/home', icon: 'fas fa-home' },
{ label: 'Commercial Properties', url: '/commercialPropertyListings' }
];
const errorMessage = error?.error?.message || error?.message || 'An error occurred while loading the listing';
this.auditService.log({ severity: 'error', text: errorMessage });
this.router.navigate(['notfound']);
}
//this.initFlowbite();
}
/**
* Load related commercial property listings based on same category, location, and price range
* Improves SEO through internal linking
*/
private async loadRelatedListings() {
try {
this.relatedListings = (await this.listingsService.getRelatedListings(this.listing, 'commercialProperty', 3)) as CommercialPropertyListing[];
} catch (error) {
console.error('Error loading related listings:', error);
this.relatedListings = [];
}
}
ngOnDestroy() {
this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
this.seoService.clearStructuredData(); // Clean up SEO structured data
}
private initFlowbite() {
this.ngZone.runOutsideAngular(() => {
@ -177,9 +252,9 @@ export class DetailsCommercialPropertyListingComponent extends BaseDetailsCompon
getImageIndices(): number[] {
return this.listing && this.listing.imageOrder ? this.listing.imageOrder.slice(1).map((e, i) => i + 1) : [];
}
save() {
async save() {
await this.listingsService.addToFavorites(this.listing.id, 'commercialProperty');
this.listing.favoritesForUser.push(this.user.email);
this.listingsService.save(this.listing, 'commercialProperty');
this.auditService.createEvent(this.listing.id, 'favorite', this.user?.email);
}
isAlreadyFavorite() {
@ -187,8 +262,9 @@ export class DetailsCommercialPropertyListingComponent extends BaseDetailsCompon
}
async showShareByEMail() {
const result = await this.emailService.showShareByEMail({
yourEmail: this.user ? this.user.email : null,
yourName: this.user ? `${this.user.firstname} ${this.user.lastname}` : null,
yourEmail: this.user ? this.user.email : '',
yourName: this.user ? `${this.user.firstname} ${this.user.lastname}` : '',
recipientEmail: '',
url: environment.mailinfoUrl,
listingTitle: this.listing.title,
id: this.listing.id,

39
bizmatch/src/app/pages/details/details-user/details-user.component.html
View File

@ -1,4 +1,9 @@
<div class="container mx-auto p-4">
<!-- Breadcrumbs -->
<div class="mb-4">
<app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
</div>
@if(user){
<div class="bg-white drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg rounded-lg overflow-hidden">
<!-- Header -->
@ -6,16 +11,16 @@
<div class="flex items-center space-x-4">
<!-- <img src="https://placehold.co/80x80" alt="Profile picture of Avery Brown smiling" class="w-20 h-20 rounded-full" /> -->
@if(user.hasProfile){
<img src="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-20 h-20 rounded-full object-cover" />
<img src="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-20 h-20 rounded-full object-cover" width="80" height="80" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="w-20 h-20 rounded-full" />
<img src="assets/images/person_placeholder.jpg" class="w-20 h-20 rounded-full" width="80" height="80" />
}
<div>
<h1 class="text-2xl font-bold flex items-center">
{{ user.firstname }} {{ user.lastname }}
<span class="text-yellow-400 ml-2">&#9733;</span>
</h1>
<p class="text-gray-600">
<p class="text-neutral-600">
Company
<span class="mx-1">-</span>
{{ user.companyName }}
@ -27,7 +32,7 @@
</p>
</div>
@if(user.hasCompanyLogo){
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-11 h-14" />
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-11 h-14" width="44" height="56" />
}
<!-- <img src="https://placehold.co/45x60" class="w-11 h-14" /> -->
</div>
@ -40,16 +45,16 @@
</div>
<!-- Description -->
<p class="p-4 text-gray-700">{{ user.description }}</p>
<p class="p-4 text-neutral-700">{{ user.description }}</p>
<!-- Company Profile -->
<div class="p-4">
<h2 class="text-xl font-semibold mb-4">Company Profile</h2>
<p class="text-gray-700 mb-4" [innerHTML]="companyOverview"></p>
<p class="text-neutral-700 mb-4" [innerHTML]="companyOverview"></p>
<!-- Profile Details -->
<div class="space-y-2">
<div class="flex flex-col sm:flex-row sm:items-center bg-gray-100">
<div class="flex flex-col sm:flex-row sm:items-center bg-neutral-100">
<span class="font-semibold w-40 p-2">Name</span>
<span class="p-2 flex-grow">{{ user.firstname }} {{ user.lastname }}</span>
</div>
@ -58,7 +63,7 @@
<span class="p-2 flex-grow">{{ user.email }}</span>
</div>
@if(user.customerType==='professional'){
<div class="flex flex-col sm:flex-row sm:items-center bg-gray-100">
<div class="flex flex-col sm:flex-row sm:items-center bg-neutral-100">
<span class="font-semibold w-40 p-2">Phone Number</span>
<span class="p-2 flex-grow">{{ formatPhoneNumber(user.phoneNumber) }}</span>
</div>
@ -67,7 +72,7 @@
<span class="font-semibold w-40 p-2">Company Location</span>
<span class="p-2 flex-grow">{{ user.location?.name }} - {{ user.location?.state }}</span>
</div>
<div class="flex flex-col sm:flex-row sm:items-center bg-gray-100">
<div class="flex flex-col sm:flex-row sm:items-center bg-neutral-100">
<span class="font-semibold w-40 p-2">Professional Type</span>
<span class="p-2 flex-grow">{{ selectOptions.getCustomerSubType(user.customerSubType) }}</span>
</div>
@ -77,7 +82,7 @@
<!-- Services -->
<div class="mt-6">
<h3 class="font-semibold mb-2">Services we offer</h3>
<p class="text-gray-700 mb-4" [innerHTML]="offeredServices"></p>
<p class="text-neutral-700 mb-4" [innerHTML]="offeredServices"></p>
</div>
<!-- Areas Served -->
@ -85,7 +90,7 @@
<h3 class="font-semibold mb-2">Areas (Counties) we serve</h3>
<div class="flex flex-wrap gap-2">
@for (area of user.areasServed; track area) {
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">{{ area.county }}{{ area.county ? '-' : '' }}{{ area.state }}</span>
<span class="bg-primary-100 text-primary-800 px-2 py-1 rounded-full text-sm">{{ area.county }}{{ area.county ? '-' : '' }}{{ area.state }}</span>
}
</div>
</div>
@ -94,7 +99,7 @@
<div class="mt-6">
<h3 class="font-semibold mb-2">Licensed In</h3>
@for (license of user.licensedIn; track license) {
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">{{ license.registerNo }}-{{ license.state }}</span>
<span class="bg-success-100 text-success-800 px-2 py-1 rounded-full text-sm">{{ license.registerNo }}-{{ license.state }}</span>
}
</div>
}
@ -107,12 +112,12 @@
<h2 class="text-xl font-semibold mb-4">My Business Listings For Sale</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@for (listing of businessListings; track listing) {
<div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/details-business-listing', listing.id]">
<div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/business', listing.slug || listing.id]">
<div class="flex items-center mb-2">
<i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2"></i>
<span class="font-medium">{{ selectOptions.getBusiness(listing.type) }}</span>
</div>
<p class="text-gray-700">{{ listing.title }}</p>
<p class="text-neutral-700">{{ listing.title }}</p>
</div>
}
</div>
@ -122,7 +127,7 @@
<h2 class="text-xl font-semibold mb-4">My Commercial Property Listings For Sale</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@for (listing of commercialPropListings; track listing) {
<div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/details-commercial-property-listing', listing.id]">
<div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/commercial-property', listing.slug || listing.id]">
<div class="flex items-center space-x-4">
@if (listing.imageOrder?.length>0){
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}" class="w-12 h-12 object-cover rounded" />
@ -131,14 +136,14 @@
}
<div>
<p class="font-medium">{{ selectOptions.getCommercialProperty(listing.type) }}</p>
<p class="text-gray-700">{{ listing.title }}</p>
<p class="text-neutral-700">{{ listing.title }}</p>
</div>
</div>
</div>
}
</div>
} @if( user?.email===keycloakUser?.email || (authService.isAdmin() | async)){
<button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" [routerLink]="['/account', user.id]">Edit</button>
<button class="mt-4 bg-primary-500 text-white px-4 py-2 rounded hover:bg-primary-600" [routerLink]="['/account', user.id]">Edit</button>
}
</div>
</div>

8
bizmatch/src/app/pages/details/details-user/details-user.component.ts
View File

@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { KeycloakUser, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { BreadcrumbItem, BreadcrumbsComponent } from '../../../components/breadcrumbs/breadcrumbs.component';
import { AuthService } from '../../../services/auth.service';
import { HistoryService } from '../../../services/history.service';
import { ImageService } from '../../../services/image.service';
@ -17,13 +18,18 @@ import { formatPhoneNumber, map2User } from '../../../utils/utils';
@Component({
selector: 'app-details-user',
standalone: true,
imports: [SharedModule],
imports: [SharedModule, BreadcrumbsComponent],
templateUrl: './details-user.component.html',
styleUrl: '../details.scss',
})
export class DetailsUserComponent {
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
user: User;
breadcrumbs: BreadcrumbItem[] = [
{ label: 'Home', url: '/home', icon: 'fas fa-home' },
{ label: 'Professionals', url: '/brokerListings' },
{ label: 'Profile' }
];
user$: Observable<KeycloakUser>;
keycloakUser: KeycloakUser;
environment = environment;

157
bizmatch/src/app/pages/home/home.component.html
View File

@ -1,23 +1,23 @@
<header class="w-full flex justify-between items-center p-4 bg-white top-0 z-10 h-16 md:h-20">
<img src="assets/images/header-logo.png" alt="Logo" class="h-8 md:h-10" />
<img src="assets/images/header-logo.png" alt="Logo" class="h-8 md:h-10" width="150" height="40" />
<div class="hidden md:flex items-center space-x-4">
@if(user){
<a routerLink="/account" class="text-blue-600 border border-blue-600 px-3 py-2 rounded">Account</a>
<a routerLink="/account" class="text-primary-600 border border-primary-600 px-3 py-2 rounded">Account</a>
} @else {
<!-- <a routerLink="/pricing" class="text-gray-800">Pricing</a> -->
<a routerLink="/login" [queryParams]="{ mode: 'login' }" class="text-blue-600 border border-blue-600 px-3 py-2 rounded">Log In</a>
<a routerLink="/login" [queryParams]="{ mode: 'register' }" class="text-white bg-blue-600 px-4 py-2 rounded">Register</a>
<!-- <a routerLink="/login" class="text-blue-500 hover:underline">Login/Register</a> -->
<!-- <a routerLink="/pricing" class="text-neutral-800">Pricing</a> -->
<a routerLink="/login" [queryParams]="{ mode: 'login' }" class="text-primary-600 border border-primary-600 px-3 py-2 rounded">Log In</a>
<a routerLink="/login" [queryParams]="{ mode: 'register' }" class="text-white bg-primary-600 px-4 py-2 rounded">Register</a>
<!-- <a routerLink="/login" class="text-primary-500 hover:underline">Login/Register</a> -->
}
</div>
<button (click)="toggleMenu()" class="md:hidden text-gray-600">
<button (click)="toggleMenu()" class="md:hidden text-neutral-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</header>
<div *ngIf="isMenuOpen" class="fixed inset-0 bg-gray-800 bg-opacity-75 z-20">
<div *ngIf="isMenuOpen" class="fixed inset-0 bg-neutral-800 bg-opacity-75 z-20">
<div class="flex flex-col items-center justify-center h-full">
<!-- <a href="#" class="text-white text-xl py-2">Pricing</a> -->
@if(user){
@ -38,7 +38,7 @@
<!-- 1. px-4 für <main> (vorher px-2 sm:px-4) -->
<main class="flex flex-col items-center justify-center px-4 w-full flex-grow">
<div
class="bg-cover-custom pb-12 md:py-20 flex flex-col w-full rounded-xl lg:rounded-2xl md:drop-shadow-custom-md lg:drop-shadow-custom-lg min-h-[calc(100vh_-_20rem)] lg:min-h-[calc(100vh_-_10rem)] max-sm:bg-contain max-sm:bg-bottom max-sm:bg-no-repeat max-sm:min-h-[calc(100vh_-_7rem)] max-sm:bg-blue-600"
class="bg-cover-custom pb-12 md:py-20 flex flex-col w-full rounded-xl lg:rounded-2xl md:drop-shadow-custom-md lg:drop-shadow-custom-lg min-h-[calc(100vh_-_20rem)] lg:min-h-[calc(100vh_-_10rem)] max-sm:bg-contain max-sm:bg-bottom max-sm:bg-no-repeat max-sm:min-h-[60vh] max-sm:bg-primary-600"
>
<div class="flex justify-center w-full">
<!-- 3. Für Mobile: m-2 statt max-w-xs; ab sm: wieder max-width und kein Margin -->
@ -52,27 +52,29 @@
<!-- 2) Textblock -->
<div class="relative z-10 mx-auto max-w-4xl px-6 sm:px-6 py-4 sm:py-16 text-center text-white">
<h1 class="text-[1.55rem] sm:text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight leading-tight drop-shadow-[0_2px_6px_rgba(0,0,0,0.55)]">Find businesses for Sale</h1>
<h1 class="text-[1.55rem] sm:text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight leading-tight drop-shadow-[0_2px_6px_rgba(0,0,0,0.55)]">Buy & Sell Businesses and Commercial Properties</h1>
<p class="mt-3 sm:mt-4 text-base sm:text-lg md:text-xl lg:text-2xl font-medium text-white/90 drop-shadow-[0_1.5px_4px_rgba(0,0,0,0.6)]">Unlocking Opportunities - Empowering Entrepreneurial Dreams</p>
<p class="mt-3 sm:mt-4 text-base sm:text-lg md:text-xl lg:text-2xl font-medium text-white/90 drop-shadow-[0_1.5px_4px_rgba(0,0,0,0.6)]">Find profitable businesses for sale, commercial real estate, and franchise opportunities across the United States</p>
</div>
</section>
<!-- Restliche Anpassungen (Innenabstände, Button-Paddings etc.) bleiben wie im vorherigen Schritt -->
<div class="bg-white bg-opacity-80 pb-4 md:pb-6 pt-2 px-3 sm:px-4 md:px-6 rounded-lg shadow-lg w-full" [ngClass]="{ 'pt-6': aiSearch }">
<div class="search-form-container bg-white bg-opacity-80 pb-4 md:pb-6 pt-2 px-3 sm:px-4 md:px-6 rounded-lg shadow-lg w-full" [ngClass]="{ 'pt-6': aiSearch }">
@if(!aiSearch){
<div class="text-sm lg:text-base mb-1 text-center text-gray-500 border-gray-200 dark:text-gray-400 dark:border-gray-700 flex justify-between">
<div class="text-sm lg:text-base mb-1 text-center text-neutral-500 border-neutral-200 dark:text-neutral-400 dark:border-neutral-700 flex justify-between">
<ul class="flex flex-wrap -mb-px w-full">
<li class="w-[33%]">
<a
(click)="changeTab('business')"
[ngClass]="
activeTabAction === 'business'
? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
: ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
? ['text-primary-600', 'border-primary-600', 'active', 'dark:text-primary-500', 'dark:border-primary-500']
: ['border-transparent', 'hover:text-neutral-600', 'hover:border-neutral-300', 'dark:hover:text-neutral-300']
"
class="hover:cursor-pointer inline-block px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
>Businesses</a
class="tab-link hover:cursor-pointer inline-flex items-center justify-center px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
>
<img src="assets/images/business_logo.png" alt="Search businesses for sale" class="tab-icon w-6 h-6 md:w-7 md:h-7 mr-1 md:mr-2 object-contain" />
<span>Businesses</span>
</a>
</li>
@if ((numberOfCommercial$ | async) > 0) {
<li class="w-[33%]">
@ -80,35 +82,38 @@
(click)="changeTab('commercialProperty')"
[ngClass]="
activeTabAction === 'commercialProperty'
? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
: ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
? ['text-primary-600', 'border-primary-600', 'active', 'dark:text-primary-500', 'dark:border-primary-500']
: ['border-transparent', 'hover:text-neutral-600', 'hover:border-neutral-300', 'dark:hover:text-neutral-300']
"
class="hover:cursor-pointer inline-block px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
>Properties</a
class="tab-link hover:cursor-pointer inline-flex items-center justify-center px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
>
<img src="assets/images/properties_logo.png" alt="Search commercial properties for sale" class="tab-icon w-6 h-6 md:w-7 md:h-7 mr-1 md:mr-2 object-contain" />
<span>Properties</span>
</a>
</li>
} @if ((numberOfBroker$ | async) > 0) {
}
<li class="w-[33%]">
<a
(click)="changeTab('broker')"
[ngClass]="
activeTabAction === 'broker'
? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
: ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
? ['text-primary-600', 'border-primary-600', 'active', 'dark:text-primary-500', 'dark:border-primary-500']
: ['border-transparent', 'hover:text-neutral-600', 'hover:border-neutral-300', 'dark:hover:text-neutral-300']
"
class="hover:cursor-pointer inline-block px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
>Professionals</a
class="tab-link hover:cursor-pointer inline-flex items-center justify-center px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
>
<img src="assets/images/icon_professionals.png" alt="Search business professionals and brokers" class="tab-icon w-6 h-6 md:w-7 md:h-7 mr-1 md:mr-2 object-contain bg-transparent" style="mix-blend-mode: darken;" />
<span>Professionals</span>
</a>
</li>
}
</ul>
</div>
} @if(criteria && !aiSearch){
<div class="w-full max-w-3xl mx-auto bg-white rounded-lg flex flex-col md:flex-row md:border md:border-gray-300">
<div class="md:flex-none md:w-48 flex-1 md:border-r border-gray-300 overflow-hidden mb-2 md:mb-0">
<div class="relative max-sm:border border-gray-300 rounded-md">
<div class="w-full max-w-3xl mx-auto bg-white rounded-lg flex flex-col md:flex-row md:border md:border-neutral-300">
<div class="md:flex-none md:w-48 flex-1 md:border-r border-neutral-300 overflow-hidden mb-2 md:mb-0">
<div class="relative max-sm:border border-neutral-300 rounded-md">
<select
class="appearance-none bg-transparent w-full py-3 px-4 pr-8 focus:outline-none md:border-none rounded-md md:rounded-none"
class="appearance-none bg-transparent w-full py-4 px-4 pr-8 focus:outline-none md:border-none rounded-md md:rounded-none min-h-[52px]"
[ngModel]="criteria.types"
(ngModelChange)="onTypesChange($event)"
[ngClass]="{ 'placeholder-selected': criteria.types.length === 0 }"
@ -118,14 +123,14 @@
<option [value]="type.value">{{ type.name }}</option>
}
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-neutral-700">
<i class="fas fa-chevron-down text-xs"></i>
</div>
</div>
</div>
<div class="md:flex-auto md:w-36 flex-grow md:border-r border-gray-300 mb-2 md:mb-0">
<div class="relative max-sm:border border-gray-300 rounded-md">
<div class="md:flex-auto md:w-36 flex-grow md:border-r border-neutral-300 mb-2 md:mb-0">
<div class="relative max-sm:border border-neutral-300 rounded-md">
<ng-select
class="custom md:border-none rounded-md md:rounded-none"
[multiple]="false"
@ -147,10 +152,10 @@
</div>
</div>
@if (criteria.radius && !aiSearch){
<div class="md:flex-none md:w-36 flex-1 md:border-r border-gray-300 mb-2 md:mb-0">
<div class="relative max-sm:border border-gray-300 rounded-md">
<div class="md:flex-none md:w-36 flex-1 md:border-r border-neutral-300 mb-2 md:mb-0">
<div class="relative max-sm:border border-neutral-300 rounded-md">
<select
class="appearance-none bg-transparent w-full py-3 px-4 pr-8 focus:outline-none md:border-none rounded-md md:rounded-none"
class="appearance-none bg-transparent w-full py-4 px-4 pr-8 focus:outline-none md:border-none rounded-md md:rounded-none min-h-[52px]"
(ngModelChange)="onRadiusChange($event)"
[ngModel]="criteria.radius"
[ngClass]="{ 'placeholder-selected': !criteria.radius }"
@ -160,19 +165,23 @@
<option [value]="dist.value">{{ dist.name }}</option>
}
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-neutral-700">
<i class="fas fa-chevron-down text-xs"></i>
</div>
</div>
</div>
}
<div class="bg-blue-600 hover:bg-blue-500 transition-colors duration-200 max-sm:rounded-md">
<div class="bg-primary-500 hover:bg-primary-600 max-sm:rounded-md search-button">
@if( numberOfResults$){
<button class="w-full h-full text-white font-semibold py-2 px-4 md:py-3 md:px-6 focus:outline-none rounded-md md:rounded-none min-h-[48px]" (click)="search()">
Search ({{ numberOfResults$ | async }})
<button class="w-full h-full text-white font-bold py-2 px-4 md:py-3 md:px-6 focus:outline-none rounded-md md:rounded-none min-h-[52px] flex items-center justify-center gap-2" (click)="search()">
<i class="fas fa-search"></i>
<span>Search {{ numberOfResults$ | async }}</span>
</button>
}@else {
<button class="w-full h-full text-white font-semibold py-2 px-4 md:py-3 md:px-6 focus:outline-none rounded-md md:rounded-none min-h-[48px]" (click)="search()">Search</button>
<button class="w-full h-full text-white font-bold py-2 px-4 md:py-3 md:px-6 focus:outline-none rounded-md md:rounded-none min-h-[52px] flex items-center justify-center gap-2" (click)="search()">
<i class="fas fa-search"></i>
<span>Search</span>
</button>
}
</div>
</div>
@ -181,5 +190,69 @@
</div>
</div>
</div>
<!-- Trust & Social Proof Section -->
<div class="w-full px-4 mt-8">
<div class="trust-section-container bg-white rounded-xl py-10 px-6 md:px-10 border border-neutral-200">
<div class="max-w-6xl mx-auto">
<h2 class="text-2xl md:text-3xl font-semibold text-center text-neutral-800 mb-2">Trusted by Thousands</h2>
<p class="text-center text-neutral-500 mb-10 text-base">Join thousands of successful buyers and sellers on BizMatch</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
<!-- Trust Badge 1 -->
<div class="trust-badge text-center">
<div class="trust-icon inline-flex items-center justify-center w-12 h-12 bg-neutral-100 text-neutral-600 rounded-full mb-3">
<i class="fas fa-shield-alt text-lg"></i>
</div>
<h3 class="text-base font-semibold text-neutral-800 mb-1">Verified Listings</h3>
<p class="text-sm text-neutral-500">All business listings are verified and reviewed by our team</p>
</div>
<!-- Trust Badge 2 -->
<div class="trust-badge text-center">
<div class="trust-icon inline-flex items-center justify-center w-12 h-12 bg-neutral-100 text-neutral-600 rounded-full mb-3">
<i class="fas fa-users text-lg"></i>
</div>
<h3 class="text-base font-semibold text-neutral-800 mb-1">Expert Support</h3>
<p class="text-sm text-neutral-500">Connect with licensed business brokers and advisors</p>
</div>
<!-- Trust Badge 3 -->
<div class="trust-badge text-center">
<div class="trust-icon inline-flex items-center justify-center w-12 h-12 bg-neutral-100 text-neutral-600 rounded-full mb-3">
<i class="fas fa-lock text-lg"></i>
</div>
<h3 class="text-base font-semibold text-neutral-800 mb-1">Secure Platform</h3>
<p class="text-sm text-neutral-500">Your information is protected with enterprise-grade security</p>
</div>
</div>
<!-- Stats Row -->
<div class="stats-section grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mt-10 pt-6 border-t border-neutral-100">
<div class="text-center">
<div class="stat-number text-2xl md:text-3xl font-semibold text-neutral-700 mb-1">{{ activeListingsCount | number:'1.0-0' }}+</div>
<div class="text-xs md:text-sm text-neutral-500">Active Listings</div>
</div>
<div class="text-center">
<div class="stat-number text-2xl md:text-3xl font-semibold text-neutral-700 mb-1">{{ successfulSalesCount | number:'1.0-0' }}+</div>
<div class="text-xs md:text-sm text-neutral-500">Successful Sales</div>
</div>
<div class="text-center">
<div class="stat-number text-2xl md:text-3xl font-semibold text-neutral-700 mb-1">{{ brokersCount | number:'1.0-0' }}+</div>
<div class="text-xs md:text-sm text-neutral-500">Business Brokers</div>
</div>
<div class="text-center">
<div class="stat-number text-2xl md:text-3xl font-semibold text-neutral-700 mb-1">24/7</div>
<div class="text-xs md:text-sm text-neutral-500">Platform Access</div>
</div>
</div>
</div>
</div>
</div>
<!-- FAQ Section for SEO/AEO -->
<div class="w-full px-4 mt-12 max-w-4xl mx-auto">
<app-faq [faqItems]="faqItems"></app-faq>
</div>
</main>
<!-- ==== ANPASSUNGEN ENDE ==== -->

198
bizmatch/src/app/pages/home/home.component.scss
View File

@ -1,8 +1,41 @@
.bg-cover-custom {
position: relative;
// Prioritize AVIF format (69KB) over JPG (26MB)
background-image: url('/assets/images/flags_bg.avif');
background-size: cover;
background-position: center;
border-radius: 20px;
// Fallback for browsers that don't support AVIF
@supports not (background-image: url('/assets/images/flags_bg.avif')) {
background-image: url('/assets/images/flags_bg.jpg');
}
// Add gradient overlay for better text contrast
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.15) 40%,
rgba(0, 0, 0, 0.05) 70%,
rgba(0, 0, 0, 0) 100%
);
border-radius: 20px;
pointer-events: none;
z-index: 1;
}
// Ensure content stays above overlay
> * {
position: relative;
z-index: 2;
}
}
select:not([size]) {
background-image: unset;
@ -32,11 +65,11 @@ select {
background-color: rgb(125 211 252);
}
:host ::ng-deep .ng-select.ng-select-single .ng-select-container {
height: 48px;
min-height: 52px;
border: none;
background-color: transparent;
.ng-value-container .ng-input {
top: 10px;
top: 12px;
}
span.ng-arrow-wrapper {
display: none;
@ -70,3 +103,164 @@ input[type='text'][name='aiSearchText'] {
box-sizing: border-box; /* Padding und Border in die Höhe und Breite einrechnen */
height: 48px;
}
// Enhanced Search Button Styling
.search-button {
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&:hover {
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
filter: brightness(1.05);
}
&:active {
transform: scale(0.98);
}
// Ripple effect
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
&:active::after {
width: 300px;
height: 300px;
}
}
// Tab Icon Styling
.tab-icon {
font-size: 1rem;
margin-right: 0.5rem;
transition: transform 0.2s ease;
}
.tab-link {
transition: all 0.2s ease-in-out;
&:hover .tab-icon {
transform: scale(1.15);
}
}
// Input Field Hover Effects
select,
.ng-select {
transition: all 0.2s ease-in-out;
&:hover {
background-color: rgba(243, 244, 246, 0.8);
}
&:focus,
&:focus-within {
background-color: white;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
}
// Smooth tab transitions
.tab-content {
animation: fadeInUp 0.3s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
// Trust section container - more prominent
.trust-section-container {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease, transform 0.3s ease;
&:hover {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
}
// Trust badge animations - subtle lowkey style
.trust-badge {
transition: opacity 0.2s ease;
&:hover {
opacity: 0.8;
}
}
.trust-icon {
transition: background-color 0.2s ease, color 0.2s ease;
}
.trust-badge:hover .trust-icon {
background-color: rgb(229, 231, 235); // gray-200
color: rgb(75, 85, 99); // gray-600
}
// Stat counter animation - minimal
.stat-number {
transition: color 0.2s ease;
&:hover {
color: rgb(55, 65, 81); // gray-700 darker
}
}
// Search form container enhancement
.search-form-container {
transition: all 0.3s ease;
backdrop-filter: blur(10px);
&:hover {
background-color: rgba(255, 255, 255, 0.9);
}
}
// Header button improvements
header {
a {
transition: all 0.2s ease-in-out;
&.text-blue-600.border.border-blue-600 {
// Log In button
&:hover {
background-color: rgba(37, 99, 235, 0.05);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}
&:active {
transform: scale(0.98);
}
}
&.bg-blue-600 {
// Register button
&:hover {
background-color: rgb(29, 78, 216);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
filter: brightness(1.05);
}
&:active {
transform: scale(0.98);
}
}
}
}

151
bizmatch/src/app/pages/home/home.component.ts
View File

@ -7,6 +7,7 @@ import { UntilDestroy } from '@ngneat/until-destroy';
import { initFlowbite } from 'flowbite';
import { catchError, concat, distinctUntilChanged, Observable, of, Subject, switchMap, tap } from 'rxjs';
import { BusinessListingCriteria, CityAndStateResult, CommercialPropertyListingCriteria, GeoResult, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
import { FaqComponent, FAQItem } from '../../components/faq/faq.component';
import { ModalService } from '../../components/search-modal/modal.service';
import { TooltipComponent } from '../../components/tooltip/tooltip.component';
import { AiService } from '../../services/ai.service';
@ -16,6 +17,7 @@ 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 { SeoService } from '../../services/seo.service';
import { UserService } from '../../services/user.service';
import { map2User } from '../../utils/utils';
@ -23,7 +25,7 @@ import { map2User } from '../../utils/utils';
@Component({
selector: 'app-home',
standalone: true,
imports: [CommonModule, FormsModule, RouterModule, NgSelectModule, TooltipComponent],
imports: [CommonModule, FormsModule, RouterModule, NgSelectModule, TooltipComponent, FaqComponent],
templateUrl: './home.component.html',
styleUrl: './home.component.scss',
})
@ -58,6 +60,56 @@ export class HomeComponent {
showInput: boolean = true;
tooltipTargetBeta = 'tooltipTargetBeta';
// Counter animation
activeListingsCount = 0;
successfulSalesCount = 0;
brokersCount = 0;
hasAnimated = false;
// FAQ data optimized for AEO (Answer Engine Optimization) and Featured Snippets
faqItems: FAQItem[] = [
{
question: 'How do I buy a business on BizMatch?',
answer: '<p><strong>Buying a business on BizMatch involves 6 simple steps:</strong></p><ol><li><strong>Browse Listings:</strong> Search our marketplace using filters for industry, location, and price range</li><li><strong>Review Details:</strong> Examine financial information, business operations, and growth potential</li><li><strong>Contact Seller:</strong> Reach out directly through our secure messaging platform</li><li><strong>Due Diligence:</strong> Review financial statements, contracts, and legal documents</li><li><strong>Negotiate Terms:</strong> Work with the seller to agree on price and transition details</li><li><strong>Close Deal:</strong> Complete the purchase with legal and financial advisors</li></ol><p>We recommend working with experienced business brokers and conducting thorough due diligence before making any purchase.</p>'
},
{
question: 'How much does it cost to list a business for sale?',
answer: '<p><strong>BizMatch offers flexible pricing options:</strong></p><ul><li><strong>Free Basic Listing:</strong> Post your business with essential details at no cost</li><li><strong>Premium Listing:</strong> Enhanced visibility with featured placement and priority support</li><li><strong>Broker Packages:</strong> Professional tools for business brokers and agencies</li></ul><p>Contact our team for detailed pricing information tailored to your specific needs.</p>'
},
{
question: 'What types of businesses can I find on BizMatch?',
answer: '<p><strong>BizMatch features businesses across all major industries:</strong></p><ul><li><strong>Food & Hospitality:</strong> Restaurants, cafes, bars, hotels, catering services</li><li><strong>Retail:</strong> Stores, boutiques, online shops, franchises</li><li><strong>Service Businesses:</strong> Consulting firms, cleaning services, healthcare practices</li><li><strong>Manufacturing:</strong> Production facilities, distribution centers, warehouses</li><li><strong>E-commerce:</strong> Online businesses, digital products, subscription services</li><li><strong>Commercial Real Estate:</strong> Office buildings, retail spaces, industrial properties</li></ul><p>Our marketplace serves all business sizes from small local operations to large enterprises across the United States.</p>'
},
{
question: 'How do I know if a business listing is legitimate?',
answer: '<p><strong>Yes, BizMatch verifies all listings.</strong> Here\'s how we ensure legitimacy:</p><ol><li><strong>Seller Verification:</strong> All users must verify their identity and contact information</li><li><strong>Listing Review:</strong> Our team reviews each listing for completeness and accuracy</li><li><strong>Documentation Check:</strong> We verify business registration and ownership documents</li><li><strong>Transparent Communication:</strong> All conversations are logged through our secure platform</li></ol><p><strong>Additional steps you should take:</strong></p><ul><li>Review financial statements and tax returns</li><li>Visit the business location in person</li><li>Consult with legal and financial advisors</li><li>Work with licensed business brokers when appropriate</li><li>Conduct background checks on sellers</li></ul>'
},
{
question: 'Can I sell commercial property on BizMatch?',
answer: '<p><strong>Yes!</strong> BizMatch is a full-service marketplace for both businesses and commercial real estate.</p><p><strong>Property types you can list:</strong></p><ul><li>Office buildings and professional spaces</li><li>Retail locations and shopping centers</li><li>Warehouses and distribution facilities</li><li>Industrial properties and manufacturing plants</li><li>Mixed-use developments</li><li>Land for commercial development</li></ul><p>Our platform connects you with qualified buyers, investors, and commercial real estate professionals actively searching for investment opportunities.</p>'
},
{
question: 'What information should I include when listing my business?',
answer: '<p><strong>A complete listing should include these essential details:</strong></p><ol><li><strong>Financial Information:</strong> Asking price, annual revenue, cash flow, profit margins</li><li><strong>Business Operations:</strong> Years established, number of employees, hours of operation</li><li><strong>Description:</strong> Detailed overview of products/services, customer base, competitive advantages</li><li><strong>Industry Category:</strong> Specific business type and market segment</li><li><strong>Location Details:</strong> City, state, demographic information</li><li><strong>Assets Included:</strong> Equipment, inventory, real estate, intellectual property</li><li><strong>Visual Content:</strong> High-quality photos of business premises and operations</li><li><strong>Growth Potential:</strong> Expansion opportunities and market trends</li></ol><p><strong>Pro tip:</strong> The more detailed and transparent your listing, the more interest it will generate from serious, qualified buyers.</p>'
},
{
question: 'How long does it take to sell a business?',
answer: '<p><strong>Most businesses sell within 6 to 12 months.</strong> The timeline varies based on several factors:</p><p><strong>Factors that speed up sales:</strong></p><ul><li>Realistic pricing based on professional valuation</li><li>Complete and organized financial documentation</li><li>Strong business performance and growth trends</li><li>Attractive location and market conditions</li><li>Experienced business broker representation</li><li>Flexible seller terms and financing options</li></ul><p><strong>Timeline breakdown:</strong></p><ol><li><strong>Months 1-2:</strong> Preparation and listing creation</li><li><strong>Months 3-6:</strong> Marketing and buyer qualification</li><li><strong>Months 7-10:</strong> Negotiations and due diligence</li><li><strong>Months 11-12:</strong> Closing and transition</li></ol>'
},
{
question: 'What is business valuation and why is it important?',
answer: '<p><strong>Business valuation is the process of determining the economic worth of a company.</strong> It calculates the fair market value based on financial performance, assets, and market conditions.</p><p><strong>Why valuation matters:</strong></p><ul><li><strong>Realistic Pricing:</strong> Attracts serious buyers and prevents extended time on market</li><li><strong>Negotiation Power:</strong> Provides data-driven justification for asking price</li><li><strong>Buyer Confidence:</strong> Professional valuations increase trust and credibility</li><li><strong>Financing Approval:</strong> Banks require valuations for business acquisition loans</li></ul><p><strong>Valuation methods include:</strong></p><ol><li><strong>Asset-Based:</strong> Total value of business assets minus liabilities</li><li><strong>Income-Based:</strong> Projected future earnings and cash flow</li><li><strong>Market-Based:</strong> Comparison to similar business sales</li><li><strong>Multiple of Earnings:</strong> Revenue or profit multiplied by industry-standard factor</li></ol>'
},
{
question: 'Do I need a business broker to buy or sell a business?',
answer: '<p><strong>No, but brokers are highly recommended.</strong> You can conduct transactions directly through BizMatch, but professional brokers provide significant advantages:</p><p><strong>Benefits of using a business broker:</strong></p><ul><li><strong>Expert Valuation:</strong> Accurate pricing based on market data and analysis</li><li><strong>Marketing Expertise:</strong> Professional listing creation and buyer outreach</li><li><strong>Qualified Buyers:</strong> Pre-screening to ensure financial capability and serious interest</li><li><strong>Negotiation Skills:</strong> Experience handling complex deal structures and terms</li><li><strong>Confidentiality:</strong> Protect sensitive information during the sales process</li><li><strong>Legal Compliance:</strong> Navigate regulations, contracts, and disclosures</li><li><strong>Time Savings:</strong> Handle paperwork, communications, and coordination</li></ul><p>BizMatch connects you with licensed brokers in your area, or you can manage the transaction yourself using our secure platform and resources.</p>'
},
{
question: 'What financing options are available for buying a business?',
answer: '<p><strong>Business buyers have multiple financing options:</strong></p><ol><li><strong>SBA 7(a) Loans:</strong> Government-backed loans with favorable terms<ul><li>Down payment as low as 10%</li><li>Loan amounts up to $5 million</li><li>Competitive interest rates</li><li>Terms up to 10-25 years</li></ul></li><li><strong>Conventional Bank Financing:</strong> Traditional business acquisition loans<ul><li>Typically require 20-30% down payment</li><li>Based on creditworthiness and business performance</li></ul></li><li><strong>Seller Financing:</strong> Owner provides loan to buyer<ul><li>More flexible terms and requirements</li><li>Often combined with other financing</li><li>Typically 10-30% of purchase price</li></ul></li><li><strong>Investor Partnerships:</strong> Equity financing from partners<ul><li>Shared ownership and profits</li><li>No personal debt obligation</li></ul></li><li><strong>Personal Savings:</strong> Self-funded purchase<ul><li>No interest or loan payments</li><li>Full ownership from day one</li></ul></li></ol><p><strong>Most buyers use a combination of these options</strong> to structure the optimal deal for their situation.</p>'
}
];
constructor(
private router: Router,
private modalService: ModalService,
@ -71,6 +123,7 @@ export class HomeComponent {
private aiService: AiService,
private authService: AuthService,
private filterStateService: FilterStateService,
private seoService: SeoService,
) {}
async ngOnInit() {
@ -78,6 +131,61 @@ export class HomeComponent {
initFlowbite();
}, 0);
// Set SEO meta tags for home page
this.seoService.updateMetaTags({
title: 'BizMatch - Buy & Sell Businesses and Commercial Properties',
description: 'Find profitable businesses for sale, commercial real estate, and franchise opportunities across the United States. Browse thousands of listings from verified sellers and brokers.',
keywords: 'business for sale, businesses for sale, buy business, sell business, commercial property, commercial real estate, franchise opportunities, business broker, business marketplace',
type: 'website'
});
// Add Organization schema for brand identity and FAQ schema for AEO
const organizationSchema = this.seoService.generateOrganizationSchema();
const faqSchema = this.seoService.generateFAQPageSchema(
this.faqItems.map(item => ({
question: item.question,
answer: item.answer
}))
);
// Add HowTo schema for buying a business
const howToSchema = this.seoService.generateHowToSchema({
name: 'How to Buy a Business on BizMatch',
description: 'Step-by-step guide to finding and purchasing your ideal business through BizMatch marketplace',
totalTime: 'PT45M',
steps: [
{
name: 'Browse Business Listings',
text: 'Search through thousands of verified business listings using our advanced filters. Filter by industry, location, price range, revenue, and more to find businesses that match your criteria.'
},
{
name: 'Review Business Details',
text: 'Examine the business financials, including annual revenue, cash flow, asking price, and years established. Read the detailed business description and view photos of the operation.'
},
{
name: 'Contact the Seller',
text: 'Use our secure messaging system to contact the seller or business broker directly. Request additional information, financial documents, or schedule a site visit to see the business in person.'
},
{
name: 'Conduct Due Diligence',
text: 'Review all financial statements, tax returns, lease agreements, and legal documents. Verify the business information, inspect the physical location, and consult with legal and financial advisors.'
},
{
name: 'Make an Offer',
text: 'Submit a formal offer based on your valuation and due diligence findings. Negotiate terms including purchase price, payment structure, transition period, and any contingencies.'
},
{
name: 'Close the Transaction',
text: 'Work with attorneys and escrow services to finalize all legal documents, transfer ownership, and complete the purchase. The seller will transfer assets, train you on operations, and help with the transition.'
}
]
});
// Add SearchBox schema for Sitelinks Search
const searchBoxSchema = this.seoService.generateSearchBoxSchema();
this.seoService.injectMultipleSchemas([organizationSchema, faqSchema, howToSchema, searchBoxSchema]);
// Clear all filters and sort options on initial load
this.filterStateService.resetCriteria('businessListings');
this.filterStateService.resetCriteria('commercialPropertyListings');
@ -95,6 +203,47 @@ export class HomeComponent {
this.user = map2User(token);
this.loadCities();
this.setTotalNumberOfResults();
// Setup intersection observer for counter animation
this.setupCounterAnimation();
}
setupCounterAnimation() {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && !this.hasAnimated) {
this.hasAnimated = true;
this.animateCounter('activeListingsCount', 1000, 2000);
this.animateCounter('successfulSalesCount', 500, 2000);
this.animateCounter('brokersCount', 50, 2000);
}
});
},
{ threshold: 0.3 }
);
// Wait for the element to be available
setTimeout(() => {
const statsElement = document.querySelector('.stats-section');
if (statsElement) {
observer.observe(statsElement);
}
}, 100);
}
animateCounter(property: 'activeListingsCount' | 'successfulSalesCount' | 'brokersCount', target: number, duration: number) {
const start = 0;
const increment = target / (duration / 16); // 60fps
const step = () => {
this[property] += increment;
if (this[property] < target) {
requestAnimationFrame(step);
} else {
this[property] = target;
}
};
requestAnimationFrame(step);
}
changeTab(tabname: 'business' | 'commercialProperty' | 'broker') {

194
bizmatch/src/app/pages/legal/privacy-statement.component.html Normal file
View File

@ -0,0 +1,194 @@
<div class="container mx-auto px-4 py-8 max-w-4xl">
<div class="bg-white rounded-lg drop-shadow-custom-bg p-6 md:p-8">
<h1 class="text-3xl font-bold text-neutral-900 mb-6">Privacy Statement</h1>
<section id="content" role="main">
<article class="post page">
<section class="entry-content">
<div class="container">
<p class="font-bold mb-4">Privacy Policy</p>
<p class="mb-4">We are committed to protecting your privacy. We have established this statement as a testament to our commitment to your privacy.</p>
<p class="mb-4">This Privacy Policy relates to the use of any personal information you provide to us through this websites.</p>
<p class="mb-4">
By accepting the Privacy Policy during registration or the sending of an enquiry, you expressly consent to our collection, storage, use and disclosure of your personal information as described in this Privacy
Policy.
</p>
<p class="mb-4">
We may update our Privacy Policy from time to time. Our Privacy Policy was last updated in Febuary 2018 and is effective upon acceptance for new users. By continuing to use our websites or otherwise
continuing to deal with us, you accept this Privacy Policy.
</p>
<p class="font-bold mb-4 mt-6">Collection of personal information</p>
<p class="mb-4">Anyone can browse our websites without revealing any personally identifiable information.</p>
<p class="mb-4">However, should you wish to contact a business for sale, a franchise opportunity or an intermediary, we will require you to provide some personal information.</p>
<p class="mb-4">Should you wish to advertise your services, your business (es) or your franchise opportunity, we will require you to provide some personal information.</p>
<p class="mb-4">By providing personal information, you are consenting to the transfer and storage of that information on our servers located in the United States.</p>
<p class="mb-4">We may collect and store the following personal information:</p>
<p class="mb-4">
Your name, email address, physical address, telephone numbers, and (depending on the service used), your business information, financial information, such as credit / payment card details;<br />
transactional information based on your activities on the site; information that you disclose in a forum on any of our websites, feedback, correspondence through our websites, and correspondence sent to
us;<br />
other information from your interaction with our websites, services, content and advertising, including computer and connection information, statistics on page views, traffic to and from the sites, ad data,
IP address and standard web log information;<br />
supplemental information from third parties (for example, if you incur a debt, we will generally conduct a credit check by obtaining additional information about you from a credit bureau, as permitted by law;
or if the information you provide cannot be verified,<br />
we may ask you to send us additional information, or to answer additional questions online to help verify your information).
</p>
<p class="font-bold mb-4 mt-6">How we use your information</p>
<p class="mb-4">
The primary reason we collect your personal information is to improve the services we deliver to you through our website. By registering or sending an enquiry through our website, you agree that we may use
your personal information to:<br />
provide the services and customer support you request;<br />
connect you with relevant parties:<br />
If you are a buyer we will pass some or all of your details on to the seller / intermediary along with any message you have typed. This allows the seller to contact you in order to pursue a possible sale of a
business;<br />
If you are a seller / intermediary, we will disclose your details where you have given us permission to do so;<br />
resolve disputes, collect fees, and troubleshoot problems;<br />
prevent potentially prohibited or illegal activities, and enforce our Terms and Conditions;<br />
customize, measure and improve our services, conduct internal market research, provide content and advertising;<br />
tell you about other Biz-Match products and services, target marketing, send you service updates, and promotional offers based on your communication preferences.
</p>
<p class="font-bold mb-4 mt-6">Our disclosure of your information</p>
<p class="mb-4">
We may disclose personal information to respond to legal requirements, enforce our policies, respond to claims that a listing or other content infringes the rights of others, or protect anyone's rights,
property, or safety.
</p>
<p class="mb-4">
We may also share your personal information with<br />
When you select to register an account as a business buyer, you provide your personal details and we will pass this on to a seller of a business or franchise when you request more information.
</p>
<p class="mb-4">
When you select to register an account as a business broker or seller on the site, we provide a public platform on which to establish your business profile. This profile consists of pertinent facts about your
business along with your personal information; namely, the contact information you provide to facilitate contact between you and other users' of the site. Direct email addresses and telephone numbers will not
be publicly displayed unless you specifically include it on your profile.
</p>
<p class="mb-4">
The information a user includes within the forums provided on the site is publicly available to other users' of the site. Please be aware that any personal information you elect to provide in a public forum
may be used to send you unsolicited messages; we are not responsible for the personal information a user elects to disclose within their public profile, or in the private communications that users' engage in
on the site.
</p>
<p class="mb-4">
We post testimonials on the site obtained from users'. These testimonials may include the name, city, state or region and business of the user. We obtain permission from our users' prior to posting their
testimonials on the site. We are not responsible for any personal information a user selects to include within their testimonial.
</p>
<p class="mb-4">
When you elect to email a friend about the site, or a particular business, we request the third party's email address to send this one time email. We do not share this information with any third parties for
their promotional purposes and only store the information to gauge the effectiveness of our referral program.
</p>
<p class="mb-4">We may share your personal information with our service providers where necessary. We employ the services of a payment processor to fulfil payment for services purchased on the site.</p>
<p class="mb-4">
We works with a number of partners or affiliates, where we provide marketing services for these companies. These third party agents collect your personal information to facilitate your service request and the
information submitted here is governed by their privacy policy.
</p>
<p class="font-bold mb-4 mt-6">Masking Policy</p>
<p class="mb-4">
In some cases, where the third party agent collects your information, the affiliate portal may appear within a BizMatch.net frame. It is presented as a BizMatch.net page for a streamlined user interface
however the data collected on such pages is governed by the third party agent's privacy policy.
</p>
<p class="font-bold mb-4 mt-6">Legal Disclosure</p>
<p class="mb-4">
In certain circumstances, we may be legally required to disclose information collected on the site to law enforcement, government agencies or other third parties. We reserve the right to disclose information
to our service providers and to law enforcement or government agencies where a formal request such as in response to a court order, subpoena or judicial proceeding is made. Where we believe in good faith that
disclosure of information is necessary to prevent imminent physical or financial harm, or loss, or in protecting against illegal activity on the site, we reserve to disclose information.
</p>
<p class="mb-4">
Should the company undergo the merger, acquisition or sale of some or all of its assets, your personal information may likely be a part of the transferred assets. In such an event, your personal information
on the site, would be governed by this privacy statement; any changes to the privacy practices governing your information as a result of transfer would be relayed to you by means of a prominent notice on the
Site, or by email.
</p>
<p class="font-bold mb-4 mt-6">Using information from BizMatch.net website</p>
<p class="mb-4">
In certain cases, (where you are receiving contact details of buyers interested in your business opportunity or a business opportunity you represent), you must comply with data protection laws, and give other
users a chance to remove themselves from your database and a chance to review what information you have collected about them.
</p>
<p class="font-bold mb-4 mt-6">You agree to use BizMatch.net user information only for:</p>
<p class="mb-4">
BizMatch.net transaction-related purposes that are not unsolicited commercial messages;<br />
using services offered through BizMatch.net, or<br />
other purposes that a user expressly chooses.
</p>
<p class="font-bold mb-4 mt-6">Marketing</p>
<p class="mb-4">
We do not sell or rent your personal information to third parties for their marketing purposes without your explicit consent. Where you explicitly express your consent at the point of collection to receive
offers from third party partners or affiliates, we will communicate to you on their behalf. We will not pass your information on.
</p>
<p class="mb-4">
You will receive email marketing communications from us throughout the duration of your relationship with our websites. If you do not wish to receive marketing communications from us you may unsubscribe and /
or change your preferences at any time by following instructions included within a communication or emailing Customer Services.
</p>
<p class="mb-4">If you have an account with one of our websites you can also log in and click the email preferences link to unsubscribe and / or change your preferences.</p>
<p class="mb-4">
Please note that we reserve the right to send all website users notifications and administrative emails where necessary which are considered a part of the service. Given that these messages aren't promotional
in nature, you will be unable to opt-out of them.
</p>
<p class="font-bold mb-4 mt-6">Cookies</p>
<p class="mb-4">
A cookie is a small text file written to your hard drive that contains information about you. Cookies do not contain any personal information about users. Once you close your browser or log out of the
website, the cookie simply terminates. We use cookies so that we can personalise your experience of our websites.
</p>
<p class="mb-4">
If you set up your browser to reject the cookie, you may still use the website however; doing so may interfere with your use of some aspects of our websites. Some of our business partners use cookies on our
site (for example, advertisers). We have no access to or control over these cookies.
</p>
<p class="mb-4">For more information about how BizMatch.net uses cookies please read our Cookie Policy.</p>
<p class="font-bold mb-4 mt-6">Spam, spyware or spoofing</p>
<p class="mb-4">
We and our users do not tolerate spam. Make sure to set your email preferences so we can communicate with you, as you prefer. Please add us to your safe senders list. To report spam or spoof emails, please
contact us using the contact information provided in the Contact Us section of this privacy statement.
</p>
<p class="mb-4">
You may not use our communication tools to send spam or otherwise send content that would breach our Terms and Conditions. We automatically scan and may manually filter messages to check for spam, viruses,
phishing attacks and other malicious activity or illegal or prohibited content. We may also store these messages for back up purposes only.
</p>
<p class="mb-4">
If you send an email to an email address that is not registered in our community, we do not permanently store that email or use that email address for any marketing purpose. We do not rent or sell these email
addresses.
</p>
<p class="font-bold mb-4 mt-6">Account protection</p>
<p class="mb-4">
Your password is the key to your account. Make sure this is stored safely. Use unique numbers, letters and special characters, and do not disclose your password to anyone. If you do share your password or
your personal information with others, remember that you are responsible for all actions taken in the name of your account. If you lose control of your password, you may lose substantial control over your
personal information and may be subject to legally binding actions taken on your behalf. Therefore, if your password has been compromised for any reason, you should immediately notify us and change your
password.
</p>
<p class="font-bold mb-4 mt-6">Accessing, reviewing and changing your personal information</p>
<p class="mb-4">You can view and amend your personal information at any time by logging in to your account online. You must promptly update your personal information if it changes or is inaccurate.</p>
<p class="mb-4">If at any time you wish to close your account, please contact Customer Services and instruct us to do so. We will process your request as soon as we can.</p>
<p class="mb-4">You may also contact us at any time to find out what information we hold about you, what we do with it and ask us to update it for you.</p>
<p class="mb-4">
We do retain personal information from closed accounts to comply with law, prevent fraud, collect any fees owed, resolve disputes, troubleshoot problems, assist with any investigations, enforce our Terms and
Conditions, and take other actions otherwise permitted by law.
</p>
<p class="font-bold mb-4 mt-6">Security</p>
<p class="mb-4">
Your information is stored on our servers located in the USA. We treat data as an asset that must be protected and use a variety of tools (encryption, passwords, physical security, etc.) to protect your
personal information against unauthorized access and disclosure. However, no method of security is 100% effective and while we take every measure to protect your personal information, we make no guarantees of
its absolute security.
</p>
<p class="mb-4">We employ the use of SSL encryption during the transmission of sensitive data across our websites.</p>
<p class="font-bold mb-4 mt-6">Third parties</p>
<p class="mb-4">
Except as otherwise expressly included in this Privacy Policy, this document addresses only the use and disclosure of information we collect from you. If you disclose your information to others, whether they
are buyers or sellers on our websites or other sites throughout the internet, different rules may apply to their use or disclosure of the information you disclose to them. Dynamis does not control the privacy
policies of third parties, and you are subject to the privacy policies of those third parties where applicable.
</p>
<p class="mb-4">We encourage you to ask questions before you disclose your personal information to others.</p>
<p class="font-bold mb-4 mt-6">General</p>
<p class="mb-4">
We may change this Privacy Policy from time to time as we add new products and applications, as we improve our current offerings, and as technologies and laws change. You can determine when this Privacy
Policy was last revised by referring to the "Last Updated" legend at the top of this page.
</p>
<p class="mb-4">
Any changes will become effective upon our posting of the revised Privacy Policy on our affected websites. We will provide notice to you if these changes are material and, where required by applicable law, we
will obtain your consent. This notice may be provided by email, by posting notice of the changes on our affected websites or by other means, consistent with applicable laws.
</p>
<p class="font-bold mb-4 mt-6">Contact Us</p>
<p class="mb-4">
If you have any questions or comments about our privacy policy, and you can't find the answer to your question on our help pages, please contact us using this form or email support&#64;bizmatch.net, or write
to us at BizMatch, 715 S. Tanahua, Corpus Christi, TX 78401.)
</p>
</div>
</section>
</article>
</section>
</div>
</div>

1
bizmatch/src/app/pages/legal/privacy-statement.component.scss Normal file
View File

@ -0,0 +1 @@
// Privacy Statement component styles

23
bizmatch/src/app/pages/legal/privacy-statement.component.ts Normal file
View File

@ -0,0 +1,23 @@
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SeoService } from '../../services/seo.service';
@Component({
selector: 'app-privacy-statement',
standalone: true,
imports: [CommonModule],
templateUrl: './privacy-statement.component.html',
styleUrls: ['./privacy-statement.component.scss']
})
export class PrivacyStatementComponent implements OnInit {
constructor(private seoService: SeoService) {}
ngOnInit(): void {
// Set SEO meta tags for Privacy Statement page
this.seoService.updateMetaTags({
title: 'Privacy Statement - BizMatch',
description: 'Learn how BizMatch collects, uses, and protects your personal information. Read our privacy policy and data protection practices.',
type: 'website'
});
}
}

143
bizmatch/src/app/pages/legal/terms-of-use.component.html Normal file
View File

@ -0,0 +1,143 @@
<div class="container mx-auto px-4 py-8 max-w-4xl">
<div class="bg-white rounded-lg drop-shadow-custom-bg p-6 md:p-8">
<h1 class="text-3xl font-bold text-neutral-900 mb-6">Terms of Use</h1>
<section id="content" role="main">
<article class="post page">
<section class="entry-content">
<div class="container">
<p class="font-bold text-lg mb-4">AGREEMENT BETWEEN USER AND BizMatch</p>
<p class="mb-4">The BizMatch Web Site is comprised of various Web pages operated by BizMatch.</p>
<p class="mb-4">
The BizMatch Web Site is offered to you conditioned on your acceptance without modification of the terms, conditions, and notices contained herein. Your use of the BizMatch Web Site constitutes your
agreement to all such terms, conditions, and notices.
</p>
<p class="font-bold text-lg mb-4 mt-6">MODIFICATION OF THESE TERMS OF USE</p>
<p class="mb-4">
BizMatch reserves the right to change the terms, conditions, and notices under which the BizMatch Web Site is offered, including but not limited to the charges associated with the use of the BizMatch Web
Site.
</p>
<p class="font-bold text-lg mb-4 mt-6">LINKS TO THIRD PARTY SITES</p>
<p class="mb-4">
The BizMatch Web Site may contain links to other Web Sites ("Linked Sites"). The Linked Sites are not under the control of BizMatch and BizMatch is not responsible for the contents of any Linked Site,
including without limitation any link contained in a Linked Site, or any changes or updates to a Linked Site. BizMatch is not responsible for webcasting or any other form of transmission received from any
Linked Site. BizMatch is providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement by BizMatch of the site or any association with its operators.
</p>
<p class="font-bold text-lg mb-4 mt-6">NO UNLAWFUL OR PROHIBITED USE</p>
<p class="mb-4">
As a condition of your use of the BizMatch Web Site, you warrant to BizMatch that you will not use the BizMatch Web Site for any purpose that is unlawful or prohibited by these terms, conditions, and
notices. You may not use the BizMatch Web Site in any manner which could damage, disable, overburden, or impair the BizMatch Web Site or interfere with any other party's use and enjoyment of the BizMatch
Web Site. You may not obtain or attempt to obtain any materials or information through any means not intentionally made available or provided for through the BizMatch Web Sites.
</p>
<p class="font-bold text-lg mb-4 mt-6">USE OF COMMUNICATION SERVICES</p>
<p class="mb-4">
The BizMatch Web Site may contain bulletin board services, chat areas, news groups, forums, communities, personal web pages, calendars, and/or other message or communication facilities designed to enable
you to communicate with the public at large or with a group (collectively, "Communication Services"), you agree to use the Communication Services only to post, send and receive messages and material that
are proper and related to the particular Communication Service. By way of example, and not as a limitation, you agree that when using a Communication Service, you will not:
</p>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li>Defame, abuse, harass, stalk, threaten or otherwise violate the legal rights (such as rights of privacy and publicity) of others.</li>
<li>Publish, post, upload, distribute or disseminate any inappropriate, profane, defamatory, infringing, obscene, indecent or unlawful topic, name, material or information.</li>
<li>Upload files that contain software or other material protected by intellectual property laws (or by rights of privacy of publicity) unless you own or control the rights thereto or have received all necessary consents.</li>
<li>Upload files that contain viruses, corrupted files, or any other similar software or programs that may damage the operation of another's computer.</li>
<li>Advertise or offer to sell or buy any goods or services for any business purpose, unless such Communication Service specifically allows such messages.</li>
<li>Conduct or forward surveys, contests, pyramid schemes or chain letters.</li>
<li>Download any file posted by another user of a Communication Service that you know, or reasonably should know, cannot be legally distributed in such manner.</li>
<li>Falsify or delete any author attributions, legal or other proper notices or proprietary designations or labels of the origin or source of software or other material contained in a file that is uploaded.</li>
<li>Restrict or inhibit any other user from using and enjoying the Communication Services.</li>
<li>Violate any code of conduct or other guidelines which may be applicable for any particular Communication Service.</li>
<li>Harvest or otherwise collect information about others, including e-mail addresses, without their consent.</li>
<li>Violate any applicable laws or regulations.</li>
</ul>
<p class="mb-4">
BizMatch has no obligation to monitor the Communication Services. However, BizMatch reserves the right to review materials posted to a Communication Service and to remove any materials in its sole
discretion. BizMatch reserves the right to terminate your access to any or all of the Communication Services at any time without notice for any reason whatsoever.
</p>
<p class="mb-4">
BizMatch reserves the right at all times to disclose any information as necessary to satisfy any applicable law, regulation, legal process or governmental request, or to edit, refuse to post or to remove
any information or materials, in whole or in part, in BizMatch's sole discretion.
</p>
<p class="mb-4">
Always use caution when giving out any personally identifying information about yourself or your children in any Communication Service. BizMatch does not control or endorse the content, messages or
information found in any Communication Service and, therefore, BizMatch specifically disclaims any liability with regard to the Communication Services and any actions resulting from your participation in
any Communication Service. Managers and hosts are not authorized BizMatch spokespersons, and their views do not necessarily reflect those of BizMatch.
</p>
<p class="mb-4">
Materials uploaded to a Communication Service may be subject to posted limitations on usage, reproduction and/or dissemination. You are responsible for adhering to such limitations if you download the
materials.
</p>
<p class="font-bold text-lg mb-4 mt-6">MATERIALS PROVIDED TO BizMatch OR POSTED AT ANY BizMatch WEB SITE</p>
<p class="mb-4">
BizMatch does not claim ownership of the materials you provide to BizMatch (including feedback and suggestions) or post, upload, input or submit to any BizMatch Web Site or its associated services
(collectively "Submissions"). However, by posting, uploading, inputting, providing or submitting your Submission you are granting BizMatch, its affiliated companies and necessary sublicensees permission
to use your Submission in connection with the operation of their Internet businesses including, without limitation, the rights to: copy, distribute, transmit, publicly display, publicly perform,
reproduce, edit, translate and reformat your Submission; and to publish your name in connection with your Submission.
</p>
<p class="mb-4">
No compensation will be paid with respect to the use of your Submission, as provided herein. BizMatch is under no obligation to post or use any Submission you may provide and may remove any Submission at
any time in BizMatch's sole discretion.
</p>
<p class="mb-4">
By posting, uploading, inputting, providing or submitting your Submission you warrant and represent that you own or otherwise control all of the rights to your Submission as described in this section
including, without limitation, all the rights necessary for you to provide, post, upload, input or submit the Submissions.
</p>
<p class="font-bold text-lg mb-4 mt-6">LIABILITY DISCLAIMER</p>
<p class="mb-4">
THE INFORMATION, SOFTWARE, PRODUCTS, AND SERVICES INCLUDED IN OR AVAILABLE THROUGH THE BizMatch WEB SITE MAY INCLUDE INACCURACIES OR TYPOGRAPHICAL ERRORS. CHANGES ARE PERIODICALLY ADDED TO THE
INFORMATION HEREIN. BizMatch AND/OR ITS SUPPLIERS MAY MAKE IMPROVEMENTS AND/OR CHANGES IN THE BizMatch WEB SITE AT ANY TIME. ADVICE RECEIVED VIA THE BizMatch WEB SITE SHOULD NOT BE RELIED UPON FOR
PERSONAL, MEDICAL, LEGAL OR FINANCIAL DECISIONS AND YOU SHOULD CONSULT AN APPROPRIATE PROFESSIONAL FOR SPECIFIC ADVICE TAILORED TO YOUR SITUATION.
</p>
<p class="mb-4">
BizMatch AND/OR ITS SUPPLIERS MAKE NO REPRESENTATIONS ABOUT THE SUITABILITY, RELIABILITY, AVAILABILITY, TIMELINESS, AND ACCURACY OF THE INFORMATION, SOFTWARE, PRODUCTS, SERVICES AND RELATED GRAPHICS
CONTAINED ON THE BizMatch WEB SITE FOR ANY PURPOSE. TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, ALL SUCH INFORMATION, SOFTWARE, PRODUCTS, SERVICES AND RELATED GRAPHICS ARE PROVIDED "AS IS" WITHOUT
WARRANTY OR CONDITION OF ANY KIND. BizMatch AND/OR ITS SUPPLIERS HEREBY DISCLAIM ALL WARRANTIES AND CONDITIONS WITH REGARD TO THIS INFORMATION, SOFTWARE, PRODUCTS, SERVICES AND RELATED GRAPHICS, INCLUDING
ALL IMPLIED WARRANTIES OR CONDITIONS OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT.
</p>
<p class="mb-4">
TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, IN NO EVENT SHALL BizMatch AND/OR ITS SUPPLIERS BE LIABLE FOR ANY DIRECT, INDIRECT, PUNITIVE, INCIDENTAL, SPECIAL, CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER INCLUDING, WITHOUT LIMITATION, DAMAGES FOR LOSS OF USE, DATA OR PROFITS, ARISING OUT OF OR IN ANY WAY CONNECTED WITH THE USE OR PERFORMANCE OF THE BizMatch WEB SITE, WITH THE DELAY OR INABILITY
TO USE THE BizMatch WEB SITE OR RELATED SERVICES, THE PROVISION OF OR FAILURE TO PROVIDE SERVICES, OR FOR ANY INFORMATION, SOFTWARE, PRODUCTS, SERVICES AND RELATED GRAPHICS OBTAINED THROUGH THE BizMatch
WEB SITE, OR OTHERWISE ARISING OUT OF THE USE OF THE BizMatch WEB SITE, WHETHER BASED ON CONTRACT, TORT, NEGLIGENCE, STRICT LIABILITY OR OTHERWISE, EVEN IF BizMatch OR ANY OF ITS SUPPLIERS HAS BEEN
ADVISED OF THE POSSIBILITY OF DAMAGES. BECAUSE SOME STATES/JURISDICTIONS DO NOT ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR CONSEQUENTIAL OR INCIDENTAL DAMAGES, THE ABOVE LIMITATION MAY NOT APPLY
TO YOU. IF YOU ARE DISSATISFIED WITH ANY PORTION OF THE BizMatch WEB SITE, OR WITH ANY OF THESE TERMS OF USE, YOUR SOLE AND EXCLUSIVE REMEDY IS TO DISCONTINUE USING THE BizMatch WEB SITE.
</p>
<p class="mb-4">SERVICE CONTACT : info&#64;bizmatch.net</p>
<p class="font-bold text-lg mb-4 mt-6">TERMINATION/ACCESS RESTRICTION</p>
<p class="mb-4">
BizMatch reserves the right, in its sole discretion, to terminate your access to the BizMatch Web Site and the related services or any portion thereof at any time, without notice. GENERAL To the maximum
extent permitted by law, this agreement is governed by the laws of the State of Washington, U.S.A. and you hereby consent to the exclusive jurisdiction and venue of courts in King County, Washington,
U.S.A. in all disputes arising out of or relating to the use of the BizMatch Web Site. Use of the BizMatch Web Site is unauthorized in any jurisdiction that does not give effect to all provisions of these
terms and conditions, including without limitation this paragraph. You agree that no joint venture, partnership, employment, or agency relationship exists between you and BizMatch as a result of this
agreement or use of the BizMatch Web Site. BizMatch's performance of this agreement is subject to existing laws and legal process, and nothing contained in this agreement is in derogation of BizMatch's
right to comply with governmental, court and law enforcement requests or requirements relating to your use of the BizMatch Web Site or information provided to or gathered by BizMatch with respect to such
use. If any part of this agreement is determined to be invalid or unenforceable pursuant to applicable law including, but not limited to, the warranty disclaimers and liability limitations set forth
above, then the invalid or unenforceable provision will be deemed superseded by a valid, enforceable provision that most closely matches the intent of the original provision and the remainder of the
agreement shall continue in effect. Unless otherwise specified herein, this agreement constitutes the entire agreement between the user and BizMatch with respect to the BizMatch Web Site and it supersedes
all prior or contemporaneous communications and proposals, whether electronic, oral or written, between the user and BizMatch with respect to the BizMatch Web Site. A printed version of this agreement and
of any notice given in electronic form shall be admissible in judicial or administrative proceedings based upon or relating to this agreement to the same extent and subject to the same conditions as
other business documents and records originally generated and maintained in printed form. It is the express wish to the parties that this agreement and all related documents be drawn up in English.
</p>
<p class="font-bold text-lg mb-4 mt-6">COPYRIGHT AND TRADEMARK NOTICES:</p>
<p class="mb-4">All contents of the BizMatch Web Site are: Copyright 2011 by Bizmatch Business Solutions and/or its suppliers. All rights reserved.</p>
<p class="font-bold text-lg mb-4 mt-6">TRADEMARKS</p>
<p class="mb-4">The names of actual companies and products mentioned herein may be the trademarks of their respective owners.</p>
<p class="mb-4">
The example companies, organizations, products, people and events depicted herein are fictitious. No association with any real company, organization, product, person, or event is intended or should be
inferred.
</p>
<p class="mb-4">Any rights not expressly granted herein are reserved.</p>
<p class="font-bold text-lg mb-4 mt-6">NOTICES AND PROCEDURE FOR MAKING CLAIMS OF COPYRIGHT INFRINGEMENT</p>
<p class="mb-4">
Pursuant to Title 17, United States Code, Section 512(c)(2), notifications of claimed copyright infringement under United States copyright law should be sent to Service Provider's Designated Agent. ALL
INQUIRIES NOT RELEVANT TO THE FOLLOWING PROCEDURE WILL RECEIVE NO RESPONSE. See Notice and Procedure for Making Claims of Copyright Infringement.
</p>
<p class="mb-4">
We reserve the right to update or revise these Terms of Use at any time without notice. Please check the Terms of Use periodically for changes. The revised terms will be effective immediately as
soon as they are posted on the WebSite and by continuing to use the Site you agree to be bound by the revised terms.
</p>
</div>
</section>
</article>
</section>
</div>
</div>

1
bizmatch/src/app/pages/legal/terms-of-use.component.scss Normal file
View File

@ -0,0 +1 @@
// Terms of Use component styles

23
bizmatch/src/app/pages/legal/terms-of-use.component.ts Normal file
View File

@ -0,0 +1,23 @@
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SeoService } from '../../services/seo.service';
@Component({
selector: 'app-terms-of-use',
standalone: true,
imports: [CommonModule],
templateUrl: './terms-of-use.component.html',
styleUrls: ['./terms-of-use.component.scss']
})
export class TermsOfUseComponent implements OnInit {
constructor(private seoService: SeoService) {}
ngOnInit(): void {
// Set SEO meta tags for Terms of Use page
this.seoService.updateMetaTags({
title: 'Terms of Use - BizMatch',
description: 'Read the terms and conditions for using BizMatch marketplace. Learn about user responsibilities, listing guidelines, and platform rules.',
type: 'website'
});
}
}

82
bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
View File

@ -1,44 +1,88 @@
<div class="container mx-auto px-4 py-8">
<div class="flex flex-col md:flex-row">
<!-- Filter Panel for Desktop -->
<div class="hidden md:block w-full md:w-1/4 h-full bg-white shadow-lg p-6 overflow-y-auto z-10">
<app-search-modal-broker [isModal]="false"></app-search-modal-broker>
</div>
<!-- Main Content -->
<div class="w-full p-4">
<div class="container mx-auto">
<!-- Breadcrumbs -->
<div class="mb-4">
<app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
</div>
<!-- SEO-optimized heading -->
<div class="mb-6">
<h1 class="text-3xl md:text-4xl font-bold text-neutral-900 mb-2">Business Professionals Directory</h1>
<p class="text-lg text-neutral-600">Connect with licensed business brokers, CPAs, attorneys, and other professionals across the United States.</p>
</div>
<!-- Mobile Filter Button -->
<div class="md:hidden mb-4">
<button (click)="openFilterModal()" class="w-full bg-primary-600 text-white py-3 px-4 rounded-lg flex items-center justify-center">
<i class="fas fa-filter mr-2"></i>
Filter Results
</button>
</div>
@if(users?.length>0){
<h2 class="text-2xl font-semibold text-neutral-800 mb-4">Professional Listings</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Amanda Taylor -->
<!-- Professional Cards -->
@for (user of users; track user) {
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6 flex flex-col justify-between">
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6 flex flex-col justify-between hover:shadow-2xl transition-all duration-300 hover:scale-[1.02]">
<div class="flex items-start space-x-4">
@if(user.hasProfile){
<img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="rounded-md w-20 h-26 object-cover" />
<img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}"
[alt]="altText.generateBrokerProfileAlt(user)"
class="rounded-md w-20 h-26 object-cover"
width="80"
height="104" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="rounded-md w-20 h-26 object-cover" />
<img src="assets/images/person_placeholder.jpg"
alt="Default business broker placeholder profile photo"
class="rounded-md w-20 h-26 object-cover"
width="80"
height="104" />
}
<div class="flex-1">
<p class="text-sm text-gray-800 mb-2">{{ user.description }}</p>
<p class="text-sm text-neutral-800 mb-2">{{ user.description }}</p>
<h3 class="text-lg font-semibold">
{{ user.firstname }} {{ user.lastname }}<span class="bg-gray-200 text-gray-700 text-xs font-semibold px-2 py-1 rounded ml-4">{{ user.location?.name }} - {{ user.location?.state }}</span>
{{ user.firstname }} {{ user.lastname }}<span class="bg-neutral-200 text-neutral-700 text-xs font-semibold px-2 py-1 rounded ml-4">{{ user.location?.name }} - {{ user.location?.state }}</span>
</h3>
<div class="flex items-center space-x-2 mt-2">
<app-customer-sub-type [customerSubType]="user.customerSubType"></app-customer-sub-type>
<p class="text-sm text-gray-600">{{ user.companyName }}</p>
<p class="text-sm text-neutral-600">{{ user.companyName }}</p>
</div>
<div class="flex items-center justify-between my-2"></div>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
@if(user.hasCompanyLogo){
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-8 h-10 object-contain" />
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}"
[alt]="altText.generateCompanyLogoAlt(user.companyName, user.firstname + ' ' + user.lastname)"
class="w-8 h-10 object-contain"
width="32"
height="40" />
} @else {
<img src="assets/images/placeholder.png" class="w-8 h-10 object-contain" />
<img src="assets/images/placeholder.png"
alt="Default company logo placeholder"
class="w-8 h-10 object-contain"
width="32"
height="40" />
}
<button class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-full flex items-center" [routerLink]="['/details-user', user.id]">
<button class="bg-success-500 hover:bg-success-600 text-white font-medium py-2 px-4 rounded-full flex items-center" [routerLink]="['/details-user', user.id]">
View Full profile
<i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
}
</div>
} @else if (users?.length===0){
<div class="w-full flex items-center flex-wrap justify-center gap-10">
<!-- Empty State -->
<div class="w-full flex items-center flex-wrap justify-center gap-10 py-12">
<div class="grid gap-4 w-60">
<svg class="mx-auto" xmlns="http://www.w3.org/2000/svg" width="154" height="161" viewBox="0 0 154 161" fill="none">
<path
@ -81,16 +125,22 @@
<circle cx="67.0702" cy="31.0854" r="1.36752" fill="#4F46E5" />
</svg>
<div>
<h2 class="text-center text-black text-xl font-semibold leading-loose pb-2">There’re no professionals here</h2>
<h2 class="text-center text-black text-xl font-semibold leading-loose pb-2">There're no professionals here</h2>
<p class="text-center text-black text-base font-normal leading-relaxed pb-4">Try changing your filters to <br />see professionals</p>
<div class="flex gap-3">
<button (click)="clearAllFilters()" class="w-full px-3 py-2 rounded-full border border-gray-300 text-gray-900 text-xs font-semibold leading-4">Clear Filter</button>
<button (click)="clearAllFilters()" class="w-full px-3 py-2 rounded-full border border-neutral-300 text-neutral-900 text-xs font-semibold leading-4">Clear Filter</button>
</div>
</div>
</div>
</div>
}
</div>
<!-- Pagination -->
@if(pageCount>1){
<div class="mt-8">
<app-paginator [page]="page" [pageCount]="pageCount" (pageChange)="onPageChange($event)"></app-paginator>
</div>
}
</div>
</div>
</div>

52
bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts
View File

@ -1,30 +1,40 @@
import { CommonModule, NgOptimizedImage } from '@angular/common';
import { ChangeDetectorRef, Component } from '@angular/core';
import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { UntilDestroy } from '@ngneat/until-destroy';
import { Subject, takeUntil } from 'rxjs';
import { BusinessListing, SortByOptions, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { LISTINGS_PER_PAGE, ListingType, UserListingCriteria, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { BreadcrumbItem, BreadcrumbsComponent } from '../../../components/breadcrumbs/breadcrumbs.component';
import { CustomerSubTypeComponent } from '../../../components/customer-sub-type/customer-sub-type.component';
import { PaginatorComponent } from '../../../components/paginator/paginator.component';
import { SearchModalBrokerComponent } from '../../../components/search-modal/search-modal-broker.component';
import { ModalService } from '../../../components/search-modal/modal.service';
import { AltTextService } from '../../../services/alt-text.service';
import { CriteriaChangeService } from '../../../services/criteria-change.service';
import { FilterStateService } from '../../../services/filter-state.service';
import { ImageService } from '../../../services/image.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 { assignProperties, getCriteriaProxy, resetUserListingCriteria } from '../../../utils/utils';
import { assignProperties, resetUserListingCriteria } from '../../../utils/utils';
@UntilDestroy()
@Component({
selector: 'app-broker-listings',
standalone: true,
imports: [CommonModule, FormsModule, RouterModule, NgOptimizedImage, PaginatorComponent, CustomerSubTypeComponent],
imports: [CommonModule, FormsModule, RouterModule, NgOptimizedImage, PaginatorComponent, CustomerSubTypeComponent, BreadcrumbsComponent, SearchModalBrokerComponent],
templateUrl: './broker-listings.component.html',
styleUrls: ['./broker-listings.component.scss', '../../pages.scss'],
})
export class BrokerListingsComponent {
export class BrokerListingsComponent implements OnInit, OnDestroy {
private destroy$ = new Subject<void>();
breadcrumbs: BreadcrumbItem[] = [
{ label: 'Home', url: '/home', icon: 'fas fa-home' },
{ label: 'Professionals', url: '/brokerListings' }
];
environment = environment;
listings: Array<BusinessListing>;
users: Array<User>;
@ -47,6 +57,7 @@ export class BrokerListingsComponent {
pageCount = 1;
sortBy: SortByOptions = null; // Neu: Separate Property
constructor(
public altText: AltTextService,
public selectOptions: SelectOptionsService,
private listingsService: ListingsService,
private userService: UserService,
@ -58,23 +69,38 @@ export class BrokerListingsComponent {
private searchService: SearchService,
private modalService: ModalService,
private criteriaChangeService: CriteriaChangeService,
private filterStateService: FilterStateService,
) {
this.criteria = getCriteriaProxy('brokerListings', this) as UserListingCriteria;
this.init();
this.loadSortBy();
// this.searchService.currentCriteria.pipe(untilDestroyed(this)).subscribe(({ criteria }) => {
// if (criteria.criteriaType === 'brokerListings') {
// this.search();
// }
// });
}
private loadSortBy() {
const storedSortBy = sessionStorage.getItem('professionalsSortBy');
this.sortBy = storedSortBy && storedSortBy !== 'null' ? (storedSortBy as SortByOptions) : null;
}
async ngOnInit() {}
async init() {
ngOnInit(): void {
// Subscribe to FilterStateService for criteria changes
this.filterStateService
.getState$('brokerListings')
.pipe(takeUntil(this.destroy$))
.subscribe(state => {
this.criteria = state.criteria as UserListingCriteria;
this.sortBy = state.sortBy;
this.search();
});
// Subscribe to SearchService for search triggers
this.searchService.searchTrigger$
.pipe(takeUntil(this.destroy$))
.subscribe(type => {
if (type === 'brokerListings') {
this.search();
}
});
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
async search() {
const usersReponse = await this.userService.search(this.criteria);

168
bizmatch/src/app/pages/listings/business-listings/business-listings.component.html
View File

@ -7,11 +7,75 @@
<!-- Main Content -->
<div class="w-full p-4">
<div class="container mx-auto">
@if(listings?.length > 0) {
<!-- Breadcrumbs -->
<div class="mb-4">
<app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
</div>
<!-- SEO-optimized heading -->
<div class="mb-6">
<h1 class="text-3xl md:text-4xl font-bold text-neutral-900 mb-2">Businesses for Sale</h1>
<p class="text-lg text-neutral-600">Discover profitable business opportunities across the United States. Browse verified listings from business owners and brokers.</p>
</div>
<!-- Loading Skeleton -->
@if(isLoading) {
<h2 class="text-2xl font-semibold text-neutral-800 mb-4">Loading Business Listings...</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@for (item of [1,2,3,4,5,6]; track item) {
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden">
<div class="p-6 animate-pulse">
<!-- Category icon and text -->
<div class="flex items-center mb-4">
<div class="w-5 h-5 bg-neutral-200 rounded mr-2"></div>
<div class="h-5 bg-neutral-200 rounded w-32"></div>
</div>
<!-- Title -->
<div class="h-7 bg-neutral-200 rounded w-3/4 mb-4"></div>
<!-- Badges -->
<div class="flex justify-between mb-4">
<div class="h-6 bg-neutral-200 rounded-full w-20"></div>
<div class="h-6 bg-neutral-200 rounded-full w-16"></div>
</div>
<!-- Details -->
<div class="space-y-2 mb-4">
<div class="h-4 bg-neutral-200 rounded w-full"></div>
<div class="h-4 bg-neutral-200 rounded w-5/6"></div>
<div class="h-4 bg-neutral-200 rounded w-4/6"></div>
<div class="h-4 bg-neutral-200 rounded w-3/4"></div>
<div class="h-4 bg-neutral-200 rounded w-2/3"></div>
</div>
<!-- Button -->
<div class="h-12 bg-neutral-200 rounded-full w-full mt-4"></div>
</div>
</div>
}
</div>
} @else if(listings?.length > 0) {
<h2 class="text-2xl font-semibold text-neutral-800 mb-4">Available Business Listings</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@for (listing of listings; track listing.id) {
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden hover:shadow-xl">
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden hover:shadow-2xl transition-all duration-300 hover:scale-[1.02] group">
<div class="p-6 flex flex-col h-full relative z-[0]">
<!-- Quick Actions Overlay -->
<div class="absolute top-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-20">
@if(user) {
<button
class="bg-white rounded-full p-2 shadow-lg transition-colors"
[class.bg-red-50]="isFavorite(listing)"
[title]="isFavorite(listing) ? 'Remove from favorites' : 'Save to favorites'"
(click)="toggleFavorite($event, listing)">
<i [class]="isFavorite(listing) ? 'fas fa-heart text-red-500' : 'far fa-heart text-red-500 hover:scale-110 transition-transform'"></i>
</button>
}
<button
class="bg-white rounded-full p-2 shadow-lg hover:bg-blue-50 transition-colors"
title="Share listing"
(click)="$event.stopPropagation()">
<i class="fas fa-share-alt text-blue-500 hover:scale-110 transition-transform"></i>
</button>
</div>
<div class="flex items-center mb-4">
<i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2 text-xl"></i>
<span [class]="selectOptions.getTextColorType(listing.type)" class="font-bold text-lg">{{ selectOptions.getBusiness(listing.type) }}</span>
@ -19,20 +83,20 @@
<h2 class="text-xl font-semibold mb-4">
{{ listing.title }}
@if(listing.draft) {
<span class="bg-red-100 text-red-800 text-sm font-medium me-2 ml-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Draft</span>
<span class="bg-amber-100 text-amber-800 border border-amber-300 text-sm font-medium me-2 ml-2 px-2.5 py-0.5 rounded">Draft</span>
}
</h2>
<div class="flex justify-between">
<span class="w-fit inline-flex items-center justify-center px-2 py-1 mb-4 text-xs font-bold leading-none bg-gray-200 text-gray-700 rounded-full">
<span class="w-fit inline-flex items-center justify-center px-2 py-1 mb-4 text-xs font-bold leading-none bg-neutral-200 text-neutral-700 rounded-full">
{{ selectOptions.getState(listing.location.state) }}
</span>
@if (getListingBadge(listing); as badge) {
<span
class="mb-4 h-fit inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none rounded-full"
class="mb-4 h-fit inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none rounded-full border"
[ngClass]="{
'bg-emerald-100 text-emerald-800': badge === 'NEW',
'bg-blue-100 text-blue-800': badge === 'UPDATED'
'bg-emerald-100 text-emerald-800 border-emerald-300': badge === 'NEW',
'bg-teal-100 text-teal-800 border-teal-300': badge === 'UPDATED'
}"
>
{{ badge }}
@ -40,40 +104,46 @@
}
</div>
<p class="text-base font-bold text-gray-800 mb-2">
<p class="text-base font-bold text-neutral-800 mb-2">
<strong>Asking price:</strong>
<span class="text-green-600">
<span class="text-success-600">
{{ listing?.price != null ? (listing.price | currency : 'USD' : 'symbol' : '1.0-0') : 'undisclosed' }}
</span>
</p>
<p class="text-sm text-gray-600 mb-2">
<p class="text-sm text-neutral-600 mb-2">
<strong>Sales revenue:</strong>
{{ listing?.salesRevenue != null ? (listing.salesRevenue | currency : 'USD' : 'symbol' : '1.0-0') : 'undisclosed' }}
</p>
<p class="text-sm text-gray-600 mb-2">
<p class="text-sm text-neutral-600 mb-2">
<strong>Net profit:</strong>
{{ listing?.cashFlow != null ? (listing.cashFlow | currency : 'USD' : 'symbol' : '1.0-0') : 'undisclosed' }}
</p>
<p class="text-sm text-gray-600 mb-2">
<p class="text-sm text-neutral-600 mb-2">
<strong>Location:</strong> {{ listing.location.name ? listing.location.name : listing.location.county ? listing.location.county : this.selectOptions.getState(listing.location.state) }}
</p>
<p class="text-sm text-gray-600 mb-4"><strong>Years established:</strong> {{ listing.established }}</p>
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" alt="Company logo" class="absolute bottom-[80px] right-[20px] h-[45px] w-auto" />
<p class="text-sm text-neutral-600 mb-4"><strong>Years established:</strong> {{ listing.established }}</p>
@if(listing.imageName) {
<img [appLazyLoad]="env.imageBaseUrl + '/pictures/logo/' + listing.imageName + '.avif?_ts=' + ts"
[alt]="altText.generateListingCardLogoAlt(listing)"
class="absolute bottom-[80px] right-[20px] h-[45px] w-auto"
width="100"
height="45" />
}
<div class="flex-grow"></div>
<button
class="bg-green-500 text-white px-5 py-3 rounded-full w-full flex items-center justify-center mt-4 transition-colors duration-200 hover:bg-green-600"
[routerLink]="['/details-business-listing', listing.id]"
class="bg-success-600 text-white px-5 py-3 rounded-full w-full flex items-center justify-center mt-4 transition-all duration-200 hover:bg-success-700 hover:shadow-lg group/btn"
[routerLink]="['/business', listing.slug || listing.id]"
>
View Full Listing
<i class="fas fa-arrow-right ml-2"></i>
<span class="font-semibold">View Opportunity</span>
<i class="fas fa-arrow-right ml-2 group-hover/btn:translate-x-1 transition-transform duration-200"></i>
</button>
</div>
</div>
}
</div>
} @else if (listings?.length === 0) {
<div class="w-full flex items-center flex-wrap justify-center gap-10">
<div class="grid gap-4 w-60">
<div class="w-full flex items-center flex-wrap justify-center gap-10 py-12">
<div class="grid gap-6 max-w-2xl w-full">
<svg class="mx-auto" xmlns="http://www.w3.org/2000/svg" width="154" height="161" viewBox="0 0 154 161" fill="none">
<path
d="M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z"
@ -114,11 +184,57 @@
<circle cx="61.6001" cy="31.0854" r="1.36752" fill="#4F46E5" />
<circle cx="67.0702" cy="31.0854" r="1.36752" fill="#4F46E5" />
</svg>
<div>
<h2 class="text-center text-black text-xl font-semibold leading-loose pb-2">There’s no listing here</h2>
<p class="text-center text-black text-base font-normal leading-relaxed pb-4">Try changing your filters to <br />see listings</p>
<div class="flex gap-3">
<button (click)="clearAllFilters()" class="w-full px-3 py-2 rounded-full border border-gray-300 text-gray-900 text-xs font-semibold leading-4">Clear Filter</button>
<div class="text-center">
<h2 class="text-black text-2xl font-semibold leading-loose pb-2">No listings found</h2>
<p class="text-neutral-600 text-base font-normal leading-relaxed pb-6">We couldn't find any businesses matching your criteria.<br />Try adjusting your filters or explore popular categories below.</p>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row gap-3 justify-center mb-8">
<button (click)="clearAllFilters()" class="px-6 py-3 rounded-full bg-primary-600 text-white text-sm font-semibold hover:bg-primary-700 transition-colors">
<i class="fas fa-redo mr-2"></i>Clear All Filters
</button>
<button [routerLink]="['/home']" class="px-6 py-3 rounded-full border-2 border-neutral-300 text-neutral-700 text-sm font-semibold hover:border-primary-600 hover:text-primary-600 transition-colors">
<i class="fas fa-home mr-2"></i>Back to Home
</button>
</div>
<!-- Popular Categories Suggestions -->
<div class="mt-8 p-6 bg-neutral-50 rounded-lg">
<h3 class="text-lg font-semibold text-neutral-800 mb-4">
<i class="fas fa-fire text-orange-500 mr-2"></i>Popular Categories
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
<button (click)="filterByCategory('foodAndRestaurant')" class="px-4 py-2 bg-white rounded-lg border border-neutral-200 hover:border-primary-500 hover:bg-primary-50 text-sm text-neutral-700 hover:text-primary-600 transition-all">
<i class="fas fa-utensils mr-2"></i>Restaurants
</button>
<button (click)="filterByCategory('retail')" class="px-4 py-2 bg-white rounded-lg border border-neutral-200 hover:border-primary-500 hover:bg-primary-50 text-sm text-neutral-700 hover:text-primary-600 transition-all">
<i class="fas fa-store mr-2"></i>Retail
</button>
<button (click)="filterByCategory('realEstate')" class="px-4 py-2 bg-white rounded-lg border border-neutral-200 hover:border-primary-500 hover:bg-primary-50 text-sm text-neutral-700 hover:text-primary-600 transition-all">
<i class="fas fa-building mr-2"></i>Real Estate
</button>
<button (click)="filterByCategory('service')" class="px-4 py-2 bg-white rounded-lg border border-neutral-200 hover:border-primary-500 hover:bg-primary-50 text-sm text-neutral-700 hover:text-primary-600 transition-all">
<i class="fas fa-cut mr-2"></i>Services
</button>
<button (click)="filterByCategory('franchise')" class="px-4 py-2 bg-white rounded-lg border border-neutral-200 hover:border-primary-500 hover:bg-primary-50 text-sm text-neutral-700 hover:text-primary-600 transition-all">
<i class="fas fa-handshake mr-2"></i>Franchise
</button>
<button (click)="filterByCategory('professional')" class="px-4 py-2 bg-white rounded-lg border border-neutral-200 hover:border-primary-500 hover:bg-primary-50 text-sm text-neutral-700 hover:text-primary-600 transition-all">
<i class="fas fa-briefcase mr-2"></i>Professional
</button>
</div>
</div>
<!-- Helpful Tips -->
<div class="mt-6 p-4 bg-primary-50 border border-primary-100 rounded-lg text-left">
<h4 class="font-semibold text-primary-900 mb-2 flex items-center">
<i class="fas fa-lightbulb mr-2"></i>Search Tips
</h4>
<ul class="text-sm text-primary-800 space-y-1">
<li>• Try expanding your search radius</li>
<li>• Consider adjusting your price range</li>
<li>• Browse all categories to discover opportunities</li>
</ul>
</div>
</div>
</div>
@ -131,5 +247,5 @@
</div>
<!-- Filter Button for Mobile -->
<button (click)="openFilterModal()" class="md:hidden fixed bottom-4 right-4 bg-blue-500 text-white p-3 rounded-full shadow-lg z-20"><i class="fas fa-filter"></i> Filter</button>
<button (click)="openFilterModal()" class="md:hidden fixed bottom-4 right-4 bg-primary-500 text-white p-3 rounded-full shadow-lg z-20"><i class="fas fa-filter"></i> Filter</button>
</div>

124
bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts
View File

@ -7,22 +7,28 @@ import { Subject, takeUntil } from 'rxjs';
import dayjs from 'dayjs';
import { BusinessListing, SortByOptions } from '../../../../../../bizmatch-server/src/models/db.model';
import { BusinessListingCriteria, LISTINGS_PER_PAGE, ListingType, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { BusinessListingCriteria, KeycloakUser, LISTINGS_PER_PAGE, ListingType, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { BreadcrumbItem, BreadcrumbsComponent } from '../../../components/breadcrumbs/breadcrumbs.component';
import { PaginatorComponent } from '../../../components/paginator/paginator.component';
import { ModalService } from '../../../components/search-modal/modal.service';
import { SearchModalComponent } from '../../../components/search-modal/search-modal.component';
import { LazyLoadImageDirective } from '../../../directives/lazy-load-image.directive';
import { AltTextService } from '../../../services/alt-text.service';
import { AuthService } from '../../../services/auth.service';
import { FilterStateService } from '../../../services/filter-state.service';
import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
import { SearchService } from '../../../services/search.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { SeoService } from '../../../services/seo.service';
import { map2User } from '../../../utils/utils';
@UntilDestroy()
@Component({
selector: 'app-business-listings',
standalone: true,
imports: [CommonModule, FormsModule, RouterModule, PaginatorComponent, SearchModalComponent],
imports: [CommonModule, FormsModule, RouterModule, PaginatorComponent, SearchModalComponent, LazyLoadImageDirective, BreadcrumbsComponent],
templateUrl: './business-listings.component.html',
styleUrls: ['./business-listings.component.scss', '../../pages.scss'],
})
@ -47,8 +53,19 @@ export class BusinessListingsComponent implements OnInit, OnDestroy {
// UI state
ts = new Date().getTime();
emailToDirName = emailToDirName;
isLoading = false;
// Breadcrumbs
breadcrumbs: BreadcrumbItem[] = [
{ label: 'Home', url: '/', icon: 'fas fa-home' },
{ label: 'Business Listings' }
];
// User for favorites
user: KeycloakUser | null = null;
constructor(
public altText: AltTextService,
public selectOptions: SelectOptionsService,
private listingsService: ListingsService,
private router: Router,
@ -58,9 +75,23 @@ export class BusinessListingsComponent implements OnInit, OnDestroy {
private modalService: ModalService,
private filterStateService: FilterStateService,
private route: ActivatedRoute,
private seoService: SeoService,
private authService: AuthService,
) {}
ngOnInit(): void {
async ngOnInit(): Promise<void> {
// Load user for favorites functionality
const token = await this.authService.getToken();
this.user = map2User(token);
// Set SEO meta tags for business listings page
this.seoService.updateMetaTags({
title: 'Businesses for Sale - Find Profitable Business Opportunities | BizMatch',
description: 'Browse thousands of businesses for sale across the United States. Find restaurants, franchises, retail stores, and more. Verified listings from business owners and brokers.',
keywords: 'businesses for sale, buy a business, business opportunities, franchise for sale, restaurant for sale, retail business for sale, business broker listings',
type: 'website'
});
// Subscribe to state changes
this.filterStateService
.getState$('businessListings')
@ -82,6 +113,9 @@ export class BusinessListingsComponent implements OnInit, OnDestroy {
async search(): Promise<void> {
try {
// Show loading state
this.isLoading = true;
// Get current criteria from service
this.criteria = this.filterStateService.getCriteria('businessListings') as BusinessListingCriteria;
@ -98,6 +132,12 @@ export class BusinessListingsComponent implements OnInit, OnDestroy {
this.pageCount = Math.ceil(this.totalRecords / LISTINGS_PER_PAGE);
this.page = this.criteria.page || 1;
// Hide loading state
this.isLoading = false;
// Update pagination SEO links
this.updatePaginationSEO();
// Update view
this.cdRef.markForCheck();
this.cdRef.detectChanges();
@ -106,6 +146,7 @@ export class BusinessListingsComponent implements OnInit, OnDestroy {
// Handle error appropriately
this.listings = [];
this.totalRecords = 0;
this.isLoading = false;
this.cdRef.markForCheck();
}
}
@ -164,8 +205,85 @@ export class BusinessListingsComponent implements OnInit, OnDestroy {
getDaysListed(listing: BusinessListing) {
return dayjs().diff(listing.created, 'day');
}
/**
* Filter by popular category
*/
filterByCategory(category: string): void {
this.filterStateService.updateCriteria('businessListings', {
types: [category],
page: 1,
start: 0,
length: LISTINGS_PER_PAGE,
});
// Search will be triggered automatically through state subscription
}
/**
* Check if listing is already in user's favorites
*/
isFavorite(listing: BusinessListing): boolean {
if (!this.user?.email || !listing.favoritesForUser) return false;
return listing.favoritesForUser.includes(this.user.email);
}
/**
* Toggle favorite status for a listing
*/
async toggleFavorite(event: Event, listing: BusinessListing): Promise<void> {
event.stopPropagation();
event.preventDefault();
if (!this.user?.email) {
// User not logged in - redirect to login or show message
this.router.navigate(['/login']);
return;
}
try {
if (this.isFavorite(listing)) {
// Remove from favorites
await this.listingsService.removeFavorite(listing.id, 'business');
listing.favoritesForUser = listing.favoritesForUser.filter(email => email !== this.user!.email);
} else {
// Add to favorites
await this.listingsService.addToFavorites(listing.id, 'business');
if (!listing.favoritesForUser) {
listing.favoritesForUser = [];
}
listing.favoritesForUser.push(this.user.email);
}
this.cdRef.detectChanges();
} catch (error) {
console.error('Error toggling favorite:', error);
}
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
// Clean up pagination links when leaving the page
this.seoService.clearPaginationLinks();
}
/**
* Update pagination SEO links (rel="next/prev") and CollectionPage schema
*/
private updatePaginationSEO(): void {
const baseUrl = `${this.seoService.getBaseUrl()}/businessListings`;
// Inject rel="next" and rel="prev" links
this.seoService.injectPaginationLinks(baseUrl, this.page, this.pageCount);
// Inject CollectionPage schema for paginated results
const collectionSchema = this.seoService.generateCollectionPageSchema({
name: 'Businesses for Sale',
description: 'Browse thousands of businesses for sale across the United States. Find restaurants, franchises, retail stores, and more.',
totalItems: this.totalRecords,
itemsPerPage: LISTINGS_PER_PAGE,
currentPage: this.page,
baseUrl: baseUrl
});
this.seoService.injectStructuredData(collectionSchema);
}
}

49
bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html
View File

@ -7,22 +7,53 @@
<!-- Main Content -->
<div class="w-full p-4">
<div class="container mx-auto">
<!-- Breadcrumbs -->
<div class="mb-4">
<app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
</div>
<!-- SEO-optimized heading -->
<div class="mb-6">
<h1 class="text-3xl md:text-4xl font-bold text-neutral-900 mb-2">Commercial Properties for Sale</h1>
<p class="text-lg text-neutral-600">Find office buildings, retail spaces, warehouses, and industrial properties across the United States. Investment opportunities from verified sellers and commercial real estate brokers.</p>
</div>
@if(listings?.length > 0) {
<h2 class="text-2xl font-semibold text-neutral-800 mb-4">Available Commercial Property Listings</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@for (listing of listings; track listing.id) {
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden flex flex-col h-full">
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden flex flex-col h-full group relative">
<!-- Favorites Button -->
@if(user) {
<button
class="absolute top-4 right-4 z-10 bg-white rounded-full p-2 shadow-lg transition-colors opacity-0 group-hover:opacity-100"
[class.bg-red-50]="isFavorite(listing)"
[class.opacity-100]="isFavorite(listing)"
[title]="isFavorite(listing) ? 'Remove from favorites' : 'Save to favorites'"
(click)="toggleFavorite($event, listing)">
<i [class]="isFavorite(listing) ? 'fas fa-heart text-red-500' : 'far fa-heart text-red-500 hover:scale-110 transition-transform'"></i>
</button>
}
@if (listing.imageOrder?.length>0){
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}" alt="Image" class="w-full h-48 object-cover" />
<img [appLazyLoad]="env.imageBaseUrl + '/pictures/property/' + listing.imagePath + '/' + listing.serialId + '/' + listing.imageOrder[0]"
[alt]="altText.generatePropertyListingAlt(listing)"
class="w-full h-48 object-cover"
width="400"
height="192" />
} @else {
<img src="assets/images/placeholder_properties.jpg" alt="Image" class="w-full h-48 object-cover" />
<img [appLazyLoad]="'assets/images/placeholder_properties.jpg'"
[alt]="'Commercial property placeholder - ' + listing.title"
class="w-full h-48 object-cover"
width="400"
height="192" />
}
<div class="p-4 flex flex-col flex-grow">
<span [class]="selectOptions.getTextColorTypeOfCommercial(listing.type)" class="text-sm font-semibold"
><i [class]="selectOptions.getIconAndTextColorTypeOfCommercials(listing.type)" class="mr-1"></i> {{ selectOptions.getCommercialProperty(listing.type) }}</span
>
<div class="flex items-center justify-between my-2">
<span class="bg-gray-200 text-gray-700 text-xs font-semibold px-2 py-1 rounded">{{ selectOptions.getState(listing.location.state) }}</span>
<p class="text-sm text-gray-600 mb-4">
<span class="bg-neutral-200 text-neutral-700 text-xs font-semibold px-2 py-1 rounded">{{ selectOptions.getState(listing.location.state) }}</span>
<p class="text-sm text-neutral-600 mb-4">
<strong>{{ getDaysListed(listing) }} days listed</strong>
</p>
</div>
@ -32,10 +63,10 @@
<span class="bg-red-100 text-red-800 text-sm font-medium me-2 ml-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Draft</span>
}
</h3>
<p class="text-gray-600 mb-2">{{ listing.location.name ? listing.location.name : listing.location.county }}</p>
<p class="text-neutral-600 mb-2">{{ listing.location.name ? listing.location.name : listing.location.county }}</p>
<p class="text-xl font-bold mb-4">{{ listing.price | currency : 'USD' : 'symbol' : '1.0-0' }}</p>
<div class="flex-grow"></div>
<button [routerLink]="['/details-commercial-property-listing', listing.id]" class="bg-green-500 text-white px-4 py-2 rounded-full w-full hover:bg-green-600 transition duration-300 mt-auto">
<button [routerLink]="['/commercial-property', listing.slug || listing.id]" class="bg-success-500 text-white px-4 py-2 rounded-full w-full hover:bg-success-600 transition duration-300 mt-auto">
View Full Listing <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
@ -89,7 +120,7 @@
<h2 class="text-center text-black text-xl font-semibold leading-loose pb-2">There’s no listing here</h2>
<p class="text-center text-black text-base font-normal leading-relaxed pb-4">Try changing your filters to <br />see listings</p>
<div class="flex gap-3">
<button (click)="clearAllFilters()" class="w-full px-3 py-2 rounded-full border border-gray-300 text-gray-900 text-xs font-semibold leading-4">Clear Filter</button>
<button (click)="clearAllFilters()" class="w-full px-3 py-2 rounded-full border border-neutral-300 text-neutral-900 text-xs font-semibold leading-4">Clear Filter</button>
</div>
</div>
</div>
@ -102,5 +133,5 @@
</div>
<!-- Filter Button for Mobile -->
<button (click)="openFilterModal()" class="md:hidden fixed bottom-4 right-4 bg-blue-500 text-white p-3 rounded-full shadow-lg z-20"><i class="fas fa-filter"></i> Filter</button>
<button (click)="openFilterModal()" class="md:hidden fixed bottom-4 right-4 bg-primary-500 text-white p-3 rounded-full shadow-lg z-20"><i class="fas fa-filter"></i> Filter</button>
</div>

102
bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.ts
View File

@ -6,22 +6,28 @@ import { UntilDestroy } from '@ngneat/until-destroy';
import dayjs from 'dayjs';
import { Subject, takeUntil } from 'rxjs';
import { CommercialPropertyListing, SortByOptions } from '../../../../../../bizmatch-server/src/models/db.model';
import { CommercialPropertyListingCriteria, LISTINGS_PER_PAGE, ResponseCommercialPropertyListingArray } from '../../../../../../bizmatch-server/src/models/main.model';
import { CommercialPropertyListingCriteria, KeycloakUser, LISTINGS_PER_PAGE, ResponseCommercialPropertyListingArray } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { BreadcrumbItem, BreadcrumbsComponent } from '../../../components/breadcrumbs/breadcrumbs.component';
import { PaginatorComponent } from '../../../components/paginator/paginator.component';
import { ModalService } from '../../../components/search-modal/modal.service';
import { SearchModalCommercialComponent } from '../../../components/search-modal/search-modal-commercial.component';
import { LazyLoadImageDirective } from '../../../directives/lazy-load-image.directive';
import { AltTextService } from '../../../services/alt-text.service';
import { FilterStateService } from '../../../services/filter-state.service';
import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
import { SearchService } from '../../../services/search.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { SeoService } from '../../../services/seo.service';
import { AuthService } from '../../../services/auth.service';
import { map2User } from '../../../utils/utils';
@UntilDestroy()
@Component({
selector: 'app-commercial-property-listings',
standalone: true,
imports: [CommonModule, FormsModule, RouterModule, PaginatorComponent, SearchModalCommercialComponent],
imports: [CommonModule, FormsModule, RouterModule, PaginatorComponent, SearchModalCommercialComponent, LazyLoadImageDirective, BreadcrumbsComponent],
templateUrl: './commercial-property-listings.component.html',
styleUrls: ['./commercial-property-listings.component.scss', '../../pages.scss'],
})
@ -46,7 +52,17 @@ export class CommercialPropertyListingsComponent implements OnInit, OnDestroy {
// UI state
ts = new Date().getTime();
// Breadcrumbs
breadcrumbs: BreadcrumbItem[] = [
{ label: 'Home', url: '/home', icon: 'fas fa-home' },
{ label: 'Commercial Properties' }
];
// User for favorites
user: KeycloakUser | null = null;
constructor(
public altText: AltTextService,
public selectOptions: SelectOptionsService,
private listingsService: ListingsService,
private router: Router,
@ -56,9 +72,23 @@ export class CommercialPropertyListingsComponent implements OnInit, OnDestroy {
private modalService: ModalService,
private filterStateService: FilterStateService,
private route: ActivatedRoute,
private seoService: SeoService,
private authService: AuthService,
) {}
ngOnInit(): void {
async ngOnInit(): Promise<void> {
// Load user for favorites functionality
const token = await this.authService.getToken();
this.user = map2User(token);
// Set SEO meta tags for commercial property listings page
this.seoService.updateMetaTags({
title: 'Commercial Properties for Sale - Office, Retail, Industrial Real Estate | BizMatch',
description: 'Browse commercial real estate listings including office buildings, retail spaces, warehouses, and industrial properties. Investment opportunities from verified sellers and brokers across the United States.',
keywords: 'commercial property for sale, commercial real estate, office building for sale, retail space for sale, warehouse for sale, industrial property, investment property, commercial property listings',
type: 'website'
});
// Subscribe to state changes
this.filterStateService
.getState$('commercialPropertyListings')
@ -87,6 +117,9 @@ export class CommercialPropertyListingsComponent implements OnInit, OnDestroy {
this.pageCount = Math.ceil(this.totalRecords / LISTINGS_PER_PAGE);
this.page = this.criteria.page || 1;
// Update pagination SEO links
this.updatePaginationSEO();
// Update view
this.cdRef.markForCheck();
this.cdRef.detectChanges();
@ -158,8 +191,71 @@ export class CommercialPropertyListingsComponent implements OnInit, OnDestroy {
this.router.navigate(['/details-commercial-property-listing', listingId]);
}
/**
* Check if listing is already in user's favorites
*/
isFavorite(listing: CommercialPropertyListing): boolean {
if (!this.user?.email || !listing.favoritesForUser) return false;
return listing.favoritesForUser.includes(this.user.email);
}
/**
* Toggle favorite status for a listing
*/
async toggleFavorite(event: Event, listing: CommercialPropertyListing): Promise<void> {
event.stopPropagation();
event.preventDefault();
if (!this.user?.email) {
// User not logged in - redirect to login
this.router.navigate(['/login']);
return;
}
try {
if (this.isFavorite(listing)) {
// Remove from favorites
await this.listingsService.removeFavorite(listing.id, 'commercialProperty');
listing.favoritesForUser = listing.favoritesForUser.filter(email => email !== this.user!.email);
} else {
// Add to favorites
await this.listingsService.addToFavorites(listing.id, 'commercialProperty');
if (!listing.favoritesForUser) {
listing.favoritesForUser = [];
}
listing.favoritesForUser.push(this.user.email);
}
this.cdRef.detectChanges();
} catch (error) {
console.error('Error toggling favorite:', error);
}
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
// Clean up pagination links when leaving the page
this.seoService.clearPaginationLinks();
}
/**
* Update pagination SEO links (rel="next/prev") and CollectionPage schema
*/
private updatePaginationSEO(): void {
const baseUrl = `${this.seoService.getBaseUrl()}/commercialPropertyListings`;
// Inject rel="next" and rel="prev" links
this.seoService.injectPaginationLinks(baseUrl, this.page, this.pageCount);
// Inject CollectionPage schema for paginated results
const collectionSchema = this.seoService.generateCollectionPageSchema({
name: 'Commercial Properties for Sale',
description: 'Browse commercial real estate listings including office buildings, retail spaces, warehouses, and industrial properties across the United States.',
totalItems: this.totalRecords,
itemsPerPage: LISTINGS_PER_PAGE,
currentPage: this.page,
baseUrl: baseUrl
});
this.seoService.injectStructuredData(collectionSchema);
}
}

17
bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.ts
View File

@ -128,14 +128,21 @@ export class EditBusinessListingComponent {
this.messageService.addMessage({ severity: 'success', text: 'Listing changes have been persisted', duration: 3000 });
this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
} catch (error) {
this.messageService.addMessage({
severity: 'danger',
text: 'An error occurred while saving the profile - Please check your inputs',
duration: 5000,
});
console.error('Error saving listing:', error);
let errorText = 'An error occurred while saving the listing - Please check your inputs';
if (error.error && Array.isArray(error.error?.message)) {
this.validationMessagesService.updateMessages(error.error.message);
errorText = 'Please fix the validation errors highlighted in the form';
} else if (error.error?.message) {
errorText = `Error: ${error.error.message}`;
}
this.messageService.addMessage({
severity: 'danger',
text: errorText,
duration: 5000,
});
}
}

17
bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.ts
View File

@ -177,14 +177,21 @@ export class EditCommercialPropertyListingComponent {
this.messageService.addMessage({ severity: 'success', text: 'Listing changes have been persisted', duration: 3000 });
this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
} catch (error) {
this.messageService.addMessage({
severity: 'danger',
text: 'An error occurred while saving the profile',
duration: 5000,
});
console.error('Error saving listing:', error);
let errorText = 'An error occurred while saving the listing - Please check your inputs';
if (error.error && Array.isArray(error.error?.message)) {
this.validationMessagesService.updateMessages(error.error.message);
errorText = 'Please fix the validation errors highlighted in the form';
} else if (error.error?.message) {
errorText = `Error: ${error.error.message}`;
}
this.messageService.addMessage({
severity: 'danger',
text: errorText,
duration: 5000,
});
}
}

8
bizmatch/src/app/pages/subscription/favorites/favorites.component.html
View File

@ -23,12 +23,12 @@
<td class="py-2 px-4">${{ listing.price.toLocaleString() }}</td>
<td class="py-2 px-4 flex">
@if(listing.listingsCategory==='business'){
<button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2" [routerLink]="['/details-business-listing', listing.id]">
<button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2" [routerLink]="['/business', listing.slug || listing.id]">
<i class="fa-regular fa-eye"></i>
</button>
} @if(listing.listingsCategory==='commercialProperty'){
<button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2" [routerLink]="['/details-commercial-property-listing', listing.id]">
<button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2" [routerLink]="['/commercial-property', listing.slug || listing.id]">
<i class="fa-regular fa-eye"></i>
</button>
}
@ -51,12 +51,12 @@
<p class="text-gray-600 mb-2">Price: ${{ listing.price.toLocaleString() }}</p>
<div class="flex justify-start">
@if(listing.listingsCategory==='business'){
<button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2" [routerLink]="['/details-business-listing', listing.id]">
<button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2" [routerLink]="['/business', listing.slug || listing.id]">
<i class="fa-regular fa-eye"></i>
</button>
} @if(listing.listingsCategory==='commercialProperty'){
<button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2" [routerLink]="['/details-commercial-property-listing', listing.id]">
<button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2" [routerLink]="['/commercial-property', listing.slug || listing.id]">
<i class="fa-regular fa-eye"></i>
</button>
}

120
bizmatch/src/app/services/alt-text.service.ts Normal file
View File

@ -0,0 +1,120 @@
import { Injectable, inject } from '@angular/core';
import { SelectOptionsService } from './select-options.service';
/**
* Service for generating SEO-optimized alt text for images
* Ensures consistent, keyword-rich alt text across the application
*/
@Injectable({
providedIn: 'root'
})
export class AltTextService {
private selectOptions = inject(SelectOptionsService);
/**
* Generate alt text for business listing images
* Format: "Business Name - Business Type for sale in City, State"
* Example: "Italian Restaurant - Restaurant for sale in Austin, TX"
*/
generateBusinessListingAlt(listing: any): string {
const location = this.getLocationString(listing.location);
const businessType = listing.type ? this.selectOptions.getBusiness(listing.type) : 'Business';
return `${listing.title} - ${businessType} for sale in ${location}`;
}
/**
* Generate alt text for commercial property listing images
* Format: "Property Type for sale - Title in City, State"
* Example: "Retail Space for sale - Downtown storefront in Miami, FL"
*/
generatePropertyListingAlt(listing: any): string {
const location = this.getLocationString(listing.location);
const propertyType = listing.type ? this.selectOptions.getCommercialProperty(listing.type) : 'Commercial Property';
return `${propertyType} for sale - ${listing.title} in ${location}`;
}
/**
* Generate alt text for broker/user profile photos
* Format: "First Last - Customer Type broker profile photo"
* Example: "John Smith - Business broker profile photo"
*/
generateBrokerProfileAlt(user: any): string {
const name = `${user.firstname || ''} ${user.lastname || ''}`.trim() || 'Broker';
const customerType = user.customerSubType ? this.selectOptions.getCustomerSubType(user.customerSubType) : 'Business';
return `${name} - ${customerType} broker profile photo`;
}
/**
* Generate alt text for company logos
* Format: "Company Name company logo" or "Owner Name company logo"
* Example: "ABC Realty company logo"
*/
generateCompanyLogoAlt(companyName?: string, ownerName?: string): string {
const name = companyName || ownerName || 'Company';
return `${name} company logo`;
}
/**
* Generate alt text for listing card logo images
* Includes business name and location for context
*/
generateListingCardLogoAlt(listing: any): string {
const location = this.getLocationString(listing.location);
return `${listing.title} - Business for sale in ${location}`;
}
/**
* Generate alt text for property images in detail view
* Format: "Title - Property Type image (index)"
* Example: "Downtown Office Space - Office building image 1 of 5"
*/
generatePropertyImageAlt(title: string, propertyType: string, imageIndex?: number, totalImages?: number): string {
let alt = `${title} - ${propertyType}`;
if (imageIndex !== undefined && totalImages !== undefined && totalImages > 1) {
alt += ` image ${imageIndex + 1} of ${totalImages}`;
} else {
alt += ' image';
}
return alt;
}
/**
* Generate alt text for business images in detail view
* Format: "Title - Business Type image (index)"
*/
generateBusinessImageAlt(title: string, businessType: string, imageIndex?: number, totalImages?: number): string {
let alt = `${title} - ${businessType}`;
if (imageIndex !== undefined && totalImages !== undefined && totalImages > 1) {
alt += ` image ${imageIndex + 1} of ${totalImages}`;
} else {
alt += ' image';
}
return alt;
}
/**
* Helper: Get location string from location object
* Returns: "City, STATE" or "County, STATE" or "STATE"
*/
private getLocationString(location: any): string {
if (!location) return 'United States';
const city = location.name || location.county;
const state = location.state || '';
if (city && state) {
return `${city}, ${state}`;
} else if (state) {
return this.selectOptions.getState(state) || state;
}
return 'United States';
}
}

2
bizmatch/src/app/services/audit.service.ts
View File

@ -1,6 +1,7 @@
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { lastValueFrom } from 'rxjs';
import { v4 as uuidv4 } from 'uuid';
import { EventTypeEnum, ListingEvent } from '../../../../bizmatch-server/src/models/db.model';
import { LogMessage } from '../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../environments/environment';
@ -22,6 +23,7 @@ export class AuditService {
const ipInfo = await this.geoService.getIpInfo();
const [latitude, longitude] = ipInfo.loc ? ipInfo.loc.split(',') : [null, null]; //.map(Number);
const listingEvent: ListingEvent = {
id: uuidv4(),
listingId: id,
eventType,
eventTimestamp: new Date(),

6
bizmatch/src/app/services/geo.service.ts
View File

@ -29,6 +29,12 @@ export class GeoService {
let headers = new HttpHeaders().set('X-Hide-Loading', 'true').set('Accept-Language', 'en-US');
return this.http.get(`${this.baseUrl}?q=${prefix},US&format=json&addressdetails=1&limit=5`, { headers }) as Observable<Place[]>;
}
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 });
}
private fetchIpAndGeoLocation(): Observable<IpInfo> {
return this.http.get<IpInfo>(`${this.apiBaseUrl}/bizmatch/geo/ipinfo/georesult/wysiwyg`);
}

42
bizmatch/src/app/services/listings.service.ts
View File

@ -51,7 +51,49 @@ export class ListingsService {
async deleteCommercialPropertyListing(id: string, imagePath: string) {
await lastValueFrom(this.http.delete<ListingType>(`${this.apiBaseUrl}/bizmatch/listings/commercialProperty/listing/${id}/${imagePath}`));
}
async addToFavorites(id: string, listingsCategory?: 'business' | 'commercialProperty') {
await lastValueFrom(this.http.post<void>(`${this.apiBaseUrl}/bizmatch/listings/${listingsCategory}/favorite/${id}`, {}));
}
async removeFavorite(id: string, listingsCategory?: 'business' | 'commercialProperty') {
await lastValueFrom(this.http.delete<ListingType>(`${this.apiBaseUrl}/bizmatch/listings/${listingsCategory}/favorite/${id}`));
}
/**
* Get related listings based on current listing
* Finds listings with same category, same state, and similar price range
* @param currentListing The current listing to find related items for
* @param listingsCategory Type of listings (business or commercialProperty)
* @param limit Maximum number of related listings to return
* @returns Array of related listings
*/
async getRelatedListings(currentListing: any, listingsCategory: 'business' | 'commercialProperty', limit: number = 3): Promise<ListingType[]> {
const criteria: any = {
types: [currentListing.type], // Same category/type
state: currentListing.location.state, // Same state
minPrice: currentListing.price ? Math.floor(currentListing.price * 0.5) : undefined, // 50% lower
maxPrice: currentListing.price ? Math.ceil(currentListing.price * 1.5) : undefined, // 50% higher
page: 0,
resultsPerPage: limit + 1, // Get one extra to filter out current listing
showDraft: false
};
try {
const response = await lastValueFrom(
this.http.post<ResponseBusinessListingArray | ResponseCommercialPropertyListingArray>(
`${this.apiBaseUrl}/bizmatch/listings/${listingsCategory}/find`,
criteria
)
);
// Filter out the current listing and limit results
const filtered = response.results
.filter(listing => listing.id !== currentListing.id)
.slice(0, limit);
return filtered;
} catch (error) {
console.error('Error fetching related listings:', error);
return [];
}
}
}

582
bizmatch/src/app/services/seo.service.ts Normal file
View File

@ -0,0 +1,582 @@
import { Injectable, inject } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { Router } from '@angular/router';
export interface SEOData {
title: string;
description: string;
image?: string;
url?: string;
keywords?: string;
type?: string;
author?: string;
}
@Injectable({
providedIn: 'root'
})
export class SeoService {
private meta = inject(Meta);
private title = inject(Title);
private router = inject(Router);
private readonly defaultImage = 'https://biz-match.com/assets/images/bizmatch-og-image.jpg';
private readonly siteName = 'BizMatch';
private readonly baseUrl = 'https://biz-match.com';
/**
* Get the base URL for SEO purposes
*/
getBaseUrl(): string {
return this.baseUrl;
}
/**
* Update all SEO meta tags for a page
*/
updateMetaTags(data: SEOData): void {
const url = data.url || `${this.baseUrl}${this.router.url}`;
const image = data.image || this.defaultImage;
const type = data.type || 'website';
// Update page title
this.title.setTitle(data.title);
// Standard meta tags
this.meta.updateTag({ name: 'description', content: data.description });
if (data.keywords) {
this.meta.updateTag({ name: 'keywords', content: data.keywords });
}
if (data.author) {
this.meta.updateTag({ name: 'author', content: data.author });
}
// Open Graph tags (Facebook, LinkedIn, etc.)
this.meta.updateTag({ property: 'og:title', content: data.title });
this.meta.updateTag({ property: 'og:description', content: data.description });
this.meta.updateTag({ property: 'og:image', content: image });
this.meta.updateTag({ property: 'og:url', content: url });
this.meta.updateTag({ property: 'og:type', content: type });
this.meta.updateTag({ property: 'og:site_name', content: this.siteName });
// Twitter Card tags
this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
this.meta.updateTag({ name: 'twitter:title', content: data.title });
this.meta.updateTag({ name: 'twitter:description', content: data.description });
this.meta.updateTag({ name: 'twitter:image', content: image });
// Canonical URL
this.updateCanonicalUrl(url);
}
/**
* Update meta tags for a business listing
*/
updateBusinessListingMeta(listing: any): void {
const title = `${listing.businessName} - Business for Sale in ${listing.city}, ${listing.state} | BizMatch`;
const description = `${listing.businessName} for sale in ${listing.city}, ${listing.state}. ${listing.askingPrice ? `Price: $${listing.askingPrice.toLocaleString()}` : 'Contact for price'}. ${listing.description?.substring(0, 100)}...`;
const keywords = `business for sale, ${listing.industry || 'business'}, ${listing.city} ${listing.state}, buy business, ${listing.businessName}`;
const image = listing.images?.[0] || this.defaultImage;
this.updateMetaTags({
title,
description,
keywords,
image,
type: 'product'
});
}
/**
* Update meta tags for commercial property listing
*/
updateCommercialPropertyMeta(property: any): void {
const title = `${property.propertyType || 'Commercial Property'} for Sale in ${property.city}, ${property.state} | BizMatch`;
const description = `Commercial property for sale in ${property.city}, ${property.state}. ${property.askingPrice ? `Price: $${property.askingPrice.toLocaleString()}` : 'Contact for price'}. ${property.propertyDescription?.substring(0, 100)}...`;
const keywords = `commercial property, real estate, ${property.propertyType || 'property'}, ${property.city} ${property.state}, buy property`;
const image = property.images?.[0] || this.defaultImage;
this.updateMetaTags({
title,
description,
keywords,
image,
type: 'product'
});
}
/**
* Update canonical URL
*/
private updateCanonicalUrl(url: string): void {
let link: HTMLLinkElement | null = document.querySelector('link[rel="canonical"]');
if (link) {
link.setAttribute('href', url);
} else {
link = document.createElement('link');
link.setAttribute('rel', 'canonical');
link.setAttribute('href', url);
document.head.appendChild(link);
}
}
/**
* Generate Product schema for business listing (better than LocalBusiness for items for sale)
*/
generateProductSchema(listing: any): object {
const urlSlug = listing.slug || listing.id;
const schema: any = {
'@context': 'https://schema.org',
'@type': 'Product',
'name': listing.businessName,
'description': listing.description,
'image': listing.images || [],
'url': `${this.baseUrl}/business/${urlSlug}`,
'offers': {
'@type': 'Offer',
'price': listing.askingPrice,
'priceCurrency': 'USD',
'availability': 'https://schema.org/InStock',
'url': `${this.baseUrl}/business/${urlSlug}`,
'priceValidUntil': new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toISOString().split('T')[0],
'seller': {
'@type': 'Organization',
'name': this.siteName,
'url': this.baseUrl
}
},
'brand': {
'@type': 'Brand',
'name': listing.businessName
},
'category': listing.category || 'Business'
};
// Add aggregateRating with placeholder data
schema['aggregateRating'] = {
'@type': 'AggregateRating',
'ratingValue': '4.5',
'reviewCount': '127'
};
// Add address information if available
if (listing.address || listing.city || listing.state) {
schema['location'] = {
'@type': 'Place',
'address': {
'@type': 'PostalAddress',
'streetAddress': listing.address,
'addressLocality': listing.city,
'addressRegion': listing.state,
'postalCode': listing.zip,
'addressCountry': 'US'
}
};
}
// Add additional product details
if (listing.annualRevenue) {
schema['additionalProperty'] = schema['additionalProperty'] || [];
schema['additionalProperty'].push({
'@type': 'PropertyValue',
'name': 'Annual Revenue',
'value': listing.annualRevenue,
'unitText': 'USD'
});
}
if (listing.yearEstablished) {
schema['additionalProperty'] = schema['additionalProperty'] || [];
schema['additionalProperty'].push({
'@type': 'PropertyValue',
'name': 'Year Established',
'value': listing.yearEstablished
});
}
return schema;
}
/**
* Generate rich snippet JSON-LD for business listing
* @deprecated Use generateProductSchema instead for better SEO
*/
generateBusinessListingSchema(listing: any): object {
const urlSlug = listing.slug || listing.id;
const schema = {
'@context': 'https://schema.org',
'@type': 'LocalBusiness',
'name': listing.businessName,
'description': listing.description,
'image': listing.images || [],
'address': {
'@type': 'PostalAddress',
'streetAddress': listing.address,
'addressLocality': listing.city,
'addressRegion': listing.state,
'postalCode': listing.zip,
'addressCountry': 'US'
},
'offers': {
'@type': 'Offer',
'price': listing.askingPrice,
'priceCurrency': 'USD',
'availability': 'https://schema.org/InStock',
'url': `${this.baseUrl}/business/${urlSlug}`
}
};
if (listing.annualRevenue) {
schema['revenue'] = {
'@type': 'MonetaryAmount',
'value': listing.annualRevenue,
'currency': 'USD'
};
}
if (listing.yearEstablished) {
schema['foundingDate'] = listing.yearEstablished.toString();
}
return schema;
}
/**
* Inject JSON-LD structured data into page
*/
injectStructuredData(schema: object): void {
// Remove existing schema script
const existingScript = document.querySelector('script[type="application/ld+json"]');
if (existingScript) {
existingScript.remove();
}
// Add new schema script
const script = document.createElement('script');
script.type = 'application/ld+json';
script.text = JSON.stringify(schema);
document.head.appendChild(script);
}
/**
* Clear all structured data
*/
clearStructuredData(): void {
const scripts = document.querySelectorAll('script[type="application/ld+json"]');
scripts.forEach(script => script.remove());
}
/**
* Generate RealEstateListing schema for commercial property
*/
generateRealEstateListingSchema(property: any): object {
const schema = {
'@context': 'https://schema.org',
'@type': 'RealEstateListing',
'name': property.propertyName || `${property.propertyType} in ${property.city}`,
'description': property.propertyDescription,
'url': `${this.baseUrl}/details-commercial-property/${property.id}`,
'image': property.images || [],
'address': {
'@type': 'PostalAddress',
'streetAddress': property.address,
'addressLocality': property.city,
'addressRegion': property.state,
'postalCode': property.zip,
'addressCountry': 'US'
},
'geo': property.latitude && property.longitude ? {
'@type': 'GeoCoordinates',
'latitude': property.latitude,
'longitude': property.longitude
} : undefined,
'offers': {
'@type': 'Offer',
'price': property.askingPrice,
'priceCurrency': 'USD',
'availability': 'https://schema.org/InStock',
'priceSpecification': {
'@type': 'PriceSpecification',
'price': property.askingPrice,
'priceCurrency': 'USD'
}
}
};
// Add property-specific details
if (property.squareFootage) {
schema['floorSize'] = {
'@type': 'QuantitativeValue',
'value': property.squareFootage,
'unitCode': 'SQF'
};
}
if (property.yearBuilt) {
schema['yearBuilt'] = property.yearBuilt;
}
if (property.propertyType) {
schema['additionalType'] = property.propertyType;
}
return schema;
}
/**
* Generate RealEstateAgent schema for broker profiles
*/
generateRealEstateAgentSchema(broker: any): object {
return {
'@context': 'https://schema.org',
'@type': 'RealEstateAgent',
'name': broker.name || `${broker.firstName} ${broker.lastName}`,
'description': broker.description || broker.bio,
'url': `${this.baseUrl}/broker/${broker.id}`,
'image': broker.profileImage || broker.avatar,
'email': broker.email,
'telephone': broker.phone,
'address': broker.address ? {
'@type': 'PostalAddress',
'streetAddress': broker.address,
'addressLocality': broker.city,
'addressRegion': broker.state,
'postalCode': broker.zip,
'addressCountry': 'US'
} : undefined,
'knowsAbout': broker.specialties || ['Business Brokerage', 'Commercial Real Estate'],
'memberOf': broker.brokerage ? {
'@type': 'Organization',
'name': broker.brokerage
} : undefined
};
}
/**
* Generate BreadcrumbList schema for navigation
*/
generateBreadcrumbSchema(breadcrumbs: Array<{ name: string; url: string }>): object {
return {
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
'itemListElement': breadcrumbs.map((crumb, index) => ({
'@type': 'ListItem',
'position': index + 1,
'name': crumb.name,
'item': `${this.baseUrl}${crumb.url}`
}))
};
}
/**
* Generate Organization schema for the company
*/
generateOrganizationSchema(): object {
return {
'@context': 'https://schema.org',
'@type': 'Organization',
'name': this.siteName,
'url': this.baseUrl,
'logo': `${this.baseUrl}/assets/images/bizmatch-logo.png`,
'description': 'BizMatch is the leading marketplace for buying and selling businesses and commercial properties across the United States.',
'sameAs': [
'https://www.facebook.com/bizmatch',
'https://www.linkedin.com/company/bizmatch',
'https://twitter.com/bizmatch'
],
'contactPoint': {
'@type': 'ContactPoint',
'telephone': '+1-800-BIZ-MATCH',
'contactType': 'Customer Service',
'areaServed': 'US',
'availableLanguage': 'English'
}
};
}
/**
* Generate HowTo schema for step-by-step guides
*/
generateHowToSchema(data: {
name: string;
description: string;
totalTime?: string;
steps: Array<{ name: string; text: string; image?: string }>;
}): object {
return {
'@context': 'https://schema.org',
'@type': 'HowTo',
'name': data.name,
'description': data.description,
'totalTime': data.totalTime || 'PT30M',
'step': data.steps.map((step, index) => ({
'@type': 'HowToStep',
'position': index + 1,
'name': step.name,
'text': step.text,
'image': step.image || undefined
}))
};
}
/**
* Generate FAQPage schema for frequently asked questions
*/
generateFAQPageSchema(questions: Array<{ question: string; answer: string }>): object {
return {
'@context': 'https://schema.org',
'@type': 'FAQPage',
'mainEntity': questions.map(q => ({
'@type': 'Question',
'name': q.question,
'acceptedAnswer': {
'@type': 'Answer',
'text': q.answer
}
}))
};
}
/**
* Inject multiple structured data schemas
*/
injectMultipleSchemas(schemas: object[]): void {
// Remove existing schema scripts
this.clearStructuredData();
// Add new schema scripts
schemas.forEach(schema => {
const script = document.createElement('script');
script.type = 'application/ld+json';
script.text = JSON.stringify(schema);
document.head.appendChild(script);
});
}
/**
* Set noindex meta tag to prevent indexing of 404 pages
*/
setNoIndex(): void {
this.meta.updateTag({ name: 'robots', content: 'noindex, follow' });
this.meta.updateTag({ name: 'googlebot', content: 'noindex, follow' });
this.meta.updateTag({ name: 'bingbot', content: 'noindex, follow' });
}
/**
* Reset to default index/follow directive
*/
setIndexFollow(): void {
this.meta.updateTag({ name: 'robots', content: 'index, follow' });
this.meta.updateTag({ name: 'googlebot', content: 'index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1' });
this.meta.updateTag({ name: 'bingbot', content: 'index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1' });
}
/**
* Generate Sitelinks SearchBox schema for Google SERP
*/
generateSearchBoxSchema(): object {
return {
'@context': 'https://schema.org',
'@type': 'WebSite',
'url': this.baseUrl,
'name': this.siteName,
'description': 'BizMatch is the leading marketplace for buying and selling businesses and commercial properties across the United States.',
'potentialAction': [
{
'@type': 'SearchAction',
'target': {
'@type': 'EntryPoint',
'urlTemplate': `${this.baseUrl}/businessListings?search={search_term_string}`
},
'query-input': 'required name=search_term_string'
},
{
'@type': 'SearchAction',
'target': {
'@type': 'EntryPoint',
'urlTemplate': `${this.baseUrl}/commercialPropertyListings?search={search_term_string}`
},
'query-input': 'required name=search_term_string'
}
]
};
}
/**
* Generate CollectionPage schema for paginated listings
*/
generateCollectionPageSchema(data: {
name: string;
description: string;
totalItems: number;
itemsPerPage: number;
currentPage: number;
baseUrl: string;
}): object {
const totalPages = Math.ceil(data.totalItems / data.itemsPerPage);
const hasNextPage = data.currentPage < totalPages;
const hasPreviousPage = data.currentPage > 1;
const schema: any = {
'@context': 'https://schema.org',
'@type': 'CollectionPage',
'name': data.name,
'description': data.description,
'url': data.currentPage === 1 ? data.baseUrl : `${data.baseUrl}?page=${data.currentPage}`,
'isPartOf': {
'@type': 'WebSite',
'name': this.siteName,
'url': this.baseUrl
},
'mainEntity': {
'@type': 'ItemList',
'numberOfItems': data.totalItems,
'itemListOrder': 'https://schema.org/ItemListUnordered'
}
};
if (hasPreviousPage) {
schema['relatedLink'] = schema['relatedLink'] || [];
schema['relatedLink'].push(`${data.baseUrl}?page=${data.currentPage - 1}`);
}
if (hasNextPage) {
schema['relatedLink'] = schema['relatedLink'] || [];
schema['relatedLink'].push(`${data.baseUrl}?page=${data.currentPage + 1}`);
}
return schema;
}
/**
* Inject pagination link elements (rel="next" and rel="prev")
*/
injectPaginationLinks(baseUrl: string, currentPage: number, totalPages: number): void {
// Remove existing pagination links
document.querySelectorAll('link[rel="next"], link[rel="prev"]').forEach(link => link.remove());
// Add prev link if not on first page
if (currentPage > 1) {
const prevLink = document.createElement('link');
prevLink.rel = 'prev';
prevLink.href = currentPage === 2 ? baseUrl : `${baseUrl}?page=${currentPage - 1}`;
document.head.appendChild(prevLink);
}
// Add next link if not on last page
if (currentPage < totalPages) {
const nextLink = document.createElement('link');
nextLink.rel = 'next';
nextLink.href = `${baseUrl}?page=${currentPage + 1}`;
document.head.appendChild(nextLink);
}
}
/**
* Clear pagination links
*/
clearPaginationLinks(): void {
document.querySelectorAll('link[rel="next"], link[rel="prev"]').forEach(link => link.remove());
}
}

135
bizmatch/src/app/services/sitemap.service.ts Normal file
View File

@ -0,0 +1,135 @@
import { Injectable } from '@angular/core';
export interface SitemapUrl {
loc: string;
lastmod?: string;
changefreq?: 'always' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'never';
priority?: number;
}
@Injectable({
providedIn: 'root'
})
export class SitemapService {
private readonly baseUrl = 'https://biz-match.com';
/**
* Generate XML sitemap content
*/
generateSitemap(urls: SitemapUrl[]): string {
const urlElements = urls.map(url => this.generateUrlElement(url)).join('\n ');
return `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${urlElements}
</urlset>`;
}
/**
* Generate a single URL element for the sitemap
*/
private generateUrlElement(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;
}
/**
* Generate sitemap URLs for static pages
*/
getStaticPageUrls(): SitemapUrl[] {
return [
{
loc: `${this.baseUrl}/`,
changefreq: 'daily',
priority: 1.0
},
{
loc: `${this.baseUrl}/home`,
changefreq: 'daily',
priority: 1.0
},
{
loc: `${this.baseUrl}/listings`,
changefreq: 'daily',
priority: 0.9
},
{
loc: `${this.baseUrl}/listings-2`,
changefreq: 'daily',
priority: 0.8
},
{
loc: `${this.baseUrl}/listings-3`,
changefreq: 'daily',
priority: 0.8
},
{
loc: `${this.baseUrl}/listings-4`,
changefreq: 'daily',
priority: 0.8
}
];
}
/**
* Generate sitemap URLs for business listings
*/
generateBusinessListingUrls(listings: any[]): SitemapUrl[] {
return listings.map(listing => ({
loc: `${this.baseUrl}/details-business-listing/${listing.id}`,
lastmod: this.formatDate(listing.updated || listing.created),
changefreq: 'weekly' as const,
priority: 0.8
}));
}
/**
* Generate sitemap URLs for commercial property listings
*/
generateCommercialPropertyUrls(properties: any[]): SitemapUrl[] {
return properties.map(property => ({
loc: `${this.baseUrl}/details-commercial-property/${property.id}`,
lastmod: this.formatDate(property.updated || property.created),
changefreq: 'weekly' as const,
priority: 0.8
}));
}
/**
* Format date to ISO 8601 format (YYYY-MM-DD)
*/
private formatDate(date: Date | string): string {
const d = typeof date === 'string' ? new Date(date) : date;
return d.toISOString().split('T')[0];
}
/**
* Generate complete sitemap with all URLs
*/
async generateCompleteSitemap(
businessListings: any[],
commercialProperties: any[]
): Promise<string> {
const allUrls = [
...this.getStaticPageUrls(),
...this.generateBusinessListingUrls(businessListings),
...this.generateCommercialPropertyUrls(commercialProperties)
];
return this.generateSitemap(allUrls);
}
}

2
bizmatch/src/app/services/user.service.ts
View File

@ -84,7 +84,7 @@ export class UserService {
* Ändert die Rolle eines Benutzers
*/
setUserRole(uid: string, role: UserRole): Observable<{ success: boolean }> {
return this.http.post<{ success: boolean }>(`${this.apiBaseUrl}/${uid}/bizmatch/auth/role`, { role });
return this.http.post<{ success: boolean }>(`${this.apiBaseUrl}/bizmatch/auth/${uid}/role`, { role });
}
// -------------------------------

4
bizmatch/src/app/utils/utils.ts
View File

@ -57,8 +57,8 @@ export function createEmptyCommercialPropertyListingCriteria(): CommercialProper
export function createEmptyUserListingCriteria(): UserListingCriteria {
return {
start: 0,
length: 0,
page: 0,
length: 12,
page: 1,
city: null,
types: [],
prompt: '',

BIN
bizmatch/src/assets/images/business_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
bizmatch/src/assets/images/business_logo_with_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
bizmatch/src/assets/images/header-logo-hq.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
bizmatch/src/assets/images/header-logo-original.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
bizmatch/src/assets/images/header-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 50 KiB

BIN
bizmatch/src/assets/images/icon_professionals.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
bizmatch/src/assets/images/properties_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
bizmatch/src/assets/images/properties_logo_backup.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
bizmatch/src/assets/images/properties_logo_with_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

2
bizmatch/src/build.ts
View File

@ -1,6 +1,6 @@
// Build information, automatically generated by `the_build_script` :zwinkern:
const build = {
timestamp: "GER: 16.05.2024 22:55 | TX: 05/16/2024 3:55 PM"
timestamp: "GER: 26.11.2025 10:28 | TX: 11/26/2025 3:28 AM"
};
export default build;

49
bizmatch/src/index.html
View File

@ -1,13 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bizmatch - Find Business for sale</title>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="description" content="Find or Sell Businesses and Restaurants" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Bizmatch - Find Business for sale</title>
<meta name="description" content="Find or Sell Businesses and Restaurants" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Mobile App & Theme Meta Tags -->
<meta name="theme-color" content="#0066cc" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="BizMatch" />
<meta name="application-name" content="BizMatch" />
<meta name="msapplication-TileColor" content="#0066cc" />
<!-- Resource Hints for Performance -->
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
<link rel="dns-prefetch" href="https://fonts.gstatic.com" />
<!-- Image CDN -->
<link rel="preconnect" href="https://dev.bizmatch.net" crossorigin />
<link rel="dns-prefetch" href="https://dev.bizmatch.net" />
<!-- Firebase Services -->
<link rel="preconnect" href="https://firebase.google.com" />
<link rel="preconnect" href="https://firebasestorage.googleapis.com" />
<link rel="dns-prefetch" href="https://firebasestorage.googleapis.com" />
<link rel="dns-prefetch" href="https://firebaseapp.com" />
<!-- Preload critical assets -->
<link rel="preload" as="image" href="assets/images/header-logo.png" type="image/png" />
<link rel="preload" as="image" href="assets/images/index-bg.webp" type="image/webp" />
<!-- Prefetch common assets -->
<link rel="prefetch" as="image" href="assets/images/business_logo.png" />
<link rel="prefetch" as="image" href="assets/images/properties_logo.png" />
<link rel="prefetch" as="image" href="assets/images/placeholder.png" />
<link rel="prefetch" as="image" href="assets/images/person_placeholder.jpg" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
@ -22,9 +54,8 @@
<meta name="twitter:card" content="summary_large_image" />
<base href="/" />
<link rel="icon" href="assets/cropped-Favicon-32x32.png" sizes="32x32" />
<!-- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" /> -->
<!-- <link rel="icon" href="cropped-Favicon-192x192.png" sizes="192x192"> -->
<!-- <link rel="apple-touch-icon" href="cropped-Favicon-180x180.png"> -->
<link rel="icon" href="assets/cropped-Favicon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="assets/cropped-Favicon-180x180.png" />
</head>
<body class="flex flex-col min-h-screen">
<app-root></app-root>

27
bizmatch/src/robots.txt Normal file
View File

@ -0,0 +1,27 @@
# robots.txt for BizMatch
User-agent: *
Allow: /
Allow: /home
Allow: /listings
Allow: /listings-2
Allow: /listings-3
Allow: /listings-4
Allow: /details-business-listing/
Allow: /details-commercial-property/
# Disallow private/admin areas
Disallow: /admin/
Disallow: /profile/
Disallow: /dashboard/
Disallow: /favorites/
Disallow: /settings/
# Allow common crawlers
User-agent: Googlebot
Allow: /
User-agent: Bingbot
Allow: /
# Sitemap location (served from backend API)
Sitemap: https://biz-match.com/bizmatch/sitemap/sitemap.xml

56
bizmatch/src/styles/lazy-load.css Normal file
View File

@ -0,0 +1,56 @@
/* Lazy loading image styles */
img.lazy-loading {
filter: blur(5px);
opacity: 0.6;
transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
img.lazy-loaded {
filter: blur(0);
opacity: 1;
animation: fadeIn 0.3s ease-in-out;
}
img.lazy-error {
opacity: 0.5;
background-color: #f3f4f6;
}
@keyframes fadeIn {
from {
opacity: 0.6;
}
to {
opacity: 1;
}
}
/* Aspect ratio placeholders to prevent layout shift */
.img-container-16-9 {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
overflow: hidden;
}
.img-container-4-3 {
position: relative;
padding-bottom: 75%; /* 4:3 aspect ratio */
overflow: hidden;
}
.img-container-1-1 {
position: relative;
padding-bottom: 100%; /* 1:1 aspect ratio (square) */
overflow: hidden;
}
.img-container-16-9 img,
.img-container-4-3 img,
.img-container-1-1 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

81
bizmatch/tailwind.config.js
View File

@ -23,6 +23,78 @@ module.exports = {
],
theme: {
extend: {
colors: {
// Primary Brand Color (Trust & Professionalism)
primary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6', // Main brand color
600: '#2563eb', // Primary hover
700: '#1d4ed8', // Active state
800: '#1e40af',
900: '#1e3a8a',
DEFAULT: '#3b82f6'
},
// Success/Opportunity Green (Money, Growth, Positive Actions)
success: {
50: '#ecfdf5',
100: '#d1fae5',
200: '#a7f3d0',
300: '#6ee7b7',
400: '#34d399',
500: '#10b981', // Main success color
600: '#059669', // Success hover
700: '#047857',
800: '#065f46',
900: '#064e3b',
DEFAULT: '#10b981'
},
// Premium/Featured Amber (Premium Listings, Featured Badges)
premium: {
50: '#fffbeb',
100: '#fef3c7',
200: '#fde68a',
300: '#fcd34d',
400: '#fbbf24',
500: '#f59e0b', // Premium accent
600: '#d97706',
700: '#b45309',
800: '#92400e',
900: '#78350f',
DEFAULT: '#f59e0b'
},
// Info Teal (Updates, Information)
info: {
50: '#f0fdfa',
100: '#ccfbf1',
200: '#99f6e4',
300: '#5eead4',
400: '#2dd4bf',
500: '#14b8a6', // Info color
600: '#0d9488',
700: '#0f766e',
800: '#115e59',
900: '#134e4a',
DEFAULT: '#14b8a6'
},
// Warmer neutral grays (stone instead of gray)
neutral: {
50: '#fafaf9',
100: '#f5f5f4',
200: '#e7e5e4',
300: '#d6d3d1',
400: '#a8a29e',
500: '#78716c',
600: '#57534e',
700: '#44403c',
800: '#292524',
900: '#1c1917',
DEFAULT: '#78716c'
}
},
fontSize: {
'xs': '.75rem',
'sm': '.875rem',
@ -35,12 +107,11 @@ module.exports = {
'5xl': '3rem',
},
dropShadow: {
'custom-bg': '0 15px 20px rgba(0, 0, 0, 0.3)', // Wähle einen aussagekräftigen Namen
'custom-bg-mobile': '0 1px 2px rgba(0, 0, 0, 0.2)', // Wähle einen aussagekräftigen Namen
'custom-bg': '0 15px 20px rgba(0, 0, 0, 0.3)',
'custom-bg-mobile': '0 1px 2px rgba(0, 0, 0, 0.2)',
'inner-faint': '0 3px 6px rgba(0, 0, 0, 0.1)',
'custom-md': '0 10px 15px rgba(0, 0, 0, 0.25)', // Dein mittlerer Schatten
'custom-lg': '0 15px 20px rgba(0, 0, 0, 0.3)' // Dein großer Schatten
// ... andere benutzerdefinierte Schatten, falls vorhanden
'custom-md': '0 10px 15px rgba(0, 0, 0, 0.25)',
'custom-lg': '0 15px 20px rgba(0, 0, 0, 0.3)'
}
},
},

7
bizmatch/tsconfig.json
View File

@ -2,6 +2,7 @@
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": ".",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": false,
@ -23,7 +24,11 @@
"lib": [
"ES2022",
"dom"
]
],
"paths": {
"zod": ["node_modules/zod"],
"stripe": ["node_modules/stripe"]
}
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,