feat: add marketplace products admin UI with copy-to-vendor functionality

- Add admin marketplace products page to browse imported products
- Add admin vendor products page to manage vendor catalog
- Add product detail pages for both marketplace and vendor products
- Implement copy-to-vendor API to copy marketplace products to vendor catalogs
- Add vendor product service with CRUD operations
- Update sidebar navigation with new product management links
- Add integration and unit tests for new endpoints and services

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/api/v1/admin/__init__.py

@@ -35,9 +35,11 @@ from . import (
     marketplace,
     monitoring,
     notifications,
+    products,
     settings,
     users,
     vendor_domains,
+    vendor_products,
     vendor_themes,
     vendors,
 )
@@ -92,6 +94,17 @@ router.include_router(users.router, tags=["admin-users"])
 router.include_router(dashboard.router, tags=["admin-dashboard"])
 
 
+# ============================================================================
+# Product Catalog
+# ============================================================================
+
+# Include marketplace product catalog management endpoints
+router.include_router(products.router, tags=["admin-marketplace-products"])
+
+# Include vendor product catalog management endpoints
+router.include_router(vendor_products.router, tags=["admin-vendor-products"])
+
+
 # ============================================================================
 # Marketplace & Imports
 # ============================================================================

app/api/v1/admin/products.py

@@ -0,0 +1,252 @@
+# app/api/v1/admin/products.py
+"""
+Admin product catalog endpoints.
+
+Provides platform-wide product search and management capabilities:
+- Browse all marketplace products across vendors
+- Search by title, GTIN, SKU, brand
+- Filter by marketplace, vendor, availability, product type
+- View product details and translations
+- Copy products to vendor catalogs
+"""
+
+import logging
+
+from fastapi import APIRouter, Depends, Query
+from pydantic import BaseModel
+from sqlalchemy.orm import Session
+
+from app.api.deps import get_current_admin_api
+from app.core.database import get_db
+from app.services.marketplace_product_service import marketplace_product_service
+from models.database.user import User
+
+router = APIRouter(prefix="/products")
+logger = logging.getLogger(__name__)
+
+
+# ============================================================================
+# Pydantic Models
+# ============================================================================
+
+
+class AdminProductListItem(BaseModel):
+    """Product item for admin list view."""
+
+    id: int
+    marketplace_product_id: str
+    title: str | None = None
+    brand: str | None = None
+    gtin: str | None = None
+    sku: str | None = None
+    marketplace: str | None = None
+    vendor_name: str | None = None
+    price_numeric: float | None = None
+    currency: str | None = None
+    availability: str | None = None
+    image_link: str | None = None
+    is_active: bool | None = None
+    is_digital: bool | None = None
+    product_type_enum: str | None = None
+    created_at: str | None = None
+    updated_at: str | None = None
+
+    class Config:
+        from_attributes = True
+
+
+class AdminProductListResponse(BaseModel):
+    """Paginated product list response for admin."""
+
+    products: list[AdminProductListItem]
+    total: int
+    skip: int
+    limit: int
+
+
+class AdminProductStats(BaseModel):
+    """Product statistics for admin dashboard."""
+
+    total: int
+    active: int
+    inactive: int
+    digital: int
+    physical: int
+    by_marketplace: dict[str, int]
+
+
+class MarketplacesResponse(BaseModel):
+    """Response for marketplaces list."""
+
+    marketplaces: list[str]
+
+
+class VendorsResponse(BaseModel):
+    """Response for vendors list."""
+
+    vendors: list[str]
+
+
+class CopyToVendorRequest(BaseModel):
+    """Request body for copying products to vendor catalog."""
+
+    marketplace_product_ids: list[int]
+    vendor_id: int
+    skip_existing: bool = True
+
+
+class CopyToVendorResponse(BaseModel):
+    """Response from copy to vendor operation."""
+
+    copied: int
+    skipped: int
+    failed: int
+    details: list[dict] | None = None
+
+
+class AdminProductDetail(BaseModel):
+    """Detailed product information for admin view."""
+
+    id: int
+    marketplace_product_id: str | None = None
+    gtin: str | None = None
+    mpn: str | None = None
+    sku: str | None = None
+    brand: str | None = None
+    marketplace: str | None = None
+    vendor_name: str | None = None
+    source_url: str | None = None
+    price: str | None = None
+    price_numeric: float | None = None
+    sale_price: str | None = None
+    sale_price_numeric: float | None = None
+    currency: str | None = None
+    availability: str | None = None
+    condition: str | None = None
+    image_link: str | None = None
+    additional_images: list | None = None
+    is_active: bool | None = None
+    is_digital: bool | None = None
+    product_type_enum: str | None = None
+    platform: str | None = None
+    google_product_category: str | None = None
+    category_path: str | None = None
+    color: str | None = None
+    size: str | None = None
+    weight: float | None = None
+    weight_unit: str | None = None
+    translations: dict | None = None
+    created_at: str | None = None
+    updated_at: str | None = None
+
+
+# ============================================================================
+# Endpoints
+# ============================================================================
+
+
+@router.get("", response_model=AdminProductListResponse)
+def get_products(
+    skip: int = Query(0, ge=0),
+    limit: int = Query(50, ge=1, le=500),
+    search: str | None = Query(None, description="Search by title, GTIN, SKU, or brand"),
+    marketplace: str | None = Query(None, description="Filter by marketplace"),
+    vendor_name: str | None = Query(None, description="Filter by vendor name"),
+    availability: str | None = Query(None, description="Filter by availability"),
+    is_active: bool | None = Query(None, description="Filter by active status"),
+    is_digital: bool | None = Query(None, description="Filter by digital products"),
+    language: str = Query("en", description="Language for title lookup"),
+    db: Session = Depends(get_db),
+    current_admin: User = Depends(get_current_admin_api),
+):
+    """
+    Get all marketplace products with search and filtering.
+
+    This endpoint allows admins to browse the entire product catalog
+    imported from various marketplaces.
+    """
+    products, total = marketplace_product_service.get_admin_products(
+        db=db,
+        skip=skip,
+        limit=limit,
+        search=search,
+        marketplace=marketplace,
+        vendor_name=vendor_name,
+        availability=availability,
+        is_active=is_active,
+        is_digital=is_digital,
+        language=language,
+    )
+
+    return AdminProductListResponse(
+        products=[AdminProductListItem(**p) for p in products],
+        total=total,
+        skip=skip,
+        limit=limit,
+    )
+
+
+@router.get("/stats", response_model=AdminProductStats)
+def get_product_stats(
+    db: Session = Depends(get_db),
+    current_admin: User = Depends(get_current_admin_api),
+):
+    """Get product statistics for admin dashboard."""
+    stats = marketplace_product_service.get_admin_product_stats(db)
+    return AdminProductStats(**stats)
+
+
+@router.get("/marketplaces", response_model=MarketplacesResponse)
+def get_marketplaces(
+    db: Session = Depends(get_db),
+    current_admin: User = Depends(get_current_admin_api),
+):
+    """Get list of unique marketplaces in the product catalog."""
+    marketplaces = marketplace_product_service.get_marketplaces_list(db)
+    return MarketplacesResponse(marketplaces=marketplaces)
+
+
+@router.get("/vendors", response_model=VendorsResponse)
+def get_product_vendors(
+    db: Session = Depends(get_db),
+    current_admin: User = Depends(get_current_admin_api),
+):
+    """Get list of unique vendor names in the product catalog."""
+    vendors = marketplace_product_service.get_source_vendors_list(db)
+    return VendorsResponse(vendors=vendors)
+
+
+@router.post("/copy-to-vendor", response_model=CopyToVendorResponse)
+def copy_products_to_vendor(
+    request: CopyToVendorRequest,
+    db: Session = Depends(get_db),
+    current_admin: User = Depends(get_current_admin_api),
+):
+    """
+    Copy marketplace products to a vendor's catalog.
+
+    This endpoint allows admins to copy products from the master marketplace
+    product repository to any vendor's product catalog.
+
+    The copy creates a new Product entry linked to the MarketplaceProduct,
+    with default values that can be overridden by the vendor later.
+    """
+    result = marketplace_product_service.copy_to_vendor_catalog(
+        db=db,
+        marketplace_product_ids=request.marketplace_product_ids,
+        vendor_id=request.vendor_id,
+        skip_existing=request.skip_existing,
+    )
+    db.commit()  # ✅ ARCH: Commit at API level for transaction control
+    return CopyToVendorResponse(**result)
+
+
+@router.get("/{product_id}", response_model=AdminProductDetail)
+def get_product_detail(
+    product_id: int,
+    db: Session = Depends(get_db),
+    current_admin: User = Depends(get_current_admin_api),
+):
+    """Get detailed product information including all translations."""
+    product = marketplace_product_service.get_admin_product_detail(db, product_id)
+    return AdminProductDetail(**product)

app/api/v1/admin/vendor_products.py

