feat: implement core management modules for veils, treatments, gallery, and settings pages

Author: beginwebdev2002

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

@@ -8,7 +8,8 @@ import {
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FormsModule } from "@angular/forms";
-import { GalleryService, GALLERY_CATEGORIES, GalleryCategories } from "@entities/gallery";
+import { GalleryService, GalleryCategories } from "@entities/gallery";
+import { AdminSettingsService } from "@entities/admin-settings";
 import { Gallery, ImageCategory } from "@shared/models";
 import { GalleryFormComponent } from "./ui/gallery-form/gallery-form.component";
 import { ImagePopupComponent, ListViewComponent, ListViewColumn, CardViewComponent, CardViewConfig } from "@shared/ui";
@@ -26,6 +27,7 @@ import { environment } from "@environments/environment";
 })
 export class GalleryComponent implements OnInit {
   private galleryService = inject(GalleryService);
+  private adminSettingsService = inject(AdminSettingsService);
   env = signal(environment);
 
   isDragging = signal(false);
@@ -35,7 +37,14 @@ export class GalleryComponent implements OnInit {
 
   images = this.galleryService.images;
 
-  filters = signal<ImageCategory[]>(GALLERY_CATEGORIES);
+  // Dynamic categories from admin settings.
+  // Falls back to ['all'] if settings not loaded yet.
+  filters = computed<ImageCategory[]>(() => {
+    const settings = this.adminSettingsService.settings();
+    const cats = settings?.galleryCategories ?? [];
+    return ['all', ...cats] as ImageCategory[];
+  });
+
   activeFilter = signal<ImageCategory>(GalleryCategories.ALL);
 
   columns = signal<ListViewColumn[]>([
@@ -69,15 +78,20 @@ export class GalleryComponent implements OnInit {
   currentImage!: Gallery;
 
   ngOnInit() {
+    // Load settings if not yet cached
+    if (!this.adminSettingsService.settings()) {
+      this.adminSettingsService.getSettings().subscribe();
+    }
     this.galleryService.getImages().subscribe();
   }
 
   getEmptyImage(): Gallery {
+    const firstCat = this.filters().find(f => f !== 'all') ?? GalleryCategories.ALL;
     return {
       id: "",
       imageUrl: "",
       title: "",
-      category: GalleryCategories.VISAGE, // Default
+      category: firstCat,
       status: "draft",
       alt: "",
     };
@@ -89,7 +103,7 @@ export class GalleryComponent implements OnInit {
   }
 
   openModal(image: Gallery) {
-    this.currentImage = { ...image }; // Create a copy for editing
+    this.currentImage = { ...image };
     this.isModalOpen.set(true);
   }
 
@@ -104,12 +118,10 @@ export class GalleryComponent implements OnInit {
     const formData = excludeFormDataProperties(convertFormData(...args), ["id", "createdAt", "updatedAt"]);
 
     if (!image.id) {
-      // New image
       this.galleryService.createImage(formData).subscribe(() => {
         this.closeModal();
       });
     } else {
-      // Update existing
       this.galleryService
         .updateImage(image.id, formData)
         .subscribe(() => {
@@ -150,7 +162,6 @@ export class GalleryComponent implements OnInit {
     const files = event.dataTransfer?.files;
     if (files && files.length > 0) {
       console.log(`${files.length} files dropped`);
-      // Here you would handle the file upload logic
     }
   }
 }

frontend/src/pages/settings/settings.component.html

@@ -1,5 +1,30 @@
 
 <div class="p-4 sm:p-8 max-w-6xl mx-auto animate-page-enter pb-20">
+
+  <!-- Save Status Toasts -->
+  @if (isSaving()) {
+    <div class="fixed top-6 right-6 z-50 flex items-center space-x-3 bg-white border border-gray-200 rounded-xl shadow-lg px-5 py-3 animate-page-enter">
+      <svg class="animate-spin h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+      </svg>
+      <span class="text-sm font-medium text-gray-700">Saving...</span>
+    </div>
+  }
+  @if (saveSuccess()) {
+    <div class="fixed top-6 right-6 z-50 flex items-center space-x-3 bg-green-50 border border-green-200 rounded-xl shadow-lg px-5 py-3 animate-page-enter">
+      <span class="material-symbols-outlined text-green-600 text-xl">check_circle</span>
+      <span class="text-sm font-medium text-green-700">Saved successfully!</span>
+    </div>
+  }
+  @if (saveError()) {
+    <div class="fixed top-6 right-6 z-50 flex items-center space-x-3 bg-red-50 border border-red-200 rounded-xl shadow-lg px-5 py-3 animate-page-enter">
+      <span class="material-symbols-outlined text-red-500 text-xl">error</span>
+      <span class="text-sm font-medium text-red-700">{{ saveError() }}</span>
+    </div>
+  }
+
+
   <!-- Page Header -->
   <div class="mb-8">
       <h1 class="font-serif text-4xl text-gray-900 mb-2" i18n="@@settingsTitle">Management of 'About' & Core Info</h1>
@@ -77,11 +102,13 @@ <h1 class="font-serif text-4xl text-gray-900 mb-2" i18n="@@settingsTitle">Manage
         [veilFabrics]="veilFabrics()"
         [veilTrainLengths]="veilTrainLengths()"
         [veilNecklines]="veilNecklines()"
+        [isSaving]="isSaving()"
         (addItem)="addItem($event)"
         (updateItem)="updateItem($event.type, $event.index, $event.value)"
         (removeItem)="removeItem($event.type, $event.index)"
         (save)="saveSelectionLists()"
       />
+
     }
 
   </div>