Multitenant implementation with custom Domain, theme per vendor

.env

@@ -35,4 +35,19 @@ RATE_LIMIT_WINDOW=3600
 
 # Logging
 LOG_LEVEL=INFO
-LOG_FILE=log/app.log
+LOG_FILE=log/app.log
+
+# Platform domain configuration
+PLATFORM_DOMAIN=platform.com  # Your main platform domain
+
+# Custom domain features
+ALLOW_CUSTOM_DOMAINS=True  # Enable/disable custom domains
+REQUIRE_DOMAIN_VERIFICATION=True  # Require DNS verification
+
+# SSL/TLS configuration for custom domains
+SSL_PROVIDER=letsencrypt  # or "cloudflare", "manual"
+AUTO_PROVISION_SSL=False  # Set to True if using automated SSL
+
+# DNS verification
+DNS_VERIFICATION_PREFIX=_letzshop-verify
+DNS_VERIFICATION_TTL=3600

.env.example

@@ -1,12 +1,27 @@
 # .env.example
+
+# Project information
+PROJECT_NAME=Ecommerce Backend API with Marketplace Support
+DESCRIPTION=Advanced product management system with JWT authentication
+VERSION=0.0.1
+
 # Database Configuration
-DATABASE_URL=postgresql://username:password@localhost:5432/ecommerce_db
+# DATABASE_URL=postgresql://username:password@localhost:5432/ecommerce_db
 # For development, you can use SQLite:
-# DATABASE_URL=sqlite:///./ecommerce.db
+DATABASE_URL=sqlite:///./ecommerce.db
+
+# Documentation
+# .env.development
+DOCUMENTATION_URL=http://localhost:8001
+# .env.production
+# DOCUMENTATION_URL=https://yourdomain.com/docs
+# .env.staging
+# DOCUMENTATION_URL=https://staging-docs.yourdomain.com
 
 # JWT Configuration
 JWT_SECRET_KEY=your-super-secret-jwt-key-change-in-production
 JWT_EXPIRE_HOURS=24
+JWT_EXPIRE_MINUTES=30
 
 # API Configuration
 API_HOST=0.0.0.0
@@ -15,9 +30,24 @@ DEBUG=False
 
 # Rate Limiting
 RATE_LIMIT_ENABLED=True
-DEFAULT_RATE_LIMIT=100
-DEFAULT_WINDOW_SECONDS=3600
+RATE_LIMIT_REQUESTS=100
+RATE_LIMIT_WINDOW=3600
 
 # Logging
 LOG_LEVEL=INFO
-LOG_FILE=app.log
+LOG_FILE=log/app.log
+
+# Platform domain configuration
+PLATFORM_DOMAIN=platform.com  # Your main platform domain
+
+# Custom domain features
+ALLOW_CUSTOM_DOMAINS=True  # Enable/disable custom domains
+REQUIRE_DOMAIN_VERIFICATION=True  # Require DNS verification
+
+# SSL/TLS configuration for custom domains
+SSL_PROVIDER=letsencrypt  # or "cloudflare", "manual"
+AUTO_PROVISION_SSL=False  # Set to True if using automated SSL
+
+# DNS verification
+DNS_VERIFICATION_PREFIX=_letzshop-verify
+DNS_VERIFICATION_TTL=3600

app/api/v1/admin/__init__.py

@@ -5,6 +5,7 @@ Admin API router aggregation.
 This module combines all admin-related API endpoints:
 - Authentication (login/logout)
 - Vendor management (CRUD, bulk operations)
+- Vendor domains management (custom domains, DNS verification)
 - User management (status, roles)
 - Dashboard and statistics
 - Marketplace monitoring
