move + fix

- Shortened meta titles for better SERP display (businessListings, commercialPropertyListings)
- Optimized meta descriptions to fit within 160 characters (3 pages)
- Enhanced H1 headings with descriptive, keyword-rich text (3 pages)
- Addresses Seobility recommendations for improved search visibility

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+.git
+.idea
+.vscode
+dist
+coverage

.gitattributes

@@ -0,0 +1,4 @@
+* text=auto eol=lf
+*.png binary
+*.jpg binary
+*.jpeg binary

FINAL_VULNERABILITY_STATUS.md

@@ -1,210 +1,210 @@
-# Final Vulnerability Status - BizMatch Project
+# Final Vulnerability Status - BizMatch Project
-
+
-**Updated**: 2026-01-03
+**Updated**: 2026-01-03
-**Status**: Production-Ready ✅
+**Status**: Production-Ready ✅
-
+
----
+---
-
+
-## 📊 Current Vulnerability Count
+## 📊 Current Vulnerability Count
-
+
-### bizmatch-server
+### bizmatch-server
-- **Total**: 41 vulnerabilities
+- **Total**: 41 vulnerabilities
-- **Critical**: 0 ❌
+- **Critical**: 0 ❌
-- **High**: 33 (all mjml-related, NOT USED) ✅
+- **High**: 33 (all mjml-related, NOT USED) ✅
-- **Moderate**: 7 (dev tools only) ✅
+- **Moderate**: 7 (dev tools only) ✅
-- **Low**: 1 ✅
+- **Low**: 1 ✅
-
+
-### bizmatch (Frontend)
+### bizmatch (Frontend)
-- **Total**: 10 vulnerabilities
+- **Total**: 10 vulnerabilities
-- **Moderate**: 10 (dev tools + legacy dependencies) ✅
+- **Moderate**: 10 (dev tools + legacy dependencies) ✅
-- **All are acceptable for production** ✅
+- **All are acceptable for production** ✅
-
+
----
+---
-
+
-## ✅ What Was Fixed
+## ✅ What Was Fixed
-
+
-### Backend (bizmatch-server)
+### Backend (bizmatch-server)
-1. ✅ **nodemailer** 6.9 → 7.0.12 (Fixed 3 DoS vulnerabilities)
+1. ✅ **nodemailer** 6.9 → 7.0.12 (Fixed 3 DoS vulnerabilities)
-2. ✅ **firebase** 11.3 → 11.9 (Fixed undici vulnerabilities)
+2. ✅ **firebase** 11.3 → 11.9 (Fixed undici vulnerabilities)
-3. ✅ **drizzle-kit** 0.23 → 0.31 (Fixed esbuild dev vulnerability)
+3. ✅ **drizzle-kit** 0.23 → 0.31 (Fixed esbuild dev vulnerability)
-
+
-### Frontend (bizmatch)
+### Frontend (bizmatch)
-1. ✅ **Angular 18 → 19** (Fixed 17 XSS vulnerabilities)
+1. ✅ **Angular 18 → 19** (Fixed 17 XSS vulnerabilities)
-2. ✅ **@angular/fire** 18.0 → 19.2 (Angular 19 compatibility)
+2. ✅ **@angular/fire** 18.0 → 19.2 (Angular 19 compatibility)
-3. ✅ **zone.js** 0.14 → 0.15 (Angular 19 requirement)
+3. ✅ **zone.js** 0.14 → 0.15 (Angular 19 requirement)
-
+
----
+---
-
+
-## ⚠️ Remaining Vulnerabilities (ACCEPTABLE)
+## ⚠️ Remaining Vulnerabilities (ACCEPTABLE)
-
+
-### bizmatch-server: 33 High (mjml-related)
+### bizmatch-server: 33 High (mjml-related)
-
+
-**Package**: `@nestjs-modules/mailer` depends on `mjml`
+**Package**: `@nestjs-modules/mailer` depends on `mjml`
-
+
-**Why These Are Safe**:
+**Why These Are Safe**:
-```typescript
+```typescript
-// mail.module.ts uses Handlebars, NOT MJML!
+// mail.module.ts uses Handlebars, NOT MJML!
-template: {
+template: {
-  adapter: new HandlebarsAdapter({...}),  // ← Using Handlebars
+  adapter: new HandlebarsAdapter({...}),  // ← Using Handlebars
-  // MJML is NOT used anywhere in the code
+  // MJML is NOT used anywhere in the code
-}
+}
-```
+```
-
+
-**Vulnerabilities**:
+**Vulnerabilities**:
-- `html-minifier` (ReDoS) - via mjml
+- `html-minifier` (ReDoS) - via mjml
-- `mjml-*` packages (33 packages) - NOT USED
+- `mjml-*` packages (33 packages) - NOT USED
-- `glob` 10.x (Command Injection) - via mjml
+- `glob` 10.x (Command Injection) - via mjml
-- `preview-email` - via mjml
+- `preview-email` - via mjml
-
+
-**Mitigation**:
+**Mitigation**:
-- ✅ MJML is never called in production code
+- ✅ MJML is never called in production code
-- ✅ Only Handlebars templates are used
+- ✅ Only Handlebars templates are used
-- ✅ These packages are dead code in node_modules
+- ✅ These packages are dead code in node_modules
-- ✅ Production builds don't include unused dependencies
+- ✅ Production builds don't include unused dependencies
-
+
-**To verify MJML is not used**:
+**To verify MJML is not used**:
-```bash
+```bash
-cd bizmatch-server
+cd bizmatch-server
-grep -r "mjml" src/  # Returns NO results in source code
+grep -r "mjml" src/  # Returns NO results in source code
-```
+```
-
+
-### bizmatch-server: 7 Moderate (dev tools)
+### bizmatch-server: 7 Moderate (dev tools)
-
+
-1. **esbuild** (dev server vulnerability) - drizzle-kit dev dependency
+1. **esbuild** (dev server vulnerability) - drizzle-kit dev dependency
-2. **pg-promise** (SQL injection) - pg-to-ts type generation tool only
+2. **pg-promise** (SQL injection) - pg-to-ts type generation tool only
-
+
-**Why Safe**: Development tools, not in production runtime
+**Why Safe**: Development tools, not in production runtime
-
+
-### bizmatch: 10 Moderate (legacy deps)
+### bizmatch: 10 Moderate (legacy deps)
-
+
-1. **inflight** - deprecated but stable
+1. **inflight** - deprecated but stable
-2. **rimraf** v3 - old version but safe
+2. **rimraf** v3 - old version but safe
-3. **glob** v7 - old version in dev dependencies
+3. **glob** v7 - old version in dev dependencies
-4. **@types/cropperjs** - type definitions only
+4. **@types/cropperjs** - type definitions only
-
+
-**Why Safe**: All are development dependencies or stable legacy packages
+**Why Safe**: All are development dependencies or stable legacy packages
-
+
----
+---
-
+
-## 🚀 Installation Commands
+## 🚀 Installation Commands
-
+
-### Fresh Install (Recommended)
+### Fresh Install (Recommended)
-```bash
+```bash
-# Backend
+# Backend
-cd /home/timo/bizmatch-project/bizmatch-server
+cd /home/timo/bizmatch-project/bizmatch-server
-sudo rm -rf node_modules package-lock.json
+sudo rm -rf node_modules package-lock.json
-npm install
+npm install
-
+
-# Frontend
+# Frontend
-cd /home/timo/bizmatch-project/bizmatch
+cd /home/timo/bizmatch-project/bizmatch
-sudo rm -rf node_modules package-lock.json
+sudo rm -rf node_modules package-lock.json
-npm install --legacy-peer-deps
+npm install --legacy-peer-deps
-```
+```
-
+
-### Verify Production Security
+### Verify Production Security
-```bash
+```bash
-# Check ONLY production dependencies
+# Check ONLY production dependencies
-cd bizmatch-server
+cd bizmatch-server
-npm audit --production
+npm audit --production
-
+
-cd ../bizmatch
+cd ../bizmatch
-npm audit --omit=dev
+npm audit --omit=dev
-```
+```
-
+
----
+---
-
+
-## 📈 Production Security Score
+## 📈 Production Security Score
-
+
-### Runtime Dependencies Only
+### Runtime Dependencies Only
-
+
-**bizmatch-server** (production):
+**bizmatch-server** (production):
-- ✅ **0 Critical**
+- ✅ **0 Critical**
-- ✅ **0 High** (mjml not in runtime)
+- ✅ **0 High** (mjml not in runtime)
-- ✅ **2 Moderate** (nodemailer already latest)
+- ✅ **2 Moderate** (nodemailer already latest)
-
+
-**bizmatch** (production):
+**bizmatch** (production):
-- ✅ **0 High**
+- ✅ **0 High**
-- ✅ **3 Moderate** (stable legacy deps)
+- ✅ **3 Moderate** (stable legacy deps)
-
+
-**Overall Grade**: **A** ✅
+**Overall Grade**: **A** ✅
-
+
----
+---
-
+
-## 🔍 Security Audit Commands
+## 🔍 Security Audit Commands
-
+
-### Check Production Only
+### Check Production Only
-```bash
+```bash
-# Server (excludes dev deps and mjml unused code)
+# Server (excludes dev deps and mjml unused code)
-npm audit --production
+npm audit --production
-
+
-# Frontend (excludes dev deps)
+# Frontend (excludes dev deps)
-npm audit --omit=dev
+npm audit --omit=dev
-```
+```
-
+
-### Full Audit (includes dev tools)
+### Full Audit (includes dev tools)
-```bash
+```bash
-npm audit
+npm audit
-```
+```
-
+
----
+---
-
+
-## 🛡️ Why This Is Production-Safe
+## 🛡️ Why This Is Production-Safe
-
+
-1. **No Critical Vulnerabilities** ❌→✅
+1. **No Critical Vulnerabilities** ❌→✅
-2. **All High-Severity Fixed** (Angular XSS, etc.) ✅
+2. **All High-Severity Fixed** (Angular XSS, etc.) ✅
-3. **Remaining "High" are Unused Code** (mjml never called) ✅
+3. **Remaining "High" are Unused Code** (mjml never called) ✅
-4. **Dev Dependencies Don't Affect Production** ✅
+4. **Dev Dependencies Don't Affect Production** ✅
-5. **Latest Versions of All Active Packages** ✅
+5. **Latest Versions of All Active Packages** ✅
-
+
----
+---
-
+
-## 📝 Next Steps
+## 📝 Next Steps
-
+
-### Immediate (Done) ✅
+### Immediate (Done) ✅
-- [x] Update Angular 18 → 19
+- [x] Update Angular 18 → 19
-- [x] Update nodemailer 6 → 7
+- [x] Update nodemailer 6 → 7
-- [x] Update @angular/fire 18 → 19
+- [x] Update @angular/fire 18 → 19
-- [x] Update firebase to latest
+- [x] Update firebase to latest
-- [x] Update zone.js for Angular 19
+- [x] Update zone.js for Angular 19
-
+
-### Optional (Future Improvements)
+### Optional (Future Improvements)
-- [ ] Consider replacing `@nestjs-modules/mailer` with direct `nodemailer` usage
+- [ ] Consider replacing `@nestjs-modules/mailer` with direct `nodemailer` usage
-  - This would eliminate all 33 mjml vulnerabilities from `npm audit`
+  - This would eliminate all 33 mjml vulnerabilities from `npm audit`
-  - Benefit: Cleaner audit report
+  - Benefit: Cleaner audit report
-  - Cost: Some refactoring needed
+  - Cost: Some refactoring needed
-  - **Not urgent**: mjml code is dead and never executed
+  - **Not urgent**: mjml code is dead and never executed
-
+
-- [ ] Set up Dependabot for automatic security updates
+- [ ] Set up Dependabot for automatic security updates
-- [ ] Add monthly security audit to CI/CD pipeline
+- [ ] Add monthly security audit to CI/CD pipeline
-
+
----
+---
-
+
-## 🔒 Security Best Practices Applied
+## 🔒 Security Best Practices Applied
-
+
-1. ✅ **Principle of Least Privilege**: Only using necessary features
+1. ✅ **Principle of Least Privilege**: Only using necessary features
-2. ✅ **Defense in Depth**: Multiple layers (no mjml usage even if vulnerable)
+2. ✅ **Defense in Depth**: Multiple layers (no mjml usage even if vulnerable)
-3. ✅ **Keep Dependencies Updated**: Latest stable versions
+3. ✅ **Keep Dependencies Updated**: Latest stable versions
-4. ✅ **Audit Regularly**: Monthly reviews recommended
+4. ✅ **Audit Regularly**: Monthly reviews recommended
-5. ✅ **Production Hardening**: Dev deps excluded from production
+5. ✅ **Production Hardening**: Dev deps excluded from production
-
+
----
+---
-
+
-## 📞 Support & Questions
+## 📞 Support & Questions
-
+
-**Q: Why do we still see 41 vulnerabilities in `npm audit`?**
+**Q: Why do we still see 41 vulnerabilities in `npm audit`?**
-A: 33 are in unused mjml code, 7 are dev tools. Only 0-2 affect production runtime.
+A: 33 are in unused mjml code, 7 are dev tools. Only 0-2 affect production runtime.
-
+
-**Q: Should we remove @nestjs-modules/mailer?**
+**Q: Should we remove @nestjs-modules/mailer?**
-A: Optional. It works fine with Handlebars. Removal would clean audit report but requires refactoring.
+A: Optional. It works fine with Handlebars. Removal would clean audit report but requires refactoring.
-
+
-**Q: Are we safe to deploy?**
+**Q: Are we safe to deploy?**
-A: **YES**. All runtime vulnerabilities are fixed. Remaining ones are unused code or dev tools.
+A: **YES**. All runtime vulnerabilities are fixed. Remaining ones are unused code or dev tools.
-
+
-**Q: What about future updates?**
+**Q: What about future updates?**
-A: Run `npm audit` monthly and update packages quarterly.
+A: Run `npm audit` monthly and update packages quarterly.
-
+
----
+---
-
+
-**Security Status**: ✅ **PRODUCTION-READY**
+**Security Status**: ✅ **PRODUCTION-READY**
-**Risk Level**: 🟢 **LOW**
+**Risk Level**: 🟢 **LOW**
-**Confidence**: 💯 **HIGH**
+**Confidence**: 💯 **HIGH**

VULNERABILITY_FIXES.md

@@ -1,281 +1,281 @@
-# Security Vulnerability Fixes
+# Security Vulnerability Fixes
-
+
-## Overview
+## Overview
-
+
-This document details all security vulnerability fixes applied to the BizMatch project.
+This document details all security vulnerability fixes applied to the BizMatch project.
-
+
-**Date**: 2026-01-03
+**Date**: 2026-01-03
-**Total Vulnerabilities Before**: 81 (45 server + 36 frontend)
+**Total Vulnerabilities Before**: 81 (45 server + 36 frontend)
-**Critical Updates Required**: Yes
+**Critical Updates Required**: Yes
-
+
----
+---
-
+
-## 🔴 Critical Fixes (Server)
+## 🔴 Critical Fixes (Server)
-
+
-### 1. Underscore.js Arbitrary Code Execution
+### 1. Underscore.js Arbitrary Code Execution
-**Vulnerability**: CVE (Arbitrary Code Execution)
+**Vulnerability**: CVE (Arbitrary Code Execution)
-**Severity**: Critical
+**Severity**: Critical
-**Status**: ✅ **FIXED** (via nodemailer-smtp-transport dependency update)
+**Status**: ✅ **FIXED** (via nodemailer-smtp-transport dependency update)
-
+
-### 2. HTML Minifier ReDoS
+### 2. HTML Minifier ReDoS
-**Vulnerability**: GHSA-pfq8-rq6v-vf5m (ReDoS in kangax html-minifier)
+**Vulnerability**: GHSA-pfq8-rq6v-vf5m (ReDoS in kangax html-minifier)
-**Severity**: High
+**Severity**: High
-**Status**: ✅ **FIXED** (via @nestjs-modules/mailer 2.0.2 → 2.1.0)
+**Status**: ✅ **FIXED** (via @nestjs-modules/mailer 2.0.2 → 2.1.0)
-**Impact**: Fixes 33 high-severity vulnerabilities in mjml-* packages
+**Impact**: Fixes 33 high-severity vulnerabilities in mjml-* packages
-
+
----
+---
-
+
-## 🟠 High Severity Fixes (Frontend)
+## 🟠 High Severity Fixes (Frontend)
-
+
-### 1. Angular XSS Vulnerability
+### 1. Angular XSS Vulnerability
-**Vulnerability**: GHSA-58c5-g7wp-6w37 (XSRF Token Leakage via Protocol-Relative URLs)
+**Vulnerability**: GHSA-58c5-g7wp-6w37 (XSRF Token Leakage via Protocol-Relative URLs)
-**Severity**: High
+**Severity**: High
-**Package**: @angular/common, @angular/compiler, and all Angular packages
+**Package**: @angular/common, @angular/compiler, and all Angular packages
-**Status**: ✅ **FIXED** (Angular 18.1.3 → 19.2.16)
+**Status**: ✅ **FIXED** (Angular 18.1.3 → 19.2.16)
-
+
-**Files Updated**:
+**Files Updated**:
-- @angular/animations: 18.1.3 → 19.2.16
+- @angular/animations: 18.1.3 → 19.2.16
-- @angular/common: 18.1.3 → 19.2.16
+- @angular/common: 18.1.3 → 19.2.16
-- @angular/compiler: 18.1.3 → 19.2.16
+- @angular/compiler: 18.1.3 → 19.2.16
-- @angular/core: 18.1.3 → 19.2.16
+- @angular/core: 18.1.3 → 19.2.16
-- @angular/forms: 18.1.3 → 19.2.16
+- @angular/forms: 18.1.3 → 19.2.16
-- @angular/platform-browser: 18.1.3 → 19.2.16
+- @angular/platform-browser: 18.1.3 → 19.2.16
-- @angular/platform-browser-dynamic: 18.1.3 → 19.2.16
+- @angular/platform-browser-dynamic: 18.1.3 → 19.2.16
-- @angular/platform-server: 18.1.3 → 19.2.16
+- @angular/platform-server: 18.1.3 → 19.2.16
-- @angular/router: 18.1.3 → 19.2.16
+- @angular/router: 18.1.3 → 19.2.16
-- @angular/ssr: 18.2.21 → 19.2.16
+- @angular/ssr: 18.2.21 → 19.2.16
-- @angular/cdk: 18.0.6 → 19.1.5
+- @angular/cdk: 18.0.6 → 19.1.5
-- @angular/cli: 18.1.3 → 19.2.16
+- @angular/cli: 18.1.3 → 19.2.16
-- @angular-devkit/build-angular: 18.1.3 → 19.2.16
+- @angular-devkit/build-angular: 18.1.3 → 19.2.16
-- @angular/compiler-cli: 18.1.3 → 19.2.16
+- @angular/compiler-cli: 18.1.3 → 19.2.16
-
+
-### 2. Angular Stored XSS via SVG/MathML
+### 2. Angular Stored XSS via SVG/MathML
-**Vulnerability**: GHSA-v4hv-rgfq-gp49
+**Vulnerability**: GHSA-v4hv-rgfq-gp49
-**Severity**: High
+**Severity**: High
-**Status**: ✅ **FIXED** (via Angular 19 update)
+**Status**: ✅ **FIXED** (via Angular 19 update)
-
+
----
+---
-
+
-## 🟡 Moderate Severity Fixes
+## 🟡 Moderate Severity Fixes
-
+
-### 1. Nodemailer Vulnerabilities (Server)
+### 1. Nodemailer Vulnerabilities (Server)
-**Vulnerabilities**:
+**Vulnerabilities**:
-- GHSA-mm7p-fcc7-pg87 (Email to unintended domain)
+- GHSA-mm7p-fcc7-pg87 (Email to unintended domain)
-- GHSA-rcmh-qjqh-p98v (DoS via recursive calls in addressparser)
+- GHSA-rcmh-qjqh-p98v (DoS via recursive calls in addressparser)
-- GHSA-46j5-6fg5-4gv3 (DoS via uncontrolled recursion)
+- GHSA-46j5-6fg5-4gv3 (DoS via uncontrolled recursion)
-
+
-**Severity**: Moderate
+**Severity**: Moderate
-**Package**: nodemailer
+**Package**: nodemailer
-**Status**: ✅ **FIXED** (nodemailer 6.9.10 → 7.0.12)
+**Status**: ✅ **FIXED** (nodemailer 6.9.10 → 7.0.12)
-
+
-### 2. Undici Vulnerabilities (Frontend)
+### 2. Undici Vulnerabilities (Frontend)
-**Vulnerabilities**:
+**Vulnerabilities**:
-- GHSA-c76h-2ccp-4975 (Use of Insufficiently Random Values)
+- GHSA-c76h-2ccp-4975 (Use of Insufficiently Random Values)
-- GHSA-cxrh-j4jr-qwg3 (DoS via bad certificate data)
+- GHSA-cxrh-j4jr-qwg3 (DoS via bad certificate data)
-
+
-**Severity**: Moderate
+**Severity**: Moderate
-**Package**: undici (via Firebase dependencies)
+**Package**: undici (via Firebase dependencies)
-**Status**: ✅ **FIXED** (firebase 11.3.1 → 11.9.0)
+**Status**: ✅ **FIXED** (firebase 11.3.1 → 11.9.0)
-
+
-### 3. Esbuild Development Server Vulnerability
+### 3. Esbuild Development Server Vulnerability
-**Vulnerability**: GHSA-67mh-4wv8-2f99
+**Vulnerability**: GHSA-67mh-4wv8-2f99
-**Severity**: Moderate
+**Severity**: Moderate
-**Status**: ✅ **FIXED** (drizzle-kit 0.23.2 → 0.31.8)
+**Status**: ✅ **FIXED** (drizzle-kit 0.23.2 → 0.31.8)
-**Note**: Development-only vulnerability, does not affect production
+**Note**: Development-only vulnerability, does not affect production
-
+
----
+---
-
+
-## ⚠️ Accepted Risks (Development-Only)
+## ⚠️ Accepted Risks (Development-Only)
-
+
-### 1. pg-promise SQL Injection (Server)
+### 1. pg-promise SQL Injection (Server)
-**Vulnerability**: GHSA-ff9h-848c-4xfj
+**Vulnerability**: GHSA-ff9h-848c-4xfj
-**Severity**: Moderate
+**Severity**: Moderate
-**Package**: pg-promise (used by pg-to-ts dev tool)
+**Package**: pg-promise (used by pg-to-ts dev tool)
-**Status**: ⚠️ **ACCEPTED RISK**
+**Status**: ⚠️ **ACCEPTED RISK**
-**Reason**:
+**Reason**:
-- No fix available
+- No fix available
-- Only used in development tool (pg-to-ts)
+- Only used in development tool (pg-to-ts)
-- Not used in production runtime
+- Not used in production runtime
-- pg-to-ts is only for type generation
+- pg-to-ts is only for type generation
-
+
-### 2. tmp Symbolic Link Vulnerability (Frontend)
+### 2. tmp Symbolic Link Vulnerability (Frontend)
-**Vulnerability**: GHSA-52f5-9888-hmc6
+**Vulnerability**: GHSA-52f5-9888-hmc6
-**Severity**: Low
+**Severity**: Low
-**Package**: tmp (used by Angular CLI)
+**Package**: tmp (used by Angular CLI)
-**Status**: ⚠️ **ACCEPTED RISK**
+**Status**: ⚠️ **ACCEPTED RISK**
-**Reason**:
+**Reason**:
-- Development tool only
+- Development tool only
-- Angular CLI dependency
+- Angular CLI dependency
-- Not included in production build
+- Not included in production build
-
+
-### 3. esbuild (Various)
+### 3. esbuild (Various)
-**Vulnerability**: GHSA-67mh-4wv8-2f99
+**Vulnerability**: GHSA-67mh-4wv8-2f99
-**Severity**: Moderate
+**Severity**: Moderate
-**Status**: ⚠️ **PARTIALLY FIXED**
+**Status**: ⚠️ **PARTIALLY FIXED**
-**Reason**:
+**Reason**:
-- Development server only
+- Development server only
-- Fixed in drizzle-kit
+- Fixed in drizzle-kit
-- Remaining instances in vite are dev-only
+- Remaining instances in vite are dev-only
-
+
----
+---
-
+
-## 📦 Package Updates Summary
+## 📦 Package Updates Summary
-
+
-### bizmatch-server/package.json
+### bizmatch-server/package.json
-```json
+```json
-{
+{
-  "dependencies": {
+  "dependencies": {
-    "@nestjs-modules/mailer": "^2.0.2" → "^2.1.0",
+    "@nestjs-modules/mailer": "^2.0.2" → "^2.1.0",
-    "firebase": "^11.3.1" → "^11.9.0",
+    "firebase": "^11.3.1" → "^11.9.0",
-    "nodemailer": "^6.9.10" → "^7.0.12"
+    "nodemailer": "^6.9.10" → "^7.0.12"
-  },
+  },
-  "devDependencies": {
+  "devDependencies": {
-    "drizzle-kit": "^0.23.2" → "^0.31.8"
+    "drizzle-kit": "^0.23.2" → "^0.31.8"
-  }
+  }
-}
+}
-```
+```
-
+
-### bizmatch/package.json
+### bizmatch/package.json
-```json
+```json
-{
+{
-  "dependencies": {
+  "dependencies": {
-    "@angular/animations": "^18.1.3" → "^19.2.16",
+    "@angular/animations": "^18.1.3" → "^19.2.16",
-    "@angular/cdk": "^18.0.6" → "^19.1.5",
+    "@angular/cdk": "^18.0.6" → "^19.1.5",
-    "@angular/common": "^18.1.3" → "^19.2.16",
+    "@angular/common": "^18.1.3" → "^19.2.16",
-    "@angular/compiler": "^18.1.3" → "^19.2.16",
+    "@angular/compiler": "^18.1.3" → "^19.2.16",
-    "@angular/core": "^18.1.3" → "^19.2.16",
+    "@angular/core": "^18.1.3" → "^19.2.16",
-    "@angular/forms": "^18.1.3" → "^19.2.16",
+    "@angular/forms": "^18.1.3" → "^19.2.16",
-    "@angular/platform-browser": "^18.1.3" → "^19.2.16",
+    "@angular/platform-browser": "^18.1.3" → "^19.2.16",
-    "@angular/platform-browser-dynamic": "^18.1.3" → "^19.2.16",
+    "@angular/platform-browser-dynamic": "^18.1.3" → "^19.2.16",
-    "@angular/platform-server": "^18.1.3" → "^19.2.16",
+    "@angular/platform-server": "^18.1.3" → "^19.2.16",
-    "@angular/router": "^18.1.3" → "^19.2.16",
+    "@angular/router": "^18.1.3" → "^19.2.16",
-    "@angular/ssr": "^18.2.21" → "^19.2.16"
+    "@angular/ssr": "^18.2.21" → "^19.2.16"
-  },
+  },
-  "devDependencies": {
+  "devDependencies": {
-    "@angular-devkit/build-angular": "^18.1.3" → "^19.2.16",
+    "@angular-devkit/build-angular": "^18.1.3" → "^19.2.16",
-    "@angular/cli": "^18.1.3" → "^19.2.16",
+    "@angular/cli": "^18.1.3" → "^19.2.16",
-    "@angular/compiler-cli": "^18.1.3" → "^19.2.16"
+    "@angular/compiler-cli": "^18.1.3" → "^19.2.16"
-  }
+  }
-}
+}
-```
+```
-
+
----
+---
-
+
-## 🚀 Installation Instructions
+## 🚀 Installation Instructions
-
+
-### Automatic Installation (Recommended)
+### Automatic Installation (Recommended)
-```bash
+```bash
-cd /home/timo/bizmatch-project
+cd /home/timo/bizmatch-project
-bash fix-vulnerabilities.sh
+bash fix-vulnerabilities.sh
-```
+```
-
+
-### Manual Installation
+### Manual Installation
-
+
-**If you encounter permission errors:**
+**If you encounter permission errors:**
-```bash
+```bash
-# Fix permissions first
+# Fix permissions first
-cd /home/timo/bizmatch-project/bizmatch-server
+cd /home/timo/bizmatch-project/bizmatch-server
-sudo rm -rf node_modules package-lock.json
+sudo rm -rf node_modules package-lock.json
-cd /home/timo/bizmatch-project/bizmatch
+cd /home/timo/bizmatch-project/bizmatch
-sudo rm -rf node_modules package-lock.json
+sudo rm -rf node_modules package-lock.json
-
+
-# Then install
+# Then install
-cd /home/timo/bizmatch-project/bizmatch-server
+cd /home/timo/bizmatch-project/bizmatch-server
-npm install
+npm install
-
+
-cd /home/timo/bizmatch-project/bizmatch
+cd /home/timo/bizmatch-project/bizmatch
-npm install
+npm install
-```
+```
-
+
-### Verify Installation
+### Verify Installation
-```bash
+```bash
-# Check server
+# Check server
-cd /home/timo/bizmatch-project/bizmatch-server
+cd /home/timo/bizmatch-project/bizmatch-server
-npm audit --production
+npm audit --production
-
+
-# Check frontend
+# Check frontend
-cd /home/timo/bizmatch-project/bizmatch
+cd /home/timo/bizmatch-project/bizmatch
-npm audit --production
+npm audit --production
-```
+```
-
+
----
+---
-
+
-## ⚠️ Breaking Changes Warning
+## ⚠️ Breaking Changes Warning
-
+
-### Angular 18 → 19 Migration
+### Angular 18 → 19 Migration
-
+
-**Potential Issues**:
+**Potential Issues**:
-1. **Route configuration**: Some routing APIs may have changed
+1. **Route configuration**: Some routing APIs may have changed
-2. **Template syntax**: Check for deprecated template features
+2. **Template syntax**: Check for deprecated template features
-3. **Third-party libraries**: Some Angular libraries may not yet support v19
+3. **Third-party libraries**: Some Angular libraries may not yet support v19
-   - @angular/fire: Still on v18.0.1 (compatible but check for updates)
+   - @angular/fire: Still on v18.0.1 (compatible but check for updates)
-   - @bluehalo/ngx-leaflet: May need testing
+   - @bluehalo/ngx-leaflet: May need testing
-   - @ng-select/ng-select: May need testing
+   - @ng-select/ng-select: May need testing
-
+
-**Testing Required**:
+**Testing Required**:
-```bash
+```bash
-cd /home/timo/bizmatch-project/bizmatch
+cd /home/timo/bizmatch-project/bizmatch
-npm run build
+npm run build
-npm run serve:ssr
+npm run serve:ssr
-# Test all major features
+# Test all major features
-```
+```
-
+
-### Nodemailer 6 → 7 Migration
+### Nodemailer 6 → 7 Migration
-
+
-**Potential Issues**:
+**Potential Issues**:
-1. **SMTP configuration**: Minor API changes
+1. **SMTP configuration**: Minor API changes
-2. **Email templates**: Should be compatible
+2. **Email templates**: Should be compatible
-
+
-**Testing Required**:
+**Testing Required**:
-```bash
+```bash
-# Test email functionality
+# Test email functionality
-# - User registration emails
+# - User registration emails
-# - Password reset emails
+# - Password reset emails
-# - Contact form emails
+# - Contact form emails
-```
+```
-
+
----
+---
-
+
-## 📊 Expected Results
+## 📊 Expected Results
-
+
-### Before Updates
+### Before Updates
-- **bizmatch-server**: 45 vulnerabilities (4 critical, 33 high, 7 moderate, 1 low)
+- **bizmatch-server**: 45 vulnerabilities (4 critical, 33 high, 7 moderate, 1 low)
-- **bizmatch**: 36 vulnerabilities (17 high, 13 moderate, 6 low)
+- **bizmatch**: 36 vulnerabilities (17 high, 13 moderate, 6 low)
-
+
-### After Updates (Production Only)
+### After Updates (Production Only)
-- **bizmatch-server**: ~5-10 vulnerabilities (mostly dev-only)
+- **bizmatch-server**: ~5-10 vulnerabilities (mostly dev-only)
-- **bizmatch**: ~3-5 vulnerabilities (mostly dev-only)
+- **bizmatch**: ~3-5 vulnerabilities (mostly dev-only)
-
+
-### Remaining Vulnerabilities
+### Remaining Vulnerabilities
-All remaining vulnerabilities should be:
+All remaining vulnerabilities should be:
-- Development dependencies only (not in production builds)
+- Development dependencies only (not in production builds)
-- Low/moderate severity
+- Low/moderate severity
-- Acceptable risk or no fix available
+- Acceptable risk or no fix available
-
+
----
+---
-
+
-## 🔒 Security Best Practices
+## 🔒 Security Best Practices
-
+
-After applying these fixes:
+After applying these fixes:
-
+
-1. **Regular Updates**: Run `npm audit` monthly
+1. **Regular Updates**: Run `npm audit` monthly
-2. **Production Builds**: Always use production builds for deployment
+2. **Production Builds**: Always use production builds for deployment
-3. **Dependency Review**: Review new dependencies before adding
+3. **Dependency Review**: Review new dependencies before adding
-4. **Testing**: Thoroughly test after major updates
+4. **Testing**: Thoroughly test after major updates
-5. **Monitoring**: Set up dependabot or similar tools
+5. **Monitoring**: Set up dependabot or similar tools
-
+
----
+---
-
+
-## 📞 Support
+## 📞 Support
-
+
-If you encounter issues during installation:
+If you encounter issues during installation:
-
+
-1. Check the permission errors first
+1. Check the permission errors first
-2. Ensure Node.js and npm are up to date
+2. Ensure Node.js and npm are up to date
-3. Review breaking changes section
+3. Review breaking changes section
-4. Test each component individually
+4. Test each component individually
-
+
----
+---
-
+
-**Last Updated**: 2026-01-03
+**Last Updated**: 2026-01-03
-**Next Review**: 2026-02-03 (monthly)
+**Next Review**: 2026-02-03 (monthly)

bizmatch-server/Dockerfile

@@ -1,19 +1,25 @@
-# Build Stage
+# --- STAGE 1: Build ---
-FROM node:18-alpine AS build
+FROM node:22-alpine AS builder
-
 WORKDIR /app
+# HIER KEIN NODE_ENV=production setzen! Wir brauchen devDependencies zum Bauen.
 COPY package*.json ./
-RUN npm install
+RUN npm ci
 COPY . .
 RUN npm run build
 
-# Runtime Stage
+# --- STAGE 2: Runtime ---
-FROM node:18-alpine
+FROM node:22-alpine
-
 WORKDIR /app
-COPY --from=build /app/dist /app/dist
-COPY --from=build /app/package*.json /app/
 
-RUN npm install --production
+# HIER ist es richtig!
+ENV NODE_ENV=production
 
-CMD ["node", "dist/main.js"]
+COPY --from=builder /app/dist /app/dist
+COPY --from=builder /app/package*.json /app/
+
+# Installiert nur "dependencies" (Nest core, TypeORM, Helmet, Sharp etc.)
+# "devDependencies" (TypeScript, Jest, ESLint) werden weggelassen.
+RUN npm ci --omit=dev
+
+# WICHTIG: Pfad prüfen (siehe Punkt 2 unten)
+CMD ["node", "dist/src/main.js"]

bizmatch-server/docker-compose.yml

@@ -1,48 +0,0 @@
-services:
-  app:
-    image: node:22-alpine
-    container_name: bizmatch-app
-    working_dir: /app
-    volumes:
-      - ./:/app
-      - node_modules:/app/node_modules
-    ports:
-      - '3001:3001'
-    env_file:
-      - .env
-    environment:
-      - NODE_ENV=development
-      - DATABASE_URL
-    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
-    networks:
-      - bizmatch
-
-  postgres:
-    container_name: bizmatchdb
-    image: postgres:17-alpine
-    restart: unless-stopped
-    volumes:
-      - bizmatch-db-data:/var/lib/postgresql/data
-    env_file:
-      - .env
-    environment:
-      POSTGRES_DB: ${POSTGRES_DB}
-      POSTGRES_USER: ${POSTGRES_USER}
-      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
-    ports:
-      - '5434:5432'
-    networks:
-      - bizmatch
-
-volumes:
-  bizmatch-db-data:
-    driver: local
-  node_modules:
-    driver: local
-
-networks:
-  bizmatch:
-    external: true

bizmatch-server/fix-sequence.sql

@@ -1,12 +1,12 @@
--- Create missing sequence for commercials_json serialId
+-- Create missing sequence for commercials_json serialId
--- This sequence is required for generating unique serialId values for commercial property listings
+-- This sequence is required for generating unique serialId values for commercial property listings
-
+
-CREATE SEQUENCE IF NOT EXISTS commercials_json_serial_id_seq START WITH 100000;
+CREATE SEQUENCE IF NOT EXISTS commercials_json_serial_id_seq START WITH 100000;
-
+
--- Verify the sequence was created
+-- Verify the sequence was created
-SELECT sequence_name, start_value, last_value
+SELECT sequence_name, start_value, last_value
-FROM information_schema.sequences
+FROM information_schema.sequences
-WHERE sequence_name = 'commercials_json_serial_id_seq';
+WHERE sequence_name = 'commercials_json_serial_id_seq';
-
+
--- Also verify all sequences to check if business listings sequence exists
+-- Also verify all sequences to check if business listings sequence exists
-\ds
+\ds

bizmatch-server/package.json

@@ -1,112 +1,113 @@
-{
+{
-  "name": "bizmatch-server",
+  "name": "bizmatch-server",
-  "version": "0.0.1",
+  "version": "0.0.1",
-  "description": "",
+  "description": "",
-  "author": "",
+  "author": "",
-  "private": true,
+  "private": true,
-  "license": "UNLICENSED",
+  "license": "UNLICENSED",
-  "scripts": {
+  "scripts": {
-    "build": "nest build",
+    "build": "nest build",
-    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
+    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
-    "start": "nest start",
+    "start": "nest start",
-    "start:local": "HOST_NAME=localhost node dist/src/main",
+    "start:local": "HOST_NAME=localhost node dist/src/main",
-    "start:dev": "NODE_ENV=development node dist/src/main",
+    "start:dev": "NODE_ENV=development node dist/src/main",
-    "start:debug": "nest start --debug --watch",
+    "start:debug": "nest start --debug --watch",
-    "start:prod": "NODE_ENV=production node dist/src/main",
+    "start:prod": "NODE_ENV=production node dist/src/main",
-    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
+    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
-    "test": "jest",
+    "test": "jest",
-    "test:watch": "jest --watch",
+    "test:watch": "jest --watch",
-    "test:cov": "jest --coverage",
+    "test:cov": "jest --coverage",
-    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
+    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
-    "test:e2e": "jest --config ./test/jest-e2e.json",
+    "test:e2e": "jest --config ./test/jest-e2e.json",
-    "generate": "drizzle-kit generate",
+    "generate": "drizzle-kit generate",
-    "drop": "drizzle-kit drop",
+    "drop": "drizzle-kit drop",
-    "migrate": "tsx src/drizzle/migrate.ts",
+    "migrate": "tsx src/drizzle/migrate.ts",
-    "import": "tsx src/drizzle/import.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",
+    "create-tables": "node src/scripts/create-tables.js",
-    "seed": "node src/scripts/seed-database.js",
+    "seed": "node src/scripts/seed-database.js",
-    "create-user": "node src/scripts/create-test-user.js",
+    "create-user": "node src/scripts/create-test-user.js",
-    "seed:all": "npm run create-user && npm run seed",
+    "seed:all": "npm run create-user && npm run seed",
-    "setup": "npm run create-tables && npm run seed"
+    "setup": "npm run create-tables && npm run seed"
-  },
+  },
-  "dependencies": {
+  "dependencies": {
-    "@nestjs-modules/mailer": "^2.0.2",
+    "@nestjs-modules/mailer": "^2.0.2",
-    "@nestjs/cli": "^11.0.11",
+    "@nestjs/cli": "^11.0.11",
-    "@nestjs/common": "^11.0.11",
+    "@nestjs/common": "^11.0.11",
-    "@nestjs/config": "^4.0.0",
+    "@nestjs/config": "^4.0.0",
-    "@nestjs/core": "^11.0.11",
+    "@nestjs/core": "^11.0.11",
-    "@nestjs/platform-express": "^11.0.11",
+    "@nestjs/platform-express": "^11.0.11",
-    "@types/stripe": "^8.0.417",
+    "@types/stripe": "^8.0.417",
-    "body-parser": "^1.20.2",
+    "body-parser": "^1.20.2",
-    "cls-hooked": "^4.2.2",
+    "cls-hooked": "^4.2.2",
-    "cors": "^2.8.5",
+    "cors": "^2.8.5",
-    "drizzle-orm": "^0.32.0",
+    "drizzle-orm": "^0.32.0",
-    "firebase": "^11.9.0",
+    "firebase": "^11.9.0",
-    "firebase-admin": "^13.1.0",
+    "firebase-admin": "^13.1.0",
-    "fs-extra": "^11.2.0",
+    "fs-extra": "^11.2.0",
-    "groq-sdk": "^0.5.0",
+    "groq-sdk": "^0.5.0",
-    "handlebars": "^4.7.8",
+    "handlebars": "^4.7.8",
-    "nest-winston": "^1.9.4",
+    "helmet": "^8.1.0",
-    "nestjs-cls": "^5.4.0",
+    "nest-winston": "^1.9.4",
-    "nodemailer": "^7.0.12",
+    "nestjs-cls": "^5.4.0",
-    "openai": "^4.52.6",
+    "nodemailer": "^7.0.12",
-    "pg": "^8.11.5",
+    "openai": "^4.52.6",
-    "pgvector": "^0.2.0",
+    "pg": "^8.11.5",
-    "reflect-metadata": "^0.2.0",
+    "pgvector": "^0.2.0",
-    "rxjs": "^7.8.1",
+    "reflect-metadata": "^0.2.0",
-    "sharp": "^0.33.5",
+    "rxjs": "^7.8.1",
-    "stripe": "^16.8.0",
+    "sharp": "^0.33.5",
-    "tsx": "^4.16.2",
+    "stripe": "^16.8.0",
-    "urlcat": "^3.1.0",
+    "tsx": "^4.16.2",
-    "winston": "^3.11.0",
+    "urlcat": "^3.1.0",
-    "zod": "^3.23.8"
+    "winston": "^3.11.0",
-  },
+    "zod": "^3.23.8"
-  "devDependencies": {
+  },
-    "@babel/parser": "^7.24.4",
+  "devDependencies": {
-    "@babel/traverse": "^7.24.1",
+    "@babel/parser": "^7.24.4",
-    "@nestjs/cli": "^11.0.5",
+    "@babel/traverse": "^7.24.1",
-    "@nestjs/schematics": "^11.0.1",
+    "@nestjs/cli": "^11.0.5",
-    "@nestjs/testing": "^11.0.11",
+    "@nestjs/schematics": "^11.0.1",
-    "@types/express": "^4.17.17",
+    "@nestjs/testing": "^11.0.11",
-    "@types/multer": "^1.4.11",
+    "@types/express": "^4.17.17",
-    "@types/node": "^20.19.25",
+    "@types/multer": "^1.4.11",
-    "@types/nodemailer": "^6.4.14",
+    "@types/node": "^20.19.25",
-    "@types/pg": "^8.11.5",
+    "@types/nodemailer": "^6.4.14",
-    "commander": "^12.0.0",
+    "@types/pg": "^8.11.5",
-    "drizzle-kit": "^0.31.8",
+    "commander": "^12.0.0",
-    "esbuild-register": "^3.5.0",
+    "drizzle-kit": "^0.31.8",
-    "eslint": "^8.42.0",
+    "esbuild-register": "^3.5.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.42.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-config-prettier": "^9.0.0",
-    "kysely-codegen": "^0.15.0",
+    "eslint-plugin-prettier": "^5.0.0",
-    "nest-commander": "^3.16.1",
+    "kysely-codegen": "^0.15.0",
-    "pg-to-ts": "^4.1.1",
+    "nest-commander": "^3.16.1",
-    "prettier": "^3.0.0",
+    "pg-to-ts": "^4.1.1",
-    "rimraf": "^5.0.5",
+    "prettier": "^3.0.0",
-    "source-map-support": "^0.5.21",
+    "rimraf": "^5.0.5",
-    "supertest": "^6.3.3",
+    "source-map-support": "^0.5.21",
-    "ts-jest": "^29.1.0",
+    "supertest": "^6.3.3",
-    "ts-loader": "^9.4.3",
+    "ts-jest": "^29.1.0",
-    "ts-node": "^10.9.2",
+    "ts-loader": "^9.4.3",
-    "tsconfig-paths": "^4.2.0",
+    "ts-node": "^10.9.2",
-    "typescript": "^5.9.3"
+    "tsconfig-paths": "^4.2.0",
-  },
+    "typescript": "^5.9.3"
-  "jest": {
+  },
-    "moduleFileExtensions": [
+  "jest": {
-      "js",
+    "moduleFileExtensions": [
-      "json",
+      "js",
-      "ts"
+      "json",
-    ],
+      "ts"
-    "rootDir": "src",
+    ],
-    "testRegex": ".*\\.spec\\.ts$",
+    "rootDir": "src",
-    "transform": {
+    "testRegex": ".*\\.spec\\.ts$",
-      "^.+\\.(t|j)s$": "ts-jest"
+    "transform": {
-    },
+      "^.+\\.(t|j)s$": "ts-jest"
-    "collectCoverageFrom": [
+    },
-      "**/*.(t|j)s"
+    "collectCoverageFrom": [
-    ],
+      "**/*.(t|j)s"
-    "coverageDirectory": "../coverage",
+    ],
-    "testEnvironment": "node"
+    "coverageDirectory": "../coverage",
-  }
+    "testEnvironment": "node"
-}
+  }
+}

bizmatch-server/src/app.module.ts

@@ -1,96 +1,96 @@
-import { MiddlewareConsumer, Module, NestModule } from '@nestjs/common';
+import { MiddlewareConsumer, Module, NestModule } from '@nestjs/common';
-import { utilities as nestWinstonModuleUtilities, WinstonModule } from 'nest-winston';
+import { utilities as nestWinstonModuleUtilities, WinstonModule } from 'nest-winston';
-import * as winston from 'winston';
+import * as winston from 'winston';
-import { AiModule } from './ai/ai.module';
+import { AiModule } from './ai/ai.module';
-import { AppController } from './app.controller';
+import { AppController } from './app.controller';
-import { AppService } from './app.service';
+import { AppService } from './app.service';
-import { AuthModule } from './auth/auth.module';
+import { AuthModule } from './auth/auth.module';
-import { FileService } from './file/file.service';
+import { FileService } from './file/file.service';
-import { GeoModule } from './geo/geo.module';
+import { GeoModule } from './geo/geo.module';
-import { ImageModule } from './image/image.module';
+import { ImageModule } from './image/image.module';
-import { ListingsModule } from './listings/listings.module';
+import { ListingsModule } from './listings/listings.module';
-import { LogController } from './log/log.controller';
+import { LogController } from './log/log.controller';
-import { LogModule } from './log/log.module';
+import { LogModule } from './log/log.module';
-
+
-import { EventModule } from './event/event.module';
+import { EventModule } from './event/event.module';
-import { MailModule } from './mail/mail.module';
+import { MailModule } from './mail/mail.module';
-
+
-import { ConfigModule } from '@nestjs/config';
+import { ConfigModule } from '@nestjs/config';
-import { APP_INTERCEPTOR } from '@nestjs/core';
+import { APP_INTERCEPTOR } from '@nestjs/core';
-import { ClsMiddleware, ClsModule } from 'nestjs-cls';
+import { ClsMiddleware, ClsModule } from 'nestjs-cls';
-import path from 'path';
+import path from 'path';
-import { AuthService } from './auth/auth.service';
+import { AuthService } from './auth/auth.service';
-import { FirebaseAdminModule } from './firebase-admin/firebase-admin.module';
+import { FirebaseAdminModule } from './firebase-admin/firebase-admin.module';
-import { LoggingInterceptor } from './interceptors/logging.interceptor';
+import { LoggingInterceptor } from './interceptors/logging.interceptor';
-import { UserInterceptor } from './interceptors/user.interceptor';
+import { UserInterceptor } from './interceptors/user.interceptor';
-import { RequestDurationMiddleware } from './request-duration/request-duration.middleware';
+import { RequestDurationMiddleware } from './request-duration/request-duration.middleware';
-import { SelectOptionsModule } from './select-options/select-options.module';
+import { SelectOptionsModule } from './select-options/select-options.module';
-import { SitemapModule } from './sitemap/sitemap.module';
+import { SitemapModule } from './sitemap/sitemap.module';
-import { UserModule } from './user/user.module';
+import { UserModule } from './user/user.module';
-
+
-//loadEnvFiles();
+//loadEnvFiles();
-console.log('Loaded environment variables:');
+console.log('Loaded environment variables:');
-//console.log(JSON.stringify(process.env, null, 2));
+//console.log(JSON.stringify(process.env, null, 2));
-@Module({
+@Module({
-  imports: [
+  imports: [
-    ClsModule.forRoot({
+    ClsModule.forRoot({
-      global: true, // Macht den ClsService global verfügbar
+      global: true, // Macht den ClsService global verfügbar
-      middleware: { mount: true }, // Registriert automatisch die ClsMiddleware
+      middleware: { mount: true }, // Registriert automatisch die ClsMiddleware
-    }),
+    }),
-    //ConfigModule.forRoot({ envFilePath: '.env' }),
+    //ConfigModule.forRoot({ envFilePath: '.env' }),
-    ConfigModule.forRoot({
+    ConfigModule.forRoot({
-      envFilePath: [path.resolve(__dirname, '..', '.env')],
+      envFilePath: [path.resolve(__dirname, '..', '.env')],
-    }),
+    }),
-    MailModule,
+    MailModule,
-    AuthModule,
+    AuthModule,
-    WinstonModule.forRoot({
+    WinstonModule.forRoot({
-      transports: [
+      transports: [
-        new winston.transports.Console({
+        new winston.transports.Console({
-          format: winston.format.combine(
+          format: winston.format.combine(
-            winston.format.timestamp({
+            winston.format.timestamp({
-              format: 'YYYY-MM-DD hh:mm:ss.SSS A',
+              format: 'YYYY-MM-DD hh:mm:ss.SSS A',
-            }),
+            }),
-            winston.format.ms(),
+            winston.format.ms(),
-            nestWinstonModuleUtilities.format.nestLike('Bizmatch', {
+            nestWinstonModuleUtilities.format.nestLike('Bizmatch', {
-              colors: true,
+              colors: true,
-              prettyPrint: true,
+              prettyPrint: true,
-            }),
+            }),
-          ),
+          ),
-        }),
+        }),
-        // other transports...
+        // other transports...
-      ],
+      ],
-      // other options
+      // other options
-    }),
+    }),
-    GeoModule,
+    GeoModule,
-    UserModule,
+    UserModule,
-    ListingsModule,
+    ListingsModule,
-    SelectOptionsModule,
+    SelectOptionsModule,
-    ImageModule,
+    ImageModule,
-    AiModule,
+    AiModule,
-    LogModule,
+    LogModule,
-    // PaymentModule,
+    // PaymentModule,
-    EventModule,
+    EventModule,
-    FirebaseAdminModule,
+    FirebaseAdminModule,
-    SitemapModule,
+    SitemapModule,
-  ],
+  ],
-  controllers: [AppController, LogController],
+  controllers: [AppController, LogController],
-  providers: [
+  providers: [
-    AppService,
+    AppService,
-    FileService,
+    FileService,
-    {
+    {
-      provide: APP_INTERCEPTOR,
+      provide: APP_INTERCEPTOR,
-      useClass: UserInterceptor, // Registriere den Interceptor global
+      useClass: UserInterceptor, // Registriere den Interceptor global
-    },
+    },
-    {
+    {
-      provide: APP_INTERCEPTOR,
+      provide: APP_INTERCEPTOR,
-      useClass: LoggingInterceptor, // Registriere den LoggingInterceptor global
+      useClass: LoggingInterceptor, // Registriere den LoggingInterceptor global
-    },
+    },
-    AuthService,
+    AuthService,
-  ],
+  ],
-})
+})
-export class AppModule implements NestModule {
+export class AppModule implements NestModule {
-  configure(consumer: MiddlewareConsumer) {
+  configure(consumer: MiddlewareConsumer) {
-    consumer.apply(ClsMiddleware).forRoutes('*');
+    consumer.apply(ClsMiddleware).forRoutes('*');
-    consumer.apply(RequestDurationMiddleware).forRoutes('*');
+    consumer.apply(RequestDurationMiddleware).forRoutes('*');
-  }
+  }
-}
+}

bizmatch-server/src/drizzle/import.ts

@@ -1,346 +1,346 @@
-import 'dotenv/config';
+import 'dotenv/config';
-import { drizzle } from 'drizzle-orm/node-postgres';
+import { drizzle } from 'drizzle-orm/node-postgres';
-import { existsSync, readdirSync, readFileSync, statSync, unlinkSync } from 'fs';
+import { existsSync, readdirSync, readFileSync, statSync, unlinkSync } from 'fs';
-import fs from 'fs-extra';
+import fs from 'fs-extra';
-import { join } from 'path';
+import { join } from 'path';
-import { Pool } from 'pg';
+import { Pool } from 'pg';
-import { rimraf } from 'rimraf';
+import { rimraf } from 'rimraf';
-import sharp from 'sharp';
+import sharp from 'sharp';
-import { BusinessListingService } from 'src/listings/business-listing.service';
+import { BusinessListingService } from 'src/listings/business-listing.service';
-import { CommercialPropertyService } from 'src/listings/commercial-property.service';
+import { CommercialPropertyService } from 'src/listings/commercial-property.service';
-import { Geo } from 'src/models/server.model';
+import { Geo } from 'src/models/server.model';
-import { UserService } from 'src/user/user.service';
+import { UserService } from 'src/user/user.service';
-import winston from 'winston';
+import winston from 'winston';
-import { User, UserData } from '../models/db.model';
+import { User, UserData } from '../models/db.model';
-import { createDefaultBusinessListing, createDefaultCommercialPropertyListing, createDefaultUser, emailToDirName } from '../models/main.model';
+import { createDefaultBusinessListing, createDefaultCommercialPropertyListing, createDefaultUser, emailToDirName } from '../models/main.model';
-import { SelectOptionsService } from '../select-options/select-options.service';
+import { SelectOptionsService } from '../select-options/select-options.service';
-import * as schema from './schema';
+import * as schema from './schema';
-interface PropertyImportListing {
+interface PropertyImportListing {
-  id: string;
+  id: string;
-  userId: string;
+  userId: string;
-  listingsCategory: 'commercialProperty';
+  listingsCategory: 'commercialProperty';
-  title: string;
+  title: string;
-  state: string;
+  state: string;
-  hasImages: boolean;
+  hasImages: boolean;
-  price: number;
+  price: number;
-  city: string;
+  city: string;
-  description: string;
+  description: string;
-  type: number;
+  type: number;
-  imageOrder: any[];
+  imageOrder: any[];
-}
+}
-interface BusinessImportListing {
+interface BusinessImportListing {
-  userId: string;
+  userId: string;
-  listingsCategory: 'business';
+  listingsCategory: 'business';
-  title: string;
+  title: string;
-  description: string;
+  description: string;
-  type: number;
+  type: number;
-  state: string;
+  state: string;
-  city: string;
+  city: string;
-  id: string;
+  id: string;
-  price: number;
+  price: number;
-  salesRevenue: number;
+  salesRevenue: number;
-  leasedLocation: boolean;
+  leasedLocation: boolean;
-  established: number;
+  established: number;
-  employees: number;
+  employees: number;
-  reasonForSale: string;
+  reasonForSale: string;
-  supportAndTraining: string;
+  supportAndTraining: string;
-  cashFlow: number;
+  cashFlow: number;
-  brokerLicencing: string;
+  brokerLicencing: string;
-  internalListingNumber: number;
+  internalListingNumber: number;
-  realEstateIncluded: boolean;
+  realEstateIncluded: boolean;
-  franchiseResale: boolean;
+  franchiseResale: boolean;
-  draft: boolean;
+  draft: boolean;
-  internals: string;
+  internals: string;
-  created: string;
+  created: string;
-}
+}
-// const typesOfBusiness: Array<KeyValueStyle> = [
+// const typesOfBusiness: Array<KeyValueStyle> = [
-//   { name: 'Automotive', value: '1', icon: 'fa-solid fa-car', textColorClass: 'text-green-400' },
+//   { name: 'Automotive', value: '1', icon: 'fa-solid fa-car', textColorClass: 'text-green-400' },
-//   { name: 'Industrial Services', value: '2', icon: 'fa-solid fa-industry', textColorClass: 'text-yellow-400' },
+//   { name: 'Industrial Services', value: '2', icon: 'fa-solid fa-industry', textColorClass: 'text-yellow-400' },
-//   { name: 'Real Estate', value: '3', icon: 'fa-solid fa-building', textColorClass: 'text-blue-400' },
+//   { name: 'Real Estate', value: '3', icon: 'fa-solid fa-building', textColorClass: 'text-blue-400' },
-//   { name: 'Uncategorized', value: '4', icon: 'fa-solid fa-question', textColorClass: 'text-cyan-400' },
+//   { name: 'Uncategorized', value: '4', icon: 'fa-solid fa-question', textColorClass: 'text-cyan-400' },
-//   { name: 'Retail', value: '5', icon: 'fa-solid fa-money-bill-wave', textColorClass: 'text-pink-400' },
+//   { name: 'Retail', value: '5', icon: 'fa-solid fa-money-bill-wave', textColorClass: 'text-pink-400' },
-//   { name: 'Oilfield SVE and MFG.', value: '6', icon: 'fa-solid fa-oil-well', textColorClass: 'text-indigo-400' },
+//   { name: 'Oilfield SVE and MFG.', value: '6', icon: 'fa-solid fa-oil-well', textColorClass: 'text-indigo-400' },
-//   { name: 'Service', value: '7', icon: 'fa-solid fa-umbrella', textColorClass: 'text-teal-400' },
+//   { name: 'Service', value: '7', icon: 'fa-solid fa-umbrella', textColorClass: 'text-teal-400' },
-//   { name: 'Advertising', value: '8', icon: 'fa-solid fa-rectangle-ad', textColorClass: 'text-orange-400' },
+//   { name: 'Advertising', value: '8', icon: 'fa-solid fa-rectangle-ad', textColorClass: 'text-orange-400' },
-//   { name: 'Agriculture', value: '9', icon: 'fa-solid fa-wheat-awn', textColorClass: 'text-sky-400' },
+//   { name: 'Agriculture', value: '9', icon: 'fa-solid fa-wheat-awn', textColorClass: 'text-sky-400' },
-//   { name: 'Franchise', value: '10', icon: 'fa-solid fa-star', textColorClass: 'text-purple-400' },
+//   { name: 'Franchise', value: '10', icon: 'fa-solid fa-star', textColorClass: 'text-purple-400' },
-//   { name: 'Professional', value: '11', icon: 'fa-solid fa-user-gear', textColorClass: 'text-gray-400' },
+//   { name: 'Professional', value: '11', icon: 'fa-solid fa-user-gear', textColorClass: 'text-gray-400' },
-//   { name: 'Manufacturing', value: '12', icon: 'fa-solid fa-industry', textColorClass: 'text-red-400' },
+//   { name: 'Manufacturing', value: '12', icon: 'fa-solid fa-industry', textColorClass: 'text-red-400' },
-//   { name: 'Food and Restaurant', value: '13', icon: 'fa-solid fa-utensils', textColorClass: 'text-amber-700' },
+//   { name: 'Food and Restaurant', value: '13', icon: 'fa-solid fa-utensils', textColorClass: 'text-amber-700' },
-// ];
+// ];
-// const { Pool } = pkg;
+// const { Pool } = pkg;
-
+
-// const openai = new OpenAI({
+// const openai = new OpenAI({
-//   apiKey: process.env.OPENAI_API_KEY, // Stellen Sie sicher, dass Sie Ihren API-Key als Umgebungsvariable setzen
+//   apiKey: process.env.OPENAI_API_KEY, // Stellen Sie sicher, dass Sie Ihren API-Key als Umgebungsvariable setzen
-// });
+// });
-(async () => {
+(async () => {
-  const connectionString = process.env.DATABASE_URL;
+  const connectionString = process.env.DATABASE_URL;
-  // const pool = new Pool({connectionString})
+  // const pool = new Pool({connectionString})
-  const client = new Pool({ connectionString });
+  const client = new Pool({ connectionString });
-  const db = drizzle(client, { schema, logger: true });
+  const db = drizzle(client, { schema, logger: true });
-  const logger = winston.createLogger({
+  const logger = winston.createLogger({
-    transports: [new winston.transports.Console()],
+    transports: [new winston.transports.Console()],
-  });
+  });
-  const commService = new CommercialPropertyService(null, db);
+  const commService = new CommercialPropertyService(null, db);
-  const businessService = new BusinessListingService(null, db);
+  const businessService = new BusinessListingService(null, db);
-  const userService = new UserService(null, db, null, null);
+  const userService = new UserService(null, db, null, null);
-  //Delete Content
+  //Delete Content
-  await db.delete(schema.commercials);
+  await db.delete(schema.commercials);
-  await db.delete(schema.businesses);
+  await db.delete(schema.businesses);
-  await db.delete(schema.users);
+  await db.delete(schema.users);
-  let filePath = `./src/assets/geo.json`;
+  let filePath = `./src/assets/geo.json`;
-  const rawData = readFileSync(filePath, 'utf8');
+  const rawData = readFileSync(filePath, 'utf8');
-  const geos = JSON.parse(rawData) as Geo;
+  const geos = JSON.parse(rawData) as Geo;
-
+
-  const sso = new SelectOptionsService();
+  const sso = new SelectOptionsService();
-  //Broker
+  //Broker
-  filePath = `./data/broker.json`;
+  filePath = `./data/broker.json`;
-  let data: string = readFileSync(filePath, 'utf8');
+  let data: string = readFileSync(filePath, 'utf8');
-  const usersData: UserData[] = JSON.parse(data); // Erwartet ein Array von Objekten
+  const usersData: UserData[] = JSON.parse(data); // Erwartet ein Array von Objekten
-  const generatedUserData = [];
+  const generatedUserData = [];
-  console.log(usersData.length);
+  console.log(usersData.length);
-  let i = 0,
+  let i = 0,
-    male = 0,
+    male = 0,
-    female = 0;
+    female = 0;
-  const targetPathProfile = `./pictures/profile`;
+  const targetPathProfile = `./pictures/profile`;
-  deleteFilesOfDir(targetPathProfile);
+  deleteFilesOfDir(targetPathProfile);
-  const targetPathLogo = `./pictures/logo`;
+  const targetPathLogo = `./pictures/logo`;
-  deleteFilesOfDir(targetPathLogo);
+  deleteFilesOfDir(targetPathLogo);
-  const targetPathProperty = `./pictures/property`;
+  const targetPathProperty = `./pictures/property`;
-  deleteFilesOfDir(targetPathProperty);
+  deleteFilesOfDir(targetPathProperty);
-  fs.ensureDirSync(`./pictures/logo`);
+  fs.ensureDirSync(`./pictures/logo`);
-  fs.ensureDirSync(`./pictures/profile`);
+  fs.ensureDirSync(`./pictures/profile`);
-  fs.ensureDirSync(`./pictures/property`);
+  fs.ensureDirSync(`./pictures/property`);
-
+
-  //User
+  //User
-  for (let index = 0; index < usersData.length; index++) {
+  for (let index = 0; index < usersData.length; index++) {
-    const userData = usersData[index];
+    const userData = usersData[index];
-    const user: User = createDefaultUser('', '', '', null);
+    const user: User = createDefaultUser('', '', '', null);
-    user.licensedIn = [];
+    user.licensedIn = [];
-    userData.licensedIn.forEach(l => {
+    userData.licensedIn.forEach(l => {
-      console.log(l['value'], l['name']);
+      console.log(l['value'], l['name']);
-      user.licensedIn.push({ registerNo: l['value'], state: l['name'] });
+      user.licensedIn.push({ registerNo: l['value'], state: l['name'] });
-    });
+    });
-    user.areasServed = [];
+    user.areasServed = [];
-    user.areasServed = userData.areasServed.map(l => {
+    user.areasServed = userData.areasServed.map(l => {
-      return { county: l.split(',')[0].trim(), state: l.split(',')[1].trim() };
+      return { county: l.split(',')[0].trim(), state: l.split(',')[1].trim() };
-    });
+    });
-    user.hasCompanyLogo = true;
+    user.hasCompanyLogo = true;
-    user.hasProfile = true;
+    user.hasProfile = true;
-    user.firstname = userData.firstname;
+    user.firstname = userData.firstname;
-    user.lastname = userData.lastname;
+    user.lastname = userData.lastname;
-    user.email = userData.email;
+    user.email = userData.email;
-    user.phoneNumber = userData.phoneNumber;
+    user.phoneNumber = userData.phoneNumber;
-    user.description = userData.description;
+    user.description = userData.description;
-    user.companyName = userData.companyName;
+    user.companyName = userData.companyName;
-    user.companyOverview = userData.companyOverview;
+    user.companyOverview = userData.companyOverview;
-    user.companyWebsite = userData.companyWebsite;
+    user.companyWebsite = userData.companyWebsite;
-    const [city, state] = userData.companyLocation.split('-').map(e => e.trim());
+    const [city, state] = userData.companyLocation.split('-').map(e => e.trim());
-    user.location = {};
+    user.location = {};
-    user.location.name = city;
+    user.location.name = city;
-    user.location.state = state;
+    user.location.state = state;
-    const cityGeo = geos.states.find(s => s.state_code === state).cities.find(c => c.name === city);
+    const cityGeo = geos.states.find(s => s.state_code === state).cities.find(c => c.name === city);
-    user.location.latitude = cityGeo.latitude;
+    user.location.latitude = cityGeo.latitude;
-    user.location.longitude = cityGeo.longitude;
+    user.location.longitude = cityGeo.longitude;
-    user.offeredServices = userData.offeredServices;
+    user.offeredServices = userData.offeredServices;
-    user.gender = userData.gender;
+    user.gender = userData.gender;
-    user.customerType = 'professional';
+    user.customerType = 'professional';
-    user.customerSubType = 'broker';
+    user.customerSubType = 'broker';
-    user.created = new Date();
+    user.created = new Date();
-    user.updated = new Date();
+    user.updated = new Date();
-
+
-    // const u = await db
+    // const u = await db
-    //   .insert(schema.users)
+    //   .insert(schema.users)
-    //   .values(convertUserToDrizzleUser(user))
+    //   .values(convertUserToDrizzleUser(user))
-    //   .returning({ insertedId: schema.users.id, gender: schema.users.gender, email: schema.users.email, firstname: schema.users.firstname, lastname: schema.users.lastname });
+    //   .returning({ insertedId: schema.users.id, gender: schema.users.gender, email: schema.users.email, firstname: schema.users.firstname, lastname: schema.users.lastname });
-    const u = await userService.saveUser(user);
+    const u = await userService.saveUser(user);
-    generatedUserData.push(u);
+    generatedUserData.push(u);
-    i++;
+    i++;
-    logger.info(`user_${index} inserted`);
+    logger.info(`user_${index} inserted`);
-    if (u.gender === 'male') {
+    if (u.gender === 'male') {
-      male++;
+      male++;
-      const data = readFileSync(`./pictures_base/profile/Mann_${male}.jpg`);
+      const data = readFileSync(`./pictures_base/profile/Mann_${male}.jpg`);
-      await storeProfilePicture(data, emailToDirName(u.email));
+      await storeProfilePicture(data, emailToDirName(u.email));
-    } else {
+    } else {
-      female++;
+      female++;
-      const data = readFileSync(`./pictures_base/profile/Frau_${female}.jpg`);
+      const data = readFileSync(`./pictures_base/profile/Frau_${female}.jpg`);
-      await storeProfilePicture(data, emailToDirName(u.email));
+      await storeProfilePicture(data, emailToDirName(u.email));
-    }
+    }
-    const data = readFileSync(`./pictures_base/logo/${i}.jpg`);
+    const data = readFileSync(`./pictures_base/logo/${i}.jpg`);
-    await storeCompanyLogo(data, emailToDirName(u.email));
+    await storeCompanyLogo(data, emailToDirName(u.email));
-  }
+  }
-
+
-  //Corporate Listings
+  //Corporate Listings
-  filePath = `./data/commercials.json`;
+  filePath = `./data/commercials.json`;
-  data = readFileSync(filePath, 'utf8');
+  data = readFileSync(filePath, 'utf8');
-  const commercialJsonData = JSON.parse(data) as PropertyImportListing[]; // Erwartet ein Array von Objekten
+  const commercialJsonData = JSON.parse(data) as PropertyImportListing[]; // Erwartet ein Array von Objekten
-  for (let index = 0; index < commercialJsonData.length; index++) {
+  for (let index = 0; index < commercialJsonData.length; index++) {
-    const user = getRandomItem(generatedUserData);
+    const user = getRandomItem(generatedUserData);
-    const commercial = createDefaultCommercialPropertyListing();
+    const commercial = createDefaultCommercialPropertyListing();
-    const id = commercialJsonData[index].id;
+    const id = commercialJsonData[index].id;
-    delete commercial.id;
+    delete commercial.id;
-
+
-    commercial.email = user.email;
+    commercial.email = user.email;
-    commercial.type = sso.typesOfCommercialProperty.find(e => e.oldValue === String(commercialJsonData[index].type)).value;
+    commercial.type = sso.typesOfCommercialProperty.find(e => e.oldValue === String(commercialJsonData[index].type)).value;
-    commercial.title = commercialJsonData[index].title;
+    commercial.title = commercialJsonData[index].title;
-    commercial.description = commercialJsonData[index].description;
+    commercial.description = commercialJsonData[index].description;
-    try {
+    try {
-      const cityGeo = geos.states.find(s => s.state_code === commercialJsonData[index].state).cities.find(c => c.name === commercialJsonData[index].city);
+      const cityGeo = geos.states.find(s => s.state_code === commercialJsonData[index].state).cities.find(c => c.name === commercialJsonData[index].city);
-      commercial.location = {};
+      commercial.location = {};
-      commercial.location.latitude = cityGeo.latitude;
+      commercial.location.latitude = cityGeo.latitude;
-      commercial.location.longitude = cityGeo.longitude;
+      commercial.location.longitude = cityGeo.longitude;
-      commercial.location.name = commercialJsonData[index].city;
+      commercial.location.name = commercialJsonData[index].city;
-      commercial.location.state = commercialJsonData[index].state;
+      commercial.location.state = commercialJsonData[index].state;
-      // console.log(JSON.stringify(commercial.location));
+      // console.log(JSON.stringify(commercial.location));
-    } catch (e) {
+    } catch (e) {
-      console.log(`----------------> ERROR ${commercialJsonData[index].state} - ${commercialJsonData[index].city}`);
+      console.log(`----------------> ERROR ${commercialJsonData[index].state} - ${commercialJsonData[index].city}`);
-      continue;
+      continue;
-    }
+    }
-    commercial.price = commercialJsonData[index].price;
+    commercial.price = commercialJsonData[index].price;
-    commercial.listingsCategory = 'commercialProperty';
+    commercial.listingsCategory = 'commercialProperty';
-    commercial.draft = false;
+    commercial.draft = false;
-    commercial.imageOrder = getFilenames(id);
+    commercial.imageOrder = getFilenames(id);
-    commercial.imagePath = emailToDirName(user.email);
+    commercial.imagePath = emailToDirName(user.email);
-    const insertionDate = getRandomDateWithinLastYear();
+    const insertionDate = getRandomDateWithinLastYear();
-    commercial.created = insertionDate;
+    commercial.created = insertionDate;
-    commercial.updated = insertionDate;
+    commercial.updated = insertionDate;
-
+
-    const result = await commService.createListing(commercial); //await db.insert(schema.commercials).values(commercial).returning();
+    const result = await commService.createListing(commercial); //await db.insert(schema.commercials).values(commercial).returning();
-    try {
+    try {
-      fs.copySync(`./pictures_base/property/${id}`, `./pictures/property/${result.imagePath}/${result.serialId}`);
+      fs.copySync(`./pictures_base/property/${id}`, `./pictures/property/${result.imagePath}/${result.serialId}`);
-    } catch (err) {
+    } catch (err) {
-      console.log(`----- No pictures available for ${id} ------ ${err}`);
+      console.log(`----- No pictures available for ${id} ------ ${err}`);
-    }
+    }
-  }
+  }
-
+
-  //Business Listings
+  //Business Listings
-  filePath = `./data/businesses.json`;
+  filePath = `./data/businesses.json`;
-  data = readFileSync(filePath, 'utf8');
+  data = readFileSync(filePath, 'utf8');
-  const businessJsonData = JSON.parse(data) as BusinessImportListing[]; // Erwartet ein Array von Objekten
+  const businessJsonData = JSON.parse(data) as BusinessImportListing[]; // Erwartet ein Array von Objekten
-  for (let index = 0; index < businessJsonData.length; index++) {
+  for (let index = 0; index < businessJsonData.length; index++) {
-    const business = createDefaultBusinessListing(); //businessJsonData[index];
+    const business = createDefaultBusinessListing(); //businessJsonData[index];
-    delete business.id;
+    delete business.id;
-    const user = getRandomItem(generatedUserData);
+    const user = getRandomItem(generatedUserData);
-    business.email = user.email;
+    business.email = user.email;
-    business.type = sso.typesOfBusiness.find(e => e.oldValue === String(businessJsonData[index].type)).value;
+    business.type = sso.typesOfBusiness.find(e => e.oldValue === String(businessJsonData[index].type)).value;
-    business.title = businessJsonData[index].title;
+    business.title = businessJsonData[index].title;
-    business.description = businessJsonData[index].description;
+    business.description = businessJsonData[index].description;
-    try {
+    try {
-      const cityGeo = geos.states.find(s => s.state_code === businessJsonData[index].state).cities.find(c => c.name === businessJsonData[index].city);
+      const cityGeo = geos.states.find(s => s.state_code === businessJsonData[index].state).cities.find(c => c.name === businessJsonData[index].city);
-      business.location = {};
+      business.location = {};
-      business.location.latitude = cityGeo.latitude;
+      business.location.latitude = cityGeo.latitude;
-      business.location.longitude = cityGeo.longitude;
+      business.location.longitude = cityGeo.longitude;
-      business.location.name = businessJsonData[index].city;
+      business.location.name = businessJsonData[index].city;
-      business.location.state = businessJsonData[index].state;
+      business.location.state = businessJsonData[index].state;
-    } catch (e) {
+    } catch (e) {
-      console.log(`----------------> ERROR ${businessJsonData[index].state} - ${businessJsonData[index].city}`);
+      console.log(`----------------> ERROR ${businessJsonData[index].state} - ${businessJsonData[index].city}`);
-      continue;
+      continue;
-    }
+    }
-    business.price = businessJsonData[index].price;
+    business.price = businessJsonData[index].price;
-    business.title = businessJsonData[index].title;
+    business.title = businessJsonData[index].title;
-    business.draft = businessJsonData[index].draft;
+    business.draft = businessJsonData[index].draft;
-    business.listingsCategory = 'business';
+    business.listingsCategory = 'business';
-    business.realEstateIncluded = businessJsonData[index].realEstateIncluded;
+    business.realEstateIncluded = businessJsonData[index].realEstateIncluded;
-    business.leasedLocation = businessJsonData[index].leasedLocation;
+    business.leasedLocation = businessJsonData[index].leasedLocation;
-    business.franchiseResale = businessJsonData[index].franchiseResale;
+    business.franchiseResale = businessJsonData[index].franchiseResale;
-
+
-    business.salesRevenue = businessJsonData[index].salesRevenue;
+    business.salesRevenue = businessJsonData[index].salesRevenue;
-    business.cashFlow = businessJsonData[index].cashFlow;
+    business.cashFlow = businessJsonData[index].cashFlow;
-    business.supportAndTraining = businessJsonData[index].supportAndTraining;
+    business.supportAndTraining = businessJsonData[index].supportAndTraining;
-    business.employees = businessJsonData[index].employees;
+    business.employees = businessJsonData[index].employees;
-    business.established = businessJsonData[index].established;
+    business.established = businessJsonData[index].established;
-    business.internalListingNumber = businessJsonData[index].internalListingNumber;
+    business.internalListingNumber = businessJsonData[index].internalListingNumber;
-    business.reasonForSale = businessJsonData[index].reasonForSale;
+    business.reasonForSale = businessJsonData[index].reasonForSale;
-    business.brokerLicencing = businessJsonData[index].brokerLicencing;
+    business.brokerLicencing = businessJsonData[index].brokerLicencing;
-    business.internals = businessJsonData[index].internals;
+    business.internals = businessJsonData[index].internals;
-    business.imageName = emailToDirName(user.email);
+    business.imageName = emailToDirName(user.email);
-    business.created = new Date(businessJsonData[index].created);
+    business.created = new Date(businessJsonData[index].created);
-    business.updated = new Date(businessJsonData[index].created);
+    business.updated = new Date(businessJsonData[index].created);
-
+
-    await businessService.createListing(business); //db.insert(schema.businesses).values(business);
+    await businessService.createListing(business); //db.insert(schema.businesses).values(business);
-  }
+  }
-
+
-  //End
+  //End
-  await client.end();
+  await client.end();
-})();
+})();
-// function sleep(ms) {
+// function sleep(ms) {
-//   return new Promise(resolve => setTimeout(resolve, ms));
+//   return new Promise(resolve => setTimeout(resolve, ms));
-// }
+// }
-// async function createEmbedding(text: string): Promise<number[]> {
+// async function createEmbedding(text: string): Promise<number[]> {
-//   const response = await openai.embeddings.create({
+//   const response = await openai.embeddings.create({
-//     model: 'text-embedding-3-small',
+//     model: 'text-embedding-3-small',
-//     input: text,
+//     input: text,
-//   });
+//   });
-//   return response.data[0].embedding;
+//   return response.data[0].embedding;
-// }
+// }
-
+
-function getRandomItem<T>(arr: T[]): T {
+function getRandomItem<T>(arr: T[]): T {
-  if (arr.length === 0) {
+  if (arr.length === 0) {
-    throw new Error('The array is empty.');
+    throw new Error('The array is empty.');
-  }
+  }
-
+
-  const randomIndex = Math.floor(Math.random() * arr.length);
+  const randomIndex = Math.floor(Math.random() * arr.length);
-  return arr[randomIndex];
+  return arr[randomIndex];
-}
+}
-function getFilenames(id: string): string[] {
+function getFilenames(id: string): string[] {
-  try {
+  try {
-    const filePath = `./pictures_base/property/${id}`;
+    const filePath = `./pictures_base/property/${id}`;
-    return readdirSync(filePath);
+    return readdirSync(filePath);
-  } catch (e) {
+  } catch (e) {
-    return [];
+    return [];
-  }
+  }
-}
+}
-function getRandomDateWithinLastYear(): Date {
+function getRandomDateWithinLastYear(): Date {
-  const currentDate = new Date();
+  const currentDate = new Date();
-  const lastYear = new Date(currentDate.getFullYear() - 1, currentDate.getMonth(), currentDate.getDate());
+  const lastYear = new Date(currentDate.getFullYear() - 1, currentDate.getMonth(), currentDate.getDate());
-
+
-  const timeDiff = currentDate.getTime() - lastYear.getTime();
+  const timeDiff = currentDate.getTime() - lastYear.getTime();
-  const randomTimeDiff = Math.random() * timeDiff;
+  const randomTimeDiff = Math.random() * timeDiff;
-  const randomDate = new Date(lastYear.getTime() + randomTimeDiff);
+  const randomDate = new Date(lastYear.getTime() + randomTimeDiff);
-
+
-  return randomDate;
+  return randomDate;
-}
+}
-async function storeProfilePicture(buffer: Buffer, userId: string) {
+async function storeProfilePicture(buffer: Buffer, userId: string) {
-  const quality = 50;
+  const quality = 50;
-  const output = await sharp(buffer)
+  const output = await sharp(buffer)
-    .resize({ width: 300 })
+    .resize({ width: 300 })
-    .avif({ quality }) // Verwende AVIF
+    .avif({ quality }) // Verwende AVIF
-    //.webp({ quality }) // Verwende Webp
+    //.webp({ quality }) // Verwende Webp
-    .toBuffer();
+    .toBuffer();
-  await sharp(output).toFile(`./pictures/profile/${userId}.avif`);
+  await sharp(output).toFile(`./pictures/profile/${userId}.avif`);
-}
+}
-
+
-async function storeCompanyLogo(buffer: Buffer, adjustedEmail: string) {
+async function storeCompanyLogo(buffer: Buffer, adjustedEmail: string) {
-  const quality = 50;
+  const quality = 50;
-  const output = await sharp(buffer)
+  const output = await sharp(buffer)
-    .resize({ width: 300 })
+    .resize({ width: 300 })
-    .avif({ quality }) // Verwende AVIF
+    .avif({ quality }) // Verwende AVIF
-    //.webp({ quality }) // Verwende Webp
+    //.webp({ quality }) // Verwende Webp
-    .toBuffer();
+    .toBuffer();
-  await sharp(output).toFile(`./pictures/logo/${adjustedEmail}.avif`); // Ersetze Dateierweiterung
+  await sharp(output).toFile(`./pictures/logo/${adjustedEmail}.avif`); // Ersetze Dateierweiterung
-  // await fs.outputFile(`./pictures/logo/${userId}`, file.buffer);
+  // await fs.outputFile(`./pictures/logo/${userId}`, file.buffer);
-}
+}
-
+
-function deleteFilesOfDir(directoryPath) {
+function deleteFilesOfDir(directoryPath) {
-  // Überprüfen, ob das Verzeichnis existiert
+  // Überprüfen, ob das Verzeichnis existiert
-  if (existsSync(directoryPath)) {
+  if (existsSync(directoryPath)) {
-    // Den Inhalt des Verzeichnisses synchron löschen
+    // Den Inhalt des Verzeichnisses synchron löschen
-    try {
+    try {
-      readdirSync(directoryPath).forEach(file => {
+      readdirSync(directoryPath).forEach(file => {
-        const filePath = join(directoryPath, file);
+        const filePath = join(directoryPath, file);
-        // Wenn es sich um ein Verzeichnis handelt, rekursiv löschen
+        // Wenn es sich um ein Verzeichnis handelt, rekursiv löschen
-        if (statSync(filePath).isDirectory()) {
+        if (statSync(filePath).isDirectory()) {
-          rimraf.sync(filePath);
+          rimraf.sync(filePath);
-        } else {
+        } else {
-          // Wenn es sich um eine Datei handelt, direkt löschen
+          // Wenn es sich um eine Datei handelt, direkt löschen
-          unlinkSync(filePath);
+          unlinkSync(filePath);
-        }
+        }
-      });
+      });
-      console.log('Der Inhalt des Verzeichnisses wurde erfolgreich gelöscht.');
+      console.log('Der Inhalt des Verzeichnisses wurde erfolgreich gelöscht.');
-    } catch (err) {
+    } catch (err) {
-      console.error('Fehler beim Löschen des Verzeichnisses:', err);
+      console.error('Fehler beim Löschen des Verzeichnisses:', err);
-    }
+    }
-  } else {
+  } else {
-    console.log('Das Verzeichnis existiert nicht.');
+    console.log('Das Verzeichnis existiert nicht.');
-  }
+  }
-}
+}

bizmatch-server/src/drizzle/schema.ts

@@ -1,175 +1,175 @@
-import { sql } from 'drizzle-orm';
+import { sql } from 'drizzle-orm';
-import { boolean, doublePrecision, index, integer, jsonb, pgEnum, pgTable, serial, text, timestamp, uuid, varchar } from 'drizzle-orm/pg-core';
+import { boolean, doublePrecision, index, integer, jsonb, pgEnum, pgTable, serial, text, timestamp, uuid, varchar } from 'drizzle-orm/pg-core';
-import { AreasServed, LicensedIn } from '../models/db.model';
+import { AreasServed, LicensedIn } from '../models/db.model';
-export const PG_CONNECTION = 'PG_CONNECTION';
+export const PG_CONNECTION = 'PG_CONNECTION';
-export const genderEnum = pgEnum('gender', ['male', 'female']);
+export const genderEnum = pgEnum('gender', ['male', 'female']);
-export const customerTypeEnum = pgEnum('customerType', ['buyer', 'seller', 'professional']);
+export const customerTypeEnum = pgEnum('customerType', ['buyer', 'seller', 'professional']);
-export const customerSubTypeEnum = pgEnum('customerSubType', ['broker', 'cpa', 'attorney', 'titleCompany', 'surveyor', 'appraiser']);
+export const customerSubTypeEnum = pgEnum('customerSubType', ['broker', 'cpa', 'attorney', 'titleCompany', 'surveyor', 'appraiser']);
-export const listingsCategoryEnum = pgEnum('listingsCategory', ['commercialProperty', 'business']);
+export const listingsCategoryEnum = pgEnum('listingsCategory', ['commercialProperty', 'business']);
-export const subscriptionTypeEnum = pgEnum('subscriptionType', ['free', 'professional', 'broker']);
+export const subscriptionTypeEnum = pgEnum('subscriptionType', ['free', 'professional', 'broker']);
-
+
-// Neue JSONB-basierte Tabellen
+// Neue JSONB-basierte Tabellen
-export const users_json = pgTable(
+export const users_json = pgTable(
-  'users_json',
+  'users_json',
-  {
+  {
-    id: uuid('id').primaryKey().defaultRandom().notNull(),
+    id: uuid('id').primaryKey().defaultRandom().notNull(),
-    email: varchar('email', { length: 255 }).notNull().unique(),
+    email: varchar('email', { length: 255 }).notNull().unique(),
-    data: jsonb('data'),
+    data: jsonb('data'),
-  },
+  },
-  table => ({
+  table => ({
-    emailIdx: index('idx_users_json_email').on(table.email),
+    emailIdx: index('idx_users_json_email').on(table.email),
-  }),
+  }),
-);
+);
-
+
-export const businesses_json = pgTable(
+export const businesses_json = pgTable(
-  'businesses_json',
+  'businesses_json',
-  {
+  {
-    id: uuid('id').primaryKey().defaultRandom().notNull(),
+    id: uuid('id').primaryKey().defaultRandom().notNull(),
-    email: varchar('email', { length: 255 }).references(() => users_json.email),
+    email: varchar('email', { length: 255 }).references(() => users_json.email),
-    data: jsonb('data'),
+    data: jsonb('data'),
-  },
+  },
-  table => ({
+  table => ({
-    emailIdx: index('idx_businesses_json_email').on(table.email),
+    emailIdx: index('idx_businesses_json_email').on(table.email),
-  }),
+  }),
-);
+);
-
+
-export const commercials_json = pgTable(
+export const commercials_json = pgTable(
-  'commercials_json',
+  'commercials_json',
-  {
+  {
-    id: uuid('id').primaryKey().defaultRandom().notNull(),
+    id: uuid('id').primaryKey().defaultRandom().notNull(),
-    email: varchar('email', { length: 255 }).references(() => users_json.email),
+    email: varchar('email', { length: 255 }).references(() => users_json.email),
-    data: jsonb('data'),
+    data: jsonb('data'),
-  },
+  },
-  table => ({
+  table => ({
-    emailIdx: index('idx_commercials_json_email').on(table.email),
+    emailIdx: index('idx_commercials_json_email').on(table.email),
-  }),
+  }),
-);
+);
-
+
-export const listing_events_json = pgTable(
+export const listing_events_json = pgTable(
-  'listing_events_json',
+  'listing_events_json',
-  {
+  {
-    id: uuid('id').primaryKey().defaultRandom().notNull(),
+    id: uuid('id').primaryKey().defaultRandom().notNull(),
-    email: varchar('email', { length: 255 }),
+    email: varchar('email', { length: 255 }),
-    data: jsonb('data'),
+    data: jsonb('data'),
-  },
+  },
-  table => ({
+  table => ({
-    emailIdx: index('idx_listing_events_json_email').on(table.email),
+    emailIdx: index('idx_listing_events_json_email').on(table.email),
-  }),
+  }),
-);
+);
-
+
-// Bestehende Tabellen bleiben unverändert
+// Bestehende Tabellen bleiben unverändert
-export const users = pgTable(
+export const users = pgTable(
-  'users',
+  'users',
-  {
+  {
-    id: uuid('id').primaryKey().defaultRandom().notNull(),
+    id: uuid('id').primaryKey().defaultRandom().notNull(),
-    firstname: varchar('firstname', { length: 255 }).notNull(),
+    firstname: varchar('firstname', { length: 255 }).notNull(),
-    lastname: varchar('lastname', { length: 255 }).notNull(),
+    lastname: varchar('lastname', { length: 255 }).notNull(),
-    email: varchar('email', { length: 255 }).notNull().unique(),
+    email: varchar('email', { length: 255 }).notNull().unique(),
-    phoneNumber: varchar('phoneNumber', { length: 255 }),
+    phoneNumber: varchar('phoneNumber', { length: 255 }),
-    description: text('description'),
+    description: text('description'),
-    companyName: varchar('companyName', { length: 255 }),
+    companyName: varchar('companyName', { length: 255 }),
-    companyOverview: text('companyOverview'),
+    companyOverview: text('companyOverview'),
-    companyWebsite: varchar('companyWebsite', { length: 255 }),
+    companyWebsite: varchar('companyWebsite', { length: 255 }),
-    offeredServices: text('offeredServices'),
+    offeredServices: text('offeredServices'),
-    areasServed: jsonb('areasServed').$type<AreasServed[]>(),
+    areasServed: jsonb('areasServed').$type<AreasServed[]>(),
-    hasProfile: boolean('hasProfile'),
+    hasProfile: boolean('hasProfile'),
-    hasCompanyLogo: boolean('hasCompanyLogo'),
+    hasCompanyLogo: boolean('hasCompanyLogo'),
-    licensedIn: jsonb('licensedIn').$type<LicensedIn[]>(),
+    licensedIn: jsonb('licensedIn').$type<LicensedIn[]>(),
-    gender: genderEnum('gender'),
+    gender: genderEnum('gender'),
-    customerType: customerTypeEnum('customerType'),
+    customerType: customerTypeEnum('customerType'),
-    customerSubType: customerSubTypeEnum('customerSubType'),
+    customerSubType: customerSubTypeEnum('customerSubType'),
-    created: timestamp('created'),
+    created: timestamp('created'),
-    updated: timestamp('updated'),
+    updated: timestamp('updated'),
-    subscriptionId: text('subscriptionId'),
+    subscriptionId: text('subscriptionId'),
-    subscriptionPlan: subscriptionTypeEnum('subscriptionPlan'),
+    subscriptionPlan: subscriptionTypeEnum('subscriptionPlan'),
-    location: jsonb('location'),
+    location: jsonb('location'),
-    showInDirectory: boolean('showInDirectory').default(true),
+    showInDirectory: boolean('showInDirectory').default(true),
-  },
+  },
-  table => ({
+  table => ({
-    locationUserCityStateIdx: index('idx_user_location_city_state').on(
+    locationUserCityStateIdx: index('idx_user_location_city_state').on(
-      sql`((${table.location}->>'name')::varchar), ((${table.location}->>'state')::varchar), ((${table.location}->>'latitude')::float), ((${table.location}->>'longitude')::float)`,
+      sql`((${table.location}->>'name')::varchar), ((${table.location}->>'state')::varchar), ((${table.location}->>'latitude')::float), ((${table.location}->>'longitude')::float)`,
-    ),
+    ),
-  }),
+  }),
-);
+);
-
+
-export const businesses = pgTable(
+export const businesses = pgTable(
-  'businesses',
+  'businesses',
-  {
+  {
-    id: uuid('id').primaryKey().defaultRandom().notNull(),
+    id: uuid('id').primaryKey().defaultRandom().notNull(),
-    email: varchar('email', { length: 255 }).references(() => users.email),
+    email: varchar('email', { length: 255 }).references(() => users.email),
-    type: varchar('type', { length: 255 }),
+    type: varchar('type', { length: 255 }),
-    title: varchar('title', { length: 255 }),
+    title: varchar('title', { length: 255 }),
-    description: text('description'),
+    description: text('description'),
-    price: doublePrecision('price'),
+    price: doublePrecision('price'),
-    favoritesForUser: varchar('favoritesForUser', { length: 30 }).array(),
+    favoritesForUser: varchar('favoritesForUser', { length: 30 }).array(),
-    draft: boolean('draft'),
+    draft: boolean('draft'),
-    listingsCategory: listingsCategoryEnum('listingsCategory'),
+    listingsCategory: listingsCategoryEnum('listingsCategory'),
-    realEstateIncluded: boolean('realEstateIncluded'),
+    realEstateIncluded: boolean('realEstateIncluded'),
-    leasedLocation: boolean('leasedLocation'),
+    leasedLocation: boolean('leasedLocation'),
-    franchiseResale: boolean('franchiseResale'),
+    franchiseResale: boolean('franchiseResale'),
-    salesRevenue: doublePrecision('salesRevenue'),
+    salesRevenue: doublePrecision('salesRevenue'),
-    cashFlow: doublePrecision('cashFlow'),
+    cashFlow: doublePrecision('cashFlow'),
-    supportAndTraining: text('supportAndTraining'),
+    supportAndTraining: text('supportAndTraining'),
-    employees: integer('employees'),
+    employees: integer('employees'),
-    established: integer('established'),
+    established: integer('established'),
-    internalListingNumber: integer('internalListingNumber'),
+    internalListingNumber: integer('internalListingNumber'),
-    reasonForSale: varchar('reasonForSale', { length: 255 }),
+    reasonForSale: varchar('reasonForSale', { length: 255 }),
-    brokerLicencing: varchar('brokerLicencing', { length: 255 }),
+    brokerLicencing: varchar('brokerLicencing', { length: 255 }),
-    internals: text('internals'),
+    internals: text('internals'),
-    imageName: varchar('imageName', { length: 200 }),
+    imageName: varchar('imageName', { length: 200 }),
-    slug: varchar('slug', { length: 300 }).unique(),
+    slug: varchar('slug', { length: 300 }).unique(),
-    created: timestamp('created'),
+    created: timestamp('created'),
-    updated: timestamp('updated'),
+    updated: timestamp('updated'),
-    location: jsonb('location'),
+    location: jsonb('location'),
-  },
+  },
-  table => ({
+  table => ({
-    locationBusinessCityStateIdx: index('idx_business_location_city_state').on(
+    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)`,
+      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),
+    slugIdx: index('idx_business_slug').on(table.slug),
-  }),
+  }),
-);
+);
-
+
-export const commercials = pgTable(
+export const commercials = pgTable(
-  'commercials',
+  'commercials',
-  {
+  {
-    id: uuid('id').primaryKey().defaultRandom().notNull(),
+    id: uuid('id').primaryKey().defaultRandom().notNull(),
-    serialId: serial('serialId'),
+    serialId: serial('serialId'),
-    email: varchar('email', { length: 255 }).references(() => users.email),
+    email: varchar('email', { length: 255 }).references(() => users.email),
-    type: varchar('type', { length: 255 }),
+    type: varchar('type', { length: 255 }),
-    title: varchar('title', { length: 255 }),
+    title: varchar('title', { length: 255 }),
-    description: text('description'),
+    description: text('description'),
-    price: doublePrecision('price'),
+    price: doublePrecision('price'),
-    favoritesForUser: varchar('favoritesForUser', { length: 30 }).array(),
+    favoritesForUser: varchar('favoritesForUser', { length: 30 }).array(),
-    listingsCategory: listingsCategoryEnum('listingsCategory'),
+    listingsCategory: listingsCategoryEnum('listingsCategory'),
-    draft: boolean('draft'),
+    draft: boolean('draft'),
-    imageOrder: varchar('imageOrder', { length: 200 }).array(),
+    imageOrder: varchar('imageOrder', { length: 200 }).array(),
-    imagePath: varchar('imagePath', { length: 200 }),
+    imagePath: varchar('imagePath', { length: 200 }),
-    slug: varchar('slug', { length: 300 }).unique(),
+    slug: varchar('slug', { length: 300 }).unique(),
-    created: timestamp('created'),
+    created: timestamp('created'),
-    updated: timestamp('updated'),
+    updated: timestamp('updated'),
-    location: jsonb('location'),
+    location: jsonb('location'),
-  },
+  },
-  table => ({
+  table => ({
-    locationCommercialsCityStateIdx: index('idx_commercials_location_city_state').on(
+    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)`,
+      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),
+    slugIdx: index('idx_commercials_slug').on(table.slug),
-  }),
+  }),
-);
+);
-
+
-export const listing_events = pgTable('listing_events', {
+export const listing_events = pgTable('listing_events', {
-  id: uuid('id').primaryKey().defaultRandom().notNull(),
+  id: uuid('id').primaryKey().defaultRandom().notNull(),
-  listingId: varchar('listing_id', { length: 255 }),
+  listingId: varchar('listing_id', { length: 255 }),
-  email: varchar('email', { length: 255 }),
+  email: varchar('email', { length: 255 }),
-  eventType: varchar('event_type', { length: 50 }),
+  eventType: varchar('event_type', { length: 50 }),
-  eventTimestamp: timestamp('event_timestamp').defaultNow(),
+  eventTimestamp: timestamp('event_timestamp').defaultNow(),
-  userIp: varchar('user_ip', { length: 45 }),
+  userIp: varchar('user_ip', { length: 45 }),
-  userAgent: varchar('user_agent', { length: 255 }),
+  userAgent: varchar('user_agent', { length: 255 }),
-  locationCountry: varchar('location_country', { length: 100 }),
+  locationCountry: varchar('location_country', { length: 100 }),
-  locationCity: varchar('location_city', { length: 100 }),
+  locationCity: varchar('location_city', { length: 100 }),
-  locationLat: varchar('location_lat', { length: 20 }),
+  locationLat: varchar('location_lat', { length: 20 }),
-  locationLng: varchar('location_lng', { length: 20 }),
+  locationLng: varchar('location_lng', { length: 20 }),
-  referrer: varchar('referrer', { length: 255 }),
+  referrer: varchar('referrer', { length: 255 }),
-  additionalData: jsonb('additional_data'),
+  additionalData: jsonb('additional_data'),
-});
+});

bizmatch-server/src/listings/business-listing.service.ts

@@ -1,431 +1,431 @@
-import { BadRequestException, Inject, Injectable, NotFoundException } from '@nestjs/common';
+import { BadRequestException, Inject, Injectable, NotFoundException } from '@nestjs/common';
-import { and, arrayContains, asc, count, desc, eq, gte, inArray, lte, or, SQL, sql } from 'drizzle-orm';
+import { and, arrayContains, asc, count, desc, eq, gte, inArray, lte, or, SQL, sql } from 'drizzle-orm';
-import { NodePgDatabase } from 'drizzle-orm/node-postgres';
+import { NodePgDatabase } from 'drizzle-orm/node-postgres';
-import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
-import { Logger } from 'winston';
+import { Logger } from 'winston';
-import { ZodError } from 'zod';
+import { ZodError } from 'zod';
-import * as schema from '../drizzle/schema';
+import * as schema from '../drizzle/schema';
-import { businesses_json, PG_CONNECTION } from '../drizzle/schema';
+import { businesses_json, PG_CONNECTION } from '../drizzle/schema';
-import { GeoService } from '../geo/geo.service';
+import { GeoService } from '../geo/geo.service';
-import { BusinessListing, BusinessListingSchema } from '../models/db.model';
+import { BusinessListing, BusinessListingSchema } from '../models/db.model';
-import { BusinessListingCriteria, JwtUser } from '../models/main.model';
+import { BusinessListingCriteria, JwtUser } from '../models/main.model';
-import { getDistanceQuery, splitName } from '../utils';
+import { getDistanceQuery, splitName } from '../utils';
-import { generateSlug, extractShortIdFromSlug, isSlug } from '../utils/slug.utils';
+import { generateSlug, extractShortIdFromSlug, isSlug } from '../utils/slug.utils';
-
+
-@Injectable()
+@Injectable()
-export class BusinessListingService {
+export class BusinessListingService {
-  constructor(
+  constructor(
-    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
+    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
-    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
+    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
-    private geoService?: GeoService,
+    private geoService?: GeoService,
-  ) { }
+  ) { }
-
+
-  private getWhereConditions(criteria: BusinessListingCriteria, user: JwtUser): SQL[] {
+  private getWhereConditions(criteria: BusinessListingCriteria, user: JwtUser): SQL[] {
-    const whereConditions: SQL[] = [];
+    const whereConditions: SQL[] = [];
-    this.logger.info('getWhereConditions start', { criteria: JSON.stringify(criteria) });
+    this.logger.info('getWhereConditions start', { criteria: JSON.stringify(criteria) });
-
+
-    if (criteria.city && criteria.searchType === 'exact') {
+    if (criteria.city && criteria.searchType === 'exact') {
-      whereConditions.push(sql`(${businesses_json.data}->'location'->>'name') ILIKE ${criteria.city.name}`);
+      whereConditions.push(sql`(${businesses_json.data}->'location'->>'name') ILIKE ${criteria.city.name}`);
-    }
+    }
-
+
-    if (criteria.city && criteria.radius && criteria.searchType === 'radius' && criteria.radius) {
+    if (criteria.city && criteria.radius && criteria.searchType === 'radius' && criteria.radius) {
-      this.logger.debug('Adding radius search filter', { city: criteria.city.name, radius: criteria.radius });
+      this.logger.debug('Adding radius search filter', { city: criteria.city.name, radius: criteria.radius });
-      const cityGeo = this.geoService.getCityWithCoords(criteria.state, criteria.city.name);
+      const cityGeo = this.geoService.getCityWithCoords(criteria.state, criteria.city.name);
-      whereConditions.push(sql`(${getDistanceQuery(businesses_json, cityGeo.latitude, cityGeo.longitude)} <= ${criteria.radius})`);
+      whereConditions.push(sql`(${getDistanceQuery(businesses_json, cityGeo.latitude, cityGeo.longitude)} <= ${criteria.radius})`);
-    }
+    }
-    if (criteria.types && criteria.types.length > 0) {
+    if (criteria.types && criteria.types.length > 0) {
-      this.logger.warn('Adding business category filter', { types: criteria.types });
+      this.logger.warn('Adding business category filter', { types: criteria.types });
-      // Use explicit SQL with IN for robust JSONB comparison
+      // Use explicit SQL with IN for robust JSONB comparison
-      const typeValues = criteria.types.map(t => sql`${t}`);
+      const typeValues = criteria.types.map(t => sql`${t}`);
-      whereConditions.push(sql`((${businesses_json.data}->>'type') IN (${sql.join(typeValues, sql`, `)}))`);
+      whereConditions.push(sql`((${businesses_json.data}->>'type') IN (${sql.join(typeValues, sql`, `)}))`);
-    }
+    }
-
+
-    if (criteria.state) {
+    if (criteria.state) {
-      this.logger.debug('Adding state filter', { state: criteria.state });
+      this.logger.debug('Adding state filter', { state: criteria.state });
-      whereConditions.push(sql`(${businesses_json.data}->'location'->>'state') = ${criteria.state}`);
+      whereConditions.push(sql`(${businesses_json.data}->'location'->>'state') = ${criteria.state}`);
-    }
+    }
-
+
-    if (criteria.minPrice !== undefined && criteria.minPrice !== null) {
+    if (criteria.minPrice !== undefined && criteria.minPrice !== null) {
-      whereConditions.push(
+      whereConditions.push(
-        and(
+        and(
-          sql`(${businesses_json.data}->>'price') IS NOT NULL`,
+          sql`(${businesses_json.data}->>'price') IS NOT NULL`,
-          sql`(${businesses_json.data}->>'price') != ''`,
+          sql`(${businesses_json.data}->>'price') != ''`,
-          gte(sql`REPLACE(${businesses_json.data}->>'price', ',', '')::double precision`, criteria.minPrice)
+          gte(sql`REPLACE(${businesses_json.data}->>'price', ',', '')::double precision`, criteria.minPrice)
-        )
+        )
-      );
+      );
-    }
+    }
-
+
-    if (criteria.maxPrice !== undefined && criteria.maxPrice !== null) {
+    if (criteria.maxPrice !== undefined && criteria.maxPrice !== null) {
-      whereConditions.push(
+      whereConditions.push(
-        and(
+        and(
-          sql`(${businesses_json.data}->>'price') IS NOT NULL`,
+          sql`(${businesses_json.data}->>'price') IS NOT NULL`,
-          sql`(${businesses_json.data}->>'price') != ''`,
+          sql`(${businesses_json.data}->>'price') != ''`,
-          lte(sql`REPLACE(${businesses_json.data}->>'price', ',', '')::double precision`, criteria.maxPrice)
+          lte(sql`REPLACE(${businesses_json.data}->>'price', ',', '')::double precision`, criteria.maxPrice)
-        )
+        )
-      );
+      );
-    }
+    }
-
+
-    if (criteria.minRevenue) {
+    if (criteria.minRevenue) {
-      whereConditions.push(gte(sql`(${businesses_json.data}->>'salesRevenue')::double precision`, criteria.minRevenue));
+      whereConditions.push(gte(sql`(${businesses_json.data}->>'salesRevenue')::double precision`, criteria.minRevenue));
-    }
+    }
-
+
-    if (criteria.maxRevenue) {
+    if (criteria.maxRevenue) {
-      whereConditions.push(lte(sql`(${businesses_json.data}->>'salesRevenue')::double precision`, criteria.maxRevenue));
+      whereConditions.push(lte(sql`(${businesses_json.data}->>'salesRevenue')::double precision`, criteria.maxRevenue));
-    }
+    }
-
+
-    if (criteria.minCashFlow) {
+    if (criteria.minCashFlow) {
-      whereConditions.push(gte(sql`(${businesses_json.data}->>'cashFlow')::double precision`, criteria.minCashFlow));
+      whereConditions.push(gte(sql`(${businesses_json.data}->>'cashFlow')::double precision`, criteria.minCashFlow));
-    }
+    }
-
+
-    if (criteria.maxCashFlow) {
+    if (criteria.maxCashFlow) {
-      whereConditions.push(lte(sql`(${businesses_json.data}->>'cashFlow')::double precision`, criteria.maxCashFlow));
+      whereConditions.push(lte(sql`(${businesses_json.data}->>'cashFlow')::double precision`, criteria.maxCashFlow));
-    }
+    }
-
+
-    if (criteria.minNumberEmployees) {
+    if (criteria.minNumberEmployees) {
-      whereConditions.push(gte(sql`(${businesses_json.data}->>'employees')::integer`, criteria.minNumberEmployees));
+      whereConditions.push(gte(sql`(${businesses_json.data}->>'employees')::integer`, criteria.minNumberEmployees));
-    }
+    }
-
+
-    if (criteria.maxNumberEmployees) {
+    if (criteria.maxNumberEmployees) {
-      whereConditions.push(lte(sql`(${businesses_json.data}->>'employees')::integer`, criteria.maxNumberEmployees));
+      whereConditions.push(lte(sql`(${businesses_json.data}->>'employees')::integer`, criteria.maxNumberEmployees));
-    }
+    }
-
+
-    if (criteria.establishedMin) {
+    if (criteria.establishedMin) {
-      whereConditions.push(gte(sql`(${businesses_json.data}->>'established')::integer`, criteria.establishedMin));
+      whereConditions.push(gte(sql`(${businesses_json.data}->>'established')::integer`, criteria.establishedMin));
-    }
+    }
-
+
-    if (criteria.realEstateChecked) {
+    if (criteria.realEstateChecked) {
-      whereConditions.push(eq(sql`(${businesses_json.data}->>'realEstateIncluded')::boolean`, criteria.realEstateChecked));
+      whereConditions.push(eq(sql`(${businesses_json.data}->>'realEstateIncluded')::boolean`, criteria.realEstateChecked));
-    }
+    }
-
+
-    if (criteria.leasedLocation) {
+    if (criteria.leasedLocation) {
-      whereConditions.push(eq(sql`(${businesses_json.data}->>'leasedLocation')::boolean`, criteria.leasedLocation));
+      whereConditions.push(eq(sql`(${businesses_json.data}->>'leasedLocation')::boolean`, criteria.leasedLocation));
-    }
+    }
-
+
-    if (criteria.franchiseResale) {
+    if (criteria.franchiseResale) {
-      whereConditions.push(eq(sql`(${businesses_json.data}->>'franchiseResale')::boolean`, criteria.franchiseResale));
+      whereConditions.push(eq(sql`(${businesses_json.data}->>'franchiseResale')::boolean`, criteria.franchiseResale));
-    }
+    }
-
+
-    if (criteria.title && criteria.title.trim() !== '') {
+    if (criteria.title && criteria.title.trim() !== '') {
-      const searchTerm = `%${criteria.title.trim()}%`;
+      const searchTerm = `%${criteria.title.trim()}%`;
-      whereConditions.push(
+      whereConditions.push(
-        sql`((${businesses_json.data}->>'title') ILIKE ${searchTerm} OR (${businesses_json.data}->>'description') ILIKE ${searchTerm})`
+        sql`((${businesses_json.data}->>'title') ILIKE ${searchTerm} OR (${businesses_json.data}->>'description') ILIKE ${searchTerm})`
-      );
+      );
-    }
+    }
-    if (criteria.brokerName) {
+    if (criteria.brokerName) {
-      const { firstname, lastname } = splitName(criteria.brokerName);
+      const { firstname, lastname } = splitName(criteria.brokerName);
-      if (firstname === lastname) {
+      if (firstname === lastname) {
-        whereConditions.push(
+        whereConditions.push(
-          sql`((${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} OR (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`})`
+          sql`((${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} OR (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`})`
-        );
+        );
-      } else {
+      } else {
-        whereConditions.push(
+        whereConditions.push(
-          sql`((${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} AND (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`})`
+          sql`((${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} AND (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`})`
-        );
+        );
-      }
+      }
-    }
+    }
-    if (criteria.email) {
+    if (criteria.email) {
-      whereConditions.push(eq(schema.users_json.email, criteria.email));
+      whereConditions.push(eq(schema.users_json.email, criteria.email));
-    }
+    }
-    if (user?.role !== 'admin') {
+    if (user?.role !== 'admin') {
-      whereConditions.push(
+      whereConditions.push(
-        sql`((${businesses_json.email} = ${user?.email || null}) OR (${businesses_json.data}->>'draft')::boolean IS NOT TRUE)`
+        sql`((${businesses_json.email} = ${user?.email || null}) OR (${businesses_json.data}->>'draft')::boolean IS NOT TRUE)`
-      );
+      );
-    }
+    }
-    this.logger.warn('whereConditions count', { count: whereConditions.length });
+    this.logger.warn('whereConditions count', { count: whereConditions.length });
-    return whereConditions;
+    return whereConditions;
-  }
+  }
-
+
-  async searchBusinessListings(criteria: BusinessListingCriteria, user: JwtUser) {
+  async searchBusinessListings(criteria: BusinessListingCriteria, user: JwtUser) {
-    const start = criteria.start ? criteria.start : 0;
+    const start = criteria.start ? criteria.start : 0;
-    const length = criteria.length ? criteria.length : 12;
+    const length = criteria.length ? criteria.length : 12;
-    const query = this.conn
+    const query = this.conn
-      .select({
+      .select({
-        business: businesses_json,
+        business: businesses_json,
-        brokerFirstName: sql`${schema.users_json.data}->>'firstname'`.as('brokerFirstName'),
+        brokerFirstName: sql`${schema.users_json.data}->>'firstname'`.as('brokerFirstName'),
-        brokerLastName: sql`${schema.users_json.data}->>'lastname'`.as('brokerLastName'),
+        brokerLastName: sql`${schema.users_json.data}->>'lastname'`.as('brokerLastName'),
-      })
+      })
-      .from(businesses_json)
+      .from(businesses_json)
-      .leftJoin(schema.users_json, eq(businesses_json.email, schema.users_json.email));
+      .leftJoin(schema.users_json, eq(businesses_json.email, schema.users_json.email));
-
+
-    const whereConditions = this.getWhereConditions(criteria, user);
+    const whereConditions = this.getWhereConditions(criteria, user);
-
+
-    this.logger.warn('Filter Criteria:', { criteria: JSON.stringify(criteria) });
+    this.logger.warn('Filter Criteria:', { criteria: JSON.stringify(criteria) });
-
+
-    if (whereConditions.length > 0) {
+    if (whereConditions.length > 0) {
-      const whereClause = sql.join(whereConditions, sql` AND `);
+      const whereClause = sql.join(whereConditions, sql` AND `);
-      query.where(sql`(${whereClause})`);
+      query.where(sql`(${whereClause})`);
-
+
-      this.logger.warn('Generated SQL:', { sql: query.toSQL().sql, params: query.toSQL().params });
+      this.logger.warn('Generated SQL:', { sql: query.toSQL().sql, params: query.toSQL().params });
-    }
+    }
-
+
-    // Sortierung
+    // Sortierung
-    switch (criteria.sortBy) {
+    switch (criteria.sortBy) {
-      case 'priceAsc':
+      case 'priceAsc':
-        query.orderBy(asc(sql`(${businesses_json.data}->>'price')::double precision`));
+        query.orderBy(asc(sql`(${businesses_json.data}->>'price')::double precision`));
-        break;
+        break;
-      case 'priceDesc':
+      case 'priceDesc':
-        query.orderBy(desc(sql`(${businesses_json.data}->>'price')::double precision`));
+        query.orderBy(desc(sql`(${businesses_json.data}->>'price')::double precision`));
-        break;
+        break;
-      case 'srAsc':
+      case 'srAsc':
-        query.orderBy(asc(sql`(${businesses_json.data}->>'salesRevenue')::double precision`));
+        query.orderBy(asc(sql`(${businesses_json.data}->>'salesRevenue')::double precision`));
-        break;
+        break;
-      case 'srDesc':
+      case 'srDesc':
-        query.orderBy(desc(sql`(${businesses_json.data}->>'salesRevenue')::double precision`));
+        query.orderBy(desc(sql`(${businesses_json.data}->>'salesRevenue')::double precision`));
-        break;
+        break;
-      case 'cfAsc':
+      case 'cfAsc':
-        query.orderBy(asc(sql`(${businesses_json.data}->>'cashFlow')::double precision`));
+        query.orderBy(asc(sql`(${businesses_json.data}->>'cashFlow')::double precision`));
-        break;
+        break;
-      case 'cfDesc':
+      case 'cfDesc':
-        query.orderBy(desc(sql`(${businesses_json.data}->>'cashFlow')::double precision`));
+        query.orderBy(desc(sql`(${businesses_json.data}->>'cashFlow')::double precision`));
-        break;
+        break;
-      case 'creationDateFirst':
+      case 'creationDateFirst':
-        query.orderBy(asc(sql`${businesses_json.data}->>'created'`));
+        query.orderBy(asc(sql`${businesses_json.data}->>'created'`));
-        break;
+        break;
-      case 'creationDateLast':
+      case 'creationDateLast':
-        query.orderBy(desc(sql`${businesses_json.data}->>'created'`));
+        query.orderBy(desc(sql`${businesses_json.data}->>'created'`));
-        break;
+        break;
-      default: {
+      default: {
-        // NEU (created < 14 Tage) > UPDATED (updated < 14 Tage) > Rest
+        // NEU (created < 14 Tage) > UPDATED (updated < 14 Tage) > Rest
-        const recencyRank = sql`
+        const recencyRank = sql`
-      CASE
+      CASE
-        WHEN ((${businesses_json.data}->>'created')::timestamptz >= (now() - interval '14 days')) THEN 2
+        WHEN ((${businesses_json.data}->>'created')::timestamptz >= (now() - interval '14 days')) THEN 2
-        WHEN ((${businesses_json.data}->>'updated')::timestamptz >= (now() - interval '14 days')) THEN 1
+        WHEN ((${businesses_json.data}->>'updated')::timestamptz >= (now() - interval '14 days')) THEN 1
-        ELSE 0
+        ELSE 0
-      END
+      END
-    `;
+    `;
-
+
-        // Innerhalb der Gruppe:
+        // Innerhalb der Gruppe:
-        // NEW  → created DESC
+        // NEW  → created DESC
-        // UPDATED → updated DESC
+        // UPDATED → updated DESC
-        // Rest → created DESC
+        // Rest → created DESC
-        const groupTimestamp = sql`
+        const groupTimestamp = sql`
-      CASE
+      CASE
-        WHEN ((${businesses_json.data}->>'created')::timestamptz >= (now() - interval '14 days'))
+        WHEN ((${businesses_json.data}->>'created')::timestamptz >= (now() - interval '14 days'))
-          THEN (${businesses_json.data}->>'created')::timestamptz
+          THEN (${businesses_json.data}->>'created')::timestamptz
-        WHEN ((${businesses_json.data}->>'updated')::timestamptz >= (now() - interval '14 days'))
+        WHEN ((${businesses_json.data}->>'updated')::timestamptz >= (now() - interval '14 days'))
-          THEN (${businesses_json.data}->>'updated')::timestamptz
+          THEN (${businesses_json.data}->>'updated')::timestamptz
-        ELSE (${businesses_json.data}->>'created')::timestamptz
+        ELSE (${businesses_json.data}->>'created')::timestamptz
-      END
+      END
-    `;
+    `;
-
+
-        query.orderBy(desc(recencyRank), desc(groupTimestamp), desc(sql`(${businesses_json.data}->>'created')::timestamptz`));
+        query.orderBy(desc(recencyRank), desc(groupTimestamp), desc(sql`(${businesses_json.data}->>'created')::timestamptz`));
-        break;
+        break;
-      }
+      }
-    }
+    }
-    // Paginierung
+    // Paginierung
-    query.limit(length).offset(start);
+    query.limit(length).offset(start);
-
+
-    const data = await query;
+    const data = await query;
-    const totalCount = await this.getBusinessListingsCount(criteria, user);
+    const totalCount = await this.getBusinessListingsCount(criteria, user);
-    const results = data.map(r => ({
+    const results = data.map(r => ({
-      id: r.business.id,
+      id: r.business.id,
-      email: r.business.email,
+      email: r.business.email,
-      ...(r.business.data as BusinessListing),
+      ...(r.business.data as BusinessListing),
-      brokerFirstName: r.brokerFirstName,
+      brokerFirstName: r.brokerFirstName,
-      brokerLastName: r.brokerLastName,
+      brokerLastName: r.brokerLastName,
-    }));
+    }));
-    return {
+    return {
-      results,
+      results,
-      totalCount,
+      totalCount,
-    };
+    };
-  }
+  }
-
+
-  async getBusinessListingsCount(criteria: BusinessListingCriteria, user: JwtUser): Promise<number> {
+  async getBusinessListingsCount(criteria: BusinessListingCriteria, user: JwtUser): Promise<number> {
-    const countQuery = this.conn.select({ value: count() }).from(businesses_json).leftJoin(schema.users_json, eq(businesses_json.email, schema.users_json.email));
+    const countQuery = this.conn.select({ value: count() }).from(businesses_json).leftJoin(schema.users_json, eq(businesses_json.email, schema.users_json.email));
-
+
-    const whereConditions = this.getWhereConditions(criteria, user);
+    const whereConditions = this.getWhereConditions(criteria, user);
-
+
-    if (whereConditions.length > 0) {
+    if (whereConditions.length > 0) {
-      const whereClause = sql.join(whereConditions, sql` AND `);
+      const whereClause = sql.join(whereConditions, sql` AND `);
-      countQuery.where(sql`(${whereClause})`);
+      countQuery.where(sql`(${whereClause})`);
-    }
+    }
-
+
-    const [{ value: totalCount }] = await countQuery;
+    const [{ value: totalCount }] = await countQuery;
-    return totalCount;
+    return totalCount;
-  }
+  }
-
+
-  /**
+  /**
-   * Find business by slug or ID
+   * Find business by slug or ID
-   * Supports both slug (e.g., "restaurant-austin-tx-a3f7b2c1") and UUID
+   * Supports both slug (e.g., "restaurant-austin-tx-a3f7b2c1") and UUID
-   */
+   */
-  async findBusinessBySlugOrId(slugOrId: string, user: JwtUser): Promise<BusinessListing> {
+  async findBusinessBySlugOrId(slugOrId: string, user: JwtUser): Promise<BusinessListing> {
-    this.logger.debug(`findBusinessBySlugOrId called with: ${slugOrId}`);
+    this.logger.debug(`findBusinessBySlugOrId called with: ${slugOrId}`);
-
+
-    let id = slugOrId;
+    let id = slugOrId;
-
+
-    // Check if it's a slug (contains multiple hyphens) vs UUID
+    // Check if it's a slug (contains multiple hyphens) vs UUID
-    if (isSlug(slugOrId)) {
+    if (isSlug(slugOrId)) {
-      this.logger.debug(`Detected as slug: ${slugOrId}`);
+      this.logger.debug(`Detected as slug: ${slugOrId}`);
-
+
-      // Extract short ID from slug and find by slug field
+      // Extract short ID from slug and find by slug field
-      const listing = await this.findBusinessBySlug(slugOrId);
+      const listing = await this.findBusinessBySlug(slugOrId);
-      if (listing) {
+      if (listing) {
-        this.logger.debug(`Found listing by slug: ${slugOrId} -> ID: ${listing.id}`);
+        this.logger.debug(`Found listing by slug: ${slugOrId} -> ID: ${listing.id}`);
-        id = listing.id;
+        id = listing.id;
-      } else {
+      } else {
-        this.logger.warn(`Slug not found in database: ${slugOrId}`);
+        this.logger.warn(`Slug not found in database: ${slugOrId}`);
-        throw new NotFoundException(
+        throw new NotFoundException(
-          `Business listing not found with slug: ${slugOrId}. ` +
+          `Business listing not found with slug: ${slugOrId}. ` +
-          `The listing may have been deleted or the URL may be incorrect.`
+          `The listing may have been deleted or the URL may be incorrect.`
-        );
+        );
-      }
+      }
-    } else {
+    } else {
-      this.logger.debug(`Detected as UUID: ${slugOrId}`);
+      this.logger.debug(`Detected as UUID: ${slugOrId}`);
-    }
+    }
-
+
-    return this.findBusinessesById(id, user);
+    return this.findBusinessesById(id, user);
-  }
+  }
-
+
-  /**
+  /**
-   * Find business by slug
+   * Find business by slug
-   */
+   */
-  async findBusinessBySlug(slug: string): Promise<BusinessListing | null> {
+  async findBusinessBySlug(slug: string): Promise<BusinessListing | null> {
-    const result = await this.conn
+    const result = await this.conn
-      .select()
+      .select()
-      .from(businesses_json)
+      .from(businesses_json)
-      .where(sql`${businesses_json.data}->>'slug' = ${slug}`)
+      .where(sql`${businesses_json.data}->>'slug' = ${slug}`)
-      .limit(1);
+      .limit(1);
-
+
-    if (result.length > 0) {
+    if (result.length > 0) {
-      return { id: result[0].id, email: result[0].email, ...(result[0].data as BusinessListing) } as BusinessListing;
+      return { id: result[0].id, email: result[0].email, ...(result[0].data as BusinessListing) } as BusinessListing;
-    }
+    }
-    return null;
+    return null;
-  }
+  }
-
+
-  async findBusinessesById(id: string, user: JwtUser): Promise<BusinessListing> {
+  async findBusinessesById(id: string, user: JwtUser): Promise<BusinessListing> {
-    const conditions = [];
+    const conditions = [];
-    if (user?.role !== 'admin') {
+    if (user?.role !== 'admin') {
-      conditions.push(or(eq(businesses_json.email, user?.email), sql`(${businesses_json.data}->>'draft')::boolean IS NOT TRUE`));
+      conditions.push(or(eq(businesses_json.email, user?.email), sql`(${businesses_json.data}->>'draft')::boolean IS NOT TRUE`));
-    }
+    }
-    conditions.push(eq(businesses_json.id, id));
+    conditions.push(eq(businesses_json.id, id));
-    const result = await this.conn
+    const result = await this.conn
-      .select()
+      .select()
-      .from(businesses_json)
+      .from(businesses_json)
-      .where(and(...conditions));
+      .where(and(...conditions));
-    if (result.length > 0) {
+    if (result.length > 0) {
-      return { id: result[0].id, email: result[0].email, ...(result[0].data as BusinessListing) } as BusinessListing;
+      return { id: result[0].id, email: result[0].email, ...(result[0].data as BusinessListing) } as BusinessListing;
-    } else {
+    } else {
-      throw new BadRequestException(`No entry available for ${id}`);
+      throw new BadRequestException(`No entry available for ${id}`);
-    }
+    }
-  }
+  }
-
+
-  async findBusinessesByEmail(email: string, user: JwtUser): Promise<BusinessListing[]> {
+  async findBusinessesByEmail(email: string, user: JwtUser): Promise<BusinessListing[]> {
-    const conditions = [];
+    const conditions = [];
-    conditions.push(eq(businesses_json.email, email));
+    conditions.push(eq(businesses_json.email, email));
-    if (email !== user?.email && user?.role !== 'admin') {
+    if (email !== user?.email && user?.role !== 'admin') {
-      conditions.push(sql`(${businesses_json.data}->>'draft')::boolean IS NOT TRUE`);
+      conditions.push(sql`(${businesses_json.data}->>'draft')::boolean IS NOT TRUE`);
-    }
+    }
-    const listings = await this.conn
+    const listings = await this.conn
-      .select()
+      .select()
-      .from(businesses_json)
+      .from(businesses_json)
-      .where(and(...conditions));
+      .where(and(...conditions));
-    return listings.map(l => ({ id: l.id, email: l.email, ...(l.data as BusinessListing) }) as BusinessListing);
+    return listings.map(l => ({ id: l.id, email: l.email, ...(l.data as BusinessListing) }) as BusinessListing);
-  }
+  }
-
+
-  async findFavoriteListings(user: JwtUser): Promise<BusinessListing[]> {
+  async findFavoriteListings(user: JwtUser): Promise<BusinessListing[]> {
-    const userFavorites = await this.conn
+    const userFavorites = await this.conn
-      .select()
+      .select()
-      .from(businesses_json)
+      .from(businesses_json)
-      .where(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);
+    return userFavorites.map(l => ({ id: l.id, email: l.email, ...(l.data as BusinessListing) }) as BusinessListing);
-  }
+  }
-
+
-  async createListing(data: BusinessListing): Promise<BusinessListing> {
+  async createListing(data: BusinessListing): Promise<BusinessListing> {
-    try {
+    try {
-      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
+      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
-      data.updated = new Date();
+      data.updated = new Date();
-      BusinessListingSchema.parse(data);
+      BusinessListingSchema.parse(data);
-      const { id, email, ...rest } = data;
+      const { id, email, ...rest } = data;
-      const convertedBusinessListing = { email, data: rest };
+      const convertedBusinessListing = { email, data: rest };
-      const [createdListing] = await this.conn.insert(businesses_json).values(convertedBusinessListing).returning();
+      const [createdListing] = await this.conn.insert(businesses_json).values(convertedBusinessListing).returning();
-
+
-      // Generate and update slug after creation (we need the ID first)
+      // Generate and update slug after creation (we need the ID first)
-      const slug = generateSlug(data.title, data.location, createdListing.id);
+      const slug = generateSlug(data.title, data.location, createdListing.id);
-      const listingWithSlug = { ...(createdListing.data as any), slug };
+      const listingWithSlug = { ...(createdListing.data as any), slug };
-      await this.conn.update(businesses_json).set({ data: listingWithSlug }).where(eq(businesses_json.id, createdListing.id));
+      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;
+      return { id: createdListing.id, email: createdListing.email, ...(createdListing.data as BusinessListing), slug } as any;
-    } catch (error) {
+    } catch (error) {
-      if (error instanceof ZodError) {
+      if (error instanceof ZodError) {
-        const filteredErrors = error.errors
+        const filteredErrors = error.errors
-          .map(item => ({
+          .map(item => ({
-            ...item,
+            ...item,
-            field: item.path[0],
+            field: item.path[0],
-          }))
+          }))
-          .filter((item, index, self) => index === self.findIndex(t => t.path[0] === item.path[0]));
+          .filter((item, index, self) => index === self.findIndex(t => t.path[0] === item.path[0]));
-        throw new BadRequestException(filteredErrors);
+        throw new BadRequestException(filteredErrors);
-      }
+      }
-      throw error;
+      throw error;
-    }
+    }
-  }
+  }
-
+
-  async updateBusinessListing(id: string, data: BusinessListing, user: JwtUser): Promise<BusinessListing> {
+  async updateBusinessListing(id: string, data: BusinessListing, user: JwtUser): Promise<BusinessListing> {
-    try {
+    try {
-      const [existingListing] = await this.conn.select().from(businesses_json).where(eq(businesses_json.id, id));
+      const [existingListing] = await this.conn.select().from(businesses_json).where(eq(businesses_json.id, id));
-
+
-      if (!existingListing) {
+      if (!existingListing) {
-        throw new NotFoundException(`Business listing with id ${id} not found`);
+        throw new NotFoundException(`Business listing with id ${id} not found`);
-      }
+      }
-      data.updated = new Date();
+      data.updated = new Date();
-      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
+      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
-      if (existingListing.email === user?.email) {
+      if (existingListing.email === user?.email) {
-        data.favoritesForUser = (<BusinessListing>existingListing.data).favoritesForUser || [];
+        data.favoritesForUser = (<BusinessListing>existingListing.data).favoritesForUser || [];
-      }
+      }
-
+
-      // Regenerate slug if title or location changed
+      // Regenerate slug if title or location changed
-      const existingData = existingListing.data as BusinessListing;
+      const existingData = existingListing.data as BusinessListing;
-      let slug: string;
+      let slug: string;
-      if (data.title !== existingData.title || JSON.stringify(data.location) !== JSON.stringify(existingData.location)) {
+      if (data.title !== existingData.title || JSON.stringify(data.location) !== JSON.stringify(existingData.location)) {
-        slug = generateSlug(data.title, data.location, id);
+        slug = generateSlug(data.title, data.location, id);
-      } else {
+      } else {
-        // Keep existing slug
+        // Keep existing slug
-        slug = (existingData as any).slug || generateSlug(data.title, data.location, id);
+        slug = (existingData as any).slug || generateSlug(data.title, data.location, id);
-      }
+      }
-
+
-      // Add slug to data before validation
+      // Add slug to data before validation
-      const dataWithSlug = { ...data, slug };
+      const dataWithSlug = { ...data, slug };
-      BusinessListingSchema.parse(dataWithSlug);
+      BusinessListingSchema.parse(dataWithSlug);
-      const { id: _, email, ...rest } = dataWithSlug;
+      const { id: _, email, ...rest } = dataWithSlug;
-      const convertedBusinessListing = { email, data: rest };
+      const convertedBusinessListing = { email, data: rest };
-      const [updateListing] = await this.conn.update(businesses_json).set(convertedBusinessListing).where(eq(businesses_json.id, id)).returning();
+      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) };
+      return { id: updateListing.id, email: updateListing.email, ...(updateListing.data as BusinessListing) };
-    } catch (error) {
+    } catch (error) {
-      if (error instanceof ZodError) {
+      if (error instanceof ZodError) {
-        const filteredErrors = error.errors
+        const filteredErrors = error.errors
-          .map(item => ({
+          .map(item => ({
-            ...item,
+            ...item,
-            field: item.path[0],
+            field: item.path[0],
-          }))
+          }))
-          .filter((item, index, self) => index === self.findIndex(t => t.path[0] === item.path[0]));
+          .filter((item, index, self) => index === self.findIndex(t => t.path[0] === item.path[0]));
-        throw new BadRequestException(filteredErrors);
+        throw new BadRequestException(filteredErrors);
-      }
+      }
-      throw error;
+      throw error;
-    }
+    }
-  }
+  }
-
+
-  async deleteListing(id: string): Promise<void> {
+  async deleteListing(id: string): Promise<void> {
-    await this.conn.delete(businesses_json).where(eq(businesses_json.id, id));
+    await this.conn.delete(businesses_json).where(eq(businesses_json.id, id));
-  }
+  }
-
+
-  async addFavorite(id: string, user: JwtUser): Promise<void> {
+  async addFavorite(id: string, user: JwtUser): Promise<void> {
-    await this.conn
+    await this.conn
-      .update(businesses_json)
+      .update(businesses_json)
-      .set({
+      .set({
-        data: sql`jsonb_set(${businesses_json.data}, '{favoritesForUser}',
+        data: sql`jsonb_set(${businesses_json.data}, '{favoritesForUser}',
-          coalesce((${businesses_json.data}->'favoritesForUser')::jsonb, '[]'::jsonb) || to_jsonb(${user.email}::text))`,
+          coalesce((${businesses_json.data}->'favoritesForUser')::jsonb, '[]'::jsonb) || to_jsonb(${user.email}::text))`,
-      })
+      })
-      .where(eq(businesses_json.id, id));
+      .where(eq(businesses_json.id, id));
-  }
+  }
-
+
-  async deleteFavorite(id: string, user: JwtUser): Promise<void> {
+  async deleteFavorite(id: string, user: JwtUser): Promise<void> {
-    await this.conn
+    await this.conn
-      .update(businesses_json)
+      .update(businesses_json)
-      .set({
+      .set({
-        data: sql`jsonb_set(${businesses_json.data}, '{favoritesForUser}',
+        data: sql`jsonb_set(${businesses_json.data}, '{favoritesForUser}',
-          (SELECT coalesce(jsonb_agg(elem), '[]'::jsonb)
+          (SELECT coalesce(jsonb_agg(elem), '[]'::jsonb)
-           FROM jsonb_array_elements(coalesce(${businesses_json.data}->'favoritesForUser', '[]'::jsonb)) AS elem
+           FROM jsonb_array_elements(coalesce(${businesses_json.data}->'favoritesForUser', '[]'::jsonb)) AS elem
-           WHERE elem::text != to_jsonb(${user.email}::text)::text))`,
+           WHERE elem::text != to_jsonb(${user.email}::text)::text))`,
-      })
+      })
-      .where(eq(businesses_json.id, id));
+      .where(eq(businesses_json.id, id));
-  }
+  }
-}
+}

bizmatch-server/src/listings/business-listings.controller.ts

@@ -1,79 +1,79 @@
-import { Body, Controller, Delete, Get, Inject, Param, Post, Put, Request, UseGuards } from '@nestjs/common';
+import { Body, Controller, Delete, Get, Inject, Param, Post, Put, Request, UseGuards } from '@nestjs/common';
-import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
-import { AuthGuard } from 'src/jwt-auth/auth.guard';
+import { AuthGuard } from 'src/jwt-auth/auth.guard';
-import { Logger } from 'winston';
+import { Logger } from 'winston';
-
+
-import { OptionalAuthGuard } from 'src/jwt-auth/optional-auth.guard';
+import { OptionalAuthGuard } from 'src/jwt-auth/optional-auth.guard';
-import { BusinessListing } from '../models/db.model';
+import { BusinessListing } from '../models/db.model';
-import { BusinessListingCriteria, JwtUser } from '../models/main.model';
+import { BusinessListingCriteria, JwtUser } from '../models/main.model';
-import { BusinessListingService } from './business-listing.service';
+import { BusinessListingService } from './business-listing.service';
-
+
-@Controller('listings/business')
+@Controller('listings/business')
-export class BusinessListingsController {
+export class BusinessListingsController {
-  constructor(
+  constructor(
-    private readonly listingsService: BusinessListingService,
+    private readonly listingsService: BusinessListingService,
-    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
+    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
-  ) { }
+  ) { }
-
+
-  @UseGuards(AuthGuard)
+  @UseGuards(AuthGuard)
-  @Post('favorites/all')
+  @Post('favorites/all')
-  async findFavorites(@Request() req): Promise<any> {
+  async findFavorites(@Request() req): Promise<any> {
-    return await this.listingsService.findFavoriteListings(req.user as JwtUser);
+    return await this.listingsService.findFavoriteListings(req.user as JwtUser);
-  }
+  }
-
+
-  @UseGuards(OptionalAuthGuard)
+  @UseGuards(OptionalAuthGuard)
-  @Get(':slugOrId')
+  @Get(':slugOrId')
-  async findById(@Request() req, @Param('slugOrId') slugOrId: string): Promise<any> {
+  async findById(@Request() req, @Param('slugOrId') slugOrId: string): Promise<any> {
-    // Support both slug (e.g., "restaurant-austin-tx-a3f7b2c1") and UUID
+    // Support both slug (e.g., "restaurant-austin-tx-a3f7b2c1") and UUID
-    return await this.listingsService.findBusinessBySlugOrId(slugOrId, req.user as JwtUser);
+    return await this.listingsService.findBusinessBySlugOrId(slugOrId, req.user as JwtUser);
-  }
+  }
-
+
-  @UseGuards(OptionalAuthGuard)
+  @UseGuards(OptionalAuthGuard)
-  @Get('user/:userid')
+  @Get('user/:userid')
-  async findByUserId(@Request() req, @Param('userid') userid: string): Promise<BusinessListing[]> {
+  async findByUserId(@Request() req, @Param('userid') userid: string): Promise<BusinessListing[]> {
-    return await this.listingsService.findBusinessesByEmail(userid, req.user as JwtUser);
+    return await this.listingsService.findBusinessesByEmail(userid, req.user as JwtUser);
-  }
+  }
-
+
-  @UseGuards(OptionalAuthGuard)
+  @UseGuards(OptionalAuthGuard)
-  @Post('find')
+  @Post('find')
-  async find(@Request() req, @Body() criteria: BusinessListingCriteria): Promise<any> {
+  async find(@Request() req, @Body() criteria: BusinessListingCriteria): Promise<any> {
-    return await this.listingsService.searchBusinessListings(criteria, req.user as JwtUser);
+    return await this.listingsService.searchBusinessListings(criteria, req.user as JwtUser);
-  }
+  }
-  @UseGuards(OptionalAuthGuard)
+  @UseGuards(OptionalAuthGuard)
-  @Post('findTotal')
+  @Post('findTotal')
-  async findTotal(@Request() req, @Body() criteria: BusinessListingCriteria): Promise<number> {
+  async findTotal(@Request() req, @Body() criteria: BusinessListingCriteria): Promise<number> {
-    return await this.listingsService.getBusinessListingsCount(criteria, req.user as JwtUser);
+    return await this.listingsService.getBusinessListingsCount(criteria, req.user as JwtUser);
-  }
+  }
-
+
-  @UseGuards(OptionalAuthGuard)
+  @UseGuards(OptionalAuthGuard)
-  @Post()
+  @Post()
-  async create(@Body() listing: any) {
+  async create(@Body() listing: any) {
-    return await this.listingsService.createListing(listing);
+    return await this.listingsService.createListing(listing);
-  }
+  }
-
+
-  @UseGuards(OptionalAuthGuard)
+  @UseGuards(OptionalAuthGuard)
-  @Put()
+  @Put()
-  async update(@Request() req, @Body() listing: any) {
+  async update(@Request() req, @Body() listing: any) {
-    return await this.listingsService.updateBusinessListing(listing.id, listing, req.user as JwtUser);
+    return await this.listingsService.updateBusinessListing(listing.id, listing, req.user as JwtUser);
-  }
+  }
-
+
-  @UseGuards(OptionalAuthGuard)
+  @UseGuards(OptionalAuthGuard)
-  @Delete('listing/:id')
+  @Delete('listing/:id')
-  async deleteById(@Param('id') id: string) {
+  async deleteById(@Param('id') id: string) {
-    await this.listingsService.deleteListing(id);
+    await this.listingsService.deleteListing(id);
-  }
+  }
-
+
-  @UseGuards(AuthGuard)
+  @UseGuards(AuthGuard)
-  @Post('favorite/:id')
+  @Post('favorite/:id')
-  async addFavorite(@Request() req, @Param('id') id: string) {
+  async addFavorite(@Request() req, @Param('id') id: string) {
-    await this.listingsService.addFavorite(id, req.user as JwtUser);
+    await this.listingsService.addFavorite(id, req.user as JwtUser);
-    return { success: true, message: 'Added to favorites' };
+    return { success: true, message: 'Added to favorites' };
-  }
+  }
-
+
-  @UseGuards(AuthGuard)
+  @UseGuards(AuthGuard)
-  @Delete('favorite/:id')
+  @Delete('favorite/:id')
-  async deleteFavorite(@Request() req, @Param('id') id: string) {
+  async deleteFavorite(@Request() req, @Param('id') id: string) {
-    await this.listingsService.deleteFavorite(id, req.user as JwtUser);
+    await this.listingsService.deleteFavorite(id, req.user as JwtUser);
-    return { success: true, message: 'Removed from favorites' };
+    return { success: true, message: 'Removed from favorites' };
-  }
+  }
-}
+}

bizmatch-server/src/listings/commercial-property-listings.controller.ts

@@ -1,82 +1,82 @@
-import { Body, Controller, Delete, Get, Inject, Param, Post, Put, Request, UseGuards } from '@nestjs/common';
+import { Body, Controller, Delete, Get, Inject, Param, Post, Put, Request, UseGuards } from '@nestjs/common';
-import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
-import { Logger } from 'winston';
+import { Logger } from 'winston';
-import { FileService } from '../file/file.service';
+import { FileService } from '../file/file.service';
-
+
-import { AuthGuard } from 'src/jwt-auth/auth.guard';
+import { AuthGuard } from 'src/jwt-auth/auth.guard';
-import { OptionalAuthGuard } from 'src/jwt-auth/optional-auth.guard';
+import { OptionalAuthGuard } from 'src/jwt-auth/optional-auth.guard';
-import { CommercialPropertyListing } from '../models/db.model';
+import { CommercialPropertyListing } from '../models/db.model';
-import { CommercialPropertyListingCriteria, JwtUser } from '../models/main.model';
+import { CommercialPropertyListingCriteria, JwtUser } from '../models/main.model';
-import { CommercialPropertyService } from './commercial-property.service';
+import { CommercialPropertyService } from './commercial-property.service';
-
+
-@Controller('listings/commercialProperty')
+@Controller('listings/commercialProperty')
-export class CommercialPropertyListingsController {
+export class CommercialPropertyListingsController {
-  constructor(
+  constructor(
-    private readonly listingsService: CommercialPropertyService,
+    private readonly listingsService: CommercialPropertyService,
-    private fileService: FileService,
+    private fileService: FileService,
-    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
+    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
-  ) { }
+  ) { }
-
+
-  @UseGuards(AuthGuard)
+  @UseGuards(AuthGuard)
-  @Post('favorites/all')
+  @Post('favorites/all')
-  async findFavorites(@Request() req): Promise<any> {
+  async findFavorites(@Request() req): Promise<any> {
-    return await this.listingsService.findFavoriteListings(req.user as JwtUser);
+    return await this.listingsService.findFavoriteListings(req.user as JwtUser);
-  }
+  }
-
+
-  @UseGuards(OptionalAuthGuard)
+  @UseGuards(OptionalAuthGuard)
-  @Get(':slugOrId')
+  @Get(':slugOrId')
-  async findById(@Request() req, @Param('slugOrId') slugOrId: string): Promise<any> {
+  async findById(@Request() req, @Param('slugOrId') slugOrId: string): Promise<any> {
-    // Support both slug (e.g., "office-space-austin-tx-a3f7b2c1") and UUID
+    // Support both slug (e.g., "office-space-austin-tx-a3f7b2c1") and UUID
-    return await this.listingsService.findCommercialBySlugOrId(slugOrId, req.user as JwtUser);
+    return await this.listingsService.findCommercialBySlugOrId(slugOrId, req.user as JwtUser);
-  }
+  }
-
+
-  @UseGuards(OptionalAuthGuard)
+  @UseGuards(OptionalAuthGuard)
-  @Get('user/:email')
+  @Get('user/:email')
-  async findByEmail(@Request() req, @Param('email') email: string): Promise<CommercialPropertyListing[]> {
+  async findByEmail(@Request() req, @Param('email') email: string): Promise<CommercialPropertyListing[]> {
-    return await this.listingsService.findCommercialPropertiesByEmail(email, req.user as JwtUser);
+    return await this.listingsService.findCommercialPropertiesByEmail(email, req.user as JwtUser);
-  }
+  }
-
+
-  @UseGuards(OptionalAuthGuard)
+  @UseGuards(OptionalAuthGuard)
-  @Post('find')
+  @Post('find')
-  async find(@Request() req, @Body() criteria: CommercialPropertyListingCriteria): Promise<any> {
+  async find(@Request() req, @Body() criteria: CommercialPropertyListingCriteria): Promise<any> {
-    return await this.listingsService.searchCommercialProperties(criteria, req.user as JwtUser);
+    return await this.listingsService.searchCommercialProperties(criteria, req.user as JwtUser);
-  }
+  }
-  @UseGuards(OptionalAuthGuard)
+  @UseGuards(OptionalAuthGuard)
-  @Post('findTotal')
+  @Post('findTotal')
-  async findTotal(@Request() req, @Body() criteria: CommercialPropertyListingCriteria): Promise<number> {
+  async findTotal(@Request() req, @Body() criteria: CommercialPropertyListingCriteria): Promise<number> {
-    return await this.listingsService.getCommercialPropertiesCount(criteria, req.user as JwtUser);
+    return await this.listingsService.getCommercialPropertiesCount(criteria, req.user as JwtUser);
-  }
+  }
-
+
-  @UseGuards(OptionalAuthGuard)
+  @UseGuards(OptionalAuthGuard)
-  @Post()
+  @Post()
-  async create(@Body() listing: any) {
+  async create(@Body() listing: any) {
-    return await this.listingsService.createListing(listing);
+    return await this.listingsService.createListing(listing);
-  }
+  }
-
+
-  @UseGuards(OptionalAuthGuard)
+  @UseGuards(OptionalAuthGuard)
-  @Put()
+  @Put()
-  async update(@Request() req, @Body() listing: any) {
+  async update(@Request() req, @Body() listing: any) {
-    return await this.listingsService.updateCommercialPropertyListing(listing.id, listing, req.user as JwtUser);
+    return await this.listingsService.updateCommercialPropertyListing(listing.id, listing, req.user as JwtUser);
-  }
+  }
-
+
-  @UseGuards(OptionalAuthGuard)
+  @UseGuards(OptionalAuthGuard)
-  @Delete('listing/:id/:imagePath')
+  @Delete('listing/:id/:imagePath')
-  async deleteById(@Param('id') id: string, @Param('imagePath') imagePath: string) {
+  async deleteById(@Param('id') id: string, @Param('imagePath') imagePath: string) {
-    await this.listingsService.deleteListing(id);
+    await this.listingsService.deleteListing(id);
-    this.fileService.deleteDirectoryIfExists(imagePath);
+    this.fileService.deleteDirectoryIfExists(imagePath);
-  }
+  }
-
+
-  @UseGuards(AuthGuard)
+  @UseGuards(AuthGuard)
-  @Post('favorite/:id')
+  @Post('favorite/:id')
-  async addFavorite(@Request() req, @Param('id') id: string) {
+  async addFavorite(@Request() req, @Param('id') id: string) {
-    await this.listingsService.addFavorite(id, req.user as JwtUser);
+    await this.listingsService.addFavorite(id, req.user as JwtUser);
-    return { success: true, message: 'Added to favorites' };
+    return { success: true, message: 'Added to favorites' };
-  }
+  }
-
+
-  @UseGuards(AuthGuard)
+  @UseGuards(AuthGuard)
-  @Delete('favorite/:id')
+  @Delete('favorite/:id')
-  async deleteFavorite(@Request() req, @Param('id') id: string) {
+  async deleteFavorite(@Request() req, @Param('id') id: string) {
-    await this.listingsService.deleteFavorite(id, req.user as JwtUser);
+    await this.listingsService.deleteFavorite(id, req.user as JwtUser);
-    return { success: true, message: 'Removed from favorites' };
+    return { success: true, message: 'Removed from favorites' };
-  }
+  }
-}
+}

bizmatch-server/src/listings/commercial-property.service.ts

@@ -1,364 +1,364 @@
-import { BadRequestException, Inject, Injectable, NotFoundException } from '@nestjs/common';
+import { BadRequestException, Inject, Injectable, NotFoundException } from '@nestjs/common';
-import { and, arrayContains, asc, count, desc, eq, gte, inArray, lte, or, SQL, sql } from 'drizzle-orm';
+import { and, arrayContains, asc, count, desc, eq, gte, inArray, lte, or, SQL, sql } from 'drizzle-orm';
-import { NodePgDatabase } from 'drizzle-orm/node-postgres';
+import { NodePgDatabase } from 'drizzle-orm/node-postgres';
-import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
-import { Logger } from 'winston';
+import { Logger } from 'winston';
-import { ZodError } from 'zod';
+import { ZodError } from 'zod';
-import * as schema from '../drizzle/schema';
+import * as schema from '../drizzle/schema';
-import { commercials_json, PG_CONNECTION } from '../drizzle/schema';
+import { commercials_json, PG_CONNECTION } from '../drizzle/schema';
-import { FileService } from '../file/file.service';
+import { FileService } from '../file/file.service';
-import { GeoService } from '../geo/geo.service';
+import { GeoService } from '../geo/geo.service';
-import { CommercialPropertyListing, CommercialPropertyListingSchema } from '../models/db.model';
+import { CommercialPropertyListing, CommercialPropertyListingSchema } from '../models/db.model';
-import { CommercialPropertyListingCriteria, JwtUser } from '../models/main.model';
+import { CommercialPropertyListingCriteria, JwtUser } from '../models/main.model';
-import { getDistanceQuery, splitName } from '../utils';
+import { getDistanceQuery, splitName } from '../utils';
-import { generateSlug, extractShortIdFromSlug, isSlug } from '../utils/slug.utils';
+import { generateSlug, extractShortIdFromSlug, isSlug } from '../utils/slug.utils';
-
+
-@Injectable()
+@Injectable()
-export class CommercialPropertyService {
+export class CommercialPropertyService {
-  constructor(
+  constructor(
-    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
+    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
-    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
+    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
-    private fileService?: FileService,
+    private fileService?: FileService,
-    private geoService?: GeoService,
+    private geoService?: GeoService,
-  ) { }
+  ) { }
-  private getWhereConditions(criteria: CommercialPropertyListingCriteria, user: JwtUser): SQL[] {
+  private getWhereConditions(criteria: CommercialPropertyListingCriteria, user: JwtUser): SQL[] {
-    const whereConditions: SQL[] = [];
+    const whereConditions: SQL[] = [];
-
+
-    if (criteria.city && criteria.searchType === 'exact') {
+    if (criteria.city && criteria.searchType === 'exact') {
-      whereConditions.push(sql`(${commercials_json.data}->'location'->>'name') ILIKE ${criteria.city.name}`);
+      whereConditions.push(sql`(${commercials_json.data}->'location'->>'name') ILIKE ${criteria.city.name}`);
-    }
+    }
-    if (criteria.city && criteria.radius && criteria.searchType === 'radius' && criteria.radius) {
+    if (criteria.city && criteria.radius && criteria.searchType === 'radius' && criteria.radius) {
-      const cityGeo = this.geoService.getCityWithCoords(criteria.state, criteria.city.name);
+      const cityGeo = this.geoService.getCityWithCoords(criteria.state, criteria.city.name);
-      whereConditions.push(sql`${getDistanceQuery(commercials_json, cityGeo.latitude, cityGeo.longitude)} <= ${criteria.radius}`);
+      whereConditions.push(sql`${getDistanceQuery(commercials_json, cityGeo.latitude, cityGeo.longitude)} <= ${criteria.radius}`);
-    }
+    }
-    if (criteria.types && criteria.types.length > 0) {
+    if (criteria.types && criteria.types.length > 0) {
-      this.logger.warn('Adding commercial property type filter', { types: criteria.types });
+      this.logger.warn('Adding commercial property type filter', { types: criteria.types });
-      // Use explicit SQL with IN for robust JSONB comparison
+      // Use explicit SQL with IN for robust JSONB comparison
-      const typeValues = criteria.types.map(t => sql`${t}`);
+      const typeValues = criteria.types.map(t => sql`${t}`);
-      whereConditions.push(sql`((${commercials_json.data}->>'type') IN (${sql.join(typeValues, sql`, `)}))`);
+      whereConditions.push(sql`((${commercials_json.data}->>'type') IN (${sql.join(typeValues, sql`, `)}))`);
-    }
+    }
-
+
-    if (criteria.state) {
+    if (criteria.state) {
-      whereConditions.push(sql`(${commercials_json.data}->'location'->>'state') = ${criteria.state}`);
+      whereConditions.push(sql`(${commercials_json.data}->'location'->>'state') = ${criteria.state}`);
-    }
+    }
-
+
-    if (criteria.minPrice) {
+    if (criteria.minPrice) {
-      whereConditions.push(gte(sql`(${commercials_json.data}->>'price')::double precision`, criteria.minPrice));
+      whereConditions.push(gte(sql`(${commercials_json.data}->>'price')::double precision`, criteria.minPrice));
-    }
+    }
-
+
-    if (criteria.maxPrice) {
+    if (criteria.maxPrice) {
-      whereConditions.push(lte(sql`(${commercials_json.data}->>'price')::double precision`, criteria.maxPrice));
+      whereConditions.push(lte(sql`(${commercials_json.data}->>'price')::double precision`, criteria.maxPrice));
-    }
+    }
-
+
-    if (criteria.title) {
+    if (criteria.title) {
-      whereConditions.push(
+      whereConditions.push(
-        sql`((${commercials_json.data}->>'title') ILIKE ${`%${criteria.title}%`} OR (${commercials_json.data}->>'description') ILIKE ${`%${criteria.title}%`})`
+        sql`((${commercials_json.data}->>'title') ILIKE ${`%${criteria.title}%`} OR (${commercials_json.data}->>'description') ILIKE ${`%${criteria.title}%`})`
-      );
+      );
-    }
+    }
-
+
-    if (criteria.brokerName) {
+    if (criteria.brokerName) {
-      const { firstname, lastname } = splitName(criteria.brokerName);
+      const { firstname, lastname } = splitName(criteria.brokerName);
-      if (firstname === lastname) {
+      if (firstname === lastname) {
-        // Single word: search either first OR last name
+        // Single word: search either first OR last name
-        whereConditions.push(
+        whereConditions.push(
-          sql`((${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} OR (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`})`
+          sql`((${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} OR (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`})`
-        );
+        );
-      } else {
+      } else {
-        // Multiple words: search both first AND last name
+        // Multiple words: search both first AND last name
-        whereConditions.push(
+        whereConditions.push(
-          sql`((${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} AND (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`})`
+          sql`((${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} AND (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`})`
-        );
+        );
-      }
+      }
-    }
+    }
-
+
-    if (user?.role !== 'admin') {
+    if (user?.role !== 'admin') {
-      whereConditions.push(
+      whereConditions.push(
-        sql`((${commercials_json.email} = ${user?.email || null}) OR (${commercials_json.data}->>'draft')::boolean IS NOT TRUE)`
+        sql`((${commercials_json.email} = ${user?.email || null}) OR (${commercials_json.data}->>'draft')::boolean IS NOT TRUE)`
-      );
+      );
-    }
+    }
-    this.logger.warn('whereConditions count', { count: whereConditions.length });
+    this.logger.warn('whereConditions count', { count: whereConditions.length });
-    return whereConditions;
+    return whereConditions;
-  }
+  }
-  // #### Find by criteria ########################################
+  // #### Find by criteria ########################################
-  async searchCommercialProperties(criteria: CommercialPropertyListingCriteria, user: JwtUser): Promise<any> {
+  async searchCommercialProperties(criteria: CommercialPropertyListingCriteria, user: JwtUser): Promise<any> {
-    const start = criteria.start ? criteria.start : 0;
+    const start = criteria.start ? criteria.start : 0;
-    const length = criteria.length ? criteria.length : 12;
+    const length = criteria.length ? criteria.length : 12;
-    const query = this.conn.select({ commercial: commercials_json }).from(commercials_json).leftJoin(schema.users_json, eq(commercials_json.email, schema.users_json.email));
+    const query = this.conn.select({ commercial: commercials_json }).from(commercials_json).leftJoin(schema.users_json, eq(commercials_json.email, schema.users_json.email));
-    const whereConditions = this.getWhereConditions(criteria, user);
+    const whereConditions = this.getWhereConditions(criteria, user);
-
+
-    this.logger.warn('Filter Criteria:', { criteria: JSON.stringify(criteria) });
+    this.logger.warn('Filter Criteria:', { criteria: JSON.stringify(criteria) });
-
+
-    if (whereConditions.length > 0) {
+    if (whereConditions.length > 0) {
-      const whereClause = sql.join(whereConditions, sql` AND `);
+      const whereClause = sql.join(whereConditions, sql` AND `);
-      query.where(sql`(${whereClause})`);
+      query.where(sql`(${whereClause})`);
-
+
-      this.logger.warn('Generated SQL:', { sql: query.toSQL().sql, params: query.toSQL().params });
+      this.logger.warn('Generated SQL:', { sql: query.toSQL().sql, params: query.toSQL().params });
-    }
+    }
-    // Sortierung
+    // Sortierung
-    switch (criteria.sortBy) {
+    switch (criteria.sortBy) {
-      case 'priceAsc':
+      case 'priceAsc':
-        query.orderBy(asc(sql`(${commercials_json.data}->>'price')::double precision`));
+        query.orderBy(asc(sql`(${commercials_json.data}->>'price')::double precision`));
-        break;
+        break;
-      case 'priceDesc':
+      case 'priceDesc':
-        query.orderBy(desc(sql`(${commercials_json.data}->>'price')::double precision`));
+        query.orderBy(desc(sql`(${commercials_json.data}->>'price')::double precision`));
-        break;
+        break;
-      case 'creationDateFirst':
+      case 'creationDateFirst':
-        query.orderBy(asc(sql`${commercials_json.data}->>'created'`));
+        query.orderBy(asc(sql`${commercials_json.data}->>'created'`));
-        break;
+        break;
-      case 'creationDateLast':
+      case 'creationDateLast':
-        query.orderBy(desc(sql`${commercials_json.data}->>'created'`));
+        query.orderBy(desc(sql`${commercials_json.data}->>'created'`));
-        break;
+        break;
-      default:
+      default:
-        // Keine spezifische Sortierung, Standardverhalten kann hier eingefügt werden
+        // Keine spezifische Sortierung, Standardverhalten kann hier eingefügt werden
-        break;
+        break;
-    }
+    }
-
+
-    // Paginierung
+    // Paginierung
-    query.limit(length).offset(start);
+    query.limit(length).offset(start);
-
+
-    const data = await query;
+    const data = await query;
-    const results = data.map(r => ({ id: r.commercial.id, email: r.commercial.email, ...(r.commercial.data as CommercialPropertyListing) }));
+    const results = data.map(r => ({ id: r.commercial.id, email: r.commercial.email, ...(r.commercial.data as CommercialPropertyListing) }));
-    const totalCount = await this.getCommercialPropertiesCount(criteria, user);
+    const totalCount = await this.getCommercialPropertiesCount(criteria, user);
-
+
-    return {
+    return {
-      results,
+      results,
-      totalCount,
+      totalCount,
-    };
+    };
-  }
+  }
-  async getCommercialPropertiesCount(criteria: CommercialPropertyListingCriteria, user: JwtUser): Promise<number> {
+  async getCommercialPropertiesCount(criteria: CommercialPropertyListingCriteria, user: JwtUser): Promise<number> {
-    const countQuery = this.conn.select({ value: count() }).from(commercials_json).leftJoin(schema.users_json, eq(commercials_json.email, schema.users_json.email));
+    const countQuery = this.conn.select({ value: count() }).from(commercials_json).leftJoin(schema.users_json, eq(commercials_json.email, schema.users_json.email));
-    const whereConditions = this.getWhereConditions(criteria, user);
+    const whereConditions = this.getWhereConditions(criteria, user);
-
+
-    if (whereConditions.length > 0) {
+    if (whereConditions.length > 0) {
-      const whereClause = sql.join(whereConditions, sql` AND `);
+      const whereClause = sql.join(whereConditions, sql` AND `);
-      countQuery.where(sql`(${whereClause})`);
+      countQuery.where(sql`(${whereClause})`);
-    }
+    }
-
+
-    const [{ value: totalCount }] = await countQuery;
+    const [{ value: totalCount }] = await countQuery;
-    return totalCount;
+    return totalCount;
-  }
+  }
-
+
-  // #### Find by ID ########################################
+  // #### Find by ID ########################################
-  /**
+  /**
-   * Find commercial property by slug or ID
+   * Find commercial property by slug or ID
-   * Supports both slug (e.g., "office-space-austin-tx-a3f7b2c1") and UUID
+   * Supports both slug (e.g., "office-space-austin-tx-a3f7b2c1") and UUID
-   */
+   */
-  async findCommercialBySlugOrId(slugOrId: string, user: JwtUser): Promise<CommercialPropertyListing> {
+  async findCommercialBySlugOrId(slugOrId: string, user: JwtUser): Promise<CommercialPropertyListing> {
-    this.logger.debug(`findCommercialBySlugOrId called with: ${slugOrId}`);
+    this.logger.debug(`findCommercialBySlugOrId called with: ${slugOrId}`);
-
+
-    let id = slugOrId;
+    let id = slugOrId;
-
+
-    // Check if it's a slug (contains multiple hyphens) vs UUID
+    // Check if it's a slug (contains multiple hyphens) vs UUID
-    if (isSlug(slugOrId)) {
+    if (isSlug(slugOrId)) {
-      this.logger.debug(`Detected as slug: ${slugOrId}`);
+      this.logger.debug(`Detected as slug: ${slugOrId}`);
-
+
-      // Extract short ID from slug and find by slug field
+      // Extract short ID from slug and find by slug field
-      const listing = await this.findCommercialBySlug(slugOrId);
+      const listing = await this.findCommercialBySlug(slugOrId);
-      if (listing) {
+      if (listing) {
-        this.logger.debug(`Found listing by slug: ${slugOrId} -> ID: ${listing.id}`);
+        this.logger.debug(`Found listing by slug: ${slugOrId} -> ID: ${listing.id}`);
-        id = listing.id;
+        id = listing.id;
-      } else {
+      } else {
-        this.logger.warn(`Slug not found in database: ${slugOrId}`);
+        this.logger.warn(`Slug not found in database: ${slugOrId}`);
-        throw new NotFoundException(
+        throw new NotFoundException(
-          `Commercial property listing not found with slug: ${slugOrId}. ` +
+          `Commercial property listing not found with slug: ${slugOrId}. ` +
-          `The listing may have been deleted or the URL may be incorrect.`
+          `The listing may have been deleted or the URL may be incorrect.`
-        );
+        );
-      }
+      }
-    } else {
+    } else {
-      this.logger.debug(`Detected as UUID: ${slugOrId}`);
+      this.logger.debug(`Detected as UUID: ${slugOrId}`);
-    }
+    }
-
+
-    return this.findCommercialPropertiesById(id, user);
+    return this.findCommercialPropertiesById(id, user);
-  }
+  }
-
+
-  /**
+  /**
-   * Find commercial property by slug
+   * Find commercial property by slug
-   */
+   */
-  async findCommercialBySlug(slug: string): Promise<CommercialPropertyListing | null> {
+  async findCommercialBySlug(slug: string): Promise<CommercialPropertyListing | null> {
-    const result = await this.conn
+    const result = await this.conn
-      .select()
+      .select()
-      .from(commercials_json)
+      .from(commercials_json)
-      .where(sql`${commercials_json.data}->>'slug' = ${slug}`)
+      .where(sql`${commercials_json.data}->>'slug' = ${slug}`)
-      .limit(1);
+      .limit(1);
-
+
-    if (result.length > 0) {
+    if (result.length > 0) {
-      return { id: result[0].id, email: result[0].email, ...(result[0].data as CommercialPropertyListing) } as CommercialPropertyListing;
+      return { id: result[0].id, email: result[0].email, ...(result[0].data as CommercialPropertyListing) } as CommercialPropertyListing;
-    }
+    }
-    return null;
+    return null;
-  }
+  }
-
+
-  async findCommercialPropertiesById(id: string, user: JwtUser): Promise<CommercialPropertyListing> {
+  async findCommercialPropertiesById(id: string, user: JwtUser): Promise<CommercialPropertyListing> {
-    const conditions = [];
+    const conditions = [];
-    if (user?.role !== 'admin') {
+    if (user?.role !== 'admin') {
-      conditions.push(or(eq(commercials_json.email, user?.email), sql`(${commercials_json.data}->>'draft')::boolean IS NOT TRUE`));
+      conditions.push(or(eq(commercials_json.email, user?.email), sql`(${commercials_json.data}->>'draft')::boolean IS NOT TRUE`));
-    }
+    }
-    conditions.push(eq(commercials_json.id, id));
+    conditions.push(eq(commercials_json.id, id));
-    const result = await this.conn
+    const result = await this.conn
-      .select()
+      .select()
-      .from(commercials_json)
+      .from(commercials_json)
-      .where(and(...conditions));
+      .where(and(...conditions));
-    if (result.length > 0) {
+    if (result.length > 0) {
-      return { id: result[0].id, email: result[0].email, ...(result[0].data as CommercialPropertyListing) } as CommercialPropertyListing;
+      return { id: result[0].id, email: result[0].email, ...(result[0].data as CommercialPropertyListing) } as CommercialPropertyListing;
-    } else {
+    } else {
-      throw new BadRequestException(`No entry available for ${id}`);
+      throw new BadRequestException(`No entry available for ${id}`);
-    }
+    }
-  }
+  }
-
+
-  // #### Find by User EMail ########################################
+  // #### Find by User EMail ########################################
-  async findCommercialPropertiesByEmail(email: string, user: JwtUser): Promise<CommercialPropertyListing[]> {
+  async findCommercialPropertiesByEmail(email: string, user: JwtUser): Promise<CommercialPropertyListing[]> {
-    const conditions = [];
+    const conditions = [];
-    conditions.push(eq(commercials_json.email, email));
+    conditions.push(eq(commercials_json.email, email));
-    if (email !== user?.email && user?.role !== 'admin') {
+    if (email !== user?.email && user?.role !== 'admin') {
-      conditions.push(sql`(${commercials_json.data}->>'draft')::boolean IS NOT TRUE`);
+      conditions.push(sql`(${commercials_json.data}->>'draft')::boolean IS NOT TRUE`);
-    }
+    }
-    const listings = await this.conn
+    const listings = await this.conn
-      .select()
+      .select()
-      .from(commercials_json)
+      .from(commercials_json)
-      .where(and(...conditions));
+      .where(and(...conditions));
-    return listings.map(l => ({ id: l.id, email: l.email, ...(l.data as CommercialPropertyListing) }) as CommercialPropertyListing);
+    return listings.map(l => ({ id: l.id, email: l.email, ...(l.data as CommercialPropertyListing) }) as CommercialPropertyListing);
-  }
+  }
-  // #### Find Favorites ########################################
+  // #### Find Favorites ########################################
-  async findFavoriteListings(user: JwtUser): Promise<CommercialPropertyListing[]> {
+  async findFavoriteListings(user: JwtUser): Promise<CommercialPropertyListing[]> {
-    const userFavorites = await this.conn
+    const userFavorites = await this.conn
-      .select()
+      .select()
-      .from(commercials_json)
+      .from(commercials_json)
-      .where(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);
+    return userFavorites.map(l => ({ id: l.id, email: l.email, ...(l.data as CommercialPropertyListing) }) as CommercialPropertyListing);
-  }
+  }
-  // #### Find by imagePath ########################################
+  // #### Find by imagePath ########################################
-  async findByImagePath(imagePath: string, serial: string): Promise<CommercialPropertyListing> {
+  async findByImagePath(imagePath: string, serial: string): Promise<CommercialPropertyListing> {
-    const result = await this.conn
+    const result = await this.conn
-      .select()
+      .select()
-      .from(commercials_json)
+      .from(commercials_json)
-      .where(and(sql`(${commercials_json.data}->>'imagePath') = ${imagePath}`, sql`(${commercials_json.data}->>'serialId')::integer = ${serial}`));
+      .where(and(sql`(${commercials_json.data}->>'imagePath') = ${imagePath}`, sql`(${commercials_json.data}->>'serialId')::integer = ${serial}`));
-    if (result.length > 0) {
+    if (result.length > 0) {
-      return { id: result[0].id, email: result[0].email, ...(result[0].data as CommercialPropertyListing) } as CommercialPropertyListing;
+      return { id: result[0].id, email: result[0].email, ...(result[0].data as CommercialPropertyListing) } as CommercialPropertyListing;
-    }
+    }
-  }
+  }
-  // #### CREATE ########################################
+  // #### CREATE ########################################
-  async createListing(data: CommercialPropertyListing): Promise<CommercialPropertyListing> {
+  async createListing(data: CommercialPropertyListing): Promise<CommercialPropertyListing> {
-    try {
+    try {
-      // Generate serialId based on timestamp + random number (temporary solution until sequence is created)
+      // Generate serialId based on timestamp + random number (temporary solution until sequence is created)
-      // This ensures uniqueness without requiring a database sequence
+      // This ensures uniqueness without requiring a database sequence
-      const serialId = Date.now() % 1000000 + Math.floor(Math.random() * 1000);
+      const serialId = Date.now() % 1000000 + Math.floor(Math.random() * 1000);
-
+
-      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
+      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
-      data.updated = new Date();
+      data.updated = new Date();
-      data.serialId = Number(serialId);
+      data.serialId = Number(serialId);
-      CommercialPropertyListingSchema.parse(data);
+      CommercialPropertyListingSchema.parse(data);
-      const { id, email, ...rest } = data;
+      const { id, email, ...rest } = data;
-      const convertedCommercialPropertyListing = { email, data: rest };
+      const convertedCommercialPropertyListing = { email, data: rest };
-      const [createdListing] = await this.conn.insert(commercials_json).values(convertedCommercialPropertyListing).returning();
+      const [createdListing] = await this.conn.insert(commercials_json).values(convertedCommercialPropertyListing).returning();
-
+
-      // Generate and update slug after creation (we need the ID first)
+      // Generate and update slug after creation (we need the ID first)
-      const slug = generateSlug(data.title, data.location, createdListing.id);
+      const slug = generateSlug(data.title, data.location, createdListing.id);
-      const listingWithSlug = { ...(createdListing.data as any), slug };
+      const listingWithSlug = { ...(createdListing.data as any), slug };
-      await this.conn.update(commercials_json).set({ data: listingWithSlug }).where(eq(commercials_json.id, createdListing.id));
+      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;
+      return { id: createdListing.id, email: createdListing.email, ...(createdListing.data as CommercialPropertyListing), slug } as any;
-    } catch (error) {
+    } catch (error) {
-      if (error instanceof ZodError) {
+      if (error instanceof ZodError) {
-        const filteredErrors = error.errors
+        const filteredErrors = error.errors
-          .map(item => ({
+          .map(item => ({
-            ...item,
+            ...item,
-            field: item.path[0],
+            field: item.path[0],
-          }))
+          }))
-          .filter((item, index, self) => index === self.findIndex(t => t.path[0] === item.path[0]));
+          .filter((item, index, self) => index === self.findIndex(t => t.path[0] === item.path[0]));
-        throw new BadRequestException(filteredErrors);
+        throw new BadRequestException(filteredErrors);
-      }
+      }
-      throw error;
+      throw error;
-    }
+    }
-  }
+  }
-  // #### UPDATE CommercialProps ########################################
+  // #### UPDATE CommercialProps ########################################
-  async updateCommercialPropertyListing(id: string, data: CommercialPropertyListing, user: JwtUser): Promise<CommercialPropertyListing> {
+  async updateCommercialPropertyListing(id: string, data: CommercialPropertyListing, user: JwtUser): Promise<CommercialPropertyListing> {
-    try {
+    try {
-      const [existingListing] = await this.conn.select().from(commercials_json).where(eq(commercials_json.id, id));
+      const [existingListing] = await this.conn.select().from(commercials_json).where(eq(commercials_json.id, id));
-
+
-      if (!existingListing) {
+      if (!existingListing) {
-        throw new NotFoundException(`Business listing with id ${id} not found`);
+        throw new NotFoundException(`Business listing with id ${id} not found`);
-      }
+      }
-      data.updated = new Date();
+      data.updated = new Date();
-      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
+      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
-      if (existingListing.email === user?.email || !user) {
+      if (existingListing.email === user?.email || !user) {
-        data.favoritesForUser = (<CommercialPropertyListing>existingListing.data).favoritesForUser || [];
+        data.favoritesForUser = (<CommercialPropertyListing>existingListing.data).favoritesForUser || [];
-      }
+      }
-
+
-      // Regenerate slug if title or location changed
+      // Regenerate slug if title or location changed
-      const existingData = existingListing.data as CommercialPropertyListing;
+      const existingData = existingListing.data as CommercialPropertyListing;
-      let slug: string;
+      let slug: string;
-      if (data.title !== existingData.title || JSON.stringify(data.location) !== JSON.stringify(existingData.location)) {
+      if (data.title !== existingData.title || JSON.stringify(data.location) !== JSON.stringify(existingData.location)) {
-        slug = generateSlug(data.title, data.location, id);
+        slug = generateSlug(data.title, data.location, id);
-      } else {
+      } else {
-        // Keep existing slug
+        // Keep existing slug
-        slug = (existingData as any).slug || generateSlug(data.title, data.location, id);
+        slug = (existingData as any).slug || generateSlug(data.title, data.location, id);
-      }
+      }
-
+
-      // Add slug to data before validation
+      // Add slug to data before validation
-      const dataWithSlug = { ...data, slug };
+      const dataWithSlug = { ...data, slug };
-      CommercialPropertyListingSchema.parse(dataWithSlug);
+      CommercialPropertyListingSchema.parse(dataWithSlug);
-      const imageOrder = await this.fileService.getPropertyImages(dataWithSlug.imagePath, String(dataWithSlug.serialId));
+      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)));
+      const difference = imageOrder.filter(x => !dataWithSlug.imageOrder.includes(x)).concat(dataWithSlug.imageOrder.filter(x => !imageOrder.includes(x)));
-      if (difference.length > 0) {
+      if (difference.length > 0) {
-        this.logger.warn(`changes between image directory and imageOrder in listing ${dataWithSlug.serialId}: ${difference.join(',')}`);
+        this.logger.warn(`changes between image directory and imageOrder in listing ${dataWithSlug.serialId}: ${difference.join(',')}`);
-        dataWithSlug.imageOrder = imageOrder;
+        dataWithSlug.imageOrder = imageOrder;
-      }
+      }
-      const { id: _, email, ...rest } = dataWithSlug;
+      const { id: _, email, ...rest } = dataWithSlug;
-      const convertedCommercialPropertyListing = { email, data: rest };
+      const convertedCommercialPropertyListing = { email, data: rest };
-      const [updateListing] = await this.conn.update(commercials_json).set(convertedCommercialPropertyListing).where(eq(commercials_json.id, id)).returning();
+      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) };
+      return { id: updateListing.id, email: updateListing.email, ...(updateListing.data as CommercialPropertyListing) };
-    } catch (error) {
+    } catch (error) {
-      if (error instanceof ZodError) {
+      if (error instanceof ZodError) {
-        const filteredErrors = error.errors
+        const filteredErrors = error.errors
-          .map(item => ({
+          .map(item => ({
-            ...item,
+            ...item,
-            field: item.path[0],
+            field: item.path[0],
-          }))
+          }))
-          .filter((item, index, self) => index === self.findIndex(t => t.path[0] === item.path[0]));
+          .filter((item, index, self) => index === self.findIndex(t => t.path[0] === item.path[0]));
-        throw new BadRequestException(filteredErrors);
+        throw new BadRequestException(filteredErrors);
-      }
+      }
-      throw error;
+      throw error;
-    }
+    }
-  }
+  }
-  // ##############################################################
+  // ##############################################################
-  // Images for commercial Properties
+  // Images for commercial Properties
-  // ##############################################################
+  // ##############################################################
-  async deleteImage(imagePath: string, serial: string, name: string) {
+  async deleteImage(imagePath: string, serial: string, name: string) {
-    const listing = await this.findByImagePath(imagePath, serial);
+    const listing = await this.findByImagePath(imagePath, serial);
-    const index = listing.imageOrder.findIndex(im => im === name);
+    const index = listing.imageOrder.findIndex(im => im === name);
-    if (index > -1) {
+    if (index > -1) {
-      listing.imageOrder.splice(index, 1);
+      listing.imageOrder.splice(index, 1);
-      await this.updateCommercialPropertyListing(listing.id, listing, null);
+      await this.updateCommercialPropertyListing(listing.id, listing, null);
-    }
+    }
-  }
+  }
-  async addImage(imagePath: string, serial: string, imagename: string) {
+  async addImage(imagePath: string, serial: string, imagename: string) {
-    const listing = await this.findByImagePath(imagePath, serial);
+    const listing = await this.findByImagePath(imagePath, serial);
-    listing.imageOrder.push(imagename);
+    listing.imageOrder.push(imagename);
-    await this.updateCommercialPropertyListing(listing.id, listing, null);
+    await this.updateCommercialPropertyListing(listing.id, listing, null);
-  }
+  }
-  // #### DELETE  ########################################
+  // #### DELETE  ########################################
-  async deleteListing(id: string): Promise<void> {
+  async deleteListing(id: string): Promise<void> {
-    await this.conn.delete(commercials_json).where(eq(commercials_json.id, id));
+    await this.conn.delete(commercials_json).where(eq(commercials_json.id, id));
-  }
+  }
-  // #### ADD Favorite ######################################
+  // #### ADD Favorite ######################################
-  async addFavorite(id: string, user: JwtUser): Promise<void> {
+  async addFavorite(id: string, user: JwtUser): Promise<void> {
-    await this.conn
+    await this.conn
-      .update(commercials_json)
+      .update(commercials_json)
-      .set({
+      .set({
-        data: sql`jsonb_set(${commercials_json.data}, '{favoritesForUser}',
+        data: sql`jsonb_set(${commercials_json.data}, '{favoritesForUser}',
-          coalesce((${commercials_json.data}->'favoritesForUser')::jsonb, '[]'::jsonb) || to_jsonb(${user.email}::text))`,
+          coalesce((${commercials_json.data}->'favoritesForUser')::jsonb, '[]'::jsonb) || to_jsonb(${user.email}::text))`,
-      })
+      })
-      .where(eq(commercials_json.id, id));
+      .where(eq(commercials_json.id, id));
-  }
+  }
-  // #### DELETE Favorite ###################################
+  // #### DELETE Favorite ###################################
-  async deleteFavorite(id: string, user: JwtUser): Promise<void> {
+  async deleteFavorite(id: string, user: JwtUser): Promise<void> {
-    await this.conn
+    await this.conn
-      .update(commercials_json)
+      .update(commercials_json)
-      .set({
+      .set({
-        data: sql`jsonb_set(${commercials_json.data}, '{favoritesForUser}',
+        data: sql`jsonb_set(${commercials_json.data}, '{favoritesForUser}',
-          (SELECT coalesce(jsonb_agg(elem), '[]'::jsonb)
+          (SELECT coalesce(jsonb_agg(elem), '[]'::jsonb)
-           FROM jsonb_array_elements(coalesce(${commercials_json.data}->'favoritesForUser', '[]'::jsonb)) AS elem
+           FROM jsonb_array_elements(coalesce(${commercials_json.data}->'favoritesForUser', '[]'::jsonb)) AS elem
-           WHERE elem::text != to_jsonb(${user.email}::text)::text))`,
+           WHERE elem::text != to_jsonb(${user.email}::text)::text))`,
-      })
+      })
-      .where(eq(commercials_json.id, id));
+      .where(eq(commercials_json.id, id));
-  }
+  }
-}
+}

bizmatch-server/src/listings/listings.module.ts

@@ -1,24 +1,24 @@
-import { Module } from '@nestjs/common';
+import { Module } from '@nestjs/common';
-import { AuthModule } from '../auth/auth.module';
+import { AuthModule } from '../auth/auth.module';
-import { DrizzleModule } from '../drizzle/drizzle.module';
+import { DrizzleModule } from '../drizzle/drizzle.module';
-import { FileService } from '../file/file.service';
+import { FileService } from '../file/file.service';
-import { UserService } from '../user/user.service';
+import { UserService } from '../user/user.service';
-import { BrokerListingsController } from './broker-listings.controller';
+import { BrokerListingsController } from './broker-listings.controller';
-import { BusinessListingsController } from './business-listings.controller';
+import { BusinessListingsController } from './business-listings.controller';
-import { CommercialPropertyListingsController } from './commercial-property-listings.controller';
+import { CommercialPropertyListingsController } from './commercial-property-listings.controller';
-import { UserListingsController } from './user-listings.controller';
+import { UserListingsController } from './user-listings.controller';
-
+
-import { FirebaseAdminModule } from 'src/firebase-admin/firebase-admin.module';
+import { FirebaseAdminModule } from 'src/firebase-admin/firebase-admin.module';
-import { GeoModule } from '../geo/geo.module';
+import { GeoModule } from '../geo/geo.module';
-import { GeoService } from '../geo/geo.service';
+import { GeoService } from '../geo/geo.service';
-import { BusinessListingService } from './business-listing.service';
+import { BusinessListingService } from './business-listing.service';
-import { CommercialPropertyService } from './commercial-property.service';
+import { CommercialPropertyService } from './commercial-property.service';
-import { UnknownListingsController } from './unknown-listings.controller';
+import { UnknownListingsController } from './unknown-listings.controller';
-
+
-@Module({
+@Module({
-  imports: [DrizzleModule, AuthModule, GeoModule,FirebaseAdminModule],
+  imports: [DrizzleModule, AuthModule, GeoModule,FirebaseAdminModule],
-  controllers: [BusinessListingsController, CommercialPropertyListingsController, UnknownListingsController, BrokerListingsController, UserListingsController],
+  controllers: [BusinessListingsController, CommercialPropertyListingsController, UnknownListingsController, BrokerListingsController, UserListingsController],
-  providers: [BusinessListingService, CommercialPropertyService, FileService, UserService, BusinessListingService, CommercialPropertyService, GeoService],
+  providers: [BusinessListingService, CommercialPropertyService, FileService, UserService, BusinessListingService, CommercialPropertyService, GeoService],
-  exports: [BusinessListingService, CommercialPropertyService],
+  exports: [BusinessListingService, CommercialPropertyService],
-})
+})
-export class ListingsModule {}
+export class ListingsModule {}

bizmatch-server/src/main.ts

@@ -1,27 +1,59 @@
-import { LoggerService } from '@nestjs/common';
+import { LoggerService } from '@nestjs/common';
-import { NestFactory } from '@nestjs/core';
+import { NestFactory } from '@nestjs/core';
-import express from 'express';
+import express from 'express';
-import { WINSTON_MODULE_NEST_PROVIDER } from 'nest-winston';
+import helmet from 'helmet';
-import { AppModule } from './app.module';
+import { WINSTON_MODULE_NEST_PROVIDER } from 'nest-winston';
-
+import { AppModule } from './app.module';
-async function bootstrap() {
+
-  const server = express();
+async function bootstrap() {
-  server.set('trust proxy', true);
+  const server = express();
-  const app = await NestFactory.create(AppModule);
+  server.set('trust proxy', true);
-  // const logger = app.get<Logger>(WINSTON_MODULE_NEST_PROVIDER);
+  const app = await NestFactory.create(AppModule);
-  const logger = app.get<LoggerService>(WINSTON_MODULE_NEST_PROVIDER);
+  // const logger = app.get<Logger>(WINSTON_MODULE_NEST_PROVIDER);
-  app.useLogger(logger);
+  const logger = app.get<LoggerService>(WINSTON_MODULE_NEST_PROVIDER);
-  //app.use('/bizmatch/payment/webhook', bodyParser.raw({ type: 'application/json' }));
+  app.useLogger(logger);
-  // Serve static files from pictures directory
+  //app.use('/bizmatch/payment/webhook', bodyParser.raw({ type: 'application/json' }));
-  app.use('/pictures', express.static('pictures'));
+  // Serve static files from pictures directory
-
+  app.use('/pictures', express.static('pictures'));
-  app.setGlobalPrefix('bizmatch');
+
-
+  app.setGlobalPrefix('bizmatch');
-  app.enableCors({
+
-    origin: '*',
+  app.enableCors({
-    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
+    origin: '*',
-    allowedHeaders: 'Content-Type, Accept, Authorization, x-hide-loading',
+    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
-  });
+    allowedHeaders: 'Content-Type, Accept, Authorization, x-hide-loading',
-  await app.listen(process.env.PORT || 3001);
+  });
-}
+
-bootstrap();
+  // Security Headers with helmet
+  app.use(
+    helmet({
+      contentSecurityPolicy: {
+        directives: {
+          defaultSrc: ["'self'"],
+          scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'", "https://fonts.googleapis.com"],
+          styleSrc: ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
+          imgSrc: ["'self'", "data:", "https:", "blob:"],
+          connectSrc: ["'self'", "https://api.bizmatch.net", "https://*.firebaseapp.com", "https://*.googleapis.com"],
+          fontSrc: ["'self'", "https://fonts.gstatic.com", "data:"],
+          objectSrc: ["'none'"],
+          mediaSrc: ["'self'"],
+          frameSrc: ["'self'"],
+        },
+      },
+      crossOriginEmbedderPolicy: false, // Disable for now to avoid breaking existing functionality
+      hsts: {
+        maxAge: 31536000,
+        includeSubDomains: true,
+        preload: true,
+      },
+      frameguard: {
+        action: 'sameorigin', // Allow same-origin framing
+      },
+      crossOriginOpenerPolicy: { policy: 'same-origin-allow-popups' }, // Allow popups for OAuth
+      crossOriginResourcePolicy: { policy: 'cross-origin' }, // Allow cross-origin resources
+    }),
+  );
+
+  await app.listen(process.env.PORT || 3001);
+}
+bootstrap();

bizmatch-server/src/models/db.model.ts

@@ -1,393 +1,393 @@
-import { z } from 'zod';
+import { z } from 'zod';
-
+
-export interface UserData {
+export interface UserData {
-  id?: string;
+  id?: string;
-  firstname: string;
+  firstname: string;
-  lastname: string;
+  lastname: string;
-  email: string;
+  email: string;
-  phoneNumber?: string;
+  phoneNumber?: string;
-  description?: string;
+  description?: string;
-  companyName?: string;
+  companyName?: string;
-  companyOverview?: string;
+  companyOverview?: string;
-  companyWebsite?: string;
+  companyWebsite?: string;
-  companyLocation?: string;
+  companyLocation?: string;
-  offeredServices?: string;
+  offeredServices?: string;
-  areasServed?: string[];
+  areasServed?: string[];
-  hasProfile?: boolean;
+  hasProfile?: boolean;
-  hasCompanyLogo?: boolean;
+  hasCompanyLogo?: boolean;
-  licensedIn?: string[];
+  licensedIn?: string[];
-  gender?: 'male' | 'female';
+  gender?: 'male' | 'female';
-  customerType?: 'buyer' | 'seller' | 'professional';
+  customerType?: 'buyer' | 'seller' | 'professional';
-  customerSubType?: 'broker' | 'cpa' | 'attorney' | 'titleCompany' | 'surveyor' | 'appraiser';
+  customerSubType?: 'broker' | 'cpa' | 'attorney' | 'titleCompany' | 'surveyor' | 'appraiser';
-  created?: Date;
+  created?: Date;
-  updated?: Date;
+  updated?: Date;
-}
+}
-export type SortByOptions = 'priceAsc' | 'priceDesc' | 'creationDateFirst' | 'creationDateLast' | 'nameAsc' | 'nameDesc' | 'srAsc' | 'srDesc' | 'cfAsc' | 'cfDesc';
+export type SortByOptions = 'priceAsc' | 'priceDesc' | 'creationDateFirst' | 'creationDateLast' | 'nameAsc' | 'nameDesc' | 'srAsc' | 'srDesc' | 'cfAsc' | 'cfDesc';
-export type SortByTypes = 'professional' | 'listing' | 'business' | 'commercial';
+export type SortByTypes = 'professional' | 'listing' | 'business' | 'commercial';
-export type Gender = 'male' | 'female';
+export type Gender = 'male' | 'female';
-export type CustomerType = 'buyer' | 'seller' | 'professional';
+export type CustomerType = 'buyer' | 'seller' | 'professional';
-export type CustomerSubType = 'broker' | 'cpa' | 'attorney' | 'titleCompany' | 'surveyor' | 'appraiser';
+export type CustomerSubType = 'broker' | 'cpa' | 'attorney' | 'titleCompany' | 'surveyor' | 'appraiser';
-export type ListingsCategory = 'commercialProperty' | 'business';
+export type ListingsCategory = 'commercialProperty' | 'business';
-
+
-export const GenderEnum = z.enum(['male', 'female']);
+export const GenderEnum = z.enum(['male', 'female']);
-export const CustomerTypeEnum = z.enum(['buyer', 'seller', 'professional']);
+export const CustomerTypeEnum = z.enum(['buyer', 'seller', 'professional']);
-export const SubscriptionTypeEnum = z.enum(['free', 'professional', 'broker']);
+export const SubscriptionTypeEnum = z.enum(['free', 'professional', 'broker']);
-export const CustomerSubTypeEnum = z.enum(['broker', 'cpa', 'attorney', 'titleCompany', 'surveyor', 'appraiser']);
+export const CustomerSubTypeEnum = z.enum(['broker', 'cpa', 'attorney', 'titleCompany', 'surveyor', 'appraiser']);
-export const ListingsCategoryEnum = z.enum(['commercialProperty', 'business']);
+export const ListingsCategoryEnum = z.enum(['commercialProperty', 'business']);
-export const ShareCategoryEnum = z.enum(['commercialProperty', 'business', 'user']);
+export const ShareCategoryEnum = z.enum(['commercialProperty', 'business', 'user']);
-export const ZodEventTypeEnum = z.enum(['view', 'print', 'email', 'facebook', 'x', 'linkedin', 'contact', 'favorite', 'emailus', 'pricing']);
+export const ZodEventTypeEnum = z.enum(['view', 'print', 'email', 'facebook', 'x', 'linkedin', 'contact', 'favorite', 'emailus', 'pricing']);
-export type EventTypeEnum = z.infer<typeof ZodEventTypeEnum>;
+export type EventTypeEnum = z.infer<typeof ZodEventTypeEnum>;
-const PropertyTypeEnum = z.enum(['retail', 'land', 'industrial', 'office', 'mixedUse', 'multifamily', 'uncategorized']);
+const PropertyTypeEnum = z.enum(['retail', 'land', 'industrial', 'office', 'mixedUse', 'multifamily', 'uncategorized']);
-const TypeEnum = z.enum([
+const TypeEnum = z.enum([
-  'automotive',
+  'automotive',
-  'industrialServices',
+  'industrialServices',
-  'foodAndRestaurant',
+  'foodAndRestaurant',
-  'realEstate',
+  'realEstate',
-  'retail',
+  'retail',
-  'oilfield',
+  'oilfield',
-  'service',
+  'service',
-  'advertising',
+  'advertising',
-  'agriculture',
+  'agriculture',
-  'franchise',
+  'franchise',
-  'professional',
+  'professional',
-  'manufacturing',
+  'manufacturing',
-  'uncategorized',
+  'uncategorized',
-]);
+]);
-
+
-const USStates = z.enum([
+const USStates = z.enum([
-  'AL',
+  'AL',
-  'AK',
+  'AK',
-  'AZ',
+  'AZ',
-  'AR',
+  'AR',
-  'CA',
+  'CA',
-  'CO',
+  'CO',
-  'CT',
+  'CT',
-  'DC',
+  'DC',
-  'DE',
+  'DE',
-  'FL',
+  'FL',
-  'GA',
+  'GA',
-  'HI',
+  'HI',
-  'ID',
+  'ID',
-  'IL',
+  'IL',
-  'IN',
+  'IN',
-  'IA',
+  'IA',
-  'KS',
+  'KS',
-  'KY',
+  'KY',
-  'LA',
+  'LA',
-  'ME',
+  'ME',
-  'MD',
+  'MD',
-  'MA',
+  'MA',
-  'MI',
+  'MI',
-  'MN',
+  'MN',
-  'MS',
+  'MS',
-  'MO',
+  'MO',
-  'MT',
+  'MT',
-  'NE',
+  'NE',
-  'NV',
+  'NV',
-  'NH',
+  'NH',
-  'NJ',
+  'NJ',
-  'NM',
+  'NM',
-  'NY',
+  'NY',
-  'NC',
+  'NC',
-  'ND',
+  'ND',
-  'OH',
+  'OH',
-  'OK',
+  'OK',
-  'OR',
+  'OR',
-  'PA',
+  'PA',
-  'RI',
+  'RI',
-  'SC',
+  'SC',
-  'SD',
+  'SD',
-  'TN',
+  'TN',
-  'TX',
+  'TX',
-  'UT',
+  'UT',
-  'VT',
+  'VT',
-  'VA',
+  'VA',
-  'WA',
+  'WA',
-  'WV',
+  'WV',
-  'WI',
+  'WI',
-  'WY',
+  'WY',
-]);
+]);
-export const AreasServedSchema = z.object({
+export const AreasServedSchema = z.object({
-  county: z.string().optional().nullable(),
+  county: z.string().optional().nullable(),
-  state: z
+  state: z
-    .string()
+    .string()
-    .nullable()
+    .nullable()
-    .refine(val => val !== null && val !== '', {
+    .refine(val => val !== null && val !== '', {
-      message: 'State is required',
+      message: 'State is required',
-    }),
+    }),
-});
+});
-
+
-export const LicensedInSchema = z.object({
+export const LicensedInSchema = z.object({
-  state: z
+  state: z
-    .string()
+    .string()
-    .nullable()
+    .nullable()
-    .refine(val => val !== null && val !== '', {
+    .refine(val => val !== null && val !== '', {
-      message: 'State is required',
+      message: 'State is required',
-    }),
+    }),
-  registerNo: z.string().nonempty('License number is required'),
+  registerNo: z.string().nonempty('License number is required'),
-});
+});
-export const GeoSchema = z
+export const GeoSchema = z
-  .object({
+  .object({
-    name: z.string().optional().nullable(),
+    name: z.string().optional().nullable(),
-    state: z.string().refine(val => USStates.safeParse(val).success, {
+    state: z.string().refine(val => USStates.safeParse(val).success, {
-      message: 'Invalid state. Must be a valid 2-letter US state code.',
+      message: 'Invalid state. Must be a valid 2-letter US state code.',
-    }),
+    }),
-    latitude: z.number().refine(
+    latitude: z.number().refine(
-      value => {
+      value => {
-        return value >= -90 && value <= 90;
+        return value >= -90 && value <= 90;
-      },
+      },
-      {
+      {
-        message: 'Latitude muss zwischen -90 und 90 liegen',
+        message: 'Latitude muss zwischen -90 und 90 liegen',
-      },
+      },
-    ),
+    ),
-    longitude: z.number().refine(
+    longitude: z.number().refine(
-      value => {
+      value => {
-        return value >= -180 && value <= 180;
+        return value >= -180 && value <= 180;
-      },
+      },
-      {
+      {
-        message: 'Longitude muss zwischen -180 und 180 liegen',
+        message: 'Longitude muss zwischen -180 und 180 liegen',
-      },
+      },
-    ),
+    ),
-    county: z.string().optional().nullable(),
+    county: z.string().optional().nullable(),
-    housenumber: z.string().optional().nullable(),
+    housenumber: z.string().optional().nullable(),
-    street: z.string().optional().nullable(),
+    street: z.string().optional().nullable(),
-    zipCode: z.number().optional().nullable(),
+    zipCode: z.number().optional().nullable(),
-  })
+  })
-  .superRefine((data, ctx) => {
+  .superRefine((data, ctx) => {
-    if (!data.state) {
+    if (!data.state) {
-      ctx.addIssue({
+      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
+        code: z.ZodIssueCode.custom,
-        message: 'You need to select at least a state',
+        message: 'You need to select at least a state',
-        path: ['name'],
+        path: ['name'],
-      });
+      });
-    }
+    }
-  });
+  });
-const phoneRegex = /^(\+1|1)?[-.\s]?\(?[2-9]\d{2}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/;
+const phoneRegex = /^(\+1|1)?[-.\s]?\(?[2-9]\d{2}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/;
-export const UserSchema = z
+export const UserSchema = z
-  .object({
+  .object({
-    id: z.string().uuid().optional().nullable(),
+    id: z.string().uuid().optional().nullable(),
-    firstname: z.string().min(3, { message: 'First name must contain at least 2 characters' }),
+    firstname: z.string().min(3, { message: 'First name must contain at least 2 characters' }),
-    lastname: z.string().min(3, { message: 'Last name must contain at least 2 characters' }),
+    lastname: z.string().min(3, { message: 'Last name must contain at least 2 characters' }),
-    email: z.string().email({ message: 'Invalid email address' }),
+    email: z.string().email({ message: 'Invalid email address' }),
-    phoneNumber: z.string().optional().nullable(),
+    phoneNumber: z.string().optional().nullable(),
-    description: z.string().optional().nullable(),
+    description: z.string().optional().nullable(),
-    companyName: z.string().optional().nullable(),
+    companyName: z.string().optional().nullable(),
-    companyOverview: z.string().optional().nullable(),
+    companyOverview: z.string().optional().nullable(),
-    companyWebsite: z.string().url({ message: 'Invalid URL format' }).optional().nullable(),
+    companyWebsite: z.string().url({ message: 'Invalid URL format' }).optional().nullable(),
-    location: GeoSchema.optional().nullable(),
+    location: GeoSchema.optional().nullable(),
-    offeredServices: z.string().optional().nullable(),
+    offeredServices: z.string().optional().nullable(),
-    areasServed: z.array(AreasServedSchema).optional().nullable(),
+    areasServed: z.array(AreasServedSchema).optional().nullable(),
-    hasProfile: z.boolean().optional().nullable(),
+    hasProfile: z.boolean().optional().nullable(),
-    hasCompanyLogo: z.boolean().optional().nullable(),
+    hasCompanyLogo: z.boolean().optional().nullable(),
-    licensedIn: z.array(LicensedInSchema).optional().nullable(),
+    licensedIn: z.array(LicensedInSchema).optional().nullable(),
-    gender: GenderEnum.optional().nullable(),
+    gender: GenderEnum.optional().nullable(),
-    customerType: CustomerTypeEnum,
+    customerType: CustomerTypeEnum,
-    customerSubType: CustomerSubTypeEnum.optional().nullable(),
+    customerSubType: CustomerSubTypeEnum.optional().nullable(),
-    created: z.date().optional().nullable(),
+    created: z.date().optional().nullable(),
-    updated: z.date().optional().nullable(),
+    updated: z.date().optional().nullable(),
-    subscriptionId: z.string().optional().nullable(),
+    subscriptionId: z.string().optional().nullable(),
-    subscriptionPlan: SubscriptionTypeEnum.optional().nullable(),
+    subscriptionPlan: SubscriptionTypeEnum.optional().nullable(),
-    favoritesForUser: z.array(z.string()),
+    favoritesForUser: z.array(z.string()),
-    showInDirectory: z.boolean(),
+    showInDirectory: z.boolean(),
-  })
+  })
-  .superRefine((data, ctx) => {
+  .superRefine((data, ctx) => {
-    if (data.customerType === 'professional') {
+    if (data.customerType === 'professional') {
-      if (!data.customerSubType) {
+      if (!data.customerSubType) {
-        ctx.addIssue({
+        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
+          code: z.ZodIssueCode.custom,
-          message: 'Customer subtype is required for professional customers',
+          message: 'Customer subtype is required for professional customers',
-          path: ['customerSubType'],
+          path: ['customerSubType'],
-        });
+        });
-      }
+      }
-      if (!data.companyName || data.companyName.length < 6) {
+      if (!data.companyName || data.companyName.length < 6) {
-        ctx.addIssue({
+        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
+          code: z.ZodIssueCode.custom,
-          message: 'Company Name must contain at least 6 characters for professional customers',
+          message: 'Company Name must contain at least 6 characters for professional customers',
-          path: ['companyName'],
+          path: ['companyName'],
-        });
+        });
-      }
+      }
-      if (!data.phoneNumber || !phoneRegex.test(data.phoneNumber)) {
+      if (!data.phoneNumber || !phoneRegex.test(data.phoneNumber)) {
-        ctx.addIssue({
+        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
+          code: z.ZodIssueCode.custom,
-          message: 'Phone number is required and must be in US format (XXX) XXX-XXXX for professional customers',
+          message: 'Phone number is required and must be in US format (XXX) XXX-XXXX for professional customers',
-          path: ['phoneNumber'],
+          path: ['phoneNumber'],
-        });
+        });
-      }
+      }
-
+
-      if (!data.companyOverview || data.companyOverview.length < 10) {
+      if (!data.companyOverview || data.companyOverview.length < 10) {
-        ctx.addIssue({
+        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
+          code: z.ZodIssueCode.custom,
-          message: 'Company overview must contain at least 10 characters for professional customers',
+          message: 'Company overview must contain at least 10 characters for professional customers',
-          path: ['companyOverview'],
+          path: ['companyOverview'],
-        });
+        });
-      }
+      }
-
+
-      if (!data.description || data.description.length < 10) {
+      if (!data.description || data.description.length < 10) {
-        ctx.addIssue({
+        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
+          code: z.ZodIssueCode.custom,
-          message: 'Description must contain at least 10 characters for professional customers',
+          message: 'Description must contain at least 10 characters for professional customers',
-          path: ['description'],
+          path: ['description'],
-        });
+        });
-      }
+      }
-
+
-      if (!data.offeredServices || data.offeredServices.length < 10) {
+      if (!data.offeredServices || data.offeredServices.length < 10) {
-        ctx.addIssue({
+        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
+          code: z.ZodIssueCode.custom,
-          message: 'Offered services must contain at least 10 characters for professional customers',
+          message: 'Offered services must contain at least 10 characters for professional customers',
-          path: ['offeredServices'],
+          path: ['offeredServices'],
-        });
+        });
-      }
+      }
-
+
-      if (!data.location) {
+      if (!data.location) {
-        ctx.addIssue({
+        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
+          code: z.ZodIssueCode.custom,
-          message: 'Company location is required for professional customers',
+          message: 'Company location is required for professional customers',
-          path: ['location'],
+          path: ['location'],
-        });
+        });
-      }
+      }
-
+
-      if (!data.areasServed || data.areasServed.length < 1) {
+      if (!data.areasServed || data.areasServed.length < 1) {
-        ctx.addIssue({
+        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
+          code: z.ZodIssueCode.custom,
-          message: 'At least one area served is required for professional customers',
+          message: 'At least one area served is required for professional customers',
-          path: ['areasServed'],
+          path: ['areasServed'],
-        });
+        });
-      }
+      }
-    }
+    }
-  });
+  });
-
+
-export type AreasServed = z.infer<typeof AreasServedSchema>;
+export type AreasServed = z.infer<typeof AreasServedSchema>;
-export type LicensedIn = z.infer<typeof LicensedInSchema>;
+export type LicensedIn = z.infer<typeof LicensedInSchema>;
-export type User = z.infer<typeof UserSchema>;
+export type User = z.infer<typeof UserSchema>;
-
+
-export const BusinessListingSchema = z
+export const BusinessListingSchema = z
-  .object({
+  .object({
-    id: z.string().uuid().optional().nullable(),
+    id: z.string().uuid().optional().nullable(),
-    email: z.string().email(),
+    email: z.string().email(),
-    type: z.string().refine(val => TypeEnum.safeParse(val).success, {
+    type: z.string().refine(val => TypeEnum.safeParse(val).success, {
-      message: 'Invalid type. Must be one of: ' + TypeEnum.options.join(', '),
+      message: 'Invalid type. Must be one of: ' + TypeEnum.options.join(', '),
-    }),
+    }),
-    title: z.string().min(10),
+    title: z.string().min(10),
-    description: z.string().min(10),
+    description: z.string().min(10),
-    location: GeoSchema,
+    location: GeoSchema,
-    price: z.number().positive().optional().nullable(),
+    price: z.number().positive().optional().nullable(),
-    favoritesForUser: z.array(z.string()),
+    favoritesForUser: z.array(z.string()),
-    draft: z.boolean(),
+    draft: z.boolean(),
-    listingsCategory: ListingsCategoryEnum,
+    listingsCategory: ListingsCategoryEnum,
-    realEstateIncluded: z.boolean().optional().nullable(),
+    realEstateIncluded: z.boolean().optional().nullable(),
-    leasedLocation: z.boolean().optional().nullable(),
+    leasedLocation: z.boolean().optional().nullable(),
-    franchiseResale: z.boolean().optional().nullable(),
+    franchiseResale: z.boolean().optional().nullable(),
-    salesRevenue: z.number().positive().nullable(),
+    salesRevenue: z.number().positive().nullable(),
-    cashFlow: z.number().optional().nullable(),
+    cashFlow: z.number().optional().nullable(),
-    ffe: z.number().optional().nullable(),
+    ffe: z.number().optional().nullable(),
-    inventory: z.number().optional().nullable(),
+    inventory: z.number().optional().nullable(),
-    supportAndTraining: z.string().min(5).optional().nullable(),
+    supportAndTraining: z.string().min(5).optional().nullable(),
-    employees: z.number().int().positive().max(100000).optional().nullable(),
+    employees: z.number().int().positive().max(100000).optional().nullable(),
-    established: z.number().int().min(1).max(250).optional().nullable(),
+    established: z.number().int().min(1).max(250).optional().nullable(),
-    internalListingNumber: z.number().int().positive().optional().nullable(),
+    internalListingNumber: z.number().int().positive().optional().nullable(),
-    reasonForSale: z.string().min(5).optional().nullable(),
+    reasonForSale: z.string().min(5).optional().nullable(),
-    brokerLicencing: z.string().optional().nullable(),
+    brokerLicencing: z.string().optional().nullable(),
-    internals: z.string().min(5).optional().nullable(),
+    internals: z.string().min(5).optional().nullable(),
-    imageName: z.string().optional().nullable(),
+    imageName: z.string().optional().nullable(),
-    slug: z.string().optional().nullable(),
+    slug: z.string().optional().nullable(),
-    created: z.date(),
+    created: z.date(),
-    updated: z.date(),
+    updated: z.date(),
-  })
+  })
-  .superRefine((data, ctx) => {
+  .superRefine((data, ctx) => {
-    if (data.price && data.price > 1000000000) {
+    if (data.price && data.price > 1000000000) {
-      ctx.addIssue({
+      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
+        code: z.ZodIssueCode.custom,
-        message: 'Price must less than or equal $1,000,000,000',
+        message: 'Price must less than or equal $1,000,000,000',
-        path: ['price'],
+        path: ['price'],
-      });
+      });
-    }
+    }
-    if (data.salesRevenue && data.salesRevenue > 100000000) {
+    if (data.salesRevenue && data.salesRevenue > 100000000) {
-      ctx.addIssue({
+      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
+        code: z.ZodIssueCode.custom,
-        message: 'SalesRevenue must less than or equal $100,000,000',
+        message: 'SalesRevenue must less than or equal $100,000,000',
-        path: ['salesRevenue'],
+        path: ['salesRevenue'],
-      });
+      });
-    }
+    }
-    if (data.cashFlow && data.cashFlow > 100000000) {
+    if (data.cashFlow && data.cashFlow > 100000000) {
-      ctx.addIssue({
+      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
+        code: z.ZodIssueCode.custom,
-        message: 'CashFlow must less than or equal $100,000,000',
+        message: 'CashFlow must less than or equal $100,000,000',
-        path: ['cashFlow'],
+        path: ['cashFlow'],
-      });
+      });
-    }
+    }
-  });
+  });
-export type BusinessListing = z.infer<typeof BusinessListingSchema>;
+export type BusinessListing = z.infer<typeof BusinessListingSchema>;
-
+
-export const CommercialPropertyListingSchema = z
+export const CommercialPropertyListingSchema = z
-  .object({
+  .object({
-    id: z.string().uuid().optional().nullable(),
+    id: z.string().uuid().optional().nullable(),
-    serialId: z.number().int().positive().optional().nullable(),
+    serialId: z.number().int().positive().optional().nullable(),
-    email: z.string().email(),
+    email: z.string().email(),
-    type: z.string().refine(val => PropertyTypeEnum.safeParse(val).success, {
+    type: z.string().refine(val => PropertyTypeEnum.safeParse(val).success, {
-      message: 'Invalid type. Must be one of: ' + PropertyTypeEnum.options.join(', '),
+      message: 'Invalid type. Must be one of: ' + PropertyTypeEnum.options.join(', '),
-    }),
+    }),
-    title: z.string().min(10),
+    title: z.string().min(10),
-    description: z.string().min(10),
+    description: z.string().min(10),
-    location: GeoSchema,
+    location: GeoSchema,
-    price: z.number().positive().optional().nullable(),
+    price: z.number().positive().optional().nullable(),
-    favoritesForUser: z.array(z.string()),
+    favoritesForUser: z.array(z.string()),
-    listingsCategory: ListingsCategoryEnum,
+    listingsCategory: ListingsCategoryEnum,
-    internalListingNumber: z.number().int().positive().optional().nullable(),
+    internalListingNumber: z.number().int().positive().optional().nullable(),
-    draft: z.boolean(),
+    draft: z.boolean(),
-    imageOrder: z.array(z.string()),
+    imageOrder: z.array(z.string()),
-    imagePath: z.string().nullable().optional(),
+    imagePath: z.string().nullable().optional(),
-    slug: z.string().optional().nullable(),
+    slug: z.string().optional().nullable(),
-    created: z.date(),
+    created: z.date(),
-    updated: z.date(),
+    updated: z.date(),
-  })
+  })
-  .superRefine((data, ctx) => {
+  .superRefine((data, ctx) => {
-    if (data.price && data.price > 1000000000) {
+    if (data.price && data.price > 1000000000) {
-      ctx.addIssue({
+      ctx.addIssue({
-        code: z.ZodIssueCode.custom,
+        code: z.ZodIssueCode.custom,
-        message: 'Price must less than or equal $1,000,000,000',
+        message: 'Price must less than or equal $1,000,000,000',
-        path: ['price'],
+        path: ['price'],
-      });
+      });
-    }
+    }
-  });
+  });
-
+
-export type CommercialPropertyListing = z.infer<typeof CommercialPropertyListingSchema>;
+export type CommercialPropertyListing = z.infer<typeof CommercialPropertyListingSchema>;
-
+
-export const SenderSchema = z.object({
+export const SenderSchema = z.object({
-  name: z.string().min(6, { message: 'Name must be at least 6 characters long' }),
+  name: z.string().min(6, { message: 'Name must be at least 6 characters long' }),
-  email: z.string().email({ message: 'Invalid email address' }),
+  email: z.string().email({ message: 'Invalid email address' }),
-  phoneNumber: z.string().regex(/^(\+1|1)?[-.\s]?\(?[2-9]\d{2}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/, {
+  phoneNumber: z.string().regex(/^(\+1|1)?[-.\s]?\(?[2-9]\d{2}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/, {
-    message: 'Invalid US phone number format',
+    message: 'Invalid US phone number format',
-  }),
+  }),
-  state: z.string().refine(val => USStates.safeParse(val).success, {
+  state: z.string().refine(val => USStates.safeParse(val).success, {
-    message: 'Invalid state. Must be a valid 2-letter US state code.',
+    message: 'Invalid state. Must be a valid 2-letter US state code.',
-  }),
+  }),
-  comments: z.string().min(10, { message: 'Comments must be at least 10 characters long' }),
+  comments: z.string().min(10, { message: 'Comments must be at least 10 characters long' }),
-});
+});
-export type Sender = z.infer<typeof SenderSchema>;
+export type Sender = z.infer<typeof SenderSchema>;
-export const ShareByEMailSchema = z.object({
+export const ShareByEMailSchema = z.object({
-  yourName: z.string().min(6, { message: 'Name must be at least 6 characters long' }),
+  yourName: z.string().min(6, { message: 'Name must be at least 6 characters long' }),
-  recipientEmail: z.string().email({ message: 'Invalid email address' }),
+  recipientEmail: z.string().email({ message: 'Invalid email address' }),
-  yourEmail: z.string().email({ message: 'Invalid email address' }),
+  yourEmail: z.string().email({ message: 'Invalid email address' }),
-  listingTitle: z.string().optional().nullable(),
+  listingTitle: z.string().optional().nullable(),
-  url: z.string().url({ message: 'Invalid URL format' }).optional().nullable(),
+  url: z.string().url({ message: 'Invalid URL format' }).optional().nullable(),
-  id: z.string().optional().nullable(),
+  id: z.string().optional().nullable(),
-  type: ShareCategoryEnum,
+  type: ShareCategoryEnum,
-});
+});
-export type ShareByEMail = z.infer<typeof ShareByEMailSchema>;
+export type ShareByEMail = z.infer<typeof ShareByEMailSchema>;
-
+
-export const ListingEventSchema = z.object({
+export const ListingEventSchema = z.object({
-  id: z.string().uuid(), // UUID für das Event
+  id: z.string().uuid(), // UUID für das Event
-  listingId: z.string().uuid().optional().nullable(), // UUID für das Listing
+  listingId: z.string().uuid().optional().nullable(), // UUID für das Listing
-  email: z.string().email().optional().nullable(), // EMail des den Benutzer, optional, wenn kein Benutzer eingeloggt ist
+  email: z.string().email().optional().nullable(), // EMail des den Benutzer, optional, wenn kein Benutzer eingeloggt ist
-  eventType: ZodEventTypeEnum, // Die Event-Typen
+  eventType: ZodEventTypeEnum, // Die Event-Typen
-  eventTimestamp: z.string().datetime().or(z.date()), // Der Zeitstempel des Events, kann ein String im ISO-Format oder ein Date-Objekt sein
+  eventTimestamp: z.string().datetime().or(z.date()), // Der Zeitstempel des Events, kann ein String im ISO-Format oder ein Date-Objekt sein
-  userIp: z.string().max(45).optional().nullable(), // IP-Adresse des Benutzers, optional
+  userIp: z.string().max(45).optional().nullable(), // IP-Adresse des Benutzers, optional
-  userAgent: z.string().max(255).optional().nullable(), // User-Agent des Benutzers, optional
+  userAgent: z.string().max(255).optional().nullable(), // User-Agent des Benutzers, optional
-  locationCountry: z.string().max(100).optional().nullable(), // Land, optional
+  locationCountry: z.string().max(100).optional().nullable(), // Land, optional
-  locationCity: z.string().max(100).optional().nullable(), // Stadt, optional
+  locationCity: z.string().max(100).optional().nullable(), // Stadt, optional
-  locationLat: z.string().max(20).optional().nullable(), // Latitude, als String
+  locationLat: z.string().max(20).optional().nullable(), // Latitude, als String
-  locationLng: z.string().max(20).optional().nullable(), // Longitude, als String
+  locationLng: z.string().max(20).optional().nullable(), // Longitude, als String
-  referrer: z.string().max(255).optional().nullable(), // Referrer URL, optional
+  referrer: z.string().max(255).optional().nullable(), // Referrer URL, optional
-  additionalData: z.record(z.string(), z.any()).optional().nullable(), // JSON für zusätzliche Daten, z.B. soziale Medien, optional
+  additionalData: z.record(z.string(), z.any()).optional().nullable(), // JSON für zusätzliche Daten, z.B. soziale Medien, optional
-});
+});
-export type ListingEvent = z.infer<typeof ListingEventSchema>;
+export type ListingEvent = z.infer<typeof ListingEventSchema>;

bizmatch-server/src/models/main.model.ts

@@ -1,430 +1,430 @@
-import { BusinessListing, CommercialPropertyListing, Sender, SortByOptions, SortByTypes, User } from './db.model';
+import { BusinessListing, CommercialPropertyListing, Sender, SortByOptions, SortByTypes, User } from './db.model';
-import { State } from './server.model';
+import { State } from './server.model';
-
+
-export interface StatesResult {
+export interface StatesResult {
-  state: string;
+  state: string;
-  count: number;
+  count: number;
-}
+}
-
+
-export interface KeyValue {
+export interface KeyValue {
-  name: string;
+  name: string;
-  value: string;
+  value: string;
-}
+}
-export interface KeyValueAsSortBy {
+export interface KeyValueAsSortBy {
-  name: string;
+  name: string;
-  value: SortByOptions;
+  value: SortByOptions;
-  type?: SortByTypes;
+  type?: SortByTypes;
-  selectName?: string;
+  selectName?: string;
-}
+}
-export interface KeyValueRatio {
+export interface KeyValueRatio {
-  label: string;
+  label: string;
-  value: number;
+  value: number;
-}
+}
-export interface KeyValueStyle {
+export interface KeyValueStyle {
-  name: string;
+  name: string;
-  value: string;
+  value: string;
-  oldValue?: string;
+  oldValue?: string;
-  icon: string;
+  icon: string;
-  textColorClass: string;
+  textColorClass: string;
-}
+}
-export type SelectOption<T = number> = {
+export type SelectOption<T = number> = {
-  value: T;
+  value: T;
-  label: string;
+  label: string;
-};
+};
-export type ImageType = {
+export type ImageType = {
-  name: 'propertyPicture' | 'companyLogo' | 'profile';
+  name: 'propertyPicture' | 'companyLogo' | 'profile';
-  upload: string;
+  upload: string;
-  delete: string;
+  delete: string;
-};
+};
-export type ListingCategory = {
+export type ListingCategory = {
-  name: 'business' | 'commercialProperty';
+  name: 'business' | 'commercialProperty';
-};
+};
-
+
-export type ListingType = BusinessListing | CommercialPropertyListing;
+export type ListingType = BusinessListing | CommercialPropertyListing;
-
+
-export type ResponseBusinessListingArray = {
+export type ResponseBusinessListingArray = {
-  results: BusinessListing[];
+  results: BusinessListing[];
-  totalCount: number;
+  totalCount: number;
-};
+};
-export type ResponseBusinessListing = {
+export type ResponseBusinessListing = {
-  data: BusinessListing;
+  data: BusinessListing;
-};
+};
-export type ResponseCommercialPropertyListingArray = {
+export type ResponseCommercialPropertyListingArray = {
-  results: CommercialPropertyListing[];
+  results: CommercialPropertyListing[];
-  totalCount: number;
+  totalCount: number;
-};
+};
-export type ResponseCommercialPropertyListing = {
+export type ResponseCommercialPropertyListing = {
-  data: CommercialPropertyListing;
+  data: CommercialPropertyListing;
-};
+};
-export type ResponseUsersArray = {
+export type ResponseUsersArray = {
-  results: User[];
+  results: User[];
-  totalCount: number;
+  totalCount: number;
-};
+};
-export interface ListCriteria {
+export interface ListCriteria {
-  start: number;
+  start: number;
-  length: number;
+  length: number;
-  page: number;
+  page: number;
-  types: string[];
+  types: string[];
-  state: string;
+  state: string;
-  city: GeoResult;
+  city: GeoResult;
-  prompt: string;
+  prompt: string;
-  searchType: 'exact' | 'radius';
+  searchType: 'exact' | 'radius';
-  // radius: '5' | '20' | '50' | '100' | '200' | '300' | '400' | '500';
+  // radius: '5' | '20' | '50' | '100' | '200' | '300' | '400' | '500';
-  radius: number;
+  radius: number;
-  criteriaType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings';
+  criteriaType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings';
-  sortBy?: SortByOptions;
+  sortBy?: SortByOptions;
-}
+}
-export interface BusinessListingCriteria extends ListCriteria {
+export interface BusinessListingCriteria extends ListCriteria {
-  minPrice: number;
+  minPrice: number;
-  maxPrice: number;
+  maxPrice: number;
-  minRevenue: number;
+  minRevenue: number;
-  maxRevenue: number;
+  maxRevenue: number;
-  minCashFlow: number;
+  minCashFlow: number;
-  maxCashFlow: number;
+  maxCashFlow: number;
-  minNumberEmployees: number;
+  minNumberEmployees: number;
-  maxNumberEmployees: number;
+  maxNumberEmployees: number;
-  establishedMin: number;
+  establishedMin: number;
-  realEstateChecked: boolean;
+  realEstateChecked: boolean;
-  leasedLocation: boolean;
+  leasedLocation: boolean;
-  franchiseResale: boolean;
+  franchiseResale: boolean;
-  title: string;
+  title: string;
-  brokerName: string;
+  brokerName: string;
-  email: string;
+  email: string;
-  criteriaType: 'businessListings';
+  criteriaType: 'businessListings';
-}
+}
-export interface CommercialPropertyListingCriteria extends ListCriteria {
+export interface CommercialPropertyListingCriteria extends ListCriteria {
-  minPrice: number;
+  minPrice: number;
-  maxPrice: number;
+  maxPrice: number;
-  title: string;
+  title: string;
-  brokerName: string;
+  brokerName: string;
-  criteriaType: 'commercialPropertyListings';
+  criteriaType: 'commercialPropertyListings';
-}
+}
-export interface UserListingCriteria extends ListCriteria {
+export interface UserListingCriteria extends ListCriteria {
-  brokerName: string;
+  brokerName: string;
-  companyName: string;
+  companyName: string;
-  counties: string[];
+  counties: string[];
-  criteriaType: 'brokerListings';
+  criteriaType: 'brokerListings';
-}
+}
-
+
-export interface KeycloakUser {
+export interface KeycloakUser {
-  id: string;
+  id: string;
-  createdTimestamp?: number;
+  createdTimestamp?: number;
-  username?: string;
+  username?: string;
-  enabled?: boolean;
+  enabled?: boolean;
-  totp?: boolean;
+  totp?: boolean;
-  emailVerified?: boolean;
+  emailVerified?: boolean;
-  firstName: string;
+  firstName: string;
-  lastName: string;
+  lastName: string;
-  email: string;
+  email: string;
-  disableableCredentialTypes?: any[];
+  disableableCredentialTypes?: any[];
-  requiredActions?: any[];
+  requiredActions?: any[];
-  notBefore?: number;
+  notBefore?: number;
-  access?: Access;
+  access?: Access;
-  attributes?: Attributes;
+  attributes?: Attributes;
-}
+}
-export interface JwtUser {
+export interface JwtUser {
-  email: string;
+  email: string;
-  role: string;
+  role: string;
-  uid: string;
+  uid: string;
-}
+}
-interface Attributes {
+interface Attributes {
-  [key: string]: any;
+  [key: string]: any;
-  priceID: any;
+  priceID: any;
-}
+}
-export interface Access {
+export interface Access {
-  manageGroupMembership: boolean;
+  manageGroupMembership: boolean;
-  view: boolean;
+  view: boolean;
-  mapRoles: boolean;
+  mapRoles: boolean;
-  impersonate: boolean;
+  impersonate: boolean;
-  manage: boolean;
+  manage: boolean;
-}
+}
-export interface Subscription {
+export interface Subscription {
-  id: string;
+  id: string;
-  userId: string;
+  userId: string;
-  level: string;
+  level: string;
-  start: Date;
+  start: Date;
-  modified: Date;
+  modified: Date;
-  end: Date;
+  end: Date;
-  status: string;
+  status: string;
-  invoices: Array<Invoice>;
+  invoices: Array<Invoice>;
-}
+}
-export interface Invoice {
+export interface Invoice {
-  id: string;
+  id: string;
-  date: Date;
+  date: Date;
-  price: number;
+  price: number;
-}
+}
-export interface JwtToken {
+export interface JwtToken {
-  exp: number;
+  exp: number;
-  iat: number;
+  iat: number;
-  auth_time: number;
+  auth_time: number;
-  jti: string;
+  jti: string;
-  iss: string;
+  iss: string;
-  aud: string;
+  aud: string;
-  sub: string;
+  sub: string;
-  typ: string;
+  typ: string;
-  azp: string;
+  azp: string;
-  nonce: string;
+  nonce: string;
-  session_state: string;
+  session_state: string;
-  acr: string;
+  acr: string;
-  realm_access: Realmaccess;
+  realm_access: Realmaccess;
-  resource_access: Resourceaccess;
+  resource_access: Resourceaccess;
-  scope: string;
+  scope: string;
-  sid: string;
+  sid: string;
-  email_verified: boolean;
+  email_verified: boolean;
-  name: string;
+  name: string;
-  preferred_username: string;
+  preferred_username: string;
-  given_name: string;
+  given_name: string;
-  family_name: string;
+  family_name: string;
-  email: string;
+  email: string;
-  user_id: string;
+  user_id: string;
-  price_id: string;
+  price_id: string;
-}
+}
-export interface JwtPayload {
+export interface JwtPayload {
-  sub: string;
+  sub: string;
-  preferred_username: string;
+  preferred_username: string;
-  realm_access?: {
+  realm_access?: {
-    roles?: string[];
+    roles?: string[];
-  };
+  };
-  [key: string]: any; // für andere optionale Felder im JWT-Payload
+  [key: string]: any; // für andere optionale Felder im JWT-Payload
-}
+}
-interface Resourceaccess {
+interface Resourceaccess {
-  account: Realmaccess;
+  account: Realmaccess;
-}
+}
-interface Realmaccess {
+interface Realmaccess {
-  roles: string[];
+  roles: string[];
-}
+}
-export interface PageEvent {
+export interface PageEvent {
-  first: number;
+  first: number;
-  rows: number;
+  rows: number;
-  page: number;
+  page: number;
-  pageCount: number;
+  pageCount: number;
-}
+}
-export interface AutoCompleteCompleteEvent {
+export interface AutoCompleteCompleteEvent {
-  originalEvent: Event;
+  originalEvent: Event;
-  query: string;
+  query: string;
-}
+}
-export interface MailInfo {
+export interface MailInfo {
-  sender: Sender;
+  sender: Sender;
-  email: string;
+  email: string;
-  url: string;
+  url: string;
-  listing?: BusinessListing;
+  listing?: BusinessListing;
-}
+}
-// export interface Sender {
+// export interface Sender {
-//   name?: string;
+//   name?: string;
-//   email?: string;
+//   email?: string;
-//   phoneNumber?: string;
+//   phoneNumber?: string;
-//   state?: string;
+//   state?: string;
-//   comments?: string;
+//   comments?: string;
-// }
+// }
-export interface ImageProperty {
+export interface ImageProperty {
-  id: string;
+  id: string;
-  code: string;
+  code: string;
-  name: string;
+  name: string;
-}
+}
-export interface ErrorResponse {
+export interface ErrorResponse {
-  fields?: FieldError[];
+  fields?: FieldError[];
-  general?: string[];
+  general?: string[];
-}
+}
-export interface FieldError {
+export interface FieldError {
-  fieldname: string;
+  fieldname: string;
-  message: string;
+  message: string;
-}
+}
-export interface UploadParams {
+export interface UploadParams {
-  type: 'uploadPropertyPicture' | 'uploadCompanyLogo' | 'uploadProfile';
+  type: 'uploadPropertyPicture' | 'uploadCompanyLogo' | 'uploadProfile';
-  imagePath: string;
+  imagePath: string;
-  serialId?: number;
+  serialId?: number;
-}
+}
-export interface GeoResult {
+export interface GeoResult {
-  id: number;
+  id: number;
-  name: string;
+  name: string;
-  street?: string;
+  street?: string;
-  housenumber?: string;
+  housenumber?: string;
-  county?: string;
+  county?: string;
-  zipCode?: number;
+  zipCode?: number;
-  state: string;
+  state: string;
-  latitude: number;
+  latitude: number;
-  longitude: number;
+  longitude: number;
-}
+}
-interface CityResult {
+interface CityResult {
-  id: number;
+  id: number;
-  type: 'city';
+  type: 'city';
-  content: GeoResult;
+  content: GeoResult;
-}
+}
-
+
-interface StateResult {
+interface StateResult {
-  id: number;
+  id: number;
-  type: 'state';
+  type: 'state';
-  content: State;
+  content: State;
-}
+}
-export type CityAndStateResult = CityResult | StateResult;
+export type CityAndStateResult = CityResult | StateResult;
-export interface CountyResult {
+export interface CountyResult {
-  id: number;
+  id: number;
-  name: string;
+  name: string;
-  state: string;
+  state: string;
-  state_code: string;
+  state_code: string;
-}
+}
-export interface LogMessage {
+export interface LogMessage {
-  severity: 'error' | 'info';
+  severity: 'error' | 'info';
-  text: string;
+  text: string;
-}
+}
-export interface ModalResult {
+export interface ModalResult {
-  accepted: boolean;
+  accepted: boolean;
-  criteria?: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
+  criteria?: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
-}
+}
-export interface Checkout {
+export interface Checkout {
-  priceId: string;
+  priceId: string;
-  email: string;
+  email: string;
-  name: string;
+  name: string;
-}
+}
-export type UserRole = 'admin' | 'pro' | 'guest' | null;
+export type UserRole = 'admin' | 'pro' | 'guest' | null;
-export interface FirebaseUserInfo {
+export interface FirebaseUserInfo {
-  uid: string;
+  uid: string;
-  email: string | null;
+  email: string | null;
-  displayName: string | null;
+  displayName: string | null;
-  photoURL: string | null;
+  photoURL: string | null;
-  phoneNumber: string | null;
+  phoneNumber: string | null;
-  disabled: boolean;
+  disabled: boolean;
-  emailVerified: boolean;
+  emailVerified: boolean;
-  role: UserRole;
+  role: UserRole;
-  creationTime?: string;
+  creationTime?: string;
-  lastSignInTime?: string;
+  lastSignInTime?: string;
-  customClaims?: Record<string, any>;
+  customClaims?: Record<string, any>;
-}
+}
-
+
-export interface UsersResponse {
+export interface UsersResponse {
-  users: FirebaseUserInfo[];
+  users: FirebaseUserInfo[];
-  totalCount: number;
+  totalCount: number;
-  pageToken?: string;
+  pageToken?: string;
-}
+}
-export function isEmpty(value: any): boolean {
+export function isEmpty(value: any): boolean {
-  // Check for undefined or null
+  // Check for undefined or null
-  if (value === undefined || value === null) {
+  if (value === undefined || value === null) {
-    return true;
+    return true;
-  }
+  }
-
+
-  // Check for empty string or string with only whitespace
+  // Check for empty string or string with only whitespace
-  if (typeof value === 'string') {
+  if (typeof value === 'string') {
-    return value.trim().length === 0;
+    return value.trim().length === 0;
-  }
+  }
-
+
-  // Check for number and NaN
+  // Check for number and NaN
-  if (typeof value === 'number') {
+  if (typeof value === 'number') {
-    return isNaN(value);
+    return isNaN(value);
-  }
+  }
-
+
-  // If it's not a string or number, it's not considered empty by this function
+  // If it's not a string or number, it's not considered empty by this function
-  return false;
+  return false;
-}
+}
-export function emailToDirName(email: string): string {
+export function emailToDirName(email: string): string {
-  if (email === undefined || email === null) {
+  if (email === undefined || email === null) {
-    return null;
+    return null;
-  }
+  }
-  // Entferne ungültige Zeichen und ersetze sie durch Unterstriche
+  // Entferne ungültige Zeichen und ersetze sie durch Unterstriche
-  const sanitizedEmail = email.replace(/[^a-zA-Z0-9_-]/g, '_');
+  const sanitizedEmail = email.replace(/[^a-zA-Z0-9_-]/g, '_');
-
+
-  // Entferne führende und nachfolgende Unterstriche
+  // Entferne führende und nachfolgende Unterstriche
-  const trimmedEmail = sanitizedEmail.replace(/^_+|_+$/g, '');
+  const trimmedEmail = sanitizedEmail.replace(/^_+|_+$/g, '');
-
+
-  // Ersetze mehrfache aufeinanderfolgende Unterstriche durch einen einzelnen Unterstrich
+  // Ersetze mehrfache aufeinanderfolgende Unterstriche durch einen einzelnen Unterstrich
-  const normalizedEmail = trimmedEmail.replace(/_+/g, '_');
+  const normalizedEmail = trimmedEmail.replace(/_+/g, '_');
-
+
-  return normalizedEmail;
+  return normalizedEmail;
-}
+}
-export const LISTINGS_PER_PAGE = 12;
+export const LISTINGS_PER_PAGE = 12;
-export interface ValidationMessage {
+export interface ValidationMessage {
-  field: string;
+  field: string;
-  message: string;
+  message: string;
-}
+}
-export function createDefaultUser(email: string, firstname: string, lastname: string, subscriptionPlan: 'professional' | 'broker'): User {
+export function createDefaultUser(email: string, firstname: string, lastname: string, subscriptionPlan: 'professional' | 'broker'): User {
-  return {
+  return {
-    id: undefined,
+    id: undefined,
-    email,
+    email,
-    firstname,
+    firstname,
-    lastname,
+    lastname,
-    phoneNumber: null,
+    phoneNumber: null,
-    description: null,
+    description: null,
-    companyName: null,
+    companyName: null,
-    companyOverview: null,
+    companyOverview: null,
-    companyWebsite: null,
+    companyWebsite: null,
-    location: null,
+    location: null,
-    offeredServices: null,
+    offeredServices: null,
-    areasServed: [],
+    areasServed: [],
-    hasProfile: false,
+    hasProfile: false,
-    hasCompanyLogo: false,
+    hasCompanyLogo: false,
-    licensedIn: [],
+    licensedIn: [],
-    gender: null,
+    gender: null,
-    customerType: 'buyer',
+    customerType: 'buyer',
-    customerSubType: null,
+    customerSubType: null,
-    created: new Date(),
+    created: new Date(),
-    updated: new Date(),
+    updated: new Date(),
-    subscriptionId: null,
+    subscriptionId: null,
-    subscriptionPlan: subscriptionPlan,
+    subscriptionPlan: subscriptionPlan,
-    favoritesForUser: [],
+    favoritesForUser: [],
-    showInDirectory: false,
+    showInDirectory: false,
-  };
+  };
-}
+}
-export function createDefaultCommercialPropertyListing(): CommercialPropertyListing {
+export function createDefaultCommercialPropertyListing(): CommercialPropertyListing {
-  return {
+  return {
-    id: undefined,
+    id: undefined,
-    serialId: undefined,
+    serialId: undefined,
-    email: null,
+    email: null,
-    type: null,
+    type: null,
-    title: null,
+    title: null,
-    description: null,
+    description: null,
-    location: null,
+    location: null,
-    price: null,
+    price: null,
-    favoritesForUser: [],
+    favoritesForUser: [],
-    draft: false,
+    draft: false,
-    imageOrder: [],
+    imageOrder: [],
-    imagePath: null,
+    imagePath: null,
-    created: null,
+    created: null,
-    updated: null,
+    updated: null,
-    listingsCategory: 'commercialProperty',
+    listingsCategory: 'commercialProperty',
-  };
+  };
-}
+}
-export function createDefaultBusinessListing(): BusinessListing {
+export function createDefaultBusinessListing(): BusinessListing {
-  return {
+  return {
-    id: undefined,
+    id: undefined,
-    email: null,
+    email: null,
-    type: null,
+    type: null,
-    title: null,
+    title: null,
-    description: null,
+    description: null,
-    location: null,
+    location: null,
-    price: null,
+    price: null,
-    favoritesForUser: [],
+    favoritesForUser: [],
-    draft: false,
+    draft: false,
-    realEstateIncluded: false,
+    realEstateIncluded: false,
-    leasedLocation: false,
+    leasedLocation: false,
-    franchiseResale: false,
+    franchiseResale: false,
-    salesRevenue: null,
+    salesRevenue: null,
-    cashFlow: null,
+    cashFlow: null,
-    supportAndTraining: null,
+    supportAndTraining: null,
-    employees: null,
+    employees: null,
-    established: null,
+    established: null,
-    internalListingNumber: null,
+    internalListingNumber: null,
-    reasonForSale: null,
+    reasonForSale: null,
-    brokerLicencing: null,
+    brokerLicencing: null,
-    internals: null,
+    internals: null,
-    created: null,
+    created: null,
-    updated: null,
+    updated: null,
-    listingsCategory: 'business',
+    listingsCategory: 'business',
-  };
+  };
-}
+}
-export type IpInfo = {
+export type IpInfo = {
-  ip: string;
+  ip: string;
-  city: string;
+  city: string;
-  region: string;
+  region: string;
-  country: string;
+  country: string;
-  loc: string; // Coordinates in "latitude,longitude" format
+  loc: string; // Coordinates in "latitude,longitude" format
-  org: string;
+  org: string;
-  postal: string;
+  postal: string;
-  timezone: string;
+  timezone: string;
-};
+};
-export interface CombinedUser {
+export interface CombinedUser {
-  keycloakUser?: KeycloakUser;
+  keycloakUser?: KeycloakUser;
-  appUser?: User;
+  appUser?: User;
-}
+}
-export interface RealIpInfo {
+export interface RealIpInfo {
-  ip: string;
+  ip: string;
-  countryCode?: string;
+  countryCode?: string;
-}
+}

bizmatch-server/src/sitemap/sitemap.controller.ts

@@ -1,62 +1,62 @@
-import { Controller, Get, Header, Param, ParseIntPipe } from '@nestjs/common';
+import { Controller, Get, Header, Param, ParseIntPipe } from '@nestjs/common';
-import { SitemapService } from './sitemap.service';
+import { SitemapService } from './sitemap.service';
-
+
-@Controller()
+@Controller()
-export class SitemapController {
+export class SitemapController {
-  constructor(private readonly sitemapService: SitemapService) { }
+  constructor(private readonly sitemapService: SitemapService) { }
-
+
-  /**
+  /**
-   * Main sitemap index - lists all sitemap files
+   * Main sitemap index - lists all sitemap files
-   * Route: /sitemap.xml
+   * Route: /sitemap.xml
-   */
+   */
-  @Get('sitemap.xml')
+  @Get('sitemap.xml')
-  @Header('Content-Type', 'application/xml')
+  @Header('Content-Type', 'application/xml')
-  @Header('Cache-Control', 'public, max-age=3600')
+  @Header('Cache-Control', 'public, max-age=3600')
-  async getSitemapIndex(): Promise<string> {
+  async getSitemapIndex(): Promise<string> {
-    return await this.sitemapService.generateSitemapIndex();
+    return await this.sitemapService.generateSitemapIndex();
-  }
+  }
-
+
-  /**
+  /**
-   * Static pages sitemap
+   * Static pages sitemap
-   * Route: /sitemap/static.xml
+   * Route: /sitemap/static.xml
-   */
+   */
-  @Get('sitemap/static.xml')
+  @Get('sitemap/static.xml')
-  @Header('Content-Type', 'application/xml')
+  @Header('Content-Type', 'application/xml')
-  @Header('Cache-Control', 'public, max-age=3600')
+  @Header('Cache-Control', 'public, max-age=3600')
-  async getStaticSitemap(): Promise<string> {
+  async getStaticSitemap(): Promise<string> {
-    return await this.sitemapService.generateStaticSitemap();
+    return await this.sitemapService.generateStaticSitemap();
-  }
+  }
-
+
-  /**
+  /**
-   * Business listings sitemap (paginated)
+   * Business listings sitemap (paginated)
-   * Route: /sitemap/business-1.xml, /sitemap/business-2.xml, etc.
+   * Route: /sitemap/business-1.xml, /sitemap/business-2.xml, etc.
-   */
+   */
-  @Get('sitemap/business-:page.xml')
+  @Get('sitemap/business-:page.xml')
-  @Header('Content-Type', 'application/xml')
+  @Header('Content-Type', 'application/xml')
-  @Header('Cache-Control', 'public, max-age=3600')
+  @Header('Cache-Control', 'public, max-age=3600')
-  async getBusinessSitemap(@Param('page', ParseIntPipe) page: number): Promise<string> {
+  async getBusinessSitemap(@Param('page', ParseIntPipe) page: number): Promise<string> {
-    return await this.sitemapService.generateBusinessSitemap(page);
+    return await this.sitemapService.generateBusinessSitemap(page);
-  }
+  }
-
+
-  /**
+  /**
-   * Commercial property sitemap (paginated)
+   * Commercial property sitemap (paginated)
-   * Route: /sitemap/commercial-1.xml, /sitemap/commercial-2.xml, etc.
+   * Route: /sitemap/commercial-1.xml, /sitemap/commercial-2.xml, etc.
-   */
+   */
-  @Get('sitemap/commercial-:page.xml')
+  @Get('sitemap/commercial-:page.xml')
-  @Header('Content-Type', 'application/xml')
+  @Header('Content-Type', 'application/xml')
-  @Header('Cache-Control', 'public, max-age=3600')
+  @Header('Cache-Control', 'public, max-age=3600')
-  async getCommercialSitemap(@Param('page', ParseIntPipe) page: number): Promise<string> {
+  async getCommercialSitemap(@Param('page', ParseIntPipe) page: number): Promise<string> {
-    return await this.sitemapService.generateCommercialSitemap(page);
+    return await this.sitemapService.generateCommercialSitemap(page);
-  }
+  }
-
+
-  /**
+  /**
-   * Broker profiles sitemap (paginated)
+   * Broker profiles sitemap (paginated)
-   * Route: /sitemap/brokers-1.xml, /sitemap/brokers-2.xml, etc.
+   * Route: /sitemap/brokers-1.xml, /sitemap/brokers-2.xml, etc.
-   */
+   */
-  @Get('sitemap/brokers-:page.xml')
+  @Get('sitemap/brokers-:page.xml')
-  @Header('Content-Type', 'application/xml')
+  @Header('Content-Type', 'application/xml')
-  @Header('Cache-Control', 'public, max-age=3600')
+  @Header('Cache-Control', 'public, max-age=3600')
-  async getBrokerSitemap(@Param('page', ParseIntPipe) page: number): Promise<string> {
+  async getBrokerSitemap(@Param('page', ParseIntPipe) page: number): Promise<string> {
-    return await this.sitemapService.generateBrokerSitemap(page);
+    return await this.sitemapService.generateBrokerSitemap(page);
-  }
+  }
-}
+}

bizmatch-server/src/sitemap/sitemap.module.ts

@@ -1,12 +1,12 @@
-import { Module } from '@nestjs/common';
+import { Module } from '@nestjs/common';
-import { SitemapController } from './sitemap.controller';
+import { SitemapController } from './sitemap.controller';
-import { SitemapService } from './sitemap.service';
+import { SitemapService } from './sitemap.service';
-import { DrizzleModule } from '../drizzle/drizzle.module';
+import { DrizzleModule } from '../drizzle/drizzle.module';
-
+
-@Module({
+@Module({
-  imports: [DrizzleModule],
+  imports: [DrizzleModule],
-  controllers: [SitemapController],
+  controllers: [SitemapController],
-  providers: [SitemapService],
+  providers: [SitemapService],
-  exports: [SitemapService],
+  exports: [SitemapService],
-})
+})
-export class SitemapModule {}
+export class SitemapModule {}

bizmatch-server/src/user/user.service.ts

@@ -1,195 +1,195 @@
-import { Inject, Injectable } from '@nestjs/common';
+import { Inject, Injectable } from '@nestjs/common';
-import { and, asc, count, desc, eq, inArray, or, SQL, sql } from 'drizzle-orm';
+import { and, asc, count, desc, eq, inArray, or, SQL, sql } from 'drizzle-orm';
-import { NodePgDatabase } from 'drizzle-orm/node-postgres/driver';
+import { NodePgDatabase } from 'drizzle-orm/node-postgres/driver';
-import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
-import { Logger } from 'winston';
+import { Logger } from 'winston';
-import * as schema from '../drizzle/schema';
+import * as schema from '../drizzle/schema';
-import { customerSubTypeEnum, PG_CONNECTION } from '../drizzle/schema';
+import { customerSubTypeEnum, PG_CONNECTION } from '../drizzle/schema';
-import { FileService } from '../file/file.service';
+import { FileService } from '../file/file.service';
-import { GeoService } from '../geo/geo.service';
+import { GeoService } from '../geo/geo.service';
-import { User, UserSchema } from '../models/db.model';
+import { User, UserSchema } from '../models/db.model';
-import { createDefaultUser, emailToDirName, JwtUser, UserListingCriteria } from '../models/main.model';
+import { createDefaultUser, emailToDirName, JwtUser, UserListingCriteria } from '../models/main.model';
-import { getDistanceQuery, splitName } from '../utils';
+import { getDistanceQuery, splitName } from '../utils';
-
+
-type CustomerSubType = (typeof customerSubTypeEnum.enumValues)[number];
+type CustomerSubType = (typeof customerSubTypeEnum.enumValues)[number];
-@Injectable()
+@Injectable()
-export class UserService {
+export class UserService {
-  constructor(
+  constructor(
-    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
+    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
-    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
+    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
-    private fileService: FileService,
+    private fileService: FileService,
-    private geoService: GeoService,
+    private geoService: GeoService,
-  ) { }
+  ) { }
-
+
-  private getWhereConditions(criteria: UserListingCriteria): SQL[] {
+  private getWhereConditions(criteria: UserListingCriteria): SQL[] {
-    const whereConditions: SQL[] = [];
+    const whereConditions: SQL[] = [];
-    whereConditions.push(sql`(${schema.users_json.data}->>'customerType') = 'professional'`);
+    whereConditions.push(sql`(${schema.users_json.data}->>'customerType') = 'professional'`);
-
+
-    if (criteria.city && criteria.searchType === 'exact') {
+    if (criteria.city && criteria.searchType === 'exact') {
-      whereConditions.push(sql`(${schema.users_json.data}->'location'->>'name') ILIKE ${criteria.city.name}`);
+      whereConditions.push(sql`(${schema.users_json.data}->'location'->>'name') ILIKE ${criteria.city.name}`);
-    }
+    }
-
+
-    if (criteria.city && criteria.radius && criteria.searchType === 'radius' && criteria.radius) {
+    if (criteria.city && criteria.radius && criteria.searchType === 'radius' && criteria.radius) {
-      const cityGeo = this.geoService.getCityWithCoords(criteria.state, criteria.city.name);
+      const cityGeo = this.geoService.getCityWithCoords(criteria.state, criteria.city.name);
-      const distanceQuery = getDistanceQuery(schema.users_json, cityGeo.latitude, cityGeo.longitude);
+      const distanceQuery = getDistanceQuery(schema.users_json, cityGeo.latitude, cityGeo.longitude);
-      whereConditions.push(sql`${distanceQuery} <= ${criteria.radius}`);
+      whereConditions.push(sql`${distanceQuery} <= ${criteria.radius}`);
-    }
+    }
-    if (criteria.types && criteria.types.length > 0) {
+    if (criteria.types && criteria.types.length > 0) {
-      // whereConditions.push(inArray(schema.users.customerSubType, criteria.types));
+      // whereConditions.push(inArray(schema.users.customerSubType, criteria.types));
-      whereConditions.push(inArray(sql`${schema.users_json.data}->>'customerSubType'`, criteria.types as CustomerSubType[]));
+      whereConditions.push(inArray(sql`${schema.users_json.data}->>'customerSubType'`, criteria.types as CustomerSubType[]));
-    }
+    }
-
+
-    if (criteria.brokerName) {
+    if (criteria.brokerName) {
-      const { firstname, lastname } = splitName(criteria.brokerName);
+      const { firstname, lastname } = splitName(criteria.brokerName);
-      whereConditions.push(sql`(${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} OR (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`}`);
+      whereConditions.push(sql`(${schema.users_json.data}->>'firstname') ILIKE ${`%${firstname}%`} OR (${schema.users_json.data}->>'lastname') ILIKE ${`%${lastname}%`}`);
-    }
+    }
-
+
-    if (criteria.companyName) {
+    if (criteria.companyName) {
-      whereConditions.push(sql`(${schema.users_json.data}->>'companyName') ILIKE ${`%${criteria.companyName}%`}`);
+      whereConditions.push(sql`(${schema.users_json.data}->>'companyName') ILIKE ${`%${criteria.companyName}%`}`);
-    }
+    }
-
+
-    if (criteria.counties && criteria.counties.length > 0) {
+    if (criteria.counties && criteria.counties.length > 0) {
-      whereConditions.push(or(...criteria.counties.map(county => sql`(${schema.users_json.data}->'location'->>'county') ILIKE ${`%${county}%`}`)));
+      whereConditions.push(or(...criteria.counties.map(county => sql`(${schema.users_json.data}->'location'->>'county') ILIKE ${`%${county}%`}`)));
-    }
+    }
-
+
-    if (criteria.state) {
+    if (criteria.state) {
-      whereConditions.push(sql`(${schema.users_json.data}->'location'->>'state') = ${criteria.state}`);
+      whereConditions.push(sql`(${schema.users_json.data}->'location'->>'state') = ${criteria.state}`);
-    }
+    }
-
+
-    //never show user which denied
+    //never show user which denied
-    whereConditions.push(sql`(${schema.users_json.data}->>'showInDirectory')::boolean IS TRUE`);
+    whereConditions.push(sql`(${schema.users_json.data}->>'showInDirectory')::boolean IS TRUE`);
-
+
-    return whereConditions;
+    return whereConditions;
-  }
+  }
-  async searchUserListings(criteria: UserListingCriteria): Promise<{ results: User[]; totalCount: number }> {
+  async searchUserListings(criteria: UserListingCriteria): Promise<{ results: User[]; totalCount: number }> {
-    const start = criteria.start ? criteria.start : 0;
+    const start = criteria.start ? criteria.start : 0;
-    const length = criteria.length ? criteria.length : 12;
+    const length = criteria.length ? criteria.length : 12;
-    const query = this.conn.select().from(schema.users_json);
+    const query = this.conn.select().from(schema.users_json);
-    const whereConditions = this.getWhereConditions(criteria);
+    const whereConditions = this.getWhereConditions(criteria);
-
+
-    if (whereConditions.length > 0) {
+    if (whereConditions.length > 0) {
-      const whereClause = and(...whereConditions);
+      const whereClause = and(...whereConditions);
-      query.where(whereClause);
+      query.where(whereClause);
-    }
+    }
-    // Sortierung
+    // Sortierung
-    switch (criteria.sortBy) {
+    switch (criteria.sortBy) {
-      case 'nameAsc':
+      case 'nameAsc':
-        query.orderBy(asc(sql`${schema.users_json.data}->>'lastname'`));
+        query.orderBy(asc(sql`${schema.users_json.data}->>'lastname'`));
-        break;
+        break;
-      case 'nameDesc':
+      case 'nameDesc':
-        query.orderBy(desc(sql`${schema.users_json.data}->>'lastname'`));
+        query.orderBy(desc(sql`${schema.users_json.data}->>'lastname'`));
-        break;
+        break;
-      default:
+      default:
-        // Keine spezifische Sortierung, Standardverhalten kann hier eingefügt werden
+        // Keine spezifische Sortierung, Standardverhalten kann hier eingefügt werden
-        break;
+        break;
-    }
+    }
-    // Paginierung
+    // Paginierung
-    query.limit(length).offset(start);
+    query.limit(length).offset(start);
-
+
-    const data = await query;
+    const data = await query;
-    const results = data.map(u => ({ id: u.id, email: u.email, ...(u.data as User) }) as User);
+    const results = data.map(u => ({ id: u.id, email: u.email, ...(u.data as User) }) as User);
-    const totalCount = await this.getUserListingsCount(criteria);
+    const totalCount = await this.getUserListingsCount(criteria);
-
+
-    return {
+    return {
-      results,
+      results,
-      totalCount,
+      totalCount,
-    };
+    };
-  }
+  }
-  async getUserListingsCount(criteria: UserListingCriteria): Promise<number> {
+  async getUserListingsCount(criteria: UserListingCriteria): Promise<number> {
-    const countQuery = this.conn.select({ value: count() }).from(schema.users_json);
+    const countQuery = this.conn.select({ value: count() }).from(schema.users_json);
-    const whereConditions = this.getWhereConditions(criteria);
+    const whereConditions = this.getWhereConditions(criteria);
-
+
-    if (whereConditions.length > 0) {
+    if (whereConditions.length > 0) {
-      const whereClause = and(...whereConditions);
+      const whereClause = and(...whereConditions);
-      countQuery.where(whereClause);
+      countQuery.where(whereClause);
-    }
+    }
-
+
-    const [{ value: totalCount }] = await countQuery;
+    const [{ value: totalCount }] = await countQuery;
-    return totalCount;
+    return totalCount;
-  }
+  }
-  async getUserByMail(email: string, jwtuser?: JwtUser) {
+  async getUserByMail(email: string, jwtuser?: JwtUser) {
-    const users = await this.conn.select().from(schema.users_json).where(eq(schema.users_json.email, email));
+    const users = await this.conn.select().from(schema.users_json).where(eq(schema.users_json.email, email));
-    if (users.length === 0) {
+    if (users.length === 0) {
-      const user: User = { id: undefined, customerType: 'professional', ...createDefaultUser(email, '', '', null) };
+      const user: User = { id: undefined, customerType: 'professional', ...createDefaultUser(email, '', '', null) };
-      const u = await this.saveUser(user, false);
+      const u = await this.saveUser(user, false);
-      return u;
+      return u;
-    } else {
+    } else {
-      const user = { id: users[0].id, email: users[0].email, ...(users[0].data as User) } as User;
+      const user = { id: users[0].id, email: users[0].email, ...(users[0].data as User) } as User;
-      user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
+      user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
-      user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
+      user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
-      return user;
+      return user;
-    }
+    }
-  }
+  }
-  async getUserById(id: string) {
+  async getUserById(id: string) {
-    const users = await this.conn.select().from(schema.users_json).where(eq(schema.users_json.id, id));
+    const users = await this.conn.select().from(schema.users_json).where(eq(schema.users_json.id, id));
-
+
-    const user = { id: users[0].id, email: users[0].email, ...(users[0].data as User) } as User;
+    const user = { id: users[0].id, email: users[0].email, ...(users[0].data as User) } as User;
-    user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
+    user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
-    user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
+    user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
-    return user;
+    return user;
-  }
+  }
-  async getAllUser() {
+  async getAllUser() {
-    const users = await this.conn.select().from(schema.users_json);
+    const users = await this.conn.select().from(schema.users_json);
-    return users.map(u => ({ id: u.id, email: u.email, ...(u.data as User) }) as User);
+    return users.map(u => ({ id: u.id, email: u.email, ...(u.data as User) }) as User);
-  }
+  }
-  async saveUser(user: User, processValidation = true): Promise<User> {
+  async saveUser(user: User, processValidation = true): Promise<User> {
-    try {
+    try {
-      user.updated = new Date();
+      user.updated = new Date();
-      if (user.id) {
+      if (user.id) {
-        user.created = new Date(user.created);
+        user.created = new Date(user.created);
-      } else {
+      } else {
-        user.created = new Date();
+        user.created = new Date();
-      }
+      }
-      let validatedUser = user;
+      let validatedUser = user;
-      if (processValidation) {
+      if (processValidation) {
-        validatedUser = UserSchema.parse(user);
+        validatedUser = UserSchema.parse(user);
-      }
+      }
-      //const drizzleUser = convertUserToDrizzleUser(validatedUser);
+      //const drizzleUser = convertUserToDrizzleUser(validatedUser);
-      const { id: _, ...rest } = validatedUser;
+      const { id: _, ...rest } = validatedUser;
-      const drizzleUser = { email: user.email, data: rest };
+      const drizzleUser = { email: user.email, data: rest };
-      if (user.id) {
+      if (user.id) {
-        const [updateUser] = await this.conn.update(schema.users_json).set(drizzleUser).where(eq(schema.users_json.id, user.id)).returning();
+        const [updateUser] = await this.conn.update(schema.users_json).set(drizzleUser).where(eq(schema.users_json.id, user.id)).returning();
-        return { id: updateUser.id, email: updateUser.email, ...(updateUser.data as User) } as User;
+        return { id: updateUser.id, email: updateUser.email, ...(updateUser.data as User) } as User;
-      } else {
+      } else {
-        const [newUser] = await this.conn.insert(schema.users_json).values(drizzleUser).returning();
+        const [newUser] = await this.conn.insert(schema.users_json).values(drizzleUser).returning();
-        return { id: newUser.id, email: newUser.email, ...(newUser.data as User) } as User;
+        return { id: newUser.id, email: newUser.email, ...(newUser.data as User) } as User;
-      }
+      }
-    } catch (error) {
+    } catch (error) {
-      throw error;
+      throw error;
-    }
+    }
-  }
+  }
-
+
-  async addFavorite(id: string, user: JwtUser): Promise<void> {
+  async addFavorite(id: string, user: JwtUser): Promise<void> {
-    const existingUser = await this.getUserById(id);
+    const existingUser = await this.getUserById(id);
-    if (!existingUser) return;
+    if (!existingUser) return;
-
+
-    const favorites = existingUser.favoritesForUser || [];
+    const favorites = existingUser.favoritesForUser || [];
-    if (!favorites.includes(user.email)) {
+    if (!favorites.includes(user.email)) {
-      existingUser.favoritesForUser = [...favorites, user.email];
+      existingUser.favoritesForUser = [...favorites, user.email];
-      const { id: _, ...rest } = existingUser;
+      const { id: _, ...rest } = existingUser;
-      const drizzleUser = { email: existingUser.email, data: rest };
+      const drizzleUser = { email: existingUser.email, data: rest };
-      await this.conn.update(schema.users_json).set(drizzleUser).where(eq(schema.users_json.id, id));
+      await this.conn.update(schema.users_json).set(drizzleUser).where(eq(schema.users_json.id, id));
-    }
+    }
-  }
+  }
-
+
-  async deleteFavorite(id: string, user: JwtUser): Promise<void> {
+  async deleteFavorite(id: string, user: JwtUser): Promise<void> {
-    const existingUser = await this.getUserById(id);
+    const existingUser = await this.getUserById(id);
-    if (!existingUser) return;
+    if (!existingUser) return;
-
+
-    const favorites = existingUser.favoritesForUser || [];
+    const favorites = existingUser.favoritesForUser || [];
-    if (favorites.includes(user.email)) {
+    if (favorites.includes(user.email)) {
-      existingUser.favoritesForUser = favorites.filter(email => email !== user.email);
+      existingUser.favoritesForUser = favorites.filter(email => email !== user.email);
-      const { id: _, ...rest } = existingUser;
+      const { id: _, ...rest } = existingUser;
-      const drizzleUser = { email: existingUser.email, data: rest };
+      const drizzleUser = { email: existingUser.email, data: rest };
-      await this.conn.update(schema.users_json).set(drizzleUser).where(eq(schema.users_json.id, id));
+      await this.conn.update(schema.users_json).set(drizzleUser).where(eq(schema.users_json.id, id));
-    }
+    }
-  }
+  }
-
+
-  async getFavoriteUsers(user: JwtUser): Promise<User[]> {
+  async getFavoriteUsers(user: JwtUser): Promise<User[]> {
-    const data = await this.conn
+    const data = await this.conn
-      .select()
+      .select()
-      .from(schema.users_json)
+      .from(schema.users_json)
-      .where(sql`${schema.users_json.data}->'favoritesForUser' ? ${user.email}`);
+      .where(sql`${schema.users_json.data}->'favoritesForUser' ? ${user.email}`);
-    return data.map(u => ({ id: u.id, email: u.email, ...(u.data as User) }) as User);
+    return data.map(u => ({ id: u.id, email: u.email, ...(u.data as User) }) as User);
-  }
+  }
-}
+}

bizmatch-server/src/utils/slug.utils.ts

@@ -1,183 +1,183 @@
-/**
+/**
- * Utility functions for generating and parsing SEO-friendly URL slugs
+ * Utility functions for generating and parsing SEO-friendly URL slugs
- *
+ *
- * Slug format: {title}-{location}-{short-id}
+ * Slug format: {title}-{location}-{short-id}
- * Example: italian-restaurant-austin-tx-a3f7b2c1
+ * Example: italian-restaurant-austin-tx-a3f7b2c1
- */
+ */
-
+
-/**
+/**
- * Generate a SEO-friendly URL slug from listing data
+ * Generate a SEO-friendly URL slug from listing data
- *
+ *
- * @param title - The listing title (e.g., "Italian Restaurant")
+ * @param title - The listing title (e.g., "Italian Restaurant")
- * @param location - Location object with name, county, and state
+ * @param location - Location object with name, county, and state
- * @param id - The listing UUID
+ * @param id - The listing UUID
- * @returns SEO-friendly slug (e.g., "italian-restaurant-austin-tx-a3f7b2c1")
+ * @returns SEO-friendly slug (e.g., "italian-restaurant-austin-tx-a3f7b2c1")
- */
+ */
-export function generateSlug(title: string, location: any, id: string): string {
+export function generateSlug(title: string, location: any, id: string): string {
-  if (!title || !id) {
+  if (!title || !id) {
-    throw new Error('Title and ID are required to generate a slug');
+    throw new Error('Title and ID are required to generate a slug');
-  }
+  }
-
+
-  // Clean and slugify the title
+  // Clean and slugify the title
-  const titleSlug = title
+  const titleSlug = title
-    .toLowerCase()
+    .toLowerCase()
-    .trim()
+    .trim()
-    .replace(/[^\w\s-]/g, '') // Remove special characters
+    .replace(/[^\w\s-]/g, '') // Remove special characters
-    .replace(/\s+/g, '-')     // Replace spaces with hyphens
+    .replace(/\s+/g, '-')     // Replace spaces with hyphens
-    .replace(/-+/g, '-')      // Replace multiple hyphens with single hyphen
+    .replace(/-+/g, '-')      // Replace multiple hyphens with single hyphen
-    .substring(0, 50);        // Limit title to 50 characters
+    .substring(0, 50);        // Limit title to 50 characters
-
+
-  // Get location string
+  // Get location string
-  let locationSlug = '';
+  let locationSlug = '';
-  if (location) {
+  if (location) {
-    const locationName = location.name || location.county || '';
+    const locationName = location.name || location.county || '';
-    const state = location.state || '';
+    const state = location.state || '';
-
+
-    if (locationName) {
+    if (locationName) {
-      locationSlug = locationName
+      locationSlug = locationName
-        .toLowerCase()
+        .toLowerCase()
-        .trim()
+        .trim()
-        .replace(/[^\w\s-]/g, '')
+        .replace(/[^\w\s-]/g, '')
-        .replace(/\s+/g, '-')
+        .replace(/\s+/g, '-')
-        .replace(/-+/g, '-');
+        .replace(/-+/g, '-');
-    }
+    }
-
+
-    if (state) {
+    if (state) {
-      locationSlug = locationSlug
+      locationSlug = locationSlug
-        ? `${locationSlug}-${state.toLowerCase()}`
+        ? `${locationSlug}-${state.toLowerCase()}`
-        : state.toLowerCase();
+        : state.toLowerCase();
-    }
+    }
-  }
+  }
-
+
-  // Get first 8 characters of UUID for uniqueness
+  // Get first 8 characters of UUID for uniqueness
-  const shortId = id.substring(0, 8);
+  const shortId = id.substring(0, 8);
-
+
-  // Combine parts: title-location-id
+  // Combine parts: title-location-id
-  const parts = [titleSlug, locationSlug, shortId].filter(Boolean);
+  const parts = [titleSlug, locationSlug, shortId].filter(Boolean);
-  const slug = parts.join('-');
+  const slug = parts.join('-');
-
+
-  // Final cleanup
+  // Final cleanup
-  return slug
+  return slug
-    .replace(/-+/g, '-')  // Remove duplicate hyphens
+    .replace(/-+/g, '-')  // Remove duplicate hyphens
-    .replace(/^-|-$/g, '') // Remove leading/trailing hyphens
+    .replace(/^-|-$/g, '') // Remove leading/trailing hyphens
-    .toLowerCase();
+    .toLowerCase();
-}
+}
-
+
-/**
+/**
- * Extract the UUID from a slug
+ * Extract the UUID from a slug
- * The UUID is always the last segment (8 characters)
+ * The UUID is always the last segment (8 characters)
- *
+ *
- * @param slug - The URL slug (e.g., "italian-restaurant-austin-tx-a3f7b2c1")
+ * @param slug - The URL slug (e.g., "italian-restaurant-austin-tx-a3f7b2c1")
- * @returns The short ID (e.g., "a3f7b2c1")
+ * @returns The short ID (e.g., "a3f7b2c1")
- */
+ */
-export function extractShortIdFromSlug(slug: string): string {
+export function extractShortIdFromSlug(slug: string): string {
-  if (!slug) {
+  if (!slug) {
-    throw new Error('Slug is required');
+    throw new Error('Slug is required');
-  }
+  }
-
+
-  const parts = slug.split('-');
+  const parts = slug.split('-');
-  return parts[parts.length - 1];
+  return parts[parts.length - 1];
-}
+}
-
+
-/**
+/**
- * Validate if a string looks like a valid slug
+ * Validate if a string looks like a valid slug
- *
+ *
- * @param slug - The string to validate
+ * @param slug - The string to validate
- * @returns true if the string looks like a valid slug
+ * @returns true if the string looks like a valid slug
- */
+ */
-export function isValidSlug(slug: string): boolean {
+export function isValidSlug(slug: string): boolean {
-  if (!slug || typeof slug !== 'string') {
+  if (!slug || typeof slug !== 'string') {
-    return false;
+    return false;
-  }
+  }
-
+
-  // Check if slug contains only lowercase letters, numbers, and hyphens
+  // Check if slug contains only lowercase letters, numbers, and hyphens
-  const slugPattern = /^[a-z0-9-]+$/;
+  const slugPattern = /^[a-z0-9-]+$/;
-  if (!slugPattern.test(slug)) {
+  if (!slugPattern.test(slug)) {
-    return false;
+    return false;
-  }
+  }
-
+
-  // Check if slug has a reasonable length (at least 10 chars for short-id + some content)
+  // Check if slug has a reasonable length (at least 10 chars for short-id + some content)
-  if (slug.length < 10) {
+  if (slug.length < 10) {
-    return false;
+    return false;
-  }
+  }
-
+
-  // Check if last segment looks like a UUID prefix (8 chars of alphanumeric)
+  // Check if last segment looks like a UUID prefix (8 chars of alphanumeric)
-  const parts = slug.split('-');
+  const parts = slug.split('-');
-  const lastPart = parts[parts.length - 1];
+  const lastPart = parts[parts.length - 1];
-  return lastPart.length === 8 && /^[a-z0-9]{8}$/.test(lastPart);
+  return lastPart.length === 8 && /^[a-z0-9]{8}$/.test(lastPart);
-}
+}
-
+
-/**
+/**
- * Check if a parameter is a slug (vs a UUID)
+ * Check if a parameter is a slug (vs a UUID)
- *
+ *
- * @param param - The URL parameter
+ * @param param - The URL parameter
- * @returns true if it's a slug, false if it's likely a UUID
+ * @returns true if it's a slug, false if it's likely a UUID
- */
+ */
-export function isSlug(param: string): boolean {
+export function isSlug(param: string): boolean {
-  if (!param) {
+  if (!param) {
-    return false;
+    return false;
-  }
+  }
-
+
-  // UUIDs have a specific format with hyphens at specific positions
+  // UUIDs have a specific format with hyphens at specific positions
-  // e.g., "a3f7b2c1-4d5e-6789-abcd-1234567890ef"
+  // 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;
+  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)) {
+  if (uuidPattern.test(param)) {
-    return false; // It's a UUID
+    return false; // It's a UUID
-  }
+  }
-
+
-  // If it contains at least 3 parts (e.g., title-state-id or title-city-state-id) and looks like our slug format, it's probably a slug
+  // If it contains at least 3 parts (e.g., title-state-id or title-city-state-id) and looks like our slug format, it's probably a slug
-  return param.split('-').length >= 3 && isValidSlug(param);
+  return param.split('-').length >= 3 && isValidSlug(param);
-}
+}
-
+
-/**
+/**
- * Regenerate slug from updated listing data
+ * Regenerate slug from updated listing data
- * Useful when title or location changes
+ * Useful when title or location changes
- *
+ *
- * @param title - Updated title
+ * @param title - Updated title
- * @param location - Updated location
+ * @param location - Updated location
- * @param existingSlug - The current slug (to preserve short-id)
+ * @param existingSlug - The current slug (to preserve short-id)
- * @returns New slug with same short-id
+ * @returns New slug with same short-id
- */
+ */
-export function regenerateSlug(title: string, location: any, existingSlug: string): string {
+export function regenerateSlug(title: string, location: any, existingSlug: string): string {
-  if (!existingSlug) {
+  if (!existingSlug) {
-    throw new Error('Existing slug is required to regenerate');
+    throw new Error('Existing slug is required to regenerate');
-  }
+  }
-
+
-  const shortId = extractShortIdFromSlug(existingSlug);
+  const shortId = extractShortIdFromSlug(existingSlug);
-
+
-  // Reconstruct full UUID from short-id (not possible, so we use full existing slug's ID)
+  // 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
+  // In practice, you'd need the full UUID from the database
-  // For now, we'll construct a new slug with the short-id
+  // For now, we'll construct a new slug with the short-id
-  const titleSlug = title
+  const titleSlug = title
-    .toLowerCase()
+    .toLowerCase()
-    .trim()
+    .trim()
-    .replace(/[^\w\s-]/g, '')
+    .replace(/[^\w\s-]/g, '')
-    .replace(/\s+/g, '-')
+    .replace(/\s+/g, '-')
-    .replace(/-+/g, '-')
+    .replace(/-+/g, '-')
-    .substring(0, 50);
+    .substring(0, 50);
-
+
-  let locationSlug = '';
+  let locationSlug = '';
-  if (location) {
+  if (location) {
-    const locationName = location.name || location.county || '';
+    const locationName = location.name || location.county || '';
-    const state = location.state || '';
+    const state = location.state || '';
-
+
-    if (locationName) {
+    if (locationName) {
-      locationSlug = locationName
+      locationSlug = locationName
-        .toLowerCase()
+        .toLowerCase()
-        .trim()
+        .trim()
-        .replace(/[^\w\s-]/g, '')
+        .replace(/[^\w\s-]/g, '')
-        .replace(/\s+/g, '-')
+        .replace(/\s+/g, '-')
-        .replace(/-+/g, '-');
+        .replace(/-+/g, '-');
-    }
+    }
-
+
-    if (state) {
+    if (state) {
-      locationSlug = locationSlug
+      locationSlug = locationSlug
-        ? `${locationSlug}-${state.toLowerCase()}`
+        ? `${locationSlug}-${state.toLowerCase()}`
-        : state.toLowerCase();
+        : state.toLowerCase();
-    }
+    }
-  }
+  }
-
+
-  const parts = [titleSlug, locationSlug, shortId].filter(Boolean);
+  const parts = [titleSlug, locationSlug, shortId].filter(Boolean);
-  return parts.join('-').replace(/-+/g, '-').replace(/^-|-$/g, '').toLowerCase();
+  return parts.join('-').replace(/-+/g, '-').replace(/^-|-$/g, '').toLowerCase();
-}
+}

bizmatch-server/tsconfig.json

@@ -1,30 +1,30 @@
-{
+{
-  "compilerOptions": {
+  "compilerOptions": {
-    "target": "ES2022",
+    "target": "ES2022",
-    "module": "NodeNext",
+    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
+    "moduleResolution": "NodeNext",
-    "declaration": true,
+    "declaration": true,
-    "removeComments": true,
+    "removeComments": true,
-    "emitDecoratorMetadata": true,
+    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
+    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
+    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
+    "sourceMap": true,
-    "outDir": "./dist",
+    "outDir": "./dist",
-    "baseUrl": "./",
+    "baseUrl": "./",
-    "incremental": true,
+    "incremental": true,
-    "skipLibCheck": true,
+    "skipLibCheck": true,
-    "strictNullChecks": false,
+    "strictNullChecks": false,
-    "noImplicitAny": false,
+    "noImplicitAny": false,
-    "strictBindCallApply": false,
+    "strictBindCallApply": false,
-    "forceConsistentCasingInFileNames": true,
+    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": false,
+    "noFallthroughCasesInSwitch": false,
-    "esModuleInterop": true
+    "esModuleInterop": true
-  },
+  },
-  "exclude": [
+  "exclude": [
-    "node_modules",
+    "node_modules",
-    "dist",
+    "dist",
-    "src/scripts/seed-database.ts",
+    "src/scripts/seed-database.ts",
-    "src/scripts/create-test-user.ts",
+    "src/scripts/create-test-user.ts",
-    "src/sitemap"
+    "src/sitemap"
-  ]
+  ]
-}
+}

bizmatch/Dockerfile

@@ -1,13 +1,41 @@
+# STAGE 1: Build
+FROM node:22-alpine AS builder
+
+# Wir erstellen ein Arbeitsverzeichnis, das eine Ebene über dem Projekt liegt
+WORKDIR /usr/src/app
+
+# 1. Wir kopieren die Backend-Models an die Stelle, wo Angular sie erwartet
+# Deine Pfade suchen nach ../bizmatch-server, also legen wir es daneben.
+COPY bizmatch-server/src/models ./bizmatch-server/src/models
+
+# 2. Jetzt kümmern wir uns um das Frontend
+# Wir kopieren erst die package Files für besseres Caching
+COPY bizmatch/package*.json ./bizmatch/
+
+# Wechseln in den Frontend Ordner zum Installieren
+WORKDIR /usr/src/app/bizmatch
+RUN npm ci
+
+# 3. Den Rest des Frontends kopieren
+COPY bizmatch/ .
+
+# 4. Bauen
+RUN npm run build:ssr
+
+# --- STAGE 2: Runtime ---
 FROM node:22-alpine
 
 WORKDIR /app
 
-# GANZEN dist-Ordner kopieren, nicht nur bizmatch
+ENV NODE_ENV=production
-COPY dist ./dist
+ENV PORT=4000
-COPY package*.json ./
+
+# Kopiere das Ergebnis aus dem Builder (Pfad beachten!)
+COPY --from=builder /usr/src/app/bizmatch/dist /app/dist
+COPY --from=builder /usr/src/app/bizmatch/package*.json /app/
 
 RUN npm ci --omit=dev
 
-EXPOSE 4200
+EXPOSE 4000
 
 CMD ["node", "dist/bizmatch/server/server.mjs"]

bizmatch/SSR_ANLEITUNG.md

@@ -1,275 +1,275 @@
-# BizMatch SSR - Schritt-für-Schritt-Anleitung
+# BizMatch SSR - Schritt-für-Schritt-Anleitung
-
+
-## Problem: SSR startet nicht auf neuem Laptop?
+## Problem: SSR startet nicht auf neuem Laptop?
-
+
-Diese Anleitung hilft Ihnen, BizMatch mit Server-Side Rendering (SSR) auf einem neuen Rechner zum Laufen zu bringen.
+Diese Anleitung hilft Ihnen, BizMatch mit Server-Side Rendering (SSR) auf einem neuen Rechner zum Laufen zu bringen.
-
+
----
+---
-
+
-## Voraussetzungen prüfen
+## Voraussetzungen prüfen
-
+
-```bash
+```bash
-# Node.js Version prüfen (mind. v18 erforderlich)
+# Node.js Version prüfen (mind. v18 erforderlich)
-node --version
+node --version
-
+
-# npm Version prüfen
+# npm Version prüfen
-npm --version
+npm --version
-
+
-# Falls Node.js fehlt oder veraltet ist:
+# Falls Node.js fehlt oder veraltet ist:
-# https://nodejs.org/ → LTS Version herunterladen
+# https://nodejs.org/ → LTS Version herunterladen
-```
+```
-
+
----
+---
-
+
-## Schritt 1: Repository klonen (falls noch nicht geschehen)
+## Schritt 1: Repository klonen (falls noch nicht geschehen)
-
+
-```bash
+```bash
-git clone https://gitea.bizmatch.net/aknuth/bizmatch-project.git
+git clone https://gitea.bizmatch.net/aknuth/bizmatch-project.git
-cd bizmatch-project/bizmatch
+cd bizmatch-project/bizmatch
-```
+```
-
+
----
+---
-
+
-## Schritt 2: Dependencies installieren
+## Schritt 2: Dependencies installieren
-
+
-**WICHTIG:** Dieser Schritt ist essentiell und wird oft vergessen!
+**WICHTIG:** Dieser Schritt ist essentiell und wird oft vergessen!
-
+
-```bash
+```bash
-cd ~/bizmatch-project/bizmatch
+cd ~/bizmatch-project/bizmatch
-npm install
+npm install
-```
+```
-
+
-> **Tipp:** Bei Problemen versuchen Sie: `rm -rf node_modules package-lock.json && npm install`
+> **Tipp:** Bei Problemen versuchen Sie: `rm -rf node_modules package-lock.json && npm install`
-
+
----
+---
-
+
-## ⚠️ WICHTIG: Erstes Setup auf neuem Laptop
+## ⚠️ WICHTIG: Erstes Setup auf neuem Laptop
-
+
-**Wenn Sie das Projekt zum ersten Mal auf einem neuen Rechner klonen, müssen Sie ZUERST einen Build erstellen!**
+**Wenn Sie das Projekt zum ersten Mal auf einem neuen Rechner klonen, müssen Sie ZUERST einen Build erstellen!**
-
+
-```bash
+```bash
-cd ~/bizmatch-project/bizmatch
+cd ~/bizmatch-project/bizmatch
-
+
-# 1. Dependencies installieren
+# 1. Dependencies installieren
-npm install
+npm install
-
+
-# 2. Build erstellen (erstellt dist/bizmatch/server/index.server.html)
+# 2. Build erstellen (erstellt dist/bizmatch/server/index.server.html)
-npm run build:ssr
+npm run build:ssr
-```
+```
-
+
-**Warum?**
+**Warum?**
-- Die `dist/` Folder werden NICHT ins Git eingecheckt (`.gitignore`)
+- Die `dist/` Folder werden NICHT ins Git eingecheckt (`.gitignore`)
-- Die Datei `dist/bizmatch/server/index.server.html` fehlt nach `git clone`
+- Die Datei `dist/bizmatch/server/index.server.html` fehlt nach `git clone`
-- Ohne Build → `npm run serve:ssr` crasht mit "Cannot find index.server.html"
+- Ohne Build → `npm run serve:ssr` crasht mit "Cannot find index.server.html"
-
+
-**Nach dem ersten Build** können Sie dann Development-Befehle nutzen.
+**Nach dem ersten Build** können Sie dann Development-Befehle nutzen.
-
+
----
+---
-
+
-## Schritt 3: Umgebung wählen
+## Schritt 3: Umgebung wählen
-
+
-### Option A: Entwicklung (OHNE SSR)
+### Option A: Entwicklung (OHNE SSR)
-
+
-Schnellster Weg für lokale Entwicklung:
+Schnellster Weg für lokale Entwicklung:
-
+
-```bash
+```bash
-npm start
+npm start
-```
+```
-
+
-- Öffnet automatisch: http://localhost:4200
+- Öffnet automatisch: http://localhost:4200
-- Hot-Reload aktiv (Code-Änderungen werden sofort sichtbar)
+- Hot-Reload aktiv (Code-Änderungen werden sofort sichtbar)
-- **Kein SSR** (schneller für Entwicklung)
+- **Kein SSR** (schneller für Entwicklung)
-
+
-### Option B: Development mit SSR
+### Option B: Development mit SSR
-
+
-Für SSR-Testing während der Entwicklung:
+Für SSR-Testing während der Entwicklung:
-
+
-```bash
+```bash
-npm run dev:ssr
+npm run dev:ssr
-```
+```
-
+
-- Öffnet: http://localhost:4200
+- Öffnet: http://localhost:4200
-- Hot-Reload aktiv
+- Hot-Reload aktiv
-- **SSR aktiv** (simuliert Production)
+- **SSR aktiv** (simuliert Production)
-- Nutzt DOM-Polyfills via `ssr-dom-preload.mjs`
+- Nutzt DOM-Polyfills via `ssr-dom-preload.mjs`
-
+
-### Option C: Production Build mit SSR
+### Option C: Production Build mit SSR
-
+
-Für finalen Production-Test:
+Für finalen Production-Test:
-
+
-```bash
+```bash
-# 1. Build erstellen
+# 1. Build erstellen
-npm run build:ssr
+npm run build:ssr
-
+
-# 2. Server starten
+# 2. Server starten
-npm run serve:ssr
+npm run serve:ssr
-```
+```
-
+
-- Server läuft auf: http://localhost:4200
+- Server läuft auf: http://localhost:4200
-- **Vollständiges SSR** (wie in Production)
+- **Vollständiges SSR** (wie in Production)
-- Kein Hot-Reload (für Änderungen erneut builden)
+- Kein Hot-Reload (für Änderungen erneut builden)
-
+
----
+---
-
+
-## Schritt 4: Testen
+## Schritt 4: Testen
-
+
-Öffnen Sie http://localhost:4200 im Browser.
+Öffnen Sie http://localhost:4200 im Browser.
-
+
-### SSR funktioniert, wenn:
+### SSR funktioniert, wenn:
-
+
-1. **Seitenquelltext ansehen** (Rechtsklick → "Seitenquelltext anzeigen"):
+1. **Seitenquelltext ansehen** (Rechtsklick → "Seitenquelltext anzeigen"):
-   - HTML-Inhalt ist bereits vorhanden (nicht nur `<app-root></app-root>`)
+   - HTML-Inhalt ist bereits vorhanden (nicht nur `<app-root></app-root>`)
-   - Meta-Tags sind sichtbar
+   - Meta-Tags sind sichtbar
-
+
-2. **JavaScript deaktivieren** (Chrome DevTools → Settings → Disable JavaScript):
+2. **JavaScript deaktivieren** (Chrome DevTools → Settings → Disable JavaScript):
-   - Seite zeigt Inhalt an (wenn auch nicht interaktiv)
+   - Seite zeigt Inhalt an (wenn auch nicht interaktiv)
-
+
-3. **Network-Tab** (Chrome DevTools → Network → Doc):
+3. **Network-Tab** (Chrome DevTools → Network → Doc):
-   - HTML-Response enthält bereits gerenderten Content
+   - HTML-Response enthält bereits gerenderten Content
-
+
----
+---
-
+
-## Häufige Probleme und Lösungen
+## Häufige Probleme und Lösungen
-
+
-### Problem 1: `npm: command not found`
+### Problem 1: `npm: command not found`
-
+
-**Lösung:** Node.js installieren
+**Lösung:** Node.js installieren
-
+
-```bash
+```bash
-# Ubuntu/Debian
+# Ubuntu/Debian
-curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
+curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
-sudo apt-get install -y nodejs
+sudo apt-get install -y nodejs
-
+
-# macOS
+# macOS
-brew install node
+brew install node
-
+
-# Windows
+# Windows
-# https://nodejs.org/ → Installer herunterladen
+# https://nodejs.org/ → Installer herunterladen
-```
+```
-
+
-### Problem 2: `Cannot find module '@angular/ssr'`
+### Problem 2: `Cannot find module '@angular/ssr'`
-
+
-**Lösung:** Dependencies neu installieren
+**Lösung:** Dependencies neu installieren
-
+
-```bash
+```bash
-rm -rf node_modules package-lock.json
+rm -rf node_modules package-lock.json
-npm install
+npm install
-```
+```
-
+
-### Problem 3: `Error: EADDRINUSE: address already in use :::4200`
+### Problem 3: `Error: EADDRINUSE: address already in use :::4200`
-
+
-**Lösung:** Port ist bereits belegt
+**Lösung:** Port ist bereits belegt
-
+
-```bash
+```bash
-# Prozess finden und beenden
+# Prozess finden und beenden
-lsof -i :4200
+lsof -i :4200
-kill -9 <PID>
+kill -9 <PID>
-
+
-# Oder anderen Port nutzen
+# Oder anderen Port nutzen
-PORT=4300 npm run serve:ssr
+PORT=4300 npm run serve:ssr
-```
+```
-
+
-### Problem 4: `Error loading @angular/platform-server` oder "Cannot find index.server.html"
+### Problem 4: `Error loading @angular/platform-server` oder "Cannot find index.server.html"
-
+
-**Lösung:** Build fehlt oder ist veraltet
+**Lösung:** Build fehlt oder ist veraltet
-
+
-```bash
+```bash
-# dist-Ordner löschen und neu builden
+# dist-Ordner löschen und neu builden
-rm -rf dist
+rm -rf dist
-npm run build:ssr
+npm run build:ssr
-
+
-# Dann starten
+# Dann starten
-npm run serve:ssr
+npm run serve:ssr
-```
+```
-
+
-**Häufiger Fehler auf neuem Laptop:**
+**Häufiger Fehler auf neuem Laptop:**
-- Nach `git pull` fehlt der `dist/` Ordner komplett
+- Nach `git pull` fehlt der `dist/` Ordner komplett
-- `index.server.html` wird beim Build erstellt, nicht ins Git eingecheckt
+- `index.server.html` wird beim Build erstellt, nicht ins Git eingecheckt
-- **Lösung:** Immer erst `npm run build:ssr` ausführen!
+- **Lösung:** Immer erst `npm run build:ssr` ausführen!
-
+
-### Problem 5: "Seite lädt nicht" oder "White Screen"
+### Problem 5: "Seite lädt nicht" oder "White Screen"
-
+
-**Lösung:**
+**Lösung:**
-
+
-1. Browser-Cache leeren (Strg+Shift+R / Cmd+Shift+R)
+1. Browser-Cache leeren (Strg+Shift+R / Cmd+Shift+R)
-2. DevTools öffnen → Console-Tab → Fehler prüfen
+2. DevTools öffnen → Console-Tab → Fehler prüfen
-3. Sicherstellen, dass Backend läuft (falls API-Calls)
+3. Sicherstellen, dass Backend läuft (falls API-Calls)
-
+
-### Problem 6: "Module not found: Error: Can't resolve 'window'"
+### Problem 6: "Module not found: Error: Can't resolve 'window'"
-
+
-**Lösung:** Browser-spezifischer Code wird im SSR-Build verwendet
+**Lösung:** Browser-spezifischer Code wird im SSR-Build verwendet
-
+
-- Prüfen Sie `ssr-dom-polyfill.ts` - DOM-Mocks sollten vorhanden sein
+- Prüfen Sie `ssr-dom-polyfill.ts` - DOM-Mocks sollten vorhanden sein
-- Code mit `isPlatformBrowser()` schützen:
+- Code mit `isPlatformBrowser()` schützen:
-
+
-```typescript
+```typescript
-import { isPlatformBrowser } from '@angular/common';
+import { isPlatformBrowser } from '@angular/common';
-import { PLATFORM_ID } from '@angular/core';
+import { PLATFORM_ID } from '@angular/core';
-
+
-constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
+constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
-
+
-ngOnInit() {
+ngOnInit() {
-  if (isPlatformBrowser(this.platformId)) {
+  if (isPlatformBrowser(this.platformId)) {
-    // Nur im Browser ausführen
+    // Nur im Browser ausführen
-    window.scrollTo(0, 0);
+    window.scrollTo(0, 0);
-  }
+  }
-}
+}
-```
+```
-
+
----
+---
-
+
-## Production Deployment mit PM2
+## Production Deployment mit PM2
-
+
-Für dauerhaften Betrieb (Server-Umgebung):
+Für dauerhaften Betrieb (Server-Umgebung):
-
+
-```bash
+```bash
-# PM2 global installieren
+# PM2 global installieren
-npm install -g pm2
+npm install -g pm2
-
+
-# Production Build
+# Production Build
-npm run build:ssr
+npm run build:ssr
-
+
-# Server mit PM2 starten
+# Server mit PM2 starten
-pm2 start dist/bizmatch/server/server.mjs --name "bizmatch"
+pm2 start dist/bizmatch/server/server.mjs --name "bizmatch"
-
+
-# Auto-Start bei Server-Neustart
+# Auto-Start bei Server-Neustart
-pm2 startup
+pm2 startup
-pm2 save
+pm2 save
-
+
-# Logs anzeigen
+# Logs anzeigen
-pm2 logs bizmatch
+pm2 logs bizmatch
-
+
-# Server neustarten nach Updates
+# Server neustarten nach Updates
-npm run build:ssr && pm2 restart bizmatch
+npm run build:ssr && pm2 restart bizmatch
-```
+```
-
+
----
+---
-
+
-## Unterschiede der Befehle
+## Unterschiede der Befehle
-
+
-| Befehl | SSR | Hot-Reload | Verwendung |
+| Befehl | SSR | Hot-Reload | Verwendung |
-|--------|-----|-----------|------------|
+|--------|-----|-----------|------------|
-| `npm start` | ❌ | ✅ | Entwicklung (schnell) |
+| `npm start` | ❌ | ✅ | Entwicklung (schnell) |
-| `npm run dev:ssr` | ✅ | ✅ | Entwicklung mit SSR |
+| `npm run dev:ssr` | ✅ | ✅ | Entwicklung mit SSR |
-| `npm run build:ssr` | ✅ Build | ❌ | Production Build erstellen |
+| `npm run build:ssr` | ✅ Build | ❌ | Production Build erstellen |
-| `npm run serve:ssr` | ✅ | ❌ | Production Server starten |
+| `npm run serve:ssr` | ✅ | ❌ | Production Server starten |
-
+
----
+---
-
+
-## Nächste Schritte
+## Nächste Schritte
-
+
-1. Für normale Entwicklung: **`npm start`** verwenden
+1. Für normale Entwicklung: **`npm start`** verwenden
-2. Vor Production-Deployment: **`npm run build:ssr`** testen
+2. Vor Production-Deployment: **`npm run build:ssr`** testen
-3. SSR-Funktionalität prüfen (siehe "Schritt 4: Testen")
+3. SSR-Funktionalität prüfen (siehe "Schritt 4: Testen")
-4. Bei Problemen: Logs prüfen und obige Lösungen durchgehen
+4. Bei Problemen: Logs prüfen und obige Lösungen durchgehen
-
+
----
+---
-
+
-## Support
+## Support
-
+
-Bei weiteren Problemen:
+Bei weiteren Problemen:
-
+
-1. **Logs prüfen:** `npm run serve:ssr` zeigt Fehler in der Konsole
+1. **Logs prüfen:** `npm run serve:ssr` zeigt Fehler in der Konsole
-2. **Browser DevTools:** Console + Network Tab
+2. **Browser DevTools:** Console + Network Tab
-3. **Build-Output:** `npm run build:ssr` zeigt Build-Fehler
+3. **Build-Output:** `npm run build:ssr` zeigt Build-Fehler
-4. **Node-Version:** `node --version` (sollte ≥ v18 sein)
+4. **Node-Version:** `node --version` (sollte ≥ v18 sein)

bizmatch/angular.json

@@ -1,162 +1,163 @@
-{
+{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
+  "version": 1,
-  "newProjectRoot": "projects",
+  "newProjectRoot": "projects",
-  "projects": {
+  "projects": {
-    "bizmatch": {
+    "bizmatch": {
-      "projectType": "application",
+      "projectType": "application",
-      "schematics": {
+      "schematics": {
-        "@schematics/angular:component": {
+        "@schematics/angular:component": {
-          "style": "scss",
+          "style": "scss",
-          "skipTests": true
+          "skipTests": true
-        }
+        }
-      },
+      },
-      "root": "",
+      "root": "",
-      "sourceRoot": "src",
+      "sourceRoot": "src",
-      "prefix": "app",
+      "prefix": "app",
-      "architect": {
+      "architect": {
-        "build": {
+        "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular-devkit/build-angular:application",
-          "options": {
+          "options": {
-            "outputPath": "dist/bizmatch",
+            "outputPath": "dist/bizmatch",
-            "index": "src/index.html",
+            "index": "src/index.html",
-            "browser": "src/main.ts",
+            "browser": "src/main.ts",
-            "server": "src/main.server.ts",
+            "server": "src/main.server.ts",
-            "prerender": false,
+            "prerender": false,
-            "ssr": {
+            "ssr": {
-              "entry": "server.ts"
+              "entry": "server.ts"
-            },
+            },
-            "allowedCommonJsDependencies": [
+            "allowedCommonJsDependencies": [
-              "quill-delta",
+              "quill-delta",
-              "leaflet",
+              "leaflet",
-              "dayjs",
+              "dayjs",
-              "qs"
+              "qs"
-            ],
+            ],
-            "polyfills": [
+            "polyfills": [
-              "zone.js"
+              "zone.js"
-            ],
+            ],
-            "tsConfig": "tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
+            "inlineStyleLanguage": "scss",
-            "assets": [
+            "assets": [
-              {
+              {
-                "glob": "**/*",
+                "glob": "**/*",
-                "input": "public"
+                "input": "public"
-              },
+              },
-              "src/favicon.ico",
+              "src/favicon.ico",
-              "src/assets",
+              "src/assets",
-              "src/robots.txt",
+              "src/robots.txt",
-              {
+              {
-                "glob": "**/*",
+                "glob": "**/*",
-                "input": "node_modules/leaflet/dist/images",
+                "input": "node_modules/leaflet/dist/images",
-                "output": "assets/leaflet/"
+                "output": "assets/leaflet/"
-              }
+              }
-            ],
+            ],
-            "styles": [
+            "styles": [
-              "src/styles.scss",
+              "src/styles.scss",
-              "src/styles/lazy-load.css",
+              "src/styles/lazy-load.css",
-              "node_modules/quill/dist/quill.snow.css",
+              "node_modules/quill/dist/quill.snow.css",
-              "node_modules/leaflet/dist/leaflet.css",
+              "node_modules/leaflet/dist/leaflet.css",
-              "node_modules/ngx-sharebuttons/themes/default.scss"
+              "node_modules/ngx-sharebuttons/themes/default.scss"
-            ]
+            ]
-          },
+          },
-          "configurations": {
+          "configurations": {
-            "production": {
+            "production": {
-              "budgets": [
+              "budgets": [
-                {
+                {
-                  "type": "initial",
+                  "type": "initial",
-                  "maximumWarning": "500kb",
+                  "maximumWarning": "500kb",
-                  "maximumError": "2mb"
+                  "maximumError": "2mb"
-                },
+                },
-                {
+                {
-                  "type": "anyComponentStyle",
+                  "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
+                  "maximumWarning": "30kb",
-                  "maximumError": "4kb"
+                  "maximumError": "30kb"
-                }
+                }
-              ],
+              ],
-              "outputHashing": "all"
+              "outputHashing": "all"
-            },
+            },
-            "development": {
+            "development": {
-              "optimization": false,
+              "optimization": false,
-              "extractLicenses": false,
+              "extractLicenses": false,
-              "sourceMap": true,
+              "sourceMap": true,
-              "ssr": false
+              "ssr": false
-            },
+            },
-            "dev": {
+            "dev": {
-              "fileReplacements": [
+              "fileReplacements": [
-                {
+                {
-                  "replace": "src/environments/environment.ts",
+                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.dev.ts"
+                  "with": "src/environments/environment.dev.ts"
-                }
+                }
-              ],
+              ],
-              "optimization": false,
+              "optimization": false,
-              "extractLicenses": false,
+              "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true
-            },
+            },
-            "prod": {
+            "prod": {
-              "fileReplacements": [
+              "fileReplacements": [
-                {
+                {
-                  "replace": "src/environments/environment.ts",
+                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
+                  "with": "src/environments/environment.prod.ts"
-                }
+                }
-              ],
+              ],
-              "optimization": true,
+              "optimization": true,
-              "extractLicenses": false,
+              "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
-            }
+              "outputHashing": "all"
-          },
+            }
-          "defaultConfiguration": "production"
+          },
-        },
+          "defaultConfiguration": "production"
-        "serve": {
+        },
-          "builder": "@angular-devkit/build-angular:dev-server",
+        "serve": {
-          "configurations": {
+          "builder": "@angular-devkit/build-angular:dev-server",
-            "production": {
+          "configurations": {
-              "buildTarget": "bizmatch:build:production"
+            "production": {
-            },
+              "buildTarget": "bizmatch:build:production"
-            "development": {
+            },
-              "buildTarget": "bizmatch:build:development"
+            "development": {
-            }
+              "buildTarget": "bizmatch:build:development"
-          },
+            }
-          "defaultConfiguration": "development",
+          },
-          "options": {
+          "defaultConfiguration": "development",
-            "proxyConfig": "proxy.conf.json"
+          "options": {
-          }
+            "proxyConfig": "proxy.conf.json"
-        },
+          }
-        "extract-i18n": {
+        },
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+        "extract-i18n": {
-          "options": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
-            "buildTarget": "bizmatch:build"
+          "options": {
-          }
+            "buildTarget": "bizmatch:build"
-        },
+          }
-        "test": {
+        },
-          "builder": "@angular-devkit/build-angular:karma",
+        "test": {
-          "options": {
+          "builder": "@angular-devkit/build-angular:karma",
-            "polyfills": [
+          "options": {
-              "zone.js",
+            "polyfills": [
-              "zone.js/testing"
+              "zone.js",
-            ],
+              "zone.js/testing"
-            "tsConfig": "tsconfig.spec.json",
+            ],
-            "inlineStyleLanguage": "scss",
+            "tsConfig": "tsconfig.spec.json",
-            "assets": [
+            "inlineStyleLanguage": "scss",
-              "src/assets",
+            "assets": [
-              "cropped-Favicon-32x32.png",
+              "src/assets",
-              "cropped-Favicon-180x180.png",
+              "cropped-Favicon-32x32.png",
-              "cropped-Favicon-191x192.png",
+              "cropped-Favicon-180x180.png",
-              {
+              "cropped-Favicon-191x192.png",
-                "glob": "**/*",
+              {
-                "input": "./node_modules/leaflet/dist/images",
+                "glob": "**/*",
-                "output": "assets/"
+                "input": "./node_modules/leaflet/dist/images",
-              }
+                "output": "assets/"
-            ],
+              }
-            "styles": [
+            ],
-              "src/styles.scss"
+            "styles": [
-            ],
+              "src/styles.scss"
-            "scripts": []
+            ],
-          }
+            "scripts": []
-        }
+          }
-      }
+        }
-    }
+      }
-  },
+    }
-  "cli": {
+  },
-    "analytics": false
+  "cli": {
-  }
+    "analytics": false
+  }
 }

bizmatch/docker-compose.yml

@@ -1,10 +0,0 @@
-services:
-  bizmatch-ssr:
-    build: .
-    image: bizmatch-ssr
-    container_name: bizmatch-ssr
-    restart: unless-stopped
-    ports:
-      - '4200:4200'
-    environment:
-      NODE_ENV: DEVELOPMENT

bizmatch/package.json

@@ -1,86 +1,86 @@
-{
+{
-  "name": "bizmatch",
+  "name": "bizmatch",
-  "version": "0.0.1",
+  "version": "0.0.1",
-  "scripts": {
+  "scripts": {
-    "ng": "ng",
+    "ng": "ng",
-    "start": "ng serve --host 0.0.0.0 & http-server ../bizmatch-server",
+    "start": "ng serve --host 0.0.0.0 & http-server ../bizmatch-server",
-    "prebuild": "node version.js",
+    "prebuild": "node version.js",
-    "build": "node version.js && ng build",
+    "build": "node version.js && ng build",
-    "build.dev": "node version.js && ng build --configuration dev --output-hashing=all",
+    "build.dev": "node version.js && ng build --configuration dev --output-hashing=all",
-    "build.prod": "node version.js && ng build --configuration prod --output-hashing=all",
+    "build.prod": "node version.js && ng build --configuration prod --output-hashing=all",
-    "build:ssr": "node version.js && ng build --configuration prod",
+    "build:ssr": "node version.js && ng build --configuration prod",
-    "build:ssr:dev": "node version.js && ng build --configuration dev",
+    "build:ssr:dev": "node version.js && ng build --configuration dev",
-    "watch": "ng build --watch --configuration development",
+    "watch": "ng build --watch --configuration development",
-    "test": "ng test",
+    "test": "ng test",
-    "serve:ssr": "node dist/bizmatch/server/server.mjs",
+    "serve:ssr": "node dist/bizmatch/server/server.mjs",
-    "serve:ssr:bizmatch": "node dist/bizmatch/server/server.mjs",
+    "serve:ssr:bizmatch": "node dist/bizmatch/server/server.mjs",
-    "dev:ssr": "NODE_OPTIONS='--import ./ssr-dom-preload.mjs' ng serve"
+    "dev:ssr": "NODE_OPTIONS='--import ./ssr-dom-preload.mjs' ng serve"
-  },
+  },
-  "private": true,
+  "private": true,
-  "dependencies": {
+  "dependencies": {
-    "@angular/animations": "^19.2.16",
+    "@angular/animations": "^19.2.16",
-    "@angular/cdk": "^19.1.5",
+    "@angular/cdk": "^19.1.5",
-    "@angular/common": "^19.2.16",
+    "@angular/common": "^19.2.16",
-    "@angular/compiler": "^19.2.16",
+    "@angular/compiler": "^19.2.16",
-    "@angular/core": "^19.2.16",
+    "@angular/core": "^19.2.16",
-    "@angular/fire": "^19.2.0",
+    "@angular/fire": "^19.2.0",
-    "@angular/forms": "^19.2.16",
+    "@angular/forms": "^19.2.16",
-    "@angular/platform-browser": "^19.2.16",
+    "@angular/platform-browser": "^19.2.16",
-    "@angular/platform-browser-dynamic": "^19.2.16",
+    "@angular/platform-browser-dynamic": "^19.2.16",
-    "@angular/platform-server": "^19.2.16",
+    "@angular/platform-server": "^19.2.16",
-    "@angular/router": "^19.2.16",
+    "@angular/router": "^19.2.16",
-    "@angular/ssr": "^19.2.16",
+    "@angular/ssr": "^19.2.16",
-    "@bluehalo/ngx-leaflet": "^19.0.0",
+    "@bluehalo/ngx-leaflet": "^19.0.0",
-    "@fortawesome/angular-fontawesome": "^1.0.0",
+    "@fortawesome/angular-fontawesome": "^1.0.0",
-    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/fontawesome-free": "^6.7.2",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@ng-select/ng-select": "^14.9.0",
+    "@ng-select/ng-select": "^14.9.0",
-    "@ngneat/until-destroy": "^10.0.0",
+    "@ngneat/until-destroy": "^10.0.0",
-    "@types/cropperjs": "^1.3.0",
+    "@types/cropperjs": "^1.3.0",
-    "@types/leaflet": "^1.9.12",
+    "@types/leaflet": "^1.9.12",
-    "@types/uuid": "^10.0.0",
+    "@types/uuid": "^10.0.0",
-    "browser-bunyan": "^1.8.0",
+    "browser-bunyan": "^1.8.0",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.11",
-    "express": "^4.18.2",
+    "express": "^4.18.2",
-    "flowbite": "^2.4.1",
+    "flowbite": "^2.4.1",
-    "jwt-decode": "^4.0.0",
+    "jwt-decode": "^4.0.0",
-    "leaflet": "^1.9.4",
+    "leaflet": "^1.9.4",
-    "memoize-one": "^6.0.0",
+    "memoize-one": "^6.0.0",
-    "ng-gallery": "^11.0.0",
+    "ng-gallery": "^11.0.0",
-    "ngx-currency": "^19.0.0",
+    "ngx-currency": "^19.0.0",
-    "ngx-image-cropper": "^8.0.0",
+    "ngx-image-cropper": "^8.0.0",
-    "ngx-mask": "^18.0.0",
+    "ngx-mask": "^18.0.0",
-    "ngx-quill": "^27.1.2",
+    "ngx-quill": "^27.1.2",
-    "ngx-sharebuttons": "^15.0.3",
+    "ngx-sharebuttons": "^15.0.3",
-    "on-change": "^5.0.1",
+    "on-change": "^5.0.1",
-    "posthog-js": "^1.259.0",
+    "posthog-js": "^1.259.0",
-    "quill": "2.0.2",
+    "quill": "2.0.2",
-    "rxjs": "~7.8.1",
+    "rxjs": "~7.8.1",
-    "tslib": "^2.6.3",
+    "tslib": "^2.6.3",
-    "urlcat": "^3.1.0",
+    "urlcat": "^3.1.0",
-    "uuid": "^10.0.0",
+    "uuid": "^10.0.0",
-    "zone.js": "~0.15.0",
+    "zone.js": "~0.15.0",
-    "zod": "^4.1.12"
+    "zod": "^4.1.12"
-  },
+  },
-  "devDependencies": {
+  "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.16",
+    "@angular-devkit/build-angular": "^19.2.16",
-    "@angular/cli": "^19.2.16",
+    "@angular/cli": "^19.2.16",
-    "@angular/compiler-cli": "^19.2.16",
+    "@angular/compiler-cli": "^19.2.16",
-    "@types/express": "^4.17.21",
+    "@types/express": "^4.17.21",
-    "@types/jasmine": "~5.1.4",
+    "@types/jasmine": "~5.1.4",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.9",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.19",
-    "http-server": "^14.1.1",
+    "http-server": "^14.1.1",
-    "jasmine-core": "~5.1.2",
+    "jasmine-core": "~5.1.2",
-    "karma": "~6.4.2",
+    "karma": "~6.4.2",
-    "karma-chrome-launcher": "~3.2.0",
+    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.1",
+    "karma-coverage": "~2.2.1",
-    "karma-jasmine": "~5.1.0",
+    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.39",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.4",
-    "typescript": "~5.7.2"
+    "typescript": "~5.7.2"
-  }
+  }
 }

bizmatch/proxy.conf.json

@@ -1,28 +1,28 @@
-{
+{
-  "/bizmatch": {
+  "/bizmatch": {
-    "target": "http://localhost:3001",
+    "target": "http://localhost:3001",
-    "secure": false,
+    "secure": false,
-    "changeOrigin": true,
+    "changeOrigin": true,
-    "logLevel": "debug"
+    "logLevel": "debug"
-  },
+  },
-  "/pictures": {
+  "/pictures": {
-    "target": "http://localhost:8081",
+    "target": "http://localhost:8081",
-    "secure": false
+    "secure": false
-  },
+  },
-  "/ipify": {
+  "/ipify": {
-    "target": "https://api.ipify.org",
+    "target": "https://api.ipify.org",
-    "secure": true,
+    "secure": true,
-    "changeOrigin": true,
+    "changeOrigin": true,
-    "pathRewrite": {
+    "pathRewrite": {
-      "^/ipify": ""
+      "^/ipify": ""
-    }
+    }
-  },
+  },
-  "/ipinfo": {
+  "/ipinfo": {
-    "target": "https://ipinfo.io",
+    "target": "https://ipinfo.io",
-    "secure": true,
+    "secure": true,
-    "changeOrigin": true,
+    "changeOrigin": true,
-    "pathRewrite": {
+    "pathRewrite": {
-      "^/ipinfo": ""
+      "^/ipinfo": ""
-    }
+    }
-  }
+  }
 }

bizmatch/public/googleccd5315437d68a49.html

@@ -0,0 +1 @@
+google-site-verification: googleccd5315437d68a49.html

bizmatch/server.ts

@@ -1,82 +1,152 @@
-// IMPORTANT: DOM polyfill must be imported FIRST, before any browser-dependent libraries
+// IMPORTANT: DOM polyfill must be imported FIRST, before any browser-dependent libraries
-import './src/ssr-dom-polyfill';
+import './src/ssr-dom-polyfill';
-
+
-import { APP_BASE_HREF } from '@angular/common';
+import { APP_BASE_HREF } from '@angular/common';
-import { AngularNodeAppEngine, createNodeRequestHandler, writeResponseToNodeResponse } from '@angular/ssr/node';
+import { AngularNodeAppEngine, createNodeRequestHandler, writeResponseToNodeResponse } from '@angular/ssr/node';
-import { ɵsetAngularAppEngineManifest as setAngularAppEngineManifest } from '@angular/ssr';
+import { ɵsetAngularAppEngineManifest as setAngularAppEngineManifest } from '@angular/ssr';
-import express from 'express';
+import express from 'express';
-import { fileURLToPath } from 'node:url';
+import { fileURLToPath } from 'node:url';
-import { dirname, join, resolve } from 'node:path';
+import { dirname, join, resolve } from 'node:path';
-
+
-// The Express app is exported so that it can be used by serverless Functions.
+// The Express app is exported so that it can be used by serverless Functions.
-export async function app(): Promise<express.Express> {
+export async function app(): Promise<express.Express> {
-  const server = express();
+  const server = express();
-  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
-  const browserDistFolder = resolve(serverDistFolder, '../browser');
+  const browserDistFolder = resolve(serverDistFolder, '../browser');
-  const indexHtml = join(serverDistFolder, 'index.server.html');
+  const indexHtml = join(serverDistFolder, 'index.server.html');
-
+
-  // Explicitly load and set the Angular app engine manifest
+  // Explicitly load and set the Angular app engine manifest
-  // This is required for environments where the manifest is not auto-loaded
+  // This is required for environments where the manifest is not auto-loaded
-  const manifestPath = join(serverDistFolder, 'angular-app-engine-manifest.mjs');
+  const manifestPath = join(serverDistFolder, 'angular-app-engine-manifest.mjs');
-  const manifest = await import(manifestPath);
+  const manifest = await import(manifestPath);
-  setAngularAppEngineManifest(manifest.default);
+  setAngularAppEngineManifest(manifest.default);
-
+
-  const angularApp = new AngularNodeAppEngine();
+  const angularApp = new AngularNodeAppEngine();
-
+
-  server.set('view engine', 'html');
+  server.set('view engine', 'html');
-  server.set('views', browserDistFolder);
+  server.set('views', browserDistFolder);
-
+
-  // Example Express Rest API endpoints
+  // Sitemap XML endpoints - MUST be before static files middleware
-  // server.get('/api/**', (req, res) => { });
+  server.get('/sitemap.xml', async (req, res) => {
-  // Serve static files from /browser
+    try {
-  server.get('*.*', express.static(browserDistFolder, {
+      const sitemapIndexXml = `<?xml version="1.0" encoding="UTF-8"?>
-    maxAge: '1y'
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-  }));
+  <sitemap>
-
+    <loc>https://www.bizmatch.net/sitemap-static.xml</loc>
-  // All regular routes use the Angular engine
+    <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
-  server.get('*', async (req, res, next) => {
+  </sitemap>
-    console.log(`[SSR] Handling request: ${req.method} ${req.url}`);
+</sitemapindex>`;
-    try {
+
-      const response = await angularApp.handle(req);
+      res.header('Content-Type', 'application/xml; charset=utf-8');
-      if (response) {
+      res.send(sitemapIndexXml);
-        console.log(`[SSR] Response received for ${req.url}, status: ${response.status}`);
+    } catch (error) {
-        writeResponseToNodeResponse(response, res);
+      console.error('[SSR] Error generating sitemap index:', error);
-      } else {
+      res.status(500).send('Error generating sitemap');
-        console.log(`[SSR] No response for ${req.url} - Angular engine returned null`);
+    }
-        console.log(`[SSR] This usually means the route couldn't be rendered. Check for:
+  });
-   1. Browser API usage in components
+
-   2. Missing platform checks
+  server.get('/sitemap-static.xml', async (req, res) => {
-   3. Errors during component initialization`);
+    try {
-        res.sendStatus(404);
+      const sitemapXml = `<?xml version="1.0" encoding="UTF-8"?>
-      }
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-    } catch (err) {
+  <url>
-      console.error(`[SSR] Error handling ${req.url}:`, err);
+    <loc>https://www.bizmatch.net/</loc>
-      console.error(`[SSR] Stack trace:`, err.stack);
+    <changefreq>daily</changefreq>
-      next(err);
+    <priority>1.0</priority>
-    }
+  </url>
-  });
+  <url>
-
+    <loc>https://www.bizmatch.net/home</loc>
-  return server;
+    <changefreq>daily</changefreq>
-}
+    <priority>1.0</priority>
-
+  </url>
-// Global error handlers for debugging
+  <url>
-process.on('unhandledRejection', (reason, promise) => {
+    <loc>https://www.bizmatch.net/businessListings</loc>
-  console.error('[SSR] Unhandled Rejection at:', promise, 'reason:', reason);
+    <changefreq>daily</changefreq>
-});
+    <priority>0.9</priority>
-
+  </url>
-process.on('uncaughtException', (error) => {
+  <url>
-  console.error('[SSR] Uncaught Exception:', error);
+    <loc>https://www.bizmatch.net/commercialPropertyListings</loc>
-  console.error('[SSR] Stack:', error.stack);
+    <changefreq>daily</changefreq>
-});
+    <priority>0.9</priority>
-
+  </url>
-async function run(): Promise<void> {
+  <url>
-  const port = process.env['PORT'] || 4200;
+    <loc>https://www.bizmatch.net/brokerListings</loc>
-
+    <changefreq>daily</changefreq>
-  // Start up the Node server
+    <priority>0.9</priority>
-  const server = await app();
+  </url>
-  server.listen(port, () => {
+  <url>
-    console.log(`Node Express server listening on http://localhost:${port}`);
+    <loc>https://www.bizmatch.net/terms-of-use</loc>
-  });
+    <changefreq>monthly</changefreq>
-}
+    <priority>0.5</priority>
-
+  </url>
-run();
+  <url>
+    <loc>https://www.bizmatch.net/privacy-statement</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.5</priority>
+  </url>
+</urlset>`;
+
+      res.header('Content-Type', 'application/xml; charset=utf-8');
+      res.send(sitemapXml);
+    } catch (error) {
+      console.error('[SSR] Error generating static sitemap:', error);
+      res.status(500).send('Error generating sitemap');
+    }
+  });
+
+  // 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('*', async (req, res, next) => {
+    console.log(`[SSR] Handling request: ${req.method} ${req.url}`);
+    // Cache SSR-rendered pages at CDN level
+    res.setHeader('Cache-Control', 'public, s-maxage=300, stale-while-revalidate=600');
+    try {
+      const response = await angularApp.handle(req);
+      if (response) {
+        console.log(`[SSR] Response received for ${req.url}, status: ${response.status}`);
+        writeResponseToNodeResponse(response, res);
+      } else {
+        console.log(`[SSR] No response for ${req.url} - Angular engine returned null`);
+        console.log(`[SSR] This usually means the route couldn't be rendered. Check for:
+   1. Browser API usage in components
+   2. Missing platform checks
+   3. Errors during component initialization`);
+        res.sendStatus(404);
+      }
+    } catch (err) {
+      console.error(`[SSR] Error handling ${req.url}:`, err);
+      console.error(`[SSR] Stack trace:`, err.stack);
+      next(err);
+    }
+  });
+
+  return server;
+}
+
+// Global error handlers for debugging
+process.on('unhandledRejection', (reason, promise) => {
+  console.error('[SSR] Unhandled Rejection at:', promise, 'reason:', reason);
+});
+
+process.on('uncaughtException', (error) => {
+  console.error('[SSR] Uncaught Exception:', error);
+  console.error('[SSR] Stack:', error.stack);
+});
+
+async function run(): Promise<void> {
+  const port = process.env['PORT'] || 4200;
+
+  // Start up the Node server
+  const server = await app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+run();

bizmatch/src/app/app.component.ts

@@ -1,85 +1,85 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { AfterViewInit, Component, HostListener, PLATFORM_ID, inject } from '@angular/core';
+import { AfterViewInit, Component, HostListener, PLATFORM_ID, inject } from '@angular/core';
-import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
-import { initFlowbite } from 'flowbite';
+import { initFlowbite } from 'flowbite';
-import { filter } from 'rxjs/operators';
+import { filter } from 'rxjs/operators';
-import build from '../build';
+import build from '../build';
-import { ConfirmationComponent } from './components/confirmation/confirmation.component';
+import { ConfirmationComponent } from './components/confirmation/confirmation.component';
-import { ConfirmationService } from './components/confirmation/confirmation.service';
+import { ConfirmationService } from './components/confirmation/confirmation.service';
-import { EMailComponent } from './components/email/email.component';
+import { EMailComponent } from './components/email/email.component';
-import { FooterComponent } from './components/footer/footer.component';
+import { FooterComponent } from './components/footer/footer.component';
-import { HeaderComponent } from './components/header/header.component';
+import { HeaderComponent } from './components/header/header.component';
-import { MessageContainerComponent } from './components/message/message-container.component';
+import { MessageContainerComponent } from './components/message/message-container.component';
-import { SearchModalCommercialComponent } from './components/search-modal/search-modal-commercial.component';
+import { SearchModalCommercialComponent } from './components/search-modal/search-modal-commercial.component';
-import { SearchModalComponent } from './components/search-modal/search-modal.component';
+import { SearchModalComponent } from './components/search-modal/search-modal.component';
-import { AuditService } from './services/audit.service';
+import { AuditService } from './services/audit.service';
-import { GeoService } from './services/geo.service';
+import { GeoService } from './services/geo.service';
-import { LoadingService } from './services/loading.service';
+import { LoadingService } from './services/loading.service';
-import { UserService } from './services/user.service';
+import { UserService } from './services/user.service';
-
+
-@Component({
+@Component({
-  selector: 'app-root',
+  selector: 'app-root',
-  standalone: true,
+  standalone: true,
-  imports: [CommonModule, RouterOutlet, HeaderComponent, FooterComponent, MessageContainerComponent, SearchModalComponent, SearchModalCommercialComponent, ConfirmationComponent, EMailComponent],
+  imports: [CommonModule, RouterOutlet, HeaderComponent, FooterComponent, MessageContainerComponent, SearchModalComponent, SearchModalCommercialComponent, ConfirmationComponent, EMailComponent],
-  providers: [],
+  providers: [],
-  templateUrl: './app.component.html',
+  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss',
+  styleUrl: './app.component.scss',
-})
+})
-export class AppComponent implements AfterViewInit {
+export class AppComponent implements AfterViewInit {
-  build = build;
+  build = build;
-  title = 'bizmatch';
+  title = 'bizmatch';
-  actualRoute = '';
+  actualRoute = '';
-  private platformId = inject(PLATFORM_ID);
+  private platformId = inject(PLATFORM_ID);
-  private isBrowser = isPlatformBrowser(this.platformId);
+  private isBrowser = isPlatformBrowser(this.platformId);
-
+
-  public constructor(
+  public constructor(
-    public loadingService: LoadingService,
+    public loadingService: LoadingService,
-    private router: Router,
+    private router: Router,
-    private activatedRoute: ActivatedRoute,
+    private activatedRoute: ActivatedRoute,
-    private userService: UserService,
+    private userService: UserService,
-    private confirmationService: ConfirmationService,
+    private confirmationService: ConfirmationService,
-    private auditService: AuditService,
+    private auditService: AuditService,
-    private geoService: GeoService,
+    private geoService: GeoService,
-  ) {
+  ) {
-    this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+    this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
-      let currentRoute = this.activatedRoute.root;
+      let currentRoute = this.activatedRoute.root;
-      while (currentRoute.children[0] !== undefined) {
+      while (currentRoute.children[0] !== undefined) {
-        currentRoute = currentRoute.children[0];
+        currentRoute = currentRoute.children[0];
-      }
+      }
-      // Hier haben Sie Zugriff auf den aktuellen Route-Pfad
+      // Hier haben Sie Zugriff auf den aktuellen Route-Pfad
-      this.actualRoute = currentRoute.snapshot.url[0].path;
+      this.actualRoute = currentRoute.snapshot.url[0].path;
-
+
-      // Re-initialize Flowbite after navigation to ensure all components are ready
+      // Re-initialize Flowbite after navigation to ensure all components are ready
-      if (this.isBrowser) {
+      if (this.isBrowser) {
-        setTimeout(() => {
+        setTimeout(() => {
-          initFlowbite();
+          initFlowbite();
-        }, 50);
+        }, 50);
-      }
+      }
-    });
+    });
-  }
+  }
-  ngOnInit() {
+  ngOnInit() {
-    // Navigation tracking moved from constructor
+    // Navigation tracking moved from constructor
-  }
+  }
-
+
-  ngAfterViewInit() {
+  ngAfterViewInit() {
-    // Initialize Flowbite for dropdowns, modals, and other interactive components
+    // Initialize Flowbite for dropdowns, modals, and other interactive components
-    // Note: Drawers work automatically with data-drawer-target attributes
+    // Note: Drawers work automatically with data-drawer-target attributes
-    if (this.isBrowser) {
+    if (this.isBrowser) {
-      initFlowbite();
+      initFlowbite();
-    }
+    }
-  }
+  }
-
+
-  @HostListener('window:keydown', ['$event'])
+  @HostListener('window:keydown', ['$event'])
-  handleKeyboardEvent(event: KeyboardEvent) {
+  handleKeyboardEvent(event: KeyboardEvent) {
-    if (event.shiftKey && event.ctrlKey && event.key === 'V') {
+    if (event.shiftKey && event.ctrlKey && event.key === 'V') {
-      this.showVersionDialog();
+      this.showVersionDialog();
-    }
+    }
-  }
+  }
-  showVersionDialog() {
+  showVersionDialog() {
-    this.confirmationService.showConfirmation({ message: `App Version: ${this.build.timestamp}`, buttons: 'none' });
+    this.confirmationService.showConfirmation({ message: `App Version: ${this.build.timestamp}`, buttons: 'none' });
-  }
+  }
-  isFilterRoute(): boolean {
+  isFilterRoute(): boolean {
-    const filterRoutes = ['/businessListings', '/commercialPropertyListings', '/brokerListings'];
+    const filterRoutes = ['/businessListings', '/commercialPropertyListings', '/brokerListings'];
-    return filterRoutes.includes(this.actualRoute);
+    return filterRoutes.includes(this.actualRoute);
-  }
+  }
-}
+}

bizmatch/src/app/app.config.server.ts

@@ -1,15 +1,15 @@
-import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
-import { provideServerRendering } from '@angular/platform-server';
+import { provideServerRendering } from '@angular/platform-server';
-import { provideServerRouting } from '@angular/ssr';
+import { provideServerRouting } from '@angular/ssr';
-import { appConfig } from './app.config';
+import { appConfig } from './app.config';
-import { serverRoutes } from './app.routes.server';
+import { serverRoutes } from './app.routes.server';
-
+
-const serverConfig: ApplicationConfig = {
+const serverConfig: ApplicationConfig = {
-  providers: [
+  providers: [
-    provideServerRendering(),
+    provideServerRendering(),
-    provideServerRouting(serverRoutes)
+    provideServerRouting(serverRoutes)
-  ]
+  ]
-};
+};
-
+
-export const config = mergeApplicationConfig(appConfig, serverConfig);
+export const config = mergeApplicationConfig(appConfig, serverConfig);
-
+

bizmatch/src/app/app.config.ts

@@ -1,102 +1,102 @@
-import { IMAGE_CONFIG, isPlatformBrowser } from '@angular/common';
+import { IMAGE_CONFIG, isPlatformBrowser } from '@angular/common';
-import { APP_INITIALIZER, ApplicationConfig, ErrorHandler, PLATFORM_ID, inject } from '@angular/core';
+import { APP_INITIALIZER, ApplicationConfig, ErrorHandler, PLATFORM_ID, inject } from '@angular/core';
-import { provideClientHydration } from '@angular/platform-browser';
+import { provideClientHydration } from '@angular/platform-browser';
-import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router';
+import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router';
-
+
-import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
+import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
-import { getAuth, provideAuth } from '@angular/fire/auth';
+import { getAuth, provideAuth } from '@angular/fire/auth';
-import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideAnimations } from '@angular/platform-browser/animations';
-import { GALLERY_CONFIG, GalleryConfig } from 'ng-gallery';
+import { GALLERY_CONFIG, GalleryConfig } from 'ng-gallery';
-import { provideQuillConfig } from 'ngx-quill';
+import { provideQuillConfig } from 'ngx-quill';
-import { provideShareButtonsOptions, SharerMethods, withConfig } from 'ngx-sharebuttons';
+import { provideShareButtonsOptions, SharerMethods, withConfig } from 'ngx-sharebuttons';
-import { shareIcons } from 'ngx-sharebuttons/icons';
+import { shareIcons } from 'ngx-sharebuttons/icons';
-import { environment } from '../environments/environment';
+import { environment } from '../environments/environment';
-import { routes } from './app.routes';
+import { routes } from './app.routes';
-import { AuthInterceptor } from './interceptors/auth.interceptor';
+import { AuthInterceptor } from './interceptors/auth.interceptor';
-import { LoadingInterceptor } from './interceptors/loading.interceptor';
+import { LoadingInterceptor } from './interceptors/loading.interceptor';
-import { TimeoutInterceptor } from './interceptors/timeout.interceptor';
+import { TimeoutInterceptor } from './interceptors/timeout.interceptor';
-import { GlobalErrorHandler } from './services/globalErrorHandler';
+import { GlobalErrorHandler } from './services/globalErrorHandler';
-import { POSTHOG_INIT_PROVIDER } from './services/posthog.factory';
+import { POSTHOG_INIT_PROVIDER } from './services/posthog.factory';
-import { SelectOptionsService } from './services/select-options.service';
+import { SelectOptionsService } from './services/select-options.service';
-import { createLogger } from './utils/utils';
+import { createLogger } from './utils/utils';
-
+
-const logger = createLogger('ApplicationConfig');
+const logger = createLogger('ApplicationConfig');
-export const appConfig: ApplicationConfig = {
+export const appConfig: ApplicationConfig = {
-  providers: [
+  providers: [
-    // Temporarily disabled for SSR debugging
+    // Temporarily disabled for SSR debugging
-    // provideClientHydration(),
+    // provideClientHydration(),
-    provideHttpClient(withInterceptorsFromDi()),
+    provideHttpClient(withInterceptorsFromDi()),
-    {
+    {
-      provide: APP_INITIALIZER,
+      provide: APP_INITIALIZER,
-      useFactory: initServices,
+      useFactory: initServices,
-      multi: true,
+      multi: true,
-      deps: [SelectOptionsService],
+      deps: [SelectOptionsService],
-    },
+    },
-    {
+    {
-      provide: HTTP_INTERCEPTORS,
+      provide: HTTP_INTERCEPTORS,
-      useClass: LoadingInterceptor,
+      useClass: LoadingInterceptor,
-      multi: true,
+      multi: true,
-    },
+    },
-    {
+    {
-      provide: HTTP_INTERCEPTORS,
+      provide: HTTP_INTERCEPTORS,
-      useClass: TimeoutInterceptor,
+      useClass: TimeoutInterceptor,
-      multi: true,
+      multi: true,
-    },
+    },
-    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
+    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
-    {
+    {
-      provide: 'TIMEOUT_DURATION',
+      provide: 'TIMEOUT_DURATION',
-      useValue: 5000, // Standard-Timeout von 5 Sekunden
+      useValue: 5000, // Standard-Timeout von 5 Sekunden
-    },
+    },
-    {
+    {
-      provide: GALLERY_CONFIG,
+      provide: GALLERY_CONFIG,
-      useValue: {
+      useValue: {
-        autoHeight: true,
+        autoHeight: true,
-        imageSize: 'cover',
+        imageSize: 'cover',
-      } as GalleryConfig,
+      } as GalleryConfig,
-    },
+    },
-    { provide: ErrorHandler, useClass: GlobalErrorHandler }, // Registriere den globalen ErrorHandler
+    { provide: ErrorHandler, useClass: GlobalErrorHandler }, // Registriere den globalen ErrorHandler
-    {
+    {
-      provide: IMAGE_CONFIG,
+      provide: IMAGE_CONFIG,
-      useValue: {
+      useValue: {
-        disableImageSizeWarning: true,
+        disableImageSizeWarning: true,
-      },
+      },
-    },
+    },
-    provideShareButtonsOptions(
+    provideShareButtonsOptions(
-      shareIcons(),
+      shareIcons(),
-      withConfig({
+      withConfig({
-        debug: true,
+        debug: true,
-        sharerMethod: SharerMethods.Anchor,
+        sharerMethod: SharerMethods.Anchor,
-      }),
+      }),
-    ),
+    ),
-    provideRouter(
+    provideRouter(
-      routes,
+      routes,
-      withEnabledBlockingInitialNavigation(),
+      withEnabledBlockingInitialNavigation(),
-      withInMemoryScrolling({
+      withInMemoryScrolling({
-        scrollPositionRestoration: 'enabled',
+        scrollPositionRestoration: 'enabled',
-        anchorScrolling: 'enabled',
+        anchorScrolling: 'enabled',
-      }),
+      }),
-    ),
+    ),
-    ...(environment.production ? [POSTHOG_INIT_PROVIDER] : []),
+    ...(environment.production ? [POSTHOG_INIT_PROVIDER] : []),
-    provideAnimations(),
+    provideAnimations(),
-    provideQuillConfig({
+    provideQuillConfig({
-      modules: {
+      modules: {
-        syntax: true,
+        syntax: true,
-        toolbar: [
+        toolbar: [
-          ['bold', 'italic', 'underline'], // Einige Standardoptionen
+          ['bold', 'italic', 'underline'], // Einige Standardoptionen
-          [{ header: [1, 2, 3, false] }], // Benutzerdefinierte Header
+          [{ header: [1, 2, 3, false] }], // Benutzerdefinierte Header
-          [{ list: 'ordered' }, { list: 'bullet' }],
+          [{ list: 'ordered' }, { list: 'bullet' }],
-          [{ color: [] }], // Dropdown mit Standardfarben
+          [{ color: [] }], // Dropdown mit Standardfarben
-          ['clean'], // Entfernt Formatierungen
+          ['clean'], // Entfernt Formatierungen
-        ],
+        ],
-      },
+      },
-    }),
+    }),
-    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
+    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
-    provideAuth(() => getAuth()),
+    provideAuth(() => getAuth()),
-  ],
+  ],
-};
+};
-function initServices(selectOptions: SelectOptionsService) {
+function initServices(selectOptions: SelectOptionsService) {
-  return async () => {
+  return async () => {
-    await selectOptions.init();
+    await selectOptions.init();
-  };
+  };
-}
+}

bizmatch/src/app/app.routes.server.ts

@@ -1,8 +1,24 @@
 import { RenderMode, ServerRoute } from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
-    {
+    { path: 'home', renderMode: RenderMode.Server }, // Das hatten wir vorhin gefixt
-        path: '**',
+    
-        renderMode: RenderMode.Server
+    // WICHTIG: Alle geschützten Routen nur im Browser rendern!
-    }
+    // Damit überspringt der Server den AuthGuard Check komplett und schickt
+    // nur eine leere Hülle (index.html), die der Browser dann füllt.
+    { path: 'account', renderMode: RenderMode.Client },
+    { path: 'account/**', renderMode: RenderMode.Client },
+    { path: 'myListings', renderMode: RenderMode.Client },
+    { path: 'myFavorites', renderMode: RenderMode.Client },
+    { path: 'createBusinessListing', renderMode: RenderMode.Client },
+    { path: 'createCommercialPropertyListing', renderMode: RenderMode.Client },
+    { path: 'editBusinessListing/**', renderMode: RenderMode.Client },
+    { path: 'editCommercialPropertyListing/**', renderMode: RenderMode.Client },
+    
+    // Statische Seiten
+    { path: 'terms-of-use', renderMode: RenderMode.Prerender },
+    { path: 'privacy-statement', renderMode: RenderMode.Prerender },
+    
+    // Fallback
+    { path: '**', renderMode: RenderMode.Server }
 ];

bizmatch/src/app/app.routes.ts

@@ -11,19 +11,14 @@ import { LoginRegisterComponent } from './components/login-register/login-regist
 import { AuthGuard } from './guards/auth.guard';
 import { ListingCategoryGuard } from './guards/listing-category.guard';
 
-// Public pages (eagerly loaded - high traffic)
+// Public pages - HomeComponent stays eagerly loaded as landing page
-import { DetailsBusinessListingComponent } from './pages/details/details-business-listing/details-business-listing.component';
-import { DetailsCommercialPropertyListingComponent } from './pages/details/details-commercial-property-listing/details-commercial-property-listing.component';
-import { DetailsUserComponent } from './pages/details/details-user/details-user.component';
 import { HomeComponent } from './pages/home/home.component';
-import { BrokerListingsComponent } from './pages/listings/broker-listings/broker-listings.component';
-import { BusinessListingsComponent } from './pages/listings/business-listings/business-listings.component';
-import { CommercialPropertyListingsComponent } from './pages/listings/commercial-property-listings/commercial-property-listings.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';
 
-// Note: Account, Edit, Admin, Favorites, MyListing, and EmailUs components are now lazy-loaded below
+// Note: All listing and details components are now lazy-loaded for better initial bundle size
+
 
 export const routes: Routes = [
   {
@@ -32,17 +27,17 @@ export const routes: Routes = [
   },
   {
     path: 'businessListings',
-    component: BusinessListingsComponent,
+    loadComponent: () => import('./pages/listings/business-listings/business-listings.component').then(m => m.BusinessListingsComponent),
     runGuardsAndResolvers: 'always',
   },
   {
     path: 'commercialPropertyListings',
-    component: CommercialPropertyListingsComponent,
+    loadComponent: () => import('./pages/listings/commercial-property-listings/commercial-property-listings.component').then(m => m.CommercialPropertyListingsComponent),
     runGuardsAndResolvers: 'always',
   },
   {
     path: 'brokerListings',
-    component: BrokerListingsComponent,
+    loadComponent: () => import('./pages/listings/broker-listings/broker-listings.component').then(m => m.BrokerListingsComponent),
     runGuardsAndResolvers: 'always',
   },
   {
@@ -53,11 +48,11 @@ export const routes: Routes = [
   // Listings Details - New SEO-friendly slug-based URLs
   {
     path: 'business/:slug',
-    component: DetailsBusinessListingComponent,
+    loadComponent: () => import('./pages/details/details-business-listing/details-business-listing.component').then(m => m.DetailsBusinessListingComponent),
   },
   {
     path: 'commercial-property/:slug',
-    component: DetailsCommercialPropertyListingComponent,
+    loadComponent: () => import('./pages/details/details-commercial-property-listing/details-commercial-property-listing.component').then(m => m.DetailsCommercialPropertyListingComponent),
   },
   // Backward compatibility redirects for old UUID-based URLs
   {
@@ -95,7 +90,7 @@ export const routes: Routes = [
   // User  Details
   {
     path: 'details-user/:id',
-    component: DetailsUserComponent,
+    loadComponent: () => import('./pages/details/details-user/details-user.component').then(m => m.DetailsUserComponent),
   },
   // #########
   // User  edit (lazy-loaded)

bizmatch/src/app/components/base-input/base-input.component.ts

@@ -1,57 +1,57 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { ControlValueAccessor } from '@angular/forms';
-import { Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
-import { ValidationMessagesService } from '../validation-messages.service';
+import { ValidationMessagesService } from '../validation-messages.service';
-
+
-@Component({
+@Component({
-  selector: 'app-base-input',
+  selector: 'app-base-input',
-  template: ``,
+  template: ``,
-  standalone: true,
+  standalone: true,
-  imports: [],
+  imports: [],
-})
+})
-export abstract class BaseInputComponent implements ControlValueAccessor {
+export abstract class BaseInputComponent implements ControlValueAccessor {
-  @Input() value: any = '';
+  @Input() value: any = '';
-  validationMessage: string = '';
+  validationMessage: string = '';
-  onChange: any = () => {};
+  onChange: any = () => {};
-  onTouched: any = () => {};
+  onTouched: any = () => {};
-  subscription: Subscription | null = null;
+  subscription: Subscription | null = null;
-  @Input() label: string = '';
+  @Input() label: string = '';
-  // @Input() id: string = '';
+  // @Input() id: string = '';
-  @Input() name: string = '';
+  @Input() name: string = '';
-  isTooltipVisible = false;
+  isTooltipVisible = false;
-  constructor(protected validationMessagesService: ValidationMessagesService) {}
+  constructor(protected validationMessagesService: ValidationMessagesService) {}
-  ngOnInit() {
+  ngOnInit() {
-    this.subscription = this.validationMessagesService.messages$.subscribe(() => {
+    this.subscription = this.validationMessagesService.messages$.subscribe(() => {
-      this.updateValidationMessage();
+      this.updateValidationMessage();
-    });
+    });
-    // Flowbite is now initialized once in AppComponent
+    // Flowbite is now initialized once in AppComponent
-  }
+  }
-
+
-  ngOnDestroy() {
+  ngOnDestroy() {
-    if (this.subscription) {
+    if (this.subscription) {
-      this.subscription.unsubscribe();
+      this.subscription.unsubscribe();
-    }
+    }
-  }
+  }
-  writeValue(value: any): void {
+  writeValue(value: any): void {
-    if (value !== undefined) {
+    if (value !== undefined) {
-      this.value = value;
+      this.value = value;
-    }
+    }
-  }
+  }
-
+
-  registerOnChange(fn: any): void {
+  registerOnChange(fn: any): void {
-    this.onChange = fn;
+    this.onChange = fn;
-  }
+  }
-
+
-  registerOnTouched(fn: any): void {
+  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
+    this.onTouched = fn;
-  }
+  }
-  updateValidationMessage(): void {
+  updateValidationMessage(): void {
-    this.validationMessage = this.validationMessagesService.getMessage(this.name);
+    this.validationMessage = this.validationMessagesService.getMessage(this.name);
-  }
+  }
-  setDisabledState?(isDisabled: boolean): void {}
+  setDisabledState?(isDisabled: boolean): void {}
-  toggleTooltip(event: Event) {
+  toggleTooltip(event: Event) {
-    event.preventDefault();
+    event.preventDefault();
-    event.stopPropagation();
+    event.stopPropagation();
-    this.isTooltipVisible = !this.isTooltipVisible;
+    this.isTooltipVisible = !this.isTooltipVisible;
-  }
+  }
-}
+}

bizmatch/src/app/components/breadcrumbs/breadcrumbs.component.ts

@@ -1,68 +1,68 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
-
+
-export interface BreadcrumbItem {
+export interface BreadcrumbItem {
-  label: string;
+  label: string;
-  url?: string;
+  url?: string;
-  icon?: string;
+  icon?: string;
-}
+}
-
+
-@Component({
+@Component({
-  selector: 'app-breadcrumbs',
+  selector: 'app-breadcrumbs',
-  standalone: true,
+  standalone: true,
-  imports: [CommonModule, RouterModule],
+  imports: [CommonModule, RouterModule],
-  template: `
+  template: `
-    <nav aria-label="Breadcrumb" class="mb-4">
+    <nav aria-label="Breadcrumb" class="mb-4">
-      <ol
+      <ol
-        class="flex flex-wrap items-center text-sm text-neutral-600"
+        class="flex flex-wrap items-center text-sm text-neutral-600"
-        itemscope
+        itemscope
-        itemtype="https://schema.org/BreadcrumbList"
+        itemtype="https://schema.org/BreadcrumbList"
-      >
+      >
-        @for (item of breadcrumbs; track $index) {
+        @for (item of breadcrumbs; track $index) {
-        <li
+        <li
-          class="inline-flex items-center"
+          class="inline-flex items-center"
-          itemprop="itemListElement"
+          itemprop="itemListElement"
-          itemscope
+          itemscope
-          itemtype="https://schema.org/ListItem"
+          itemtype="https://schema.org/ListItem"
-        >
+        >
-          @if ($index > 0) {
+          @if ($index > 0) {
-          <span class="inline-flex items-center mx-2 text-neutral-400 select-none">
+          <span class="inline-flex items-center mx-2 text-neutral-400 select-none">
-            <i class="fas fa-chevron-right text-xs"></i>
+            <i class="fas fa-chevron-right text-xs"></i>
-          </span>
+          </span>
-          }
+          }
-
+
-          @if (item.url && $index < breadcrumbs.length - 1) {
+          @if (item.url && $index < breadcrumbs.length - 1) {
-          <a
+          <a
-            [routerLink]="item.url"
+            [routerLink]="item.url"
-            class="inline-flex items-center hover:text-blue-600 transition-colors"
+            class="inline-flex items-center hover:text-blue-600 transition-colors"
-            itemprop="item"
+            itemprop="item"
-          >
+          >
-            @if (item.icon) {
+            @if (item.icon) {
-            <i [class]="item.icon + ' mr-1'"></i>
+            <i [class]="item.icon + ' mr-1'"></i>
-            }
+            }
-            <span itemprop="name">{{ item.label }}</span>
+            <span itemprop="name">{{ item.label }}</span>
-          </a>
+          </a>
-          } @else {
+          } @else {
-          <span
+          <span
-            class="inline-flex items-center font-semibold text-neutral-900"
+            class="inline-flex items-center font-semibold text-neutral-900"
-            itemprop="item"
+            itemprop="item"
-          >
+          >
-            @if (item.icon) {
+            @if (item.icon) {
-            <i [class]="item.icon + ' mr-1'"></i>
+            <i [class]="item.icon + ' mr-1'"></i>
-            }
+            }
-            <span itemprop="name">{{ item.label }}</span>
+            <span itemprop="name">{{ item.label }}</span>
-          </span>
+          </span>
-          }
+          }
-
+
-          <meta itemprop="position" [content]="($index + 1).toString()" />
+          <meta itemprop="position" [content]="($index + 1).toString()" />
-        </li>
+        </li>
-        }
+        }
-      </ol>
+      </ol>
-    </nav>
+    </nav>
-  `,
+  `,
-  styles: []
+  styles: []
-})
+})
-export class BreadcrumbsComponent {
+export class BreadcrumbsComponent {
-  @Input() breadcrumbs: BreadcrumbItem[] = [];
+  @Input() breadcrumbs: BreadcrumbItem[] = [];
-}
+}

bizmatch/src/app/components/confirmation/confirmation.component.ts

@@ -13,7 +13,7 @@ import { ConfirmationService } from './confirmation.service';
           <button
             (click)="confirmationService.reject()"
             type="button"
-            class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+            class="absolute top-3 end-2.5 text-gray-600 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
           >
             <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
@@ -21,11 +21,11 @@ import { ConfirmationService } from './confirmation.service';
             <span class="sr-only">Close modal</span>
           </button>
           <div class="p-4 md:p-5 text-center">
-            <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+            <svg class="mx-auto mb-4 text-gray-600 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
             </svg>
             @let confirmation = (confirmationService.confirmation$ | async);
-            <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ confirmation?.message }}</h3>
+            <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-600">{{ confirmation?.message }}</h3>
             @if(confirmation?.buttons==='both'){
             <button
               (click)="confirmationService.accept()"
@@ -37,7 +37,7 @@ import { ConfirmationService } from './confirmation.service';
             <button
               (click)="confirmationService.reject()"
               type="button"
-              class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+              class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-600 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
             >
               No, cancel
             </button>

bizmatch/src/app/components/dropdown/dropdown.component.ts

@@ -1,138 +1,138 @@
-import { AfterViewInit, Component, ElementRef, HostBinding, Input, OnDestroy, ViewChild, PLATFORM_ID, inject } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, HostBinding, Input, OnDestroy, ViewChild, PLATFORM_ID, inject } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
+import { isPlatformBrowser } from '@angular/common';
-import { createPopper, Instance as PopperInstance } from '@popperjs/core';
+import { createPopper, Instance as PopperInstance } from '@popperjs/core';
-
+
-@Component({
+@Component({
-  selector: 'app-dropdown',
+  selector: 'app-dropdown',
-  template: `
+  template: `
-    <div #targetEl [class.hidden]="!isVisible" class="z-50">
+    <div #targetEl [class.hidden]="!isVisible" class="z-50">
-      <ng-content></ng-content>
+      <ng-content></ng-content>
-    </div>
+    </div>
-  `,
+  `,
-  standalone: true,
+  standalone: true,
-})
+})
-export class DropdownComponent implements AfterViewInit, OnDestroy {
+export class DropdownComponent implements AfterViewInit, OnDestroy {
-  @ViewChild('targetEl') targetEl!: ElementRef<HTMLElement>;
+  @ViewChild('targetEl') targetEl!: ElementRef<HTMLElement>;
-  @Input() triggerEl!: HTMLElement;
+  @Input() triggerEl!: HTMLElement;
-
+
-  @Input() placement: any = 'bottom';
+  @Input() placement: any = 'bottom';
-  @Input() triggerType: 'click' | 'hover' = 'click';
+  @Input() triggerType: 'click' | 'hover' = 'click';
-  @Input() offsetSkidding: number = 0;
+  @Input() offsetSkidding: number = 0;
-  @Input() offsetDistance: number = 10;
+  @Input() offsetDistance: number = 10;
-  @Input() delay: number = 300;
+  @Input() delay: number = 300;
-  @Input() ignoreClickOutsideClass: string | false = false;
+  @Input() ignoreClickOutsideClass: string | false = false;
-
+
-  @HostBinding('class.hidden') isHidden: boolean = true;
+  @HostBinding('class.hidden') isHidden: boolean = true;
-
+
-  private platformId = inject(PLATFORM_ID);
+  private platformId = inject(PLATFORM_ID);
-  private isBrowser = isPlatformBrowser(this.platformId);
+  private isBrowser = isPlatformBrowser(this.platformId);
-  private popperInstance: PopperInstance | null = null;
+  private popperInstance: PopperInstance | null = null;
-  isVisible: boolean = false;
+  isVisible: boolean = false;
-  private clickOutsideListener: any;
+  private clickOutsideListener: any;
-  private hoverShowListener: any;
+  private hoverShowListener: any;
-  private hoverHideListener: any;
+  private hoverHideListener: any;
-
+
-  ngAfterViewInit() {
+  ngAfterViewInit() {
-    if (!this.isBrowser) return;
+    if (!this.isBrowser) return;
-
+
-    if (!this.triggerEl) {
+    if (!this.triggerEl) {
-      console.error('Trigger element is not provided to the dropdown component.');
+      console.error('Trigger element is not provided to the dropdown component.');
-      return;
+      return;
-    }
+    }
-    this.initializePopper();
+    this.initializePopper();
-    this.setupEventListeners();
+    this.setupEventListeners();
-  }
+  }
-
+
-  ngOnDestroy() {
+  ngOnDestroy() {
-    this.destroyPopper();
+    this.destroyPopper();
-    this.removeEventListeners();
+    this.removeEventListeners();
-  }
+  }
-
+
-  private initializePopper() {
+  private initializePopper() {
-    this.popperInstance = createPopper(this.triggerEl, this.targetEl.nativeElement, {
+    this.popperInstance = createPopper(this.triggerEl, this.targetEl.nativeElement, {
-      placement: this.placement,
+      placement: this.placement,
-      modifiers: [
+      modifiers: [
-        {
+        {
-          name: 'offset',
+          name: 'offset',
-          options: {
+          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
+            offset: [this.offsetSkidding, this.offsetDistance],
-          },
+          },
-        },
+        },
-      ],
+      ],
-    });
+    });
-  }
+  }
-
+
-  private setupEventListeners() {
+  private setupEventListeners() {
-    if (!this.isBrowser) return;
+    if (!this.isBrowser) return;
-
+
-    if (this.triggerType === 'click') {
+    if (this.triggerType === 'click') {
-      this.triggerEl.addEventListener('click', () => this.toggle());
+      this.triggerEl.addEventListener('click', () => this.toggle());
-    } else if (this.triggerType === 'hover') {
+    } else if (this.triggerType === 'hover') {
-      this.hoverShowListener = () => this.show();
+      this.hoverShowListener = () => this.show();
-      this.hoverHideListener = () => this.hide();
+      this.hoverHideListener = () => this.hide();
-      this.triggerEl.addEventListener('mouseenter', this.hoverShowListener);
+      this.triggerEl.addEventListener('mouseenter', this.hoverShowListener);
-      this.triggerEl.addEventListener('mouseleave', this.hoverHideListener);
+      this.triggerEl.addEventListener('mouseleave', this.hoverHideListener);
-      this.targetEl.nativeElement.addEventListener('mouseenter', this.hoverShowListener);
+      this.targetEl.nativeElement.addEventListener('mouseenter', this.hoverShowListener);
-      this.targetEl.nativeElement.addEventListener('mouseleave', this.hoverHideListener);
+      this.targetEl.nativeElement.addEventListener('mouseleave', this.hoverHideListener);
-    }
+    }
-
+
-    this.clickOutsideListener = (event: MouseEvent) => this.handleClickOutside(event);
+    this.clickOutsideListener = (event: MouseEvent) => this.handleClickOutside(event);
-    document.addEventListener('click', this.clickOutsideListener);
+    document.addEventListener('click', this.clickOutsideListener);
-  }
+  }
-
+
-  private removeEventListeners() {
+  private removeEventListeners() {
-    if (!this.isBrowser) return;
+    if (!this.isBrowser) return;
-
+
-    if (this.triggerType === 'click') {
+    if (this.triggerType === 'click') {
-      this.triggerEl.removeEventListener('click', () => this.toggle());
+      this.triggerEl.removeEventListener('click', () => this.toggle());
-    } else if (this.triggerType === 'hover') {
+    } else if (this.triggerType === 'hover') {
-      this.triggerEl.removeEventListener('mouseenter', this.hoverShowListener);
+      this.triggerEl.removeEventListener('mouseenter', this.hoverShowListener);
-      this.triggerEl.removeEventListener('mouseleave', this.hoverHideListener);
+      this.triggerEl.removeEventListener('mouseleave', this.hoverHideListener);
-      this.targetEl.nativeElement.removeEventListener('mouseenter', this.hoverShowListener);
+      this.targetEl.nativeElement.removeEventListener('mouseenter', this.hoverShowListener);
-      this.targetEl.nativeElement.removeEventListener('mouseleave', this.hoverHideListener);
+      this.targetEl.nativeElement.removeEventListener('mouseleave', this.hoverHideListener);
-    }
+    }
-
+
-    document.removeEventListener('click', this.clickOutsideListener);
+    document.removeEventListener('click', this.clickOutsideListener);
-  }
+  }
-
+
-  toggle() {
+  toggle() {
-    this.isVisible ? this.hide() : this.show();
+    this.isVisible ? this.hide() : this.show();
-  }
+  }
-
+
-  show() {
+  show() {
-    this.isVisible = true;
+    this.isVisible = true;
-    this.isHidden = false;
+    this.isHidden = false;
-    this.targetEl.nativeElement.classList.remove('hidden');
+    this.targetEl.nativeElement.classList.remove('hidden');
-    this.popperInstance?.update();
+    this.popperInstance?.update();
-  }
+  }
-
+
-  hide() {
+  hide() {
-    this.isVisible = false;
+    this.isVisible = false;
-    this.isHidden = true;
+    this.isHidden = true;
-    this.targetEl.nativeElement.classList.add('hidden');
+    this.targetEl.nativeElement.classList.add('hidden');
-  }
+  }
-
+
-  private handleClickOutside(event: MouseEvent) {
+  private handleClickOutside(event: MouseEvent) {
-    if (!this.isVisible || !this.isBrowser) return;
+    if (!this.isVisible || !this.isBrowser) return;
-
+
-    const clickedElement = event.target as HTMLElement;
+    const clickedElement = event.target as HTMLElement;
-    if (this.ignoreClickOutsideClass) {
+    if (this.ignoreClickOutsideClass) {
-      const ignoredElements = document.querySelectorAll(`.${this.ignoreClickOutsideClass}`);
+      const ignoredElements = document.querySelectorAll(`.${this.ignoreClickOutsideClass}`);
-      const arr = Array.from(ignoredElements);
+      const arr = Array.from(ignoredElements);
-      for (const el of arr) {
+      for (const el of arr) {
-        if (el.contains(clickedElement)) return;
+        if (el.contains(clickedElement)) return;
-      }
+      }
-    }
+    }
-
+
-    if (!this.targetEl.nativeElement.contains(clickedElement) && !this.triggerEl.contains(clickedElement)) {
+    if (!this.targetEl.nativeElement.contains(clickedElement) && !this.triggerEl.contains(clickedElement)) {
-      this.hide();
+      this.hide();
-    }
+    }
-  }
+  }
-
+
-  private destroyPopper() {
+  private destroyPopper() {
-    if (this.popperInstance) {
+    if (this.popperInstance) {
-      this.popperInstance.destroy();
+      this.popperInstance.destroy();
-      this.popperInstance = null;
+      this.popperInstance = null;
-    }
+    }
-  }
+  }
-}
+}

bizmatch/src/app/components/email/email.component.html

@@ -9,7 +9,7 @@
         <button
           (click)="eMailService.reject()"
           type="button"
-          class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          class="end-2.5 text-gray-600 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
         >
           <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />

bizmatch/src/app/components/email/email.component.ts

@@ -1,48 +1,48 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { ShareByEMail } from '../../../../../bizmatch-server/src/models/db.model';
+import { ShareByEMail } from '../../../../../bizmatch-server/src/models/db.model';
-import { MailService } from '../../services/mail.service';
+import { MailService } from '../../services/mail.service';
-import { ValidatedInputComponent } from '../validated-input/validated-input.component';
+import { ValidatedInputComponent } from '../validated-input/validated-input.component';
-import { ValidationMessagesService } from '../validation-messages.service';
+import { ValidationMessagesService } from '../validation-messages.service';
-import { EMailService } from './email.service';
+import { EMailService } from './email.service';
-
+
-@UntilDestroy()
+@UntilDestroy()
-@Component({
+@Component({
-  selector: 'app-email',
+  selector: 'app-email',
-  standalone: true,
+  standalone: true,
-  imports: [CommonModule, FormsModule, ValidatedInputComponent],
+  imports: [CommonModule, FormsModule, ValidatedInputComponent],
-  templateUrl: './email.component.html',
+  templateUrl: './email.component.html',
-  template: ``,
+  template: ``,
-})
+})
-export class EMailComponent {
+export class EMailComponent {
-  shareByEMail: ShareByEMail = {
+  shareByEMail: ShareByEMail = {
-    yourName: '',
+    yourName: '',
-    recipientEmail: '',
+    recipientEmail: '',
-    yourEmail: '',
+    yourEmail: '',
-    type: 'business',
+    type: 'business',
-    listingTitle: '',
+    listingTitle: '',
-    url: '',
+    url: '',
-    id: ''
+    id: ''
-  };
+  };
-  constructor(public eMailService: EMailService, private mailService: MailService, private validationMessagesService: ValidationMessagesService) {}
+  constructor(public eMailService: EMailService, private mailService: MailService, private validationMessagesService: ValidationMessagesService) {}
-  ngOnInit() {
+  ngOnInit() {
-    this.eMailService.shareByEMail$.pipe(untilDestroyed(this)).subscribe(val => {
+    this.eMailService.shareByEMail$.pipe(untilDestroyed(this)).subscribe(val => {
-      this.shareByEMail = val;
+      this.shareByEMail = val;
-    });
+    });
-  }
+  }
-  async sendMail() {
+  async sendMail() {
-    try {
+    try {
-      const result = await this.mailService.mailToFriend(this.shareByEMail);
+      const result = await this.mailService.mailToFriend(this.shareByEMail);
-      this.eMailService.accept(this.shareByEMail);
+      this.eMailService.accept(this.shareByEMail);
-    } catch (error) {
+    } catch (error) {
-      if (error.error && Array.isArray(error.error?.message)) {
+      if (error.error && Array.isArray(error.error?.message)) {
-        this.validationMessagesService.updateMessages(error.error.message);
+        this.validationMessagesService.updateMessages(error.error.message);
-      }
+      }
-    }
+    }
-  }
+  }
-  ngOnDestroy() {
+  ngOnDestroy() {
-    this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
+    this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
-  }
+  }
-}
+}

bizmatch/src/app/components/faq/faq.component.ts

@@ -1,93 +1,93 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
-import { SeoService } from '../../services/seo.service';
+import { SeoService } from '../../services/seo.service';
-
+
-export interface FAQItem {
+export interface FAQItem {
-  question: string;
+  question: string;
-  answer: string;
+  answer: string;
-}
+}
-
+
-@Component({
+@Component({
-  selector: 'app-faq',
+  selector: 'app-faq',
-  standalone: true,
+  standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule],
-  template: `
+  template: `
-    <section class="bg-white rounded-lg shadow-lg p-6 md:p-8 my-8">
+    <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>
+      <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-6">Frequently Asked Questions</h2>
-
+
-      <div class="space-y-4">
+      <div class="space-y-4">
-        @for (item of faqItems; track $index) {
+        @for (item of faqItems; track $index) {
-        <div class="border-b border-gray-200 pb-4">
+        <div class="border-b border-gray-200 pb-4">
-          <button
+          <button
-            (click)="toggle($index)"
+            (click)="toggle($index)"
-            class="w-full text-left flex justify-between items-center py-2 hover:text-blue-600 transition-colors"
+            class="w-full text-left flex justify-between items-center py-2 hover:text-blue-600 transition-colors"
-            [attr.aria-expanded]="openIndex === $index"
+            [attr.aria-expanded]="openIndex === $index"
-          >
+          >
-            <h3 class="text-lg font-semibold text-gray-800">{{ item.question }}</h3>
+            <h3 class="text-lg font-semibold text-gray-800">{{ item.question }}</h3>
-            <svg
+            <svg
-              class="w-5 h-5 transition-transform"
+              class="w-5 h-5 transition-transform"
-              [class.rotate-180]="openIndex === $index"
+              [class.rotate-180]="openIndex === $index"
-              fill="none"
+              fill="none"
-              stroke="currentColor"
+              stroke="currentColor"
-              viewBox="0 0 24 24"
+              viewBox="0 0 24 24"
-            >
+            >
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
+            </svg>
-          </button>
+          </button>
-
+
-          @if (openIndex === $index) {
+          @if (openIndex === $index) {
-          <div class="mt-3 text-gray-600 leading-relaxed">
+          <div class="mt-3 text-gray-600 leading-relaxed">
-            <p [innerHTML]="item.answer"></p>
+            <p [innerHTML]="item.answer"></p>
-          </div>
+          </div>
-          }
+          }
-        </div>
+        </div>
-        }
+        }
-      </div>
+      </div>
-    </section>
+    </section>
-  `,
+  `,
-  styles: [`
+  styles: [`
-    .rotate-180 {
+    .rotate-180 {
-      transform: rotate(180deg);
+      transform: rotate(180deg);
-    }
+    }
-  `]
+  `]
-})
+})
-export class FaqComponent implements OnInit {
+export class FaqComponent implements OnInit {
-  @Input() faqItems: FAQItem[] = [];
+  @Input() faqItems: FAQItem[] = [];
-  openIndex: number | null = null;
+  openIndex: number | null = null;
-
+
-  constructor(private seoService: SeoService) {}
+  constructor(private seoService: SeoService) {}
-
+
-  ngOnInit() {
+  ngOnInit() {
-    // Generate and inject FAQ Schema for rich snippets
+    // Generate and inject FAQ Schema for rich snippets
-    if (this.faqItems.length > 0) {
+    if (this.faqItems.length > 0) {
-      const faqSchema = {
+      const faqSchema = {
-        '@context': 'https://schema.org',
+        '@context': 'https://schema.org',
-        '@type': 'FAQPage',
+        '@type': 'FAQPage',
-        'mainEntity': this.faqItems.map(item => ({
+        'mainEntity': this.faqItems.map(item => ({
-          '@type': 'Question',
+          '@type': 'Question',
-          'name': item.question,
+          'name': item.question,
-          'acceptedAnswer': {
+          'acceptedAnswer': {
-            '@type': 'Answer',
+            '@type': 'Answer',
-            'text': this.stripHtml(item.answer)
+            'text': this.stripHtml(item.answer)
-          }
+          }
-        }))
+        }))
-      };
+      };
-
+
-      this.seoService.injectStructuredData(faqSchema);
+      this.seoService.injectStructuredData(faqSchema);
-    }
+    }
-  }
+  }
-
+
-  toggle(index: number) {
+  toggle(index: number) {
-    this.openIndex = this.openIndex === index ? null : index;
+    this.openIndex = this.openIndex === index ? null : index;
-  }
+  }
-
+
-  private stripHtml(html: string): string {
+  private stripHtml(html: string): string {
-    const tmp = document.createElement('DIV');
+    const tmp = document.createElement('DIV');
-    tmp.innerHTML = html;
+    tmp.innerHTML = html;
-    return tmp.textContent || tmp.innerText || '';
+    return tmp.textContent || tmp.innerText || '';
-  }
+  }
-
+
-  ngOnDestroy() {
+  ngOnDestroy() {
-    this.seoService.clearStructuredData();
+    this.seoService.clearStructuredData();
-  }
+  }
-}
+}

bizmatch/src/app/components/footer/footer.component.html

@@ -1,33 +1,32 @@
-<footer class="bg-white px-4 py-2 md:px-6 mt-auto w-full print:hidden">
+<footer class="bg-white px-4 py-2 md:px-6 mt-auto w-full print:hidden">
-  <div class="container mx-auto flex flex-col lg:flex-row justify-between items-center">
+  <div class="container mx-auto flex flex-col lg:flex-row justify-between items-center">
-    <div class="flex flex-col lg:flex-row items-center mb-4 lg:mb-0">
+    <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" /> -->
+      <!-- <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">
+      <a routerLink="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
-        <img src="/assets/images/header-logo.png" class="h-8 mb-2 lg:mb-0 lg:mr-4" alt="BizMatch Logo" />
+        <img src="/assets/images/header-logo.png" class="h-8 mb-2 lg:mb-0 lg:mr-4" alt="BizMatch Logo" width="120" height="32" />
-      </a>
+      </a>
-      <p class="text-sm text-neutral-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>
-
+
-    <div class="flex flex-col lg:flex-row items-center order-3 lg:order-2">
+    <div class="flex flex-col lg:flex-row items-center order-3 lg:order-2">
-      <a class="text-sm text-primary-600 hover:underline hover:cursor-pointer mx-2" routerLink="/terms-of-use">Terms of
+      <a class="text-sm text-primary-600 hover:underline hover:cursor-pointer mx-2" routerLink="/terms-of-use">Terms of
-        use</a>
+        use</a>
-      <a class="text-sm text-primary-600 hover:underline hover:cursor-pointer mx-2"
+      <a class="text-sm text-primary-600 hover:underline hover:cursor-pointer mx-2"
-        routerLink="/privacy-statement">Privacy statement</a>
+        routerLink="/privacy-statement">Privacy statement</a>
-      <!-- <a class="text-sm text-primary-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="/pricingOverview">Pricing</a> -->
-    </div>
+    </div>
-
+
-    <div class="flex flex-col lg:flex-row items-center order-2 lg:order-3">
+    <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">
+      <div class="mb-4 lg:mb-0 lg:mr-6 text-center lg:text-right">
-        <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 mb-1 lg:mb-2">Contact: BizMatch, Inc.</p>
-        <p class="text-sm text-neutral-600">Christi, Texas 78401</p>
+      </div>
-      </div>
+
-
+      <div class="mb-4 lg:mb-0 flex flex-col items-center lg:items-end">
-      <div class="mb-4 lg:mb-0 flex flex-col items-center lg:items-end">
+        <a href="tel:+1-800-840-6025" class="text-sm text-neutral-600 mb-1 lg:mb-2 hover:text-primary-600 w-full"> <i
-        <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>
-            class="fas fa-phone-alt mr-2"></i>1-800-840-6025 </a>
+        <a href="mailto:info@bizmatch.net" class="text-sm text-neutral-600 hover:text-primary-600"> <i
-        <a class="text-sm text-neutral-600 hover:text-primary-600"> <i
+            class="fas fa-envelope mr-2"></i>info&#64;bizmatch.net </a>
-            class="fas fa-envelope mr-2"></i>info&#64;bizmatch.net </a>
+      </div>
-      </div>
+    </div>
-    </div>
+  </div>
-  </div>
 </footer>

bizmatch/src/app/components/footer/footer.component.ts

@@ -1,22 +1,22 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
-import { Router, RouterModule } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-
+
-@Component({
+@Component({
-  selector: 'app-footer',
+  selector: 'app-footer',
-  standalone: true,
+  standalone: true,
-  imports: [CommonModule, FormsModule, RouterModule, FontAwesomeModule],
+  imports: [CommonModule, FormsModule, RouterModule, FontAwesomeModule],
-  templateUrl: './footer.component.html',
+  templateUrl: './footer.component.html',
-  styleUrl: './footer.component.scss',
+  styleUrl: './footer.component.scss',
-})
+})
-export class FooterComponent {
+export class FooterComponent {
-  privacyVisible = false;
+  privacyVisible = false;
-  termsVisible = false;
+  termsVisible = false;
-  currentYear: number = new Date().getFullYear();
+  currentYear: number = new Date().getFullYear();
-  constructor(private router: Router) {}
+  constructor(private router: Router) {}
-  ngOnInit() {
+  ngOnInit() {
-    // Flowbite is now initialized once in AppComponent
+    // Flowbite is now initialized once in AppComponent
-  }
+  }
-}
+}

bizmatch/src/app/components/header/header.component.html

@@ -1,210 +1,210 @@
-<nav class="bg-white border-neutral-200 dark:bg-neutral-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">
+  <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">
+    <a routerLink="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
-      <img src="/assets/images/header-logo.png" class="h-10 w-auto"
+      <img src="/assets/images/header-logo.png" class="h-10 w-auto"
-        alt="BizMatch - Business Marketplace for Buying and Selling Businesses" />
+        alt="BizMatch - Business Marketplace for Buying and Selling Businesses" width="150" height="40" />
-    </a>
+    </a>
-    <div class="flex items-center md:order-2 space-x-3 rtl:space-x-reverse">
+    <div class="flex items-center md:order-2 space-x-3 rtl:space-x-reverse">
-      <!-- Filter button -->
+      <!-- Filter button -->
-      @if(isFilterUrl()){
+      @if(isFilterUrl()){
-
+
-      <div class="relative">
+      <div class="relative">
-        <button type="button" id="sortDropdownButton"
+        <button type="button" id="sortDropdownButton" aria-label="Sort listings" aria-haspopup="listbox"
-          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"
+          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()"
+          (click)="toggleSortDropdown()"
-          [ngClass]="{ 'text-primary-500': selectOptions.getSortByOption(sortBy) !== 'Sort', 'text-neutral-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) }}
+          <i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(sortBy) }}
-        </button>
+        </button>
-
+
-        <!-- Sort options dropdown -->
+        <!-- Sort options dropdown -->
-        <div *ngIf="sortDropdownVisible"
+        <div *ngIf="sortDropdownVisible"
-          class="absolute right-0 z-50 w-48 md:mt-2 max-md:mt-20 max-md:mr-[-2.5rem] bg-white border border-neutral-200 rounded-lg drop-shadow-custom-bg dark:bg-neutral-800 dark:border-neutral-600">
+          class="absolute right-0 z-50 w-48 md:mt-2 max-md:mt-20 max-md:mr-[-2.5rem] bg-white border border-neutral-200 rounded-lg drop-shadow-custom-bg dark:bg-neutral-800 dark:border-neutral-600">
-          <ul class="py-1 text-sm text-neutral-700 dark:text-neutral-200">
+          <ul class="py-1 text-sm text-neutral-700 dark:text-neutral-200">
-            @for(item of sortByOptions; track item){
+            @for(item of sortByOptions; track item){
-            <li (click)="sortByFct(item.value)"
+            <li (click)="sortByFct(item.value)"
-              class="block px-4 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-700 cursor-pointer">{{ item.selectName ?
+              class="block px-4 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-700 cursor-pointer">{{ item.selectName ?
-              item.selectName : item.name }}</li>
+              item.selectName : item.name }}</li>
-            }
+            }
-          </ul>
+          </ul>
-        </div>
+        </div>
-      </div>
+      </div>
-      }
+      }
-      <button type="button"
+      <button type="button"
-        class="flex text-sm bg-neutral-400 rounded-full md:me-0 focus:ring-4 focus:ring-neutral-300 dark:focus:ring-neutral-600"
+        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'">
+        id="user-menu-button" aria-expanded="false" [attr.data-dropdown-toggle]="user ? 'user-login' : 'user-unknown'">
-        <span class="sr-only">Open user menu</span>
+        <span class="sr-only">Open user menu</span>
-        @if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
+        @if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
-        <img class="w-8 h-8 rounded-full object-cover" src="{{ profileUrl }}"
+        <img class="w-8 h-8 rounded-full object-cover" src="{{ profileUrl }}"
-          alt="{{ user?.firstname }} {{ user?.lastname }} profile photo" width="32" height="32" />
+          alt="{{ user?.firstname }} {{ user?.lastname }} profile photo" width="32" height="32" />
-        } @else {
+        } @else {
-        <i class="flex justify-center items-center text-stone-50 w-8 h-8 rounded-full fa-solid fa-bars"></i>
+        <i class="flex justify-center items-center text-stone-50 w-8 h-8 rounded-full fa-solid fa-bars"></i>
-        }
+        }
-      </button>
+      </button>
-      <!-- Dropdown menu -->
+      <!-- Dropdown menu -->
-      @if(user){
+      @if(user){
-      <div
+      <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"
+        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">
+        id="user-login">
-        <div class="px-4 py-3">
+        <div class="px-4 py-3">
-          <span class="block text-sm text-neutral-900 dark:text-white">Welcome, {{ user.firstname }} </span>
+          <span class="block text-sm text-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>
+          <span class="block text-sm text-neutral-500 truncate dark:text-neutral-400">{{ user.email }}</span>
-        </div>
+        </div>
-        <ul class="py-2" aria-labelledby="user-menu-button">
+        <ul class="py-2" aria-labelledby="user-menu-button">
-          <li>
+          <li>
-            <a routerLink="/account" (click)="closeDropdown()"
+            <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>
+              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>
+          </li>
-          @if((user.customerType==='professional' && user.customerSubType==='broker') || user.customerType==='seller' ||
+          @if((user.customerType==='professional' && user.customerSubType==='broker') || user.customerType==='seller' ||
-          (authService.isAdmin() | async)){
+          (authService.isAdmin() | async)){
-          <li>
+          <li>
-            @if(user.customerType==='professional'){
+            @if(user.customerType==='professional'){
-            <a routerLink="/createBusinessListing" (click)="closeDropdown()"
+            <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
+              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>
+              Listing</a>
-            }@else {
+            }@else {
-            <a routerLink="/createCommercialPropertyListing" (click)="closeDropdown()"
+            <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
+              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>
+              Listing</a>
-            }
+            }
-          </li>
+          </li>
-          <li>
+          <li>
-            <a routerLink="/myListings" (click)="closeDropdown()"
+            <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
+              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>
+              Listings</a>
-          </li>
+          </li>
-          }
+          }
-          <li>
+          <li>
-            <a routerLink="/myFavorites" (click)="closeDropdown()"
+            <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
+              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>
+              Favorites</a>
-          </li>
+          </li>
-          <li>
+          <li>
-            <a routerLink="/emailUs" (click)="closeDropdown()"
+            <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
+              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>
+              Us</a>
-          </li>
+          </li>
-          <li>
+          <li>
-            <a routerLink="/logout" (click)="closeDropdown()"
+            <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>
+              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>
+          </li>
-        </ul>
+        </ul>
-        @if(authService.isAdmin() | async){
+        @if(authService.isAdmin() | async){
-        <ul class="py-2">
+        <ul class="py-2">
-          <li>
+          <li>
-            <a routerLink="admin/users" (click)="closeDropdown()"
+            <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
+              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>
+              (Admin)</a>
-          </li>
+          </li>
-        </ul>
+        </ul>
-        }
+        }
-        <ul class="py-2 md:hidden">
+        <ul class="py-2 md:hidden">
-          <li>
+          <li>
-            <a routerLink="/businessListings"
+            <a routerLink="/businessListings"
-              [ngClass]="{ 'text-primary-600': isActive('/businessListings'), 'text-neutral-700': !isActive('/businessListings') }"
+              [ngClass]="{ 'text-primary-600': isActive('/businessListings'), 'text-neutral-700': !isActive('/businessListings') }"
-              class="block px-4 py-2 text-sm font-semibold"
+              class="block px-4 py-2 text-sm font-semibold"
-              (click)="closeMenusAndSetCriteria('businessListings')">Businesses</a>
+              (click)="closeMenusAndSetCriteria('businessListings')">Businesses</a>
-          </li>
+          </li>
-          @if ((numberOfCommercial$ | async) > 0) {
+          @if ((numberOfCommercial$ | async) > 0) {
-          <li>
+          <li>
-            <a routerLink="/commercialPropertyListings"
+            <a routerLink="/commercialPropertyListings"
-              [ngClass]="{ 'text-primary-600': isActive('/commercialPropertyListings'), 'text-neutral-700': !isActive('/commercialPropertyListings') }"
+              [ngClass]="{ 'text-primary-600': isActive('/commercialPropertyListings'), 'text-neutral-700': !isActive('/commercialPropertyListings') }"
-              class="block px-4 py-2 text-sm font-semibold"
+              class="block px-4 py-2 text-sm font-semibold"
-              (click)="closeMenusAndSetCriteria('commercialPropertyListings')">Properties</a>
+              (click)="closeMenusAndSetCriteria('commercialPropertyListings')">Properties</a>
-          </li>
+          </li>
-          }
+          }
-          <li>
+          <li>
-            <a routerLink="/brokerListings"
+            <a routerLink="/brokerListings"
-              [ngClass]="{ 'text-primary-600': isActive('/brokerListings'), 'text-neutral-700': !isActive('/brokerListings') }"
+              [ngClass]="{ 'text-primary-600': isActive('/brokerListings'), 'text-neutral-700': !isActive('/brokerListings') }"
-              class="block px-4 py-2 text-sm font-semibold"
+              class="block px-4 py-2 text-sm font-semibold"
-              (click)="closeMenusAndSetCriteria('brokerListings')">Professionals</a>
+              (click)="closeMenusAndSetCriteria('brokerListings')">Professionals</a>
-          </li>
+          </li>
-        </ul>
+        </ul>
-      </div>
+      </div>
-      } @else {
+      } @else {
-      <div
+      <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"
+        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">
+        id="user-unknown">
-        <ul class="py-2" aria-labelledby="user-menu-button">
+        <ul class="py-2" aria-labelledby="user-menu-button">
-          <li>
+          <li>
-            <a routerLink="/login" [queryParams]="{ mode: 'login' }"
+            <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
+              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>
+              In</a>
-          </li>
+          </li>
-          <li>
+          <li>
-            <a routerLink="/login" [queryParams]="{ mode: 'register' }"
+            <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
+              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>
+              Up</a>
-          </li>
+          </li>
-        </ul>
+        </ul>
-        <ul class="py-2 md:hidden">
+        <ul class="py-2 md:hidden">
-          <li>
+          <li>
-            <a routerLink="/businessListings"
+            <a routerLink="/businessListings"
-              [ngClass]="{ 'text-primary-600': isActive('/businessListings'), 'text-neutral-700': !isActive('/businessListings') }"
+              [ngClass]="{ 'text-primary-600': isActive('/businessListings'), 'text-neutral-700': !isActive('/businessListings') }"
-              class="block px-4 py-2 text-sm font-bold"
+              class="block px-4 py-2 text-sm font-bold"
-              (click)="closeMenusAndSetCriteria('businessListings')">Businesses</a>
+              (click)="closeMenusAndSetCriteria('businessListings')">Businesses</a>
-          </li>
+          </li>
-          @if ((numberOfCommercial$ | async) > 0) {
+          @if ((numberOfCommercial$ | async) > 0) {
-          <li>
+          <li>
-            <a routerLink="/commercialPropertyListings"
+            <a routerLink="/commercialPropertyListings"
-              [ngClass]="{ 'text-primary-600': isActive('/commercialPropertyListings'), 'text-neutral-700': !isActive('/commercialPropertyListings') }"
+              [ngClass]="{ 'text-primary-600': isActive('/commercialPropertyListings'), 'text-neutral-700': !isActive('/commercialPropertyListings') }"
-              class="block px-4 py-2 text-sm font-bold"
+              class="block px-4 py-2 text-sm font-bold"
-              (click)="closeMenusAndSetCriteria('commercialPropertyListings')">Properties</a>
+              (click)="closeMenusAndSetCriteria('commercialPropertyListings')">Properties</a>
-          </li>
+          </li>
-          }
+          }
-          <li>
+          <li>
-            <a routerLink="/brokerListings"
+            <a routerLink="/brokerListings"
-              [ngClass]="{ 'text-primary-600': isActive('/brokerListings'), 'text-neutral-700': !isActive('/brokerListings') }"
+              [ngClass]="{ 'text-primary-600': isActive('/brokerListings'), 'text-neutral-700': !isActive('/brokerListings') }"
-              class="block px-4 py-2 text-sm font-bold"
+              class="block px-4 py-2 text-sm font-bold"
-              (click)="closeMenusAndSetCriteria('brokerListings')">Professionals</a>
+              (click)="closeMenusAndSetCriteria('brokerListings')">Professionals</a>
-          </li>
+          </li>
-        </ul>
+        </ul>
-      </div>
+      </div>
-      }
+      }
-    </div>
+    </div>
-    <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
+    <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
-      <ul
+      <ul
-        class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-neutral-100 rounded-lg bg-neutral-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-neutral-800 md:dark:bg-neutral-900 dark:border-neutral-700">
+        class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-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>
+        <li>
-          <a routerLinkActive="active-link" routerLink="/businessListings"
+          <a routerLinkActive="active-link" routerLink="/businessListings"
-            [ngClass]="{ 'bg-primary-600 text-white md:text-primary-600 md:bg-transparent md:dark:text-primary-500': isActive('/businessListings') }"
+            [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"
+            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')">
+            aria-current="page" (click)="closeMenusAndSetCriteria('businessListings')">
-            <img src="/assets/images/business_logo.png" alt="Business" class="w-5 h-5 mr-2 object-contain" width="20"
+            <img src="/assets/images/business_logo.png" alt="Business" class="w-5 h-5 mr-2 object-contain" width="20"
-              height="20" />
+              height="20" />
-            <span>Businesses</span>
+            <span>Businesses</span>
-          </a>
+          </a>
-        </li>
+        </li>
-        @if ((numberOfCommercial$ | async) > 0) {
+        @if ((numberOfCommercial$ | async) > 0) {
-        <li>
+        <li>
-          <a routerLinkActive="active-link" routerLink="/commercialPropertyListings"
+          <a routerLinkActive="active-link" routerLink="/commercialPropertyListings"
-            [ngClass]="{ 'bg-primary-600 text-white md:text-primary-600 md:bg-transparent md:dark:text-primary-500': isActive('/commercialPropertyListings') }"
+            [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"
+            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')">
+            (click)="closeMenusAndSetCriteria('commercialPropertyListings')">
-            <img src="/assets/images/properties_logo.png" alt="Properties" class="w-5 h-5 mr-2 object-contain"
+            <img src="/assets/images/properties_logo.png" alt="Properties" class="w-5 h-5 mr-2 object-contain"
-              width="20" height="20" />
+              width="20" height="20" />
-            <span>Properties</span>
+            <span>Properties</span>
-          </a>
+          </a>
-        </li>
+        </li>
-        }
+        }
-        <li>
+        <li>
-          <a routerLinkActive="active-link" routerLink="/brokerListings"
+          <a routerLinkActive="active-link" routerLink="/brokerListings"
-            [ngClass]="{ 'bg-primary-600 text-white md:text-primary-600 md:bg-transparent md:dark:text-primary-500': isActive('/brokerListings') }"
+            [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"
+            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')">
+            (click)="closeMenusAndSetCriteria('brokerListings')">
-            <img src="/assets/images/icon_professionals.png" alt="Professionals"
+            <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;" />
+              class="w-5 h-5 mr-2 object-contain bg-transparent" style="mix-blend-mode: darken;" width="20" height="20" />
-            <span>Professionals</span>
+            <span>Professionals</span>
-          </a>
+          </a>
-        </li>
+        </li>
-      </ul>
+      </ul>
-    </div>
+    </div>
-  </div>
+  </div>
-  <!-- Mobile filter button -->
+  <!-- Mobile filter button -->
-  <div class="md:hidden flex justify-center pb-4">
+  <div class="md:hidden flex justify-center pb-4">
-    <button (click)="toggleSortDropdown()" type="button" id="sortDropdownMobileButton"
+    <button (click)="toggleSortDropdown()" type="button" id="sortDropdownMobileButton" aria-label="Sort listings" aria-haspopup="listbox"
-      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"
+      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' }">
+      [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) }}
+      <i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(sortBy) }}
-    </button>
+    </button>
-  </div>
+  </div>
 </nav>

bizmatch/src/app/components/header/header.component.ts

@@ -1,322 +1,322 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { Component, HostListener, OnDestroy, OnInit, AfterViewInit, PLATFORM_ID, inject } from '@angular/core';
+import { Component, HostListener, OnDestroy, OnInit, AfterViewInit, PLATFORM_ID, inject } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
-import { NavigationEnd, Router, RouterModule } from '@angular/router';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
-import { faUserGear } from '@fortawesome/free-solid-svg-icons';
+import { APP_ICONS } from '../../utils/fontawesome-icons';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { Collapse, Dropdown, initFlowbite } from 'flowbite';
+import { Collapse, Dropdown, initFlowbite } from 'flowbite';
-import { filter, Observable, Subject, takeUntil } from 'rxjs';
+import { filter, Observable, Subject, takeUntil } from 'rxjs';
-
+
-import { SortByOptions, User } from '../../../../../bizmatch-server/src/models/db.model';
+import { SortByOptions, User } from '../../../../../bizmatch-server/src/models/db.model';
-import { emailToDirName, KeycloakUser, KeyValueAsSortBy, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
+import { emailToDirName, KeycloakUser, KeyValueAsSortBy, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
-import { environment } from '../../../environments/environment';
+import { environment } from '../../../environments/environment';
-import { AuthService } from '../../services/auth.service';
+import { AuthService } from '../../services/auth.service';
-import { FilterStateService } from '../../services/filter-state.service';
+import { FilterStateService } from '../../services/filter-state.service';
-import { ListingsService } from '../../services/listings.service';
+import { ListingsService } from '../../services/listings.service';
-import { SearchService } from '../../services/search.service';
+import { SearchService } from '../../services/search.service';
-import { SelectOptionsService } from '../../services/select-options.service';
+import { SelectOptionsService } from '../../services/select-options.service';
-import { SharedService } from '../../services/shared.service';
+import { SharedService } from '../../services/shared.service';
-import { UserService } from '../../services/user.service';
+import { UserService } from '../../services/user.service';
-import { map2User } from '../../utils/utils';
+import { map2User } from '../../utils/utils';
-
+
-import { ModalService } from '../search-modal/modal.service';
+import { ModalService } from '../search-modal/modal.service';
-
+
-@UntilDestroy()
+@UntilDestroy()
-@Component({
+@Component({
-  selector: 'header',
+  selector: 'header',
-  standalone: true,
+  standalone: true,
-  imports: [CommonModule, RouterModule, FormsModule],
+  imports: [CommonModule, RouterModule, FormsModule],
-  templateUrl: './header.component.html',
+  templateUrl: './header.component.html',
-  styleUrl: './header.component.scss',
+  styleUrl: './header.component.scss',
-})
+})
-export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
+export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
-  public buildVersion = environment.buildVersion;
+  public buildVersion = environment.buildVersion;
-  user$: Observable<KeycloakUser>;
+  user$: Observable<KeycloakUser>;
-  keycloakUser: KeycloakUser;
+  keycloakUser: KeycloakUser;
-  user: User;
+  user: User;
-  activeItem;
+  activeItem;
-  faUserGear = faUserGear;
+  faUserGear = APP_ICONS.faUserGear;
-  profileUrl: string;
+  profileUrl: string;
-  env = environment;
+  env = environment;
-  private filterDropdown: Dropdown | null = null;
+  private filterDropdown: Dropdown | null = null;
-  isMobile: boolean = false;
+  isMobile: boolean = false;
-  private destroy$ = new Subject<void>();
+  private destroy$ = new Subject<void>();
-  prompt: string;
+  prompt: string;
-  private platformId = inject(PLATFORM_ID);
+  private platformId = inject(PLATFORM_ID);
-  private isBrowser = isPlatformBrowser(this.platformId);
+  private isBrowser = isPlatformBrowser(this.platformId);
-
+
-  // Aktueller Listing-Typ basierend auf Route
+  // Aktueller Listing-Typ basierend auf Route
-  currentListingType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings' | null = null;
+  currentListingType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings' | null = null;
-
+
-  // Sortierung
+  // Sortierung
-  sortDropdownVisible: boolean = false;
+  sortDropdownVisible: boolean = false;
-  sortByOptions: KeyValueAsSortBy[] = [];
+  sortByOptions: KeyValueAsSortBy[] = [];
-  sortBy: SortByOptions = null;
+  sortBy: SortByOptions = null;
-
+
-  // Observable für Anzahl der Listings
+  // Observable für Anzahl der Listings
-  numberOfBroker$: Observable<number>;
+  numberOfBroker$: Observable<number>;
-  numberOfCommercial$: Observable<number>;
+  numberOfCommercial$: Observable<number>;
-
+
-  constructor(
+  constructor(
-    private router: Router,
+    private router: Router,
-    private userService: UserService,
+    private userService: UserService,
-    private sharedService: SharedService,
+    private sharedService: SharedService,
-    private modalService: ModalService,
+    private modalService: ModalService,
-    private searchService: SearchService,
+    private searchService: SearchService,
-    private filterStateService: FilterStateService,
+    private filterStateService: FilterStateService,
-    public selectOptions: SelectOptionsService,
+    public selectOptions: SelectOptionsService,
-    public authService: AuthService,
+    public authService: AuthService,
-    private listingService: ListingsService,
+    private listingService: ListingsService,
-  ) { }
+  ) { }
-
+
-  @HostListener('document:click', ['$event'])
+  @HostListener('document:click', ['$event'])
-  handleGlobalClick(event: Event) {
+  handleGlobalClick(event: Event) {
-    const target = event.target as HTMLElement;
+    const target = event.target as HTMLElement;
-    // Don't close sort dropdown when clicking on sort buttons or user menu button
+    // Don't close sort dropdown when clicking on sort buttons or user menu button
-    const excludedIds = ['sortDropdownButton', 'sortDropdownMobileButton', 'user-menu-button'];
+    const excludedIds = ['sortDropdownButton', 'sortDropdownMobileButton', 'user-menu-button'];
-    if (!excludedIds.includes(target.id) && !target.closest('#user-menu-button')) {
+    if (!excludedIds.includes(target.id) && !target.closest('#user-menu-button')) {
-      this.sortDropdownVisible = false;
+      this.sortDropdownVisible = false;
-
+
-      // Close User Menu if clicked outside
+      // Close User Menu if clicked outside
-      // We check if the click was inside the menu containers
+      // We check if the click was inside the menu containers
-      const userLogin = document.getElementById('user-login');
+      const userLogin = document.getElementById('user-login');
-      const userUnknown = document.getElementById('user-unknown');
+      const userUnknown = document.getElementById('user-unknown');
-      const clickedInsideMenu = (userLogin && userLogin.contains(target)) || (userUnknown && userUnknown.contains(target));
+      const clickedInsideMenu = (userLogin && userLogin.contains(target)) || (userUnknown && userUnknown.contains(target));
-
+
-      if (!clickedInsideMenu) {
+      if (!clickedInsideMenu) {
-        this.closeDropdown();
+        this.closeDropdown();
-      }
+      }
-    }
+    }
-  }
+  }
-
+
-  async ngOnInit() {
+  async ngOnInit() {
-    // User Setup
+    // User Setup
-    const token = await this.authService.getToken();
+    const token = await this.authService.getToken();
-    this.keycloakUser = map2User(token);
+    this.keycloakUser = map2User(token);
-    if (this.keycloakUser) {
+    if (this.keycloakUser) {
-      this.user = await this.userService.getByMail(this.keycloakUser?.email);
+      this.user = await this.userService.getByMail(this.keycloakUser?.email);
-      this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
+      this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
-    }
+    }
-
+
-    // Lade Anzahl der Listings
+    // Lade Anzahl der Listings
-    this.numberOfBroker$ = this.userService.getNumberOfBroker(this.createEmptyUserListingCriteria());
+    this.numberOfBroker$ = this.userService.getNumberOfBroker(this.createEmptyUserListingCriteria());
-    this.numberOfCommercial$ = this.listingService.getNumberOfListings('commercialProperty');
+    this.numberOfCommercial$ = this.listingService.getNumberOfListings('commercialProperty');
-
+
-    // Flowbite is now initialized once in AppComponent
+    // Flowbite is now initialized once in AppComponent
-
+
-    // Profile Photo Updates
+    // Profile Photo Updates
-    this.sharedService.currentProfilePhoto.pipe(untilDestroyed(this)).subscribe(photoUrl => {
+    this.sharedService.currentProfilePhoto.pipe(untilDestroyed(this)).subscribe(photoUrl => {
-      this.profileUrl = photoUrl;
+      this.profileUrl = photoUrl;
-    });
+    });
-
+
-    // User Updates - re-initialize Flowbite when user state changes
+    // User Updates - re-initialize Flowbite when user state changes
-    // This ensures the dropdown bindings are updated when the dropdown target changes
+    // This ensures the dropdown bindings are updated when the dropdown target changes
-    this.userService.currentUser.pipe(untilDestroyed(this)).subscribe(u => {
+    this.userService.currentUser.pipe(untilDestroyed(this)).subscribe(u => {
-      const previousUser = this.user;
+      const previousUser = this.user;
-      this.user = u;
+      this.user = u;
-      // Re-initialize Flowbite if user logged in/out state changed
+      // Re-initialize Flowbite if user logged in/out state changed
-      if ((previousUser === null) !== (u === null) && this.isBrowser) {
+      if ((previousUser === null) !== (u === null) && this.isBrowser) {
-        setTimeout(() => initFlowbite(), 50);
+        setTimeout(() => initFlowbite(), 50);
-      }
+      }
-    });
+    });
-
+
-    // Router Events
+    // Router Events
-    this.router.events
+    this.router.events
-      .pipe(
+      .pipe(
-        filter(event => event instanceof NavigationEnd),
+        filter(event => event instanceof NavigationEnd),
-        untilDestroyed(this),
+        untilDestroyed(this),
-      )
+      )
-      .subscribe((event: NavigationEnd) => {
+      .subscribe((event: NavigationEnd) => {
-        this.checkCurrentRoute(event.urlAfterRedirects);
+        this.checkCurrentRoute(event.urlAfterRedirects);
-      });
+      });
-
+
-    // Initial Route Check
+    // Initial Route Check
-    this.checkCurrentRoute(this.router.url);
+    this.checkCurrentRoute(this.router.url);
-  }
+  }
-
+
-  private checkCurrentRoute(url: string): void {
+  private checkCurrentRoute(url: string): void {
-    const baseRoute = url.split('/')[1];
+    const baseRoute = url.split('/')[1];
-
+
-    // Bestimme den aktuellen Listing-Typ
+    // Bestimme den aktuellen Listing-Typ
-    if (baseRoute === 'businessListings') {
+    if (baseRoute === 'businessListings') {
-      this.currentListingType = 'businessListings';
+      this.currentListingType = 'businessListings';
-    } else if (baseRoute === 'commercialPropertyListings') {
+    } else if (baseRoute === 'commercialPropertyListings') {
-      this.currentListingType = 'commercialPropertyListings';
+      this.currentListingType = 'commercialPropertyListings';
-    } else if (baseRoute === 'brokerListings') {
+    } else if (baseRoute === 'brokerListings') {
-      this.currentListingType = 'brokerListings';
+      this.currentListingType = 'brokerListings';
-    } else {
+    } else {
-      this.currentListingType = null;
+      this.currentListingType = null;
-      return; // Keine relevante Route für Filter/Sort
+      return; // Keine relevante Route für Filter/Sort
-    }
+    }
-
+
-    // Setup für diese Route
+    // Setup für diese Route
-    this.setupSortByOptions();
+    this.setupSortByOptions();
-    this.subscribeToStateChanges();
+    this.subscribeToStateChanges();
-  }
+  }
-
+
-  private subscribeToStateChanges(): void {
+  private subscribeToStateChanges(): void {
-    if (!this.currentListingType) return;
+    if (!this.currentListingType) return;
-
+
-    // Abonniere State-Änderungen für den aktuellen Listing-Typ
+    // Abonniere State-Änderungen für den aktuellen Listing-Typ
-    this.filterStateService
+    this.filterStateService
-      .getState$(this.currentListingType)
+      .getState$(this.currentListingType)
-      .pipe(takeUntil(this.destroy$))
+      .pipe(takeUntil(this.destroy$))
-      .subscribe(state => {
+      .subscribe(state => {
-        this.sortBy = state.sortBy;
+        this.sortBy = state.sortBy;
-      });
+      });
-  }
+  }
-
+
-  private setupSortByOptions(): void {
+  private setupSortByOptions(): void {
-    this.sortByOptions = [];
+    this.sortByOptions = [];
-
+
-    if (!this.currentListingType) return;
+    if (!this.currentListingType) return;
-
+
-    switch (this.currentListingType) {
+    switch (this.currentListingType) {
-      case 'brokerListings':
+      case 'brokerListings':
-        this.sortByOptions = [...this.selectOptions.sortByOptions.filter(s => s.type === 'professional')];
+        this.sortByOptions = [...this.selectOptions.sortByOptions.filter(s => s.type === 'professional')];
-        break;
+        break;
-      case 'businessListings':
+      case 'businessListings':
-        this.sortByOptions = [...this.selectOptions.sortByOptions.filter(s => s.type === 'business' || s.type === 'listing')];
+        this.sortByOptions = [...this.selectOptions.sortByOptions.filter(s => s.type === 'business' || s.type === 'listing')];
-        break;
+        break;
-      case 'commercialPropertyListings':
+      case 'commercialPropertyListings':
-        this.sortByOptions = [...this.selectOptions.sortByOptions.filter(s => s.type === 'commercial' || s.type === 'listing')];
+        this.sortByOptions = [...this.selectOptions.sortByOptions.filter(s => s.type === 'commercial' || s.type === 'listing')];
-        break;
+        break;
-    }
+    }
-
+
-    // Füge generische Optionen hinzu (ohne type)
+    // Füge generische Optionen hinzu (ohne type)
-    this.sortByOptions = [...this.sortByOptions, ...this.selectOptions.sortByOptions.filter(s => !s.type)];
+    this.sortByOptions = [...this.sortByOptions, ...this.selectOptions.sortByOptions.filter(s => !s.type)];
-  }
+  }
-
+
-  sortByFct(selectedSortBy: SortByOptions): void {
+  sortByFct(selectedSortBy: SortByOptions): void {
-    if (!this.currentListingType) return;
+    if (!this.currentListingType) return;
-
+
-    this.sortDropdownVisible = false;
+    this.sortDropdownVisible = false;
-
+
-    // Update sortBy im State
+    // Update sortBy im State
-    this.filterStateService.updateSortBy(this.currentListingType, selectedSortBy);
+    this.filterStateService.updateSortBy(this.currentListingType, selectedSortBy);
-
+
-    // Trigger search
+    // Trigger search
-    this.searchService.search(this.currentListingType);
+    this.searchService.search(this.currentListingType);
-  }
+  }
-
+
-  async openModal() {
+  async openModal() {
-    if (!this.currentListingType) return;
+    if (!this.currentListingType) return;
-
+
-    const criteria = this.filterStateService.getCriteria(this.currentListingType);
+    const criteria = this.filterStateService.getCriteria(this.currentListingType);
-    const modalResult = await this.modalService.showModal(criteria);
+    const modalResult = await this.modalService.showModal(criteria);
-
+
-    if (modalResult.accepted) {
+    if (modalResult.accepted) {
-      this.searchService.search(this.currentListingType);
+      this.searchService.search(this.currentListingType);
-    }
+    }
-  }
+  }
-
+
-  navigateWithState(dest: string, state: any) {
+  navigateWithState(dest: string, state: any) {
-    this.router.navigate([dest], { state: state });
+    this.router.navigate([dest], { state: state });
-  }
+  }
-
+
-  isActive(route: string): boolean {
+  isActive(route: string): boolean {
-    return this.router.url === route;
+    return this.router.url === route;
-  }
+  }
-
+
-  isFilterUrl(): boolean {
+  isFilterUrl(): boolean {
-    return ['/businessListings', '/commercialPropertyListings', '/brokerListings'].includes(this.router.url);
+    return ['/businessListings', '/commercialPropertyListings', '/brokerListings'].includes(this.router.url);
-  }
+  }
-
+
-  isBusinessListing(): boolean {
+  isBusinessListing(): boolean {
-    return this.router.url === '/businessListings';
+    return this.router.url === '/businessListings';
-  }
+  }
-
+
-  isCommercialPropertyListing(): boolean {
+  isCommercialPropertyListing(): boolean {
-    return this.router.url === '/commercialPropertyListings';
+    return this.router.url === '/commercialPropertyListings';
-  }
+  }
-
+
-  isProfessionalListing(): boolean {
+  isProfessionalListing(): boolean {
-    return this.router.url === '/brokerListings';
+    return this.router.url === '/brokerListings';
-  }
+  }
-
+
-  closeDropdown() {
+  closeDropdown() {
-    if (!this.isBrowser) return;
+    if (!this.isBrowser) return;
-
+
-    const dropdownButton = document.getElementById('user-menu-button');
+    const dropdownButton = document.getElementById('user-menu-button');
-    const dropdownMenu = this.user ? document.getElementById('user-login') : document.getElementById('user-unknown');
+    const dropdownMenu = this.user ? document.getElementById('user-login') : document.getElementById('user-unknown');
-
+
-    if (dropdownButton && dropdownMenu) {
+    if (dropdownButton && dropdownMenu) {
-      const dropdown = new Dropdown(dropdownMenu, dropdownButton);
+      const dropdown = new Dropdown(dropdownMenu, dropdownButton);
-      dropdown.hide();
+      dropdown.hide();
-    }
+    }
-  }
+  }
-
+
-  closeMobileMenu() {
+  closeMobileMenu() {
-    if (!this.isBrowser) return;
+    if (!this.isBrowser) return;
-
+
-    const targetElement = document.getElementById('navbar-user');
+    const targetElement = document.getElementById('navbar-user');
-    const triggerElement = document.querySelector('[data-collapse-toggle="navbar-user"]');
+    const triggerElement = document.querySelector('[data-collapse-toggle="navbar-user"]');
-
+
-    if (targetElement instanceof HTMLElement && triggerElement instanceof HTMLElement) {
+    if (targetElement instanceof HTMLElement && triggerElement instanceof HTMLElement) {
-      const collapse = new Collapse(targetElement, triggerElement);
+      const collapse = new Collapse(targetElement, triggerElement);
-      collapse.collapse();
+      collapse.collapse();
-    }
+    }
-  }
+  }
-
+
-  closeMenusAndSetCriteria(path: string) {
+  closeMenusAndSetCriteria(path: string) {
-    this.closeDropdown();
+    this.closeDropdown();
-    this.closeMobileMenu();
+    this.closeMobileMenu();
-
+
-    // Bestimme Listing-Typ aus dem Pfad
+    // Bestimme Listing-Typ aus dem Pfad
-    let listingType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings' | null = null;
+    let listingType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings' | null = null;
-
+
-    if (path === 'businessListings') {
+    if (path === 'businessListings') {
-      listingType = 'businessListings';
+      listingType = 'businessListings';
-    } else if (path === 'commercialPropertyListings') {
+    } else if (path === 'commercialPropertyListings') {
-      listingType = 'commercialPropertyListings';
+      listingType = 'commercialPropertyListings';
-    } else if (path === 'brokerListings') {
+    } else if (path === 'brokerListings') {
-      listingType = 'brokerListings';
+      listingType = 'brokerListings';
-    }
+    }
-
+
-    if (listingType) {
+    if (listingType) {
-      // Reset Pagination beim Wechsel zwischen Views
+      // Reset Pagination beim Wechsel zwischen Views
-      this.filterStateService.updateCriteria(listingType, {
+      this.filterStateService.updateCriteria(listingType, {
-        page: 1,
+        page: 1,
-        start: 0,
+        start: 0,
-      });
+      });
-    }
+    }
-  }
+  }
-
+
-  toggleSortDropdown() {
+  toggleSortDropdown() {
-    this.sortDropdownVisible = !this.sortDropdownVisible;
+    this.sortDropdownVisible = !this.sortDropdownVisible;
-  }
+  }
-
+
-  get isProfessional() {
+  get isProfessional() {
-    return this.user?.customerType === 'professional';
+    return this.user?.customerType === 'professional';
-  }
+  }
-
+
-  // Helper method für leere UserListingCriteria
+  // Helper method für leere UserListingCriteria
-  private createEmptyUserListingCriteria(): UserListingCriteria {
+  private createEmptyUserListingCriteria(): UserListingCriteria {
-    return {
+    return {
-      criteriaType: 'brokerListings',
+      criteriaType: 'brokerListings',
-      types: [],
+      types: [],
-      state: null,
+      state: null,
-      city: null,
+      city: null,
-      radius: null,
+      radius: null,
-      searchType: 'exact' as const,
+      searchType: 'exact' as const,
-      brokerName: null,
+      brokerName: null,
-      companyName: null,
+      companyName: null,
-      counties: [],
+      counties: [],
-      prompt: null,
+      prompt: null,
-      page: 1,
+      page: 1,
-      start: 0,
+      start: 0,
-      length: 12,
+      length: 12,
-    };
+    };
-  }
+  }
-
+
-
+
-
+
-  ngAfterViewInit(): void {
+  ngAfterViewInit(): void {
-    // Flowbite initialization is now handled manually or via AppComponent
+    // Flowbite initialization is now handled manually or via AppComponent
-  }
+  }
-
+
-  ngOnDestroy() {
+  ngOnDestroy() {
-    this.destroy$.next();
+    this.destroy$.next();
-    this.destroy$.complete();
+    this.destroy$.complete();
-  }
+  }
-}
+}

bizmatch/src/app/components/login-register/login-register.component.html

@@ -1,106 +1,106 @@
-<div class="flex flex-col items-center justify-center min-h-screen">
+<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">
+  <div class="bg-white p-8 rounded-lg drop-shadow-custom-bg w-full max-w-md">
-    <!-- Home Button -->
+    <!-- Home Button -->
-    <div class="flex justify-end mb-4">
+    <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">
+      <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>
+        <i class="fas fa-home mr-2"></i>
-        Home
+        Home
-      </a>
+      </a>
-    </div>
+    </div>
-
+
-    <h2 class="text-2xl font-bold mb-6 text-center text-gray-800">
+    <h2 class="text-2xl font-bold mb-6 text-center text-gray-800">
-      {{ isLoginMode ? 'Login' : 'Sign Up' }}
+      {{ isLoginMode ? 'Login' : 'Sign Up' }}
-    </h2>
+    </h2>
-
+
-    <!-- Toggle Switch mit Flowbite -->
+    <!-- Toggle Switch mit Flowbite -->
-    <div class="flex items-center justify-center mb-6">
+    <div class="flex items-center justify-center mb-6">
-      <span class="mr-3 text-gray-700 font-medium">Login</span>
+      <span class="mr-3 text-gray-700 font-medium">Login</span>
-      <label for="toggle-switch" class="inline-flex relative items-center cursor-pointer">
+      <label for="toggle-switch" class="inline-flex relative items-center cursor-pointer">
-        <input type="checkbox" id="toggle-switch" class="sr-only peer" [checked]="!isLoginMode" (change)="toggleMode()" />
+        <input type="checkbox" id="toggle-switch" class="sr-only peer" [checked]="!isLoginMode" (change)="toggleMode()" />
-        <div
+        <div
-          class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+          class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
-        ></div>
+        ></div>
-      </label>
+      </label>
-      <span class="ml-3 text-gray-700 font-medium">Sign Up</span>
+      <span class="ml-3 text-gray-700 font-medium">Sign Up</span>
-    </div>
+    </div>
-
+
-    <!-- E-Mail Eingabe -->
+    <!-- E-Mail Eingabe -->
-    <div class="mb-4">
+    <div class="mb-4">
-      <label for="email" class="block text-gray-700 mb-2 font-medium">E-Mail</label>
+      <label for="email" class="block text-gray-700 mb-2 font-medium">E-Mail</label>
-      <div class="relative">
+      <div class="relative">
-        <input
+        <input
-          id="email"
+          id="email"
-          type="email"
+          type="email"
-          [(ngModel)]="email"
+          [(ngModel)]="email"
-          placeholder="Please enter E-Mail Address"
+          placeholder="Please enter E-Mail Address"
-          class="w-full px-3 py-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          class="w-full px-3 py-2 pl-10 border 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>
+        <fa-icon [icon]="envelope" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-600"></fa-icon>
-      </div>
+      </div>
-    </div>
+    </div>
-
+
-    <!-- Passwort Eingabe -->
+    <!-- Passwort Eingabe -->
-    <div class="mb-4">
+    <div class="mb-4">
-      <label for="password" class="block text-gray-700 mb-2 font-medium">Password</label>
+      <label for="password" class="block text-gray-700 mb-2 font-medium">Password</label>
-      <div class="relative">
+      <div class="relative">
-        <input
+        <input
-          id="password"
+          id="password"
-          type="password"
+          type="password"
-          [(ngModel)]="password"
+          [(ngModel)]="password"
-          placeholder="Please enter Password"
+          placeholder="Please enter Password"
-          class="w-full px-3 py-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          class="w-full px-3 py-2 pl-10 border 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>
+        <fa-icon [icon]="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-600"></fa-icon>
-      </div>
+      </div>
-    </div>
+    </div>
-
+
-    <!-- Passwort-Bestätigung nur im Registrierungsmodus -->
+    <!-- Passwort-Bestätigung nur im Registrierungsmodus -->
-    <div *ngIf="!isLoginMode" class="mb-6">
+    <div *ngIf="!isLoginMode" class="mb-6">
-      <label for="confirmPassword" class="block text-gray-700 mb-2 font-medium">Confirm Password</label>
+      <label for="confirmPassword" class="block text-gray-700 mb-2 font-medium">Confirm Password</label>
-      <div class="relative">
+      <div class="relative">
-        <input
+        <input
-          id="confirmPassword"
+          id="confirmPassword"
-          type="password"
+          type="password"
-          [(ngModel)]="confirmPassword"
+          [(ngModel)]="confirmPassword"
-          placeholder="Repeat Password"
+          placeholder="Repeat Password"
-          class="w-full px-3 py-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          class="w-full px-3 py-2 pl-10 border 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>
+        <fa-icon [icon]="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-600"></fa-icon>
-      </div>
+      </div>
-    </div>
+    </div>
-
+
-    <!-- Fehlermeldung -->
+    <!-- Fehlermeldung -->
-    <div *ngIf="errorMessage" class="text-red-500 text-center mb-4 text-sm">
+    <div *ngIf="errorMessage" class="text-red-500 text-center mb-4 text-sm">
-      {{ errorMessage }}
+      {{ errorMessage }}
-    </div>
+    </div>
-
+
-    <!-- Submit Button -->
+    <!-- Submit Button -->
-    <button (click)="onSubmit()" class="w-full flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white py-2.5 rounded-lg mb-4 transition-colors duration-200">
+    <button (click)="onSubmit()" class="w-full flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white py-2.5 rounded-lg mb-4 transition-colors duration-200">
-      <!-- <fa-icon [icon]="isLoginMode ? 'fas fas-user-plus' : 'userplus'" class="mr-2"></fa-icon> -->
+      <!-- <fa-icon [icon]="isLoginMode ? 'fas fas-user-plus' : 'userplus'" class="mr-2"></fa-icon> -->
-      <i *ngIf="isLoginMode" class="fa-solid fa-user-plus mr-2"></i>
+      <i *ngIf="isLoginMode" class="fa-solid fa-user-plus mr-2"></i>
-      <i *ngIf="!isLoginMode" class="fa-solid fa-arrow-right mr-2"></i>
+      <i *ngIf="!isLoginMode" class="fa-solid fa-arrow-right mr-2"></i>
-      {{ isLoginMode ? 'Sign in with Email' : 'Sign Up' }}
+      {{ isLoginMode ? 'Sign in with Email' : 'Sign Up' }}
-    </button>
+    </button>
-
+
-    <!-- Trennlinie -->
+    <!-- Trennlinie -->
-    <div class="flex items-center justify-center my-4">
+    <div class="flex items-center justify-center my-4">
-      <span class="border-b w-1/5 md:w-1/4 border-gray-300"></span>
+      <span class="border-b w-1/5 md:w-1/4 border-gray-300"></span>
-      <span class="text-xs text-gray-500 uppercase mx-2">or</span>
+      <span class="text-xs text-gray-500 uppercase mx-2">or</span>
-      <span class="border-b w-1/5 md:w-1/4 border-gray-300"></span>
+      <span class="border-b w-1/5 md:w-1/4 border-gray-300"></span>
-    </div>
+    </div>
-
+
-    <!-- Google Button -->
+    <!-- Google Button -->
-    <button (click)="loginWithGoogle()" class="w-full flex items-center justify-center bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 py-2.5 rounded-lg transition-colors duration-200">
+    <button (click)="loginWithGoogle()" class="w-full flex items-center justify-center bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 py-2.5 rounded-lg transition-colors duration-200">
-      <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+      <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
-        <path
+        <path
-          fill="#FFC107"
+          fill="#FFC107"
-          d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
+          d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
-        />
+        />
-        <path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" />
+        <path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" />
-        <path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0124 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" />
+        <path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0124 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" />
-        <path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 01-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" />
+        <path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 01-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" />
-      </svg>
+      </svg>
-      Continue with Google
+      Continue with Google
-    </button>
+    </button>
-  </div>
+  </div>
-</div>
+</div>

bizmatch/src/app/components/login-register/login-register.component.ts

@@ -1,95 +1,95 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faArrowRight, faEnvelope, faLock, faUserPlus } from '@fortawesome/free-solid-svg-icons';
+import { APP_ICONS } from '../../utils/fontawesome-icons';
-import { AuthService } from '../../services/auth.service';
+import { AuthService } from '../../services/auth.service';
-import { LoadingService } from '../../services/loading.service';
+import { LoadingService } from '../../services/loading.service';
-@Component({
+@Component({
-  selector: 'app-login-register',
+  selector: 'app-login-register',
-  standalone: true,
+  standalone: true,
-  imports: [CommonModule, FormsModule, FontAwesomeModule, RouterModule],
+  imports: [CommonModule, FormsModule, FontAwesomeModule, RouterModule],
-  templateUrl: './login-register.component.html',
+  templateUrl: './login-register.component.html',
-})
+})
-export class LoginRegisterComponent {
+export class LoginRegisterComponent {
-  email: string = '';
+  email: string = '';
-  password: string = '';
+  password: string = '';
-  confirmPassword: string = '';
+  confirmPassword: string = '';
-  isLoginMode: boolean = true; // true: Login, false: Registration
+  isLoginMode: boolean = true; // true: Login, false: Registration
-  errorMessage: string = '';
+  errorMessage: string = '';
-  envelope = faEnvelope;
+  envelope = APP_ICONS.faEnvelope;
-  lock = faLock;
+  lock = APP_ICONS.faLock;
-  arrowRight = faArrowRight;
+  arrowRight = APP_ICONS.faArrowRight;
-  userplus = faUserPlus;
+  userplus = APP_ICONS.faUserPlus;
-  constructor(private authService: AuthService, private route: ActivatedRoute, private router: Router, private loadingService: LoadingService) {}
+  constructor(private authService: AuthService, private route: ActivatedRoute, private router: Router, private loadingService: LoadingService) {}
-
+
-  ngOnInit(): void {
+  ngOnInit(): void {
-    // Set mode based on query parameter "mode"
+    // Set mode based on query parameter "mode"
-    this.route.queryParamMap.subscribe(params => {
+    this.route.queryParamMap.subscribe(params => {
-      const mode = params.get('mode');
+      const mode = params.get('mode');
-      this.isLoginMode = mode !== 'register';
+      this.isLoginMode = mode !== 'register';
-    });
+    });
-  }
+  }
-
+
-  toggleMode(): void {
+  toggleMode(): void {
-    this.isLoginMode = !this.isLoginMode;
+    this.isLoginMode = !this.isLoginMode;
-    this.errorMessage = '';
+    this.errorMessage = '';
-  }
+  }
-
+
-  // Login with Email
+  // Login with Email
-  onSubmit(): void {
+  onSubmit(): void {
-    this.errorMessage = '';
+    this.errorMessage = '';
-    if (this.isLoginMode) {
+    if (this.isLoginMode) {
-      this.authService
+      this.authService
-        .loginWithEmail(this.email, this.password)
+        .loginWithEmail(this.email, this.password)
-        .then(userCredential => {
+        .then(userCredential => {
-          console.log('Successfully logged in:', userCredential);
+          console.log('Successfully logged in:', userCredential);
-          this.router.navigate([`myListing`]);
+          this.router.navigate([`myListing`]);
-        })
+        })
-        .catch(error => {
+        .catch(error => {
-          console.error('Error during email login:', error);
+          console.error('Error during email login:', error);
-          this.errorMessage = error.message;
+          this.errorMessage = error.message;
-        });
+        });
-    } else {
+    } else {
-      // Registration mode: also check if passwords match
+      // Registration mode: also check if passwords match
-      if (this.password !== this.confirmPassword) {
+      if (this.password !== this.confirmPassword) {
-        console.error('Passwords do not match');
+        console.error('Passwords do not match');
-        this.errorMessage = 'Passwords do not match.';
+        this.errorMessage = 'Passwords do not match.';
-        return;
+        return;
-      }
+      }
-      this.loadingService.startLoading('googleAuth');
+      this.loadingService.startLoading('googleAuth');
-      this.authService
+      this.authService
-        .registerWithEmail(this.email, this.password)
+        .registerWithEmail(this.email, this.password)
-        .then(userCredential => {
+        .then(userCredential => {
-          console.log('Successfully registered:', userCredential);
+          console.log('Successfully registered:', userCredential);
-          this.loadingService.stopLoading('googleAuth');
+          this.loadingService.stopLoading('googleAuth');
-          this.router.navigate(['emailVerification']);
+          this.router.navigate(['emailVerification']);
-        })
+        })
-        .catch(error => {
+        .catch(error => {
-          this.loadingService.stopLoading('googleAuth');
+          this.loadingService.stopLoading('googleAuth');
-          console.error('Error during registration:', error);
+          console.error('Error during registration:', error);
-          if (error.code === 'auth/email-already-in-use') {
+          if (error.code === 'auth/email-already-in-use') {
-            this.errorMessage = 'This email address is already in use. Please try logging in.';
+            this.errorMessage = 'This email address is already in use. Please try logging in.';
-          } else {
+          } else {
-            this.errorMessage = error.message;
+            this.errorMessage = error.message;
-          }
+          }
-        });
+        });
-    }
+    }
-  }
+  }
-
+
-  // Login with Google
+  // Login with Google
-  loginWithGoogle(): void {
+  loginWithGoogle(): void {
-    this.errorMessage = '';
+    this.errorMessage = '';
-    this.authService
+    this.authService
-      .loginWithGoogle()
+      .loginWithGoogle()
-      .then(userCredential => {
+      .then(userCredential => {
-        console.log('Successfully logged in with Google:', userCredential);
+        console.log('Successfully logged in with Google:', userCredential);
-        this.router.navigate([`myListing`]);
+        this.router.navigate([`myListing`]);
-      })
+      })
-      .catch(error => {
+      .catch(error => {
-        console.error('Error during Google login:', error);
+        console.error('Error during Google login:', error);
-        this.errorMessage = error.message;
+        this.errorMessage = error.message;
-      });
+      });
-  }
+  }
-}
+}

bizmatch/src/app/components/not-found/not-found.component.html

@@ -1,40 +1,40 @@
-<!-- <section class="bg-white dark:bg-gray-900">
+<!-- <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">
+  <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
-    <div class="mx-auto max-w-screen-sm text-center">
+    <div class="mx-auto max-w-screen-sm text-center">
-      <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary-600 dark:text-primary-500">404</h1>
+      <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary-600 dark:text-primary-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>
+      <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">Something's missing.</p>
-      <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">Sorry, we can't find that page.</p>
+      <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">Sorry, we can't find that page.</p>
-      <a
+      <a
-        routerLink="/home"
+        routerLink="/home"
-        class="inline-flex text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900 my-4"
+        class="inline-flex text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900 my-4"
-        >Back to Homepage</a
+        >Back to Homepage</a
-      >
+      >
-    </div>
+    </div>
-  </div>
+  </div>
-</section> -->
+</section> -->
-<section class="bg-white dark:bg-gray-900">
+<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">
+  <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
-    <!-- Breadcrumbs -->
+    <!-- Breadcrumbs -->
-    <div class="mb-4">
+    <div class="mb-4">
-      <app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
+      <app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
-    </div>
+    </div>
-
+
-    <div class="mx-auto max-w-screen-sm text-center">
+    <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>
+      <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>
+      <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">Something's missing.</p>
-      <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">Sorry, we can't find that page</p>
+      <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">Sorry, we can't find that page</p>
-      <!-- <a
+      <!-- <a
-        href="#"
+        href="#"
-        class="inline-flex text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900 my-4"
+        class="inline-flex text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900 my-4"
-        >Back to Homepage</a
+        >Back to Homepage</a
-      > -->
+      > -->
-      <button
+      <button
-        type="button"
+        type="button"
-        [routerLink]="['/home']"
+        [routerLink]="['/home']"
-        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-      >
+      >
-        Back to Homepage
+        Back to Homepage
-      </button>
+      </button>
-    </div>
+    </div>
-  </div>
+  </div>
-</section>
+</section>

bizmatch/src/app/components/not-found/not-found.component.ts

@@ -1,32 +1,32 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
-import { SeoService } from '../../services/seo.service';
+import { SeoService } from '../../services/seo.service';
-import { BreadcrumbItem, BreadcrumbsComponent } from '../breadcrumbs/breadcrumbs.component';
+import { BreadcrumbItem, BreadcrumbsComponent } from '../breadcrumbs/breadcrumbs.component';
-
+
-@Component({
+@Component({
-  selector: 'app-not-found',
+  selector: 'app-not-found',
-  standalone: true,
+  standalone: true,
-  imports: [CommonModule, RouterModule, BreadcrumbsComponent],
+  imports: [CommonModule, RouterModule, BreadcrumbsComponent],
-  templateUrl: './not-found.component.html',
+  templateUrl: './not-found.component.html',
-})
+})
-export class NotFoundComponent implements OnInit {
+export class NotFoundComponent implements OnInit {
-  breadcrumbs: BreadcrumbItem[] = [
+  breadcrumbs: BreadcrumbItem[] = [
-    { label: 'Home', url: '/home', icon: 'fas fa-home' },
+    { label: 'Home', url: '/home', icon: 'fas fa-home' },
-    { label: '404 - Page Not Found' }
+    { label: '404 - Page Not Found' }
-  ];
+  ];
-
+
-  constructor(private seoService: SeoService) {}
+  constructor(private seoService: SeoService) {}
-
+
-  ngOnInit(): void {
+  ngOnInit(): void {
-    // Set noindex to prevent 404 pages from being indexed
+    // Set noindex to prevent 404 pages from being indexed
-    this.seoService.setNoIndex();
+    this.seoService.setNoIndex();
-
+
-    // Set appropriate meta tags for 404 page
+    // Set appropriate meta tags for 404 page
-    this.seoService.updateMetaTags({
+    this.seoService.updateMetaTags({
-      title: '404 - Page Not Found | BizMatch',
+      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.',
+      description: 'The page you are looking for could not be found. Return to BizMatch to browse businesses for sale or commercial properties.',
-      type: 'website'
+      type: 'website'
-    });
+    });
-  }
+  }
-}
+}

bizmatch/src/app/components/search-modal/search-modal-broker.component.html

@@ -1,260 +1,260 @@
-<div
+<div
-  *ngIf="isModal && (modalService.modalVisible$ | async)?.visible && (modalService.modalVisible$ | async)?.type === 'brokerListings'"
+  *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"
+  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 w-full h-screen max-h-screen">
-    <div class="relative bg-white rounded-lg shadow h-full">
+    <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">
+      <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>
+        <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">
+        <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">
+          <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" />
+            <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>
+          </svg>
-          <span class="sr-only">Close Modal</span>
+          <span class="sr-only">Close Modal</span>
-        </button>
+        </button>
-      </div>
+      </div>
-      <div class="p-6 space-y-6">
+      <div class="p-6 space-y-6">
-        <div class="flex space-x-4 mb-4">
+        <div class="flex space-x-4 mb-4">
-          <button class="text-primary-600 font-medium border-b-2 border-primary-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
+          <button class="text-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>
+          <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
-          <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
+          <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
+            Clear all Filter
-            <div class="tooltip-arrow" data-popper-arrow></div>
+            <div class="tooltip-arrow" data-popper-arrow></div>
-          </div>
+          </div>
-        </div>
+        </div>
-        <!-- Display active filters as tags -->
+        <!-- Display active filters as tags -->
-        <div class="flex flex-wrap gap-2 mb-4" *ngIf="hasActiveFilters()">
+        <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">
+          <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>
+            State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Types: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Professional Name: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Company: {{ criteria.companyName }} <button (click)="removeFilter('companyName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Areas Served: {{ criteria.counties.join(', ') }} <button (click)="removeFilter('counties')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-          </span>
+          </span>
-        </div>
+        </div>
-        @if(criteria.criteriaType==='brokerListings') {
+        @if(criteria.criteriaType==='brokerListings') {
-        <div class="grid grid-cols-1 gap-6">
+        <div class="grid grid-cols-1 gap-6">
-          <div class="space-y-4">
+          <div class="space-y-4">
-            <div>
+            <div>
-              <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
+              <label for="state" class="block mb-2 text-sm font-medium text-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>
+              <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
-            </div>
+            </div>
-            <div>
+            <div>
-              <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
+              <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
-            </div>
+            </div>
-            <div *ngIf="criteria.city">
+            <div *ngIf="criteria.city">
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
+              <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
-              <div class="flex items-center space-x-4">
+              <div class="flex items-center space-x-4">
-                <label class="inline-flex items-center">
+                <label class="inline-flex items-center">
-                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
+                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
-                  <span class="ml-2">Exact City</span>
+                  <span class="ml-2">Exact City</span>
-                </label>
+                </label>
-                <label class="inline-flex items-center">
+                <label class="inline-flex items-center">
-                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
+                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
-                  <span class="ml-2">Radius Search</span>
+                  <span class="ml-2">Radius Search</span>
-                </label>
+                </label>
-              </div>
+              </div>
-            </div>
+            </div>
-            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
+            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
+              <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
-              <div class="flex flex-wrap">
+              <div class="flex flex-wrap">
-                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
+                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
-                <button
+                <button
-                  type="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"
+                  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'"
+                  [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-neutral-900 bg-white'"
-                  (click)="setRadius(radius)"
+                  (click)="setRadius(radius)"
-                >
+                >
-                  {{ radius }}
+                  {{ radius }}
-                </button>
+                </button>
-                }
+                }
-              </div>
+              </div>
-            </div>
+            </div>
-            <div>
+            <div>
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Professional Type</label>
+              <label class="block mb-2 text-sm font-medium text-neutral-900">Professional Type</label>
-              <ng-select
+              <ng-select
-                class="custom"
+                class="custom"
-                [items]="selectOptions.customerSubTypes"
+                [items]="selectOptions.customerSubTypes"
-                bindLabel="name"
+                bindLabel="name"
-                bindValue="value"
+                bindValue="value"
-                [ngModel]="criteria.types"
+                [ngModel]="criteria.types"
-                (ngModelChange)="onCategoryChange($event)"
+                (ngModelChange)="onCategoryChange($event)"
-                [multiple]="true"
+                [multiple]="true"
-                [closeOnSelect]="true"
+                [closeOnSelect]="true"
-                placeholder="Select professional types"
+                placeholder="Select professional types"
-              ></ng-select>
+              ></ng-select>
-            </div>
+            </div>
-            <div>
+            <div>
-              <label for="brokerName" class="block mb-2 text-sm font-medium text-neutral-900">Professional Name</label>
+              <label for="brokerName" class="block mb-2 text-sm font-medium text-neutral-900">Professional Name</label>
-              <input
+              <input
-                type="text"
+                type="text"
-                id="brokerName"
+                id="brokerName"
-                [ngModel]="criteria.brokerName"
+                [ngModel]="criteria.brokerName"
-                (ngModelChange)="updateCriteria({ brokerName: $event })"
+                (ngModelChange)="updateCriteria({ brokerName: $event })"
-                class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
+                class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
-                placeholder="e.g. John Smith"
+                placeholder="e.g. John Smith"
-              />
+              />
-            </div>
+            </div>
-            <div>
+            <div>
-              <label for="companyName" class="block mb-2 text-sm font-medium text-neutral-900">Company Name</label>
+              <label for="companyName" class="block mb-2 text-sm font-medium text-neutral-900">Company Name</label>
-              <input
+              <input
-                type="text"
+                type="text"
-                id="companyName"
+                id="companyName"
-                [ngModel]="criteria.companyName"
+                [ngModel]="criteria.companyName"
-                (ngModelChange)="updateCriteria({ companyName: $event })"
+                (ngModelChange)="updateCriteria({ companyName: $event })"
-                class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
+                class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
-                placeholder="e.g. ABC Brokers"
+                placeholder="e.g. ABC Brokers"
-              />
+              />
-            </div>
+            </div>
-            <div>
+            <div>
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Counties / Areas Served</label>
+              <label class="block mb-2 text-sm font-medium text-neutral-900">Counties / Areas Served</label>
-              <ng-select
+              <ng-select
-                class="custom"
+                class="custom"
-                [items]="counties$ | async"
+                [items]="counties$ | async"
-                [multiple]="true"
+                [multiple]="true"
-                [loading]="countyLoading"
+                [loading]="countyLoading"
-                [typeahead]="countyInput$"
+                [typeahead]="countyInput$"
-                [ngModel]="criteria.counties"
+                [ngModel]="criteria.counties"
-                (ngModelChange)="onCountiesChange($event)"
+                (ngModelChange)="onCountiesChange($event)"
-                [closeOnSelect]="true"
+                [closeOnSelect]="true"
-                placeholder="Type to search counties"
+                placeholder="Type to search counties"
-              ></ng-select>
+              ></ng-select>
-            </div>
+            </div>
-          </div>
+          </div>
-        </div>
+        </div>
-        }
+        }
-      </div>
+      </div>
-    </div>
+    </div>
-  </div>
+  </div>
-</div>
+</div>
-<div *ngIf="!isModal" class="space-y-6 pb-10">
+<div *ngIf="!isModal" class="space-y-6 pb-10">
-  <div class="flex space-x-4 mb-4">
+  <div class="flex space-x-4 mb-4">
-    <h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
+    <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>
+    <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
-    <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
+    <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
+      Clear all Filter
-      <div class="tooltip-arrow" data-popper-arrow></div>
+      <div class="tooltip-arrow" data-popper-arrow></div>
-    </div>
+    </div>
-  </div>
+  </div>
-  <!-- Display active filters as tags -->
+  <!-- Display active filters as tags -->
-  <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
+  <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">
+    <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>
+      State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-    </span>
+    </span>
-    <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">
+    <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>
+      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-    </span>
+    </span>
-    <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">
+    <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>
+      Types: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-    </span>
+    </span>
-    <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">
+    <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>
+      Professional Name: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-    </span>
+    </span>
-    <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">
+    <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>
+      Company: {{ criteria.companyName }} <button (click)="removeFilter('companyName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-    </span>
+    </span>
-    <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">
+    <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>
+      Areas Served: {{ criteria.counties.join(', ') }} <button (click)="removeFilter('counties')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-    </span>
+    </span>
-  </div>
+  </div>
-  @if(criteria.criteriaType==='brokerListings') {
+  @if(criteria.criteriaType==='brokerListings') {
-  <div class="space-y-4">
+  <div class="space-y-4">
-    <div>
+    <div>
-      <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
+      <label for="state" class="block mb-2 text-sm font-medium text-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>
+      <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
-    </div>
+    </div>
-    <div>
+    <div>
-      <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
+      <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
-    </div>
+    </div>
-    <div *ngIf="criteria.city">
+    <div *ngIf="criteria.city">
-      <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
+      <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
-      <div class="flex items-center space-x-4">
+      <div class="flex items-center space-x-4">
-        <label class="inline-flex items-center">
+        <label class="inline-flex items-center">
-          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
+          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
-          <span class="ml-2">Exact City</span>
+          <span class="ml-2">Exact City</span>
-        </label>
+        </label>
-        <label class="inline-flex items-center">
+        <label class="inline-flex items-center">
-          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
+          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
-          <span class="ml-2">Radius Search</span>
+          <span class="ml-2">Radius Search</span>
-        </label>
+        </label>
-      </div>
+      </div>
-    </div>
+    </div>
-    <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
+    <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
-      <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
+      <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
-      <div class="flex flex-wrap">
+      <div class="flex flex-wrap">
-        @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
+        @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
-        <button
+        <button
-          type="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"
+          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'"
+          [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-neutral-900 bg-white'"
-          (click)="setRadius(radius)"
+          (click)="setRadius(radius)"
-        >
+        >
-          {{ radius }}
+          {{ radius }}
-        </button>
+        </button>
-        }
+        }
-      </div>
+      </div>
-    </div>
+    </div>
-    <div>
+    <div>
-      <label class="block mb-2 text-sm font-medium text-neutral-900">Professional Type</label>
+      <label class="block mb-2 text-sm font-medium text-neutral-900">Professional Type</label>
-      <ng-select
+      <ng-select
-        class="custom"
+        class="custom"
-        [items]="selectOptions.customerSubTypes"
+        [items]="selectOptions.customerSubTypes"
-        bindLabel="name"
+        bindLabel="name"
-        bindValue="value"
+        bindValue="value"
-        [ngModel]="criteria.types"
+        [ngModel]="criteria.types"
-        (ngModelChange)="onCategoryChange($event)"
+        (ngModelChange)="onCategoryChange($event)"
-        [multiple]="true"
+        [multiple]="true"
-        [closeOnSelect]="true"
+        [closeOnSelect]="true"
-        placeholder="Select professional types"
+        placeholder="Select professional types"
-      ></ng-select>
+      ></ng-select>
-    </div>
+    </div>
-    <div>
+    <div>
-      <label for="brokerName" class="block mb-2 text-sm font-medium text-neutral-900">Professional Name</label>
+      <label for="brokerName" class="block mb-2 text-sm font-medium text-neutral-900">Professional Name</label>
-      <input
+      <input
-        type="text"
+        type="text"
-        id="brokerName"
+        id="brokerName"
-        [ngModel]="criteria.brokerName"
+        [ngModel]="criteria.brokerName"
-        (ngModelChange)="updateCriteria({ brokerName: $event })"
+        (ngModelChange)="updateCriteria({ brokerName: $event })"
-        class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
+        class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
-        placeholder="e.g. John Smith"
+        placeholder="e.g. John Smith"
-      />
+      />
-    </div>
+    </div>
-    <div>
+    <div>
-      <label for="companyName" class="block mb-2 text-sm font-medium text-neutral-900">Company Name</label>
+      <label for="companyName" class="block mb-2 text-sm font-medium text-neutral-900">Company Name</label>
-      <input
+      <input
-        type="text"
+        type="text"
-        id="companyName"
+        id="companyName"
-        [ngModel]="criteria.companyName"
+        [ngModel]="criteria.companyName"
-        (ngModelChange)="updateCriteria({ companyName: $event })"
+        (ngModelChange)="updateCriteria({ companyName: $event })"
-        class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
+        class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
-        placeholder="e.g. ABC Brokers"
+        placeholder="e.g. ABC Brokers"
-      />
+      />
-    </div>
+    </div>
-    <div>
+    <div>
-      <label class="block mb-2 text-sm font-medium text-neutral-900">Counties / Areas Served</label>
+      <label class="block mb-2 text-sm font-medium text-neutral-900">Counties / Areas Served</label>
-      <ng-select
+      <ng-select
-        class="custom"
+        class="custom"
-        [items]="counties$ | async"
+        [items]="counties$ | async"
-        [multiple]="true"
+        [multiple]="true"
-        [loading]="countyLoading"
+        [loading]="countyLoading"
-        [typeahead]="countyInput$"
+        [typeahead]="countyInput$"
-        [ngModel]="criteria.counties"
+        [ngModel]="criteria.counties"
-        (ngModelChange)="onCountiesChange($event)"
+        (ngModelChange)="onCountiesChange($event)"
-        [closeOnSelect]="true"
+        [closeOnSelect]="true"
-        placeholder="Type to search counties"
+        placeholder="Type to search counties"
-      ></ng-select>
+      ></ng-select>
-    </div>
+    </div>
-  </div>
+  </div>
-  }
+  }
-</div>
+</div>

bizmatch/src/app/components/search-modal/search-modal-broker.component.ts

@@ -1,316 +1,316 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
-import { NgSelectModule } from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { catchError, concat, debounceTime, distinctUntilChanged, map, Observable, of, Subject, switchMap, takeUntil, tap } from 'rxjs';
+import { catchError, concat, debounceTime, distinctUntilChanged, map, Observable, of, Subject, switchMap, takeUntil, tap } from 'rxjs';
-import { CountyResult, GeoResult, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
+import { CountyResult, GeoResult, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
-import { FilterStateService } from '../../services/filter-state.service';
+import { FilterStateService } from '../../services/filter-state.service';
-import { GeoService } from '../../services/geo.service';
+import { GeoService } from '../../services/geo.service';
-import { SearchService } from '../../services/search.service';
+import { SearchService } from '../../services/search.service';
-import { SelectOptionsService } from '../../services/select-options.service';
+import { SelectOptionsService } from '../../services/select-options.service';
-import { UserService } from '../../services/user.service';
+import { UserService } from '../../services/user.service';
-import { ValidatedCityComponent } from '../validated-city/validated-city.component';
+import { ValidatedCityComponent } from '../validated-city/validated-city.component';
-import { ModalService } from './modal.service';
+import { ModalService } from './modal.service';
-
+
-@UntilDestroy()
+@UntilDestroy()
-@Component({
+@Component({
-  selector: 'app-search-modal-broker',
+  selector: 'app-search-modal-broker',
-  standalone: true,
+  standalone: true,
-  imports: [CommonModule, FormsModule, NgSelectModule, ValidatedCityComponent],
+  imports: [CommonModule, FormsModule, NgSelectModule, ValidatedCityComponent],
-  templateUrl: './search-modal-broker.component.html',
+  templateUrl: './search-modal-broker.component.html',
-  styleUrls: ['./search-modal.component.scss'],
+  styleUrls: ['./search-modal.component.scss'],
-})
+})
-export class SearchModalBrokerComponent implements OnInit, OnDestroy {
+export class SearchModalBrokerComponent implements OnInit, OnDestroy {
-  @Input() isModal: boolean = true;
+  @Input() isModal: boolean = true;
-
+
-  private destroy$ = new Subject<void>();
+  private destroy$ = new Subject<void>();
-  private searchDebounce$ = new Subject<void>();
+  private searchDebounce$ = new Subject<void>();
-
+
-  // State
+  // State
-  criteria: UserListingCriteria;
+  criteria: UserListingCriteria;
-  backupCriteria: any;
+  backupCriteria: any;
-
+
-  // Geo search
+  // Geo search
-  counties$: Observable<CountyResult[]>;
+  counties$: Observable<CountyResult[]>;
-  countyLoading = false;
+  countyLoading = false;
-  countyInput$ = new Subject<string>();
+  countyInput$ = new Subject<string>();
-
+
-  // Results count
+  // Results count
-  numberOfResults$: Observable<number>;
+  numberOfResults$: Observable<number>;
-  cancelDisable = false;
+  cancelDisable = false;
-
+
-  constructor(
+  constructor(
-    public selectOptions: SelectOptionsService,
+    public selectOptions: SelectOptionsService,
-    public modalService: ModalService,
+    public modalService: ModalService,
-    private geoService: GeoService,
+    private geoService: GeoService,
-    private filterStateService: FilterStateService,
+    private filterStateService: FilterStateService,
-    private userService: UserService,
+    private userService: UserService,
-    private searchService: SearchService,
+    private searchService: SearchService,
-  ) {}
+  ) {}
-
+
-  ngOnInit(): void {
+  ngOnInit(): void {
-    // Load counties
+    // Load counties
-    this.loadCounties();
+    this.loadCounties();
-
+
-    if (this.isModal) {
+    if (this.isModal) {
-      // Modal mode: Wait for messages from ModalService
+      // Modal mode: Wait for messages from ModalService
-      this.modalService.message$.pipe(untilDestroyed(this)).subscribe(criteria => {
+      this.modalService.message$.pipe(untilDestroyed(this)).subscribe(criteria => {
-        if (criteria?.criteriaType === 'brokerListings') {
+        if (criteria?.criteriaType === 'brokerListings') {
-          this.initializeWithCriteria(criteria);
+          this.initializeWithCriteria(criteria);
-        }
+        }
-      });
+      });
-
+
-      this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
+      this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
-        if (val.visible && val.type === 'brokerListings') {
+        if (val.visible && val.type === 'brokerListings') {
-          // Reset pagination when modal opens
+          // Reset pagination when modal opens
-          if (this.criteria) {
+          if (this.criteria) {
-            this.criteria.page = 1;
+            this.criteria.page = 1;
-            this.criteria.start = 0;
+            this.criteria.start = 0;
-          }
+          }
-        }
+        }
-      });
+      });
-    } else {
+    } else {
-      // Embedded mode: Subscribe to state changes
+      // Embedded mode: Subscribe to state changes
-      this.subscribeToStateChanges();
+      this.subscribeToStateChanges();
-    }
+    }
-
+
-    // Setup debounced search
+    // Setup debounced search
-    this.searchDebounce$.pipe(debounceTime(400), takeUntil(this.destroy$)).subscribe(() => {
+    this.searchDebounce$.pipe(debounceTime(400), takeUntil(this.destroy$)).subscribe(() => {
-      this.triggerSearch();
+      this.triggerSearch();
-    });
+    });
-  }
+  }
-
+
-  private initializeWithCriteria(criteria: UserListingCriteria): void {
+  private initializeWithCriteria(criteria: UserListingCriteria): void {
-    this.criteria = criteria;
+    this.criteria = criteria;
-    this.backupCriteria = JSON.parse(JSON.stringify(criteria));
+    this.backupCriteria = JSON.parse(JSON.stringify(criteria));
-    this.setTotalNumberOfResults();
+    this.setTotalNumberOfResults();
-  }
+  }
-
+
-  private subscribeToStateChanges(): void {
+  private subscribeToStateChanges(): void {
-    if (!this.isModal) {
+    if (!this.isModal) {
-      this.filterStateService
+      this.filterStateService
-        .getState$('brokerListings')
+        .getState$('brokerListings')
-        .pipe(takeUntil(this.destroy$))
+        .pipe(takeUntil(this.destroy$))
-        .subscribe(state => {
+        .subscribe(state => {
-          this.criteria = { ...state.criteria };
+          this.criteria = { ...state.criteria };
-          this.setTotalNumberOfResults();
+          this.setTotalNumberOfResults();
-        });
+        });
-    }
+    }
-  }
+  }
-
+
-  private loadCounties(): void {
+  private loadCounties(): void {
-    this.counties$ = concat(
+    this.counties$ = concat(
-      of([]), // default items
+      of([]), // default items
-      this.countyInput$.pipe(
+      this.countyInput$.pipe(
-        distinctUntilChanged(),
+        distinctUntilChanged(),
-        tap(() => (this.countyLoading = true)),
+        tap(() => (this.countyLoading = true)),
-        switchMap(term =>
+        switchMap(term =>
-          this.geoService.findCountiesStartingWith(term).pipe(
+          this.geoService.findCountiesStartingWith(term).pipe(
-            catchError(() => of([])),
+            catchError(() => of([])),
-            map(counties => counties.map(county => county.name)),
+            map(counties => counties.map(county => county.name)),
-            tap(() => (this.countyLoading = false)),
+            tap(() => (this.countyLoading = false)),
-          ),
+          ),
-        ),
+        ),
-      ),
+      ),
-    );
+    );
-  }
+  }
-
+
-  // Filter removal methods
+  // Filter removal methods
-  removeFilter(filterType: string): void {
+  removeFilter(filterType: string): void {
-    const updates: any = {};
+    const updates: any = {};
-
+
-    switch (filterType) {
+    switch (filterType) {
-      case 'state':
+      case 'state':
-        updates.state = null;
+        updates.state = null;
-        updates.city = null;
+        updates.city = null;
-        updates.radius = null;
+        updates.radius = null;
-        updates.searchType = 'exact';
+        updates.searchType = 'exact';
-        break;
+        break;
-      case 'city':
+      case 'city':
-        updates.city = null;
+        updates.city = null;
-        updates.radius = null;
+        updates.radius = null;
-        updates.searchType = 'exact';
+        updates.searchType = 'exact';
-        break;
+        break;
-      case 'types':
+      case 'types':
-        updates.types = [];
+        updates.types = [];
-        break;
+        break;
-      case 'brokerName':
+      case 'brokerName':
-        updates.brokerName = null;
+        updates.brokerName = null;
-        break;
+        break;
-      case 'companyName':
+      case 'companyName':
-        updates.companyName = null;
+        updates.companyName = null;
-        break;
+        break;
-      case 'counties':
+      case 'counties':
-        updates.counties = [];
+        updates.counties = [];
-        break;
+        break;
-    }
+    }
-
+
-    this.updateCriteria(updates);
+    this.updateCriteria(updates);
-  }
+  }
-
+
-  // Professional type handling
+  // Professional type handling
-  onCategoryChange(selectedCategories: string[]): void {
+  onCategoryChange(selectedCategories: string[]): void {
-    this.updateCriteria({ types: selectedCategories });
+    this.updateCriteria({ types: selectedCategories });
-  }
+  }
-
+
-  categoryClicked(checked: boolean, value: string): void {
+  categoryClicked(checked: boolean, value: string): void {
-    const types = [...(this.criteria.types || [])];
+    const types = [...(this.criteria.types || [])];
-    if (checked) {
+    if (checked) {
-      if (!types.includes(value)) {
+      if (!types.includes(value)) {
-        types.push(value);
+        types.push(value);
-      }
+      }
-    } else {
+    } else {
-      const index = types.indexOf(value);
+      const index = types.indexOf(value);
-      if (index > -1) {
+      if (index > -1) {
-        types.splice(index, 1);
+        types.splice(index, 1);
-      }
+      }
-    }
+    }
-    this.updateCriteria({ types });
+    this.updateCriteria({ types });
-  }
+  }
-
+
-  // Counties handling
+  // Counties handling
-  onCountiesChange(selectedCounties: string[]): void {
+  onCountiesChange(selectedCounties: string[]): void {
-    this.updateCriteria({ counties: selectedCounties });
+    this.updateCriteria({ counties: selectedCounties });
-  }
+  }
-
+
-  // Location handling
+  // Location handling
-  setState(state: string): void {
+  setState(state: string): void {
-    const updates: any = { state };
+    const updates: any = { state };
-    if (!state) {
+    if (!state) {
-      updates.city = null;
+      updates.city = null;
-      updates.radius = null;
+      updates.radius = null;
-      updates.searchType = 'exact';
+      updates.searchType = 'exact';
-    }
+    }
-    this.updateCriteria(updates);
+    this.updateCriteria(updates);
-  }
+  }
-
+
-  setCity(city: any): void {
+  setCity(city: any): void {
-    const updates: any = {};
+    const updates: any = {};
-    if (city) {
+    if (city) {
-      updates.city = city;
+      updates.city = city;
-      updates.state = city.state;
+      updates.state = city.state;
-      // Automatically set radius to 50 miles and enable radius search
+      // Automatically set radius to 50 miles and enable radius search
-      updates.searchType = 'radius';
+      updates.searchType = 'radius';
-      updates.radius = 50;
+      updates.radius = 50;
-    } else {
+    } else {
-      updates.city = null;
+      updates.city = null;
-      updates.radius = null;
+      updates.radius = null;
-      updates.searchType = 'exact';
+      updates.searchType = 'exact';
-    }
+    }
-    this.updateCriteria(updates);
+    this.updateCriteria(updates);
-  }
+  }
-
+
-  setRadius(radius: number): void {
+  setRadius(radius: number): void {
-    this.updateCriteria({ radius });
+    this.updateCriteria({ radius });
-  }
+  }
-
+
-  onCriteriaChange(): void {
+  onCriteriaChange(): void {
-    this.triggerSearch();
+    this.triggerSearch();
-  }
+  }
-
+
-  // Debounced search for text inputs
+  // Debounced search for text inputs
-  debouncedSearch(): void {
+  debouncedSearch(): void {
-    this.searchDebounce$.next();
+    this.searchDebounce$.next();
-  }
+  }
-
+
-  // Clear all filters
+  // Clear all filters
-  clearFilter(): void {
+  clearFilter(): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // In modal: Reset locally
+      // In modal: Reset locally
-      const defaultCriteria = this.getDefaultCriteria();
+      const defaultCriteria = this.getDefaultCriteria();
-      this.criteria = defaultCriteria;
+      this.criteria = defaultCriteria;
-      this.setTotalNumberOfResults();
+      this.setTotalNumberOfResults();
-    } else {
+    } else {
-      // Embedded: Use state service
+      // Embedded: Use state service
-      this.filterStateService.clearFilters('brokerListings');
+      this.filterStateService.clearFilters('brokerListings');
-    }
+    }
-  }
+  }
-
+
-  // Modal-specific methods
+  // Modal-specific methods
-  closeAndSearch(): void {
+  closeAndSearch(): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // Save changes to state
+      // Save changes to state
-      this.filterStateService.setCriteria('brokerListings', this.criteria);
+      this.filterStateService.setCriteria('brokerListings', this.criteria);
-      this.modalService.accept();
+      this.modalService.accept();
-      this.searchService.search('brokerListings');
+      this.searchService.search('brokerListings');
-    }
+    }
-  }
+  }
-
+
-  close(): void {
+  close(): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // Discard changes
+      // Discard changes
-      this.modalService.reject(this.backupCriteria);
+      this.modalService.reject(this.backupCriteria);
-    }
+    }
-  }
+  }
-
+
-  // Helper methods
+  // Helper methods
-  public updateCriteria(updates: any): void {
+  public updateCriteria(updates: any): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // In modal: Update locally only
+      // In modal: Update locally only
-      this.criteria = { ...this.criteria, ...updates };
+      this.criteria = { ...this.criteria, ...updates };
-      this.setTotalNumberOfResults();
+      this.setTotalNumberOfResults();
-    } else {
+    } else {
-      // Embedded: Update through state service
+      // Embedded: Update through state service
-      this.filterStateService.updateCriteria('brokerListings', updates);
+      this.filterStateService.updateCriteria('brokerListings', updates);
-    }
+    }
-
+
-    // Trigger search after update
+    // Trigger search after update
-    this.debouncedSearch();
+    this.debouncedSearch();
-  }
+  }
-
+
-  private triggerSearch(): void {
+  private triggerSearch(): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // In modal: Only update count
+      // In modal: Only update count
-      this.setTotalNumberOfResults();
+      this.setTotalNumberOfResults();
-      this.cancelDisable = true;
+      this.cancelDisable = true;
-    } else {
+    } else {
-      // Embedded: Full search
+      // Embedded: Full search
-      this.searchService.search('brokerListings');
+      this.searchService.search('brokerListings');
-    }
+    }
-  }
+  }
-
+
-  private setTotalNumberOfResults(): void {
+  private setTotalNumberOfResults(): void {
-    this.numberOfResults$ = this.userService.getNumberOfBroker(this.criteria);
+    this.numberOfResults$ = this.userService.getNumberOfBroker(this.criteria);
-  }
+  }
-
+
-  private getDefaultCriteria(): UserListingCriteria {
+  private getDefaultCriteria(): UserListingCriteria {
-    return {
+    return {
-      criteriaType: 'brokerListings',
+      criteriaType: 'brokerListings',
-      types: [],
+      types: [],
-      state: null,
+      state: null,
-      city: null,
+      city: null,
-      radius: null,
+      radius: null,
-      searchType: 'exact' as const,
+      searchType: 'exact' as const,
-      brokerName: null,
+      brokerName: null,
-      companyName: null,
+      companyName: null,
-      counties: [],
+      counties: [],
-      prompt: null,
+      prompt: null,
-      page: 1,
+      page: 1,
-      start: 0,
+      start: 0,
-      length: 12,
+      length: 12,
-    };
+    };
-  }
+  }
-
+
-  hasActiveFilters(): boolean {
+  hasActiveFilters(): boolean {
-    if (!this.criteria) return false;
+    if (!this.criteria) return false;
-
+
-    return !!(
+    return !!(
-      this.criteria.state ||
+      this.criteria.state ||
-      this.criteria.city ||
+      this.criteria.city ||
-      this.criteria.types?.length ||
+      this.criteria.types?.length ||
-      this.criteria.brokerName ||
+      this.criteria.brokerName ||
-      this.criteria.companyName ||
+      this.criteria.companyName ||
-      this.criteria.counties?.length
+      this.criteria.counties?.length
-    );
+    );
-  }
+  }
-
+
-  trackByFn(item: GeoResult): any {
+  trackByFn(item: GeoResult): any {
-    return item.id;
+    return item.id;
-  }
+  }
-
+
-  ngOnDestroy(): void {
+  ngOnDestroy(): void {
-    this.destroy$.next();
+    this.destroy$.next();
-    this.destroy$.complete();
+    this.destroy$.complete();
-  }
+  }
-}
+}

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

@@ -1,250 +1,250 @@
-<div
+<div
-  *ngIf="isModal && (modalService.modalVisible$ | async)?.visible && (modalService.modalVisible$ | async)?.type === 'commercialPropertyListings'"
+  *ngIf="isModal && (modalService.modalVisible$ | async)?.visible && (modalService.modalVisible$ | async)?.type === 'commercialPropertyListings'"
-  class="fixed inset-0 bg-neutral-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50"
+  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 w-full h-screen max-h-screen">
-    <div class="relative bg-white rounded-lg shadow h-full">
+    <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">
+      <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>
+        <h3 class="text-xl font-semibold text-white p-2 rounded">Commercial Property Listing Search</h3>
-        <button (click)="closeAndSearch()" type="button" class="text-white bg-transparent hover:bg-gray-200 hover:text-neutral-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center">
+        <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">
+          <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" />
+            <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>
+          </svg>
-          <span class="sr-only">Close Modal</span>
+          <span class="sr-only">Close Modal</span>
-        </button>
+        </button>
-      </div>
+      </div>
-      <div class="p-6 space-y-6">
+      <div class="p-6 space-y-6">
-        <div class="flex space-x-4 mb-4">
+        <div class="flex space-x-4 mb-4">
-          <button class="text-primary-600 font-medium border-b-2 border-primary-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
+          <button class="text-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>
+          <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
-          <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
+          <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
+            Clear all Filter
-            <div class="tooltip-arrow" data-popper-arrow></div>
+            <div class="tooltip-arrow" data-popper-arrow></div>
-          </div>
+          </div>
-        </div>
+        </div>
-        <!-- Display active filters as tags -->
+        <!-- Display active filters as tags -->
-        <div class="flex flex-wrap gap-2 mb-4" *ngIf="hasActiveFilters()">
+        <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">
+          <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>
+            State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Title: {{ criteria.title }} <button (click)="removeFilter('title')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-          </span>
+          </span>
-        </div>
+        </div>
-        @if(criteria.criteriaType==='commercialPropertyListings') {
+        @if(criteria.criteriaType==='commercialPropertyListings') {
-        <div class="grid grid-cols-1 gap-6">
+        <div class="grid grid-cols-1 gap-6">
-          <div class="space-y-4">
+          <div class="space-y-4">
-            <div>
+            <div>
-              <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
+              <label for="state" class="block mb-2 text-sm font-medium text-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>
+              <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
-            </div>
+            </div>
-            <div>
+            <div>
-              <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
+              <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
-            </div>
+            </div>
-            <div *ngIf="criteria.city">
+            <div *ngIf="criteria.city">
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
+              <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
-              <div class="flex items-center space-x-4">
+              <div class="flex items-center space-x-4">
-                <label class="inline-flex items-center">
+                <label class="inline-flex items-center">
-                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
+                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
-                  <span class="ml-2">Exact City</span>
+                  <span class="ml-2">Exact City</span>
-                </label>
+                </label>
-                <label class="inline-flex items-center">
+                <label class="inline-flex items-center">
-                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
+                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
-                  <span class="ml-2">Radius Search</span>
+                  <span class="ml-2">Radius Search</span>
-                </label>
+                </label>
-              </div>
+              </div>
-            </div>
+            </div>
-            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
+            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
+              <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
-              <div class="flex flex-wrap">
+              <div class="flex flex-wrap">
-                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
+                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
-                <button
+                <button
-                  type="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"
+                  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'"
+                  [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-neutral-900 bg-white'"
-                  (click)="setRadius(radius)"
+                  (click)="setRadius(radius)"
-                >
+                >
-                  {{ radius }}
+                  {{ radius }}
-                </button>
+                </button>
-                }
+                }
-              </div>
+              </div>
-            </div>
+            </div>
-            <div>
+            <div>
-              <label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
+              <label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
-              <div class="flex items-center space-x-2">
+              <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-gray-50 text-sm !mt-0 p-2.5">
-                </app-validated-price>
+                </app-validated-price>
-                <span>-</span>
+                <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-gray-50 text-sm !mt-0 p-2.5">
-                </app-validated-price>
+                </app-validated-price>
-              </div>
+              </div>
-            </div>
+            </div>
-            <div>
+            <div>
-              <label for="title" class="block mb-2 text-sm font-medium text-neutral-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
+              <input
-                type="text"
+                type="text"
-                id="title"
+                id="title"
-                [ngModel]="criteria.title"
+                [ngModel]="criteria.title"
-                (ngModelChange)="updateCriteria({ title: $event })"
+                (ngModelChange)="updateCriteria({ title: $event })"
-                class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
+                class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
-                placeholder="e.g. Office Space"
+                placeholder="e.g. Office Space"
-              />
+              />
-            </div>
+            </div>
-            <div>
+            <div>
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
+              <label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
-              <ng-select
+              <ng-select
-                class="custom"
+                class="custom"
-                [items]="selectOptions.typesOfCommercialProperty"
+                [items]="selectOptions.typesOfCommercialProperty"
-                bindLabel="name"
+                bindLabel="name"
-                bindValue="value"
+                bindValue="value"
-                [ngModel]="criteria.types"
+                [ngModel]="criteria.types"
-                (ngModelChange)="onCategoryChange($event)"
+                (ngModelChange)="onCategoryChange($event)"
-                [multiple]="true"
+                [multiple]="true"
-                [closeOnSelect]="true"
+                [closeOnSelect]="true"
-                placeholder="Select categories"
+                placeholder="Select categories"
-              ></ng-select>
+              ></ng-select>
-            </div>
+            </div>
-            <div>
+            <div>
-              <label for="brokername" class="block mb-2 text-sm font-medium text-neutral-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
+              <input
-                type="text"
+                type="text"
-                id="brokername"
+                id="brokername"
-                [ngModel]="criteria.brokerName"
+                [ngModel]="criteria.brokerName"
-                (ngModelChange)="updateCriteria({ brokerName: $event })"
+                (ngModelChange)="updateCriteria({ brokerName: $event })"
-                class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
+                class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
-                placeholder="e.g. Brokers Invest"
+                placeholder="e.g. Brokers Invest"
-              />
+              />
-            </div>
+            </div>
-          </div>
+          </div>
-        </div>
+        </div>
-        }
+        }
-      </div>
+      </div>
-    </div>
+    </div>
-  </div>
+  </div>
-</div>
+</div>
-<div *ngIf="!isModal" class="space-y-6 pb-10">
+<div *ngIf="!isModal" class="space-y-6 pb-10">
-  <div class="flex space-x-4 mb-4">
+  <div class="flex space-x-4 mb-4">
-    <h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
+    <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>
+    <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
-    <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
+    <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
+      Clear all Filter
-      <div class="tooltip-arrow" data-popper-arrow></div>
+      <div class="tooltip-arrow" data-popper-arrow></div>
-    </div>
+    </div>
-  </div>
+  </div>
-  <!-- Display active filters as tags -->
+  <!-- Display active filters as tags -->
-  <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
+  <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">
+    <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>
+      State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-    </span>
+    </span>
-    <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">
+    <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>
+      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-    </span>
+    </span>
-    <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">
+    <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>
+      Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-    </span>
+    </span>
-    <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">
+    <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>
+      Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-    </span>
+    </span>
-    <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">
+    <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>
+      Title: {{ criteria.title }} <button (click)="removeFilter('title')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-    </span>
+    </span>
-    <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">
+    <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>
+      Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]" aria-label="Remove filter">×</button>
-    </span>
+    </span>
-  </div>
+  </div>
-  @if(criteria.criteriaType==='commercialPropertyListings') {
+  @if(criteria.criteriaType==='commercialPropertyListings') {
-  <div class="space-y-4">
+  <div class="space-y-4">
-    <div>
+    <div>
-      <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
+      <label for="state" class="block mb-2 text-sm font-medium text-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>
+      <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
-    </div>
+    </div>
-    <div>
+    <div>
-      <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
+      <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
-    </div>
+    </div>
-    <div *ngIf="criteria.city">
+    <div *ngIf="criteria.city">
-      <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
+      <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
-      <div class="flex items-center space-x-4">
+      <div class="flex items-center space-x-4">
-        <label class="inline-flex items-center">
+        <label class="inline-flex items-center">
-          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
+          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
-          <span class="ml-2">Exact City</span>
+          <span class="ml-2">Exact City</span>
-        </label>
+        </label>
-        <label class="inline-flex items-center">
+        <label class="inline-flex items-center">
-          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
+          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
-          <span class="ml-2">Radius Search</span>
+          <span class="ml-2">Radius Search</span>
-        </label>
+        </label>
-      </div>
+      </div>
-    </div>
+    </div>
-    <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
+    <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
-      <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
+      <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
-      <div class="flex flex-wrap">
+      <div class="flex flex-wrap">
-        @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
+        @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
-        <button
+        <button
-          type="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"
+          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'"
+          [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-neutral-900 bg-white'"
-          (click)="setRadius(radius)"
+          (click)="setRadius(radius)"
-        >
+        >
-          {{ radius }}
+          {{ radius }}
-        </button>
+        </button>
-        }
+        }
-      </div>
+      </div>
-    </div>
+    </div>
-    <div>
+    <div>
-      <label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
+      <label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
-      <ng-select
+      <ng-select
-        class="custom"
+        class="custom"
-        [items]="selectOptions.typesOfCommercialProperty"
+        [items]="selectOptions.typesOfCommercialProperty"
-        bindLabel="name"
+        bindLabel="name"
-        bindValue="value"
+        bindValue="value"
-        [ngModel]="criteria.types"
+        [ngModel]="criteria.types"
-        (ngModelChange)="onCategoryChange($event)"
+        (ngModelChange)="onCategoryChange($event)"
-        [multiple]="true"
+        [multiple]="true"
-        [closeOnSelect]="true"
+        [closeOnSelect]="true"
-        placeholder="Select categories"
+        placeholder="Select categories"
-      ></ng-select>
+      ></ng-select>
-    </div>
+    </div>
-    <div>
+    <div>
-      <label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
+      <label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
-      <div class="flex items-center space-x-2">
+      <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-gray-50 text-sm !mt-0 p-2.5"> </app-validated-price>
-        <span>-</span>
+        <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-gray-50 text-sm !mt-0 p-2.5"> </app-validated-price>
-      </div>
+      </div>
-    </div>
+    </div>
-    <div>
+    <div>
-      <label for="title" class="block mb-2 text-sm font-medium text-neutral-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
+      <input
-        type="text"
+        type="text"
-        id="title"
+        id="title"
-        [ngModel]="criteria.title"
+        [ngModel]="criteria.title"
-        (ngModelChange)="updateCriteria({ title: $event })"
+        (ngModelChange)="updateCriteria({ title: $event })"
-        class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
+        class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
-        placeholder="e.g. Office Space"
+        placeholder="e.g. Office Space"
-      />
+      />
-    </div>
+    </div>
-    <div>
+    <div>
-      <label for="brokername-embedded" class="block mb-2 text-sm font-medium text-neutral-900">Broker Name / Company Name</label>
+      <label for="brokername-embedded" class="block mb-2 text-sm font-medium text-neutral-900">Broker Name / Company Name</label>
-      <input
+      <input
-        type="text"
+        type="text"
-        id="brokername-embedded"
+        id="brokername-embedded"
-        [ngModel]="criteria.brokerName"
+        [ngModel]="criteria.brokerName"
-        (ngModelChange)="updateCriteria({ brokerName: $event })"
+        (ngModelChange)="updateCriteria({ brokerName: $event })"
-        class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
+        class="bg-gray-50 border border-gray-300 text-sm rounded-lg block w-full p-2.5"
-        placeholder="e.g. Brokers Invest"
+        placeholder="e.g. Brokers Invest"
-      />
+      />
-    </div>
+    </div>
-  </div>
+  </div>
-  }
+  }
-</div>
+</div>

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

@@ -1,316 +1,316 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
-import { NgSelectModule } from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { catchError, concat, debounceTime, distinctUntilChanged, map, Observable, of, Subject, switchMap, takeUntil, tap } from 'rxjs';
+import { catchError, concat, debounceTime, distinctUntilChanged, map, Observable, of, Subject, switchMap, takeUntil, tap } from 'rxjs';
-import { CommercialPropertyListingCriteria, CountyResult, GeoResult } from '../../../../../bizmatch-server/src/models/main.model';
+import { CommercialPropertyListingCriteria, CountyResult, GeoResult } from '../../../../../bizmatch-server/src/models/main.model';
-import { FilterStateService } from '../../services/filter-state.service';
+import { FilterStateService } from '../../services/filter-state.service';
-import { GeoService } from '../../services/geo.service';
+import { GeoService } from '../../services/geo.service';
-import { ListingsService } from '../../services/listings.service';
+import { ListingsService } from '../../services/listings.service';
-import { SearchService } from '../../services/search.service';
+import { SearchService } from '../../services/search.service';
-import { SelectOptionsService } from '../../services/select-options.service';
+import { SelectOptionsService } from '../../services/select-options.service';
-import { ValidatedCityComponent } from '../validated-city/validated-city.component';
+import { ValidatedCityComponent } from '../validated-city/validated-city.component';
-import { ValidatedPriceComponent } from '../validated-price/validated-price.component';
+import { ValidatedPriceComponent } from '../validated-price/validated-price.component';
-import { ModalService } from './modal.service';
+import { ModalService } from './modal.service';
-
+
-@UntilDestroy()
+@UntilDestroy()
-@Component({
+@Component({
-  selector: 'app-search-modal-commercial',
+  selector: 'app-search-modal-commercial',
-  standalone: true,
+  standalone: true,
-  imports: [CommonModule, FormsModule, NgSelectModule, ValidatedCityComponent, ValidatedPriceComponent],
+  imports: [CommonModule, FormsModule, NgSelectModule, ValidatedCityComponent, ValidatedPriceComponent],
-  templateUrl: './search-modal-commercial.component.html',
+  templateUrl: './search-modal-commercial.component.html',
-  styleUrls: ['./search-modal.component.scss'],
+  styleUrls: ['./search-modal.component.scss'],
-})
+})
-export class SearchModalCommercialComponent implements OnInit, OnDestroy {
+export class SearchModalCommercialComponent implements OnInit, OnDestroy {
-  @Input() isModal: boolean = true;
+  @Input() isModal: boolean = true;
-
+
-  private destroy$ = new Subject<void>();
+  private destroy$ = new Subject<void>();
-  private searchDebounce$ = new Subject<void>();
+  private searchDebounce$ = new Subject<void>();
-
+
-  // State
+  // State
-  criteria: CommercialPropertyListingCriteria;
+  criteria: CommercialPropertyListingCriteria;
-  backupCriteria: any;
+  backupCriteria: any;
-
+
-  // Geo search
+  // Geo search
-  counties$: Observable<CountyResult[]>;
+  counties$: Observable<CountyResult[]>;
-  countyLoading = false;
+  countyLoading = false;
-  countyInput$ = new Subject<string>();
+  countyInput$ = new Subject<string>();
-
+
-  // Results count
+  // Results count
-  numberOfResults$: Observable<number>;
+  numberOfResults$: Observable<number>;
-  cancelDisable = false;
+  cancelDisable = false;
-
+
-  constructor(
+  constructor(
-    public selectOptions: SelectOptionsService,
+    public selectOptions: SelectOptionsService,
-    public modalService: ModalService,
+    public modalService: ModalService,
-    private geoService: GeoService,
+    private geoService: GeoService,
-    private filterStateService: FilterStateService,
+    private filterStateService: FilterStateService,
-    private listingService: ListingsService,
+    private listingService: ListingsService,
-    private searchService: SearchService,
+    private searchService: SearchService,
-  ) { }
+  ) { }
-
+
-  ngOnInit(): void {
+  ngOnInit(): void {
-    // Load counties
+    // Load counties
-    this.loadCounties();
+    this.loadCounties();
-
+
-    if (this.isModal) {
+    if (this.isModal) {
-      // Modal mode: Wait for messages from ModalService
+      // Modal mode: Wait for messages from ModalService
-      this.modalService.message$.pipe(untilDestroyed(this)).subscribe(criteria => {
+      this.modalService.message$.pipe(untilDestroyed(this)).subscribe(criteria => {
-        if (criteria?.criteriaType === 'commercialPropertyListings') {
+        if (criteria?.criteriaType === 'commercialPropertyListings') {
-          this.initializeWithCriteria(criteria);
+          this.initializeWithCriteria(criteria);
-        }
+        }
-      });
+      });
-
+
-      this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
+      this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
-        if (val.visible && val.type === 'commercialPropertyListings') {
+        if (val.visible && val.type === 'commercialPropertyListings') {
-          // Reset pagination when modal opens
+          // Reset pagination when modal opens
-          if (this.criteria) {
+          if (this.criteria) {
-            this.criteria.page = 1;
+            this.criteria.page = 1;
-            this.criteria.start = 0;
+            this.criteria.start = 0;
-          }
+          }
-        }
+        }
-      });
+      });
-    } else {
+    } else {
-      // Embedded mode: Subscribe to state changes
+      // Embedded mode: Subscribe to state changes
-      this.subscribeToStateChanges();
+      this.subscribeToStateChanges();
-    }
+    }
-
+
-    // Setup debounced search
+    // Setup debounced search
-    this.searchDebounce$.pipe(debounceTime(400), takeUntil(this.destroy$)).subscribe(() => {
+    this.searchDebounce$.pipe(debounceTime(400), takeUntil(this.destroy$)).subscribe(() => {
-      this.triggerSearch();
+      this.triggerSearch();
-    });
+    });
-  }
+  }
-
+
-  private initializeWithCriteria(criteria: CommercialPropertyListingCriteria): void {
+  private initializeWithCriteria(criteria: CommercialPropertyListingCriteria): void {
-    this.criteria = criteria;
+    this.criteria = criteria;
-    this.backupCriteria = JSON.parse(JSON.stringify(criteria));
+    this.backupCriteria = JSON.parse(JSON.stringify(criteria));
-    this.setTotalNumberOfResults();
+    this.setTotalNumberOfResults();
-  }
+  }
-
+
-  private subscribeToStateChanges(): void {
+  private subscribeToStateChanges(): void {
-    if (!this.isModal) {
+    if (!this.isModal) {
-      this.filterStateService
+      this.filterStateService
-        .getState$('commercialPropertyListings')
+        .getState$('commercialPropertyListings')
-        .pipe(takeUntil(this.destroy$))
+        .pipe(takeUntil(this.destroy$))
-        .subscribe(state => {
+        .subscribe(state => {
-          this.criteria = { ...state.criteria };
+          this.criteria = { ...state.criteria };
-          this.setTotalNumberOfResults();
+          this.setTotalNumberOfResults();
-        });
+        });
-    }
+    }
-  }
+  }
-
+
-  private loadCounties(): void {
+  private loadCounties(): void {
-    this.counties$ = concat(
+    this.counties$ = concat(
-      of([]), // default items
+      of([]), // default items
-      this.countyInput$.pipe(
+      this.countyInput$.pipe(
-        distinctUntilChanged(),
+        distinctUntilChanged(),
-        tap(() => (this.countyLoading = true)),
+        tap(() => (this.countyLoading = true)),
-        switchMap(term =>
+        switchMap(term =>
-          this.geoService.findCountiesStartingWith(term).pipe(
+          this.geoService.findCountiesStartingWith(term).pipe(
-            catchError(() => of([])),
+            catchError(() => of([])),
-            map(counties => counties.map(county => county.name)),
+            map(counties => counties.map(county => county.name)),
-            tap(() => (this.countyLoading = false)),
+            tap(() => (this.countyLoading = false)),
-          ),
+          ),
-        ),
+        ),
-      ),
+      ),
-    );
+    );
-  }
+  }
-
+
-  // Filter removal methods
+  // Filter removal methods
-  removeFilter(filterType: string): void {
+  removeFilter(filterType: string): void {
-    const updates: any = {};
+    const updates: any = {};
-
+
-    switch (filterType) {
+    switch (filterType) {
-      case 'state':
+      case 'state':
-        updates.state = null;
+        updates.state = null;
-        updates.city = null;
+        updates.city = null;
-        updates.radius = null;
+        updates.radius = null;
-        updates.searchType = 'exact';
+        updates.searchType = 'exact';
-        break;
+        break;
-      case 'city':
+      case 'city':
-        updates.city = null;
+        updates.city = null;
-        updates.radius = null;
+        updates.radius = null;
-        updates.searchType = 'exact';
+        updates.searchType = 'exact';
-        break;
+        break;
-      case 'price':
+      case 'price':
-        updates.minPrice = null;
+        updates.minPrice = null;
-        updates.maxPrice = null;
+        updates.maxPrice = null;
-        break;
+        break;
-      case 'types':
+      case 'types':
-        updates.types = [];
+        updates.types = [];
-        break;
+        break;
-      case 'title':
+      case 'title':
-        updates.title = null;
+        updates.title = null;
-        break;
+        break;
-      case 'brokerName':
+      case 'brokerName':
-        updates.brokerName = null;
+        updates.brokerName = null;
-        break;
+        break;
-    }
+    }
-
+
-    this.updateCriteria(updates);
+    this.updateCriteria(updates);
-  }
+  }
-
+
-  // Category handling
+  // Category handling
-  onCategoryChange(selectedCategories: string[]): void {
+  onCategoryChange(selectedCategories: string[]): void {
-    this.updateCriteria({ types: selectedCategories });
+    this.updateCriteria({ types: selectedCategories });
-  }
+  }
-
+
-  categoryClicked(checked: boolean, value: string): void {
+  categoryClicked(checked: boolean, value: string): void {
-    const types = [...(this.criteria.types || [])];
+    const types = [...(this.criteria.types || [])];
-    if (checked) {
+    if (checked) {
-      if (!types.includes(value)) {
+      if (!types.includes(value)) {
-        types.push(value);
+        types.push(value);
-      }
+      }
-    } else {
+    } else {
-      const index = types.indexOf(value);
+      const index = types.indexOf(value);
-      if (index > -1) {
+      if (index > -1) {
-        types.splice(index, 1);
+        types.splice(index, 1);
-      }
+      }
-    }
+    }
-    this.updateCriteria({ types });
+    this.updateCriteria({ types });
-  }
+  }
-
+
-  // Location handling
+  // Location handling
-  setState(state: string): void {
+  setState(state: string): void {
-    const updates: any = { state };
+    const updates: any = { state };
-    if (!state) {
+    if (!state) {
-      updates.city = null;
+      updates.city = null;
-      updates.radius = null;
+      updates.radius = null;
-      updates.searchType = 'exact';
+      updates.searchType = 'exact';
-    }
+    }
-    this.updateCriteria(updates);
+    this.updateCriteria(updates);
-  }
+  }
-
+
-  setCity(city: any): void {
+  setCity(city: any): void {
-    const updates: any = {};
+    const updates: any = {};
-    if (city) {
+    if (city) {
-      updates.city = city;
+      updates.city = city;
-      updates.state = city.state;
+      updates.state = city.state;
-      // Automatically set radius to 50 miles and enable radius search
+      // Automatically set radius to 50 miles and enable radius search
-      updates.searchType = 'radius';
+      updates.searchType = 'radius';
-      updates.radius = 50;
+      updates.radius = 50;
-    } else {
+    } else {
-      updates.city = null;
+      updates.city = null;
-      updates.radius = null;
+      updates.radius = null;
-      updates.searchType = 'exact';
+      updates.searchType = 'exact';
-    }
+    }
-    this.updateCriteria(updates);
+    this.updateCriteria(updates);
-  }
+  }
-
+
-  setRadius(radius: number): void {
+  setRadius(radius: number): void {
-    this.updateCriteria({ radius });
+    this.updateCriteria({ radius });
-  }
+  }
-
+
-  onCriteriaChange(): void {
+  onCriteriaChange(): void {
-    this.triggerSearch();
+    this.triggerSearch();
-  }
+  }
-
+
-  // Debounced search for text inputs
+  // Debounced search for text inputs
-  debouncedSearch(): void {
+  debouncedSearch(): void {
-    this.searchDebounce$.next();
+    this.searchDebounce$.next();
-  }
+  }
-
+
-  // Clear all filters
+  // Clear all filters
-  clearFilter(): void {
+  clearFilter(): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // In modal: Reset locally
+      // In modal: Reset locally
-      const defaultCriteria = this.getDefaultCriteria();
+      const defaultCriteria = this.getDefaultCriteria();
-      this.criteria = defaultCriteria;
+      this.criteria = defaultCriteria;
-      this.setTotalNumberOfResults();
+      this.setTotalNumberOfResults();
-    } else {
+    } else {
-      // Embedded: Use state service
+      // Embedded: Use state service
-      this.filterStateService.clearFilters('commercialPropertyListings');
+      this.filterStateService.clearFilters('commercialPropertyListings');
-    }
+    }
-  }
+  }
-
+
-  // Modal-specific methods
+  // Modal-specific methods
-  closeAndSearch(): void {
+  closeAndSearch(): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // Save changes to state
+      // Save changes to state
-      this.filterStateService.setCriteria('commercialPropertyListings', this.criteria);
+      this.filterStateService.setCriteria('commercialPropertyListings', this.criteria);
-      this.modalService.accept();
+      this.modalService.accept();
-      this.searchService.search('commercialPropertyListings');
+      this.searchService.search('commercialPropertyListings');
-    }
+    }
-  }
+  }
-
+
-  close(): void {
+  close(): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // Discard changes
+      // Discard changes
-      this.modalService.reject(this.backupCriteria);
+      this.modalService.reject(this.backupCriteria);
-    }
+    }
-  }
+  }
-
+
-  // Helper methods
+  // Helper methods
-  public updateCriteria(updates: any): void {
+  public updateCriteria(updates: any): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // In modal: Update locally only
+      // In modal: Update locally only
-      this.criteria = { ...this.criteria, ...updates };
+      this.criteria = { ...this.criteria, ...updates };
-      this.setTotalNumberOfResults();
+      this.setTotalNumberOfResults();
-    } else {
+    } else {
-      // Embedded: Update through state service
+      // Embedded: Update through state service
-      this.filterStateService.updateCriteria('commercialPropertyListings', updates);
+      this.filterStateService.updateCriteria('commercialPropertyListings', updates);
-    }
+    }
-
+
-    // Trigger search after update
+    // Trigger search after update
-    this.debouncedSearch();
+    this.debouncedSearch();
-  }
+  }
-
+
-  private triggerSearch(): void {
+  private triggerSearch(): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // In modal: Only update count
+      // In modal: Only update count
-      this.setTotalNumberOfResults();
+      this.setTotalNumberOfResults();
-      this.cancelDisable = true;
+      this.cancelDisable = true;
-    } else {
+    } else {
-      // Embedded: Full search
+      // Embedded: Full search
-      this.searchService.search('commercialPropertyListings');
+      this.searchService.search('commercialPropertyListings');
-    }
+    }
-  }
+  }
-
+
-  private setTotalNumberOfResults(): void {
+  private setTotalNumberOfResults(): void {
-    this.numberOfResults$ = this.listingService.getNumberOfListings('commercialProperty', this.criteria);
+    this.numberOfResults$ = this.listingService.getNumberOfListings('commercialProperty', this.criteria);
-  }
+  }
-
+
-  private getDefaultCriteria(): CommercialPropertyListingCriteria {
+  private getDefaultCriteria(): CommercialPropertyListingCriteria {
-    // Access the private method through a workaround or create it here
+    // Access the private method through a workaround or create it here
-    return {
+    return {
-      criteriaType: 'commercialPropertyListings',
+      criteriaType: 'commercialPropertyListings',
-      types: [],
+      types: [],
-      state: null,
+      state: null,
-      city: null,
+      city: null,
-      radius: null,
+      radius: null,
-      searchType: 'exact' as const,
+      searchType: 'exact' as const,
-      minPrice: null,
+      minPrice: null,
-      maxPrice: null,
+      maxPrice: null,
-      title: null,
+      title: null,
-      brokerName: null,
+      brokerName: null,
-      prompt: null,
+      prompt: null,
-      page: 1,
+      page: 1,
-      start: 0,
+      start: 0,
-      length: 12,
+      length: 12,
-    };
+    };
-  }
+  }
-
+
-  hasActiveFilters(): boolean {
+  hasActiveFilters(): boolean {
-    if (!this.criteria) return false;
+    if (!this.criteria) return false;
-
+
-    return !!(
+    return !!(
-      this.criteria.state ||
+      this.criteria.state ||
-      this.criteria.city ||
+      this.criteria.city ||
-      this.criteria.minPrice ||
+      this.criteria.minPrice ||
-      this.criteria.maxPrice ||
+      this.criteria.maxPrice ||
-      this.criteria.types?.length ||
+      this.criteria.types?.length ||
-      this.criteria.title ||
+      this.criteria.title ||
-      this.criteria.brokerName
+      this.criteria.brokerName
-    );
+    );
-  }
+  }
-
+
-  trackByFn(item: GeoResult): any {
+  trackByFn(item: GeoResult): any {
-    return item.id;
+    return item.id;
-  }
+  }
-
+
-  ngOnDestroy(): void {
+  ngOnDestroy(): void {
-    this.destroy$.next();
+    this.destroy$.next();
-    this.destroy$.complete();
+    this.destroy$.complete();
-  }
+  }
-}
+}

bizmatch/src/app/components/search-modal/search-modal.component.html

@@ -1,415 +1,417 @@
-<div
+<div
-  *ngIf="isModal && (modalService.modalVisible$ | async)?.visible && (modalService.modalVisible$ | async)?.type === 'businessListings'"
+  *ngIf="isModal && (modalService.modalVisible$ | async)?.visible && (modalService.modalVisible$ | async)?.type === 'businessListings'"
-  class="fixed inset-0 bg-neutral-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 w-full max-h-full">
-    <div class="relative bg-white rounded-lg shadow">
+    <div class="relative bg-white rounded-lg shadow">
-      <div class="flex items-start justify-between p-4 border-b rounded-t bg-primary-600">
+      <div class="flex items-start justify-between p-4 border-b rounded-t bg-primary-600">
-        <h3 class="text-xl font-semibold text-white p-2 rounded">Business Listing Search</h3>
+        <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-neutral-200 hover:text-neutral-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">
+          <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" />
+            <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>
+          </svg>
-          <span class="sr-only">Close Modal</span>
+          <span class="sr-only">Close Modal</span>
-        </button>
+        </button>
-      </div>
+      </div>
-      <div class="p-6 space-y-6">
+      <div class="p-6 space-y-6">
-        <div class="flex space-x-4 mb-4">
+        <div class="flex space-x-4 mb-4">
-          <button class="text-primary-600 font-medium border-b-2 border-primary-600 pb-2">Filter ({{ numberOfResults$ | async }})</button>
+          <button class="text-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>
+          <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
-          <div id="tooltip-light" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-neutral-900 bg-white border border-neutral-200 rounded-lg shadow-sm opacity-0 tooltip">
+          <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
+            Clear all Filter
-            <div class="tooltip-arrow" data-popper-arrow></div>
+            <div class="tooltip-arrow" data-popper-arrow></div>
-          </div>
+          </div>
-        </div>
+        </div>
-        <!-- Display active filters as tags -->
+        <!-- Display active filters as tags -->
-        <div class="flex flex-wrap gap-2 mb-4" *ngIf="hasActiveFilters()">
+        <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">
+          <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>
+            State: {{ criteria.state }} <button (click)="removeFilter('state')" aria-label="Remove state filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            City: {{ criteria.city.name }} <button (click)="removeFilter('city')" aria-label="Remove city filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" aria-label="Remove price filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" aria-label="Remove revenue filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" aria-label="Remove cashflow filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Title: {{ criteria.title }} <button (click)="removeFilter('title')" aria-label="Remove title filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" aria-label="Remove categories filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-          </span>
+          </span>
-          <span *ngIf="selectedPropertyType" class="bg-neutral-200 text-neutral-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>
+            Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" aria-label="Remove property type filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" aria-label="Remove employees filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Established: {{ criteria.establishedMin || 'Any' }} <button (click)="removeFilter('established')" aria-label="Remove established filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-          </span>
+          </span>
-          <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">
+          <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>
+            Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" aria-label="Remove broker filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-          </span>
+          </span>
-        </div>
+        </div>
-        <div class="grid grid-cols-1 gap-6">
+        <div class="grid grid-cols-1 gap-6">
-          <div class="space-y-4">
+          <div class="space-y-4">
-            <div>
+            <div>
-              <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
+              <label for="state-select" 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>
+              <ng-select id="state-select" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state" aria-label="Location - State"></ng-select>
-            </div>
+            </div>
-            <div>
+            <div>
-              <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
+              <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
-            </div>
+            </div>
-            <div *ngIf="criteria.city">
+            <div *ngIf="criteria.city">
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
+              <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
-              <div class="flex items-center space-x-4">
+              <div class="flex items-center space-x-4">
-                <label class="inline-flex items-center">
+                <label class="inline-flex items-center">
-                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
+                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
-                  <span class="ml-2">Exact City</span>
+                  <span class="ml-2">Exact City</span>
-                </label>
+                </label>
-                <label class="inline-flex items-center">
+                <label class="inline-flex items-center">
-                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
+                  <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
-                  <span class="ml-2">Radius Search</span>
+                  <span class="ml-2">Radius Search</span>
-                </label>
+                </label>
-              </div>
+              </div>
-            </div>
+            </div>
-            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
+            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
+              <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
-              <div class="flex flex-wrap">
+              <div class="flex flex-wrap">
-                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
+                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
-                <button
+                <button
-                  type="button"
+                  type="button"
-                  class="px-3 py-2 text-xs font-medium text-center border border-neutral-200 hover:bg-neutral-500 hover:text-white"
+                  class="px-3 py-2 text-xs font-medium text-center border border-neutral-200 hover:bg-neutral-500 hover:text-white"
-                  [ngClass]="criteria.radius === radius ? 'text-white bg-neutral-500' : 'text-neutral-900 bg-white'"
+                  [ngClass]="criteria.radius === radius ? 'text-white bg-neutral-500' : 'text-neutral-900 bg-white'"
-                  (click)="setRadius(radius)"
+                  (click)="setRadius(radius)"
-                >
+                >
-                  {{ radius }}
+                  {{ radius }}
-                </button>
+                </button>
-                }
+                }
-              </div>
+              </div>
-            </div>
+            </div>
-            <div>
+            <div>
-              <label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
+              <label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
-              <div class="flex items-center space-x-2">
+              <div class="flex items-center space-x-2">
-                <app-validated-price name="price-from" [ngModel]="criteria.minPrice" (ngModelChange)="updateCriteria({ minPrice: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
+                <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>
+                </app-validated-price>
-                <span>-</span>
+                <span>-</span>
-                <app-validated-price name="price-to" [ngModel]="criteria.maxPrice" (ngModelChange)="updateCriteria({ maxPrice: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
+                <app-validated-price name="price-to" [ngModel]="criteria.maxPrice" (ngModelChange)="updateCriteria({ maxPrice: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
-                </app-validated-price>
+                </app-validated-price>
-              </div>
+              </div>
-            </div>
+            </div>
-            <div>
+            <div>
-              <label for="salesRevenue" class="block mb-2 text-sm font-medium text-neutral-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">
+              <div class="flex items-center space-x-2">
-                <app-validated-price name="salesRevenue-from" [ngModel]="criteria.minRevenue" (ngModelChange)="updateCriteria({ minRevenue: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
+                <app-validated-price 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>
+                </app-validated-price>
-                <span>-</span>
+                <span>-</span>
-                <app-validated-price name="salesRevenue-to" [ngModel]="criteria.maxRevenue" (ngModelChange)="updateCriteria({ maxRevenue: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p.2.5">
+                <app-validated-price 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>
+                </app-validated-price>
-              </div>
+              </div>
-            </div>
+            </div>
-            <div>
+            <div>
-              <label for="cashflow" class="block mb-2 text-sm font-medium text-neutral-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">
+              <div class="flex items-center space-x-2">
-                <app-validated-price name="cashflow-from" [ngModel]="criteria.minCashFlow" (ngModelChange)="updateCriteria({ minCashFlow: $event })" placeholder="From" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
+                <app-validated-price 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>
+                </app-validated-price>
-                <span>-</span>
+                <span>-</span>
-                <app-validated-price name="cashflow-to" [ngModel]="criteria.maxCashFlow" (ngModelChange)="updateCriteria({ maxCashFlow: $event })" placeholder="To" inputClasses="bg-neutral-50 text-sm !mt-0 p-2.5">
+                <app-validated-price 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>
+                </app-validated-price>
-              </div>
+              </div>
-            </div>
+            </div>
-            <div>
+            <div>
-              <label for="title" class="block mb-2 text-sm font-medium text-neutral-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
+              <input
-                type="text"
+                type="text"
-                id="title"
+                id="title"
-                [ngModel]="criteria.title"
+                [ngModel]="criteria.title"
-                (ngModelChange)="updateCriteria({ title: $event })"
+                (ngModelChange)="updateCriteria({ title: $event })"
-                class="bg-neutral-50 border border-neutral-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"
+                placeholder="e.g. Restaurant"
-              />
+              />
-            </div>
+            </div>
-            <div>
+            <div>
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
+              <label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
-              <ng-select
+              <ng-select
-                class="custom"
+                class="custom"
-                [items]="selectOptions.typesOfBusiness"
+                [items]="selectOptions.typesOfBusiness"
-                bindLabel="name"
+                bindLabel="name"
-                bindValue="value"
+                bindValue="value"
-                [ngModel]="criteria.types"
+                [ngModel]="criteria.types"
-                (ngModelChange)="onCategoryChange($event)"
+                (ngModelChange)="onCategoryChange($event)"
-                [multiple]="true"
+                [multiple]="true"
-                [closeOnSelect]="true"
+                [closeOnSelect]="true"
-                placeholder="Select categories"
+                placeholder="Select categories"
-              ></ng-select>
+                aria-label="Category"
-            </div>
+              ></ng-select>
-            <div>
+            </div>
-              <label class="block mb-2 text-sm font-medium text-neutral-900">Type of Property</label>
+            <div>
-              <ng-select
+              <label class="block mb-2 text-sm font-medium text-neutral-900">Type of Property</label>
-                class="custom"
+              <ng-select
-                [items]="propertyTypeOptions"
+                class="custom"
-                bindLabel="name"
+                [items]="propertyTypeOptions"
-                bindValue="value"
+                bindLabel="name"
-                [ngModel]="selectedPropertyType"
+                bindValue="value"
-                (ngModelChange)="onPropertyTypeChange($event)"
+                [ngModel]="selectedPropertyType"
-                placeholder="Select property type"
+                (ngModelChange)="onPropertyTypeChange($event)"
-              ></ng-select>
+                placeholder="Select property type"
-            </div>
+                aria-label="Type of Property"
-            <div>
+              ></ng-select>
-              <label for="numberEmployees" class="block mb-2 text-sm font-medium text-neutral-900">Number of Employees</label>
+            </div>
-              <div class="flex items-center space-x-2">
+            <div>
-                <input
+              <label for="numberEmployees" class="block mb-2 text-sm font-medium text-neutral-900">Number of Employees</label>
-                  type="number"
+              <div class="flex items-center space-x-2">
-                  id="numberEmployees-from"
+                <input
-                  [ngModel]="criteria.minNumberEmployees"
+                  type="number"
-                  (ngModelChange)="updateCriteria({ minNumberEmployees: $event })"
+                  id="numberEmployees-from"
-                  class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
+                  [ngModel]="criteria.minNumberEmployees"
-                  placeholder="From"
+                  (ngModelChange)="updateCriteria({ minNumberEmployees: $event })"
-                />
+                  class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
-                <span>-</span>
+                  placeholder="From"
-                <input
+                />
-                  type="number"
+                <span>-</span>
-                  id="numberEmployees-to"
+                <input
-                  [ngModel]="criteria.maxNumberEmployees"
+                  type="number"
-                  (ngModelChange)="updateCriteria({ maxNumberEmployees: $event })"
+                  id="numberEmployees-to"
-                  class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
+                  [ngModel]="criteria.maxNumberEmployees"
-                  placeholder="To"
+                  (ngModelChange)="updateCriteria({ maxNumberEmployees: $event })"
-                />
+                  class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
-              </div>
+                  placeholder="To"
-            </div>
+                />
-            <div>
+              </div>
-              <label for="establishedMin" class="block mb-2 text-sm font-medium text-neutral-900">Minimum years established</label>
+            </div>
-              <div class="flex items-center space-x-2">
+            <div>
-                <input
+              <label for="establishedMin" class="block mb-2 text-sm font-medium text-neutral-900">Minimum years established</label>
-                  type="number"
+              <div class="flex items-center space-x-2">
-                  id="establishedMin"
+                <input
-                  [ngModel]="criteria.establishedMin"
+                  type="number"
-                  (ngModelChange)="updateCriteria({ establishedMin: $event })"
+                  id="establishedMin"
-                  class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
+                  [ngModel]="criteria.establishedMin"
-                  placeholder="YY"
+                  (ngModelChange)="updateCriteria({ establishedMin: $event })"
-                />
+                  class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
-              </div>
+                  placeholder="YY"
-            </div>
+                />
-            <div>
+              </div>
-              <label for="brokername" class="block mb-2 text-sm font-medium text-neutral-900">Broker Name / Company Name</label>
+            </div>
-              <input
+            <div>
-                type="text"
+              <label for="brokername" class="block mb-2 text-sm font-medium text-neutral-900">Broker Name / Company Name</label>
-                id="brokername"
+              <input
-                [ngModel]="criteria.brokerName"
+                type="text"
-                (ngModelChange)="updateCriteria({ brokerName: $event })"
+                id="brokername"
-                class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
+                [ngModel]="criteria.brokerName"
-                placeholder="e.g. Brokers Invest"
+                (ngModelChange)="updateCriteria({ brokerName: $event })"
-              />
+                class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
-            </div>
+                placeholder="e.g. Brokers Invest"
-          </div>
+              />
-        </div>
+            </div>
-      </div>
+          </div>
-    </div>
+        </div>
-  </div>
+      </div>
-</div>
+    </div>
-<!-- ################################################################################## -->
+  </div>
-<!-- ################################################################################## -->
+</div>
-<!-- ################################################################################## -->
+<!-- ################################################################################## -->
-<div *ngIf="!isModal" class="space-y-6">
+<!-- ################################################################################## -->
-  <div class="flex space-x-4 mb-4">
+<!-- ################################################################################## -->
-    <h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
+<div *ngIf="!isModal" class="space-y-6">
-    <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 class="flex space-x-4 mb-4">
-    <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">
+    <h3 class="text-xl font-semibold text-neutral-900">Filter ({{ numberOfResults$ | async }})</h3>
-      Clear all Filter
+    <button type="button" aria-label="Clear all filters" data-tooltip-target="tooltip-light" class="flex self-center ml-2 cursor-pointer text-primary-500 p-1" (click)="clearFilter()"><i class="fa-solid fa-trash-can"></i></button>
-      <div class="tooltip-arrow" data-popper-arrow></div>
+    <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">
-    </div>
+      Clear all Filter
-  </div>
+      <div class="tooltip-arrow" data-popper-arrow></div>
-  <!-- Display active filters as tags -->
+    </div>
-  <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
+  </div>
-    <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">
+  <!-- Display active filters as tags -->
-      State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+  <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
-    </span>
+    <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">
-    <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">
+      State: {{ criteria.state }} <button (click)="removeFilter('state')" aria-label="Remove state filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+    </span>
-    </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">
-    <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">
+      City: {{ criteria.city.name }} <button (click)="removeFilter('city')" aria-label="Remove city filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-      Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+    </span>
-    </span>
+    <span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-    <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">
+      Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" aria-label="Remove price filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-      Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+    </span>
-    </span>
+    <span *ngIf="criteria.minRevenue || criteria.maxRevenue" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-    <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">
+      Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" aria-label="Remove revenue filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-      Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+    </span>
-    </span>
+    <span *ngIf="criteria.minCashFlow || criteria.maxCashFlow" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-    <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">
+      Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" aria-label="Remove cashflow filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-      Title: {{ criteria.title }} <button (click)="removeFilter('title')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+    </span>
-    </span>
+    <span *ngIf="criteria.title" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-    <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">
+      Title: {{ criteria.title }} <button (click)="removeFilter('title')" aria-label="Remove title filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-      Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+    </span>
-    </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">
-    <span *ngIf="selectedPropertyType" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+      Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" aria-label="Remove categories filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-      Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+    </span>
-    </span>
+    <span *ngIf="selectedPropertyType" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-    <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">
+      Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" aria-label="Remove property type filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-      Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+    </span>
-    </span>
+    <span *ngIf="criteria.minNumberEmployees || criteria.maxNumberEmployees" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-    <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">
+      Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" aria-label="Remove employees filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-      Years established: {{ criteria.establishedMin || 'Any' }} <button (click)="removeFilter('established')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+    </span>
-    </span>
+    <span *ngIf="criteria.establishedMin" class="bg-neutral-200 text-neutral-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-    <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">
+      Years established: {{ criteria.establishedMin || 'Any' }} <button (click)="removeFilter('established')" aria-label="Remove established filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-      Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+    </span>
-    </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">
-  </div>
+      Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" aria-label="Remove broker filter" class="ml-1 text-red-500 hover:text-red-700 min-w-[24px] min-h-[24px]">×</button>
-  @if(criteria.criteriaType==='businessListings') {
+    </span>
-  <div class="space-y-4">
+  </div>
-    <div>
+  @if(criteria.criteriaType==='businessListings') {
-      <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
+  <div class="space-y-4">
-      <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
+    <div>
-    </div>
+      <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
-    <div>
+      <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
-      <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>
+    <div>
-    <div *ngIf="criteria.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>
-      <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
+    </div>
-      <div class="flex items-center space-x-4">
+    <div *ngIf="criteria.city">
-        <label class="inline-flex items-center">
+      <label class="block mb-2 text-sm font-medium text-neutral-900">Search Type</label>
-          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
+      <div class="flex items-center space-x-4">
-          <span class="ml-2">Exact City</span>
+        <label class="inline-flex items-center">
-        </label>
+          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="exact" />
-        <label class="inline-flex items-center">
+          <span class="ml-2">Exact City</span>
-          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
+        </label>
-          <span class="ml-2">Radius Search</span>
+        <label class="inline-flex items-center">
-        </label>
+          <input type="radio" class="form-radio" name="searchType" [ngModel]="criteria.searchType" (ngModelChange)="updateCriteria({ searchType: $event })" value="radius" />
-      </div>
+          <span class="ml-2">Radius Search</span>
-    </div>
+        </label>
-    <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
+      </div>
-      <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
+    </div>
-      <div class="flex flex-wrap">
+    <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
-        @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
+      <label class="block mb-2 text-sm font-medium text-neutral-900">Select Radius (in miles)</label>
-        <button
+      <div class="flex flex-wrap">
-          type="button"
+        @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
-          class="px-3 py-2 text-xs font-medium text-center border border-neutral-200 hover:bg-neutral-500 hover:text-white"
+        <button
-          [ngClass]="criteria.radius === radius ? 'text-white bg-neutral-500' : 'text-neutral-900 bg-white'"
+          type="button"
-          (click)="setRadius(radius)"
+          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'"
-          {{ radius }}
+          (click)="setRadius(radius)"
-        </button>
+        >
-        }
+          {{ radius }}
-      </div>
+        </button>
-    </div>
+        }
-    <div>
+      </div>
-      <label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
+    </div>
-      <div class="flex items-center space-x-2">
+    <div>
-        <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>
+      <label for="price" class="block mb-2 text-sm font-medium text-neutral-900">Price</label>
-        <span>-</span>
+      <div class="flex items-center space-x-2">
-        <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>
+        <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>
-      </div>
+        <span>-</span>
-    </div>
+        <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>
-      <label for="salesRevenue" class="block mb-2 text-sm font-medium text-neutral-900">Sales Revenue</label>
+    </div>
-      <div class="flex items-center space-x-2">
+    <div>
-        <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">
+      <label for="salesRevenue" class="block mb-2 text-sm font-medium text-neutral-900">Sales Revenue</label>
-        </app-validated-price>
+      <div class="flex items-center space-x-2">
-        <span>-</span>
+        <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 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>
-        </app-validated-price>
+        <span>-</span>
-      </div>
+        <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">
-    </div>
+        </app-validated-price>
-    <div>
+      </div>
-      <label for="cashflow" class="block mb-2 text-sm font-medium text-neutral-900">Cashflow</label>
+    </div>
-      <div class="flex items-center space-x-2">
+    <div>
-        <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">
+      <label for="cashflow" class="block mb-2 text-sm font-medium text-neutral-900">Cashflow</label>
-        </app-validated-price>
+      <div class="flex items-center space-x-2">
-        <span>-</span>
+        <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 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>
-        </app-validated-price>
+        <span>-</span>
-      </div>
+        <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">
-    </div>
+        </app-validated-price>
-    <div>
+      </div>
-      <label for="title" class="block mb-2 text-sm font-medium text-neutral-900">Title / Description (Free Search)</label>
+    </div>
-      <input
+    <div>
-        type="text"
+      <label for="title" class="block mb-2 text-sm font-medium text-neutral-900">Title / Description (Free Search)</label>
-        id="title"
+      <input
-        [ngModel]="criteria.title"
+        type="text"
-        (ngModelChange)="updateCriteria({ title: $event })"
+        id="title"
-        class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
+        [ngModel]="criteria.title"
-        placeholder="e.g. Restaurant"
+        (ngModelChange)="updateCriteria({ title: $event })"
-      />
+        class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
-    </div>
+        placeholder="e.g. Restaurant"
-    <div>
+      />
-      <label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
+    </div>
-      <ng-select
+    <div>
-        class="custom"
+      <label class="block mb-2 text-sm font-medium text-neutral-900">Category</label>
-        [items]="selectOptions.typesOfBusiness"
+      <ng-select
-        bindLabel="name"
+        class="custom"
-        bindValue="value"
+        [items]="selectOptions.typesOfBusiness"
-        [ngModel]="criteria.types"
+        bindLabel="name"
-        (ngModelChange)="onCategoryChange($event)"
+        bindValue="value"
-        [multiple]="true"
+        [ngModel]="criteria.types"
-        [closeOnSelect]="true"
+        (ngModelChange)="onCategoryChange($event)"
-        placeholder="Select categories"
+        [multiple]="true"
-      ></ng-select>
+        [closeOnSelect]="true"
-    </div>
+        placeholder="Select categories"
-    <div>
+      ></ng-select>
-      <label class="block mb-2 text-sm font-medium text-neutral-900">Type of Property</label>
+    </div>
-      <ng-select
+    <div>
-        class="custom"
+      <label class="block mb-2 text-sm font-medium text-neutral-900">Type of Property</label>
-        [items]="propertyTypeOptions"
+      <ng-select
-        bindLabel="name"
+        class="custom"
-        bindValue="value"
+        [items]="propertyTypeOptions"
-        [ngModel]="selectedPropertyType"
+        bindLabel="name"
-        (ngModelChange)="onPropertyTypeChange($event)"
+        bindValue="value"
-        placeholder="Select property type"
+        [ngModel]="selectedPropertyType"
-      ></ng-select>
+        (ngModelChange)="onPropertyTypeChange($event)"
-    </div>
+        placeholder="Select property type"
-    <div>
+      ></ng-select>
-      <label for="numberEmployees" class="block mb-2 text-sm font-medium text-neutral-900">Number of Employees</label>
+    </div>
-      <div class="flex items-center space-x-2">
+    <div>
-        <input
+      <label for="numberEmployees" class="block mb-2 text-sm font-medium text-neutral-900">Number of Employees</label>
-          type="number"
+      <div class="flex items-center space-x-2">
-          id="numberEmployees-from"
+        <input
-          [ngModel]="criteria.minNumberEmployees"
+          type="number"
-          (ngModelChange)="updateCriteria({ minNumberEmployees: $event })"
+          id="numberEmployees-from"
-          class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
+          [ngModel]="criteria.minNumberEmployees"
-          placeholder="From"
+          (ngModelChange)="updateCriteria({ minNumberEmployees: $event })"
-        />
+          class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
-        <span>-</span>
+          placeholder="From"
-        <input
+        />
-          type="number"
+        <span>-</span>
-          id="numberEmployees-to"
+        <input
-          [ngModel]="criteria.maxNumberEmployees"
+          type="number"
-          (ngModelChange)="updateCriteria({ maxNumberEmployees: $event })"
+          id="numberEmployees-to"
-          class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
+          [ngModel]="criteria.maxNumberEmployees"
-          placeholder="To"
+          (ngModelChange)="updateCriteria({ maxNumberEmployees: $event })"
-        />
+          class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
-      </div>
+          placeholder="To"
-    </div>
+        />
-    <div>
+      </div>
-      <label for="establishedMin" class="block mb-2 text-sm font-medium text-neutral-900">Minimum years established</label>
+    </div>
-      <div class="flex items-center space-x-2">
+    <div>
-        <input
+      <label for="establishedMin" class="block mb-2 text-sm font-medium text-neutral-900">Minimum years established</label>
-          type="number"
+      <div class="flex items-center space-x-2">
-          id="establishedMin"
+        <input
-          [ngModel]="criteria.establishedMin"
+          type="number"
-          (ngModelChange)="updateCriteria({ establishedMin: $event })"
+          id="establishedMin"
-          class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
+          [ngModel]="criteria.establishedMin"
-          placeholder="YY"
+          (ngModelChange)="updateCriteria({ establishedMin: $event })"
-        />
+          class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-1/2 p-2.5"
-      </div>
+          placeholder="YY"
-    </div>
+        />
-    <div>
+      </div>
-      <label for="brokername" class="block mb-2 text-sm font-medium text-neutral-900">Broker Name / Company Name</label>
+    </div>
-      <input
+    <div>
-        type="text"
+      <label for="brokername" class="block mb-2 text-sm font-medium text-neutral-900">Broker Name / Company Name</label>
-        id="brokername"
+      <input
-        [ngModel]="criteria.brokerName"
+        type="text"
-        (ngModelChange)="updateCriteria({ brokerName: $event })"
+        id="brokername"
-        class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
+        [ngModel]="criteria.brokerName"
-        placeholder="e.g. Brokers Invest"
+        (ngModelChange)="updateCriteria({ brokerName: $event })"
-      />
+        class="bg-neutral-50 border border-neutral-300 text-sm rounded-lg block w-full p-2.5"
-    </div>
+        placeholder="e.g. Brokers Invest"
-  </div>
+      />
-  }
+    </div>
-</div>
+  </div>
+  }
+</div>

bizmatch/src/app/components/search-modal/search-modal.component.ts

@@ -1,445 +1,445 @@
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe, NgIf } from '@angular/common';
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { NgSelectModule } from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { catchError, concat, debounceTime, distinctUntilChanged, map, Observable, of, Subject, switchMap, takeUntil, tap } from 'rxjs';
+import { catchError, concat, debounceTime, distinctUntilChanged, map, Observable, of, Subject, switchMap, takeUntil, tap } from 'rxjs';
-import { BusinessListingCriteria, CountyResult, GeoResult, KeyValue, KeyValueStyle } from '../../../../../bizmatch-server/src/models/main.model';
+import { BusinessListingCriteria, CountyResult, GeoResult, KeyValue, KeyValueStyle } from '../../../../../bizmatch-server/src/models/main.model';
-import { FilterStateService } from '../../services/filter-state.service';
+import { FilterStateService } from '../../services/filter-state.service';
-import { GeoService } from '../../services/geo.service';
+import { GeoService } from '../../services/geo.service';
-import { ListingsService } from '../../services/listings.service';
+import { ListingsService } from '../../services/listings.service';
-import { SearchService } from '../../services/search.service';
+import { SearchService } from '../../services/search.service';
-import { SelectOptionsService } from '../../services/select-options.service';
+import { SelectOptionsService } from '../../services/select-options.service';
-import { UserService } from '../../services/user.service';
+import { UserService } from '../../services/user.service';
-import { SharedModule } from '../../shared/shared/shared.module';
+import { SharedModule } from '../../shared/shared/shared.module';
-import { ValidatedCityComponent } from '../validated-city/validated-city.component';
+import { ValidatedCityComponent } from '../validated-city/validated-city.component';
-import { ValidatedPriceComponent } from '../validated-price/validated-price.component';
+import { ValidatedPriceComponent } from '../validated-price/validated-price.component';
-import { ModalService } from './modal.service';
+import { ModalService } from './modal.service';
-
+
-@UntilDestroy()
+@UntilDestroy()
-@Component({
+@Component({
-  selector: 'app-search-modal',
+  selector: 'app-search-modal',
-  standalone: true,
+  standalone: true,
-  imports: [SharedModule, AsyncPipe, NgIf, NgSelectModule, ValidatedCityComponent, ValidatedPriceComponent],
+  imports: [SharedModule, AsyncPipe, NgIf, NgSelectModule, ValidatedCityComponent, ValidatedPriceComponent],
-  templateUrl: './search-modal.component.html',
+  templateUrl: './search-modal.component.html',
-  styleUrl: './search-modal.component.scss',
+  styleUrl: './search-modal.component.scss',
-})
+})
-export class SearchModalComponent implements OnInit, OnDestroy {
+export class SearchModalComponent implements OnInit, OnDestroy {
-  @Input() isModal: boolean = true;
+  @Input() isModal: boolean = true;
-
+
-  private destroy$ = new Subject<void>();
+  private destroy$ = new Subject<void>();
-  private searchDebounce$ = new Subject<void>();
+  private searchDebounce$ = new Subject<void>();
-
+
-  // State
+  // State
-  criteria: BusinessListingCriteria;
+  criteria: BusinessListingCriteria;
-  backupCriteria: any;
+  backupCriteria: any;
-  currentListingType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings';
+  currentListingType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings';
-
+
-  // Geo search
+  // Geo search
-  counties$: Observable<CountyResult[]>;
+  counties$: Observable<CountyResult[]>;
-  countyLoading = false;
+  countyLoading = false;
-  countyInput$ = new Subject<string>();
+  countyInput$ = new Subject<string>();
-
+
-  // Property type for business listings
+  // Property type for business listings
-  selectedPropertyType: string | null = null;
+  selectedPropertyType: string | null = null;
-  propertyTypeOptions = [
+  propertyTypeOptions = [
-    { name: 'Real Estate', value: 'realEstateChecked' },
+    { name: 'Real Estate', value: 'realEstateChecked' },
-    { name: 'Leased Location', value: 'leasedLocation' },
+    { name: 'Leased Location', value: 'leasedLocation' },
-    { name: 'Franchise', value: 'franchiseResale' },
+    { name: 'Franchise', value: 'franchiseResale' },
-  ];
+  ];
-
+
-  // Results count
+  // Results count
-  numberOfResults$: Observable<number>;
+  numberOfResults$: Observable<number>;
-
+
-  constructor(
+  constructor(
-    public selectOptions: SelectOptionsService,
+    public selectOptions: SelectOptionsService,
-    public modalService: ModalService,
+    public modalService: ModalService,
-    private geoService: GeoService,
+    private geoService: GeoService,
-    private filterStateService: FilterStateService,
+    private filterStateService: FilterStateService,
-    private listingService: ListingsService,
+    private listingService: ListingsService,
-    private userService: UserService,
+    private userService: UserService,
-    private searchService: SearchService,
+    private searchService: SearchService,
-  ) {}
+  ) {}
-
+
-  ngOnInit(): void {
+  ngOnInit(): void {
-    // Load counties
+    // Load counties
-    this.loadCounties();
+    this.loadCounties();
-
+
-    if (this.isModal) {
+    if (this.isModal) {
-      // Modal mode: Wait for messages from ModalService
+      // Modal mode: Wait for messages from ModalService
-      this.modalService.message$.pipe(untilDestroyed(this)).subscribe(criteria => {
+      this.modalService.message$.pipe(untilDestroyed(this)).subscribe(criteria => {
-        this.initializeWithCriteria(criteria);
+        this.initializeWithCriteria(criteria);
-      });
+      });
-
+
-      this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
+      this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
-        if (val.visible) {
+        if (val.visible) {
-          // Reset pagination when modal opens
+          // Reset pagination when modal opens
-          if (this.criteria) {
+          if (this.criteria) {
-            this.criteria.page = 1;
+            this.criteria.page = 1;
-            this.criteria.start = 0;
+            this.criteria.start = 0;
-          }
+          }
-        }
+        }
-      });
+      });
-    } else {
+    } else {
-      // Embedded mode: Determine type from route and subscribe to state
+      // Embedded mode: Determine type from route and subscribe to state
-      this.determineListingType();
+      this.determineListingType();
-      this.subscribeToStateChanges();
+      this.subscribeToStateChanges();
-    }
+    }
-
+
-    // Setup debounced search
+    // Setup debounced search
-    this.searchDebounce$.pipe(debounceTime(400), takeUntil(this.destroy$)).subscribe(() => this.triggerSearch());
+    this.searchDebounce$.pipe(debounceTime(400), takeUntil(this.destroy$)).subscribe(() => this.triggerSearch());
-  }
+  }
-
+
-  private initializeWithCriteria(criteria: any): void {
+  private initializeWithCriteria(criteria: any): void {
-    this.criteria = criteria;
+    this.criteria = criteria;
-    this.currentListingType = criteria?.criteriaType;
+    this.currentListingType = criteria?.criteriaType;
-    this.backupCriteria = JSON.parse(JSON.stringify(criteria));
+    this.backupCriteria = JSON.parse(JSON.stringify(criteria));
-    this.updateSelectedPropertyType();
+    this.updateSelectedPropertyType();
-    this.setTotalNumberOfResults();
+    this.setTotalNumberOfResults();
-  }
+  }
-
+
-  private determineListingType(): void {
+  private determineListingType(): void {
-    const url = window.location.pathname;
+    const url = window.location.pathname;
-    if (url.includes('businessListings')) {
+    if (url.includes('businessListings')) {
-      this.currentListingType = 'businessListings';
+      this.currentListingType = 'businessListings';
-    } else if (url.includes('commercialPropertyListings')) {
+    } else if (url.includes('commercialPropertyListings')) {
-      this.currentListingType = 'commercialPropertyListings';
+      this.currentListingType = 'commercialPropertyListings';
-    } else if (url.includes('brokerListings')) {
+    } else if (url.includes('brokerListings')) {
-      this.currentListingType = 'brokerListings';
+      this.currentListingType = 'brokerListings';
-    }
+    }
-  }
+  }
-
+
-  private subscribeToStateChanges(): void {
+  private subscribeToStateChanges(): void {
-    if (!this.isModal && this.currentListingType) {
+    if (!this.isModal && this.currentListingType) {
-      this.filterStateService
+      this.filterStateService
-        .getState$(this.currentListingType)
+        .getState$(this.currentListingType)
-        .pipe(takeUntil(this.destroy$))
+        .pipe(takeUntil(this.destroy$))
-        .subscribe(state => {
+        .subscribe(state => {
-          this.criteria = { ...state.criteria };
+          this.criteria = { ...state.criteria };
-          this.updateSelectedPropertyType();
+          this.updateSelectedPropertyType();
-          this.setTotalNumberOfResults();
+          this.setTotalNumberOfResults();
-        });
+        });
-    }
+    }
-  }
+  }
-
+
-  private loadCounties(): void {
+  private loadCounties(): void {
-    this.counties$ = concat(
+    this.counties$ = concat(
-      of([]), // default items
+      of([]), // default items
-      this.countyInput$.pipe(
+      this.countyInput$.pipe(
-        distinctUntilChanged(),
+        distinctUntilChanged(),
-        tap(() => (this.countyLoading = true)),
+        tap(() => (this.countyLoading = true)),
-        switchMap(term =>
+        switchMap(term =>
-          this.geoService.findCountiesStartingWith(term).pipe(
+          this.geoService.findCountiesStartingWith(term).pipe(
-            catchError(() => of([])),
+            catchError(() => of([])),
-            map(counties => counties.map(county => county.name)),
+            map(counties => counties.map(county => county.name)),
-            tap(() => (this.countyLoading = false)),
+            tap(() => (this.countyLoading = false)),
-          ),
+          ),
-        ),
+        ),
-      ),
+      ),
-    );
+    );
-  }
+  }
-
+
-  // Filter removal methods
+  // Filter removal methods
-  removeFilter(filterType: string): void {
+  removeFilter(filterType: string): void {
-    const updates: any = {};
+    const updates: any = {};
-
+
-    switch (filterType) {
+    switch (filterType) {
-      case 'state':
+      case 'state':
-        updates.state = null;
+        updates.state = null;
-        updates.city = null;
+        updates.city = null;
-        updates.radius = null;
+        updates.radius = null;
-        updates.searchType = 'exact';
+        updates.searchType = 'exact';
-        break;
+        break;
-      case 'city':
+      case 'city':
-        updates.city = null;
+        updates.city = null;
-        updates.radius = null;
+        updates.radius = null;
-        updates.searchType = 'exact';
+        updates.searchType = 'exact';
-        break;
+        break;
-      case 'price':
+      case 'price':
-        updates.minPrice = null;
+        updates.minPrice = null;
-        updates.maxPrice = null;
+        updates.maxPrice = null;
-        break;
+        break;
-      case 'revenue':
+      case 'revenue':
-        updates.minRevenue = null;
+        updates.minRevenue = null;
-        updates.maxRevenue = null;
+        updates.maxRevenue = null;
-        break;
+        break;
-      case 'cashflow':
+      case 'cashflow':
-        updates.minCashFlow = null;
+        updates.minCashFlow = null;
-        updates.maxCashFlow = null;
+        updates.maxCashFlow = null;
-        break;
+        break;
-      case 'types':
+      case 'types':
-        updates.types = [];
+        updates.types = [];
-        break;
+        break;
-      case 'propertyType':
+      case 'propertyType':
-        updates.realEstateChecked = false;
+        updates.realEstateChecked = false;
-        updates.leasedLocation = false;
+        updates.leasedLocation = false;
-        updates.franchiseResale = false;
+        updates.franchiseResale = false;
-        this.selectedPropertyType = null;
+        this.selectedPropertyType = null;
-        break;
+        break;
-      case 'employees':
+      case 'employees':
-        updates.minNumberEmployees = null;
+        updates.minNumberEmployees = null;
-        updates.maxNumberEmployees = null;
+        updates.maxNumberEmployees = null;
-        break;
+        break;
-      case 'established':
+      case 'established':
-        updates.establishedMin = null;
+        updates.establishedMin = null;
-        break;
+        break;
-      case 'brokerName':
+      case 'brokerName':
-        updates.brokerName = null;
+        updates.brokerName = null;
-        break;
+        break;
-      case 'title':
+      case 'title':
-        updates.title = null;
+        updates.title = null;
-        break;
+        break;
-    }
+    }
-
+
-    this.updateCriteria(updates);
+    this.updateCriteria(updates);
-  }
+  }
-
+
-  // Category handling
+  // Category handling
-  onCategoryChange(selectedCategories: string[]): void {
+  onCategoryChange(selectedCategories: string[]): void {
-    this.updateCriteria({ types: selectedCategories });
+    this.updateCriteria({ types: selectedCategories });
-  }
+  }
-
+
-  categoryClicked(checked: boolean, value: string): void {
+  categoryClicked(checked: boolean, value: string): void {
-    const types = [...(this.criteria.types || [])];
+    const types = [...(this.criteria.types || [])];
-    if (checked) {
+    if (checked) {
-      if (!types.includes(value)) {
+      if (!types.includes(value)) {
-        types.push(value);
+        types.push(value);
-      }
+      }
-    } else {
+    } else {
-      const index = types.indexOf(value);
+      const index = types.indexOf(value);
-      if (index > -1) {
+      if (index > -1) {
-        types.splice(index, 1);
+        types.splice(index, 1);
-      }
+      }
-    }
+    }
-    this.updateCriteria({ types });
+    this.updateCriteria({ types });
-  }
+  }
-
+
-  // Property type handling (Business listings only)
+  // Property type handling (Business listings only)
-  onPropertyTypeChange(value: string): void {
+  onPropertyTypeChange(value: string): void {
-    const updates: any = {
+    const updates: any = {
-      realEstateChecked: false,
+      realEstateChecked: false,
-      leasedLocation: false,
+      leasedLocation: false,
-      franchiseResale: false,
+      franchiseResale: false,
-    };
+    };
-
+
-    if (value) {
+    if (value) {
-      updates[value] = true;
+      updates[value] = true;
-    }
+    }
-
+
-    this.selectedPropertyType = value;
+    this.selectedPropertyType = value;
-    this.updateCriteria(updates);
+    this.updateCriteria(updates);
-  }
+  }
-
+
-  onCheckboxChange(checkbox: string, value: boolean): void {
+  onCheckboxChange(checkbox: string, value: boolean): void {
-    const updates: any = {
+    const updates: any = {
-      realEstateChecked: false,
+      realEstateChecked: false,
-      leasedLocation: false,
+      leasedLocation: false,
-      franchiseResale: false,
+      franchiseResale: false,
-    };
+    };
-
+
-    updates[checkbox] = value;
+    updates[checkbox] = value;
-    this.selectedPropertyType = value ? checkbox : null;
+    this.selectedPropertyType = value ? checkbox : null;
-    this.updateCriteria(updates);
+    this.updateCriteria(updates);
-  }
+  }
-
+
-  // Location handling
+  // Location handling
-  setState(state: string): void {
+  setState(state: string): void {
-    const updates: any = { state };
+    const updates: any = { state };
-    if (!state) {
+    if (!state) {
-      updates.city = null;
+      updates.city = null;
-      updates.radius = null;
+      updates.radius = null;
-      updates.searchType = 'exact';
+      updates.searchType = 'exact';
-    }
+    }
-    this.updateCriteria(updates);
+    this.updateCriteria(updates);
-  }
+  }
-
+
-  setCity(city: any): void {
+  setCity(city: any): void {
-    const updates: any = {};
+    const updates: any = {};
-    if (city) {
+    if (city) {
-      updates.city = city;
+      updates.city = city;
-      updates.state = city.state;
+      updates.state = city.state;
-      // Automatically set radius to 50 miles and enable radius search
+      // Automatically set radius to 50 miles and enable radius search
-      updates.searchType = 'radius';
+      updates.searchType = 'radius';
-      updates.radius = 50;
+      updates.radius = 50;
-    } else {
+    } else {
-      updates.city = null;
+      updates.city = null;
-      updates.radius = null;
+      updates.radius = null;
-      updates.searchType = 'exact';
+      updates.searchType = 'exact';
-    }
+    }
-    this.updateCriteria(updates);
+    this.updateCriteria(updates);
-  }
+  }
-
+
-  setRadius(radius: number): void {
+  setRadius(radius: number): void {
-    this.updateCriteria({ radius });
+    this.updateCriteria({ radius });
-  }
+  }
-
+
-  onCriteriaChange(): void {
+  onCriteriaChange(): void {
-    this.triggerSearch();
+    this.triggerSearch();
-  }
+  }
-
+
-  // Debounced search for text inputs
+  // Debounced search for text inputs
-  debouncedSearch(): void {
+  debouncedSearch(): void {
-    this.searchDebounce$.next();
+    this.searchDebounce$.next();
-  }
+  }
-
+
-  // Clear all filters
+  // Clear all filters
-  clearFilter(): void {
+  clearFilter(): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // In modal: Reset locally
+      // In modal: Reset locally
-      const defaultCriteria = this.getDefaultCriteria();
+      const defaultCriteria = this.getDefaultCriteria();
-      this.criteria = defaultCriteria;
+      this.criteria = defaultCriteria;
-      this.updateSelectedPropertyType();
+      this.updateSelectedPropertyType();
-      this.setTotalNumberOfResults();
+      this.setTotalNumberOfResults();
-    } else {
+    } else {
-      // Embedded: Use state service
+      // Embedded: Use state service
-      this.filterStateService.clearFilters(this.currentListingType);
+      this.filterStateService.clearFilters(this.currentListingType);
-    }
+    }
-  }
+  }
-
+
-  // Modal-specific methods
+  // Modal-specific methods
-  closeAndSearch(): void {
+  closeAndSearch(): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // Save changes to state
+      // Save changes to state
-      this.filterStateService.setCriteria(this.currentListingType, this.criteria);
+      this.filterStateService.setCriteria(this.currentListingType, this.criteria);
-      this.modalService.accept();
+      this.modalService.accept();
-      this.searchService.search(this.currentListingType);
+      this.searchService.search(this.currentListingType);
-    }
+    }
-  }
+  }
-
+
-  close(): void {
+  close(): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // Discard changes
+      // Discard changes
-      this.modalService.reject(this.backupCriteria);
+      this.modalService.reject(this.backupCriteria);
-    }
+    }
-  }
+  }
-
+
-  // Helper methods
+  // Helper methods
-  public updateCriteria(updates: any): void {
+  public updateCriteria(updates: any): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // In modal: Update locally only
+      // In modal: Update locally only
-      this.criteria = { ...this.criteria, ...updates };
+      this.criteria = { ...this.criteria, ...updates };
-      this.setTotalNumberOfResults();
+      this.setTotalNumberOfResults();
-    } else {
+    } else {
-      // Embedded: Update through state service
+      // Embedded: Update through state service
-      this.filterStateService.updateCriteria(this.currentListingType, updates);
+      this.filterStateService.updateCriteria(this.currentListingType, updates);
-    }
+    }
-
+
-    // Trigger search after update
+    // Trigger search after update
-    this.debouncedSearch();
+    this.debouncedSearch();
-  }
+  }
-
+
-  private triggerSearch(): void {
+  private triggerSearch(): void {
-    if (this.isModal) {
+    if (this.isModal) {
-      // In modal: Only update count
+      // In modal: Only update count
-      this.setTotalNumberOfResults();
+      this.setTotalNumberOfResults();
-    } else {
+    } else {
-      // Embedded: Full search
+      // Embedded: Full search
-      this.searchService.search(this.currentListingType);
+      this.searchService.search(this.currentListingType);
-    }
+    }
-  }
+  }
-
+
-  private updateSelectedPropertyType(): void {
+  private updateSelectedPropertyType(): void {
-    if (this.currentListingType === 'businessListings') {
+    if (this.currentListingType === 'businessListings') {
-      const businessCriteria = this.criteria as BusinessListingCriteria;
+      const businessCriteria = this.criteria as BusinessListingCriteria;
-      if (businessCriteria.realEstateChecked) {
+      if (businessCriteria.realEstateChecked) {
-        this.selectedPropertyType = 'realEstateChecked';
+        this.selectedPropertyType = 'realEstateChecked';
-      } else if (businessCriteria.leasedLocation) {
+      } else if (businessCriteria.leasedLocation) {
-        this.selectedPropertyType = 'leasedLocation';
+        this.selectedPropertyType = 'leasedLocation';
-      } else if (businessCriteria.franchiseResale) {
+      } else if (businessCriteria.franchiseResale) {
-        this.selectedPropertyType = 'franchiseResale';
+        this.selectedPropertyType = 'franchiseResale';
-      } else {
+      } else {
-        this.selectedPropertyType = null;
+        this.selectedPropertyType = null;
-      }
+      }
-    }
+    }
-  }
+  }
-
+
-  private setTotalNumberOfResults(): void {
+  private setTotalNumberOfResults(): void {
-    if (!this.criteria) return;
+    if (!this.criteria) return;
-
+
-    switch (this.currentListingType) {
+    switch (this.currentListingType) {
-      case 'businessListings':
+      case 'businessListings':
-        this.numberOfResults$ = this.listingService.getNumberOfListings('business', this.criteria);
+        this.numberOfResults$ = this.listingService.getNumberOfListings('business', this.criteria);
-        break;
+        break;
-      case 'commercialPropertyListings':
+      case 'commercialPropertyListings':
-        this.numberOfResults$ = this.listingService.getNumberOfListings('commercialProperty', this.criteria);
+        this.numberOfResults$ = this.listingService.getNumberOfListings('commercialProperty', this.criteria);
-        break;
+        break;
-      case 'brokerListings':
+      case 'brokerListings':
-        this.numberOfResults$ = this.userService.getNumberOfBroker();
+        this.numberOfResults$ = this.userService.getNumberOfBroker();
-        break;
+        break;
-    }
+    }
-  }
+  }
-
+
-  private getDefaultCriteria(): any {
+  private getDefaultCriteria(): any {
-    switch (this.currentListingType) {
+    switch (this.currentListingType) {
-      case 'businessListings':
+      case 'businessListings':
-        return this.filterStateService['createEmptyBusinessListingCriteria']();
+        return this.filterStateService['createEmptyBusinessListingCriteria']();
-      case 'commercialPropertyListings':
+      case 'commercialPropertyListings':
-        return this.filterStateService['createEmptyCommercialPropertyListingCriteria']();
+        return this.filterStateService['createEmptyCommercialPropertyListingCriteria']();
-      case 'brokerListings':
+      case 'brokerListings':
-        return this.filterStateService['createEmptyUserListingCriteria']();
+        return this.filterStateService['createEmptyUserListingCriteria']();
-    }
+    }
-  }
+  }
-
+
-  hasActiveFilters(): boolean {
+  hasActiveFilters(): boolean {
-    if (!this.criteria) return false;
+    if (!this.criteria) return false;
-
+
-    // Check all possible filter properties
+    // Check all possible filter properties
-    const hasBasicFilters = !!(this.criteria.state || this.criteria.city || this.criteria.types?.length);
+    const hasBasicFilters = !!(this.criteria.state || this.criteria.city || this.criteria.types?.length);
-
+
-    // Check business-specific filters
+    // Check business-specific filters
-    if (this.currentListingType === 'businessListings') {
+    if (this.currentListingType === 'businessListings') {
-      const bc = this.criteria as BusinessListingCriteria;
+      const bc = this.criteria as BusinessListingCriteria;
-      return (
+      return (
-        hasBasicFilters ||
+        hasBasicFilters ||
-        !!(
+        !!(
-          bc.minPrice ||
+          bc.minPrice ||
-          bc.maxPrice ||
+          bc.maxPrice ||
-          bc.minRevenue ||
+          bc.minRevenue ||
-          bc.maxRevenue ||
+          bc.maxRevenue ||
-          bc.minCashFlow ||
+          bc.minCashFlow ||
-          bc.maxCashFlow ||
+          bc.maxCashFlow ||
-          bc.minNumberEmployees ||
+          bc.minNumberEmployees ||
-          bc.maxNumberEmployees ||
+          bc.maxNumberEmployees ||
-          bc.establishedMin ||
+          bc.establishedMin ||
-          bc.brokerName ||
+          bc.brokerName ||
-          bc.title ||
+          bc.title ||
-          this.selectedPropertyType
+          this.selectedPropertyType
-        )
+        )
-      );
+      );
-    }
+    }
-
+
-    // Check commercial property filters
+    // Check commercial property filters
-    // if (this.currentListingType === 'commercialPropertyListings') {
+    // if (this.currentListingType === 'commercialPropertyListings') {
-    //   const cc = this.criteria as CommercialPropertyListingCriteria;
+    //   const cc = this.criteria as CommercialPropertyListingCriteria;
-    //   return hasBasicFilters || !!(cc.minPrice || cc.maxPrice || cc.title);
+    //   return hasBasicFilters || !!(cc.minPrice || cc.maxPrice || cc.title);
-    // }
+    // }
-
+
-    // Check user/broker filters
+    // Check user/broker filters
-    // if (this.currentListingType === 'brokerListings') {
+    // if (this.currentListingType === 'brokerListings') {
-    //   const uc = this.criteria as UserListingCriteria;
+    //   const uc = this.criteria as UserListingCriteria;
-    //   return hasBasicFilters || !!(uc.brokerName || uc.companyName || uc.counties?.length);
+    //   return hasBasicFilters || !!(uc.brokerName || uc.companyName || uc.counties?.length);
-    // }
+    // }
-
+
-    return hasBasicFilters;
+    return hasBasicFilters;
-  }
+  }
-
+
-  getSelectedPropertyTypeName(): string | null {
+  getSelectedPropertyTypeName(): string | null {
-    return this.selectedPropertyType ? this.propertyTypeOptions.find(opt => opt.value === this.selectedPropertyType)?.name || null : null;
+    return this.selectedPropertyType ? this.propertyTypeOptions.find(opt => opt.value === this.selectedPropertyType)?.name || null : null;
-  }
+  }
-
+
-  isTypeOfBusinessClicked(v: KeyValueStyle): boolean {
+  isTypeOfBusinessClicked(v: KeyValueStyle): boolean {
-    return !!this.criteria.types?.find(t => t === v.value);
+    return !!this.criteria.types?.find(t => t === v.value);
-  }
+  }
-
+
-  isTypeOfProfessionalClicked(v: KeyValue): boolean {
+  isTypeOfProfessionalClicked(v: KeyValue): boolean {
-    return !!this.criteria.types?.find(t => t === v.value);
+    return !!this.criteria.types?.find(t => t === v.value);
-  }
+  }
-
+
-  trackByFn(item: GeoResult): any {
+  trackByFn(item: GeoResult): any {
-    return item.id;
+    return item.id;
-  }
+  }
-
+
-  ngOnDestroy(): void {
+  ngOnDestroy(): void {
-    this.destroy$.next();
+    this.destroy$.next();
-    this.destroy$.complete();
+    this.destroy$.complete();
-  }
+  }
-}
+}

bizmatch/src/app/components/test-ssr/test-ssr.component.ts

@@ -1,24 +1,24 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';
-
+
-@Component({
+@Component({
-  selector: 'app-test-ssr',
+  selector: 'app-test-ssr',
-  standalone: true,
+  standalone: true,
-  template: `
+  template: `
-    <div>
+    <div>
-      <h1>SSR Test Component</h1>
+      <h1>SSR Test Component</h1>
-      <p>If you see this, SSR is working!</p>
+      <p>If you see this, SSR is working!</p>
-    </div>
+    </div>
-  `,
+  `,
-  styles: [`
+  styles: [`
-    div {
+    div {
-      padding: 20px;
+      padding: 20px;
-      background: #f0f0f0;
+      background: #f0f0f0;
-    }
+    }
-    h1 { color: green; }
+    h1 { color: green; }
-  `]
+  `]
-})
+})
-export class TestSsrComponent {
+export class TestSsrComponent {
-  constructor() {
+  constructor() {
-    console.log('[SSR] TestSsrComponent constructor called');
+    console.log('[SSR] TestSsrComponent constructor called');
-  }
+  }
-}
+}

bizmatch/src/app/components/tooltip/tooltip.component.ts

@@ -1,46 +1,46 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { Component, Input, SimpleChanges, PLATFORM_ID, inject } from '@angular/core';
+import { Component, Input, SimpleChanges, PLATFORM_ID, inject } from '@angular/core';
-
+
-@Component({
+@Component({
-  selector: 'app-tooltip',
+  selector: 'app-tooltip',
-  standalone: true,
+  standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule],
-  templateUrl: './tooltip.component.html',
+  templateUrl: './tooltip.component.html',
-})
+})
-export class TooltipComponent {
+export class TooltipComponent {
-  @Input() id: string;
+  @Input() id: string;
-  @Input() text: string;
+  @Input() text: string;
-  @Input() isVisible: boolean = false;
+  @Input() isVisible: boolean = false;
-
+
-  private platformId = inject(PLATFORM_ID);
+  private platformId = inject(PLATFORM_ID);
-  private isBrowser = isPlatformBrowser(this.platformId);
+  private isBrowser = isPlatformBrowser(this.platformId);
-
+
-  ngOnInit() {
+  ngOnInit() {
-    this.initializeTooltip();
+    this.initializeTooltip();
-  }
+  }
-
+
-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges(changes: SimpleChanges) {
-    if (changes['isVisible']) {
+    if (changes['isVisible']) {
-      this.updateTooltipVisibility();
+      this.updateTooltipVisibility();
-    }
+    }
-  }
+  }
-
+
-  private initializeTooltip() {
+  private initializeTooltip() {
-    // Flowbite is now initialized once in AppComponent
+    // Flowbite is now initialized once in AppComponent
-  }
+  }
-
+
-  private updateTooltipVisibility() {
+  private updateTooltipVisibility() {
-    if (!this.isBrowser) return;
+    if (!this.isBrowser) return;
-
+
-    const tooltipElement = document.getElementById(this.id);
+    const tooltipElement = document.getElementById(this.id);
-    if (tooltipElement) {
+    if (tooltipElement) {
-      if (this.isVisible) {
+      if (this.isVisible) {
-        tooltipElement.classList.remove('invisible', 'opacity-0');
+        tooltipElement.classList.remove('invisible', 'opacity-0');
-        tooltipElement.classList.add('visible', 'opacity-100');
+        tooltipElement.classList.add('visible', 'opacity-100');
-      } else {
+      } else {
-        tooltipElement.classList.remove('visible', 'opacity-100');
+        tooltipElement.classList.remove('visible', 'opacity-100');
-        tooltipElement.classList.add('invisible', 'opacity-0');
+        tooltipElement.classList.add('invisible', 'opacity-0');
-      }
+      }
-    }
+    }
-  }
+  }
-}
+}

bizmatch/src/app/components/validated-input/validated-input.component.ts

@@ -1,44 +1,44 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { Component, forwardRef, Input } from '@angular/core';
+import { Component, forwardRef, Input } from '@angular/core';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
+import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
-import { BaseInputComponent } from '../base-input/base-input.component';
+import { BaseInputComponent } from '../base-input/base-input.component';
-import { TooltipComponent } from '../tooltip/tooltip.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
-import { ValidationMessagesService } from '../validation-messages.service';
+import { ValidationMessagesService } from '../validation-messages.service';
-
+
-@Component({
+@Component({
-  selector: 'app-validated-input',
+  selector: 'app-validated-input',
-  templateUrl: './validated-input.component.html',
+  templateUrl: './validated-input.component.html',
-  standalone: true,
+  standalone: true,
-  imports: [CommonModule, FormsModule, TooltipComponent, NgxMaskDirective],
+  imports: [CommonModule, FormsModule, TooltipComponent, NgxMaskDirective],
-  providers: [
+  providers: [
-    {
+    {
-      provide: NG_VALUE_ACCESSOR,
+      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ValidatedInputComponent),
+      useExisting: forwardRef(() => ValidatedInputComponent),
-      multi: true,
+      multi: true,
-    },
+    },
-    provideNgxMask(),
+    provideNgxMask(),
-  ],
+  ],
-})
+})
-export class ValidatedInputComponent extends BaseInputComponent {
+export class ValidatedInputComponent extends BaseInputComponent {
-  @Input() kind: 'text' | 'number' | 'email' = 'text';
+  @Input() kind: 'text' | 'number' | 'email' = 'text';
-  @Input() mask: string;
+  @Input() mask: string;
-  constructor(validationMessagesService: ValidationMessagesService) {
+  constructor(validationMessagesService: ValidationMessagesService) {
-    super(validationMessagesService);
+    super(validationMessagesService);
-  }
+  }
-
+
-  onInputChange(event: string | number): void {
+  onInputChange(event: string | number): void {
-    if (this.kind === 'number') {
+    if (this.kind === 'number') {
-      if (typeof event === 'number') {
+      if (typeof event === 'number') {
-        this.value = event;
+        this.value = event;
-      } else {
+      } else {
-        this.value = parseFloat(event);
+        this.value = parseFloat(event);
-      }
+      }
-    } else {
+    } else {
-      const text = event as string;
+      const text = event as string;
-      this.value = text?.length > 0 ? event : null;
+      this.value = text?.length > 0 ? event : null;
-    }
+    }
-    // this.value = event?.length > 0 ? (this.kind === 'number' ? parseFloat(event) : event) : null;
+    // this.value = event?.length > 0 ? (this.kind === 'number' ? parseFloat(event) : event) : null;
-    this.onChange(this.value);
+    this.onChange(this.value);
-  }
+  }
-}
+}

bizmatch/src/app/components/validated-price/validated-price.component.ts

@@ -1,60 +1,60 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { Component, forwardRef, Input, OnInit, OnDestroy } from '@angular/core';
+import { Component, forwardRef, Input, OnInit, OnDestroy } from '@angular/core';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgxCurrencyDirective } from 'ngx-currency';
+import { NgxCurrencyDirective } from 'ngx-currency';
-import { Subject } from 'rxjs';
+import { Subject } from 'rxjs';
-import { debounceTime, takeUntil } from 'rxjs/operators';
+import { debounceTime, takeUntil } from 'rxjs/operators';
-import { BaseInputComponent } from '../base-input/base-input.component';
+import { BaseInputComponent } from '../base-input/base-input.component';
-import { TooltipComponent } from '../tooltip/tooltip.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
-import { ValidationMessagesService } from '../validation-messages.service';
+import { ValidationMessagesService } from '../validation-messages.service';
-
+
-@Component({
+@Component({
-  selector: 'app-validated-price',
+  selector: 'app-validated-price',
-  standalone: true,
+  standalone: true,
-  imports: [CommonModule, FormsModule, TooltipComponent, NgxCurrencyDirective],
+  imports: [CommonModule, FormsModule, TooltipComponent, NgxCurrencyDirective],
-  providers: [
+  providers: [
-    {
+    {
-      provide: NG_VALUE_ACCESSOR,
+      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ValidatedPriceComponent),
+      useExisting: forwardRef(() => ValidatedPriceComponent),
-      multi: true,
+      multi: true,
-    },
+    },
-  ],
+  ],
-  templateUrl: './validated-price.component.html',
+  templateUrl: './validated-price.component.html',
-  styles: `:host{width:100%}`,
+  styles: `:host{width:100%}`,
-})
+})
-export class ValidatedPriceComponent extends BaseInputComponent implements OnInit, OnDestroy {
+export class ValidatedPriceComponent extends BaseInputComponent implements OnInit, OnDestroy {
-  @Input() inputClasses: string;
+  @Input() inputClasses: string;
-  @Input() placeholder: string = '';
+  @Input() placeholder: string = '';
-  @Input() debounceTimeMs: number = 400; // Configurable debounce time in milliseconds
+  @Input() debounceTimeMs: number = 400; // Configurable debounce time in milliseconds
-
+
-  private inputChange$ = new Subject<any>();
+  private inputChange$ = new Subject<any>();
-  private destroy$ = new Subject<void>();
+  private destroy$ = new Subject<void>();
-
+
-  constructor(validationMessagesService: ValidationMessagesService) {
+  constructor(validationMessagesService: ValidationMessagesService) {
-    super(validationMessagesService);
+    super(validationMessagesService);
-  }
+  }
-
+
-  override ngOnInit(): void {
+  override ngOnInit(): void {
-    // Setup debounced onChange
+    // Setup debounced onChange
-    this.inputChange$
+    this.inputChange$
-      .pipe(
+      .pipe(
-        debounceTime(this.debounceTimeMs),
+        debounceTime(this.debounceTimeMs),
-        takeUntil(this.destroy$)
+        takeUntil(this.destroy$)
-      )
+      )
-      .subscribe(value => {
+      .subscribe(value => {
-        this.value = value;
+        this.value = value;
-        this.onChange(this.value);
+        this.onChange(this.value);
-      });
+      });
-  }
+  }
-
+
-  override ngOnDestroy(): void {
+  override ngOnDestroy(): void {
-    this.destroy$.next();
+    this.destroy$.next();
-    this.destroy$.complete();
+    this.destroy$.complete();
-  }
+  }
-
+
-  onInputChange(event: Event): void {
+  onInputChange(event: Event): void {
-    const newValue = !event ? null : event;
+    const newValue = !event ? null : event;
-    // Send signal to Subject instead of calling onChange directly
+    // Send signal to Subject instead of calling onChange directly
-    this.inputChange$.next(newValue);
+    this.inputChange$.next(newValue);
-  }
+  }
-}
+}

bizmatch/src/app/components/validated-quill/validated-quill.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, forwardRef } from '@angular/core';
+import { Component, forwardRef, ViewEncapsulation } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { QuillModule } from 'ngx-quill';
 import { BaseInputComponent } from '../base-input/base-input.component';
@@ -9,9 +9,11 @@ import { ValidationMessagesService } from '../validation-messages.service';
 @Component({
   selector: 'app-validated-quill',
   templateUrl: './validated-quill.component.html',
-  styles: `quill-editor {
+  styleUrls: ['../../../../node_modules/quill/dist/quill.snow.css'],
+  styles: [`quill-editor {
             width: 100%;
-          }`,
+          }`],
+  encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [CommonModule, FormsModule, QuillModule, TooltipComponent],
   providers: [

bizmatch/src/app/directives/lazy-load-image.directive.ts

@@ -1,90 +1,90 @@
-import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
-
+
-@Directive({
+@Directive({
-  selector: 'img[appLazyLoad]',
+  selector: 'img[appLazyLoad]',
-  standalone: true
+  standalone: true
-})
+})
-export class LazyLoadImageDirective implements OnInit {
+export class LazyLoadImageDirective implements OnInit {
-  @Input() appLazyLoad: string = '';
+  @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';
+  @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;
+  private observer: IntersectionObserver | null = null;
-
+
-  constructor(
+  constructor(
-    private el: ElementRef<HTMLImageElement>,
+    private el: ElementRef<HTMLImageElement>,
-    private renderer: Renderer2
+    private renderer: Renderer2
-  ) {}
+  ) {}
-
+
-  ngOnInit() {
+  ngOnInit() {
-    // Add loading="lazy" attribute for native lazy loading
+    // Add loading="lazy" attribute for native lazy loading
-    this.renderer.setAttribute(this.el.nativeElement, 'loading', 'lazy');
+    this.renderer.setAttribute(this.el.nativeElement, 'loading', 'lazy');
-
+
-    // Set placeholder while image loads
+    // Set placeholder while image loads
-    if (this.placeholder) {
+    if (this.placeholder) {
-      this.renderer.setAttribute(this.el.nativeElement, 'src', this.placeholder);
+      this.renderer.setAttribute(this.el.nativeElement, 'src', this.placeholder);
-    }
+    }
-
+
-    // Add a CSS class for styling during loading
+    // Add a CSS class for styling during loading
-    this.renderer.addClass(this.el.nativeElement, 'lazy-loading');
+    this.renderer.addClass(this.el.nativeElement, 'lazy-loading');
-
+
-    // Use Intersection Observer for enhanced lazy loading
+    // Use Intersection Observer for enhanced lazy loading
-    if ('IntersectionObserver' in window) {
+    if ('IntersectionObserver' in window) {
-      this.observer = new IntersectionObserver(
+      this.observer = new IntersectionObserver(
-        (entries) => {
+        (entries) => {
-          entries.forEach((entry) => {
+          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
+            if (entry.isIntersecting) {
-              this.loadImage();
+              this.loadImage();
-            }
+            }
-          });
+          });
-        },
+        },
-        {
+        {
-          rootMargin: '50px' // Start loading 50px before image enters viewport
+          rootMargin: '50px' // Start loading 50px before image enters viewport
-        }
+        }
-      );
+      );
-
+
-      this.observer.observe(this.el.nativeElement);
+      this.observer.observe(this.el.nativeElement);
-    } else {
+    } else {
-      // Fallback for browsers without Intersection Observer
+      // Fallback for browsers without Intersection Observer
-      this.loadImage();
+      this.loadImage();
-    }
+    }
-  }
+  }
-
+
-  private loadImage() {
+  private loadImage() {
-    const img = this.el.nativeElement;
+    const img = this.el.nativeElement;
-    const src = this.appLazyLoad || img.getAttribute('data-src');
+    const src = this.appLazyLoad || img.getAttribute('data-src');
-
+
-    if (src) {
+    if (src) {
-      // Create a new image to preload
+      // Create a new image to preload
-      const tempImg = new Image();
+      const tempImg = new Image();
-
+
-      tempImg.onload = () => {
+      tempImg.onload = () => {
-        this.renderer.setAttribute(img, 'src', src);
+        this.renderer.setAttribute(img, 'src', src);
-        this.renderer.removeClass(img, 'lazy-loading');
+        this.renderer.removeClass(img, 'lazy-loading');
-        this.renderer.addClass(img, 'lazy-loaded');
+        this.renderer.addClass(img, 'lazy-loaded');
-
+
-        // Disconnect observer after loading
+        // Disconnect observer after loading
-        if (this.observer) {
+        if (this.observer) {
-          this.observer.disconnect();
+          this.observer.disconnect();
-        }
+        }
-      };
+      };
-
+
-      tempImg.onerror = () => {
+      tempImg.onerror = () => {
-        console.error('Failed to load image:', src);
+        console.error('Failed to load image:', src);
-        this.renderer.removeClass(img, 'lazy-loading');
+        this.renderer.removeClass(img, 'lazy-loading');
-        this.renderer.addClass(img, 'lazy-error');
+        this.renderer.addClass(img, 'lazy-error');
-
+
-        if (this.observer) {
+        if (this.observer) {
-          this.observer.disconnect();
+          this.observer.disconnect();
-        }
+        }
-      };
+      };
-
+
-      tempImg.src = src;
+      tempImg.src = src;
-    }
+    }
-  }
+  }
-
+
-  ngOnDestroy() {
+  ngOnDestroy() {
-    if (this.observer) {
+    if (this.observer) {
-      this.observer.disconnect();
+      this.observer.disconnect();
-    }
+    }
-  }
+  }
-}
+}

bizmatch/src/app/guards/auth.guard.ts

@@ -1,15 +1,27 @@
-import { Injectable } from '@angular/core';
+import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
 import { CanActivate, Router } from '@angular/router';
 import { AuthService } from '../services/auth.service';
-import { createLogger } from '../utils/utils';
+import { isPlatformBrowser } from '@angular/common';
-const logger = createLogger('AuthGuard');
+
 @Injectable({
   providedIn: 'root',
 })
 export class AuthGuard implements CanActivate {
-  constructor(private authService: AuthService, private router: Router) {}
+  
+  constructor(
+    private authService: AuthService, 
+    private router: Router,
+    @Inject(PLATFORM_ID) private platformId: Object
+  ) {}
 
   async canActivate(): Promise<boolean> {
+    // 1. SSR CHECK: Wenn wir auf dem Server sind, immer erlauben!
+    // Der Server soll nicht redirecten, sondern einfach das HTML rendern.
+    if (!isPlatformBrowser(this.platformId)) {
+      return true; 
+    }
+
+    // 2. CLIENT CHECK: Das läuft nur im Browser
     const token = await this.authService.getToken();
     if (token) {
       return true;

bizmatch/src/app/guards/listing-category.guard.ts

@@ -1,36 +1,36 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
-import { Observable, of } from 'rxjs';
+import { Observable, of } from 'rxjs';
-import { catchError, tap } from 'rxjs/operators';
+import { catchError, tap } from 'rxjs/operators';
-import { environment } from '../../environments/environment';
+import { environment } from '../../environments/environment';
-
+
-@Injectable({
+@Injectable({
-  providedIn: 'root',
+  providedIn: 'root',
-})
+})
-export class ListingCategoryGuard implements CanActivate {
+export class ListingCategoryGuard implements CanActivate {
-  private apiBaseUrl = environment.apiBaseUrl;
+  private apiBaseUrl = environment.apiBaseUrl;
-  constructor(private http: HttpClient, private router: Router) {}
+  constructor(private http: HttpClient, private router: Router) {}
-
+
-  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
-    const id = route.paramMap.get('id');
+    const id = route.paramMap.get('id');
-    const url = `${this.apiBaseUrl}/bizmatch/listings/undefined/${id}`;
+    const url = `${this.apiBaseUrl}/bizmatch/listings/undefined/${id}`;
-
+
-    return this.http.get<any>(url).pipe(
+    return this.http.get<any>(url).pipe(
-      tap(response => {
+      tap(response => {
-        const category = response.listingsCategory;
+        const category = response.listingsCategory;
-        const slug = response.slug || id;
+        const slug = response.slug || id;
-        if (category === 'business') {
+        if (category === 'business') {
-          this.router.navigate(['business', slug]);
+          this.router.navigate(['business', slug]);
-        } else if (category === 'commercialProperty') {
+        } else if (category === 'commercialProperty') {
-          this.router.navigate(['commercial-property', slug]);
+          this.router.navigate(['commercial-property', slug]);
-        } else {
+        } else {
-          this.router.navigate(['not-found']);
+          this.router.navigate(['not-found']);
-        }
+        }
-      }),
+      }),
-      catchError(() => {
+      catchError(() => {
-        return of(this.router.createUrlTree(['/not-found']));
+        return of(this.router.createUrlTree(['/not-found']));
-      }),
+      }),
-    );
+    );
-  }
+  }
-}
+}

bizmatch/src/app/pages/details/base-details.component.ts

@@ -1,150 +1,150 @@
-import { Component, inject, PLATFORM_ID } from '@angular/core';
+import { Component, inject, PLATFORM_ID } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
+import { isPlatformBrowser } from '@angular/common';
-import { Control, DomEvent, DomUtil, icon, Icon, latLng, Layer, Map, MapOptions, Marker, tileLayer } from 'leaflet';
+import { Control, DomEvent, DomUtil, icon, Icon, latLng, Layer, Map, MapOptions, Marker, tileLayer } from 'leaflet';
-import { BusinessListing, CommercialPropertyListing } from '../../../../../bizmatch-server/src/models/db.model';
+import { BusinessListing, CommercialPropertyListing } from '../../../../../bizmatch-server/src/models/db.model';
-
+
-@Component({
+@Component({
-  selector: 'app-base-details',
+  selector: 'app-base-details',
-  template: ``,
+  template: ``,
-  standalone: true,
+  standalone: true,
-  imports: [],
+  imports: [],
-})
+})
-export abstract class BaseDetailsComponent {
+export abstract class BaseDetailsComponent {
-  // Leaflet-Map-Einstellungen
+  // Leaflet-Map-Einstellungen
-  mapOptions: MapOptions;
+  mapOptions: MapOptions;
-  mapLayers: Layer[] = [];
+  mapLayers: Layer[] = [];
-  mapCenter: any;
+  mapCenter: any;
-  mapZoom: number = 13;
+  mapZoom: number = 13;
-  protected listing: BusinessListing | CommercialPropertyListing;
+  protected listing: BusinessListing | CommercialPropertyListing;
-  protected isBrowser: boolean;
+  protected isBrowser: boolean;
-  private platformId = inject(PLATFORM_ID);
+  private platformId = inject(PLATFORM_ID);
-
+
-  constructor() {
+  constructor() {
-    this.isBrowser = isPlatformBrowser(this.platformId);
+    this.isBrowser = isPlatformBrowser(this.platformId);
-    // Only initialize mapOptions in browser context
+    // Only initialize mapOptions in browser context
-    if (this.isBrowser) {
+    if (this.isBrowser) {
-      this.mapOptions = {
+      this.mapOptions = {
-        layers: [
+        layers: [
-          tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '© OpenStreetMap contributors',
+            attribution: '© OpenStreetMap contributors',
-          }),
+          }),
-        ],
+        ],
-        zoom: this.mapZoom,
+        zoom: this.mapZoom,
-        center: latLng(0, 0),
+        center: latLng(0, 0),
-      };
+      };
-    }
+    }
-  }
+  }
-
+
-  protected configureMap() {
+  protected configureMap() {
-    if (!this.isBrowser) {
+    if (!this.isBrowser) {
-      return; // Skip on server
+      return; // Skip on server
-    }
+    }
-
+
-    const latitude = this.listing.location.latitude;
+    const latitude = this.listing.location.latitude;
-    const longitude = this.listing.location.longitude;
+    const longitude = this.listing.location.longitude;
-
+
-    if (latitude !== null && latitude !== undefined &&
+    if (latitude !== null && latitude !== undefined &&
-      longitude !== null && longitude !== undefined) {
+      longitude !== null && longitude !== undefined) {
-      this.mapCenter = latLng(latitude, longitude);
+      this.mapCenter = latLng(latitude, longitude);
-
+
-      const addressParts = [];
+      const addressParts = [];
-      if (this.listing.location.housenumber) addressParts.push(this.listing.location.housenumber);
+      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.street) addressParts.push(this.listing.location.street);
-      if (this.listing.location.name) addressParts.push(this.listing.location.name);
+      if (this.listing.location.name) addressParts.push(this.listing.location.name);
-      else if (this.listing.location.county) addressParts.push(this.listing.location.county);
+      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.state) addressParts.push(this.listing.location.state);
-      if (this.listing.location.zipCode) addressParts.push(this.listing.location.zipCode);
+      if (this.listing.location.zipCode) addressParts.push(this.listing.location.zipCode);
-
+
-      const fullAddress = addressParts.join(', ');
+      const fullAddress = addressParts.join(', ');
-
+
-      const marker = new Marker([latitude, longitude], {
+      const marker = new Marker([latitude, longitude], {
-        icon: icon({
+        icon: icon({
-          ...Icon.Default.prototype.options,
+          ...Icon.Default.prototype.options,
-          iconUrl: 'assets/leaflet/marker-icon.png',
+          iconUrl: 'assets/leaflet/marker-icon.png',
-          iconRetinaUrl: 'assets/leaflet/marker-icon-2x.png',
+          iconRetinaUrl: 'assets/leaflet/marker-icon-2x.png',
-          shadowUrl: 'assets/leaflet/marker-shadow.png',
+          shadowUrl: 'assets/leaflet/marker-shadow.png',
-        }),
+        }),
-      });
+      });
-
+
-      if (fullAddress) {
+      if (fullAddress) {
-        marker.bindPopup(`
+        marker.bindPopup(`
-          <div style="padding: 8px;">
+          <div style="padding: 8px;">
-            <strong>Location:</strong><br/>
+            <strong>Location:</strong><br/>
-            ${fullAddress}
+            ${fullAddress}
-          </div>
+          </div>
-        `);
+        `);
-      }
+      }
-
+
-      this.mapLayers = [
+      this.mapLayers = [
-        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-          attribution: '&copy; OpenStreetMap contributors',
+          attribution: '&copy; OpenStreetMap contributors',
-        }),
+        }),
-        marker
+        marker
-      ];
+      ];
-      this.mapOptions = {
+      this.mapOptions = {
-        ...this.mapOptions,
+        ...this.mapOptions,
-        center: this.mapCenter,
+        center: this.mapCenter,
-        zoom: this.mapZoom,
+        zoom: this.mapZoom,
-      };
+      };
-    }
+    }
-  }
+  }
-
+
-  onMapReady(map: Map) {
+  onMapReady(map: Map) {
-    if (!this.isBrowser) {
+    if (!this.isBrowser) {
-      return;
+      return;
-    }
+    }
-
+
-    const addressParts = [];
+    const addressParts = [];
-    if (this.listing.location.housenumber) addressParts.push(this.listing.location.housenumber);
+    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.street) addressParts.push(this.listing.location.street);
-    if (this.listing.location.name) addressParts.push(this.listing.location.name);
+    if (this.listing.location.name) addressParts.push(this.listing.location.name);
-    else if (this.listing.location.county) addressParts.push(this.listing.location.county);
+    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.state) addressParts.push(this.listing.location.state);
-    if (this.listing.location.zipCode) addressParts.push(this.listing.location.zipCode);
+    if (this.listing.location.zipCode) addressParts.push(this.listing.location.zipCode);
-
+
-    if (addressParts.length > 0) {
+    if (addressParts.length > 0) {
-      const addressControl = new Control({ position: 'topright' });
+      const addressControl = new Control({ position: 'topright' });
-
+
-      addressControl.onAdd = () => {
+      addressControl.onAdd = () => {
-        const container = DomUtil.create('div', 'address-control bg-white p-2 rounded shadow');
+        const container = DomUtil.create('div', 'address-control bg-white p-2 rounded shadow');
-        const address = addressParts.join(', ');
+        const address = addressParts.join(', ');
-        container.innerHTML = `
+        container.innerHTML = `
-          <div style="max-width: 250px;">
+          <div style="max-width: 250px;">
-            ${address}<br/>
+            ${address}<br/>
-            <a href="#" id="view-full-map" style="color: #2563eb; text-decoration: underline;">View larger map</a>
+            <a href="#" id="view-full-map" style="color: #2563eb; text-decoration: underline;">View larger map</a>
-          </div>
+          </div>
-        `;
+        `;
-
+
-        DomEvent.disableClickPropagation(container);
+        DomEvent.disableClickPropagation(container);
-
+
-        const link = container.querySelector('#view-full-map') as HTMLElement;
+        const link = container.querySelector('#view-full-map') as HTMLElement;
-        if (link) {
+        if (link) {
-          DomEvent.on(link, 'click', (e: Event) => {
+          DomEvent.on(link, 'click', (e: Event) => {
-            e.preventDefault();
+            e.preventDefault();
-            this.openFullMap();
+            this.openFullMap();
-          });
+          });
-        }
+        }
-
+
-        return container;
+        return container;
-      };
+      };
-
+
-      addressControl.addTo(map);
+      addressControl.addTo(map);
-    }
+    }
-  }
+  }
-
+
-  openFullMap() {
+  openFullMap() {
-    if (!this.isBrowser) {
+    if (!this.isBrowser) {
-      return;
+      return;
-    }
+    }
-
+
-    const latitude = this.listing.location.latitude;
+    const latitude = this.listing.location.latitude;
-    const longitude = this.listing.location.longitude;
+    const longitude = this.listing.location.longitude;
-    const url = `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=15/${latitude}/${longitude}`;
+    const url = `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=15/${latitude}/${longitude}`;
-
+
-    window.open(url, '_blank');
+    window.open(url, '_blank');
-  }
+  }
-}
+}
-
+
-
+
-
+
-
+

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

@@ -1,223 +1,223 @@
-<div class="container mx-auto p-4">
+<div class="container mx-auto p-4">
-  <!-- Breadcrumbs for SEO and Navigation -->
+  <!-- Breadcrumbs for SEO and Navigation -->
-  @if(breadcrumbs.length > 0) {
+  @if(breadcrumbs.length > 0) {
-  <app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
+  <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">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden relative">
-    <button (click)="historyService.goBack()"
+    <button (click)="historyService.goBack()" aria-label="Go back"
-      class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 print:hidden">
+      class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-10 h-10 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 print:hidden">
-      <i class="fas fa-times"></i>
+      <i class="fas fa-times"></i>
-    </button>
+    </button>
-    @if(listing){
+    @if(listing){
-    <div class="p-6 flex flex-col lg:flex-row">
+    <div class="p-6 flex flex-col lg:flex-row">
-      <!-- Left column -->
+      <!-- Left column -->
-      <div class="w-full lg:w-1/2 pr-0 lg:pr-6">
+      <div class="w-full lg:w-1/2 pr-0 lg:pr-6">
-        <h1 class="text-2xl font-bold mb-4 break-words">{{ listing.title }}</h1>
+        <h1 class="text-2xl font-bold mb-4 break-words">{{ listing.title }}</h1>
-        <p class="mb-4 break-words" [innerHTML]="description"></p>
+        <p class="mb-4 break-words" [innerHTML]="description"></p>
-
+
-        <div class="space-y-2">
+        <div class="space-y-2">
-          <div *ngFor="let detail of listingDetails; let i = index" class="flex flex-col sm:flex-row"
+          <div *ngFor="let detail of listingDetails; let i = index" class="flex flex-col sm:flex-row"
-            [ngClass]="{ 'bg-neutral-100': i % 2 === 0 }">
+            [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-1/3 font-semibold p-2">{{ detail.label }}</div>
-
+
-            <div class="w-full sm:w-2/3 p-2 break-words" *ngIf="!detail.isHtml && !detail.isListingBy">{{ detail.value
+            <div class="w-full sm:w-2/3 p-2 break-words" *ngIf="!detail.isHtml && !detail.isListingBy">{{ detail.value
-              }}</div>
+              }}</div>
-
+
-            <div class="w-full sm:w-2/3 p-2 flex space-x-2 break-words" [innerHTML]="detail.value"
+            <div class="w-full sm:w-2/3 p-2 flex space-x-2 break-words" [innerHTML]="detail.value"
-              *ngIf="detail.isHtml && !detail.isListingBy"></div>
+              *ngIf="detail.isHtml && !detail.isListingBy"></div>
-
+
-            <div class="w-full sm:w-2/3 p-2 flex space-x-2" *ngIf="detail.isListingBy && listingUser">
+            <div class="w-full sm:w-2/3 p-2 flex space-x-2" *ngIf="detail.isListingBy && listingUser">
-              <a routerLink="/details-user/{{ listingUser.id }}"
+              <a routerLink="/details-user/{{ listingUser.id }}"
-                class="text-primary-600 dark:text-primary-500 hover:underline">{{ listingUser.firstname }} {{
+                class="text-primary-600 dark:text-primary-500 hover:underline">{{ listingUser.firstname }} {{
-                listingUser.lastname }}</a>
+                listingUser.lastname }}</a>
-              <div class="relative w-[100px] h-[30px] mr-5 lg:mb-0" *ngIf="listing.imageName">
+              <div class="relative w-[100px] h-[30px] mr-5 lg:mb-0" *ngIf="listing.imageName">
-                <img ngSrc="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" fill
+                <img ngSrc="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" fill
-                  class="object-contain"
+                  class="object-contain"
-                  alt="Business logo for {{ listingUser.firstname }} {{ listingUser.lastname }}" />
+                  alt="Business logo for {{ listingUser.firstname }} {{ listingUser.lastname }}" />
-              </div>
+              </div>
-            </div>
+            </div>
-          </div>
+          </div>
-        </div>
+        </div>
-        <div class="py-4 print:hidden">
+        <div class="py-4 print:hidden">
-          @if(listing && listingUser && (listingUser?.email===user?.email || (authService.isAdmin() | async))){
+          @if(listing && listingUser && (listingUser?.email===user?.email || (authService.isAdmin() | async))){
-          <div class="inline">
+          <div class="inline">
-            <button class="share share-edit text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+            <button class="share share-edit text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-              [routerLink]="['/editBusinessListing', listing.id]">
+              [routerLink]="['/editBusinessListing', listing.id]">
-              <i class="fa-regular fa-pen-to-square"></i>
+              <i class="fa-regular fa-pen-to-square"></i>
-              <span class="ml-2">Edit</span>
+              <span class="ml-2">Edit</span>
-            </button>
+            </button>
-          </div>
+          </div>
-          } @if(user){
+          } @if(user){
-          <div class="inline">
+          <div class="inline">
-            <button class="share share-save text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+            <button class="share share-save text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-              (click)="toggleFavorite()">
+              (click)="toggleFavorite()">
-              <i class="fa-regular fa-heart"></i>
+              <i class="fa-regular fa-heart"></i>
-              @if(listing.favoritesForUser.includes(user.email)){
+              @if(listing.favoritesForUser.includes(user.email)){
-              <span class="ml-2">Saved ...</span>
+              <span class="ml-2">Saved ...</span>
-              }@else {
+              }@else {
-              <span class="ml-2">Save</span>
+              <span class="ml-2">Save</span>
-              }
+              }
-            </button>
+            </button>
-          </div>
+          </div>
-          }
+          }
-          <share-button button="print" showText="true" (click)="createEvent('print')"></share-button>
+          <share-button button="print" showText="true" (click)="createEvent('print')"></share-button>
-          <!-- <share-button button="email" showText="true"></share-button> -->
+          <!-- <share-button button="email" showText="true"></share-button> -->
-          <div class="inline">
+          <div class="inline">
-            <button class="share share-email text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+            <button class="share share-email text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-              (click)="showShareByEMail()">
+              (click)="showShareByEMail()">
-              <i class="fa-solid fa-envelope"></i>
+              <i class="fa-solid fa-envelope"></i>
-              <span class="ml-2">Email</span>
+              <span class="ml-2">Email</span>
-            </button>
+            </button>
-          </div>
+          </div>
-
+
-          <div class="inline">
+          <div class="inline">
-            <button type="button"
+            <button type="button"
-              class="share share-facebook text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+              class="share share-facebook text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-              (click)="shareToFacebook()">
+              (click)="shareToFacebook()">
-              <i class="fab fa-facebook"></i>
+              <i class="fab fa-facebook"></i>
-              <span class="ml-2">Facebook</span>
+              <span class="ml-2">Facebook</span>
-            </button>
+            </button>
-          </div>
+          </div>
-
+
-          <div class="inline">
+          <div class="inline">
-            <button type="button"
+            <button type="button"
-              class="share share-twitter text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+              class="share share-twitter text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-              (click)="shareToTwitter()">
+              (click)="shareToTwitter()">
-              <i class="fab fa-x-twitter"></i>
+              <i class="fab fa-x-twitter"></i>
-              <span class="ml-2">X</span>
+              <span class="ml-2">X</span>
-            </button>
+            </button>
-          </div>
+          </div>
-
+
-          <div class="inline">
+          <div class="inline">
-            <button type="button"
+            <button type="button"
-              class="share share-linkedin text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+              class="share share-linkedin text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-              (click)="shareToLinkedIn()">
+              (click)="shareToLinkedIn()">
-              <i class="fab fa-linkedin"></i>
+              <i class="fab fa-linkedin"></i>
-              <span class="ml-2">LinkedIn</span>
+              <span class="ml-2">LinkedIn</span>
-            </button>
+            </button>
-          </div>
+          </div>
-        </div>
+        </div>
-        <!-- Karte hinzufügen, wenn Straße vorhanden ist -->
+        <!-- Karte hinzufügen, wenn Straße vorhanden ist -->
-        <div *ngIf="listing.location.latitude && listing.location.longitude" class="mt-6">
+        <div *ngIf="listing.location.latitude && listing.location.longitude" class="mt-6">
-          <h2 class="text-xl font-semibold mb-2">Location Map</h2>
+          <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: 300px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers" [leafletCenter]="mapCenter" [leafletZoom]="mapZoom"></div> -->
-          <div style="height: 400px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers"
+          <div style="height: 400px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers"
-            [leafletCenter]="mapCenter" [leafletZoom]="mapZoom" (leafletMapReady)="onMapReady($event)"></div>
+            [leafletCenter]="mapCenter" [leafletZoom]="mapZoom" (leafletMapReady)="onMapReady($event)"></div>
-        </div>
+        </div>
-      </div>
+      </div>
-
+
-      <!-- Right column -->
+      <!-- Right column -->
-      <div class="w-full lg:w-1/2 mt-6 lg:mt-0 print:hidden">
+      <div class="w-full lg:w-1/2 mt-6 lg:mt-0 print:hidden">
-        <h2 class="md:mt-8 mb-4 text-xl font-bold">Contact the Author of this Listing</h2>
+        <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>
+        <p class="text-sm mb-4">Please include your contact info below</p>
-        <form class="space-y-4">
+        <form class="space-y-4">
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-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>
+            <app-validated-input label="Your Name" name="name" [(ngModel)]="mailinfo.sender.name"></app-validated-input>
-            <app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email"
+            <app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email"
-              kind="email"></app-validated-input>
+              kind="email"></app-validated-input>
-          </div>
+          </div>
-
+
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber"
+            <app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber"
-              mask="(000) 000-0000"></app-validated-input>
+              mask="(000) 000-0000"></app-validated-input>
-            <!-- <app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input> -->
+            <!-- <app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input> -->
-            <app-validated-ng-select label="State" name="state" [(ngModel)]="mailinfo.sender.state"
+            <app-validated-ng-select label="State" name="state" [(ngModel)]="mailinfo.sender.state"
-              [items]="selectOptions?.states"></app-validated-ng-select>
+              [items]="selectOptions?.states"></app-validated-ng-select>
-          </div>
+          </div>
-
+
-          <div>
+          <div>
-            <app-validated-textarea label="Questions/Comments" name="comments"
+            <app-validated-textarea label="Questions/Comments" name="comments"
-              [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
+              [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
-          </div>
+          </div>
-          <button (click)="mail()"
+          <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>
+            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>
+        </form>
-      </div>
+      </div>
-    </div>
+    </div>
-    }
+    }
-  </div>
+  </div>
-
+
-  <!-- FAQ Section for AEO (Answer Engine Optimization) -->
+  <!-- FAQ Section for AEO (Answer Engine Optimization) -->
-  @if(businessFAQs && businessFAQs.length > 0) {
+  @if(businessFAQs && businessFAQs.length > 0) {
-  <div class="container mx-auto p-4 mt-8">
+  <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">
+    <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">Frequently Asked Questions</h2>
+      <h2 class="text-2xl font-bold mb-6 text-gray-900">Frequently Asked Questions</h2>
-      <div class="space-y-4">
+      <div class="space-y-4">
-        @for (faq of businessFAQs; track $index) {
+        @for (faq of businessFAQs; track $index) {
-        <details
+        <details
-          class="group border border-gray-200 rounded-lg overflow-hidden hover:border-primary-300 transition-colors">
+          class="group border border-gray-200 rounded-lg overflow-hidden hover:border-primary-300 transition-colors">
-          <summary
+          <summary
-            class="flex items-center justify-between cursor-pointer p-4 bg-gray-50 hover:bg-gray-100 transition-colors">
+            class="flex items-center justify-between cursor-pointer p-4 bg-gray-50 hover:bg-gray-100 transition-colors">
-            <h3 class="text-lg font-semibold text-gray-900">{{ faq.question }}</h3>
+            <h3 class="text-lg font-semibold text-gray-900">{{ faq.question }}</h3>
-            <svg class="w-5 h-5 text-gray-600 group-open:rotate-180 transition-transform" fill="none"
+            <svg class="w-5 h-5 text-gray-600 group-open:rotate-180 transition-transform" fill="none"
-              stroke="currentColor" viewBox="0 0 24 24">
+              stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-            </svg>
+            </svg>
-          </summary>
+          </summary>
-          <div class="p-4 bg-white border-t border-gray-200">
+          <div class="p-4 bg-white border-t border-gray-200">
-            <p class="text-gray-700 leading-relaxed">{{ faq.answer }}</p>
+            <p class="text-gray-700 leading-relaxed">{{ faq.answer }}</p>
-          </div>
+          </div>
-        </details>
+        </details>
-        }
+        }
-      </div>
+      </div>
-      <div class="mt-6 p-4 bg-primary-50 border-l-4 border-primary-500 rounded">
+      <div class="mt-6 p-4 bg-primary-50 border-l-4 border-primary-500 rounded">
-        <p class="text-sm text-gray-700">
+        <p class="text-sm text-gray-700">
-          <strong class="text-primary-700">Have more questions?</strong> Contact the seller directly using the form
+          <strong class="text-primary-700">Have more questions?</strong> Contact the seller directly using the form
-          above or reach out to our support team for assistance.
+          above or reach out to our support team for assistance.
-        </p>
+        </p>
-      </div>
+      </div>
-    </div>
+    </div>
-  </div>
+  </div>
-  }
+  }
-
+
-  <!-- Related Listings Section for SEO Internal Linking -->
+  <!-- Related Listings Section for SEO Internal Linking -->
-  @if(relatedListings && relatedListings.length > 0) {
+  @if(relatedListings && relatedListings.length > 0) {
-  <div class="container mx-auto p-4 mt-8">
+  <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">
+    <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>
+      <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">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        @for (related of relatedListings; track related.id) {
+        @for (related of relatedListings; track related.id) {
-        <a [routerLink]="['/business', related.slug || related.id]" class="block group">
+        <a [routerLink]="['/business', related.slug || related.id]" class="block group">
-          <div
+          <div
-            class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
+            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="p-4">
-              <div class="flex items-center mb-3">
+              <div class="flex items-center mb-3">
-                <i [class]="selectOptions.getIconAndTextColorType(related.type)" class="mr-2 text-lg"></i>
+                <i [class]="selectOptions.getIconAndTextColorType(related.type)" class="mr-2 text-lg"></i>
-                <span [class]="selectOptions.getTextColorType(related.type)" class="font-semibold text-sm">{{
+                <span [class]="selectOptions.getTextColorType(related.type)" class="font-semibold text-sm">{{
-                  selectOptions.getBusiness(related.type) }}</span>
+                  selectOptions.getBusiness(related.type) }}</span>
-              </div>
+              </div>
-              <h3
+              <h3
-                class="text-lg font-bold mb-2 text-gray-900 group-hover:text-primary-600 transition-colors line-clamp-2">
+                class="text-lg font-bold mb-2 text-gray-900 group-hover:text-primary-600 transition-colors line-clamp-2">
-                {{ related.title }}</h3>
+                {{ related.title }}</h3>
-              <div class="space-y-1 text-sm text-gray-600">
+              <div class="space-y-1 text-sm text-gray-600">
-                <div class="flex justify-between">
+                <div class="flex justify-between">
-                  <span class="font-medium">Price:</span>
+                  <span class="font-medium">Price:</span>
-                  <span class="font-bold text-primary-600">${{ related.price?.toLocaleString() || 'Contact' }}</span>
+                  <span class="font-bold text-primary-600">${{ related.price?.toLocaleString() || 'Contact' }}</span>
-                </div>
+                </div>
-                @if(related.salesRevenue) {
+                @if(related.salesRevenue) {
-                <div class="flex justify-between">
+                <div class="flex justify-between">
-                  <span class="font-medium">Revenue:</span>
+                  <span class="font-medium">Revenue:</span>
-                  <span>${{ related.salesRevenue?.toLocaleString() }}</span>
+                  <span>${{ related.salesRevenue?.toLocaleString() }}</span>
-                </div>
+                </div>
-                }
+                }
-                <div class="flex justify-between">
+                <div class="flex justify-between">
-                  <span class="font-medium">Location:</span>
+                  <span class="font-medium">Location:</span>
-                  <span>{{ related.location.name || related.location.county }}, {{
+                  <span>{{ related.location.name || related.location.county }}, {{
-                    selectOptions.getState(related.location.state) }}</span>
+                    selectOptions.getState(related.location.state) }}</span>
-                </div>
+                </div>
-              </div>
+              </div>
-              <div class="mt-4">
+              <div class="mt-4">
-                <span
+                <span
-                  class="inline-block bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded">View
+                  class="inline-block bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded">View
-                  Details →</span>
+                  Details →</span>
-              </div>
+              </div>
-            </div>
+            </div>
-          </div>
+          </div>
-        </a>
+        </a>
-        }
+        }
-      </div>
+      </div>
-    </div>
+    </div>
-  </div>
+  </div>
-  }
+  }
 </div>

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

@@ -1,231 +1,231 @@
-<div class="container mx-auto p-4">
+<div class="container mx-auto p-4">
-  <!-- Breadcrumbs for SEO and Navigation -->
+  <!-- Breadcrumbs for SEO and Navigation -->
-  <app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
+  <app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
-
+
-  <div class="bg-white drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg rounded-lg overflow-hidden">
+  <div class="bg-white drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg rounded-lg overflow-hidden">
-    @if(listing){
+    @if(listing){
-    <div class="p-6 relative">
+    <div class="p-6 relative">
-      <h1 class="text-3xl font-bold mb-4 break-words">{{ listing?.title }}</h1>
+      <h1 class="text-3xl font-bold mb-4 break-words">{{ listing?.title }}</h1>
-      <button (click)="historyService.goBack()"
+      <button (click)="historyService.goBack()" aria-label="Go back"
-        class="print:hidden absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
+        class="print:hidden absolute top-4 right-4 bg-red-500 text-white rounded-full w-10 h-10 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
-        <i class="fas fa-times"></i>
+        <i class="fas fa-times"></i>
-      </button>
+      </button>
-      <div class="flex flex-col lg:flex-row">
+      <div class="flex flex-col lg:flex-row">
-        <div class="w-full lg:w-1/2 pr-0 lg:pr-4">
+        <div class="w-full lg:w-1/2 pr-0 lg:pr-4">
-          <p class="mb-4 break-words" [innerHTML]="description"></p>
+          <p class="mb-4 break-words" [innerHTML]="description"></p>
-
+
-          <div class="space-y-2">
+          <div class="space-y-2">
-            <div *ngFor="let detail of propertyDetails; let i = index" class="flex flex-col sm:flex-row"
+            <div *ngFor="let detail of propertyDetails; let i = index" class="flex flex-col sm:flex-row"
-              [ngClass]="{ 'bg-neutral-100': i % 2 === 0 }">
+              [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-1/3 font-semibold p-2">{{ detail.label }}</div>
-
+
-              <!-- Standard Text -->
+              <!-- Standard Text -->
-              <div class="w-full sm:w-2/3 p-2 break-words" *ngIf="!detail.isHtml && !detail.isListingBy">{{ detail.value
+              <div class="w-full sm:w-2/3 p-2 break-words" *ngIf="!detail.isHtml && !detail.isListingBy">{{ detail.value
-                }}</div>
+                }}</div>
-
+
-              <!-- HTML Content (nicht für RouterLink) -->
+              <!-- HTML Content (nicht für RouterLink) -->
-              <div class="w-full sm:w-2/3 p-2 flex space-x-2 break-words" [innerHTML]="detail.value"
+              <div class="w-full sm:w-2/3 p-2 flex space-x-2 break-words" [innerHTML]="detail.value"
-                *ngIf="detail.isHtml && !detail.isListingBy"></div>
+                *ngIf="detail.isHtml && !detail.isListingBy"></div>
-
+
-              <!-- Speziell für Listing By mit RouterLink -->
+              <!-- Speziell für Listing By mit RouterLink -->
-              <div class="w-full sm:w-2/3 p-2 flex space-x-2" *ngIf="detail.isListingBy && detail.user">
+              <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]"
+                <a [routerLink]="['/details-user', detail.user.id]"
-                  class="text-primary-600 dark:text-primary-500 hover:underline"> {{ detail.user.firstname }} {{
+                  class="text-primary-600 dark:text-primary-500 hover:underline"> {{ detail.user.firstname }} {{
-                  detail.user.lastname }} </a>
+                  detail.user.lastname }} </a>
-                <div class="relative w-[100px] h-[30px] mr-5 lg:mb-0" *ngIf="detail.user.hasCompanyLogo">
+                <div class="relative w-[100px] h-[30px] mr-5 lg:mb-0" *ngIf="detail.user.hasCompanyLogo">
-                  <img [ngSrc]="detail.imageBaseUrl + '/pictures/logo/' + detail.imagePath + '.avif?_ts=' + detail.ts"
+                  <img [ngSrc]="detail.imageBaseUrl + '/pictures/logo/' + detail.imagePath + '.avif?_ts=' + detail.ts"
-                    fill class="object-contain"
+                    fill class="object-contain"
-                    alt="Company logo for {{ detail.user.firstname }} {{ detail.user.lastname }}" />
+                    alt="Company logo for {{ detail.user.firstname }} {{ detail.user.lastname }}" />
-                </div>
+                </div>
-              </div>
+              </div>
-            </div>
+            </div>
-          </div>
+          </div>
-          <div class="py-4 print:hidden">
+          <div class="py-4 print:hidden">
-            @if(listing && listingUser && (listingUser?.email===user?.email || (authService.isAdmin() | async))){
+            @if(listing && listingUser && (listingUser?.email===user?.email || (authService.isAdmin() | async))){
-            <div class="inline">
+            <div class="inline">
-              <button class="share share-edit text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+              <button class="share share-edit text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-                [routerLink]="['/editCommercialPropertyListing', listing.id]">
+                [routerLink]="['/editCommercialPropertyListing', listing.id]">
-                <i class="fa-regular fa-pen-to-square"></i>
+                <i class="fa-regular fa-pen-to-square"></i>
-                <span class="ml-2">Edit</span>
+                <span class="ml-2">Edit</span>
-              </button>
+              </button>
-            </div>
+            </div>
-            } @if(user){
+            } @if(user){
-            <div class="inline">
+            <div class="inline">
-              <button class="share share-save text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+              <button class="share share-save text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-                (click)="toggleFavorite()">
+                (click)="toggleFavorite()">
-                <i class="fa-regular fa-heart"></i>
+                <i class="fa-regular fa-heart"></i>
-                @if(listing.favoritesForUser.includes(user.email)){
+                @if(listing.favoritesForUser.includes(user.email)){
-                <span class="ml-2">Saved ...</span>
+                <span class="ml-2">Saved ...</span>
-                }@else {
+                }@else {
-                <span class="ml-2">Save</span>
+                <span class="ml-2">Save</span>
-                }
+                }
-              </button>
+              </button>
-            </div>
+            </div>
-            }
+            }
-            <share-button button="print" showText="true" (click)="createEvent('print')"></share-button>
+            <share-button button="print" showText="true" (click)="createEvent('print')"></share-button>
-            <!-- <share-button button="email" showText="true"></share-button> -->
+            <!-- <share-button button="email" showText="true"></share-button> -->
-            <div class="inline">
+            <div class="inline">
-              <button class="share share-email text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+              <button class="share share-email text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-                (click)="showShareByEMail()">
+                (click)="showShareByEMail()">
-                <i class="fa-solid fa-envelope"></i>
+                <i class="fa-solid fa-envelope"></i>
-                <span class="ml-2">Email</span>
+                <span class="ml-2">Email</span>
-              </button>
+              </button>
-            </div>
+            </div>
-
+
-            <div class="inline">
+            <div class="inline">
-              <button type="button"
+              <button type="button"
-                class="share share-facebook text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+                class="share share-facebook text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-                (click)="shareToFacebook()">
+                (click)="shareToFacebook()">
-                <i class="fab fa-facebook"></i>
+                <i class="fab fa-facebook"></i>
-                <span class="ml-2">Facebook</span>
+                <span class="ml-2">Facebook</span>
-              </button>
+              </button>
-            </div>
+            </div>
-
+
-            <div class="inline">
+            <div class="inline">
-              <button type="button"
+              <button type="button"
-                class="share share-twitter text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+                class="share share-twitter text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-                (click)="shareToTwitter()">
+                (click)="shareToTwitter()">
-                <i class="fab fa-x-twitter"></i>
+                <i class="fab fa-x-twitter"></i>
-                <span class="ml-2">X</span>
+                <span class="ml-2">X</span>
-              </button>
+              </button>
-            </div>
+            </div>
-
+
-            <div class="inline">
+            <div class="inline">
-              <button type="button"
+              <button type="button"
-                class="share share-linkedin text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+                class="share share-linkedin text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-                (click)="shareToLinkedIn()">
+                (click)="shareToLinkedIn()">
-                <i class="fab fa-linkedin"></i>
+                <i class="fab fa-linkedin"></i>
-                <span class="ml-2">LinkedIn</span>
+                <span class="ml-2">LinkedIn</span>
-              </button>
+              </button>
-            </div>
+            </div>
-          </div>
+          </div>
-          <!-- Karte hinzufügen, wenn Straße vorhanden ist -->
+          <!-- Karte hinzufügen, wenn Straße vorhanden ist -->
-          <div *ngIf="listing.location.latitude && listing.location.longitude" 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>
+            <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: 300px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers" [leafletCenter]="mapCenter" [leafletZoom]="mapZoom"></div> -->
-            <div style="height: 400px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers"
+            <div style="height: 400px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers"
-              [leafletCenter]="mapCenter" [leafletZoom]="mapZoom" (leafletMapReady)="onMapReady($event)"></div>
+              [leafletCenter]="mapCenter" [leafletZoom]="mapZoom" (leafletMapReady)="onMapReady($event)"></div>
-          </div>
+          </div>
-        </div>
+        </div>
-
+
-        <div class="w-full lg:w-1/2 mt-6 lg:mt-0">
+        <div class="w-full lg:w-1/2 mt-6 lg:mt-0">
-          @if(this.images.length>0){
+          @if(this.images.length>0){
-          <div class="block print:hidden">
+          <div class="block print:hidden">
-            <gallery [items]="images"></gallery>
+            <gallery [items]="images"></gallery>
-          </div>
+          </div>
-          }
+          }
-          <div class="print:hidden" [ngClass]="{ 'mt-6': this.images.length > 0 }">
+          <div class="print:hidden" [ngClass]="{ 'mt-6': this.images.length > 0 }">
-            @if(this.images.length>0){
+            @if(this.images.length>0){
-            <h2 class="text-xl font-semibold">Contact the Author of this Listing</h2>
+            <h2 class="text-xl font-semibold">Contact the Author of this Listing</h2>
-            }@else {
+            }@else {
-            <div class="text-2xl font-bold mb-4">Contact the Author of this Listing</div>
+            <div class="text-2xl font-bold mb-4">Contact the Author of this Listing</div>
-            }
+            }
-            <p class="text-sm text-neutral-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">
+            <form class="space-y-4">
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <app-validated-input label="Your Name" name="name"
+                <app-validated-input label="Your Name" name="name"
-                  [(ngModel)]="mailinfo.sender.name"></app-validated-input>
+                  [(ngModel)]="mailinfo.sender.name"></app-validated-input>
-                <app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email"
+                <app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email"
-                  kind="email"></app-validated-input>
+                  kind="email"></app-validated-input>
-              </div>
+              </div>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber"
+                <app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber"
-                  mask="(000) 000-0000"></app-validated-input>
+                  mask="(000) 000-0000"></app-validated-input>
-                <!-- <app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input> -->
+                <!-- <app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input> -->
-                <app-validated-ng-select label="State" name="state" [(ngModel)]="mailinfo.sender.state"
+                <app-validated-ng-select label="State" name="state" [(ngModel)]="mailinfo.sender.state"
-                  [items]="selectOptions?.states"></app-validated-ng-select>
+                  [items]="selectOptions?.states"></app-validated-ng-select>
-              </div>
+              </div>
-              <div>
+              <div>
-                <app-validated-textarea label="Questions/Comments" name="comments"
+                <app-validated-textarea label="Questions/Comments" name="comments"
-                  [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
+                  [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
-              </div>
+              </div>
-
+
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between">
-                <button (click)="mail()"
+                <button (click)="mail()"
-                  class="bg-primary-500 text-white px-4 py-2 rounded hover:bg-primary-600">Submit</button>
+                  class="bg-primary-500 text-white px-4 py-2 rounded hover:bg-primary-600">Submit</button>
-              </div>
+              </div>
-            </form>
+            </form>
-          </div>
+          </div>
-        </div>
+        </div>
-      </div>
+      </div>
-    </div>
+    </div>
-    }
+    }
-  </div>
+  </div>
-
+
-  <!-- FAQ Section for AEO (Answer Engine Optimization) -->
+  <!-- FAQ Section for AEO (Answer Engine Optimization) -->
-  @if(propertyFAQs && propertyFAQs.length > 0) {
+  @if(propertyFAQs && propertyFAQs.length > 0) {
-  <div class="container mx-auto p-4 mt-8">
+  <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">
+    <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">Frequently Asked Questions</h2>
+      <h2 class="text-2xl font-bold mb-6 text-gray-900">Frequently Asked Questions</h2>
-      <div class="space-y-4">
+      <div class="space-y-4">
-        @for (faq of propertyFAQs; track $index) {
+        @for (faq of propertyFAQs; track $index) {
-        <details
+        <details
-          class="group border border-gray-200 rounded-lg overflow-hidden hover:border-primary-300 transition-colors">
+          class="group border border-gray-200 rounded-lg overflow-hidden hover:border-primary-300 transition-colors">
-          <summary
+          <summary
-            class="flex items-center justify-between cursor-pointer p-4 bg-gray-50 hover:bg-gray-100 transition-colors">
+            class="flex items-center justify-between cursor-pointer p-4 bg-gray-50 hover:bg-gray-100 transition-colors">
-            <h3 class="text-lg font-semibold text-gray-900">{{ faq.question }}</h3>
+            <h3 class="text-lg font-semibold text-gray-900">{{ faq.question }}</h3>
-            <svg class="w-5 h-5 text-gray-600 group-open:rotate-180 transition-transform" fill="none"
+            <svg class="w-5 h-5 text-gray-600 group-open:rotate-180 transition-transform" fill="none"
-              stroke="currentColor" viewBox="0 0 24 24">
+              stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-            </svg>
+            </svg>
-          </summary>
+          </summary>
-          <div class="p-4 bg-white border-t border-gray-200">
+          <div class="p-4 bg-white border-t border-gray-200">
-            <p class="text-gray-700 leading-relaxed">{{ faq.answer }}</p>
+            <p class="text-gray-700 leading-relaxed">{{ faq.answer }}</p>
-          </div>
+          </div>
-        </details>
+        </details>
-        }
+        }
-      </div>
+      </div>
-      <div class="mt-6 p-4 bg-primary-50 border-l-4 border-primary-500 rounded">
+      <div class="mt-6 p-4 bg-primary-50 border-l-4 border-primary-500 rounded">
-        <p class="text-sm text-gray-700">
+        <p class="text-sm text-gray-700">
-          <strong class="text-primary-700">Have more questions?</strong> Contact the seller directly using the form
+          <strong class="text-primary-700">Have more questions?</strong> Contact the seller directly using the form
-          above or reach out to our support team for assistance.
+          above or reach out to our support team for assistance.
-        </p>
+        </p>
-      </div>
+      </div>
-    </div>
+    </div>
-  </div>
+  </div>
-  }
+  }
-
+
-  <!-- Related Listings Section for SEO Internal Linking -->
+  <!-- Related Listings Section for SEO Internal Linking -->
-  @if(relatedListings && relatedListings.length > 0) {
+  @if(relatedListings && relatedListings.length > 0) {
-  <div class="container mx-auto p-4 mt-8">
+  <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">
+    <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>
+      <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">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        @for (related of relatedListings; track related.id) {
+        @for (related of relatedListings; track related.id) {
-        <a [routerLink]="['/commercial-property', related.slug || related.id]" class="block group">
+        <a [routerLink]="['/commercial-property', related.slug || related.id]" class="block group">
-          <div
+          <div
-            class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
+            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="p-4">
-              <div class="flex items-center mb-3">
+              <div class="flex items-center mb-3">
-                <i [class]="selectOptions.getIconAndTextColorType(related.type)" class="mr-2 text-lg"></i>
+                <i [class]="selectOptions.getIconAndTextColorType(related.type)" class="mr-2 text-lg"></i>
-                <span [class]="selectOptions.getTextColorType(related.type)" class="font-semibold text-sm">{{
+                <span [class]="selectOptions.getTextColorType(related.type)" class="font-semibold text-sm">{{
-                  selectOptions.getCommercialProperty(related.type) }}</span>
+                  selectOptions.getCommercialProperty(related.type) }}</span>
-              </div>
+              </div>
-              <h3
+              <h3
-                class="text-lg font-bold mb-2 text-gray-900 group-hover:text-primary-600 transition-colors line-clamp-2">
+                class="text-lg font-bold mb-2 text-gray-900 group-hover:text-primary-600 transition-colors line-clamp-2">
-                {{ related.title }}</h3>
+                {{ related.title }}</h3>
-              <div class="space-y-1 text-sm text-gray-600">
+              <div class="space-y-1 text-sm text-gray-600">
-                <div class="flex justify-between">
+                <div class="flex justify-between">
-                  <span class="font-medium">Price:</span>
+                  <span class="font-medium">Price:</span>
-                  <span class="font-bold text-primary-600">${{ related.price?.toLocaleString() || 'Contact' }}</span>
+                  <span class="font-bold text-primary-600">${{ related.price?.toLocaleString() || 'Contact' }}</span>
-                </div>
+                </div>
-                <div class="flex justify-between">
+                <div class="flex justify-between">
-                  <span class="font-medium">Location:</span>
+                  <span class="font-medium">Location:</span>
-                  <span>{{ related.location.name || related.location.county }}, {{
+                  <span>{{ related.location.name || related.location.county }}, {{
-                    selectOptions.getState(related.location.state) }}</span>
+                    selectOptions.getState(related.location.state) }}</span>
-                </div>
+                </div>
-              </div>
+              </div>
-              <div class="mt-4">
+              <div class="mt-4">
-                <span
+                <span
-                  class="inline-block bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded">View
+                  class="inline-block bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded">View
-                  Details →</span>
+                  Details →</span>
-              </div>
+              </div>
-            </div>
+            </div>
-          </div>
+          </div>
-        </a>
+        </a>
-        }
+        }
-      </div>
+      </div>
-    </div>
+    </div>
-  </div>
+  </div>
-  }
+  }
 </div>

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

@@ -1,388 +1,409 @@
-import { ChangeDetectorRef, Component, NgZone } from '@angular/core';
+import { ChangeDetectorRef, Component, NgZone } from '@angular/core';
-import { NgOptimizedImage } from '@angular/common';
+import { NgOptimizedImage } from '@angular/common';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
-import { LeafletModule } from '@bluehalo/ngx-leaflet';
+import { LeafletModule } from '@bluehalo/ngx-leaflet';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { APP_ICONS } from '../../../utils/fontawesome-icons';
-import dayjs from 'dayjs';
+import dayjs from 'dayjs';
-import { GalleryModule, ImageItem } from 'ng-gallery';
+import { GALLERY_CONFIG, GalleryConfig, GalleryModule, ImageItem } from 'ng-gallery';
-import { lastValueFrom } from 'rxjs';
+import { lastValueFrom } from 'rxjs';
-import { CommercialPropertyListing, EventTypeEnum, ShareByEMail, User } from '../../../../../../bizmatch-server/src/models/db.model';
+import { CommercialPropertyListing, EventTypeEnum, ShareByEMail, User } from '../../../../../../bizmatch-server/src/models/db.model';
-import { CommercialPropertyListingCriteria, ErrorResponse, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
+import { CommercialPropertyListingCriteria, ErrorResponse, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
-import { environment } from '../../../../environments/environment';
+import { environment } from '../../../../environments/environment';
-import { EMailService } from '../../../components/email/email.service';
+import { EMailService } from '../../../components/email/email.service';
-import { MessageService } from '../../../components/message/message.service';
+import { MessageService } from '../../../components/message/message.service';
-import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
+import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
-import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component';
+import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component';
-import { ValidatedTextareaComponent } from '../../../components/validated-textarea/validated-textarea.component';
+import { ValidatedTextareaComponent } from '../../../components/validated-textarea/validated-textarea.component';
-import { ValidationMessagesService } from '../../../components/validation-messages.service';
+import { ValidationMessagesService } from '../../../components/validation-messages.service';
-import { AuditService } from '../../../services/audit.service';
+import { AuditService } from '../../../services/audit.service';
-import { AuthService } from '../../../services/auth.service';
+import { AuthService } from '../../../services/auth.service';
-import { HistoryService } from '../../../services/history.service';
+import { HistoryService } from '../../../services/history.service';
-import { ImageService } from '../../../services/image.service';
+import { ImageService } from '../../../services/image.service';
-import { ListingsService } from '../../../services/listings.service';
+import { ListingsService } from '../../../services/listings.service';
-import { MailService } from '../../../services/mail.service';
+import { MailService } from '../../../services/mail.service';
-import { SelectOptionsService } from '../../../services/select-options.service';
+import { SelectOptionsService } from '../../../services/select-options.service';
-import { SeoService } from '../../../services/seo.service';
+import { SeoService } from '../../../services/seo.service';
-import { UserService } from '../../../services/user.service';
+import { UserService } from '../../../services/user.service';
-import { SharedModule } from '../../../shared/shared/shared.module';
+import { SharedModule } from '../../../shared/shared/shared.module';
-import { createMailInfo, map2User } from '../../../utils/utils';
+import { createMailInfo, map2User } from '../../../utils/utils';
-import { BaseDetailsComponent } from '../base-details.component';
+import { BaseDetailsComponent } from '../base-details.component';
-import { BreadcrumbItem, BreadcrumbsComponent } from '../../../components/breadcrumbs/breadcrumbs.component';
+import { BreadcrumbItem, BreadcrumbsComponent } from '../../../components/breadcrumbs/breadcrumbs.component';
-import { ShareButton } from 'ngx-sharebuttons/button';
+import { ShareButton } from 'ngx-sharebuttons/button';
-
+import { provideShareButtonsOptions, SharerMethods, withConfig } from 'ngx-sharebuttons';
-@Component({
+import { shareIcons } from 'ngx-sharebuttons/icons';
-  selector: 'app-details-commercial-property-listing',
+
-  standalone: true,
+@Component({
-  imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ValidatedNgSelectComponent, GalleryModule, LeafletModule, BreadcrumbsComponent, ShareButton, NgOptimizedImage],
+  selector: 'app-details-commercial-property-listing',
-  providers: [],
+  standalone: true,
-  templateUrl: './details-commercial-property-listing.component.html',
+  imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ValidatedNgSelectComponent, GalleryModule, LeafletModule, BreadcrumbsComponent, ShareButton, NgOptimizedImage],
-  styleUrl: '../details.scss',
+  providers: [
-})
+    provideShareButtonsOptions(
-export class DetailsCommercialPropertyListingComponent extends BaseDetailsComponent {
+      shareIcons(),
-  responsiveOptions = [
+      withConfig({
-    {
+        debug: false,
-      breakpoint: '1199px',
+        sharerMethod: SharerMethods.Anchor,
-      numVisible: 1,
+      }),
-      numScroll: 1,
+    ),
-    },
+    {
-    {
+      provide: GALLERY_CONFIG,
-      breakpoint: '991px',
+      useValue: {
-      numVisible: 2,
+        autoHeight: true,
-      numScroll: 1,
+        imageSize: 'cover',
-    },
+      } as GalleryConfig,
-    {
+    },
-      breakpoint: '767px',
+  ],
-      numVisible: 1,
+  templateUrl: './details-commercial-property-listing.component.html',
-      numScroll: 1,
+  styleUrls: [
-    },
+    '../details.scss',
-  ];
+    '../../../../../node_modules/leaflet/dist/leaflet.css',
-  private id: string | undefined = this.activatedRoute.snapshot.params['slug'] as string | undefined;
+    '../../../../../node_modules/ngx-sharebuttons/themes/default.scss'
-  override listing: CommercialPropertyListing;
+  ],
-  criteria: CommercialPropertyListingCriteria;
+})
-  mailinfo: MailInfo;
+export class DetailsCommercialPropertyListingComponent extends BaseDetailsComponent {
-  environment = environment;
+  responsiveOptions = [
-  keycloakUser: KeycloakUser;
+    {
-  user: User;
+      breakpoint: '1199px',
-  listingUser: User;
+      numVisible: 1,
-  description: SafeHtml;
+      numScroll: 1,
-  ts = new Date().getTime();
+    },
-  env = environment;
+    {
-  errorResponse: ErrorResponse;
+      breakpoint: '991px',
-  faTimes = faTimes;
+      numVisible: 2,
-  propertyDetails = [];
+      numScroll: 1,
-  images: Array<ImageItem> = [];
+    },
-  relatedListings: CommercialPropertyListing[] = [];
+    {
-  breadcrumbs: BreadcrumbItem[] = [];
+      breakpoint: '767px',
-  propertyFAQs: Array<{ question: string; answer: string }> = [];
+      numVisible: 1,
-  constructor(
+      numScroll: 1,
-    private activatedRoute: ActivatedRoute,
+    },
-    private listingsService: ListingsService,
+  ];
-    private router: Router,
+  private id: string | undefined = this.activatedRoute.snapshot.params['slug'] as string | undefined;
-    private userService: UserService,
+  override listing: CommercialPropertyListing;
-    public selectOptions: SelectOptionsService,
+  criteria: CommercialPropertyListingCriteria;
-    private mailService: MailService,
+  mailinfo: MailInfo;
-    private sanitizer: DomSanitizer,
+  environment = environment;
-    public historyService: HistoryService,
+  keycloakUser: KeycloakUser;
-    private imageService: ImageService,
+  user: User;
-    private ngZone: NgZone,
+  listingUser: User;
-    private validationMessagesService: ValidationMessagesService,
+  description: SafeHtml;
-    private messageService: MessageService,
+  ts = new Date().getTime();
-    private auditService: AuditService,
+  env = environment;
-    private emailService: EMailService,
+  errorResponse: ErrorResponse;
-    public authService: AuthService,
+  faTimes = APP_ICONS.faTimes;
-    private seoService: SeoService,
+  propertyDetails = [];
-    private cdref: ChangeDetectorRef,
+  images: Array<ImageItem> = [];
-  ) {
+  relatedListings: CommercialPropertyListing[] = [];
-    super();
+  breadcrumbs: BreadcrumbItem[] = [];
-    this.mailinfo = { sender: { name: '', email: '', phoneNumber: '', state: '', comments: '' }, email: '', url: environment.mailinfoUrl };
+  propertyFAQs: Array<{ question: string; answer: string }> = [];
-  }
+  constructor(
-
+    private activatedRoute: ActivatedRoute,
-  async ngOnInit() {
+    private listingsService: ListingsService,
-    // Initialize default breadcrumbs first
+    private router: Router,
-    this.breadcrumbs = [
+    private userService: UserService,
-      { label: 'Home', url: '/home', icon: 'fas fa-home' },
+    public selectOptions: SelectOptionsService,
-      { label: 'Commercial Properties', url: '/commercialPropertyListings' }
+    private mailService: MailService,
-    ];
+    private sanitizer: DomSanitizer,
-
+    public historyService: HistoryService,
-    const token = await this.authService.getToken();
+    private imageService: ImageService,
-    this.keycloakUser = map2User(token);
+    private ngZone: NgZone,
-    if (this.keycloakUser) {
+    private validationMessagesService: ValidationMessagesService,
-      this.user = await this.userService.getByMail(this.keycloakUser.email);
+    private messageService: MessageService,
-      this.mailinfo = createMailInfo(this.user);
+    private auditService: AuditService,
-    }
+    private emailService: EMailService,
-    try {
+    public authService: AuthService,
-      this.listing = (await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'))) as CommercialPropertyListing;
+    private seoService: SeoService,
-      this.auditService.createEvent(this.listing.id, 'view', this.user?.email);
+    private cdref: ChangeDetectorRef,
-      this.listingUser = await this.userService.getByMail(this.listing.email);
+  ) {
-      this.description = this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
+    super();
-      import('flowbite').then(flowbite => {
+    this.mailinfo = { sender: { name: '', email: '', phoneNumber: '', state: '', comments: '' }, email: '', url: environment.mailinfoUrl };
-        flowbite.initCarousels();
+  }
-      });
+
-      this.propertyDetails = [
+  async ngOnInit() {
-        { label: 'Property Category', value: this.selectOptions.getCommercialProperty(this.listing.type) },
+    // Initialize default breadcrumbs first
-        { label: 'Located in', value: this.selectOptions.getState(this.listing.location.state) },
+    this.breadcrumbs = [
-        { label: this.listing.location.name ? 'City' : 'County', value: this.listing.location.name ? this.listing.location.name : this.listing.location.county },
+      { label: 'Home', url: '/home', icon: 'fas fa-home' },
-        { label: 'Asking Price:', value: `$${this.listing.price?.toLocaleString()}` },
+      { label: 'Commercial Properties', url: '/commercialPropertyListings' }
-        { label: 'Listed since', value: `${this.dateInserted()} - ${this.getDaysListed()} days` },
+    ];
-        {
+
-          label: 'Listing by',
+    const token = await this.authService.getToken();
-          value: null, // Wird nicht verwendet
+    this.keycloakUser = map2User(token);
-          isHtml: true,
+    if (this.keycloakUser) {
-          isListingBy: true, // Flag für den speziellen Fall
+      this.user = await this.userService.getByMail(this.keycloakUser.email);
-          user: this.listingUser, // Übergebe das User-Objekt
+      this.mailinfo = createMailInfo(this.user);
-          imagePath: this.listing.imagePath,
+    }
-          imageBaseUrl: this.env.imageBaseUrl,
+    try {
-          ts: this.ts,
+      this.listing = (await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'))) as CommercialPropertyListing;
-        },
+      this.auditService.createEvent(this.listing.id, 'view', this.user?.email);
-      ];
+      this.listingUser = await this.userService.getByMail(this.listing.email);
-      if (this.listing.draft) {
+      this.description = this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
-        this.propertyDetails.push({ label: 'Draft', value: this.listing.draft ? 'Yes' : 'No' });
+      import('flowbite').then(flowbite => {
-      }
+        flowbite.initCarousels();
-      if (this.listing.imageOrder && Array.isArray(this.listing.imageOrder)) {
+      });
-        this.listing.imageOrder.forEach(image => {
+      this.propertyDetails = [
-          const imageURL = `${this.env.imageBaseUrl}/pictures/property/${this.listing.imagePath}/${this.listing.serialId}/${image}`;
+        { label: 'Property Category', value: this.selectOptions.getCommercialProperty(this.listing.type) },
-          this.images.push(new ImageItem({ src: imageURL, thumb: imageURL }));
+        { label: 'Located in', value: this.selectOptions.getState(this.listing.location.state) },
-        });
+        { label: this.listing.location.name ? 'City' : 'County', value: this.listing.location.name ? this.listing.location.name : this.listing.location.county },
-      }
+        { label: 'Asking Price:', value: `$${this.listing.price?.toLocaleString()}` },
-      if (this.listing.location.latitude && this.listing.location.longitude) {
+        { label: 'Listed since', value: `${this.dateInserted()} - ${this.getDaysListed()} days` },
-        this.configureMap();
+        {
-      }
+          label: 'Listing by',
-
+          value: null, // Wird nicht verwendet
-      // Update SEO meta tags for commercial property
+          isHtml: true,
-      const propertyData = {
+          isListingBy: true, // Flag für den speziellen Fall
-        id: this.listing.id,
+          user: this.listingUser, // Übergebe das User-Objekt
-        propertyType: this.selectOptions.getCommercialProperty(this.listing.type),
+          imagePath: this.listing.imagePath,
-        propertyDescription: this.listing.description?.replace(/<[^>]*>/g, '').substring(0, 200) || '',
+          imageBaseUrl: this.env.imageBaseUrl,
-        askingPrice: this.listing.price,
+          ts: this.ts,
-        city: this.listing.location.name || this.listing.location.county || '',
+        },
-        state: this.listing.location.state,
+      ];
-        address: this.listing.location.street || '',
+      if (this.listing.draft) {
-        zip: this.listing.location.zipCode || '',
+        this.propertyDetails.push({ label: 'Draft', value: this.listing.draft ? 'Yes' : 'No' });
-        latitude: this.listing.location.latitude,
+      }
-        longitude: this.listing.location.longitude,
+      if (this.listing.imageOrder && Array.isArray(this.listing.imageOrder)) {
-        squareFootage: (this.listing as any).squareFeet,
+        this.listing.imageOrder.forEach(image => {
-        yearBuilt: (this.listing as any).yearBuilt,
+          const imageURL = `${this.env.imageBaseUrl}/pictures/property/${this.listing.imagePath}/${this.listing.serialId}/${image}`;
-        images: this.listing.imageOrder?.length > 0
+          this.images.push(new ImageItem({ src: imageURL, thumb: imageURL }));
-          ? this.listing.imageOrder.map(img =>
+        });
-            `${this.env.imageBaseUrl}/pictures/property/${this.listing.imagePath}/${this.listing.serialId}/${img}`)
+      }
-          : []
+      if (this.listing.location.latitude && this.listing.location.longitude) {
-      };
+        this.configureMap();
-      this.seoService.updateCommercialPropertyMeta(propertyData);
+      }
-
+
-      // Add RealEstateListing structured data
+      // Update SEO meta tags for commercial property
-      const realEstateSchema = this.seoService.generateRealEstateListingSchema(propertyData);
+      const propertyData = {
-      const breadcrumbSchema = this.seoService.generateBreadcrumbSchema([
+        id: this.listing.id,
-        { name: 'Home', url: '/' },
+        propertyType: this.selectOptions.getCommercialProperty(this.listing.type),
-        { name: 'Commercial Properties', url: '/commercialPropertyListings' },
+        propertyDescription: this.listing.description?.replace(/<[^>]*>/g, '').substring(0, 200) || '',
-        { name: propertyData.propertyType, url: `/details-commercial-property/${this.listing.id}` }
+        askingPrice: this.listing.price,
-      ]);
+        city: this.listing.location.name || this.listing.location.county || '',
-
+        state: this.listing.location.state,
-      // Generate FAQ for AEO (Answer Engine Optimization)
+        address: this.listing.location.street || '',
-      this.propertyFAQs = this.generatePropertyFAQ();
+        zip: this.listing.location.zipCode || '',
-      const faqSchema = this.seoService.generateFAQPageSchema(this.propertyFAQs);
+        latitude: this.listing.location.latitude,
-
+        longitude: this.listing.location.longitude,
-      // Inject all schemas including FAQ
+        squareFootage: (this.listing as any).squareFeet,
-      this.seoService.injectMultipleSchemas([realEstateSchema, breadcrumbSchema, faqSchema]);
+        yearBuilt: (this.listing as any).yearBuilt,
-
+        images: this.listing.imageOrder?.length > 0
-      // Generate breadcrumbs for navigation
+          ? this.listing.imageOrder.map(img =>
-      this.breadcrumbs = [
+            `${this.env.imageBaseUrl}/pictures/property/${this.listing.imagePath}/${this.listing.serialId}/${img}`)
-        { label: 'Home', url: '/home', icon: 'fas fa-home' },
+          : []
-        { label: 'Commercial Properties', url: '/commercialPropertyListings' },
+      };
-        { label: propertyData.propertyType, url: '/commercialPropertyListings' },
+      this.seoService.updateCommercialPropertyMeta(propertyData);
-        { label: this.listing.title }
+
-      ];
+      // Add RealEstateListing structured data
-
+      const realEstateSchema = this.seoService.generateRealEstateListingSchema(propertyData);
-      // Load related listings for internal linking (SEO improvement)
+      const breadcrumbSchema = this.seoService.generateBreadcrumbSchema([
-      this.loadRelatedListings();
+        { name: 'Home', url: '/' },
-    } catch (error) {
+        { name: 'Commercial Properties', url: '/commercialPropertyListings' },
-      // Set default breadcrumbs even on error
+        { name: propertyData.propertyType, url: `/details-commercial-property/${this.listing.id}` }
-      this.breadcrumbs = [
+      ]);
-        { label: 'Home', url: '/home', icon: 'fas fa-home' },
+
-        { label: 'Commercial Properties', url: '/commercialPropertyListings' }
+      // Generate FAQ for AEO (Answer Engine Optimization)
-      ];
+      this.propertyFAQs = this.generatePropertyFAQ();
-
+      const faqSchema = this.seoService.generateFAQPageSchema(this.propertyFAQs);
-      const errorMessage = error?.error?.message || error?.message || 'An error occurred while loading the listing';
+
-      this.auditService.log({ severity: 'error', text: errorMessage });
+      // Inject all schemas including FAQ
-      this.router.navigate(['notfound']);
+      this.seoService.injectMultipleSchemas([realEstateSchema, breadcrumbSchema, faqSchema]);
-    }
+
-
+      // Generate breadcrumbs for navigation
-    //this.initFlowbite();
+      this.breadcrumbs = [
-  }
+        { label: 'Home', url: '/home', icon: 'fas fa-home' },
-  /**
+        { label: 'Commercial Properties', url: '/commercialPropertyListings' },
-   * Load related commercial property listings based on same category, location, and price range
+        { label: propertyData.propertyType, url: '/commercialPropertyListings' },
-   * Improves SEO through internal linking
+        { label: this.listing.title }
-   */
+      ];
-  private async loadRelatedListings() {
+
-    try {
+      // Load related listings for internal linking (SEO improvement)
-      this.relatedListings = (await this.listingsService.getRelatedListings(this.listing, 'commercialProperty', 3)) as CommercialPropertyListing[];
+      this.loadRelatedListings();
-    } catch (error) {
+    } catch (error) {
-      console.error('Error loading related listings:', error);
+      // Set default breadcrumbs even on error
-      this.relatedListings = [];
+      this.breadcrumbs = [
-    }
+        { label: 'Home', url: '/home', icon: 'fas fa-home' },
-  }
+        { label: 'Commercial Properties', url: '/commercialPropertyListings' }
-
+      ];
-  /**
+
-   * Generate dynamic FAQ based on commercial property listing data
+      const errorMessage = error?.error?.message || error?.message || 'An error occurred while loading the listing';
-   * Provides AEO (Answer Engine Optimization) content
+      this.auditService.log({ severity: 'error', text: errorMessage });
-   */
+      this.router.navigate(['notfound']);
-  private generatePropertyFAQ(): Array<{ question: string; answer: string }> {
+    }
-    const faqs: Array<{ question: string; answer: string }> = [];
+
-
+    //this.initFlowbite();
-    // FAQ 1: What type of property is this?
+  }
-    faqs.push({
+  /**
-      question: 'What type of commercial property is this?',
+   * Load related commercial property listings based on same category, location, and price range
-      answer: `This is a ${this.selectOptions.getCommercialProperty(this.listing.type)} property located in ${this.listing.location.name || this.listing.location.county}, ${this.selectOptions.getState(this.listing.location.state)}.`
+   * Improves SEO through internal linking
-    });
+   */
-
+  private async loadRelatedListings() {
-    // FAQ 2: What is the asking price?
+    try {
-    if (this.listing.price) {
+      this.relatedListings = (await this.listingsService.getRelatedListings(this.listing, 'commercialProperty', 3)) as CommercialPropertyListing[];
-      faqs.push({
+    } catch (error) {
-        question: 'What is the asking price for this property?',
+      console.error('Error loading related listings:', error);
-        answer: `The asking price for this commercial property is $${this.listing.price.toLocaleString()}.`
+      this.relatedListings = [];
-      });
+    }
-    } else {
+  }
-      faqs.push({
+
-        question: 'What is the asking price for this property?',
+  /**
-        answer: 'The asking price is available upon request. Please contact the seller for detailed pricing information.'
+   * Generate dynamic FAQ based on commercial property listing data
-      });
+   * Provides AEO (Answer Engine Optimization) content
-    }
+   */
-
+  private generatePropertyFAQ(): Array<{ question: string; answer: string }> {
-    // FAQ 3: Where is the property located?
+    const faqs: Array<{ question: string; answer: string }> = [];
-    faqs.push({
+
-      question: 'Where is this commercial property located?',
+    // FAQ 1: What type of property is this?
-      answer: `The property is located in ${this.listing.location.name || this.listing.location.county}, ${this.selectOptions.getState(this.listing.location.state)}.${this.listing.location.street ? ' The exact address will be provided after initial contact.' : ''}`
+    faqs.push({
-    });
+      question: 'What type of commercial property is this?',
-
+      answer: `This is a ${this.selectOptions.getCommercialProperty(this.listing.type)} property located in ${this.listing.location.name || this.listing.location.county}, ${this.selectOptions.getState(this.listing.location.state)}.`
-    // FAQ 4: How long has the property been listed?
+    });
-    const daysListed = this.getDaysListed();
+
-    faqs.push({
+    // FAQ 2: What is the asking price?
-      question: 'How long has this property been on the market?',
+    if (this.listing.price) {
-      answer: `This property was listed on ${this.dateInserted()} and has been on the market for ${daysListed} ${daysListed === 1 ? 'day' : 'days'}.`
+      faqs.push({
-    });
+        question: 'What is the asking price for this property?',
-
+        answer: `The asking price for this commercial property is $${this.listing.price.toLocaleString()}.`
-    // FAQ 5: How can I schedule a viewing?
+      });
-    faqs.push({
+    } else {
-      question: 'How can I schedule a property viewing?',
+      faqs.push({
-      answer: 'To schedule a viewing of this commercial property, please use the contact form above to get in touch with the listing agent. They will coordinate a convenient time for you to visit the property.'
+        question: 'What is the asking price for this property?',
-    });
+        answer: 'The asking price is available upon request. Please contact the seller for detailed pricing information.'
-
+      });
-    // FAQ 6: What is the zoning for this property?
+    }
-    faqs.push({
+
-      question: 'What is this property suitable for?',
+    // FAQ 3: Where is the property located?
-      answer: `This ${this.selectOptions.getCommercialProperty(this.listing.type)} property is ideal for various commercial uses. Contact the seller for specific zoning information and permitted use details.`
+    faqs.push({
-    });
+      question: 'Where is this commercial property located?',
-
+      answer: `The property is located in ${this.listing.location.name || this.listing.location.county}, ${this.selectOptions.getState(this.listing.location.state)}.${this.listing.location.street ? ' The exact address will be provided after initial contact.' : ''}`
-    return faqs;
+    });
-  }
+
-
+    // FAQ 4: How long has the property been listed?
-  ngOnDestroy() {
+    const daysListed = this.getDaysListed();
-    this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
+    faqs.push({
-    this.seoService.clearStructuredData(); // Clean up SEO structured data
+      question: 'How long has this property been on the market?',
-  }
+      answer: `This property was listed on ${this.dateInserted()} and has been on the market for ${daysListed} ${daysListed === 1 ? 'day' : 'days'}.`
-  private initFlowbite() {
+    });
-    this.ngZone.runOutsideAngular(() => {
+
-      import('flowbite')
+    // FAQ 5: How can I schedule a viewing?
-        .then(flowbite => {
+    faqs.push({
-          flowbite.initCarousels();
+      question: 'How can I schedule a property viewing?',
-        })
+      answer: 'To schedule a viewing of this commercial property, please use the contact form above to get in touch with the listing agent. They will coordinate a convenient time for you to visit the property.'
-        .catch(error => console.error('Error initializing Flowbite:', error));
+    });
-    });
+
-  }
+    // FAQ 6: What is the zoning for this property?
-  async mail() {
+    faqs.push({
-    try {
+      question: 'What is this property suitable for?',
-      this.mailinfo.email = this.listingUser.email;
+      answer: `This ${this.selectOptions.getCommercialProperty(this.listing.type)} property is ideal for various commercial uses. Contact the seller for specific zoning information and permitted use details.`
-      this.mailinfo.listing = this.listing;
+    });
-      await this.mailService.mail(this.mailinfo);
+
-      this.validationMessagesService.clearMessages();
+    return faqs;
-      this.auditService.createEvent(this.listing.id, 'contact', this.user?.email, this.mailinfo.sender);
+  }
-      this.messageService.addMessage({ severity: 'success', text: 'Your message has been sent to the creator of the listing', duration: 3000 });
+
-      this.mailinfo = createMailInfo(this.user);
+  ngOnDestroy() {
-    } catch (error) {
+    this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
-      this.messageService.addMessage({
+    this.seoService.clearStructuredData(); // Clean up SEO structured data
-        severity: 'danger',
+  }
-        text: 'An error occurred while sending the request - Please check your inputs',
+  private initFlowbite() {
-        duration: 5000,
+    this.ngZone.runOutsideAngular(() => {
-      });
+      import('flowbite')
-      if (error.error && Array.isArray(error.error?.message)) {
+        .then(flowbite => {
-        this.validationMessagesService.updateMessages(error.error.message);
+          flowbite.initCarousels();
-      }
+        })
-    }
+        .catch(error => console.error('Error initializing Flowbite:', error));
-  }
+    });
-  containsError(fieldname: string) {
+  }
-    return this.errorResponse?.fields.map(f => f.fieldname).includes(fieldname);
+  async mail() {
-  }
+    try {
-  getImageIndices(): number[] {
+      this.mailinfo.email = this.listingUser.email;
-    return this.listing && this.listing.imageOrder ? this.listing.imageOrder.slice(1).map((e, i) => i + 1) : [];
+      this.mailinfo.listing = this.listing;
-  }
+      await this.mailService.mail(this.mailinfo);
-  async toggleFavorite() {
+      this.validationMessagesService.clearMessages();
-    try {
+      this.auditService.createEvent(this.listing.id, 'contact', this.user?.email, this.mailinfo.sender);
-      const isFavorited = this.listing.favoritesForUser.includes(this.user.email);
+      this.messageService.addMessage({ severity: 'success', text: 'Your message has been sent to the creator of the listing', duration: 3000 });
-
+      this.mailinfo = createMailInfo(this.user);
-      if (isFavorited) {
+    } catch (error) {
-        // Remove from favorites
+      this.messageService.addMessage({
-        await this.listingsService.removeFavorite(this.listing.id, 'commercialProperty');
+        severity: 'danger',
-        this.listing.favoritesForUser = this.listing.favoritesForUser.filter(
+        text: 'An error occurred while sending the request - Please check your inputs',
-          email => email !== this.user.email
+        duration: 5000,
-        );
+      });
-      } else {
+      if (error.error && Array.isArray(error.error?.message)) {
-        // Add to favorites
+        this.validationMessagesService.updateMessages(error.error.message);
-        await this.listingsService.addToFavorites(this.listing.id, 'commercialProperty');
+      }
-        this.listing.favoritesForUser.push(this.user.email);
+    }
-        this.auditService.createEvent(this.listing.id, 'favorite', this.user?.email);
+  }
-      }
+  containsError(fieldname: string) {
-
+    return this.errorResponse?.fields.map(f => f.fieldname).includes(fieldname);
-      this.cdref.detectChanges();
+  }
-    } catch (error) {
+  getImageIndices(): number[] {
-      console.error('Error toggling favorite:', error);
+    return this.listing && this.listing.imageOrder ? this.listing.imageOrder.slice(1).map((e, i) => i + 1) : [];
-    }
+  }
-  }
+  async toggleFavorite() {
-  async showShareByEMail() {
+    try {
-    const result = await this.emailService.showShareByEMail({
+      const isFavorited = this.listing.favoritesForUser.includes(this.user.email);
-      yourEmail: this.user ? this.user.email : '',
+
-      yourName: this.user ? `${this.user.firstname} ${this.user.lastname}` : '',
+      if (isFavorited) {
-      recipientEmail: '',
+        // Remove from favorites
-      url: environment.mailinfoUrl,
+        await this.listingsService.removeFavorite(this.listing.id, 'commercialProperty');
-      listingTitle: this.listing.title,
+        this.listing.favoritesForUser = this.listing.favoritesForUser.filter(
-      id: this.listing.id,
+          email => email !== this.user.email
-      type: 'commercialProperty',
+        );
-    });
+      } else {
-    if (result) {
+        // Add to favorites
-      this.auditService.createEvent(this.listing.id, 'email', this.user?.email, <ShareByEMail>result);
+        await this.listingsService.addToFavorites(this.listing.id, 'commercialProperty');
-      this.messageService.addMessage({
+        this.listing.favoritesForUser.push(this.user.email);
-        severity: 'success',
+        this.auditService.createEvent(this.listing.id, 'favorite', this.user?.email);
-        text: 'Your Email has beend sent',
+      }
-        duration: 5000,
+
-      });
+      this.cdref.detectChanges();
-    }
+    } catch (error) {
-  }
+      console.error('Error toggling favorite:', error);
-  createEvent(eventType: EventTypeEnum) {
+    }
-    this.auditService.createEvent(this.listing.id, eventType, this.user?.email);
+  }
-  }
+  async showShareByEMail() {
-
+    const result = await this.emailService.showShareByEMail({
-  shareToFacebook() {
+      yourEmail: this.user ? this.user.email : '',
-    const url = encodeURIComponent(window.location.href);
+      yourName: this.user ? `${this.user.firstname} ${this.user.lastname}` : '',
-    window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
+      recipientEmail: '',
-    this.createEvent('facebook');
+      url: environment.mailinfoUrl,
-  }
+      listingTitle: this.listing.title,
-
+      id: this.listing.id,
-  shareToTwitter() {
+      type: 'commercialProperty',
-    const url = encodeURIComponent(window.location.href);
+    });
-    const text = encodeURIComponent(this.listing?.title || 'Check out this commercial property');
+    if (result) {
-    window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank', 'width=600,height=400');
+      this.auditService.createEvent(this.listing.id, 'email', this.user?.email, <ShareByEMail>result);
-    this.createEvent('x');
+      this.messageService.addMessage({
-  }
+        severity: 'success',
-
+        text: 'Your Email has beend sent',
-  shareToLinkedIn() {
+        duration: 5000,
-    const url = encodeURIComponent(window.location.href);
+      });
-    window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank', 'width=600,height=400');
+    }
-    this.createEvent('linkedin');
+  }
-  }
+  createEvent(eventType: EventTypeEnum) {
-
+    this.auditService.createEvent(this.listing.id, eventType, this.user?.email);
-  getDaysListed() {
+  }
-    return dayjs().diff(this.listing.created, 'day');
+
-  }
+  shareToFacebook() {
-  dateInserted() {
+    const url = encodeURIComponent(window.location.href);
-    return dayjs(this.listing.created).format('DD/MM/YYYY');
+    window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
-  }
+    this.createEvent('facebook');
-}
+  }
+
+  shareToTwitter() {
+    const url = encodeURIComponent(window.location.href);
+    const text = encodeURIComponent(this.listing?.title || 'Check out this commercial property');
+    window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank', 'width=600,height=400');
+    this.createEvent('x');
+  }
+
+  shareToLinkedIn() {
+    const url = encodeURIComponent(window.location.href);
+    window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank', 'width=600,height=400');
+    this.createEvent('linkedin');
+  }
+
+  getDaysListed() {
+    return dayjs().diff(this.listing.created, 'day');
+  }
+  dateInserted() {
+    return dayjs(this.listing.created).format('DD/MM/YYYY');
+  }
+}

bizmatch/src/app/pages/details/details-user/details-user.component.html

@@ -1,221 +1,221 @@
-<div class="container mx-auto p-4">
+<div class="container mx-auto p-4">
-  <!-- Breadcrumbs -->
+  <!-- Breadcrumbs -->
-  <div class="mb-4">
+  <div class="mb-4">
-    <app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
+    <app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
-  </div>
+  </div>
-
+
-  @if(user){
+  @if(user){
-  <div class="bg-white drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg rounded-lg overflow-hidden">
+  <div class="bg-white drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg rounded-lg overflow-hidden">
-    <!-- Header -->
+    <!-- Header -->
-    <div class="flex items-center justify-between p-4 border-b relative">
+    <div class="flex items-center justify-between p-4 border-b relative">
-      <div class="flex items-center space-x-4">
+      <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" /> -->
+        <!-- <img src="https://placehold.co/80x80" alt="Profile picture of Avery Brown smiling" class="w-20 h-20 rounded-full" /> -->
-        @if(user.hasProfile){
+        @if(user.hasProfile){
-        <img ngSrc="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}"
+        <img ngSrc="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}"
-          class="w-20 h-20 rounded-full object-cover" width="80" height="80" priority
+          class="w-20 h-20 rounded-full object-cover" width="80" height="80" priority
-          alt="Profile picture of {{ user.firstname }} {{ user.lastname }}" />
+          alt="Profile picture of {{ user.firstname }} {{ user.lastname }}" />
-        } @else {
+        } @else {
-        <img ngSrc="assets/images/person_placeholder.jpg" class="w-20 h-20 rounded-full" width="80" height="80" priority
+        <img ngSrc="assets/images/person_placeholder.jpg" class="w-20 h-20 rounded-full" width="80" height="80" priority
-          alt="Default profile picture" />
+          alt="Default profile picture" />
-        }
+        }
-        <div>
+        <div>
-          <h1 class="text-2xl font-bold flex items-center">
+          <h1 class="text-2xl font-bold flex items-center">
-            {{ user.firstname }} {{ user.lastname }}
+            {{ user.firstname }} {{ user.lastname }}
-            <span class="text-yellow-400 ml-2">&#9733;</span>
+            <span class="text-yellow-400 ml-2">&#9733;</span>
-          </h1>
+          </h1>
-          <p class="text-neutral-600">
+          <p class="text-neutral-600">
-            Company
+            Company
-            <span class="mx-1">-</span>
+            <span class="mx-1">-</span>
-            {{ user.companyName }}
+            {{ user.companyName }}
-            <span class="mx-2">|</span>
+            <span class="mx-2">|</span>
-            For Sale
+            For Sale
-            <span class="mx-1">-</span>
+            <span class="mx-1">-</span>
-            <!-- <i class="fas fa-building text-red-500"></i> -->
+            <!-- <i class="fas fa-building text-red-500"></i> -->
-            <span>{{ businessListings?.length + commercialPropListings?.length }}</span>
+            <span>{{ businessListings?.length + commercialPropListings?.length }}</span>
-          </p>
+          </p>
-        </div>
+        </div>
-        @if(user.hasCompanyLogo){
+        @if(user.hasCompanyLogo){
-        <div class="relative w-14 h-14">
+        <div class="relative w-14 h-14">
-          <img ngSrc="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" fill
+          <img ngSrc="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" fill
-            class="object-contain" alt="Company logo of {{ user.companyName }}" />
+            class="object-contain" alt="Company logo of {{ user.companyName }}" />
-        </div>
+        </div>
-        }
+        }
-        <!-- <img src="https://placehold.co/45x60" class="w-11 h-14" /> -->
+        <!-- <img src="https://placehold.co/45x60" class="w-11 h-14" /> -->
-      </div>
+      </div>
-      <button (click)="historyService.goBack()"
+      <button (click)="historyService.goBack()" aria-label="Go back"
-        class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
+        class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-10 h-10 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
-        <i class="fas fa-times"></i>
+        <i class="fas fa-times"></i>
-      </button>
+      </button>
-    </div>
+    </div>
-
+
-    <!-- Description -->
+    <!-- Description -->
-    <p class="p-4 text-neutral-700 break-words">{{ user.description }}</p>
+    <p class="p-4 text-neutral-700 break-words">{{ user.description }}</p>
-
+
-    <!-- Like and Share Action Buttons -->
+    <!-- Like and Share Action Buttons -->
-    <div class="py-4 px-4 print:hidden">
+    <div class="py-4 px-4 print:hidden">
-      @if(user && keycloakUser && (user?.email===keycloakUser?.email || (authService.isAdmin() | async))){
+      @if(user && keycloakUser && (user?.email===keycloakUser?.email || (authService.isAdmin() | async))){
-      <div class="inline">
+      <div class="inline">
-        <button class="share share-edit text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+        <button class="share share-edit text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-          [routerLink]="['/account', user.id]">
+          [routerLink]="['/account', user.id]">
-          <i class="fa-regular fa-pen-to-square"></i>
+          <i class="fa-regular fa-pen-to-square"></i>
-          <span class="ml-2">Edit</span>
+          <span class="ml-2">Edit</span>
-        </button>
+        </button>
-      </div>
+      </div>
-      }
+      }
-      <div class="inline">
+      <div class="inline">
-        <button type="button" class="share share-save text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+        <button type="button" class="share share-save text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-          (click)="toggleFavorite()">
+          (click)="toggleFavorite()">
-          <i class="fa-regular fa-heart"></i>
+          <i class="fa-regular fa-heart"></i>
-          @if(isAlreadyFavorite()){
+          @if(isAlreadyFavorite()){
-          <span class="ml-2">Saved ...</span>
+          <span class="ml-2">Saved ...</span>
-          }@else {
+          }@else {
-          <span class="ml-2">Save</span>
+          <span class="ml-2">Save</span>
-          }
+          }
-        </button>
+        </button>
-      </div>
+      </div>
-      <share-button button="print" showText="true" (click)="createEvent('print')"></share-button>
+      <share-button button="print" showText="true" (click)="createEvent('print')"></share-button>
-
+
-      <div class="inline">
+      <div class="inline">
-        <button class="share share-email text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+        <button class="share share-email text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-          (click)="showShareByEMail()">
+          (click)="showShareByEMail()">
-          <i class="fa-solid fa-envelope"></i>
+          <i class="fa-solid fa-envelope"></i>
-          <span class="ml-2">Email</span>
+          <span class="ml-2">Email</span>
-        </button>
+        </button>
-      </div>
+      </div>
-
+
-      <div class="inline">
+      <div class="inline">
-        <button type="button"
+        <button type="button"
-          class="share share-facebook text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+          class="share share-facebook text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-          (click)="shareToFacebook()">
+          (click)="shareToFacebook()">
-          <i class="fab fa-facebook"></i>
+          <i class="fab fa-facebook"></i>
-          <span class="ml-2">Facebook</span>
+          <span class="ml-2">Facebook</span>
-        </button>
+        </button>
-      </div>
+      </div>
-
+
-      <div class="inline">
+      <div class="inline">
-        <button type="button"
+        <button type="button"
-          class="share share-twitter text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+          class="share share-twitter text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-          (click)="shareToTwitter()">
+          (click)="shareToTwitter()">
-          <i class="fab fa-x-twitter"></i>
+          <i class="fab fa-x-twitter"></i>
-          <span class="ml-2">X</span>
+          <span class="ml-2">X</span>
-        </button>
+        </button>
-      </div>
+      </div>
-
+
-      <div class="inline">
+      <div class="inline">
-        <button type="button"
+        <button type="button"
-          class="share share-linkedin text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+          class="share share-linkedin text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
-          (click)="shareToLinkedIn()">
+          (click)="shareToLinkedIn()">
-          <i class="fab fa-linkedin"></i>
+          <i class="fab fa-linkedin"></i>
-          <span class="ml-2">LinkedIn</span>
+          <span class="ml-2">LinkedIn</span>
-        </button>
+        </button>
-      </div>
+      </div>
-    </div>
+    </div>
-
+
-    <!-- Company Profile -->
+    <!-- Company Profile -->
-    <div class="p-4">
+    <div class="p-4">
-      <h2 class="text-xl font-semibold mb-4">Company Profile</h2>
+      <h2 class="text-xl font-semibold mb-4">Company Profile</h2>
-      <p class="text-neutral-700 mb-4 break-words" [innerHTML]="companyOverview"></p>
+      <p class="text-neutral-700 mb-4 break-words" [innerHTML]="companyOverview"></p>
-
+
-      <!-- Profile Details -->
+      <!-- Profile Details -->
-      <div class="space-y-2">
+      <div class="space-y-2">
-        <div class="flex flex-col sm:flex-row sm:items-center bg-neutral-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="font-semibold w-40 p-2">Name</span>
-          <span class="p-2 flex-grow">{{ user.firstname }} {{ user.lastname }}</span>
+          <span class="p-2 flex-grow">{{ user.firstname }} {{ user.lastname }}</span>
-        </div>
+        </div>
-        <div class="flex flex-col sm:flex-row sm:items-center">
+        <div class="flex flex-col sm:flex-row sm:items-center">
-          <span class="font-semibold w-40 p-2">EMail Address</span>
+          <span class="font-semibold w-40 p-2">EMail Address</span>
-          <span class="p-2 flex-grow">{{ user.email }}</span>
+          <span class="p-2 flex-grow">{{ user.email }}</span>
-        </div>
+        </div>
-        @if(user.customerType==='professional'){
+        @if(user.customerType==='professional'){
-        <div class="flex flex-col sm:flex-row sm:items-center bg-neutral-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="font-semibold w-40 p-2">Phone Number</span>
-          <span class="p-2 flex-grow">{{ formatPhoneNumber(user.phoneNumber) }}</span>
+          <span class="p-2 flex-grow">{{ formatPhoneNumber(user.phoneNumber) }}</span>
-        </div>
+        </div>
-
+
-        <div class="flex flex-col sm:flex-row sm:items-center">
+        <div class="flex flex-col sm:flex-row sm:items-center">
-          <span class="font-semibold w-40 p-2">Company Location</span>
+          <span class="font-semibold w-40 p-2">Company Location</span>
-          <span class="p-2 flex-grow">{{ user.location?.name }} - {{ user.location?.state }}</span>
+          <span class="p-2 flex-grow">{{ user.location?.name }} - {{ user.location?.state }}</span>
-        </div>
+        </div>
-        <div class="flex flex-col sm:flex-row sm:items-center bg-neutral-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="font-semibold w-40 p-2">Professional Type</span>
-          <span class="p-2 flex-grow">{{ selectOptions.getCustomerSubType(user.customerSubType) }}</span>
+          <span class="p-2 flex-grow">{{ selectOptions.getCustomerSubType(user.customerSubType) }}</span>
-        </div>
+        </div>
-        }
+        }
-      </div>
+      </div>
-      @if(user.customerType==='professional'){
+      @if(user.customerType==='professional'){
-      <!-- Services -->
+      <!-- Services -->
-      <div class="mt-6">
+      <div class="mt-6">
-        <h3 class="font-semibold mb-2">Services we offer</h3>
+        <h3 class="font-semibold mb-2">Services we offer</h3>
-        <p class="text-neutral-700 mb-4 break-words" [innerHTML]="offeredServices"></p>
+        <p class="text-neutral-700 mb-4 break-words" [innerHTML]="offeredServices"></p>
-      </div>
+      </div>
-
+
-      <!-- Areas Served -->
+      <!-- Areas Served -->
-      <div class="mt-6">
+      <div class="mt-6">
-        <h3 class="font-semibold mb-2">Areas (Counties) we serve</h3>
+        <h3 class="font-semibold mb-2">Areas (Counties) we serve</h3>
-        <div class="flex flex-wrap gap-2">
+        <div class="flex flex-wrap gap-2">
-          @for (area of user.areasServed; track area) {
+          @for (area of user.areasServed; track area) {
-          <span class="bg-primary-100 text-primary-800 px-2 py-1 rounded-full text-sm">{{ area.county }}{{ area.county ?
+          <span class="bg-primary-100 text-primary-800 px-2 py-1 rounded-full text-sm">{{ area.county }}{{ area.county ?
-            '-' : '' }}{{ area.state }}</span>
+            '-' : '' }}{{ area.state }}</span>
-          }
+          }
-        </div>
+        </div>
-      </div>
+      </div>
-
+
-      <!-- Licensed In -->
+      <!-- Licensed In -->
-      <div class="mt-6">
+      <div class="mt-6">
-        <h3 class="font-semibold mb-2">Licensed In</h3>
+        <h3 class="font-semibold mb-2">Licensed In</h3>
-        @for (license of user.licensedIn; track license) {
+        @for (license of user.licensedIn; track license) {
-        <span class="bg-success-100 text-success-800 px-2 py-1 rounded-full text-sm">{{ license.registerNo }}-{{
+        <span class="bg-success-100 text-success-800 px-2 py-1 rounded-full text-sm">{{ license.registerNo }}-{{
-          license.state }}</span>
+          license.state }}</span>
-        }
+        }
-      </div>
+      </div>
-      }
+      }
-    </div>
+    </div>
-
+
-    <!-- Business Listings -->
+    <!-- Business Listings -->
-
+
-    <div class="p-4">
+    <div class="p-4">
-      @if(businessListings?.length>0){
+      @if(businessListings?.length>0){
-      <h2 class="text-xl font-semibold mb-4">My Business Listings For Sale</h2>
+      <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">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        @for (listing of businessListings; track listing) {
+        @for (listing of businessListings; track listing) {
-        <div class="border rounded-lg p-4 hover:cursor-pointer"
+        <div class="border rounded-lg p-4 hover:cursor-pointer"
-          [routerLink]="['/business', listing.slug || listing.id]">
+          [routerLink]="['/business', listing.slug || listing.id]">
-          <div class="flex items-center mb-2">
+          <div class="flex items-center mb-2">
-            <i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2"></i>
+            <i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2"></i>
-            <span class="font-medium">{{ selectOptions.getBusiness(listing.type) }}</span>
+            <span class="font-medium">{{ selectOptions.getBusiness(listing.type) }}</span>
-          </div>
+          </div>
-          <p class="text-neutral-700">{{ listing.title }}</p>
+          <p class="text-neutral-700">{{ listing.title }}</p>
-        </div>
+        </div>
-        }
+        }
-      </div>
+      </div>
-      }
+      }
-      <!-- Commercial Property Listings -->
+      <!-- Commercial Property Listings -->
-      @if(commercialPropListings?.length>0){
+      @if(commercialPropListings?.length>0){
-      <h2 class="text-xl font-semibold mb-4">My Commercial Property Listings For Sale</h2>
+      <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">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        @for (listing of commercialPropListings; track listing) {
+        @for (listing of commercialPropListings; track listing) {
-        <div class="border rounded-lg p-4 hover:cursor-pointer"
+        <div class="border rounded-lg p-4 hover:cursor-pointer"
-          [routerLink]="['/commercial-property', listing.slug || listing.id]">
+          [routerLink]="['/commercial-property', listing.slug || listing.id]">
-          <div class="flex items-center space-x-4">
+          <div class="flex items-center space-x-4">
-            @if (listing.imageOrder?.length>0){
+            @if (listing.imageOrder?.length>0){
-            <img
+            <img
-              ngSrc="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}"
+              ngSrc="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}"
-              class="w-12 h-12 object-cover rounded" width="48" height="48"
+              class="w-12 h-12 object-cover rounded" width="48" height="48"
-              alt="Property image for {{ listing.title }}" />
+              alt="Property image for {{ listing.title }}" />
-            } @else {
+            } @else {
-            <img ngSrc="assets/images/placeholder_properties.jpg" class="w-12 h-12 object-cover rounded" width="48"
+            <img ngSrc="assets/images/placeholder_properties.jpg" class="w-12 h-12 object-cover rounded" width="48"
-              height="48" alt="Property placeholder image" />
+              height="48" alt="Property placeholder image" />
-            }
+            }
-            <div>
+            <div>
-              <p class="font-medium">{{ selectOptions.getCommercialProperty(listing.type) }}</p>
+              <p class="font-medium">{{ selectOptions.getCommercialProperty(listing.type) }}</p>
-              <p class="text-neutral-700">{{ listing.title }}</p>
+              <p class="text-neutral-700">{{ listing.title }}</p>
-            </div>
+            </div>
-          </div>
+          </div>
-        </div>
+        </div>
-        }
+        }
-      </div>
+      </div>
-      }
+      }
-    </div>
+    </div>
-  </div>
+  </div>
-  }
+  }
 </div>

bizmatch/src/app/pages/details/details-user/details-user.component.ts

@@ -1,169 +1,183 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
-import { NgOptimizedImage } from '@angular/common';
+import { NgOptimizedImage } from '@angular/common';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
-import { Observable } from 'rxjs';
+import { Observable } from 'rxjs';
-import { BusinessListing, CommercialPropertyListing, User, ShareByEMail, EventTypeEnum } from '../../../../../../bizmatch-server/src/models/db.model';
+import { BusinessListing, CommercialPropertyListing, User, ShareByEMail, EventTypeEnum } from '../../../../../../bizmatch-server/src/models/db.model';
-import { KeycloakUser, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
+import { KeycloakUser, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
-import { environment } from '../../../../environments/environment';
+import { environment } from '../../../../environments/environment';
-import { BreadcrumbItem, BreadcrumbsComponent } from '../../../components/breadcrumbs/breadcrumbs.component';
+import { BreadcrumbItem, BreadcrumbsComponent } from '../../../components/breadcrumbs/breadcrumbs.component';
-import { AuthService } from '../../../services/auth.service';
+import { AuthService } from '../../../services/auth.service';
-import { AuditService } from '../../../services/audit.service';
+import { AuditService } from '../../../services/audit.service';
-import { EMailService } from '../../../components/email/email.service';
+import { EMailService } from '../../../components/email/email.service';
-import { MessageService } from '../../../components/message/message.service';
+import { MessageService } from '../../../components/message/message.service';
-import { HistoryService } from '../../../services/history.service';
+import { HistoryService } from '../../../services/history.service';
-import { ImageService } from '../../../services/image.service';
+import { ImageService } from '../../../services/image.service';
-import { ListingsService } from '../../../services/listings.service';
+import { ListingsService } from '../../../services/listings.service';
-import { SelectOptionsService } from '../../../services/select-options.service';
+import { SelectOptionsService } from '../../../services/select-options.service';
-import { UserService } from '../../../services/user.service';
+import { UserService } from '../../../services/user.service';
-import { SharedModule } from '../../../shared/shared/shared.module';
+import { SharedModule } from '../../../shared/shared/shared.module';
-import { formatPhoneNumber, map2User } from '../../../utils/utils';
+import { formatPhoneNumber, map2User } from '../../../utils/utils';
-import { ShareButton } from 'ngx-sharebuttons/button';
+import { ShareButton } from 'ngx-sharebuttons/button';
-
+import { provideShareButtonsOptions, SharerMethods, withConfig } from 'ngx-sharebuttons';
-@Component({
+import { shareIcons } from 'ngx-sharebuttons/icons';
-  selector: 'app-details-user',
+
-  standalone: true,
+@Component({
-  imports: [SharedModule, BreadcrumbsComponent, NgOptimizedImage, ShareButton],
+  selector: 'app-details-user',
-  templateUrl: './details-user.component.html',
+  standalone: true,
-  styleUrl: '../details.scss',
+  imports: [SharedModule, BreadcrumbsComponent, NgOptimizedImage, ShareButton],
-})
+  providers: [
-export class DetailsUserComponent {
+    provideShareButtonsOptions(
-  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
+      shareIcons(),
-  user: User;
+      withConfig({
-  breadcrumbs: BreadcrumbItem[] = [
+        debug: false,
-    { label: 'Home', url: '/home', icon: 'fas fa-home' },
+        sharerMethod: SharerMethods.Anchor,
-    { label: 'Professionals', url: '/brokerListings' },
+      }),
-    { label: 'Profile' }
+    ),
-  ];
+  ],
-  user$: Observable<KeycloakUser>;
+  templateUrl: './details-user.component.html',
-  keycloakUser: KeycloakUser;
+  styleUrls: [
-  environment = environment;
+    '../details.scss',
-  businessListings: BusinessListing[];
+    '../../../../../node_modules/ngx-sharebuttons/themes/default.scss'
-  commercialPropListings: CommercialPropertyListing[];
+  ],
-  companyOverview: SafeHtml;
+})
-  offeredServices: SafeHtml;
+export class DetailsUserComponent {
-  ts = new Date().getTime();
+  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
-  env = environment;
+  user: User;
-  emailToDirName = emailToDirName;
+  breadcrumbs: BreadcrumbItem[] = [
-  formatPhoneNumber = formatPhoneNumber;
+    { label: 'Home', url: '/home', icon: 'fas fa-home' },
-  constructor(
+    { label: 'Professionals', url: '/brokerListings' },
-    private activatedRoute: ActivatedRoute,
+    { label: 'Profile' }
-    private router: Router,
+  ];
-    private userService: UserService,
+  user$: Observable<KeycloakUser>;
-    private listingsService: ListingsService,
+  keycloakUser: KeycloakUser;
-    public selectOptions: SelectOptionsService,
+  environment = environment;
-    private sanitizer: DomSanitizer,
+  businessListings: BusinessListing[];
-    private imageService: ImageService,
+  commercialPropListings: CommercialPropertyListing[];
-    public historyService: HistoryService,
+  companyOverview: SafeHtml;
-    public authService: AuthService,
+  offeredServices: SafeHtml;
-    private auditService: AuditService,
+  ts = new Date().getTime();
-    private emailService: EMailService,
+  env = environment;
-    private messageService: MessageService,
+  emailToDirName = emailToDirName;
-    private cdref: ChangeDetectorRef,
+  formatPhoneNumber = formatPhoneNumber;
-  ) { }
+  constructor(
-
+    private activatedRoute: ActivatedRoute,
-  async ngOnInit() {
+    private router: Router,
-    this.user = await this.userService.getById(this.id);
+    private userService: UserService,
-    const results = await Promise.all([await this.listingsService.getListingsByEmail(this.user.email, 'business'), await this.listingsService.getListingsByEmail(this.user.email, 'commercialProperty')]);
+    private listingsService: ListingsService,
-    // Zuweisen der Ergebnisse zu den Member-Variablen der Klasse
+    public selectOptions: SelectOptionsService,
-    this.businessListings = results[0];
+    private sanitizer: DomSanitizer,
-    this.commercialPropListings = results[1] as CommercialPropertyListing[];
+    private imageService: ImageService,
-    const token = await this.authService.getToken();
+    public historyService: HistoryService,
-    this.keycloakUser = map2User(token);
+    public authService: AuthService,
-    this.companyOverview = this.sanitizer.bypassSecurityTrustHtml(this.user.companyOverview ? this.user.companyOverview : '');
+    private auditService: AuditService,
-    this.offeredServices = this.sanitizer.bypassSecurityTrustHtml(this.user.offeredServices ? this.user.offeredServices : '');
+    private emailService: EMailService,
-  }
+    private messageService: MessageService,
-
+    private cdref: ChangeDetectorRef,
-  /**
+  ) { }
-   * Toggle professional favorite status
+
-   */
+  async ngOnInit() {
-  async toggleFavorite() {
+    this.user = await this.userService.getById(this.id);
-    try {
+    const results = await Promise.all([await this.listingsService.getListingsByEmail(this.user.email, 'business'), await this.listingsService.getListingsByEmail(this.user.email, 'commercialProperty')]);
-      const isFavorited = this.user.favoritesForUser?.includes(this.keycloakUser.email);
+    // Zuweisen der Ergebnisse zu den Member-Variablen der Klasse
-
+    this.businessListings = results[0];
-      if (isFavorited) {
+    this.commercialPropListings = results[1] as CommercialPropertyListing[];
-        // Remove from favorites
+    const token = await this.authService.getToken();
-        await this.listingsService.removeFavorite(this.user.id, 'user');
+    this.keycloakUser = map2User(token);
-        this.user.favoritesForUser = this.user.favoritesForUser.filter(
+    this.companyOverview = this.sanitizer.bypassSecurityTrustHtml(this.user.companyOverview ? this.user.companyOverview : '');
-          email => email !== this.keycloakUser.email
+    this.offeredServices = this.sanitizer.bypassSecurityTrustHtml(this.user.offeredServices ? this.user.offeredServices : '');
-        );
+  }
-      } else {
+
-        // Add to favorites
+  /**
-        await this.listingsService.addToFavorites(this.user.id, 'user');
+   * Toggle professional favorite status
-        if (!this.user.favoritesForUser) {
+   */
-          this.user.favoritesForUser = [];
+  async toggleFavorite() {
-        }
+    try {
-        this.user.favoritesForUser.push(this.keycloakUser.email);
+      const isFavorited = this.user.favoritesForUser?.includes(this.keycloakUser.email);
-        this.auditService.createEvent(this.user.id, 'favorite', this.keycloakUser?.email);
+
-      }
+      if (isFavorited) {
-
+        // Remove from favorites
-      this.cdref.detectChanges();
+        await this.listingsService.removeFavorite(this.user.id, 'user');
-    } catch (error) {
+        this.user.favoritesForUser = this.user.favoritesForUser.filter(
-      console.error('Error toggling favorite', error);
+          email => email !== this.keycloakUser.email
-    }
+        );
-  }
+      } else {
-
+        // Add to favorites
-  isAlreadyFavorite(): boolean {
+        await this.listingsService.addToFavorites(this.user.id, 'user');
-    if (!this.keycloakUser?.email || !this.user?.favoritesForUser) return false;
+        if (!this.user.favoritesForUser) {
-    return this.user.favoritesForUser.includes(this.keycloakUser.email);
+          this.user.favoritesForUser = [];
-  }
+        }
-
+        this.user.favoritesForUser.push(this.keycloakUser.email);
-
+        this.auditService.createEvent(this.user.id, 'favorite', this.keycloakUser?.email);
-  /**
+      }
-   * Show email sharing modal
+
-   */
+      this.cdref.detectChanges();
-  async showShareByEMail() {
+    } catch (error) {
-    const result = await this.emailService.showShareByEMail({
+      console.error('Error toggling favorite', error);
-      yourEmail: this.keycloakUser ? this.keycloakUser.email : '',
+    }
-      yourName: this.keycloakUser ? `${this.keycloakUser.firstName} ${this.keycloakUser.lastName}` : '',
+  }
-      recipientEmail: '',
+
-      url: environment.mailinfoUrl,
+  isAlreadyFavorite(): boolean {
-      listingTitle: `${this.user.firstname} ${this.user.lastname} - ${this.user.companyName}`,
+    if (!this.keycloakUser?.email || !this.user?.favoritesForUser) return false;
-      id: this.user.id,
+    return this.user.favoritesForUser.includes(this.keycloakUser.email);
-      type: 'user',
+  }
-    });
+
-    if (result) {
+
-      this.auditService.createEvent(this.user.id, 'email', this.keycloakUser?.email, <ShareByEMail>result);
+  /**
-      this.messageService.addMessage({
+   * Show email sharing modal
-        severity: 'success',
+   */
-        text: 'Your Email has been sent',
+  async showShareByEMail() {
-        duration: 5000,
+    const result = await this.emailService.showShareByEMail({
-      });
+      yourEmail: this.keycloakUser ? this.keycloakUser.email : '',
-    }
+      yourName: this.keycloakUser ? `${this.keycloakUser.firstName} ${this.keycloakUser.lastName}` : '',
-  }
+      recipientEmail: '',
-
+      url: environment.mailinfoUrl,
-  /**
+      listingTitle: `${this.user.firstname} ${this.user.lastname} - ${this.user.companyName}`,
-   * Create audit event
+      id: this.user.id,
-   */
+      type: 'user',
-  createEvent(eventType: EventTypeEnum) {
+    });
-    this.auditService.createEvent(this.user.id, eventType, this.keycloakUser?.email);
+    if (result) {
-  }
+      this.auditService.createEvent(this.user.id, 'email', this.keycloakUser?.email, <ShareByEMail>result);
-
+      this.messageService.addMessage({
-  /**
+        severity: 'success',
-   * Share to Facebook
+        text: 'Your Email has been sent',
-   */
+        duration: 5000,
-  shareToFacebook() {
+      });
-    const url = encodeURIComponent(window.location.href);
+    }
-    window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
+  }
-    this.createEvent('facebook');
+
-  }
+  /**
-
+   * Create audit event
-  /**
+   */
-   * Share to Twitter/X
+  createEvent(eventType: EventTypeEnum) {
-   */
+    this.auditService.createEvent(this.user.id, eventType, this.keycloakUser?.email);
-  shareToTwitter() {
+  }
-    const url = encodeURIComponent(window.location.href);
+
-    const text = encodeURIComponent(`Check out ${this.user.firstname} ${this.user.lastname} - ${this.user.companyName}`);
+  /**
-    window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank', 'width=600,height=400');
+   * Share to Facebook
-    this.createEvent('x');
+   */
-  }
+  shareToFacebook() {
-
+    const url = encodeURIComponent(window.location.href);
-  /**
+    window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
-   * Share to LinkedIn
+    this.createEvent('facebook');
-   */
+  }
-  shareToLinkedIn() {
+
-    const url = encodeURIComponent(window.location.href);
+  /**
-    window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank', 'width=600,height=400');
+   * Share to Twitter/X
-    this.createEvent('linkedin');
+   */
-  }
+  shareToTwitter() {
-}
+    const url = encodeURIComponent(window.location.href);
+    const text = encodeURIComponent(`Check out ${this.user.firstname} ${this.user.lastname} - ${this.user.companyName}`);
+    window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank', 'width=600,height=400');
+    this.createEvent('x');
+  }
+
+  /**
+   * Share to LinkedIn
+   */
+  shareToLinkedIn() {
+    const url = encodeURIComponent(window.location.href);
+    window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank', 'width=600,height=400');
+    this.createEvent('linkedin');
+  }
+}

bizmatch/src/app/pages/details/details.scss

@@ -1,110 +1,110 @@
-:host ::ng-deep p {
+:host ::ng-deep p {
-  display: block;
+  display: block;
-  //margin-top: 1em;
+  //margin-top: 1em;
-  //margin-bottom: 1em;
+  //margin-bottom: 1em;
-  margin-left: 0;
+  margin-left: 0;
-  margin-right: 0;
+  margin-right: 0;
-  font-size: 1rem; /* oder 1rem, abhängig vom Browser und den Standardeinstellungen */
+  font-size: 1rem; /* oder 1rem, abhängig vom Browser und den Standardeinstellungen */
-  line-height: 1.5;
+  line-height: 1.5;
-  min-height: 1.5em;
+  min-height: 1.5em;
-}
+}
-:host ::ng-deep h1 {
+:host ::ng-deep h1 {
-  display: block;
+  display: block;
-  font-size: 2em; /* etwa 32px */
+  font-size: 2em; /* etwa 32px */
-  margin-top: 0.67em;
+  margin-top: 0.67em;
-  margin-bottom: 0.67em;
+  margin-bottom: 0.67em;
-  margin-left: 0;
+  margin-left: 0;
-  margin-right: 0;
+  margin-right: 0;
-  font-weight: bold;
+  font-weight: bold;
-}
+}
-:host ::ng-deep h2 {
+:host ::ng-deep h2 {
-  display: block;
+  display: block;
-  font-size: 1.5em; /* etwa 24px */
+  font-size: 1.5em; /* etwa 24px */
-  margin-top: 0.83em;
+  margin-top: 0.83em;
-  margin-bottom: 0.83em;
+  margin-bottom: 0.83em;
-  margin-left: 0;
+  margin-left: 0;
-  margin-right: 0;
+  margin-right: 0;
-  font-weight: bold;
+  font-weight: bold;
-}
+}
-:host ::ng-deep h3 {
+:host ::ng-deep h3 {
-  display: block;
+  display: block;
-  font-size: 1.17em; /* etwa 18.72px */
+  font-size: 1.17em; /* etwa 18.72px */
-  margin-top: 1em;
+  margin-top: 1em;
-  margin-bottom: 1em;
+  margin-bottom: 1em;
-  margin-left: 0;
+  margin-left: 0;
-  margin-right: 0;
+  margin-right: 0;
-  font-weight: bold;
+  font-weight: bold;
-}
+}
-:host ::ng-deep ul {
+:host ::ng-deep ul {
-  display: block;
+  display: block;
-  list-style-type: disc; /* listet Punkte (•) vor jedem Listenelement auf */
+  list-style-type: disc; /* listet Punkte (•) vor jedem Listenelement auf */
-  margin-top: 1em;
+  margin-top: 1em;
-  margin-bottom: 1em;
+  margin-bottom: 1em;
-  margin-left: 0;
+  margin-left: 0;
-  margin-right: 0;
+  margin-right: 0;
-  padding-left: 40px; /* Standard-Einrückung für Listen */
+  padding-left: 40px; /* Standard-Einrückung für Listen */
-}
+}
-:host ::ng-deep li {
+:host ::ng-deep li {
-  display: list-item; /* Zeigt das Element als Listenelement an */
+  display: list-item; /* Zeigt das Element als Listenelement an */
-  margin-left: 0;
+  margin-left: 0;
-  margin-right: 0;
+  margin-right: 0;
-  margin-top: 0;
+  margin-top: 0;
-  margin-bottom: 0;
+  margin-bottom: 0;
-  padding-left: 0;
+  padding-left: 0;
-}
+}
-button.share {
+button.share {
-  font-size: 13px;
+  font-size: 13px;
-  transform: translateY(-2px) scale(1.03);
+  transform: translateY(-2px) scale(1.03);
-  margin-right: 4px;
+  margin-right: 4px;
-  margin-left: 2px;
+  margin-left: 2px;
-  border-radius: 4px;
+  border-radius: 4px;
-  cursor: pointer;
+  cursor: pointer;
-  i {
+  i {
-    font-size: 15px;
+    font-size: 15px;
-  }
+  }
-}
+}
-.share-edit {
+.share-edit {
-  background-color: #0088cc;
+  background-color: #0088cc;
-}
+}
-.share-save {
+.share-save {
-  background-color: #e60023;
+  background-color: #e60023;
-}
+}
-.share-email {
+.share-email {
-  background-color: #ff961c;
+  background-color: #ff961c;
-}
+}
-.share-facebook {
+.share-facebook {
-  background-color: #1877f2;
+  background-color: #1877f2;
-}
+}
-.share-twitter {
+.share-twitter {
-  background-color: #000000;
+  background-color: #000000;
-}
+}
-.share-linkedin {
+.share-linkedin {
-  background-color: #0a66c2;
+  background-color: #0a66c2;
-}
+}
-:host ::ng-deep .ng-select-container {
+:host ::ng-deep .ng-select-container {
-  height: 42px !important;
+  height: 42px !important;
-  border-radius: 0.5rem;
+  border-radius: 0.5rem;
-  .ng-value-container .ng-input {
+  .ng-value-container .ng-input {
-    top: 10px;
+    top: 10px;
-  }
+  }
-}
+}
-/* details.scss */
+/* details.scss */
-
+
-/* Stil für das Adress-Info-Feld */
+/* Stil für das Adress-Info-Feld */
-.address-control {
+.address-control {
-  background: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.9);
-  padding: 10px;
+  padding: 10px;
-  border-radius: 5px;
+  border-radius: 5px;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
-  font-size: 14px;
+  font-size: 14px;
-  line-height: 1.4;
+  line-height: 1.4;
-}
+}
-
+
-.address-control a {
+.address-control a {
-  color: #007bff;
+  color: #007bff;
-  text-decoration: none;
+  text-decoration: none;
-}
+}
-
+
-.address-control a:hover {
+.address-control a:hover {
-  text-decoration: underline;
+  text-decoration: underline;
-}
+}

bizmatch/src/app/pages/home/home.component.html

@@ -1,5 +1,5 @@
 <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 w-auto" />
+  <img src="/assets/images/header-logo.png" alt="BizMatch - Business & Property Marketplace" class="h-8 md:h-10 w-auto" width="120" height="40" />
   <div class="hidden md:flex items-center space-x-4">
     @if(user){
     <a routerLink="/account" class="text-primary-600 border border-primary-600 px-3 py-2 rounded">Account</a>
@@ -12,7 +12,7 @@
   </div>
   <button
     (click)="toggleMenu()"
-    class="md:hidden text-neutral-600"
+    class="md:hidden text-neutral-700 p-2 min-w-[44px] min-h-[44px] flex items-center justify-center"
     aria-label="Open navigation menu"
     [attr.aria-expanded]="isMenuOpen"
   >
@@ -88,8 +88,8 @@
         <!-- Restliche Anpassungen (Innenabstände, Button-Paddings etc.) bleiben wie im vorherigen Schritt -->
         <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-neutral-500 border-neutral-200 dark:text-neutral-400 dark:border-neutral-700 flex justify-between">
+          <div class="text-sm lg:text-base mb-1 text-center text-neutral-700 border-neutral-200 dark:text-neutral-300 dark:border-neutral-700 flex justify-between">
-            <ul class="flex flex-wrap -mb-px w-full" role="tablist">
+            <ul class="flex flex-wrap -mb-px w-full" role="tablist" aria-label="Search categories">
               <li class="w-[33%]" role="presentation">
                 <button
                   type="button"
@@ -99,9 +99,11 @@
                   [ngClass]="
                     activeTabAction === 'business'
                       ? ['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']
+                      : ['border-transparent', 'text-neutral-700', 'hover:text-neutral-900', 'hover:border-neutral-400', 'dark:hover:text-neutral-300']
                   "
-                  class="tab-link w-full hover:cursor-pointer inline-flex items-center justify-center px-3 py-3 md:p-4 border-b-2 rounded-t-lg bg-transparent"
+                  class="tab-link w-full hover:cursor-pointer inline-flex items-center justify-center px-3 py-3 md:p-4 border-b-2 rounded-t-lg bg-transparent min-h-[44px]"
+                  [attr.aria-controls]="'tabpanel-search'"
+                  id="tab-business"
                 >
                   <img src="/assets/images/business_logo.png" alt="" aria-hidden="true" class="tab-icon w-6 h-6 md:w-7 md:h-7 mr-1 md:mr-2 object-contain" width="28" height="28" />
                   <span>Businesses</span>
@@ -117,9 +119,11 @@
                   [ngClass]="
                     activeTabAction === 'commercialProperty'
                       ? ['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']
+                      : ['border-transparent', 'text-neutral-700', 'hover:text-neutral-900', 'hover:border-neutral-400', 'dark:hover:text-neutral-300']
                   "
-                  class="tab-link w-full hover:cursor-pointer inline-flex items-center justify-center px-3 py-3 md:p-4 border-b-2 rounded-t-lg bg-transparent"
+                  class="tab-link w-full hover:cursor-pointer inline-flex items-center justify-center px-3 py-3 md:p-4 border-b-2 rounded-t-lg bg-transparent min-h-[44px]"
+                  [attr.aria-controls]="'tabpanel-search'"
+                  id="tab-properties"
                 >
                   <img src="/assets/images/properties_logo.png" alt="" aria-hidden="true" class="tab-icon w-6 h-6 md:w-7 md:h-7 mr-1 md:mr-2 object-contain" width="28" height="28" />
                   <span>Properties</span>
@@ -135,9 +139,11 @@
                   [ngClass]="
                     activeTabAction === 'broker'
                       ? ['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']
+                      : ['border-transparent', 'text-neutral-700', 'hover:text-neutral-900', 'hover:border-neutral-400', 'dark:hover:text-neutral-300']
                   "
-                  class="tab-link w-full hover:cursor-pointer inline-flex items-center justify-center px-3 py-3 md:p-4 border-b-2 rounded-t-lg bg-transparent"
+                  class="tab-link w-full hover:cursor-pointer inline-flex items-center justify-center px-3 py-3 md:p-4 border-b-2 rounded-t-lg bg-transparent min-h-[44px]"
+                  [attr.aria-controls]="'tabpanel-search'"
+                  id="tab-professionals"
                 >
                   <img
                     src="/assets/images/icon_professionals.png"
@@ -153,7 +159,7 @@
             </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-neutral-300">
+          <div id="tabpanel-search" role="tabpanel" aria-labelledby="tab-business" 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">
                 <label for="type-filter" class="sr-only">Filter by type</label>
@@ -195,7 +201,11 @@
                   groupBy="type"
                   labelForId="location-search"
                   aria-label="Search by city or state"
+                  [inputAttrs]="{'aria-describedby': 'location-search-hint'}"
                 >
+                  <ng-template ng-footer-tmp>
+                    <span id="location-search-hint" class="sr-only">Enter at least 2 characters to search for a city or state</span>
+                  </ng-template>
                   @for (city of cities$ | async; track city.id) { @let state = city.type==='city'?city.content.state:''; @let separator = city.type==='city'?' - ':'';
                   <ng-option [value]="city">{{ city.content.name }}{{ separator }}{{ state }}</ng-option>
                   }

bizmatch/src/app/pages/home/home.component.scss

@@ -1,7 +1,7 @@
-
 select:not([size]) {
   background-image: unset;
 }
+
 [type='text'],
 [type='email'],
 [type='url'],
@@ -19,39 +19,51 @@ textarea,
 select {
   border: unset;
 }
+
 .toggle-checkbox:checked {
   right: 0;
   border-color: rgb(125 211 252);
 }
-.toggle-checkbox:checked + .toggle-label {
+
+.toggle-checkbox:checked+.toggle-label {
   background-color: rgb(125 211 252);
 }
+
 :host ::ng-deep .ng-select.ng-select-single .ng-select-container {
   min-height: 52px;
   border: none;
   background-color: transparent;
+
   .ng-value-container .ng-input {
     top: 12px;
   }
+
   span.ng-arrow-wrapper {
     display: none;
   }
 }
+
 select {
-  color: #000; /* Standard-Textfarbe für das Dropdown */
+  color: #000;
+  /* Standard-Textfarbe für das Dropdown */
   // background-color: #fff; /* Hintergrundfarbe für das Dropdown */
 }
 
 select option {
-  color: #000; /* Textfarbe für Dropdown-Optionen */
+  color: #000;
+  /* Textfarbe für Dropdown-Optionen */
 }
 
 select.placeholder-selected {
-  color: #999; /* Farbe für den Platzhalter */
+  color: #6b7280;
+  /* gray-500 - besserer Kontrast für WCAG AA */
 }
+
 input::placeholder {
-  color: #555; /* Dunkleres Grau */
+  color: #555;
-  opacity: 1; /* Stellt sicher, dass die Deckkraft 100% ist */
+  /* Dunkleres Grau */
+  opacity: 1;
+  /* Stellt sicher, dass die Deckkraft 100% ist */
 }
 
 /* Stellt sicher, dass die Optionen im Dropdown immer schwarz sind */
@@ -59,10 +71,14 @@ select:focus option,
 select:hover option {
   color: #000 !important;
 }
+
 input[type='text'][name='aiSearchText'] {
-  padding: 14px; /* Innerer Abstand */
+  padding: 14px;
-  font-size: 16px; /* Schriftgröße anpassen */
+  /* Innerer Abstand */
-  box-sizing: border-box; /* Padding und Border in die Höhe und Breite einrechnen */
+  font-size: 16px;
+  /* Schriftgröße anpassen */
+  box-sizing: border-box;
+  /* Padding und Border in die Höhe und Breite einrechnen */
   height: 48px;
 }
 
@@ -145,6 +161,7 @@ select,
     opacity: 0;
     transform: translateY(10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -212,6 +229,7 @@ header {
     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);
@@ -224,6 +242,7 @@ header {
     }
 
     &.bg-blue-600 {
+
       // Register button
       &:hover {
         background-color: rgb(29, 78, 216);
@@ -249,4 +268,4 @@ header {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
-}
+}

bizmatch/src/app/pages/home/home.component.ts

@@ -6,7 +6,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { UntilDestroy } from '@ngneat/until-destroy';
 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 { 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';
@@ -24,7 +24,7 @@ import { map2User } from '../../utils/utils';
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterModule, NgSelectModule, FaqComponent],
+  imports: [CommonModule, FormsModule, RouterModule, NgSelectModule],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -126,7 +126,7 @@ export class HomeComponent {
     // 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. Browse thousands of verified listings across the US.',
+      description: 'Buy and sell businesses, commercial properties, and franchises. Browse thousands of verified listings across the United States.',
       keywords: 'business for sale, businesses for sale, buy business, sell business, commercial property, commercial real estate, franchise opportunities, business broker, business marketplace',
       type: 'website'
     });

bizmatch/src/app/pages/legal/privacy-statement.component.html

@@ -7,7 +7,7 @@
     >
       <i class="fas fa-arrow-left text-lg"></i>
     </button>
-    <h1 class="text-3xl font-bold text-neutral-900 mb-6 pr-14">Privacy Statement</h1>
+    <h1 class="text-3xl font-bold text-neutral-900 mb-6 pr-14">BizMatch Privacy Policy and Data Protection</h1>
 
     <section id="content" role="main">
       <article class="post page">

bizmatch/src/app/pages/legal/privacy-statement.component.scss

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

bizmatch/src/app/pages/legal/privacy-statement.component.ts

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

bizmatch/src/app/pages/legal/terms-of-use.component.html

@@ -1,150 +1,150 @@
-<div class="container mx-auto px-4 py-8 max-w-4xl">
+<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 relative">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg p-6 md:p-8 relative">
-    <button
+    <button
-      (click)="goBack()"
+      (click)="goBack()"
-      class="absolute top-4 right-4 md:top-6 md:right-6 w-10 h-10 flex items-center justify-center rounded-full bg-red-600 hover:bg-red-700 text-white transition-colors duration-200"
+      class="absolute top-4 right-4 md:top-6 md:right-6 w-10 h-10 flex items-center justify-center rounded-full bg-red-600 hover:bg-red-700 text-white transition-colors duration-200"
-      aria-label="Go back"
+      aria-label="Go back"
-    >
+    >
-      <i class="fas fa-arrow-left text-lg"></i>
+      <i class="fas fa-arrow-left text-lg"></i>
-    </button>
+    </button>
-    <h1 class="text-3xl font-bold text-neutral-900 mb-6 pr-14">Terms of Use</h1>
+    <h1 class="text-3xl font-bold text-neutral-900 mb-6 pr-14">BizMatch Terms of Use and User Agreement</h1>
-
+
-    <section id="content" role="main">
+    <section id="content" role="main">
-      <article class="post page">
+      <article class="post page">
-        <section class="entry-content">
+        <section class="entry-content">
-          <div class="container">
+          <div class="container">
-            <p class="font-bold text-lg mb-4">AGREEMENT BETWEEN USER AND BizMatch</p>
+            <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 comprised of various Web pages operated by BizMatch.</p>
-            <p class="mb-4">
+            <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
+              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.
+              agreement to all such terms, conditions, and notices.
-            </p>
+            </p>
-            <p class="font-bold text-lg mb-4 mt-6">MODIFICATION OF THESE TERMS OF USE</p>
+            <p class="font-bold text-lg mb-4 mt-6">MODIFICATION OF THESE TERMS OF USE</p>
-            <p class="mb-4">
+            <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
+              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.
+              Site.
-            </p>
+            </p>
-            <p class="font-bold text-lg mb-4 mt-6">LINKS TO THIRD PARTY SITES</p>
+            <p class="font-bold text-lg mb-4 mt-6">LINKS TO THIRD PARTY SITES</p>
-            <p class="mb-4">
+            <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,
+              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
+              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.
+              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>
-            <p class="font-bold text-lg mb-4 mt-6">NO UNLAWFUL OR PROHIBITED USE</p>
+            <p class="font-bold text-lg mb-4 mt-6">NO UNLAWFUL OR PROHIBITED USE</p>
-            <p class="mb-4">
+            <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
+              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
+              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.
+              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>
-            <p class="font-bold text-lg mb-4 mt-6">USE OF COMMUNICATION SERVICES</p>
+            <p class="font-bold text-lg mb-4 mt-6">USE OF COMMUNICATION SERVICES</p>
-            <p class="mb-4">
+            <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
+              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
+              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:
+              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>
+            </p>
-            <ul class="list-disc pl-6 mb-4 space-y-2">
+            <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>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>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 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>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>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>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>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>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>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>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>Harvest or otherwise collect information about others, including e-mail addresses, without their consent.</li>
-              <li>Violate any applicable laws or regulations.</li>
+              <li>Violate any applicable laws or regulations.</li>
-            </ul>
+            </ul>
-            <p class="mb-4">
+            <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
+              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.
+              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>
-            <p class="mb-4">
+            <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
+              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.
+              any information or materials, in whole or in part, in BizMatch's sole discretion.
-            </p>
+            </p>
-            <p class="mb-4">
+            <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
+              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
+              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.
+              any Communication Service. Managers and hosts are not authorized BizMatch spokespersons, and their views do not necessarily reflect those of BizMatch.
-            </p>
+            </p>
-            <p class="mb-4">
+            <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 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.
+              materials.
-            </p>
+            </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="font-bold text-lg mb-4 mt-6">MATERIALS PROVIDED TO BizMatch OR POSTED AT ANY BizMatch WEB SITE</p>
-            <p class="mb-4">
+            <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
+              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
+              (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,
+              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.
+              reproduce, edit, translate and reformat your Submission; and to publish your name in connection with your Submission.
-            </p>
+            </p>
-            <p class="mb-4">
+            <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
+              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.
+              any time in BizMatch's sole discretion.
-            </p>
+            </p>
-            <p class="mb-4">
+            <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
+              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.
+              including, without limitation, all the rights necessary for you to provide, post, upload, input or submit the Submissions.
-            </p>
+            </p>
-            <p class="font-bold text-lg mb-4 mt-6">LIABILITY DISCLAIMER</p>
+            <p class="font-bold text-lg mb-4 mt-6">LIABILITY DISCLAIMER</p>
-            <p class="mb-4">
+            <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
+              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
+              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.
+              PERSONAL, MEDICAL, LEGAL OR FINANCIAL DECISIONS AND YOU SHOULD CONSULT AN APPROPRIATE PROFESSIONAL FOR SPECIFIC ADVICE TAILORED TO YOUR SITUATION.
-            </p>
+            </p>
-            <p class="mb-4">
+            <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
+              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
+              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
+              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.
+              ALL IMPLIED WARRANTIES OR CONDITIONS OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT.
-            </p>
+            </p>
-            <p class="mb-4">
+            <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
+              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
+              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
+              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
+              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
+              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.
+              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>
-            <p class="mb-4">SERVICE CONTACT : info&#64;bizmatch.net</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="font-bold text-lg mb-4 mt-6">TERMINATION/ACCESS RESTRICTION</p>
-            <p class="mb-4">
+            <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
+              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,
+              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
+              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
+              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
+              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
+              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
+              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
+              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
+              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
+              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
+              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.
+              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>
-            <p class="font-bold text-lg mb-4 mt-6">COPYRIGHT AND TRADEMARK NOTICES:</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="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="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 names of actual companies and products mentioned herein may be the trademarks of their respective owners.</p>
-            <p class="mb-4">
+            <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
+              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.
+              inferred.
-            </p>
+            </p>
-            <p class="mb-4">Any rights not expressly granted herein are reserved.</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="font-bold text-lg mb-4 mt-6">NOTICES AND PROCEDURE FOR MAKING CLAIMS OF COPYRIGHT INFRINGEMENT</p>
-            <p class="mb-4">
+            <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
+              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.
+              INQUIRIES NOT RELEVANT TO THE FOLLOWING PROCEDURE WILL RECEIVE NO RESPONSE. See Notice and Procedure for Making Claims of Copyright Infringement.
-            </p>
+            </p>
-            <p class="mb-4">
+            <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
+              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.
+              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>
+            </p>
-          </div>
+          </div>
-        </section>
+        </section>
-      </article>
+      </article>
-    </section>
+    </section>
-  </div>
+  </div>
-</div>
+</div>

bizmatch/src/app/pages/legal/terms-of-use.component.scss

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

bizmatch/src/app/pages/legal/terms-of-use.component.ts

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

bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html

@@ -13,14 +13,14 @@
       </div>
 
       <!-- SEO-optimized heading -->
-      <div class="mb-6">
+      <!-- <div class="mb-6">
         <h1 class="text-3xl md:text-4xl font-bold text-neutral-900 mb-2">Professional Business Brokers & Advisors</h1>
         <p class="text-lg text-neutral-600">Connect with licensed business brokers, CPAs, attorneys, and other
           professionals across the United States.</p>
         <div class="mt-4 text-base text-neutral-700 max-w-4xl">
           <p>BizMatch connects business buyers and sellers with experienced professionals. Find qualified business brokers to help with your business sale or acquisition. Our platform features verified professionals including business brokers, M&A advisors, CPAs, and attorneys specializing in business transactions across the United States. Whether you're looking to buy or sell a business, our network of professionals can guide you through the process.</p>
         </div>
-      </div>
+      </div> -->
 
       <!-- Mobile Filter Button -->
       <div class="md:hidden mb-4">
@@ -44,14 +44,14 @@
             @if(currentUser) {
             <button type="button" class="bg-white rounded-full p-2 shadow-lg transition-colors"
               [class.bg-red-50]="isFavorite(user)"
-              [title]="isFavorite(user) ? 'Remove from favorites' : 'Save to favorites'"
+              [attr.aria-label]="isFavorite(user) ? 'Remove from favorites' : 'Save to favorites'"
               (click)="toggleFavorite($event, user)">
               <i
                 [class]="isFavorite(user) ? 'fas fa-heart text-red-500' : 'far fa-heart text-red-500 hover:scale-110 transition-transform'"></i>
             </button>
             }
             <button type="button" class="bg-white rounded-full p-2 shadow-lg hover:bg-blue-50 transition-colors"
-              title="Share professional" (click)="shareProfessional($event, user)">
+              aria-label="Share professional" (click)="shareProfessional($event, user)">
               <i class="fas fa-share-alt text-blue-500 hover:scale-110 transition-transform"></i>
             </button>
           </div>

bizmatch/src/app/pages/listings/business-listings/business-listings.component.html

@@ -14,11 +14,11 @@
 
       <!-- 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>
+        <h1 class="text-3xl md:text-4xl font-bold text-neutral-900 mb-2">Businesses for Sale - Find Your Next Business Opportunity</h1>
-        <p class="text-lg text-neutral-600">Discover profitable business opportunities across the United States. Browse
+        <p class="text-lg text-neutral-600">Discover profitable business opportunities across the State of Texas. Browse
           verified listings from business owners and brokers.</p>
         <div class="mt-4 text-base text-neutral-700 max-w-4xl">
-          <p>BizMatch features thousands of businesses for sale across all industries and price ranges. Browse restaurants, retail stores, franchises, service businesses, e-commerce operations, and manufacturing companies. Each listing includes financial details, years established, location information, and seller contact details. Our marketplace connects business buyers with sellers and brokers nationwide, making it easy to find your next business opportunity.</p>
+          <p>BizMatch features a curated selection of businesses for sale across diverse industries and price ranges. Browse opportunities in sectors like restaurants, retail, franchises, services, e-commerce, and manufacturing. Each listing includes financial details, years established, location information, and seller contact details. Our marketplace connects business buyers with sellers and brokers nationwide, making it easy to find your next business opportunity.</p>
         </div>
       </div>
 
@@ -68,14 +68,14 @@
               @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'"
+                [attr.aria-label]="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 type="button" class="bg-white rounded-full p-2 shadow-lg hover:bg-blue-50 transition-colors"
-                title="Share listing" (click)="shareListing($event, listing)">
+                aria-label="Share listing" (click)="shareListing($event, listing)">
                 <i class="fas fa-share-alt text-blue-500 hover:scale-110 transition-transform"></i>
               </button>
             </div>

bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts

@@ -87,8 +87,8 @@ export class BusinessListingsComponent implements OnInit, OnDestroy {
 
     // Set SEO meta tags for business listings page
     this.seoService.updateMetaTags({
-      title: 'Businesses for Sale - Profitable Opportunities | BizMatch',
+      title: 'Businesses for Sale | BizMatch',
-      description: 'Browse thousands of businesses for sale. Find restaurants, franchises, retail stores, and more. Verified listings from owners and brokers.',
+      description: 'Browse thousands of businesses for sale including restaurants, franchises, and retail stores. Verified listings nationwide.',
       keywords: 'businesses for sale, buy a business, business opportunities, franchise for sale, restaurant for sale, retail business for sale, business broker listings',
       type: 'website'
     });

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

@@ -15,9 +15,9 @@
       <!-- 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>
+        <p class="text-lg text-neutral-600">Discover selected investment properties and commercial spaces. Connect with verified sellers and brokers to find your next asset.</p>
         <div class="mt-4 text-base text-neutral-700 max-w-4xl">
-          <p>BizMatch showcases commercial real estate listings including office buildings, retail spaces, warehouses, and industrial properties for sale or lease. Browse investment properties across the United States with detailed information on square footage, zoning, pricing, and location. Our platform connects property buyers and investors with sellers and commercial real estate brokers. Find shopping centers, medical buildings, land parcels, and mixed-use developments in your target market.</p>
+          <p>BizMatch presents commercial real estate opportunities for sale or lease. View investment properties with detailed information on square footage, zoning, pricing, and location. Our platform connects property buyers and investors directly with sellers and commercial real estate brokers, focusing on transparent and valuable transactions.</p>
         </div>
       </div>
 
@@ -33,13 +33,13 @@
               class="bg-white rounded-full p-2 shadow-lg transition-colors"
               [class.bg-red-50]="isFavorite(listing)"
               [class.opacity-100]="isFavorite(listing)"
-              [title]="isFavorite(listing) ? 'Remove from favorites' : 'Save to favorites'"
+              [attr.aria-label]="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 type="button" class="bg-white rounded-full p-2 shadow-lg hover:bg-blue-50 transition-colors"
-              title="Share property" (click)="shareProperty($event, listing)">
+              aria-label="Share property" (click)="shareProperty($event, listing)">
               <i class="fas fa-share-alt text-blue-500 hover:scale-110 transition-transform"></i>
             </button>
           </div>

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

@@ -84,8 +84,8 @@ export class CommercialPropertyListingsComponent implements OnInit, OnDestroy {
 
     // Set SEO meta tags for commercial property listings page
     this.seoService.updateMetaTags({
-      title: 'Commercial Properties for Sale - Office, Retail | BizMatch',
+      title: 'Commercial Properties for Sale | BizMatch',
-      description: 'Browse commercial real estate: office buildings, retail spaces, warehouses, and industrial properties. Verified investment opportunities.',
+      description: 'Browse commercial real estate including offices, retail, warehouses, and industrial properties. Verified investment opportunities.',
       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'
     });

bizmatch/src/app/pages/login/login.component.ts

@@ -1,42 +1,42 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-
+
-import { AuthService } from '../../services/auth.service';
+import { AuthService } from '../../services/auth.service';
-import { UserService } from '../../services/user.service';
+import { UserService } from '../../services/user.service';
-import { map2User } from '../../utils/utils';
+import { map2User } from '../../utils/utils';
-
+
-@Component({
+@Component({
-  selector: 'app-login',
+  selector: 'app-login',
-  standalone: true,
+  standalone: true,
-  imports: [CommonModule, RouterModule],
+  imports: [CommonModule, RouterModule],
-  template: ``,
+  template: ``,
-})
+})
-export class LoginComponent {
+export class LoginComponent {
-  page: string | undefined = this.activatedRoute.snapshot.params['page'] as string | undefined;
+  page: string | undefined = this.activatedRoute.snapshot.params['page'] as string | undefined;
-  constructor(
+  constructor(
-    public userService: UserService,
+    public userService: UserService,
-    private activatedRoute: ActivatedRoute,
+    private activatedRoute: ActivatedRoute,
-
+
-    private router: Router,
+    private router: Router,
-    private authService: AuthService,
+    private authService: AuthService,
-  ) {}
+  ) {}
-  async ngOnInit() {
+  async ngOnInit() {
-    const token = await this.authService.getToken();
+    const token = await this.authService.getToken();
-    const keycloakUser = map2User(token);
+    const keycloakUser = map2User(token);
-    const email = keycloakUser.email;
+    const email = keycloakUser.email;
-    const user = await this.userService.getByMail(email);
+    const user = await this.userService.getByMail(email);
-    // if (!user.subscriptionPlan) {
+    // if (!user.subscriptionPlan) {
-    //   const subscriptions = await lastValueFrom(this.subscriptionService.getAllSubscriptions(user.email));
+    //   const subscriptions = await lastValueFrom(this.subscriptionService.getAllSubscriptions(user.email));
-    //   const activeSubscription = subscriptions.filter(s => s.status === 'active');
+    //   const activeSubscription = subscriptions.filter(s => s.status === 'active');
-    //   if (activeSubscription.length > 0) {
+    //   if (activeSubscription.length > 0) {
-    //     user.subscriptionPlan = activeSubscription[0].metadata['plan'] === 'Broker Plan' ? 'broker' : 'professional';
+    //     user.subscriptionPlan = activeSubscription[0].metadata['plan'] === 'Broker Plan' ? 'broker' : 'professional';
-    //     this.userService.saveGuaranteed(user);
+    //     this.userService.saveGuaranteed(user);
-    //   } else {
+    //   } else {
-    //     this.router.navigate([`/home`]);
+    //     this.router.navigate([`/home`]);
-    //     return;
+    //     return;
-    //   }
+    //   }
-    // }
+    // }
-    this.router.navigate([`/${this.page}`]);
+    this.router.navigate([`/${this.page}`]);
-  }
+  }
-}
+}

bizmatch/src/app/pages/subscription/account/account.component.html

@@ -1,335 +1,328 @@
-<div class="container mx-auto p-4">
+<div class="container mx-auto p-4">
-  @if (user){
+  @if (user){
-  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
-    <form #accountForm="ngForm" class="space-y-4">
+    <form #accountForm="ngForm" class="space-y-4">
-      <h2 class="text-2xl font-bold mb-4">Account Details</h2>
+      <h2 class="text-2xl font-bold mb-4">Account Details</h2>
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="md:col-span-2">
+        <div class="md:col-span-2">
-          <label for="email" class="block text-sm font-medium text-gray-700">E-mail (required)</label>
+          <label for="email" class="block text-sm font-medium text-gray-700">E-mail (required)</label>
-          <input type="email" id="email" name="email" [(ngModel)]="user.email" disabled
+          <input type="email" id="email" name="email" [(ngModel)]="user.email" disabled
-            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
+            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
-          <p class="text-xs text-gray-500 mt-1">You can only modify your email by contacting us at
+          <p class="text-xs text-gray-500 mt-1">You can only modify your email by contacting us at
-            support&#64;bizmatch.net</p>
+            support&#64;bizmatch.net</p>
-        </div>
+        </div>
-        @if (isProfessional || (authService.isAdmin() | async)){
+        @if (isProfessional || (authService.isAdmin() | async)){
-        <div class="flex flex-row items-center justify-around md:space-x-4">
+        <div class="flex flex-row items-center justify-around md:space-x-4">
-          <div class="flex h-full justify-between flex-col">
+          <div class="flex h-full justify-between flex-col">
-            <p class="text-sm font-medium text-gray-700 mb-1">Company Logo</p>
+            <p class="text-sm font-medium text-gray-700 mb-1">Company Logo</p>
-            <div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
+            <div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
-              @if(user?.hasCompanyLogo){
+              @if(user?.hasCompanyLogo){
-              <img src="{{ companyLogoUrl }}" alt="Company logo" class="max-w-full max-h-full" />
+              <img src="{{ companyLogoUrl }}" alt="Company logo" class="max-w-full max-h-full" />
-              <div
+              <button type="button" aria-label="Delete company logo"
-                class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer"
+                class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-2 drop-shadow-custom-bg cursor-pointer min-w-[32px] min-h-[32px] flex items-center justify-center"
-                (click)="deleteConfirm('logo')">
+                (click)="deleteConfirm('logo')">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
-                  class="w-4 h-4 text-gray-600">
+                  class="w-4 h-4 text-gray-600">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
+                </svg>
-              </div>
+              </button>
-              } @else {
+              } @else {
-              <img src="/assets/images/placeholder.png" class="max-w-full max-h-full" />
+              <img src="/assets/images/placeholder.png" class="max-w-full max-h-full" alt="" width="80" height="80" />
-              }
+              }
-            </div>
+            </div>
-            <button type="button"
+            <button type="button"
-              class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-              (click)="uploadCompanyLogo()">
+              (click)="uploadCompanyLogo()">
-              Upload
+              Upload
-            </button>
+            </button>
-          </div>
+          </div>
-          <div class="flex h-full justify-between flex-col">
+          <div class="flex h-full justify-between flex-col">
-            <p class="text-sm font-medium text-gray-700 mb-1">Your Profile Picture</p>
+            <p class="text-sm font-medium text-gray-700 mb-1">Your Profile Picture</p>
-            <div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
+            <div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
-              @if(user?.hasProfile){
+              @if(user?.hasProfile){
-              <img src="{{ profileUrl }}" alt="Profile picture" class="max-w-full max-h-full" />
+              <img src="{{ profileUrl }}" alt="Profile picture" class="max-w-full max-h-full" />
-              <div
+              <button type="button" aria-label="Delete profile picture"
-                class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer"
+                class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-2 drop-shadow-custom-bg cursor-pointer min-w-[32px] min-h-[32px] flex items-center justify-center"
-                (click)="deleteConfirm('profile')">
+                (click)="deleteConfirm('profile')">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
-                  class="w-4 h-4 text-gray-600">
+                  class="w-4 h-4 text-gray-600">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
+                </svg>
-              </div>
+              </button>
-              } @else {
+              } @else {
-              <img src="/assets/images/placeholder.png" class="max-w-full max-h-full" />
+              <img src="/assets/images/placeholder.png" class="max-w-full max-h-full" alt="" width="80" height="80" />
-              }
+              }
-            </div>
+            </div>
-            <button type="button"
+            <button type="button"
-              class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-              (click)="uploadProfile()">
+              (click)="uploadProfile()">
-              Upload
+              Upload
-            </button>
+            </button>
-          </div>
+          </div>
-        </div>
+        </div>
-        }
+        }
-      </div>
+      </div>
-
+
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <app-validated-input label="First Name" name="firstname" [(ngModel)]="user.firstname"></app-validated-input>
+        <app-validated-input label="First Name" name="firstname" [(ngModel)]="user.firstname"></app-validated-input>
-        <app-validated-input label="Last Name" name="lastname" [(ngModel)]="user.lastname"></app-validated-input>
+        <app-validated-input label="Last Name" name="lastname" [(ngModel)]="user.lastname"></app-validated-input>
-      </div>
+      </div>
-
+
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <!-- <div>
+        <!-- <div>
-          <label for="customerType" class="block text-sm font-medium text-gray-700">Customer Type</label>
+          <label for="customerType" class="block text-sm font-medium text-gray-700">Customer Type</label>
-          <select id="customerType" name="customerType" [(ngModel)]="user.customerType" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+          <select id="customerType" name="customerType" [(ngModel)]="user.customerType" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
-            <option *ngFor="let type of customerTypes" [value]="type">{{ type | titlecase }}</option>
+            <option *ngFor="let type of customerTypes" [value]="type">{{ type | titlecase }}</option>
-          </select>
+          </select>
-        </div> -->
+        </div> -->
-        @if ((authService.isAdmin() | async) && !id){
+        @if ((authService.isAdmin() | async) && !id){
-        <div>
+        <div>
-          <label for="customerType" class="block text-sm font-medium text-gray-700">User Type</label>
+          <label for="customerType" class="block text-sm font-medium text-gray-700">User Type</label>
-          <span
+          <span
-            class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">ADMIN</span>
+            class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">ADMIN</span>
-        </div>
+        </div>
-
+
-        }@else{
+        }@else{
-        <app-validated-select label="Customer Type" name="customerType" [(ngModel)]="user.customerType"
+        <app-validated-select label="Customer Type" name="customerType" [(ngModel)]="user.customerType"
-          [options]="customerTypeOptions"></app-validated-select>
+          [options]="customerTypeOptions"></app-validated-select>
-        } @if (isProfessional){
+        } @if (isProfessional){
-        <!-- <div>
+        <!-- <div>
-          <label for="customerSubType" class="block text-sm font-medium text-gray-700">Professional Type</label>
+          <label for="customerSubType" class="block text-sm font-medium text-gray-700">Professional Type</label>
-          <select id="customerSubType" name="customerSubType" [(ngModel)]="user.customerSubType" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+          <select id="customerSubType" name="customerSubType" [(ngModel)]="user.customerSubType" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
-            <option *ngFor="let subType of customerSubTypes" [value]="subType">{{ subType | titlecase }}</option>
+            <option *ngFor="let subType of customerSubTypes" [value]="subType">{{ subType | titlecase }}</option>
-          </select>
+          </select>
-        </div> -->
+        </div> -->
-        <app-validated-select label="Professional Type" name="customerSubType" [(ngModel)]="user.customerSubType"
+        <app-validated-select label="Professional Type" name="customerSubType" [(ngModel)]="user.customerSubType"
-          [options]="customerSubTypeOptions"></app-validated-select>
+          [options]="customerSubTypeOptions"></app-validated-select>
-        }
+        }
-      </div>
+      </div>
-      @if (isProfessional){
+      @if (isProfessional){
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <!-- <div>
+        <!-- <div>
-          <label for="companyName" class="block text-sm font-medium text-gray-700">Company Name</label>
+          <label for="companyName" class="block text-sm font-medium text-gray-700">Company Name</label>
-          <input type="text" id="companyName" name="companyName" [(ngModel)]="user.companyName" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
+          <input type="text" id="companyName" name="companyName" [(ngModel)]="user.companyName" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
-        </div> -->
+        </div> -->
-        <!-- <div>
+        <!-- <div>
-          <label for="description" class="block text-sm font-medium text-gray-700">Describe yourself</label>
+          <label for="description" class="block text-sm font-medium text-gray-700">Describe yourself</label>
-          <input type="text" id="description" name="description" [(ngModel)]="user.description" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
+          <input type="text" id="description" name="description" [(ngModel)]="user.description" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
-        </div> -->
+        </div> -->
-        <app-validated-input label="Company Name" name="companyName"
+        <app-validated-input label="Company Name" name="companyName"
-          [(ngModel)]="user.companyName"></app-validated-input>
+          [(ngModel)]="user.companyName"></app-validated-input>
-        <app-validated-input label="Describe Yourself" name="description"
+        <app-validated-input label="Describe Yourself" name="description"
-          [(ngModel)]="user.description"></app-validated-input>
+          [(ngModel)]="user.description"></app-validated-input>
-      </div>
+      </div>
-
+
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <!-- <div>
+        <!-- <div>
-          <label for="phoneNumber" class="block text-sm font-medium text-gray-700">Your Phone Number</label>
+          <label for="phoneNumber" class="block text-sm font-medium text-gray-700">Your Phone Number</label>
-          <input type="tel" id="phoneNumber" name="phoneNumber" [(ngModel)]="user.phoneNumber" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
+          <input type="tel" id="phoneNumber" name="phoneNumber" [(ngModel)]="user.phoneNumber" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
-        </div>
+        </div>
-        <div>
+        <div>
-          <label for="companyWebsite" class="block text-sm font-medium text-gray-700">Company Website</label>
+          <label for="companyWebsite" class="block text-sm font-medium text-gray-700">Company Website</label>
-          <input type="url" id="companyWebsite" name="companyWebsite" [(ngModel)]="user.companyWebsite" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
+          <input type="url" id="companyWebsite" name="companyWebsite" [(ngModel)]="user.companyWebsite" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
-        </div>
+        </div>
-        <div>
+        <div>
-          <label for="companyLocation" class="block text-sm font-medium text-gray-700">Company Location</label>
+          <label for="companyLocation" class="block text-sm font-medium text-gray-700">Company Location</label>
-          <input type="text" id="companyLocation" name="companyLocation" [(ngModel)]="user.companyLocation" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
+          <input type="text" id="companyLocation" name="companyLocation" [(ngModel)]="user.companyLocation" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
-        </div> -->
+        </div> -->
-        <app-validated-input label="Your Phone Number" name="phoneNumber" [(ngModel)]="user.phoneNumber"
+        <app-validated-input label="Your Phone Number" name="phoneNumber" [(ngModel)]="user.phoneNumber"
-          mask="(000) 000-0000"></app-validated-input>
+          mask="(000) 000-0000"></app-validated-input>
-        <app-validated-input label="Company Website" name="companyWebsite"
+        <app-validated-input label="Company Website" name="companyWebsite"
-          [(ngModel)]="user.companyWebsite"></app-validated-input>
+          [(ngModel)]="user.companyWebsite"></app-validated-input>
-        <!-- <app-validated-input label="Company Location" name="companyLocation" [(ngModel)]="user.companyLocation"></app-validated-input> -->
+        <app-validated-location label="Company Location" name="location"
-        <!-- <app-validated-city label="Company Location" name="location" [(ngModel)]="user.location"></app-validated-city> -->
+          [(ngModel)]="user.location"></app-validated-location>
-        <app-validated-location label="Company Location" name="location"
+      </div>
-          [(ngModel)]="user.location"></app-validated-location>
+
-      </div>
+
-
+      <div>
-      <!-- <div>
+        <app-validated-quill label="Company Overview" name="companyOverview"
-        <label for="companyOverview" class="block text-sm font-medium text-gray-700">Company Overview</label>
+          [(ngModel)]="user.companyOverview"></app-validated-quill>
-        <quill-editor [(ngModel)]="user.companyOverview" name="companyOverview" [modules]="quillModules"></quill-editor>
+      </div>
-      </div> -->
+      <div>
-      <div>
+        <app-validated-quill label="Services We Offer" name="offeredServices"
-        <app-validated-quill label="Company Overview" name="companyOverview"
+          [(ngModel)]="user.offeredServices"></app-validated-quill>
-          [(ngModel)]="user.companyOverview"></app-validated-quill>
+      </div>
-      </div>
+
-      <div>
+      <div>
-        <!-- <label for="offeredServices" class="block text-sm font-medium text-gray-700">Services We Offer</label>
+        <h3 class="text-lg font-medium text-gray-700 mb-2 relative w-fit">
-        <quill-editor [(ngModel)]="user.offeredServices" name="offeredServices" [modules]="quillModules"></quill-editor> -->
+          Areas We Serve @if(getValidationMessage('areasServed')){
-        <app-validated-quill label="Services We Offer" name="offeredServices"
+          <div [attr.data-tooltip-target]="tooltipTargetAreasServed"
-          [(ngModel)]="user.offeredServices"></app-validated-quill>
+            class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer">
-      </div>
+            !
-
+          </div>
-      <div>
+          <app-tooltip [id]="tooltipTargetAreasServed" [text]="getValidationMessage('areasServed')"></app-tooltip>
-        <h3 class="text-lg font-medium text-gray-700 mb-2 relative w-fit">
+          }
-          Areas We Serve @if(getValidationMessage('areasServed')){
+        </h3>
-          <div [attr.data-tooltip-target]="tooltipTargetAreasServed"
+        <div class="grid grid-cols-12 gap-4">
-            class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer">
+          <div class="col-span-6">
-            !
+            <label for="state" class="block text-sm font-medium text-gray-700">State</label>
-          </div>
+          </div>
-          <app-tooltip [id]="tooltipTargetAreasServed" [text]="getValidationMessage('areasServed')"></app-tooltip>
+          <div class="col-span-5">
-          }
+            <label for="county" class="block text-sm font-medium text-gray-700">County</label>
-        </h3>
+          </div>
-        <div class="grid grid-cols-12 gap-4">
+        </div>
-          <div class="col-span-6">
+        @for (areasServed of user.areasServed; track areasServed; let i=$index){
-            <label for="state" class="block text-sm font-medium text-gray-700">State</label>
+        <div class="grid grid-cols-12 md:gap-4 gap-1 mb-3 md:mb-1">
-          </div>
+          <div class="col-span-6">
-          <div class="col-span-5">
+            <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value"
-            <label for="county" class="block text-sm font-medium text-gray-700">County</label>
+              [(ngModel)]="areasServed.state" (ngModelChange)="setState(i, $event)" name="areasServed_state{{ i }}">
-          </div>
+            </ng-select>
-        </div>
+          </div>
-        @for (areasServed of user.areasServed; track areasServed; let i=$index){
+          <div class="col-span-5">
-        <div class="grid grid-cols-12 md:gap-4 gap-1 mb-3 md:mb-1">
+            <!-- <input type="text" id="county{{ i }}" name="county{{ i }}" [(ngModel)]="areasServed.county" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" /> -->
-          <div class="col-span-6">
+            <app-validated-county name="county{{ i }}" [(ngModel)]="areasServed.county"
-            <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value"
+              labelClasses="text-gray-900 font-medium" [state]="areasServed.state"
-              [(ngModel)]="areasServed.state" (ngModelChange)="setState(i, $event)" name="areasServed_state{{ i }}">
+              [readonly]="!areasServed.state"></app-validated-county>
-            </ng-select>
+          </div>
-          </div>
+          <div class="col-span-1">
-          <div class="col-span-5">
+            <button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md h-[42px] w-8"
-            <!-- <input type="text" id="county{{ i }}" name="county{{ i }}" [(ngModel)]="areasServed.county" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" /> -->
+              (click)="removeArea(i)">-</button>
-            <app-validated-county name="county{{ i }}" [(ngModel)]="areasServed.county"
+          </div>
-              labelClasses="text-gray-900 font-medium" [state]="areasServed.state"
+        </div>
-              [readonly]="!areasServed.state"></app-validated-county>
+        }
-          </div>
+        <div class="mt-2">
-          <div class="col-span-1">
+          <button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2 h-[42px] w-8"
-            <button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md h-[42px] w-8"
+            (click)="addArea()">+</button>
-              (click)="removeArea(i)">-</button>
+
-          </div>
+          <span class="text-sm text-gray-500 ml-2">[Add more Areas or remove existing ones.]</span>
-        </div>
+        </div>
-        }
+      </div>
-        <div class="mt-2">
+
-          <button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2 h-[42px] w-8"
+      <div>
-            (click)="addArea()">+</button>
+        <h3 class="text-lg font-medium text-gray-700 mb-2 relative">
-
+          Licensed In@if(getValidationMessage('licensedIn')){
-          <span class="text-sm text-gray-500 ml-2">[Add more Areas or remove existing ones.]</span>
+          <div [attr.data-tooltip-target]="tooltipTargetLicensed"
-        </div>
+            class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer">
-      </div>
+            !
-
+          </div>
-      <div>
+          <app-tooltip [id]="tooltipTargetLicensed" [text]="getValidationMessage('licensedIn')"></app-tooltip>
-        <h3 class="text-lg font-medium text-gray-700 mb-2 relative">
+          }
-          Licensed In@if(getValidationMessage('licensedIn')){
+        </h3>
-          <div [attr.data-tooltip-target]="tooltipTargetLicensed"
+        <div class="grid grid-cols-12 gap-4">
-            class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer">
+          <div class="col-span-6">
-            !
+            <label for="state" class="block text-sm font-medium text-gray-700">State</label>
-          </div>
+          </div>
-          <app-tooltip [id]="tooltipTargetLicensed" [text]="getValidationMessage('licensedIn')"></app-tooltip>
+          <div class="col-span-5">
-          }
+            <label for="county" class="block text-sm font-medium text-gray-700">License Number</label>
-        </h3>
+          </div>
-        <div class="grid grid-cols-12 gap-4">
+        </div>
-          <div class="col-span-6">
+        @for (licensedIn of user.licensedIn; track licensedIn; let i=$index){
-            <label for="state" class="block text-sm font-medium text-gray-700">State</label>
+        <div class="grid grid-cols-12 md:gap-4 gap-1 mb-3 md:mb-1">
-          </div>
+          <div class="col-span-6">
-          <div class="col-span-5">
+            <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="licensedIn.state"
-            <label for="county" class="block text-sm font-medium text-gray-700">License Number</label>
+              name="licensedIn_state{{ i }}"> </ng-select>
-          </div>
+          </div>
-        </div>
+          <div class="col-span-5">
-        @for (licensedIn of user.licensedIn; track licensedIn; let i=$index){
+            <input type="text" id="licenseNumber{{ i }}" name="licenseNumber{{ i }}" [(ngModel)]="licensedIn.registerNo"
-        <div class="grid grid-cols-12 md:gap-4 gap-1 mb-3 md:mb-1">
+              class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
-          <div class="col-span-6">
+          </div>
-            <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="licensedIn.state"
+          <button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md h-[42px] w-8"
-              name="licensedIn_state{{ i }}"> </ng-select>
+            (click)="removeLicence(i)">-</button>
-          </div>
+        </div>
-          <div class="col-span-5">
+        }
-            <input type="text" id="licenseNumber{{ i }}" name="licenseNumber{{ i }}" [(ngModel)]="licensedIn.registerNo"
+        <div class="mt-2">
-              class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
+          <button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2 h-[42px] w-8"
-          </div>
+            (click)="addLicence()">+</button>
-          <button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md h-[42px] w-8"
+          <span class="text-sm text-gray-500 ml-2">[Add more licenses or remove existing ones.]</span>
-            (click)="removeLicence(i)">-</button>
+        </div>
-        </div>
+      </div>
-        }
+      <div class="flex items-center !my-8">
-        <div class="mt-2">
+        <label class="flex items-center cursor-pointer">
-          <button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2 h-[42px] w-8"
+          <div class="relative">
-            (click)="addLicence()">+</button>
+            <input type="checkbox" [(ngModel)]="user.showInDirectory" name="showInDirectory" class="hidden" />
-          <span class="text-sm text-gray-500 ml-2">[Add more licenses or remove existing ones.]</span>
+            <div class="toggle-bg block w-12 h-6 rounded-full bg-gray-600 transition"></div>
-        </div>
+          </div>
-      </div>
+          <div class="ml-3 text-gray-700 font-medium">Show your profile in Professional Directory</div>
-      <div class="flex items-center !my-8">
+        </label>
-        <label class="flex items-center cursor-pointer">
+      </div>
-          <div class="relative">
+      }
-            <input type="checkbox" [(ngModel)]="user.showInDirectory" name="showInDirectory" class="hidden" />
+
-            <div class="toggle-bg block w-12 h-6 rounded-full bg-gray-600 transition"></div>
+      <div class="flex justify-start">
-          </div>
+        <button type="submit"
-          <div class="ml-3 text-gray-700 font-medium">Show your profile in Professional Directory</div>
+          class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-        </label>
+          (click)="updateProfile(user)">
-      </div>
+          Update Profile
-      }
+        </button>
-
+      </div>
-      <div class="flex justify-start">
+    </form>
-        <button type="submit"
+    <!-- <div class="mt-8 max-lg:hidden">
-          class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+      <h3 class="text-lg font-medium text-gray-700 mb-2">Membership Level</h3>
-          (click)="updateProfile(user)">
+      <div class="overflow-x-auto">
-          Update Profile
+        <div class="inline-block min-w-full">
-        </button>
+          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
-      </div>
+            <table class="min-w-full divide-y divide-gray-200">
-    </form>
+              <thead class="bg-gray-50">
-    <!-- <div class="mt-8 max-lg:hidden">
+                <tr>
-      <h3 class="text-lg font-medium text-gray-700 mb-2">Membership Level</h3>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Level</th>
-      <div class="overflow-x-auto">
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Date</th>
-        <div class="inline-block min-w-full">
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End Date</th>
-          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Next Settlement</th>
-            <table class="min-w-full divide-y divide-gray-200">
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-              <thead class="bg-gray-50">
+                </tr>
-                <tr>
+              </thead>
-                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Level</th>
+              <tbody class="bg-white divide-y divide-gray-200">
-                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Date</th>
+                @for (subscription of subscriptions; track subscriptions; let i=$index){
-                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End Date</th>
+                <tr>
-                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Next Settlement</th>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getLevel(i) }}</td>
-                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getStartDate(i) }}</td>
-                </tr>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getEndDate(i) }}</td>
-              </thead>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getNextSettlement(i) }}</td>
-              <tbody class="bg-white divide-y divide-gray-200">
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getStatus(i) }}</td>
-                @for (subscription of subscriptions; track subscriptions; let i=$index){
+                </tr>
-                <tr>
+                }
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getLevel(i) }}</td>
+              </tbody>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getStartDate(i) }}</td>
+            </table>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getEndDate(i) }}</td>
+          </div>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getNextSettlement(i) }}</td>
+        </div>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ getStatus(i) }}</td>
+      </div>
-                </tr>
+    </div>
-                }
+
-              </tbody>
+    <div class="mt-8 sm:hidden">
-            </table>
+      <h3 class="text-lg font-medium text-gray-700 mb-1">Membership Level</h3>
-          </div>
+      <div class="space-y-2">
-        </div>
+        @for (subscription of subscriptions; track subscriptions; let i=$index){
-      </div>
+        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
-    </div>
+          <div class="px-4 py-5 sm:px-6">
-
+            <dl class="grid grid-cols-1 gap-x-4 gap-y-2 sm:grid-cols-2">
-    <div class="mt-8 sm:hidden">
+              <div class="sm:col-span-1 flex">
-      <h3 class="text-lg font-medium text-gray-700 mb-1">Membership Level</h3>
+                <dt class="text-sm font-bold text-gray-500 mr-2">Level</dt>
-      <div class="space-y-2">
+                <dd class="text-sm text-gray-900">{{ getLevel(i) }}</dd>
-        @for (subscription of subscriptions; track subscriptions; let i=$index){
+              </div>
-        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+              <div class="sm:col-span-1 flex">
-          <div class="px-4 py-5 sm:px-6">
+                <dt class="text-sm font-bold text-gray-500 mr-2">Start Date</dt>
-            <dl class="grid grid-cols-1 gap-x-4 gap-y-2 sm:grid-cols-2">
+                <dd class="text-sm text-gray-900">{{ getStartDate(i) }}</dd>
-              <div class="sm:col-span-1 flex">
+              </div>
-                <dt class="text-sm font-bold text-gray-500 mr-2">Level</dt>
+              <div class="sm:col-span-1 flex">
-                <dd class="text-sm text-gray-900">{{ getLevel(i) }}</dd>
+                <dt class="text-sm font-bold text-gray-500 mr-2">End Date</dt>
-              </div>
+                <dd class="text-sm text-gray-900">{{ getEndDate(i) }}</dd>
-              <div class="sm:col-span-1 flex">
+              </div>
-                <dt class="text-sm font-bold text-gray-500 mr-2">Start Date</dt>
+              <div class="sm:col-span-1 flex">
-                <dd class="text-sm text-gray-900">{{ getStartDate(i) }}</dd>
+                <dt class="text-sm font-bold text-gray-500 mr-2">Next Settlement</dt>
-              </div>
+                <dd class="text-sm text-gray-900">{{ getNextSettlement(i) }}</dd>
-              <div class="sm:col-span-1 flex">
+              </div>
-                <dt class="text-sm font-bold text-gray-500 mr-2">End Date</dt>
+              <div class="sm:col-span-1 flex">
-                <dd class="text-sm text-gray-900">{{ getEndDate(i) }}</dd>
+                <dt class="text-sm font-bold text-gray-500 mr-2">Status</dt>
-              </div>
+                <dd class="text-sm text-gray-900">{{ getStatus(i) }}</dd>
-              <div class="sm:col-span-1 flex">
+              </div>
-                <dt class="text-sm font-bold text-gray-500 mr-2">Next Settlement</dt>
+            </dl>
-                <dd class="text-sm text-gray-900">{{ getNextSettlement(i) }}</dd>
+          </div>
-              </div>
+        </div>
-              <div class="sm:col-span-1 flex">
+        }
-                <dt class="text-sm font-bold text-gray-500 mr-2">Status</dt>
+      </div>
-                <dd class="text-sm text-gray-900">{{ getStatus(i) }}</dd>
+    </div> -->
-              </div>
+    <!-- @if(user.subscriptionPlan==='free'){
-            </dl>
+    <div class="flex justify-start">
-          </div>
+      <button
-        </div>
+        routerLink="/pricing"
-        }
+        class="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-white focus:outline-none bg-green-500 rounded-lg border border-gray-400 hover:bg-green-600 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-      </div>
+      >
-    </div> -->
+        Upgrade Subscription Plan
-    <!-- @if(user.subscriptionPlan==='free'){
+      </button>
-    <div class="flex justify-start">
+    </div>
-      <button
+    } -->
-        routerLink="/pricing"
+  </div>
-        class="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-white focus:outline-none bg-green-500 rounded-lg border border-gray-400 hover:bg-green-600 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+  }
-      >
+</div>
-        Upgrade Subscription Plan
+<app-image-crop-and-upload [uploadParams]="uploadParams"
-      </button>
+  (uploadFinished)="uploadFinished($event)"></app-image-crop-and-upload>
-    </div>
-    } -->
-  </div>
-  }
-</div>
-<app-image-crop-and-upload [uploadParams]="uploadParams"
-  (uploadFinished)="uploadFinished($event)"></app-image-crop-and-upload>
 <app-confirmation></app-confirmation>

bizmatch/src/app/pages/subscription/account/account.component.ts

@@ -1,274 +1,277 @@
-import { DatePipe, TitleCasePipe } from '@angular/common';
+import { DatePipe, TitleCasePipe } from '@angular/common';
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { APP_ICONS } from '../../../utils/fontawesome-icons';
-import { NgSelectModule } from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
-import { QuillModule } from 'ngx-quill';
+import { QuillModule } from 'ngx-quill';
-import { lastValueFrom } from 'rxjs';
+import { lastValueFrom } from 'rxjs';
-import { User } from '../../../../../../bizmatch-server/src/models/db.model';
+import { User } from '../../../../../../bizmatch-server/src/models/db.model';
-import { AutoCompleteCompleteEvent, Invoice, UploadParams, ValidationMessage, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
+import { AutoCompleteCompleteEvent, Invoice, UploadParams, ValidationMessage, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
-import { environment } from '../../../../environments/environment';
+import { environment } from '../../../../environments/environment';
-import { ConfirmationComponent } from '../../../components/confirmation/confirmation.component';
+import { ConfirmationComponent } from '../../../components/confirmation/confirmation.component';
-import { ConfirmationService } from '../../../components/confirmation/confirmation.service';
+import { ConfirmationService } from '../../../components/confirmation/confirmation.service';
-import { ImageCropAndUploadComponent, UploadReponse } from '../../../components/image-crop-and-upload/image-crop-and-upload.component';
+import { ImageCropAndUploadComponent, UploadReponse } from '../../../components/image-crop-and-upload/image-crop-and-upload.component';
-import { MessageService } from '../../../components/message/message.service';
+import { MessageService } from '../../../components/message/message.service';
-import { TooltipComponent } from '../../../components/tooltip/tooltip.component';
+import { TooltipComponent } from '../../../components/tooltip/tooltip.component';
-import { ValidatedCountyComponent } from '../../../components/validated-county/validated-county.component';
+import { ValidatedCountyComponent } from '../../../components/validated-county/validated-county.component';
-import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
+import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
-import { ValidatedLocationComponent } from '../../../components/validated-location/validated-location.component';
+import { ValidatedLocationComponent } from '../../../components/validated-location/validated-location.component';
-import { ValidatedQuillComponent } from '../../../components/validated-quill/validated-quill.component';
+import { ValidatedQuillComponent } from '../../../components/validated-quill/validated-quill.component';
-import { ValidatedSelectComponent } from '../../../components/validated-select/validated-select.component';
+import { ValidatedSelectComponent } from '../../../components/validated-select/validated-select.component';
-import { ValidationMessagesService } from '../../../components/validation-messages.service';
+import { ValidationMessagesService } from '../../../components/validation-messages.service';
-import { AuthService } from '../../../services/auth.service';
+import { AuthService } from '../../../services/auth.service';
-import { GeoService } from '../../../services/geo.service';
+import { GeoService } from '../../../services/geo.service';
-import { ImageService } from '../../../services/image.service';
+import { ImageService } from '../../../services/image.service';
-import { LoadingService } from '../../../services/loading.service';
+import { LoadingService } from '../../../services/loading.service';
-import { SelectOptionsService } from '../../../services/select-options.service';
+import { SelectOptionsService } from '../../../services/select-options.service';
-import { SharedService } from '../../../services/shared.service';
+import { SharedService } from '../../../services/shared.service';
-import { UserService } from '../../../services/user.service';
+import { UserService } from '../../../services/user.service';
-import { SharedModule } from '../../../shared/shared/shared.module';
+import { SharedModule } from '../../../shared/shared/shared.module';
-import { map2User } from '../../../utils/utils';
+import { map2User } from '../../../utils/utils';
-import { TOOLBAR_OPTIONS } from '../../utils/defaults';
+import { TOOLBAR_OPTIONS } from '../../utils/defaults';
-@Component({
+@Component({
-  selector: 'app-account',
+  selector: 'app-account',
-  standalone: true,
+  standalone: true,
-  imports: [
+  imports: [
-    SharedModule,
+    SharedModule,
-    QuillModule,
+    QuillModule,
-    NgSelectModule,
+    NgSelectModule,
-    ConfirmationComponent,
+    ConfirmationComponent,
-    ImageCropAndUploadComponent,
+    ImageCropAndUploadComponent,
-    ValidatedInputComponent,
+    ValidatedInputComponent,
-    ValidatedSelectComponent,
+    ValidatedSelectComponent,
-    ValidatedQuillComponent,
+    ValidatedQuillComponent,
-    TooltipComponent,
+    TooltipComponent,
-    ValidatedCountyComponent,
+    ValidatedCountyComponent,
-    ValidatedLocationComponent,
+    ValidatedLocationComponent,
-  ],
+  ],
-  providers: [TitleCasePipe, DatePipe],
+  providers: [
-  templateUrl: './account.component.html',
+    TitleCasePipe,
-  styleUrl: './account.component.scss',
+    DatePipe
-})
+  ],
-export class AccountComponent {
+  templateUrl: './account.component.html',
-  id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
+  styleUrls: [
-  user: User;
+    './account.component.scss',
-  companyLogoUrl: string;
+    '../../../../../node_modules/quill/dist/quill.snow.css'
-  profileUrl: string;
+  ],
-  type: 'company' | 'profile';
+})
-  environment = environment;
+export class AccountComponent {
-  editorModules = TOOLBAR_OPTIONS;
+  id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
-  env = environment;
+  user: User;
-  faTrash = faTrash;
+  companyLogoUrl: string;
-  quillModules = {
+  profileUrl: string;
-    toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], ['clean']],
+  type: 'company' | 'profile';
-  };
+  environment = environment;
-  uploadParams: UploadParams;
+  editorModules = TOOLBAR_OPTIONS;
-  validationMessages: ValidationMessage[] = [];
+  env = environment;
-  customerTypeOptions: Array<{ value: string; label: string }> = [];
+  faTrash = APP_ICONS.faTrash;
-  customerSubTypeOptions: Array<{ value: string; label: string }> = [];
+  uploadParams: UploadParams;
-  tooltipTargetAreasServed = 'tooltip-areasServed';
+  validationMessages: ValidationMessage[] = [];
-  tooltipTargetLicensed = 'tooltip-licensedIn';
+  customerTypeOptions: Array<{ value: string; label: string }> = [];
-  constructor(
+  customerSubTypeOptions: Array<{ value: string; label: string }> = [];
-    public userService: UserService,
+  tooltipTargetAreasServed = 'tooltip-areasServed';
-    private geoService: GeoService,
+  tooltipTargetLicensed = 'tooltip-licensedIn';
-    public selectOptions: SelectOptionsService,
+  constructor(
-    private cdref: ChangeDetectorRef,
+    public userService: UserService,
-    private activatedRoute: ActivatedRoute,
+    private geoService: GeoService,
-    private loadingService: LoadingService,
+    public selectOptions: SelectOptionsService,
-    private imageUploadService: ImageService,
+    private cdref: ChangeDetectorRef,
-    private imageService: ImageService,
+    private activatedRoute: ActivatedRoute,
-    private confirmationService: ConfirmationService,
+    private loadingService: LoadingService,
-    private messageService: MessageService,
+    private imageUploadService: ImageService,
-    private sharedService: SharedService,
+    private imageService: ImageService,
-    private titleCasePipe: TitleCasePipe,
+    private confirmationService: ConfirmationService,
-    private validationMessagesService: ValidationMessagesService,
+    private messageService: MessageService,
-    private datePipe: DatePipe,
+    private sharedService: SharedService,
-    private router: Router,
+    private titleCasePipe: TitleCasePipe,
-    public authService: AuthService,
+    private validationMessagesService: ValidationMessagesService,
-  ) { }
+    private datePipe: DatePipe,
-  async ngOnInit() {
+    private router: Router,
-    // Flowbite is now initialized once in AppComponent
+    public authService: AuthService,
-    if (this.id) {
+  ) { }
-      this.user = await this.userService.getById(this.id);
+  async ngOnInit() {
-    } else {
+    // Flowbite is now initialized once in AppComponent
-      const token = await this.authService.getToken();
+    if (this.id) {
-      const keycloakUser = map2User(token);
+      this.user = await this.userService.getById(this.id);
-      const email = keycloakUser.email;
+    } else {
-      this.user = await this.userService.getByMail(email);
+      const token = await this.authService.getToken();
-    }
+      const keycloakUser = map2User(token);
-
+      const email = keycloakUser.email;
-    // this.subscriptions = await lastValueFrom(this.subscriptionService.getAllSubscriptions(this.user.email));
+      this.user = await this.userService.getByMail(email);
-    // await this.synchronizeSubscriptions(this.subscriptions);
+    }
-    this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
+
-    this.companyLogoUrl = this.user.hasCompanyLogo ? `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
+    // this.subscriptions = await lastValueFrom(this.subscriptionService.getAllSubscriptions(this.user.email));
-
+    // await this.synchronizeSubscriptions(this.subscriptions);
-    this.customerTypeOptions = this.selectOptions.customerTypes
+    this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
-      // .filter(ct => ct.value === 'buyer' || ct.value === 'seller' || this.user.customerType === 'professional')
+    this.companyLogoUrl = this.user.hasCompanyLogo ? `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
-      .map(type => ({
+
-        value: type.value,
+    this.customerTypeOptions = this.selectOptions.customerTypes
-        label: this.titleCasePipe.transform(type.name),
+      // .filter(ct => ct.value === 'buyer' || ct.value === 'seller' || this.user.customerType === 'professional')
-      }));
+      .map(type => ({
-
+        value: type.value,
-    this.customerSubTypeOptions = this.selectOptions.customerSubTypes
+        label: this.titleCasePipe.transform(type.name),
-      // .filter(ct => ct.value !== 'broker' || this.user.customerSubType === 'broker')
+      }));
-      .map(type => ({
+
-        value: type.value,
+    this.customerSubTypeOptions = this.selectOptions.customerSubTypes
-        label: this.titleCasePipe.transform(type.name),
+      // .filter(ct => ct.value !== 'broker' || this.user.customerSubType === 'broker')
-      }));
+      .map(type => ({
-  }
+        value: type.value,
-  // async synchronizeSubscriptions(subscriptions: StripeSubscription[]) {
+        label: this.titleCasePipe.transform(type.name),
-  //   let changed = false;
+      }));
-  //   if (this.isAdmin()) {
+  }
-  //     return;
+  // async synchronizeSubscriptions(subscriptions: StripeSubscription[]) {
-  //   }
+  //   let changed = false;
-  //   if (this.subscriptions.length === 0) {
+  //   if (this.isAdmin()) {
-  //     if (!this.user.subscriptionPlan) {
+  //     return;
-  //       this.router.navigate(['pricing']);
+  //   }
-  //     } else {
+  //   if (this.subscriptions.length === 0) {
-  //       this.subscriptions = [{ ended_at: null, start_date: Math.floor(new Date(this.user.created).getTime() / 1000), status: null, metadata: { plan: 'Free Plan' } }];
+  //     if (!this.user.subscriptionPlan) {
-  //       changed = checkAndUpdate(changed, this.user.customerType !== 'buyer' && this.user.customerType !== 'seller', () => (this.user.customerType = 'buyer'));
+  //       this.router.navigate(['pricing']);
-  //       changed = checkAndUpdate(changed, !!this.user.customerSubType, () => (this.user.customerSubType = null));
+  //     } else {
-  //       changed = checkAndUpdate(changed, this.user.subscriptionPlan !== 'free', () => (this.user.subscriptionPlan = 'free'));
+  //       this.subscriptions = [{ ended_at: null, start_date: Math.floor(new Date(this.user.created).getTime() / 1000), status: null, metadata: { plan: 'Free Plan' } }];
-  //       changed = checkAndUpdate(changed, !!this.user.subscriptionId, () => (this.user.subscriptionId = null));
+  //       changed = checkAndUpdate(changed, this.user.customerType !== 'buyer' && this.user.customerType !== 'seller', () => (this.user.customerType = 'buyer'));
-  //     }
+  //       changed = checkAndUpdate(changed, !!this.user.customerSubType, () => (this.user.customerSubType = null));
-  //   } else {
+  //       changed = checkAndUpdate(changed, this.user.subscriptionPlan !== 'free', () => (this.user.subscriptionPlan = 'free'));
-  //     const subscription = subscriptions[0];
+  //       changed = checkAndUpdate(changed, !!this.user.subscriptionId, () => (this.user.subscriptionId = null));
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && this.user.customerType !== 'professional', () => (this.user.customerType = 'professional'));
+  //     }
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && this.user.customerSubType !== 'broker', () => (this.user.customerSubType = 'broker'));
+  //   } else {
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && this.user.subscriptionPlan !== 'broker', () => (this.user.subscriptionPlan = 'broker'));
+  //     const subscription = subscriptions[0];
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && !this.user.subscriptionId, () => (this.user.subscriptionId = subscription.id));
+  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && this.user.customerType !== 'professional', () => (this.user.customerType = 'professional'));
-
+  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && this.user.customerSubType !== 'broker', () => (this.user.customerSubType = 'broker'));
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Professional Plan' && this.user.customerType !== 'professional', () => (this.user.customerType = 'professional'));
+  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && this.user.subscriptionPlan !== 'broker', () => (this.user.subscriptionPlan = 'broker'));
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Professional Plan' && this.user.subscriptionPlan !== 'professional', () => (this.user.subscriptionPlan = 'professional'));
+  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && !this.user.subscriptionId, () => (this.user.subscriptionId = subscription.id));
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Professional Plan' && this.user.subscriptionId !== 'professional', () => (this.user.subscriptionId = subscription.id));
+
-  //   }
+  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Professional Plan' && this.user.customerType !== 'professional', () => (this.user.customerType = 'professional'));
-  //   if (changed) {
+  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Professional Plan' && this.user.subscriptionPlan !== 'professional', () => (this.user.subscriptionPlan = 'professional'));
-  //     await this.userService.saveGuaranteed(this.user);
+  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Professional Plan' && this.user.subscriptionId !== 'professional', () => (this.user.subscriptionId = subscription.id));
-  //     this.cdref.detectChanges();
+  //   }
-  //     this.cdref.markForCheck();
+  //   if (changed) {
-  //   }
+  //     await this.userService.saveGuaranteed(this.user);
-  // }
+  //     this.cdref.detectChanges();
-
+  //     this.cdref.markForCheck();
-  ngOnDestroy() {
+  //   }
-    this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
+  // }
-  }
+
-  printInvoice(invoice: Invoice) { }
+  ngOnDestroy() {
-
+    this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
-  async updateProfile(user: User) {
+  }
-    try {
+  printInvoice(invoice: Invoice) { }
-      await this.userService.save(this.user);
+
-      this.userService.changeUser(this.user);
+  async updateProfile(user: User) {
-      this.messageService.addMessage({ severity: 'success', text: 'Account changes have been persisted', duration: 3000 });
+    try {
-      this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
+      await this.userService.save(this.user);
-      this.validationMessages = [];
+      this.userService.changeUser(this.user);
-    } catch (error) {
+      this.messageService.addMessage({ severity: 'success', text: 'Account changes have been persisted', duration: 3000 });
-      this.messageService.addMessage({
+      this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
-        severity: 'danger',
+      this.validationMessages = [];
-        text: 'An error occurred while saving the profile - Please check your inputs',
+    } catch (error) {
-        duration: 5000,
+      this.messageService.addMessage({
-      });
+        severity: 'danger',
-      if (error.error && Array.isArray(error.error?.message)) {
+        text: 'An error occurred while saving the profile - Please check your inputs',
-        this.validationMessagesService.updateMessages(error.error.message);
+        duration: 5000,
-        this.validationMessages = error.error.message;
+      });
-      }
+      if (error.error && Array.isArray(error.error?.message)) {
-    }
+        this.validationMessagesService.updateMessages(error.error.message);
-  }
+        this.validationMessages = error.error.message;
-
+      }
-  onUploadCompanyLogo(event: any) {
+    }
-    const uniqueSuffix = '?_ts=' + new Date().getTime();
+  }
-    this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}${uniqueSuffix}`;
+
-  }
+  onUploadCompanyLogo(event: any) {
-  onUploadProfilePicture(event: any) {
+    const uniqueSuffix = '?_ts=' + new Date().getTime();
-    const uniqueSuffix = '?_ts=' + new Date().getTime();
+    this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}${uniqueSuffix}`;
-    this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}${uniqueSuffix}`;
+  }
-  }
+  onUploadProfilePicture(event: any) {
-  setImageToFallback(event: Event) {
+    const uniqueSuffix = '?_ts=' + new Date().getTime();
-    (event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild
+    this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}${uniqueSuffix}`;
-  }
+  }
-
+  setImageToFallback(event: Event) {
-  suggestions: string[] | undefined;
+    (event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild
-
+  }
-  async search(event: AutoCompleteCompleteEvent) {
+
-    const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query));
+  suggestions: string[] | undefined;
-    this.suggestions = result.map(r => `${r.name} - ${r.state}`).slice(0, 5);
+
-  }
+  async search(event: AutoCompleteCompleteEvent) {
-  addLicence() {
+    const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query));
-    this.user.licensedIn.push({ registerNo: '', state: '' });
+    this.suggestions = result.map(r => `${r.name} - ${r.state}`).slice(0, 5);
-  }
+  }
-  removeLicence(index: number) {
+  addLicence() {
-    this.user.licensedIn.splice(index, 1);
+    this.user.licensedIn.push({ registerNo: '', state: '' });
-  }
+  }
-  addArea() {
+  removeLicence(index: number) {
-    this.user.areasServed.push({ county: '', state: '' });
+    this.user.licensedIn.splice(index, 1);
-  }
+  }
-  removeArea(index: number) {
+  addArea() {
-    this.user.areasServed.splice(index, 1);
+    this.user.areasServed.push({ county: '', state: '' });
-  }
+  }
-  get isProfessional() {
+  removeArea(index: number) {
-    return this.user.customerType === 'professional';
+    this.user.areasServed.splice(index, 1);
-  }
+  }
-  uploadCompanyLogo() {
+  get isProfessional() {
-    this.uploadParams = { type: 'uploadCompanyLogo', imagePath: emailToDirName(this.user.email) };
+    return this.user.customerType === 'professional';
-  }
+  }
-  uploadProfile() {
+  uploadCompanyLogo() {
-    this.uploadParams = { type: 'uploadProfile', imagePath: emailToDirName(this.user.email) };
+    this.uploadParams = { type: 'uploadCompanyLogo', imagePath: emailToDirName(this.user.email) };
-  }
+  }
-  async uploadFinished(response: UploadReponse) {
+  uploadProfile() {
-    if (response.success) {
+    this.uploadParams = { type: 'uploadProfile', imagePath: emailToDirName(this.user.email) };
-      if (response.type === 'uploadCompanyLogo') {
+  }
-        this.user.hasCompanyLogo = true; //
+  async uploadFinished(response: UploadReponse) {
-        this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
+    if (response.success) {
-      } else {
+      if (response.type === 'uploadCompanyLogo') {
-        this.user.hasProfile = true;
+        this.user.hasCompanyLogo = true; //
-        this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
+        this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
-        this.sharedService.changeProfilePhoto(this.profileUrl);
+      } else {
-      }
+        this.user.hasProfile = true;
-      this.userService.changeUser(this.user);
+        this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
-      await this.userService.saveGuaranteed(this.user);
+        this.sharedService.changeProfilePhoto(this.profileUrl);
-    }
+      }
-  }
+      this.userService.changeUser(this.user);
-  async deleteConfirm(type: 'profile' | 'logo') {
+      await this.userService.saveGuaranteed(this.user);
-    const confirmed = await this.confirmationService.showConfirmation({ message: `Do you want to delete your ${type === 'logo' ? 'Logo' : 'Profile'} image` });
+    }
-    if (confirmed) {
+  }
-      if (type === 'profile') {
+  async deleteConfirm(type: 'profile' | 'logo') {
-        this.user.hasProfile = false;
+    const confirmed = await this.confirmationService.showConfirmation({ message: `Do you want to delete your ${type === 'logo' ? 'Logo' : 'Profile'} image` });
-        await Promise.all([this.imageService.deleteProfileImagesByMail(this.user.email), this.userService.saveGuaranteed(this.user)]);
+    if (confirmed) {
-      } else {
+      if (type === 'profile') {
-        this.user.hasCompanyLogo = false;
+        this.user.hasProfile = false;
-        await Promise.all([this.imageService.deleteLogoImagesByMail(this.user.email), this.userService.saveGuaranteed(this.user)]);
+        await Promise.all([this.imageService.deleteProfileImagesByMail(this.user.email), this.userService.saveGuaranteed(this.user)]);
-      }
+      } else {
-      this.user = await this.userService.getById(this.user.id);
+        this.user.hasCompanyLogo = false;
-      // this.messageService.showMessage('Image deleted');
+        await Promise.all([this.imageService.deleteLogoImagesByMail(this.user.email), this.userService.saveGuaranteed(this.user)]);
-      this.messageService.addMessage({
+      }
-        severity: 'success',
+      this.user = await this.userService.getById(this.user.id);
-        text: 'Image deleted.',
+      // this.messageService.showMessage('Image deleted');
-        duration: 3000, // 3 seconds
+      this.messageService.addMessage({
-      });
+        severity: 'success',
-    }
+        text: 'Image deleted.',
-  }
+        duration: 3000, // 3 seconds
-  getValidationMessage(fieldName: string): string {
+      });
-    const message = this.validationMessages.find(msg => msg.field === fieldName);
+    }
-    return message ? message.message : '';
+  }
-  }
+  getValidationMessage(fieldName: string): string {
-
+    const message = this.validationMessages.find(msg => msg.field === fieldName);
-  setState(index: number, state: string) {
+    return message ? message.message : '';
-    if (state === null) {
+  }
-      this.user.areasServed[index].county = null;
+
-    }
+  setState(index: number, state: string) {
-  }
+    if (state === null) {
-  // getLevel(i: number) {
+      this.user.areasServed[index].county = null;
-  //   return this.subscriptions[i].metadata.plan;
+    }
-  // }
+  }
-  // getStartDate(i: number) {
+  // getLevel(i: number) {
-  //   return this.datePipe.transform(new Date(this.subscriptions[i].start_date * 1000));
+  //   return this.subscriptions[i].metadata.plan;
-  // }
+  // }
-  // getEndDate(i: number) {
+  // getStartDate(i: number) {
-  //   return this.subscriptions[i].status === 'trialing' ? this.datePipe.transform(new Date(this.subscriptions[i].current_period_end * 1000)) : '---';
+  //   return this.datePipe.transform(new Date(this.subscriptions[i].start_date * 1000));
-  // }
+  // }
-  // getNextSettlement(i: number) {
+  // getEndDate(i: number) {
-  //   return this.subscriptions[i].status === 'active' ? this.datePipe.transform(new Date(this.subscriptions[i].current_period_end * 1000)) : '---';
+  //   return this.subscriptions[i].status === 'trialing' ? this.datePipe.transform(new Date(this.subscriptions[i].current_period_end * 1000)) : '---';
-  // }
+  // }
-  // getStatus(i: number) {
+  // getNextSettlement(i: number) {
-  //   return this.subscriptions[i].status ? this.subscriptions[i].status : '';
+  //   return this.subscriptions[i].status === 'active' ? this.datePipe.transform(new Date(this.subscriptions[i].current_period_end * 1000)) : '---';
-  // }
+  // }
-}
+  // getStatus(i: number) {
+  //   return this.subscriptions[i].status ? this.subscriptions[i].status : '';
+  // }
+}

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

@@ -1,178 +1,180 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { lastValueFrom } from 'rxjs';
+import { lastValueFrom } from 'rxjs';
-import { ListingsService } from '../../../services/listings.service';
+import { ListingsService } from '../../../services/listings.service';
-import { SelectOptionsService } from '../../../services/select-options.service';
+import { SelectOptionsService } from '../../../services/select-options.service';
-import { map2User, routeListingWithState } from '../../../utils/utils';
+import { map2User, routeListingWithState } from '../../../utils/utils';
-
+
-import { DragDropModule } from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { APP_ICONS } from '../../../utils/fontawesome-icons';
-import { QuillModule } from 'ngx-quill';
+import { QuillModule } from 'ngx-quill';
-
+
-import { NgSelectModule } from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
-import { NgxCurrencyDirective } from 'ngx-currency';
+import { NgxCurrencyDirective } from 'ngx-currency';
-import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
+import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
-import { AutoCompleteCompleteEvent, ImageProperty, createDefaultBusinessListing, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
+import { AutoCompleteCompleteEvent, ImageProperty, createDefaultBusinessListing, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
-
+
-import { environment } from '../../../../environments/environment';
+import { environment } from '../../../../environments/environment';
-import { MessageService } from '../../../components/message/message.service';
+import { MessageService } from '../../../components/message/message.service';
-import { ValidatedCityComponent } from '../../../components/validated-city/validated-city.component';
+import { ValidatedCityComponent } from '../../../components/validated-city/validated-city.component';
-import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
+import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
-import { ValidatedLocationComponent } from '../../../components/validated-location/validated-location.component';
+import { ValidatedLocationComponent } from '../../../components/validated-location/validated-location.component';
-import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component';
+import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component';
-import { ValidatedPriceComponent } from '../../../components/validated-price/validated-price.component';
+import { ValidatedPriceComponent } from '../../../components/validated-price/validated-price.component';
-import { ValidatedQuillComponent } from '../../../components/validated-quill/validated-quill.component';
+import { ValidatedQuillComponent } from '../../../components/validated-quill/validated-quill.component';
-import { ValidatedTextareaComponent } from '../../../components/validated-textarea/validated-textarea.component';
+import { ValidatedTextareaComponent } from '../../../components/validated-textarea/validated-textarea.component';
-import { ValidationMessagesService } from '../../../components/validation-messages.service';
+import { ValidationMessagesService } from '../../../components/validation-messages.service';
-import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
+import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
-import { AuthService } from '../../../services/auth.service';
+import { AuthService } from '../../../services/auth.service';
-import { GeoService } from '../../../services/geo.service';
+import { GeoService } from '../../../services/geo.service';
-import { ImageService } from '../../../services/image.service';
+import { ImageService } from '../../../services/image.service';
-import { LoadingService } from '../../../services/loading.service';
+import { LoadingService } from '../../../services/loading.service';
-import { UserService } from '../../../services/user.service';
+import { UserService } from '../../../services/user.service';
-import { SharedModule } from '../../../shared/shared/shared.module';
+import { SharedModule } from '../../../shared/shared/shared.module';
-import { TOOLBAR_OPTIONS } from '../../utils/defaults';
+import { TOOLBAR_OPTIONS } from '../../utils/defaults';
-@Component({
+@Component({
-  selector: 'business-listing',
+  selector: 'business-listing',
-  standalone: true,
+  standalone: true,
-  imports: [
+  imports: [
-    SharedModule,
+    SharedModule,
-    DragDropModule,
+    DragDropModule,
-    QuillModule,
+    QuillModule,
-    NgSelectModule,
+    NgSelectModule,
-    ValidatedInputComponent,
+    ValidatedInputComponent,
-    ValidatedQuillComponent,
+    ValidatedQuillComponent,
-    ValidatedNgSelectComponent,
+    ValidatedNgSelectComponent,
-    ValidatedPriceComponent,
+    ValidatedPriceComponent,
-    ValidatedTextareaComponent,
+    ValidatedTextareaComponent,
-    ValidatedLocationComponent,
+    ValidatedLocationComponent,
-  ],
+  ],
-  providers: [],
+  templateUrl: './edit-business-listing.component.html',
-  templateUrl: './edit-business-listing.component.html',
+  styleUrls: [
-  styleUrl: './edit-business-listing.component.scss',
+    './edit-business-listing.component.scss',
-})
+    '../../../../../node_modules/quill/dist/quill.snow.css'
-export class EditBusinessListingComponent {
+  ],
-  listingsCategory = 'business';
+})
-  category: string;
+export class EditBusinessListingComponent {
-  location: string;
+  listingsCategory = 'business';
-  mode: 'edit' | 'create';
+  category: string;
-  separator: '\n\n';
+  location: string;
-  listing: BusinessListing;
+  mode: 'edit' | 'create';
-  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
+  separator: '\n\n';
-  user: User;
+  listing: BusinessListing;
-  environment = environment;
+  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
-  config = { aspectRatio: 16 / 9 };
+  user: User;
-  editorModules = TOOLBAR_OPTIONS;
+  environment = environment;
-  draggedImage: ImageProperty;
+  config = { aspectRatio: 16 / 9 };
-  faTrash = faTrash;
+  editorModules = TOOLBAR_OPTIONS;
-  data: CommercialPropertyListing;
+  draggedImage: ImageProperty;
-  typesOfBusiness = [];
+  faTrash = APP_ICONS.faTrash;
-  quillModules = {
+  data: CommercialPropertyListing;
-    toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], ['clean']],
+  typesOfBusiness = [];
-  };
+  quillModules = {
-  listingUser: User;
+    toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], ['clean']],
-  constructor(
+  };
-    public selectOptions: SelectOptionsService,
+  listingUser: User;
-    private router: Router,
+  constructor(
-    private activatedRoute: ActivatedRoute,
+    public selectOptions: SelectOptionsService,
-    private listingsService: ListingsService,
+    private router: Router,
-    public userService: UserService,
+    private activatedRoute: ActivatedRoute,
-    private geoService: GeoService,
+    private listingsService: ListingsService,
-    private imageService: ImageService,
+    public userService: UserService,
-    private loadingService: LoadingService,
+    private geoService: GeoService,
-    private messageService: MessageService,
+    private imageService: ImageService,
-    private route: ActivatedRoute,
+    private loadingService: LoadingService,
-    private validationMessagesService: ValidationMessagesService,
+    private messageService: MessageService,
-    private authService: AuthService,
+    private route: ActivatedRoute,
-  ) {
+    private validationMessagesService: ValidationMessagesService,
-    this.router.events.subscribe(event => {
+    private authService: AuthService,
-      if (event instanceof NavigationEnd) {
+  ) {
-        this.mode = event.url.startsWith('/createBusinessListing') ? 'create' : 'edit';
+    this.router.events.subscribe(event => {
-      }
+      if (event instanceof NavigationEnd) {
-    });
+        this.mode = event.url.startsWith('/createBusinessListing') ? 'create' : 'edit';
-    this.route.data.subscribe(async () => {
+      }
-      if (this.router.getCurrentNavigation().extras.state) {
+    });
-        this.data = this.router.getCurrentNavigation().extras.state['data'];
+    this.route.data.subscribe(async () => {
-      }
+      if (this.router.getCurrentNavigation().extras.state) {
-    });
+        this.data = this.router.getCurrentNavigation().extras.state['data'];
-    this.typesOfBusiness = selectOptions.typesOfBusiness.map(e => {
+      }
-      return { name: e.name, value: e.value };
+    });
-    });
+    this.typesOfBusiness = selectOptions.typesOfBusiness.map(e => {
-  }
+      return { name: e.name, value: e.value };
-  async ngOnInit() {
+    });
-    const token = await this.authService.getToken();
+  }
-    const keycloakUser = map2User(token);
+  async ngOnInit() {
-    this.listingUser = await this.userService.getByMail(keycloakUser.email);
+    const token = await this.authService.getToken();
-    if (this.mode === 'edit') {
+    const keycloakUser = map2User(token);
-      this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'business'));
+    this.listingUser = await this.userService.getByMail(keycloakUser.email);
-    } else {
+    if (this.mode === 'edit') {
-      this.listing = createDefaultBusinessListing();
+      this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'business'));
-      this.listing.email = this.listingUser.email;
+    } else {
-      this.listing.imageName = emailToDirName(keycloakUser.email);
+      this.listing = createDefaultBusinessListing();
-      if (this.data) {
+      this.listing.email = this.listingUser.email;
-        this.listing.title = this.data?.title;
+      this.listing.imageName = emailToDirName(keycloakUser.email);
-        this.listing.description = this.data?.description;
+      if (this.data) {
-      }
+        this.listing.title = this.data?.title;
-    }
+        this.listing.description = this.data?.description;
-  }
+      }
-  ngOnDestroy() {
+    }
-    this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
+  }
-  }
+  ngOnDestroy() {
-  async save() {
+    this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
-    try {
+  }
-      this.listing = await this.listingsService.save(this.listing, this.listing.listingsCategory);
+  async save() {
-      this.router.navigate(['editBusinessListing', this.listing.id]);
+    try {
-      this.messageService.addMessage({ severity: 'success', text: 'Listing changes have been persisted', duration: 3000 });
+      this.listing = await this.listingsService.save(this.listing, this.listing.listingsCategory);
-      this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
+      this.router.navigate(['editBusinessListing', this.listing.id]);
-    } catch (error) {
+      this.messageService.addMessage({ severity: 'success', text: 'Listing changes have been persisted', duration: 3000 });
-      console.error('Error saving listing:', error);
+      this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
-      let errorText = 'An error occurred while saving the listing - Please check your inputs';
+    } catch (error) {
-
+      console.error('Error saving listing:', error);
-      if (error.error && Array.isArray(error.error?.message)) {
+      let errorText = 'An error occurred while saving the listing - Please check your inputs';
-        this.validationMessagesService.updateMessages(error.error.message);
+
-        errorText = 'Please fix the validation errors highlighted in the form';
+      if (error.error && Array.isArray(error.error?.message)) {
-      } else if (error.error?.message) {
+        this.validationMessagesService.updateMessages(error.error.message);
-        errorText = `Error: ${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,
+      this.messageService.addMessage({
-        duration: 5000,
+        severity: 'danger',
-      });
+        text: errorText,
-    }
+        duration: 5000,
-  }
+      });
-
+    }
-  suggestions: string[] | undefined;
+  }
-
+
-  async search(event: AutoCompleteCompleteEvent) {
+  suggestions: string[] | undefined;
-    const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query));
+
-    this.suggestions = result.map(r => r.name).slice(0, 5);
+  async search(event: AutoCompleteCompleteEvent) {
-  }
+    const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query));
-
+    this.suggestions = result.map(r => r.name).slice(0, 5);
-  changeListingCategory(value: 'business' | 'commercialProperty') {
+  }
-    routeListingWithState(this.router, value, this.listing);
+
-  }
+  changeListingCategory(value: 'business' | 'commercialProperty') {
-  onNumericInputChange(value: string, modelProperty: string): void {
+    routeListingWithState(this.router, value, this.listing);
-    const newValue = value === '' ? null : +value;
+  }
-    this.setPropertyByPath(this, modelProperty, newValue);
+  onNumericInputChange(value: string, modelProperty: string): void {
-  }
+    const newValue = value === '' ? null : +value;
-
+    this.setPropertyByPath(this, modelProperty, newValue);
-  private setPropertyByPath(obj: any, path: string, value: any): void {
+  }
-    const keys = path.split('.');
+
-    let target = obj;
+  private setPropertyByPath(obj: any, path: string, value: any): void {
-    for (let i = 0; i < keys.length - 1; i++) {
+    const keys = path.split('.');
-      target = target[keys[i]];
+    let target = obj;
-    }
+    for (let i = 0; i < keys.length - 1; i++) {
-    target[keys[keys.length - 1]] = value;
+      target = target[keys[i]];
-  }
+    }
-  onCheckboxChange(checkbox: string, value: boolean) {
+    target[keys[keys.length - 1]] = value;
-    // Deaktivieren Sie alle Checkboxes
+  }
-    this.listing.realEstateIncluded = false;
+  onCheckboxChange(checkbox: string, value: boolean) {
-    this.listing.leasedLocation = false;
+    // Deaktivieren Sie alle Checkboxes
-    this.listing.franchiseResale = false;
+    this.listing.realEstateIncluded = false;
-
+    this.listing.leasedLocation = false;
-    // Aktivieren Sie nur die aktuell ausgewählte Checkbox
+    this.listing.franchiseResale = false;
-    this.listing[checkbox] = value;
+
-  }
+    // Aktivieren Sie nur die aktuell ausgewählte Checkbox
-}
+    this.listing[checkbox] = value;
+  }
+}

bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html

@@ -58,7 +58,7 @@
           (click)="uploadPropertyPicture()"
           class="flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
         >
-          <svg class="mr-2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <svg class="mr-2 h-5 w-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
           </svg>
           Upload

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

@@ -1,228 +1,230 @@
-import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { lastValueFrom } from 'rxjs';
+import { lastValueFrom } from 'rxjs';
-import { ListingsService } from '../../../services/listings.service';
+import { ListingsService } from '../../../services/listings.service';
-import { SelectOptionsService } from '../../../services/select-options.service';
+import { SelectOptionsService } from '../../../services/select-options.service';
-import { map2User, routeListingWithState } from '../../../utils/utils';
+import { map2User, routeListingWithState } from '../../../utils/utils';
-
+
-import { DragDropModule } from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
-import { ViewportRuler } from '@angular/cdk/scrolling';
+import { ViewportRuler } from '@angular/cdk/scrolling';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { APP_ICONS } from '../../../utils/fontawesome-icons';
-import { NgSelectModule } from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
-import { NgxCurrencyDirective } from 'ngx-currency';
+import { NgxCurrencyDirective } from 'ngx-currency';
-import { ImageCropperComponent } from 'ngx-image-cropper';
+import { ImageCropperComponent } from 'ngx-image-cropper';
-import { QuillModule } from 'ngx-quill';
+import { QuillModule } from 'ngx-quill';
-import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
+import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
-import { AutoCompleteCompleteEvent, ImageProperty, UploadParams, createDefaultCommercialPropertyListing, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
+import { AutoCompleteCompleteEvent, ImageProperty, UploadParams, createDefaultCommercialPropertyListing, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
-
+
-import { environment } from '../../../../environments/environment';
+import { environment } from '../../../../environments/environment';
-import { ConfirmationComponent } from '../../../components/confirmation/confirmation.component';
+import { ConfirmationComponent } from '../../../components/confirmation/confirmation.component';
-import { ConfirmationService } from '../../../components/confirmation/confirmation.service';
+import { ConfirmationService } from '../../../components/confirmation/confirmation.service';
-import { DragDropMixedComponent } from '../../../components/drag-drop-mixed/drag-drop-mixed.component';
+import { DragDropMixedComponent } from '../../../components/drag-drop-mixed/drag-drop-mixed.component';
-import { ImageCropAndUploadComponent, UploadReponse } from '../../../components/image-crop-and-upload/image-crop-and-upload.component';
+import { ImageCropAndUploadComponent, UploadReponse } from '../../../components/image-crop-and-upload/image-crop-and-upload.component';
-import { MessageService } from '../../../components/message/message.service';
+import { MessageService } from '../../../components/message/message.service';
-import { ValidatedCityComponent } from '../../../components/validated-city/validated-city.component';
+import { ValidatedCityComponent } from '../../../components/validated-city/validated-city.component';
-import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
+import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
-import { ValidatedLocationComponent } from '../../../components/validated-location/validated-location.component';
+import { ValidatedLocationComponent } from '../../../components/validated-location/validated-location.component';
-import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component';
+import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component';
-import { ValidatedPriceComponent } from '../../../components/validated-price/validated-price.component';
+import { ValidatedPriceComponent } from '../../../components/validated-price/validated-price.component';
-import { ValidatedQuillComponent } from '../../../components/validated-quill/validated-quill.component';
+import { ValidatedQuillComponent } from '../../../components/validated-quill/validated-quill.component';
-import { ValidationMessagesService } from '../../../components/validation-messages.service';
+import { ValidationMessagesService } from '../../../components/validation-messages.service';
-import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
+import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
-import { AuthService } from '../../../services/auth.service';
+import { AuthService } from '../../../services/auth.service';
-import { GeoService } from '../../../services/geo.service';
+import { GeoService } from '../../../services/geo.service';
-import { ImageService } from '../../../services/image.service';
+import { ImageService } from '../../../services/image.service';
-import { LoadingService } from '../../../services/loading.service';
+import { LoadingService } from '../../../services/loading.service';
-import { UserService } from '../../../services/user.service';
+import { UserService } from '../../../services/user.service';
-import { SharedModule } from '../../../shared/shared/shared.module';
+import { SharedModule } from '../../../shared/shared/shared.module';
-import { TOOLBAR_OPTIONS } from '../../utils/defaults';
+import { TOOLBAR_OPTIONS } from '../../utils/defaults';
-@Component({
+@Component({
-  selector: 'commercial-property-listing',
+  selector: 'commercial-property-listing',
-  standalone: true,
+  standalone: true,
-  imports: [
+  imports: [
-    SharedModule,
+    SharedModule,
-    DragDropModule,
+    DragDropModule,
-    QuillModule,
+    QuillModule,
-    NgSelectModule,
+    NgSelectModule,
-    ConfirmationComponent,
+    ConfirmationComponent,
-    DragDropMixedComponent,
+    DragDropMixedComponent,
-    ValidatedInputComponent,
+    ValidatedInputComponent,
-    ValidatedQuillComponent,
+    ValidatedQuillComponent,
-    ValidatedNgSelectComponent,
+    ValidatedNgSelectComponent,
-    ValidatedPriceComponent,
+    ValidatedPriceComponent,
-    ValidatedLocationComponent,
+    ValidatedLocationComponent,
-    ImageCropAndUploadComponent,
+    ImageCropAndUploadComponent,
-  ],
+  ],
-  providers: [],
+  templateUrl: './edit-commercial-property-listing.component.html',
-  templateUrl: './edit-commercial-property-listing.component.html',
+  styleUrls: [
-  styleUrl: './edit-commercial-property-listing.component.scss',
+    './edit-commercial-property-listing.component.scss',
-})
+    '../../../../../node_modules/quill/dist/quill.snow.css'
-export class EditCommercialPropertyListingComponent {
+  ],
-  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
+})
-
+export class EditCommercialPropertyListingComponent {
-  listingsCategory = 'commercialProperty';
+  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
-  category: string;
+
-  location: string;
+  listingsCategory = 'commercialProperty';
-  mode: 'edit' | 'create';
+  category: string;
-  separator: '\n\n';
+  location: string;
-  listing: CommercialPropertyListing;
+  mode: 'edit' | 'create';
-  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
+  separator: '\n\n';
-  user: User;
+  listing: CommercialPropertyListing;
-  maxFileSize = 3000000;
+  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
-  environment = environment;
+  user: User;
-  responsiveOptions = [
+  maxFileSize = 3000000;
-    {
+  environment = environment;
-      breakpoint: '1199px',
+  responsiveOptions = [
-      numVisible: 1,
+    {
-      numScroll: 1,
+      breakpoint: '1199px',
-    },
+      numVisible: 1,
-    {
+      numScroll: 1,
-      breakpoint: '991px',
+    },
-      numVisible: 2,
+    {
-      numScroll: 1,
+      breakpoint: '991px',
-    },
+      numVisible: 2,
-    {
+      numScroll: 1,
-      breakpoint: '767px',
+    },
-      numVisible: 1,
+    {
-      numScroll: 1,
+      breakpoint: '767px',
-    },
+      numVisible: 1,
-  ];
+      numScroll: 1,
-  config = { aspectRatio: 16 / 9 };
+    },
-  editorModules = TOOLBAR_OPTIONS;
+  ];
-
+  config = { aspectRatio: 16 / 9 };
-  draggedImage: ImageProperty;
+  editorModules = TOOLBAR_OPTIONS;
-  faTrash = faTrash;
+
-  suggestions: string[] | undefined;
+  draggedImage: ImageProperty;
-  data: BusinessListing;
+  faTrash = APP_ICONS.faTrash;
-  userId: string;
+  suggestions: string[] | undefined;
-  typesOfCommercialProperty = [];
+  data: BusinessListing;
-  listingCategories = [];
+  userId: string;
-  env = environment;
+  typesOfCommercialProperty = [];
-  ts = new Date().getTime();
+  listingCategories = [];
-  quillModules = {
+  env = environment;
-    toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], ['clean']],
+  ts = new Date().getTime();
-  };
+  quillModules = {
-  //showModal = false;
+    toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], ['clean']],
-  imageChangedEvent: any = '';
+  };
-  croppedImage: Blob | null = null;
+  //showModal = false;
-  uploadParams: UploadParams;
+  imageChangedEvent: any = '';
-  constructor(
+  croppedImage: Blob | null = null;
-    public selectOptions: SelectOptionsService,
+  uploadParams: UploadParams;
-    private router: Router,
+  constructor(
-    private activatedRoute: ActivatedRoute,
+    public selectOptions: SelectOptionsService,
-    private listingsService: ListingsService,
+    private router: Router,
-    public userService: UserService,
+    private activatedRoute: ActivatedRoute,
-
+    private listingsService: ListingsService,
-    private geoService: GeoService,
+    public userService: UserService,
-    private imageService: ImageService,
+
-    private loadingService: LoadingService,
+    private geoService: GeoService,
-
+    private imageService: ImageService,
-    private route: ActivatedRoute,
+    private loadingService: LoadingService,
-    private cdr: ChangeDetectorRef,
+
-    private confirmationService: ConfirmationService,
+    private route: ActivatedRoute,
-    private messageService: MessageService,
+    private cdr: ChangeDetectorRef,
-    private viewportRuler: ViewportRuler,
+    private confirmationService: ConfirmationService,
-    private validationMessagesService: ValidationMessagesService,
+    private messageService: MessageService,
-    private authService: AuthService,
+    private viewportRuler: ViewportRuler,
-  ) {
+    private validationMessagesService: ValidationMessagesService,
-    // Abonniere Router-Events, um den aktiven Link zu ermitteln
+    private authService: AuthService,
-    this.router.events.subscribe(event => {
+  ) {
-      if (event instanceof NavigationEnd) {
+    // Abonniere Router-Events, um den aktiven Link zu ermitteln
-        this.mode = event.url.startsWith('/createCommercialPropertyListing') ? 'create' : 'edit';
+    this.router.events.subscribe(event => {
-      }
+      if (event instanceof NavigationEnd) {
-    });
+        this.mode = event.url.startsWith('/createCommercialPropertyListing') ? 'create' : 'edit';
-    this.route.data.subscribe(async () => {
+      }
-      if (this.router.getCurrentNavigation().extras.state) {
+    });
-        this.data = this.router.getCurrentNavigation().extras.state['data'];
+    this.route.data.subscribe(async () => {
-      }
+      if (this.router.getCurrentNavigation().extras.state) {
-    });
+        this.data = this.router.getCurrentNavigation().extras.state['data'];
-    this.typesOfCommercialProperty = selectOptions.typesOfCommercialProperty.map(e => {
+      }
-      return { name: e.name, value: e.value };
+    });
-    });
+    this.typesOfCommercialProperty = selectOptions.typesOfCommercialProperty.map(e => {
-  }
+      return { name: e.name, value: e.value };
-  async ngOnInit() {
+    });
-    const token = await this.authService.getToken();
+  }
-    const keycloakUser = map2User(token);
+  async ngOnInit() {
-    const email = keycloakUser.email;
+    const token = await this.authService.getToken();
-    this.user = await this.userService.getByMail(email);
+    const keycloakUser = map2User(token);
-    this.listingCategories = this.selectOptions.listingCategories
+    const email = keycloakUser.email;
-      .filter(lc => lc.value === 'commercialProperty' || this.user.customerType === 'professional')
+    this.user = await this.userService.getByMail(email);
-      .map(e => {
+    this.listingCategories = this.selectOptions.listingCategories
-        return { name: e.name, value: e.value };
+      .filter(lc => lc.value === 'commercialProperty' || this.user.customerType === 'professional')
-      });
+      .map(e => {
-    if (this.mode === 'edit') {
+        return { name: e.name, value: e.value };
-      this.listing = (await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'))) as CommercialPropertyListing;
+      });
-    } else {
+    if (this.mode === 'edit') {
-      this.listing = createDefaultCommercialPropertyListing();
+      this.listing = (await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'))) as CommercialPropertyListing;
-      const listingUser = await this.userService.getByMail(keycloakUser.email);
+    } else {
-      this.listing.email = listingUser.email;
+      this.listing = createDefaultCommercialPropertyListing();
-      this.listing.imagePath = `${emailToDirName(keycloakUser.email)}`;
+      const listingUser = await this.userService.getByMail(keycloakUser.email);
-      if (this.data) {
+      this.listing.email = listingUser.email;
-        this.listing.title = this.data?.title;
+      this.listing.imagePath = `${emailToDirName(keycloakUser.email)}`;
-        this.listing.description = this.data?.description;
+      if (this.data) {
-      }
+        this.listing.title = this.data?.title;
-    }
+        this.listing.description = this.data?.description;
-  }
+      }
-  ngOnDestroy() {
+    }
-    this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
+  }
-  }
+  ngOnDestroy() {
-  async save() {
+    this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
-    try {
+  }
-      this.listing = (await this.listingsService.save(this.listing, this.listing.listingsCategory)) as CommercialPropertyListing;
+  async save() {
-      this.router.navigate(['editCommercialPropertyListing', this.listing.id]);
+    try {
-      this.messageService.addMessage({ severity: 'success', text: 'Listing changes have been persisted', duration: 3000 });
+      this.listing = (await this.listingsService.save(this.listing, this.listing.listingsCategory)) as CommercialPropertyListing;
-      this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
+      this.router.navigate(['editCommercialPropertyListing', this.listing.id]);
-    } catch (error) {
+      this.messageService.addMessage({ severity: 'success', text: 'Listing changes have been persisted', duration: 3000 });
-      console.error('Error saving listing:', error);
+      this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
-      let errorText = 'An error occurred while saving the listing - Please check your inputs';
+    } catch (error) {
-
+      console.error('Error saving listing:', error);
-      if (error.error && Array.isArray(error.error?.message)) {
+      let errorText = 'An error occurred while saving the listing - Please check your inputs';
-        this.validationMessagesService.updateMessages(error.error.message);
+
-        errorText = 'Please fix the validation errors highlighted in the form';
+      if (error.error && Array.isArray(error.error?.message)) {
-      } else if (error.error?.message) {
+        this.validationMessagesService.updateMessages(error.error.message);
-        errorText = `Error: ${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,
+      this.messageService.addMessage({
-        duration: 5000,
+        severity: 'danger',
-      });
+        text: errorText,
-    }
+        duration: 5000,
-  }
+      });
-
+    }
-  async search(event: AutoCompleteCompleteEvent) {
+  }
-    const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query));
+
-    this.suggestions = result.map(r => r.name).slice(0, 5);
+  async search(event: AutoCompleteCompleteEvent) {
-  }
+    const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query));
-
+    this.suggestions = result.map(r => r.name).slice(0, 5);
-  uploadPropertyPicture() {
+  }
-    this.uploadParams = { type: 'uploadPropertyPicture', imagePath: this.listing.imagePath, serialId: this.listing.serialId };
+
-  }
+  uploadPropertyPicture() {
-  async uploadFinished(response: UploadReponse) {
+    this.uploadParams = { type: 'uploadPropertyPicture', imagePath: this.listing.imagePath, serialId: this.listing.serialId };
-    if (response.success) {
+  }
-      this.listing = (await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'))) as CommercialPropertyListing;
+  async uploadFinished(response: UploadReponse) {
-    }
+    if (response.success) {
-  }
+      this.listing = (await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'))) as CommercialPropertyListing;
-
+    }
-  async deleteConfirm(imageName: string) {
+  }
-    const confirmed = await this.confirmationService.showConfirmation({ message: 'Are you sure you want to delete this image?' });
+
-    if (confirmed) {
+  async deleteConfirm(imageName: string) {
-      this.listing.imageOrder = this.listing.imageOrder.filter(item => item !== imageName);
+    const confirmed = await this.confirmationService.showConfirmation({ message: 'Are you sure you want to delete this image?' });
-      await this.imageService.deleteListingImage(this.listing.imagePath, this.listing.serialId, imageName);
+    if (confirmed) {
-      await this.listingsService.save(this.listing, 'commercialProperty');
+      this.listing.imageOrder = this.listing.imageOrder.filter(item => item !== imageName);
-      this.listing = (await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'))) as CommercialPropertyListing;
+      await this.imageService.deleteListingImage(this.listing.imagePath, this.listing.serialId, imageName);
-      this.messageService.addMessage({ severity: 'success', text: 'Image has been deleted', duration: 3000 });
+      await this.listingsService.save(this.listing, 'commercialProperty');
-      this.ts = new Date().getTime();
+      this.listing = (await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'))) as CommercialPropertyListing;
-    } else {
+      this.messageService.addMessage({ severity: 'success', text: 'Image has been deleted', duration: 3000 });
-      console.log('deny');
+      this.ts = new Date().getTime();
-    }
+    } else {
-  }
+      console.log('deny');
-
+    }
-  changeListingCategory(value: 'business' | 'commercialProperty') {
+  }
-    routeListingWithState(this.router, value, this.listing);
+
-  }
+  changeListingCategory(value: 'business' | 'commercialProperty') {
-  imageOrderChanged(imageOrder: string[]) {
+    routeListingWithState(this.router, value, this.listing);
-    this.listing.imageOrder = imageOrder;
+  }
-  }
+  imageOrderChanged(imageOrder: string[]) {
-}
+    this.listing.imageOrder = imageOrder;
+  }
+}

bizmatch/src/app/pages/subscription/favorites/favorites.component.html

@@ -1,132 +1,132 @@
-<div class="container mx-auto p-4">
+<div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
-    <h1 class="text-2xl font-bold md:mb-4">My Favorites</h1>
+    <h1 class="text-2xl font-bold md:mb-4">My Favorites</h1>
-
+
-    <!-- Desktop view -->
+    <!-- Desktop view -->
-    <div class="hidden md:block">
+    <div class="hidden md:block">
-      <table class="w-full bg-white drop-shadow-inner-faint rounded-lg overflow-hidden">
+      <table class="w-full bg-white drop-shadow-inner-faint rounded-lg overflow-hidden">
-        <thead class="bg-gray-100">
+        <thead class="bg-gray-100">
-          <tr>
+          <tr>
-            <th class="py-2 px-4 text-left">Title</th>
+            <th class="py-2 px-4 text-left">Title</th>
-            <th class="py-2 px-4 text-left">Category</th>
+            <th class="py-2 px-4 text-left">Category</th>
-            <th class="py-2 px-4 text-left">Located in</th>
+            <th class="py-2 px-4 text-left">Located in</th>
-            <th class="py-2 px-4 text-left">Price</th>
+            <th class="py-2 px-4 text-left">Price</th>
-            <th class="py-2 px-4 text-left">Action</th>
+            <th class="py-2 px-4 text-left">Action</th>
-          </tr>
+          </tr>
-        </thead>
+        </thead>
-        <tbody>
+        <tbody>
-          @for(listing of favorites; track listing){
+          @for(listing of favorites; track listing){
-          @if(isBusinessOrCommercial(listing)){
+          @if(isBusinessOrCommercial(listing)){
-          <tr class="border-b">
+          <tr class="border-b">
-            <td class="py-2 px-4">{{ $any(listing).title }}</td>
+            <td class="py-2 px-4">{{ $any(listing).title }}</td>
-            <td class="py-2 px-4">{{ $any(listing).listingsCategory === 'commercialProperty' ? 'Commercial Property' :
+            <td class="py-2 px-4">{{ $any(listing).listingsCategory === 'commercialProperty' ? 'Commercial Property' :
-              'Business' }}</td>
+              'Business' }}</td>
-            <td class="py-2 px-4">{{ listing.location.name ? listing.location.name : listing.location.county }}, {{
+            <td class="py-2 px-4">{{ listing.location.name ? listing.location.name : listing.location.county }}, {{
-              listing.location.state }}</td>
+              listing.location.state }}</td>
-            <td class="py-2 px-4">${{ $any(listing).price.toLocaleString() }}</td>
+            <td class="py-2 px-4">${{ $any(listing).price.toLocaleString() }}</td>
-            <td class="py-2 px-4 flex">
+            <td class="py-2 px-4 flex">
-              @if($any(listing).listingsCategory==='business'){
+              @if($any(listing).listingsCategory==='business'){
-              <button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
+              <button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
-                [routerLink]="['/business', $any(listing).slug || listing.id]">
+                [routerLink]="['/business', $any(listing).slug || listing.id]">
-                <i class="fa-regular fa-eye"></i>
+                <i class="fa-regular fa-eye"></i>
-              </button>
+              </button>
-
+
-              } @if($any(listing).listingsCategory==='commercialProperty'){
+              } @if($any(listing).listingsCategory==='commercialProperty'){
-              <button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
+              <button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
-                [routerLink]="['/commercial-property', $any(listing).slug || listing.id]">
+                [routerLink]="['/commercial-property', $any(listing).slug || listing.id]">
-                <i class="fa-regular fa-eye"></i>
+                <i class="fa-regular fa-eye"></i>
-              </button>
+              </button>
-              }
+              }
-              <button class="bg-red-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
+              <button class="bg-red-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
-                (click)="confirmDelete(listing)">
+                (click)="confirmDelete(listing)">
-                <i class="fa-solid fa-trash"></i>
+                <i class="fa-solid fa-trash"></i>
-              </button>
+              </button>
-            </td>
+            </td>
-          </tr>
+          </tr>
-          } @else {
+          } @else {
-          <tr class="border-b">
+          <tr class="border-b">
-            <td class="py-2 px-4">{{ $any(listing).firstname }} {{ $any(listing).lastname }}</td>
+            <td class="py-2 px-4">{{ $any(listing).firstname }} {{ $any(listing).lastname }}</td>
-            <td class="py-2 px-4">Professional</td>
+            <td class="py-2 px-4">Professional</td>
-            <td class="py-2 px-4">{{ listing.location?.name ? listing.location.name : listing.location?.county
+            <td class="py-2 px-4">{{ listing.location?.name ? listing.location.name : listing.location?.county
-              }}, {{ listing.location?.state }}</td>
+              }}, {{ listing.location?.state }}</td>
-            <td class="py-2 px-4">-</td>
+            <td class="py-2 px-4">-</td>
-            <td class="py-2 px-4 flex">
+            <td class="py-2 px-4 flex">
-              <button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
+              <button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
-                [routerLink]="['/details-user', listing.id]">
+                [routerLink]="['/details-user', listing.id]">
-                <i class="fa-regular fa-eye"></i>
+                <i class="fa-regular fa-eye"></i>
-              </button>
+              </button>
-              <button class="bg-red-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
+              <button class="bg-red-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
-                (click)="confirmDelete(listing)">
+                (click)="confirmDelete(listing)">
-                <i class="fa-solid fa-trash"></i>
+                <i class="fa-solid fa-trash"></i>
-              </button>
+              </button>
-            </td>
+            </td>
-          </tr>
+          </tr>
-          }
+          }
-          }
+          }
-        </tbody>
+        </tbody>
-      </table>
+      </table>
-    </div>
+    </div>
-
+
-    <!-- Mobile view -->
+    <!-- Mobile view -->
-    <div class="md:hidden">
+    <div class="md:hidden">
-      <div *ngFor="let listing of favorites" class="bg-white drop-shadow-inner-faint rounded-lg p-4 mb-4">
+      <div *ngFor="let listing of favorites" class="bg-white drop-shadow-inner-faint rounded-lg p-4 mb-4">
-        @if(isBusinessOrCommercial(listing)){
+        @if(isBusinessOrCommercial(listing)){
-        <h2 class="text-xl font-semibold mb-2">{{ $any(listing).title }}</h2>
+        <h2 class="text-xl font-semibold mb-2">{{ $any(listing).title }}</h2>
-        <p class="text-gray-600 mb-2">Category: {{ $any(listing).listingsCategory === 'commercialProperty' ? 'Commercial
+        <p class="text-gray-600 mb-2">Category: {{ $any(listing).listingsCategory === 'commercialProperty' ? 'Commercial
-          Property' : 'Business' }}</p>
+          Property' : 'Business' }}</p>
-        <p class="text-gray-600 mb-2">Located in: {{ listing.location.name ? listing.location.name :
+        <p class="text-gray-600 mb-2">Located in: {{ listing.location.name ? listing.location.name :
-          listing.location.county }}, {{ listing.location.state }}</p>
+          listing.location.county }}, {{ listing.location.state }}</p>
-        <p class="text-gray-600 mb-2">Price: ${{ $any(listing).price.toLocaleString() }}</p>
+        <p class="text-gray-600 mb-2">Price: ${{ $any(listing).price.toLocaleString() }}</p>
-        <div class="flex justify-start">
+        <div class="flex justify-start">
-          @if($any(listing).listingsCategory==='business'){
+          @if($any(listing).listingsCategory==='business'){
-          <button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
+          <button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
-            [routerLink]="['/business', $any(listing).slug || listing.id]">
+            [routerLink]="['/business', $any(listing).slug || listing.id]">
-            <i class="fa-regular fa-eye"></i>
+            <i class="fa-regular fa-eye"></i>
-          </button>
+          </button>
-
+
-          } @if($any(listing).listingsCategory==='commercialProperty'){
+          } @if($any(listing).listingsCategory==='commercialProperty'){
-          <button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
+          <button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
-            [routerLink]="['/commercial-property', $any(listing).slug || listing.id]">
+            [routerLink]="['/commercial-property', $any(listing).slug || listing.id]">
-            <i class="fa-regular fa-eye"></i>
+            <i class="fa-regular fa-eye"></i>
-          </button>
+          </button>
-          }
+          }
-          <button class="bg-red-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
+          <button class="bg-red-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
-            (click)="confirmDelete(listing)">
+            (click)="confirmDelete(listing)">
-            <i class="fa-solid fa-trash"></i>
+            <i class="fa-solid fa-trash"></i>
-          </button>
+          </button>
-        </div>
+        </div>
-        } @else {
+        } @else {
-        <h2 class="text-xl font-semibold mb-2">{{ $any(listing).firstname }} {{ $any(listing).lastname }}</h2>
+        <h2 class="text-xl font-semibold mb-2">{{ $any(listing).firstname }} {{ $any(listing).lastname }}</h2>
-        <p class="text-gray-600 mb-2">Category: Professional</p>
+        <p class="text-gray-600 mb-2">Category: Professional</p>
-        <p class="text-gray-600 mb-2">Located in: {{ listing.location?.name ? listing.location.name :
+        <p class="text-gray-600 mb-2">Located in: {{ listing.location?.name ? listing.location.name :
-          listing.location?.county }}, {{ listing.location?.state }}</p>
+          listing.location?.county }}, {{ listing.location?.state }}</p>
-        <div class="flex justify-start">
+        <div class="flex justify-start">
-          <button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
+          <button class="bg-green-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
-            [routerLink]="['/details-user', listing.id]">
+            [routerLink]="['/details-user', listing.id]">
-            <i class="fa-regular fa-eye"></i>
+            <i class="fa-regular fa-eye"></i>
-          </button>
+          </button>
-          <button class="bg-red-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
+          <button class="bg-red-500 text-white w-10 h-10 flex items-center justify-center rounded-full mr-2"
-            (click)="confirmDelete(listing)">
+            (click)="confirmDelete(listing)">
-            <i class="fa-solid fa-trash"></i>
+            <i class="fa-solid fa-trash"></i>
-          </button>
+          </button>
-        </div>
+        </div>
-        }
+        }
-      </div>
+      </div>
-    </div>
+    </div>
-
+
-    <!-- <div class="flex items-center justify-between mt-4">
+    <!-- <div class="flex items-center justify-between mt-4">
-      <p class="text-sm text-gray-600">Showing 1 to 2 of 2 entries</p>
+      <p class="text-sm text-gray-600">Showing 1 to 2 of 2 entries</p>
-      <div class="flex items-center">
+      <div class="flex items-center">
-        <button class="px-2 py-1 border rounded-l-md bg-gray-100">&lt;&lt;</button>
+        <button class="px-2 py-1 border rounded-l-md bg-gray-100">&lt;&lt;</button>
-        <button class="px-2 py-1 border-t border-b bg-gray-100">&lt;</button>
+        <button class="px-2 py-1 border-t border-b bg-gray-100">&lt;</button>
-        <button class="px-2 py-1 border bg-blue-500 text-white">1</button>
+        <button class="px-2 py-1 border bg-blue-500 text-white">1</button>
-        <button class="px-2 py-1 border-t border-b bg-gray-100">&gt;</button>
+        <button class="px-2 py-1 border-t border-b bg-gray-100">&gt;</button>
-        <button class="px-2 py-1 border rounded-r-md bg-gray-100">&gt;&gt;</button>
+        <button class="px-2 py-1 border rounded-r-md bg-gray-100">&gt;&gt;</button>
-        <select class="ml-2 border rounded-md px-2 py-1">
+        <select class="ml-2 border rounded-md px-2 py-1">
-          <option>10</option>
+          <option>10</option>
-        </select>
+        </select>
-      </div>
+      </div>
-    </div> -->
+    </div> -->
-  </div>
+  </div>
-</div>
+</div>
 <app-confirmation></app-confirmation>

bizmatch/src/app/pages/subscription/favorites/favorites.component.ts

@@ -1,54 +1,54 @@
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';
-import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
+import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
-import { KeycloakUser } from '../../../../../../bizmatch-server/src/models/main.model';
+import { KeycloakUser } from '../../../../../../bizmatch-server/src/models/main.model';
-import { ConfirmationComponent } from '../../../components/confirmation/confirmation.component';
+import { ConfirmationComponent } from '../../../components/confirmation/confirmation.component';
-import { ConfirmationService } from '../../../components/confirmation/confirmation.service';
+import { ConfirmationService } from '../../../components/confirmation/confirmation.service';
-import { AuthService } from '../../../services/auth.service';
+import { AuthService } from '../../../services/auth.service';
-import { ListingsService } from '../../../services/listings.service';
+import { ListingsService } from '../../../services/listings.service';
-import { SelectOptionsService } from '../../../services/select-options.service';
+import { SelectOptionsService } from '../../../services/select-options.service';
-import { SharedModule } from '../../../shared/shared/shared.module';
+import { SharedModule } from '../../../shared/shared/shared.module';
-import { map2User } from '../../../utils/utils';
+import { map2User } from '../../../utils/utils';
-
+
-@Component({
+@Component({
-  selector: 'app-favorites',
+  selector: 'app-favorites',
-  standalone: true,
+  standalone: true,
-  imports: [SharedModule, ConfirmationComponent],
+  imports: [SharedModule, ConfirmationComponent],
-  templateUrl: './favorites.component.html',
+  templateUrl: './favorites.component.html',
-  styleUrl: './favorites.component.scss',
+  styleUrl: './favorites.component.scss',
-})
+})
-export class FavoritesComponent {
+export class FavoritesComponent {
-  user: KeycloakUser;
+  user: KeycloakUser;
-  // listings: Array<ListingType> = []; //= dataListings as unknown as Array<BusinessListing>;
+  // listings: Array<ListingType> = []; //= dataListings as unknown as Array<BusinessListing>;
-  favorites: Array<BusinessListing | CommercialPropertyListing | User>;
+  favorites: Array<BusinessListing | CommercialPropertyListing | User>;
-  constructor(private listingsService: ListingsService, public selectOptions: SelectOptionsService, private confirmationService: ConfirmationService, private authService: AuthService) { }
+  constructor(private listingsService: ListingsService, public selectOptions: SelectOptionsService, private confirmationService: ConfirmationService, private authService: AuthService) { }
-  async ngOnInit() {
+  async ngOnInit() {
-    const token = await this.authService.getToken();
+    const token = await this.authService.getToken();
-    this.user = map2User(token);
+    this.user = map2User(token);
-    const result = await Promise.all([await this.listingsService.getFavoriteListings('business'), await this.listingsService.getFavoriteListings('commercialProperty'), await this.listingsService.getFavoriteListings('user')]);
+    const result = await Promise.all([await this.listingsService.getFavoriteListings('business'), await this.listingsService.getFavoriteListings('commercialProperty'), await this.listingsService.getFavoriteListings('user')]);
-    this.favorites = [...result[0], ...result[1], ...result[2]] as Array<BusinessListing | CommercialPropertyListing | User>;
+    this.favorites = [...result[0], ...result[1], ...result[2]] as Array<BusinessListing | CommercialPropertyListing | User>;
-  }
+  }
-  async confirmDelete(listing: BusinessListing | CommercialPropertyListing | User) {
+  async confirmDelete(listing: BusinessListing | CommercialPropertyListing | User) {
-    const confirmed = await this.confirmationService.showConfirmation({ message: `Are you sure you want to remove this listing from your Favorites?` });
+    const confirmed = await this.confirmationService.showConfirmation({ message: `Are you sure you want to remove this listing from your Favorites?` });
-    if (confirmed) {
+    if (confirmed) {
-      // this.messageService.showMessage('Listing has been deleted');
+      // this.messageService.showMessage('Listing has been deleted');
-      this.deleteListing(listing);
+      this.deleteListing(listing);
-    }
+    }
-  }
+  }
-  async deleteListing(listing: BusinessListing | CommercialPropertyListing | User) {
+  async deleteListing(listing: BusinessListing | CommercialPropertyListing | User) {
-    if ('listingsCategory' in listing) {
+    if ('listingsCategory' in listing) {
-      if (listing.listingsCategory === 'business') {
+      if (listing.listingsCategory === 'business') {
-        await this.listingsService.removeFavorite(listing.id, 'business');
+        await this.listingsService.removeFavorite(listing.id, 'business');
-      } else {
+      } else {
-        await this.listingsService.removeFavorite(listing.id, 'commercialProperty');
+        await this.listingsService.removeFavorite(listing.id, 'commercialProperty');
-      }
+      }
-    } else {
+    } else {
-      await this.listingsService.removeFavorite(listing.id, 'user');
+      await this.listingsService.removeFavorite(listing.id, 'user');
-    }
+    }
-    const result = await Promise.all([await this.listingsService.getFavoriteListings('business'), await this.listingsService.getFavoriteListings('commercialProperty'), await this.listingsService.getFavoriteListings('user')]);
+    const result = await Promise.all([await this.listingsService.getFavoriteListings('business'), await this.listingsService.getFavoriteListings('commercialProperty'), await this.listingsService.getFavoriteListings('user')]);
-    this.favorites = [...result[0], ...result[1], ...result[2]] as Array<BusinessListing | CommercialPropertyListing | User>;
+    this.favorites = [...result[0], ...result[1], ...result[2]] as Array<BusinessListing | CommercialPropertyListing | User>;
-  }
+  }
-
+
-  isBusinessOrCommercial(listing: any): boolean {
+  isBusinessOrCommercial(listing: any): boolean {
-    return !!listing.listingsCategory;
+    return !!listing.listingsCategory;
-  }
+  }
-}
+}

bizmatch/src/app/pages/subscription/my-listing/my-listing.component.ts

@@ -1,116 +1,116 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
-import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
+import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
-import { ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
+import { ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
-import { ConfirmationComponent } from '../../../components/confirmation/confirmation.component';
+import { ConfirmationComponent } from '../../../components/confirmation/confirmation.component';
-import { ConfirmationService } from '../../../components/confirmation/confirmation.service';
+import { ConfirmationService } from '../../../components/confirmation/confirmation.service';
-import { MessageComponent } from '../../../components/message/message.component';
+import { MessageComponent } from '../../../components/message/message.component';
-import { MessageService } from '../../../components/message/message.service';
+import { MessageService } from '../../../components/message/message.service';
-import { AuthService } from '../../../services/auth.service';
+import { AuthService } from '../../../services/auth.service';
-import { ListingsService } from '../../../services/listings.service';
+import { ListingsService } from '../../../services/listings.service';
-import { SelectOptionsService } from '../../../services/select-options.service';
+import { SelectOptionsService } from '../../../services/select-options.service';
-import { UserService } from '../../../services/user.service';
+import { UserService } from '../../../services/user.service';
-import { SharedModule } from '../../../shared/shared/shared.module';
+import { SharedModule } from '../../../shared/shared/shared.module';
-import { map2User } from '../../../utils/utils';
+import { map2User } from '../../../utils/utils';
-
+
-@Component({
+@Component({
-  selector: 'app-my-listing',
+  selector: 'app-my-listing',
-  standalone: true,
+  standalone: true,
-  imports: [SharedModule, ConfirmationComponent],
+  imports: [SharedModule, ConfirmationComponent],
-  providers: [],
+  providers: [],
-  templateUrl: './my-listing.component.html',
+  templateUrl: './my-listing.component.html',
-  styleUrl: './my-listing.component.scss',
+  styleUrl: './my-listing.component.scss',
-})
+})
-export class MyListingComponent {
+export class MyListingComponent {
-  // Vollständige, ungefilterte Daten
+  // Vollständige, ungefilterte Daten
-  listings: Array<ListingType> = [];
+  listings: Array<ListingType> = [];
-  // Aktuell angezeigte (gefilterte) Daten
+  // Aktuell angezeigte (gefilterte) Daten
-  myListings: Array<ListingType> = [];
+  myListings: Array<ListingType> = [];
-
+
-  user: User;
+  user: User;
-
+
-  // VERY small filter state
+  // VERY small filter state
-  filters = {
+  filters = {
-    title: '',
+    title: '',
-    internalListingNumber: '',
+    internalListingNumber: '',
-    location: '',
+    location: '',
-    status: '' as '' | 'published' | 'draft',
+    status: '' as '' | 'published' | 'draft',
-    category: '' as '' | 'business' | 'commercialProperty', // <── NEU
+    category: '' as '' | 'business' | 'commercialProperty', // <── NEU
-  };
+  };
-
+
-  constructor(
+  constructor(
-    public userService: UserService,
+    public userService: UserService,
-    private listingsService: ListingsService,
+    private listingsService: ListingsService,
-    private cdRef: ChangeDetectorRef,
+    private cdRef: ChangeDetectorRef,
-    public selectOptions: SelectOptionsService,
+    public selectOptions: SelectOptionsService,
-    private messageService: MessageService,
+    private messageService: MessageService,
-    private confirmationService: ConfirmationService,
+    private confirmationService: ConfirmationService,
-    private authService: AuthService,
+    private authService: AuthService,
-  ) { }
+  ) { }
-
+
-  async ngOnInit() {
+  async ngOnInit() {
-    const token = await this.authService.getToken();
+    const token = await this.authService.getToken();
-    const keycloakUser = map2User(token);
+    const keycloakUser = map2User(token);
-    const email = keycloakUser.email;
+    const email = keycloakUser.email;
-    this.user = await this.userService.getByMail(email);
+    this.user = await this.userService.getByMail(email);
-
+
-    const result = await Promise.all([this.listingsService.getListingsByEmail(this.user.email, 'business'), this.listingsService.getListingsByEmail(this.user.email, 'commercialProperty')]);
+    const result = await Promise.all([this.listingsService.getListingsByEmail(this.user.email, 'business'), this.listingsService.getListingsByEmail(this.user.email, 'commercialProperty')]);
-
+
-    this.listings = [...result[0], ...result[1]];
+    this.listings = [...result[0], ...result[1]];
-    this.myListings = this.listings;
+    this.myListings = this.listings;
-  }
+  }
-  private normalize(s: string | undefined | null): string {
+  private normalize(s: string | undefined | null): string {
-    return (s ?? '')
+    return (s ?? '')
-      .toLowerCase()
+      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, ' ') // Kommas, Bindestriche etc. neutralisieren
+      .replace(/[^a-z0-9]+/g, ' ') // Kommas, Bindestriche etc. neutralisieren
-      .trim()
+      .trim()
-      .replace(/\s+/g, ' '); // Mehrfach-Spaces zu einem Space
+      .replace(/\s+/g, ' '); // Mehrfach-Spaces zu einem Space
-  }
+  }
-  applyFilters() {
+  applyFilters() {
-    const titleQ = this.normalize(this.filters.title);
+    const titleQ = this.normalize(this.filters.title);
-    const locQ = this.normalize(this.filters.location);
+    const locQ = this.normalize(this.filters.location);
-    const intQ = this.normalize(this.filters.internalListingNumber);
+    const intQ = this.normalize(this.filters.internalListingNumber);
-    const catQ = this.filters.category; // <── NEU
+    const catQ = this.filters.category; // <── NEU
-    const status = this.filters.status;
+    const status = this.filters.status;
-
+
-    this.myListings = this.listings.filter(l => {
+    this.myListings = this.listings.filter(l => {
-      const okTitle = !titleQ || this.normalize(l.title).includes(titleQ);
+      const okTitle = !titleQ || this.normalize(l.title).includes(titleQ);
-
+
-      const locStr = this.normalize(`${l.location?.name ? l.location.name : l.location?.county} ${l.location?.state}`);
+      const locStr = this.normalize(`${l.location?.name ? l.location.name : l.location?.county} ${l.location?.state}`);
-      const okLoc = !locQ || locStr.includes(locQ);
+      const okLoc = !locQ || locStr.includes(locQ);
-
+
-      const ilnStr = this.normalize((l as any).internalListingNumber?.toString());
+      const ilnStr = this.normalize((l as any).internalListingNumber?.toString());
-      const okInt = !intQ || ilnStr.includes(intQ);
+      const okInt = !intQ || ilnStr.includes(intQ);
-
+
-      const okCat = !catQ || l.listingsCategory === catQ; // <── NEU
+      const okCat = !catQ || l.listingsCategory === catQ; // <── NEU
-
+
-      const isDraft = !!(l as any).draft;
+      const isDraft = !!(l as any).draft;
-      const okStatus = !status || (status === 'published' && !isDraft) || (status === 'draft' && isDraft);
+      const okStatus = !status || (status === 'published' && !isDraft) || (status === 'draft' && isDraft);
-
+
-      return okTitle && okLoc && okInt && okCat && okStatus; // <── NEU
+      return okTitle && okLoc && okInt && okCat && okStatus; // <── NEU
-    });
+    });
-  }
+  }
-
+
-  clearFilters() {
+  clearFilters() {
-    this.filters = { title: '', internalListingNumber: '', location: '', status: '', category: '' };
+    this.filters = { title: '', internalListingNumber: '', location: '', status: '', category: '' };
-    this.myListings = this.listings;
+    this.myListings = this.listings;
-  }
+  }
-
+
-  async deleteListing(listing: ListingType) {
+  async deleteListing(listing: ListingType) {
-    if (listing.listingsCategory === 'business') {
+    if (listing.listingsCategory === 'business') {
-      await this.listingsService.deleteBusinessListing(listing.id);
+      await this.listingsService.deleteBusinessListing(listing.id);
-    } else {
+    } else {
-      await this.listingsService.deleteCommercialPropertyListing(listing.id, (listing as CommercialPropertyListing).imagePath);
+      await this.listingsService.deleteCommercialPropertyListing(listing.id, (listing as CommercialPropertyListing).imagePath);
-    }
+    }
-    const result = await Promise.all([this.listingsService.getListingsByEmail(this.user.email, 'business'), this.listingsService.getListingsByEmail(this.user.email, 'commercialProperty')]);
+    const result = await Promise.all([this.listingsService.getListingsByEmail(this.user.email, 'business'), this.listingsService.getListingsByEmail(this.user.email, 'commercialProperty')]);
-    this.listings = [...result[0], ...result[1]];
+    this.listings = [...result[0], ...result[1]];
-    this.applyFilters(); // Filter beibehalten nach Löschen
+    this.applyFilters(); // Filter beibehalten nach Löschen
-  }
+  }
-
+
-  async confirm(listing: ListingType) {
+  async confirm(listing: ListingType) {
-    const confirmed = await this.confirmationService.showConfirmation({ message: `Are you sure you want to delete this listing?` });
+    const confirmed = await this.confirmationService.showConfirmation({ message: `Are you sure you want to delete this listing?` });
-    if (confirmed) {
+    if (confirmed) {
-      // this.messageService.showMessage('Listing has been deleted');
+      // this.messageService.showMessage('Listing has been deleted');
-      this.deleteListing(listing);
+      this.deleteListing(listing);
-    }
+    }
-  }
+  }
-}
+}

bizmatch/src/app/resolvers/auth.resolver.ts

@@ -1,18 +1,18 @@
-import { isPlatformBrowser } from '@angular/common';
+import { isPlatformBrowser } from '@angular/common';
-import { inject, PLATFORM_ID } from '@angular/core';
+import { inject, PLATFORM_ID } from '@angular/core';
-import { ResolveFn } from '@angular/router';
+import { ResolveFn } from '@angular/router';
-import { KeycloakService } from '../services/keycloak.service';
+import { KeycloakService } from '../services/keycloak.service';
-
+
-export const authResolver: ResolveFn<boolean> = async (route, state) => {
+export const authResolver: ResolveFn<boolean> = async (route, state) => {
-  const keycloakService: KeycloakService = inject(KeycloakService);
+  const keycloakService: KeycloakService = inject(KeycloakService);
-  const platformId = inject(PLATFORM_ID);
+  const platformId = inject(PLATFORM_ID);
-  const isBrowser = isPlatformBrowser(platformId);
+  const isBrowser = isPlatformBrowser(platformId);
-
+
-  if (!keycloakService.isLoggedIn() && isBrowser) {
+  if (!keycloakService.isLoggedIn() && isBrowser) {
-    await keycloakService.login({
+    await keycloakService.login({
-      redirectUri: window.location.href,
+      redirectUri: window.location.href,
-    });
+    });
-  }
+  }
-
+
-  return true;
+  return true;
-};
+};