feat(frontend): apply FSD, luxury theme, unify components and fix backend integrations

- Enforce Feature Sliced Design patterns with unified EntityCardComponent and EntityListComponent.
- Implement luxury Mavluda Beauty theme utilizing Tailwind CSS and Flowbite.
- Configure asset management utilizing NgOptimizedImage for lazy loading and optimized image serving.
- Fix all POST API integration to properly use `API_ENDPOINTS` helper constants linking to NestJS endpoints for `auth.service`, `gallery.service`, `treatments.service`, and `veil.service`.
- Refactor catalog screens to fully align with standard unified list structures.

Co-authored-by: beginwebdev2002 <102213457+beginwebdev2002@users.noreply.github.com>

Author: google-labs-jules[bot]

frontend/package-lock.json

@@ -27,15 +27,18 @@
     "@ngrx/store": "^21.1.0",
     "crypto": "^1.0.1",
     "express": "^5.2.1",
+    "flowbite": "^4.0.1",
     "jwt-decode": "^4.0.0",
-    "rxjs": "^7.8.1",
-    "tailwindcss": "latest"
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^2.4.0",
     "@playwright/test": "^1.59.1",
     "@types/node": "^22.14.0",
+    "autoprefixer": "^10.4.27",
     "jsdom": "^29.0.2",
+    "postcss": "^8.5.9",
+    "tailwindcss": "^3.4.19",
     "typescript": "~5.8.2",
     "vite": "^6.2.0",
     "vitest": "^4.1.2"

frontend/package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/postcss.config.cjs

@@ -3,12 +3,14 @@ import { HttpClient } from "@angular/common/http";
 import { Observable, tap } from "rxjs";
 import { Gallery } from "@shared/models";
 
