location eingebaut, back buttons angeglichen, paging & criteria korrigiert

bizmatch-server/.gitignore

@@ -56,4 +56,7 @@ pids
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 pictures
-pictures_base
+pictures_base
+
+src/*.js
+bun.lockb

bizmatch-server/.vscode/launch.json

@@ -19,13 +19,26 @@
     {
       "type": "node",
       "request": "launch",
-      "name": "Debug Current TS File",
-      "program": "${workspaceFolder}/dist/src/drizzle/${fileBasenameNoExtension}.js",
-      "preLaunchTask": "tsc: build - tsconfig.json",
-      "outFiles": ["${workspaceFolder}/out/**/*.js"],
+      "name": "Launch TypeScript file with tsx",
+      "runtimeExecutable": "npx",
+      "runtimeArgs": ["tsx", "--inspect"],
+      "args": ["${workspaceFolder}/src/drizzle/import.ts"],
+      "cwd": "${workspaceFolder}",
+      "outFiles": ["${workspaceFolder}/dist/**/*.js", "!**/node_modules/**"],
       "sourceMaps": true,
-      "smartStep": true,
-      "internalConsoleOptions": "openOnSessionStart"
+      "resolveSourceMapLocations": ["${workspaceFolder}/src/**/*.ts", "!**/node_modules/**"],
+      "skipFiles": ["<node_internals>/**", "${workspaceFolder}/node_modules/**/*.js"]
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch TypeScript file",
+      "runtimeArgs": ["-r", "ts-node/register", "-r", "tsconfig-paths/register"],
+      "args": ["${workspaceFolder}/src/drizzle/import.ts"],
+      "cwd": "${workspaceFolder}",
+      "protocol": "inspector",
+      "outFiles": ["${workspaceFolder}/**/*.js"],
+      "skipFiles": ["<node_internals>/**", "${workspaceFolder}/node_modules/**/*.js"]
     },
     {
       "type": "node",

bizmatch-server/data/businesses.json

@@ -698,7 +698,7 @@
         "realEstateIncluded": true,
         "franchiseResale": false,
         "draft": false,
-        "internals": "",
+        "internals": null,
         "created": "2023-11-18T13:00:00.000Z"
     },
     {
@@ -11922,7 +11922,7 @@
         "description": "<h3>Thriving Caribbean Restaurant in the Heart of Washington, D.C.</h3><p>Well-established Caribbean restaurant with a loyal customer base. Known for its authentic cuisine and lively atmosphere.</p><p>Fully equipped kitchen and dining area. Experienced staff and management team in place. Strong financials and consistent growth. Perfect opportunity for someone in the food service industry or looking for a profitable investment.</p>",
         "type": 13,
         "state": "DC",
-        "city": "Washington",
+        "city": "Washington D.C.",
         "id": "b148ad7f-7f4a-4319-bc8c-df23cf85be3b",
         "price": 1500000,
         "salesRevenue": 2200000,
@@ -12322,7 +12322,7 @@
         "description": "<h3>Thriving Indian Restaurant in the Heart of Washington, D.C.</h3><p>Well-established Indian restaurant with a loyal customer base. Known for its authentic cuisine and inviting atmosphere.</p><p>Fully equipped kitchen and dining area. Experienced staff and management team in place. Strong financials and consistent growth. Perfect opportunity for someone in the food service industry or looking for a profitable investment.</p>",
         "type": 13,
         "state": "DC",
-        "city": "Washington",
+        "city": "Washington D.C.",
         "id": "d8d0f4e3-fdbf-4c4b-b2bd-d8847f0d248f",
         "price": 1500000,
         "salesRevenue": 2200000,

bizmatch-server/data/commercials.json

@@ -344,7 +344,7 @@
     "state": "HI",
     "hasImages": true,
     "price": 50000000,
-    "city": "Maui",
+    "city": "Hana",
     "description": "<p>Luxurious beachfront resort and spa on the island of Maui. This iconic property offers a once-in-a-lifetime opportunity to acquire a premier hospitality asset in a world-renowned destination.</p><h3>Resort Features:</h3><p>- 200 elegantly appointed guest rooms and suites<br>- Full-service spa and fitness center<br>- Multiple dining options, including fine dining and casual fare<br>- Infinity pool and direct beach access<br>- Event space for weddings and conferences</p><p>With a prime location on one of Maui's most stunning beaches, this resort and spa offers unparalleled potential for investors seeking a trophy asset in the highly sought-after Hawaiian market.</p>",
     "type": 105,
     "imageOrder": []
@@ -932,7 +932,7 @@
     "state": "HI",
     "hasImages": true,
     "price": 75000000,
-    "city": "Maui",
+    "city": "Hana",
     "description": "<h2>Oceanfront Luxury Resort and Spa</h2><p>Exquisite luxury resort and spa situated on the pristine shores of Maui. This world-class property features elegant accommodations, top-tier amenities, and unparalleled ocean views, attracting discerning travelers from around the globe.</p><p>Resort Features:</p><p>- 200 beautifully appointed guest rooms and suites<br>- Full-service spa, fitness center, and infinity pool<br>- Gourmet dining options showcasing local cuisine<br>- Extensive meeting and event spaces<br>- Prime beachfront location with direct access to water activities</p><p>With a strong brand reputation, consistent occupancy, and a truly idyllic setting, this luxury resort and spa presents an exceptional opportunity for investors seeking a trophy asset in one of the world's most desirable destinations.</p>",
     "type": 104,
     "imageOrder": []
@@ -2278,7 +2278,7 @@
     "state": "NY",
     "hasImages": true,
     "price": 500000000,
-    "city": "New York",
+    "city": "New York City",
     "description": "<p>Acquire this premier Class A office tower located in the heart of Midtown Manhattan, New York City. The property features state-of-the-art amenities, efficient floor plates, and unparalleled views of the city skyline, offering a prestigious address for top-tier tenants.</p><h3>Class A office tower features:</h3><p>- 1,000,000 square feet of Class A office space<br>- 95% occupancy rate with a diverse mix of creditworthy tenants<br>- LEED Platinum certified with advanced sustainability features<br>- Expansive lobby with 24/7 concierge and security services<br>- Multiple high-speed elevators and advanced building systems<br>- Prime Midtown location with access to transportation and amenities</p><p>Invest in this exceptional Class A office tower and benefit from the strong tenant demand and long-term value appreciation potential in the highly coveted Midtown Manhattan office market.</p>",
     "type": 103,
     "imageOrder": []
@@ -2434,7 +2434,7 @@
     "state": "DC",
     "hasImages": true,
     "price": 225000000,
-    "city": "Washington",
+    "city": "Washington D.C.",
     "description": "<p>Acquire this stunning historic office building located in the heart of downtown Washington, D.C. The property features classic architecture, modern amenities, and a prime location just steps from the White House, offering a prestigious address for government relations and lobbying firms.</p><h3>Historic office building features:</h3><p>- 250,000 square feet of beautifully renovated office space<br>- Elegant lobbies and common areas with historic details<br>- State-of-the-art building systems and infrastructure<br>- Rooftop terrace with panoramic views of the Washington Monument<br>- On-site retail and dining amenities<br>- Unparalleled access to government agencies, embassies, and influential organizations</p><p>Invest in this exceptional historic office building and benefit from the strong and stable demand for prestigious office space in the heart of the nation's capital.</p>",
     "type": 103,
     "imageOrder": []
@@ -2668,7 +2668,7 @@
     "state": "DC",
     "hasImages": true,
     "price": 400000000,
-    "city": "Washington",
+    "city": "Washington D.C.",
     "description": "<p>Acquire this iconic trophy office building located in the heart of Washington, D.C.'s central business district. The property features a stunning architectural design, premium amenities, and unparalleled views of the nation's capital, offering a prestigious address for top-tier tenants.</p><h3>Trophy office building features:</h3><p>- 600,000 square feet of Class A+ office space<br>- LEED Platinum certification for sustainability and energy efficiency<br>- Grand lobby with 24/7 concierge and security services<br>- Rooftop terrace with panoramic views of the Washington Monument and Capitol Building<br>- Private club with fine dining, fitness center, and conference facilities<br>- Direct access to multiple Metro lines and nearby amenities</p><p>Invest in this exceptional trophy office building and benefit from the strong and stable demand for premier office space in the nation's capital, driven by the presence of government agencies, lobbyists, and prestigious private sector tenants.</p>",
     "type": 103,
     "imageOrder": []

bizmatch-server/dbschema.ts

@@ -0,0 +1,239 @@
+/* tslint:disable */
+/* eslint-disable */
+
+
+/**
+ * AUTO-GENERATED FILE - DO NOT EDIT!
+ *
+ * This file was automatically generated by pg-to-ts v.4.1.1
+ * $ pg-to-ts generate -c postgresql://username:password@localhost:5432/bizmatch -t businesses -t commercials -t users -s public
+ *
+ */
+
+
+export type Json = unknown;
+export type customerSubType = 'appraiser' | 'attorney' | 'broker' | 'cpa' | 'surveyor' | 'titleCompany';
+export type customerType = 'buyer' | 'professional';
+export type gender = 'female' | 'male';
+export type listingsCategory = 'business' | 'commercialProperty';
+
+// Table businesses
+export interface Businesses {
+  id: string;
+  email: string | null;
+  type: string | null;
+  title: string | null;
+  description: string | null;
+  city: string | null;
+  state: string | null;
+  zipCode: number | null;
+  county: string | null;
+  price: number | null;
+  favoritesForUser: string[] | null;
+  draft: boolean | null;
+  listingsCategory: listingsCategory | null;
+  realEstateIncluded: boolean | null;
+  leasedLocation: boolean | null;
+  franchiseResale: boolean | null;
+  salesRevenue: number | null;
+  cashFlow: number | null;
+  supportAndTraining: string | null;
+  employees: number | null;
+  established: number | null;
+  internalListingNumber: number | null;
+  reasonForSale: string | null;
+  brokerLicencing: string | null;
+  internals: string | null;
+  imageName: string | null;
+  created: Date | null;
+  updated: Date | null;
+  visits: number | null;
+  lastVisit: Date | null;
+  latitude: number | null;
+  longitude: number | null;
+}
+export interface BusinessesInput {
+  id?: string;
+  email?: string | null;
+  type?: string | null;
+  title?: string | null;
+  description?: string | null;
+  city?: string | null;
+  state?: string | null;
+  zipCode?: number | null;
+  county?: string | null;
+  price?: number | null;
+  favoritesForUser?: string[] | null;
+  draft?: boolean | null;
+  listingsCategory?: listingsCategory | null;
+  realEstateIncluded?: boolean | null;
+  leasedLocation?: boolean | null;
+  franchiseResale?: boolean | null;
+  salesRevenue?: number | null;
+  cashFlow?: number | null;
+  supportAndTraining?: string | null;
+  employees?: number | null;
+  established?: number | null;
+  internalListingNumber?: number | null;
+  reasonForSale?: string | null;
+  brokerLicencing?: string | null;
+  internals?: string | null;
+  imageName?: string | null;
+  created?: Date | null;
+  updated?: Date | null;
+  visits?: number | null;
+  lastVisit?: Date | null;
+  latitude?: number | null;
+  longitude?: number | null;
+}
+const businesses = {
+  tableName: 'businesses',
+  columns: ['id', 'email', 'type', 'title', 'description', 'city', 'state', 'zipCode', 'county', 'price', 'favoritesForUser', 'draft', 'listingsCategory', 'realEstateIncluded', 'leasedLocation', 'franchiseResale', 'salesRevenue', 'cashFlow', 'supportAndTraining', 'employees', 'established', 'internalListingNumber', 'reasonForSale', 'brokerLicencing', 'internals', 'imageName', 'created', 'updated', 'visits', 'lastVisit', 'latitude', 'longitude'],
+  requiredForInsert: [],
+  primaryKey: 'id',
+  foreignKeys: { email: { table: 'users', column: 'email', $type: null as unknown as Users }, },
+  $type: null as unknown as Businesses,
+  $input: null as unknown as BusinessesInput
+} as const;
+
+// Table commercials
+export interface Commercials {
+  id: string;
+  serialId: number;
+  email: string | null;
+  type: string | null;
+  title: string | null;
+  description: string | null;
+  city: string | null;
+  state: string | null;
+  price: number | null;
+  favoritesForUser: string[] | null;
+  listingsCategory: listingsCategory | null;
+  hideImage: boolean | null;
+  draft: boolean | null;
+  zipCode: number | null;
+  county: string | null;
+  imageOrder: string[] | null;
+  imagePath: string | null;
+  created: Date | null;
+  updated: Date | null;
+  visits: number | null;
+  lastVisit: Date | null;
+  latitude: number | null;
+  longitude: number | null;
+}
+export interface CommercialsInput {
+  id?: string;
+  serialId?: number;
+  email?: string | null;
+  type?: string | null;
+  title?: string | null;
+  description?: string | null;
+  city?: string | null;
+  state?: string | null;
+  price?: number | null;
+  favoritesForUser?: string[] | null;
+  listingsCategory?: listingsCategory | null;
+  hideImage?: boolean | null;
+  draft?: boolean | null;
+  zipCode?: number | null;
+  county?: string | null;
+  imageOrder?: string[] | null;
+  imagePath?: string | null;
+  created?: Date | null;
+  updated?: Date | null;
+  visits?: number | null;
+  lastVisit?: Date | null;
+  latitude?: number | null;
+  longitude?: number | null;
+}
+const commercials = {
+  tableName: 'commercials',
+  columns: ['id', 'serialId', 'email', 'type', 'title', 'description', 'city', 'state', 'price', 'favoritesForUser', 'listingsCategory', 'hideImage', 'draft', 'zipCode', 'county', 'imageOrder', 'imagePath', 'created', 'updated', 'visits', 'lastVisit', 'latitude', 'longitude'],
+  requiredForInsert: [],
+  primaryKey: 'id',
+  foreignKeys: { email: { table: 'users', column: 'email', $type: null as unknown as Users }, },
+  $type: null as unknown as Commercials,
+  $input: null as unknown as CommercialsInput
+} as const;
+
+// Table users
+export interface Users {
+  id: string;
+  firstname: string;
+  lastname: string;
+  email: string;
+  phoneNumber: string | null;
+  description: string | null;
+  companyName: string | null;
+  companyOverview: string | null;
+  companyWebsite: string | null;
+  companyLocation: string | null;
+  offeredServices: string | null;
+  areasServed: Json | null;
+  hasProfile: boolean | null;
+  hasCompanyLogo: boolean | null;
+  licensedIn: Json | null;
+  gender: gender | null;
+  customerType: customerType | null;
+  customerSubType: customerSubType | null;
+  created: Date | null;
+  updated: Date | null;
+  latitude: number | null;
+  longitude: number | null;
+}
+export interface UsersInput {
+  id?: string;
+  firstname: string;
+  lastname: string;
+  email: string;
+  phoneNumber?: string | null;
+  description?: string | null;
+  companyName?: string | null;
+  companyOverview?: string | null;
+  companyWebsite?: string | null;
+  companyLocation?: string | null;
+  offeredServices?: string | null;
+  areasServed?: Json | null;
+  hasProfile?: boolean | null;
+  hasCompanyLogo?: boolean | null;
+  licensedIn?: Json | null;
+  gender?: gender | null;
+  customerType?: customerType | null;
+  customerSubType?: customerSubType | null;
+  created?: Date | null;
+  updated?: Date | null;
+  latitude?: number | null;
+  longitude?: number | null;
+}
+const users = {
+  tableName: 'users',
+  columns: ['id', 'firstname', 'lastname', 'email', 'phoneNumber', 'description', 'companyName', 'companyOverview', 'companyWebsite', 'companyLocation', 'offeredServices', 'areasServed', 'hasProfile', 'hasCompanyLogo', 'licensedIn', 'gender', 'customerType', 'customerSubType', 'created', 'updated', 'latitude', 'longitude'],
+  requiredForInsert: ['firstname', 'lastname', 'email'],
+  primaryKey: 'id',
+  foreignKeys: {},
+  $type: null as unknown as Users,
+  $input: null as unknown as UsersInput
+} as const;
+
+
+export interface TableTypes {
+  businesses: {
+  select: Businesses;
+  input: BusinessesInput;
+  };
+  commercials: {
+  select: Commercials;
+  input: CommercialsInput;
+  };
+  users: {
+  select: Users;
+  input: UsersInput;
+  };
+}
+
+export const tables = {
+  businesses,
+  commercials,
+  users,
+}

bizmatch-server/drizzle.config.ts

@@ -1,11 +1,12 @@
-import { defineConfig } from 'drizzle-kit'
+import { defineConfig } from 'drizzle-kit';
 export default defineConfig({
-    schema: "./src/drizzle/schema.ts",
-    out: "./src/drizzle/migrations",
-    driver: 'pg',
-    dbCredentials: {
-        connectionString: process.env.DATABASE_URL,
-    },
-    verbose: true,
-    strict: true,
-})
+  schema: './src/drizzle/schema.ts',
+  out: './src/drizzle/migrations',
+  dialect: 'postgresql',
+  // driver: 'pg',
+  dbCredentials: {
+    url: process.env.DATABASE_URL,
+  },
+  verbose: true,
+  strict: true,
+});

bizmatch-server/package.json

@@ -19,7 +19,7 @@
     "test:cov": "jest --coverage",
     "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",
-    "generate": "drizzle-kit generate:pg",
+    "generate": "drizzle-kit generate",
     "drop": "drizzle-kit drop",
     "migrate": "tsx src/drizzle/migrate.ts",
     "import": "tsx src/drizzle/import.ts",
@@ -36,27 +36,29 @@
     "@nestjs/serve-static": "^4.0.1",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
-    "drizzle-orm": "^0.30.8",
+    "drizzle-orm": "^0.32.0",
     "fs-extra": "^11.2.0",
+    "groq-sdk": "^0.5.0",
     "handlebars": "^4.7.8",
     "jwks-rsa": "^3.1.0",
-    "ky": "^1.2.0",
+    "ky": "^1.4.0",
     "nest-winston": "^1.9.4",
     "nodemailer": "^6.9.10",
     "nodemailer-smtp-transport": "^2.7.4",
+    "openai": "^4.52.6",
     "passport": "^0.7.0",
     "passport-google-oauth20": "^2.0.0",
     "passport-jwt": "^4.0.1",
     "passport-local": "^1.0.0",
     "pg": "^8.11.5",
-    "redis": "^4.6.13",
-    "redis-om": "^0.4.3",
+    "pgvector": "^0.2.0",
     "reflect-metadata": "^0.2.0",
     "rxjs": "^7.8.1",
     "sharp": "^0.33.2",
-    "tsx": "^4.7.2",
+    "tsx": "^4.16.2",
     "urlcat": "^3.1.0",
-    "winston": "^3.11.0"
+    "winston": "^3.11.0",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/parser": "^7.24.4",
@@ -77,7 +79,8 @@
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "commander": "^12.0.0",
-    "drizzle-kit": "^0.20.16",
+    "drizzle-kit": "^0.23.0",
+    "esbuild-register": "^3.5.0",
     "eslint": "^8.42.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
@@ -90,7 +93,7 @@
     "supertest": "^6.3.3",
     "ts-jest": "^29.1.0",
     "ts-loader": "^9.4.3",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.1.3"
   },

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

