feat: create pages

Author: beginwebdev2002

frontend/src/pages/about/about.component.html

@@ -1,6 +1,8 @@
-import { Component, ChangeDetectionStrategy, inject, signal } from '@angular/core';
+import { Component, ChangeDetectionStrategy, inject, signal, computed, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { form, FormField, required } from '@angular/forms/signals';
+import { AdminSettingsService } from '@entities/admin-settings';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-about',
@@ -10,8 +12,34 @@ import { form, FormField, required } from '@angular/forms/signals';
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss']
 })
-export class AboutComponent {
-  
+export class AboutComponent implements OnInit {
+  private adminSettingsService = inject(AdminSettingsService);
+  private sanitizer = inject(DomSanitizer);
+
+  // Computed values from admin settings
+  settings = this.adminSettingsService.settings;
+
+  address = computed(() => this.settings()?.location?.address || 'Rudaki Avenue 127, Suite 402, Dushanbe');
+  phone = computed(() => this.settings()?.ownerInfo?.phoneNumber || '+992 (90) 000-0000');
+  biography = computed(() => this.settings()?.biography || null);
+  philosophy = computed(() => this.settings()?.philosophy || null);
+
+  // Social links as array of { key, url } for convenient template iteration
+  socialLinks = computed(() => {
+    const links = this.settings()?.socialLinks ?? {};
+    return Object.entries(links).map(([key, url]) => ({ key, url }));
+  });
+
+  // Map embed URL computed from lat/lng if available
+  mapUrl = computed<SafeResourceUrl>(() => {
+    const loc = this.settings()?.location;
+    const raw = (loc?.latitude && loc?.longitude)
+      ? `https://www.google.com/maps?q=${loc.latitude},${loc.longitude}&output=embed`
+      : 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d97236.72195867906!2d68.70670878583486!3d38.56156386866579!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38b5d16c7476569b%3A0x8849646b5a34241!2sDushanbe%2C%20Tajikistan!5e0!3m2!1sen!2sus!4v1647853162725!5m2!1sen!2sus';
+    return this.sanitizer.bypassSecurityTrustResourceUrl(raw);
+  });
+
+  // Contact form
   contactModel = signal({
     fullName: '',
     phoneNumber: '',
@@ -25,17 +53,39 @@ export class AboutComponent {
     required(schema.serviceOfInterest);
   });
 
+  // Treatment categories for the service select dropdown
+  treatmentCategories = computed(() =>
+    this.settings()?.treatmentCategories ?? ['Medical Facial', 'Laser Treatment', 'Injectables', 'Visagiste']
+  );
+
+  ngOnInit() {
+    if (!this.adminSettingsService.settings()) {
+      this.adminSettingsService.getSettings().subscribe();
+    }
+  }
+
   onSubmit() {
-    // Basic validation check
     const isNameValid = this.contactForm.fullName().valid();
     const isPhoneValid = this.contactForm.phoneNumber().valid();
     const isServiceValid = this.contactForm.serviceOfInterest().valid();
 
     if (isNameValid && isPhoneValid && isServiceValid) {
       console.log('Form Submitted', this.contactModel());
-      // Here you would typically send the data to a service
     } else {
       console.log('Form is invalid');
     }
   }
+
+  // Helper to get social icon name from key
+  getSocialIcon(key: string): string {
+    const icons: Record<string, string> = {
+      whatsapp: 'chat',
+      telegram: 'send',
+      instagram: 'photo_camera',
+      facebook: 'thumb_up',
+      tiktok: 'music_video',
+      youtube: 'play_circle',
+    };
+    return icons[key.toLowerCase()] ?? 'link';
+  }
 }

frontend/src/pages/about/about.component.ts

@@ -13,7 +13,7 @@ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
             </p>
         </div>
         <div class="mt-12 flex flex-wrap justify-center gap-4 px-4">
-            @for(filter of filters; track filter) {
+            @for(filter of filters(); track filter) {
                 <button 
                   (click)="activeFilter.set(filter)"
                   class="px-6 py-2 rounded-full font-medium text-sm uppercase tracking-wide transition-all duration-300"
@@ -34,9 +34,9 @@ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
                 @for(item of filteredItems(); track item.id; let i = $index) {
                     <div class="break-inside-avoid group relative rounded-3xl bg-gray-900 overflow-hidden cursor-pointer hover-shimmer-border reveal-item" [style.animation-delay.ms]="i * 100">
                         <div class="relative w-full" [class]="item.aspectClass">
-                            <img [ngSrc]="item.imageUrl" [alt]="item.title" fill
+                            <img [src]="item.imageUrl" [alt]="item.title"
                                 class="absolute inset-0 w-full h-full object-cover opacity-90 group-hover:opacity-100 animate-ken-burns"
-                                [class]="item.effects || ''"/>
+                                loading="lazy" />
                         </div>
 
                         @if(item.statusTag) {

frontend/src/pages/portfolio/portfolio.component.html

@@ -6,72 +6,72 @@ import {
   inject,
   OnInit,
 } from "@angular/core";
-import { CommonModule, NgOptimizedImage } from "@angular/common";
+import { CommonModule } from "@angular/common";
 import { GalleryService } from "@entities/gallery";
-import { ImageCategory } from "@shared/models";
+import { AdminSettingsService } from "@entities/admin-settings";
+import { linkServerConvert } from "@shared/lib";
+import { environment } from "@environments/environment";
 
 @Component({
   selector: "app-portfolio-page",
   standalone: true,
-  imports: [CommonModule, NgOptimizedImage],
+  imports: [CommonModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: "./portfolio.component.html",
   styleUrls: ["./portfolio.component.scss"],
 })
 export class PortfolioPageComponent implements OnInit {
   private galleryService = inject(GalleryService);
+  private adminSettingsService = inject(AdminSettingsService);
+  private env = signal(environment);
 
-  // Align filters with Gallery categories + 'All Works'
-  filters: (ImageCategory | "All Works")[] = [
-    "All Works",
-    "visage",
-    "medical spa",
-    "bridal veils",
-    "interior",
-    "product",
-  ];
+  galleryImages = this.galleryService.images;
 
-  // Let's reimplement filters to match Gallery
-  categoryFilters: string[] = [
-    "All Works",
-    "visage",
-    "medical spa",
-    "bridal veils",
-    "interior",
-    "product",
-  ];
-  activeFilter = signal("All Works");
+  // Dynamic filters from AdminSettings + "All Works"
+  filters = computed<string[]>(() => {
+    const cats = this.adminSettingsService.settings()?.galleryCategories;
+    return ["All Works", ...(cats && cats.length > 0 ? cats : [])];
+  });
 
-  galleryImages = this.galleryService.images;
+  activeFilter = signal("All Works");
 
-  // Computed portfolio items from gallery images
-  portfolioItems = computed(() => {
-    return this.galleryImages().map((img) => ({
+  portfolioItems = computed(() =>
+    this.galleryImages().map((img) => ({
       id: img.id,
-      imageUrl: img.imageUrl,
+      imageUrl: this.getImageUrl(img.imageUrl),
       category: img.category,
       title: img.title,
-      description: img.alt || img.title, // Use alt or title as description
+      description: img.alt || img.title,
       statusTag: img.status === "published" ? "Available" : undefined,
-      aspectClass: this.getRandomAspect(img.id), // Deterministic random for layout
-      effects: "",
-    }));
-  });
+      aspectClass: this.getAspectClass(img.id ?? ""),
+    }))
+  );
 
   filteredItems = computed(() => {
     const filter = this.activeFilter();
-    if (filter === "All Works") {
-      return this.portfolioItems();
-    }
-    return this.portfolioItems().filter((item) => item.category === filter);
+    const items = this.portfolioItems();
+    return filter === "All Works"
+      ? items
+      : items.filter((item) => item.category === filter);
   });
 
   ngOnInit() {
+    if (!this.adminSettingsService.settings()) {
+      this.adminSettingsService.getSettings().subscribe();
+    }
     this.galleryService.getImages().subscribe();
   }
 
-  // Helper to give consistent aspect ratio based on ID
-  private getRandomAspect(id: string): string {
+  getImageUrl(path: string | undefined): string {
+    if (!path) return "assets/placeholder-gallery.png";
+    const isAbsolute =
+      path.startsWith("http") ||
+      path.startsWith("blob") ||
+      path.includes(this.env().apiUrl);
+    return isAbsolute ? path : linkServerConvert(path);
+  }
+
+  private getAspectClass(id: string): string {
     const hash = id
       .split("")
       .reduce((acc, char) => acc + char.charCodeAt(0), 0);

frontend/src/pages/portfolio/portfolio.component.ts

@@ -31,7 +31,7 @@ <h3 class="text-lg font-bold uppercase tracking-wider text-white" i18n="@@servic
               <span class="material-symbols-outlined text-primary text-sm">filter_list</span>
             </div>
             <ul class="space-y-1">
-              @for(filter of filterOptions; track filter) {
+              @for(filter of filterOptions(); track filter) {
                 <li>
                   <button 
                     (click)="setFilter(filter)"
@@ -60,8 +60,9 @@ <h4 class="text-primary font-bold mb-2" i18n="@@servicesGuidanceTitle">Need Guid
               <article class="group relative flex flex-col h-full reveal-item" [style.animation-delay.ms]="i * 100">
                 <div class="relative aspect-[4/5] w-full overflow-hidden rounded-3xl mb-6 shadow-2xl shadow-black/50">
                   <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent z-10 transition-opacity duration-300 opacity-60 group-hover:opacity-40"></div>
-                  <img [ngSrc]="service.imageUrl" [alt]="service.name" fill priority
-                       class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105 filter saturate-[0.9] group-hover:saturate-100"/>
+                   <img [src]="getImageUrl(service.imageUrl)" [alt]="service.name"
+                        class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105 filter saturate-[0.9] group-hover:saturate-100"
+                        loading="lazy" />
                   <div class="absolute bottom-6 right-6 z-20">
                     <div class="bg-black/80 backdrop-blur-md border border-primary/40 pl-4 pr-5 py-2 rounded-full flex items-center gap-3">
                       <span class="text-[10px] text-gray-300 uppercase tracking-wider font-medium" i18n="@@servicesHonorarium">Honorarium</span>

frontend/src/pages/treatments-catalog/treatments-catalog.component.html

@@ -3,88 +3,62 @@ import {
   ChangeDetectionStrategy,
   signal,
   computed,
+  inject,
+  OnInit,
 } from "@angular/core";
-import { CommonModule, NgOptimizedImage } from "@angular/common";
-
-interface Service {
-  id: number;
-  name: string;
-  category: string;
-  description: string;
-  price: number;
-  imageUrl: string;
-}
+import { CommonModule } from "@angular/common";
+import { AdminSettingsService } from "@entities/admin-settings";
+import { TreatmentsService } from "@entities/treatments";
+import { environment } from "@environments/environment";
+import { linkServerConvert } from "@shared/lib";
 
 @Component({
   selector: "app-services-catalog",
   standalone: true,
-  imports: [CommonModule, NgOptimizedImage],
+  imports: [CommonModule],
+  providers: [TreatmentsService],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: "./treatments-catalog.component.html",
   styleUrls: ["./treatments-catalog.component.scss"],
 })
-export class ServicesCatalogComponent {
-  services = signal<Service[]>([
-    {
-      id: 1,
-      name: "Lip Neutralization",
-      category: "Medical Aesthetics",
-      description:
-        "Advanced pigmentation correction technique to restore natural color and definition. Ideal for correcting cool tones or asymmetry with minimal downtime.",
-      price: 1200,
-      imageUrl:
-        "https://lh3.googleusercontent.com/aida-public/AB6AXuCnLA3tyCDcRymBx90wrQjtgGrWXr_0vKq72g14XO5LhCtxN0fIKkFn9IKD6M6rsiu2j-1__eQ3HJiho2vFk_lUHKNgfQNS64FGix2N4F6nBTaf3Rj8L6dICODAdpKFsPPMxMl_Pmvzxp-eFvAmxPVLjUW97KBGsfct4_5BDBksKXVjK3k0-dAiz7QQdGnsOy0tfeqFvOTrXr6fFz-G7dqpR1pQtskfaENZz1vQbsl1ShEaci5i8fDDN3Z_aU8hZQl4VkxlfL-rO07R",
-    },
-    {
-      id: 2,
-      name: "Evening Glamour",
-      category: "Professional Visage",
-      description:
-        "High-end evening makeup application using luxury cosmetics. Focused on longevity, photogenic finish, and enhancing your unique facial architecture.",
-      price: 600,
-      imageUrl:
-        "https://lh3.googleusercontent.com/aida-public/AB6AXuD08o6hF5_pbFiIJqYs4VYYrPPviAtlB2PjR4z2lZYzuT3rcSqK7UbUQNiOic7Y-5L8OgQjXfDI3pcgi0scXP-E6zXsJwv5g2J3sX89thdN8QagJQQCwGJWt96_rVAjbhNezpl35TsKsDKDFcyUdrK2qT0yPcFM3kP0hOXpqC8ZB7OFulzRzNGWHZR0Hw2QbGd77Id8wWieXLWUC7eU1JKb3MgO6TXvXzAJQth53BY6a91dqAL2kuvJKelagAgLC2sRUWQy1FQ6Ul7i",
-    },
-    {
-      id: 3,
-      name: "HydraFacial Elite",
-      category: "Skin Therapy",
-      description:
-        "The ultimate skin detox. A multi-step treatment that cleanses, exfoliates, and extracts impurities while infusing skin with hydrating serums.",
-      price: 850,
-      imageUrl:
-        "https://lh3.googleusercontent.com/aida-public/AB6AXuCN_i0UQ2DDBO3oiICvkDjAAQV4CBheKjtZbeV5zkQ3A3tngd9-v_70jN19UdyigQVFmmIJDEC6KKFrFXpRZnADtipZUJtbLTQrkC2elu6cCE8YLFAfsNR4Sy2SSAkC9vrYzA1VIzXnfpODZ7BB0sLbToeWMEeyWAB73l2Knzq96QXhRvBQlRlC3T7NRYn2TyQGjGmRmuoej4liuPk-DWB4caahTA2ZC7ui3ZRdGP1RwFDSRGLLzJclNcKQCbsaytClAoq-wBZgNMuu",
-    },
-    {
-      id: 4,
-      name: "Botulinum Therapy",
-      category: "Medical Aesthetics",
-      description:
-        "Medical-grade precision treatment to relax facial muscles, smoothing fine lines and wrinkles for a refreshed, youthful appearance.",
-      price: 1500,
-      imageUrl:
-        "https://lh3.googleusercontent.com/aida-public/AB6AXuB34PkR8y1rYZNuLirjoa_FFY2CY_sTtk3E3D3TyDA3ETuKZbV1f8UE43MtJowMY1QOkYx7mK8J63t1ElZzHXCDnlJcQYrZMqn3_uOkUn73PcyqERAFxeNewueco1IiX_dN1plTcEHcp1rjm_S-F900peq3YKUrZ9edGuDoXDqmXhfYwwt_qDbLHdlaxqKvcczg_kPsJADCRIBk8kD3gHj-EZsWUO2PlGmKPvoLa2z6haQa_oPg1yQuDbLaUjPG84AAjlPmus3FpnTd",
-    },
-  ]);
+export class ServicesCatalogComponent implements OnInit {
+  private treatmentsService = inject(TreatmentsService);
+  private adminSettingsService = inject(AdminSettingsService);
+  private env = signal(environment);
+
+  // Live data from backend GET /treatments
+  treatments = this.treatmentsService.treatments;
+
+  // Dynamic filter list from AdminSettings
+  filterOptions = computed<string[]>(() => {
+    const cats = this.adminSettingsService.settings()?.treatmentCategories;
+    return ["All Services", ...(cats && cats.length > 0 ? cats : ["Medical Aesthetics", "Professional Visage", "Skin Therapy"])];
+  });
 
-  filterOptions = [
-    "All Services",
-    "Medical Aesthetics",
-    "Professional Visage",
-    "Skin Therapy",
-  ];
   activeFilter = signal("All Services");
 
   filteredServices = computed(() => {
-    const services = this.services();
+    const all = this.treatments();
     const filter = this.activeFilter();
+    if (filter === "All Services") return all;
+    return all.filter((t) => t.category === filter);
+  });
 
-    if (filter === "All Services") {
-      return services;
+  ngOnInit() {
+    if (!this.adminSettingsService.settings()) {
+      this.adminSettingsService.getSettings().subscribe();
     }
+    this.treatmentsService.getTreatments().subscribe();
+  }
 
-    return services.filter((service) => service.category === filter);
-  });
+  getImageUrl(path: string | undefined): string {
+    if (!path) return "assets/placeholder-treatment.png";
+    const isAbsolute =
+      path.startsWith("http") ||
+      path.startsWith("blob") ||
+      path.includes(this.env().apiUrl);
+    return isAbsolute ? path : linkServerConvert(path);
+  }
 
   setFilter(filter: string) {
     this.activeFilter.set(filter);