+import { API_ENDPOINTS } from "@core/constants";
+
 @Injectable({
   providedIn: "root",
 })
 export class GalleryService {
   private http = inject(HttpClient);
-  private apiUrl = "/gallery";
+  private apiUrl = API_ENDPOINTS.GALLERY.BASE;
 
   // State
   private _images = signal<Gallery[]>([]);
@@ -21,7 +23,7 @@ export class GalleryService {
   }
 
   getImage(id: string): Observable<Gallery> {
-    return this.http.get<Gallery>(`${this.apiUrl}/${id}`);
+    return this.http.get<Gallery>(API_ENDPOINTS.GALLERY.URL_BY_ID(id));
   }
 
   // Use this for both create and update if sending full object, or create specific methods
@@ -35,7 +37,7 @@ export class GalleryService {
 
   updateImage(id: string, formData: FormData): Observable<Gallery> {
     return this.http
-      .put<Gallery>(`${this.apiUrl}/${id}`, formData)
+      .put<Gallery>(API_ENDPOINTS.GALLERY.URL_BY_ID(id), formData)
       .pipe(
         tap((updatedImage) =>
           this._images.update((imgs) =>
@@ -47,7 +49,7 @@ export class GalleryService {
 
   deleteImage(id: string): Observable<void> {
     return this.http
-      .delete<void>(`${this.apiUrl}/${id}`)
+      .delete<void>(API_ENDPOINTS.GALLERY.URL_BY_ID(id))
       .pipe(
         tap(() =>
           this._images.update((imgs) => imgs.filter((img) => img.id !== id)),

frontend/src/entities/gallery/gallery.service.ts

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 import { tap } from 'rxjs/operators';
 import { User, AuthResponse } from './model/user.model';
 import { jwtDecode } from 'jwt-decode';
+import { API_ENDPOINTS } from '@core/constants';
 
 @Injectable({
   providedIn: 'root'
@@ -25,13 +26,13 @@ export class AuthService {
   }
 
   login(credentials: any) {
-    return this.http.post<AuthResponse>('/auth/login', credentials).pipe(
+    return this.http.post<AuthResponse>(API_ENDPOINTS.AUTH.LOGIN, credentials).pipe(
       tap(response => this.setSession(response.access_token))
     );
   }
 
   register(data: any) {
-    return this.http.post<AuthResponse>('/auth/register', data).pipe(
+    return this.http.post<AuthResponse>(API_ENDPOINTS.AUTH.REGISTER, data).pipe(
       tap(response => this.setSession(response.access_token))
     );
   }

frontend/src/entities/user/auth.service.ts

@@ -1,13 +1,29 @@
-<div class="entity-card">
-  <div class="image-container" *ngIf="imageUrl">
-      <img [ngSrc]="imageUrl" width="200" height="200" [alt]="title">
+<div class="bg-black-deep border border-primary-gold/20 rounded-lg overflow-hidden shadow-lg hover:shadow-primary-gold/20 transition-shadow duration-300 flex flex-col h-full group">
+  <div class="relative w-full h-64 overflow-hidden" *ngIf="imageUrl">
+      <img
+        [ngSrc]="imageUrl"
+        fill
+        [priority]="priority"
+        [alt]="title"
+        class="object-cover group-hover:scale-105 transition-transform duration-500"
+      >
   </div>
-  <div class="content">
-      <h3>{{ title }}</h3>
-      <p>{{ description }}</p>
+  <div class="p-6 flex-grow flex flex-col">
+      <h3 class="text-xl font-serif text-primary-gold mb-3">{{ title }}</h3>
+      <p class="text-gray-300 font-sans flex-grow">{{ description }}</p>
   </div>
-  <div class="actions">
-      <button (click)="onEdit()">Edit</button>
-      <button (click)="onDelete()">Delete</button>
+  <div class="p-6 pt-0 flex justify-between gap-4 mt-auto">
+      <button
+        (click)="onEdit()"
+        class="flex-1 px-4 py-2 bg-transparent border border-primary-gold text-primary-gold rounded hover:bg-primary-gold hover:text-black-deep transition-colors duration-300 font-sans text-sm uppercase tracking-wider"
+      >
+        Edit
+      </button>
+      <button
+        (click)="onDelete()"
+        class="flex-1 px-4 py-2 bg-transparent border border-red-500 text-red-500 rounded hover:bg-red-500 hover:text-white transition-colors duration-300 font-sans text-sm uppercase tracking-wider"
+      >
+        Delete
+      </button>
   </div>
 </div>

frontend/src/shared/ui/entity-card/entity-card.component.html

@@ -1,29 +0,0 @@
-.entity-card {
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  overflow: hidden;
-  margin: 10px;
-  display: flex;
-  flex-direction: column;
-
-  .image-container {
-      width: 100%;
-      height: 200px;
-      position: relative;
-      img {
-          object-fit: cover;
-      }
-  }
-
-  .content {
-      padding: 10px;
-      flex-grow: 1;
-  }
-
-  .actions {
-      padding: 10px;
-      display: flex;
-      justify-content: space-between;
-      background-color: #f9f9f9;
-  }
-}

frontend/src/shared/ui/entity-card/entity-card.component.scss

@@ -13,6 +13,7 @@ export class EntityCardComponent {
   @Input() imageUrlPath: string = 'image';
   @Input() titlePath: string = 'name';
   @Input() descriptionPath: string = 'description';
+  @Input() priority: boolean = false;
 
   @Output() edit = new EventEmitter<any>();
   @Output() delete = new EventEmitter<any>();

frontend/src/shared/ui/entity-card/entity-card.component.ts

@@ -1,11 +1,13 @@
-<div class="entity-list">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
   <app-entity-card
-      *ngFor="let entity of entities"
+      *ngFor="let entity of entities; let i = index"
       [entity]="entity"
       [imageUrlPath]="imageUrlPath"
       [titlePath]="titlePath"
       [descriptionPath]="descriptionPath"
+      [priority]="i === 0"
       (edit)="onEdit($event)"
       (delete)="onDelete($event)"
+      class="h-full"
   ></app-entity-card>
 </div>

frontend/src/shared/ui/entity-list/entity-list.component.html

@@ -1,5 +0,0 @@
-.entity-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-}