@@ -0,0 +1,12 @@
+import { Body, Controller, Post } from '@nestjs/common';
+import { AiService } from './ai.service.js';
+
+@Controller('ai')
+export class AiController {
+  constructor(private readonly aiService: AiService) {}
+
+  @Post()
+  async getBusinessCriteria(@Body('query') query: string) {
+    return this.aiService.getBusinessCriteria(query);
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Module } from '@nestjs/common';
+import { AiController } from './ai.controller.js';
+import { AiService } from './ai.service.js';
+
+@Module({
+  controllers: [AiController],
+  providers: [AiService],
+})
+export class AiModule {}

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

@@ -0,0 +1,94 @@
+import { Injectable } from '@nestjs/common';
+import Groq from 'groq-sdk';
+import OpenAI from 'openai';
+import { BusinessListingCriteria } from '../models/main.model';
+
+const businessListingCriteriaStructure = {
+  criteriaType: 'business | commercialProperty | broker',
+  types: "'Automotive'|'Industrial Services'|'Food and Restaurant'|'Real Estate'|'Retail'|'Oilfield SVE and MFG.'|'Service'|'Advertising'|'Agriculture'|'Franchise'|'Professional'|'Manufacturing'",
+  city: 'string',
+  state: 'string',
+  county: 'string',
+  minPrice: 'number',
+  maxPrice: 'number',
+  minRevenue: 'number',
+  maxRevenue: 'number',
+  minCashFlow: 'number',
+  maxCashFlow: 'number',
+  minNumberEmployees: 'number',
+  maxNumberEmployees: 'number',
+  establishedSince: 'number',
+  establishedUntil: 'number',
+  realEstateChecked: 'boolean',
+  leasedLocation: 'boolean',
+  franchiseResale: 'boolean',
+  title: 'string',
+  brokerName: 'string',
+  searchType: "'exact' | 'radius'",
+  radius: "'0' | '5' | '20' | '50' | '100' | '200' | '300' | '400' | '500'",
+};
+@Injectable()
+export class AiService {
+  private readonly openai: OpenAI;
+  private readonly groq: Groq;
+  constructor() {
+    this.openai = new OpenAI({
+      apiKey: process.env.OPENAI_API_KEY, // Verwenden Sie Umgebungsvariablen für den API-Schlüssel
+    });
+    this.groq = new Groq({ apiKey: process.env.GROQ_API_KEY });
+  }
+
+  async getBusinessCriteria(query: string): Promise<BusinessListingCriteria> {
+    // const prompt = `
+    //                 Dieses Objekt ist wie folgt definiert: ${JSON.stringify(businessListingCriteriaStructure)}.
+    //                 Die Antwort darf nur das von dir befüllte JSON als unformatierten Text enthalten so das es von mir mit JSON.parse() einlesbar ist!!!!
+    //                 Falls es Ortsangaben gibt, dann befülle City, County und State wenn möglich Die Suchanfrage des Users lautet: "${query}"`;
+    const prompt = `The Search Query of the User is: "${query}"`;
+    let response = null;
+    try {
+      // response = await this.openai.chat.completions.create({
+      //   model: 'gpt-4o-mini',
+      //   //model: 'gpt-3.5-turbo',
+      //   max_tokens: 300,
+      //   messages: [
+      //     {
+      //       role: 'system',
+      //       content: `Please create unformatted JSON Object from a user input.
+      //                       The type is: ${JSON.stringify(businessListingCriteriaStructure)}.,
+      //         If location details available please fill city, county and state as State Code`,
+      //     },
+      //   ],
+      //   temperature: 0.5,
+      //   response_format: { type: 'json_object' },
+      // });
+
+      response = await this.groq.chat.completions.create({
+        messages: [
+          {
+            role: 'system',
+            content: `Please create unformatted JSON Object from a user input.
+                      The type must be: ${JSON.stringify(businessListingCriteriaStructure)}.
+                      If location details available please fill city, county and state as State Code`,
+          },
+          {
+            role: 'user',
+            content: prompt,
+          },
+        ],
+        model: 'llama-3.1-70b-versatile',
+        //model: 'llama-3.1-8b-instant',
+        temperature: 0.2,
+        max_tokens: 300,
+        response_format: { type: 'json_object' },
+      });
+
+      const generatedCriteria = JSON.parse(response.choices[0]?.message?.content);
+      return generatedCriteria;
+
+      // return response.choices[0]?.message?.content;
+    } catch (error) {
+      console.error(`Error calling GPT-4 API: ${response.choices[0]}`, error);
+      throw new Error('Failed to generate business criteria');
+    }
+  }
+}

bizmatch-server/src/app.module.ts

@@ -4,9 +4,8 @@ import { PassportModule } from '@nestjs/passport';
 import * as dotenv from 'dotenv';
 import fs from 'fs-extra';
 import { WinstonModule, utilities as nestWinstonModuleUtilities } from 'nest-winston';
-import path from 'path';
-import { fileURLToPath } from 'url';
 import * as winston from 'winston';
+import { AiModule } from './ai/ai.module.js';
 import { AppController } from './app.controller.js';
 import { AppService } from './app.service.js';
 import { AuthModule } from './auth/auth.module.js';
@@ -18,8 +17,8 @@ import { MailModule } from './mail/mail.module.js';
 import { RequestDurationMiddleware } from './request-duration/request-duration.middleware.js';
 import { SelectOptionsModule } from './select-options/select-options.module.js';
 import { UserModule } from './user/user.module.js';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+// const __filename = fileURLToPath(import.meta.url);
+// const __dirname = path.dirname(__filename);
 
 function loadEnvFiles() {
   // Load the .env file
@@ -75,6 +74,7 @@ loadEnvFiles();
     SelectOptionsModule,
     ImageModule,
     PassportModule,
+    AiModule,
   ],
   controllers: [AppController],
   providers: [AppService, FileService],

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

@@ -1,12 +1,9 @@
 import { Module } from '@nestjs/common';
 import { PassportModule } from '@nestjs/passport';
-import path from 'path';
-import { fileURLToPath } from 'url';
 import { JwtStrategy } from '../jwt.strategy.js';
 import { AuthController } from './auth.controller.js';
 import { AuthService } from './auth.service.js';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+
 @Module({
   imports: [PassportModule],
   providers: [AuthService, JwtStrategy],

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

@@ -1,11 +1,9 @@
 import { Injectable } from '@nestjs/common';
-// import got from 'got';
 import ky from 'ky';
 import urlcat from 'urlcat';
 
 @Injectable()
 export class AuthService {
-  
   public async getAccessToken() {
     const form = new FormData();
     form.append('grant_type', 'password');
@@ -19,13 +17,15 @@ export class AuthService {
       params.append('password', process.env.password);
       const URL = `${process.env.host}${process.env.tokenURL}`;
 
-      const response = await ky.post(URL, {
-        body: params.toString(),
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
-          'Authorization':'Basic YWRtaW4tY2xpOnE0RmJnazFkd0NaelFQZmt5VzhhM3NnckV5UHZlRUY3'
-        },
-      }).json();
+      const response = await ky
+        .post(URL, {
+          body: params.toString(),
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            Authorization: 'Basic YWRtaW4tY2xpOnE0RmJnazFkd0NaelFQZmt5VzhhM3NnckV5UHZlRUY3',
+          },
+        })
+        .json();
       return (<any>response).access_token;
     } catch (error) {
       if (error.name === 'HTTPError') {
@@ -37,71 +37,83 @@ export class AuthService {
     }
   }
 
-  public async getUsers(){
+  public async getUsers() {
     const token = await this.getAccessToken();
     const URL = `${process.env.host}${process.env.usersURL}`;
-    const response = await ky.get(URL, {
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        'Authorization':`Bearer ${token}`
-      },
-    }).json();
-    return response
+    const response = await ky
+      .get(URL, {
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .json();
+    return response;
   }
-  public async getUser(userid:string){
+  public async getUser(userid: string) {
     const token = await this.getAccessToken();
-    const URL = urlcat(process.env.host,process.env.userURL,{userid})
-    const response = await ky.get(URL, {
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        'Authorization':`Bearer ${token}`
-      },
-    }).json();
-    return response
+    const URL = urlcat(process.env.host, process.env.userURL, { userid });
+    const response = await ky
+      .get(URL, {
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .json();
+    return response;
   }
-  public async getGroups(){
+  public async getGroups() {
     const token = await this.getAccessToken();
     const URL = `${process.env.host}${process.env.groupsURL}`;
-    const response = await ky.get(URL, {
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        'Authorization':`Bearer ${token}`
-      },
-    }).json();
-    return response
+    const response = await ky
+      .get(URL, {
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .json();
+    return response;
   }
 
-  public async getGroupsForUser(userid:string){
+  public async getGroupsForUser(userid: string) {
     const token = await this.getAccessToken();
-    const URL = urlcat(process.env.host,process.env.userGroupsURL,{userid})
-    const response = await ky.get(URL, {
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        'Authorization':`Bearer ${token}`
-      },
-    }).json();
-    return response
+    const URL = urlcat(process.env.host, process.env.userGroupsURL, { userid });
+    const response = await ky
+      .get(URL, {
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .json();
+    return response;
   }
-  public async getLastLogin(userid:string){
+  public async getLastLogin(userid: string) {
     const token = await this.getAccessToken();
-    const URL = urlcat(process.env.host,process.env.lastLoginURL,{userid})
-    const response = await ky.get(URL, {
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        'Authorization':`Bearer ${token}`
-      },
-    }).json();
-    return response
+    const URL = urlcat(process.env.host, process.env.lastLoginURL, { userid });
+    const response = await ky
+      .get(URL, {
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .json();
+    return response;
   }
-  public async addUser2Group(userid:string,groupid:string){
+  public async addUser2Group(userid: string, groupid: string) {
     const token = await this.getAccessToken();
-    const URL = urlcat(process.env.host,process.env.addUser2GroupURL,{userid,groupid})
-    const response = await ky.put(URL, {
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        'Authorization':`Bearer ${token}`
-      },
-    }).json();
-    return response
+    const URL = urlcat(process.env.host, process.env.addUser2GroupURL, { userid, groupid });
+    const response = await ky
+      .put(URL, {
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .json();
+    return response;
   }
 }

bizmatch-server/src/drizzle/import.ts

@@ -1,28 +1,100 @@
 import 'dotenv/config';
 import { drizzle } from 'drizzle-orm/node-postgres';
-import { existsSync, readFileSync, readdirSync, statSync, unlinkSync } from 'fs';
+import { existsSync, readdirSync, readFileSync, statSync, unlinkSync } from 'fs';
 import fs from 'fs-extra';
+import OpenAI from 'openai';
 import { join } from 'path';
 import pkg from 'pg';
 import { rimraf } from 'rimraf';
 import sharp from 'sharp';
-import { BusinessListing, CommercialPropertyListing, User, UserData } from 'src/models/db.model.js';
-import { emailToDirName } from 'src/models/main.model.js';
+import { BusinessListingService } from 'src/listings/business-listing.service.js';
+import { CommercialPropertyService } from 'src/listings/commercial-property.service.js';
+import { Geo } from 'src/models/server.model.js';
+import winston from 'winston';
+import { User, UserData } from '../models/db.model.js';
+import { createDefaultBusinessListing, createDefaultCommercialPropertyListing, createDefaultUser, emailToDirName, KeyValueStyle } from '../models/main.model.js';
+import { SelectOptionsService } from '../select-options/select-options.service.js';
+import { convertUserToDrizzleUser } from '../utils.js';
 import * as schema from './schema.js';
+interface PropertyImportListing {
+  id: string;
+  userId: string;
+  listingsCategory: 'commercialProperty';
+  title: string;
+  state: string;
+  hasImages: boolean;
+  price: number;
+  city: string;
+  description: string;
+  type: number;
+  imageOrder: any[];
+}
+interface BusinessImportListing {
+  userId: string;
+  listingsCategory: 'business';
+  title: string;
+  description: string;
+  type: number;
+  state: string;
+  city: string;
+  id: string;
+  price: number;
+  salesRevenue: number;
+  leasedLocation: boolean;
+  established: number;
+  employees: number;
+  reasonForSale: string;
+  supportAndTraining: string;
+  cashFlow: number;
+  brokerLicencing: string;
+  internalListingNumber: number;
+  realEstateIncluded: boolean;
+  franchiseResale: boolean;
+  draft: boolean;
+  internals: string;
+  created: string;
+}
+const typesOfBusiness: Array<KeyValueStyle> = [
+  { 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: '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: '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: '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: '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: '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: 'Food and Restaurant', value: '13', icon: 'fa-solid fa-utensils', textColorClass: 'text-amber-700' },
+];
 const { Pool } = pkg;
 
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY, // Stellen Sie sicher, dass Sie Ihren API-Key als Umgebungsvariable setzen
+});
+
 const connectionString = process.env.DATABASE_URL;
 // const pool = new Pool({connectionString})
 const client = new Pool({ connectionString });
 const db = drizzle(client, { schema, logger: true });
-
+const logger = winston.createLogger({
+  transports: [new winston.transports.Console()],
+});
+const commService = new CommercialPropertyService(null, db);
+const businessService = new BusinessListingService(null, db);
 //Delete Content
 await db.delete(schema.commercials);
 await db.delete(schema.businesses);
 await db.delete(schema.users);
+let filePath = `./src/assets/geo.json`;
+const rawData = readFileSync(filePath, 'utf8');
+const geos = JSON.parse(rawData) as Geo;
 
+const sso = new SelectOptionsService();
 //Broker
-let filePath = `./data/broker.json`;
+filePath = `./data/broker.json`;
 let data: string = readFileSync(filePath, 'utf8');
 const usersData: UserData[] = JSON.parse(data); // Erwartet ein Array von Objekten
 const generatedUserData = [];
@@ -39,8 +111,11 @@ deleteFilesOfDir(targetPathProperty);
 fs.ensureDirSync(`./pictures/logo`);
 fs.ensureDirSync(`./pictures/profile`);
 fs.ensureDirSync(`./pictures/property`);
-for (const userData of usersData) {
-  const user: User = { firstname: '', lastname: '', email: '' };
+
+//User
+for (let index = 0; index < usersData.length; index++) {
+  const userData = usersData[index];
+  const user: User = createDefaultUser('', '', '');
   user.licensedIn = [];
   userData.licensedIn.forEach(l => {
     console.log(l['value'], l['name']);
@@ -60,15 +135,27 @@ for (const userData of usersData) {
   user.companyName = userData.companyName;
   user.companyOverview = userData.companyOverview;
   user.companyWebsite = userData.companyWebsite;
-  user.companyLocation = userData.companyLocation;
+  const [city, state] = userData.companyLocation.split('-').map(e => e.trim());
+  user.companyLocation = {};
+  user.companyLocation.city = city;
+  user.companyLocation.state = state;
+  const cityGeo = geos.states.find(s => s.state_code === state).cities.find(c => c.name === city);
+  user.companyLocation.latitude = cityGeo.latitude;
+  user.companyLocation.longitude = cityGeo.longitude;
   user.offeredServices = userData.offeredServices;
   user.gender = userData.gender;
+  user.customerType = 'professional';
+  user.customerSubType = 'broker';
   user.created = new Date();
   user.updated = new Date();
-  const u = await db.insert(schema.users).values(user).returning({ insertedId: schema.users.id, gender: schema.users.gender, email: schema.users.email });
+
+  const u = await db
+    .insert(schema.users)
+    .values(convertUserToDrizzleUser(user))
+    .returning({ insertedId: schema.users.id, gender: schema.users.gender, email: schema.users.email, firstname: schema.users.firstname, lastname: schema.users.lastname });
   generatedUserData.push(u[0]);
   i++;
-
+  logger.info(`user_${index} inserted`);
   if (u[0].gender === 'male') {
     male++;
     const data = readFileSync(`./pictures_base/profile/Mann_${male}.jpg`);
@@ -81,47 +168,111 @@ for (const userData of usersData) {
   const data = readFileSync(`./pictures_base/logo/${i}.jpg`);
   await storeCompanyLogo(data, emailToDirName(u[0].email));
 }
-//Business Listings
-filePath = `./data/businesses.json`;
-data = readFileSync(filePath, 'utf8');
-const businessJsonData = JSON.parse(data) as BusinessListing[]; // Erwartet ein Array von Objekten
 
-for (const business of businessJsonData) {
-  delete business.id;
-  business.created = new Date(business.created);
-  business.updated = new Date(business.created);
-  const user = getRandomItem(generatedUserData);
-  business.userId = user.insertedId;
-  business.imageName = emailToDirName(user.email);
-  await db.insert(schema.businesses).values(business);
-}
 //Corporate Listings
 filePath = `./data/commercials.json`;
 data = readFileSync(filePath, 'utf8');
-const commercialJsonData = JSON.parse(data) as CommercialPropertyListing[]; // Erwartet ein Array von Objekten
-for (const commercial of commercialJsonData) {
-  const id = commercial.id;
-  delete commercial.id;
+const commercialJsonData = JSON.parse(data) as PropertyImportListing[]; // Erwartet ein Array von Objekten
+for (let index = 0; index < commercialJsonData.length; index++) {
   const user = getRandomItem(generatedUserData);
+  const commercial = createDefaultCommercialPropertyListing();
+  const id = commercialJsonData[index].id;
+  delete commercial.id;
+
+  commercial.email = user.email;
+  commercial.type = sso.typesOfCommercialProperty.find(e => e.oldValue === String(commercialJsonData[index].type)).value;
+  commercial.title = commercialJsonData[index].title;
+  commercial.description = commercialJsonData[index].description;
+  try {
+    const cityGeo = geos.states.find(s => s.state_code === commercialJsonData[index].state).cities.find(c => c.name === commercialJsonData[index].city);
+    commercial.location = {};
+    commercial.location.latitude = cityGeo.latitude;
+    commercial.location.longitude = cityGeo.longitude;
+    commercial.location.city = commercialJsonData[index].city;
+    commercial.location.state = commercialJsonData[index].state;
+    // console.log(JSON.stringify(commercial.location));
+  } catch (e) {
+    console.log(`----------------> ERROR ${commercialJsonData[index].state} - ${commercialJsonData[index].city}`);
+    continue;
+  }
+  commercial.price = commercialJsonData[index].price;
+  commercial.listingsCategory = 'commercialProperty';
+  commercial.draft = false;
   commercial.imageOrder = getFilenames(id);
   commercial.imagePath = emailToDirName(user.email);
   const insertionDate = getRandomDateWithinLastYear();
   commercial.created = insertionDate;
   commercial.updated = insertionDate;
-  commercial.userId = user.insertedId;
-  commercial.draft = false;
-  const result = await db.insert(schema.commercials).values(commercial).returning();
-  //fs.ensureDirSync(`./pictures/property/${result[0].imagePath}/${result[0].serialId}`);
+
+  const result = await commService.createListing(commercial); //await db.insert(schema.commercials).values(commercial).returning();
   try {
-    fs.copySync(`./pictures_base/property/${id}`, `./pictures/property/${result[0].imagePath}/${result[0].serialId}`);
+    fs.copySync(`./pictures_base/property/${id}`, `./pictures/property/${result.imagePath}/${result.serialId}`);
   } catch (err) {
-    console.log(`----- No pictures available for ${id} ------`);
+    console.log(`----- No pictures available for ${id} ------ ${err}`);
   }
 }
 
+//Business Listings
+filePath = `./data/businesses.json`;
+data = readFileSync(filePath, 'utf8');
+const businessJsonData = JSON.parse(data) as BusinessImportListing[]; // Erwartet ein Array von Objekten
+for (let index = 0; index < businessJsonData.length; index++) {
+  const business = createDefaultBusinessListing(); //businessJsonData[index];
+  delete business.id;
+  const user = getRandomItem(generatedUserData);
+  business.email = user.email;
+  business.type = sso.typesOfBusiness.find(e => e.oldValue === String(businessJsonData[index].type)).value;
+  business.title = businessJsonData[index].title;
+  business.description = businessJsonData[index].description;
+  try {
+    const cityGeo = geos.states.find(s => s.state_code === businessJsonData[index].state).cities.find(c => c.name === businessJsonData[index].city);
+    business.location = {};
+    business.location.latitude = cityGeo.latitude;
+    business.location.longitude = cityGeo.longitude;
+    business.location.city = businessJsonData[index].city;
+    business.location.state = businessJsonData[index].state;
+  } catch (e) {
+    console.log(`----------------> ERROR ${businessJsonData[index].state} - ${businessJsonData[index].city}`);
+    continue;
+  }
+  business.price = businessJsonData[index].price;
+  business.title = businessJsonData[index].title;
+  business.draft = businessJsonData[index].draft;
+  business.listingsCategory = 'business';
+  business.realEstateIncluded = businessJsonData[index].realEstateIncluded;
+  business.leasedLocation = businessJsonData[index].leasedLocation;
+  business.franchiseResale = businessJsonData[index].franchiseResale;
+
+  business.salesRevenue = businessJsonData[index].salesRevenue;
+  business.cashFlow = businessJsonData[index].cashFlow;
+  business.supportAndTraining = businessJsonData[index].supportAndTraining;
+  business.employees = businessJsonData[index].employees;
+  business.established = businessJsonData[index].established;
+  business.internalListingNumber = businessJsonData[index].internalListingNumber;
+  business.reasonForSale = businessJsonData[index].reasonForSale;
+  business.brokerLicencing = businessJsonData[index].brokerLicencing;
+  business.internals = businessJsonData[index].internals;
+  business.imageName = emailToDirName(user.email);
+  business.created = new Date(businessJsonData[index].created);
+  business.updated = new Date(businessJsonData[index].created);
+
+  await businessService.createListing(business); //db.insert(schema.businesses).values(business);
+}
+
 //End
 await client.end();
 
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+async function createEmbedding(text: string): Promise<number[]> {
+  const response = await openai.embeddings.create({
+    model: 'text-embedding-3-small',
+    input: text,
+  });
+  return response.data[0].embedding;
+}
+
 function getRandomItem<T>(arr: T[]): T {
   if (arr.length === 0) {
     throw new Error('The array is empty.');
@@ -135,7 +286,7 @@ function getFilenames(id: string): string[] {
     let filePath = `./pictures_base/property/${id}`;
     return readdirSync(filePath);
   } catch (e) {
-    return null;
+    return [];
   }
 }
 function getRandomDateWithinLastYear(): Date {

bizmatch-server/src/drizzle/migrate.ts

@@ -1,13 +1,12 @@
 import 'dotenv/config';
 import { drizzle } from 'drizzle-orm/node-postgres';
 import pkg from 'pg';
-const { Pool } = pkg;
 import * as schema from './schema.js';
-import { migrate } from 'drizzle-orm/node-postgres/migrator';
-const connectionString = process.env.DATABASE_URL
-const pool = new Pool({connectionString})
+const { Pool } = pkg;
+const connectionString = process.env.DATABASE_URL;
+const pool = new Pool({ connectionString });
 const db = drizzle(pool, { schema });
 // This will run migrations on the database, skipping the ones already applied
-await migrate(db, { migrationsFolder: './src/drizzle/migrations' });
+//await migrate(db, { migrationsFolder: './src/drizzle/migrations' });
 // Don't forget to close the connection, otherwise the script will hang
-await pool.end();
+//await pool.end();

bizmatch-server/src/drizzle/migrations/0000_lean_marvex.sql

@@ -1,13 +1,31 @@
 DO $$ BEGIN
- CREATE TYPE "gender" AS ENUM('male', 'female');
+ CREATE TYPE "public"."customerSubType" AS ENUM('broker', 'cpa', 'attorney', 'titleCompany', 'surveyor', 'appraiser');
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ CREATE TYPE "public"."customerType" AS ENUM('buyer', 'professional');
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ CREATE TYPE "public"."gender" AS ENUM('male', 'female');
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ CREATE TYPE "public"."listingsCategory" AS ENUM('commercialProperty', 'business');
 EXCEPTION
  WHEN duplicate_object THEN null;
 END $$;
 --> statement-breakpoint
 CREATE TABLE IF NOT EXISTS "businesses" (
 	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
-	"userId" uuid,
-	"type" integer,
+	"email" varchar(255),
+	"type" varchar(255),
 	"title" varchar(255),
 	"description" text,
 	"city" varchar(255),
@@ -15,7 +33,7 @@ CREATE TABLE IF NOT EXISTS "businesses" (
 	"price" double precision,
 	"favoritesForUser" varchar(30)[],
 	"draft" boolean,
-	"listingsCategory" varchar(255),
+	"listingsCategory" "listingsCategory",
 	"realEstateIncluded" boolean,
 	"leasedLocation" boolean,
 	"franchiseResale" boolean,
@@ -28,38 +46,32 @@ CREATE TABLE IF NOT EXISTS "businesses" (
 	"reasonForSale" varchar(255),
 	"brokerLicencing" varchar(255),
 	"internals" text,
-	"imagePath" varchar(200),
+	"imageName" varchar(200),
 	"created" timestamp,
 	"updated" timestamp,
-	"visits" integer,
-	"lastVisit" timestamp
+	"latitude" double precision,
+	"longitude" double precision
 );
 --> statement-breakpoint
 CREATE TABLE IF NOT EXISTS "commercials" (
 	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
-	"serial_id" serial NOT NULL,
-	"userId" uuid,
-	"type" integer,
+	"serialId" serial NOT NULL,
+	"email" varchar(255),
+	"type" varchar(255),
 	"title" varchar(255),
 	"description" text,
 	"city" varchar(255),
 	"state" char(2),
 	"price" double precision,
 	"favoritesForUser" varchar(30)[],
-	"listingsCategory" varchar(255),
-	"hideImage" boolean,
+	"listingsCategory" "listingsCategory",
 	"draft" boolean,
-	"zipCode" integer,
-	"county" varchar(255),
-	"email" varchar(255),
-	"website" varchar(255),
-	"phoneNumber" varchar(255),
 	"imageOrder" varchar(200)[],
 	"imagePath" varchar(200),
 	"created" timestamp,
 	"updated" timestamp,
-	"visits" integer,
-	"lastVisit" timestamp
+	"latitude" double precision,
+	"longitude" double precision
 );
 --> statement-breakpoint
 CREATE TABLE IF NOT EXISTS "users" (
@@ -72,25 +84,31 @@ CREATE TABLE IF NOT EXISTS "users" (
 	"companyName" varchar(255),
 	"companyOverview" text,
 	"companyWebsite" varchar(255),
-	"companyLocation" varchar(255),
+	"city" varchar(255),
+	"state" char(2),
 	"offeredServices" text,
 	"areasServed" jsonb,
 	"hasProfile" boolean,
 	"hasCompanyLogo" boolean,
 	"licensedIn" jsonb,
 	"gender" "gender",
+	"customerType" "customerType",
+	"customerSubType" "customerSubType",
 	"created" timestamp,
-	"updated" timestamp
+	"updated" timestamp,
+	"latitude" double precision,
+	"longitude" double precision,
+	CONSTRAINT "users_email_unique" UNIQUE("email")
 );
 --> statement-breakpoint
 DO $$ BEGIN
- ALTER TABLE "businesses" ADD CONSTRAINT "businesses_userId_users_id_fk" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE no action ON UPDATE no action;
+ ALTER TABLE "businesses" ADD CONSTRAINT "businesses_email_users_email_fk" FOREIGN KEY ("email") REFERENCES "public"."users"("email") ON DELETE no action ON UPDATE no action;
 EXCEPTION
  WHEN duplicate_object THEN null;
 END $$;
 --> statement-breakpoint
 DO $$ BEGIN
- ALTER TABLE "commercials" ADD CONSTRAINT "commercials_userId_users_id_fk" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE no action ON UPDATE no action;
+ ALTER TABLE "commercials" ADD CONSTRAINT "commercials_email_users_email_fk" FOREIGN KEY ("email") REFERENCES "public"."users"("email") ON DELETE no action ON UPDATE no action;
 EXCEPTION
  WHEN duplicate_object THEN null;
 END $$;

bizmatch-server/src/drizzle/migrations/0001_wet_mephistopheles.sql

@@ -1,7 +0,0 @@
-DO $$ BEGIN
- CREATE TYPE "customerType" AS ENUM('buyer', 'broker', 'professional');
-EXCEPTION
- WHEN duplicate_object THEN null;
-END $$;
---> statement-breakpoint
-ALTER TABLE "users" ADD COLUMN "customerType" "customerType";

bizmatch-server/src/drizzle/migrations/meta/0000_snapshot.json

@@ -1,10 +1,10 @@
 {
-  "id": "fc58c59b-ac5c-406e-8fdb-b05de40aed17",
+  "id": "a8283ca6-2c10-42bb-a640-ca984544ba30",
   "prevId": "00000000-0000-0000-0000-000000000000",
-  "version": "5",
-  "dialect": "pg",
+  "version": "7",
+  "dialect": "postgresql",
   "tables": {
-    "businesses": {
+    "public.businesses": {
       "name": "businesses",
       "schema": "",
       "columns": {
@@ -15,15 +15,15 @@
           "notNull": true,
           "default": "gen_random_uuid()"
         },
-        "userId": {
-          "name": "userId",
-          "type": "uuid",
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
           "primaryKey": false,
           "notNull": false
         },
         "type": {
           "name": "type",
-          "type": "integer",
+          "type": "varchar(255)",
           "primaryKey": false,
           "notNull": false
         },
@@ -71,7 +71,8 @@
         },
         "listingsCategory": {
           "name": "listingsCategory",
-          "type": "varchar(255)",
+          "type": "listingsCategory",
+          "typeSchema": "public",
           "primaryKey": false,
           "notNull": false
         },
@@ -147,8 +148,8 @@
           "primaryKey": false,
           "notNull": false
         },
-        "imagePath": {
-          "name": "imagePath",
+        "imageName": {
+          "name": "imageName",
           "type": "varchar(200)",
           "primaryKey": false,
           "notNull": false
@@ -165,30 +166,30 @@
           "primaryKey": false,
           "notNull": false
         },
-        "visits": {
-          "name": "visits",
-          "type": "integer",
+        "latitude": {
+          "name": "latitude",
+          "type": "double precision",
           "primaryKey": false,
           "notNull": false
         },
-        "lastVisit": {
-          "name": "lastVisit",
-          "type": "timestamp",
+        "longitude": {
+          "name": "longitude",
+          "type": "double precision",
           "primaryKey": false,
           "notNull": false
         }
       },
       "indexes": {},
       "foreignKeys": {
-        "businesses_userId_users_id_fk": {
-          "name": "businesses_userId_users_id_fk",
+        "businesses_email_users_email_fk": {
+          "name": "businesses_email_users_email_fk",
           "tableFrom": "businesses",
           "tableTo": "users",
           "columnsFrom": [
-            "userId"
+            "email"
           ],
           "columnsTo": [
-            "id"
+            "email"
           ],
           "onDelete": "no action",
           "onUpdate": "no action"
@@ -197,7 +198,7 @@
       "compositePrimaryKeys": {},
       "uniqueConstraints": {}
     },
-    "commercials": {
+    "public.commercials": {
       "name": "commercials",
       "schema": "",
       "columns": {
@@ -208,21 +209,21 @@
           "notNull": true,
           "default": "gen_random_uuid()"
         },
-        "serial_id": {
-          "name": "serial_id",
+        "serialId": {
+          "name": "serialId",
           "type": "serial",
           "primaryKey": false,
           "notNull": true
         },
-        "userId": {
-          "name": "userId",
-          "type": "uuid",
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
           "primaryKey": false,
           "notNull": false
         },
         "type": {
           "name": "type",
-          "type": "integer",
+          "type": "varchar(255)",
           "primaryKey": false,
           "notNull": false
         },
@@ -264,13 +265,8 @@
         },
         "listingsCategory": {
           "name": "listingsCategory",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "hideImage": {
-          "name": "hideImage",
-          "type": "boolean",
+          "type": "listingsCategory",
+          "typeSchema": "public",
           "primaryKey": false,
           "notNull": false
         },
@@ -280,36 +276,6 @@
           "primaryKey": false,
           "notNull": false
         },
-        "zipCode": {
-          "name": "zipCode",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "county": {
-          "name": "county",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "email": {
-          "name": "email",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "website": {
-          "name": "website",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "phoneNumber": {
-          "name": "phoneNumber",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
         "imageOrder": {
           "name": "imageOrder",
           "type": "varchar(200)[]",
@@ -334,30 +300,30 @@
           "primaryKey": false,
           "notNull": false
         },
-        "visits": {
-          "name": "visits",
-          "type": "integer",
+        "latitude": {
+          "name": "latitude",
+          "type": "double precision",
           "primaryKey": false,
           "notNull": false
         },
-        "lastVisit": {
-          "name": "lastVisit",
-          "type": "timestamp",
+        "longitude": {
+          "name": "longitude",
+          "type": "double precision",
           "primaryKey": false,
           "notNull": false
         }
       },
       "indexes": {},
       "foreignKeys": {
-        "commercials_userId_users_id_fk": {
-          "name": "commercials_userId_users_id_fk",
+        "commercials_email_users_email_fk": {
+          "name": "commercials_email_users_email_fk",
           "tableFrom": "commercials",
           "tableTo": "users",
           "columnsFrom": [
-            "userId"
+            "email"
           ],
           "columnsTo": [
-            "id"
+            "email"
           ],
           "onDelete": "no action",
           "onUpdate": "no action"
@@ -366,7 +332,7 @@
       "compositePrimaryKeys": {},
       "uniqueConstraints": {}
     },
-    "users": {
+    "public.users": {
       "name": "users",
       "schema": "",
       "columns": {
@@ -425,12 +391,18 @@
           "primaryKey": false,
           "notNull": false
         },
-        "companyLocation": {
-          "name": "companyLocation",
+        "city": {
+          "name": "city",
           "type": "varchar(255)",
           "primaryKey": false,
           "notNull": false
         },
+        "state": {
+          "name": "state",
+          "type": "char(2)",
+          "primaryKey": false,
+          "notNull": false
+        },
         "offeredServices": {
           "name": "offeredServices",
           "type": "text",
@@ -464,6 +436,21 @@
         "gender": {
           "name": "gender",
           "type": "gender",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "customerType": {
+          "name": "customerType",
+          "type": "customerType",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "customerSubType": {
+          "name": "customerSubType",
+          "type": "customerSubType",
+          "typeSchema": "public",
           "primaryKey": false,
           "notNull": false
         },
@@ -478,24 +465,74 @@
           "type": "timestamp",
           "primaryKey": false,
           "notNull": false
+        },
+        "latitude": {
+          "name": "latitude",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "longitude": {
+          "name": "longitude",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
         }
       },
       "indexes": {},
       "foreignKeys": {},
       "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    }
-  },
-  "enums": {
-    "gender": {
-      "name": "gender",
-      "values": {
-        "male": "male",
-        "female": "female"
+      "uniqueConstraints": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        }
       }
     }
   },
+  "enums": {
+    "public.customerSubType": {
+      "name": "customerSubType",
+      "schema": "public",
+      "values": [
+        "broker",
+        "cpa",
+        "attorney",
+        "titleCompany",
+        "surveyor",
+        "appraiser"
+      ]
+    },
+    "public.customerType": {
+      "name": "customerType",
+      "schema": "public",
+      "values": [
+        "buyer",
+        "professional"
+      ]
+    },
+    "public.gender": {
+      "name": "gender",
+      "schema": "public",
+      "values": [
+        "male",
+        "female"
+      ]
+    },
+    "public.listingsCategory": {
+      "name": "listingsCategory",
+      "schema": "public",
+      "values": [
+        "commercialProperty",
+        "business"
+      ]
+    }
+  },
   "schemas": {},
+  "sequences": {},
   "_meta": {
     "columns": {},
     "schemas": {},

bizmatch-server/src/drizzle/migrations/meta/0001_snapshot.json

@@ -1,518 +0,0 @@
-{
-  "id": "0bc02618-4414-4e90-8c44-808737611da7",
-  "prevId": "fc58c59b-ac5c-406e-8fdb-b05de40aed17",
-  "version": "5",
-  "dialect": "pg",
-  "tables": {
-    "businesses": {
-      "name": "businesses",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "userId": {
-          "name": "userId",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "type": {
-          "name": "type",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "title": {
-          "name": "title",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "description": {
-          "name": "description",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "city": {
-          "name": "city",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "state": {
-          "name": "state",
-          "type": "char(2)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "price": {
-          "name": "price",
-          "type": "double precision",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "favoritesForUser": {
-          "name": "favoritesForUser",
-          "type": "varchar(30)[]",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "draft": {
-          "name": "draft",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "listingsCategory": {
-          "name": "listingsCategory",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "realEstateIncluded": {
-          "name": "realEstateIncluded",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "leasedLocation": {
-          "name": "leasedLocation",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "franchiseResale": {
-          "name": "franchiseResale",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "salesRevenue": {
-          "name": "salesRevenue",
-          "type": "double precision",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "cashFlow": {
-          "name": "cashFlow",
-          "type": "double precision",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "supportAndTraining": {
-          "name": "supportAndTraining",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "employees": {
-          "name": "employees",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "established": {
-          "name": "established",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "internalListingNumber": {
-          "name": "internalListingNumber",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "reasonForSale": {
-          "name": "reasonForSale",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "brokerLicencing": {
-          "name": "brokerLicencing",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "internals": {
-          "name": "internals",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "imagePath": {
-          "name": "imagePath",
-          "type": "varchar(200)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created": {
-          "name": "created",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "updated": {
-          "name": "updated",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "visits": {
-          "name": "visits",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "lastVisit": {
-          "name": "lastVisit",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "businesses_userId_users_id_fk": {
-          "name": "businesses_userId_users_id_fk",
-          "tableFrom": "businesses",
-          "tableTo": "users",
-          "columnsFrom": [
-            "userId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
-    "commercials": {
-      "name": "commercials",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "serial_id": {
-          "name": "serial_id",
-          "type": "serial",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "userId": {
-          "name": "userId",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "type": {
-          "name": "type",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "title": {
-          "name": "title",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "description": {
-          "name": "description",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "city": {
-          "name": "city",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "state": {
-          "name": "state",
-          "type": "char(2)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "price": {
-          "name": "price",
-          "type": "double precision",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "favoritesForUser": {
-          "name": "favoritesForUser",
-          "type": "varchar(30)[]",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "listingsCategory": {
-          "name": "listingsCategory",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "hideImage": {
-          "name": "hideImage",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "draft": {
-          "name": "draft",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "zipCode": {
-          "name": "zipCode",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "county": {
-          "name": "county",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "email": {
-          "name": "email",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "website": {
-          "name": "website",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "phoneNumber": {
-          "name": "phoneNumber",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "imageOrder": {
-          "name": "imageOrder",
-          "type": "varchar(200)[]",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "imagePath": {
-          "name": "imagePath",
-          "type": "varchar(200)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created": {
-          "name": "created",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "updated": {
-          "name": "updated",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "visits": {
-          "name": "visits",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "lastVisit": {
-          "name": "lastVisit",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "commercials_userId_users_id_fk": {
-          "name": "commercials_userId_users_id_fk",
-          "tableFrom": "commercials",
-          "tableTo": "users",
-          "columnsFrom": [
-            "userId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
-    "users": {
-      "name": "users",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "firstname": {
-          "name": "firstname",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "lastname": {
-          "name": "lastname",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "email": {
-          "name": "email",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "phoneNumber": {
-          "name": "phoneNumber",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "description": {
-          "name": "description",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "companyName": {
-          "name": "companyName",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "companyOverview": {
-          "name": "companyOverview",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "companyWebsite": {
-          "name": "companyWebsite",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "companyLocation": {
-          "name": "companyLocation",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "offeredServices": {
-          "name": "offeredServices",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "areasServed": {
-          "name": "areasServed",
-          "type": "jsonb",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "hasProfile": {
-          "name": "hasProfile",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "hasCompanyLogo": {
-          "name": "hasCompanyLogo",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "licensedIn": {
-          "name": "licensedIn",
-          "type": "jsonb",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "gender": {
-          "name": "gender",
-          "type": "gender",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "customerType": {
-          "name": "customerType",
-          "type": "customerType",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created": {
-          "name": "created",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "updated": {
-          "name": "updated",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    }
-  },
-  "enums": {
-    "customerType": {
-      "name": "customerType",
-      "values": {
-        "buyer": "buyer",
-        "broker": "broker",
-        "professional": "professional"
-      }
-    },
-    "gender": {
-      "name": "gender",
-      "values": {
-        "male": "male",
-        "female": "female"
-      }
-    }
-  },
-  "schemas": {},
-  "_meta": {
-    "columns": {},
-    "schemas": {},
-    "tables": {}
-  }
-}

bizmatch-server/src/drizzle/migrations/meta/_journal.json

@@ -1,19 +1,12 @@
 {
-  "version": "5",
-  "dialect": "pg",
+  "version": "7",
+  "dialect": "postgresql",
   "entries": [
     {
       "idx": 0,
-      "version": "5",
-      "when": 1716495198537,
-      "tag": "0000_burly_bruce_banner",
-      "breakpoints": true
-    },
-    {
-      "idx": 1,
-      "version": "5",
-      "when": 1717085220861,
-      "tag": "0001_wet_mephistopheles",
+      "version": "7",
+      "when": 1723045357281,
+      "tag": "0000_lean_marvex",
       "breakpoints": true
     }
   ]

bizmatch-server/src/drizzle/schema.ts

@@ -1,21 +1,23 @@
 import { boolean, char, doublePrecision, integer, jsonb, pgEnum, pgTable, serial, text, timestamp, uuid, varchar } from 'drizzle-orm/pg-core';
-import { AreasServed, LicensedIn } from 'src/models/db.model';
-
+import { AreasServed, LicensedIn } from '../models/db.model';
 export const PG_CONNECTION = 'PG_CONNECTION';
 export const genderEnum = pgEnum('gender', ['male', 'female']);
-export const customerTypeEnum = pgEnum('customerType', ['buyer', 'broker', 'professional']);
+export const customerTypeEnum = pgEnum('customerType', ['buyer', 'professional']);
+export const customerSubTypeEnum = pgEnum('customerSubType', ['broker', 'cpa', 'attorney', 'titleCompany', 'surveyor', 'appraiser']);
+export const listingsCategoryEnum = pgEnum('listingsCategory', ['commercialProperty', 'business']);
 
 export const users = pgTable('users', {
-  id: uuid('id').primaryKey().defaultRandom(),
+  id: uuid('id').primaryKey().defaultRandom().notNull(),
   firstname: varchar('firstname', { length: 255 }).notNull(),
   lastname: varchar('lastname', { length: 255 }).notNull(),
-  email: varchar('email', { length: 255 }).notNull(),
+  email: varchar('email', { length: 255 }).notNull().unique(),
   phoneNumber: varchar('phoneNumber', { length: 255 }),
   description: text('description'),
   companyName: varchar('companyName', { length: 255 }),
   companyOverview: text('companyOverview'),
   companyWebsite: varchar('companyWebsite', { length: 255 }),
-  companyLocation: varchar('companyLocation', { length: 255 }),
+  city: varchar('city', { length: 255 }),
+  state: char('state', { length: 2 }),
   offeredServices: text('offeredServices'),
   areasServed: jsonb('areasServed').$type<AreasServed[]>(),
   hasProfile: boolean('hasProfile'),
@@ -23,22 +25,28 @@ export const users = pgTable('users', {
   licensedIn: jsonb('licensedIn').$type<LicensedIn[]>(),
   gender: genderEnum('gender'),
   customerType: customerTypeEnum('customerType'),
+  customerSubType: customerSubTypeEnum('customerSubType'),
   created: timestamp('created'),
   updated: timestamp('updated'),
+  latitude: doublePrecision('latitude'),
+  longitude: doublePrecision('longitude'),
+  // embedding: vector('embedding', { dimensions: 1536 }),
 });
 
 export const businesses = pgTable('businesses', {
-  id: uuid('id').primaryKey().defaultRandom(),
-  userId: uuid('userId').references(() => users.id),
-  type: integer('type'),
+  id: uuid('id').primaryKey().defaultRandom().notNull(),
+  email: varchar('email', { length: 255 }).references(() => users.email),
+  type: varchar('type', { length: 255 }),
   title: varchar('title', { length: 255 }),
   description: text('description'),
   city: varchar('city', { length: 255 }),
   state: char('state', { length: 2 }),
+  // zipCode: integer('zipCode'),
+  // county: varchar('county', { length: 255 }),
   price: doublePrecision('price'),
   favoritesForUser: varchar('favoritesForUser', { length: 30 }).array(),
   draft: boolean('draft'),
-  listingsCategory: varchar('listingsCategory', { length: 255 }),
+  listingsCategory: listingsCategoryEnum('listingsCategory'), //varchar('listingsCategory', { length: 255 }),
   realEstateIncluded: boolean('realEstateIncluded'),
   leasedLocation: boolean('leasedLocation'),
   franchiseResale: boolean('franchiseResale'),
@@ -51,36 +59,34 @@ export const businesses = pgTable('businesses', {
   reasonForSale: varchar('reasonForSale', { length: 255 }),
   brokerLicencing: varchar('brokerLicencing', { length: 255 }),
   internals: text('internals'),
-  imageName: varchar('imagePath', { length: 200 }),
+  imageName: varchar('imageName', { length: 200 }),
   created: timestamp('created'),
   updated: timestamp('updated'),
-  visits: integer('visits'),
-  lastVisit: timestamp('lastVisit'),
+  latitude: doublePrecision('latitude'),
+  longitude: doublePrecision('longitude'),
+  // embedding: vector('embedding', { dimensions: 1536 }),
 });
 
 export const commercials = pgTable('commercials', {
-  id: uuid('id').primaryKey().defaultRandom(),
-  serialId: serial('serial_id'),
-  userId: uuid('userId').references(() => users.id),
-  type: integer('type'),
+  id: uuid('id').primaryKey().defaultRandom().notNull(),
+  serialId: serial('serialId'),
+  email: varchar('email', { length: 255 }).references(() => users.email),
+  type: varchar('type', { length: 255 }),
   title: varchar('title', { length: 255 }),
   description: text('description'),
   city: varchar('city', { length: 255 }),
   state: char('state', { length: 2 }),
   price: doublePrecision('price'),
   favoritesForUser: varchar('favoritesForUser', { length: 30 }).array(),
-  listingsCategory: varchar('listingsCategory', { length: 255 }),
-  hideImage: boolean('hideImage'),
+  listingsCategory: listingsCategoryEnum('listingsCategory'), //listingsCategory: varchar('listingsCategory', { length: 255 }),
   draft: boolean('draft'),
-  zipCode: integer('zipCode'),
-  county: varchar('county', { length: 255 }),
-  email: varchar('email', { length: 255 }),
-  website: varchar('website', { length: 255 }),
-  phoneNumber: varchar('phoneNumber', { length: 255 }),
+  // zipCode: integer('zipCode'),
+  // county: varchar('county', { length: 255 }),
   imageOrder: varchar('imageOrder', { length: 200 }).array(),
   imagePath: varchar('imagePath', { length: 200 }),
   created: timestamp('created'),
   updated: timestamp('updated'),
-  visits: integer('visits'),
-  lastVisit: timestamp('lastVisit'),
+  latitude: doublePrecision('latitude'),
+  longitude: doublePrecision('longitude'),
+  // embedding: vector('embedding', { dimensions: 1536 }),
 });

bizmatch-server/src/drizzle/test.js

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const path = require('path');
+
+// Angenommen, du hast eine Datei `databaseModels.js` mit deinen pgTable-Definitionen
+const { users } = require('./schema.js');
+
+function generateTypeScriptInterface(tableDefinition, tableName) {
+  let interfaceString = `export interface ${tableName} {\n`;
+  for (const [column, definition] of Object.entries(tableDefinition)) {
+    // Du musst die Definition parsen, um den korrekten Typ zu extrahieren
+    const tsType = definition.type === 'uuid' ? 'string' :
+                   definition.type.startsWith('varchar') || definition.type === 'text' ? 'string' :
+                   definition.type === 'boolean' ? 'boolean' : 'any';
+    interfaceString += `  ${column}${definition.optional ? '?' : ''}: ${tsType};\n`;
+  }
+  interfaceString += '}\n';
+  return interfaceString;
+}
+
+const userModelInterface = generateTypeScriptInterface(users.columns, 'User');
+fs.writeFileSync(path.join(__dirname, 'UserInterface.ts'), userModelInterface);

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

@@ -1,18 +1,27 @@
-import { Controller, Get, Param } from '@nestjs/common';
+import { Body, Controller, Get, Param, Post } from '@nestjs/common';
+import { CountyRequest } from 'src/models/server.model.js';
 import { GeoService } from './geo.service.js';
 
 @Controller('geo')
 export class GeoController {
-    constructor(private geoService:GeoService){}
-    
-    @Get(':prefix')
-    findByPrefix(@Param('prefix') prefix:string): any {
-      return this.geoService.findCitiesStartingWith(prefix);
-    }
+  constructor(private geoService: GeoService) {}
 
-    @Get(':prefix/:state')
-    findByPrefixAndState(@Param('prefix') prefix:string,@Param('state') state:string): any {
-      return this.geoService.findCitiesStartingWith(prefix,state);
-    }
+  @Get(':prefix')
+  findByPrefix(@Param('prefix') prefix: string): any {
+    return this.geoService.findCitiesStartingWith(prefix);
+  }
+  @Get('citiesandstates/:prefix')
+  findByCitiesAndStatesByPrefix(@Param('prefix') prefix: string): any {
+    return this.geoService.findCitiesAndStatesStartingWith(prefix);
+  }
 
+  @Get(':prefix/:state')
+  findByPrefixAndState(@Param('prefix') prefix: string, @Param('state') state: string): any {
+    return this.geoService.findCitiesStartingWith(prefix, state);
+  }
+
+  @Post('counties')
+  findByPrefixAndStates(@Body() countyRequest: CountyRequest): any {
+    return this.geoService.findCountiesStartingWith(countyRequest.prefix, countyRequest.states);
+  }
 }

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

@@ -1,40 +1,106 @@
 import { Injectable } from '@nestjs/common';
 import { readFileSync } from 'fs';
 import path, { join } from 'path';
-import { City, Geo, State } from 'src/models/server.model.js';
+import { CountyResult, GeoResult } from 'src/models/main.model.js';
 import { fileURLToPath } from 'url';
+import { City, CountyData, Geo, State } from '../models/server.model.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 @Injectable()
 export class GeoService {
-    geo:Geo;
-    constructor() {
-        this.loadGeo();
-      }
-      private loadGeo(): void {
-        const filePath = join(__dirname,'../..', 'assets', 'geo.json');
-        const rawData = readFileSync(filePath, 'utf8');
-        this.geo = JSON.parse(rawData);
-      }
-      
-      findCitiesStartingWith( prefix: string, state?:string): { city: string; state: string; state_code: string }[] {
-        const result: { city: string; state: string; state_code: string }[] = [];
-    
-        this.geo.states.forEach((state: State) => {
-            state.cities.forEach((city: City) => {
-                if (city.name.toLowerCase().startsWith(prefix.toLowerCase())) {
-                    result.push({
-                        city: city.name,
-                        state: state.name,
-                        state_code: state.state_code
-                    });
-                }
-            });
-        });
-        
-        return state ? result.filter(e=>e.state_code.toLowerCase()===state.toLowerCase()) :result;
-    }
-}
+  geo: Geo;
+  counties: CountyData[];
+  constructor() {
+    this.loadGeo();
+  }
+  private loadGeo(): void {
+    const filePath = join(__dirname, '../..', 'assets', 'geo.json');
+    const rawData = readFileSync(filePath, 'utf8');
+    this.geo = JSON.parse(rawData);
+    const countiesFilePath = join(__dirname, '../..', 'assets', 'counties.json');
+    const rawCountiesData = readFileSync(countiesFilePath, 'utf8');
+    this.counties = JSON.parse(rawCountiesData);
+  }
+  findCountiesStartingWith(prefix: string, states?: string[]) {
+    let results: CountyResult[] = [];
+    let idCounter = 1;
 
+    this.counties.forEach(stateData => {
+      if (!states || states.includes(stateData.state)) {
+        stateData.counties.forEach(county => {
+          if (county.startsWith(prefix.toUpperCase())) {
+            results.push({
+              id: idCounter++,
+              name: county,
+              state: stateData.state_full,
+              state_code: stateData.state,
+            });
+          }
+        });
+      }
+    });
+
+    return results;
+  }
+  findCitiesStartingWith(prefix: string, state?: string): GeoResult[] {
+    const result: GeoResult[] = [];
+
+    this.geo.states.forEach((state: State) => {
+      state.cities.forEach((city: City) => {
+        if (city.name.toLowerCase().startsWith(prefix.toLowerCase())) {
+          result.push({
+            id: city.id,
+            city: city.name,
+            state: state.state_code,
+            //state_code: state.state_code,
+            latitude: city.latitude,
+            longitude: city.longitude,
+          });
+        }
+      });
+    });
+    return state ? result.filter(e => e.state.toLowerCase() === state.toLowerCase()) : result;
+  }
+  findCitiesAndStatesStartingWith(prefix: string, state?: string): Array<{ id: string; name: string; type: 'city' | 'state'; state: string }> {
+    const results: Array<{ id: string; name: string; type: 'city' | 'state'; state: string }> = [];
+
+    const lowercasePrefix = prefix.toLowerCase();
+
+    //for (const country of this.geo) {
+    // Suche nach passenden Staaten
+    for (const state of this.geo.states) {
+      if (state.name.toLowerCase().startsWith(lowercasePrefix)) {
+        results.push({
+          id: state.id.toString(),
+          name: state.name,
+          type: 'state',
+          state: state.state_code,
+        });
+      }
+
+      // Suche nach passenden Städten
+      for (const city of state.cities) {
+        if (city.name.toLowerCase().startsWith(lowercasePrefix)) {
+          results.push({
+            id: city.id.toString(),
+            name: city.name,
+            type: 'city',
+            state: state.state_code,
+          });
+        }
+      }
+      //}
+    }
+
+    return results.sort((a, b) => {
+      if (a.type === 'state' && b.type === 'city') return -1;
+      if (a.type === 'city' && b.type === 'state') return 1;
+      return a.name.localeCompare(b.name);
+    });
+  }
+  getCityWithCoords(state: string, city: string): City {
+    return this.geo.states.find(s => s.state_code === state).cities.find(c => c.name === city);
+  }
+}

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

@@ -3,14 +3,14 @@ import { FileInterceptor } from '@nestjs/platform-express';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import { Logger } from 'winston';
 import { FileService } from '../file/file.service.js';
-import { ListingsService } from '../listings/listings.service.js';
+import { CommercialPropertyService } from '../listings/commercial-property.service.js';
 import { SelectOptionsService } from '../select-options/select-options.service.js';
 
 @Controller('image')
 export class ImageController {
   constructor(
     private fileService: FileService,
-    private listingService: ListingsService,
+    private listingService: CommercialPropertyService,
     @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
     private selectOptions: SelectOptionsService,
   ) {}

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

@@ -1,14 +1,13 @@
 import { Module } from '@nestjs/common';
+import { FileService } from '../file/file.service.js';
+import { ListingsModule } from '../listings/listings.module.js';
+import { SelectOptionsService } from '../select-options/select-options.service.js';
 import { ImageController } from './image.controller.js';
 import { ImageService } from './image.service.js';
-import { FileService } from '../file/file.service.js';
-import { SelectOptionsService } from '../select-options/select-options.service.js';
-import { ListingsService } from '../listings/listings.service.js';
-import { ListingsModule } from '../listings/listings.module.js';
 
 @Module({
   imports: [ListingsModule],
   controllers: [ImageController],
-  providers: [ImageService,FileService,SelectOptionsService]
+  providers: [ImageService, FileService, SelectOptionsService],
 })
 export class ImageModule {}

bizmatch-server/src/jwt.strategy.ts

@@ -38,7 +38,7 @@ export class JwtStrategy extends PassportStrategy(Strategy) {
       this.logger.error('Missing required claims');
       throw new UnauthorizedException();
     }
-    const result = { userId: payload.sub, username: payload.preferred_username, roles: payload.realm_access?.roles };
+    const result = { userId: payload.sub, firstname: payload.given_name, lastname: payload.family_name, username: payload.preferred_username, roles: payload.realm_access?.roles };
     this.logger.info(`JWT User: ${JSON.stringify(result)}`); // Debugging: JWT Payload anzeigen
     return result;
   }

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

@@ -1,21 +1,18 @@
-import { Body, Controller, Delete, Get, Inject, Param, Post, Put } from '@nestjs/common';
-import { FileService } from '../file/file.service.js';
-import { convertStringToNullUndefined } from '../utils.js';
-import { ListingsService } from './listings.service.js';
+import { Body, Controller, Inject, Post } from '@nestjs/common';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import { UserListingCriteria } from 'src/models/main.model.js';
 import { Logger } from 'winston';
 import { UserService } from '../user/user.service.js';
 
 @Controller('listings/professionals_brokers')
 export class BrokerListingsController {
- 
-  constructor(private readonly userService:UserService,@Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger) {
-  }
+  constructor(
+    private readonly userService: UserService,
+    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
+  ) {}
 
   @Post('search')
-  find(@Body() criteria: any): any {
-    return this.userService.findUser(criteria);
+  find(@Body() criteria: UserListingCriteria): any {
+    return this.userService.searchUserListings(criteria);
   }
-
 }
-

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

@@ -0,0 +1,226 @@
+import { BadRequestException, Inject, Injectable } from '@nestjs/common';
+import { and, count, eq, gte, ilike, inArray, lte, ne, or, SQL, sql } from 'drizzle-orm';
+import { NodePgDatabase } from 'drizzle-orm/node-postgres';
+import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import { Logger } from 'winston';
+import { ZodError } from 'zod';
+import * as schema from '../drizzle/schema.js';
+import { businesses, PG_CONNECTION } from '../drizzle/schema.js';
+import { FileService } from '../file/file.service.js';
+import { GeoService } from '../geo/geo.service.js';
+import { BusinessListing, BusinessListingSchema } from '../models/db.model.js';
+import { BusinessListingCriteria, emailToDirName, JwtUser } from '../models/main.model.js';
+import { convertBusinessToDrizzleBusiness, convertDrizzleBusinessToBusiness, getDistanceQuery } from '../utils.js';
+
+@Injectable()
+export class BusinessListingService {
+  constructor(
+    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
+    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
+    private fileService?: FileService,
+    private geoService?: GeoService,
+  ) {}
+
+  private getWhereConditions(criteria: BusinessListingCriteria): SQL[] {
+    const whereConditions: SQL[] = [];
+
+    if (criteria.city && criteria.searchType === 'exact') {
+      whereConditions.push(ilike(businesses.city, `%${criteria.city}%`));
+    }
+    if (criteria.city && criteria.radius && criteria.searchType === 'radius' && criteria.radius) {
+      const cityGeo = this.geoService.getCityWithCoords(criteria.state, criteria.city);
+      whereConditions.push(sql`${getDistanceQuery(businesses, cityGeo.latitude, cityGeo.longitude)} <= ${criteria.radius}`);
+    }
+    if (criteria.types && criteria.types.length > 0) {
+      whereConditions.push(inArray(businesses.type, criteria.types));
+    }
+
+    if (criteria.state) {
+      whereConditions.push(eq(businesses.state, criteria.state));
+    }
+
+    if (criteria.minPrice) {
+      whereConditions.push(gte(businesses.price, criteria.minPrice));
+    }
+
+    if (criteria.maxPrice) {
+      whereConditions.push(lte(businesses.price, criteria.maxPrice));
+    }
+
+    if (criteria.minRevenue) {
+      whereConditions.push(gte(businesses.salesRevenue, criteria.minRevenue));
+    }
+
+    if (criteria.maxRevenue) {
+      whereConditions.push(lte(businesses.salesRevenue, criteria.maxRevenue));
+    }
+
+    if (criteria.minCashFlow) {
+      whereConditions.push(gte(businesses.cashFlow, criteria.minCashFlow));
+    }
+
+    if (criteria.maxCashFlow) {
+      whereConditions.push(lte(businesses.cashFlow, criteria.maxCashFlow));
+    }
+
+    if (criteria.minNumberEmployees) {
+      whereConditions.push(gte(businesses.employees, criteria.minNumberEmployees));
+    }
+
+    if (criteria.maxNumberEmployees) {
+      whereConditions.push(lte(businesses.employees, criteria.maxNumberEmployees));
+    }
+
+    if (criteria.establishedSince) {
+      whereConditions.push(gte(businesses.established, criteria.establishedSince));
+    }
+
+    if (criteria.establishedUntil) {
+      whereConditions.push(lte(businesses.established, criteria.establishedUntil));
+    }
+
+    if (criteria.realEstateChecked) {
+      whereConditions.push(eq(businesses.realEstateIncluded, criteria.realEstateChecked));
+    }
+
+    if (criteria.leasedLocation) {
+      whereConditions.push(eq(businesses.leasedLocation, criteria.leasedLocation));
+    }
+
+    if (criteria.franchiseResale) {
+      whereConditions.push(eq(businesses.franchiseResale, criteria.franchiseResale));
+    }
+
+    if (criteria.title) {
+      whereConditions.push(or(ilike(businesses.title, `%${criteria.title}%`), ilike(businesses.description, `%${criteria.title}%`)));
+    }
+
+    if (criteria.brokerName) {
+      whereConditions.push(or(ilike(schema.users.firstname, `%${criteria.brokerName}%`), ilike(schema.users.lastname, `%${criteria.brokerName}%`)));
+    }
+    whereConditions.push(and(eq(schema.users.customerType, 'professional'), eq(schema.users.customerSubType, 'broker')));
+    return whereConditions;
+  }
+  async searchBusinessListings(criteria: BusinessListingCriteria, user: JwtUser) {
+    const start = criteria.start ? criteria.start : 0;
+    const length = criteria.length ? criteria.length : 12;
+    const query = this.conn
+      .select({
+        business: businesses,
+        brokerFirstName: schema.users.firstname,
+        brokerLastName: schema.users.lastname,
+      })
+      .from(businesses)
+      .leftJoin(schema.users, eq(businesses.email, schema.users.email));
+
+    const whereConditions = this.getWhereConditions(criteria);
+
+    if (whereConditions.length > 0) {
+      const whereClause = and(...whereConditions);
+      query.where(whereClause);
+    }
+
+    // Paginierung
+    query.limit(length).offset(start);
+
+    const data = await query;
+    const totalCount = await this.getBusinessListingsCount(criteria);
+    const results = data.map(r => r.business).map(r => convertDrizzleBusinessToBusiness(r));
+    return {
+      results,
+      totalCount,
+    };
+  }
+
+  async getBusinessListingsCount(criteria: BusinessListingCriteria): Promise<number> {
+    const countQuery = this.conn.select({ value: count() }).from(businesses).leftJoin(schema.users, eq(businesses.email, schema.users.email));
+
+    const whereConditions = this.getWhereConditions(criteria);
+
+    if (whereConditions.length > 0) {
+      const whereClause = and(...whereConditions);
+      countQuery.where(whereClause);
+    }
+
+    const [{ value: totalCount }] = await countQuery;
+    return totalCount;
+  }
+
+  async findBusinessesById(id: string, user: JwtUser): Promise<BusinessListing> {
+    let result = await this.conn
+      .select()
+      .from(businesses)
+      .where(and(sql`${businesses.id} = ${id}`));
+    result = result.filter(r => !r.draft || r.imageName === emailToDirName(user?.username) || user?.roles.includes('ADMIN'));
+    return convertDrizzleBusinessToBusiness(result[0]) as BusinessListing;
+  }
+
+  async findBusinessesByEmail(email: string, user: JwtUser): Promise<BusinessListing[]> {
+    const conditions = [];
+    conditions.push(eq(businesses.imageName, emailToDirName(email)));
+    if (email !== user?.username && (!user?.roles?.includes('ADMIN') ?? false)) {
+      conditions.push(ne(businesses.draft, true));
+    }
+    const listings = (await this.conn
+      .select()
+      .from(businesses)
+      .where(and(...conditions))) as BusinessListing[];
+
+    return listings.map(l => convertDrizzleBusinessToBusiness(l));
+  }
+
+  // #### CREATE ########################################
+  async createListing(data: BusinessListing): Promise<BusinessListing> {
+    try {
+      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
+      data.updated = new Date();
+      const validatedBusinessListing = BusinessListingSchema.parse(data);
+      const convertedBusinessListing = convertBusinessToDrizzleBusiness(data);
+      const [createdListing] = await this.conn.insert(businesses).values(convertedBusinessListing).returning();
+      return convertDrizzleBusinessToBusiness(createdListing);
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const formattedErrors = error.errors.map(err => ({
+          field: err.path.join('.'),
+          message: err.message,
+        }));
+        throw new BadRequestException(formattedErrors);
+      }
+      throw error;
+    }
+  }
+  // #### UPDATE Business ########################################
+  async updateBusinessListing(id: string, data: BusinessListing): Promise<BusinessListing> {
+    try {
+      data.updated = new Date();
+      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
+      const validatedBusinessListing = BusinessListingSchema.parse(data);
+      const convertedBusinessListing = convertBusinessToDrizzleBusiness(data);
+      const [updateListing] = await this.conn.update(businesses).set(convertedBusinessListing).where(eq(businesses.id, id)).returning();
+      return convertDrizzleBusinessToBusiness(updateListing);
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const formattedErrors = error.errors.map(err => ({
+          field: err.path.join('.'),
+          message: err.message,
+        }));
+        throw new BadRequestException(formattedErrors);
+      }
+      throw error;
+    }
+  }
+  // #### DELETE  ########################################
+  async deleteListing(id: string): Promise<void> {
+    await this.conn.delete(businesses).where(eq(businesses.id, id));
+  }
+  // ##############################################################
+  // States
+  // ##############################################################
+  async getStates(): Promise<any[]> {
+    return await this.conn
+      .select({ state: businesses.state, count: sql<number>`count(${businesses.id})`.mapWith(Number) })
+      .from(businesses)
+      .groupBy(sql`${businesses.state}`)
+      .orderBy(sql`count desc`);
+  }
+}

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

@@ -1,15 +1,15 @@
 import { Body, Controller, Delete, Get, Inject, Param, Post, Put, Request, UseGuards } from '@nestjs/common';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import { BusinessListing } from 'src/models/db.model.js';
 import { Logger } from 'winston';
-import { businesses } from '../drizzle/schema.js';
 import { OptionalJwtAuthGuard } from '../jwt-auth/optional-jwt-auth.guard.js';
-import { JwtUser, ListingCriteria } from '../models/main.model.js';
-import { ListingsService } from './listings.service.js';
+import { BusinessListingCriteria, JwtUser } from '../models/main.model.js';
+import { BusinessListingService } from './business-listing.service.js';
 
 @Controller('listings/business')
 export class BusinessListingsController {
   constructor(
-    private readonly listingsService: ListingsService,
+    private readonly listingsService: BusinessListingService,
     @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
   ) {}
 
@@ -21,20 +21,29 @@ export class BusinessListingsController {
 
   @UseGuards(OptionalJwtAuthGuard)
   @Get('user/:userid')
-  findByUserId(@Request() req, @Param('userid') userid: string): any {
+  findByUserId(@Request() req, @Param('userid') userid: string): Promise<BusinessListing[]> {
     return this.listingsService.findBusinessesByEmail(userid, req.user as JwtUser);
   }
 
   @UseGuards(OptionalJwtAuthGuard)
-  @Post('search')
-  find(@Request() req, @Body() criteria: ListingCriteria): any {
-    return this.listingsService.findBusinessListings(criteria, req.user as JwtUser);
+  @Post('find')
+  find(@Request() req, @Body() criteria: BusinessListingCriteria): any {
+    return this.listingsService.searchBusinessListings(criteria, req.user as JwtUser);
   }
+  @Post('findTotal')
+  findTotal(@Body() criteria: BusinessListingCriteria): Promise<number> {
+    return this.listingsService.getBusinessListingsCount(criteria);
+  }
+  // @UseGuards(OptionalJwtAuthGuard)
+  // @Post('search')
+  // search(@Request() req, @Body() criteria: BusinessListingCriteria): any {
+  //   return this.listingsService.searchBusinessListings(criteria.prompt);
+  // }
 
   @Post()
   create(@Body() listing: any) {
     this.logger.info(`Save Listing`);
-    return this.listingsService.createListing(listing, businesses);
+    return this.listingsService.createListing(listing);
   }
   @Put()
   update(@Body() listing: any) {
@@ -43,10 +52,10 @@ export class BusinessListingsController {
   }
   @Delete(':id')
   deleteById(@Param('id') id: string) {
-    this.listingsService.deleteListing(id, businesses);
+    this.listingsService.deleteListing(id);
   }
   @Get('states/all')
   getStates(): any {
-    return this.listingsService.getStates(businesses);
+    return this.listingsService.getStates();
   }
 }

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

@@ -1,17 +1,16 @@
 import { Body, Controller, Delete, Get, Inject, Param, Post, Put, Request, UseGuards } from '@nestjs/common';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
-import { CommercialPropertyListing } from 'src/models/db.model.js';
 import { Logger } from 'winston';
-import { commercials } from '../drizzle/schema.js';
 import { FileService } from '../file/file.service.js';
 import { OptionalJwtAuthGuard } from '../jwt-auth/optional-jwt-auth.guard.js';
-import { JwtUser, ListingCriteria } from '../models/main.model.js';
-import { ListingsService } from './listings.service.js';
+import { CommercialPropertyListing } from '../models/db.model';
+import { CommercialPropertyListingCriteria, JwtUser } from '../models/main.model.js';
+import { CommercialPropertyService } from './commercial-property.service.js';
 
 @Controller('listings/commercialProperty')
 export class CommercialPropertyListingsController {
   constructor(
-    private readonly listingsService: ListingsService,
+    private readonly listingsService: CommercialPropertyService,
     private fileService: FileService,
     @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
   ) {}
@@ -28,18 +27,22 @@ export class CommercialPropertyListingsController {
     return this.listingsService.findCommercialPropertiesByEmail(email, req.user as JwtUser);
   }
   @UseGuards(OptionalJwtAuthGuard)
-  @Post('search')
-  async find(@Request() req, @Body() criteria: ListingCriteria): Promise<any> {
-    return await this.listingsService.findCommercialPropertyListings(criteria, req.user as JwtUser);
+  @Post('find')
+  async find(@Request() req, @Body() criteria: CommercialPropertyListingCriteria): Promise<any> {
+    return await this.listingsService.searchCommercialProperties(criteria, req.user as JwtUser);
+  }
+  @Post('findTotal')
+  findTotal(@Body() criteria: CommercialPropertyListingCriteria): Promise<number> {
+    return this.listingsService.getCommercialPropertiesCount(criteria);
   }
   @Get('states/all')
   getStates(): any {
-    return this.listingsService.getStates(commercials);
+    return this.listingsService.getStates();
   }
   @Post()
   async create(@Body() listing: any) {
     this.logger.info(`Save Listing`);
-    return await this.listingsService.createListing(listing, commercials);
+    return await this.listingsService.createListing(listing);
   }
   @Put()
   async update(@Body() listing: any) {
@@ -48,7 +51,7 @@ export class CommercialPropertyListingsController {
   }
   @Delete(':id/:imagePath')
   deleteById(@Param('id') id: string, @Param('imagePath') imagePath: string) {
-    this.listingsService.deleteListing(id, commercials);
+    this.listingsService.deleteListing(id);
     this.fileService.deleteDirectoryIfExists(imagePath);
   }
 }

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

@@ -0,0 +1,199 @@
+import { BadRequestException, Inject, Injectable } from '@nestjs/common';
+import { and, count, eq, gte, ilike, inArray, lte, ne, or, SQL, sql } from 'drizzle-orm';
+import { NodePgDatabase } from 'drizzle-orm/node-postgres';
+import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import { Logger } from 'winston';
+import { ZodError } from 'zod';
+import * as schema from '../drizzle/schema.js';
+import { commercials, PG_CONNECTION } from '../drizzle/schema.js';
+import { FileService } from '../file/file.service.js';
+import { GeoService } from '../geo/geo.service.js';
+import { CommercialPropertyListing, CommercialPropertyListingSchema } from '../models/db.model.js';
+import { CommercialPropertyListingCriteria, emailToDirName, JwtUser } from '../models/main.model.js';
+import { convertCommercialToDrizzleCommercial, convertDrizzleCommercialToCommercial, getDistanceQuery } from '../utils.js';
+
+@Injectable()
+export class CommercialPropertyService {
+  constructor(
+    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
+    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
+    private fileService?: FileService,
+    private geoService?: GeoService,
+  ) {}
+  private getWhereConditions(criteria: CommercialPropertyListingCriteria): SQL[] {
+    const whereConditions: SQL[] = [];
+
+    if (criteria.city && criteria.searchType === 'exact') {
+      whereConditions.push(ilike(schema.commercials.city, `%${criteria.city}%`));
+    }
+    if (criteria.city && criteria.radius && criteria.searchType === 'radius' && criteria.radius) {
+      const cityGeo = this.geoService.getCityWithCoords(criteria.state, criteria.city);
+      whereConditions.push(sql`${getDistanceQuery(commercials, cityGeo.latitude, cityGeo.longitude)} <= ${criteria.radius}`);
+    }
+    if (criteria.types && criteria.types.length > 0) {
+      whereConditions.push(inArray(schema.commercials.type, criteria.types));
+    }
+
+    if (criteria.state) {
+      whereConditions.push(eq(schema.commercials.state, criteria.state));
+    }
+
+    if (criteria.minPrice) {
+      whereConditions.push(gte(schema.commercials.price, criteria.minPrice));
+    }
+
+    if (criteria.maxPrice) {
+      whereConditions.push(lte(schema.commercials.price, criteria.maxPrice));
+    }
+
+    if (criteria.title) {
+      whereConditions.push(or(ilike(schema.commercials.title, `%${criteria.title}%`), ilike(schema.commercials.description, `%${criteria.title}%`)));
+    }
+    whereConditions.push(and(eq(schema.users.customerType, 'professional')));
+    return whereConditions;
+  }
+  // #### Find by criteria ########################################
+  async searchCommercialProperties(criteria: CommercialPropertyListingCriteria, user: JwtUser): Promise<any> {
+    const start = criteria.start ? criteria.start : 0;
+    const length = criteria.length ? criteria.length : 12;
+    const query = this.conn.select({ commercial: commercials }).from(commercials).leftJoin(schema.users, eq(commercials.email, schema.users.email));
+    const whereConditions = this.getWhereConditions(criteria);
+
+    if (whereConditions.length > 0) {
+      const whereClause = and(...whereConditions);
+      query.where(whereClause);
+    }
+
+    // Paginierung
+    query.limit(length).offset(start);
+
+    const data = await query;
+    const results = data.map(r => r.commercial).map(r => convertDrizzleCommercialToCommercial(r));
+    const totalCount = await this.getCommercialPropertiesCount(criteria);
+
+    return {
+      results,
+      totalCount,
+    };
+  }
+  async getCommercialPropertiesCount(criteria: CommercialPropertyListingCriteria): Promise<number> {
+    const countQuery = this.conn.select({ value: count() }).from(schema.commercials).leftJoin(schema.users, eq(commercials.email, schema.users.email));
+    const whereConditions = this.getWhereConditions(criteria);
+
+    if (whereConditions.length > 0) {
+      const whereClause = and(...whereConditions);
+      countQuery.where(whereClause);
+    }
+
+    const [{ value: totalCount }] = await countQuery;
+    return totalCount;
+  }
+
+  // #### Find by ID ########################################
+  async findCommercialPropertiesById(id: string, user: JwtUser): Promise<CommercialPropertyListing> {
+    let result = await this.conn
+      .select()
+      .from(commercials)
+      .where(and(sql`${commercials.id} = ${id}`));
+    result = result.filter(r => !r.draft || r.imagePath === emailToDirName(user?.username) || user?.roles.includes('ADMIN'));
+    return convertDrizzleCommercialToCommercial(result[0]) as CommercialPropertyListing;
+  }
+
+  // #### Find by User EMail ########################################
+  async findCommercialPropertiesByEmail(email: string, user: JwtUser): Promise<CommercialPropertyListing[]> {
+    const conditions = [];
+    conditions.push(eq(commercials.imagePath, emailToDirName(email)));
+    if (email !== user?.username && (!user?.roles?.includes('ADMIN') ?? false)) {
+      conditions.push(ne(commercials.draft, true));
+    }
+    const listings = (await this.conn
+      .select()
+      .from(commercials)
+      .where(and(...conditions))) as CommercialPropertyListing[];
+    return listings.map(l => convertDrizzleCommercialToCommercial(l)) as CommercialPropertyListing[];
+  }
+  // #### Find by imagePath ########################################
+  async findByImagePath(imagePath: string, serial: string): Promise<CommercialPropertyListing> {
+    const result = await this.conn
+      .select()
+      .from(commercials)
+      .where(and(sql`${commercials.imagePath} = ${imagePath}`, sql`${commercials.serialId} = ${serial}`));
+    return convertDrizzleCommercialToCommercial(result[0]) as CommercialPropertyListing;
+  }
+  // #### CREATE ########################################
+  async createListing(data: CommercialPropertyListing): Promise<CommercialPropertyListing> {
+    try {
+      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
+      data.updated = new Date();
+      const validatedCommercialPropertyListing = CommercialPropertyListingSchema.parse(data);
+      const convertedCommercialPropertyListing = convertCommercialToDrizzleCommercial(data);
+      const [createdListing] = await this.conn.insert(commercials).values(convertedCommercialPropertyListing).returning();
+      return convertDrizzleCommercialToCommercial(createdListing);
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const formattedErrors = error.errors.map(err => ({
+          field: err.path.join('.'),
+          message: err.message,
+        }));
+        throw new BadRequestException(formattedErrors);
+      }
+      throw error;
+    }
+  }
+  // #### UPDATE CommercialProps ########################################
+  async updateCommercialPropertyListing(id: string, data: CommercialPropertyListing): Promise<CommercialPropertyListing> {
+    try {
+      data.updated = new Date();
+      data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
+      const validatedCommercialPropertyListing = CommercialPropertyListingSchema.parse(data);
+      const imageOrder = await this.fileService.getPropertyImages(data.imagePath, String(data.serialId));
+      let difference = imageOrder.filter(x => !data.imageOrder.includes(x)).concat(data.imageOrder.filter(x => !imageOrder.includes(x)));
+      if (difference.length > 0) {
+        this.logger.warn(`changes between image directory and imageOrder in listing ${data.serialId}: ${difference.join(',')}`);
+        data.imageOrder = imageOrder;
+      }
+      const convertedCommercialPropertyListing = convertCommercialToDrizzleCommercial(data);
+      const [updateListing] = await this.conn.update(commercials).set(convertedCommercialPropertyListing).where(eq(commercials.id, id)).returning();
+      return convertDrizzleCommercialToCommercial(updateListing);
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const formattedErrors = error.errors.map(err => ({
+          field: err.path.join('.'),
+          message: err.message,
+        }));
+        throw new BadRequestException(formattedErrors);
+      }
+      throw error;
+    }
+  }
+  // ##############################################################
+  // Images for commercial Properties
+  // ##############################################################
+  async deleteImage(imagePath: string, serial: string, name: string) {
+    const listing = (await this.findByImagePath(imagePath, serial)) as unknown as CommercialPropertyListing;
+    const index = listing.imageOrder.findIndex(im => im === name);
+    if (index > -1) {
+      listing.imageOrder.splice(index, 1);
+      await this.updateCommercialPropertyListing(listing.id, listing);
+    }
+  }
+  async addImage(imagePath: string, serial: string, imagename: string) {
+    const listing = (await this.findByImagePath(imagePath, serial)) as unknown as CommercialPropertyListing;
+    listing.imageOrder.push(imagename);
+    await this.updateCommercialPropertyListing(listing.id, listing);
+  }
+  // #### DELETE  ########################################
+  async deleteListing(id: string): Promise<void> {
+    await this.conn.delete(commercials).where(eq(commercials.id, id));
+  }
+  // ##############################################################
+  // States
+  // ##############################################################
+  async getStates(): Promise<any[]> {
+    return await this.conn
+      .select({ state: commercials.state, count: sql<number>`count(${commercials.id})`.mapWith(Number) })
+      .from(commercials)
+      .groupBy(sql`${commercials.state}`)
+      .orderBy(sql`count desc`);
+  }
+}

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

@@ -6,13 +6,17 @@ import { UserService } from '../user/user.service.js';
 import { BrokerListingsController } from './broker-listings.controller.js';
 import { BusinessListingsController } from './business-listings.controller.js';
 import { CommercialPropertyListingsController } from './commercial-property-listings.controller.js';
-import { ListingsService } from './listings.service.js';
+
+import { GeoModule } from '../geo/geo.module.js';
+import { GeoService } from '../geo/geo.service.js';
+import { BusinessListingService } from './business-listing.service.js';
+import { CommercialPropertyService } from './commercial-property.service.js';
 import { UnknownListingsController } from './unknown-listings.controller.js';
 
 @Module({
-  imports: [DrizzleModule, AuthModule],
+  imports: [DrizzleModule, AuthModule, GeoModule],
   controllers: [BusinessListingsController, CommercialPropertyListingsController, UnknownListingsController, BrokerListingsController],
-  providers: [ListingsService, FileService, UserService],
-  exports: [ListingsService],
+  providers: [BusinessListingService, CommercialPropertyService, FileService, UserService, BusinessListingService, CommercialPropertyService, GeoService],
+  exports: [BusinessListingService, CommercialPropertyService],
 })
 export class ListingsModule {}

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

@@ -1,185 +0,0 @@
-import { Inject, Injectable } from '@nestjs/common';
-import { and, eq, gte, ilike, lte, ne, or, sql } from 'drizzle-orm';
-import { NodePgDatabase } from 'drizzle-orm/node-postgres';
-import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
-import { BusinessListing, CommercialPropertyListing } from 'src/models/db.model.js';
-import { Logger } from 'winston';
-import * as schema from '../drizzle/schema.js';
-import { PG_CONNECTION, businesses, commercials } from '../drizzle/schema.js';
-import { FileService } from '../file/file.service.js';
-import { JwtUser, ListingCriteria, emailToDirName } from '../models/main.model.js';
-
-@Injectable()
-export class ListingsService {
-  constructor(
-    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
-    @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
-    private fileService: FileService,
-  ) {}
-  private getConditions(criteria: ListingCriteria, table: typeof businesses | typeof commercials, user: JwtUser): any[] {
-    const conditions = [];
-    if (criteria.type) {
-      conditions.push(eq(table.type, criteria.type));
-    }
-    if (criteria.state) {
-      conditions.push(eq(table.state, criteria.state));
-    }
-    if (criteria.minPrice) {
-      conditions.push(gte(table.price, criteria.minPrice));
-    }
-    if (criteria.maxPrice) {
-      conditions.push(lte(table.price, criteria.maxPrice));
-    }
-    if (criteria.realEstateChecked) {
-      conditions.push(eq(businesses.realEstateIncluded, true));
-    }
-    if (criteria.title) {
-      conditions.push(ilike(table.title, `%${criteria.title}%`));
-    }
-    return conditions;
-  }
-  // ##############################################################
-  // Listings general
-  // ##############################################################
-
-  async findCommercialPropertyListings(criteria: ListingCriteria, user: JwtUser): Promise<any> {
-    const start = criteria.start ? criteria.start : 0;
-    const length = criteria.length ? criteria.length : 12;
-    const conditions = this.getConditions(criteria, commercials, user);
-    if (!user || (!user?.roles?.includes('ADMIN') ?? false)) {
-      conditions.push(or(eq(commercials.draft, false), eq(commercials.imagePath, emailToDirName(user?.username))));
-    }
-    const [data, total] = await Promise.all([
-      this.conn
-        .select()
-        .from(commercials)
-        .where(and(...conditions))
-        .offset(start)
-        .limit(length),
-      this.conn
-        .select({ count: sql`count(*)` })
-        .from(commercials)
-        .where(and(...conditions))
-        .then(result => Number(result[0].count)),
-    ]);
-    return { total, data };
-  }
-  async findBusinessListings(criteria: ListingCriteria, user: JwtUser): Promise<any> {
-    const start = criteria.start ? criteria.start : 0;
-    const length = criteria.length ? criteria.length : 12;
-    const conditions = this.getConditions(criteria, businesses, user);
-    if (!user || (!user?.roles?.includes('ADMIN') ?? false)) {
-      conditions.push(or(eq(businesses.draft, false), eq(businesses.imageName, emailToDirName(user?.username))));
-    }
-    const [data, total] = await Promise.all([
-      this.conn
-        .select()
-        .from(businesses)
-        .where(and(...conditions))
-        .offset(start)
-        .limit(length),
-      this.conn
-        .select({ count: sql`count(*)` })
-        .from(businesses)
-        .where(and(...conditions))
-        .then(result => Number(result[0].count)),
-    ]);
-    return { total, data };
-  }
-  async findCommercialPropertiesById(id: string, user: JwtUser): Promise<CommercialPropertyListing> {
-    let result = await this.conn
-      .select()
-      .from(commercials)
-      .where(and(sql`${commercials.id} = ${id}`));
-    result = result.filter(r => !r.draft || r.imagePath === emailToDirName(user?.username) || user?.roles.includes('ADMIN'));
-    return result[0] as CommercialPropertyListing;
-  }
-  async findBusinessesById(id: string, user: JwtUser): Promise<CommercialPropertyListing> {
-    let result = await this.conn
-      .select()
-      .from(businesses)
-      .where(and(sql`${businesses.id} = ${id}`));
-    result = result.filter(r => !r.draft || r.imageName === emailToDirName(user?.username) || user?.roles.includes('ADMIN'));
-    return result[0] as BusinessListing;
-  }
-  async findCommercialPropertiesByEmail(email: string, user: JwtUser): Promise<CommercialPropertyListing[]> {
-    const conditions = [];
-    conditions.push(eq(commercials.imagePath, emailToDirName(email)));
-    if (email !== user?.username && (!user?.roles?.includes('ADMIN') ?? false)) {
-      conditions.push(ne(commercials.draft, true));
-    }
-    return (await this.conn
-      .select()
-      .from(commercials)
-      .where(and(...conditions))) as CommercialPropertyListing[];
-  }
-  async findBusinessesByEmail(email: string, user: JwtUser): Promise<BusinessListing[]> {
-    const conditions = [];
-    conditions.push(eq(businesses.imageName, emailToDirName(email)));
-    if (email !== user?.username && (!user?.roles?.includes('ADMIN') ?? false)) {
-      conditions.push(ne(businesses.draft, true));
-    }
-    return (await this.conn
-      .select()
-      .from(businesses)
-      .where(and(...conditions))) as CommercialPropertyListing[];
-  }
-  async findByImagePath(imagePath: string, serial: string): Promise<CommercialPropertyListing> {
-    const result = await this.conn
-      .select()
-      .from(commercials)
-      .where(and(sql`${commercials.imagePath} = ${imagePath}`, sql`${commercials.serialId} = ${serial}`));
-    return result[0] as CommercialPropertyListing;
-  }
-  async createListing(data: BusinessListing | CommercialPropertyListing, table: typeof businesses | typeof commercials): Promise<BusinessListing | CommercialPropertyListing> {
-    data.created = new Date();
-    data.updated = new Date();
-    const [createdListing] = await this.conn.insert(table).values(data).returning();
-    return createdListing as BusinessListing | CommercialPropertyListing;
-  }
-
-  async updateCommercialPropertyListing(id: string, data: CommercialPropertyListing): Promise<BusinessListing | CommercialPropertyListing> {
-    data.updated = new Date();
-    data.created = new Date(data.created);
-    const imageOrder = await this.fileService.getPropertyImages(data.imagePath, String(data.serialId));
-    let difference = imageOrder.filter(x => !data.imageOrder.includes(x)).concat(data.imageOrder.filter(x => !imageOrder.includes(x)));
-    if (difference.length > 0) {
-      this.logger.warn(`changes between image directory and imageOrder in listing ${data.serialId}: ${difference.join(',')}`);
-      data.imageOrder = imageOrder;
-    }
-    const [updateListing] = await this.conn.update(commercials).set(data).where(eq(commercials.id, id)).returning();
-    return updateListing as BusinessListing | CommercialPropertyListing;
-  }
-  async updateBusinessListing(id: string, data: BusinessListing): Promise<BusinessListing | CommercialPropertyListing> {
-    data.updated = new Date();
-    data.created = new Date(data.created);
-    const [updateListing] = await this.conn.update(businesses).set(data).where(eq(businesses.id, id)).returning();
-    return updateListing as BusinessListing | CommercialPropertyListing;
-  }
-  async deleteListing(id: string, table: typeof businesses | typeof commercials): Promise<void> {
-    await this.conn.delete(table).where(eq(table.id, id));
-  }
-  async getStates(table: typeof businesses | typeof commercials): Promise<any[]> {
-    return await this.conn
-      .select({ state: table.state, count: sql<number>`count(${table.id})`.mapWith(Number) })
-      .from(table)
-      .groupBy(sql`${table.state}`)
-      .orderBy(sql`count desc`);
-  }
-  // ##############################################################
-  // Images for commercial Properties
-  // ##############################################################
-  async deleteImage(imagePath: string, serial: string, name: string) {
-    const listing = (await this.findByImagePath(imagePath, serial)) as unknown as CommercialPropertyListing;
-    const index = listing.imageOrder.findIndex(im => im === name);
-    if (index > -1) {
-      listing.imageOrder.splice(index, 1);
-      await this.updateCommercialPropertyListing(listing.id, listing);
-    }
-  }
-  async addImage(imagePath: string, serial: string, imagename: string) {
-    const listing = (await this.findByImagePath(imagePath, serial)) as unknown as CommercialPropertyListing;
-    listing.imageOrder.push(imagename);
-    await this.updateCommercialPropertyListing(listing.id, listing);
-  }
-}

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

@@ -1,14 +1,10 @@
 import { Controller, Inject } from '@nestjs/common';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import { Logger } from 'winston';
-import { ListingsService } from './listings.service.js';
 
 @Controller('listings/undefined')
 export class UnknownListingsController {
-  constructor(
-    private readonly listingsService: ListingsService,
-    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
-  ) {}
+  constructor(@Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger) {}
 
   // @Get(':id')
   // async findById(@Param('id') id: string): Promise<any> {

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

@@ -1,5 +1,5 @@
 import { Body, Controller, Post } from '@nestjs/common';
-import { ErrorResponse, MailInfo } from 'src/models/main.model.js';
+import { ErrorResponse, MailInfo } from '../models/main.model';
 import { MailService } from './mail.service.js';
 
 @Controller('mail')

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

@@ -5,6 +5,8 @@ import path, { join } from 'path';
 import { fileURLToPath } from 'url';
 import { DrizzleModule } from '../drizzle/drizzle.module.js';
 import { FileService } from '../file/file.service.js';
+import { GeoModule } from '../geo/geo.module.js';
+import { GeoService } from '../geo/geo.service.js';
 import { UserModule } from '../user/user.module.js';
 import { UserService } from '../user/user.service.js';
 import { MailController } from './mail.controller.js';
@@ -17,6 +19,7 @@ const password = process.env.amazon_password;
   imports: [
     DrizzleModule,
     UserModule,
+    GeoModule,
     MailerModule.forRoot({
       transport: {
         host: 'email-smtp.us-east-2.amazonaws.com',
@@ -39,7 +42,7 @@ const password = process.env.amazon_password;
       },
     }),
   ],
-  providers: [MailService, UserService, FileService],
+  providers: [MailService, UserService, FileService, GeoService],
   controllers: [MailController],
 })
 export class MailModule {}

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

@@ -1,7 +1,9 @@
 import { MailerService } from '@nestjs-modules/mailer';
-import { Injectable } from '@nestjs/common';
+import { BadRequestException, Injectable } from '@nestjs/common';
 import path, { join } from 'path';
 import { fileURLToPath } from 'url';
+import { ZodError } from 'zod';
+import { SenderSchema } from '../models/db.model.js';
 import { ErrorResponse, MailInfo, isEmpty } from '../models/main.model.js';
 import { UserService } from '../user/user.service.js';
 const __filename = fileURLToPath(import.meta.url);
@@ -15,9 +17,19 @@ export class MailService {
   ) {}
 
   async sendInquiry(mailInfo: MailInfo): Promise<void | ErrorResponse> {
-    //const user = await this.authService.getUser(mailInfo.userId) as KeycloakUser;
+    try {
+      const validatedSender = SenderSchema.parse(mailInfo.sender);
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const formattedErrors = error.errors.map(err => ({
+          field: err.path.join('.'),
+          message: err.message,
+        }));
+        throw new BadRequestException(formattedErrors);
+      }
+      throw error;
+    }
     const user = await this.userService.getUserByMail(mailInfo.email);
-    console.log(JSON.stringify(user));
     if (isEmpty(mailInfo.sender.name)) {
       return { fields: [{ fieldname: 'name', message: 'Required' }] };
     }
@@ -42,8 +54,17 @@ export class MailService {
     });
   }
   async sendRequest(mailInfo: MailInfo): Promise<void | ErrorResponse> {
-    if (isEmpty(mailInfo.sender.name)) {
-      return { fields: [{ fieldname: 'name', message: 'Required' }] };
+    try {
+      const validatedSender = SenderSchema.parse(mailInfo.sender);
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const formattedErrors = error.errors.map(err => ({
+          field: err.path.join('.'),
+          message: err.message,
+        }));
+        throw new BadRequestException(formattedErrors);
+      }
+      throw error;
     }
     await this.mailerService.sendMail({
       to: 'support@bizmatch.net',

bizmatch-server/src/main.ts

@@ -1,10 +1,7 @@
 import { NestFactory } from '@nestjs/core';
 import express from 'express';
-import path from 'path';
-import { fileURLToPath } from 'url';
 import { AppModule } from './app.module.js';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+
 async function bootstrap() {
   const server = express();
   const app = await NestFactory.create(AppModule);

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

@@ -1,24 +1,5 @@
-export interface User {
-  id?: string;
-  firstname: string;
-  lastname: string;
-  email: string;
-  phoneNumber?: string;
-  description?: string;
-  companyName?: string;
-  companyOverview?: string;
-  companyWebsite?: string;
-  companyLocation?: string;
-  offeredServices?: string;
-  areasServed?: AreasServed[];
-  hasProfile?: boolean;
-  hasCompanyLogo?: boolean;
-  licensedIn?: LicensedIn[];
-  gender?: 'male' | 'female';
-  customerType?: 'buyer' | 'broker' | 'professional';
-  created?: Date;
-  updated?: Date;
-}
+import { z } from 'zod';
+
 export interface UserData {
   id?: string;
   firstname: string;
@@ -37,71 +18,273 @@ export interface UserData {
   licensedIn?: string[];
   gender?: 'male' | 'female';
   customerType?: 'buyer' | 'broker' | 'professional';
+  customerSubType?: 'broker' | 'cpa' | 'attorney' | 'titleCompany' | 'surveyor' | 'appraiser';
   created?: Date;
   updated?: Date;
 }
-export interface BusinessListing {
-  id: string;
-  userId?: string;
-  type?: number;
-  title?: string;
-  description?: string;
-  city?: string;
-  state?: string;
-  price?: number;
-  favoritesForUser?: string[];
-  draft?: boolean;
-  realEstateIncluded?: boolean;
-  leasedLocation?: boolean;
-  franchiseResale?: boolean;
-  salesRevenue?: number;
-  cashFlow?: number;
-  supportAndTraining?: string;
-  employees?: number;
-  established?: number;
-  internalListingNumber?: number;
-  reasonForSale?: string;
-  brokerLicencing?: string;
-  internals?: string;
-  imageName?: string;
-  created?: Date;
-  updated?: Date;
-  visits?: number;
-  lastVisit?: Date;
-  listingsCategory?: 'commercialProperty' | 'business';
-}
+export type Gender = 'male' | 'female';
+export type CustomerType = 'buyer' | 'professional';
+export type CustomerSubType = 'broker' | 'cpa' | 'attorney' | 'titleCompany' | 'surveyor' | 'appraiser';
+export type ListingsCategory = 'commercialProperty' | 'business';
 
-export interface CommercialPropertyListing {
-  id: string;
-  serialId?: number;
-  userId?: string;
-  type?: number;
-  title?: string;
-  description?: string;
-  city?: string;
-  state?: string;
-  price?: number;
-  favoritesForUser?: string[];
-  hideImage?: boolean;
-  draft?: boolean;
-  zipCode?: number;
-  county?: string;
-  email?: string;
-  website?: string;
-  phoneNumber?: string;
-  imageOrder?: string[];
-  imagePath?: string;
-  created?: Date;
-  updated?: Date;
-  visits?: number;
-  lastVisit?: Date;
-  listingsCategory?: 'commercialProperty' | 'business';
-}
-export interface AreasServed {
-  county: string;
-  state: string;
-}
-export interface LicensedIn {
-  registerNo: string;
-  state: string;
-}
+export const GenderEnum = z.enum(['male', 'female']);
+export const CustomerTypeEnum = z.enum(['buyer', 'professional']);
+export const CustomerSubTypeEnum = z.enum(['broker', 'cpa', 'attorney', 'titleCompany', 'surveyor', 'appraiser']);
+export const ListingsCategoryEnum = z.enum(['commercialProperty', 'business']);
+const PropertyTypeEnum = z.enum(['retail', 'land', 'industrial', 'office', 'mixedUse', 'multifamily', 'uncategorized']);
+const TypeEnum = z.enum([
+  'automotive',
+  'industrialServices',
+  'foodAndRestaurant',
+  'realEstate',
+  'retail',
+  'oilfield',
+  'service',
+  'advertising',
+  'agriculture',
+  'franchise',
+  'professional',
+  'manufacturing',
+  'uncategorized',
+]);
+
+const USStates = z.enum([
+  'AL',
+  'AK',
+  'AZ',
+  'AR',
+  'CA',
+  'CO',
+  'CT',
+  'DC',
+  'DE',
+  'FL',
+  'GA',
+  'HI',
+  'ID',
+  'IL',
+  'IN',
+  'IA',
+  'KS',
+  'KY',
+  'LA',
+  'ME',
+  'MD',
+  'MA',
+  'MI',
+  'MN',
+  'MS',
+  'MO',
+  'MT',
+  'NE',
+  'NV',
+  'NH',
+  'NJ',
+  'NM',
+  'NY',
+  'NC',
+  'ND',
+  'OH',
+  'OK',
+  'OR',
+  'PA',
+  'RI',
+  'SC',
+  'SD',
+  'TN',
+  'TX',
+  'UT',
+  'VT',
+  'VA',
+  'WA',
+  'WV',
+  'WI',
+  'WY',
+]);
+export const AreasServedSchema = z.object({
+  county: z.string().nonempty('County is required'),
+  state: z.string().nonempty('State is required'),
+});
+
+export const LicensedInSchema = z.object({
+  registerNo: z.string().nonempty('Registration number is required'),
+  state: z.string().nonempty('State is required'),
+});
+export const GeoSchema = z.object({
+  city: z.string(),
+  state: z.string().refine(val => USStates.safeParse(val).success, {
+    message: 'Invalid state. Must be a valid 2-letter US state code.',
+  }),
+  latitude: z.number().refine(
+    value => {
+      return value >= -90 && value <= 90;
+    },
+    {
+      message: 'Latitude muss zwischen -90 und 90 liegen',
+    },
+  ),
+  longitude: z.number().refine(
+    value => {
+      return value >= -180 && value <= 180;
+    },
+    {
+      message: 'Longitude muss zwischen -180 und 180 liegen',
+    },
+  ),
+});
+const phoneRegex = /^\(\d{3}\)\s\d{3}-\d{4}$/;
+
+export const UserSchema = z
+  .object({
+    id: z.string().uuid().optional().nullable(),
+    firstname: z.string().min(2, { message: 'First name must contain at least 2 characters' }),
+    lastname: z.string().min(2, { message: 'Last name must contain at least 2 characters' }),
+    email: z.string().email({ message: 'Invalid email address' }),
+    phoneNumber: z.string().optional().nullable(),
+    description: z.string().optional().nullable(),
+    companyName: z.string().optional().nullable(),
+    companyOverview: z.string().optional().nullable(),
+    companyWebsite: z.string().url({ message: 'Invalid URL format' }).optional().nullable(),
+    companyLocation: GeoSchema.optional().nullable(),
+    offeredServices: z.string().optional().nullable(),
+    areasServed: z.array(AreasServedSchema).optional().nullable(),
+    hasProfile: z.boolean().optional().nullable(),
+    hasCompanyLogo: z.boolean().optional().nullable(),
+    licensedIn: z.array(LicensedInSchema).optional().nullable(),
+    gender: GenderEnum.optional().nullable(),
+    customerType: CustomerTypeEnum,
+    customerSubType: CustomerSubTypeEnum.optional().nullable(),
+    created: z.date().optional().nullable(),
+    updated: z.date().optional().nullable(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.customerType === 'professional') {
+      if (!data.customerSubType) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Customer subtype is required for professional customers',
+          path: ['customerSubType'],
+        });
+      }
+
+      if (!data.phoneNumber || !phoneRegex.test(data.phoneNumber)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Phone number is required and must be in US format (XXX) XXX-XXXX for professional customers',
+          path: ['phoneNumber'],
+        });
+      }
+
+      if (!data.companyOverview || data.companyOverview.length < 10) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Company overview must contain at least 10 characters for professional customers',
+          path: ['companyOverview'],
+        });
+      }
+
+      if (!data.description || data.description.length < 10) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Description must contain at least 10 characters for professional customers',
+          path: ['description'],
+        });
+      }
+
+      if (!data.offeredServices || data.offeredServices.length < 10) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Offered services must contain at least 10 characters for professional customers',
+          path: ['offeredServices'],
+        });
+      }
+
+      if (!data.companyLocation) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Company location is required for professional customers',
+          path: ['companyLocation'],
+        });
+      }
+
+      if (!data.areasServed || data.areasServed.length < 1) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'At least one area served is required for professional customers',
+          path: ['areasServed'],
+        });
+      }
+    }
+  });
+
+export type AreasServed = z.infer<typeof AreasServedSchema>;
+export type LicensedIn = z.infer<typeof LicensedInSchema>;
+export type User = z.infer<typeof UserSchema>;
+
+export const BusinessListingSchema = z.object({
+  id: z.string().uuid().optional().nullable(),
+  email: z.string().email(),
+  type: z.string().refine(val => TypeEnum.safeParse(val).success, {
+    message: 'Invalid type. Must be one of: ' + TypeEnum.options.join(', '),
+  }),
+  title: z.string().min(10),
+  description: z.string().min(10),
+  location: GeoSchema,
+  price: z.number().positive().max(1000000000),
+  favoritesForUser: z.array(z.string()),
+  draft: z.boolean(),
+  listingsCategory: ListingsCategoryEnum,
+  realEstateIncluded: z.boolean().optional().nullable(),
+  leasedLocation: z.boolean().optional().nullable(),
+  franchiseResale: z.boolean().optional().nullable(),
+  salesRevenue: z.number().positive().max(100000000),
+  cashFlow: z.number().positive().max(100000000),
+  supportAndTraining: z.string().min(5),
+  employees: z.number().int().positive().max(100000).optional().nullable(),
+  established: z.number().int().min(1800).max(2030).optional().nullable(),
+  internalListingNumber: z.number().int().positive().optional().nullable(),
+  reasonForSale: z.string().min(5).optional().nullable(),
+  brokerLicencing: z.string().min(5).optional().nullable(),
+  internals: z.string().min(5).optional().nullable(),
+  imageName: z.string().optional().nullable(),
+  created: z.date(),
+  updated: z.date(),
+});
+export type BusinessListing = z.infer<typeof BusinessListingSchema>;
+
+export const CommercialPropertyListingSchema = z
+  .object({
+    id: z.string().uuid().optional().nullable(),
+    serialId: z.number().int().positive().optional().nullable(),
+    email: z.string().email(),
+    type: z.string().refine(val => PropertyTypeEnum.safeParse(val).success, {
+      message: 'Invalid type. Must be one of: ' + PropertyTypeEnum.options.join(', '),
+    }),
+    title: z.string().min(10),
+    description: z.string().min(10),
+    location: GeoSchema,
+    price: z.number().positive().max(1000000000),
+    favoritesForUser: z.array(z.string()),
+    listingsCategory: ListingsCategoryEnum,
+    draft: z.boolean(),
+    imageOrder: z.array(z.string()),
+    imagePath: z.string().nullable().optional(),
+    created: z.date(),
+    updated: z.date(),
+  })
+  .strict();
+
+export type CommercialPropertyListing = z.infer<typeof CommercialPropertyListingSchema>;
+
+export const SenderSchema = z.object({
+  name: z.string().min(6, { message: 'Name must be at least 6 characters long' }),
+  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}$/, {
+    message: 'Invalid US phone number format',
+  }),
+  state: z.string().refine(val => USStates.safeParse(val).success, {
+    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' }),
+});
+export type Sender = z.infer<typeof SenderSchema>;

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

@@ -1,4 +1,4 @@
-import { BusinessListing, CommercialPropertyListing, User } from './db.model';
+import { BusinessListing, CommercialPropertyListing, Sender, User } from './db.model.js';
 
 export interface StatesResult {
   state: string;
@@ -16,8 +16,8 @@ export interface KeyValueRatio {
 export interface KeyValueStyle {
   name: string;
   value: string;
+  oldValue?: string;
   icon: string;
-  bgColorClass: string;
   textColorClass: string;
 }
 export type SelectOption<T = number> = {
@@ -36,36 +36,66 @@ export type ListingCategory = {
 export type ListingType = BusinessListing | CommercialPropertyListing;
 
 export type ResponseBusinessListingArray = {
-  data: BusinessListing[];
-  total: number;
+  results: BusinessListing[];
+  totalCount: number;
 };
 export type ResponseBusinessListing = {
   data: BusinessListing;
 };
 export type ResponseCommercialPropertyListingArray = {
-  data: CommercialPropertyListing[];
-  total: number;
+  results: CommercialPropertyListing[];
+  totalCount: number;
 };
 export type ResponseCommercialPropertyListing = {
   data: CommercialPropertyListing;
 };
 export type ResponseUsersArray = {
-  data: User[];
-  total: number;
+  results: User[];
+  totalCount: number;
 };
-export interface ListingCriteria {
+export interface ListCriteria {
   start: number;
   length: number;
   page: number;
-  pageCount: number;
-  type: number;
+  types: string[];
   state: string;
+  city: string;
+  prompt: string;
+  searchType: 'exact' | 'radius';
+  // radius: '5' | '20' | '50' | '100' | '200' | '300' | '400' | '500';
+  radius: number;
+  criteriaType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings';
+}
+export interface BusinessListingCriteria extends ListCriteria {
   minPrice: number;
   maxPrice: number;
+  minRevenue: number;
+  maxRevenue: number;
+  minCashFlow: number;
+  maxCashFlow: number;
+  minNumberEmployees: number;
+  maxNumberEmployees: number;
+  establishedSince: number;
+  establishedUntil: number;
   realEstateChecked: boolean;
+  leasedLocation: boolean;
+  franchiseResale: boolean;
   title: string;
-  category: 'professional' | 'broker';
-  name: string;
+  brokerName: string;
+  criteriaType: 'businessListings';
+}
+export interface CommercialPropertyListingCriteria extends ListCriteria {
+  minPrice: number;
+  maxPrice: number;
+  title: string;
+  criteriaType: 'commercialPropertyListings';
+}
+export interface UserListingCriteria extends ListCriteria {
+  firstname: string;
+  lastname: string;
+  companyName: string;
+  counties: string[];
+  criteriaType: 'brokerListings';
 }
 
 export interface KeycloakUser {
@@ -86,6 +116,8 @@ export interface KeycloakUser {
 export interface JwtUser {
   userId: string;
   username: string;
+  firstname: string;
+  lastname: string;
   roles: string[];
 }
 export interface Access {
@@ -161,18 +193,17 @@ export interface AutoCompleteCompleteEvent {
 }
 export interface MailInfo {
   sender: Sender;
-  userId: string;
   email: string;
   url: string;
   listing?: BusinessListing;
 }
-export interface Sender {
-  name?: string;
-  email?: string;
-  phoneNumber?: string;
-  state?: string;
-  comments?: string;
-}
+// export interface Sender {
+//   name?: string;
+//   email?: string;
+//   phoneNumber?: string;
+//   state?: string;
+//   comments?: string;
+// }
 export interface ImageProperty {
   id: string;
   code: string;
@@ -186,6 +217,31 @@ export interface FieldError {
   fieldname: string;
   message: string;
 }
+export interface UploadParams {
+  type: 'uploadPropertyPicture' | 'uploadCompanyLogo' | 'uploadProfile';
+  imagePath: string;
+  serialId?: number;
+}
+export interface GeoResult {
+  id: number;
+  city: string;
+  state: string;
+  // state_code: string;
+  latitude: number;
+  longitude: number;
+}
+export interface CityAndStateResult {
+  id: number;
+  name: string;
+  type: string;
+  state: string;
+}
+export interface CountyResult {
+  id: number;
+  name: string;
+  state: string;
+  state_code: string;
+}
 export function isEmpty(value: any): boolean {
   // Check for undefined or null
   if (value === undefined || value === null) {
@@ -220,3 +276,79 @@ export function emailToDirName(email: string): string {
 
   return normalizedEmail;
 }
+export const LISTINGS_PER_PAGE = 12;
+export interface ValidationMessage {
+  field: string;
+  message: string;
+}
+export function createDefaultUser(email: string, firstname: string, lastname: string): User {
+  return {
+    id: undefined,
+    email,
+    firstname,
+    lastname,
+    phoneNumber: null,
+    description: null,
+    companyName: null,
+    companyOverview: null,
+    companyWebsite: null,
+    companyLocation: null,
+    offeredServices: null,
+    areasServed: [],
+    hasProfile: false,
+    hasCompanyLogo: false,
+    licensedIn: [],
+    gender: null,
+    customerType: 'buyer',
+    customerSubType: null,
+    created: new Date(),
+    updated: new Date(),
+  };
+}
+export function createDefaultCommercialPropertyListing(): CommercialPropertyListing {
+  return {
+    id: undefined,
+    serialId: undefined,
+    email: null,
+    type: null,
+    title: null,
+    description: null,
+    location: null,
+    price: null,
+    favoritesForUser: [],
+    draft: false,
+    imageOrder: [],
+    imagePath: null,
+    created: null,
+    updated: null,
+    listingsCategory: 'commercialProperty',
+  };
+}
+export function createDefaultBusinessListing(): BusinessListing {
+  return {
+    id: undefined,
+    email: null,
+    type: null,
+    title: null,
+    description: null,
+    location: null,
+    price: null,
+    favoritesForUser: [],
+    draft: false,
+    realEstateIncluded: false,
+    leasedLocation: false,
+    franchiseResale: false,
+    salesRevenue: null,
+    cashFlow: null,
+    supportAndTraining: null,
+    employees: null,
+    established: null,
+    internalListingNumber: null,
+    reasonForSale: null,
+    brokerLicencing: null,
+    internals: null,
+    created: null,
+    updated: null,
+    listingsCategory: 'business',
+  };
+}

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

@@ -1,4 +1,3 @@
-import { Entity } from "redis-om";
 export interface Geo {
   id: number;
   name: string;
@@ -19,8 +18,8 @@ export interface Geo {
   nationality: string;
   timezones: Timezone[];
   translations: Translations;
-  latitude: string;
-  longitude: string;
+  latitude: number;
+  longitude: number;
   emoji: string;
   emojiU: string;
   states: State[];
@@ -29,16 +28,16 @@ export interface State {
   id: number;
   name: string;
   state_code: string;
-  latitude: string;
-  longitude: string;
+  latitude: number;
+  longitude: number;
   type: string;
   cities: City[];
 }
 export interface City {
   id: number;
   name: string;
-  latitude: string;
-  longitude: string;
+  latitude: number;
+  longitude: number;
 }
 export interface Translations {
   kr: string;
@@ -62,3 +61,12 @@ export interface Timezone {
   abbreviation: string;
   tzName: string;
 }
+export interface CountyData {
+  state: string;
+  state_full: string;
+  counties: string[];
+}
+export interface CountyRequest {
+  prefix: string;
+  states: string[];
+}

bizmatch-server/src/select-options/select-options.controller.ts

@@ -13,6 +13,8 @@ export class SelectOptionsController {
       customerTypes: this.selectOptionsService.customerTypes,
       locations: this.selectOptionsService.locations,
       typesOfCommercialProperty: this.selectOptionsService.typesOfCommercialProperty,
+      customerSubTypes: this.selectOptionsService.customerSubTypes,
+      distances: this.selectOptionsService.distances,
     };
   }
 }

bizmatch-server/src/select-options/select-options.service.ts

@@ -5,28 +5,28 @@ import { ImageType, KeyValue, KeyValueStyle } from '../models/main.model.js';
 export class SelectOptionsService {
   constructor() {}
   public typesOfBusiness: Array<KeyValueStyle> = [
-    { name: 'Automotive', value: '1', icon: 'fa-solid fa-car', bgColorClass: 'bg-green-100', textColorClass: 'text-green-600' },
-    { name: 'Industrial Services', value: '2', icon: 'fa-solid fa-industry', bgColorClass: 'bg-yellow-100', textColorClass: 'text-yellow-600' },
-    { name: 'Real Estate', value: '3', icon: 'pi pi-building', bgColorClass: 'bg-blue-100', textColorClass: 'text-blue-600' },
-    { name: 'Uncategorized', value: '4', icon: 'pi pi-question', bgColorClass: 'bg-cyan-100', textColorClass: 'text-cyan-600' },
-    { name: 'Retail', value: '5', icon: 'fa-solid fa-money-bill-wave', bgColorClass: 'bg-pink-100', textColorClass: 'text-pink-600' },
-    { name: 'Oilfield SVE and MFG.', value: '6', icon: 'fa-solid fa-oil-well', bgColorClass: 'bg-indigo-100', textColorClass: 'text-indigo-600' },
-    { name: 'Service', value: '7', icon: 'fa-solid fa-umbrella', bgColorClass: 'bg-teal-100', textColorClass: 'text-teal-600' },
-    { name: 'Advertising', value: '8', icon: 'fa-solid fa-rectangle-ad', bgColorClass: 'bg-orange-100', textColorClass: 'text-orange-600' },
-    { name: 'Agriculture', value: '9', icon: 'fa-solid fa-wheat-awn', bgColorClass: 'bg-bluegray-100', textColorClass: 'text-bluegray-600' },
-    { name: 'Franchise', value: '10', icon: 'pi pi-star', bgColorClass: 'bg-purple-100', textColorClass: 'text-purple-600' },
-    { name: 'Professional', value: '11', icon: 'fa-solid fa-user-gear', bgColorClass: 'bg-gray-100', textColorClass: 'text-gray-600' },
-    { name: 'Manufacturing', value: '12', icon: 'fa-solid fa-industry', bgColorClass: 'bg-red-100', textColorClass: 'text-red-600' },
-    { name: 'Food and Restaurant', value: '13', icon: 'fa-solid fa-utensils', bgColorClass: 'bg-primary-100', textColorClass: 'text-primary-600' },
+    { name: 'Automotive', value: 'automotive', oldValue: '1', icon: 'fa-solid fa-car', textColorClass: 'text-green-400' },
+    { name: 'Industrial Services', value: 'industrialServices', oldValue: '2', icon: 'fa-solid fa-industry', textColorClass: 'text-yellow-400' },
+    { name: 'Food and Restaurant', value: 'foodAndRestaurant', oldValue: '13', icon: 'fa-solid fa-utensils', textColorClass: 'text-amber-700' },
+    { name: 'Real Estate', value: 'realEstate', oldValue: '3', icon: 'fa-solid fa-building', textColorClass: 'text-blue-400' },
+    { name: 'Retail', value: 'retail', oldValue: '5', icon: 'fa-solid fa-money-bill-wave', textColorClass: 'text-pink-400' },
+    { name: 'Oilfield SVE and MFG.', value: 'oilfield', oldValue: '6', icon: 'fa-solid fa-oil-well', textColorClass: 'text-indigo-400' },
+    { name: 'Service', value: 'service', oldValue: '7', icon: 'fa-solid fa-umbrella', textColorClass: 'text-teal-400' },
+    { name: 'Advertising', value: 'advertising', oldValue: '8', icon: 'fa-solid fa-rectangle-ad', textColorClass: 'text-orange-400' },
+    { name: 'Agriculture', value: 'agriculture', oldValue: '9', icon: 'fa-solid fa-wheat-awn', textColorClass: 'text-sky-400' },
+    { name: 'Franchise', value: 'franchise', oldValue: '10', icon: 'fa-solid fa-star', textColorClass: 'text-purple-400' },
+    { name: 'Professional', value: 'professional', oldValue: '11', icon: 'fa-solid fa-user-gear', textColorClass: 'text-gray-400' },
+    { name: 'Manufacturing', value: 'manufacturing', oldValue: '12', icon: 'fa-solid fa-industry', textColorClass: 'text-red-400' },
+    { name: 'Uncategorized', value: 'uncategorized', oldValue: '4', icon: 'fa-solid fa-question', textColorClass: 'text-cyan-400' },
   ];
   public typesOfCommercialProperty: Array<KeyValueStyle> = [
-    { name: 'Retail', value: '100', icon: 'fa-solid fa-money-bill-wave', bgColorClass: 'bg-pink-100', textColorClass: 'text-pink-600' },
-    { name: 'Land', value: '101', icon: 'pi pi-building', bgColorClass: 'bg-blue-100', textColorClass: 'text-blue-600' },
-    { name: 'Industrial', value: '102', icon: 'fa-solid fa-industry', bgColorClass: 'bg-yellow-100', textColorClass: 'text-yellow-600' },
-    { name: 'Office', value: '103', icon: 'fa-solid fa-umbrella', bgColorClass: 'bg-teal-100', textColorClass: 'text-teal-600' },
-    { name: 'Mixed Use', value: '104', icon: 'fa-solid fa-rectangle-ad', bgColorClass: 'bg-orange-100', textColorClass: 'text-orange-600' },
-    { name: 'Multifamily', value: '105', icon: 'pi pi-star', bgColorClass: 'bg-purple-100', textColorClass: 'text-purple-600' },
-    { name: 'Uncategorized', value: '106', icon: 'pi pi-question', bgColorClass: 'bg-cyan-100', textColorClass: 'text-cyan-600' },
+    { name: 'Retail', value: 'retail', oldValue: '100', icon: 'fa-solid fa-money-bill-wave', textColorClass: 'text-pink-400' },
+    { name: 'Land', value: 'land', oldValue: '101', icon: 'fa-solid fa-building', textColorClass: 'text-blue-400' },
+    { name: 'Industrial', value: 'industrial', oldValue: '102', icon: 'fa-solid fa-industry', textColorClass: 'text-yellow-400' },
+    { name: 'Office', value: 'office', oldValue: '103', icon: 'fa-solid fa-umbrella', textColorClass: 'text-teal-400' },
+    { name: 'Mixed Use', value: 'mixedUse', oldValue: '104', icon: 'fa-solid fa-rectangle-ad', textColorClass: 'text-orange-400' },
+    { name: 'Multifamily', value: 'multifamily', oldValue: '105', icon: 'fa-solid fa-star', textColorClass: 'text-purple-400' },
+    { name: 'Uncategorized', value: 'uncategorized', oldValue: '106', icon: 'fa-solid fa-question', textColorClass: 'text-cyan-400' },
   ];
   public prices: Array<KeyValue> = [
     { name: '$100K', value: '100000' },
@@ -35,15 +35,33 @@ export class SelectOptionsService {
     { name: '$1M', value: '1000000' },
     { name: '$5M', value: '5000000' },
   ];
+
+  public distances: Array<KeyValue> = [
+    { name: '5 miles', value: '5' },
+    { name: '20 miles', value: '20' },
+    { name: '50 miles', value: '50' },
+    { name: '100 miles', value: '100' },
+    { name: '200 miles', value: '200' },
+    { name: '300 miles', value: '300' },
+    { name: '400 miles', value: '400' },
+    { name: '500 miles', value: '500' },
+  ];
   public listingCategories: Array<KeyValue> = [
     { name: 'Business', value: 'business' },
     { name: 'Commercial Property', value: 'commercialProperty' },
   ];
   public customerTypes: Array<KeyValue> = [
     { name: 'Buyer', value: 'buyer' },
-    { name: 'Broker', value: 'broker' },
     { name: 'Professional', value: 'professional' },
   ];
+  public customerSubTypes: Array<KeyValue> = [
+    { name: 'Broker', value: 'broker' },
+    { name: 'CPA', value: 'cpa' },
+    { name: 'Attorney', value: 'attorney' },
+    { name: 'Title Company', value: 'titleCompany' },
+    { name: 'Surveyor', value: 'surveyor' },
+    { name: 'Appraiser', value: 'appraiser' },
+  ];
   public gender: Array<KeyValue> = [
     { name: 'Male', value: 'male' },
     { name: 'Female', value: 'female' },

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

@@ -1,9 +1,10 @@
-import { Body, Controller, Get, Inject, Param, Post, Query } from '@nestjs/common';
+import { Body, Controller, Get, Inject, Param, Post, Query, Request, UseGuards } from '@nestjs/common';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
-import { User } from 'src/models/db.model.js';
 import { Logger } from 'winston';
 import { FileService } from '../file/file.service.js';
-import { Subscription } from '../models/main.model.js';
+import { OptionalJwtAuthGuard } from '../jwt-auth/optional-jwt-auth.guard.js';
+import { User } from '../models/db.model';
+import { JwtUser, Subscription, UserListingCriteria } from '../models/main.model.js';
 import { UserService } from './user.service.js';
 
 @Controller('user')
@@ -13,14 +14,15 @@ export class UserController {
     private fileService: FileService,
     @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
   ) {}
-
+  @UseGuards(OptionalJwtAuthGuard)
   @Get()
-  findByMail(@Query('mail') mail: string): any {
+  findByMail(@Request() req, @Query('mail') mail: string): any {
     this.logger.info(`Searching for user with EMail: ${mail}`);
-    const user = this.userService.getUserByMail(mail);
+    const user = this.userService.getUserByMail(mail, req.user as JwtUser);
     this.logger.info(`Found user: ${JSON.stringify(user)}`);
     return user;
   }
+
   @Get(':id')
   findById(@Param('id') id: string): any {
     this.logger.info(`Searching for user with ID: ${id}`);
@@ -37,12 +39,16 @@ export class UserController {
   }
 
   @Post('search')
-  find(@Body() criteria: any): any {
+  find(@Body() criteria: UserListingCriteria): any {
     this.logger.info(`Searching for users with criteria: ${JSON.stringify(criteria)}`);
-    const foundUsers = this.userService.findUser(criteria);
+    const foundUsers = this.userService.searchUserListings(criteria);
     this.logger.info(`Found users: ${JSON.stringify(foundUsers)}`);
     return foundUsers;
   }
+  @Post('findTotal')
+  findTotal(@Body() criteria: UserListingCriteria): Promise<number> {
+    return this.userService.getUserListingsCount(criteria);
+  }
   @Get('states/all')
   async getStates(): Promise<any[]> {
     this.logger.info(`Getting all states for users`);

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

@@ -1,12 +1,14 @@
 import { Module } from '@nestjs/common';
 import { DrizzleModule } from '../drizzle/drizzle.module.js';
 import { FileService } from '../file/file.service.js';
+import { GeoModule } from '../geo/geo.module.js';
+import { GeoService } from '../geo/geo.service.js';
 import { UserController } from './user.controller.js';
 import { UserService } from './user.service.js';
 
 @Module({
-  imports: [DrizzleModule],
+  imports: [DrizzleModule, GeoModule],
   controllers: [UserController],
-  providers: [UserService, FileService],
+  providers: [UserService, FileService, GeoService],
 })
 export class UserModule {}

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

@@ -1,84 +1,153 @@
-import { Inject, Injectable } from '@nestjs/common';
-import { and, eq, ilike, or, sql } from 'drizzle-orm';
+import { BadRequestException, Inject, Injectable } from '@nestjs/common';
+import { and, count, eq, ilike, inArray, or, SQL, sql } from 'drizzle-orm';
 import { NodePgDatabase } from 'drizzle-orm/node-postgres/driver.js';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import { Logger } from 'winston';
+import { ZodError } from 'zod';
 import * as schema from '../drizzle/schema.js';
-import { PG_CONNECTION } from '../drizzle/schema.js';
+import { customerSubTypeEnum, PG_CONNECTION } from '../drizzle/schema.js';
 import { FileService } from '../file/file.service.js';
-import { User } from '../models/db.model.js';
-import { ListingCriteria, emailToDirName } from '../models/main.model.js';
+import { GeoService } from '../geo/geo.service.js';
+import { User, UserSchema } from '../models/db.model.js';
+import { createDefaultUser, emailToDirName, JwtUser, UserListingCriteria } from '../models/main.model.js';
+import { convertDrizzleUserToUser, convertUserToDrizzleUser, getDistanceQuery } from '../utils.js';
 
+type CustomerSubType = (typeof customerSubTypeEnum.enumValues)[number];
 @Injectable()
 export class UserService {
   constructor(
     @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
     @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
     private fileService: FileService,
+    private geoService: GeoService,
   ) {}
-  private getConditions(criteria: ListingCriteria): any[] {
-    const conditions = [];
+
+  private getWhereConditions(criteria: UserListingCriteria): SQL[] {
+    const whereConditions: SQL[] = [];
+    whereConditions.push(eq(schema.users.customerType, 'professional'));
+    if (criteria.city && criteria.searchType === 'exact') {
+      whereConditions.push(ilike(schema.users.city, `%${criteria.city}%`));
+    }
+    if (criteria.city && criteria.radius && criteria.searchType === 'radius' && criteria.radius) {
+      const cityGeo = this.geoService.getCityWithCoords(criteria.state, criteria.city);
+      whereConditions.push(sql`${getDistanceQuery(schema.users, cityGeo.latitude, cityGeo.longitude)} <= ${criteria.radius}`);
+    }
+    if (criteria.types && criteria.types.length > 0) {
+      // whereConditions.push(inArray(schema.users.customerSubType, criteria.types));
+      whereConditions.push(inArray(schema.users.customerSubType, criteria.types as CustomerSubType[]));
+    }
+
+    if (criteria.firstname) {
+      whereConditions.push(ilike(schema.users.firstname, `%${criteria.firstname}%`));
+    }
+
+    if (criteria.lastname) {
+      whereConditions.push(ilike(schema.users.lastname, `%${criteria.lastname}%`));
+    }
+
+    if (criteria.companyName) {
+      whereConditions.push(ilike(schema.users.companyName, `%${criteria.companyName}%`));
+    }
+
+    if (criteria.counties && criteria.counties.length > 0) {
+      whereConditions.push(or(...criteria.counties.map(county => sql`EXISTS (SELECT 1 FROM jsonb_array_elements(${schema.users.areasServed}) AS area WHERE area->>'county' ILIKE ${`%${county}%`})`)));
+    }
+
     if (criteria.state) {
-      //conditions.push(sql`EXISTS (SELECT 1 FROM unnest(users."areasServed") AS area WHERE area LIKE  '%' || ${criteria.state}  || '%')`);
-      conditions.push(sql`${schema.users.areasServed} @> ${JSON.stringify([{ state: criteria.state }])}`);
+      whereConditions.push(sql`EXISTS (SELECT 1 FROM jsonb_array_elements(${schema.users.areasServed}) AS area WHERE area->>'state' = ${criteria.state})`);
     }
-    if (criteria.name) {
-      conditions.push(or(ilike(schema.users.firstname, `%${criteria.name}%`), ilike(schema.users.lastname, `%${criteria.name}%`)));
-    }
-    return conditions;
+    return whereConditions;
   }
-  async getUserByMail(email: string) {
+  async searchUserListings(criteria: UserListingCriteria) {
+    const start = criteria.start ? criteria.start : 0;
+    const length = criteria.length ? criteria.length : 12;
+    const query = this.conn.select().from(schema.users);
+    const whereConditions = this.getWhereConditions(criteria);
+
+    if (whereConditions.length > 0) {
+      const whereClause = and(...whereConditions);
+      query.where(whereClause);
+    }
+
+    // Paginierung
+    query.limit(length).offset(start);
+
+    const data = await query;
+    const results = data.map(r => convertDrizzleUserToUser(r));
+    const totalCount = await this.getUserListingsCount(criteria);
+
+    return {
+      results,
+      totalCount,
+    };
+  }
+  async getUserListingsCount(criteria: UserListingCriteria): Promise<number> {
+    const countQuery = this.conn.select({ value: count() }).from(schema.users);
+    const whereConditions = this.getWhereConditions(criteria);
+
+    if (whereConditions.length > 0) {
+      const whereClause = and(...whereConditions);
+      countQuery.where(whereClause);
+    }
+
+    const [{ value: totalCount }] = await countQuery;
+    return totalCount;
+  }
+  async getUserByMail(email: string, jwtuser?: JwtUser) {
     const users = (await this.conn
       .select()
       .from(schema.users)
       .where(sql`email = ${email}`)) as User[];
-    const user = users[0];
-    user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
-    user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
-    return user;
+    if (users.length === 0) {
+      const user: User = { id: undefined, customerType: 'buyer', ...createDefaultUser(email, jwtuser.firstname, jwtuser.lastname) };
+      const u = await this.saveUser(user);
+      return convertDrizzleUserToUser(u);
+    } else {
+      const user = users[0];
+      user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
+      user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
+      return convertDrizzleUserToUser(user);
+    }
   }
   async getUserById(id: string) {
     const users = (await this.conn
       .select()
       .from(schema.users)
       .where(sql`id = ${id}`)) as User[];
+
     const user = users[0];
     user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
     user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
-    return user;
+    return convertDrizzleUserToUser(user);
   }
-  async saveUser(user: any): Promise<User> {
-    if (user.id) {
-      user.created = new Date(user.created);
+  async saveUser(user: User): Promise<User> {
+    try {
       user.updated = new Date();
-      const [updateUser] = await this.conn.update(schema.users).set(user).where(eq(schema.users.id, user.id)).returning();
-      return updateUser as User;
-    } else {
-      user.created = new Date();
-      user.updated = new Date();
-      const [newUser] = await this.conn.insert(schema.users).values(user).returning();
-      return newUser as User;
+      if (user.id) {
+        user.created = new Date(user.created);
+      } else {
+        user.created = new Date();
+      }
+      const validatedUser = UserSchema.parse(user);
+      const drizzleUser = convertUserToDrizzleUser(validatedUser);
+      if (user.id) {
+        const [updateUser] = await this.conn.update(schema.users).set(drizzleUser).where(eq(schema.users.id, user.id)).returning();
+        return convertDrizzleUserToUser(updateUser) as User;
+      } else {
+        const [newUser] = await this.conn.insert(schema.users).values(drizzleUser).returning();
+        return convertDrizzleUserToUser(newUser) as User;
+      }
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const formattedErrors = error.errors.map(err => ({
+          field: err.path.join('.'),
+          message: err.message,
+        }));
+        throw new BadRequestException(formattedErrors);
+      }
+      throw error;
     }
   }
-  async findUser(criteria: ListingCriteria) {
-    const start = criteria.start ? criteria.start : 0;
-    const length = criteria.length ? criteria.length : 12;
-    const conditions = this.getConditions(criteria);
-    const [data, total] = await Promise.all([
-      this.conn
-        .select()
-        .from(schema.users)
-        .where(and(...conditions))
-        .offset(start)
-        .limit(length),
-      this.conn
-        .select({ count: sql`count(*)` })
-        .from(schema.users)
-        .where(and(...conditions))
-        .then(result => Number(result[0].count)),
-    ]);
-    return { total, data };
-  }
   async getStates(): Promise<any[]> {
     const query = sql`SELECT jsonb_array_elements(${schema.users.areasServed}) ->> 'state' AS state, COUNT(DISTINCT ${schema.users.id}) AS count FROM ${schema.users} GROUP BY state ORDER BY count DESC`;
     const result = await this.conn.execute(query);

bizmatch-server/src/utils.ts

@@ -1,3 +1,8 @@
+import { sql } from 'drizzle-orm';
+import { businesses, commercials, users } from './drizzle/schema.js';
+import { BusinessListing, CommercialPropertyListing, User } from './models/db.model.js';
+export const EARTH_RADIUS_KM = 6371; // Erdradius in Kilometern
+export const EARTH_RADIUS_MILES = 3959; // Erdradius in Meilen
 export function convertStringToNullUndefined(value) {
   // Konvertiert den Wert zu Kleinbuchstaben für eine case-insensitive Überprüfung
   const lowerCaseValue = typeof value === 'boolean' ? value : value?.toLowerCase();
@@ -10,4 +15,111 @@ export function convertStringToNullUndefined(value) {
 
   // Gibt den Originalwert zurück, wenn es sich nicht um 'null' oder 'undefined' handelt
   return value;
-}
+}
+
+export const getDistanceQuery = (schema: typeof businesses | typeof commercials | typeof users, lat: number, lon: number, unit: 'km' | 'miles' = 'miles') => {
+  const radius = unit === 'km' ? EARTH_RADIUS_KM : EARTH_RADIUS_MILES;
+
+  return sql`
+    ${radius} * 2 * ASIN(SQRT(
+      POWER(SIN((${lat} - ${schema.latitude}) * PI() / 180 / 2), 2) +
+      COS(${lat} * PI() / 180) * COS(${schema.latitude} * PI() / 180) *
+      POWER(SIN((${lon} - ${schema.longitude}) * PI() / 180 / 2), 2)
+    ))
+  `;
+};
+
+type DrizzleUser = typeof users.$inferSelect;
+type DrizzleBusinessListing = typeof businesses.$inferSelect;
+type DrizzleCommercialPropertyListing = typeof commercials.$inferSelect;
+export function convertBusinessToDrizzleBusiness(businessListing: Partial<BusinessListing>): DrizzleBusinessListing {
+  return flattenObject(businessListing);
+}
+export function convertDrizzleBusinessToBusiness(drizzleBusinessListing: Partial<DrizzleBusinessListing>): BusinessListing {
+  const o = {
+    location_city: drizzleBusinessListing.city,
+    location_state: drizzleBusinessListing.state,
+    location_latitude: drizzleBusinessListing.latitude,
+    location_longitude: drizzleBusinessListing.longitude,
+    ...drizzleBusinessListing,
+  };
+  delete o.city;
+  delete o.state;
+  delete o.latitude;
+  delete o.longitude;
+  return unflattenObject(o);
+}
+export function convertCommercialToDrizzleCommercial(commercialPropertyListing: Partial<CommercialPropertyListing>): DrizzleCommercialPropertyListing {
+  return flattenObject(commercialPropertyListing);
+}
+export function convertDrizzleCommercialToCommercial(drizzleCommercialPropertyListing: Partial<DrizzleCommercialPropertyListing>): CommercialPropertyListing {
+  const o = {
+    location_city: drizzleCommercialPropertyListing.city,
+    location_state: drizzleCommercialPropertyListing.state,
+    location_latitude: drizzleCommercialPropertyListing.latitude,
+    location_longitude: drizzleCommercialPropertyListing.longitude,
+    ...drizzleCommercialPropertyListing,
+  };
+  delete o.city;
+  delete o.state;
+  delete o.latitude;
+  delete o.longitude;
+  return unflattenObject(o);
+}
+export function convertUserToDrizzleUser(user: Partial<User>): DrizzleUser {
+  return flattenObject(user);
+}
+
+export function convertDrizzleUserToUser(drizzleUser: Partial<DrizzleUser>): User {
+  const o = {
+    companyLocation_city: drizzleUser.city,
+    companyLocation_state: drizzleUser.state,
+    companyLocation_latitude: drizzleUser.latitude,
+    companyLocation_longitude: drizzleUser.longitude,
+    ...drizzleUser,
+  };
+  delete o.city;
+  delete o.state;
+  delete o.latitude;
+  delete o.longitude;
+  return unflattenObject(o);
+}
+function flattenObject(obj: any, res: any = {}): any {
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      const value = obj[key];
+
+      if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        if (value instanceof Date) {
+          res[key] = value;
+        } else {
+          flattenObject(value, res);
+        }
+      } else {
+        res[key] = value;
+      }
+    }
+  }
+  return res;
+}
+function unflattenObject(obj: any, separator: string = '_'): any {
+  const result: any = {};
+
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      const keys = key.split(separator);
+      keys.reduce((acc, curr, idx) => {
+        if (idx === keys.length - 1) {
+          acc[curr] = obj[key];
+        } else {
+          if (!acc[curr]) {
+            acc[curr] = {};
+          }
+        }
+        return acc[curr];
+      }, result);
+    }
+  }
+
+  return result;
+}

bizmatch-server/src/utils/importCounties.ts

@@ -0,0 +1,68 @@
+import * as fs from 'fs';
+import * as readline from 'readline';
+
+interface CityData {
+  city: string;
+  stateShort: string;
+  stateFull: string;
+  county: string;
+  cityAlias: string;
+}
+
+interface StateCountyData {
+  state: string;
+  state_full: string;
+  counties: string[];
+}
+
+async function parseData(filePath: string): Promise<CityData[]> {
+  const fileStream = fs.createReadStream(filePath);
+  const rl = readline.createInterface({
+    input: fileStream,
+    crlfDelay: Infinity,
+  });
+
+  const data: CityData[] = [];
+  let isFirstLine = true;
+
+  for await (const line of rl) {
+    if (isFirstLine) {
+      isFirstLine = false;
+      continue; // Skip the first line
+    }
+    const [city, stateShort, stateFull, county, cityAlias] = line.split('|');
+    data.push({ city, stateShort, stateFull, county, cityAlias });
+  }
+
+  return data;
+}
+
+function transformData(data: CityData[]): StateCountyData[] {
+  const stateMap: { [key: string]: { stateFull: string; counties: Set<string> } } = {};
+
+  data.forEach(item => {
+    if (!stateMap[item.stateShort]) {
+      stateMap[item.stateShort] = {
+        stateFull: item.stateFull,
+        counties: new Set(),
+      };
+    }
+    stateMap[item.stateShort].counties.add(item.county);
+  });
+
+  return Object.entries(stateMap).map(([state, value]) => ({
+    state,
+    state_full: value.stateFull,
+    counties: Array.from(value.counties).sort(),
+  }));
+}
+
+async function main() {
+  const filePath = './src/assets/counties_raw.csv'; // Ersetze diesen Pfad mit dem Pfad zu deiner Datei
+  const cityData = await parseData(filePath);
+  const stateCountyData = transformData(cityData);
+
+  console.log(JSON.stringify(stateCountyData, null, 2));
+}
+
+main().catch(err => console.error(err));

bizmatch/live-server.js

@@ -0,0 +1,36 @@
+const liveServer = require('live-server');
+const path = require('path');
+const fs = require('fs');
+const spdy = require('spdy');
+
+const options = {
+  port: 5000,
+  root: '../bizmatch-server/pictures',
+  open: false,
+  https: {
+    cert: fs.readFileSync('certs/cert.pem'),
+    key: fs.readFileSync('certs/key.pem'),
+  },
+  middleware: []
+};
+
+spdy.createServer(options.https, (req, res) => {
+    liveServer.middleware(options.middleware)(req, res, () => {
+      const filePath = path.join(options.root, req.url);
+      fs.readFile(filePath, (err, data) => {
+        if (err) {
+          res.writeHead(404);
+          res.end();
+        } else {
+          res.writeHead(200);
+          res.end(data);
+        }
+      });
+    });
+  }).listen(options.port, (err) => {
+    if (err) {
+      console.error(err);
+    } else {
+      console.log(`Live server is running on https://localhost:${options.port}`);
+    }
+  });

bizmatch/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve & http-server ../bizmatch-server",
+    "start": "ng serve --host 0.0.0.0 & http-server ../bizmatch-server",
     "prebuild": "node version.js",
     "build": "node version.js && ng build",
     "build.dev": "node version.js && ng build --configuration dev --output-hashing=all",
@@ -13,51 +13,53 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.3",
-    "@angular/cdk": "^17.3.2",
-    "@angular/common": "^17.3.3",
-    "@angular/compiler": "^17.3.3",
-    "@angular/core": "^17.3.3",
-    "@angular/forms": "^17.3.3",
-    "@angular/platform-browser": "^17.3.3",
-    "@angular/platform-browser-dynamic": "^17.3.3",
-    "@angular/platform-server": "^17.3.3",
-    "@angular/router": "^17.3.3",
-    "@fortawesome/angular-fontawesome": "^0.14.1",
-    "@fortawesome/fontawesome-free": "^6.5.1",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@types/uuid": "^9.0.8",
-    "angular-cropperjs": "^14.0.1",
-    "angular-mixed-cdk-drag-drop": "^2.2.3",
+    "@angular/animations": "^18.1.3",
+    "@angular/cdk": "^18.0.6",
+    "@angular/common": "^18.1.3",
+    "@angular/compiler": "^18.1.3",
+    "@angular/core": "^18.1.3",
+    "@angular/forms": "^18.1.3",
+    "@angular/platform-browser": "^18.1.3",
+    "@angular/platform-browser-dynamic": "^18.1.3",
+    "@angular/platform-server": "^18.1.3",
+    "@angular/router": "^18.1.3",
+    "@fortawesome/angular-fontawesome": "^0.15.0",
+    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@ng-select/ng-select": "^13.4.1",
+    "@ngneat/until-destroy": "^10.0.0",
+    "@types/cropperjs": "^1.3.0",
+    "@types/uuid": "^10.0.0",
     "browser-bunyan": "^1.8.0",
-    "cropperjs": "^1.6.1",
     "dayjs": "^1.11.11",
     "express": "^4.18.2",
+    "flowbite": "^2.4.1",
     "jwt-decode": "^4.0.0",
-    "keycloak-angular": "^15.2.1",
-    "keycloak-js": "^24.0.4",
+    "keycloak-angular": "^16.0.1",
+    "keycloak-js": "^25.0.1",
     "memoize-one": "^6.0.0",
+    "ngx-currency": "^18.0.0",
+    "ngx-image-cropper": "^8.0.0",
+    "ngx-mask": "^18.0.0",
+    "ngx-quill": "^26.0.5",
     "on-change": "^5.0.1",
-    "primeflex": "^3.3.1",
-    "primeicons": "^6.0.1",
-    "primeng": "^17.16.1",
-    "quill": "^1.3.7",
     "rxjs": "~7.8.1",
-    "tslib": "^2.3.0",
+    "tslib": "^2.6.3",
     "urlcat": "^3.1.0",
-    "uuid": "^9.0.1",
-    "zone.js": "~0.14.4"
+    "uuid": "^10.0.0",
+    "zone.js": "~0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.3",
-    "@angular/cli": "^17.3.3",
-    "@angular/compiler-cli": "^17.3.3",
+    "@angular-devkit/build-angular": "^18.1.3",
+    "@angular/cli": "^18.1.3",
+    "@angular/compiler-cli": "^18.1.3",
     "@types/express": "^4.17.21",
     "@types/jasmine": "~5.1.4",
-    "@types/node": "^20.11.20",
+    "@types/node": "^20.14.9",
+    "autoprefixer": "^10.4.19",
     "http-server": "^14.1.1",
     "jasmine-core": "~5.1.2",
     "karma": "~6.4.2",
@@ -65,6 +67,8 @@
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.3.3"
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "typescript": "~5.4.5"
   }
 }

bizmatch/src/app/app.component.html

@@ -1,31 +1,55 @@
-<div class="container">
-  <div class="content">
-    @if (actualRoute !=='home' && actualRoute !=='pricing'){
-    <header></header>
-    }
-    <router-outlet></router-outlet>
-  </div>
-  <footer></footer>
-  <p-confirmDialog #cd>
-    <ng-template pTemplate="headless" let-message>
-      <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
-        <span class="font-bold text-2xl block mb-2 mt-4">
-          {{ message.header }}
-        </span>
-        <p class="mb-0">{{ message.message }}</p>
-        <div class="flex align-items-center gap-2 mt-4">
-          <button pButton label="OK" (click)="cd.accept()" size="small"></button>
-        </div>
-      </div>
-    </ng-template>
-  </p-confirmDialog>
+<!-- <div class="container"> -->
+<div [ngClass]="{ 'bg-slate-100': actualRoute !== 'home' }">
+  @if (actualRoute !=='home' && actualRoute !=='pricing'){
+  <header></header>
+  }
+  <router-outlet></router-outlet>
+
+  <app-footer></app-footer>
 </div>
 
 @if (loadingService.isLoading$ | async) {
 <div class="spinner-overlay">
   <div class="spinner-container">
-    <p-progressSpinner></p-progressSpinner>
-    <div class="spinner-text" *ngIf="loadingService.loadingText$ | async as loadingText">{{ loadingText }}</div>
+    @let loadingText = (loadingService.loadingText$ | async); @if(loadingText){
+    <div class="spinner-text">{{ loadingText }}</div>
+    }
+    <div role="status">
+      <svg aria-hidden="true" class="inline w-10 h-10 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+        />
+      </svg>
+      <!-- <span class="sr-only">Loading ...</span> -->
+    </div>
   </div>
 </div>
 }
+<!-- <div *ngIf="loadingService.isLoading$ | async" class="spinner-overlay">
+  <div class="spinner-container">
+    <ng-container *ngIf="loadingService.loadingText$ | async as loadingText">
+      <div *ngIf="loadingText" class="spinner-text">{{ loadingText }}</div>
+    </ng-container>
+    <div role="status">
+      <svg aria-hidden="true" class="inline w-10 h-10 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+        />
+      </svg>
+    </div>
+  </div>
+</div> -->
+
+<app-message-container></app-message-container>
+<app-search-modal></app-search-modal>
+<app-confirmation></app-confirmation>

bizmatch/src/app/app.component.scss

@@ -1,64 +1,48 @@
-.container {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-}
-.content {
-    flex: 1;
-    /* Optional: Padding für den Inhalt, um sicherzustellen, dass er nicht direkt am Footer klebt */
-    // padding-bottom: 20px; 
-}
-.progress-spinner {
-	position: fixed;
-	z-index: 999;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
+// .progress-spinner {
+//   position: fixed;
+//   z-index: 999;
+//   top: 0;
+//   left: 0;
+//   bottom: 0;
+//   right: 0;
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+// }
 
-.progress-spinner:before {
-	content: '';
-	display: block;
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, 0.3);
-}
+// .progress-spinner:before {
+//   content: '';
+//   display: block;
+//   position: fixed;
+//   top: 0;
+//   left: 0;
+//   width: 100%;
+//   height: 100%;
+//   background-color: rgba(0, 0, 0, 0.3);
+// }
 .spinner-text {
-	margin-top: 20px; /* Abstand zwischen Spinner und Text anpassen */
-	font-size: 20px; /* Schriftgröße nach Bedarf anpassen */
-	color: #FFF;
-	text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* Hinzufügen eines leichten Glows */  
-	font-weight: bold; /* Macht den Text fett */
+  margin-top: 20px; /* Abstand zwischen Spinner und Text anpassen */
+  font-size: 20px; /* Schriftgröße nach Bedarf anpassen */
+  color: #fff;
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* Hinzufügen eines leichten Glows */
+  font-weight: bold; /* Macht den Text fett */
 }
 .spinner-overlay {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	position: fixed; /* oder 'absolute', abhängig vom Kontext */
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, 0.4);
-	z-index: 1000; /* Stellt sicher, dass der Overlay über anderen Elementen liegt */
-  }
-  
-  .spinner-container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	/* Keine Hintergrundfarbe hier, um Transparenz nur im Overlay zu haben */
-  }
-  
-//   .spinner-text {
-// 	margin-top: 10px; /* Abstand zwischen Spinner und Text anpassen */
-// 	font-size: 16px; /* Schriftgröße nach Bedarf anpassen */
-// 	color: #FFF; /* Schriftfarbe für bessere Lesbarkeit auf dunklem Hintergrund */
-//   }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed; /* oder 'absolute', abhängig vom Kontext */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 1000; /* Stellt sicher, dass der Overlay über anderen Elementen liegt */
+}
+
+.spinner-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* Keine Hintergrundfarbe hier, um Transparenz nur im Overlay zu haben */
+}

bizmatch/src/app/app.component.ts

@@ -2,23 +2,23 @@ import { CommonModule } from '@angular/common';
 import { Component, HostListener } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { KeycloakService } from 'keycloak-angular';
-import onChange from 'on-change';
-import { ConfirmationService } from 'primeng/api';
-import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import { ProgressSpinnerModule } from 'primeng/progressspinner';
+
 import { filter } from 'rxjs/operators';
-import { ListingCriteria } from '../../../bizmatch-server/src/models/main.model';
 import build from '../build';
+import { ConfirmationComponent } from './components/confirmation/confirmation.component';
+import { ConfirmationService } from './components/confirmation/confirmation.service';
 import { FooterComponent } from './components/footer/footer.component';
 import { HeaderComponent } from './components/header/header.component';
+import { MessageContainerComponent } from './components/message/message-container.component';
+import { SearchModalComponent } from './components/search-modal/search-modal.component';
 import { LoadingService } from './services/loading.service';
 import { UserService } from './services/user.service';
-import { createDefaultListingCriteria } from './utils/utils';
+
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet, HeaderComponent, ProgressSpinnerModule, FooterComponent, ConfirmDialogModule],
-  providers: [ConfirmationService],
+  imports: [CommonModule, RouterOutlet, HeaderComponent, FooterComponent, MessageContainerComponent, SearchModalComponent, ConfirmationComponent],
+  providers: [],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
@@ -26,9 +26,7 @@ export class AppComponent {
   build = build;
   title = 'bizmatch';
   actualRoute = '';
-  listingCriteria: ListingCriteria = onChange(createDefaultListingCriteria(), (path, value, previousValue, applyData) => {
-    sessionStorage.setItem('criteria', JSON.stringify(value));
-  });
+
   public constructor(
     public loadingService: LoadingService,
     private router: Router,
@@ -49,19 +47,17 @@ export class AppComponent {
   ngOnInit() {}
   @HostListener('window:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
+    // this.router.events.subscribe(event => {
+    //   if (event instanceof NavigationEnd) {
+    //     initFlowbite();
+    //   }
+    // });
     if (event.shiftKey && event.ctrlKey && event.key === 'V') {
       this.showVersionDialog();
     }
   }
 
   showVersionDialog() {
-    this.confirmationService.confirm({
-      target: event.target as EventTarget,
-      message: `App Version: ${this.build.timestamp}`,
-      header: 'Version Info',
-      icon: 'pi pi-info-circle',
-      accept: () => {},
-      reject: () => {},
-    });
+    this.confirmationService.showConfirmation({ message: `App Version: ${this.build.timestamp}`, buttons: 'none' });
   }
 }

bizmatch/src/app/app.config.ts

@@ -4,6 +4,7 @@ import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScroll
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { KeycloakBearerInterceptor, KeycloakService } from 'keycloak-angular';
+import { provideQuillConfig } from 'ngx-quill';
 import { environment } from '../environments/environment';
 import { customKeycloakAdapter } from '../keycloak';
 import { routes } from './app.routes';
@@ -51,6 +52,18 @@ export const appConfig: ApplicationConfig = {
       }),
     ),
     provideAnimations(),
+    provideQuillConfig({
+      modules: {
+        syntax: true,
+        toolbar: [
+          ['bold', 'italic', 'underline'], // Einige Standardoptionen
+          [{ header: [1, 2, 3, false] }], // Benutzerdefinierte Header
+          [{ list: 'ordered' }, { list: 'bullet' }],
+          [{ color: [] }], // Dropdown mit Standardfarben
+          ['clean'], // Entfernt Formatierungen
+        ],
+      },
+    }),
   ],
 };
 function initServices(selectOptions: SelectOptionsService) {

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

@@ -0,0 +1,54 @@
+import { Component, Input } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { initFlowbite } from 'flowbite';
+import { Subscription } from 'rxjs';
+import { ValidationMessagesService } from '../validation-messages.service';
+
+@Component({
+  selector: 'app-base-input',
+  template: ``,
+  standalone: true,
+  imports: [],
+})
+export abstract class BaseInputComponent implements ControlValueAccessor {
+  @Input() value: any = '';
+  validationMessage: string = '';
+  onChange: any = () => {};
+  onTouched: any = () => {};
+  subscription: Subscription | null = null;
+  @Input() label: string = '';
+  // @Input() id: string = '';
+  @Input() name: string = '';
+  constructor(protected validationMessagesService: ValidationMessagesService) {}
+  ngOnInit() {
+    this.subscription = this.validationMessagesService.messages$.subscribe(() => {
+      this.updateValidationMessage();
+    });
+    setTimeout(() => {
+      initFlowbite();
+    }, 10);
+  }
+
+  ngOnDestroy() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+  writeValue(value: any): void {
+    if (value !== undefined) {
+      this.value = value;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  updateValidationMessage(): void {
+    this.validationMessage = this.validationMessagesService.getMessage(this.name);
+  }
+  setDisabledState?(isDisabled: boolean): void {}
+}

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

@@ -0,0 +1,53 @@
+import { AsyncPipe, NgIf } from '@angular/common';
+import { Component } from '@angular/core';
+import { ConfirmationService } from './confirmation.service';
+
+@Component({
+  selector: 'app-confirmation',
+  standalone: true,
+  imports: [AsyncPipe, NgIf],
+  template: `
+    <div *ngIf="confirmationService.modalVisible$ | async" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
+      <div class="relative p-4 w-full max-w-md max-h-full">
+        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+          <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"
+          >
+            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+            </svg>
+            <span class="sr-only">Close modal</span>
+          </button>
+          <div 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">
+              <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>
+            @if(confirmation.buttons==='both'){
+            <button
+              (click)="confirmationService.accept()"
+              type="button"
+              class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2"
+            >
+              Yes, I'm sure
+            </button>
+            <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"
+            >
+              No, cancel
+            </button>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class ConfirmationComponent {
+  constructor(public confirmationService: ConfirmationService) {}
+}

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

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+export interface Confirmation {
+  message: string;
+  buttons?: 'both' | 'none';
+  button_accept_label?: string;
+  button_reject_label?: string;
+}
+@Injectable({
+  providedIn: 'root',
+})
+export class ConfirmationService {
+  private modalVisibleSubject = new BehaviorSubject<boolean>(false);
+  private confirmationSubject = new BehaviorSubject<Confirmation>({ message: '' });
+  private resolvePromise!: (value: boolean) => void;
+
+  modalVisible$: Observable<boolean> = this.modalVisibleSubject.asObservable();
+  confirmation$: Observable<Confirmation> = this.confirmationSubject.asObservable();
+
+  showConfirmation(confirmation: Confirmation): Promise<boolean> {
+    confirmation.buttons = confirmation.buttons ? confirmation.buttons : 'both';
+    this.confirmationSubject.next(confirmation);
+    this.modalVisibleSubject.next(true);
+    return new Promise<boolean>(resolve => {
+      this.resolvePromise = resolve;
+    });
+  }
+
+  accept(): void {
+    this.modalVisibleSubject.next(false);
+    this.resolvePromise(true);
+  }
+
+  reject(): void {
+    this.modalVisibleSubject.next(false);
+    this.resolvePromise(false);
+  }
+}

bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.html

@@ -0,0 +1,24 @@
+<div #_container class="container">
+  <!-- <div
+    *ngFor="let item of items"
+    cdkDrag
+    (cdkDragEnded)="dragEnded($event)"
+    (cdkDragStarted)="dragStarted()"
+    (cdkDragMoved)="dragMoved($event)"
+    class="item"
+    [class.animation]="isAnimationActive"
+    [class.large]="item === 3"
+  >
+    Drag Item {{ item }}
+  </div> -->
+  <div *ngFor="let item of items" cdkDrag (cdkDragEnded)="dragEnded($event)" (cdkDragStarted)="dragStarted()" (cdkDragMoved)="dragMoved($event)" [class.animation]="isAnimationActive" class="grid-item item">
+    <div class="image-box hover:cursor-pointer">
+      <img [src]="getImageUrl(item)" class="w-full h-full object-cover rounded-lg shadow-md" />
+      <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md" (click)="imageToDelete.emit(item)">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>

bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.scss

@@ -0,0 +1,41 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+}
+
+.item {
+  // max-width: 200px;
+  max-height: 150px;
+  // background-color: blanchedalmond;
+}
+
+.animation.cdk-drag:not(.cdk-drag-dragging) {
+  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.large {
+  width: 150px;
+}
+// --------------------
+.image-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.grid-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 16 / 9;
+  background-color: #f0f0f0;
+  border-radius: 8px;
+  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
+.grid-item:active {
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}

bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.ts

@@ -0,0 +1,478 @@
+import { CdkDrag, CdkDragEnd, CdkDragMove, DragDropModule, DragRef, moveItemInArray } from '@angular/cdk/drag-drop';
+import { _getShadowRoot } from '@angular/cdk/platform';
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, ElementRef, Input, input, output, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { CommercialPropertyListing } from '../../../../../bizmatch-server/src/models/db.model';
+import { environment } from '../../../environments/environment';
+@Component({
+  selector: 'app-drag-drop-mixed',
+  standalone: true,
+  imports: [CommonModule, DragDropModule],
+  templateUrl: './drag-drop-mixed.component.html',
+  styleUrl: './drag-drop-mixed.component.scss',
+})
+export class DragDropMixedComponent {
+  @ViewChild('_container') _container!: ElementRef<HTMLDivElement>;
+  @ViewChildren(CdkDrag) _drags!: QueryList<CdkDrag>;
+  @Input() ts: number;
+  listing = input<CommercialPropertyListing>();
+  imageOrderChanged = output<string[]>();
+  imageToDelete = output<string>();
+  env = environment;
+  items: string[] = []; //[1, 2, 3, 4, 5, 6, 7, 8, 9];
+  private _cachedItems: string[] = []; //[1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+  private _itemPositions: CachedItemPosition<DragRef>[] = [];
+  private _rootNode: DocumentOrShadowRoot | undefined;
+  private _activeItems: DragRef[] = [];
+  private _previousSwap = {
+    drag: null as DragRef | null,
+    deltaX: 0,
+    deltaY: 0,
+    overlaps: false,
+  };
+  private _containerStyle: CSSStyleDeclaration | null = null;
+  public isAnimationActive = false;
+  constructor(private cdr: ChangeDetectorRef) {}
+  ngOnChanges() {
+    this.items = this.listing()?.imageOrder;
+    this._cachedItems = this.items.slice();
+  }
+  ngAfterViewInit() {
+    // Führen Sie einen zusätzlichen Change Detection-Zyklus durch
+    this.cdr.detectChanges();
+  }
+  getImageUrl(image: string): string {
+    return `${this.env.imageBaseUrl}/pictures/property/${this.listing().imagePath}/${this.listing().serialId}/${image}?_ts=${this.ts}`;
+  }
+
+  dragStarted() {
+    this.start();
+  }
+
+  dragMoved(event: CdkDragMove) {
+    const item = event.source._dragRef;
+    this.sort(item, event.pointerPosition.x, event.pointerPosition.y, event.delta);
+  }
+
+  dragEnded(event: CdkDragEnd) {
+    this.imageOrderChanged.emit(this._cachedItems);
+    this.reset();
+  }
+
+  start() {
+    const dragRefs: DragRef[] = [];
+
+    this._drags.forEach(drag => {
+      dragRefs.push(drag._dragRef);
+    });
+
+    this._activeItems = dragRefs;
+    this._cacheItemPosition();
+    this.isAnimationActive = true;
+  }
+
+  sort(item: DragRef, pointerX: number, pointerY: number, pointerDelta: { x: number; y: number }) {
+    const siblings = this._itemPositions.slice();
+    const newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY);
+
+    const previousSwap = this._previousSwap;
+
+    if (newIndex === -1 || this._activeItems[newIndex] === item) {
+      return;
+    }
+
+    const toSwapWith = this._activeItems[newIndex];
+
+    if (previousSwap.drag === toSwapWith && previousSwap.overlaps && previousSwap.deltaX === pointerDelta.x && previousSwap.deltaY === pointerDelta.y) {
+      return;
+    }
+
+    const previousIndex = this.getItemIndex(item);
+    const siblingAtNewPosition = siblings[newIndex];
+    const previousPosition = siblings[previousIndex].clientRect;
+    const newPosition = siblingAtNewPosition.clientRect;
+
+    const delta = this.getDelta(newPosition.top, previousPosition.top, pointerDelta);
+
+    if (delta === 0) return;
+    if (delta === 1 && previousIndex > newIndex) return;
+    if (delta === -1 && previousIndex < newIndex) return;
+
+    const startIndex = Math.min(previousIndex, newIndex);
+    const endIndex = Math.max(previousIndex, newIndex);
+
+    let itemPositions = this._itemPositions.slice();
+
+    if (delta === 1) {
+      for (let i = startIndex; i < endIndex; i++) {
+        itemPositions = this._updateItemPosition(i, itemPositions, delta);
+
+        const newIndex = i + 1;
+        moveItemInArray(itemPositions, i, newIndex);
+      }
+    } else if (delta === -1) {
+      for (let i = endIndex; i > startIndex; i--) {
+        itemPositions = this._updateItemPosition(i, itemPositions, delta);
+
+        const newIndex = i - 1;
+        moveItemInArray(itemPositions, i, newIndex);
+      }
+    }
+
+    const threshold = getMutableClientRect(this._container.nativeElement).right;
+
+    let currentTop = itemPositions[0].clientRect.top;
+
+    for (let i = 0; i < itemPositions.length; i++) {
+      const itemPosition = itemPositions[i];
+      if (Math.round(itemPosition.clientRect.right) > Math.round(threshold)) {
+        const nextPosition = itemPositions[i + 1];
+        if (nextPosition) {
+          currentTop = nextPosition.clientRect.top;
+        }
+        itemPositions = this._updateItemPositionToDown(itemPositions, i);
+      } else if (itemPosition.clientRect.top !== currentTop) {
+        currentTop = itemPosition.clientRect.top;
+        itemPositions = this._updateItemPositionToUp(itemPositions, i);
+      }
+    }
+
+    const oldOrder = this._itemPositions.slice();
+    this._itemPositions = itemPositions;
+    moveItemInArray(this._activeItems, previousIndex, newIndex);
+    moveItemInArray(this._cachedItems, previousIndex, newIndex);
+
+    itemPositions.forEach((sibling, index) => {
+      if (oldOrder[index] === sibling) {
+        return;
+      }
+
+      const isDraggedItem = sibling.drag === item;
+      if (isDraggedItem) return;
+      const elementToOffset = sibling.drag.getRootElement();
+
+      elementToOffset.style.transform = `translate3d(${Math.round(sibling.transform.x)}px, ${Math.round(sibling.transform.y)}px, 0)`;
+    });
+
+    previousSwap.deltaX = pointerDelta.x;
+    previousSwap.deltaY = pointerDelta.y;
+    previousSwap.drag = toSwapWith;
+    previousSwap.overlaps = isInsideClientRect(newPosition, pointerX, pointerY);
+  }
+
+  reset() {
+    // ignore animation
+    this.isAnimationActive = false;
+    const previousSwap = this._previousSwap;
+    this.items = this._cachedItems.slice();
+    this._activeItems.forEach(item => {
+      item.reset();
+    });
+    this._itemPositions = [];
+    this._activeItems = [];
+    previousSwap.drag = null;
+    previousSwap.deltaX = previousSwap.deltaY = 0;
+    previousSwap.overlaps = false;
+  }
+
+  getItemIndex(item: DragRef): number {
+    return this._activeItems.indexOf(item);
+  }
+
+  getDelta(newTop: number, previousTop: number, pointerDelta: { x: number; y: number }) {
+    if (newTop === previousTop) {
+      return pointerDelta.x;
+    }
+
+    return newTop > previousTop ? 1 : -1;
+  }
+
+  private _getRootNode(): DocumentOrShadowRoot {
+    if (!this._rootNode) {
+      this._rootNode = _getShadowRoot(this._container.nativeElement) || document;
+    }
+    return this._rootNode;
+  }
+
+  private _cacheItemPosition() {
+    this._itemPositions = this._activeItems.map(drag => {
+      const elementToMeasure = drag.getRootElement();
+      return {
+        drag,
+        clientRect: getMutableClientRect(elementToMeasure),
+        transform: {
+          x: 0,
+          y: 0,
+        },
+      };
+    });
+
+    this._containerStyle = getComputedStyle(this._container.nativeElement);
+  }
+
+  private _updateItemPosition(currentIndex: number, siblings: CachedItemPosition<DragRef>[], delta: number) {
+    let siblingsUpdated = siblings.slice();
+    const offsetVertical = this._getOffset(currentIndex, siblingsUpdated, delta, false);
+    const offsetHorizontal = this._getOffset(currentIndex, siblingsUpdated, delta, true);
+
+    const immediateIndex = currentIndex + delta * 1;
+    const currentItem = siblingsUpdated[currentIndex];
+    const immediateSibling = siblingsUpdated[immediateIndex];
+
+    const currentItemUpdated: CachedItemPosition<DragRef> = {
+      ...currentItem,
+      clientRect: {
+        ...currentItem.clientRect,
+        x: currentItem.clientRect.x + offsetHorizontal.itemOffset,
+        left: currentItem.clientRect.left + offsetHorizontal.itemOffset,
+        right: currentItem.clientRect.right + offsetHorizontal.itemOffset,
+        y: currentItem.clientRect.y + offsetVertical.itemOffset,
+        top: currentItem.clientRect.top + offsetVertical.itemOffset,
+        bottom: currentItem.clientRect.bottom + offsetVertical.itemOffset,
+      },
+      transform: {
+        x: currentItem.transform.x + offsetHorizontal.itemOffset,
+        y: currentItem.transform.y + offsetVertical.itemOffset,
+      },
+    };
+
+    const immediateSiblingUpdated: CachedItemPosition<DragRef> = {
+      ...immediateSibling,
+      clientRect: {
+        ...immediateSibling.clientRect,
+        x: immediateSibling.clientRect.x + offsetHorizontal.siblingOffset,
+        left: immediateSibling.clientRect.left + offsetHorizontal.siblingOffset,
+        right: immediateSibling.clientRect.right + offsetHorizontal.siblingOffset,
+        y: immediateSibling.clientRect.y + offsetVertical.siblingOffset,
+        top: immediateSibling.clientRect.top + offsetVertical.siblingOffset,
+        bottom: immediateSibling.clientRect.bottom + offsetVertical.siblingOffset,
+      },
+      transform: {
+        x: immediateSibling.transform.x + offsetHorizontal.siblingOffset,
+        y: immediateSibling.transform.y + offsetVertical.siblingOffset,
+      },
+    };
+
+    if (offsetVertical.itemOffset !== offsetVertical.siblingOffset) {
+      const offset = (currentItemUpdated.clientRect.right - immediateSibling.clientRect.right) * delta;
+      const top = delta === 1 ? immediateSibling.clientRect.top : currentItem.clientRect.top;
+
+      const ignoreItem = delta === 1 ? immediateSibling.drag : currentItem.drag;
+
+      siblingsUpdated = this._updateItemPositionHorizontalOnRow(siblingsUpdated, top, offset, ignoreItem);
+    }
+    siblingsUpdated[currentIndex] = currentItemUpdated;
+    siblingsUpdated[immediateIndex] = immediateSiblingUpdated;
+
+    return siblingsUpdated;
+  }
+
+  private _updateItemPositionToUp(siblings: CachedItemPosition<DragRef>[], currentIndex: number) {
+    let siblingsUpdated = siblings.slice();
+    const immediateSibling = siblingsUpdated[currentIndex - 1];
+    const currentItem = siblingsUpdated[currentIndex];
+
+    const nextEmptySlotLeft = immediateSibling.clientRect.right + this.getContainerGapPixel();
+
+    const threshold = getMutableClientRect(this._container.nativeElement).right;
+    if (nextEmptySlotLeft + currentItem.clientRect.right - currentItem.clientRect.left <= threshold) {
+      const offsetLeft = nextEmptySlotLeft - currentItem.clientRect.left;
+      const offsetTop = immediateSibling.clientRect.top - currentItem.clientRect.top;
+
+      const nextSibling = siblingsUpdated[currentIndex + 1];
+      if (nextSibling) {
+        const offset = currentItem.clientRect.left - nextSibling.clientRect.left;
+        siblingsUpdated = this._updateItemPositionHorizontalOnRow(siblingsUpdated, currentItem.clientRect.top, offset, currentItem.drag);
+      }
+
+      siblingsUpdated[currentIndex] = {
+        ...currentItem,
+        clientRect: {
+          ...currentItem.clientRect,
+          x: nextEmptySlotLeft,
+          left: nextEmptySlotLeft,
+          right: currentItem.clientRect.right - currentItem.clientRect.left + nextEmptySlotLeft,
+          y: immediateSibling.clientRect.y,
+          top: immediateSibling.clientRect.top,
+          bottom: currentItem.clientRect.bottom - currentItem.clientRect.top + immediateSibling.clientRect.top,
+        },
+        transform: {
+          x: currentItem.transform.x + offsetLeft,
+          y: currentItem.transform.y + offsetTop,
+        },
+      };
+    }
+
+    return siblingsUpdated;
+  }
+
+  private _updateItemPositionToDown(siblings: CachedItemPosition<DragRef>[], currentIndex: number) {
+    let siblingsUpdated = siblings.slice();
+    const currentItem = siblingsUpdated[currentIndex];
+    const immediateSibling = siblingsUpdated[currentIndex + 1];
+    let offsetLeft = 0;
+    let offsetTop = 0;
+
+    if (immediateSibling) {
+      offsetLeft = immediateSibling.clientRect.left - currentItem.clientRect.left;
+      offsetTop = immediateSibling.clientRect.top - currentItem.clientRect.top;
+    } else {
+      const firstSibling = siblings.find(item => item.clientRect.top === currentItem.clientRect.top);
+
+      if (firstSibling) {
+        offsetLeft = firstSibling.clientRect.left - currentItem.clientRect.left;
+      }
+
+      offsetTop = currentItem.clientRect.bottom - currentItem.clientRect.top + this.getContainerGapPixel();
+    }
+
+    const currentItemUpdated: CachedItemPosition<DragRef> = {
+      ...currentItem,
+      clientRect: {
+        ...currentItem.clientRect,
+        x: currentItem.clientRect.x + offsetLeft,
+        left: currentItem.clientRect.left + offsetLeft,
+        right: currentItem.clientRect.right + offsetLeft,
+        y: currentItem.clientRect.y + offsetTop,
+        top: currentItem.clientRect.top + offsetTop,
+        bottom: currentItem.clientRect.bottom + offsetTop,
+      },
+      transform: {
+        x: currentItem.transform.x + offsetLeft,
+        y: currentItem.transform.y + offsetTop,
+      },
+    };
+
+    if (immediateSibling) {
+      const offset = currentItemUpdated.clientRect.right - immediateSibling.clientRect.left + this.getContainerGapPixel();
+
+      siblingsUpdated = this._updateItemPositionHorizontalOnRow(siblingsUpdated, immediateSibling.clientRect.top, offset);
+    }
+
+    siblingsUpdated[currentIndex] = currentItemUpdated;
+    return siblingsUpdated;
+  }
+
+  private _updateItemPositionHorizontalOnRow(siblings: CachedItemPosition<DragRef>[], top: number, offset: number, ignoreItem?: DragRef) {
+    const siblingsUpdated = siblings.slice();
+
+    siblingsUpdated
+      .filter(item => (!ignoreItem || item.drag !== ignoreItem) && item.clientRect.top === top)
+      .forEach(currentItem => {
+        const index = siblingsUpdated.findIndex(item => item.drag === currentItem.drag);
+
+        siblingsUpdated[index] = {
+          ...siblingsUpdated[index],
+          clientRect: {
+            ...siblingsUpdated[index].clientRect,
+            x: siblingsUpdated[index].clientRect.x + offset,
+            left: siblingsUpdated[index].clientRect.left + offset,
+            right: siblingsUpdated[index].clientRect.right + offset,
+          },
+          transform: {
+            ...siblingsUpdated[index].transform,
+            x: siblingsUpdated[index].transform.x + offset,
+          },
+        };
+      });
+
+    return siblingsUpdated;
+  }
+
+  private _getItemIndexFromPointerPosition(item: DragRef, pointerX: number, pointerY: number) {
+    const elementAtPoints = this._getRootNode().elementsFromPoint(Math.floor(pointerX), Math.floor(pointerY));
+
+    const elementAtPoint = elementAtPoints.find(element => {
+      // ignore element is transiting
+      const animations = element.getAnimations();
+      const isTransitionRunning = animations.length > 0;
+
+      return !isTransitionRunning && this._itemPositions.some(item => item.drag.getRootElement() === element) && element !== item.getRootElement();
+    });
+
+    const index = elementAtPoint
+      ? this._itemPositions.findIndex(({ drag }) => {
+          // Skip the item itself.
+          if (drag === item) {
+            return false;
+          }
+
+          const root = drag.getRootElement();
+          return elementAtPoint === root || root.contains(elementAtPoint);
+        })
+      : -1;
+    return index;
+  }
+
+  private _getOffset(currentIndex: number, siblings: CachedItemPosition<DragRef>[], delta: number, isHorizontal: boolean) {
+    const currentPosition = siblings[currentIndex].clientRect;
+    const immediateSibling = siblings[currentIndex + delta].clientRect;
+
+    let itemOffset = 0;
+    let siblingOffset = 0;
+
+    if (immediateSibling) {
+      const start = isHorizontal ? 'left' : 'top';
+      const end = isHorizontal ? 'right' : 'bottom';
+
+      if (delta === 1) {
+        itemOffset = immediateSibling[end] - currentPosition[end];
+        siblingOffset = currentPosition[start] - immediateSibling[start];
+
+        if (isHorizontal && immediateSibling[end] < currentPosition[end]) {
+          itemOffset = immediateSibling[start] - currentPosition[start];
+        }
+      } else {
+        itemOffset = immediateSibling[start] - currentPosition[start];
+        siblingOffset = currentPosition[end] - immediateSibling[end];
+
+        if (isHorizontal && immediateSibling[end] > currentPosition[end]) {
+          siblingOffset = currentPosition[start] - immediateSibling[start];
+        }
+      }
+    }
+
+    return {
+      itemOffset,
+      siblingOffset,
+    };
+  }
+
+  private getContainerGapPixel() {
+    if (this._containerStyle && (this._containerStyle.display === 'flex' || this._containerStyle.display === 'grid')) {
+      return this._containerStyle.gap ? +this._containerStyle.gap.split('px')[0] : 0;
+    }
+
+    return 0;
+  }
+}
+
+const getMutableClientRect = (element: Element): DOMRect => {
+  const rect = element.getBoundingClientRect();
+
+  return {
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height,
+    x: rect.x,
+    y: rect.y,
+  } as DOMRect;
+};
+
+const isInsideClientRect = (clientRect: DOMRect, x: number, y: number) => {
+  const { top, bottom, left, right } = clientRect;
+  return y >= top && y <= bottom && x >= left && x <= right;
+};
+
+interface CachedItemPosition<T> {
+  drag: T;
+  clientRect: DOMRect;
+  transform: {
+    x: number;
+    y: number;
+  };
+}

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

@@ -0,0 +1 @@
+<p>dropdown works!</p>

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

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

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

@@ -1,4 +1,4 @@
-<div class="surface-0 px-4 py-4 md:px-6 lg:px-8">
+<!-- <div class="surface-0 px-4 py-4 md:px-6 lg:px-8">
   <div class="surface-0">
     <div class="grid">
       <div class="col-12 md:col-3 md:mb-0 mb-3 cursor-pointer" routerLink="/home">
@@ -24,8 +24,507 @@
       </div>
     </div>
   </div>
+</div> -->
+
+<footer class="bg-white px-4 py-2 md:px-6 mt-auto w-full">
+  <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">
+      <img src="assets/images/header-logo.png" alt="BizMatch Logo" class="h-8 mb-2 lg:mb-0 lg:mr-4" />
+      <p class="text-sm text-gray-600 text-center lg:text-left">© {{ currentYear }} Bizmatch All rights reserved.</p>
+    </div>
+
+    <div class="flex flex-col lg:flex-row items-center order-3 lg:order-2">
+      <a class="text-sm text-blue-600 hover:underline hover:cursor-pointer mx-2" data-drawer-target="terms-of-use" data-drawer-show="terms-of-use" aria-controls="terms-of-use">Terms of use</a>
+      <a class="text-sm text-blue-600 hover:underline hover:cursor-pointer mx-2" data-drawer-target="privacy" data-drawer-show="privacy" aria-controls="privacy">Privacy statement</a>
+    </div>
+
+    <div class="flex flex-col lg:flex-row items-center order-2 lg:order-3">
+      <div class="mb-4 lg:mb-0 lg:mr-6 text-center lg:text-right">
+        <p class="text-sm text-gray-600 mb-1 lg:mb-2">BizMatch, Inc., 1001 Blucher Street, Corpus</p>
+        <p class="text-sm text-gray-600">Christi, Texas 78401</p>
+      </div>
+
+      <div class="mb-4 lg:mb-0 flex flex-col items-center lg:items-end">
+        <a class="text-sm text-gray-600 mb-1 lg:mb-2 hover:text-blue-600 w-full"> <i class="fas fa-phone-alt mr-2"></i>1-800-840-6025 </a>
+        <a class="text-sm text-gray-600 hover:text-blue-600"> <i class="fas fa-envelope mr-2"></i>info&#64;bizmatch.net </a>
+      </div>
+    </div>
+  </div>
+</footer>
+<div id="privacy" class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white lg:w-1/3 w-96 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-label">
+  <h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
+    <svg class="w-4 h-4 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+      <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+    </svg>
+    Privacy Statement
+  </h5>
+  <section id="content" role="main">
+    <article id="post-2" class="post-2 page type-page status-publish hentry pmpro-has-access">
+      <section class="entry-content">
+        <div class="container" style="padding: 3.5% 0 3.75% 0 !important">
+          <p>
+            <strong>Privacy Policy</strong><br />
+            We are committed to protecting your privacy. We have established this statement as a testament to our commitment to your privacy.
+          </p>
+          <p>This Privacy Policy relates to the use of any personal information you provide to us through this websites.</p>
+          <p>
+            By accepting the Privacy Policy during registration or the sending of an enquiry, you expressly consent to our collection, storage, use and disclosure of your personal information as described in this Privacy
+            Policy.
+          </p>
+          <p>
+            We may update our Privacy Policy from time to time. Our Privacy Policy was last updated in Febuary 2018 and is effective upon acceptance for new users. By continuing to use our websites or otherwise
+            continuing to deal with us, you accept this Privacy Policy.
+          </p>
+          <p>
+            <strong>Collection of personal information</strong><br />
+            Anyone can browse our websites without revealing any personally identifiable information.
+          </p>
+          <p>However, should you wish to contact a business for sale, a franchise opportunity or an intermediary, we will require you to provide some personal information.</p>
+          <p>Should you wish to advertise your services, your business (es) or your franchise opportunity, we will require you to provide some personal information.</p>
+          <p>By providing personal information, you are consenting to the transfer and storage of that information on our servers located in the United States.</p>
+          <p>We may collect and store the following personal information:</p>
+          <p>
+            Your name, email address, physical address, telephone numbers, and (depending on the service used), your business information, financial information, such as credit / payment card details;<br />
+            transactional information based on your activities on the site; information that you disclose in a forum on any of our websites, feedback, correspondence through our websites, and correspondence sent to
+            us;<br />
+            other information from your interaction with our websites, services, content and advertising, including computer and connection information, statistics on page views, traffic to and from the sites, ad data,
+            IP address and standard web log information;<br />
+            supplemental information from third parties (for example, if you incur a debt, we will generally conduct a credit check by obtaining additional information about you from a credit bureau, as permitted by law;
+            or if the information you provide cannot be verified,<br />
+            we may ask you to send us additional information, or to answer additional questions online to help verify your information).
+          </p>
+          <p>
+            <strong>How we use your information</strong><br />
+            The primary reason we collect your personal information is to improve the services we deliver to you through our website. By registering or sending an enquiry through our website, you agree that we may use
+            your personal information to:<br />
+            provide the services and customer support you request;<br />
+            connect you with relevant parties:<br />
+            If you are a buyer we will pass some or all of your details on to the seller / intermediary along with any message you have typed. This allows the seller to contact you in order to pursue a possible sale of a
+            business;<br />
+            If you are a seller / intermediary, we will disclose your details where you have given us permission to do so;<br />
+            resolve disputes, collect fees, and troubleshoot problems;<br />
+            prevent potentially prohibited or illegal activities, and enforce our Terms and Conditions;<br />
+            customize, measure and improve our services, conduct internal market research, provide content and advertising;<br />
+            tell you about other Biz-Match products and services, target marketing, send you service updates, and promotional offers based on your communication preferences.
+          </p>
+          <p>
+            <strong>Our disclosure of your information</strong><br />
+            We may disclose personal information to respond to legal requirements, enforce our policies, respond to claims that a listing or other content infringes the rights of others, or protect anyone’s rights,
+            property, or safety.
+          </p>
+          <p>
+            We may also share your personal information with<br />
+            When you select to register an account as a business buyer, you provide your personal details and we will pass this on to a seller of a business or franchise when you request more information.
+          </p>
+          <p>
+            When you select to register an account as a business broker or seller on the site, we provide a public platform on which to establish your business profile. This profile consists of pertinent facts about your
+            business along with your personal information; namely, the contact information you provide to facilitate contact between you and other users’ of the site. Direct email addresses and telephone numbers will not
+            be publicly displayed unless you specifically include it on your profile.
+          </p>
+          <p>
+            The information a user includes within the forums provided on the site is publicly available to other users’ of the site. Please be aware that any personal information you elect to provide in a public forum
+            may be used to send you unsolicited messages; we are not responsible for the personal information a user elects to disclose within their public profile, or in the private communications that users’ engage in
+            on the site.
+          </p>
+          <p>
+            We post testimonials on the site obtained from users’. These testimonials may include the name, city, state or region and business of the user. We obtain permission from our users’ prior to posting their
+            testimonials on the site. We are not responsible for any personal information a user selects to include within their testimonial.
+          </p>
+          <p>
+            When you elect to email a friend about the site, or a particular business, we request the third party’s email address to send this one time email. We do not share this information with any third parties for
+            their promotional purposes and only store the information to gauge the effectiveness of our referral program.
+          </p>
+          <p>We may share your personal information with our service providers where necessary. We employ the services of a payment processor to fulfil payment for services purchased on the site.</p>
+          <p>
+            We works with a number of partners or affiliates, where we provide marketing services for these companies. These third party agents collect your personal information to facilitate your service request and the
+            information submitted here is governed by their privacy policy.
+          </p>
+          <p>
+            <strong>Masking Policy</strong><br />
+            In some cases, where the third party agent collects your information, the affiliate portal may appear within a BizMatch.net frame. It is presented as a BizMatch.net page for a streamlined user interface
+            however the data collected on such pages is governed by the third party agent’s privacy policy.
+          </p>
+          <p>
+            <strong>Legal Disclosure</strong><br />
+            In certain circumstances, we may be legally required to disclose information collected on the site to law enforcement, government agencies or other third parties. We reserve the right to disclose information
+            to our service providers and to law enforcement or government agencies where a formal request such as in response to a court order, subpoena or judicial proceeding is made. Where we believe in good faith that
+            disclosure of information is necessary to prevent imminent physical or financial harm, or loss, or in protecting against illegal activity on the site, we reserve to disclose information.
+          </p>
+          <p>
+            Should the company undergo the merger, acquisition or sale of some or all of its assets, your personal information may likely be a part of the transferred assets. In such an event, your personal information
+            on the site, would be governed by this privacy statement; any changes to the privacy practices governing your information as a result of transfer would be relayed to you by means of a prominent notice on the
+            Site, or by email.
+          </p>
+          <p>
+            <strong>Using information from BizMatch.net website</strong><br />
+            In certain cases, (where you are receiving contact details of buyers interested in your business opportunity or a business opportunity you represent), you must comply with data protection laws, and give other
+            users a chance to remove themselves from your database and a chance to review what information you have collected about them.
+          </p>
+          <p>
+            <strong>You agree to use BizMatch.net user information only for:</strong>
+          </p>
+          <p>
+            BizMatch.net transaction-related purposes that are not unsolicited commercial messages;<br />
+            using services offered through BizMatch.net, or<br />
+            other purposes that a user expressly chooses.
+          </p>
+          <p>
+            <strong>Marketing</strong><br />
+            We do not sell or rent your personal information to third parties for their marketing purposes without your explicit consent. Where you explicitly express your consent at the point of collection to receive
+            offers from third party partners or affiliates, we will communicate to you on their behalf. We will not pass your information on.
+          </p>
+          <p>
+            You will receive email marketing communications from us throughout the duration of your relationship with our websites. If you do not wish to receive marketing communications from us you may unsubscribe and /
+            or change your preferences at any time by following instructions included within a communication or emailing Customer Services.
+          </p>
+          <p>If you have an account with one of our websites you can also log in and click the email preferences link to unsubscribe and / or change your preferences.</p>
+          <p>
+            Please note that we reserve the right to send all website users notifications and administrative emails where necessary which are considered a part of the service. Given that these messages aren’t promotional
+            in nature, you will be unable to opt-out of them.
+          </p>
+          <p>
+            <strong>Cookies</strong><br />
+            A cookie is a small text file written to your hard drive that contains information about you. Cookies do not contain any personal information about users. Once you close your browser or log out of the
+            website, the cookie simply terminates. We use cookies so that we can personalise your experience of our websites.
+          </p>
+          <p>
+            If you set up your browser to reject the cookie, you may still use the website however; doing so may interfere with your use of some aspects of our websites. Some of our business partners use cookies on our
+            site (for example, advertisers). We have no access to or control over these cookies.
+          </p>
+          <p>For more information about how BizMatch.net uses cookies please read our Cookie Policy.</p>
+          <p>
+            <strong>Spam, spyware or spoofing</strong><br />
+            We and our users do not tolerate spam. Make sure to set your email preferences so we can communicate with you, as you prefer. Please add us to your safe senders list. To report spam or spoof emails, please
+            contact us using the contact information provided in the Contact Us section of this privacy statement.
+          </p>
+          <p>
+            You may not use our communication tools to send spam or otherwise send content that would breach our Terms and Conditions. We automatically scan and may manually filter messages to check for spam, viruses,
+            phishing attacks and other malicious activity or illegal or prohibited content. We may also store these messages for back up purposes only.
+          </p>
+          <p>
+            If you send an email to an email address that is not registered in our community, we do not permanently store that email or use that email address for any marketing purpose. We do not rent or sell these email
+            addresses.
+          </p>
+          <p>
+            <strong>Account protection</strong><br />
+            Your password is the key to your account. Make sure this is stored safely. Use unique numbers, letters and special characters, and do not disclose your password to anyone. If you do share your password or
+            your personal information with others, remember that you are responsible for all actions taken in the name of your account. If you lose control of your password, you may lose substantial control over your
+            personal information and may be subject to legally binding actions taken on your behalf. Therefore, if your password has been compromised for any reason, you should immediately notify us and change your
+            password.
+          </p>
+          <p>
+            <strong>Accessing, reviewing and changing your personal information</strong><br />
+            You can view and amend your personal information at any time by logging in to your account online. You must promptly update your personal information if it changes or is inaccurate.
+          </p>
+          <p>If at any time you wish to close your account, please contact Customer Services and instruct us to do so. We will process your request as soon as we can.</p>
+          <p>You may also contact us at any time to find out what information we hold about you, what we do with it and ask us to update it for you.</p>
+          <p>
+            We do retain personal information from closed accounts to comply with law, prevent fraud, collect any fees owed, resolve disputes, troubleshoot problems, assist with any investigations, enforce our Terms and
+            Conditions, and take other actions otherwise permitted by law.
+          </p>
+          <p>
+            <strong>Security</strong><br />
+            Your information is stored on our servers located in the USA. We treat data as an asset that must be protected and use a variety of tools (encryption, passwords, physical security, etc.) to protect your
+            personal information against unauthorized access and disclosure. However, no method of security is 100% effective and while we take every measure to protect your personal information, we make no guarantees of
+            its absolute security.
+          </p>
+          <p>We employ the use of SSL encryption during the transmission of sensitive data across our websites.</p>
+          <p>
+            <strong>Third parties</strong><br />
+            Except as otherwise expressly included in this Privacy Policy, this document addresses only the use and disclosure of information we collect from you. If you disclose your information to others, whether they
+            are buyers or sellers on our websites or other sites throughout the internet, different rules may apply to their use or disclosure of the information you disclose to them. Dynamis does not control the privacy
+            policies of third parties, and you are subject to the privacy policies of those third parties where applicable.
+          </p>
+          <p>We encourage you to ask questions before you disclose your personal information to others.</p>
+          <p>
+            <strong>General</strong><br />
+            We may change this Privacy Policy from time to time as we add new products and applications, as we improve our current offerings, and as technologies and laws change. You can determine when this Privacy
+            Policy was last revised by referring to the “Last Updated” legend at the top of this page.
+          </p>
+          <p>
+            Any changes will become effective upon our posting of the revised Privacy Policy on our affected websites. We will provide notice to you if these changes are material and, where required by applicable law, we
+            will obtain your consent. This notice may be provided by email, by posting notice of the changes on our affected websites or by other means, consistent with applicable laws.
+          </p>
+          <p>
+            <strong>Contact Us</strong><br />
+            If you have any questions or comments about our privacy policy, and you can’t find the answer to your question on our help pages, please contact us using this form or email support&#64;bizmatch.net, or write
+            to us at BizMatch, 715 S. Tanahua, Corpus Christi, TX 78401.)
+          </p>
+        </div>
+      </section>
+    </article>
+  </section>
 </div>
-<p-sidebar [(visible)]="privacyVisible" styleClass="w-30rem" position="right">
+<div id="terms-of-use" class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white lg:w-1/3 w-96 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-label">
+  <h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
+    <svg class="w-4 h-4 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+      <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+    </svg>
+    Terms of use
+  </h5>
+  <section id="content" role="main">
+    <article id="post-1" class="post-1 page type-page status-publish hentry pmpro-has-access">
+      <section class="entry-content">
+        <div class="container" style="padding: 3.5% 0 3.75% 0 !important">
+          <b><span>AGREEMENT BETWEEN USER AND BizMatch</span></b
+          ><span
+            ><p></p>
+            <p><span>The BizMatch Web Site is comprised of various Web pages operated by BizMatch.</span><span></span></p>
+            <p>
+              <span
+                >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.</span
+              ><span></span>
+            </p>
+            <p>
+              <b><span>MODIFICATION OF THESE TERMS OF USE</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >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.</span
+              ><span></span>
+            </p>
+            <p>
+              <b><span>LINKS TO THIRD PARTY SITES</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >The BizMatch Web Site may contain links to other Web Sites ("Linked Sites"). The Linked Sites are not under the control of BizMatch and BizMatch is not responsible for the contents of any Linked Site,
+                including without limitation any link contained in a Linked Site, or any changes or updates to a Linked Site. BizMatch is not responsible for webcasting or any other form of transmission received from any
+                Linked Site. BizMatch is providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement by BizMatch of the site or any association with its operators.</span
+              ><span></span>
+            </p>
+            <p>
+              <b><span>NO UNLAWFUL OR PROHIBITED USE</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >As a condition of your use of the BizMatch Web Site, you warrant to BizMatch that you will not use the BizMatch Web Site for any purpose that is unlawful or prohibited by these terms, conditions, and
+                notices. You may not use the BizMatch Web Site in any manner which could damage, disable, overburden, or impair the BizMatch Web Site or interfere with any other party’s use and enjoyment of the BizMatch
+                Web Site. You may not obtain or attempt to obtain any materials or information through any means not intentionally made available or provided for through the BizMatch Web Sites.</span
+              ><span></span>
+            </p>
+            <p>
+              <b><span>USE OF COMMUNICATION SERVICES</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >The BizMatch Web Site may contain bulletin board services, chat areas, news groups, forums, communities, personal web pages, calendars, and/or other message or communication facilities designed to enable
+                you to communicate with the public at large or with a group (collectively, "Communication Services"), you agree to use the Communication Services only to post, send and receive messages and material that
+                are proper and related to the particular Communication Service. By way of example, and not as a limitation, you agree that when using a Communication Service, you will not:</span
+              ><span></span>
+            </p>
+            <p>&nbsp;</p>
+            <p class="MsoNormal"></p>
+            <p>
+              <span
+                ><span>§<span>&nbsp; </span></span></span
+              ><span>Defame, abuse, harass, stalk, threaten or otherwise violate the legal rights (such as rights of privacy and publicity) of others.</span><span></span>
+            </p>
+            <p>&nbsp;</p>
+            <p class="MsoNormal">
+              <span
+                ><span>§<span>&nbsp; </span></span></span
+              ><span>Publish, post, upload, distribute or disseminate any inappropriate, profane, defamatory, infringing, obscene, indecent or unlawful topic, name, material or information.</span>
+            </p>
+            <p class="MsoNormal">
+              <span
+                ><span>§<span>&nbsp; </span></span></span
+              ><span
+                >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.</span
+              >
+            </p>
+            <p class="MsoNormal">
+              <span
+                ><span>§<span>&nbsp; </span></span></span
+              ><span>Upload files that contain viruses, corrupted files, or any other similar software or programs that may damage the operation of another’s computer.</span>
+            </p>
+            <p class="MsoNormal">
+              <span
+                ><span>§<span>&nbsp; </span></span></span
+              ><span>Advertise or offer to sell or buy any goods or services for any business purpose, unless such Communication Service specifically allows such messages.</span>
+            </p>
+            <p class="MsoNormal">
+              <span
+                ><span>§<span>&nbsp; </span></span></span
+              ><span>Conduct or forward surveys, contests, pyramid schemes or chain letters.</span>
+            </p>
+            <p class="MsoNormal">
+              <span
+                ><span>§<span>&nbsp; </span></span></span
+              ><span>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.</span>
+            </p>
+            <p class="MsoNormal">
+              <span
+                ><span>§<span>&nbsp; </span></span></span
+              ><span
+                >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.</span
+              >
+            </p>
+            <p class="MsoNormal">
+              <span
+                ><span>§<span>&nbsp; </span></span></span
+              ><span>Restrict or inhibit any other user from using and enjoying the Communication Services.</span>
+            </p>
+            <p class="MsoNormal">
+              <span
+                ><span>§<span>&nbsp; </span></span></span
+              ><span>Violate any code of conduct or other guidelines which may be applicable for any particular Communication Service.</span>
+            </p>
+            <p class="MsoNormal">
+              <span
+                ><span>§<span>&nbsp; </span></span></span
+              ><span>Harvest or otherwise collect information about others, including e-mail addresses, without their consent.</span>
+            </p>
+            <p class="MsoNormal">
+              <span
+                ><span>§<span>&nbsp; </span></span></span
+              ><span>Violate any applicable laws or regulations.</span>
+            </p>
+            <p class="MsoNormal">
+              <span
+                >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.</span
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >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.</span
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >Always use caution when giving out any personally identifying information about yourself or your children in any Communication Service. BizMatch does not control or endorse the content, messages or
+                information found in any Communication Service and, therefore, BizMatch specifically disclaims any liability with regard to the Communication Services and any actions resulting from your participation in
+                any Communication Service. Managers and hosts are not authorized BizMatch spokespersons, and their views do not necessarily reflect those of BizMatch.</span
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >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.</span
+              ><span></span>
+            </p>
+            <p>
+              <b><span>MATERIALS PROVIDED TO BizMatch OR POSTED AT ANY BizMatch WEB SITE</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >BizMatch does not claim ownership of the materials you provide to BizMatch (including feedback and suggestions) or post, upload, input or submit to any BizMatch Web Site or its associated services
+                (collectively "Submissions"). However, by posting, uploading, inputting, providing or submitting your Submission you are granting BizMatch, its affiliated companies and necessary sublicensees permission
+                to use your Submission in connection with the operation of their Internet businesses including, without limitation, the rights to: copy, distribute, transmit, publicly display, publicly perform,
+                reproduce, edit, translate and reformat your Submission; and to publish your name in connection with your Submission.</span
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >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.</span
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >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.</span
+              ><span></span>
+            </p>
+            <p>
+              <b><span>LIABILITY DISCLAIMER</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >THE INFORMATION, SOFTWARE, PRODUCTS, AND SERVICES INCLUDED IN OR AVAILABLE THROUGH THE BizMatch WEB SITE MAY INCLUDE INACCURACIES OR TYPOGRAPHICAL ERRORS. CHANGES ARE PERIODICALLY ADDED TO THE
+                INFORMATION HEREIN. BizMatch AND/OR ITS SUPPLIERS MAY MAKE IMPROVEMENTS AND/OR CHANGES IN THE BizMatch WEB SITE AT ANY TIME. ADVICE RECEIVED VIA THE BizMatch WEB SITE SHOULD NOT BE RELIED UPON FOR
+                PERSONAL, MEDICAL, LEGAL OR FINANCIAL DECISIONS AND YOU SHOULD CONSULT AN APPROPRIATE PROFESSIONAL FOR SPECIFIC ADVICE TAILORED TO YOUR SITUATION.</span
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >BizMatch AND/OR ITS SUPPLIERS MAKE NO REPRESENTATIONS ABOUT THE SUITABILITY, RELIABILITY, AVAILABILITY, TIMELINESS, AND ACCURACY OF THE INFORMATION, SOFTWARE, PRODUCTS, SERVICES AND RELATED GRAPHICS
+                CONTAINED ON THE BizMatch WEB SITE FOR ANY PURPOSE. TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, ALL SUCH INFORMATION, SOFTWARE, PRODUCTS, SERVICES AND RELATED GRAPHICS ARE PROVIDED "AS IS" WITHOUT
+                WARRANTY OR CONDITION OF ANY KIND. BizMatch AND/OR ITS SUPPLIERS HEREBY DISCLAIM ALL WARRANTIES AND CONDITIONS WITH REGARD TO THIS INFORMATION, SOFTWARE, PRODUCTS, SERVICES AND RELATED GRAPHICS, INCLUDING
+                ALL IMPLIED WARRANTIES OR CONDITIONS OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT.</span
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, IN NO EVENT SHALL BizMatch AND/OR ITS SUPPLIERS BE LIABLE FOR ANY DIRECT, INDIRECT, PUNITIVE, INCIDENTAL, SPECIAL, CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+                WHATSOEVER INCLUDING, WITHOUT LIMITATION, DAMAGES FOR LOSS OF USE, DATA OR PROFITS, ARISING OUT OF OR IN ANY WAY CONNECTED WITH THE USE OR PERFORMANCE OF THE BizMatch WEB SITE, WITH THE DELAY OR INABILITY
+                TO USE THE BizMatch WEB SITE OR RELATED SERVICES, THE PROVISION OF OR FAILURE TO PROVIDE SERVICES, OR FOR ANY INFORMATION, SOFTWARE, PRODUCTS, SERVICES AND RELATED GRAPHICS OBTAINED THROUGH THE BizMatch
+                WEB SITE, OR OTHERWISE ARISING OUT OF THE USE OF THE BizMatch WEB SITE, WHETHER BASED ON CONTRACT, TORT, NEGLIGENCE, STRICT LIABILITY OR OTHERWISE, EVEN IF BizMatch OR ANY OF ITS SUPPLIERS HAS BEEN
+                ADVISED OF THE POSSIBILITY OF DAMAGES. BECAUSE SOME STATES/JURISDICTIONS DO NOT ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR CONSEQUENTIAL OR INCIDENTAL DAMAGES, THE ABOVE LIMITATION MAY NOT APPLY
+                TO YOU. IF YOU ARE DISSATISFIED WITH ANY PORTION OF THE BizMatch WEB SITE, OR WITH ANY OF THESE TERMS OF USE, YOUR SOLE AND EXCLUSIVE REMEDY IS TO DISCONTINUE USING THE BizMatch WEB SITE.</span
+              ><span></span>
+            </p>
+            <p><span>SERVICE CONTACT : info&#64;bizmatch.net</span><span></span></p>
+            <p>
+              <b><span>TERMINATION/ACCESS RESTRICTION</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >BizMatch reserves the right, in its sole discretion, to terminate your access to the BizMatch Web Site and the related services or any portion thereof at any time, without notice. GENERAL To the maximum
+                extent permitted by law, this agreement is governed by the laws of the State of Washington, U.S.A. and you hereby consent to the exclusive jurisdiction and venue of courts in King County, Washington,
+                U.S.A. in all disputes arising out of or relating to the use of the BizMatch Web Site. Use of the BizMatch Web Site is unauthorized in any jurisdiction that does not give effect to all provisions of these
+                terms and conditions, including without limitation this paragraph. You agree that no joint venture, partnership, employment, or agency relationship exists between you and BizMatch as a result of this
+                agreement or use of the BizMatch Web Site. BizMatch’s performance of this agreement is subject to existing laws and legal process, and nothing contained in this agreement is in derogation of BizMatch’s
+                right to comply with governmental, court and law enforcement requests or requirements relating to your use of the BizMatch Web Site or information provided to or gathered by BizMatch with respect to such
+                use. If any part of this agreement is determined to be invalid or unenforceable pursuant to applicable law including, but not limited to, the warranty disclaimers and liability limitations set forth
+                above, then the invalid or unenforceable provision will be deemed superseded by a valid, enforceable provision that most closely matches the intent of the original provision and the remainder of the
+                agreement shall continue in effect. Unless otherwise specified herein, this agreement constitutes the entire agreement between the user and BizMatch with respect to the BizMatch Web Site and it supersedes
+                all prior or contemporaneous communications and proposals, whether electronic, oral or written, between the user and BizMatch with respect to the BizMatch Web Site. A printed version of this agreement and
+                of any notice given in electronic form shall be admissible in judicial or administrative proceedings based upon or relating to this agreement to the same extent an d 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.</span
+              ><span></span>
+            </p>
+            <p>
+              <b><span>COPYRIGHT AND TRADEMARK NOTICES:</span></b
+              ><span></span>
+            </p>
+            <p><span>All contents of the BizMatch Web Site are: Copyright 2011 by Bizmatch Business Solutions and/or its suppliers. All rights reserved.</span><span></span></p>
+            <p>
+              <b><span>TRADEMARKS</span></b
+              ><span></span>
+            </p>
+            <p><span>The names of actual companies and products mentioned herein may be the trademarks of their respective owners.</span><span></span></p>
+            <p>
+              <span
+                >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.</span
+              ><span></span>
+            </p>
+            <p><span>Any rights not expressly granted herein are reserved.</span><span></span></p>
+            <p>
+              <b><span>NOTICES AND PROCEDURE FOR MAKING CLAIMS OF COPYRIGHT INFRINGEMENT</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >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.</span
+              ><span><br /> </span>
+            </p>
+            <p class="MsoNormal">&nbsp;</p>
+            <p class="MsoNormal">
+              We reserve the right to update or revise these Terms of Use at any time without&nbsp;notice. Please check the Terms of Use periodically for changes. The revised&nbsp;terms will be effective immediately as
+              soon as they are posted on the WebSite&nbsp;and by continuing to use the Site you agree to be bound by the revised terms<span><br /> </span></p
+          ></span>
+        </div>
+      </section>
+    </article>
+  </section>
+</div>
+<!-- <p-sidebar [(visible)]="privacyVisible" styleClass="w-30rem" position="right">
   <ng-template pTemplate="header">
     <span class="font-semibold text-xl">Privacy Statement</span>
   </ng-template>
@@ -225,9 +724,9 @@
       </section>
     </article>
   </section>
-</p-sidebar>
+</p-sidebar> -->
 
-<p-sidebar [(visible)]="termsVisible" styleClass="w-30rem" position="right">
+<!-- <p-sidebar [(visible)]="termsVisible" styleClass="w-30rem" position="right">
   <ng-template pTemplate="header">
     <span class="font-semibold text-xl">Terms of use</span>
   </ng-template>
@@ -289,73 +788,73 @@
               ><span></span>
             </p>
             <p>&nbsp;</p>
-            <p class="MsoNormal"><!--[if !supportLists]--></p>
+            <p class="MsoNormal"></p>
             <p>
               <span
                 ><span>§<span>&nbsp; </span></span></span
-              ><!--[endif]--><span>Defame, abuse, harass, stalk, threaten or otherwise violate the legal rights (such as rights of privacy and publicity) of others.</span><span></span>
+              ><span>Defame, abuse, harass, stalk, threaten or otherwise violate the legal rights (such as rights of privacy and publicity) of others.</span><span></span>
             </p>
             <p>&nbsp;</p>
             <p class="MsoNormal">
-              <!--[if !supportLists]--><span
+              <span
                 ><span>§<span>&nbsp; </span></span></span
-              ><!--[endif]--><span>Publish, post, upload, distribute or disseminate any inappropriate, profane, defamatory, infringing, obscene, indecent or unlawful topic, name, material or information.</span>
+              ><span>Publish, post, upload, distribute or disseminate any inappropriate, profane, defamatory, infringing, obscene, indecent or unlawful topic, name, material or information.</span>
             </p>
             <p class="MsoNormal">
-              <!--[if !supportLists]--><span
+              <span
                 ><span>§<span>&nbsp; </span></span></span
-              ><!--[endif]--><span
+              ><span
                 >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.</span
               >
             </p>
             <p class="MsoNormal">
-              <!--[if !supportLists]--><span
+              <span
                 ><span>§<span>&nbsp; </span></span></span
-              ><!--[endif]--><span>Upload files that contain viruses, corrupted files, or any other similar software or programs that may damage the operation of another’s computer.</span>
+              ><span>Upload files that contain viruses, corrupted files, or any other similar software or programs that may damage the operation of another’s computer.</span>
             </p>
             <p class="MsoNormal">
-              <!--[if !supportLists]--><span
+              <span
                 ><span>§<span>&nbsp; </span></span></span
-              ><!--[endif]--><span>Advertise or offer to sell or buy any goods or services for any business purpose, unless such Communication Service specifically allows such messages.</span>
+              ><span>Advertise or offer to sell or buy any goods or services for any business purpose, unless such Communication Service specifically allows such messages.</span>
             </p>
             <p class="MsoNormal">
-              <!--[if !supportLists]--><span
+              <span
                 ><span>§<span>&nbsp; </span></span></span
-              ><!--[endif]--><span>Conduct or forward surveys, contests, pyramid schemes or chain letters.</span>
+              ><span>Conduct or forward surveys, contests, pyramid schemes or chain letters.</span>
             </p>
             <p class="MsoNormal">
-              <!--[if !supportLists]--><span
+              <span
                 ><span>§<span>&nbsp; </span></span></span
-              ><!--[endif]--><span>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.</span>
+              ><span>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.</span>
             </p>
             <p class="MsoNormal">
-              <!--[if !supportLists]--><span
+              <span
                 ><span>§<span>&nbsp; </span></span></span
-              ><!--[endif]--><span
+              ><span
                 >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.</span
               >
             </p>
             <p class="MsoNormal">
-              <!--[if !supportLists]--><span
+              <span
                 ><span>§<span>&nbsp; </span></span></span
-              ><!--[endif]--><span>Restrict or inhibit any other user from using and enjoying the Communication Services.</span>
+              ><span>Restrict or inhibit any other user from using and enjoying the Communication Services.</span>
             </p>
             <p class="MsoNormal">
-              <!--[if !supportLists]--><span
+              <span
                 ><span>§<span>&nbsp; </span></span></span
-              ><!--[endif]--><span>Violate any code of conduct or other guidelines which may be applicable for any particular Communication Service.</span>
+              ><span>Violate any code of conduct or other guidelines which may be applicable for any particular Communication Service.</span>
             </p>
             <p class="MsoNormal">
-              <!--[if !supportLists]--><span
+              <span
                 ><span>§<span>&nbsp; </span></span></span
-              ><!--[endif]--><span>Harvest or otherwise collect information about others, including e-mail addresses, without their consent.</span>
+              ><span>Harvest or otherwise collect information about others, including e-mail addresses, without their consent.</span>
             </p>
             <p class="MsoNormal">
-              <!--[if !supportLists]--><span
+              <span
                 ><span>§<span>&nbsp; </span></span></span
-              ><!--[endif]--><span>Violate any applicable laws or regulations.</span>
+              ><span>Violate any applicable laws or regulations.</span>
             </p>
             <p class="MsoNormal">
               <span
@@ -483,7 +982,7 @@
                 INQUIRIES NOT RELEVANT TO THE FOLLOWING PROCEDURE WILL RECEIVE NO RESPONSE. See Notice and Procedure for Making Claims of Copyright Infringement.</span
               ><span
                 ><br />
-                <!--[if !supportLineBreakNewLine]--></span
+                </span
               >
             </p>
             <p class="MsoNormal">&nbsp;</p>
@@ -491,7 +990,7 @@
               We reserve the right to update or revise these Terms of Use at any time without&nbsp;notice. Please check the Terms of Use periodically for changes. The revised&nbsp;terms will be effective immediately as
               soon as they are posted on the WebSite&nbsp;and by continuing to use the Site you agree to be bound by the revised terms<span
                 ><br />
-                <!--[endif]--></span
+                </span
               >
             </p></span
           >
@@ -499,4 +998,4 @@
       </section>
     </article>
   </section>
-</p-sidebar>
+</p-sidebar> -->

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

@@ -1,6 +1,24 @@
-:host{
-    height: 192px;
+:host {
+  // position: absolute;
+  // bottom: 0px;
+  width: 100%;
 }
 div {
-    font-size: small;
-}
+  font-size: small;
+}
+@media (max-width: 1023px) {
+  .order-2 {
+    order: 2;
+  }
+  .order-3 {
+    order: 3;
+  }
+}
+section p {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  unicode-bidi: isolate;
+}

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

@@ -1,24 +1,26 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { KeycloakService } from 'keycloak-angular';
-import { SidebarModule } from 'primeng/sidebar';
-import { SharedModule } from '../../shared/shared/shared.module';
+import { FormsModule } from '@angular/forms';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { initFlowbite } from 'flowbite';
 @Component({
-  selector: 'footer',
+  selector: 'app-footer',
   standalone: true,
-  imports: [SharedModule, SidebarModule],
+  imports: [CommonModule, FormsModule, RouterModule, FontAwesomeModule],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss',
 })
 export class FooterComponent {
   privacyVisible = false;
   termsVisible = false;
-  constructor(public keycloakService: KeycloakService) {}
-  login() {
-    this.keycloakService.login({
-      redirectUri: window.location.href,
+  currentYear: number = new Date().getFullYear();
+  constructor(private router: Router) {}
+  ngOnInit() {
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        initFlowbite();
+      }
     });
   }
-  register() {
-    this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
-  }
 }

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

@@ -1,12 +1,249 @@
-<div class="wrapper">
-  <div class="pl-3 flex align-items-center gap-2">
-    <a routerLink="/home"><img src="assets/images/header-logo.png" height="40" alt="bizmatch" /></a>
-    <p-tabMenu [model]="tabItems" ariaLabelledBy="label" styleClass="flex" [activeItem]="activeItem"> </p-tabMenu>
-    <p-menubar [model]="menuItems"></p-menubar>
-    <p-menubar [model]="loginItems"></p-menubar>
-    @if(user){
-    <div>Welcome, {{ user.firstName }}</div>
-    }
-    <ng-template #empty> </ng-template>
+<!-- <nav class="bg-white border-gray-200 dark:bg-gray-900">
+  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+    <a routerLink="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
+      <img src="assets/images/header-logo.png" class="h-8" alt="Flowbite Logo" />
+    </a>
+    <div class="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
+      <button
+        type="button"
+        class="flex text-sm bg-gray-200 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+        id="user-menu-button"
+        aria-expanded="false"
+        [attr.data-dropdown-toggle]="user ? 'user-login' : 'user-unknown'"
+        data-dropdown-placement="bottom"
+      >
+        <span class="sr-only">Open user menu</span>
+        @if(user){
+        <img class="w-8 h-8 rounded-full object-cover" src="{{ profileUrl }}" alt="user photo" />
+        } @else {
+        <i class="flex justify-center items-center text-stone-50 w-8 h-8 rounded-full fa-solid fa-bars"></i>
+        }
+      </button>
+      @if(user){
+      <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-login">
+        <div class="px-4 py-3">
+          <span class="block text-sm text-gray-900 dark:text-white">Welcome, {{ user.firstname }} </span>
+          <span class="block text-sm text-gray-500 truncate dark:text-gray-400">{{ user.email }}</span>
+        </div>
+        <ul class="py-2" aria-labelledby="user-menu-button">
+          <li>
+            <a routerLink="/account" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Account</a>
+          </li>
+          <li>
+            <a routerLink="/createBusinessListing" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+              >Create Listing</a
+            >
+          </li>
+          <li>
+            <a routerLink="/myListings" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Listings</a>
+          </li>
+          <li>
+            <a routerLink="/emailUs" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">EMail Us</a>
+          </li>
+          <li>
+            <a routerLink="/logout" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Logout</a>
+          </li>
+        </ul>
+      </div>
+      } @else {
+      <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-unknown">
+        <ul class="py-2" aria-labelledby="user-menu-button">
+          <li>
+            <a (click)="login()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Log In</a>
+          </li>
+          <li>
+            <a (click)="register()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Register</a>
+          </li>
+        </ul>
+      </div>
+      }
+      <button
+        data-collapse-toggle="navbar-user"
+        type="button"
+        class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        aria-controls="navbar-user"
+        aria-expanded="false"
+      >
+        <span class="sr-only">Open main menu</span>
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+        </svg>
+      </button>
+    </div>
+    <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
+      <ul
+        class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"
+      >
+        <li>
+          <a
+            routerLinkActive="active-link"
+            routerLink="/businessListings"
+            [ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/businessListings') }"
+            class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+            aria-current="page"
+            (click)="closeMenus()"
+            >Businesses</a
+          >
+        </li>
+        <li>
+          <a
+            routerLinkActive="active-link"
+            routerLink="/commercialPropertyListings"
+            [ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/commercialPropertyListings') }"
+            class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+            (click)="closeMenus()"
+            >Properties</a
+          >
+        </li>
+        <li>
+          <a
+            routerLinkActive="active-link"
+            routerLink="/brokerListings"
+            [ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/brokerListings') }"
+            class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+            (click)="closeMenus()"
+            >Professionals</a
+          >
+        </li>
+      </ul>
+    </div>
   </div>
-</div>
+</nav> -->
+
+<nav class="bg-white border-gray-200 dark:bg-gray-900">
+  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+    <a routerLink="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
+      <img src="assets/images/header-logo.png" class="h-8" alt="Flowbite Logo" />
+    </a>
+    <div class="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
+      <!-- Filter button -->
+      @if(isListingUrl()){
+      <button
+        type="button"
+        #triggerButton
+        (click)="openModal()"
+        id="filterDropdownButton"
+        class="max-sm:hidden px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 md:me-2"
+      >
+        <i class="fas fa-filter mr-2"></i>Filter ({{ getNumberOfFiltersSet() }})
+      </button>
+      }
+      <button
+        type="button"
+        class="flex text-sm bg-gray-200 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+        id="user-menu-button"
+        aria-expanded="false"
+        [attr.data-dropdown-toggle]="user ? 'user-login' : 'user-unknown'"
+        data-dropdown-placement="bottom"
+      >
+        <span class="sr-only">Open user menu</span>
+        @if(user){
+        <img class="w-8 h-8 rounded-full object-cover" src="{{ profileUrl }}" alt="user photo" />
+        } @else {
+        <i class="flex justify-center items-center text-stone-50 w-8 h-8 rounded-full fa-solid fa-bars"></i>
+        }
+      </button>
+      <!-- Dropdown menu -->
+      @if(user){
+      <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-login">
+        <div class="px-4 py-3">
+          <span class="block text-sm text-gray-900 dark:text-white">Welcome, {{ user.firstname }} </span>
+          <span class="block text-sm text-gray-500 truncate dark:text-gray-400">{{ user.email }}</span>
+        </div>
+        <ul class="py-2" aria-labelledby="user-menu-button">
+          <li>
+            <a routerLink="/account" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Account</a>
+          </li>
+          <li>
+            <a routerLink="/createBusinessListing" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+              >Create Listing</a
+            >
+          </li>
+          <li>
+            <a routerLink="/myListings" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Listings</a>
+          </li>
+          <li>
+            <a routerLink="/emailUs" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">EMail Us</a>
+          </li>
+          <li>
+            <a routerLink="/logout" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Logout</a>
+          </li>
+        </ul>
+      </div>
+      } @else {
+      <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-unknown">
+        <ul class="py-2" aria-labelledby="user-menu-button">
+          <li>
+            <a (click)="login()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Log In</a>
+          </li>
+          <li>
+            <a (click)="register()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Register</a>
+          </li>
+        </ul>
+      </div>
+      }
+      <button
+        data-collapse-toggle="navbar-user"
+        type="button"
+        class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        aria-controls="navbar-user"
+        aria-expanded="false"
+      >
+        <span class="sr-only">Open main menu</span>
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+        </svg>
+      </button>
+    </div>
+    <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
+      <ul
+        class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"
+      >
+        <li>
+          <a
+            routerLinkActive="active-link"
+            routerLink="/businessListings"
+            [ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/businessListings') }"
+            class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+            aria-current="page"
+            (click)="closeMenusAndSetCriteria('businessListings')"
+            >Businesses</a
+          >
+        </li>
+        <li>
+          <a
+            routerLinkActive="active-link"
+            routerLink="/commercialPropertyListings"
+            [ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/commercialPropertyListings') }"
+            class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+            (click)="closeMenusAndSetCriteria('commercialPropertyListings')"
+            >Properties</a
+          >
+        </li>
+        <li>
+          <a
+            routerLinkActive="active-link"
+            routerLink="/brokerListings"
+            [ngClass]="{ 'bg-blue-700 text-white md:text-blue-700 md:bg-transparent md:dark:text-blue-500': isActive('/brokerListings') }"
+            class="block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+            (click)="closeMenusAndSetCriteria('brokerListings')"
+            >Professionals</a
+          >
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!-- Mobile filter button -->
+  @if(isListingUrl()){
+  <div class="md:hidden flex justify-center pb-4">
+    <button
+      (click)="openModal()"
+      type="button"
+      id="filterDropdownMobileButton"
+      class="w-full mx-4 px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+    >
+      <i class="fas fa-filter mr-2"></i>Filter ({{ getNumberOfFiltersSet() }})
+    </button>
+  </div>
+  }
+</nav>

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

@@ -1,124 +1,130 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { faUserGear } from '@fortawesome/free-solid-svg-icons';
+import { Collapse, Dropdown, initFlowbite } from 'flowbite';
 import { KeycloakService } from 'keycloak-angular';
-import { MenuItem } from 'primeng/api';
-import { ButtonModule } from 'primeng/button';
-import { MenubarModule } from 'primeng/menubar';
-import { OverlayPanelModule } from 'primeng/overlaypanel';
-import { TabMenuModule } from 'primeng/tabmenu';
-import { Observable } from 'rxjs';
-import { KeycloakUser } from '../../../../../bizmatch-server/src/models/main.model';
+import { filter, Observable, Subject, Subscription } from 'rxjs';
+import { User } from '../../../../../bizmatch-server/src/models/db.model';
+import { BusinessListingCriteria, CommercialPropertyListingCriteria, emailToDirName, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../environments/environment';
-import { map2User } from '../../utils/utils';
+import { CriteriaChangeService } from '../../services/criteria-change.service';
+import { SearchService } from '../../services/search.service';
+import { SharedService } from '../../services/shared.service';
+import { UserService } from '../../services/user.service';
+import { compareObjects, createEmptyBusinessListingCriteria, createEmptyCommercialPropertyListingCriteria, createEmptyUserListingCriteria, getCriteriaProxy, map2User } from '../../utils/utils';
+import { DropdownComponent } from '../dropdown/dropdown.component';
+import { ModalService } from '../search-modal/modal.service';
 @Component({
   selector: 'header',
   standalone: true,
-  imports: [CommonModule, MenubarModule, ButtonModule, OverlayPanelModule, TabMenuModule],
+  imports: [CommonModule, RouterModule, DropdownComponent, FormsModule],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })
 export class HeaderComponent {
   public buildVersion = environment.buildVersion;
   user$: Observable<KeycloakUser>;
-  user: KeycloakUser;
-  public tabItems: MenuItem[];
-  public loginItems: MenuItem[];
-  public menuItems: MenuItem[];
+  keycloakUser: KeycloakUser;
+  user: User;
   activeItem;
   faUserGear = faUserGear;
-  constructor(public keycloakService: KeycloakService, private router: Router) {}
+  profileUrl: string;
+  env = environment;
+  private filterDropdown: Dropdown | null = null;
+  isMobile: boolean = false;
+  private destroy$ = new Subject<void>();
+  prompt: string;
+  private subscription: Subscription;
+  criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
+  private routerSubscription: Subscription | undefined;
+  baseRoute: string;
+  constructor(
+    public keycloakService: KeycloakService,
+    private router: Router,
+    private userService: UserService,
+    private sharedService: SharedService,
+    private breakpointObserver: BreakpointObserver,
+    private modalService: ModalService,
+    private searchService: SearchService,
+    private criteriaChangeService: CriteriaChangeService,
+  ) {}
 
   async ngOnInit() {
     const token = await this.keycloakService.getToken();
-    this.user = map2User(token);
-    //this.user$ = this.keycloakService
-    // this.user$.subscribe(u => {
-    // this.user = u;
-    this.menuItems = [
-      {
-        label: 'User Actions',
-        icon: 'fas fa-cog',
-        items: [
-          {
-            label: 'Account',
-            icon: 'pi pi-user',
-            routerLink: `/account`,
-            visible: this.keycloakService.isLoggedIn(),
-          },
-          {
-            label: 'Create Listing',
-            icon: 'pi pi-plus-circle',
-            routerLink: '/createBusinessListing',
-            visible: this.keycloakService.isLoggedIn(),
-          },
-          {
-            label: 'My Listings',
-            icon: 'pi pi-list',
-            routerLink: '/myListings',
-            visible: this.keycloakService.isLoggedIn(),
-          },
-          {
-            label: 'My Favorites',
-            icon: 'pi pi-star',
-            routerLink: '/myFavorites',
-            visible: this.keycloakService.isLoggedIn(),
-          },
-          {
-            label: 'EMail Us',
-            icon: 'fa-regular fa-envelope',
-            routerLink: '/emailUs',
-            visible: this.keycloakService.isLoggedIn(),
-          },
-          {
-            label: 'Logout',
-            icon: 'fa-solid fa-right-from-bracket',
-            routerLink: '/logout',
-            visible: this.keycloakService.isLoggedIn(),
-          },
-          {
-            label: 'Login',
-            icon: 'fa-solid fa-right-from-bracket',
-            command: () => this.login(),
-            visible: !this.keycloakService.isLoggedIn(),
-          },
-        ],
-      },
-    ];
-    // });
-    this.tabItems = [
-      {
-        label: 'Businesses for Sale',
-        routerLink: '/businessListings',
-        state: {},
-      },
-      {
-        label: 'Commercial Property',
-        routerLink: '/commercialPropertyListings',
-        state: {},
-      },
-      {
-        label: 'Professionals/Brokers Directory',
-        routerLink: '/brokerListings',
-        state: {},
-      },
-    ];
-    this.loginItems = [
-      {
-        label: 'Login',
-        command: () => this.login(),
-        visible: !this.keycloakService.isLoggedIn(),
-      },
-      {
-        label: 'Register',
-        command: () => this.register(),
-        visible: !this.keycloakService.isLoggedIn(),
-      },
-    ];
-    this.activeItem = this.tabItems[0];
-  }
+    this.keycloakUser = map2User(token);
+    if (this.keycloakUser) {
+      this.user = await this.userService.getByMail(this.keycloakUser?.email);
+      this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
+    }
 
+    setTimeout(() => {
+      initFlowbite();
+    }, 10);
+
+    this.sharedService.currentProfilePhoto.subscribe(photoUrl => {
+      if (photoUrl) {
+        this.profileUrl = photoUrl;
+      }
+    });
+
+    this.checkCurrentRoute(this.router.url);
+
+    this.routerSubscription = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: any) => {
+      this.checkCurrentRoute(event.urlAfterRedirects);
+    });
+  }
+  private checkCurrentRoute(url: string): void {
+    this.baseRoute = url.split('/')[1]; // Nimmt den ersten Teil der Route nach dem ersten '/'
+    const specialRoutes = [, '', ''];
+    this.criteria = getCriteriaProxy(this.baseRoute, this);
+    this.searchService.search(this.criteria);
+  }
+  // getCriteriaProxy(path:string):BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria{
+  //   if ('businessListings' === path) {
+  //     return this.createEnhancedProxy(getCriteriaStateObject('business'));
+  //   } else if ('commercialPropertyListings' === path) {
+  //     return this.createEnhancedProxy(getCriteriaStateObject('commercialProperty'));
+  //   } else if ('brokerListings' === path) {
+  //     return this.createEnhancedProxy(getCriteriaStateObject('broker'));
+  //   } else {
+  //     return undefined;
+  //   }
+  // }
+  // private createEnhancedProxy(obj: any) {
+  //   const component = this;
+
+  //   const sessionStorageHandler = function (path, value, previous, applyData) {
+  //     let criteriaType = '';
+  //     if ('/businessListings' === window.location.pathname) {
+  //       criteriaType = 'business';
+  //     } else if ('/commercialPropertyListings' === window.location.pathname) {
+  //       criteriaType = 'commercialProperty';
+  //     } else if ('/brokerListings' === window.location.pathname) {
+  //       criteriaType = 'broker';
+  //     }
+  //     sessionStorage.setItem(`${criteriaType}_criteria`, JSON.stringify(this));
+  //   };
+
+  //   return onChange(obj, function (path, value, previous, applyData) {
+  //     // Call the original sessionStorageHandler
+  //     sessionStorageHandler.call(this, path, value, previous, applyData);
+
+  //     // Notify about the criteria change using the component's context
+  //     component.criteriaChangeService.notifyCriteriaChange();
+  //   });
+  // }
+
+  ngAfterViewInit() {}
+
+  async openModal() {
+    const accepted = await this.modalService.showModal(this.criteria);
+    if (accepted) {
+      this.searchService.search(this.criteria);
+    }
+  }
   navigateWithState(dest: string, state: any) {
     this.router.navigate([dest], { state: state });
   }
@@ -130,4 +136,51 @@ export class HeaderComponent {
   register() {
     this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
   }
+  isActive(route: string): boolean {
+    return this.router.url === route;
+  }
+  isListingUrl(): boolean {
+    return ['/businessListings', '/commercialPropertyListings', '/brokerListings'].includes(this.router.url);
+  }
+  closeDropdown() {
+    const dropdownButton = document.getElementById('user-menu-button');
+    const dropdownMenu = this.user ? document.getElementById('user-login') : document.getElementById('user-unknown');
+
+    if (dropdownButton && dropdownMenu) {
+      const dropdown = new Dropdown(dropdownMenu, dropdownButton);
+      dropdown.hide();
+    }
+  }
+  closeMobileMenu() {
+    const targetElement = document.getElementById('navbar-user');
+    const triggerElement = document.querySelector('[data-collapse-toggle="navbar-user"]');
+
+    if (targetElement instanceof HTMLElement && triggerElement instanceof HTMLElement) {
+      const collapse = new Collapse(targetElement, triggerElement);
+      collapse.collapse();
+    }
+  }
+  closeMenusAndSetCriteria(path: string) {
+    this.closeDropdown();
+    this.closeMobileMenu();
+    const criteria = getCriteriaProxy(path, this);
+    criteria.page = 1;
+    criteria.start = 0;
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+  getNumberOfFiltersSet() {
+    if (this.criteria?.criteriaType === 'brokerListings') {
+      return compareObjects(createEmptyUserListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius']);
+    } else if (this.criteria?.criteriaType === 'businessListings') {
+      return compareObjects(createEmptyBusinessListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius']);
+    } else if (this.criteria?.criteriaType === 'commercialPropertyListings') {
+      return compareObjects(createEmptyCommercialPropertyListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius']);
+    } else {
+      return 0;
+    }
+  }
 }

bizmatch/src/app/components/image-crop-and-upload/image-crop-and-upload.component.html

@@ -0,0 +1,12 @@
+<!-- Modal -->
+<div *ngIf="showModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
+  <div class="bg-white p-5 rounded-lg shadow-xl" style="width: 90%; max-width: 600px">
+    <h3 class="text-lg font-semibold mb-4">Crop Image</h3>
+    <image-cropper (loadImageFailed)="loadImageFailed()" [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="false" format="png" (imageCropped)="imageCropped($event)"></image-cropper>
+    <div class="mt-4 flex justify-end">
+      <button (click)="closeModal()" class="mr-2 px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">Cancel</button>
+      <button (click)="uploadImage()" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Upload</button>
+    </div>
+  </div>
+</div>
+<input type="file" #fileInput style="display: none" (change)="fileChangeEvent($event)" accept="image/*" />

bizmatch/src/app/components/image-crop-and-upload/image-crop-and-upload.component.scss

@@ -0,0 +1,6 @@
+::ng-deep image-cropper {
+  justify-content: center;
+  & > div {
+    width: unset !important;
+  }
+}

bizmatch/src/app/components/image-crop-and-upload/image-crop-and-upload.component.ts

@@ -0,0 +1,66 @@
+import { Component, ElementRef, Input, output, ViewChild } from '@angular/core';
+import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';
+import { UploadParams } from '../../../../../bizmatch-server/src/models/main.model';
+import { ImageService } from '../../services/image.service';
+import { ListingsService } from '../../services/listings.service';
+import { SharedModule } from '../../shared/shared/shared.module';
+export interface UploadReponse {
+  success: boolean;
+  type: 'uploadPropertyPicture' | 'uploadCompanyLogo' | 'uploadProfile';
+}
+@Component({
+  selector: 'app-image-crop-and-upload',
+  standalone: true,
+  imports: [SharedModule, ImageCropperComponent],
+  templateUrl: './image-crop-and-upload.component.html',
+  styleUrl: './image-crop-and-upload.component.scss',
+})
+export class ImageCropAndUploadComponent {
+  showModal = false;
+  imageChangedEvent: any = '';
+  croppedImage: Blob | null = null;
+  @Input() uploadParams: UploadParams;
+  uploadFinished = output<UploadReponse>();
+  @ViewChild('fileInput', { static: true }) fileInput!: ElementRef<HTMLInputElement>;
+
+  constructor(private imageService: ImageService, private listingsService: ListingsService) {}
+
+  ngOnInit() {}
+  ngOnChanges() {
+    this.openFileDialog();
+  }
+  openFileDialog() {
+    if (this.uploadParams) {
+      this.fileInput.nativeElement.click();
+    }
+  }
+
+  fileChangeEvent(event: any): void {
+    this.imageChangedEvent = event;
+    this.showModal = true;
+  }
+
+  imageCropped(event: ImageCroppedEvent) {
+    this.croppedImage = event.blob;
+  }
+
+  closeModal() {
+    this.imageChangedEvent = null;
+    this.croppedImage = null;
+    this.showModal = false;
+    this.fileInput.nativeElement.value = '';
+    this.uploadFinished.emit({ success: false, type: this.uploadParams.type });
+  }
+
+  async uploadImage() {
+    if (this.croppedImage) {
+      await this.imageService.uploadImage(this.croppedImage, this.uploadParams.type, this.uploadParams.imagePath, this.uploadParams.serialId);
+      this.closeModal();
+      this.uploadFinished.emit({ success: true, type: this.uploadParams.type });
+    }
+  }
+
+  loadImageFailed() {
+    console.error('Load image failed');
+  }
+}

bizmatch/src/app/components/image-cropper/image-cropper.component.html

@@ -1,14 +0,0 @@
-<angular-cropper #cropper [imageUrl]="imageUrl" [cropperOptions]="cropperConfig"></angular-cropper>
-<div class="flex justify-content-between mt-3">
-  @if(ratioVariable){
-  <div>
-    <p-selectButton [options]="stateOptions" [ngModel]="value" (ngModelChange)="changeAspectRation($event)" optionLabel="label" optionValue="value" class="small"></p-selectButton>
-  </div>
-  } @else {
-  <div></div>
-  }
-  <div class="flex justify-content-between">
-    <p-button icon="pi" (click)="cancelUpload()" label="Cancel" [outlined]="true" size="small" class="mr-2"></p-button>
-    <p-button icon="pi pi-check" (click)="sendImage()" label="Finish" pAutoFocus [autofocus]="true" size="small"></p-button>
-  </div>
-</div>

bizmatch/src/app/components/image-cropper/image-cropper.component.scss

@@ -1,4 +0,0 @@
-::ng-deep p-selectbutton.small .p-button {
-  font-size: 0.875rem;
-  padding: 0.65625rem 1.09375rem;
-}

bizmatch/src/app/components/image-cropper/image-cropper.component.ts

@@ -1,52 +0,0 @@
-import { Component, ViewChild } from '@angular/core';
-import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
-import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { FileUpload, FileUploadModule } from 'primeng/fileupload';
-import { SelectButtonModule } from 'primeng/selectbutton';
-import { KeyValueRatio } from '../../../../../bizmatch-server/src/models/main.model';
-import { ImageService } from '../../services/image.service';
-import { LoadingService } from '../../services/loading.service';
-import { SharedModule } from '../../shared/shared/shared.module';
-export const stateOptions: KeyValueRatio[] = [
-  { label: '16/9', value: 16 / 9 },
-  { label: '1/1', value: 1 },
-  { label: 'Free', value: NaN },
-];
-@Component({
-  selector: 'app-image-cropper',
-  standalone: true,
-  imports: [SharedModule, FileUploadModule, AngularCropperjsModule, SelectButtonModule],
-  templateUrl: './image-cropper.component.html',
-  styleUrl: './image-cropper.component.scss',
-})
-export class ImageCropperComponent {
-  @ViewChild(CropperComponent) public angularCropper: CropperComponent;
-  imageUrl: string; //wird im Template verwendet
-  fileUpload: FileUpload;
-  value: number = stateOptions[0].value;
-  cropperConfig = { aspectRatio: this.value };
-  ratioVariable: boolean;
-  stateOptions = stateOptions;
-  constructor(private loadingService: LoadingService, private imageUploadService: ImageService, public config: DynamicDialogConfig, public ref: DynamicDialogRef) {}
-  ngOnInit(): void {
-    if (this.config.data) {
-      this.imageUrl = this.config.data.imageUrl;
-      this.fileUpload = this.config.data.fileUpload;
-      this.cropperConfig = this.config.data.config ? this.config.data.config : this.cropperConfig;
-      this.ratioVariable = this.config.data.ratioVariable;
-    }
-  }
-  sendImage() {
-    this.fileUpload.clear();
-    this.ref.close(this.angularCropper.cropper);
-  }
-
-  cancelUpload() {
-    this.fileUpload.clear();
-    this.ref.close();
-  }
-  changeAspectRation(ratio: number) {
-    this.cropperConfig = { aspectRatio: ratio };
-    this.angularCropper.cropper.setAspectRatio(ratio);
-  }
-}

bizmatch/src/app/components/inputnumber/inputnumber.component.scss

@@ -1,115 +0,0 @@
-// @layer primeng {
-    app-inputnumber,
-    .p-inputnumber {
-        display: inline-flex;
-    }
-
-    .p-inputnumber-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 0 0 auto;
-    }
-
-    .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,
-    .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {
-        display: none;
-    }
-
-    .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        padding: 0;
-    }
-
-    .p-inputnumber-buttons-stacked .p-inputnumber-input {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        border-bottom-left-radius: 0;
-        padding: 0;
-    }
-
-    .p-inputnumber-buttons-stacked .p-inputnumber-button-group {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
-        flex: 1 1 auto;
-    }
-
-    .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
-        order: 3;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    .p-inputnumber-buttons-horizontal .p-inputnumber-input {
-        order: 2;
-        border-radius: 0;
-    }
-
-    .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
-        order: 1;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    .p-inputnumber-buttons-vertical {
-        flex-direction: column;
-    }
-
-    .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {
-        order: 1;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        width: 100%;
-    }
-
-    .p-inputnumber-buttons-vertical .p-inputnumber-input {
-        order: 2;
-        border-radius: 0;
-        text-align: center;
-    }
-
-    .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {
-        order: 3;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        width: 100%;
-    }
-
-    .p-inputnumber-input {
-        flex: 1 1 auto;
-    }
-
-    .p-fluid app-inputnumber,
-    .p-fluid .p-inputnumber {
-        width: 100%;
-    }
-
-    .p-fluid .p-inputnumber .p-inputnumber-input {
-        width: 1%;
-    }
-
-    .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
-        width: 100%;
-    }
-
-    .p-inputnumber-clear-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-        cursor: pointer;
-    }
-
-    .p-inputnumber-clearable {
-        position: relative;
-    }
-// }

bizmatch/src/app/components/message/message-container.component.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { MessageComponent } from './message.component';
+import { Message, MessageService } from './message.service';
+
+@Component({
+  selector: 'app-message-container',
+  standalone: true,
+  imports: [CommonModule, MessageComponent],
+  template: `
+    <div class="fixed top-5 right-5 z-50 flex flex-col items-end">
+      <app-message *ngFor="let message of messages" [message]="message" (close)="removeMessage(message)"> </app-message>
+    </div>
+  `,
+})
+export class MessageContainerComponent implements OnInit {
+  messages: Message[] = [];
+
+  constructor(private messageService: MessageService) {}
+
+  ngOnInit(): void {
+    this.messageService.messages$.subscribe(messages => {
+      this.messages = messages;
+    });
+  }
+
+  removeMessage(message: Message): void {
+    this.messageService.removeMessage(message);
+  }
+}

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

@@ -0,0 +1,65 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Message } from './message.service';
+
+@Component({
+  selector: 'app-message',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div [@toastAnimation]="'in'" [ngClass]="getClasses()" role="alert">
+      <div class="ms-3 text-sm font-medium">{{ message.text }}</div>
+      <button type="button" (click)="onClose()" class="ms-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center h-8 w-8" [ngClass]="getCloseButtonClasses()" aria-label="Close">
+        <span class="sr-only">Close</span>
+        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+        </svg>
+      </button>
+    </div>
+  `,
+  animations: [
+    trigger('toastAnimation', [
+      transition(':enter', [style({ transform: 'translateY(100%)', opacity: 0 }), animate('300ms ease-out', style({ transform: 'translateY(0)', opacity: 1 }))]),
+      transition(':leave', [animate('300ms ease-in', style({ transform: 'translateY(100%)', opacity: 0 }))]),
+    ]),
+  ],
+})
+export class MessageComponent {
+  @Input() message!: Message;
+  @Output() close = new EventEmitter<void>();
+
+  onClose(): void {
+    this.close.emit();
+  }
+
+  getClasses(): string {
+    return `flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 rounded-lg shadow ${this.getSeverityClasses()}`;
+  }
+
+  getCloseButtonClasses(): string {
+    switch (this.message.severity) {
+      case 'success':
+        return 'text-green-600 hover:bg-green-200 focus:ring-green-400';
+      case 'danger':
+        return 'text-red-600 hover:bg-red-200 focus:ring-red-400';
+      case 'warning':
+        return 'text-yellow-600 hover:bg-yellow-200 focus:ring-yellow-400';
+      default:
+        return 'text-blue-600 hover:bg-blue-200 focus:ring-blue-400';
+    }
+  }
+
+  private getSeverityClasses(): string {
+    switch (this.message.severity) {
+      case 'success':
+        return 'bg-green-100 text-green-700';
+      case 'danger':
+        return 'bg-red-100 text-red-700';
+      case 'warning':
+        return 'bg-yellow-100 text-yellow-700';
+      default:
+        return 'bg-blue-100 text-blue-700';
+    }
+  }
+}

bizmatch/src/app/components/message/message.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+export interface Message {
+  severity: 'success' | 'danger' | 'warning';
+  text: string;
+  duration: number;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MessageService {
+  private messagesSubject = new BehaviorSubject<Message[]>([]);
+  messages$: Observable<Message[]> = this.messagesSubject.asObservable();
+
+  addMessage(message: Message): void {
+    const currentMessages = this.messagesSubject.value;
+    this.messagesSubject.next([...currentMessages, message]);
+
+    if (message.duration > 0) {
+      setTimeout(() => this.removeMessage(message), message.duration);
+    }
+  }
+
+  removeMessage(messageToRemove: Message): void {
+    const currentMessages = this.messagesSubject.value;
+    this.messagesSubject.next(currentMessages.filter(msg => msg !== messageToRemove));
+  }
+}

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

@@ -0,0 +1 @@
+<p>paginator works!</p>

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

@@ -0,0 +1,98 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+
+@Component({
+  selector: 'app-paginator',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <nav class="my-2" aria-label="Page navigation">
+      <ul class="flex justify-center items-center -space-x-px h-8 text-sm">
+        <li>
+          <a
+            (click)="onPageChange(currentPage - 1)"
+            [class.pointer-events-none]="currentPage === 1"
+            class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+          >
+            <span class="sr-only">Previous</span>
+            <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
+            </svg>
+          </a>
+        </li>
+        <ng-container *ngFor="let page of visiblePages">
+          <li *ngIf="page !== '...'">
+            <a
+              (click)="onPageChange(page)"
+              [ngClass]="
+                page === currentPage
+                  ? 'z-10 flex items-center justify-center px-3 h-8 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white'
+                  : 'flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
+              "
+            >
+              {{ page }}
+            </a>
+          </li>
+          <li *ngIf="page === '...'">
+            <span class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">...</span>
+          </li>
+        </ng-container>
+        <li>
+          <a
+            (click)="onPageChange(currentPage + 1)"
+            [class.pointer-events-none]="currentPage === pageCount"
+            class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+          >
+            <span class="sr-only">Next</span>
+            <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
+            </svg>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  `,
+})
+export class PaginatorComponent implements OnChanges {
+  @Input() page = 1;
+  @Input() pageCount = 1;
+  @Output() pageChange = new EventEmitter<number>();
+
+  currentPage = 1;
+  visiblePages: (number | string)[] = [];
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['page'] || changes['pageCount']) {
+      this.currentPage = this.page;
+      this.updateVisiblePages();
+    }
+  }
+
+  updateVisiblePages(): void {
+    const totalPages = this.pageCount;
+    const current = this.currentPage;
+
+    if (totalPages <= 6) {
+      this.visiblePages = Array.from({ length: totalPages }, (_, i) => i + 1);
+    } else {
+      if (current <= 3) {
+        this.visiblePages = [1, 2, 3, 4, '...', totalPages];
+      } else if (current >= totalPages - 2) {
+        this.visiblePages = [1, '...', totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
+      } else {
+        this.visiblePages = [1, '...', current - 1, current, current + 1, '...', totalPages];
+      }
+    }
+  }
+
+  onPageChange(page: number | string): void {
+    if (typeof page === 'string') {
+      return;
+    }
+    if (page >= 1 && page <= this.pageCount && page !== this.currentPage) {
+      this.currentPage = page;
+      this.pageChange.emit(page);
+      this.updateVisiblePages();
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+// 1. Shared Service (modal.service.ts)
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { BusinessListingCriteria, CommercialPropertyListingCriteria, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ModalService {
+  private modalVisibleSubject = new BehaviorSubject<boolean>(false);
+  private messageSubject = new BehaviorSubject<BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria>(null);
+  private resolvePromise!: (value: boolean) => void;
+
+  modalVisible$: Observable<boolean> = this.modalVisibleSubject.asObservable();
+  message$: Observable<BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria> = this.messageSubject.asObservable();
+
+  showModal(message: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria): Promise<boolean> {
+    this.messageSubject.next(message);
+    this.modalVisibleSubject.next(true);
+    return new Promise<boolean>(resolve => {
+      this.resolvePromise = resolve;
+    });
+  }
+
+  accept(): void {
+    this.modalVisibleSubject.next(false);
+    this.resolvePromise(true);
+  }
+
+  reject(): void {
+    this.modalVisibleSubject.next(false);
+    this.resolvePromise(false);
+  }
+}

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

@@ -0,0 +1,458 @@
+<div *ngIf="modalService.modalVisible$ | async" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
+  <div class="relative w-full max-w-4xl max-h-full">
+    <div class="relative bg-white rounded-lg shadow">
+      <div class="flex items-start justify-between p-4 border-b rounded-t">
+        <h3 class="text-xl font-semibold text-gray-900">Business Listing Search</h3>
+        <button (click)="modalService.reject()" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center">
+          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+          </svg>
+          <span class="sr-only">Close Modal</span>
+        </button>
+      </div>
+      <div class="p-6 space-y-6">
+        <div class="flex space-x-4 mb-4">
+          <button class="text-blue-600 font-medium border-b-2 border-blue-600 pb-2">Classic Search</button>
+          <button class="text-gray-500">AI Search <span class="bg-gray-200 text-xs font-semibold px-2 py-1 rounded">BETA</span></button>
+        </div>
+        @if(criteria.criteriaType==='businessListings'){
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="space-y-4">
+            <div>
+              <label for="state" class="block mb-2 text-sm font-medium text-gray-900">Location - State</label>
+
+              <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"> </ng-select>
+            </div>
+            <div>
+              <label for="city" class="block mb-2 text-sm font-medium text-gray-900">Location - City</label>
+
+              <ng-select
+                class="custom"
+                [multiple]="false"
+                [hideSelected]="true"
+                [trackByFn]="trackByFn"
+                [minTermLength]="2"
+                [loading]="cityLoading"
+                typeToSearchText="Please enter 2 or more characters"
+                [typeahead]="cityInput$"
+                [ngModel]="criteria.city"
+                (ngModelChange)="setCity($event)"
+              >
+                @for (city of cities$ | async; track city.id) {
+                <ng-option [value]="city">{{ city.city }} - {{ city.state }}</ng-option>
+                }
+              </ng-select>
+            </div>
+            <!-- New section for city search type -->
+            <div *ngIf="criteria.city">
+              <label class="block mb-2 text-sm font-medium text-gray-900">Search Type</label>
+              <div class="flex items-center space-x-4">
+                <label class="inline-flex items-center">
+                  <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="exact" />
+                  <span class="ml-2">Exact City</span>
+                </label>
+                <label class="inline-flex items-center">
+                  <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="radius" />
+                  <span class="ml-2">Radius Search</span>
+                </label>
+              </div>
+            </div>
+            <!-- New section for radius selection -->
+            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
+              <label class="block mb-2 text-sm font-medium text-gray-900">Select Radius (in miles)</label>
+              <div class="flex flex-wrap">
+                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
+                <button
+                  type="button"
+                  class="px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
+                  [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
+                  (click)="criteria.radius = radius"
+                >
+                  {{ radius }}
+                </button>
+                }
+              </div>
+            </div>
+
+            <div>
+              <label for="price" class="block mb-2 text-sm font-medium text-gray-900">Price</label>
+              <div class="flex items-center space-x-2">
+                <input
+                  type="number"
+                  id="price-from"
+                  [(ngModel)]="criteria.minPrice"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
+                  placeholder="From"
+                />
+                <span>-</span>
+                <input
+                  type="number"
+                  id="price-to"
+                  [(ngModel)]="criteria.maxPrice"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
+                  placeholder="To"
+                />
+              </div>
+            </div>
+            <div>
+              <label for="salesRevenue" class="block mb-2 text-sm font-medium text-gray-900">Sales Revenue</label>
+              <div class="flex items-center space-x-2">
+                <input
+                  type="number"
+                  id="salesRevenue-from"
+                  [(ngModel)]="criteria.minRevenue"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
+                  placeholder="From"
+                />
+                <span>-</span>
+                <input
+                  type="number"
+                  id="salesRevenue-to"
+                  [(ngModel)]="criteria.maxRevenue"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
+                  placeholder="To"
+                />
+              </div>
+            </div>
+            <div>
+              <label for="cashflow" class="block mb-2 text-sm font-medium text-gray-900">Cashflow</label>
+              <div class="flex items-center space-x-2">
+                <input
+                  type="number"
+                  id="cashflow-from"
+                  [(ngModel)]="criteria.minCashFlow"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
+                  placeholder="From"
+                />
+                <span>-</span>
+                <input
+                  type="number"
+                  id="cashflow-to"
+                  [(ngModel)]="criteria.maxCashFlow"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
+                  placeholder="To"
+                />
+              </div>
+            </div>
+            <div>
+              <label for="title" class="block mb-2 text-sm font-medium text-gray-900">Title / Description (Free Search)</label>
+              <input
+                type="text"
+                id="title"
+                [(ngModel)]="criteria.title"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                placeholder="e.g. Restaurant"
+              />
+            </div>
+          </div>
+          <div class="space-y-4">
+            <div>
+              <label class="block mb-2 text-sm font-medium text-gray-900">Category</label>
+              <div class="grid grid-cols-2 gap-2">
+                @for(tob of selectOptions.typesOfBusiness; track tob){
+                <div class="flex items-center">
+                  <input
+                    type="checkbox"
+                    id="automotive"
+                    [ngModel]="isTypeOfBusinessClicked(tob)"
+                    (ngModelChange)="categoryClicked($event, tob.value)"
+                    value="{{ tob.value }}"
+                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
+                  />
+                  <label for="automotive" class="ml-2 text-sm font-medium text-gray-900">{{ tob.name }}</label>
+                </div>
+                }
+              </div>
+            </div>
+            <div>
+              <label class="block mb-2 text-sm font-medium text-gray-900">Type of Property</label>
+              <div class="space-y-2">
+                <div class="flex items-center">
+                  <input [(ngModel)]="criteria.realEstateChecked" type="radio" id="realEstateChecked" name="wbs" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500" checked />
+                  <label for="realEstateChecked" class="ml-2 text-sm font-medium text-gray-900">Real Estate</label>
+                </div>
+                <div class="flex items-center">
+                  <input [(ngModel)]="criteria.leasedLocation" type="radio" id="leasedLocation" name="wbs" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500" />
+                  <label for="leasedLocation" class="ml-2 text-sm font-medium text-gray-900">Leased Location</label>
+                </div>
+                <div class="flex items-center">
+                  <input [(ngModel)]="criteria.franchiseResale" type="radio" id="franchiseResale" name="wbs" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500" />
+                  <label for="franchiseResale" class="ml-2 text-sm font-medium text-gray-900">Franchise</label>
+                </div>
+              </div>
+            </div>
+            <div>
+              <label for="numberEmployees" class="block mb-2 text-sm font-medium text-gray-900">Number of Employees</label>
+              <div class="flex items-center space-x-2">
+                <input
+                  type="number"
+                  id="numberEmployees-from"
+                  [(ngModel)]="criteria.minNumberEmployees"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
+                  placeholder="From"
+                />
+                <span>-</span>
+                <input
+                  type="number"
+                  id="numberEmployees-to"
+                  [(ngModel)]="criteria.maxNumberEmployees"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
+                  placeholder="To"
+                />
+              </div>
+            </div>
+            <div>
+              <label for="establishedSince" class="block mb-2 text-sm font-medium text-gray-900">Established Since</label>
+              <div class="flex items-center space-x-2">
+                <input
+                  type="number"
+                  id="establishedSince-From"
+                  [(ngModel)]="criteria.establishedSince"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
+                  placeholder="YYYY"
+                />
+                <span>-</span>
+                <input
+                  type="number"
+                  id="establishedSince-To"
+                  [(ngModel)]="criteria.establishedUntil"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
+                  placeholder="YYYY"
+                />
+              </div>
+            </div>
+            <div>
+              <label for="brokername" class="block mb-2 text-sm font-medium text-gray-900">Broker Name / Company Name</label>
+              <input
+                type="text"
+                id="brokername"
+                [(ngModel)]="criteria.brokerName"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                placeholder="e.g. Brokers Invest"
+              />
+            </div>
+          </div>
+        </div>
+        } @if(criteria.criteriaType==='commercialPropertyListings'){
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="space-y-4">
+            <div>
+              <label for="state" class="block mb-2 text-sm font-medium text-gray-900">Location - State</label>
+              <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"> </ng-select>
+            </div>
+            <div>
+              <label for="city" class="block mb-2 text-sm font-medium text-gray-900">Location - City</label>
+              <ng-select
+                class="custom"
+                [multiple]="false"
+                [hideSelected]="true"
+                [trackByFn]="trackByFn"
+                [minTermLength]="2"
+                [loading]="cityLoading"
+                typeToSearchText="Please enter 2 or more characters"
+                [typeahead]="cityInput$"
+                [ngModel]="criteria.city"
+                (ngModelChange)="setCity($event)"
+              >
+                @for (city of cities$ | async; track city.id) {
+                <ng-option [value]="city">{{ city.city }} - {{ selectOptions.getStateInitials(city.state) }}</ng-option>
+                }
+              </ng-select>
+            </div>
+            <!-- New section for city search type -->
+            <div *ngIf="criteria.city">
+              <label class="block mb-2 text-sm font-medium text-gray-900">Search Type</label>
+              <div class="flex items-center space-x-4">
+                <label class="inline-flex items-center">
+                  <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="exact" />
+                  <span class="ml-2">Exact City</span>
+                </label>
+                <label class="inline-flex items-center">
+                  <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="radius" />
+                  <span class="ml-2">Radius Search</span>
+                </label>
+              </div>
+            </div>
+            <!-- New section for radius selection -->
+            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
+              <label class="block mb-2 text-sm font-medium text-gray-900">Select Radius (in miles)</label>
+              <div class="flex flex-wrap">
+                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
+                <button
+                  type="button"
+                  class="px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
+                  [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
+                  (click)="criteria.radius = radius"
+                >
+                  {{ radius }}
+                </button>
+                }
+              </div>
+            </div>
+            <div>
+              <label for="price" class="block mb-2 text-sm font-medium text-gray-900">Price</label>
+              <div class="flex items-center space-x-2">
+                <input
+                  type="number"
+                  id="price-from"
+                  [(ngModel)]="criteria.minPrice"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
+                  placeholder="From"
+                />
+                <span>-</span>
+                <input
+                  type="number"
+                  id="price-to"
+                  [(ngModel)]="criteria.maxPrice"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
+                  placeholder="To"
+                />
+              </div>
+            </div>
+            <div>
+              <label for="title" class="block mb-2 text-sm font-medium text-gray-900">Title / Description (Free Search)</label>
+              <input
+                type="text"
+                id="title"
+                [(ngModel)]="criteria.title"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                placeholder="e.g. Restaurant"
+              />
+            </div>
+          </div>
+          <div class="space-y-4">
+            <div>
+              <label class="block mb-2 text-sm font-medium text-gray-900">Category</label>
+              <div class="grid grid-cols-2 gap-2">
+                @for(tob of selectOptions.typesOfCommercialProperty; track tob){
+                <div class="flex items-center">
+                  <input
+                    type="checkbox"
+                    id="automotive"
+                    [ngModel]="isTypeOfBusinessClicked(tob)"
+                    (ngModelChange)="categoryClicked($event, tob.value)"
+                    value="{{ tob.value }}"
+                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
+                  />
+                  <label for="automotive" class="ml-2 text-sm font-medium text-gray-900">{{ tob.name }}</label>
+                </div>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+        } @if(criteria.criteriaType==='brokerListings'){
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="space-y-4">
+            <div>
+              <label for="states" class="block mb-2 text-sm font-medium text-gray-900">Locations served - States</label>
+              <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state" [multiple]="false"> </ng-select>
+            </div>
+            <div>
+              <label for="counties" class="block mb-2 text-sm font-medium text-gray-900">Locations served - Counties</label>
+              <ng-select
+                [items]="counties$ | async"
+                bindLabel="name"
+                class="custom"
+                [multiple]="false"
+                [hideSelected]="true"
+                [trackByFn]="trackByFn"
+                [minTermLength]="2"
+                [loading]="countyLoading"
+                typeToSearchText="Please enter 2 or more characters"
+                [typeahead]="countyInput$"
+                [(ngModel)]="criteria.counties"
+              >
+                <!-- @for (county of counties$ | async; track county.id) {
+                <ng-option [value]="city.city">{{ city.city }} - {{ selectOptions.getStateInitials(city.state) }}</ng-option>
+                } -->
+              </ng-select>
+            </div>
+            <div>
+              <label for="city" class="block mb-2 text-sm font-medium text-gray-900">Location - City</label>
+              <ng-select
+                class="custom"
+                [multiple]="false"
+                [hideSelected]="true"
+                [trackByFn]="trackByFn"
+                [minTermLength]="2"
+                [loading]="cityLoading"
+                typeToSearchText="Please enter 2 or more characters"
+                [typeahead]="cityInput$"
+                [ngModel]="criteria.city"
+                (ngModelChange)="setCity($event)"
+              >
+                @for (city of cities$ | async; track city.id) {
+                <ng-option [value]="city">{{ city.city }} - {{ selectOptions.getStateInitials(city.state) }}</ng-option>
+                }
+              </ng-select>
+            </div>
+            <!-- New section for city search type -->
+            <div *ngIf="criteria.city">
+              <label class="block mb-2 text-sm font-medium text-gray-900">Search Type</label>
+              <div class="flex items-center space-x-4">
+                <label class="inline-flex items-center">
+                  <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="exact" />
+                  <span class="ml-2">Exact City</span>
+                </label>
+                <label class="inline-flex items-center">
+                  <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" value="radius" />
+                  <span class="ml-2">Radius Search</span>
+                </label>
+              </div>
+            </div>
+            <!-- New section for radius selection -->
+            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
+              <label class="block mb-2 text-sm font-medium text-gray-900">Select Radius (in miles)</label>
+              <div class="flex flex-wrap">
+                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
+                <button
+                  type="button"
+                  class="px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
+                  [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
+                  (click)="criteria.radius = radius"
+                >
+                  {{ radius }}
+                </button>
+                }
+              </div>
+            </div>
+          </div>
+          <div class="space-y-4">
+            <div>
+              <label class="block mb-2 text-sm font-medium text-gray-900">Category</label>
+              <div class="grid grid-cols-2 gap-2">
+                @for(tob of selectOptions.customerSubTypes; track tob){
+                <div class="flex items-center">
+                  <input
+                    type="checkbox"
+                    id="automotive"
+                    [ngModel]="isTypeOfProfessionalClicked(tob)"
+                    (ngModelChange)="categoryClicked($event, tob.value)"
+                    value="{{ tob.value }}"
+                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
+                  />
+                  <label for="automotive" class="ml-2 text-sm font-medium text-gray-900">{{ tob.name }}</label>
+                </div>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+        }
+      </div>
+      <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b">
+        <button type="button" (click)="modalService.accept()" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
+          Search ({{ numberOfResults$ | async }})
+        </button>
+        <button
+          type="button"
+          (click)="modalService.reject()"
+          class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+:host ::ng-deep .ng-select.custom .ng-select-container {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  height: 46px;
+  border-radius: 0.5rem;
+  .ng-value-container .ng-input {
+    top: 10px;
+  }
+}

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

@@ -0,0 +1,150 @@
+import { AsyncPipe, NgIf } from '@angular/common';
+import { Component } from '@angular/core';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { catchError, concat, debounceTime, distinctUntilChanged, map, Observable, of, Subject, Subscription, switchMap, tap } from 'rxjs';
+import { BusinessListingCriteria, CommercialPropertyListingCriteria, CountyResult, GeoResult, KeyValue, KeyValueStyle, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
+import { CriteriaChangeService } from '../../services/criteria-change.service';
+import { GeoService } from '../../services/geo.service';
+import { ListingsService } from '../../services/listings.service';
+import { SelectOptionsService } from '../../services/select-options.service';
+import { UserService } from '../../services/user.service';
+import { SharedModule } from '../../shared/shared/shared.module';
+import { ModalService } from './modal.service';
+@UntilDestroy()
+@Component({
+  selector: 'app-search-modal',
+  standalone: true,
+  imports: [SharedModule, AsyncPipe, NgIf, NgSelectModule],
+  templateUrl: './search-modal.component.html',
+  styleUrl: './search-modal.component.scss',
+})
+export class SearchModalComponent {
+  cities$: Observable<GeoResult[]>;
+  counties$: Observable<CountyResult[]>;
+  cityLoading = false;
+  countyLoading = false;
+  cityInput$ = new Subject<string>();
+  countyInput$ = new Subject<string>();
+  private criteriaChangeSubscription: Subscription;
+  public criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
+  numberOfResults$: Observable<number>;
+  constructor(
+    public selectOptions: SelectOptionsService,
+    public modalService: ModalService,
+    private geoService: GeoService,
+    private criteriaChangeService: CriteriaChangeService,
+    private listingService: ListingsService,
+    private userService: UserService,
+  ) {}
+  ngOnInit() {
+    this.setupCriteriaChangeListener();
+    this.modalService.message$.pipe(untilDestroyed(this)).subscribe(msg => {
+      this.criteria = msg;
+      this.setTotalNumberOfResults();
+    });
+    this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
+      if (val) {
+        this.criteria.page = 1;
+        this.criteria.start = 0;
+      }
+    });
+    this.loadCities();
+    this.loadCounties();
+  }
+
+  ngOnChanges() {}
+  categoryClicked(checked: boolean, value: string) {
+    if (checked) {
+      this.criteria.types.push(value);
+    } else {
+      const index = this.criteria.types.findIndex(t => t === value);
+      if (index > -1) {
+        this.criteria.types.splice(index, 1);
+      }
+    }
+  }
+  private loadCities() {
+    this.cities$ = concat(
+      of([]), // default items
+      this.cityInput$.pipe(
+        distinctUntilChanged(),
+        tap(() => (this.cityLoading = true)),
+        switchMap(term =>
+          this.geoService.findCitiesStartingWith(term).pipe(
+            catchError(() => of([])), // empty list on error
+            // map(cities => cities.map(city => city.city)), // transform the list of objects to a list of city names
+            tap(() => (this.cityLoading = false)),
+          ),
+        ),
+      ),
+    );
+  }
+  private loadCounties() {
+    this.counties$ = concat(
+      of([]), // default items
+      this.countyInput$.pipe(
+        distinctUntilChanged(),
+        tap(() => (this.countyLoading = true)),
+        switchMap(term =>
+          this.geoService.findCountiesStartingWith(term).pipe(
+            catchError(() => of([])), // empty list on error
+            map(counties => counties.map(county => county.name)), // transform the list of objects to a list of city names
+            tap(() => (this.countyLoading = false)),
+          ),
+        ),
+      ),
+    );
+  }
+  setCity(city) {
+    if (city) {
+      this.criteria.city = city.city;
+      this.criteria.state = city.state;
+    } else {
+      this.criteria.city = null;
+      this.criteria.radius = null;
+      this.criteria.searchType = 'exact';
+    }
+  }
+  setState(state: string) {
+    if (state) {
+      this.criteria.state = state;
+    } else {
+      this.criteria.state = null;
+      this.setCity(null);
+    }
+  }
+  private setupCriteriaChangeListener() {
+    this.criteriaChangeSubscription = this.criteriaChangeService.criteriaChange$.pipe(debounceTime(400)).subscribe(() => this.setTotalNumberOfResults());
+  }
+  trackByFn(item: GeoResult) {
+    return item.id;
+  }
+  search() {
+    console.log('Search criteria:', this.criteria);
+  }
+  getCounties() {
+    this.geoService.findCountiesStartingWith('');
+  }
+  closeModal() {
+    console.log('Closing modal');
+  }
+  isTypeOfBusinessClicked(v: KeyValueStyle) {
+    return this.criteria.types.find(t => t === v.value);
+  }
+  isTypeOfProfessionalClicked(v: KeyValue) {
+    return this.criteria.types.find(t => t === v.value);
+  }
+  setTotalNumberOfResults() {
+    if (this.criteria) {
+      console.log(`Getting total number of results for ${this.criteria.criteriaType}`);
+      if (this.criteria.criteriaType === 'businessListings' || this.criteria.criteriaType === 'commercialPropertyListings') {
+        this.numberOfResults$ = this.listingService.getNumberOfListings(this.criteria, this.criteria.criteriaType === 'businessListings' ? 'business' : 'commercialProperty');
+      } else if (this.criteria.criteriaType === 'brokerListings') {
+        this.numberOfResults$ = this.userService.getNumberOfBroker(this.criteria);
+      } else {
+        this.numberOfResults$ = of();
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+<div
+  [id]="id"
+  role="tooltip"
+  class="max-w-72 w-max absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
+>
+  {{ text }}
+  <div class="tooltip-arrow" data-popper-arrow></div>
+</div>

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

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { initFlowbite } from 'flowbite';
+
+@Component({
+  selector: 'app-tooltip',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './tooltip.component.html',
+})
+export class TooltipComponent {
+  @Input() id;
+  @Input() text;
+  ngOnInit() {
+    setTimeout(() => {
+      initFlowbite();
+    }, 10);
+  }
+}

bizmatch/src/app/components/validated-city/validated-city.component.html

@@ -0,0 +1,29 @@
+<div>
+  <label for="type" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit"
+    >{{ label }} @if(validationMessage){
+    <div
+      attr.data-tooltip-target="tooltip-{{ name }}"
+      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>
+    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    }
+  </label>
+  <ng-select
+    class="custom"
+    [multiple]="false"
+    [hideSelected]="true"
+    [trackByFn]="trackByFn"
+    [minTermLength]="2"
+    [loading]="cityLoading"
+    typeToSearchText="Please enter 2 or more characters"
+    [typeahead]="cityInput$"
+    ngModel="{{ value?.city }} {{ value ? '-' : '' }} {{ value?.state }}"
+    (ngModelChange)="onInputChange($event)"
+  >
+    @for (city of cities$ | async; track city.id) {
+    <ng-option [value]="city">{{ city.city }} - {{ city.state }}</ng-option>
+    }
+  </ng-select>
+</div>

bizmatch/src/app/components/validated-city/validated-city.component.scss

@@ -0,0 +1,9 @@
+:host ::ng-deep .ng-select.custom .ng-select-container {
+  //   --tw-bg-opacity: 1;
+  //   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  height: 42px;
+  border-radius: 0.5rem;
+  .ng-value-container .ng-input {
+    top: 10px;
+  }
+}

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

@@ -0,0 +1,68 @@
+import { CommonModule } from '@angular/common';
+import { Component, forwardRef, Input } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { catchError, concat, distinctUntilChanged, Observable, of, Subject, switchMap, tap } from 'rxjs';
+import { GeoResult } from '../../../../../bizmatch-server/src/models/main.model';
+import { City } from '../../../../../bizmatch-server/src/models/server.model';
+import { GeoService } from '../../services/geo.service';
+import { SelectOptionsService } from '../../services/select-options.service';
+import { BaseInputComponent } from '../base-input/base-input.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
+import { ValidationMessagesService } from '../validation-messages.service';
+
+@Component({
+  selector: 'app-validated-city',
+  standalone: true,
+  imports: [CommonModule, FormsModule, NgSelectModule, TooltipComponent],
+  templateUrl: './validated-city.component.html',
+  styleUrl: './validated-city.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ValidatedCityComponent),
+      multi: true,
+    },
+  ],
+})
+export class ValidatedCityComponent extends BaseInputComponent {
+  @Input() items;
+  cities$: Observable<GeoResult[]>;
+  cityInput$ = new Subject<string>();
+  countyInput$ = new Subject<string>();
+  cityLoading = false;
+  constructor(validationMessagesService: ValidationMessagesService, private geoService: GeoService, public selectOptions: SelectOptionsService) {
+    super(validationMessagesService);
+  }
+
+  override ngOnInit() {
+    super.ngOnInit();
+    this.loadCities();
+  }
+  onInputChange(event: City): void {
+    this.value = event; //{ ...event, longitude: parseFloat(event.longitude), latitude: parseFloat(event.latitude) };
+    this.onChange(this.value);
+  }
+  private loadCities() {
+    this.cities$ = concat(
+      of([]), // default items
+      this.cityInput$.pipe(
+        distinctUntilChanged(),
+        tap(() => (this.cityLoading = true)),
+        switchMap(term =>
+          this.geoService.findCitiesStartingWith(term).pipe(
+            catchError(() => of([])), // empty list on error
+            // map(cities => cities.map(city => city.city)), // transform the list of objects to a list of city names
+            tap(() => (this.cityLoading = false)),
+          ),
+        ),
+      ),
+    );
+  }
+  trackByFn(item: GeoResult) {
+    return item.id;
+  }
+  compareFn = (item, selected) => {
+    return item.id === selected.id;
+  };
+}

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

@@ -0,0 +1,25 @@
+<div>
+  <label [for]="name" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit">
+    {{ label }}
+    @if(validationMessage){
+    <div
+      attr.data-tooltip-target="tooltip-{{ name }}"
+      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>
+    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    }
+  </label>
+  <input
+    [type]="kind"
+    [id]="name"
+    [ngModel]="value"
+    (ngModelChange)="onInputChange($event)"
+    (blur)="onTouched()"
+    [attr.name]="name"
+    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+    [mask]="mask"
+    [dropSpecialCharacters]="false"
+  />
+</div>