@@ -20,6 +21,7 @@ from fastapi import APIRouter
 from . import (
     auth,
     vendors,
+    vendor_domains,
     users,
     dashboard,
     marketplace,
@@ -34,28 +36,56 @@ from . import (
 router = APIRouter()
 
 
+# ============================================================================
+# Authentication & Authorization
+# ============================================================================
+
 # Include authentication endpoints
 router.include_router(auth.router, tags=["admin-auth"])
 
+
+# ============================================================================
+# Vendor Management
+# ============================================================================
+
 # Include vendor management endpoints
 router.include_router(vendors.router, tags=["admin-vendors"])
 
+# Include vendor domains management endpoints
+router.include_router(vendor_domains.router, tags=["admin-vendor-domains"])
+
+
+# ============================================================================
+# User Management
+# ============================================================================
+
 # Include user management endpoints
 router.include_router(users.router, tags=["admin-users"])
 
+
+# ============================================================================
+# Dashboard & Statistics
+# ============================================================================
+
 # Include dashboard and statistics endpoints
 router.include_router(dashboard.router, tags=["admin-dashboard"])
 
+
+# ============================================================================
+# Marketplace & Imports
+# ============================================================================
+
 # Include marketplace monitoring endpoints
 router.include_router(marketplace.router, tags=["admin-marketplace"])
 
-# Include monitoring endpoints (placeholder)
-# router.include_router(monitoring.router, tags=["admin-monitoring"])
 
 # ============================================================================
-# Admin Models Integration
+# Platform Administration
 # ============================================================================
 
+# Include monitoring endpoints (placeholder for future implementation)
+# router.include_router(monitoring.router, tags=["admin-monitoring"])
+
 # Include audit logging endpoints
 router.include_router(audit.router, tags=["admin-audit"])
 
@@ -65,6 +95,7 @@ router.include_router(settings.router, tags=["admin-settings"])
 # Include notifications and alerts endpoints
 router.include_router(notifications.router, tags=["admin-notifications"])
 
+
 # ============================================================================
 # HTML Page Routes (Jinja2 Templates)
 # ============================================================================
@@ -72,5 +103,6 @@ router.include_router(notifications.router, tags=["admin-notifications"])
 # Include HTML page routes (these return rendered templates, not JSON)
 router.include_router(pages.router, tags=["admin-pages"])
 
+
 # Export the router
 __all__ = ["router"]

app/api/v1/admin/pages.py

@@ -16,6 +16,7 @@ Routes:
 - GET /vendors/create → Create vendor form (auth required)
 - GET /vendors/{vendor_code} → Vendor details (auth required)
 - GET /vendors/{vendor_code}/edit → Edit vendor form (auth required)
+- GET /vendors/{vendor_code}/domains → Vendor domains management (auth required)
 - GET /users         → User management page (auth required)
 - GET /imports       → Import history page (auth required)
 - GET /settings      → Settings page (auth required)
@@ -166,6 +167,55 @@ async def admin_vendor_edit_page(
     )
 
 
+# ============================================================================
+# VENDOR DOMAINS ROUTES
+# ============================================================================
+
+@router.get("/vendors/{vendor_code}/domains", response_class=HTMLResponse, include_in_schema=False)
+async def admin_vendor_domains_page(
+        request: Request,
+        vendor_code: str = Path(..., description="Vendor code"),
+        current_user: User = Depends(get_current_admin_user),
+        db: Session = Depends(get_db)
+):
+    """
+    Render vendor domains management page.
+    Shows custom domains, verification status, and DNS configuration.
+    """
+    return templates.TemplateResponse(
+        "admin/vendor-domains.html",
+        {
+            "request": request,
+            "user": current_user,
+            "vendor_code": vendor_code,
+        }
+    )
+
+
+# ============================================================================
+# VENDOR THEMES ROUTES
+# ============================================================================
+
+@router.get("/vendors/{vendor_code}/theme", response_class=HTMLResponse, include_in_schema=False)
+async def admin_vendor_theme_page(
+        request: Request,
+        vendor_code: str = Path(..., description="Vendor code"),
+        current_user: User = Depends(get_current_admin_user),
+        db: Session = Depends(get_db)
+):
+    """
+    Render vendor theme customization page.
+    """
+    return templates.TemplateResponse(
+        "admin/vendor-theme.html",
+        {
+            "request": request,
+            "user": current_user,
+            "vendor_code": vendor_code,
+        }
+    )
+
+
 # ============================================================================
 # USER MANAGEMENT ROUTES
 # ============================================================================
@@ -257,6 +307,7 @@ async def admin_components_page(
         }
     )
 
+
 @router.get("/icons", response_class=HTMLResponse, include_in_schema=False)
 async def admin_icons_page(
     request: Request,
@@ -275,6 +326,7 @@ async def admin_icons_page(
         }
     )
 
+
 @router.get("/testing", response_class=HTMLResponse, include_in_schema=False)
 async def admin_testing_hub(
         request: Request,

app/api/v1/admin/vendor_domains.py

@@ -0,0 +1,328 @@
+# app/api/v1/admin/vendor_domains.py
+"""
+Admin endpoints for managing vendor custom domains.
+
+Follows the architecture pattern:
+- Endpoints only handle HTTP layer
+- Business logic in service layer
+- Proper exception handling
+- Pydantic schemas for validation
+"""
+
+import logging
+from typing import List
+
+from fastapi import APIRouter, Depends, Path, Body, Query
+from sqlalchemy.orm import Session
+
+from app.api.deps import get_current_admin_user
+from app.core.database import get_db
+from app.services.vendor_domain_service import vendor_domain_service
+from app.exceptions import VendorNotFoundException
+from models.schema.vendor_domain import (
+    VendorDomainCreate,
+    VendorDomainUpdate,
+    VendorDomainResponse,
+    VendorDomainListResponse,
+    DomainVerificationInstructions,
+    DomainVerificationResponse,
+    DomainDeletionResponse,
+)
+from models.database.user import User
+from models.database.vendor import Vendor
+
+router = APIRouter(prefix="/vendors")
+logger = logging.getLogger(__name__)
+
+
+def _get_vendor_by_id(db: Session, vendor_id: int) -> Vendor:
+    """
+    Helper to get vendor by ID.
+
+    Args:
+        db: Database session
+        vendor_id: Vendor ID
+
+    Returns:
+        Vendor object
+
+    Raises:
+        VendorNotFoundException: If vendor not found
+    """
+    vendor = db.query(Vendor).filter(Vendor.id == vendor_id).first()
+    if not vendor:
+        raise VendorNotFoundException(str(vendor_id), identifier_type="id")
+    return vendor
+
+
+@router.post("/{vendor_id}/domains", response_model=VendorDomainResponse)
+def add_vendor_domain(
+        vendor_id: int = Path(..., description="Vendor ID", gt=0),
+        domain_data: VendorDomainCreate = Body(...),
+        db: Session = Depends(get_db),
+        current_admin: User = Depends(get_current_admin_user),
+):
+    """
+    Add a custom domain to vendor (Admin only).
+
+    This endpoint:
+    1. Validates the domain format
+    2. Checks if domain is already registered
+    3. Generates verification token
+    4. Creates domain record (unverified, inactive)
+    5. Returns domain with verification instructions
+
+    **Domain Examples:**
+    - myshop.com
+    - shop.mybrand.com
+    - customstore.net
+
+    **Next Steps:**
+    1. Vendor adds DNS TXT record
+    2. Admin clicks "Verify Domain" to confirm ownership
+    3. Once verified, domain can be activated
+
+    **Raises:**
+    - 404: Vendor not found
+    - 409: Domain already registered
+    - 422: Invalid domain format or reserved subdomain
+    """
+    domain = vendor_domain_service.add_domain(
+        db=db,
+        vendor_id=vendor_id,
+        domain_data=domain_data
+    )
+
+    return VendorDomainResponse(
+        id=domain.id,
+        vendor_id=domain.vendor_id,
+        domain=domain.domain,
+        is_primary=domain.is_primary,
+        is_active=domain.is_active,
+        is_verified=domain.is_verified,
+        ssl_status=domain.ssl_status,
+        verification_token=domain.verification_token,
+        verified_at=domain.verified_at,
+        ssl_verified_at=domain.ssl_verified_at,
+        created_at=domain.created_at,
+        updated_at=domain.updated_at,
+    )
+
+
+@router.get("/{vendor_id}/domains", response_model=VendorDomainListResponse)
+def list_vendor_domains(
+        vendor_id: int = Path(..., description="Vendor ID", gt=0),
+        db: Session = Depends(get_db),
+        current_admin: User = Depends(get_current_admin_user),
+):
+    """
+    List all domains for a vendor (Admin only).
+
+    Returns domains ordered by:
+    1. Primary domains first
+    2. Creation date (newest first)
+
+    **Raises:**
+    - 404: Vendor not found
+    """
+    # Verify vendor exists
+    _get_vendor_by_id(db, vendor_id)
+
+    domains = vendor_domain_service.get_vendor_domains(db, vendor_id)
+
+    return VendorDomainListResponse(
+        domains=[
+            VendorDomainResponse(
+                id=d.id,
+                vendor_id=d.vendor_id,
+                domain=d.domain,
+                is_primary=d.is_primary,
+                is_active=d.is_active,
+                is_verified=d.is_verified,
+                ssl_status=d.ssl_status,
+                verification_token=d.verification_token if not d.is_verified else None,
+                verified_at=d.verified_at,
+                ssl_verified_at=d.ssl_verified_at,
+                created_at=d.created_at,
+                updated_at=d.updated_at,
+            )
+            for d in domains
+        ],
+        total=len(domains)
+    )
+
+
+@router.get("/domains/{domain_id}", response_model=VendorDomainResponse)
+def get_domain_details(
+        domain_id: int = Path(..., description="Domain ID", gt=0),
+        db: Session = Depends(get_db),
+        current_admin: User = Depends(get_current_admin_user),
+):
+    """
+    Get detailed information about a specific domain (Admin only).
+
+    **Raises:**
+    - 404: Domain not found
+    """
+    domain = vendor_domain_service.get_domain_by_id(db, domain_id)
+
+    return VendorDomainResponse(
+        id=domain.id,
+        vendor_id=domain.vendor_id,
+        domain=domain.domain,
+        is_primary=domain.is_primary,
+        is_active=domain.is_active,
+        is_verified=domain.is_verified,
+        ssl_status=domain.ssl_status,
+        verification_token=domain.verification_token if not domain.is_verified else None,
+        verified_at=domain.verified_at,
+        ssl_verified_at=domain.ssl_verified_at,
+        created_at=domain.created_at,
+        updated_at=domain.updated_at,
+    )
+
+
+@router.put("/domains/{domain_id}", response_model=VendorDomainResponse)
+def update_vendor_domain(
+        domain_id: int = Path(..., description="Domain ID", gt=0),
+        domain_update: VendorDomainUpdate = Body(...),
+        db: Session = Depends(get_db),
+        current_admin: User = Depends(get_current_admin_user),
+):
+    """
+    Update domain settings (Admin only).
+
+    **Can update:**
+    - `is_primary`: Set as primary domain for vendor
+    - `is_active`: Activate or deactivate domain
+
+    **Important:**
+    - Cannot activate unverified domains
+    - Setting a domain as primary will unset other primary domains
+    - Cannot modify domain name (delete and recreate instead)
+
+    **Raises:**
+    - 404: Domain not found
+    - 400: Cannot activate unverified domain
+    """
+    domain = vendor_domain_service.update_domain(
+        db=db,
+        domain_id=domain_id,
+        domain_update=domain_update
+    )
+
+    return VendorDomainResponse(
+        id=domain.id,
+        vendor_id=domain.vendor_id,
+        domain=domain.domain,
+        is_primary=domain.is_primary,
+        is_active=domain.is_active,
+        is_verified=domain.is_verified,
+        ssl_status=domain.ssl_status,
+        verification_token=None,  # Don't expose token after updates
+        verified_at=domain.verified_at,
+        ssl_verified_at=domain.ssl_verified_at,
+        created_at=domain.created_at,
+        updated_at=domain.updated_at,
+    )
+
+
+@router.delete("/domains/{domain_id}", response_model=DomainDeletionResponse)
+def delete_vendor_domain(
+        domain_id: int = Path(..., description="Domain ID", gt=0),
+        db: Session = Depends(get_db),
+        current_admin: User = Depends(get_current_admin_user),
+):
+    """
+    Delete a custom domain (Admin only).
+
+    **Warning:** This is permanent and cannot be undone.
+
+    **Raises:**
+    - 404: Domain not found
+    """
+    # Get domain details before deletion
+    domain = vendor_domain_service.get_domain_by_id(db, domain_id)
+    vendor_id = domain.vendor_id
+    domain_name = domain.domain
+
+    # Delete domain
+    message = vendor_domain_service.delete_domain(db, domain_id)
+
+    return DomainDeletionResponse(
+        message=message,
+        domain=domain_name,
+        vendor_id=vendor_id
+    )
+
+
+@router.post("/domains/{domain_id}/verify", response_model=DomainVerificationResponse)
+def verify_domain_ownership(
+        domain_id: int = Path(..., description="Domain ID", gt=0),
+        db: Session = Depends(get_db),
+        current_admin: User = Depends(get_current_admin_user),
+):
+    """
+    Verify domain ownership via DNS TXT record (Admin only).
+
+    **Verification Process:**
+    1. Queries DNS for TXT record: `_letzshop-verify.{domain}`
+    2. Checks if verification token matches
+    3. If found, marks domain as verified
+
+    **Requirements:**
+    - Vendor must have added TXT record to their DNS
+    - DNS propagation may take 5-15 minutes
+    - Record format: `_letzshop-verify.domain.com` TXT `{token}`
+
+    **After verification:**
+    - Domain can be activated
+    - Domain will be available for routing
+
+    **Raises:**
+    - 404: Domain not found
+    - 400: Already verified, or verification failed
+    - 502: DNS query failed
+    """
+    domain, message = vendor_domain_service.verify_domain(db, domain_id)
+
+    return DomainVerificationResponse(
+        message=message,
+        domain=domain.domain,
+        verified_at=domain.verified_at,
+        is_verified=domain.is_verified
+    )
+
+
+@router.get("/domains/{domain_id}/verification-instructions", response_model=DomainVerificationInstructions)
+def get_domain_verification_instructions(
+        domain_id: int = Path(..., description="Domain ID", gt=0),
+        db: Session = Depends(get_db),
+        current_admin: User = Depends(get_current_admin_user),
+):
+    """
+    Get DNS verification instructions for domain (Admin only).
+
+    Returns step-by-step instructions for:
+    1. Where to add DNS records
+    2. What TXT record to create
+    3. Links to common registrars
+    4. Verification token
+
+    **Use this endpoint to:**
+    - Show vendors how to verify their domain
+    - Get the exact TXT record values
+    - Access registrar links
+
+    **Raises:**
+    - 404: Domain not found
+    """
+    instructions = vendor_domain_service.get_verification_instructions(db, domain_id)
+
+    return DomainVerificationInstructions(
+        domain=instructions["domain"],
+        verification_token=instructions["verification_token"],
+        instructions=instructions["instructions"],
+        txt_record=instructions["txt_record"],
+        common_registrars=instructions["common_registrars"]
+    )

app/core/config.py

@@ -61,6 +61,21 @@ class Settings(BaseSettings):
     log_level: str = "INFO"
     log_file: Optional[str] = None
 
+    # Platform domain configuration
+    platform_domain: str = "platform.com"  # Your main platform domain
+
+    # Custom domain features
+    allow_custom_domains: bool = True  # Enable/disable custom domains
+    require_domain_verification: bool = True  # Require DNS verification
+
+    # SSL/TLS configuration for custom domains
+    ssl_provider: str = "letsencrypt"  # or "cloudflare", "manual"
+    auto_provision_ssl: bool = False  # Set to True if using automated SSL
+
+    # DNS verification
+    dns_verification_prefix: str = "_letzshop-verify"
+    dns_verification_ttl: int = 3600
+
     model_config = {"env_file": ".env"}  # Updated syntax for Pydantic v2
 
 

app/exceptions/__init__.py

@@ -6,6 +6,7 @@ This module provides frontend-friendly exceptions with consistent error codes,
 messages, and HTTP status mappings.
 """
 
+# Base exceptions
 from .base import (
     LetzShopException,
     ValidationException,
@@ -19,6 +20,7 @@ from .base import (
     ServiceUnavailableException,
 )
 
+# Authentication exceptions
 from .auth import (
     InvalidCredentialsException,
     TokenExpiredException,
@@ -29,6 +31,34 @@ from .auth import (
     UserAlreadyExistsException
 )
 
+# Admin exceptions
+from .admin import (
+    UserNotFoundException,
+    UserStatusChangeException,
+    VendorVerificationException,
+    AdminOperationException,
+    CannotModifyAdminException,
+    CannotModifySelfException,
+    InvalidAdminActionException,
+    BulkOperationException,
+)
+
+# Marketplace import jon exceptions
+from .marketplace_import_job import (
+    MarketplaceImportException,
+    ImportJobNotFoundException,
+    ImportJobNotOwnedException,
+    InvalidImportDataException,
+    ImportJobCannotBeCancelledException,
+    ImportJobCannotBeDeletedException,
+    MarketplaceConnectionException,
+    MarketplaceDataParsingException,
+    ImportRateLimitException,
+    InvalidMarketplaceException,
+    ImportJobAlreadyProcessingException,
+)
+
+# Marketplace product exceptions
 from .marketplace_product import (
     MarketplaceProductNotFoundException,
     MarketplaceProductAlreadyExistsException,
@@ -38,6 +68,7 @@ from .marketplace_product import (
     MarketplaceProductCSVImportException,
 )
 
+# Inventory exceptions
 from .inventory import (
     InventoryNotFoundException,
     InsufficientInventoryException,
@@ -48,6 +79,7 @@ from .inventory import (
     LocationNotFoundException
 )
 
+# Vendor exceptions
 from .vendor import (
     VendorNotFoundException,
     VendorAlreadyExistsException,
@@ -59,6 +91,22 @@ from .vendor import (
     VendorValidationException,
 )
 
+# Vendor domain exceptions
+from .vendor_domain import (
+    VendorDomainNotFoundException,
+    VendorDomainAlreadyExistsException,
+    InvalidDomainFormatException,
+    ReservedDomainException,
+    DomainNotVerifiedException,
+    DomainVerificationFailedException,
+    DomainAlreadyVerifiedException,
+    MultiplePrimaryDomainsException,
+    DNSVerificationException,
+    MaxDomainsReachedException,
+    UnauthorizedDomainAccessException,
+)
+
+# Customer exceptions
 from .customer import (
     CustomerNotFoundException,
     CustomerAlreadyExistsException,
@@ -69,6 +117,7 @@ from .customer import (
     CustomerAuthorizationException,
 )
 
+# Team exceptions
 from .team import (
     TeamMemberNotFoundException,
     TeamMemberAlreadyExistsException,
@@ -86,6 +135,7 @@ from .team import (
     InvalidInvitationDataException,
 )
 
+# Product exceptions
 from .product import (
     ProductNotFoundException,
     ProductAlreadyExistsException,
@@ -97,6 +147,7 @@ from .product import (
     CannotDeleteProductWithOrdersException,
 )
 
+# Order exceptions
 from .order import (
     OrderNotFoundException,
     OrderAlreadyExistsException,
@@ -105,31 +156,6 @@ from .order import (
     OrderCannotBeCancelledException,
 )
 
-from .marketplace_import_job import (
-    MarketplaceImportException,
-    ImportJobNotFoundException,
-    ImportJobNotOwnedException,
-    InvalidImportDataException,
-    ImportJobCannotBeCancelledException,
-    ImportJobCannotBeDeletedException,
-    MarketplaceConnectionException,
-    MarketplaceDataParsingException,
-    ImportRateLimitException,
-    InvalidMarketplaceException,
-    ImportJobAlreadyProcessingException,
-)
-
-from .admin import (
-    UserNotFoundException,
-    UserStatusChangeException,
-    VendorVerificationException,
-    AdminOperationException,
-    CannotModifyAdminException,
-    CannotModifySelfException,
-    InvalidAdminActionException,
-    BulkOperationException,
-)
-
 __all__ = [
     # Base exceptions
     "LetzShopException",
@@ -196,6 +222,19 @@ __all__ = [
     "MaxVendorsReachedException",
     "VendorValidationException",
 
+    # Vendor Domain
+    "VendorDomainNotFoundException",
+    "VendorDomainAlreadyExistsException",
+    "InvalidDomainFormatException",
+    "ReservedDomainException",
+    "DomainNotVerifiedException",
+    "DomainVerificationFailedException",
+    "DomainAlreadyVerifiedException",
+    "MultiplePrimaryDomainsException",
+    "DNSVerificationException",
+    "MaxDomainsReachedException",
+    "UnauthorizedDomainAccessException",
+
     # Product exceptions
     "ProductNotFoundException",
     "ProductAlreadyExistsException",

app/exceptions/vendor_domain.py

@@ -0,0 +1,168 @@
+# app/exceptions/vendor_domain.py
+"""
+Vendor domain management specific exceptions.
+"""
+
+from typing import Any, Dict, Optional
+from .base import (
+    ResourceNotFoundException,
+    ConflictException,
+    ValidationException,
+    BusinessLogicException,
+    ExternalServiceException
+)
+
+
+class VendorDomainNotFoundException(ResourceNotFoundException):
+    """Raised when a vendor domain is not found."""
+
+    def __init__(self, domain_identifier: str, identifier_type: str = "ID"):
+        if identifier_type.lower() == "domain":
+            message = f"Domain '{domain_identifier}' not found"
+        else:
+            message = f"Domain with ID '{domain_identifier}' not found"
+
+        super().__init__(
+            resource_type="VendorDomain",
+            identifier=domain_identifier,
+            message=message,
+            error_code="VENDOR_DOMAIN_NOT_FOUND",
+        )
+
+
+class VendorDomainAlreadyExistsException(ConflictException):
+    """Raised when trying to add a domain that already exists."""
+
+    def __init__(self, domain: str, existing_vendor_id: Optional[int] = None):
+        details = {"domain": domain}
+        if existing_vendor_id:
+            details["existing_vendor_id"] = existing_vendor_id
+
+        super().__init__(
+            message=f"Domain '{domain}' is already registered",
+            error_code="VENDOR_DOMAIN_ALREADY_EXISTS",
+            details=details,
+        )
+
+
+class InvalidDomainFormatException(ValidationException):
+    """Raised when domain format is invalid."""
+
+    def __init__(self, domain: str, reason: str = "Invalid domain format"):
+        super().__init__(
+            message=f"{reason}: {domain}",
+            field="domain",
+            details={"domain": domain, "reason": reason},
+        )
+        self.error_code = "INVALID_DOMAIN_FORMAT"
+
+
+class ReservedDomainException(ValidationException):
+    """Raised when trying to use a reserved domain."""
+
+    def __init__(self, domain: str, reserved_part: str):
+        super().__init__(
+            message=f"Domain cannot use reserved subdomain: {reserved_part}",
+            field="domain",
+            details={
+                "domain": domain,
+                "reserved_part": reserved_part
+            },
+        )
+        self.error_code = "RESERVED_DOMAIN"
+
+
+class DomainNotVerifiedException(BusinessLogicException):
+    """Raised when trying to activate an unverified domain."""
+
+    def __init__(self, domain_id: int, domain: str):
+        super().__init__(
+            message=f"Domain '{domain}' must be verified before activation",
+            error_code="DOMAIN_NOT_VERIFIED",
+            details={
+                "domain_id": domain_id,
+                "domain": domain
+            },
+        )
+
+
+class DomainVerificationFailedException(BusinessLogicException):
+    """Raised when domain verification fails."""
+
+    def __init__(self, domain: str, reason: str):
+        super().__init__(
+            message=f"Domain verification failed for '{domain}': {reason}",
+            error_code="DOMAIN_VERIFICATION_FAILED",
+            details={
+                "domain": domain,
+                "reason": reason
+            },
+        )
+
+
+class DomainAlreadyVerifiedException(BusinessLogicException):
+    """Raised when trying to verify an already verified domain."""
+
+    def __init__(self, domain_id: int, domain: str):
+        super().__init__(
+            message=f"Domain '{domain}' is already verified",
+            error_code="DOMAIN_ALREADY_VERIFIED",
+            details={
+                "domain_id": domain_id,
+                "domain": domain
+            },
+        )
+
+
+class MultiplePrimaryDomainsException(BusinessLogicException):
+    """Raised when trying to set multiple primary domains."""
+
+    def __init__(self, vendor_id: int):
+        super().__init__(
+            message=f"Vendor can only have one primary domain",
+            error_code="MULTIPLE_PRIMARY_DOMAINS",
+            details={"vendor_id": vendor_id},
+        )
+
+
+class DNSVerificationException(ExternalServiceException):
+    """Raised when DNS verification service fails."""
+
+    def __init__(self, domain: str, reason: str):
+        super().__init__(
+            service_name="DNS",
+            message=f"DNS verification failed for '{domain}': {reason}",
+            error_code="DNS_VERIFICATION_ERROR",
+            details={
+                "domain": domain,
+                "reason": reason
+            },
+        )
+
+
+class MaxDomainsReachedException(BusinessLogicException):
+    """Raised when vendor tries to add more domains than allowed."""
+
+    def __init__(self, vendor_id: int, max_domains: int):
+        super().__init__(
+            message=f"Maximum number of domains reached ({max_domains})",
+            error_code="MAX_DOMAINS_REACHED",
+            details={
+                "vendor_id": vendor_id,
+                "max_domains": max_domains
+            },
+        )
+
+
+class UnauthorizedDomainAccessException(BusinessLogicException):
+    """Raised when trying to access domain that doesn't belong to vendor."""
+
+    def __init__(self, domain_id: int, vendor_id: int):
+        super().__init__(
+            message=f"Unauthorized access to domain {domain_id}",
+            error_code="UNAUTHORIZED_DOMAIN_ACCESS",
+            details={
+                "domain_id": domain_id,
+                "vendor_id": vendor_id
+            },
+        )

app/services/vendor_domain_service.py

@@ -0,0 +1,458 @@
+# app/services/vendor_domain_service.py
+"""
+Vendor domain service for managing custom domain operations.
+
+This module provides classes and functions for:
+- Adding and removing custom domains
+- Domain verification via DNS
+- Domain activation and deactivation
+- Setting primary domains
+- Domain validation and normalization
+"""
+
+import logging
+import secrets
+from typing import List, Tuple, Optional
+from datetime import datetime, timezone
+
+from sqlalchemy.orm import Session
+from sqlalchemy import and_
+
+from app.exceptions import (
+    VendorNotFoundException,
+    VendorDomainNotFoundException,
+    VendorDomainAlreadyExistsException,
+    InvalidDomainFormatException,
+    ReservedDomainException,
+    DomainNotVerifiedException,
+    DomainVerificationFailedException,
+    DomainAlreadyVerifiedException,
+    MultiplePrimaryDomainsException,
+    DNSVerificationException,
+    MaxDomainsReachedException,
+    UnauthorizedDomainAccessException,
+    ValidationException,
+)
+from models.schema.vendor_domain import VendorDomainCreate, VendorDomainUpdate
+from models.database.vendor import Vendor
+from models.database.vendor_domain import VendorDomain
+
+logger = logging.getLogger(__name__)
+
+
+class VendorDomainService:
+    """Service class for vendor domain operations."""
+
+    def __init__(self):
+        self.max_domains_per_vendor = 10  # Configure as needed
+        self.reserved_subdomains = ['www', 'admin', 'api', 'mail', 'smtp', 'ftp', 'cpanel', 'webmail']
+
+    def add_domain(
+        self,
+        db: Session,
+        vendor_id: int,
+        domain_data: VendorDomainCreate
+    ) -> VendorDomain:
+        """
+        Add a custom domain to vendor.
+
+        Args:
+            db: Database session
+            vendor_id: Vendor ID to add domain to
+            domain_data: Domain creation data
+
+        Returns:
+            Created VendorDomain object
+
+        Raises:
+            VendorNotFoundException: If vendor not found
+            VendorDomainAlreadyExistsException: If domain already registered
+            MaxDomainsReachedException: If vendor has reached max domains
+            InvalidDomainFormatException: If domain format is invalid
+        """
+        try:
+            # Verify vendor exists
+            vendor = self._get_vendor_by_id_or_raise(db, vendor_id)
+
+            # Check domain limit
+            self._check_domain_limit(db, vendor_id)
+
+            # Normalize domain
+            normalized_domain = VendorDomain.normalize_domain(domain_data.domain)
+
+            # Validate domain format
+            self._validate_domain_format(normalized_domain)
+
+            # Check if domain already exists
+            if self._domain_exists(db, normalized_domain):
+                existing_domain = db.query(VendorDomain).filter(
+                    VendorDomain.domain == normalized_domain
+                ).first()
+                raise VendorDomainAlreadyExistsException(
+                    normalized_domain,
+                    existing_domain.vendor_id if existing_domain else None
+                )
+
+            # If setting as primary, unset other primary domains
+            if domain_data.is_primary:
+                self._unset_primary_domains(db, vendor_id)
+
+            # Create domain record
+            new_domain = VendorDomain(
+                vendor_id=vendor_id,
+                domain=normalized_domain,
+                is_primary=domain_data.is_primary,
+                verification_token=secrets.token_urlsafe(32),
+                is_verified=False,  # Requires DNS verification
+                is_active=False,    # Cannot be active until verified
+                ssl_status="pending"
+            )
+
+            db.add(new_domain)
+            db.commit()
+            db.refresh(new_domain)
+
+            logger.info(f"Domain {normalized_domain} added to vendor {vendor_id}")
+            return new_domain
+
+        except (
+            VendorNotFoundException,
+            VendorDomainAlreadyExistsException,
+            MaxDomainsReachedException,
+            InvalidDomainFormatException,
+            ReservedDomainException
+        ):
+            db.rollback()
+            raise
+        except Exception as e:
+            db.rollback()
+            logger.error(f"Error adding domain: {str(e)}")
+            raise ValidationException("Failed to add domain")
+
+    def get_vendor_domains(
+        self,
+        db: Session,
+        vendor_id: int
+    ) -> List[VendorDomain]:
+        """
+        Get all domains for a vendor.
+
+        Args:
+            db: Database session
+            vendor_id: Vendor ID
+
+        Returns:
+            List of VendorDomain objects
+
+        Raises:
+            VendorNotFoundException: If vendor not found
+        """
+        try:
+            # Verify vendor exists
+            self._get_vendor_by_id_or_raise(db, vendor_id)
+
+            domains = db.query(VendorDomain).filter(
+                VendorDomain.vendor_id == vendor_id
+            ).order_by(
+                VendorDomain.is_primary.desc(),
+                VendorDomain.created_at.desc()
+            ).all()
+
+            return domains
+
+        except VendorNotFoundException:
+            raise
+        except Exception as e:
+            logger.error(f"Error getting vendor domains: {str(e)}")
+            raise ValidationException("Failed to retrieve domains")
+
+    def get_domain_by_id(
+        self,
+        db: Session,
+        domain_id: int
+    ) -> VendorDomain:
+        """
+        Get domain by ID.
+
+        Args:
+            db: Database session
+            domain_id: Domain ID
+
+        Returns:
+            VendorDomain object
+
+        Raises:
+            VendorDomainNotFoundException: If domain not found
+        """
+        domain = db.query(VendorDomain).filter(VendorDomain.id == domain_id).first()
+        if not domain:
+            raise VendorDomainNotFoundException(str(domain_id))
+        return domain
+
+    def update_domain(
+        self,
+        db: Session,
+        domain_id: int,
+        domain_update: VendorDomainUpdate
+    ) -> VendorDomain:
+        """
+        Update domain settings.
+
+        Args:
+            db: Database session
+            domain_id: Domain ID
+            domain_update: Update data
+
+        Returns:
+            Updated VendorDomain object
+
+        Raises:
+            VendorDomainNotFoundException: If domain not found
+            DomainNotVerifiedException: If trying to activate unverified domain
+        """
+        try:
+            domain = self.get_domain_by_id(db, domain_id)
+
+            # If setting as primary, unset other primary domains
+            if domain_update.is_primary:
+                self._unset_primary_domains(db, domain.vendor_id, exclude_domain_id=domain_id)
+                domain.is_primary = True
+
+            # If activating, check verification
+            if domain_update.is_active is True and not domain.is_verified:
+                raise DomainNotVerifiedException(domain_id, domain.domain)
+
+            # Update fields
+            if domain_update.is_active is not None:
+                domain.is_active = domain_update.is_active
+
+            db.commit()
+            db.refresh(domain)
+
+            logger.info(f"Domain {domain.domain} updated")
+            return domain
+
+        except (VendorDomainNotFoundException, DomainNotVerifiedException):
+            db.rollback()
+            raise
+        except Exception as e:
+            db.rollback()
+            logger.error(f"Error updating domain: {str(e)}")
+            raise ValidationException("Failed to update domain")
+
+    def delete_domain(
+        self,
+        db: Session,
+        domain_id: int
+    ) -> str:
+        """
+        Delete a custom domain.
+
+        Args:
+            db: Database session
+            domain_id: Domain ID
+
+        Returns:
+            Success message
+
+        Raises:
+            VendorDomainNotFoundException: If domain not found
+        """
+        try:
+            domain = self.get_domain_by_id(db, domain_id)
+            domain_name = domain.domain
+            vendor_id = domain.vendor_id
+
+            db.delete(domain)
+            db.commit()
+
+            logger.info(f"Domain {domain_name} deleted from vendor {vendor_id}")
+            return f"Domain {domain_name} deleted successfully"
+
+        except VendorDomainNotFoundException:
+            db.rollback()
+            raise
+        except Exception as e:
+            db.rollback()
+            logger.error(f"Error deleting domain: {str(e)}")
+            raise ValidationException("Failed to delete domain")
+
+    def verify_domain(
+        self,
+        db: Session,
+        domain_id: int
+    ) -> Tuple[VendorDomain, str]:
+        """
+        Verify domain ownership via DNS TXT record.
+
+        The vendor must add a TXT record:
+        Name: _letzshop-verify.{domain}
+        Value: {verification_token}
+
+        Args:
+            db: Database session
+            domain_id: Domain ID
+
+        Returns:
+            Tuple of (verified_domain, message)
+
+        Raises:
+            VendorDomainNotFoundException: If domain not found
+            DomainAlreadyVerifiedException: If already verified
+            DomainVerificationFailedException: If verification fails
+        """
+        try:
+            import dns.resolver
+
+            domain = self.get_domain_by_id(db, domain_id)
+
+            # Check if already verified
+            if domain.is_verified:
+                raise DomainAlreadyVerifiedException(domain_id, domain.domain)
+
+            # Query DNS TXT records
+            try:
+                txt_records = dns.resolver.resolve(
+                    f"_letzshop-verify.{domain.domain}",
+                    'TXT'
+                )
+
+                # Check if verification token is present
+                for txt in txt_records:
+                    txt_value = txt.to_text().strip('"')
+                    if txt_value == domain.verification_token:
+                        # Verification successful
+                        domain.is_verified = True
+                        domain.verified_at = datetime.now(timezone.utc)
+                        db.commit()
+                        db.refresh(domain)
+
+                        logger.info(f"Domain {domain.domain} verified successfully")
+                        return domain, f"Domain {domain.domain} verified successfully"
+
+                # Token not found
+                raise DomainVerificationFailedException(
+                    domain.domain,
+                    "Verification token not found in DNS records"
+                )
+
+            except dns.resolver.NXDOMAIN:
+                raise DomainVerificationFailedException(
+                    domain.domain,
+                    f"DNS record _letzshop-verify.{domain.domain} not found"
+                )
+            except dns.resolver.NoAnswer:
+                raise DomainVerificationFailedException(
+                    domain.domain,
+                    "No TXT records found for verification"
+                )
+            except Exception as dns_error:
+                raise DNSVerificationException(
+                    domain.domain,
+                    str(dns_error)
+                )
+
+        except (
+            VendorDomainNotFoundException,
+            DomainAlreadyVerifiedException,
+            DomainVerificationFailedException,
+            DNSVerificationException
+        ):
+            raise
+        except Exception as e:
+            logger.error(f"Error verifying domain: {str(e)}")
+            raise ValidationException("Failed to verify domain")
+
+    def get_verification_instructions(
+        self,
+        db: Session,
+        domain_id: int
+    ) -> dict:
+        """
+        Get DNS verification instructions for domain.
+
+        Args:
+            db: Database session
+            domain_id: Domain ID
+
+        Returns:
+            Dict with verification instructions
+
+        Raises:
+            VendorDomainNotFoundException: If domain not found
+        """
+        domain = self.get_domain_by_id(db, domain_id)
+
+        return {
+            "domain": domain.domain,
+            "verification_token": domain.verification_token,
+            "instructions": {
+                "step1": "Go to your domain's DNS settings (at your domain registrar)",
+                "step2": "Add a new TXT record with the following values:",
+                "step3": "Wait for DNS propagation (5-15 minutes)",
+                "step4": "Click 'Verify Domain' button in admin panel"
+            },
+            "txt_record": {
+                "type": "TXT",
+                "name": "_letzshop-verify",
+                "value": domain.verification_token,
+                "ttl": 3600
+            },
+            "common_registrars": {
+                "Cloudflare": "https://dash.cloudflare.com",
+                "GoDaddy": "https://dcc.godaddy.com/manage/dns",
+                "Namecheap": "https://www.namecheap.com/myaccount/domain-list/",
+                "Google Domains": "https://domains.google.com"
+            }
+        }
+
+    # Private helper methods
+    def _get_vendor_by_id_or_raise(self, db: Session, vendor_id: int) -> Vendor:
+        """Get vendor by ID or raise exception."""
+        vendor = db.query(Vendor).filter(Vendor.id == vendor_id).first()
+        if not vendor:
+            raise VendorNotFoundException(str(vendor_id), identifier_type="id")
+        return vendor
+
+    def _check_domain_limit(self, db: Session, vendor_id: int) -> None:
+        """Check if vendor has reached maximum domain limit."""
+        domain_count = db.query(VendorDomain).filter(
+            VendorDomain.vendor_id == vendor_id
+        ).count()
+
+        if domain_count >= self.max_domains_per_vendor:
+            raise MaxDomainsReachedException(vendor_id, self.max_domains_per_vendor)
+
+    def _domain_exists(self, db: Session, domain: str) -> bool:
+        """Check if domain already exists in system."""
+        return db.query(VendorDomain).filter(
+            VendorDomain.domain == domain
+        ).first() is not None
+
+    def _validate_domain_format(self, domain: str) -> None:
+        """Validate domain format and check for reserved subdomains."""
+        # Check for reserved subdomains
+        first_part = domain.split('.')[0]
+        if first_part in self.reserved_subdomains:
+            raise ReservedDomainException(domain, first_part)
+
+    def _unset_primary_domains(
+        self,
+        db: Session,
+        vendor_id: int,
+        exclude_domain_id: Optional[int] = None
+    ) -> None:
+        """Unset all primary domains for vendor."""
+        query = db.query(VendorDomain).filter(
+            VendorDomain.vendor_id == vendor_id,
+            VendorDomain.is_primary == True
+        )
+
+        if exclude_domain_id:
+            query = query.filter(VendorDomain.id != exclude_domain_id)
+
+        query.update({"is_primary": False})
+
+
+# Create service instance
+vendor_domain_service = VendorDomainService()

app/templates/admin/icons.html

@@ -12,22 +12,26 @@
     <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
         Icons Browser
     </h2>
-    <a href="/admin/dashboard" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700">
+    <a href="/admin/dashboard"
+       class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700">
         <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
         Back to Dashboard
     </a>
 </div>
 
-<!-- Introduction -->
-<div class="mb-8 p-6 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg shadow-lg text-white">
+<!-- Introduction Card -->
+<div class="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg shadow-lg p-6 mb-8">
     <div class="flex items-start">
-        <span x-html="$icon('photograph', 'w-10 h-10 mr-4 flex-shrink-0')"></span>
-        <div>
-            <h3 class="text-xl font-bold mb-2">Icon Library</h3>
-            <p class="text-indigo-100 mb-3">
-                Browse all <span x-text="allIcons.length"></span> available icons. Click any icon to copy its name or usage code.
+        <div class="flex-shrink-0 text-gray-700 dark:text-gray-200">
+            <span x-html="$icon('photograph', 'w-12 h-12')"></span>
+        </div>
+        <div class="ml-4">
+            <h3 class="text-xl font-bold mb-2 text-gray-700 dark:text-gray-200">Icon Library</h3>
+            <p class="text-gray-700 dark:text-gray-200 opacity-90">
+                Browse all <span x-text="allIcons.length"></span> available icons. Click any icon to copy its name or
+                usage code.
             </p>
-            <div class="flex items-center gap-4 text-sm">
+            <div class="flex items-center gap-4 text-sm text-gray-700 dark:text-gray-200 opacity-90">
                 <div class="flex items-center">
                     <span x-html="$icon('check-circle', 'w-4 h-4 mr-1')"></span>
                     <span>Heroicons</span>
@@ -46,270 +50,279 @@
 </div>
 
 <!-- Search and Filter -->
-    <div class="mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
-        <div class="flex flex-col md:flex-row gap-4">
-            <!-- Search Box -->
-            <div class="flex-1">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    Search Icons
-                </label>
-                <div class="relative">
+<div class="mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+    <div class="flex flex-col md:flex-row gap-4">
+        <!-- Search Box -->
+        <div class="flex-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Search Icons
+            </label>
+            <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
+                <input
                         type="text"
                         x-model="searchQuery"
                         @input="filterIcons()"
                         placeholder="Type to search... (e.g., 'user', 'arrow', 'check')"
                         class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-lg focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300"
-                    />
-                </div>
-                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                    Found <span x-text="filteredIcons.length"></span> icon(s)
-                </p>
+                />
             </div>
+            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                Found <span x-text="filteredIcons.length"></span> icon(s)
+            </p>
+        </div>
 
-            <!-- Category Pills -->
-            <div class="flex-1">
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    Filter by Category
-                </label>
-                <div class="flex flex-wrap gap-2">
-                    <template x-for="category in categories.slice(0, 6)" :key="category.id">
-                        <button
+        <!-- Category Pills -->
+        <div class="flex-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Filter by Category
+            </label>
+            <div class="flex flex-wrap gap-2">
+                <template x-for="category in categories.slice(0, 6)" :key="category.id">
+                    <button
                             @click="setCategory(category.id)"
                             class="inline-flex items-center px-3 py-1 text-xs font-medium rounded-full transition-colors"
                             :class="activeCategory === category.id
                                 ? 'bg-purple-600 text-white'
                                 : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'"
-                        >
-                            <span x-html="$icon(category.icon, 'w-3 h-3 mr-1')"></span>
-                            <span x-text="category.name"></span>
-                            <span class="ml-1 opacity-75" x-text="'(' + getCategoryCount(category.id) + ')'"></span>
-                        </button>
-                    </template>
-                </div>
+                    >
+                        <span x-html="$icon(category.icon, 'w-3 h-3 mr-1')"></span>
+                        <span x-text="category.name"></span>
+                        <span class="ml-1 opacity-75" x-text="'(' + getCategoryCount(category.id) + ')'"></span>
+                    </button>
+                </template>
             </div>
         </div>
+    </div>
 
-        <!-- All Categories (Expandable) -->
-        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
-            <details class="group">
-                <summary class="cursor-pointer text-sm font-medium text-purple-600 dark:text-purple-400 hover:text-purple-700 flex items-center">
-                    <span x-html="$icon('chevron-right', 'w-4 h-4 mr-1 group-open:rotate-90 transition-transform')"></span>
-                    Show All Categories
-                </summary>
-                <div class="mt-3 flex flex-wrap gap-2">
-                    <template x-for="category in categories" :key="category.id">
-                        <button
+    <!-- All Categories (Expandable) -->
+    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <details class="group">
+            <summary
+                    class="cursor-pointer text-sm font-medium text-purple-600 dark:text-purple-400 hover:text-purple-700 flex items-center">
+                <span x-html="$icon('chevron-right', 'w-4 h-4 mr-1 group-open:rotate-90 transition-transform')"></span>
+                Show All Categories
+            </summary>
+            <div class="mt-3 flex flex-wrap gap-2">
+                <template x-for="category in categories" :key="category.id">
+                    <button
                             @click="setCategory(category.id)"
                             class="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-lg transition-colors"
                             :class="activeCategory === category.id
                                 ? 'bg-purple-600 text-white'
                                 : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'"
-                        >
-                            <span x-html="$icon(category.icon, 'w-4 h-4 mr-2')"></span>
-                            <span x-text="category.name"></span>
-                            <span class="ml-2 px-2 py-0.5 bg-black bg-opacity-10 rounded-full" x-text="getCategoryCount(category.id)"></span>
-                        </button>
-                    </template>
-                </div>
-            </details>
-        </div>
+                    >
+                        <span x-html="$icon(category.icon, 'w-4 h-4 mr-2')"></span>
+                        <span x-text="category.name"></span>
+                        <span class="ml-2 px-2 py-0.5 bg-black bg-opacity-10 rounded-full"
+                              x-text="getCategoryCount(category.id)"></span>
+                    </button>
+                </template>
+            </div>
+        </details>
     </div>
+</div>
 
-    <!-- Active Category Info -->
-    <div x-show="activeCategory !== 'all'" class="mb-4 flex items-center justify-between bg-purple-50 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-200 dark:border-purple-700 rounded-lg px-4 py-3">
-        <div class="flex items-center">
-            <span x-html="$icon(getCategoryInfo(activeCategory).icon, 'w-5 h-5 text-purple-600 dark:text-purple-400 mr-2')"></span>
-            <span class="text-sm font-medium text-purple-900 dark:text-purple-200">
+<!-- Active Category Info -->
+<div x-show="activeCategory !== 'all'"
+     class="mb-4 flex items-center justify-between bg-purple-50 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-200 dark:border-purple-700 rounded-lg px-4 py-3">
+    <div class="flex items-center">
+        <span x-html="$icon(getCategoryInfo(activeCategory).icon, 'w-5 h-5 text-purple-600 dark:text-purple-400 mr-2')"></span>
+        <span class="text-sm font-medium text-purple-900 dark:text-purple-200">
                 Showing <span x-text="getCategoryInfo(activeCategory).name"></span>
                 (<span x-text="filteredIcons.length"></span> icons)
             </span>
-        </div>
-        <button
+    </div>
+    <button
             @click="setCategory('all')"
             class="text-sm text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 flex items-center"
+    >
+        <span x-html="$icon('close', 'w-4 h-4 mr-1')"></span>
+        Clear Filter
+    </button>
+</div>
+
+<!-- Icons Grid -->
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+    <!-- Empty State -->
+    <div x-show="filteredIcons.length === 0" class="text-center py-12">
+        <span x-html="$icon('exclamation', 'w-16 h-16 mx-auto text-gray-400 mb-4')"></span>
+        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">No icons found</h3>
+        <p class="text-gray-500 dark:text-gray-400 mb-4">Try adjusting your search or filter</p>
+        <button
+                @click="searchQuery = ''; setCategory('all')"
+                class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
         >
-            <span x-html="$icon('close', 'w-4 h-4 mr-1')"></span>
-            Clear Filter
+            Clear Filters
         </button>
     </div>
 
     <!-- Icons Grid -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
-        <!-- Empty State -->
-        <div x-show="filteredIcons.length === 0" class="text-center py-12">
-            <span x-html="$icon('exclamation', 'w-16 h-16 mx-auto text-gray-400 mb-4')"></span>
-            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">No icons found</h3>
-            <p class="text-gray-500 dark:text-gray-400 mb-4">Try adjusting your search or filter</p>
-            <button
-                @click="searchQuery = ''; setCategory('all')"
-                class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
-            >
-                Clear Filters
-            </button>
-        </div>
-
-        <!-- Icons Grid -->
-        <div x-show="filteredIcons.length > 0" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3">
-            <template x-for="icon in filteredIcons" :key="icon.name">
-                <div
+    <div x-show="filteredIcons.length > 0"
+         class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3">
+        <template x-for="icon in filteredIcons" :key="icon.name">
+            <div
                     @click="selectIcon(icon.name)"
                     class="group relative flex flex-col items-center justify-center p-4 bg-gray-50 dark:bg-gray-900 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900 dark:hover:bg-opacity-20 cursor-pointer transition-all hover:shadow-md border-2 border-transparent hover:border-purple-300 dark:hover:border-purple-700"
                     :class="{ 'border-purple-500 bg-purple-50 dark:bg-purple-900 dark:bg-opacity-30': selectedIcon === icon.name }"
-                >
-                    <!-- Icon -->
-                    <div class="text-gray-600 dark:text-gray-400 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
-                        <span x-html="$icon(icon.name, 'w-8 h-8')"></span>
-                    </div>
-
-                    <!-- Icon Name -->
-                    <p class="mt-2 text-xs text-center text-gray-600 dark:text-gray-400 font-mono truncate w-full px-1" :title="icon.name" x-text="icon.name"></p>
-
-                    <!-- Hover Actions -->
-                    <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-white dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 rounded-lg">
-                        <div class="flex gap-1">
-                            <button
-                                @click.stop="copyIconName(icon.name)"
-                                class="p-2 bg-purple-600 text-white rounded hover:bg-purple-700 transition-colors"
-                                title="Copy name"
-                            >
-                                <span x-html="$icon('duplicate', 'w-4 h-4')"></span>
-                            </button>
-                            <button
-                                @click.stop="copyIconUsage(icon.name)"
-                                class="p-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition-colors"
-                                title="Copy usage"
-                            >
-                                <span x-html="$icon('code', 'w-4 h-4')"></span>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </div>
-    </div>
-
-    <!-- Selected Icon Details -->
-    <div x-show="selectedIcon" class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
-        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">
-            Selected Icon: <span class="font-mono text-purple-600 dark:text-purple-400" x-text="selectedIcon"></span>
-        </h3>
-
-        <div class="grid md:grid-cols-2 gap-6">
-            <!-- Preview -->
-            <div>
-                <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Preview</h4>
-                <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-8 flex items-center justify-center gap-6">
-                    <div class="text-gray-800 dark:text-gray-200">
-                        <span x-html="$icon(selectedIcon, 'w-12 h-12')"></span>
-                    </div>
-                    <div class="text-gray-800 dark:text-gray-200">
-                        <span x-html="$icon(selectedIcon, 'w-16 h-16')"></span>
-                    </div>
-                    <div class="text-gray-800 dark:text-gray-200">
-                        <span x-html="$icon(selectedIcon, 'w-24 h-24')"></span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Usage Code -->
-            <div>
-                <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Usage Code</h4>
-
-                <!-- Alpine.js Usage -->
-                <div class="mb-4">
-                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Alpine.js (Recommended)</label>
-                    <div class="relative">
-                        <pre class="bg-gray-900 text-gray-100 rounded-lg p-3 text-xs overflow-x-auto"><code x-text="'x-html=&quot;$icon(\'' + selectedIcon + '\', \'w-5 h-5\')&quot;'"></code></pre>
-                        <button
-                            @click="copyIconUsage(selectedIcon)"
-                            class="absolute top-2 right-2 p-1.5 bg-gray-800 text-gray-300 rounded hover:bg-gray-700 transition-colors"
-                            title="Copy"
-                        >
-                            <span x-html="$icon('duplicate', 'w-4 h-4')"></span>
-                        </button>
-                    </div>
+            >
+                <!-- Icon -->
+                <div class="text-gray-600 dark:text-gray-400 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
+                    <span x-html="$icon(icon.name, 'w-8 h-8')"></span>
                 </div>
 
                 <!-- Icon Name -->
-                <div>
-                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Icon Name</label>
-                    <div class="relative">
-                        <pre class="bg-gray-900 text-gray-100 rounded-lg p-3 text-xs overflow-x-auto"><code x-text="selectedIcon"></code></pre>
+                <p class="mt-2 text-xs text-center text-gray-600 dark:text-gray-400 font-mono truncate w-full px-1"
+                   :title="icon.name" x-text="icon.name"></p>
+
+                <!-- Hover Actions -->
+                <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-white dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 rounded-lg">
+                    <div class="flex gap-1">
                         <button
-                            @click="copyIconName(selectedIcon)"
-                            class="absolute top-2 right-2 p-1.5 bg-gray-800 text-gray-300 rounded hover:bg-gray-700 transition-colors"
-                            title="Copy"
+                                @click.stop="copyIconName(icon.name)"
+                                class="p-2 bg-purple-600 text-white rounded hover:bg-purple-700 transition-colors"
+                                title="Copy name"
                         >
                             <span x-html="$icon('duplicate', 'w-4 h-4')"></span>
                         </button>
+                        <button
+                                @click.stop="copyIconUsage(icon.name)"
+                                class="p-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition-colors"
+                                title="Copy usage"
+                        >
+                            <span x-html="$icon('code', 'w-4 h-4')"></span>
+                        </button>
                     </div>
                 </div>
             </div>
+        </template>
+    </div>
+</div>
+
+<!-- Selected Icon Details -->
+<div x-show="selectedIcon" class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">
+        Selected Icon: <span class="font-mono text-purple-600 dark:text-purple-400" x-text="selectedIcon"></span>
+    </h3>
+
+    <div class="grid md:grid-cols-2 gap-6">
+        <!-- Preview -->
+        <div>
+            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Preview</h4>
+            <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-8 flex items-center justify-center gap-6">
+                <div class="text-gray-800 dark:text-gray-200">
+                    <span x-html="$icon(selectedIcon, 'w-12 h-12')"></span>
+                </div>
+                <div class="text-gray-800 dark:text-gray-200">
+                    <span x-html="$icon(selectedIcon, 'w-16 h-16')"></span>
+                </div>
+                <div class="text-gray-800 dark:text-gray-200">
+                    <span x-html="$icon(selectedIcon, 'w-24 h-24')"></span>
+                </div>
+            </div>
         </div>
 
-        <!-- Size Examples -->
-        <div class="mt-6">
-            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Common Sizes</h4>
-            <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
-                <div class="flex items-center gap-8">
-                    <div class="text-center">
-                        <div class="text-gray-800 dark:text-gray-200 mb-1">
-                            <span x-html="$icon(selectedIcon, 'w-4 h-4')"></span>
-                        </div>
-                        <code class="text-xs text-gray-600 dark:text-gray-400">w-4 h-4</code>
-                    </div>
-                    <div class="text-center">
-                        <div class="text-gray-800 dark:text-gray-200 mb-1">
-                            <span x-html="$icon(selectedIcon, 'w-5 h-5')"></span>
-                        </div>
-                        <code class="text-xs text-gray-600 dark:text-gray-400">w-5 h-5</code>
-                    </div>
-                    <div class="text-center">
-                        <div class="text-gray-800 dark:text-gray-200 mb-1">
-                            <span x-html="$icon(selectedIcon, 'w-6 h-6')"></span>
-                        </div>
-                        <code class="text-xs text-gray-600 dark:text-gray-400">w-6 h-6</code>
-                    </div>
-                    <div class="text-center">
-                        <div class="text-gray-800 dark:text-gray-200 mb-1">
-                            <span x-html="$icon(selectedIcon, 'w-8 h-8')"></span>
-                        </div>
-                        <code class="text-xs text-gray-600 dark:text-gray-400">w-8 h-8</code>
-                    </div>
-                    <div class="text-center">
-                        <div class="text-gray-800 dark:text-gray-200 mb-1">
-                            <span x-html="$icon(selectedIcon, 'w-12 h-12')"></span>
-                        </div>
-                        <code class="text-xs text-gray-600 dark:text-gray-400">w-12 h-12</code>
-                    </div>
+        <!-- Usage Code -->
+        <div>
+            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Usage Code</h4>
+
+            <!-- Alpine.js Usage -->
+            <div class="mb-4">
+                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Alpine.js
+                    (Recommended)</label>
+                <div class="relative">
+                    <pre class="bg-gray-900 text-gray-100 rounded-lg p-3 text-xs overflow-x-auto"><code
+                            x-text="'x-html=&quot;$icon(\'' + selectedIcon + '\', \'w-5 h-5\')&quot;'"></code></pre>
+                    <button
+                            @click="copyIconUsage(selectedIcon)"
+                            class="absolute top-2 right-2 p-1.5 bg-gray-800 text-gray-300 rounded hover:bg-gray-700 transition-colors"
+                            title="Copy"
+                    >
+                        <span x-html="$icon('duplicate', 'w-4 h-4')"></span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Icon Name -->
+            <div>
+                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Icon Name</label>
+                <div class="relative">
+                    <pre class="bg-gray-900 text-gray-100 rounded-lg p-3 text-xs overflow-x-auto"><code
+                            x-text="selectedIcon"></code></pre>
+                    <button
+                            @click="copyIconName(selectedIcon)"
+                            class="absolute top-2 right-2 p-1.5 bg-gray-800 text-gray-300 rounded hover:bg-gray-700 transition-colors"
+                            title="Copy"
+                    >
+                        <span x-html="$icon('duplicate', 'w-4 h-4')"></span>
+                    </button>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Usage Guide -->
-    <div class="mt-6 bg-blue-50 dark:bg-gray-800 border border-blue-200 dark:border-gray-700 rounded-lg p-6">
-        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">
-            <span x-html="$icon('book-open', 'w-5 h-5 mr-2 text-blue-600')"></span>
-            How to Use Icons
-        </h3>
-        <div class="grid md:grid-cols-2 gap-6 text-sm">
-            <div>
-                <h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">In Alpine.js Templates</h4>
-                <p class="text-gray-600 dark:text-gray-400 mb-2">Use the <code class="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded">x-html</code> directive:</p>
-                <pre class="bg-gray-900 text-gray-100 rounded p-2 text-xs overflow-x-auto"><code>&lt;span x-html="$icon('home', 'w-5 h-5')"&gt;&lt;/span&gt;</code></pre>
-            </div>
-            <div>
-                <h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">Customizing Size & Color</h4>
-                <p class="text-gray-600 dark:text-gray-400 mb-2">Use Tailwind classes:</p>
-                <pre class="bg-gray-900 text-gray-100 rounded p-2 text-xs overflow-x-auto"><code>&lt;span x-html="$icon('check', 'w-6 h-6 text-green-500')"&gt;&lt;/span&gt;</code></pre>
+    <!-- Size Examples -->
+    <div class="mt-6">
+        <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Common Sizes</h4>
+        <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
+            <div class="flex items-center gap-8">
+                <div class="text-center">
+                    <div class="text-gray-800 dark:text-gray-200 mb-1">
+                        <span x-html="$icon(selectedIcon, 'w-4 h-4')"></span>
+                    </div>
+                    <code class="text-xs text-gray-600 dark:text-gray-400">w-4 h-4</code>
+                </div>
+                <div class="text-center">
+                    <div class="text-gray-800 dark:text-gray-200 mb-1">
+                        <span x-html="$icon(selectedIcon, 'w-5 h-5')"></span>
+                    </div>
+                    <code class="text-xs text-gray-600 dark:text-gray-400">w-5 h-5</code>
+                </div>
+                <div class="text-center">
+                    <div class="text-gray-800 dark:text-gray-200 mb-1">
+                        <span x-html="$icon(selectedIcon, 'w-6 h-6')"></span>
+                    </div>
+                    <code class="text-xs text-gray-600 dark:text-gray-400">w-6 h-6</code>
+                </div>
+                <div class="text-center">
+                    <div class="text-gray-800 dark:text-gray-200 mb-1">
+                        <span x-html="$icon(selectedIcon, 'w-8 h-8')"></span>
+                    </div>
+                    <code class="text-xs text-gray-600 dark:text-gray-400">w-8 h-8</code>
+                </div>
+                <div class="text-center">
+                    <div class="text-gray-800 dark:text-gray-200 mb-1">
+                        <span x-html="$icon(selectedIcon, 'w-12 h-12')"></span>
+                    </div>
+                    <code class="text-xs text-gray-600 dark:text-gray-400">w-12 h-12</code>
+                </div>
             </div>
         </div>
     </div>
+</div>
+
+<!-- Usage Guide -->
+<div class="mt-6 bg-blue-50 dark:bg-gray-800 border border-blue-200 dark:border-gray-700 rounded-lg p-6">
+    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">
+        <span x-html="$icon('book-open', 'w-5 h-5 mr-2 text-blue-600')"></span>
+        How to Use Icons
+    </h3>
+    <div class="grid md:grid-cols-2 gap-6 text-sm">
+        <div>
+            <h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">In Alpine.js Templates</h4>
+            <p class="text-gray-600 dark:text-gray-400 mb-2">Use the <code
+                    class="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded">x-html</code> directive:</p>
+            <pre class="bg-gray-900 text-gray-100 rounded p-2 text-xs overflow-x-auto"><code>&lt;span x-html="$icon('home', 'w-5 h-5')"&gt;&lt;/span&gt;</code></pre>
+        </div>
+        <div>
+            <h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">Customizing Size & Color</h4>
+            <p class="text-gray-600 dark:text-gray-400 mb-2">Use Tailwind classes:</p>
+            <pre class="bg-gray-900 text-gray-100 rounded p-2 text-xs overflow-x-auto"><code>&lt;span x-html="$icon('check', 'w-6 h-6 text-green-500')"&gt;&lt;/span&gt;</code></pre>
+        </div>
+    </div>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}

app/templates/admin/testing-hub.html

@@ -12,17 +12,22 @@
     <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
         Testing Hub
     </h2>
+    <a href="/admin/dashboard"
+       class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700">
+        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
+        Back to Dashboard
+    </a>
 </div>
 
 <!-- Introduction Card -->
 <div class="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg shadow-lg p-6 mb-8">
     <div class="flex items-start">
-        <div class="flex-shrink-0 text-white">
+        <div class="flex-shrink-0 text-gray-700 dark:text-gray-200">
             <span x-html="$icon('beaker', 'w-12 h-12')"></span>
         </div>
         <div class="ml-4">
-            <h3 class="text-xl font-bold mb-2 text-white">Testing & QA Tools</h3>
-            <p class="text-white opacity-90">
+            <h3 class="text-xl font-bold mb-2 text-gray-700 dark:text-gray-200">Testing & QA Tools</h3>
+            <p class="text-gray-700 dark:text-gray-200 opacity-90">
                 Comprehensive testing tools for manual QA, feature verification, and bug reproduction.
                 These pages help you test specific flows without writing code.
             </p>
@@ -32,171 +37,192 @@
 
 <!-- Quick Stats -->
 <div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
-                    <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('clipboard-list', 'w-5 h-5')"></span>
-                        </div>
-                        <div>
-                            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Test Suites</p>
-                            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.totalSuites"></p>
-                        </div>
-                    </div>
+    <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('clipboard-list', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Test Suites</p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.totalSuites"></p>
+        </div>
+    </div>
 
-                    <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">Test Cases</p>
-                            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.totalTests + '+'"></p>
-                        </div>
-                    </div>
+    <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">Test Cases</p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.totalTests + '+'"></p>
+        </div>
+    </div>
 
-                    <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('lightning-bolt', 'w-5 h-5')"></span>
-                        </div>
-                        <div>
-                            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Features Covered</p>
-                            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.coverage"></p>
-                        </div>
-                    </div>
+    <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('lightning-bolt', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Features Covered</p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.coverage"></p>
+        </div>
+    </div>
 
-                    <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('clock', 'w-5 h-5')"></span>
-                        </div>
-                        <div>
-                            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Quick Tests</p>
-                            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.avgDuration"></p>
-                        </div>
-                    </div>
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-teal-500 bg-teal-100 rounded-full dark:text-teal-100 dark:bg-teal-500">
+            <span x-html="$icon('clock', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Quick Tests</p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.avgDuration"></p>
+        </div>
+    </div>
+</div>
+
+<!-- Test Suites Grid -->
+<div class="grid gap-6 mb-8 md:grid-cols-2">
+    <template x-for="suite in testSuites" :key="suite.id">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
+            <div class="p-4 bg-gradient-to-r" :class="getColorClasses(suite.color).gradient">
+                <div class="flex items-center justify-between">
+                    <h3 class="text-xl font-semibold text-white flex items-center">
+                        <span x-html="$icon(suite.icon, 'w-6 h-6 mr-2 text-white')"></span>
+                        <span x-text="suite.name"></span>
+                    </h3>
+                    <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600">
+                        <span x-text="suite.testCount"></span> Tests
+                    </span>
                 </div>
+            </div>
 
-                <!-- Test Suites Grid -->
-                <div class="grid gap-6 mb-8 md:grid-cols-2">
-                    <template x-for="suite in testSuites" :key="suite.id">
-                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
-                            <div class="p-4 bg-gradient-to-r" :class="getColorClasses(suite.color).gradient">
-                                <div class="flex items-center justify-between">
-                                    <h3 class="text-xl font-semibold text-white flex items-center">
-                                        <span x-html="$icon(suite.icon, 'w-6 h-6 mr-2 text-white')"></span>
-                                        <span x-text="suite.name"></span>
-                                    </h3>
-                                    <span class="px-3 py-1 bg-white bg-opacity-25 rounded-full text-xs text-white font-semibold">
-                                        <span x-text="suite.testCount"></span> Tests
-                                    </span>
-                                </div>
-                            </div>
+            <div class="p-6">
+                <p class="text-gray-600 dark:text-gray-400 mb-4" x-text="suite.description"></p>
 
-                            <div class="p-6">
-                                <p class="text-gray-600 dark:text-gray-400 mb-4" x-text="suite.description"></p>
-
-                                <div class="space-y-2 mb-6">
-                                    <template x-for="feature in suite.features" :key="feature">
-                                        <div class="flex items-start text-sm">
-                                            <span x-html="$icon('check-circle', 'w-4 h-4 text-green-500 mr-2 mt-0.5 flex-shrink-0')"></span>
-                                            <span class="text-gray-600 dark:text-gray-400" x-text="feature"></span>
-                                        </div>
-                                    </template>
-                                </div>
-
-                                <div class="flex gap-2">
-                                    <button
-                                        @click="goToTest(suite.url)"
-                                        class="flex-1 flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors"
-                                        :class="getColorClasses(suite.color).button">
-                                        <span x-html="$icon('play', 'w-4 h-4 mr-2 text-white')"></span>
-                                        Run Tests
-                                    </button>
-                                    <button class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
-                                        <span x-html="$icon('information-circle', 'w-5 h-5')"></span>
-                                    </button>
-                                </div>
-                            </div>
+                <div class="space-y-2 mb-6">
+                    <template x-for="feature in suite.features" :key="feature">
+                        <div class="flex items-start text-sm">
+                            <span x-html="$icon('check-circle', 'w-4 h-4 text-green-500 mr-2 mt-0.5 flex-shrink-0')"></span>
+                            <span class="text-gray-600 dark:text-gray-400" x-text="feature"></span>
                         </div>
                     </template>
                 </div>
 
-                <!-- Best Practices -->
-                <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
-                    <h2 class="mb-4 text-xl font-semibold text-gray-800 dark:text-gray-200 flex items-center">
-                        <span x-html="$icon('light-bulb', 'w-6 h-6 mr-2 text-yellow-500')"></span>
-                        Testing Best Practices
-                    </h2>
-
-                    <div class="grid md:grid-cols-2 gap-6">
-                        <div>
-                            <h3 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">Before Testing</h3>
-                            <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
-                                <li class="flex items-start">
-                                    <span class="text-purple-600 mr-2">•</span>
-                                    <span>Ensure FastAPI server is running on localhost:8000</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <span class="text-purple-600 mr-2">•</span>
-                                    <span>Open browser DevTools (F12) to see console logs</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <span class="text-purple-600 mr-2">•</span>
-                                    <span>Check Network tab for API requests</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <span class="text-purple-600 mr-2">•</span>
-                                    <span>Clear localStorage before starting fresh tests</span>
-                                </li>
-                            </ul>
-                        </div>
-
-                        <div>
-                            <h3 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">During Testing</h3>
-                            <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
-                                <li class="flex items-start">
-                                    <span class="text-purple-600 mr-2">•</span>
-                                    <span>Follow test steps in order</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <span class="text-purple-600 mr-2">•</span>
-                                    <span>Check expected results against actual behavior</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <span class="text-purple-600 mr-2">•</span>
-                                    <span>Look for errors in console and network tabs</span>
-                                </li>
-                                <li class="flex items-start">
-                                    <span class="text-purple-600 mr-2">•</span>
-                                    <span>Take screenshots if you find bugs</span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
+                <div class="flex gap-2">
+                    <button
+                            @click="goToTest(suite.url)"
+                            class="flex-1 flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors"
+                            :class="getColorClasses(suite.color).button">
+                        <span x-html="$icon('play', 'w-4 h-4 mr-2 text-white')"></span>
+                        Run Tests
+                    </button>
+                    <button class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
+                        <span x-html="$icon('information-circle', 'w-5 h-5')"></span>
+                    </button>
                 </div>
-
-                <!-- Additional Resources -->
-                <div class="bg-blue-50 dark:bg-gray-800 border border-blue-200 dark:border-gray-700 rounded-lg p-6 mb-8">
-                    <h3 class="mb-3 text-lg font-semibold text-gray-800 dark:text-gray-200 flex items-center">
-                        <span x-html="$icon('book-open', 'w-5 h-5 mr-2 text-blue-600')"></span>
-                        Additional Resources
-                    </h3>
-                    <div class="grid md:grid-cols-3 gap-4">
-                        <a href="/admin/components" class="block p-4 bg-white dark:bg-gray-700 rounded-lg hover:shadow-md transition-shadow">
-                            <h4 class="font-semibold text-gray-700 dark:text-gray-200 mb-1">Component Library</h4>
-                            <p class="text-sm text-gray-600 dark:text-gray-400">View all available UI components</p>
-                        </a>
-                        <a href="/admin/icons" class="block p-4 bg-white dark:bg-gray-700 rounded-lg hover:shadow-md transition-shadow">
-                            <h4 class="font-semibold text-gray-700 dark:text-gray-200 mb-1">Icons Browser</h4>
-                            <p class="text-sm text-gray-600 dark:text-gray-400">Browse all available icons</p>
-                        </a>
-                        <a href="#" class="block p-4 bg-white dark:bg-gray-700 rounded-lg hover:shadow-md transition-shadow">
-                            <h4 class="font-semibold text-gray-700 dark:text-gray-200 mb-1">API Documentation</h4>
-                            <p class="text-sm text-gray-600 dark:text-gray-400">FastAPI endpoint reference</p>
-                        </a>
-                    </div>
-                </div>
-
             </div>
         </div>
+    </template>
+</div>
+
+<!-- Best Practices -->
+<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+    <h2 class="mb-4 text-xl font-semibold text-gray-800 dark:text-gray-200 flex items-center">
+        <span x-html="$icon('light-bulb', 'w-6 h-6 mr-2 text-yellow-500')"></span>
+        Testing Best Practices
+    </h2>
+
+    <div class="grid md:grid-cols-2 gap-6">
+        <div>
+            <h3 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">Before Testing</h3>
+            <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
+                <li class="flex items-start">
+                    <span class="text-purple-600 mr-2">•</span>
+                    <span>Ensure FastAPI server is running on localhost:8000</span>
+                </li>
+                <li class="flex items-start">
+                    <span class="text-purple-600 mr-2">•</span>
+                    <span>Open browser DevTools (F12) to see console logs</span>
+                </li>
+                <li class="flex items-start">
+                    <span class="text-purple-600 mr-2">•</span>
+                    <span>Check Network tab for API requests</span>
+                </li>
+                <li class="flex items-start">
+                    <span class="text-purple-600 mr-2">•</span>
+                    <span>Clear localStorage before starting fresh tests</span>
+                </li>
+            </ul>
+        </div>
+
+        <div>
+            <h3 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">During Testing</h3>
+            <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
+                <li class="flex items-start">
+                    <span class="text-purple-600 mr-2">•</span>
+                    <span>Follow test steps in order</span>
+                </li>
+                <li class="flex items-start">
+                    <span class="text-purple-600 mr-2">•</span>
+                    <span>Check expected results against actual behavior</span>
+                </li>
+                <li class="flex items-start">
+                    <span class="text-purple-600 mr-2">•</span>
+                    <span>Look for errors in console and network tabs</span>
+                </li>
+                <li class="flex items-start">
+                    <span class="text-purple-600 mr-2">•</span>
+                    <span>Take screenshots if you find bugs</span>
+                </li>
+            </ul>
+        </div>
     </div>
+</div>
+
+<!-- Additional Resources -->
+<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+    <h2 class="mb-4 text-xl font-semibold text-gray-800 dark:text-gray-200 flex items-center">
+        <span x-html="$icon('book-open', 'w-5 h-5 mr-2 text-blue-600')"></span>
+        Additional Resources
+    </h2>
+    <div class="grid md:grid-cols-3 gap-4">
+        <div>
+            <h3 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">Component Library</h3>
+            <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
+                <li class="flex items-start">
+                    <a href="/admin/components">
+                        <span class="text-purple-600 mr-2">•</span>
+                        <span>View all available UI components</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div>
+            <h3 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">Icons Browser</h3>
+            <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
+                <li class="flex items-start">
+                    <a href="/admin/icons">
+                        <span class="text-purple-600 mr-2">•</span>
+                        <span>Browse all available icons</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div>
+            <h3 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">API Documentation</h3>
+            <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
+                <li class="flex items-start">
+                    <a href="/docs">
+                        <span class="text-purple-600 mr-2">•</span>
+                        <span>FastAPI endpoint reference</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+</div>
+</div>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}

app/templates/admin/vendor-detail.html

@@ -13,7 +13,7 @@
             Vendor Details
         </h2>
         <p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-show="vendor">
-            <span x-text="vendor?.vendor_code"></span>
+            <span x-text="vendorCode"></span>
             <span class="text-gray-400 mx-2">•</span>
             <span x-text="vendor?.subdomain"></span>
         </p>
@@ -25,6 +25,10 @@
             <span x-html="$icon('edit', 'w-4 h-4 mr-2')"></span>
             Edit Vendor
         </a>
+        <a :href="`/admin/vendors/${vendorCode}/theme`"
+           class="px-4 py-2 text-sm font-medium text-purple-700 bg-white border border-purple-600 rounded-lg hover:bg-purple-50">
+            Customize Theme
+        </a>
         <a href="/admin/vendors" 
            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
             <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>

app/templates/admin/vendor-theme.html

@@ -0,0 +1,297 @@
+{# app/templates/admin/vendor-theme.html #}
+{% extends "admin/base.html" %}
+
+{% block title %}Vendor Theme - {{ vendor_code }}{% endblock %}
+
+{% block alpine_data %}vendorThemeData(){% endblock %}
+
+{% block content %}
+<div class="container px-6 mx-auto grid">
+    <!-- Page Header -->
+    <div class="flex items-center justify-between my-6">
+        <div>
+            <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
+                Vendor Theme
+            </h2>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                Customize appearance for <span x-text="vendor?.name"></span>
+            </p>
+        </div>
+        <div class="flex space-x-2">
+            <a :href="`/admin/vendors/${vendorCode}`"
+               class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg hover:border-gray-400 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
+                <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
+                Back to Vendor
+            </a>
+        </div>
+    </div>
+
+    <!-- Loading State -->
+    <div x-show="loading" class="text-center py-12">
+        <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600 animate-spin')"></span>
+        <p class="mt-2 text-gray-600 dark:text-gray-400">Loading theme...</p>
+    </div>
+
+    <!-- Main Content -->
+    <div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-3">
+        
+        <!-- Theme Configuration Form (2 columns) -->
+        <div class="md:col-span-2">
+            <div class="px-4 py-3 mb-8 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">
+                    Theme Configuration
+                </h3>
+
+                <!-- Theme Preset Selector -->
+                <div class="mb-6 p-4 bg-purple-50 dark:bg-purple-900 dark:bg-opacity-20 rounded-lg border border-purple-200 dark:border-purple-800">
+                    <h4 class="text-sm font-semibold text-purple-800 dark:text-purple-200 mb-2">
+                        Quick Start: Choose a Preset
+                    </h4>
+                    <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
+                        <button @click="applyPreset('modern')"
+                                class="px-3 py-2 text-sm font-medium text-purple-700 bg-white border border-purple-300 rounded-lg hover:bg-purple-50 dark:bg-gray-800 dark:text-purple-300 dark:border-purple-700">
+                            Modern
+                        </button>
+                        <button @click="applyPreset('classic')"
+                                class="px-3 py-2 text-sm font-medium text-blue-700 bg-white border border-blue-300 rounded-lg hover:bg-blue-50 dark:bg-gray-800 dark:text-blue-300 dark:border-blue-700">
+                            Classic
+                        </button>
+                        <button @click="applyPreset('minimal')"
+                                class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700">
+                            Minimal
+                        </button>
+                        <button @click="applyPreset('vibrant')"
+                                class="px-3 py-2 text-sm font-medium text-orange-700 bg-white border border-orange-300 rounded-lg hover:bg-orange-50 dark:bg-gray-800 dark:text-orange-300 dark:border-orange-700">
+                            Vibrant
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Colors Section -->
+                <div class="mb-6">
+                    <h4 class="mb-4 text-md font-semibold text-gray-700 dark:text-gray-200">Colors</h4>
+                    <div class="grid gap-4 md:grid-cols-2">
+                        <!-- Primary Color -->
+                        <label class="block text-sm">
+                            <span class="text-gray-700 dark:text-gray-400">Primary Color</span>
+                            <div class="flex items-center mt-1 space-x-2">
+                                <input type="color" 
+                                       x-model="themeData.colors.primary"
+                                       class="h-10 w-20 border border-gray-300 rounded dark:border-gray-600 cursor-pointer">
+                                <input type="text" 
+                                       x-model="themeData.colors.primary"
+                                       class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input">
+                            </div>
+                        </label>
+
+                        <!-- Secondary Color -->
+                        <label class="block text-sm">
+                            <span class="text-gray-700 dark:text-gray-400">Secondary Color</span>
+                            <div class="flex items-center mt-1 space-x-2">
+                                <input type="color" 
+                                       x-model="themeData.colors.secondary"
+                                       class="h-10 w-20 border border-gray-300 rounded dark:border-gray-600 cursor-pointer">
+                                <input type="text" 
+                                       x-model="themeData.colors.secondary"
+                                       class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input">
+                            </div>
+                        </label>
+
+                        <!-- Accent Color -->
+                        <label class="block text-sm">
+                            <span class="text-gray-700 dark:text-gray-400">Accent Color</span>
+                            <div class="flex items-center mt-1 space-x-2">
+                                <input type="color" 
+                                       x-model="themeData.colors.accent"
+                                       class="h-10 w-20 border border-gray-300 rounded dark:border-gray-600 cursor-pointer">
+                                <input type="text" 
+                                       x-model="themeData.colors.accent"
+                                       class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input">
+                            </div>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Typography Section -->
+                <div class="mb-6">
+                    <h4 class="mb-4 text-md font-semibold text-gray-700 dark:text-gray-200">Typography</h4>
+                    <div class="grid gap-4 md:grid-cols-2">
+                        <!-- Heading Font -->
+                        <label class="block text-sm">
+                            <span class="text-gray-700 dark:text-gray-400">Heading Font</span>
+                            <select x-model="themeData.fonts.heading"
+                                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select">
+                                <option value="Inter, sans-serif">Inter</option>
+                                <option value="Roboto, sans-serif">Roboto</option>
+                                <option value="Poppins, sans-serif">Poppins</option>
+                                <option value="Playfair Display, serif">Playfair Display</option>
+                                <option value="Merriweather, serif">Merriweather</option>
+                                <option value="Georgia, serif">Georgia</option>
+                            </select>
+                        </label>
+
+                        <!-- Body Font -->
+                        <label class="block text-sm">
+                            <span class="text-gray-700 dark:text-gray-400">Body Font</span>
+                            <select x-model="themeData.fonts.body"
+                                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select">
+                                <option value="Inter, sans-serif">Inter</option>
+                                <option value="Open Sans, sans-serif">Open Sans</option>
+                                <option value="Lato, sans-serif">Lato</option>
+                                <option value="Source Sans Pro, sans-serif">Source Sans Pro</option>
+                                <option value="Arial, sans-serif">Arial</option>
+                            </select>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Layout Section -->
+                <div class="mb-6">
+                    <h4 class="mb-4 text-md font-semibold text-gray-700 dark:text-gray-200">Layout</h4>
+                    <div class="grid gap-4 md:grid-cols-2">
+                        <!-- Product Layout Style -->
+                        <label class="block text-sm">
+                            <span class="text-gray-700 dark:text-gray-400">Product Layout</span>
+                            <select x-model="themeData.layout.style"
+                                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select">
+                                <option value="grid">Grid</option>
+                                <option value="list">List</option>
+                                <option value="masonry">Masonry</option>
+                            </select>
+                        </label>
+
+                        <!-- Header Style -->
+                        <label class="block text-sm">
+                            <span class="text-gray-700 dark:text-gray-400">Header Style</span>
+                            <select x-model="themeData.layout.header"
+                                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select">
+                                <option value="fixed">Fixed</option>
+                                <option value="static">Static</option>
+                                <option value="transparent">Transparent</option>
+                            </select>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Custom CSS Section -->
+                <div class="mb-6">
+                    <h4 class="mb-4 text-md font-semibold text-gray-700 dark:text-gray-200">Advanced</h4>
+                    <label class="block text-sm">
+                        <span class="text-gray-700 dark:text-gray-400">Custom CSS</span>
+                        <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">
+                            Advanced: Add custom CSS rules (use with caution)
+                        </p>
+                        <textarea x-model="themeData.custom_css"
+                                  rows="6"
+                                  placeholder=".my-custom-class { color: red; }"
+                                  class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-textarea"></textarea>
+                    </label>
+                </div>
+
+                <!-- Action Buttons -->
+                <div class="flex justify-between items-center">
+                    <button @click="resetToDefault()"
+                            :disabled="saving"
+                            class="px-4 py-2 text-sm font-medium leading-5 text-red-700 transition-colors duration-150 bg-white border border-red-300 rounded-lg hover:bg-red-50 focus:outline-none disabled:opacity-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-600">
+                        Reset to Default
+                    </button>
+                    <button @click="saveTheme()"
+                            :disabled="saving"
+                            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 disabled:opacity-50">
+                        <span x-show="!saving">Save Theme</span>
+                        <span x-show="saving" class="flex items-center">
+                            <span x-html="$icon('spinner', 'w-4 h-4 mr-2 animate-spin')"></span>
+                            Saving...
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Preview Panel (1 column) -->
+        <div class="md:col-span-1">
+            <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800 sticky top-6">
+                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Preview
+                </h3>
+
+                <!-- Theme Preview -->
+                <div class="space-y-4">
+                    <!-- Colors Preview -->
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">COLORS</p>
+                        <div class="grid grid-cols-3 gap-2">
+                            <div class="text-center">
+                                <div class="h-12 rounded-lg border border-gray-200 dark:border-gray-700"
+                                     :style="`background-color: ${themeData.colors.primary}`"></div>
+                                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Primary</p>
+                            </div>
+                            <div class="text-center">
+                                <div class="h-12 rounded-lg border border-gray-200 dark:border-gray-700"
+                                     :style="`background-color: ${themeData.colors.secondary}`"></div>
+                                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Secondary</p>
+                            </div>
+                            <div class="text-center">
+                                <div class="h-12 rounded-lg border border-gray-200 dark:border-gray-700"
+                                     :style="`background-color: ${themeData.colors.accent}`"></div>
+                                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Accent</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Typography Preview -->
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">TYPOGRAPHY</p>
+                        <div class="space-y-2">
+                            <p class="text-lg" :style="`font-family: ${themeData.fonts.heading}`">
+                                Heading Font
+                            </p>
+                            <p class="text-sm" :style="`font-family: ${themeData.fonts.body}`">
+                                Body text font example
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Button Preview -->
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">BUTTONS</p>
+                        <button class="px-4 py-2 text-sm font-medium text-white rounded-lg w-full"
+                                :style="`background-color: ${themeData.colors.primary}`">
+                            Primary Button
+                        </button>
+                    </div>
+
+                    <!-- Layout Preview -->
+                    <div>
+                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">LAYOUT</p>
+                        <div class="text-xs space-y-1">
+                            <p class="text-gray-700 dark:text-gray-300">
+                                <span class="font-semibold">Product Layout:</span> 
+                                <span class="capitalize" x-text="themeData.layout.style"></span>
+                            </p>
+                            <p class="text-gray-700 dark:text-gray-300">
+                                <span class="font-semibold">Header:</span> 
+                                <span class="capitalize" x-text="themeData.layout.header"></span>
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Preview Link -->
+                    <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
+                        <a :href="`http://${vendor?.subdomain}.localhost:8000`"
+                           target="_blank"
+                           class="flex items-center justify-center px-4 py-2 text-sm font-medium text-purple-700 bg-purple-50 border border-purple-300 rounded-lg hover:bg-purple-100 dark:bg-purple-900 dark:bg-opacity-20 dark:text-purple-300 dark:border-purple-700">
+                            <span x-html="$icon('eye', 'w-4 h-4 mr-2')"></span>
+                            View Live Shop
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', path='admin/js/vendor-theme.js') }}"></script>
+{% endblock %}

main.py

@@ -22,6 +22,7 @@ from app.core.database import get_db
 from app.core.lifespan import lifespan
 from app.exceptions.handler import setup_exception_handlers
 from app.exceptions import ServiceUnavailableException
+from middleware.theme_context import theme_context_middleware
 from middleware.vendor_context import vendor_context_middleware
 
 logger = logging.getLogger(__name__)
@@ -57,6 +58,9 @@ app.add_middleware(
 # Add vendor context middleware (must be after CORS)
 app.middleware("http")(vendor_context_middleware)
 
+# Add theme context middleware (must be after vendor context)
+app.middleware("http")(theme_context_middleware)
+
 # ========================================
 # MOUNT STATIC FILES - Use absolute path
 # ========================================

middleware/theme_context.py

@@ -0,0 +1,117 @@
+# middleware/theme_context.py
+"""
+Theme Context Middleware
+Injects vendor-specific theme into request context
+"""
+import logging
+from fastapi import Request
+from sqlalchemy.orm import Session
+
+from app.core.database import get_db
+from models.database.vendor_theme import VendorTheme
+
+logger = logging.getLogger(__name__)
+
+
+class ThemeContextManager:
+    """Manages theme context for vendor shops."""
+
+    @staticmethod
+    def get_vendor_theme(db: Session, vendor_id: int) -> dict:
+        """
+        Get theme configuration for vendor.
+        Returns default theme if no custom theme is configured.
+        """
+        theme = db.query(VendorTheme).filter(
+            VendorTheme.vendor_id == vendor_id,
+            VendorTheme.is_active == True
+        ).first()
+
+        if theme:
+            return theme.to_dict()
+
+        # Return default theme
+        return get_default_theme()
+
+    @staticmethod
+    def get_default_theme() -> dict:
+        """Default theme configuration"""
+        return {
+            "theme_name": "default",
+            "colors": {
+                "primary": "#6366f1",
+                "secondary": "#8b5cf6",
+                "accent": "#ec4899",
+                "background": "#ffffff",
+                "text": "#1f2937",
+                "border": "#e5e7eb"
+            },
+            "fonts": {
+                "heading": "Inter, sans-serif",
+                "body": "Inter, sans-serif"
+            },
+            "branding": {
+                "logo": None,
+                "logo_dark": None,
+                "favicon": None,
+                "banner": None
+            },
+            "layout": {
+                "style": "grid",
+                "header": "fixed",
+                "product_card": "modern"
+            },
+            "social_links": {},
+            "custom_css": None,
+            "css_variables": {
+                "--color-primary": "#6366f1",
+                "--color-secondary": "#8b5cf6",
+                "--color-accent": "#ec4899",
+                "--color-background": "#ffffff",
+                "--color-text": "#1f2937",
+                "--color-border": "#e5e7eb",
+                "--font-heading": "Inter, sans-serif",
+                "--font-body": "Inter, sans-serif",
+            }
+        }
+
+
+async def theme_context_middleware(request: Request, call_next):
+    """
+    Middleware to inject theme context into request state.
+
+    This runs AFTER vendor_context_middleware has set request.state.vendor
+    """
+    # Only inject theme for shop pages (not admin or API)
+    if hasattr(request.state, 'vendor') and request.state.vendor:
+        vendor = request.state.vendor
+
+        # Get database session
+        db_gen = get_db()
+        db = next(db_gen)
+
+        try:
+            # Get vendor theme
+            theme = ThemeContextManager.get_vendor_theme(db, vendor.id)
+            request.state.theme = theme
+
+            logger.debug(
+                f"Theme loaded for vendor {vendor.name}: {theme['theme_name']}"
+            )
+        except Exception as e:
+            logger.error(f"Failed to load theme for vendor {vendor.id}: {e}")
+            # Fallback to default theme
+            request.state.theme = ThemeContextManager.get_default_theme()
+        finally:
+            db.close()
+    else:
+        # No vendor context, use default theme
+        request.state.theme = ThemeContextManager.get_default_theme()
+
+    response = await call_next(request)
+    return response
+
+
+def get_current_theme(request: Request) -> dict:
+    """Helper function to get current theme from request state."""
+    return getattr(request.state, "theme", ThemeContextManager.get_default_theme())

middleware/vendor_context.py

@@ -3,10 +3,11 @@ import logging
 from typing import Optional
 from fastapi import Request
 from sqlalchemy.orm import Session
-from sqlalchemy import func
+from sqlalchemy import func, or_
 
 from app.core.database import get_db
 from models.database.vendor import Vendor
+from models.database.vendor_domain import VendorDomain
 
 logger = logging.getLogger(__name__)
 
@@ -19,14 +20,47 @@ class VendorContextManager:
         """
         Detect vendor context from request.
 
+        Priority order:
+        1. Custom domain (customdomain1.com)
+        2. Subdomain (vendor1.platform.com)
+        3. Path-based (/vendor/vendor1/)
+
         Returns dict with vendor info or None if not found.
         """
         host = request.headers.get("host", "")
         path = request.url.path
 
-        # Method 1: Subdomain detection (production)
+        # Remove port from host if present (e.g., localhost:8000 → localhost)
+        if ":" in host:
+            host = host.split(":")[0]
+
+        # Method 1: Custom domain detection (HIGHEST PRIORITY)
+        # Check if this is a custom domain (not platform.com and not localhost)
+        from app.core.config import settings
+        platform_domain = getattr(settings, 'platform_domain', 'platform.com')
+
+        is_custom_domain = (
+                host and
+                not host.endswith(f".{platform_domain}") and
+                host != platform_domain and
+                host not in ["localhost", "127.0.0.1", "admin.localhost", "admin.127.0.0.1"] and
+                not host.startswith("admin.")
+        )
+
+        if is_custom_domain:
+            # This could be a custom domain like customdomain1.com
+            normalized_domain = VendorDomain.normalize_domain(host)
+            return {
+                "domain": normalized_domain,
+                "detection_method": "custom_domain",
+                "host": host,
+                "original_host": request.headers.get("host", "")
+            }
+
+        # Method 2: Subdomain detection (vendor1.platform.com)
         if "." in host:
             parts = host.split(".")
+            # Check if it's a valid subdomain (not www, admin, api)
             if len(parts) >= 2 and parts[0] not in ["www", "admin", "api"]:
                 subdomain = parts[0]
                 return {
@@ -35,7 +69,7 @@ class VendorContextManager:
                     "host": host
                 }
 
-        # Method 2: Path-based detection (development)
+        # Method 3: Path-based detection (/vendor/vendorname/) - for development
         if path.startswith("/vendor/"):
             path_parts = path.split("/")
             if len(path_parts) >= 3:
@@ -51,17 +85,61 @@ class VendorContextManager:
 
     @staticmethod
     def get_vendor_from_context(db: Session, context: dict) -> Optional[Vendor]:
-        """Get vendor from database using context information."""
-        if not context or "subdomain" not in context:
+        """
+        Get vendor from database using context information.
+
+        Supports three methods:
+        1. Custom domain lookup (VendorDomain table)
+        2. Subdomain lookup (Vendor.subdomain)
+        3. Path-based lookup (Vendor.subdomain)
+        """
+        if not context:
             return None
 
-        # Query vendor by subdomain (case-insensitive)
-        vendor = (
-            db.query(Vendor)
-            .filter(func.lower(Vendor.subdomain) == context["subdomain"].lower())
-            .filter(Vendor.is_active == True)  # Only active vendors
-            .first()
-        )
+        vendor = None
+
+        # Method 1: Custom domain lookup
+        if context.get("detection_method") == "custom_domain":
+            domain = context.get("domain")
+            if domain:
+                # Look up vendor by custom domain
+                vendor_domain = (
+                    db.query(VendorDomain)
+                    .filter(VendorDomain.domain == domain)
+                    .filter(VendorDomain.is_active == True)
+                    .filter(VendorDomain.is_verified == True)
+                    .first()
+                )
+
+                if vendor_domain:
+                    vendor = vendor_domain.vendor
+                    # Check if vendor is active
+                    if not vendor or not vendor.is_active:
+                        logger.warning(f"Vendor for domain {domain} is not active")
+                        return None
+
+                    logger.info(f"✓ Vendor found via custom domain: {domain} → {vendor.name}")
+                    return vendor
+                else:
+                    logger.warning(f"No active vendor found for custom domain: {domain}")
+                    return None
+
+        # Method 2 & 3: Subdomain or path-based lookup
+        if "subdomain" in context:
+            subdomain = context["subdomain"]
+            # Query vendor by subdomain (case-insensitive)
+            vendor = (
+                db.query(Vendor)
+                .filter(func.lower(Vendor.subdomain) == subdomain.lower())
+                .filter(Vendor.is_active == True)
+                .first()
+            )
+
+            if vendor:
+                method = context.get("detection_method", "unknown")
+                logger.info(f"✓ Vendor found via {method}: {subdomain} → {vendor.name}")
+            else:
+                logger.warning(f"No active vendor found for subdomain: {subdomain}")
 
         return vendor
 
@@ -71,6 +149,7 @@ class VendorContextManager:
         if not vendor_context:
             return request.url.path
 
+        # Only strip path prefix for path-based detection
         if vendor_context.get("detection_method") == "path":
             path_prefix = vendor_context.get("path_prefix", "")
             path = request.url.path
@@ -86,10 +165,16 @@ class VendorContextManager:
         host = request.headers.get("host", "")
         path = request.url.path
 
+        # Remove port from host
+        if ":" in host:
+            host = host.split(":")[0]
+
+        # Check for admin subdomain
         if host.startswith("admin."):
             return True
 
-        if "/admin" in path:
+        # Check for admin path
+        if path.startswith("/admin"):
             return True
 
         return False
@@ -103,6 +188,11 @@ class VendorContextManager:
 async def vendor_context_middleware(request: Request, call_next):
     """
     Middleware to inject vendor context into request state.
+
+    Handles three routing modes:
+    1. Custom domains (customdomain1.com → Vendor 1)
+    2. Subdomains (vendor1.platform.com → Vendor 1)
+    3. Path-based (/vendor/vendor1/ → Vendor 1)
     """
     # Skip vendor detection for admin, API, and system requests
     if (VendorContextManager.is_admin_request(request) or
@@ -127,12 +217,12 @@ async def vendor_context_middleware(request: Request, call_next):
                 )
 
                 logger.debug(
-                    f"Vendor context: {vendor.name} ({vendor.subdomain}) "
+                    f"🏪 Vendor context: {vendor.name} ({vendor.subdomain}) "
                     f"via {vendor_context['detection_method']}"
                 )
             else:
                 logger.warning(
-                    f"Vendor not found for subdomain: {vendor_context['subdomain']}"
+                    f"⚠️ Vendor not found for context: {vendor_context}"
                 )
                 request.state.vendor = None
                 request.state.vendor_context = vendor_context
@@ -153,6 +243,7 @@ def get_current_vendor(request: Request) -> Optional[Vendor]:
 
 def require_vendor_context():
     """Dependency to require vendor context in endpoints."""
+
     def dependency(request: Request):
         vendor = get_current_vendor(request)
         if not vendor:

models/database/__init__.py

@@ -8,6 +8,8 @@ from .user import User
 from .marketplace_product import MarketplaceProduct
 from .inventory import Inventory
 from .vendor import Vendor
+from .vendor_domain import VendorDomain
+from .vendor_theme import VendorTheme
 from .product import Product
 from .marketplace_import_job import MarketplaceImportJob
 
@@ -21,4 +23,7 @@ __all__ = [
     "Vendor",
     "Product",
     "MarketplaceImportJob",
+    "VendorDomain",
+    "VendorTheme"
 ]
+

models/database/vendor.py

@@ -1,6 +1,16 @@
+# models/database/vendor.py - ENHANCED VERSION
+"""
+Enhanced Vendor model with theme support.
+
+Changes from your current version:
+1. Keep existing theme_config JSON field
+2. Add optional VendorTheme relationship for advanced themes
+3. Add helper methods for theme access
+"""
 from sqlalchemy import (Boolean, Column, ForeignKey, Integer, String, Text, JSON)
 from sqlalchemy.orm import relationship
 
+from app.core.config import settings
 from app.core.database import Base
 from models.database.base import TimestampMixin
 
@@ -11,11 +21,14 @@ class Vendor(Base, TimestampMixin):
     id = Column(Integer, primary_key=True, index=True)
     vendor_code = Column(
         String, unique=True, index=True, nullable=False
-    )  # e.g., "TECHSTORE", "FASHIONHUB"
+    )
     subdomain = Column(String(100), unique=True, nullable=False, index=True)
-    name = Column(String, nullable=False)  # Display name
+    name = Column(String, nullable=False)
     description = Column(Text)
     owner_user_id = Column(Integer, ForeignKey("users.id"), nullable=False)
+
+    # Simple theme config (JSON)
+    # This stores basic theme settings like colors, fonts
     theme_config = Column(JSON, default=dict)
 
     # Contact information
@@ -43,11 +56,208 @@ class Vendor(Base, TimestampMixin):
     customers = relationship("Customer", back_populates="vendor")
     orders = relationship("Order", back_populates="vendor")
     marketplace_import_jobs = relationship("MarketplaceImportJob", back_populates="vendor")
+    domains = relationship(
+        "VendorDomain",
+        back_populates="vendor",
+        cascade="all, delete-orphan",
+        order_by="VendorDomain.is_primary.desc()"
+    )
+
+    theme = relationship(
+        "VendorTheme",
+        back_populates="vendor",
+        uselist=False,
+        cascade="all, delete-orphan"
+    )
+
+    # Optional advanced theme (for premium vendors)
+    # This is optional - vendors can use theme_config OR VendorTheme
+    advanced_theme = relationship(
+        "VendorTheme",
+        back_populates="vendor",
+        uselist=False,
+        cascade="all, delete-orphan"
+    )
 
     def __repr__(self):
         return f"<Vendor(id={self.id}, vendor_code='{self.vendor_code}', name='{self.name}', subdomain='{self.subdomain}')>"
 
+    # ========================================================================
+    # Theme Helper Methods
+    # ========================================================================
 
+    @property
+    def active_theme(self):
+        """Get vendor's active theme or return default"""
+        if self.theme and self.theme.is_active:
+            return self.theme
+        return None
+
+    @property
+    def theme(self):
+        """
+        Get theme configuration for this vendor.
+
+        Priority:
+        1. Advanced theme (VendorTheme) if configured
+        2. theme_config JSON field
+        3. Default theme
+
+        Returns dict with theme configuration.
+        """
+        # Priority 1: Advanced theme
+        if self.advanced_theme and self.advanced_theme.is_active:
+            return self.advanced_theme.to_dict()
+
+        # Priority 2: Basic theme_config
+        if self.theme_config:
+            return self._normalize_theme_config(self.theme_config)
+
+        # Priority 3: Default theme
+        return self._get_default_theme()
+
+    def _normalize_theme_config(self, config: dict) -> dict:
+        """
+        Normalize theme_config JSON to standard format.
+        Ensures backward compatibility with existing theme_config.
+        """
+        return {
+            "theme_name": config.get("theme_name", "basic"),
+            "colors": config.get("colors", {
+                "primary": "#6366f1",
+                "secondary": "#8b5cf6",
+                "accent": "#ec4899"
+            }),
+            "fonts": config.get("fonts", {
+                "heading": "Inter, sans-serif",
+                "body": "Inter, sans-serif"
+            }),
+            "branding": config.get("branding", {
+                "logo": None,
+                "logo_dark": None,
+                "favicon": None
+            }),
+            "layout": config.get("layout", {
+                "style": "grid",
+                "header": "fixed"
+            }),
+            "custom_css": config.get("custom_css", None),
+            "css_variables": self._generate_css_variables(config)
+        }
+
+    def _generate_css_variables(self, config: dict) -> dict:
+        """Generate CSS custom properties from theme config"""
+        colors = config.get("colors", {})
+        fonts = config.get("fonts", {})
+
+        return {
+            "--color-primary": colors.get("primary", "#6366f1"),
+            "--color-secondary": colors.get("secondary", "#8b5cf6"),
+            "--color-accent": colors.get("accent", "#ec4899"),
+            "--color-background": colors.get("background", "#ffffff"),
+            "--color-text": colors.get("text", "#1f2937"),
+            "--color-border": colors.get("border", "#e5e7eb"),
+            "--font-heading": fonts.get("heading", "Inter, sans-serif"),
+            "--font-body": fonts.get("body", "Inter, sans-serif"),
+        }
+
+    def _get_default_theme(self) -> dict:
+        """Default theme configuration"""
+        return {
+            "theme_name": "default",
+            "colors": {
+                "primary": "#6366f1",
+                "secondary": "#8b5cf6",
+                "accent": "#ec4899",
+                "background": "#ffffff",
+                "text": "#1f2937",
+                "border": "#e5e7eb"
+            },
+            "fonts": {
+                "heading": "Inter, sans-serif",
+                "body": "Inter, sans-serif"
+            },
+            "branding": {
+                "logo": None,
+                "logo_dark": None,
+                "favicon": None
+            },
+            "layout": {
+                "style": "grid",
+                "header": "fixed"
+            },
+            "custom_css": None,
+            "css_variables": {
+                "--color-primary": "#6366f1",
+                "--color-secondary": "#8b5cf6",
+                "--color-accent": "#ec4899",
+                "--color-background": "#ffffff",
+                "--color-text": "#1f2937",
+                "--color-border": "#e5e7eb",
+                "--font-heading": "Inter, sans-serif",
+                "--font-body": "Inter, sans-serif",
+            }
+        }
+
+    @property
+    def primary_color(self):
+        """Get primary color from theme"""
+        return self.theme.get("colors", {}).get("primary", "#6366f1")
+
+    @property
+    def logo_url(self):
+        """Get logo URL from theme"""
+        return self.theme.get("branding", {}).get("logo")
+
+    def update_theme(self, theme_data: dict):
+        """
+        Update vendor theme configuration.
+
+        Args:
+            theme_data: Dict with theme settings
+                       {colors: {...}, fonts: {...}, etc}
+        """
+        if not self.theme_config:
+            self.theme_config = {}
+
+        # Update theme_config JSON
+        if "colors" in theme_data:
+            self.theme_config["colors"] = theme_data["colors"]
+
+        if "fonts" in theme_data:
+            self.theme_config["fonts"] = theme_data["fonts"]
+
+        if "branding" in theme_data:
+            self.theme_config["branding"] = theme_data["branding"]
+
+        if "layout" in theme_data:
+            self.theme_config["layout"] = theme_data["layout"]
+
+        if "custom_css" in theme_data:
+            self.theme_config["custom_css"] = theme_data["custom_css"]
+
+    # ========================================================================
+    # Domain Helper Methods
+    # ========================================================================
+
+    @property
+    def primary_domain(self):
+        """Get the primary custom domain for this vendor"""
+        for domain in self.domains:
+            if domain.is_primary and domain.is_active:
+                return domain.domain
+        return None
+
+    @property
+    def all_domains(self):
+        """Get all active domains (subdomain + custom domains)"""
+        domains = [f"{self.subdomain}.{settings.platform_domain}"]
+        for domain in self.domains:
+            if domain.is_active:
+                domains.append(domain.domain)
+        return domains
+
+# Keep your existing VendorUser and Role models unchanged
 class VendorUser(Base, TimestampMixin):
     __tablename__ = "vendor_users"
 
@@ -58,7 +268,6 @@ class VendorUser(Base, TimestampMixin):
     invited_by = Column(Integer, ForeignKey("users.id"))
     is_active = Column(Boolean, default=True, nullable=False)
 
-    # Relationships
     vendor = relationship("Vendor", back_populates="vendor_users")
     user = relationship("User", foreign_keys=[user_id], back_populates="vendor_memberships")
     inviter = relationship("User", foreign_keys=[invited_by])
@@ -73,12 +282,11 @@ class Role(Base, TimestampMixin):
 
     id = Column(Integer, primary_key=True, index=True)
     vendor_id = Column(Integer, ForeignKey("vendors.id"), nullable=False)
-    name = Column(String(100), nullable=False)  # "Owner", "Manager", "Editor", "Viewer"
-    permissions = Column(JSON, default=list)  # ["products.create", "orders.view", etc.]
+    name = Column(String(100), nullable=False)
+    permissions = Column(JSON, default=list)
 
-    # Relationships
     vendor = relationship("Vendor")
     vendor_users = relationship("VendorUser", back_populates="role")
 
     def __repr__(self):
-        return f"<Role(id={self.id}, name='{self.name}', vendor_id={self.vendor_id})>"
+        return f"<Role(id={self.id}, name='{self.name}', vendor_id={self.vendor_id})>"

models/database/vendor_domain.py

@@ -0,0 +1,84 @@
+# models/database/vendor_domain.py
+"""
+Vendor Domain Model - Maps custom domains to vendors
+"""
+from datetime import datetime, timezone
+from sqlalchemy import (
+    Column, Integer, String, Boolean, DateTime,
+    ForeignKey, UniqueConstraint, Index
+)
+from sqlalchemy.orm import relationship
+from app.core.database import Base
+from models.database.base import TimestampMixin
+
+
+class VendorDomain(Base, TimestampMixin):
+    """
+    Maps custom domains to vendors for multi-domain routing.
+
+    Examples:
+    - customdomain1.com → Vendor 1
+    - shop.mybusiness.com → Vendor 2
+    - www.customdomain1.com → Vendor 1 (www is stripped)
+    """
+    __tablename__ = "vendor_domains"
+
+    id = Column(Integer, primary_key=True, index=True)
+    vendor_id = Column(Integer, ForeignKey("vendors.id", ondelete="CASCADE"), nullable=False)
+
+    # Domain configuration
+    domain = Column(String(255), nullable=False, unique=True, index=True)
+    is_primary = Column(Boolean, default=False, nullable=False)
+    is_active = Column(Boolean, default=True, nullable=False)
+
+    # SSL/TLS status (for monitoring)
+    ssl_status = Column(String(50), default="pending")  # pending, active, expired, error
+    ssl_verified_at = Column(DateTime(timezone=True), nullable=True)
+
+    # DNS verification (to confirm domain ownership)
+    verification_token = Column(String(100), unique=True, nullable=True)
+    is_verified = Column(Boolean, default=False, nullable=False)
+    verified_at = Column(DateTime(timezone=True), nullable=True)
+
+    # Relationships
+    vendor = relationship("Vendor", back_populates="domains")
+
+    # Constraints
+    __table_args__ = (
+        UniqueConstraint('vendor_id', 'domain', name='uq_vendor_domain'),
+        Index('idx_domain_active', 'domain', 'is_active'),
+        Index('idx_vendor_primary', 'vendor_id', 'is_primary'),
+    )
+
+    def __repr__(self):
+        return f"<VendorDomain(domain='{self.domain}', vendor_id={self.vendor_id})>"
+
+    @property
+    def full_url(self):
+        """Return full URL with https"""
+        return f"https://{self.domain}"
+
+    @classmethod
+    def normalize_domain(cls, domain: str) -> str:
+        """
+        Normalize domain for consistent storage.
+
+        Examples:
+        - https://example.com → example.com
+        - www.example.com → example.com
+        - EXAMPLE.COM → example.com
+        """
+        # Remove protocol
+        domain = domain.replace("https://", "").replace("http://", "")
+
+        # Remove trailing slash
+        domain = domain.rstrip("/")
+
+        # Remove www prefix (optional - depends on your preference)
+        # if domain.startswith("www."):
+        #     domain = domain[4:]
+
+        # Convert to lowercase
+        domain = domain.lower()
+
+        return domain

models/database/vendor_theme.py

@@ -0,0 +1,115 @@
+# models/database/vendor_theme.py
+"""
+Vendor Theme Configuration Model
+Allows each vendor to customize their shop's appearance
+"""
+from datetime import datetime, timezone
+from sqlalchemy import Column, Integer, String, Boolean, Text, JSON, DateTime, ForeignKey
+from sqlalchemy.orm import relationship
+from app.core.database import Base
+from models.database.base import TimestampMixin
+
+class VendorTheme(Base, TimestampMixin):
+    """
+    Stores theme configuration for each vendor's shop.
+
+    Each vendor can have:
+    - Custom colors (primary, secondary, accent)
+    - Custom fonts
+    - Custom logo and favicon
+    - Custom CSS overrides
+    - Layout preferences
+    """
+    __tablename__ = "vendor_themes"
+
+    id = Column(Integer, primary_key=True, index=True)
+    vendor_id = Column(Integer, ForeignKey("vendors.id", ondelete="CASCADE"), nullable=False, unique=True)
+
+    # Basic Theme Settings
+    theme_name = Column(String(100), default="default")  # e.g., "modern", "classic", "minimal"
+    is_active = Column(Boolean, default=True)
+
+    # Color Scheme (JSON for flexibility)
+    colors = Column(JSON, default={
+        "primary": "#6366f1",  # Indigo
+        "secondary": "#8b5cf6",  # Purple
+        "accent": "#ec4899",  # Pink
+        "background": "#ffffff",  # White
+        "text": "#1f2937",  # Gray-800
+        "border": "#e5e7eb"  # Gray-200
+    })
+
+    # Typography
+    font_family_heading = Column(String(100), default="Inter, sans-serif")
+    font_family_body = Column(String(100), default="Inter, sans-serif")
+
+    # Branding Assets
+    logo_url = Column(String(500), nullable=True)  # Path to vendor logo
+    logo_dark_url = Column(String(500), nullable=True)  # Dark mode logo
+    favicon_url = Column(String(500), nullable=True)  # Favicon
+    banner_url = Column(String(500), nullable=True)  # Homepage banner
+
+    # Layout Preferences
+    layout_style = Column(String(50), default="grid")  # grid, list, masonry
+    header_style = Column(String(50), default="fixed")  # fixed, static, transparent
+    product_card_style = Column(String(50), default="modern")  # modern, classic, minimal
+
+    # Custom CSS (for advanced customization)
+    custom_css = Column(Text, nullable=True)
+
+    # Social Media Links
+    social_links = Column(JSON, default={})  # {facebook: "url", instagram: "url", etc.}
+
+    # SEO & Meta
+    meta_title_template = Column(String(200), nullable=True)  # e.g., "{product_name} - {shop_name}"
+    meta_description = Column(Text, nullable=True)
+
+    # Relationships
+    vendor = relationship("Vendor", back_populates="theme")
+
+    def __repr__(self):
+        return f"<VendorTheme(vendor_id={self.vendor_id}, theme_name='{self.theme_name}')>"
+
+    @property
+    def primary_color(self):
+        """Get primary color from JSON"""
+        return self.colors.get("primary", "#6366f1")
+
+    @property
+    def css_variables(self):
+        """Generate CSS custom properties from theme config"""
+        return {
+            "--color-primary": self.colors.get("primary", "#6366f1"),
+            "--color-secondary": self.colors.get("secondary", "#8b5cf6"),
+            "--color-accent": self.colors.get("accent", "#ec4899"),
+            "--color-background": self.colors.get("background", "#ffffff"),
+            "--color-text": self.colors.get("text", "#1f2937"),
+            "--color-border": self.colors.get("border", "#e5e7eb"),
+            "--font-heading": self.font_family_heading,
+            "--font-body": self.font_family_body,
+        }
+
+    def to_dict(self):
+        """Convert theme to dictionary for template rendering"""
+        return {
+            "theme_name": self.theme_name,
+            "colors": self.colors,
+            "fonts": {
+                "heading": self.font_family_heading,
+                "body": self.font_family_body,
+            },
+            "branding": {
+                "logo": self.logo_url,
+                "logo_dark": self.logo_dark_url,
+                "favicon": self.favicon_url,
+                "banner": self.banner_url,
+            },
+            "layout": {
+                "style": self.layout_style,
+                "header": self.header_style,
+                "product_card": self.product_card_style,
+            },
+            "social_links": self.social_links,
+            "custom_css": self.custom_css,
+            "css_variables": self.css_variables,
+        }

models/schema/vendor_domain.py

@@ -0,0 +1,127 @@
+# models/schema/vendor_domain.py
+"""
+Pydantic schemas for Vendor Domain operations.
+
+Schemas include:
+- VendorDomainCreate: For adding custom domains
+- VendorDomainUpdate: For updating domain settings
+- VendorDomainResponse: Standard domain response
+- VendorDomainListResponse: Paginated domain list
+- DomainVerificationInstructions: DNS verification instructions
+"""
+
+import re
+from datetime import datetime
+from typing import List, Optional, Dict
+from pydantic import BaseModel, ConfigDict, Field, field_validator
+
+
+class VendorDomainCreate(BaseModel):
+    """Schema for adding a custom domain to vendor."""
+
+    domain: str = Field(
+        ...,
+        description="Custom domain (e.g., myshop.com or shop.mybrand.com)",
+        min_length=3,
+        max_length=255
+    )
+    is_primary: bool = Field(
+        default=False,
+        description="Set as primary domain for the vendor"
+    )
+
+    @field_validator('domain')
+    @classmethod
+    def validate_domain(cls, v: str) -> str:
+        """Validate and normalize domain."""
+        # Remove protocol if present
+        domain = v.replace("https://", "").replace("http://", "")
+
+        # Remove trailing slash
+        domain = domain.rstrip("/")
+
+        # Convert to lowercase
+        domain = domain.lower().strip()
+
+        # Basic validation
+        if not domain or '/' in domain:
+            raise ValueError("Invalid domain format")
+
+        if '.' not in domain:
+            raise ValueError("Domain must have at least one dot")
+
+        # Check for reserved subdomains
+        reserved = ['www', 'admin', 'api', 'mail', 'smtp', 'ftp', 'cpanel', 'webmail']
+        first_part = domain.split('.')[0]
+        if first_part in reserved:
+            raise ValueError(f"Domain cannot start with reserved subdomain: {first_part}")
+
+        # Validate domain format (basic regex)
+        domain_pattern = r'^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?(\.[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)*$'
+        if not re.match(domain_pattern, domain):
+            raise ValueError("Invalid domain format")
+
+        return domain
+
+
+class VendorDomainUpdate(BaseModel):
+    """Schema for updating vendor domain settings."""
+
+    is_primary: Optional[bool] = Field(None, description="Set as primary domain")
+    is_active: Optional[bool] = Field(None, description="Activate or deactivate domain")
+
+    model_config = ConfigDict(from_attributes=True)
+
+
+class VendorDomainResponse(BaseModel):
+    """Standard schema for vendor domain response."""
+    model_config = ConfigDict(from_attributes=True)
+
+    id: int
+    vendor_id: int
+    domain: str
+    is_primary: bool
+    is_active: bool
+    is_verified: bool
+    ssl_status: str
+    verification_token: Optional[str] = None
+    verified_at: Optional[datetime] = None
+    ssl_verified_at: Optional[datetime] = None
+    created_at: datetime
+    updated_at: datetime
+
+
+class VendorDomainListResponse(BaseModel):
+    """Schema for paginated vendor domain list."""
+
+    domains: List[VendorDomainResponse]
+    total: int
+
+
+class DomainVerificationInstructions(BaseModel):
+    """DNS verification instructions for domain ownership."""
+
+    domain: str
+    verification_token: str
+    instructions: Dict[str, str]
+    txt_record: Dict[str, str]
+    common_registrars: Dict[str, str]
+
+    model_config = ConfigDict(from_attributes=True)
+
+
+class DomainVerificationResponse(BaseModel):
+    """Response after domain verification."""
+
+    message: str
+    domain: str
+    verified_at: datetime
+    is_verified: bool
+
+
+class DomainDeletionResponse(BaseModel):
+    """Response after domain deletion."""
+
+    message: str
+    domain: str
+    vendor_id: int

tests/unit/middleware/test_vendor_context.py

@@ -0,0 +1,23 @@
+from requests.cookies import MockRequest
+
+from middleware.vendor_context import VendorContextManager
+
+
+def test_custom_domain_detection():
+    # Mock request with custom domain
+    request = MockRequest(host="customdomain1.com")
+    context = VendorContextManager.detect_vendor_context(request)
+    assert context["detection_method"] == "custom_domain"
+    assert context["domain"] == "customdomain1.com"
+
+def test_subdomain_detection():
+    request = MockRequest(host="vendor1.platform.com")
+    context = VendorContextManager.detect_vendor_context(request)
+    assert context["detection_method"] == "subdomain"
+    assert context["subdomain"] == "vendor1"
+
+def test_path_detection():
+    request = MockRequest(host="localhost", path="/vendor/vendor1/")
+    context = VendorContextManager.detect_vendor_context(request)
+    assert context["detection_method"] == "path"
+    assert context["subdomain"] == "vendor1"