Umbau commercial-edit & user-details

This commit is contained in:
2024-07-05 17:39:01 +02:00
parent 677b95c21c
commit e0dbebb61c
6 changed files with 256 additions and 105 deletions

View File

@@ -139,172 +139,129 @@
<!-- Header -->
<div class="flex items-center justify-between p-4 border-b">
<div class="flex items-center space-x-4">
<img src="https://placehold.co/80x80" alt="Profile picture of Avery Brown smiling" class="w-20 h-20 rounded-full" />
<!-- <img src="https://placehold.co/80x80" alt="Profile picture of Avery Brown smiling" class="w-20 h-20 rounded-full" /> -->
@if(user.hasProfile){
<img src="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-20 h-20 rounded-full object-cover" />
} @else {
<img src="assets/images/person_placeholder.jpg" class="w-20 h-20 rounded-full" />
}
<div>
<h1 class="text-2xl font-bold flex items-center">
Avery Brown
{{ user.firstname }} {{ user.lastname }}
<span class="text-yellow-400 ml-2">&#9733;</span>
</h1>
<p class="text-gray-600">
Company
<span class="mx-1">-</span>
New Mexico Business Sales
{{ user.companyName }}
<span class="mx-2">|</span>
For Sale
<span class="mx-1">-</span>
<!-- <i class="fas fa-building text-red-500"></i> -->
<span>9</span>
<span>{{ businessListings?.length + commercialPropListings?.length }}</span>
</p>
</div>
<img src="https://placehold.co/45x60" class="w-11 h-14" />
@if(user.hasCompanyLogo){
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-11 h-14" />
}
<!-- <img src="https://placehold.co/45x60" class="w-11 h-14" /> -->
</div>
<button class="text-red-500 text-2xl">&times;</button>
<button class="text-red-500 text-2xl" (click)="historyService.goBack()">&times;</button>
</div>
<!-- Description -->
<p class="p-4 text-gray-700">Helping business owners in southern New Mexico sell their businesses and assisting buyers in finding the perfect opportunity.</p>
<p class="p-4 text-gray-700">{{ user.description }}</p>
<!-- Company Profile -->
<div class="p-4">
<h2 class="text-xl font-semibold mb-4">Company Profile</h2>
<p class="text-gray-700 mb-4">
New Mexico Business Sales is a trusted business brokerage firm serving the southern New Mexico market. Our team of experienced brokers is committed to providing personalized service and expert guidance to ensure
a smooth and successful transaction for our clients.
</p>
<p class="text-gray-700 mb-4" [innerHTML]="companyOverview"></p>
<!-- Profile Details -->
<div class="space-y-2">
<div class="flex flex-col sm:flex-row sm:items-center bg-gray-100">
<span class="font-semibold w-40 p-2">Name</span>
<span class="p-2 flex-grow">Avery Brown</span>
<span class="p-2 flex-grow">{{ user.firstname }} {{ user.lastname }}</span>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<span class="font-semibold w-40 p-2">Phone Number</span>
<span class="p-2 flex-grow">(575) 555-7890</span>
<span class="p-2 flex-grow">{{ formatPhoneNumber(user.phoneNumber) }}</span>
</div>
<div class="flex flex-col sm:flex-row sm:items-center bg-gray-100">
<span class="font-semibold w-40 p-2">EMail Address</span>
<span class="p-2 flex-grow">avery.brown&#64;nmbizsales.com</span>
<span class="p-2 flex-grow">{{ user.email }}</span>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<span class="font-semibold w-40 p-2">Company Location</span>
<span class="p-2 flex-grow">Las Cruces - NM</span>
<span class="p-2 flex-grow">{{ user.companyLocation }}</span>
</div>
</div>
<!-- Services -->
<div class="mt-6">
<h3 class="font-semibold mb-2">Services we offer</h3>
<h4 class="font-medium">What We Offer</h4>
<ul class="list-disc pl-5 text-gray-700">
<li>Business listings</li>
<li>Buyer search and qualification</li>
<li>Due diligence support</li>
<li>Financing assistance</li>
<li>Closing coordination</li>
</ul>
<p class="text-gray-700 mb-4" [innerHTML]="offeredServices"></p>
</div>
<!-- Areas Served -->
<div class="mt-6">
<h3 class="font-semibold mb-2">Areas (Counties) we serve</h3>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">Doña Ana County-NM</span>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">Otero County-NM</span>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">Luna County-NM</span>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">Sierra County-NM</span>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">Grant County-NM</span>
@for (area of user.areasServed; track area) {
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">{{ area.county }}-{{ area.state }}</span>
}
</div>
</div>
<!-- Licensed In -->
<div class="mt-6">
<h3 class="font-semibold mb-2">Licensed In</h3>
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">4.2700P-NM</span>
@for (license of user.licensedIn; track license) {
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">{{ license.registerNo }}-{{ license.state }}</span>
}
</div>
</div>
<!-- Business Listings -->
<div class="p-4">
@if(businessListings?.length>0){
<h2 class="text-xl font-semibold mb-4">My Business Listings For Sale</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="border rounded-lg p-4">
@for (listing of businessListings; track listing) {
<div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/details-business-listing', listing.id]">
<div class="flex items-center mb-2">
<i class="fas fa-utensils text-blue-500 mr-2"></i>
<span class="font-medium">Food and Restaurant</span>
<i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2"></i>
<span class="font-medium">{{ selectOptions.getBusiness(listing.type) }}</span>
</div>
<p class="text-gray-700">Successful Coffee Shop in The Colony</p>
<p class="text-gray-700">{{ listing.title }}</p>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center mb-2">
<i class="fas fa-utensils text-blue-500 mr-2"></i>
<span class="font-medium">Food and Restaurant</span>
</div>
<p class="text-gray-700">Established Craft Beer Bar in Wylie</p>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center mb-2">
<i class="fas fa-industry text-yellow-500 mr-2"></i>
<span class="font-medium">Industrial Services</span>
</div>
<p class="text-gray-700">Profitable Electrical Contracting Business in New Braunfels</p>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center mb-2">
<i class="fas fa-dumbbell text-green-500 mr-2"></i>
<span class="font-medium">Service</span>
</div>
<p class="text-gray-700">Successful Fitness Center in Coppell</p>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center mb-2">
<i class="fas fa-building text-purple-500 mr-2"></i>
<span class="font-medium">Mixed Use</span>
</div>
<p class="text-gray-700">Mixed-Use Development Opportunity</p>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center mb-2">
<i class="fas fa-tree text-green-500 mr-2"></i>
<span class="font-medium">Land</span>
</div>
<p class="text-gray-700">Upscale Golf Course</p>
</div>
</div>
</div>
<!-- Commercial Property Listings -->
<div class="p-4">
<h2 class="text-xl font-semibold mb-4">My Commercial Property Listings For Sale</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="border rounded-lg p-4">
<div class="flex items-center space-x-4">
<img src="https://placehold.co/45x45" alt="Car Dealership and Service Center" class="w-12 h-12 object-cover rounded" />
<div>
<p class="font-medium">Mixed Use</p>
<p class="text-gray-700">Car Dealership and Service Center</p>
</div>
</div>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center space-x-4">
<img src="https://placehold.co/45x45" alt="Cold Storage Warehouse" class="w-12 h-12 object-cover rounded" />
<div>
<p class="font-medium">Industrial</p>
<p class="text-gray-700">Cold Storage Warehouse</p>
</div>
</div>
</div>
<div class="border rounded-lg p-4">
<div class="flex items-center space-x-4">
<img src="https://placehold.co/45x45" alt="Retail Strip Center in Round Rock" class="w-12 h-12 object-cover rounded" />
<div>
<p class="font-medium">Retail</p>
<p class="text-gray-700">Retail Strip Center in Round Rock</p>
</div>
}
</div>
}
<!-- Commercial Property Listings -->
@if(commercialPropListings?.length>0){
<div class="p-4">
<h2 class="text-xl font-semibold mb-4">My Commercial Property Listings For Sale</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@for (listing of commercialPropListings; track listing) {
<div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/details-commercial-property-listing', listing.id]">
<div class="flex items-center space-x-4">
@if (listing.imageOrder?.length>0){
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}" class="w-12 h-12 object-cover rounded" />
} @else {
<img src="assets/images/placeholder_properties.jpg" class="w-12 h-12 object-cover rounded" />
}
<div>
<p class="font-medium">{{ selectOptions.getCommercialProperty(listing.type) }}</p>
<p class="text-gray-700">{{ listing.title }}</p>
</div>
</div>
</div>
}
</div>
</div>
}
</div>
</div>
</div>