Merge pull request #6 from beginwebdev2002/feature/architecture-performance-upgrade-10045910068727762469

beginwebdev2002 · web-flow · commit 87ce91258edd · 2026-04-09T07:46:17.000+05:00
🧹 [chore] Core Architecture and Performance Upgrade
diff --git a/frontend/playwright-report/index.html b/frontend/playwright-report/index.html
@@ -87,4 +87,4 @@
     <div id='root'></div>
   </body>
 </html>
-<template id="playwrightReportBase64">data:application/zip;base64,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</template>
+<template id="playwrightReportBase64">data:application/zip;base64,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</template>
diff --git a/frontend/src/pages/clients/clients.component.html b/frontend/src/pages/clients/clients.component.html
@@ -89,7 +89,7 @@ <h1 class="font-display text-3xl font-medium text-gray-900" i18n="Clients title@
                 <div class="flex items-center gap-3">
                   <!-- Avatar -->
                   @if (client.avatarType === 'image') {
-                    <img [src]="client.avatarUrl" alt="" class="w-10 h-10 rounded-full object-cover shadow-sm ring-1 ring-gray-100">
+                    <img [ngSrc]="client.avatarUrl" width="40" height="40" alt="" class="w-10 h-10 rounded-full object-cover shadow-sm ring-1 ring-gray-100">
                   } @else if (client.avatarType === 'icon') {
                     <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center">
                       <span class="material-symbols-outlined text-[20px]">person</span>
diff --git a/frontend/src/pages/clients/clients.component.ts b/frontend/src/pages/clients/clients.component.ts
@@ -1,3 +1,4 @@
+import { NgOptimizedImage } from "@angular/common";
 import { Component, ChangeDetectionStrategy, signal, computed } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
@@ -17,7 +18,7 @@ export interface Client {
 @Component({
   selector: 'app-admin-clients',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, NgOptimizedImage],
   templateUrl: './clients.component.html',
   styleUrls: ['./clients.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/frontend/src/pages/gallery/ui/gallery-form/gallery-form.component.html b/frontend/src/pages/gallery/ui/gallery-form/gallery-form.component.html
@@ -19,7 +19,7 @@ <h3 class="font-display text-xl text-gray-900">
         <label class="block text-sm font-medium text-gray-700" i18n="@@galleryLabelPreview">Image Preview</label>
         <div (click)="fileInput.click()" class="aspect-[4/3] w-full rounded-xl border-2 border-dashed border-gray-300 flex flex-col items-center justify-center relative group cursor-pointer hover:border-primary transition-colors bg-gray-50">
             @if (previewImage()) {
-                <img [src]="previewImage()" alt="Image preview" class="w-full h-full object-cover rounded-lg absolute inset-0">
+                <img [ngSrc]="previewImage()" fill alt="Image preview" class="w-full h-full object-cover rounded-lg absolute inset-0">
                 <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg gap-4">
                   <div class="text-center text-white">
                     <span class="material-symbols-outlined text-3xl">edit</span>
diff --git a/frontend/src/pages/gallery/ui/gallery-form/gallery-form.component.ts b/frontend/src/pages/gallery/ui/gallery-form/gallery-form.component.ts
@@ -1,3 +1,4 @@
+import { NgOptimizedImage } from "@angular/common";
 import { CommonModule } from "@angular/common";
 import {
   ChangeDetectionStrategy,
@@ -18,7 +19,7 @@ import { environment } from "@environments/environment";
 @Component({
   selector: "app-gallery-form",
   standalone: true,
-  imports: [CommonModule, FormField, ImagePopupComponent],
+  imports: [CommonModule, FormField, ImagePopupComponent, NgOptimizedImage],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: "./gallery-form.component.html",
 })
diff --git a/frontend/src/pages/user-profile/user-profile.component.html b/frontend/src/pages/user-profile/user-profile.component.html
@@ -13,7 +13,7 @@
       <div class="rounded-2xl bg-[#121212] border border-[#ffffff10] p-8 flex flex-col items-center text-center relative overflow-hidden group">
         <div class="absolute inset-0 bg-gradient-to-b from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
         <div class="relative w-28 h-28 mb-5">
-          <img [alt]="user().name" class="w-full h-full object-cover rounded-full border-2 border-primary/50 p-1 shadow-gold-glow" [src]="user().avatarUrl"/>
+          <img [alt]="user().name" class="w-full h-full object-cover rounded-full border-2 border-primary/50 p-1 shadow-gold-glow" [ngSrc]="user().avatarUrl" fill/>
           <div class="absolute bottom-1 right-1 w-8 h-8 bg-primary rounded-full flex items-center justify-center border-4 border-[#121212] z-10">
             <span class="material-symbols-outlined text-[#0A0A0A] text-[16px] font-bold">verified</span>
           </div>
diff --git a/frontend/src/pages/user-profile/user-profile.component.ts b/frontend/src/pages/user-profile/user-profile.component.ts
@@ -1,3 +1,4 @@
+import { NgOptimizedImage } from "@angular/common";
 import {
   Component,
   ChangeDetectionStrategy,
@@ -10,7 +11,7 @@ import { AuthService } from "@entities/user";
 @Component({
   selector: "app-user-profile",
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, NgOptimizedImage],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: "./user-profile.component.html",
   styleUrls: ["./user-profile.component.scss"],
diff --git a/frontend/src/pages/veil/ui/veil-item/veil-item.component.html b/frontend/src/pages/veil/ui/veil-item/veil-item.component.html
@@ -3,7 +3,7 @@
     <!-- Top Section: Image & Price -->
     <div class="flex justify-between items-start mb-6 relative">
       <div class="w-20 h-20 rounded-full overflow-hidden border-2 border-white shadow-md cursor-pointer" (click)="onViewImage($event)">
-        <img [src]="safeImageUrl()" [alt]="veil().name" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
+        <img [ngSrc]="safeImageUrl()" [alt]="veil().name" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" fill>
       </div>
       <span class="font-serif text-xl font-bold text-gray-900">{{ veil().price }} TJS</span>
       <!-- Decorative Blur Effect -->
diff --git a/frontend/src/pages/veil/ui/veil-item/veil-item.component.ts b/frontend/src/pages/veil/ui/veil-item/veil-item.component.ts
@@ -1,11 +1,12 @@
+import { NgOptimizedImage } from "@angular/common";
 import { Component, input, output, computed } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Veil } from "@features/veil";
 
 @Component({
   selector: "app-veil-item",
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, NgOptimizedImage],
   templateUrl: "./veil-item.component.html",
 })
 export class VeilItemComponent {
diff --git a/frontend/src/pages/veil/ui/veil-modal/veil-modal.component.html b/frontend/src/pages/veil/ui/veil-modal/veil-modal.component.html
@@ -20,7 +20,7 @@ <h3 class="text-xl font-serif font-bold text-gray-900">
                   <label class="block text-sm font-medium text-gray-700">Gown Image</label>
                   <div (click)="fileInput.click()" class="aspect-square w-full rounded-xl border-2 border-dashed border-gray-300 flex flex-col items-center justify-center relative group cursor-pointer hover:border-gold transition-colors bg-gray-50">
                       @if (previewImage()) {
-                          <img [src]="previewImage()" alt="Gown preview" class="w-full h-full object-cover rounded-lg absolute inset-0">
+                          <img [ngSrc]="previewImage()" fill alt="Gown preview" class="w-full h-full object-cover rounded-lg absolute inset-0">
                           <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
                             <div class="text-center text-white">
                               <span class="material-symbols-outlined text-3xl">edit</span>
diff --git a/frontend/src/pages/veil/ui/veil-modal/veil-modal.component.ts b/frontend/src/pages/veil/ui/veil-modal/veil-modal.component.ts
@@ -1,3 +1,4 @@
+import { NgOptimizedImage } from "@angular/common";
 import {
   Component,
   input,
@@ -13,7 +14,7 @@ import { Veil } from "@features/veil";
 @Component({
   selector: "app-veil-modal",
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, NgOptimizedImage],
   templateUrl: "./veil-modal.component.html",
 })
 export class VeilModalComponent {
diff --git a/frontend/src/pages/veil/veil.component.html b/frontend/src/pages/veil/veil.component.html
@@ -83,7 +83,7 @@
               class="w-12 h-12 rounded-full overflow-hidden border-2 border-white shadow-sm cursor-pointer hover:scale-105 transition-transform"
               (click)="openImageModal(item.image)"
             >
-              <img [src]="getSafeImageUrl(item.image)" [alt]="item.name" class="w-full h-full object-cover">
+              <img [ngSrc]="getSafeImageUrl(item.image)" [alt]="item.name" class="w-full h-full object-cover" fill>
             </div>
           } @else if (column.key === 'price') {
             <span class="font-bold text-gray-900">{{ item.price }} TJS</span>
diff --git a/frontend/src/pages/veil/veil.component.ts b/frontend/src/pages/veil/veil.component.ts
@@ -1,3 +1,4 @@
+import { NgOptimizedImage } from "@angular/common";
 import { CommonModule } from "@angular/common";
 import {
   ChangeDetectionStrategy,
@@ -18,7 +19,7 @@ import { linkServerConvert } from "@shared/lib";
 @Component({
   selector: "app-veil-page",
   standalone: true,
-  imports: [CommonModule, CardViewComponent, VeilFormComponent, ImagePopupComponent, ListViewComponent],
+  imports: [CommonModule, CardViewComponent, VeilFormComponent, ImagePopupComponent, ListViewComponent, NgOptimizedImage],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: "./veil.component.html",
   styleUrls: ["./veil.component.scss"],
diff --git a/frontend/src/shared/ui/image-popup/image-popup.component.html b/frontend/src/shared/ui/image-popup/image-popup.component.html
@@ -21,7 +21,7 @@
                 </div>
              }
 
-             <img [src]="imageUrl()" 
+             <img [ngSrc]="imageUrl()" fill
                   (load)="onImageLoad()"
                   alt="Full screen view" 
                   class="max-w-full max-h-[85vh] object-contain shadow-2xl transition-all duration-700 ease-out"
diff --git a/frontend/src/shared/ui/image-popup/image-popup.component.ts b/frontend/src/shared/ui/image-popup/image-popup.component.ts
@@ -1,10 +1,11 @@
+import { NgOptimizedImage } from "@angular/common";
 import { Component, input, output, signal, ChangeDetectionStrategy, effect } from "@angular/core";
 import { CommonModule } from "@angular/common";
 
 @Component({
   selector: "app-image-popup",
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, NgOptimizedImage],
   templateUrl: "./image-popup.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/frontend/src/shared/ui/list-view/list-view.component.html b/frontend/src/shared/ui/list-view/list-view.component.html
@@ -21,7 +21,7 @@
                     <div class="text-sm font-medium text-gray-900">{{ item[col.key] }}</div>
                   }
                   @case ('image') {
-                    <img [src]="item[col.key]" [alt]="item.alt || ''" width="64" height="64" class="w-16 h-16 object-cover rounded-lg shadow-sm cursor-pointer" (click)="view.emit(item[col.key])"/>
+                    <img [ngSrc]="item[col.key]" [alt]="item.alt || ''" width="64" height="64" class="w-16 h-16 object-cover rounded-lg shadow-sm cursor-pointer" (click)="view.emit(item[col.key])"/>
                   }
                   @case ('badge') {
                     <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
diff --git a/frontend/src/shared/ui/list-view/list-view.component.ts b/frontend/src/shared/ui/list-view/list-view.component.ts
@@ -1,3 +1,4 @@
+import { NgOptimizedImage } from "@angular/common";
 import { Component, ChangeDetectionStrategy, input, output, TemplateRef, contentChild, computed } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { linkServerConvert } from "@shared/lib";
@@ -12,7 +13,7 @@ export interface ListViewColumn {
 @Component({
   selector: "app-list-view",
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, NgOptimizedImage],
   templateUrl: "./list-view.component.html",
   styleUrls: ["./list-view.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
