feat: implement product detail page with catalog service integration and image carousel support

src/app/core/services/catalog/catalog.interface.ts

@@ -11,3 +11,33 @@ export interface Product {
   brand: string | null;
   images: string[];
 }
+
+export interface ProductAttributeOption {
+  id: number;
+  value: string;
+  label: string;
+  sort_order: number;
+  metadata: Record<string, any> | null;
+}
+
+export interface ProductAttribute {
+  id: number;
+  codigo: string;
+  nombre: string;
+  is_required: boolean;
+  metadata_schema: Record<string, any> | null;
+  type: string;
+  options: ProductAttributeOption[];
+}
+
+export interface ProductVariant {
+  variant_id: number;
+  images: string[];
+  attributes: Record<string, string>;
+}
+
+export interface ProductDetail extends Product {
+  attributes: ProductAttribute[];
+  default_variant: ProductVariant | null;
+}
+

src/app/core/services/catalog/catalog.service.ts

@@ -6,7 +6,7 @@ import { ApiPaginationQueryParams } from '../api-pagination-query-params.interfa
 import { ApiPaginatedResponse } from '../api-paginated-response.interface';
 import { ApiResponse } from '../api-response.interface';
 import { TenantService } from '../tenant.service';
-import { Product } from './catalog.interface';
+import { Product, ProductDetail } from './catalog.interface';
 
 type HttpParamValue =
   | string
@@ -35,9 +35,9 @@ export class CatalogService {
     );
   }
 
-  getProducto(id: number): Observable<Product> {
+  getProducto(id: number): Observable<ProductDetail> {
     return this.http
-      .get<ApiResponse<Product>>(`${this.tenantApiUrl}/productos/${id}`)
+      .get<ApiResponse<ProductDetail>>(`${this.tenantApiUrl}/productos/${id}`)
       .pipe(map((response) => response.data));
   }