changes to old client

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

@@ -20,21 +20,31 @@ export class AuthController {
     }
 
     try {
-      // Schritt 1: Hole den Benutzer anhand der E-Mail-Adresse
+      // Step 1: Get the user by email address
       const userRecord = await this.firebaseAdmin.auth().getUserByEmail(email);
 
       if (userRecord.emailVerified) {
-        return { message: 'Email is already verified' };
+        // Even if already verified, we'll still return a valid token
+        const customToken = await this.firebaseAdmin.auth().createCustomToken(userRecord.uid);
+        return {
+          message: 'Email is already verified',
+          token: customToken,
+        };
       }
 
-      // Schritt 2: Aktualisiere den Benutzerstatus
+      // Step 2: Update the user status to set emailVerified to true
-      // Hinweis: Wir können den oobCode nicht serverseitig validieren.
-      // Wir nehmen an, dass der oobCode korrekt ist, da er von Firebase generiert wurde.
       await this.firebaseAdmin.auth().updateUser(userRecord.uid, {
         emailVerified: true,
       });
 
-      return { message: 'Email successfully verified' };
+      // Step 3: Generate a custom Firebase token for the user
+      // This token can be used on the client side to authenticate with Firebase
+      const customToken = await this.firebaseAdmin.auth().createCustomToken(userRecord.uid);
+
+      return {
+        message: 'Email successfully verified',
+        token: customToken,
+      };
     } catch (error) {
       throw new HttpException(error.message || 'Failed to verify email', HttpStatus.BAD_REQUEST);
     }

bizmatch-server/src/drizzle/schema.ts