@@ -0,0 +1,241 @@
+# app/api/v1/admin/vendor_products.py
+"""
+Admin vendor product catalog endpoints.
+
+Provides management of vendor-specific product catalogs:
+- Browse products in vendor catalogs
+- View product details with override info
+- Remove products from catalog
+"""
+
+import logging
+
+from fastapi import APIRouter, Depends, Query
+from pydantic import BaseModel
+from sqlalchemy.orm import Session
+
+from app.api.deps import get_current_admin_api
+from app.core.database import get_db
+from app.services.vendor_product_service import vendor_product_service
+from models.database.user import User
+
+router = APIRouter(prefix="/vendor-products")
+logger = logging.getLogger(__name__)
+
+
+# ============================================================================
+# Pydantic Models
+# ============================================================================
+
+
+class VendorProductListItem(BaseModel):
+    """Product item for vendor catalog list view."""
+
+    id: int
+    vendor_id: int
+    vendor_name: str | None = None
+    vendor_code: str | None = None
+    marketplace_product_id: int
+    vendor_sku: str | None = None
+    title: str | None = None
+    brand: str | None = None
+    effective_price: float | None = None
+    effective_currency: str | None = None
+    is_active: bool | None = None
+    is_featured: bool | None = None
+    is_digital: bool | None = None
+    image_url: str | None = None
+    source_marketplace: str | None = None
+    source_vendor: str | None = None
+    created_at: str | None = None
+    updated_at: str | None = None
+
+    class Config:
+        from_attributes = True
+
+
+class VendorProductListResponse(BaseModel):
+    """Paginated vendor product list response."""
+
+    products: list[VendorProductListItem]
+    total: int
+    skip: int
+    limit: int
+
+
+class VendorProductStats(BaseModel):
+    """Vendor product statistics."""
+
+    total: int
+    active: int
+    inactive: int
+    featured: int
+    digital: int
+    physical: int
+    by_vendor: dict[str, int]
+
+
+class CatalogVendor(BaseModel):
+    """Vendor with products in catalog."""
+
+    id: int
+    name: str
+    vendor_code: str
+
+
+class CatalogVendorsResponse(BaseModel):
+    """Response for catalog vendors list."""
+
+    vendors: list[CatalogVendor]
+
+
+class VendorProductDetail(BaseModel):
+    """Detailed vendor product information."""
+
+    id: int
+    vendor_id: int
+    vendor_name: str | None = None
+    vendor_code: str | None = None
+    marketplace_product_id: int
+    vendor_sku: str | None = None
+    # Override info from get_override_info()
+    price: float | None = None
+    price_overridden: bool | None = None
+    price_source: float | None = None
+    sale_price: float | None = None
+    sale_price_overridden: bool | None = None
+    sale_price_source: float | None = None
+    currency: str | None = None
+    currency_overridden: bool | None = None
+    currency_source: str | None = None
+    brand: str | None = None
+    brand_overridden: bool | None = None
+    brand_source: str | None = None
+    condition: str | None = None
+    condition_overridden: bool | None = None
+    condition_source: str | None = None
+    availability: str | None = None
+    availability_overridden: bool | None = None
+    availability_source: str | None = None
+    primary_image_url: str | None = None
+    primary_image_url_overridden: bool | None = None
+    primary_image_url_source: str | None = None
+    is_digital: bool | None = None
+    product_type: str | None = None
+    # Vendor-specific fields
+    is_featured: bool | None = None
+    is_active: bool | None = None
+    display_order: int | None = None
+    min_quantity: int | None = None
+    max_quantity: int | None = None
+    # Supplier tracking
+    supplier: str | None = None
+    supplier_product_id: str | None = None
+    supplier_cost: float | None = None
+    margin_percent: float | None = None
+    # Digital fulfillment
+    download_url: str | None = None
+    license_type: str | None = None
+    fulfillment_email_template: str | None = None
+    # Source info
+    source_marketplace: str | None = None
+    source_vendor: str | None = None
+    source_gtin: str | None = None
+    source_sku: str | None = None
+    # Translations
+    marketplace_translations: dict | None = None
+    vendor_translations: dict | None = None
+    # Timestamps
+    created_at: str | None = None
+    updated_at: str | None = None
+
+
+class RemoveProductResponse(BaseModel):
+    """Response from product removal."""
+
+    message: str
+
+
+# ============================================================================
+# Endpoints
+# ============================================================================
+
+
+@router.get("", response_model=VendorProductListResponse)
+def get_vendor_products(
+    skip: int = Query(0, ge=0),
+    limit: int = Query(50, ge=1, le=500),
+    search: str | None = Query(None, description="Search by title or SKU"),
+    vendor_id: int | None = Query(None, description="Filter by vendor"),
+    is_active: bool | None = Query(None, description="Filter by active status"),
+    is_featured: bool | None = Query(None, description="Filter by featured status"),
+    language: str = Query("en", description="Language for title lookup"),
+    db: Session = Depends(get_db),
+    current_admin: User = Depends(get_current_admin_api),
+):
+    """
+    Get all products in vendor catalogs with filtering.
+
+    This endpoint allows admins to browse products that have been
+    copied to vendor catalogs from the marketplace repository.
+    """
+    products, total = vendor_product_service.get_products(
+        db=db,
+        skip=skip,
+        limit=limit,
+        search=search,
+        vendor_id=vendor_id,
+        is_active=is_active,
+        is_featured=is_featured,
+        language=language,
+    )
+
+    return VendorProductListResponse(
+        products=[VendorProductListItem(**p) for p in products],
+        total=total,
+        skip=skip,
+        limit=limit,
+    )
+
+
+@router.get("/stats", response_model=VendorProductStats)
+def get_vendor_product_stats(
+    db: Session = Depends(get_db),
+    current_admin: User = Depends(get_current_admin_api),
+):
+    """Get vendor product statistics for admin dashboard."""
+    stats = vendor_product_service.get_product_stats(db)
+    return VendorProductStats(**stats)
+
+
+@router.get("/vendors", response_model=CatalogVendorsResponse)
+def get_catalog_vendors(
+    db: Session = Depends(get_db),
+    current_admin: User = Depends(get_current_admin_api),
+):
+    """Get list of vendors with products in their catalogs."""
+    vendors = vendor_product_service.get_catalog_vendors(db)
+    return CatalogVendorsResponse(vendors=[CatalogVendor(**v) for v in vendors])
+
+
+@router.get("/{product_id}", response_model=VendorProductDetail)
+def get_vendor_product_detail(
+    product_id: int,
+    db: Session = Depends(get_db),
+    current_admin: User = Depends(get_current_admin_api),
+):
+    """Get detailed vendor product information including override info."""
+    product = vendor_product_service.get_product_detail(db, product_id)
+    return VendorProductDetail(**product)
+
+
+@router.delete("/{product_id}", response_model=RemoveProductResponse)
+def remove_vendor_product(
+    product_id: int,
+    db: Session = Depends(get_db),
+    current_admin: User = Depends(get_current_admin_api),
+):
+    """Remove a product from vendor catalog."""
+    result = vendor_product_service.remove_product(db, product_id)
+    db.commit()  # ✅ ARCH: Commit at API level for transaction control
+    return RemoveProductResponse(**result)

app/exceptions/product.py

@@ -15,9 +15,7 @@ class ProductNotFoundException(ResourceNotFoundException):
     """Raised when a product is not found in vendor catalog."""
 
     def __init__(self, product_id: int, vendor_id: int | None = None):
-        details = {"product_id": product_id}
         if vendor_id:
-            details["vendor_id"] = vendor_id
             message = f"Product with ID '{product_id}' not found in vendor {vendor_id} catalog"
         else:
             message = f"Product with ID '{product_id}' not found"
@@ -27,8 +25,11 @@ class ProductNotFoundException(ResourceNotFoundException):
             identifier=str(product_id),
             message=message,
             error_code="PRODUCT_NOT_FOUND",
-            details=details,
         )
+        # Add extra details after init
+        self.details["product_id"] = product_id
+        if vendor_id:
+            self.details["vendor_id"] = vendor_id
 
 
 class ProductAlreadyExistsException(ConflictException):

app/routes/admin_pages.py

@@ -25,6 +25,8 @@ Routes:
 - GET /users         → User management page (auth required)
 - GET /customers     → Customer management page (auth required)
 - GET /imports       → Import history page (auth required)
+- GET /marketplace-products → Marketplace products catalog (auth required)
+- GET /vendor-products → Vendor products catalog (auth required)
 - GET /settings      → Settings page (auth required)
 - GET /platform-homepage → Platform homepage manager (auth required)
 - GET /content-pages → Content pages list (auth required)
@@ -517,6 +519,99 @@ async def admin_marketplace_page(
     )
 
 
+# ============================================================================
+# PRODUCT CATALOG ROUTES
+# ============================================================================
+
+
+@router.get("/marketplace-products", response_class=HTMLResponse, include_in_schema=False)
+async def admin_marketplace_products_page(
+    request: Request,
+    current_user: User = Depends(get_current_admin_from_cookie_or_header),
+    db: Session = Depends(get_db),
+):
+    """
+    Render marketplace products page.
+    Browse the master product repository imported from external sources.
+    """
+    return templates.TemplateResponse(
+        "admin/marketplace-products.html",
+        {
+            "request": request,
+            "user": current_user,
+        },
+    )
+
+
+@router.get(
+    "/marketplace-products/{product_id}",
+    response_class=HTMLResponse,
+    include_in_schema=False,
+)
+async def admin_marketplace_product_detail_page(
+    request: Request,
+    product_id: int = Path(..., description="Marketplace Product ID"),
+    current_user: User = Depends(get_current_admin_from_cookie_or_header),
+    db: Session = Depends(get_db),
+):
+    """
+    Render marketplace product detail page.
+    Shows full product information from the master repository.
+    """
+    return templates.TemplateResponse(
+        "admin/marketplace-product-detail.html",
+        {
+            "request": request,
+            "user": current_user,
+            "product_id": product_id,
+        },
+    )
+
+
+@router.get("/vendor-products", response_class=HTMLResponse, include_in_schema=False)
+async def admin_vendor_products_page(
+    request: Request,
+    current_user: User = Depends(get_current_admin_from_cookie_or_header),
+    db: Session = Depends(get_db),
+):
+    """
+    Render vendor products catalog page.
+    Browse vendor-specific product catalogs with override capability.
+    """
+    return templates.TemplateResponse(
+        "admin/vendor-products.html",
+        {
+            "request": request,
+            "user": current_user,
+        },
+    )
+
+
+@router.get(
+    "/vendor-products/{product_id}",
+    response_class=HTMLResponse,
+    include_in_schema=False,
+)
+async def admin_vendor_product_detail_page(
+    request: Request,
+    product_id: int = Path(..., description="Vendor Product ID"),
+    current_user: User = Depends(get_current_admin_from_cookie_or_header),
+    db: Session = Depends(get_db),
+):
+    """
+    Render vendor product detail page.
+    Shows full product information with vendor-specific overrides.
+    """
+    return templates.TemplateResponse(
+        "admin/vendor-product-detail.html",
+        {
+            "request": request,
+            "user": current_user,
+            "product_id": product_id,
+        },
+    )
+
+
 # ============================================================================
 # SETTINGS ROUTES
 # ============================================================================

app/services/marketplace_product_service.py

@@ -603,5 +603,301 @@ class MarketplaceProductService:
         return normalized
 
 
