feat: Add Veil, Gallery, and Treatments pages, a shared CardView component, and backend gallery schema and repository.

Author: beginwebdev2002

backend/src/modules/gallery/infrastructure/repositories/gallery.repository.ts

@@ -16,7 +16,10 @@ export class GalleryRepository {
 
   async findAll(): Promise<Gallery[]> {
     const docs = await this.galleryModel.find().exec();
-    return docs.map((doc) => this.toDomain(doc));
+    const doc = docs.map((doc) => this.toDomain(doc));
+    console.log('DOCS: ', doc);
+    
+    return doc;
   }
 
   async create(gallery: Omit<Gallery, 'id' | 'createdAt'>): Promise<Gallery> {
@@ -49,14 +52,16 @@ export class GalleryRepository {
   }
 
   private toDomain(doc: GalleryDocument): Gallery {
-    const d = doc as any;
+    const { _id, title, imageUrl, category, tags, createdAt } = doc as any;
+    console.log('createdAT: ', createdAt);
+    
     return new Gallery(
-      d._id.toString(),
-      d.title,
-      d.imageUrl,
-      d.category,
-      d.tags,
-      d.createdAt,
+      _id.toString(),
+      title,
+      imageUrl,
+      category,
+      tags, 
+      createdAt,
     );
   }
 }

backend/src/modules/gallery/infrastructure/schemas/gallery.schema.ts

@@ -20,6 +20,11 @@ export class GallerySchemaEntity {
   @Prop()
   alt: string;
 
+  @Prop()
+  createdAt: Date;
+
+  @Prop()
+  updatedAt: Date;
 }
 
 export const GallerySchema = SchemaFactory.createForClass(GallerySchemaEntity);

frontend/src/pages/gallery/gallery.component.html

@@ -50,13 +50,14 @@ <h2 class="font-serif text-4xl text-gray-900 mb-2" i18n="@@galleryTitle">Gallery
     <!-- Image Grid -->
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 animate-page-enter">
       @for(image of filteredImages(); track image.id; let i = $index) {
-        <app-gallery-card
-          [image]="image"
+        <app-card-view
+          [data]="image"
+          [config]="galleryCardConfig"
           [index]="i"
           (edit)="openModal($event)"
           (viewImage)="openImageModal($event)"
-          (deleteCard)="deleteImage($event)"
-        ></app-gallery-card>
+          (delete)="deleteImage($event.toString())"
+        ></app-card-view>
       }
     </div>
   } @else {

frontend/src/pages/gallery/gallery.component.ts

@@ -11,21 +11,22 @@ import { FormsModule } from "@angular/forms";
 import { GalleryService, GALLERY_CATEGORIES, GalleryCategories } from "@entities/gallery";
 import { Gallery, ImageCategory } from "@shared/models";
 import { GalleryFormComponent } from "./ui/gallery-form/gallery-form.component";
-import { GalleryCardComponent } from "./ui/gallery-card/gallery-card.component";
-import { ImagePopupComponent, ListViewComponent, ListViewColumn } from "@shared/ui";
+import { ImagePopupComponent, ListViewComponent, ListViewColumn, CardViewComponent, CardViewConfig } from "@shared/ui";
 import { convertFormData, excludeFormDataProperties } from "@shared/lib/object";
 import { linkServerConvert } from "@shared/lib";
+import { environment } from "@environments/environment";
 
 @Component({
   selector: "app-gallery",
   standalone: true,
-  imports: [CommonModule, FormsModule, GalleryFormComponent, GalleryCardComponent, ImagePopupComponent, ListViewComponent],
+  imports: [CommonModule, FormsModule, GalleryFormComponent, CardViewComponent, ImagePopupComponent, ListViewComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: "./gallery.component.html",
   styleUrls: ["./gallery.component.scss"],
 })
 export class GalleryComponent implements OnInit {
   private galleryService = inject(GalleryService);
+  env = signal(environment);
 
   isDragging = signal(false);
   isModalOpen = signal(false);
@@ -45,6 +46,18 @@ export class GalleryComponent implements OnInit {
     { key: 'actions', label: 'Actions', type: 'actions' }
   ]);
 
+  galleryCardConfig: CardViewConfig = {
+    imageField: 'imageUrl',
+    titleField: 'title',
+    subtitleField: 'category',
+    topRightField: 'createdAt',
+    topRightType: 'date',
+    details: [
+      { label: 'Status', field: 'status', type: 'status' },
+      { label: 'Created At', field: 'createdAt', type: 'date' }
+    ]
+  };
+
   filteredImages = computed(() => {
     const filter = this.activeFilter();
     if (filter === GalleryCategories.ALL) {
@@ -112,7 +125,9 @@ export class GalleryComponent implements OnInit {
   }
 
   openImageModal(imageUrl: string) {
-    this.selectedImage.set(linkServerConvert(imageUrl));
+    if (!imageUrl) return;
+    const isAbsolute = imageUrl.startsWith("http") || imageUrl.startsWith("blob") || imageUrl.includes(this.env().apiUrl);
+    this.selectedImage.set(isAbsolute ? imageUrl : linkServerConvert(imageUrl));
   }
 
   closeImageModal() {

frontend/src/pages/gallery/ui/gallery-card/gallery-card.component.html

@@ -20,11 +20,19 @@ <h3 class="font-display text-xl text-gray-900">
         <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">
-                <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="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>
                     <p class="text-xs mt-1 font-semibold" i18n="@@galleryChangeImage">Change Image</p>
                   </div>
+                  <button 
+                    type="button"
+                    (click)="$event.stopPropagation(); openImageModal(previewImage())"
+                    class="p-2 bg-white/20 hover:bg-white/40 rounded-full backdrop-blur-md transition-all text-white"
+                    title="Zoom In"
+                  >
+                    <span class="material-symbols-outlined text-2xl">zoom_in</span>
+                  </button>
                 </div>
             } @else {
                 <div class="text-center text-gray-500">
@@ -90,3 +98,10 @@ <h3 class="font-display text-xl text-gray-900">
     </div>
   </div>
 </div>
+
+<!-- Fullscreen Image Modal -->
+<app-image-popup
+  [imageUrl]="selectedImage()"
+  title="Mavluda Beauty • Gallery Preview"
+  (close)="closeImageModal()"
+></app-image-popup>

frontend/src/pages/gallery/ui/gallery-card/gallery-card.component.ts

@@ -12,17 +12,20 @@ import { form, FormField } from "@angular/forms/signals";
 import { Gallery, ImageCategory } from "@shared/models";
 import { linkServerConvert } from "@shared/lib";
 import { galleryFormData, galleryValidationSchema, resetGalleryData } from "@features/gallery";
+import { ImagePopupComponent } from "@shared/ui";
+import { environment } from "@environments/environment";
 
 @Component({
   selector: "app-gallery-form",
   standalone: true,
-  imports: [CommonModule, FormField],
+  imports: [CommonModule, FormField, ImagePopupComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: "./gallery-form.component.html",
 })
 export class GalleryFormComponent implements OnInit {
   image = input.required<Gallery>();
   filters = input.required<ImageCategory[]>();
+  env = signal(environment);
 
   save = output<{ data: any; file: File | null }>();
   cancel = output<void>();
@@ -36,6 +39,9 @@ export class GalleryFormComponent implements OnInit {
   });
   isEditMode = signal(false);
 
+  // Image Preview State for Popup
+  selectedImage = signal<string | null>(null);
+
   ngOnInit(): void {
     this.initForm();
   }
@@ -92,4 +98,15 @@ export class GalleryFormComponent implements OnInit {
       .map(word => word.charAt(0).toUpperCase() + word.slice(1))
       .join(' ');
   }
+
+  // Image Modal Methods
+  openImageModal(imageUrl: string | null) {
+    if (!imageUrl) return;
+    const isAbsolute = imageUrl.startsWith("http") || imageUrl.startsWith("blob") || imageUrl.includes(this.env().apiUrl);
+    this.selectedImage.set(isAbsolute ? imageUrl : linkServerConvert(imageUrl));
+  }
+
+  closeImageModal() {
+    this.selectedImage.set(null);
+  }
 }