@@ -73,14 +73,6 @@ export const businesses = pgTable(
     created: timestamp('created'),
     updated: timestamp('updated'),
     location: jsonb('location'),
-    // city: varchar('city', { length: 255 }),
-    // state: char('state', { length: 2 }),
-    // zipCode: integer('zipCode'),
-    // county: varchar('county', { length: 255 }),
-    // street: varchar('street', { length: 255 }),
-    // housenumber: varchar('housenumber', { length: 10 }),
-    // latitude: doublePrecision('latitude'),
-    // longitude: doublePrecision('longitude'),
   },
   table => ({
     locationBusinessCityStateIdx: index('idx_business_location_city_state').on(

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

@@ -1,4 +1,4 @@
-import { BadRequestException, Inject, Injectable } from '@nestjs/common';
+import { BadRequestException, Inject, Injectable, NotFoundException } from '@nestjs/common';
 import { and, arrayContains, asc, count, desc, eq, gte, ilike, inArray, lte, ne, or, SQL, sql } from 'drizzle-orm';
 import { NodePgDatabase } from 'drizzle-orm/node-postgres';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
@@ -103,8 +103,8 @@ export class BusinessListingService {
         whereConditions.push(and(ilike(schema.users.firstname, `%${firstname}%`), ilike(schema.users.lastname, `%${lastname}%`)));
       }
     }
-    if (!user?.roles?.includes('ADMIN')) {
+    if (user?.role !== 'admin') {
-      whereConditions.push(or(eq(businesses.email, user?.username), ne(businesses.draft, true)));
+      whereConditions.push(or(eq(businesses.email, user?.email), ne(businesses.draft, true)));
     }
     whereConditions.push(and(eq(schema.users.customerType, 'professional'), eq(schema.users.customerSubType, 'broker')));
     return whereConditions;
@@ -186,8 +186,8 @@ export class BusinessListingService {
 
   async findBusinessesById(id: string, user: JwtUser): Promise<BusinessListing> {
     const conditions = [];
-    if (!user?.roles?.includes('ADMIN')) {
+    if (user?.role !== 'admin') {
-      conditions.push(or(eq(businesses.email, user?.username), ne(businesses.draft, true)));
+      conditions.push(or(eq(businesses.email, user?.email), ne(businesses.draft, true)));
     }
     conditions.push(sql`${businesses.id} = ${id}`);
     const result = await this.conn
@@ -204,7 +204,7 @@ export class BusinessListingService {
   async findBusinessesByEmail(email: string, user: JwtUser): Promise<BusinessListing[]> {
     const conditions = [];
     conditions.push(eq(businesses.email, email));
-    if (email !== user?.username && (!user?.roles?.includes('ADMIN'))) {
+    if (email !== user?.email && user?.role !== 'admin') {
       conditions.push(ne(businesses.draft, true));
     }
     const listings = (await this.conn
@@ -219,7 +219,7 @@ export class BusinessListingService {
     const userFavorites = await this.conn
       .select()
       .from(businesses)
-      .where(arrayContains(businesses.favoritesForUser, [user.username]));
+      .where(arrayContains(businesses.favoritesForUser, [user.email]));
     return userFavorites;
   }
   // #### CREATE ########################################
@@ -246,10 +246,18 @@ export class BusinessListingService {
     }
   }
   // #### UPDATE Business ########################################
-  async updateBusinessListing(id: string, data: BusinessListing): Promise<BusinessListing> {
+  async updateBusinessListing(id: string, data: BusinessListing, user: JwtUser): Promise<BusinessListing> {
     try {
+      const [existingListing] = await this.conn.select().from(businesses).where(eq(businesses.id, id));
+
+      if (!existingListing) {
+        throw new NotFoundException(`Business listing with id ${id} not found`);
+      }
       data.updated = new Date();
       data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
+      if (existingListing.email === user?.email) {
+        data.favoritesForUser = existingListing.favoritesForUser;
+      }
       BusinessListingSchema.parse(data);
       const convertedBusinessListing = data;
       const [updateListing] = await this.conn.update(businesses).set(convertedBusinessListing).where(eq(businesses.id, id)).returning();
@@ -276,7 +284,7 @@ export class BusinessListingService {
     await this.conn
       .update(businesses)
       .set({
-        favoritesForUser: sql`array_remove(${businesses.favoritesForUser}, ${user.username})`,
+        favoritesForUser: sql`array_remove(${businesses.favoritesForUser}, ${user.email})`,
       })
       .where(sql`${businesses.id} = ${id}`);
   }

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

@@ -50,8 +50,8 @@ export class BusinessListingsController {
 
   @UseGuards(OptionalAuthGuard)
   @Put()
-  async update(@Body() listing: any) {
+  async update(@Request() req, @Body() listing: any) {
-    return await this.listingsService.updateBusinessListing(listing.id, listing);
+    return await this.listingsService.updateBusinessListing(listing.id, listing, req.user as JwtUser);
   }
 
   @UseGuards(OptionalAuthGuard)

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

@@ -54,8 +54,8 @@ export class CommercialPropertyListingsController {
 
   @UseGuards(OptionalAuthGuard)
   @Put()
-  async update(@Body() listing: any) {
+  async update(@Request() req, @Body() listing: any) {
-    return await this.listingsService.updateCommercialPropertyListing(listing.id, listing);
+    return await this.listingsService.updateCommercialPropertyListing(listing.id, listing, req.user as JwtUser);
   }
 
   @UseGuards(OptionalAuthGuard)

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

@@ -1,4 +1,4 @@
-import { BadRequestException, Inject, Injectable } from '@nestjs/common';
+import { BadRequestException, Inject, Injectable, NotFoundException } from '@nestjs/common';
 import { and, arrayContains, asc, count, desc, eq, gte, ilike, inArray, lte, ne, or, SQL, sql } from 'drizzle-orm';
 import { NodePgDatabase } from 'drizzle-orm/node-postgres';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
@@ -49,8 +49,8 @@ export class CommercialPropertyService {
     if (criteria.title) {
       whereConditions.push(or(ilike(schema.commercials.title, `%${criteria.title}%`), ilike(schema.commercials.description, `%${criteria.title}%`)));
     }
-    if (!user?.roles?.includes('ADMIN')) {
+    if (user?.role !== 'admin') {
-      whereConditions.push(or(eq(commercials.email, user?.username), ne(commercials.draft, true)));
+      whereConditions.push(or(eq(commercials.email, user?.email), ne(commercials.draft, true)));
     }
     // whereConditions.push(and(eq(schema.users.customerType, 'professional')));
     return whereConditions;
@@ -113,8 +113,8 @@ export class CommercialPropertyService {
   // #### Find by ID ########################################
   async findCommercialPropertiesById(id: string, user: JwtUser): Promise<CommercialPropertyListing> {
     const conditions = [];
-    if (!user?.roles?.includes('ADMIN')) {
+    if (user?.role !== 'admin') {
-      conditions.push(or(eq(commercials.email, user?.username), ne(commercials.draft, true)));
+      conditions.push(or(eq(commercials.email, user?.email), ne(commercials.draft, true)));
     }
     conditions.push(sql`${commercials.id} = ${id}`);
     const result = await this.conn
@@ -132,7 +132,7 @@ export class CommercialPropertyService {
   async findCommercialPropertiesByEmail(email: string, user: JwtUser): Promise<CommercialPropertyListing[]> {
     const conditions = [];
     conditions.push(eq(commercials.email, email));
-    if (email !== user?.username && (!user?.roles?.includes('ADMIN'))) {
+    if (email !== user?.email && user?.role !== 'admin') {
       conditions.push(ne(commercials.draft, true));
     }
     const listings = (await this.conn
@@ -146,7 +146,7 @@ export class CommercialPropertyService {
     const userFavorites = await this.conn
       .select()
       .from(commercials)
-      .where(arrayContains(commercials.favoritesForUser, [user.username]));
+      .where(arrayContains(commercials.favoritesForUser, [user.email]));
     return userFavorites;
   }
   // #### Find by imagePath ########################################
@@ -181,10 +181,18 @@ export class CommercialPropertyService {
     }
   }
   // #### UPDATE CommercialProps ########################################
-  async updateCommercialPropertyListing(id: string, data: CommercialPropertyListing): Promise<CommercialPropertyListing> {
+  async updateCommercialPropertyListing(id: string, data: CommercialPropertyListing, user: JwtUser): Promise<CommercialPropertyListing> {
     try {
+      const [existingListing] = await this.conn.select().from(commercials).where(eq(commercials.id, id));
+
+      if (!existingListing) {
+        throw new NotFoundException(`Business listing with id ${id} not found`);
+      }
       data.updated = new Date();
       data.created = data.created ? (typeof data.created === 'string' ? new Date(data.created) : data.created) : new Date();
+      if (existingListing.email === user?.email || !user) {
+        data.favoritesForUser = existingListing.favoritesForUser;
+      }
       CommercialPropertyListingSchema.parse(data);
       const imageOrder = await this.fileService.getPropertyImages(data.imagePath, String(data.serialId));
       const difference = imageOrder.filter(x => !data.imageOrder.includes(x)).concat(data.imageOrder.filter(x => !imageOrder.includes(x)));
@@ -216,13 +224,13 @@ export class CommercialPropertyService {
     const index = listing.imageOrder.findIndex(im => im === name);
     if (index > -1) {
       listing.imageOrder.splice(index, 1);
-      await this.updateCommercialPropertyListing(listing.id, listing);
+      await this.updateCommercialPropertyListing(listing.id, listing, null);
     }
   }
   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);
+    await this.updateCommercialPropertyListing(listing.id, listing, null);
   }
   // #### DELETE  ########################################
   async deleteListing(id: string): Promise<void> {
@@ -233,7 +241,7 @@ export class CommercialPropertyService {
     await this.conn
       .update(commercials)
       .set({
-        favoritesForUser: sql`array_remove(${commercials.favoritesForUser}, ${user.username})`,
+        favoritesForUser: sql`array_remove(${commercials.favoritesForUser}, ${user.email})`,
       })
       .where(sql`${commercials.id} = ${id}`);
   }

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

@@ -165,8 +165,8 @@ const phoneRegex = /^(\+1|1)?[-.\s]?\(?[2-9]\d{2}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/;
 export const UserSchema = z
   .object({
     id: z.string().uuid().optional().nullable(),
-    firstname: z.string().min(2, { message: 'First name must contain at least 2 characters' }),
+    firstname: z.string().min(3, { message: 'First name must contain at least 2 characters' }),
-    lastname: z.string().min(2, { message: 'Last name must contain at least 2 characters' }),
+    lastname: z.string().min(3, { message: 'Last name must contain at least 2 characters' }),
     email: z.string().email({ message: 'Invalid email address' }),
     phoneNumber: z.string().optional().nullable(),
     description: z.string().optional().nullable(),
@@ -197,7 +197,13 @@ export const UserSchema = z
           path: ['customerSubType'],
         });
       }
-
+      if (!data.companyName || data.companyName.length < 6) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Company Name must contain at least 6 characters for professional customers',
+          path: ['companyName'],
+        });
+      }
       if (!data.phoneNumber || !phoneRegex.test(data.phoneNumber)) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
@@ -252,7 +258,8 @@ 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({
+export const BusinessListingSchema = z
+  .object({
     id: z.string().uuid().optional().nullable(),
     email: z.string().email(),
     type: z.string().refine(val => TypeEnum.safeParse(val).success, {
@@ -261,14 +268,14 @@ export const BusinessListingSchema = z.object({
     title: z.string().min(10),
     description: z.string().min(10),
     location: GeoSchema,
-  price: z.number().positive().max(1000000000),
+    price: z.number().positive(),
     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),
+    salesRevenue: z.number().positive().nullable(),
     cashFlow: z.number().positive().max(100000000),
     supportAndTraining: z.string().min(5),
     employees: z.number().int().positive().max(100000).optional().nullable(),
@@ -280,6 +287,29 @@ export const BusinessListingSchema = z.object({
     imageName: z.string().optional().nullable(),
     created: z.date(),
     updated: z.date(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.price && data.price > 1000000000) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Price must less than or equal $1,000,000,000',
+        path: ['price'],
+      });
+    }
+    if (data.salesRevenue && data.salesRevenue > 100000000) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'SalesRevenue must less than or equal $100,000,000',
+        path: ['salesRevenue'],
+      });
+    }
+    if (data.cashFlow && data.cashFlow > 100000000) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'CashFlow must less than or equal $100,000,000',
+        path: ['cashFlow'],
+      });
+    }
   });
 export type BusinessListing = z.infer<typeof BusinessListingSchema>;
 
@@ -294,7 +324,7 @@ export const CommercialPropertyListingSchema = z
     title: z.string().min(10),
     description: z.string().min(10),
     location: GeoSchema,
-    price: z.number().positive().max(1000000000),
+    price: z.number().positive(),
     favoritesForUser: z.array(z.string()),
     listingsCategory: ListingsCategoryEnum,
     draft: z.boolean(),
@@ -303,7 +333,15 @@ export const CommercialPropertyListingSchema = z
     created: z.date(),
     updated: z.date(),
   })
-  .strict();
+  .superRefine((data, ctx) => {
+    if (data.price && data.price > 1000000000) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Price must less than or equal $1,000,000,000',
+        path: ['price'],
+      });
+    }
+  });
 
 export type CommercialPropertyListing = z.infer<typeof CommercialPropertyListingSchema>;
 

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

@@ -123,11 +123,9 @@ export interface KeycloakUser {
   attributes?: Attributes;
 }
 export interface JwtUser {
-  userId: string;
+  email: string;
-  username: string;
+  role: string;
-  firstname: string;
+  uid: string;
-  lastname: string;
-  roles: string[];
 }
 interface Attributes {
   [key: string]: any;

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

@@ -54,7 +54,7 @@ export class UserService {
     }
 
     //never show user which denied
-    whereConditions.push(eq(schema.users.showInDirectory, true))
+    whereConditions.push(eq(schema.users.showInDirectory, true));
 
     return whereConditions;
   }
@@ -110,7 +110,7 @@ export class UserService {
       .from(schema.users)
       .where(sql`email = ${email}`)) as User[];
     if (users.length === 0) {
-      const user: User = { id: undefined, customerType: 'professional', ...createDefaultUser(email, jwtuser.firstname ? jwtuser.firstname : '', jwtuser.lastname ? jwtuser.lastname : '', null) };
+      const user: User = { id: undefined, customerType: 'professional', ...createDefaultUser(email, '', '', null) };
       const u = await this.saveUser(user, false);
       return u;
     } else {

bizmatch/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --host 0.0.0.0 & http-server ../bizmatch-server",
+    "start": "ng serve --port=4300 --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",
@@ -20,6 +20,7 @@
     "@angular/core": "^18.1.3",
     "@angular/fire": "^18.0.1",
     "@angular/forms": "^18.1.3",
+    "@angular/google-maps": "^18.2.14",
     "@angular/platform-browser": "^18.1.3",
     "@angular/platform-browser-dynamic": "^18.1.3",
     "@angular/platform-server": "^18.1.3",

bizmatch/src/app/app.component.html

@@ -3,10 +3,9 @@
   @if (actualRoute !=='home' && actualRoute !=='login' && actualRoute!=='emailVerification' && actualRoute!=='email-authorized'){
   <header></header>
   }
-  <main class="flex-1 bg-slate-100">
+  <main class="flex-1">
     <router-outlet></router-outlet>
   </main>
-
   <app-footer></app-footer>
 </div>
 

bizmatch/src/app/app.component.ts

@@ -43,38 +43,11 @@ export class AppComponent {
       while (currentRoute.children[0] !== undefined) {
         currentRoute = currentRoute.children[0];
       }
-      // Hier haben Sie Zugriff auf den aktuellen Route-Pfad
       this.actualRoute = currentRoute.snapshot.url[0].path;
     });
   }
-  ngOnInit() {
+  ngOnInit() {}
-    // this.keycloakService.keycloakEvents$.subscribe({
+
-    //   next: event => {
-    //     if (event.type === KeycloakEventType.OnTokenExpired) {
-    //       this.handleTokenExpiration();
-    //     }
-    //   },
-    // });
-  }
-  // private async handleTokenExpiration(): Promise<void> {
-  //   try {
-  //     // Versuche, den Token zu erneuern
-  //     const refreshed = await this.keycloakService.updateToken();
-  //     if (!refreshed) {
-  //       // Wenn der Token nicht erneuert werden kann, leite zur Login-Seite weiter
-  //       this.keycloakService.login({
-  //         redirectUri: window.location.href, // oder eine andere Seite
-  //       });
-  //     }
-  //   } catch (error) {
-  //     if (error.error === 'invalid_grant' && error.error_description === 'Token is not active') {
-  //       // Hier wird der Fehler "invalid_grant" abgefangen
-  //       this.keycloakService.login({
-  //         redirectUri: window.location.href,
-  //       });
-  //     }
-  //   }
-  // }
   @HostListener('window:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
     if (event.shiftKey && event.ctrlKey && event.key === 'V') {

bizmatch/src/app/app.routes.ts

@@ -28,17 +28,14 @@ export const routes: Routes = [
   {
     path: 'businessListings',
     component: BusinessListingsComponent,
-    runGuardsAndResolvers: 'always',
   },
   {
     path: 'commercialPropertyListings',
     component: CommercialPropertyListingsComponent,
-    runGuardsAndResolvers: 'always',
   },
   {
     path: 'brokerListings',
     component: BrokerListingsComponent,
-    runGuardsAndResolvers: 'always',
   },
   {
     path: 'home',

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

@@ -1,20 +1,8 @@
 <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" />
+      <img [src]="getImageUrl(item)" class="w-full h-full object-cover rounded-lg drop-shadow-custom-bg" />
-      <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md" (click)="imageToDelete.emit(item)">
+      <div class="absolute top-2 right-2 bg-white rounded-full p-1 drop-shadow-custom-bg" (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>

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

@@ -1,16 +1,35 @@
-<div class="container mx-auto p-4 text-center min-h-screen bg-gray-100">
+<div class="container mx-auto py-8 px-4 max-w-md">
+  <div class="bg-white p-6 rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg text-center">
+    <!-- Loading state -->
     <ng-container *ngIf="verificationStatus === 'pending'">
-    <p class="text-lg text-gray-600">Verifying your email...</p>
+      <div class="flex justify-center mb-4">
+        <div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+      </div>
+      <p class="text-gray-700">Verifying your email address...</p>
     </ng-container>
 
+    <!-- Success state -->
     <ng-container *ngIf="verificationStatus === 'success'">
+      <div class="flex justify-center mb-4">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+        </svg>
+      </div>
       <h2 class="text-2xl font-bold text-green-600 mb-5">Your email has been verified</h2>
-    <!-- <p class="text-gray-700 mb-4">You can now sign in with your new account</p> -->
+      <p class="text-gray-700 mb-4">You will be redirected to your account page in 5 seconds</p>
-    <a routerLink="/account" class="inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">Follow this link to access your Account Page </a>
+      <a routerLink="/account" class="inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"> Go to Account Page Now </a>
     </ng-container>
 
+    <!-- Error state -->
     <ng-container *ngIf="verificationStatus === 'error'">
-    <h2 class="text-2xl font-bold text-red-600 mb-2">Verification failed</h2>
+      <div class="flex justify-center mb-4">
-    <p class="text-gray-700">{{ errorMessage }}</p>
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </div>
+      <h2 class="text-2xl font-bold text-red-600 mb-3">Verification Failed</h2>
+      <p class="text-gray-700 mb-4">{{ errorMessage }}</p>
+      <a routerLink="/login" class="inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"> Return to Login </a>
     </ng-container>
   </div>
+</div>

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { environment } from '../../../environments/environment';
 import { AuthService } from '../../services/auth.service';
 import { UserService } from '../../services/user.service';
@@ -16,7 +16,7 @@ export class EmailAuthorizedComponent implements OnInit {
   verificationStatus: 'pending' | 'success' | 'error' = 'pending';
   errorMessage: string | null = null;
 
-  constructor(private route: ActivatedRoute, private http: HttpClient, private authService: AuthService, private userService: UserService) {}
+  constructor(private route: ActivatedRoute, private router: Router, private http: HttpClient, private authService: AuthService, private userService: UserService) {}
 
   ngOnInit(): void {
     const oobCode = this.route.snapshot.queryParamMap.get('oobCode');
@@ -32,11 +32,32 @@ export class EmailAuthorizedComponent implements OnInit {
   }
 
   private verifyEmail(oobCode: string, email: string): void {
-    this.http.post(`${environment.apiBaseUrl}/bizmatch/auth/verify-email`, { oobCode, email }).subscribe({
+    this.http.post<{ message: string; token: string }>(`${environment.apiBaseUrl}/bizmatch/auth/verify-email`, { oobCode, email }).subscribe({
-      next: async () => {
+      next: async response => {
         this.verificationStatus = 'success';
-        await this.authService.refreshToken();
+
+        try {
+          // Use the custom token from the server to sign in with Firebase
+          await this.authService.signInWithCustomToken(response.token);
+
+          // Try to get user info
+          try {
             const user = await this.userService.getByMail(email);
+            console.log('User retrieved:', user);
+          } catch (userError) {
+            console.error('Error getting user:', userError);
+            // Don't change verification status - it's still a success
+          }
+
+          // Redirect to dashboard after a short delay
+          setTimeout(() => {
+            this.router.navigate(['/account']);
+          }, 5000);
+        } catch (authError) {
+          console.error('Error signing in with custom token:', authError);
+          // Keep success status for verification, but add warning about login
+          this.errorMessage = 'Email verified, but there was an issue signing you in. Please try logging in manually.';
+        }
       },
       error: err => {
         this.verificationStatus = 'error';

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

@@ -1,5 +1,5 @@
 <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-  <div class="bg-white p-8 rounded shadow-md w-full max-w-md text-center">
+  <div class="bg-white p-8 rounded drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg w-full max-w-md text-center">
     <h2 class="text-2xl font-bold mb-4">Email Verification</h2>
     <p class="mb-4">A verification email has been sent to your email address. Please check your inbox and click the link to verify your account.</p>
     <p>Once verified, please return to the application.</p>

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

@@ -1,3 +1,4 @@
+<ng-template #otherRoute>
   <footer class="bg-white px-4 py-2 md:px-6 mt-auto w-full print:hidden">
     <div class="container mx-auto flex flex-col lg:flex-row justify-between items-center">
       <div class="flex flex-col lg:flex-row items-center mb-4 lg:mb-0">
@@ -27,6 +28,55 @@
       </div>
     </div>
   </footer>
+</ng-template>
+<footer *ngIf="isHomeRoute; else otherRoute" class="bg-gray-800 text-white pt-12 pb-4">
+  <div class="container mx-auto px-6">
+    <div class="flex flex-wrap">
+      <div class="w-full md:w-1/3 mb-8 md:mb-0">
+        <h3 class="text-xl font-semibold mb-4">BizMatch</h3>
+        <p class="mb-2">Your trusted partner in business brokerage.</p>
+        <p class="mb-2">TREC License #0516 788</p>
+      </div>
+
+      <div class="w-full md:w-1/3 mb-8 md:mb-0">
+        <h3 class="text-xl font-semibold mb-4">Quick Links</h3>
+        <ul>
+          <li class="mb-2">
+            <a href="#" class="text-gray-300 hover:text-white">Home</a>
+          </li>
+          <li class="mb-2">
+            <a href="#services" class="text-gray-300 hover:text-white">Services</a>
+          </li>
+          <li class="mb-2">
+            <a href="#location" class="text-gray-300 hover:text-white">Location</a>
+          </li>
+          <li class="mb-2">
+            <a href="#contact" class="text-gray-300 hover:text-white">Contact</a>
+          </li>
+          <li class="mb-2">
+            <a data-drawer-target="terms-of-use" data-drawer-show="terms-of-use" aria-controls="terms-of-use" class="text-gray-300 hover:text-white">Terms of use</a>
+          </li>
+          <li class="mb-2">
+            <a data-drawer-target="privacy" data-drawer-show="privacy" aria-controls="privacy" class="text-gray-300 hover:text-white">Privacy statement</a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="w-full md:w-1/3">
+        <h3 class="text-xl font-semibold mb-4">Contact Us</h3>
+        <p class="mb-2">1001 Blucher Street</p>
+        <p class="mb-2">Corpus Christi, TX 78401</p>
+        <p class="mb-4">United States</p>
+        <p class="mb-2">1-800-840-6025</p>
+        <p class="mb-2">info&#64;bizmatch.net</p>
+      </div>
+    </div>
+
+    <div class="pt-4 text-center">
+      <p class="text-sm text-gray-400 mt-4">&copy; 2025 BizMatch. All rights reserved.</p>
+    </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">

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

@@ -1,11 +1,7 @@
 :host {
-  // position: absolute;
-  // bottom: 0px;
   width: 100%;
 }
-div {
+
-  font-size: small;
-}
 @media (max-width: 1023px) {
   .order-2 {
     order: 2;

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

@@ -15,10 +15,12 @@ export class FooterComponent {
   privacyVisible = false;
   termsVisible = false;
   currentYear: number = new Date().getFullYear();
+  isHomeRoute = false;
   constructor(private router: Router) {}
   ngOnInit() {
     this.router.events.subscribe(event => {
       if (event instanceof NavigationEnd) {
+        this.isHomeRoute = event.url === '/home';
         initFlowbite();
       }
     });

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

@@ -1,5 +1,5 @@
 <nav class="bg-white border-gray-200 dark:bg-gray-900 print:hidden">
-  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+  <div class="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>
@@ -28,16 +28,11 @@
         </button>
 
         <!-- Sort options dropdown -->
-        <div *ngIf="sortDropdownVisible" class="absolute right-0 z-50 w-48 md:mt-2 max-md:mt-20 max-md:mr-[-2.5rem] bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-600">
+        <div *ngIf="sortDropdownVisible" class="absolute right-0 z-50 w-48 md:mt-2 max-md:mt-20 max-md:mr-[-2.5rem] bg-white border border-gray-200 rounded-lg drop-shadow-custom-bg dark:bg-gray-800 dark:border-gray-600">
           <ul class="py-1 text-sm text-gray-700 dark:text-gray-200">
             @for(item of sortByOptions; track item){
             <li (click)="sortBy(item.value)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">{{ item.selectName ? item.selectName : item.name }}</li>
             }
-            <!-- <li (click)="sortBy('priceAsc')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Price Ascending</li>
-            <li (click)="sortBy('priceDesc')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Price Descending</li>
-            <li (click)="sortBy('creationDateFirst')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Creation Date First</li>
-            <li (click)="sortBy('creationDateLast')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Creation Date Last</li>
-            <li (click)="sortBy(null)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Default Sorting</li> -->
           </ul>
         </div>
       </div>
@@ -51,7 +46,7 @@
         data-dropdown-placement="bottom"
       >
         <span class="sr-only">Open user menu</span>
-        @if(user?.hasProfile){
+        @if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
         <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>
@@ -68,28 +63,19 @@
           <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>
-          @if(user.customerType==='professional' || user.customerType==='seller' || (authService.isAdmin() | async)){
+          @if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
           <li>
-            @if(user.customerSubType==='broker'){
             <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
             >
-            }@else {
-            <a routerLink="/createCommercialPropertyListing" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-              >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="/myFavorites" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Favorites</a>
           </li>
-          }
-          <li>
-            <a routerLink="/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>
@@ -101,7 +87,7 @@
           </li>
         </ul>
         }
-        <ul class="py-2 md:hidden">
+        <!-- <ul class="py-2 md:hidden">
           <li>
             <a
               routerLink="/businessListings"
@@ -132,7 +118,7 @@
             >
           </li>
           }
-        </ul>
+        </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">
@@ -140,11 +126,11 @@
           <li>
             <a routerLink="/login" [queryParams]="{ mode: 'login' }" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Log In</a>
           </li>
-          <li>
+          <!-- <li>
-            <a routerLink="/login" [queryParams]="{ mode: 'register' }" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Register</a>
+            <a routerLink="/login" [queryParams]="{ mode: 'register' }" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign Up</a>
-          </li>
+          </li> -->
         </ul>
-        <ul class="py-2 md:hidden">
+        <!-- <ul class="py-2 md:hidden">
           <li>
             <a
               routerLink="/businessListings"
@@ -175,23 +161,11 @@
             >
           </li>
           }
-        </ul>
+        </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">
+    <!-- <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"
       >
@@ -230,10 +204,9 @@
         </li>
         }
       </ul>
-    </div>
+    </div> -->
   </div>
   <!-- Mobile filter button -->
-  @if(isFilterUrl()){
   <div class="md:hidden flex justify-center pb-4">
     <button
       (click)="openModal()"
@@ -254,5 +227,4 @@
       <i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(criteria?.sortBy) }}
     </button>
   </div>
-  }
 </nav>

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

@@ -6,7 +6,7 @@ import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { faUserGear } from '@fortawesome/free-solid-svg-icons';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Collapse, Dropdown, initFlowbite } from 'flowbite';
-import { filter, Observable, Subject, Subscription } from 'rxjs';
+import { debounceTime, filter, Observable, Subject, Subscription } from 'rxjs';
 import { SortByOptions, User } from '../../../../../bizmatch-server/src/models/db.model';
 import { BusinessListingCriteria, CommercialPropertyListingCriteria, emailToDirName, KeycloakUser, KeyValueAsSortBy, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../environments/environment';
@@ -92,7 +92,9 @@ export class HeaderComponent {
       this.checkCurrentRoute(event.urlAfterRedirects);
       this.setupSortByOptions();
     });
-
+    this.subscription = this.criteriaChangeService.criteriaChange$.pipe(debounceTime(400)).subscribe(() => {
+      this.criteria = getCriteriaProxy(this.baseRoute, this);
+    });
     this.userService.currentUser.pipe(untilDestroyed(this)).subscribe(u => {
       this.user = u;
     });
@@ -133,6 +135,9 @@ export class HeaderComponent {
   isActive(route: string): boolean {
     return this.router.url === route;
   }
+  isEmailUsUrl(): boolean {
+    return ['/emailUs'].includes(this.router.url);
+  }
   isFilterUrl(): boolean {
     return ['/businessListings', '/commercialPropertyListings', '/brokerListings'].includes(this.router.url);
   }
@@ -198,4 +203,7 @@ export class HeaderComponent {
   toggleSortDropdown() {
     this.sortDropdownVisible = !this.sortDropdownVisible;
   }
+  get isProfessional() {
+    return this.user?.customerType === 'professional';
+  }
 }

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

@@ -1,5 +1,5 @@
-<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+<div class="flex flex-col items-center justify-center min-h-screen">
-  <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
+  <div class="bg-white p-8 rounded-lg drop-shadow-custom-bg w-full max-w-md">
     <h2 class="text-2xl font-bold mb-6 text-center text-gray-800">
       {{ isLoginMode ? 'Login' : 'Sign Up' }}
     </h2>
@@ -83,12 +83,6 @@
 
     <!-- Google Button -->
     <button (click)="loginWithGoogle()" class="w-full flex items-center justify-center bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 py-2.5 rounded-lg transition-colors duration-200">
-      <!-- <svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M12.24 10.32V13.8H15.48C15.336 14.688 14.568 16.368 12.24 16.368C10.224 16.368 8.568 14.688 8.568 12.672C8.568 10.656 10.224 8.976 12.24 8.976C13.32 8.976 14.16 9.432 14.688 10.08L16.704 8.208C15.528 7.032 14.04 6.384 12.24 6.384C8.832 6.384 6 9.216 6 12.672C6 16.128 8.832 18.96 12.24 18.96C15.696 18.96 18.12 16.656 18.12 12.672C18.12 11.952 18.024 11.28 17.88 10.656L12.24 10.32Z"
-          fill="currentColor"
-        />
-      </svg> -->
       <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
         <path
           fill="#FFC107"
@@ -100,17 +94,5 @@
       </svg>
       Continue with Google
     </button>
-    <!-- <button (click)="loginWithGoogle()" class="bg-white text-blue-600 px-6 py-3 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 flex items-center justify-center">
-      <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
-        <path
-          fill="#FFC107"
-          d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
-        />
-        <path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" />
-        <path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0124 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" />
-        <path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 01-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" />
-      </svg>
-      Continue with Google
-    </button> -->
   </div>
 </div>

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

@@ -41,6 +41,7 @@ export class LoginRegisterComponent {
   onSubmit(): void {
     this.errorMessage = '';
     if (this.isLoginMode) {
+      this.authService.clearRoleCache();
       this.authService
         .loginWithEmail(this.email, this.password)
         .then(userCredential => {
@@ -81,6 +82,7 @@ export class LoginRegisterComponent {
   // Login with Google
   loginWithGoogle(): void {
     this.errorMessage = '';
+    this.authService.clearRoleCache();
     this.authService
       .loginWithGoogle()
       .then(userCredential => {

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

@@ -394,7 +394,7 @@
                 [items]="counties$ | async"
                 bindLabel="name"
                 class="custom"
-                [multiple]="false"
+                [multiple]="true"
                 [hideSelected]="true"
                 [trackByFn]="trackByFn"
                 [minTermLength]="2"

bizmatch/src/app/pages/admin/user-list/user-list.component.html

@@ -32,7 +32,7 @@
   </div>
 
   <!-- Benutzertabelle -->
-  <div class="overflow-x-auto shadow-md rounded-lg bg-white">
+  <div class="overflow-x-auto drop-shadow-custom-bg rounded-lg bg-white">
     <table class="min-w-full divide-y divide-gray-200">
       <thead class="bg-gray-50">
         <tr>
@@ -107,7 +107,7 @@
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                 </svg>
               </button>
-              <div *ngIf="dropdown.classList.contains('active')" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
+              <div *ngIf="dropdown.classList.contains('active')" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md drop-shadow-custom-bg bg-white ring-1 ring-black ring-opacity-5 z-10">
                 <div class="py-1" role="menu" aria-orientation="vertical">
                   <a (click)="changeUserRole(user, 'admin'); dropdown.classList.remove('active')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">Admin</a>
                   <a (click)="changeUserRole(user, 'pro'); dropdown.classList.remove('active')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">Pro</a>

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

@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg shadow-lg overflow-hidden relative">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden relative">
     <button
       (click)="historyService.goBack()"
       class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 print:hidden"
@@ -14,13 +14,17 @@
         <p class="mb-4" [innerHTML]="description"></p>
 
         <div class="space-y-2">
-          <div class="flex flex-col sm:flex-row" [ngClass]="{ 'bg-gray-100': i % 2 === 0 }" *ngFor="let item of listingDetails; let i = index">
+          <div *ngFor="let detail of listingDetails; let i = index" class="flex flex-col sm:flex-row" [ngClass]="{ 'bg-gray-100': i % 2 === 0 }">
-            <div class="w-full sm:w-1/3 font-semibold p-2">{{ item.label }}</div>
+            <div class="w-full sm:w-1/3 font-semibold p-2">{{ detail.label }}</div>
-            @if(item.label==='Category'){
+
-            <span class="bg-blue-100 text-blue-800 font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300 my-1">{{ item.value }}</span>
+            <div class="w-full sm:w-2/3 p-2" *ngIf="!detail.isHtml && !detail.isListingBy">{{ detail.value }}</div>
-            } @else {
+
-            <div class="w-full sm:w-2/3 p-2">{{ item.value }}</div>
+            <div class="w-full sm:w-2/3 p-2 flex space-x-2" [innerHTML]="detail.value" *ngIf="detail.isHtml && !detail.isListingBy"></div>
-            }
+
+            <div class="w-full sm:w-2/3 p-2 flex space-x-2" *ngIf="detail.isListingBy">
+              <a routerLink="/details-user/{{ listingUser.id }}" class="text-blue-600 dark:text-blue-500 hover:underline">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
+              <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" />
+            </div>
           </div>
         </div>
         <div class="py-4 print:hidden">
@@ -84,17 +88,6 @@
           <div>
             <app-validated-textarea label="Questions/Comments" name="comments" [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
           </div>
-          @if(listingUser){
-          <div class="flex items-center space-x-2">
-            <p>Listing by</p>
-            <!-- <p class="text-sm font-semibold">Noah Nguyen</p> -->
-            <a routerLink="/details-user/{{ listingUser.id }}" class="text-blue-600 dark:text-blue-500 hover:underline">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
-            <!-- <img src="https://placehold.co/20x20" alt="Broker logo" class="w-5 h-5" /> -->
-            @if(listingUser.hasCompanyLogo){
-            <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" />
-            }
-          </div>
-          }
           <button (click)="mail()" class="w-full sm:w-auto px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Submit</button>
         </form>
       </div>

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { LeafletModule } from '@bluehalo/ngx-leaflet';
@@ -24,6 +24,7 @@ import { SharedModule } from '../../../shared/shared/shared.module';
 import { createMailInfo, map2User } from '../../../utils/utils';
 // Import für Leaflet
 // Benannte Importe für Leaflet
+import dayjs from 'dayjs';
 import { AuthService } from '../../../services/auth.service';
 import { BaseDetailsComponent } from '../base-details.component';
 @Component({
@@ -80,6 +81,7 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
     public emailService: EMailService,
     private geoService: GeoService,
     public authService: AuthService,
+    private cdref: ChangeDetectorRef,
   ) {
     super();
     this.router.events.subscribe(event => {
@@ -121,8 +123,10 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
       this.mailinfo.email = this.listingUser.email;
       this.mailinfo.listing = this.listing;
       await this.mailService.mail(this.mailinfo);
+      this.validationMessagesService.clearMessages();
       this.auditService.createEvent(this.listing.id, 'contact', this.user?.email, this.mailinfo.sender);
       this.messageService.addMessage({ severity: 'success', text: 'Your message has been sent to the creator of the listing', duration: 3000 });
+      this.mailinfo = createMailInfo(this.user);
     } catch (error) {
       this.messageService.addMessage({
         severity: 'danger',
@@ -133,9 +137,6 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
         this.validationMessagesService.updateMessages(error.error.message);
       }
     }
-    if (this.user) {
-      this.mailinfo = createMailInfo(this.user);
-    }
   }
   get listingDetails() {
     let typeOfRealEstate = '';
@@ -149,15 +150,26 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
     const result = [
       { label: 'Category', value: this.selectOptions.getBusiness(this.listing.type) },
       { label: 'Located in', value: `${this.listing.location.name ? this.listing.location.name : this.listing.location.county}, ${this.selectOptions.getState(this.listing.location.state)}` },
-      { label: 'Asking Price', value: `$${this.listing.price?.toLocaleString()}` },
+      { label: 'Asking Price', value: `${this.listing.price ? `$${this.listing.price.toLocaleString()}` : ''}` },
-      { label: 'Sales revenue', value: `$${this.listing.salesRevenue?.toLocaleString()}` },
+      { label: 'Sales revenue', value: `${this.listing.salesRevenue ? `$${this.listing.salesRevenue.toLocaleString()}` : ''}` },
-      { label: 'Cash flow', value: `$${this.listing.cashFlow?.toLocaleString()}` },
+      { label: 'Cash flow', value: `${this.listing.cashFlow ? `$${this.listing.cashFlow.toLocaleString()}` : ''}` },
       { label: 'Type of Real Estate', value: typeOfRealEstate },
       { label: 'Employees', value: this.listing.employees },
       { label: 'Established since', value: this.listing.established },
       { label: 'Support & Training', value: this.listing.supportAndTraining },
       { label: 'Reason for Sale', value: this.listing.reasonForSale },
       { label: 'Broker licensing', value: this.listing.brokerLicencing },
+      { label: 'Listed since', value: `${this.dateInserted()} - ${this.getDaysListed()} days` },
+      {
+        label: 'Listing by',
+        value: null, // Wird nicht verwendet
+        isHtml: true,
+        isListingBy: true, // Flag für den speziellen Fall
+        user: this.listingUser, // Übergebe das User-Objekt
+        imagePath: this.listing.imageName,
+        imageBaseUrl: this.env.imageBaseUrl,
+        ts: this.ts,
+      },
     ];
     if (this.listing.draft) {
       result.push({ label: 'Draft', value: this.listing.draft ? 'Yes' : 'No' });
@@ -194,4 +206,10 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
   createEvent(eventType: EventTypeEnum) {
     this.auditService.createEvent(this.listing.id, eventType, this.user?.email);
   }
+  getDaysListed() {
+    return dayjs().diff(this.listing.created, 'day');
+  }
+  dateInserted() {
+    return dayjs(this.listing.created).format('DD/MM/YYYY');
+  }
 }

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

@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white shadow-md rounded-lg overflow-hidden">
+  <div class="bg-white drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg rounded-lg overflow-hidden">
     @if(listing){
     <div class="p-6 relative">
       <h1 class="text-3xl font-bold mb-4">{{ listing?.title }}</h1>
@@ -16,7 +16,18 @@
           <div class="space-y-2">
             <div *ngFor="let detail of propertyDetails; let i = index" class="flex flex-col sm:flex-row" [ngClass]="{ 'bg-gray-100': i % 2 === 0 }">
               <div class="w-full sm:w-1/3 font-semibold p-2">{{ detail.label }}</div>
-              <div class="w-full sm:w-2/3 p-2">{{ detail.value }}</div>
+
+              <!-- Standard Text -->
+              <div class="w-full sm:w-2/3 p-2" *ngIf="!detail.isHtml && !detail.isListingBy">{{ detail.value }}</div>
+
+              <!-- HTML Content (nicht für RouterLink) -->
+              <div class="w-full sm:w-2/3 p-2 flex space-x-2" [innerHTML]="detail.value" *ngIf="detail.isHtml && !detail.isListingBy"></div>
+
+              <!-- Speziell für Listing By mit RouterLink -->
+              <div class="w-full sm:w-2/3 p-2 flex space-x-2" *ngIf="detail.isListingBy">
+                <a [routerLink]="['/details-user', detail.user.id]" class="text-blue-600 dark:text-blue-500 hover:underline"> {{ detail.user.firstname }} {{ detail.user.lastname }} </a>
+                <img *ngIf="detail.user.hasCompanyLogo" [src]="detail.imageBaseUrl + '/pictures/logo/' + detail.imagePath + '.avif?_ts=' + detail.ts" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" />
+              </div>
             </div>
           </div>
           <div class="py-4 print:hidden">
@@ -88,15 +99,6 @@
               </div>
 
               <div class="flex items-center justify-between">
-                @if(listingUser){
-                <div class="flex items-center space-x-2">
-                  <p>Listing by</p>
-                  <a routerLink="/details-user/{{ listingUser.id }}" class="text-blue-600 dark:text-blue-500 hover:underline">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
-                  @if(listingUser.hasCompanyLogo){
-                  <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imagePath }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" />
-                  }
-                </div>
-                }
                 <button (click)="mail()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Submit</button>
               </div>
             </form>

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

@@ -3,6 +3,7 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LeafletModule } from '@bluehalo/ngx-leaflet';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import dayjs from 'dayjs';
 import { GalleryModule, ImageItem } from 'ng-gallery';
 import { ShareButton } from 'ngx-sharebuttons/button';
 import { lastValueFrom } from 'rxjs';
@@ -109,6 +110,17 @@ export class DetailsCommercialPropertyListingComponent extends BaseDetailsCompon
         { label: 'Located in', value: this.selectOptions.getState(this.listing.location.state) },
         { label: this.listing.location.name ? 'City' : 'County', value: this.listing.location.name ? this.listing.location.name : this.listing.location.county },
         { label: 'Asking Price:', value: `$${this.listing.price?.toLocaleString()}` },
+        { label: 'Listed since', value: `${this.dateInserted()} - ${this.getDaysListed()} days` },
+        {
+          label: 'Listing by',
+          value: null, // Wird nicht verwendet
+          isHtml: true,
+          isListingBy: true, // Flag für den speziellen Fall
+          user: this.listingUser, // Übergebe das User-Objekt
+          imagePath: this.listing.imagePath,
+          imageBaseUrl: this.env.imageBaseUrl,
+          ts: this.ts,
+        },
       ];
       if (this.listing.draft) {
         this.propertyDetails.push({ label: 'Draft', value: this.listing.draft ? 'Yes' : 'No' });
@@ -144,8 +156,10 @@ export class DetailsCommercialPropertyListingComponent extends BaseDetailsCompon
       this.mailinfo.email = this.listingUser.email;
       this.mailinfo.listing = this.listing;
       await this.mailService.mail(this.mailinfo);
+      this.validationMessagesService.clearMessages();
       this.auditService.createEvent(this.listing.id, 'contact', this.user?.email, this.mailinfo.sender);
       this.messageService.addMessage({ severity: 'success', text: 'Your message has been sent to the creator of the listing', duration: 3000 });
+      this.mailinfo = createMailInfo(this.user);
     } catch (error) {
       this.messageService.addMessage({
         severity: 'danger',
@@ -156,9 +170,6 @@ export class DetailsCommercialPropertyListingComponent extends BaseDetailsCompon
         this.validationMessagesService.updateMessages(error.error.message);
       }
     }
-    if (this.user) {
-      this.mailinfo = createMailInfo(this.user);
-    }
   }
   containsError(fieldname: string) {
     return this.errorResponse?.fields.map(f => f.fieldname).includes(fieldname);
@@ -195,4 +206,10 @@ export class DetailsCommercialPropertyListingComponent extends BaseDetailsCompon
   createEvent(eventType: EventTypeEnum) {
     this.auditService.createEvent(this.listing.id, eventType, this.user?.email);
   }
+  getDaysListed() {
+    return dayjs().diff(this.listing.created, 'day');
+  }
+  dateInserted() {
+    return dayjs(this.listing.created).format('DD/MM/YYYY');
+  }
 }

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

@@ -1,6 +1,6 @@
 <div class="container mx-auto p-4">
   @if(user){
-  <div class="bg-white shadow-md rounded-lg overflow-hidden">
+  <div class="bg-white drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg rounded-lg overflow-hidden">
     <!-- Header -->
     <div class="flex items-center justify-between p-4 border-b relative">
       <div class="flex items-center space-x-4">

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

@@ -1,210 +1,252 @@
-<header class="w-full flex justify-between items-center p-4 bg-white top-0 z-10 h-16 md:h-20">
+<!-- Navigation -->
-  <img src="assets/images/header-logo.png" alt="Logo" class="h-8 md:h-10" />
+<nav class="bg-white">
-  <div class="hidden md:flex items-center space-x-4">
+  <div class="container mx-auto px-6 py-3 flex justify-between items-center">
+    <div class="flex items-center">
+      <a href="#" class="text-2xl font-bold text-blue-800">
+        <img src="assets/images/header-logo.png" alt="BizMatch.net" class="h-10" />
+      </a>
+    </div>
+    <div class="hidden md:flex items-center space-x-8">
+      <a href="#" class="text-gray-800 hover:text-blue-600">Home</a>
+      <a routerLink="/businessListings" class="text-blue-700 hover:font-bold">Businesses</a>
+      <a href="#services" class="text-gray-800 hover:text-blue-600">Services</a>
+      <a href="#location" class="text-gray-800 hover:text-blue-600">Location</a>
+      <a href="#contact" class="text-gray-800 hover:text-blue-600">Contact</a>
       @if(user){
-    <a routerLink="/account" class="text-blue-600 border border-blue-600 px-3 py-2 rounded">Account</a>
+      <a routerLink="/logout" class="text-gray-800 hover:text-blue-600">Logout</a>
       }@else{
-    <!-- <a routerLink="/pricing" class="text-gray-800">Pricing</a> -->
+      <a routerLink="/login" [queryParams]="{ mode: 'login' }" class="text-gray-800 hover:text-blue-600">Log In</a>
-    <a routerLink="/login" [queryParams]="{ mode: 'login' }" class="text-blue-600 border border-blue-600 px-3 py-2 rounded">Log In</a>
-    <a routerLink="/login" [queryParams]="{ mode: 'register' }" class="text-white bg-blue-600 px-4 py-2 rounded">Register</a>
-    <!-- <a routerLink="/login" class="text-blue-500 hover:underline">Login/Register</a> -->
       }
     </div>
-  <button (click)="toggleMenu()" class="md:hidden text-gray-600">
+    <div class="md:hidden">
-    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <button class="text-gray-800 focus:outline-none" (click)="toggleMobileMenu()">
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7"></path>
+        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
+          <path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
         </svg>
       </button>
-</header>
+    </div>
-
+  </div>
-<div *ngIf="isMenuOpen" class="fixed inset-0 bg-gray-800 bg-opacity-75 z-20">
+  <!-- Mobile menu (only shows when toggleMobileMenu is true) -->
-  <div class="flex flex-col items-center justify-center h-full">
+  <div *ngIf="showMobileMenu" class="md:hidden bg-white py-2 px-4">
-    <!-- <a href="#" class="text-white text-xl py-2">Pricing</a> -->
+    <a href="#" class="block py-2 text-gray-800 hover:text-blue-600">Home</a>
+    <a href="#services" class="block py-2 text-gray-800 hover:text-blue-600">Services</a>
+    <a href="#location" class="block py-2 text-gray-800 hover:text-blue-600">Location</a>
+    <a href="#contact" class="block py-2 text-gray-800 hover:text-blue-600">Contact</a>
     @if(user){
-    <a routerLink="/account" class="text-white text-xl py-2">Account</a>
+    <a routerLink="/logout" class="block py-2 text-gray-800 hover:text-blue-600">Logout</a>
     }@else{
-    <a routerLink="/login" [queryParams]="{ mode: 'login' }" class="text-white text-xl py-2">Log In</a>
+    <a routerLink="/login" [queryParams]="{ mode: 'login' }" class="block py-2 text-gray-800 hover:text-blue-600">Log In</a>
-    <a routerLink="/login" [queryParams]="{ mode: 'register' }" class="text-white text-xl py-2">Register</a>
     }
-    <button (click)="toggleMenu()" class="text-white mt-4">
+  </div>
-      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+</nav>
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
+
+<!-- Hero Section (made narrower) -->
+<section class="hero-section flex items-center px-[2rem] py-[5rem]">
+  <div class="container mx-auto px-6 flex flex-col">
+    <!-- max-w-5xl makes it narrower -->
+    <div class="flex flex-col md:flex-row items-center">
+      <div class="md:w-1/2 text-white">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-4">Connect with Your Ideal Business Opportunity</h1>
+        <p class="text-xl mb-8">BizMatch is your trusted partner in buying, selling, and valuing businesses in Texas.</p>
+      </div>
+      <div class="md:w-1/2 flex justify-center">
+        <img src="assets/images/corpusChristiSkyline.jpg" alt="Business handshake" class="rounded-lg shadow-2xl" />
+      </div>
+    </div>
+    <div class="flex justify-center mt-10">
+      <a routerLink="/businessListings" class="bg-green-500 md:text-2xl text-lg text-white font-semibold px-8 py-4 rounded-full shadow-lg hover:bg-green-600 transition duration-300"> View Available Businesses </a>
+    </div>
+  </div>
+</section>
+
+<!-- Services Section -->
+<section id="services" class="py-20 bg-gray-50">
+  <div class="container mx-auto px-6">
+    <div class="text-center mb-16">
+      <h2 class="text-3xl font-bold text-blue-800 mb-4">Our Services</h2>
+      <p class="text-gray-600 max-w-2xl mx-auto">We offer comprehensive business brokerage services to help you navigate the complex process of buying or selling a business.</p>
+    </div>
+
+    <div class="flex flex-wrap -mx-4">
+      <!-- Service 1 -->
+      <div class="w-full md:w-1/3 px-4 mb-8">
+        <div class="service-card bg-white rounded-lg filter md:drop-shadow-custom-bg drop-shadow-custom-bg-mobile p-8 h-full">
+          <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
+            <svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"
+              ></path>
             </svg>
-    </button>
+          </div>
+          <h3 class="text-xl font-semibold text-blue-800 mb-4 text-center">Business Sales</h3>
+          <p class="text-gray-600 text-center">We help business owners prepare and market their businesses to qualified buyers, ensuring confidentiality throughout the process.</p>
         </div>
       </div>
 
-<main class="flex flex-col items-center justify-center lg:px-4 w-full flex-grow">
+      <!-- Service 2 -->
-  <div class="bg-cover-custom py-20 md:py-40 flex flex-col w-full">
+      <div class="w-full md:w-1/3 px-4 mb-8">
-    <div class="flex justify-center w-full">
+        <div class="service-card bg-white rounded-lg filter md:drop-shadow-custom-bg drop-shadow-custom-bg-mobile p-8 h-full">
-      <div class="w-11/12 md:w-2/3 lg:w-1/2">
+          <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
-        <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-blue-900 mb-4 text-center">Find businesses for sale.</h1>
+            <svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
-        <p class="text-base md:text-lg lg:text-xl text-blue-600 mb-8 text-center">Unlocking Exclusive Opportunities - Empowering Entrepreneurial Dreams</p>
+              <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
-        <div class="bg-white bg-opacity-80 pb-6 pt-2 px-2 rounded-lg shadow-lg w-full" [ngClass]="{ 'pt-6': aiSearch }">
-          @if(!aiSearch){
-          <div class="text-sm lg:text-base mb-1 text-center text-gray-500 border-gray-200 dark:text-gray-400 dark:border-gray-700 flex justify-center">
-            <ul class="flex flex-wrap -mb-px">
-              <li class="me-2">
-                <a
-                  (click)="changeTab('business')"
-                  [ngClass]="
-                    activeTabAction === 'business'
-                      ? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
-                      : ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
-                  "
-                  class="hover:cursor-pointer inline-block p-4 border-b-2 rounded-t-lg"
-                  >Businesses</a
-                >
-              </li>
-              @if ((numberOfCommercial$ | async) > 0) {
-              <li class="me-2">
-                <a
-                  (click)="changeTab('commercialProperty')"
-                  [ngClass]="
-                    activeTabAction === 'commercialProperty'
-                      ? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
-                      : ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
-                  "
-                  class="hover:cursor-pointer inline-block p-4 border-b-2 rounded-t-lg"
-                  >Properties</a
-                >
-              </li>
-              }
-              @if ((numberOfBroker$ | async) > 0) {
-              <li class="me-2">
-                <a
-                  (click)="changeTab('broker')"
-                  [ngClass]="
-                    activeTabAction === 'broker'
-                      ? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
-                      : ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
-                  "
-                  class="hover:cursor-pointer inline-block p-4 border-b-2 rounded-t-lg"
-                  >Professionals</a
-                >
-              </li>
-              }
-            </ul>
-          </div>
-          } @if(aiSearch){
-          <div class="w-full max-w-3xl mx-auto bg-white rounded-lg flex flex-col md:flex-row md:border md:border-gray-300">
-            <div class="md:w-48 flex-1 md:border-r border-gray-300 overflow-hidden mb-2 md:mb-0">
-              <div class="relative max-sm:border border-gray-300 rounded-md">
-                <input #aiSearchInput type="text" [(ngModel)]="aiSearchText" name="aiSearchText" class="w-full p-2 border border-gray-300 rounded-md" (focus)="stopTypingEffect()" (blur)="startTypingEffect()" />
-              </div>
-            </div>
-            <div class="bg-blue-600 hover:bg-blue-500 transition-colors duration-200 max-sm:rounded-md">
-              <button
-                type="button"
-                class="w-full h-full text-white font-semibold py-3 px-6 focus:outline-none rounded-md md:rounded-none flex items-center justify-center min-w-[180px] min-h-[48px]"
-                (click)="generateAiResponse()"
-              >
-                <span class="flex items-center">
-                  @if(loadingAi){
-                  <svg aria-hidden="true" role="status" class="w-4 h-4 mr-3 text-white animate-spin" 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="#E5E7EB"
-                    />
-                    <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="currentColor"
-                    />
             </svg>
-                  <span>Loading ...</span>
+          </div>
-                  } @else {
+          <h3 class="text-xl font-semibold text-blue-800 mb-4 text-center">Business Acquisitions</h3>
-                  <span>Search</span>
+          <p class="text-gray-600 text-center">We assist buyers in finding the right business opportunity, perform due diligence, and negotiate favorable terms for acquisition.</p>
-                  }
-                </span>
-              </button>
         </div>
       </div>
-          @if(aiSearchFailed){
+
-          <div id="error-message" class="w-full max-w-3xl mx-auto mt-2 text-red-600 text-center">Search timed out. Please try again or use classic Search</div>
+      <!-- Service 3 -->
-          } } @if(criteria && !aiSearch){
+      <div class="w-full md:w-1/3 px-4 mb-8">
-          <div class="w-full max-w-3xl mx-auto bg-white rounded-lg flex flex-col md:flex-row md:border md:border-gray-300">
+        <div class="service-card bg-white rounded-lg filter md:drop-shadow-custom-bg drop-shadow-custom-bg-mobile p-8 h-full">
-            <div class="md:flex-none md:w-48 flex-1 md:border-r border-gray-300 overflow-hidden mb-2 md:mb-0">
+          <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
-              <div class="relative max-sm:border border-gray-300 rounded-md">
+            <svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
-                <select
+              <path
-                  class="appearance-none bg-transparent w-full py-3 px-4 pr-8 focus:outline-none md:border-none rounded-md md:rounded-none"
+                fill-rule="evenodd"
-                  [ngModel]="criteria.types"
+                d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
-                  (ngModelChange)="onTypesChange($event)"
+                clip-rule="evenodd"
-                  [ngClass]="{ 'placeholder-selected': criteria.types.length === 0 }"
+              ></path>
-                >
+            </svg>
-                  <option [value]="[]">{{ getPlaceholderLabel() }}</option>
+          </div>
-                  @for(type of getTypes(); track type){
+          <h3 class="text-xl font-semibold text-blue-800 mb-4 text-center">Business Valuation</h3>
-                  <option [value]="type.value">{{ type.name }}</option>
+          <p class="text-gray-600 text-center">Our expert team provides accurate business valuations based on industry standards, financial performance, and market conditions.</p>
-                  }
-                </select>
-                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-                  <i class="fas fa-chevron-down text-xs"></i>
         </div>
       </div>
     </div>
 
-            <div class="md:flex-auto md:w-36 flex-grow md:border-r border-gray-300 mb-2 md:mb-0">
+    <!-- Video Section -->
-              <div class="relative max-sm:border border-gray-300 rounded-md">
+    <div class="mt-16 text-center">
-                <ng-select
+      <h3 class="text-2xl font-semibold text-blue-800 mb-8">See How We Work</h3>
-                  class="custom md:border-none rounded-md md:rounded-none"
+      <div class="max-w-4xl mx-auto">
-                  [multiple]="false"
+        <video controls class="w-full rounded-lg shadow-xl" poster="assets/images/video-poster.png">
-                  [hideSelected]="true"
+          <source src="assets/videos/Bizmatch30Spot.mp4" type="video/mp4" />
-                  [trackByFn]="trackByFn"
+          Your browser does not support the video tag.
-                  [minTermLength]="2"
+        </video>
-                  [loading]="cityLoading"
+      </div>
-                  typeToSearchText="Please enter 2 or more characters"
+    </div>
-                  [typeahead]="cityInput$"
+  </div>
-                  [ngModel]="cityOrState"
+</section>
-                  (ngModelChange)="setCityOrState($event)"
+
-                  placeholder="Enter City or State ..."
+<!-- Why Choose Us Section -->
-                  groupBy="type"
+<section class="py-20 bg-white">
+  <div class="container mx-auto px-6">
+    <div class="text-center mb-16">
+      <h2 class="text-3xl font-bold text-blue-800 mb-4">Why Choose BizMatch</h2>
+      <p class="text-gray-600 max-w-2xl mx-auto">With decades of experience in the business brokerage industry, we provide unparalleled service to our clients.</p>
+    </div>
+
+    <div class="flex flex-wrap -mx-4">
+      <!-- Feature 1 -->
+      <div class="w-full md:w-1/4 px-4 mb-8">
+        <div class="text-center">
+          <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
+            <svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fill-rule="evenodd"
+                d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-semibold text-blue-800 mb-2">Experience</h3>
+          <p class="text-gray-600">Over 25 years of combined experience in business brokerage.</p>
+        </div>
+      </div>
+
+      <!-- Feature 2 -->
+      <div class="w-full md:w-1/4 px-4 mb-8">
+        <div class="text-center">
+          <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6 mx-auto">
+            <svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-semibold text-blue-800 mb-2">Confidentiality</h3>
+          <p class="text-gray-600">We maintain strict confidentiality throughout the entire transaction process.</p>
+        </div>
+      </div>
+
+      <!-- Feature 3 -->
+      <div class="w-full md:w-1/4 px-4 mb-8">
+        <div class="text-center">
+          <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto">
+            <svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-semibold text-blue-800 mb-2">Network</h3>
+          <p class="text-gray-600">Extensive network of qualified buyers and business owners throughout Texas.</p>
+        </div>
+      </div>
+
+      <!-- Feature 4 -->
+      <div class="w-full md:w-1/4 px-4 mb-8">
+        <div class="text-center">
+          <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-6 mx-auto">
+            <svg class="w-8 h-8 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fill-rule="evenodd"
+                d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-semibold text-blue-800 mb-2">Personalized Approach</h3>
+          <p class="text-gray-600">Customized strategy for each client based on their unique business goals.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Location Section -->
+<section id="location" class="py-20 bg-gray-50">
+  <div class="container mx-auto px-6">
+    <div class="flex flex-wrap items-stretch">
+      <!-- Changed from items-center to items-stretch -->
+      <div class="w-full lg:w-2/5 mb-12 lg:mb-0">
+        <div class="h-full flex flex-col">
+          <!-- Added flex container with h-full -->
+          <h2 class="text-3xl font-bold text-blue-800 mb-6">Visit Our Office</h2>
+          <p class="text-gray-600 mb-8 text-lg">Our team of business brokers is ready to assist you at our Corpus Christi location.</p>
+          <div class="bg-white p-6 rounded-lg shadow-lg flex-grow">
+            <!-- Added flex-grow to make it fill available space -->
+            <h3 class="text-xl font-semibold text-blue-800 mb-4">BizMatch Headquarters</h3>
+            <p class="text-gray-600 mb-2">1001 Blucher Street</p>
+            <p class="text-gray-600 mb-2">Corpus Christi, TX 78401</p>
+            <p class="text-gray-600 mb-6">United States</p>
+            <p class="text-gray-600 mb-2"><strong>Phone:</strong> (555) 123-4567</p>
+            <p class="text-gray-600"><strong>Email:</strong> info&#64;bizmatch.net</p>
+          </div>
+        </div>
+      </div>
+      <div class="w-full lg:w-3/5">
+        <div class="rounded-lg overflow-hidden shadow-xl h-full min-h-[384px]">
+          <!-- Changed h-96 to h-full with min-height -->
+          <iframe
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3533.7894679685755!2d-97.38527228476843!3d27.773756032788047!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x866c1e3b8a9d0c0b%3A0x8f2c1d4c1a5c5b2c!2s1001%20Blucher%20St%2C%20Corpus%20Christi%2C%20TX%2078401%2C%20USA!5e0!3m2!1sen!2sde!4v1672531192743!5m2!1sen!2sde"
+            width="100%"
+            height="100%"
+            class="rounded-lg border-0"
+            style="min-height: 384px; display: block"
+            allowfullscreen=""
+            loading="lazy"
+            referrerpolicy="no-referrer-when-downgrade"
           >
-                  @for (city of cities$ | async; track city.id) { @let state = city.type==='city'?city.content.state:''; @let separator = city.type==='city'?' - ':'';
+          </iframe>
-                  <ng-option [value]="city">{{ city.content.name }}{{ separator }}{{ state }}</ng-option>
-                  }
-                </ng-select>
-              </div>
-            </div>
-            @if (criteria.radius && !aiSearch){
-            <div class="md:flex-none md:w-36 flex-1 md:border-r border-gray-300 mb-2 md:mb-0">
-              <div class="relative max-sm:border border-gray-300 rounded-md">
-                <select
-                  class="appearance-none bg-transparent w-full py-3 px-4 pr-8 focus:outline-none md:border-none rounded-md md:rounded-none"
-                  (ngModelChange)="onRadiusChange($event)"
-                  [ngModel]="criteria.radius"
-                  [ngClass]="{ 'placeholder-selected': !criteria.radius }"
-                >
-                  <option [value]="null">City Radius</option>
-                  @for(dist of selectOptions.distances; track dist){
-                  <option [value]="dist.value">{{ dist.name }}</option>
-                  }
-                </select>
-                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-                  <i class="fas fa-chevron-down text-xs"></i>
-                </div>
-              </div>
-            </div>
-            }
-            <div class="bg-blue-600 hover:bg-blue-500 transition-colors duration-200 max-sm:rounded-md">
-              @if(getNumberOfFiltersSet()>0 && numberOfResults$){
-              <button class="w-full h-full text-white font-semibold py-3 px-6 focus:outline-none rounded-md md:rounded-none" (click)="search()">Search ({{ numberOfResults$ | async }})</button>
-              }@else {
-              <button class="w-full h-full text-white font-semibold py-3 px-6 focus:outline-none rounded-md md:rounded-none" (click)="search()">Search</button>
-              }
-            </div>
-          </div>
-          }
-          <!-- <div class="mt-4 flex items-center justify-center text-gray-700">
-            <span class="mr-2">AI-Search</span>
-            <span [attr.data-tooltip-target]="tooltipTargetBeta" class="bg-sky-300 text-teal-800 text-xs font-semibold px-2 py-1 rounded">BETA</span>
-            <app-tooltip [id]="tooltipTargetBeta" text="AI will convert your input into filter criteria. Please check them in the filter menu after search"></app-tooltip>
-            <span class="ml-2">- Try now</span>
-            <div class="ml-4 relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
-              <input (click)="toggleAiSearch()" type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 border-gray-300 appearance-none cursor-pointer" />
-              <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
-            </div>
-          </div> -->
         </div>
       </div>
     </div>
   </div>
-</main>
+</section>
+
+<!-- Contact Section -->
+<section id="contact" class="py-20 bg-blue-700">
+  <div class="container mx-auto px-6 text-center">
+    <h2 class="text-3xl font-bold text-white mb-8">Ready to Get Started?</h2>
+    <p class="text-white text-xl mb-12 max-w-3xl mx-auto">Contact our team of experienced business brokers today for a confidential consultation about buying or selling a business.</p>
+    <a routerLink="/emailUs" class="bg-white text-blue-700 font-bold px-8 py-4 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 text-lg">Contact Us Now</a>
+  </div>
+</section>
+
+<!-- Footer -->

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

@@ -1,74 +1,85 @@
-.bg-cover-custom {
+// Hero section styles
-  background-image: url('/assets/images/index-bg.webp');
+.hero-section {
-  background-size: cover;
+  background: linear-gradient(135deg, #0046b5 0%, #00a0e9 100%);
-  background-position: center;
+  // height: 70vh; // Made shorter as requested
-  border-radius: 20px;
+  // min-height: 500px; // Reduced from 600px
-  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
-  min-height: calc(100vh - 4rem);
-}
-select:not([size]) {
-  background-image: unset;
-}
-[type='text'],
-[type='email'],
-[type='url'],
-[type='password'],
-[type='number'],
-[type='date'],
-[type='datetime-local'],
-[type='month'],
-[type='search'],
-[type='tel'],
-[type='time'],
-[type='week'],
-[multiple],
-textarea,
-select {
-  border: unset;
-}
-.toggle-checkbox:checked {
-  right: 0;
-  border-color: rgb(125 211 252);
-}
-.toggle-checkbox:checked + .toggle-label {
-  background-color: rgb(125 211 252);
-}
-:host ::ng-deep .ng-select.ng-select-single .ng-select-container {
-  height: 48px;
-  border: none;
-  background-color: transparent;
-  .ng-value-container .ng-input {
-    top: 10px;
-  }
-  span.ng-arrow-wrapper {
-    display: none;
-  }
-}
-select {
-  color: #000; /* Standard-Textfarbe für das Dropdown */
-  // background-color: #fff; /* Hintergrundfarbe für das Dropdown */
 }
 
-select option {
+// Button hover effects
-  color: #000; /* Textfarbe für Dropdown-Optionen */
+.btn-primary {
+  background-color: #0046b5;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background-color: #003492;
+  }
 }
 
-select.placeholder-selected {
+// Service card animation
-  color: #999; /* Farbe für den Platzhalter */
+.service-card {
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-10px);
   }
-input::placeholder {
-  color: #555; /* Dunkleres Grau */
-  opacity: 1; /* Stellt sicher, dass die Deckkraft 100% ist */
 }
 
-/* Stellt sicher, dass die Optionen im Dropdown immer schwarz sind */
+// Responsive adjustments
-select:focus option,
+@media (max-width: 768px) {
-select:hover option {
+  .hero-section {
-  color: #000 !important;
+    height: auto;
+    padding: 4rem 0;
+  }
+}
+
+// Make sure the Google Map is responsive
+google-map {
+  display: block;
+  width: 100%;
+}
+
+// Override Tailwind default styling for video
+video {
+  max-width: 100%;
+  object-fit: cover;
+}
+
+// Zusätzliche Styles für den Location-Bereich
+
+// Verbesserte Map-Container Styles
+#location {
+  .rounded-lg.overflow-hidden {
+    position: relative;
+    height: 100%;
+    min-height: 384px;
+  }
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+
+  // Stellen Sie sicher, dass der Kartencontainer im mobilen Layout
+  // eine angemessene Höhe hat
+  @media (max-width: 1023px) {
+    .rounded-lg.overflow-hidden {
+      height: 400px;
+    }
+  }
+}
+
+// Adressbox-Styling verbessern
+.bg-white.p-6.rounded-lg.shadow-lg.flex-grow {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  // Sicherstellen, dass der untere Bereich sichtbar bleibt
+  .contact-info {
+    margin-top: auto;
   }
-input[type='text'][name='aiSearchText'] {
-  padding: 14px; /* Innerer Abstand */
-  font-size: 16px; /* Schriftgröße anpassen */
-  box-sizing: border-box; /* Padding und Border in die Höhe und Breite einrechnen */
-  height: 48px;
 }

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

@@ -1,313 +1,52 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { RouterLink, RouterOutlet } from '@angular/router';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { initFlowbite } from 'flowbite';
-import { catchError, concat, debounceTime, distinctUntilChanged, lastValueFrom, Observable, of, Subject, Subscription, switchMap, tap } from 'rxjs';
-import { BusinessListingCriteria, CityAndStateResult, CommercialPropertyListingCriteria, GeoResult, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
-import { ModalService } from '../../components/search-modal/modal.service';
-import { TooltipComponent } from '../../components/tooltip/tooltip.component';
-import { AiService } from '../../services/ai.service';
 import { AuthService } from '../../services/auth.service';
-import { CriteriaChangeService } from '../../services/criteria-change.service';
+
-import { GeoService } from '../../services/geo.service';
+import { User } from '../../../../../bizmatch-server/src/models/db.model';
-import { ListingsService } from '../../services/listings.service';
+import { KeycloakUser } from '../../../../../bizmatch-server/src/models/main.model';
-import { SearchService } from '../../services/search.service';
-import { SelectOptionsService } from '../../services/select-options.service';
 import { UserService } from '../../services/user.service';
-import {
+import { map2User } from '../../utils/utils';
-  assignProperties,
+
-  compareObjects,
-  createEmptyBusinessListingCriteria,
-  createEmptyCommercialPropertyListingCriteria,
-  createEmptyUserListingCriteria,
-  createEnhancedProxy,
-  getCriteriaStateObject,
-  map2User,
-} from '../../utils/utils';
-@UntilDestroy()
 @Component({
   selector: 'app-home',
-  standalone: true,
-  imports: [CommonModule, FormsModule, RouterModule, NgSelectModule, TooltipComponent],
   templateUrl: './home.component.html',
-  styleUrl: './home.component.scss',
+  styleUrls: ['./home.component.scss'],
+  standalone: true,
+  imports: [CommonModule, RouterOutlet, RouterLink],
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit {
-  placeholders: string[] = ['Property close to Houston less than 10M', 'Franchise business in Austin price less than 500K'];
+  showMobileMenu = false;
-  activeTabAction: 'business' | 'commercialProperty' | 'broker' = 'business';
+  keycloakUser: KeycloakUser;
-  type: string;
+  user: User;
-  maxPrice: string;
+  constructor(private authService: AuthService, private userService: UserService) {}
-  minPrice: string;
-  criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
-  states = [];
-  isMenuOpen = false;
-  user: KeycloakUser;
-  prompt: string;
-  cities$: Observable<CityAndStateResult[]>;
-  cityLoading = false;
-  cityInput$ = new Subject<string>();
-  cityOrState = undefined;
-  private criteriaChangeSubscription: Subscription;
-  numberOfResults$: Observable<number>;
-  numberOfBroker$: Observable<number>;
-  numberOfCommercial$: Observable<number>;
-  aiSearch = false;
-  aiSearchText = '';
-  aiSearchFailed = false;
-  loadingAi = false;
-  @ViewChild('aiSearchInput', { static: false }) searchInput!: ElementRef;
-  typingSpeed: number = 100; // Geschwindigkeit des Tippens (ms)
-  pauseTime: number = 2000; // Pausezeit, bevor der Text verschwindet (ms)
-  index: number = 0;
-  charIndex: number = 0;
-  typingInterval: any;
-  showInput: boolean = true; // Steuerung der Anzeige des Eingabefelds
-  tooltipTargetBeta = 'tooltipTargetBeta';
-  public constructor(
-    private router: Router,
-    private modalService: ModalService,
-    private searchService: SearchService,
-    private activatedRoute: ActivatedRoute,
-    public selectOptions: SelectOptionsService,
 
-    private criteriaChangeService: CriteriaChangeService,
-    private geoService: GeoService,
-    public cdRef: ChangeDetectorRef,
-    private listingService: ListingsService,
-    private userService: UserService,
-    private aiService: AiService,
-    private authService: AuthService,
-  ) {}
   async ngOnInit() {
-    setTimeout(() => {
+    // Add smooth scrolling for anchor links
-      initFlowbite();
+    this.setupSmoothScrolling();
-    }, 0);
-    this.numberOfBroker$ = this.userService.getNumberOfBroker(createEmptyUserListingCriteria());
-    this.numberOfCommercial$ = this.listingService.getNumberOfListings(createEmptyCommercialPropertyListingCriteria(), 'commercialProperty');
     const token = await this.authService.getToken();
-    sessionStorage.removeItem('businessListings');
+    this.keycloakUser = map2User(token);
-    sessionStorage.removeItem('commercialPropertyListings');
+    if (this.keycloakUser) {
-    sessionStorage.removeItem('brokerListings');
+      this.user = await this.userService.getByMail(this.keycloakUser.email);
-    this.criteria = createEnhancedProxy(getCriteriaStateObject('businessListings'), this);
+      this.userService.changeUser(this.user);
-    this.user = map2User(token);
-    this.loadCities();
-    this.setupCriteriaChangeListener();
-  }
-  async changeTab(tabname: 'business' | 'commercialProperty' | 'broker') {
-    this.activeTabAction = tabname;
-    this.cityOrState = null;
-    if ('business' === tabname) {
-      this.criteria = createEnhancedProxy(getCriteriaStateObject('businessListings'), this);
-    } else if ('commercialProperty' === tabname) {
-      this.criteria = createEnhancedProxy(getCriteriaStateObject('commercialPropertyListings'), this);
-    } else if ('broker' === tabname) {
-      this.criteria = createEnhancedProxy(getCriteriaStateObject('brokerListings'), this);
-    } else {
-      this.criteria = undefined;
     }
   }
 
-  search() {
+  toggleMobileMenu(): void {
-    this.router.navigate([`${this.activeTabAction}Listings`]);
+    this.showMobileMenu = !this.showMobileMenu;
-  }
-  private setupCriteriaChangeListener() {
-    this.criteriaChangeSubscription = this.criteriaChangeService.criteriaChange$.pipe(untilDestroyed(this), debounceTime(400)).subscribe(() => this.setTotalNumberOfResults());
   }
 
-  toggleMenu() {
+  private setupSmoothScrolling(): void {
-    this.isMenuOpen = !this.isMenuOpen;
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-  }
+      anchor.addEventListener('click', function (e) {
-  onTypesChange(value) {
+        e.preventDefault();
-    if (value === '') {
+        const target = document.querySelector((this as HTMLAnchorElement).getAttribute('href') || '');
-      // Wenn keine Option ausgewählt ist, setzen Sie types zurück auf ein leeres Array
+        if (target) {
-      this.criteria.types = [];
+          target.scrollIntoView({
-    } else {
+            behavior: 'smooth',
-      this.criteria.types = [value];
+          });
-    }
-  }
-  onRadiusChange(value) {
-    if (value === 'null') {
-      // Wenn keine Option ausgewählt ist, setzen Sie types zurück auf ein leeres Array
-      this.criteria.radius = null;
-    } else {
-      this.criteria.radius = parseInt(value);
-    }
-  }
-  async openModal() {
-    const accepted = await this.modalService.showModal(this.criteria);
-    if (accepted) {
-      this.router.navigate([`${this.activeTabAction}Listings`]);
-    }
-  }
-  private loadCities() {
-    this.cities$ = concat(
-      of([]), // default items
-      this.cityInput$.pipe(
-        distinctUntilChanged(),
-        tap(() => (this.cityLoading = true)),
-        switchMap(term =>
-          //this.geoService.findCitiesStartingWith(term).pipe(
-          this.geoService.findCitiesAndStatesStartingWith(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;
-  }
-  setCityOrState(cityOrState: CityAndStateResult) {
-    if (cityOrState) {
-      if (cityOrState.type === 'state') {
-        this.criteria.state = cityOrState.content.state_code;
-      } else {
-        this.criteria.city = cityOrState.content as GeoResult;
-        this.criteria.state = cityOrState.content.state;
-        this.criteria.searchType = 'radius';
-        this.criteria.radius = 20;
-      }
-    } else {
-      this.criteria.state = null;
-      this.criteria.city = null;
-      this.criteria.radius = null;
-      this.criteria.searchType = 'exact';
-    }
-  }
-  getTypes() {
-    if (this.criteria.criteriaType === 'businessListings') {
-      return this.selectOptions.typesOfBusiness;
-    } else if (this.criteria.criteriaType === 'commercialPropertyListings') {
-      return this.selectOptions.typesOfCommercialProperty;
-    } else {
-      return this.selectOptions.customerSubTypes;
-    }
-  }
-  getPlaceholderLabel() {
-    if (this.criteria.criteriaType === 'businessListings') {
-      return 'Business Type';
-    } else if (this.criteria.criteriaType === 'commercialPropertyListings') {
-      return 'Property Type';
-    } else {
-      return 'Professional Type';
-    }
-  }
-  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();
-      }
-    }
-  }
-  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;
-    }
-  }
-  toggleAiSearch() {
-    this.aiSearch = !this.aiSearch;
-    this.aiSearchFailed = false;
-    if (!this.aiSearch) {
-      this.aiSearchText = '';
-      this.stopTypingEffect();
-    } else {
-      setTimeout(() => this.startTypingEffect(), 0);
-    }
-  }
-  ngOnDestroy(): void {
-    clearTimeout(this.typingInterval); // Stelle sicher, dass das Intervall gestoppt wird, wenn die Komponente zerstört wird
-  }
-
-  startTypingEffect(): void {
-    if (!this.aiSearchText) {
-      this.typePlaceholder();
-    }
-  }
-
-  stopTypingEffect(): void {
-    clearTimeout(this.typingInterval);
-  }
-  typePlaceholder(): void {
-    if (!this.searchInput || !this.searchInput.nativeElement) {
-      return; // Falls das Eingabefeld nicht verfügbar ist (z.B. durch ngIf)
-    }
-
-    if (this.aiSearchText) {
-      return; // Stoppe, wenn der Benutzer Text eingegeben hat
-    }
-
-    const inputField = this.searchInput.nativeElement as HTMLInputElement;
-    if (document.activeElement === inputField) {
-      this.stopTypingEffect();
-      return;
-    }
-
-    inputField.placeholder = this.placeholders[this.index].substring(0, this.charIndex);
-
-    if (this.charIndex < this.placeholders[this.index].length) {
-      this.charIndex++;
-      this.typingInterval = setTimeout(() => this.typePlaceholder(), this.typingSpeed);
-    } else {
-      // Nach dem vollständigen Tippen eine Pause einlegen
-      this.typingInterval = setTimeout(() => {
-        inputField.placeholder = ''; // Schlagartiges Löschen des Platzhalters
-        this.charIndex = 0;
-        this.index = (this.index + 1) % this.placeholders.length;
-        this.typingInterval = setTimeout(() => this.typePlaceholder(), this.typingSpeed);
-      }, this.pauseTime);
-    }
-  }
-  async generateAiResponse() {
-    this.loadingAi = true;
-    this.aiSearchFailed = false;
-    try {
-      const result = await this.aiService.generateAiReponse(this.aiSearchText);
-      let criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria | any;
-      if (result.criteriaType === 'businessListings') {
-        this.changeTab('business');
-        criteria = result as BusinessListingCriteria;
-      } else if (result.criteriaType === 'commercialPropertyListings') {
-        this.changeTab('commercialProperty');
-        criteria = result as CommercialPropertyListingCriteria;
-      } else {
-        this.changeTab('broker');
-        criteria = result as UserListingCriteria;
-      }
-      const city = criteria.city as string;
-      if (city && city.length > 0) {
-        let results = await lastValueFrom(this.geoService.findCitiesStartingWith(city, criteria.state));
-        if (results.length > 0) {
-          criteria.city = results[0];
-        } else {
-          criteria.city = null;
-        }
-      }
-      if (criteria.radius && criteria.radius.length > 0) {
-        criteria.radius = parseInt(criteria.radius);
-      }
-      this.loadingAi = false;
-      this.criteria = assignProperties(this.criteria, criteria);
-      this.search();
-    } catch (error) {
-      console.log(error);
-      this.aiSearchFailed = true;
-      this.loadingAi = false;
         }
+      });
+    });
   }
 }

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

@@ -1,8 +1,9 @@
 <div class="container mx-auto px-4 py-8">
+  @if(users?.length>0){
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
     <!-- Amanda Taylor -->
     @for (user of users; track user) {
-    <div class="bg-white rounded-lg shadow-md p-6 flex flex-col justify-between">
+    <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6 flex flex-col justify-between">
       <div class="flex items-start space-x-4">
         @if(user.hasProfile){
         <img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="rounded-md w-20 h-26 object-cover" />
@@ -36,6 +37,60 @@
 
     }
   </div>
+  } @else if (users?.length===0){
+  <div class="w-full flex items-center flex-wrap justify-center gap-10">
+    <div class="grid gap-4 w-60">
+      <svg class="mx-auto" xmlns="http://www.w3.org/2000/svg" width="154" height="161" viewBox="0 0 154 161" fill="none">
+        <path
+          d="M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z"
+          fill="#EEF2FF"
+        />
+        <path
+          d="M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z"
+          fill="white"
+          stroke="#E5E7EB"
+        />
+        <ellipse cx="80.0618" cy="81" rx="28.0342" ry="28.0342" fill="#EEF2FF" />
+        <path
+          d="M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z"
+          stroke="#E5E7EB"
+        />
+        <path d="M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z" stroke="#E5E7EB" />
+        <path
+          d="M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z"
+          fill="#A5B4FC"
+          stroke="#818CF8"
+        />
+        <path
+          d="M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z"
+          fill="#4F46E5"
+        />
+        <path
+          d="M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z"
+          fill="#4F46E5"
+        />
+        <path
+          d="M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z"
+          fill="#4F46E5"
+        />
+        <rect x="38.3522" y="21.5128" width="41.0256" height="2.73504" rx="1.36752" fill="#4F46E5" />
+        <rect x="38.3522" y="133.65" width="54.7009" height="5.47009" rx="2.73504" fill="#A5B4FC" />
+        <rect x="38.3522" y="29.7179" width="13.6752" height="2.73504" rx="1.36752" fill="#4F46E5" />
+        <circle cx="56.13" cy="31.0854" r="1.36752" fill="#4F46E5" />
+        <circle cx="61.6001" cy="31.0854" r="1.36752" fill="#4F46E5" />
+        <circle cx="67.0702" cy="31.0854" r="1.36752" fill="#4F46E5" />
+      </svg>
+      <div>
+        <h2 class="text-center text-black text-xl font-semibold leading-loose pb-2">There’re no professionals here</h2>
+        <p class="text-center text-black text-base font-normal leading-relaxed pb-4">Try changing your filters to <br />see professionals</p>
+        <div class="flex gap-3">
+          <button (click)="clearAllFilters()" class="w-full px-3 py-2 rounded-full border border-gray-300 text-gray-900 text-xs font-semibold leading-4">Clear Filter</button>
+          <button (click)="openFilterModal()" class="w-full px-3 py-2 bg-indigo-600 hover:bg-indigo-700 transition-all duration-500 rounded-full text-white text-xs font-semibold leading-4">Change Filter</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  }
 </div>
 @if(pageCount>1){
 <app-paginator [page]="page" [pageCount]="pageCount" (pageChange)="onPageChange($event)"></app-paginator>

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

@@ -8,12 +8,14 @@ import { LISTINGS_PER_PAGE, ListingType, UserListingCriteria, emailToDirName } f
 import { environment } from '../../../../environments/environment';
 import { CustomerSubTypeComponent } from '../../../components/customer-sub-type/customer-sub-type.component';
 import { PaginatorComponent } from '../../../components/paginator/paginator.component';
+import { ModalService } from '../../../components/search-modal/modal.service';
+import { CriteriaChangeService } from '../../../services/criteria-change.service';
 import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
 import { SearchService } from '../../../services/search.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
 import { UserService } from '../../../services/user.service';
-import { getCriteriaProxy } from '../../../utils/utils';
+import { assignProperties, getCriteriaProxy, resetUserListingCriteria } from '../../../utils/utils';
 @UntilDestroy()
 @Component({
   selector: 'app-broker-listings',
@@ -53,6 +55,8 @@ export class BrokerListingsComponent {
     private imageService: ImageService,
     private route: ActivatedRoute,
     private searchService: SearchService,
+    private modalService: ModalService,
+    private criteriaChangeService: CriteriaChangeService,
   ) {
     this.criteria = getCriteriaProxy('brokerListings', this) as UserListingCriteria;
     this.init();
@@ -84,4 +88,29 @@ export class BrokerListingsComponent {
   }
 
   reset() {}
+
+  // New methods for filter actions
+  clearAllFilters() {
+    // Reset criteria to default values
+    resetUserListingCriteria(this.criteria);
+
+    // Reset pagination
+    this.criteria.page = 1;
+    this.criteria.start = 0;
+
+    this.criteriaChangeService.notifyCriteriaChange();
+
+    // Search with cleared filters
+    this.searchService.search(this.criteria);
+  }
+
+  async openFilterModal() {
+    // Open the search modal with current criteria
+    const modalResult = await this.modalService.showModal(this.criteria);
+    if (modalResult.accepted) {
+      this.searchService.search(this.criteria);
+    } else {
+      this.criteria = assignProperties(this.criteria, modalResult.criteria);
+    }
+  }
 }

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

@@ -1,8 +1,9 @@
 <div class="container mx-auto p-4">
+  @if(listings?.length>0){
   <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
     <!-- Anzahl der Spalten auf 3 reduziert und den Abstand erhöht -->
     @for (listing of listings; track listing.id) {
-    <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
+    <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden hover:shadow-xl">
       <!-- Hover-Effekt hinzugefügt -->
       <div class="p-6 flex flex-col h-full relative z-[0]">
         <div class="flex items-center mb-4">
@@ -51,6 +52,60 @@
     </div>
     }
   </div>
+  } @else if (listings?.length===0){
+  <div class="w-full flex items-center flex-wrap justify-center gap-10">
+    <div class="grid gap-4 w-60">
+      <svg class="mx-auto" xmlns="http://www.w3.org/2000/svg" width="154" height="161" viewBox="0 0 154 161" fill="none">
+        <path
+          d="M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z"
+          fill="#EEF2FF"
+        />
+        <path
+          d="M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z"
+          fill="white"
+          stroke="#E5E7EB"
+        />
+        <ellipse cx="80.0618" cy="81" rx="28.0342" ry="28.0342" fill="#EEF2FF" />
+        <path
+          d="M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z"
+          stroke="#E5E7EB"
+        />
+        <path d="M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z" stroke="#E5E7EB" />
+        <path
+          d="M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z"
+          fill="#A5B4FC"
+          stroke="#818CF8"
+        />
+        <path
+          d="M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z"
+          fill="#4F46E5"
+        />
+        <path
+          d="M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z"
+          fill="#4F46E5"
+        />
+        <path
+          d="M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z"
+          fill="#4F46E5"
+        />
+        <rect x="38.3522" y="21.5128" width="41.0256" height="2.73504" rx="1.36752" fill="#4F46E5" />
+        <rect x="38.3522" y="133.65" width="54.7009" height="5.47009" rx="2.73504" fill="#A5B4FC" />
+        <rect x="38.3522" y="29.7179" width="13.6752" height="2.73504" rx="1.36752" fill="#4F46E5" />
+        <circle cx="56.13" cy="31.0854" r="1.36752" fill="#4F46E5" />
+        <circle cx="61.6001" cy="31.0854" r="1.36752" fill="#4F46E5" />
+        <circle cx="67.0702" cy="31.0854" r="1.36752" fill="#4F46E5" />
+      </svg>
+      <div>
+        <h2 class="text-center text-black text-xl font-semibold leading-loose pb-2">There’s no listing here</h2>
+        <p class="text-center text-black text-base font-normal leading-relaxed pb-4">Try changing your filters to <br />see listings</p>
+        <div class="flex gap-3">
+          <button (click)="clearAllFilters()" class="w-full px-3 py-2 rounded-full border border-gray-300 text-gray-900 text-xs font-semibold leading-4">Clear Filter</button>
+          <button (click)="openFilterModal()" class="w-full px-3 py-2 bg-indigo-600 hover:bg-indigo-700 transition-all duration-500 rounded-full text-white text-xs font-semibold leading-4">Change Filter</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  }
 </div>
 
 @if(pageCount>1){

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

@@ -8,11 +8,13 @@ import { BusinessListing } from '../../../../../../bizmatch-server/src/models/db
 import { BusinessListingCriteria, LISTINGS_PER_PAGE, ListingType, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
 import { PaginatorComponent } from '../../../components/paginator/paginator.component';
+import { ModalService } from '../../../components/search-modal/modal.service';
+import { CriteriaChangeService } from '../../../services/criteria-change.service';
 import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
 import { SearchService } from '../../../services/search.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
-import { getCriteriaProxy } from '../../../utils/utils';
+import { assignProperties, getCriteriaProxy, resetBusinessListingCriteria } from '../../../utils/utils';
 @UntilDestroy()
 @Component({
   selector: 'app-business-listings',
@@ -49,6 +51,8 @@ export class BusinessListingsComponent {
     private imageService: ImageService,
     private route: ActivatedRoute,
     private searchService: SearchService,
+    private modalService: ModalService,
+    private criteriaChangeService: CriteriaChangeService,
   ) {
     this.criteria = getCriteriaProxy('businessListings', this) as BusinessListingCriteria;
     this.init();
@@ -88,4 +92,28 @@ export class BusinessListingsComponent {
   getDaysListed(listing: BusinessListing) {
     return dayjs().diff(listing.created, 'day');
   }
+  // New methods for filter actions
+  clearAllFilters() {
+    // Reset criteria to default values
+    resetBusinessListingCriteria(this.criteria);
+
+    // Reset pagination
+    this.criteria.page = 1;
+    this.criteria.start = 0;
+
+    this.criteriaChangeService.notifyCriteriaChange();
+
+    // Search with cleared filters
+    this.searchService.search(this.criteria);
+  }
+
+  async openFilterModal() {
+    // Open the search modal with current criteria
+    const modalResult = await this.modalService.showModal(this.criteria);
+    if (modalResult.accepted) {
+      this.searchService.search(this.criteria);
+    } else {
+      this.criteria = assignProperties(this.criteria, modalResult.criteria);
+    }
+  }
 }

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

@@ -1,7 +1,8 @@
 <div class="container mx-auto px-4 py-8">
+  @if(listings?.length>0){
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
     @for (listing of listings; track listing.id) {
-    <div class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col h-full">
+    <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden flex flex-col h-full">
       @if (listing.imageOrder?.length>0){
       <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}" alt="Image" class="w-full h-48 object-cover" />
       } @else {
@@ -33,6 +34,60 @@
     </div>
     }
   </div>
+  } @else if (listings?.length===0){
+  <div class="w-full flex items-center flex-wrap justify-center gap-10">
+    <div class="grid gap-4 w-60">
+      <svg class="mx-auto" xmlns="http://www.w3.org/2000/svg" width="154" height="161" viewBox="0 0 154 161" fill="none">
+        <path
+          d="M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z"
+          fill="#EEF2FF"
+        />
+        <path
+          d="M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z"
+          fill="white"
+          stroke="#E5E7EB"
+        />
+        <ellipse cx="80.0618" cy="81" rx="28.0342" ry="28.0342" fill="#EEF2FF" />
+        <path
+          d="M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z"
+          stroke="#E5E7EB"
+        />
+        <path d="M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z" stroke="#E5E7EB" />
+        <path
+          d="M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z"
+          fill="#A5B4FC"
+          stroke="#818CF8"
+        />
+        <path
+          d="M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z"
+          fill="#4F46E5"
+        />
+        <path
+          d="M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z"
+          fill="#4F46E5"
+        />
+        <path
+          d="M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z"
+          fill="#4F46E5"
+        />
+        <rect x="38.3522" y="21.5128" width="41.0256" height="2.73504" rx="1.36752" fill="#4F46E5" />
+        <rect x="38.3522" y="133.65" width="54.7009" height="5.47009" rx="2.73504" fill="#A5B4FC" />
+        <rect x="38.3522" y="29.7179" width="13.6752" height="2.73504" rx="1.36752" fill="#4F46E5" />
+        <circle cx="56.13" cy="31.0854" r="1.36752" fill="#4F46E5" />
+        <circle cx="61.6001" cy="31.0854" r="1.36752" fill="#4F46E5" />
+        <circle cx="67.0702" cy="31.0854" r="1.36752" fill="#4F46E5" />
+      </svg>
+      <div>
+        <h2 class="text-center text-black text-xl font-semibold leading-loose pb-2">There’s no listing here</h2>
+        <p class="text-center text-black text-base font-normal leading-relaxed pb-4">Try changing your filters to <br />see listings</p>
+        <div class="flex gap-3">
+          <button (click)="clearAllFilters()" class="w-full px-3 py-2 rounded-full border border-gray-300 text-gray-900 text-xs font-semibold leading-4">Clear Filter</button>
+          <button (click)="openFilterModal()" class="w-full px-3 py-2 bg-indigo-600 hover:bg-indigo-700 transition-all duration-500 rounded-full text-white text-xs font-semibold leading-4">Change Filter</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  }
 </div>
 @if(pageCount>1){
 <app-paginator [page]="page" [pageCount]="pageCount" (pageChange)="onPageChange($event)"></app-paginator>

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

@@ -8,11 +8,13 @@ import { CommercialPropertyListing } from '../../../../../../bizmatch-server/src
 import { CommercialPropertyListingCriteria, LISTINGS_PER_PAGE, ResponseCommercialPropertyListingArray } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
 import { PaginatorComponent } from '../../../components/paginator/paginator.component';
+import { ModalService } from '../../../components/search-modal/modal.service';
+import { CriteriaChangeService } from '../../../services/criteria-change.service';
 import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
 import { SearchService } from '../../../services/search.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
-import { getCriteriaProxy } from '../../../utils/utils';
+import { assignProperties, getCriteriaProxy, resetCommercialPropertyListingCriteria } from '../../../utils/utils';
 @UntilDestroy()
 @Component({
   selector: 'app-commercial-property-listings',
@@ -48,6 +50,8 @@ export class CommercialPropertyListingsComponent {
     private imageService: ImageService,
     private route: ActivatedRoute,
     private searchService: SearchService,
+    private modalService: ModalService,
+    private criteriaChangeService: CriteriaChangeService,
   ) {
     this.criteria = getCriteriaProxy('commercialPropertyListings', this) as CommercialPropertyListingCriteria;
     this.init();
@@ -86,4 +90,28 @@ export class CommercialPropertyListingsComponent {
   getDaysListed(listing: CommercialPropertyListing) {
     return dayjs().diff(listing.created, 'day');
   }
+  // New methods for filter actions
+  clearAllFilters() {
+    // Reset criteria to default values
+    resetCommercialPropertyListingCriteria(this.criteria);
+
+    // Reset pagination
+    this.criteria.page = 1;
+    this.criteria.start = 0;
+
+    this.criteriaChangeService.notifyCriteriaChange();
+
+    // Search with cleared filters
+    this.searchService.search(this.criteria);
+  }
+
+  async openFilterModal() {
+    // Open the search modal with current criteria
+    const modalResult = await this.modalService.showModal(this.criteria);
+    if (modalResult.accepted) {
+      this.searchService.search(this.criteria);
+    } else {
+      this.criteria = assignProperties(this.criteria, modalResult.criteria);
+    }
+  }
 }

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

@@ -1,6 +1,6 @@
 <div class="container mx-auto p-4">
   @if (user){
-  <div class="bg-white rounded-lg shadow-md p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
     <form #accountForm="ngForm" class="space-y-4">
       <h2 class="text-2xl font-bold mb-4">Account Details</h2>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -16,7 +16,7 @@
             <div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
               @if(user?.hasCompanyLogo){
               <img src="{{ companyLogoUrl }}" alt="Company logo" class="max-w-full max-h-full" />
-              <div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 shadow-md hover:cursor-pointer" (click)="deleteConfirm('logo')">
+              <div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer" (click)="deleteConfirm('logo')">
                 <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>
@@ -38,7 +38,7 @@
             <div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
               @if(user?.hasProfile){
               <img src="{{ profileUrl }}" alt="Profile picture" class="max-w-full max-h-full" />
-              <div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 shadow-md hover:cursor-pointer" (click)="deleteConfirm('profile')">
+              <div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer" (click)="deleteConfirm('profile')">
                 <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>
@@ -77,9 +77,9 @@
           <span class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">ADMIN</span>
         </div>
 
-        }@else{
+        }
-        <app-validated-select label="Customer Type" name="customerType" [(ngModel)]="user.customerType" [options]="customerTypeOptions"></app-validated-select>
+        <app-validated-select [disabled]="true" label="Customer Type" name="customerType" [(ngModel)]="user.customerType" [options]="customerTypeOptions"></app-validated-select>
-        } @if (isProfessional){
+        @if (isProfessional){
         <!-- <div>
           <label for="customerSubType" class="block text-sm font-medium text-gray-700">Professional Type</label>
           <select id="customerSubType" name="customerSubType" [(ngModel)]="user.customerSubType" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
@@ -220,7 +220,7 @@
         </div>
       </div>
       }
-      <div class="flex items-center !my-8">
+      <!-- <div class="flex items-center !my-8">
         <label class="flex items-center cursor-pointer">
           <div class="relative">
             <input type="checkbox" [(ngModel)]="user.showInDirectory" name="showInDirectory" class="hidden" />
@@ -228,7 +228,7 @@
           </div>
           <div class="ml-3 text-gray-700 font-medium">Show your profile in Professional Directory</div>
         </label>
-      </div>
+      </div> -->
 
       <div class="flex justify-start">
         <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" (click)="updateProfile(user)">

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

@@ -130,38 +130,6 @@ export class AccountComponent {
         label: this.titleCasePipe.transform(type.name),
       }));
   }
-  // async synchronizeSubscriptions(subscriptions: StripeSubscription[]) {
-  //   let changed = false;
-  //   if (this.isAdmin()) {
-  //     return;
-  //   }
-  //   if (this.subscriptions.length === 0) {
-  //     if (!this.user.subscriptionPlan) {
-  //       this.router.navigate(['pricing']);
-  //     } else {
-  //       this.subscriptions = [{ ended_at: null, start_date: Math.floor(new Date(this.user.created).getTime() / 1000), status: null, metadata: { plan: 'Free Plan' } }];
-  //       changed = checkAndUpdate(changed, this.user.customerType !== 'buyer' && this.user.customerType !== 'seller', () => (this.user.customerType = 'buyer'));
-  //       changed = checkAndUpdate(changed, !!this.user.customerSubType, () => (this.user.customerSubType = null));
-  //       changed = checkAndUpdate(changed, this.user.subscriptionPlan !== 'free', () => (this.user.subscriptionPlan = 'free'));
-  //       changed = checkAndUpdate(changed, !!this.user.subscriptionId, () => (this.user.subscriptionId = null));
-  //     }
-  //   } else {
-  //     const subscription = subscriptions[0];
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && this.user.customerType !== 'professional', () => (this.user.customerType = 'professional'));
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && this.user.customerSubType !== 'broker', () => (this.user.customerSubType = 'broker'));
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && this.user.subscriptionPlan !== 'broker', () => (this.user.subscriptionPlan = 'broker'));
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && !this.user.subscriptionId, () => (this.user.subscriptionId = subscription.id));
-
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Professional Plan' && this.user.customerType !== 'professional', () => (this.user.customerType = 'professional'));
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Professional Plan' && this.user.subscriptionPlan !== 'professional', () => (this.user.subscriptionPlan = 'professional'));
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Professional Plan' && this.user.subscriptionId !== 'professional', () => (this.user.subscriptionId = subscription.id));
-  //   }
-  //   if (changed) {
-  //     await this.userService.saveGuaranteed(this.user);
-  //     this.cdref.detectChanges();
-  //     this.cdref.markForCheck();
-  //   }
-  // }
 
   ngOnDestroy() {
     this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten

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

@@ -1,12 +1,12 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg shadow-md p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
     <h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
     @if(listing){
     <form #listingForm="ngForm" class="space-y-4">
       <div class="mb-4">
         <label for="listingsCategory" class="block text-sm font-bold text-gray-700 mb-1">Listing category</label>
         <ng-select
-          [readonly]="mode === 'edit'"
+          [readonly]="true"
           [items]="selectOptions?.listingCategories"
           bindLabel="name"
           bindValue="value"

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

@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg shadow-md p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
     <h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
     @if (listing){
     <form #listingForm="ngForm" class="space-y-4">
@@ -18,80 +18,19 @@
         </ng-select>
       </div>
 
-      <!-- <div class="mb-4">
-        <label for="title" class="block text-sm font-bold text-gray-700 mb-1">Title of Listing</label>
-        <input type="text" id="title" [(ngModel)]="listing.title" name="title" class="w-full p-2 border border-gray-300 rounded-md" />
-      </div> -->
       <div>
         <app-validated-input label="Title of Listing" name="title" [(ngModel)]="listing.title"></app-validated-input>
       </div>
 
       <div>
-        <!-- <label for="description" class="block text-sm font-bold text-gray-700 mb-1">Description</label>
-        <quill-editor [(ngModel)]="listing.description" name="description" [modules]="quillModules"></quill-editor> -->
         <app-validated-quill label="Description" name="description" [(ngModel)]="listing.description"></app-validated-quill>
       </div>
 
-      <!-- <div>
-        <label for="type" class="block text-sm font-bold text-gray-700 mb-1">Property Category</label>
-        <ng-select [items]="typesOfCommercialProperty" bindLabel="name" bindValue="value" [(ngModel)]="listing.type" name="type"> </ng-select>
-      </div> -->
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <app-validated-ng-select label="Property Category" name="type" [(ngModel)]="listing.type" [items]="typesOfCommercialProperty"></app-validated-ng-select>
-        <!-- <app-validated-city label="Location" name="location" [(ngModel)]="listing.location"></app-validated-city> -->
         <app-validated-location label="Location" name="location" [(ngModel)]="listing.location"></app-validated-location>
       </div>
-
-      <!-- <div class="flex mb-4 space-x-4">
-        <div class="w-1/2">
-          <label for="state" class="block text-sm font-bold text-gray-700 mb-1">State</label>
-          <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="listing.state" name="state"> </ng-select>
-        </div>
-        <div class="w-1/2">
-          <label for="city" class="block text-sm font-bold text-gray-700 mb-1">City</label>
-          <input type="text" id="city" [(ngModel)]="listing.city" name="city" class="w-full p-2 border border-gray-300 rounded-md" />
-        </div>
-      </div> -->
-      <!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> -->
-      <!-- <app-validated-ng-select label="State" name="state" [(ngModel)]="listing.location.state" [items]="selectOptions?.states"></app-validated-ng-select>
-        <app-validated-input label="City" name="city" [(ngModel)]="listing.location.city"></app-validated-input> -->
-
-      <!-- </div> -->
-
-      <!-- <div class="flex mb-4 space-x-4">
-        <div class="w-1/2">
-          <label for="zipCode" class="block text-sm font-bold text-gray-700 mb-1">Zip Code</label>
-          <input type="text" id="zipCode" [(ngModel)]="listing.zipCode" name="zipCode" class="w-full p-2 border border-gray-300 rounded-md" />
-        </div>
-        <div class="w-1/2">
-          <label for="county" class="block text-sm font-bold text-gray-700 mb-1">County</label>
-          <input type="text" id="county" [(ngModel)]="listing.county" name="county" class="w-full p-2 border border-gray-300 rounded-md" />
-        </div>
-      </div> -->
-      <!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <app-validated-input label="Zip Code" name="zipCode" [(ngModel)]="listing.zipCode"></app-validated-input>
-        <app-validated-input label="County" name="county" [(ngModel)]="listing.county"></app-validated-input>
-      </div> -->
-
-      <!-- <div class="mb-4">
-        <label for="internals" class="block text-sm font-bold text-gray-700 mb-1">Internal Notes (Will not be shown on the listing, for your records only.)</label>
-        <textarea id="internals" [(ngModel)]="listing.internals" name="internals" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
-      </div> -->
-
-      <!-- <div class="flex items-center mb-4"> -->
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <!-- <div class="w-1/2">
-          <label for="price" class="block text-sm font-bold text-gray-700 mb-1">Price</label>
-          <input
-            type="text"
-            id="price"
-            [(ngModel)]="listing.price"
-            name="price"
-            class="w-full p-2 border border-gray-300 rounded-md"
-            [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
-            currencyMask
-          />
-        </div> -->
         <app-validated-price label="Price" name="price" [(ngModel)]="listing.price"></app-validated-price>
         <div class="flex justify-center">
           <label class="flex items-center cursor-pointer">
@@ -103,34 +42,8 @@
           </label>
         </div>
       </div>
-      <!-- <div class="container mx-auto p-4">
+
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-          @for (image of listing.imageOrder; track listing.imageOrder) {
-          <div class="relative aspect-video cursor-move">
-            <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}?_ts={{ ts }}" [alt]="image" 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">
-              <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> -->
       <div class="container mx-auto pt-2">
-        <!-- <div class="grid-container"> -->
-        <!-- @for (image of listing.imageOrder; track image) {
-          <div cdkDrag class="grid-item">
-            <div class="image-box">
-              <img [src]="getImageUrl(image)" [alt]="image" 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">
-                <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>
-          } -->
         <app-drag-drop-mixed [listing]="listing" [ts]="ts" (imageOrderChanged)="imageOrderChanged($event)" (imageToDelete)="deleteConfirm($event)"></app-drag-drop-mixed>
         <!-- </div> -->
       </div>
@@ -150,7 +63,6 @@
           Upload
         </button>
         }
-        <!-- <input type="file" #fileInput style="display: none" (change)="fileChangeEvent($event)" accept="image/*" /> -->
       </div>
       @if (mode==='create'){
       <button (click)="save()" class="bg-blue-500 text-white px-4 py-2 mt-3 rounded-md hover:bg-blue-600">Post Listing</button>

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

@@ -150,7 +150,7 @@ export class EditCommercialPropertyListingComponent {
     const email = keycloakUser.email;
     this.user = await this.userService.getByMail(email);
     this.listingCategories = this.selectOptions.listingCategories
-      .filter(lc => lc.value === 'commercialProperty' || (this.user.customerSubType === 'broker' && lc.value === 'business'))
+      .filter(lc => lc.value === 'commercialProperty' || this.user.customerType === 'professional')
       .map(e => {
         return { name: e.name, value: e.value };
       });

bizmatch/src/app/pages/subscription/email-us/email-us.component.html

@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg shadow-md p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
     <h2 class="text-2xl font-semibold mb-6">Contact Us</h2>
     <form #contactForm="ngForm" class="space-y-4">
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

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

@@ -1,10 +1,10 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg shadow-md p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
     <h1 class="text-2xl font-bold md:mb-4">My Favorites</h1>
 
     <!-- Desktop view -->
     <div class="hidden md:block">
-      <table class="w-full bg-white shadow-md rounded-lg overflow-hidden">
+      <table class="w-full bg-white drop-shadow-inner-faint rounded-lg overflow-hidden">
         <thead class="bg-gray-100">
           <tr>
             <th class="py-2 px-4 text-left">Title</th>
@@ -44,7 +44,7 @@
 
     <!-- Mobile view -->
     <div class="md:hidden">
-      <div *ngFor="let listing of favorites" class="bg-white shadow-md rounded-lg p-4 mb-4">
+      <div *ngFor="let listing of favorites" class="bg-white drop-shadow-inner-faint rounded-lg p-4 mb-4">
         <h2 class="text-xl font-semibold mb-2">{{ listing.title }}</h2>
         <p class="text-gray-600 mb-2">Category: {{ listing.listingsCategory === 'commercialProperty' ? 'Commercial Property' : 'Business' }}</p>
         <p class="text-gray-600 mb-2">Located in: {{ listing.location.name ? listing.location.name : listing.location.county }}, {{ listing.location.state }}</p>

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

@@ -1,16 +1,17 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg shadow-md p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
     <h1 class="text-2xl font-bold md:mb-4">My Listings</h1>
 
     <!-- Desktop view -->
     <div class="hidden md:block">
-      <table class="w-full bg-white shadow-md rounded-lg overflow-hidden">
+      <table class="w-full bg-white drop-shadow-inner-faint rounded-lg overflow-hidden">
         <thead class="bg-gray-100">
           <tr>
             <th class="py-2 px-4 text-left">Title</th>
             <th class="py-2 px-4 text-left">Category</th>
             <th class="py-2 px-4 text-left">Located in</th>
             <th class="py-2 px-4 text-left">Price</th>
+            <th class="py-2 px-4 text-left">Publication Status</th>
             <th class="py-2 px-4 text-left">Actions</th>
           </tr>
         </thead>
@@ -20,6 +21,11 @@
             <td class="py-2 px-4">{{ listing.listingsCategory === 'commercialProperty' ? 'Commercial Property' : 'Business' }}</td>
             <td class="py-2 px-4">{{ listing.location.name ? listing.location.name : listing.location.county }}, {{ listing.location.state }}</td>
             <td class="py-2 px-4">${{ listing.price.toLocaleString() }}</td>
+            <td class="py-2 px-4">
+              <span class="{{ listing.draft ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800' }} py-1 px-2 rounded-full text-xs font-medium">
+                {{ listing.draft ? 'Draft' : 'Published' }}
+              </span>
+            </td>
             <td class="py-2 px-4">
               @if(listing.listingsCategory==='business'){
               <button class="bg-green-500 text-white p-2 rounded-full mr-2" [routerLink]="['/editBusinessListing', listing.id]">
@@ -51,11 +57,17 @@
 
     <!-- Mobile view -->
     <div class="md:hidden">
-      <div *ngFor="let listing of myListings" class="bg-white shadow-md rounded-lg p-4 mb-4">
+      <div *ngFor="let listing of myListings" class="bg-white drop-shadow-inner-faint rounded-lg p-4 mb-4">
         <h2 class="text-xl font-semibold mb-2">{{ listing.title }}</h2>
         <p class="text-gray-600 mb-2">Category: {{ listing.listingsCategory === 'commercialProperty' ? 'Commercial Property' : 'Business' }}</p>
         <p class="text-gray-600 mb-2">Located in: {{ listing.location.name ? listing.location.name : listing.location.county }} - {{ listing.location.state }}</p>
         <p class="text-gray-600 mb-2">Price: ${{ listing.price.toLocaleString() }}</p>
+        <div class="flex items-center gap-2 mb-2">
+          <span class="text-gray-600">Publication Status:</span>
+          <span class="{{ listing.draft ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800' }} py-1 px-2 rounded-full text-xs font-medium">
+            {{ listing.draft ? 'Draft' : 'Published' }}
+          </span>
+        </div>
         <div class="flex justify-start">
           @if(listing.listingsCategory==='business'){
           <button class="bg-green-500 text-white p-2 rounded-full mr-2" [routerLink]="['/editBusinessListing', listing.id]">

bizmatch/src/app/services/auth.service.ts

@@ -2,7 +2,7 @@
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
 import { FirebaseApp } from '@angular/fire/app';
-import { GoogleAuthProvider, UserCredential, createUserWithEmailAndPassword, getAuth, signInWithEmailAndPassword, signInWithPopup } from 'firebase/auth';
+import { GoogleAuthProvider, UserCredential, createUserWithEmailAndPassword, getAuth, signInWithCustomToken, signInWithEmailAndPassword, signInWithPopup } from 'firebase/auth';
 import { BehaviorSubject, Observable, catchError, firstValueFrom, map, of, shareReplay, take, tap } from 'rxjs';
 import { environment } from '../../environments/environment';
 import { MailService } from './mail.service';
@@ -159,7 +159,8 @@ export class AuthService {
     // Cache zurücksetzen, wenn die Caching-Zeit abgelaufen ist oder kein Cache existiert
     if (!this.cachedUserRole$ || now - this.lastCacheTime > this.cacheDuration) {
       this.lastCacheTime = now;
-      this.cachedUserRole$ = this.http.get<{ role: UserRole | null }>(`${environment.apiBaseUrl}/bizmatch/auth/me/role`).pipe(
+      let headers = new HttpHeaders().set('X-Hide-Loading', 'true').set('Accept-Language', 'en-US');
+      this.cachedUserRole$ = this.http.get<{ role: UserRole | null }>(`${environment.apiBaseUrl}/bizmatch/auth/me/role`, { headers }).pipe(
         map(response => response.role),
         tap(role => this.userRoleSubject.next(role)),
         catchError(error => {
@@ -274,4 +275,31 @@ export class AuthService {
       return await this.refreshToken();
     }
   }
+
+  // Add this new method to sign in with a custom token
+  async signInWithCustomToken(token: string): Promise<void> {
+    try {
+      // Sign in to Firebase with the custom token
+      const userCredential = await signInWithCustomToken(this.auth, token);
+
+      // Store the authentication token
+      if (userCredential.user) {
+        const idToken = await userCredential.user.getIdToken();
+        localStorage.setItem('authToken', idToken);
+        localStorage.setItem('refreshToken', userCredential.user.refreshToken);
+
+        if (userCredential.user.photoURL) {
+          localStorage.setItem('photoURL', userCredential.user.photoURL);
+        }
+
+        // Load user role from the token
+        this.loadRoleFromToken();
+      }
+
+      return;
+    } catch (error) {
+      console.error('Error signing in with custom token:', error);
+      throw error;
+    }
+  }
 }

bizmatch/src/app/utils/utils.ts

@@ -139,7 +139,9 @@ export function resetUserListingCriteria(criteria: UserListingCriteria) {
 
 export function createMailInfo(user?: User): MailInfo {
   return {
-    sender: user ? { name: `${user.firstname} ${user.lastname}`, email: user.email, phoneNumber: user.phoneNumber, state: user.location?.state, comments: null } : {},
+    sender: user
+      ? { name: `${user.firstname} ${user.lastname}`, email: user.email, phoneNumber: user.phoneNumber, state: user.location?.state, comments: null }
+      : { name: '', email: '', phoneNumber: '', state: '', comments: '' },
     email: null,
     url: environment.mailinfoUrl,
     listing: null,

bizmatch/src/styles.scss

@@ -12,7 +12,6 @@
 @import 'tailwindcss/utilities';
 @import 'ngx-sharebuttons/themes/default';
 /* styles.scss */
-@import 'leaflet/dist/leaflet.css';
 :root {
   --text-color-secondary: rgba(255, 255, 255);
   --wrapper-width: 1491px;
@@ -62,9 +61,9 @@ textarea {
   flex-direction: column;
 }
 
-header {
+// header {
-  height: 64px; /* Feste Höhe */
+//   height: 64px; /* Feste Höhe */
-}
+// }
 
 main {
   flex: 1 0 auto; /* Füllt den verfügbaren Platz */
@@ -115,20 +114,3 @@ input::placeholder,
 textarea::placeholder {
   color: #999 !important;
 }
-
-/* Fix für Marker-Icons in Leaflet */
-.leaflet-container {
-  height: 100%;
-  width: 100%;
-}
-
-.leaflet-marker-icon,
-.leaflet-marker-shadow {
-  display: block;
-}
-
-.leaflet-marker-icon {
-  /* Optional: Anpassen der Marker-Icon-Größe */
-  width: 25px;
-  height: 41px;
-}

bizmatch/tailwind.config.js

@@ -34,6 +34,14 @@ module.exports = {
         '4xl': '2.25rem',
         '5xl': '3rem',
       },
+      dropShadow: {
+        'custom-bg': '0 15px 20px rgba(0, 0, 0, 0.3)', // Wähle einen aussagekräftigen Namen
+        'custom-bg-mobile': '0 1px 2px rgba(0, 0, 0, 0.2)', // Wähle einen aussagekräftigen Namen
+        'inner-faint': '0 3px 6px rgba(0, 0, 0, 0.1)',
+        'custom-md': '0 10px 15px rgba(0, 0, 0, 0.25)', // Dein mittlerer Schatten
+        'custom-lg': '0 15px 20px rgba(0, 0, 0, 0.3)'   // Dein großer Schatten        
+        // ... andere benutzerdefinierte Schatten, falls vorhanden
+      }   
     },
   },
   plugins: [