+    # =========================================================================
+    # Admin-specific methods for marketplace product management
+    # =========================================================================
+
+    def get_admin_products(
+        self,
+        db: Session,
+        skip: int = 0,
+        limit: int = 50,
+        search: str | None = None,
+        marketplace: str | None = None,
+        vendor_name: str | None = None,
+        availability: str | None = None,
+        is_active: bool | None = None,
+        is_digital: bool | None = None,
+        language: str = "en",
+    ) -> tuple[list[dict], int]:
+        """
+        Get marketplace products for admin with search and filtering.
+
+        Returns:
+            Tuple of (products list as dicts, total count)
+        """
+        query = db.query(MarketplaceProduct).options(
+            joinedload(MarketplaceProduct.translations)
+        )
+
+        if search:
+            search_term = f"%{search}%"
+            query = query.outerjoin(MarketplaceProductTranslation).filter(
+                or_(
+                    MarketplaceProductTranslation.title.ilike(search_term),
+                    MarketplaceProduct.gtin.ilike(search_term),
+                    MarketplaceProduct.sku.ilike(search_term),
+                    MarketplaceProduct.brand.ilike(search_term),
+                    MarketplaceProduct.mpn.ilike(search_term),
+                    MarketplaceProduct.marketplace_product_id.ilike(search_term),
+                )
+            ).distinct()
+
+        if marketplace:
+            query = query.filter(MarketplaceProduct.marketplace == marketplace)
+
+        if vendor_name:
+            query = query.filter(MarketplaceProduct.vendor_name.ilike(f"%{vendor_name}%"))
+
+        if availability:
+            query = query.filter(MarketplaceProduct.availability == availability)
+
+        if is_active is not None:
+            query = query.filter(MarketplaceProduct.is_active == is_active)
+
+        if is_digital is not None:
+            query = query.filter(MarketplaceProduct.is_digital == is_digital)
+
+        total = query.count()
+
+        products = (
+            query.order_by(MarketplaceProduct.updated_at.desc())
+            .offset(skip)
+            .limit(limit)
+            .all()
+        )
+
+        result = []
+        for product in products:
+            title = product.get_title(language)
+            result.append(self._build_admin_product_item(product, title))
+
+        return result, total
+
+    def get_admin_product_stats(self, db: Session) -> dict:
+        """Get product statistics for admin dashboard."""
+        from sqlalchemy import func
+
+        total = db.query(func.count(MarketplaceProduct.id)).scalar() or 0
+
+        active = (
+            db.query(func.count(MarketplaceProduct.id))
+            .filter(MarketplaceProduct.is_active == True)  # noqa: E712
+            .scalar()
+            or 0
+        )
+        inactive = total - active
+
+        digital = (
+            db.query(func.count(MarketplaceProduct.id))
+            .filter(MarketplaceProduct.is_digital == True)  # noqa: E712
+            .scalar()
+            or 0
+        )
+        physical = total - digital
+
+        marketplace_counts = (
+            db.query(
+                MarketplaceProduct.marketplace,
+                func.count(MarketplaceProduct.id),
+            )
+            .group_by(MarketplaceProduct.marketplace)
+            .all()
+        )
+        by_marketplace = {mp or "unknown": count for mp, count in marketplace_counts}
+
+        return {
+            "total": total,
+            "active": active,
+            "inactive": inactive,
+            "digital": digital,
+            "physical": physical,
+            "by_marketplace": by_marketplace,
+        }
+
+    def get_marketplaces_list(self, db: Session) -> list[str]:
+        """Get list of unique marketplaces in the product catalog."""
+        marketplaces = (
+            db.query(MarketplaceProduct.marketplace)
+            .distinct()
+            .filter(MarketplaceProduct.marketplace.isnot(None))
+            .all()
+        )
+        return [m[0] for m in marketplaces if m[0]]
+
+    def get_source_vendors_list(self, db: Session) -> list[str]:
+        """Get list of unique vendor names in the product catalog."""
+        vendors = (
+            db.query(MarketplaceProduct.vendor_name)
+            .distinct()
+            .filter(MarketplaceProduct.vendor_name.isnot(None))
+            .all()
+        )
+        return [v[0] for v in vendors if v[0]]
+
+    def get_admin_product_detail(self, db: Session, product_id: int) -> dict:
+        """Get detailed product information by database ID."""
+        product = (
+            db.query(MarketplaceProduct)
+            .options(joinedload(MarketplaceProduct.translations))
+            .filter(MarketplaceProduct.id == product_id)
+            .first()
+        )
+
+        if not product:
+            raise MarketplaceProductNotFoundException(
+                f"Marketplace product with ID {product_id} not found"
+            )
+
+        translations = {}
+        for t in product.translations:
+            translations[t.language] = {
+                "title": t.title,
+                "description": t.description,
+                "short_description": t.short_description,
+            }
+
+        return {
+            "id": product.id,
+            "marketplace_product_id": product.marketplace_product_id,
+            "gtin": product.gtin,
+            "mpn": product.mpn,
+            "sku": product.sku,
+            "brand": product.brand,
+            "marketplace": product.marketplace,
+            "vendor_name": product.vendor_name,
+            "source_url": product.source_url,
+            "price": product.price,
+            "price_numeric": product.price_numeric,
+            "sale_price": product.sale_price,
+            "sale_price_numeric": product.sale_price_numeric,
+            "currency": product.currency,
+            "availability": product.availability,
+            "condition": product.condition,
+            "image_link": product.image_link,
+            "additional_images": product.additional_images,
+            "is_active": product.is_active,
+            "is_digital": product.is_digital,
+            "product_type_enum": product.product_type_enum,
+            "platform": product.platform,
+            "google_product_category": product.google_product_category,
+            "category_path": product.category_path,
+            "color": product.color,
+            "size": product.size,
+            "weight": product.weight,
+            "weight_unit": product.weight_unit,
+            "translations": translations,
+            "created_at": product.created_at.isoformat() if product.created_at else None,
+            "updated_at": product.updated_at.isoformat() if product.updated_at else None,
+        }
+
+    def copy_to_vendor_catalog(
+        self,
+        db: Session,
+        marketplace_product_ids: list[int],
+        vendor_id: int,
+        skip_existing: bool = True,
+    ) -> dict:
+        """
+        Copy marketplace products to a vendor's catalog.
+
+        Returns:
+            Dict with copied, skipped, failed counts and details
+        """
+        from models.database.product import Product
+        from models.database.vendor import Vendor
+
+        vendor = db.query(Vendor).filter(Vendor.id == vendor_id).first()
+        if not vendor:
+            from app.exceptions import VendorNotFoundException
+            raise VendorNotFoundException(str(vendor_id), identifier_type="id")
+
+        marketplace_products = (
+            db.query(MarketplaceProduct)
+            .filter(MarketplaceProduct.id.in_(marketplace_product_ids))
+            .all()
+        )
+
+        if not marketplace_products:
+            raise MarketplaceProductNotFoundException("No marketplace products found")
+
+        copied = 0
+        skipped = 0
+        failed = 0
+        details = []
+
+        for mp in marketplace_products:
+            try:
+                existing = (
+                    db.query(Product)
+                    .filter(
+                        Product.vendor_id == vendor_id,
+                        Product.marketplace_product_id == mp.id,
+                    )
+                    .first()
+                )
+
+                if existing:
+                    skipped += 1
+                    details.append({
+                        "id": mp.id,
+                        "status": "skipped",
+                        "reason": "Already exists in catalog",
+                    })
+                    continue
+
+                product = Product(
+                    vendor_id=vendor_id,
+                    marketplace_product_id=mp.id,
+                    is_active=True,
+                    is_featured=False,
+                )
+
+                db.add(product)
+                copied += 1
+                details.append({"id": mp.id, "status": "copied"})
+
+            except Exception as e:
+                logger.error(f"Failed to copy product {mp.id}: {str(e)}")
+                failed += 1
+                details.append({"id": mp.id, "status": "failed", "reason": str(e)})
+
+        db.flush()
+
+        logger.info(
+            f"Copied {copied} products to vendor {vendor.name} "
+            f"(skipped: {skipped}, failed: {failed})"
+        )
+
+        return {
+            "copied": copied,
+            "skipped": skipped,
+            "failed": failed,
+            "details": details if len(details) <= 100 else None,
+        }
+
+    def _build_admin_product_item(self, product: MarketplaceProduct, title: str | None) -> dict:
+        """Build a product list item dict for admin view."""
+        return {
+            "id": product.id,
+            "marketplace_product_id": product.marketplace_product_id,
+            "title": title,
+            "brand": product.brand,
+            "gtin": product.gtin,
+            "sku": product.sku,
+            "marketplace": product.marketplace,
+            "vendor_name": product.vendor_name,
+            "price_numeric": product.price_numeric,
+            "currency": product.currency,
+            "availability": product.availability,
+            "image_link": product.image_link,
+            "is_active": product.is_active,
+            "is_digital": product.is_digital,
+            "product_type_enum": product.product_type_enum,
+            "created_at": product.created_at.isoformat() if product.created_at else None,
+            "updated_at": product.updated_at.isoformat() if product.updated_at else None,
+        }
+
+
 # Create service instance
 marketplace_product_service = MarketplaceProductService()

app/services/vendor_product_service.py

@@ -0,0 +1,266 @@
+# app/services/vendor_product_service.py
+"""
+Vendor product service for managing vendor-specific product catalogs.
+
+This module provides:
+- Vendor product catalog browsing
+- Product search and filtering
+- Product statistics
+- Product removal from catalogs
+"""
+
+import logging
+
+from sqlalchemy import func
+from sqlalchemy.orm import Session, joinedload
+
+from app.exceptions import ProductNotFoundException
+from models.database.product import Product
+from models.database.vendor import Vendor
+
+logger = logging.getLogger(__name__)
+
+
+class VendorProductService:
+    """Service for vendor product catalog operations."""
+
+    def get_products(
+        self,
+        db: Session,
+        skip: int = 0,
+        limit: int = 50,
+        search: str | None = None,
+        vendor_id: int | None = None,
+        is_active: bool | None = None,
+        is_featured: bool | None = None,
+        language: str = "en",
+    ) -> tuple[list[dict], int]:
+        """
+        Get vendor products with search and filtering.
+
+        Returns:
+            Tuple of (products list as dicts, total count)
+        """
+        query = (
+            db.query(Product)
+            .join(Vendor, Product.vendor_id == Vendor.id)
+            .options(
+                joinedload(Product.vendor),
+                joinedload(Product.marketplace_product),
+            )
+        )
+
+        if search:
+            search_term = f"%{search}%"
+            query = query.filter(Product.vendor_sku.ilike(search_term))
+
+        if vendor_id:
+            query = query.filter(Product.vendor_id == vendor_id)
+
+        if is_active is not None:
+            query = query.filter(Product.is_active == is_active)
+
+        if is_featured is not None:
+            query = query.filter(Product.is_featured == is_featured)
+
+        total = query.count()
+
+        products = (
+            query.order_by(Product.updated_at.desc())
+            .offset(skip)
+            .limit(limit)
+            .all()
+        )
+
+        result = []
+        for product in products:
+            result.append(self._build_product_list_item(product, language))
+
+        return result, total
+
+    def get_product_stats(self, db: Session) -> dict:
+        """Get vendor product statistics for admin dashboard."""
+        total = db.query(func.count(Product.id)).scalar() or 0
+
+        active = (
+            db.query(func.count(Product.id))
+            .filter(Product.is_active == True)  # noqa: E712
+            .scalar()
+            or 0
+        )
+        inactive = total - active
+
+        featured = (
+            db.query(func.count(Product.id))
+            .filter(Product.is_featured == True)  # noqa: E712
+            .scalar()
+            or 0
+        )
+
+        # Digital/physical counts
+        digital = (
+            db.query(func.count(Product.id))
+            .join(Product.marketplace_product)
+            .filter(Product.marketplace_product.has(is_digital=True))
+            .scalar()
+            or 0
+        )
+        physical = total - digital
+
+        # Count by vendor
+        vendor_counts = (
+            db.query(
+                Vendor.name,
+                func.count(Product.id),
+            )
+            .join(Vendor, Product.vendor_id == Vendor.id)
+            .group_by(Vendor.name)
+            .all()
+        )
+        by_vendor = {name or "unknown": count for name, count in vendor_counts}
+
+        return {
+            "total": total,
+            "active": active,
+            "inactive": inactive,
+            "featured": featured,
+            "digital": digital,
+            "physical": physical,
+            "by_vendor": by_vendor,
+        }
+
+    def get_catalog_vendors(self, db: Session) -> list[dict]:
+        """Get list of vendors with products in their catalogs."""
+        vendors = (
+            db.query(Vendor.id, Vendor.name, Vendor.vendor_code)
+            .join(Product, Vendor.id == Product.vendor_id)
+            .distinct()
+            .all()
+        )
+        return [
+            {"id": v.id, "name": v.name, "vendor_code": v.vendor_code}
+            for v in vendors
+        ]
+
+    def get_product_detail(self, db: Session, product_id: int) -> dict:
+        """Get detailed vendor product information including override info."""
+        product = (
+            db.query(Product)
+            .options(
+                joinedload(Product.vendor),
+                joinedload(Product.marketplace_product),
+                joinedload(Product.translations),
+            )
+            .filter(Product.id == product_id)
+            .first()
+        )
+
+        if not product:
+            raise ProductNotFoundException(product_id)
+
+        mp = product.marketplace_product
+        override_info = product.get_override_info()
+
+        # Get marketplace product translations
+        mp_translations = {}
+        if mp:
+            for t in mp.translations:
+                mp_translations[t.language] = {
+                    "title": t.title,
+                    "description": t.description,
+                    "short_description": t.short_description,
+                }
+
+        # Get vendor translations (overrides)
+        vendor_translations = {}
+        for t in product.translations:
+            vendor_translations[t.language] = {
+                "title": t.title,
+                "description": t.description,
+            }
+
+        return {
+            "id": product.id,
+            "vendor_id": product.vendor_id,
+            "vendor_name": product.vendor.name if product.vendor else None,
+            "vendor_code": product.vendor.vendor_code if product.vendor else None,
+            "marketplace_product_id": product.marketplace_product_id,
+            "vendor_sku": product.vendor_sku,
+            # Override info
+            **override_info,
+            # Vendor-specific fields
+            "is_featured": product.is_featured,
+            "is_active": product.is_active,
+            "display_order": product.display_order,
+            "min_quantity": product.min_quantity,
+            "max_quantity": product.max_quantity,
+            # Supplier tracking
+            "supplier": product.supplier,
+            "supplier_product_id": product.supplier_product_id,
+            "supplier_cost": product.supplier_cost,
+            "margin_percent": product.margin_percent,
+            # Digital fulfillment
+            "download_url": product.download_url,
+            "license_type": product.license_type,
+            "fulfillment_email_template": product.fulfillment_email_template,
+            # Source info from marketplace product
+            "source_marketplace": mp.marketplace if mp else None,
+            "source_vendor": mp.vendor_name if mp else None,
+            "source_gtin": mp.gtin if mp else None,
+            "source_sku": mp.sku if mp else None,
+            # Translations
+            "marketplace_translations": mp_translations,
+            "vendor_translations": vendor_translations,
+            # Timestamps
+            "created_at": product.created_at.isoformat() if product.created_at else None,
+            "updated_at": product.updated_at.isoformat() if product.updated_at else None,
+        }
+
+    def remove_product(self, db: Session, product_id: int) -> dict:
+        """Remove a product from vendor catalog."""
+        product = db.query(Product).filter(Product.id == product_id).first()
+
+        if not product:
+            raise ProductNotFoundException(product_id)
+
+        vendor_name = product.vendor.name if product.vendor else "Unknown"
+        db.delete(product)
+        db.flush()
+
+        logger.info(f"Removed product {product_id} from vendor {vendor_name} catalog")
+
+        return {"message": f"Product removed from {vendor_name}'s catalog"}
+
+    def _build_product_list_item(self, product: Product, language: str) -> dict:
+        """Build a product list item dict."""
+        mp = product.marketplace_product
+
+        # Get title from marketplace product translations
+        title = None
+        if mp:
+            title = mp.get_title(language)
+
+        return {
+            "id": product.id,
+            "vendor_id": product.vendor_id,
+            "vendor_name": product.vendor.name if product.vendor else None,
+            "vendor_code": product.vendor.vendor_code if product.vendor else None,
+            "marketplace_product_id": product.marketplace_product_id,
+            "vendor_sku": product.vendor_sku,
+            "title": title,
+            "brand": product.effective_brand,
+            "effective_price": product.effective_price,
+            "effective_currency": product.effective_currency,
+            "is_active": product.is_active,
+            "is_featured": product.is_featured,
+            "is_digital": product.is_digital,
+            "image_url": product.effective_primary_image_url,
+            "source_marketplace": mp.marketplace if mp else None,
+            "source_vendor": mp.vendor_name if mp else None,
+            "created_at": product.created_at.isoformat() if product.created_at else None,
+            "updated_at": product.updated_at.isoformat() if product.updated_at else None,
+        }
+
+
+# Create service instance
+vendor_product_service = VendorProductService()

app/templates/admin/marketplace-product-detail.html

@@ -0,0 +1,333 @@
+{# app/templates/admin/marketplace-product-detail.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/headers.html' import detail_page_header %}
+{% from 'shared/macros/modals.html' import modal_simple %}
+
+{% block title %}Marketplace Product Details{% endblock %}
+
+{% block alpine_data %}adminMarketplaceProductDetail(){% endblock %}
+
+{% block content %}
+{% call detail_page_header("product?.title || 'Product Details'", '/admin/marketplace-products', subtitle_show='product') %}
+    <span x-text="product?.marketplace || 'Unknown'"></span>
+    <span class="text-gray-400 mx-2">|</span>
+    <span x-text="'ID: ' + productId"></span>
+{% endcall %}
+
+{{ loading_state('Loading product details...') }}
+
+{{ error_state('Error loading product') }}
+
+<!-- Product Details -->
+<div x-show="!loading && product">
+    <!-- Quick Actions Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Quick Actions
+        </h3>
+        <div class="flex flex-wrap items-center gap-3">
+            <button
+                @click="openCopyModal()"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
+                <span x-html="$icon('duplicate', 'w-4 h-4 mr-2')"></span>
+                Copy to Vendor Catalog
+            </button>
+            <a
+                x-show="product?.source_url"
+                :href="product?.source_url"
+                target="_blank"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600">
+                <span x-html="$icon('external-link', 'w-4 h-4 mr-2')"></span>
+                View Source
+            </a>
+        </div>
+    </div>
+
+    <!-- Product Header with Image -->
+    <div class="grid gap-6 mb-8 md:grid-cols-3">
+        <!-- Product Image -->
+        <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <div class="aspect-square bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden">
+                <template x-if="product?.image_link">
+                    <img :src="product?.image_link" :alt="product?.title" class="w-full h-full object-contain" />
+                </template>
+                <template x-if="!product?.image_link">
+                    <div class="w-full h-full flex items-center justify-center">
+                        <span x-html="$icon('photograph', 'w-16 h-16 text-gray-300')"></span>
+                    </div>
+                </template>
+            </div>
+            <!-- Additional Images -->
+            <div x-show="product?.additional_images?.length > 0" class="mt-4">
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Additional Images</p>
+                <div class="grid grid-cols-4 gap-2">
+                    <template x-for="(img, index) in (product?.additional_images || [])" :key="index">
+                        <div class="aspect-square bg-gray-100 dark:bg-gray-700 rounded overflow-hidden">
+                            <img :src="img" :alt="'Image ' + (index + 1)" class="w-full h-full object-cover" />
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+
+        <!-- Product Info -->
+        <div class="md:col-span-2 space-y-6">
+            <!-- Basic Info Card -->
+            <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Product Information
+                </h3>
+                <div class="grid gap-4 md:grid-cols-2">
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Brand</p>
+                        <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.brand || 'No brand'">-</p>
+                    </div>
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Product Type</p>
+                        <div class="flex items-center gap-2">
+                            <span class="px-2 py-1 text-xs font-semibold rounded-full"
+                                  :class="product?.is_digital ? 'text-blue-700 bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400' : 'text-orange-700 bg-orange-100 dark:bg-orange-900/30 dark:text-orange-400'"
+                                  x-text="product?.is_digital ? 'Digital' : 'Physical'">
+                            </span>
+                            <span x-show="product?.product_type_enum" class="text-xs text-gray-500" x-text="'(' + product?.product_type_enum + ')'"></span>
+                        </div>
+                    </div>
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Condition</p>
+                        <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.condition || 'Not specified'">-</p>
+                    </div>
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Status</p>
+                        <span class="px-2 py-1 text-xs font-semibold rounded-full"
+                              :class="product?.is_active ? 'text-green-700 bg-green-100 dark:bg-green-900/30 dark:text-green-400' : 'text-red-700 bg-red-100 dark:bg-red-900/30 dark:text-red-400'"
+                              x-text="product?.is_active ? 'Active' : 'Inactive'">
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Pricing Card -->
+            <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Pricing
+                </h3>
+                <div class="grid gap-4 md:grid-cols-3">
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Price</p>
+                        <p class="text-lg font-bold text-gray-700 dark:text-gray-200" x-text="formatPrice(product?.price_numeric, product?.currency)">-</p>
+                    </div>
+                    <div x-show="product?.sale_price_numeric">
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Sale Price</p>
+                        <p class="text-lg font-bold text-green-600 dark:text-green-400" x-text="formatPrice(product?.sale_price_numeric, product?.currency)">-</p>
+                    </div>
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Availability</p>
+                        <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.availability || 'Not specified'">-</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Identifiers Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Product Identifiers
+        </h3>
+        <div class="grid gap-4 md:grid-cols-4">
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Marketplace ID</p>
+                <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.marketplace_product_id || '-'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">GTIN/EAN</p>
+                <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.gtin || '-'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">MPN</p>
+                <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.mpn || '-'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">SKU</p>
+                <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.sku || '-'">-</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Source Information Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Source Information
+        </h3>
+        <div class="grid gap-4 md:grid-cols-3">
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Marketplace</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.marketplace || 'Unknown'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Source Vendor</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.vendor_name || 'Unknown'">-</p>
+            </div>
+            <div x-show="product?.platform">
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Platform</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.platform">-</p>
+            </div>
+        </div>
+        <div x-show="product?.source_url" class="mt-4">
+            <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-1">Source URL</p>
+            <a :href="product?.source_url" target="_blank" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 break-all" x-text="product?.source_url">-</a>
+        </div>
+    </div>
+
+    <!-- Category Information -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800" x-show="product?.google_product_category || product?.category_path">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Categories
+        </h3>
+        <div class="space-y-3">
+            <div x-show="product?.google_product_category">
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Google Product Category</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.google_product_category">-</p>
+            </div>
+            <div x-show="product?.category_path">
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Category Path</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.category_path">-</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Physical Attributes -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800" x-show="product?.color || product?.size || product?.weight">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Physical Attributes
+        </h3>
+        <div class="grid gap-4 md:grid-cols-3">
+            <div x-show="product?.color">
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Color</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.color">-</p>
+            </div>
+            <div x-show="product?.size">
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Size</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.size">-</p>
+            </div>
+            <div x-show="product?.weight">
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Weight</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300">
+                    <span x-text="product?.weight"></span>
+                    <span x-text="product?.weight_unit || ''"></span>
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Translations Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800" x-show="product?.translations && Object.keys(product.translations).length > 0">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Translations
+        </h3>
+        <div class="space-y-6">
+            <template x-for="(trans, lang) in (product?.translations || {})" :key="lang">
+                <div class="border-b border-gray-200 dark:border-gray-700 pb-4 last:border-b-0 last:pb-0">
+                    <div class="flex items-center gap-2 mb-2">
+                        <span class="px-2 py-0.5 text-xs font-semibold uppercase bg-gray-100 dark:bg-gray-700 rounded" x-text="lang"></span>
+                    </div>
+                    <div class="space-y-2">
+                        <div>
+                            <p class="text-xs font-semibold text-gray-600 dark:text-gray-400">Title</p>
+                            <p class="text-sm text-gray-700 dark:text-gray-300" x-text="trans?.title || '-'">-</p>
+                        </div>
+                        <div x-show="trans?.short_description">
+                            <p class="text-xs font-semibold text-gray-600 dark:text-gray-400">Short Description</p>
+                            <p class="text-sm text-gray-700 dark:text-gray-300" x-text="trans?.short_description">-</p>
+                        </div>
+                        <div x-show="trans?.description">
+                            <p class="text-xs font-semibold text-gray-600 dark:text-gray-400">Description</p>
+                            <div class="text-sm text-gray-700 dark:text-gray-300 prose prose-sm dark:prose-invert max-w-none" x-html="trans?.description || '-'"></div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+
+    <!-- Timestamps -->
+    <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Record Information
+        </h3>
+        <div class="grid gap-4 md:grid-cols-2">
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Created At</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="formatDate(product?.created_at)">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Last Updated</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="formatDate(product?.updated_at)">-</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Copy to Vendor Modal -->
+{% call modal_simple('copyToVendorModal', 'Copy to Vendor Catalog', show_var='showCopyModal', size='md') %}
+<div class="space-y-4">
+    <p class="text-sm text-gray-600 dark:text-gray-400">
+        Copy this product to a vendor's catalog.
+    </p>
+
+    <!-- Target Vendor Selection -->
+    <div>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Target Vendor <span class="text-red-500">*</span>
+        </label>
+        <select
+            x-model="copyForm.vendor_id"
+            class="w-full px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+        >
+            <option value="">Select a vendor...</option>
+            <template x-for="vendor in targetVendors" :key="vendor.id">
+                <option :value="vendor.id" x-text="vendor.name + ' (' + vendor.vendor_code + ')'"></option>
+            </template>
+        </select>
+        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+            The product will be copied to this vendor's catalog
+        </p>
+    </div>
+
+    <!-- Options -->
+    <div class="space-y-2">
+        <label class="flex items-center">
+            <input
+                type="checkbox"
+                x-model="copyForm.skip_existing"
+                class="rounded border-gray-300 dark:border-gray-600 text-purple-600 focus:ring-purple-500"
+            />
+            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Skip if already exists in catalog</span>
+        </label>
+    </div>
+
+    <!-- Actions -->
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showCopyModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >
+            Cancel
+        </button>
+        <button
+            @click="executeCopyToVendor()"
+            :disabled="!copyForm.vendor_id || copying"
+            class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+            <span x-show="copying" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
+            <span x-text="copying ? 'Copying...' : 'Copy Product'"></span>
+        </button>
+    </div>
+</div>
+{% endcall %}
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', path='admin/js/marketplace-product-detail.js') }}"></script>
+{% endblock %}

app/templates/admin/marketplace-products.html

@@ -0,0 +1,413 @@
+{# app/templates/admin/marketplace-products.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/pagination.html' import pagination %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
+{% from 'shared/macros/modals.html' import modal_simple %}
+
+{% block title %}Marketplace Products{% endblock %}
+
+{% block alpine_data %}adminMarketplaceProducts(){% endblock %}
+
+{% block content %}
+{{ page_header('Marketplace Products', subtitle='Master product repository - Browse all imported products from external sources') }}
+
+{{ loading_state('Loading products...') }}
+
+{{ error_state('Error loading products') }}
+
+<!-- Stats Cards -->
+<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-5">
+    <!-- Card: Total Products -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
+            <span x-html="$icon('cube', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Total Products
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Active Products -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
+            <span x-html="$icon('check-circle', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Active
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.active || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Inactive Products -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-red-500 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-500">
+            <span x-html="$icon('x-circle', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Inactive
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.inactive || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Digital Products -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
+            <span x-html="$icon('code', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Digital
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.digital || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Physical Products -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
+            <span x-html="$icon('truck', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Physical
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.physical || 0">
+                0
+            </p>
+        </div>
+    </div>
+</div>
+
+<!-- Search and Filters Bar -->
+<div x-show="!loading" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+        <!-- Search Input -->
+        <div class="flex-1 max-w-xl">
+            <div class="relative">
+                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
+                </span>
+                <input
+                    type="text"
+                    x-model="filters.search"
+                    @input="debouncedSearch()"
+                    placeholder="Search by title, GTIN, SKU, or brand..."
+                    class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
+                >
+            </div>
+        </div>
+
+        <!-- Filters -->
+        <div class="flex flex-wrap gap-3">
+            <!-- Marketplace Filter -->
+            <select
+                x-model="filters.marketplace"
+                @change="pagination.page = 1; loadProducts()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Marketplaces</option>
+                <template x-for="mp in marketplaces" :key="mp">
+                    <option :value="mp" x-text="mp"></option>
+                </template>
+            </select>
+
+            <!-- Source Vendor Filter -->
+            <select
+                x-model="filters.vendor_name"
+                @change="pagination.page = 1; loadProducts()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Source Vendors</option>
+                <template x-for="v in sourceVendors" :key="v">
+                    <option :value="v" x-text="v"></option>
+                </template>
+            </select>
+
+            <!-- Product Type Filter -->
+            <select
+                x-model="filters.is_digital"
+                @change="pagination.page = 1; loadProducts()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Types</option>
+                <option value="false">Physical</option>
+                <option value="true">Digital</option>
+            </select>
+
+            <!-- Status Filter -->
+            <select
+                x-model="filters.is_active"
+                @change="pagination.page = 1; loadProducts()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Status</option>
+                <option value="true">Active</option>
+                <option value="false">Inactive</option>
+            </select>
+
+            <!-- Refresh Button -->
+            <button
+                @click="refresh()"
+                class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                title="Refresh products"
+            >
+                <span x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
+                Refresh
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Bulk Actions Bar (shown when items selected) -->
+<div x-show="!loading && selectedProducts.length > 0"
+     x-transition
+     class="mb-4 p-4 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
+    <div class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+            <span class="text-sm font-medium text-purple-700 dark:text-purple-300">
+                <span x-text="selectedProducts.length"></span> product(s) selected
+            </span>
+            <button
+                @click="clearSelection()"
+                class="text-sm text-purple-600 dark:text-purple-400 hover:underline"
+            >
+                Clear selection
+            </button>
+        </div>
+        <div class="flex items-center gap-2">
+            <button
+                @click="openCopyToVendorModal()"
+                class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors"
+            >
+                <span x-html="$icon('duplicate', 'w-4 h-4 mr-2')"></span>
+                Copy to Vendor Catalog
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Products Table with Pagination -->
+<div x-show="!loading">
+    {% call table_wrapper() %}
+            <thead>
+                <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
+                    <th class="px-4 py-3 w-10">
+                        <input
+                            type="checkbox"
+                            @change="toggleSelectAll($event)"
+                            :checked="products.length > 0 && selectedProducts.length === products.length"
+                            :indeterminate="selectedProducts.length > 0 && selectedProducts.length < products.length"
+                            class="rounded border-gray-300 dark:border-gray-600 text-purple-600 focus:ring-purple-500"
+                        />
+                    </th>
+                    <th class="px-4 py-3">Product</th>
+                    <th class="px-4 py-3">Identifiers</th>
+                    <th class="px-4 py-3">Source</th>
+                    <th class="px-4 py-3">Price</th>
+                    <th class="px-4 py-3">Status</th>
+                    <th class="px-4 py-3">Actions</th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
+                <!-- Empty State -->
+                <template x-if="products.length === 0">
+                    <tr>
+                        <td colspan="7" class="px-4 py-8 text-center text-gray-600 dark:text-gray-400">
+                            <div class="flex flex-col items-center">
+                                <span x-html="$icon('database', 'w-12 h-12 mb-2 text-gray-300')"></span>
+                                <p class="font-medium">No marketplace products found</p>
+                                <p class="text-xs mt-1" x-text="filters.search || filters.marketplace || filters.is_active ? 'Try adjusting your search or filters' : 'Import products from the Import page'"></p>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+
+                <!-- Product Rows -->
+                <template x-for="product in products" :key="product.id">
+                    <tr class="text-gray-700 dark:text-gray-400" :class="isSelected(product.id) && 'bg-purple-50 dark:bg-purple-900/10'">
+                        <!-- Checkbox -->
+                        <td class="px-4 py-3">
+                            <input
+                                type="checkbox"
+                                :checked="isSelected(product.id)"
+                                @change="toggleSelection(product.id)"
+                                class="rounded border-gray-300 dark:border-gray-600 text-purple-600 focus:ring-purple-500"
+                            />
+                        </td>
+
+                        <!-- Product Info -->
+                        <td class="px-4 py-3">
+                            <div class="flex items-center">
+                                <!-- Product Image -->
+                                <div class="w-12 h-12 mr-3 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 flex-shrink-0">
+                                    <template x-if="product.image_link">
+                                        <img :src="product.image_link" :alt="product.title" class="w-full h-full object-cover" loading="lazy" />
+                                    </template>
+                                    <template x-if="!product.image_link">
+                                        <div class="w-full h-full flex items-center justify-center">
+                                            <span x-html="$icon('photograph', 'w-6 h-6 text-gray-400')"></span>
+                                        </div>
+                                    </template>
+                                </div>
+                                <!-- Product Details -->
+                                <div class="min-w-0">
+                                    <a :href="'/admin/marketplace-products/' + product.id" class="font-semibold text-sm truncate max-w-xs hover:text-purple-600 dark:hover:text-purple-400" x-text="product.title || 'Untitled'"></a>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400" x-text="product.brand || 'No brand'"></p>
+                                    <template x-if="product.is_digital">
+                                        <span class="inline-flex items-center px-2 py-0.5 mt-1 text-xs font-medium text-blue-700 bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400 rounded">
+                                            <span x-html="$icon('code', 'w-3 h-3 mr-1')"></span>
+                                            Digital
+                                        </span>
+                                    </template>
+                                </div>
+                            </div>
+                        </td>
+
+                        <!-- Identifiers -->
+                        <td class="px-4 py-3 text-sm">
+                            <div class="space-y-1">
+                                <template x-if="product.gtin">
+                                    <p class="text-xs"><span class="text-gray-500">GTIN:</span> <span x-text="product.gtin" class="font-mono"></span></p>
+                                </template>
+                                <template x-if="product.sku">
+                                    <p class="text-xs"><span class="text-gray-500">SKU:</span> <span x-text="product.sku" class="font-mono"></span></p>
+                                </template>
+                                <template x-if="!product.gtin && !product.sku">
+                                    <p class="text-xs text-gray-400">No identifiers</p>
+                                </template>
+                            </div>
+                        </td>
+
+                        <!-- Source (Marketplace & Vendor) -->
+                        <td class="px-4 py-3 text-sm">
+                            <p class="font-medium" x-text="product.marketplace || 'Unknown'"></p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400 truncate max-w-[150px]" x-text="'from ' + (product.vendor_name || 'Unknown')"></p>
+                        </td>
+
+                        <!-- Price -->
+                        <td class="px-4 py-3 text-sm">
+                            <template x-if="product.price_numeric">
+                                <p class="font-medium" x-text="formatPrice(product.price_numeric, product.currency)"></p>
+                            </template>
+                            <template x-if="!product.price_numeric">
+                                <p class="text-gray-400">-</p>
+                            </template>
+                        </td>
+
+                        <!-- Status -->
+                        <td class="px-4 py-3 text-sm">
+                            <span class="px-2 py-1 font-semibold leading-tight rounded-full text-xs"
+                                  :class="product.is_active ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100'"
+                                  x-text="product.is_active ? 'Active' : 'Inactive'">
+                            </span>
+                            <template x-if="product.availability">
+                                <p class="text-xs text-gray-500 mt-1" x-text="product.availability"></p>
+                            </template>
+                        </td>
+
+                        <!-- Actions -->
+                        <td class="px-4 py-3 text-sm">
+                            <div class="flex items-center space-x-2">
+                                <a
+                                    :href="'/admin/marketplace-products/' + product.id"
+                                    class="flex items-center justify-center px-2 py-1 text-xs font-medium leading-5 text-purple-600 rounded-lg dark:text-purple-400 focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
+                                    title="View Details"
+                                >
+                                    <span x-html="$icon('eye', 'w-4 h-4')"></span>
+                                </a>
+                                <button
+                                    @click="copySingleProduct(product.id)"
+                                    class="flex items-center justify-center px-2 py-1 text-xs font-medium leading-5 text-green-600 rounded-lg dark:text-green-400 focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
+                                    title="Copy to Vendor Catalog"
+                                >
+                                    <span x-html="$icon('duplicate', 'w-4 h-4')"></span>
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </tbody>
+    {% endcall %}
+
+    {{ pagination(show_condition="!loading && pagination.total > 0") }}
+</div>
+
+<!-- Copy to Vendor Modal -->
+{% call modal_simple('copyToVendorModal', 'Copy to Vendor Catalog', show_var='showCopyModal', size='md') %}
+<div class="space-y-4">
+    <p class="text-sm text-gray-600 dark:text-gray-400">
+        Copy <span class="font-medium" x-text="selectedProducts.length"></span> selected product(s) to a vendor catalog.
+    </p>
+
+    <!-- Target Vendor Selection -->
+    <div>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Target Vendor <span class="text-red-500">*</span>
+        </label>
+        <select
+            x-model="copyForm.vendor_id"
+            class="w-full px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+        >
+            <option value="">Select a vendor...</option>
+            <template x-for="vendor in targetVendors" :key="vendor.id">
+                <option :value="vendor.id" x-text="vendor.name + ' (' + vendor.vendor_code + ')'"></option>
+            </template>
+        </select>
+        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+            Products will be copied to this vendor's catalog
+        </p>
+    </div>
+
+    <!-- Options -->
+    <div class="space-y-2">
+        <label class="flex items-center">
+            <input
+                type="checkbox"
+                x-model="copyForm.skip_existing"
+                class="rounded border-gray-300 dark:border-gray-600 text-purple-600 focus:ring-purple-500"
+            />
+            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Skip products that already exist in catalog</span>
+        </label>
+    </div>
+
+    <!-- Actions -->
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showCopyModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >
+            Cancel
+        </button>
+        <button
+            @click="executeCopyToVendor()"
+            :disabled="!copyForm.vendor_id || copying"
+            class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+            <span x-show="copying" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
+            <span x-text="copying ? 'Copying...' : 'Copy Products'"></span>
+        </button>
+    </div>
+</div>
+{% endcall %}
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', path='admin/js/marketplace-products.js') }}"></script>
+{% endblock %}

app/templates/admin/marketplace.html

@@ -6,13 +6,14 @@
 {% from 'shared/macros/tables.html' import table_wrapper, table_header %}
 {% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
 {% from 'shared/macros/inputs.html' import number_stepper %}
+{% from 'shared/macros/tabs.html' import tabs_nav, tab_button, tab_panel, endtab_panel %}
 
 {% block title %}Marketplace Import{% endblock %}
 
 {% block alpine_data %}adminMarketplace(){% endblock %}
 
 {% block content %}
-{% call page_header_flex(title='Marketplace Import', subtitle='Import products from Letzshop marketplace for any vendor (self-service)') %}
+{% call page_header_flex(title='Marketplace Import', subtitle='Import products from external marketplaces') %}
     {{ refresh_button(onclick='refreshJobs()') }}
 {% endcall %}
 
@@ -20,13 +21,21 @@
 
 {{ error_state('Error', show_condition='error') }}
 
-<!-- Import Form Card -->
+<!-- Import Form Card with Tabs -->
 <div class="mb-8 bg-white rounded-lg shadow-xs dark:bg-gray-800">
     <div class="p-6">
         <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
             Start New Import
         </h3>
 
+        <!-- Marketplace Tabs -->
+        {% call tabs_nav(tab_var='activeImportTab') %}
+            {{ tab_button('letzshop', 'Letzshop', tab_var='activeImportTab', icon='shopping-cart', onclick="switchMarketplace('letzshop')") }}
+            {{ tab_button('codeswholesale', 'CodesWholesale', tab_var='activeImportTab', icon='code', onclick="switchMarketplace('codeswholesale')") }}
+        {% endcall %}
+
+        <!-- Letzshop Import Form -->
+        {{ tab_panel('letzshop', tab_var='activeImportTab') }}
         <form @submit.prevent="startImport()">
             <div class="grid gap-6 mb-4 md:grid-cols-2">
                 <!-- Vendor Selection -->
@@ -86,19 +95,6 @@
                     </p>
                 </div>
 
-                <!-- Marketplace -->
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
-                        Marketplace
-                    </label>
-                    <input
-                        x-model="importForm.marketplace"
-                        type="text"
-                        readonly
-                        class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md cursor-not-allowed"
-                    />
-                </div>
-
                 <!-- Batch Size -->
                 <div>
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
@@ -163,6 +159,23 @@
                 </button>
             </div>
         </form>
+        {{ endtab_panel() }}
+
+        <!-- CodesWholesale Import Form -->
+        {{ tab_panel('codeswholesale', tab_var='activeImportTab') }}
+        <div class="text-center py-12">
+            <span x-html="$icon('code', 'inline w-16 h-16 text-gray-300 dark:text-gray-600 mb-4')"></span>
+            <h4 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">
+                CodesWholesale Integration
+            </h4>
+            <p class="text-gray-500 dark:text-gray-400 mb-4">
+                Import digital game keys and software licenses from CodesWholesale API.
+            </p>
+            <p class="text-sm text-gray-400 dark:text-gray-500">
+                Coming soon - This feature is under development
+            </p>
+        </div>
+        {{ endtab_panel() }}
     </div>
 </div>
 
@@ -214,6 +227,7 @@
             >
                 <option value="">All Marketplaces</option>
                 <option value="Letzshop">Letzshop</option>
+                <option value="CodesWholesale">CodesWholesale</option>
             </select>
         </div>
 

app/templates/admin/partials/sidebar.html

@@ -73,7 +73,14 @@
         {{ menu_item('vendors', '/admin/vendors', 'shopping-bag', 'Vendors') }}
         {{ menu_item('users', '/admin/users', 'users', 'Users') }}
         {{ menu_item('customers', '/admin/customers', 'user-group', 'Customers') }}
-        {{ menu_item('marketplace', '/admin/marketplace', 'globe', 'Marketplace') }}
+    {% endcall %}
+
+    <!-- Product Catalog Section -->
+    {{ section_header('Product Catalog', 'productCatalog') }}
+    {% call section_content('productCatalog') %}
+        {{ menu_item('marketplace-products', '/admin/marketplace-products', 'database', 'Marketplace Products') }}
+        {{ menu_item('vendor-products', '/admin/vendor-products', 'cube', 'Vendor Products') }}
+        {{ menu_item('marketplace', '/admin/marketplace', 'cloud-download', 'Import') }}
     {% endcall %}
 
     <!-- Content Management Section -->
@@ -100,13 +107,14 @@
         {{ menu_item('logs', '/admin/logs', 'document-text', 'Application Logs') }}
     {% endcall %}
 
-    <!-- Settings (always visible) -->
-    <div class="px-6 my-4">
-        <hr class="border-gray-200 dark:border-gray-700" />
-    </div>
-    <ul>
-        {{ menu_item('settings', '/admin/settings', 'cog', 'Settings') }}
-    </ul>
+    <!-- Settings Section -->
+    {{ section_header('Settings', 'settingsSection') }}
+    {% call section_content('settingsSection') %}
+        {{ menu_item('settings', '/admin/settings', 'cog', 'General') }}
+        {{ menu_item('profile', '/admin/profile', 'user-circle', 'Profile') }}
+        {{ menu_item('api-keys', '/admin/api-keys', 'key', 'API Keys') }}
+        {{ menu_item('notifications-settings', '/admin/notifications-settings', 'bell', 'Notifications') }}
+    {% endcall %}
 </div>
 {% endmacro %}
 

app/templates/admin/vendor-product-detail.html

@@ -0,0 +1,336 @@
+{# app/templates/admin/vendor-product-detail.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/headers.html' import detail_page_header %}
+{% from 'shared/macros/modals.html' import modal_simple %}
+
+{% block title %}Vendor Product Details{% endblock %}
+
+{% block alpine_data %}adminVendorProductDetail(){% endblock %}
+
+{% block content %}
+{% call detail_page_header("product?.title || 'Product Details'", '/admin/vendor-products', subtitle_show='product') %}
+    <span x-text="product?.vendor_name || 'Unknown Vendor'"></span>
+    <span class="text-gray-400 mx-2">|</span>
+    <span x-text="product?.vendor_code || ''"></span>
+{% endcall %}
+
+{{ loading_state('Loading product details...') }}
+
+{{ error_state('Error loading product') }}
+
+<!-- Product Details -->
+<div x-show="!loading && product">
+    <!-- Override Info Banner -->
+    <div class="px-4 py-3 mb-6 bg-purple-50 dark:bg-purple-900/20 rounded-lg shadow-md">
+        <div class="flex items-start">
+            <span x-html="$icon('information-circle', 'w-5 h-5 text-purple-500 mr-3 mt-0.5 flex-shrink-0')"></span>
+            <div>
+                <p class="text-sm font-medium text-purple-700 dark:text-purple-300">Vendor Product Catalog Entry</p>
+                <p class="text-xs text-purple-600 dark:text-purple-400 mt-1">
+                    This is a vendor-specific copy of a marketplace product. Fields marked with
+                    <span class="inline-flex items-center px-1.5 py-0.5 mx-1 text-xs font-medium text-purple-700 bg-purple-100 dark:bg-purple-800 dark:text-purple-300 rounded">Override</span>
+                    have been customized for this vendor.
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Quick Actions Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Quick Actions
+        </h3>
+        <div class="flex flex-wrap items-center gap-3">
+            <a
+                :href="'/admin/marketplace-products/' + product?.marketplace_product_id"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
+                <span x-html="$icon('database', 'w-4 h-4 mr-2')"></span>
+                View Source Product
+            </a>
+            <button
+                @click="openEditModal()"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600">
+                <span x-html="$icon('pencil', 'w-4 h-4 mr-2')"></span>
+                Edit Overrides
+            </button>
+            <button
+                @click="toggleActive()"
+                :class="product?.is_active
+                    ? 'text-red-700 dark:text-red-300 border-red-300 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-900/20'
+                    : 'text-green-700 dark:text-green-300 border-green-300 dark:border-green-600 hover:bg-green-50 dark:hover:bg-green-900/20'"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 bg-white dark:bg-gray-700 border rounded-lg">
+                <span x-html="$icon(product?.is_active ? 'x-circle' : 'check-circle', 'w-4 h-4 mr-2')"></span>
+                <span x-text="product?.is_active ? 'Deactivate' : 'Activate'"></span>
+            </button>
+            <button
+                @click="confirmRemove()"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-red-600 dark:text-red-400 transition-colors duration-150 bg-white dark:bg-gray-700 border border-red-300 dark:border-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20">
+                <span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
+                Remove from Catalog
+            </button>
+        </div>
+    </div>
+
+    <!-- Product Header with Image -->
+    <div class="grid gap-6 mb-8 md:grid-cols-3">
+        <!-- Product Image -->
+        <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <div class="aspect-square bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden">
+                <template x-if="product?.image_url">
+                    <img :src="product?.image_url" :alt="product?.title" class="w-full h-full object-contain" />
+                </template>
+                <template x-if="!product?.image_url">
+                    <div class="w-full h-full flex items-center justify-center">
+                        <span x-html="$icon('photograph', 'w-16 h-16 text-gray-300')"></span>
+                    </div>
+                </template>
+            </div>
+            <!-- Additional Images -->
+            <div x-show="product?.additional_images?.length > 0" class="mt-4">
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Additional Images</p>
+                <div class="grid grid-cols-4 gap-2">
+                    <template x-for="(img, index) in (product?.additional_images || [])" :key="index">
+                        <div class="aspect-square bg-gray-100 dark:bg-gray-700 rounded overflow-hidden">
+                            <img :src="img" :alt="'Image ' + (index + 1)" class="w-full h-full object-cover" />
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+
+        <!-- Product Info -->
+        <div class="md:col-span-2 space-y-6">
+            <!-- Vendor Info Card -->
+            <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Vendor Information
+                </h3>
+                <div class="grid gap-4 md:grid-cols-2">
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Vendor</p>
+                        <p class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="product?.vendor_name || '-'">-</p>
+                    </div>
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Vendor Code</p>
+                        <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.vendor_code || '-'">-</p>
+                    </div>
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Vendor SKU</p>
+                        <div class="flex items-center gap-2">
+                            <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.vendor_sku || '-'">-</p>
+                            <span x-show="product?.vendor_sku && product?.vendor_sku !== product?.source_sku" class="px-1.5 py-0.5 text-xs font-medium text-purple-700 bg-purple-100 dark:bg-purple-800 dark:text-purple-300 rounded">Override</span>
+                        </div>
+                    </div>
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Status</p>
+                        <div class="flex items-center gap-2">
+                            <span class="px-2 py-1 text-xs font-semibold rounded-full"
+                                  :class="product?.is_active ? 'text-green-700 bg-green-100 dark:bg-green-900/30 dark:text-green-400' : 'text-red-700 bg-red-100 dark:bg-red-900/30 dark:text-red-400'"
+                                  x-text="product?.is_active ? 'Active' : 'Inactive'">
+                            </span>
+                            <span x-show="product?.is_featured" class="px-2 py-1 text-xs font-semibold rounded-full text-yellow-700 bg-yellow-100 dark:bg-yellow-900/30 dark:text-yellow-400">
+                                Featured
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Pricing Card -->
+            <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Pricing
+                </h3>
+                <div class="grid gap-4 md:grid-cols-3">
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Effective Price</p>
+                        <div class="flex items-center gap-2">
+                            <p class="text-lg font-bold text-gray-700 dark:text-gray-200" x-text="formatPrice(product?.effective_price, product?.effective_currency)">-</p>
+                            <span x-show="product?.price_override" class="px-1.5 py-0.5 text-xs font-medium text-purple-700 bg-purple-100 dark:bg-purple-800 dark:text-purple-300 rounded">Override</span>
+                        </div>
+                    </div>
+                    <div x-show="product?.price_override">
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Source Price</p>
+                        <p class="text-sm text-gray-500 dark:text-gray-400 line-through" x-text="formatPrice(product?.source_price, product?.source_currency)">-</p>
+                    </div>
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Availability</p>
+                        <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.availability || 'Not specified'">-</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Product Information Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Product Information
+        </h3>
+        <div class="grid gap-4 md:grid-cols-3">
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Brand</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.brand || 'No brand'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Product Type</p>
+                <div class="flex items-center gap-2">
+                    <span class="px-2 py-1 text-xs font-semibold rounded-full"
+                          :class="product?.is_digital ? 'text-blue-700 bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400' : 'text-orange-700 bg-orange-100 dark:bg-orange-900/30 dark:text-orange-400'"
+                          x-text="product?.is_digital ? 'Digital' : 'Physical'">
+                    </span>
+                </div>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Condition</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.condition || 'Not specified'">-</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Product Identifiers Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Product Identifiers
+        </h3>
+        <div class="grid gap-4 md:grid-cols-4">
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Product ID</p>
+                <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.id || '-'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">GTIN/EAN</p>
+                <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.gtin || product?.source_gtin || '-'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Vendor SKU</p>
+                <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.vendor_sku || '-'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Source SKU</p>
+                <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.source_sku || '-'">-</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Source Information Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <div class="flex items-center justify-between mb-4">
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Source Information
+            </h3>
+            <a
+                :href="'/admin/marketplace-products/' + product?.marketplace_product_id"
+                class="flex items-center text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400">
+                <span>View Source</span>
+                <span x-html="$icon('arrow-right', 'w-4 h-4 ml-1')"></span>
+            </a>
+        </div>
+        <div class="grid gap-4 md:grid-cols-3">
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Marketplace</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.source_marketplace || 'Unknown'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Source Vendor</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.source_vendor || 'Unknown'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Marketplace Product ID</p>
+                <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="product?.marketplace_product_id || '-'">-</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Description Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800" x-show="product?.title || product?.description">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Product Content
+        </h3>
+        <div class="space-y-4">
+            <div>
+                <div class="flex items-center gap-2 mb-1">
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Title</p>
+                    <span x-show="product?.title_override" class="px-1.5 py-0.5 text-xs font-medium text-purple-700 bg-purple-100 dark:bg-purple-800 dark:text-purple-300 rounded">Override</span>
+                </div>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.title || '-'">-</p>
+            </div>
+            <div x-show="product?.description">
+                <div class="flex items-center gap-2 mb-1">
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Description</p>
+                    <span x-show="product?.description_override" class="px-1.5 py-0.5 text-xs font-medium text-purple-700 bg-purple-100 dark:bg-purple-800 dark:text-purple-300 rounded">Override</span>
+                </div>
+                <div class="text-sm text-gray-700 dark:text-gray-300 prose prose-sm dark:prose-invert max-w-none" x-html="product?.description || '-'"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Category Information -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800" x-show="product?.google_product_category || product?.category_path">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Categories
+        </h3>
+        <div class="space-y-3">
+            <div x-show="product?.google_product_category">
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Google Product Category</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.google_product_category">-</p>
+            </div>
+            <div x-show="product?.category_path">
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Category Path</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="product?.category_path">-</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Timestamps -->
+    <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Record Information
+        </h3>
+        <div class="grid gap-4 md:grid-cols-2">
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Added to Catalog</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="formatDate(product?.created_at)">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Last Updated</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="formatDate(product?.updated_at)">-</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Confirm Remove Modal -->
+{% call modal_simple('confirmRemoveModal', 'Remove from Catalog', show_var='showRemoveModal', size='sm') %}
+<div class="space-y-4">
+    <p class="text-sm text-gray-600 dark:text-gray-400">
+        Are you sure you want to remove this product from the vendor's catalog?
+    </p>
+    <p class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="product?.title || 'Untitled'"></p>
+    <p class="text-xs text-gray-500 dark:text-gray-400">
+        This will not delete the source product from the marketplace repository.
+    </p>
+
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showRemoveModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >
+            Cancel
+        </button>
+        <button
+            @click="executeRemove()"
+            :disabled="removing"
+            class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+        >
+            <span x-text="removing ? 'Removing...' : 'Remove'"></span>
+        </button>
+    </div>
+</div>
+{% endcall %}
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', path='admin/js/vendor-product-detail.js') }}"></script>
+{% endblock %}

app/templates/admin/vendor-products.html

@@ -0,0 +1,330 @@
+{# app/templates/admin/vendor-products.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/pagination.html' import pagination %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/tables.html' import table_wrapper %}
+{% from 'shared/macros/modals.html' import modal_simple %}
+
+{% block title %}Vendor Products{% endblock %}
+
+{% block alpine_data %}adminVendorProducts(){% endblock %}
+
+{% block content %}
+{{ page_header('Vendor Products', subtitle='Browse vendor-specific product catalogs with override capability') }}
+
+{{ loading_state('Loading products...') }}
+
+{{ error_state('Error loading products') }}
+
+<!-- Stats Cards -->
+<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-5">
+    <!-- Card: Total Products -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
+            <span x-html="$icon('cube', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Total Products
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Active Products -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
+            <span x-html="$icon('check-circle', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Active
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.active || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Featured Products -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-yellow-500 bg-yellow-100 rounded-full dark:text-yellow-100 dark:bg-yellow-500">
+            <span x-html="$icon('star', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Featured
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.featured || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Digital Products -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
+            <span x-html="$icon('code', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Digital
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.digital || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Physical Products -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
+            <span x-html="$icon('truck', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Physical
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.physical || 0">
+                0
+            </p>
+        </div>
+    </div>
+</div>
+
+<!-- Search and Filters Bar -->
+<div x-show="!loading" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+        <!-- Search Input -->
+        <div class="flex-1 max-w-xl">
+            <div class="relative">
+                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
+                </span>
+                <input
+                    type="text"
+                    x-model="filters.search"
+                    @input="debouncedSearch()"
+                    placeholder="Search by title or vendor SKU..."
+                    class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
+                >
+            </div>
+        </div>
+
+        <!-- Filters -->
+        <div class="flex flex-wrap gap-3">
+            <!-- Vendor Filter -->
+            <select
+                x-model="filters.vendor_id"
+                @change="pagination.page = 1; loadProducts()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Vendors</option>
+                <template x-for="vendor in vendors" :key="vendor.id">
+                    <option :value="vendor.id" x-text="vendor.name + ' (' + vendor.vendor_code + ')'"></option>
+                </template>
+            </select>
+
+            <!-- Status Filter -->
+            <select
+                x-model="filters.is_active"
+                @change="pagination.page = 1; loadProducts()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Status</option>
+                <option value="true">Active</option>
+                <option value="false">Inactive</option>
+            </select>
+
+            <!-- Featured Filter -->
+            <select
+                x-model="filters.is_featured"
+                @change="pagination.page = 1; loadProducts()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Products</option>
+                <option value="true">Featured Only</option>
+                <option value="false">Not Featured</option>
+            </select>
+
+            <!-- Refresh Button -->
+            <button
+                @click="refresh()"
+                class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                title="Refresh products"
+            >
+                <span x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
+                Refresh
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Products Table with Pagination -->
+<div x-show="!loading">
+    {% call table_wrapper() %}
+            <thead>
+                <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
+                    <th class="px-4 py-3">Product</th>
+                    <th class="px-4 py-3">Vendor</th>
+                    <th class="px-4 py-3">Source</th>
+                    <th class="px-4 py-3">Price</th>
+                    <th class="px-4 py-3">Status</th>
+                    <th class="px-4 py-3">Actions</th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
+                <!-- Empty State -->
+                <template x-if="products.length === 0">
+                    <tr>
+                        <td colspan="6" class="px-4 py-8 text-center text-gray-600 dark:text-gray-400">
+                            <div class="flex flex-col items-center">
+                                <span x-html="$icon('cube', 'w-12 h-12 mb-2 text-gray-300')"></span>
+                                <p class="font-medium">No vendor products found</p>
+                                <p class="text-xs mt-1" x-text="filters.search || filters.vendor_id || filters.is_active ? 'Try adjusting your filters' : 'Copy products from the Marketplace Products page'"></p>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+
+                <!-- Product Rows -->
+                <template x-for="product in products" :key="product.id">
+                    <tr class="text-gray-700 dark:text-gray-400">
+                        <!-- Product Info -->
+                        <td class="px-4 py-3">
+                            <div class="flex items-center">
+                                <!-- Product Image -->
+                                <div class="w-12 h-12 mr-3 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 flex-shrink-0">
+                                    <template x-if="product.image_url">
+                                        <img :src="product.image_url" :alt="product.title" class="w-full h-full object-cover" loading="lazy" />
+                                    </template>
+                                    <template x-if="!product.image_url">
+                                        <div class="w-full h-full flex items-center justify-center">
+                                            <span x-html="$icon('photograph', 'w-6 h-6 text-gray-400')"></span>
+                                        </div>
+                                    </template>
+                                </div>
+                                <!-- Product Details -->
+                                <div class="min-w-0">
+                                    <p class="font-semibold text-sm truncate max-w-xs" x-text="product.title || 'Untitled'"></p>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400" x-text="product.brand || 'No brand'"></p>
+                                    <template x-if="product.vendor_sku">
+                                        <p class="text-xs text-gray-400 font-mono">SKU: <span x-text="product.vendor_sku"></span></p>
+                                    </template>
+                                    <template x-if="product.is_digital">
+                                        <span class="inline-flex items-center px-2 py-0.5 mt-1 text-xs font-medium text-blue-700 bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400 rounded">
+                                            <span x-html="$icon('code', 'w-3 h-3 mr-1')"></span>
+                                            Digital
+                                        </span>
+                                    </template>
+                                </div>
+                            </div>
+                        </td>
+
+                        <!-- Vendor Info -->
+                        <td class="px-4 py-3 text-sm">
+                            <p class="font-medium" x-text="product.vendor_name || 'Unknown'"></p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400 font-mono" x-text="product.vendor_code || ''"></p>
+                        </td>
+
+                        <!-- Source (Marketplace) -->
+                        <td class="px-4 py-3 text-sm">
+                            <p x-text="product.source_marketplace || 'Unknown'"></p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400 truncate max-w-[120px]" x-text="'from ' + (product.source_vendor || 'Unknown')"></p>
+                        </td>
+
+                        <!-- Price -->
+                        <td class="px-4 py-3 text-sm">
+                            <template x-if="product.effective_price">
+                                <p class="font-medium" x-text="formatPrice(product.effective_price, product.effective_currency)"></p>
+                            </template>
+                            <template x-if="!product.effective_price">
+                                <p class="text-gray-400">-</p>
+                            </template>
+                        </td>
+
+                        <!-- Status -->
+                        <td class="px-4 py-3 text-sm">
+                            <div class="flex flex-col gap-1">
+                                <span class="px-2 py-1 font-semibold leading-tight rounded-full text-xs w-fit"
+                                      :class="product.is_active ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100'"
+                                      x-text="product.is_active ? 'Active' : 'Inactive'">
+                                </span>
+                                <template x-if="product.is_featured">
+                                    <span class="px-2 py-1 font-semibold leading-tight rounded-full text-xs w-fit text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100">
+                                        Featured
+                                    </span>
+                                </template>
+                            </div>
+                        </td>
+
+                        <!-- Actions -->
+                        <td class="px-4 py-3 text-sm">
+                            <div class="flex items-center space-x-2">
+                                <a
+                                    :href="'/admin/vendor-products/' + product.id"
+                                    class="flex items-center justify-center px-2 py-1 text-xs font-medium leading-5 text-purple-600 rounded-lg dark:text-purple-400 focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
+                                    title="View Details"
+                                >
+                                    <span x-html="$icon('eye', 'w-4 h-4')"></span>
+                                </a>
+                                <a
+                                    :href="'/admin/marketplace-products/' + product.marketplace_product_id"
+                                    class="flex items-center justify-center px-2 py-1 text-xs font-medium leading-5 text-blue-600 rounded-lg dark:text-blue-400 focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
+                                    title="View Source Product"
+                                >
+                                    <span x-html="$icon('database', 'w-4 h-4')"></span>
+                                </a>
+                                <button
+                                    @click="confirmRemove(product)"
+                                    class="flex items-center justify-center px-2 py-1 text-xs font-medium leading-5 text-red-600 rounded-lg dark:text-red-400 focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
+                                    title="Remove from Catalog"
+                                >
+                                    <span x-html="$icon('delete', 'w-4 h-4')"></span>
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </tbody>
+    {% endcall %}
+
+    {{ pagination(show_condition="!loading && pagination.total > 0") }}
+</div>
+
+<!-- Confirm Remove Modal -->
+{% call modal_simple('confirmRemoveModal', 'Remove from Catalog', show_var='showRemoveModal', size='sm') %}
+<div class="space-y-4">
+    <p class="text-sm text-gray-600 dark:text-gray-400">
+        Are you sure you want to remove this product from the vendor's catalog?
+    </p>
+    <p class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="productToRemove?.title || 'Untitled'"></p>
+    <p class="text-xs text-gray-500 dark:text-gray-400">
+        This will not delete the source product from the marketplace repository.
+    </p>
+
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showRemoveModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >
+            Cancel
+        </button>
+        <button
+            @click="executeRemove()"
+            :disabled="removing"
+            class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+        >
+            <span x-text="removing ? 'Removing...' : 'Remove'"></span>
+        </button>
+    </div>
+</div>
+{% endcall %}
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', path='admin/js/vendor-products.js') }}"></script>
+{% endblock %}