frontend error management enhancement

app/api/v1/admin/auth.py

@@ -14,12 +14,12 @@ from fastapi import APIRouter, Depends, Response
 from sqlalchemy.orm import Session
 
 from app.core.database import get_db
+from app.core.environment import should_use_secure_cookies
 from app.services.auth_service import auth_service
 from app.exceptions import InvalidCredentialsException
 from models.schema.auth import LoginResponse, UserLogin, UserResponse
 from models.database.user import User
 from app.api.deps import get_current_admin_api
-from app.core.config import settings
 
 router = APIRouter(prefix="/auth")
 logger = logging.getLogger(__name__)
@@ -60,7 +60,7 @@ def admin_login(
         key="admin_token",
         value=login_result["token_data"]["access_token"],
         httponly=True,  # JavaScript cannot access (XSS protection)
-        secure=settings.environment == "production",  # HTTPS only in production
+        secure=should_use_secure_cookies(),  # HTTPS only in production/staging
         samesite="lax",  # CSRF protection
         max_age=login_result["token_data"]["expires_in"],  # Match JWT expiry
         path="/admin",  # RESTRICTED TO ADMIN ROUTES ONLY
@@ -68,7 +68,7 @@ def admin_login(
 
     logger.debug(
         f"Set admin_token cookie with {login_result['token_data']['expires_in']}s expiry "
-        f"(path=/admin, httponly=True, secure={settings.environment == 'production'})"
+        f"(path=/admin, httponly=True, secure={should_use_secure_cookies()})"
     )
 
     # Also return token in response for localStorage (API calls)

app/api/v1/public/vendors/auth.py

@@ -12,7 +12,7 @@ This prevents:
 """
 
 import logging
-from fastapi import APIRouter, Depends, Response
+from fastapi import APIRouter, Depends, Response, Request
 from sqlalchemy.orm import Session
 
 from app.core.database import get_db
@@ -21,7 +21,8 @@ from app.exceptions import VendorNotFoundException
 from models.schema.auth import LoginResponse, UserLogin
 from models.schema.customer import CustomerRegister, CustomerResponse
 from models.database.vendor import Vendor
-from app.core.config import settings
+from app.api.deps import get_current_customer_api
+from app.core.environment import should_use_secure_cookies
 
 router = APIRouter(prefix="/auth")
 logger = logging.getLogger(__name__)
@@ -110,7 +111,7 @@ def customer_login(
         key="customer_token",
         value=login_result["token_data"]["access_token"],
         httponly=True,  # JavaScript cannot access (XSS protection)
-        secure=settings.environment == "production",  # HTTPS only in production
+        secure=should_use_secure_cookies(),  # HTTPS only in production/staging
         samesite="lax",  # CSRF protection
         max_age=login_result["token_data"]["expires_in"],  # Match JWT expiry
         path="/shop",  # RESTRICTED TO SHOP ROUTES ONLY
@@ -118,7 +119,7 @@ def customer_login(
 
     logger.debug(
         f"Set customer_token cookie with {login_result['token_data']['expires_in']}s expiry "
-        f"(path=/shop, httponly=True, secure={settings.environment == 'production'})"
+        f"(path=/shop, httponly=True, secure={should_use_secure_cookies()})"
     )
 
     # Return full login response
@@ -230,8 +231,6 @@ def get_current_customer(
     This endpoint can be called to verify authentication and get customer info.
     Requires customer authentication via cookie or header.
     """
-    from app.api.deps import get_current_customer_api
-    from fastapi import Request
 
     # Note: This would need Request object to check cookies
     # For now, just indicate the endpoint exists

app/api/v1/vendor/auth.py

@@ -24,7 +24,8 @@ from models.schema.auth import UserLogin
 from models.database.vendor import Vendor, VendorUser, Role
 from models.database.user import User
 from pydantic import BaseModel
-from app.core.config import settings
+from app.api.deps import get_current_vendor_api
+from app.core.environment import should_use_secure_cookies
 
 router = APIRouter(prefix="/auth")
 logger = logging.getLogger(__name__)
@@ -139,7 +140,7 @@ def vendor_login(
         key="vendor_token",
         value=login_result["token_data"]["access_token"],
         httponly=True,  # JavaScript cannot access (XSS protection)
-        secure=settings.environment == "production",  # HTTPS only in production
+        secure=should_use_secure_cookies(),  # HTTPS only in production/staging
         samesite="lax",  # CSRF protection
         max_age=login_result["token_data"]["expires_in"],  # Match JWT expiry
         path="/vendor",  # RESTRICTED TO VENDOR ROUTES ONLY
@@ -147,7 +148,7 @@ def vendor_login(
 
     logger.debug(
         f"Set vendor_token cookie with {login_result['token_data']['expires_in']}s expiry "
-        f"(path=/vendor, httponly=True, secure={settings.environment == 'production'})"
+        f"(path=/vendor, httponly=True, secure={should_use_secure_cookies()})"
     )
 
     # Return full login response
@@ -205,7 +206,6 @@ def get_current_vendor_user(
 
     This endpoint can be called to verify authentication and get user info.
     """
-    from app.api.deps import get_current_vendor_api
 
     # This will check both cookie and header
     user = get_current_vendor_api(request, db=db)

app/core/environment.py

@@ -0,0 +1,107 @@
+# app/core/environment.py
+"""
+Environment detection utilities.
+
+Automatically detects environment based on runtime conditions
+rather than relying on configuration.
+"""
+
+import os
+from typing import Literal
+
+EnvironmentType = Literal["development", "staging", "production"]
+
+
+def get_environment() -> EnvironmentType:
+    """
+    Detect current environment automatically.
+    
+    Detection logic:
+    1. Check ENV environment variable if set
+    2. Check ENVIRONMENT environment variable if set
+    3. Auto-detect based on hostname/indicators:
+       - localhost, 127.0.0.1 → development
+       - Contains 'staging' → staging
+       - Otherwise → production (safe default)
+    
+    Returns:
+        str: 'development', 'staging', or 'production'
+    """
+    # Priority 1: Explicit ENV variable
+    env = os.getenv("ENV", "").lower()
+    if env in ["development", "dev", "local"]:
+        return "development"
+    elif env in ["staging", "stage"]:
+        return "staging"
+    elif env in ["production", "prod"]:
+        return "production"
+    
+    # Priority 2: ENVIRONMENT variable
+    env = os.getenv("ENVIRONMENT", "").lower()
+    if env in ["development", "dev", "local"]:
+        return "development"
+    elif env in ["staging", "stage"]:
+        return "staging"
+    elif env in ["production", "prod"]:
+        return "production"
+    
+    # Priority 3: Auto-detect from common indicators
+    
+    # Check if running in debug mode (common in development)
+    if os.getenv("DEBUG", "").lower() in ["true", "1", "yes"]:
+        return "development"
+    
+    # Check common development indicators
+    hostname = os.getenv("HOSTNAME", "").lower()
+    if any(dev_indicator in hostname for dev_indicator in ["local", "dev", "laptop", "desktop"]):
+        return "development"
+    
+    # Check for staging indicators
+    if "staging" in hostname or "stage" in hostname:
+        return "staging"
+    
+    # Default to development for safety (HTTPS not required in dev)
+    # Change this to "production" if you prefer secure-by-default
+    return "development"
+
+
+def is_development() -> bool:
+    """Check if running in development environment."""
+    return get_environment() == "development"
+
+
+def is_staging() -> bool:
+    """Check if running in staging environment."""
+    return get_environment() == "staging"
+
+
+def is_production() -> bool:
+    """Check if running in production environment."""
+    return get_environment() == "production"
+
+
+def should_use_secure_cookies() -> bool:
+    """
+    Determine if cookies should have secure flag (HTTPS only).
+    
+    Returns:
+        bool: True if production or staging, False if development
+    """
+    return not is_development()
+
+
+# Cache the environment detection result
+_cached_environment: EnvironmentType | None = None
+
+
+def get_cached_environment() -> EnvironmentType:
+    """
+    Get environment with caching.
+    
+    Environment is detected once and cached for performance.
+    Useful if you call this frequently.
+    """
+    global _cached_environment
+    if _cached_environment is None:
+        _cached_environment = get_environment()
+    return _cached_environment

app/exceptions/error_renderer.py

@@ -0,0 +1,347 @@
+# app/exceptions/error_renderer.py
+"""
+Error Page Renderer
+
+Renders context-aware error pages using Jinja2 templates.
+Handles fallback logic and context-specific customization.
+"""
+import logging
+from pathlib import Path
+from typing import Optional, Dict, Any
+
+from fastapi import Request
+from fastapi.responses import HTMLResponse
+from fastapi.templating import Jinja2Templates
+
+from middleware.context_middleware import RequestContext, get_request_context
+
+logger = logging.getLogger(__name__)
+
+
+class ErrorPageRenderer:
+    """Renders context-aware error pages using Jinja2 templates."""
+
+    # Map status codes to friendly names
+    STATUS_CODE_NAMES = {
+        400: "Bad Request",
+        401: "Unauthorized",
+        403: "Forbidden",
+        404: "Not Found",
+        422: "Validation Error",
+        429: "Too Many Requests",
+        500: "Internal Server Error",
+        502: "Bad Gateway",
+        503: "Service Unavailable",
+    }
+
+    # Map status codes to user-friendly messages
+    STATUS_CODE_MESSAGES = {
+        400: "The request could not be processed due to invalid data.",
+        401: "You need to be authenticated to access this resource.",
+        403: "You don't have permission to access this resource.",
+        404: "The page you're looking for doesn't exist or has been moved.",
+        422: "The submitted data contains validation errors.",
+        429: "Too many requests. Please slow down and try again later.",
+        500: "Something went wrong on our end. We're working to fix it.",
+        502: "Unable to reach the service. Please try again later.",
+        503: "The service is temporarily unavailable. Please try again later.",
+    }
+
+    @staticmethod
+    def get_templates_dir() -> Path:
+        """Get the templates directory path."""
+        # Assuming templates are in app/templates/
+        base_dir = Path(__file__).resolve().parent.parent
+        return base_dir / "templates"
+
+    @staticmethod
+    def render_error_page(
+        request: Request,
+        status_code: int,
+        error_code: str,
+        message: str,
+        details: Optional[Dict[str, Any]] = None,
+        show_debug: bool = False,
+    ) -> HTMLResponse:
+        """
+        Render appropriate error page based on request context.
+
+        Template Selection Priority:
+        1. Context-specific error page: {context}/errors/{status_code}.html
+        2. Context-specific generic: {context}/errors/generic.html
+        3. Fallback error page: fallback/{status_code}.html
+        4. Fallback generic: fallback/generic.html
+
+        Args:
+            request: FastAPI request object
+            status_code: HTTP status code
+            error_code: Application error code
+            message: Error message
+            details: Additional error details
+            show_debug: Whether to show debug information
+
+        Returns:
+            HTMLResponse with rendered error page
+        """
+        # Get request context
+        context_type = get_request_context(request)
+
+        # Prepare template data
+        template_data = ErrorPageRenderer._prepare_template_data(
+            request=request,
+            context_type=context_type,
+            status_code=status_code,
+            error_code=error_code,
+            message=message,
+            details=details,
+            show_debug=show_debug,
+        )
+
+        # Find and render template
+        templates_dir = ErrorPageRenderer.get_templates_dir()
+        templates = Jinja2Templates(directory=str(templates_dir))
+
+        # Try to find appropriate template
+        template_path = ErrorPageRenderer._find_template(
+            context_type=context_type,
+            status_code=status_code,
+        )
+
+        logger.info(
+            f"Rendering error page: {template_path} for {status_code} in {context_type.value} context",
+            extra={
+                "status_code": status_code,
+                "error_code": error_code,
+                "context": context_type.value,
+                "template": template_path,
+            }
+        )
+
+        try:
+            # Render template
+            return templates.TemplateResponse(
+                template_path,
+                {
+                    "request": request,
+                    **template_data,
+                },
+                status_code=status_code,
+            )
+        except Exception as e:
+            logger.error(
+                f"Failed to render error template {template_path}: {e}",
+                exc_info=True
+            )
+            # Return basic HTML as absolute fallback
+            return ErrorPageRenderer._render_basic_html_fallback(
+                status_code=status_code,
+                error_code=error_code,
+                message=message,
+            )
+
+    @staticmethod
+    def _find_template(
+        context_type: RequestContext,
+        status_code: int,
+    ) -> str:
+        """
+        Find appropriate error template based on context and status code.
+
+        Priority:
+        1. {context}/errors/{status_code}.html
+        2. {context}/errors/generic.html
+        3. fallback/{status_code}.html
+        4. fallback/generic.html
+        """
+        templates_dir = ErrorPageRenderer.get_templates_dir()
+
+        # Map context type to folder name
+        context_folders = {
+            RequestContext.ADMIN: "admin",
+            RequestContext.VENDOR_DASHBOARD: "vendor",
+            RequestContext.SHOP: "shop",
+            RequestContext.API: "fallback",  # API shouldn't get here, but just in case
+            RequestContext.FALLBACK: "fallback",
+        }
+
+        context_folder = context_folders.get(context_type, "fallback")
+
+        # Try context-specific status code template
+        specific_template = f"{context_folder}/errors/{status_code}.html"
+        if (templates_dir / specific_template).exists():
+            return specific_template
+
+        # Try context-specific generic template
+        generic_template = f"{context_folder}/errors/generic.html"
+        if (templates_dir / generic_template).exists():
+            return generic_template
+
+        # Try fallback status code template
+        fallback_specific = f"fallback/{status_code}.html"
+        if (templates_dir / fallback_specific).exists():
+            return fallback_specific
+
+        # Use fallback generic template (must exist)
+        return "fallback/generic.html"
+
+    @staticmethod
+    def _prepare_template_data(
+        request: Request,
+        context_type: RequestContext,
+        status_code: int,
+        error_code: str,
+        message: str,
+        details: Optional[Dict[str, Any]],
+        show_debug: bool,
+    ) -> Dict[str, Any]:
+        """Prepare data dictionary for error template."""
+        # Get friendly status name
+        status_name = ErrorPageRenderer.STATUS_CODE_NAMES.get(
+            status_code, f"Error {status_code}"
+        )
+
+        # Get default user-friendly message
+        default_message = ErrorPageRenderer.STATUS_CODE_MESSAGES.get(
+            status_code, "An error occurred while processing your request."
+        )
+
+        # Use provided message or default
+        user_message = message if message else default_message
+
+        # Determine if we should show debug info
+        # Only show to admins (we can check user role if available)
+        display_debug = show_debug and ErrorPageRenderer._is_admin_user(request)
+
+        # Get context-specific data
+        context_data = ErrorPageRenderer._get_context_data(request, context_type)
+
+        return {
+            "status_code": status_code,
+            "status_name": status_name,
+            "error_code": error_code,
+            "message": user_message,
+            "details": details or {},
+            "show_debug": display_debug,
+            "context_type": context_type.value,
+            "path": request.url.path,
+            **context_data,
+        }
+
+    @staticmethod
+    def _get_context_data(request: Request, context_type: RequestContext) -> Dict[str, Any]:
+        """Get context-specific data for error templates."""
+        data = {}
+
+        # Add vendor information if available (for shop context)
+        if context_type == RequestContext.SHOP:
+            vendor = getattr(request.state, "vendor", None)
+            if vendor:
+                # Pass minimal vendor info for templates
+                data["vendor"] = {
+                    "id": vendor.id,
+                    "name": vendor.name,
+                    "subdomain": vendor.subdomain,
+                    "logo": getattr(vendor, "logo", None),
+                }
+
+            # Add theme information if available
+            theme = getattr(request.state, "theme", None)
+            if theme:
+                # Theme can be a dict or object, handle both
+                if isinstance(theme, dict):
+                    data["theme"] = theme
+                else:
+                    # If it's an object, convert to dict
+                    data["theme"] = {
+                        "colors": getattr(theme, "colors", {}),
+                        "fonts": getattr(theme, "fonts", {}),
+                        "branding": getattr(theme, "branding", {}),
+                        "custom_css": getattr(theme, "custom_css", None),
+                    }
+
+        return data
+
+    @staticmethod
+    def _is_admin_user(request: Request) -> bool:
+        """
+        Check if current user is an admin (for debug info display).
+
+        This is a placeholder - implement based on your auth system.
+        """
+        # TODO: Implement actual admin check based on JWT/session
+        # For now, check if we're in admin context
+        context_type = get_request_context(request)
+        return context_type == RequestContext.ADMIN
+
+    @staticmethod
+    def _render_basic_html_fallback(
+        status_code: int,
+        error_code: str,
+        message: str,
+    ) -> HTMLResponse:
+        """
+        Render a basic HTML error page as absolute fallback.
+
+        Used when template rendering fails.
+        """
+        html_content = f"""
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{status_code} - Error</title>
+    <style>
+        * {{
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }}
+        body {{
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            padding: 2rem;
+        }}
+        .container {{
+            text-align: center;
+            max-width: 600px;
+        }}
+        h1 {{
+            font-size: 6rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+        }}
+        h2 {{
+            font-size: 1.5rem;
+            font-weight: 400;
+            margin-bottom: 1rem;
+        }}
+        p {{
+            font-size: 1.1rem;
+            margin-bottom: 2rem;
+            opacity: 0.9;
+        }}
+        .error-code {{
+            font-size: 0.9rem;
+            opacity: 0.7;
+            font-family: 'Courier New', monospace;
+        }}
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>{status_code}</h1>
+        <h2>Error</h2>
+        <p>{message}</p>
+        <div class="error-code">Error Code: {error_code}</div>
+    </div>
+</body>
+</html>
+        """
+        return HTMLResponse(content=html_content, status_code=status_code)

app/exceptions/handler.py

@@ -7,6 +7,7 @@ This module provides classes and functions for:
 - Unified exception handling for all application exceptions
 - Consistent error response formatting
 - Comprehensive logging with structured data
+- Context-aware HTML error pages
 """
 
 import logging
@@ -17,6 +18,8 @@ from fastapi.exceptions import RequestValidationError
 from fastapi.responses import JSONResponse, RedirectResponse
 
 from .base import WizamartException
+from .error_renderer import ErrorPageRenderer
+from middleware.context_middleware import RequestContext, get_request_context
 
 logger = logging.getLogger(__name__)
 
@@ -26,7 +29,7 @@ def setup_exception_handlers(app):
 
     @app.exception_handler(WizamartException)
     async def custom_exception_handler(request: Request, exc: WizamartException):
-        """Handle custom exceptions."""
+        """Handle custom exceptions with context-aware rendering."""
 
         # Special handling for 401 on HTML page requests (redirect to login)
         if exc.status_code == 401 and _is_html_page_request(request):
@@ -39,16 +42,10 @@ def setup_exception_handlers(app):
                 }
             )
 
-            # Redirect to appropriate login page
-            if request.url.path.startswith("/admin"):
-                logger.debug("Redirecting to /admin/login")
-                return RedirectResponse(url="/admin/login", status_code=302)
-            elif "/vendor/" in request.url.path:
-                logger.debug("Redirecting to /vendor/login")
-                return RedirectResponse(url="/vendor/login", status_code=302)
-            # If neither, fall through to JSON response
-            logger.debug("No specific redirect path matched, returning JSON")
+            # Redirect to appropriate login page based on context
+            return _redirect_to_login(request)
 
+        # Log the exception
         logger.error(
             f"Custom exception in {request.method} {request.url}: "
             f"{exc.error_code} - {exc.message}",
@@ -62,6 +59,25 @@ def setup_exception_handlers(app):
             }
         )
 
+        # Check if this is an API request
+        if _is_api_request(request):
+            return JSONResponse(
+                status_code=exc.status_code,
+                content=exc.to_dict()
+            )
+
+        # Check if this is an HTML page request
+        if _is_html_page_request(request):
+            return ErrorPageRenderer.render_error_page(
+                request=request,
+                status_code=exc.status_code,
+                error_code=exc.error_code,
+                message=exc.message,
+                details=exc.details,
+                show_debug=True,  # Will be filtered by ErrorPageRenderer based on user role
+            )
+
+        # Default to JSON for unknown request types
         return JSONResponse(
             status_code=exc.status_code,
             content=exc.to_dict()
@@ -83,6 +99,29 @@ def setup_exception_handlers(app):
             }
         )
 
+        # Check if this is an API request
+        if _is_api_request(request):
+            return JSONResponse(
+                status_code=exc.status_code,
+                content={
+                    "error_code": f"HTTP_{exc.status_code}",
+                    "message": exc.detail,
+                    "status_code": exc.status_code,
+                }
+            )
+
+        # Check if this is an HTML page request
+        if _is_html_page_request(request):
+            return ErrorPageRenderer.render_error_page(
+                request=request,
+                status_code=exc.status_code,
+                error_code=f"HTTP_{exc.status_code}",
+                message=exc.detail,
+                details={},
+                show_debug=True,
+            )
+
+        # Default to JSON
         return JSONResponse(
             status_code=exc.status_code,
             content={
@@ -130,6 +169,32 @@ def setup_exception_handlers(app):
                     clean_error[key] = value
             clean_errors.append(clean_error)
 
+        # Check if this is an API request
+        if _is_api_request(request):
+            return JSONResponse(
+                status_code=422,
+                content={
+                    "error_code": "VALIDATION_ERROR",
+                    "message": "Request validation failed",
+                    "status_code": 422,
+                    "details": {
+                        "validation_errors": clean_errors
+                    }
+                }
+            )
+
+        # Check if this is an HTML page request
+        if _is_html_page_request(request):
+            return ErrorPageRenderer.render_error_page(
+                request=request,
+                status_code=422,
+                error_code="VALIDATION_ERROR",
+                message="Request validation failed",
+                details={"validation_errors": clean_errors},
+                show_debug=True,
+            )
+
+        # Default to JSON
         return JSONResponse(
             status_code=422,
             content={
@@ -137,7 +202,7 @@ def setup_exception_handlers(app):
                 "message": "Request validation failed",
                 "status_code": 422,
                 "details": {
-                    "validation_errors": clean_errors  # Use cleaned errors
+                    "validation_errors": clean_errors
                 }
             }
         )
@@ -156,6 +221,29 @@ def setup_exception_handlers(app):
             }
         )
 
+        # Check if this is an API request
+        if _is_api_request(request):
+            return JSONResponse(
+                status_code=500,
+                content={
+                    "error_code": "INTERNAL_SERVER_ERROR",
+                    "message": "Internal server error",
+                    "status_code": 500,
+                }
+            )
+
+        # Check if this is an HTML page request
+        if _is_html_page_request(request):
+            return ErrorPageRenderer.render_error_page(
+                request=request,
+                status_code=500,
+                error_code="INTERNAL_SERVER_ERROR",
+                message="Internal server error",
+                details={},
+                show_debug=True,
+            )
+
+        # Default to JSON
         return JSONResponse(
             status_code=500,
             content={
@@ -170,97 +258,33 @@ def setup_exception_handlers(app):
         """Handle all 404 errors with consistent format."""
         logger.warning(f"404 Not Found: {request.method} {request.url}")
 
-        # Check if this is a browser request (wants HTML)
-        accept_header = request.headers.get("accept", "")
+        # Check if this is an API request
+        if _is_api_request(request):
+            return JSONResponse(
+                status_code=404,
+                content={
+                    "error_code": "ENDPOINT_NOT_FOUND",
+                    "message": f"Endpoint not found: {request.url.path}",
+                    "status_code": 404,
+                    "details": {
+                        "path": request.url.path,
+                        "method": request.method
+                    }
+                }
+            )
 
-        # Browser requests typically have "text/html" in accept header
-        # API requests typically have "application/json"
-        if "text/html" in accept_header:
-            # Return simple HTML 404 page for browser
-            from fastapi.responses import HTMLResponse
+        # Check if this is an HTML page request
+        if _is_html_page_request(request):
+            return ErrorPageRenderer.render_error_page(
+                request=request,
+                status_code=404,
+                error_code="ENDPOINT_NOT_FOUND",
+                message=f"The page you're looking for doesn't exist or has been moved.",
+                details={"path": request.url.path},
+                show_debug=True,
+            )
 
-            html_content = f"""
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>404 - Page Not Found</title>
-    <style>
-        * {{
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }}
-        body {{
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-        }}
-        .container {{
-            text-align: center;
-            padding: 2rem;
-            max-width: 600px;
-        }}
-        h1 {{
-            font-size: 8rem;
-            font-weight: 700;
-            margin-bottom: 1rem;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
-        }}
-        h2 {{
-            font-size: 2rem;
-            font-weight: 400;
-            margin-bottom: 1rem;
-        }}
-        p {{
-            font-size: 1.2rem;
-            margin-bottom: 2rem;
-            opacity: 0.9;
-        }}
-        .btn {{
-            display: inline-block;
-            padding: 1rem 2.5rem;
-            background: white;
-            color: #667eea;
-            text-decoration: none;
-            border-radius: 50px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-        }}
-        .btn:hover {{
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
-        }}
-        .path {{
-            margin-top: 2rem;
-            font-size: 0.9rem;
-            opacity: 0.7;
-            font-family: 'Courier New', monospace;
-            word-break: break-all;
-        }}
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h1>404</h1>
-        <h2>Page Not Found</h2>
-        <p>Sorry, the page you're looking for doesn't exist or has been moved.</p>
-        <a href="/" class="btn">Go Home</a>
-        <div class="path">Path: {request.url.path}</div>
-    </div>
-</body>
-</html>
-            """
-
-            return HTMLResponse(content=html_content, status_code=404)
-
-        # Return JSON for API requests
+        # Default to JSON
         return JSONResponse(
             status_code=404,
             content={
@@ -275,6 +299,15 @@ def setup_exception_handlers(app):
         )
 
 
+def _is_api_request(request: Request) -> bool:
+    """
+    Check if the request is for an API endpoint.
+
+    API requests ALWAYS return JSON.
+    """
+    return request.url.path.startswith("/api/")
+
+
 def _is_html_page_request(request: Request) -> bool:
     """
     Check if the request is for an HTML page (not an API endpoint).
@@ -295,7 +328,7 @@ def _is_html_page_request(request: Request) -> bool:
     )
 
     # Don't redirect API calls
-    if "/api/" in request.url.path:
+    if _is_api_request(request):
         logger.debug("Not HTML page: API endpoint")
         return False
 
@@ -315,10 +348,34 @@ def _is_html_page_request(request: Request) -> bool:
         logger.debug(f"Not HTML page: Accept header doesn't include text/html: {accept_header}")
         return False
 
-    logger.debug("IS HTML page request - will redirect on 401")
+    logger.debug("IS HTML page request")
     return True
 
 
+def _redirect_to_login(request: Request) -> RedirectResponse:
+    """
+    Redirect to appropriate login page based on request context.
+
+    Uses context detection to determine admin vs vendor vs shop login.
+    """
+    context_type = get_request_context(request)
+
+    if context_type == RequestContext.ADMIN:
+        logger.debug("Redirecting to /admin/login")
+        return RedirectResponse(url="/admin/login", status_code=302)
+    elif context_type == RequestContext.VENDOR_DASHBOARD:
+        logger.debug("Redirecting to /vendor/login")
+        return RedirectResponse(url="/vendor/login", status_code=302)
+    elif context_type == RequestContext.SHOP:
+        # For shop context, redirect to shop login (customer login)
+        logger.debug("Redirecting to /shop/login")
+        return RedirectResponse(url="/shop/login", status_code=302)
+    else:
+        # Fallback to root for unknown contexts
+        logger.debug("Unknown context, redirecting to /")
+        return RedirectResponse(url="/", status_code=302)
+
+
 # Utility functions for common exception scenarios
 def raise_not_found(resource_type: str, identifier: str) -> None:
     """Convenience function to raise ResourceNotFoundException."""

app/templates/admin/errors/400.html

@@ -0,0 +1,44 @@
+{% extends "admin/errors/base.html" %}
+
+{% block icon %}❌{% endblock %}
+
+{% block title %}400 - Bad Request{% endblock %}
+
+{% block content %}
+<div class="error-icon">❌</div>
+<div class="status-code">400</div>
+<div class="status-name">Bad Request</div>
+<div class="error-message">
+    The request could not be processed due to invalid data or malformed syntax.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+<div class="action-buttons">
+    <a href="javascript:history.back()" class="btn btn-primary">Go Back</a>
+    <a href="/admin/dashboard" class="btn btn-secondary">Dashboard</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information (Admin Only)</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Need help? <a href="/admin/support">Contact Support</a>
+</div>
+{% endblock %}

app/templates/admin/errors/401.html

@@ -0,0 +1,44 @@
+{% extends "admin/errors/base.html" %}
+
+{% block icon %}🔐{% endblock %}
+
+{% block title %}401 - Authentication Required{% endblock %}
+
+{% block content %}
+<div class="error-icon">🔐</div>
+<div class="status-code">401</div>
+<div class="status-name">Authentication Required</div>
+<div class="error-message">
+    You need to be authenticated to access this admin resource.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+<div class="action-buttons">
+    <a href="/admin/login" class="btn btn-primary">Log In</a>
+    <a href="/admin/dashboard" class="btn btn-secondary">Dashboard</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information (Admin Only)</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Having login issues? <a href="/admin/support">Contact Support</a>
+</div>
+{% endblock %}

app/templates/admin/errors/403.html

@@ -0,0 +1,44 @@
+{% extends "admin/errors/base.html" %}
+
+{% block icon %}🚫{% endblock %}
+
+{% block title %}403 - Access Denied{% endblock %}
+
+{% block content %}
+<div class="error-icon">🚫</div>
+<div class="status-code">403</div>
+<div class="status-name">Access Denied</div>
+<div class="error-message">
+    You don't have permission to access this admin resource. If you believe this is an error, please contact your administrator.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+<div class="action-buttons">
+    <a href="/admin/dashboard" class="btn btn-primary">Go to Dashboard</a>
+    <a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information (Admin Only)</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Need elevated permissions? <a href="/admin/support">Contact Administrator</a>
+</div>
+{% endblock %}

app/templates/admin/errors/404.html

@@ -0,0 +1,44 @@
+{% extends "admin/errors/base.html" %}
+
+{% block icon %}🔍{% endblock %}
+
+{% block title %}404 - Page Not Found{% endblock %}
+
+{% block content %}
+<div class="error-icon">🔍</div>
+<div class="status-code">404</div>
+<div class="status-name">Page Not Found</div>
+<div class="error-message">
+    The admin page you're looking for doesn't exist or has been moved.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+<div class="action-buttons">
+    <a href="/admin/dashboard" class="btn btn-primary">Go to Dashboard</a>
+    <a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information (Admin Only)</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Can't find what you're looking for? <a href="/admin/support">Contact Support</a>
+</div>
+{% endblock %}

app/templates/admin/errors/422.html

@@ -0,0 +1,58 @@
+{% extends "admin/errors/base.html" %}
+
+{% block icon %}📋{% endblock %}
+
+{% block title %}422 - Validation Error{% endblock %}
+
+{% block content %}
+<div class="error-icon">📋</div>
+<div class="status-code">422</div>
+<div class="status-name">Validation Error</div>
+<div class="error-message">
+    The data you submitted contains errors. Please review and correct the highlighted fields.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+{% if details and details.validation_errors %}
+<div class="validation-errors" style="margin: 2rem 0; text-align: left;">
+    <h3 style="color: #dc2626; font-size: 1rem; margin-bottom: 1rem;">Validation Errors:</h3>
+    <ul style="list-style: none; padding: 0;">
+    {% for error in details.validation_errors %}
+        <li style="padding: 0.5rem; margin-bottom: 0.5rem; background: #fef2f2; border-left: 3px solid #dc2626; border-radius: 0.25rem;">
+            <strong style="color: #991b1b;">{{ error.loc | join(' → ') }}:</strong>
+            <span style="color: #7f1d1d;">{{ error.msg }}</span>
+        </li>
+    {% endfor %}
+    </ul>
+</div>
+{% endif %}
+
+<div class="action-buttons">
+    <a href="javascript:history.back()" class="btn btn-primary">Go Back</a>
+    <a href="/admin/dashboard" class="btn btn-secondary">Dashboard</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information (Admin Only)</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Still having issues? <a href="/admin/support">Contact Support</a>
+</div>
+{% endblock %}

app/templates/admin/errors/429.html

@@ -0,0 +1,52 @@
+{% extends "admin/errors/base.html" %}
+
+{% block icon %}⏱️{% endblock %}
+
+{% block title %}429 - Too Many Requests{% endblock %}
+
+{% block content %}
+<div class="error-icon">⏱️</div>
+<div class="status-code">429</div>
+<div class="status-name">Too Many Requests</div>
+<div class="error-message">
+    You've made too many requests in a short period. Please slow down and try again in a moment.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+{% if details and details.retry_after %}
+<div style="margin: 1.5rem 0; padding: 1rem; background: #fef3c7; border-radius: 0.5rem;">
+    <p style="color: #92400e; font-weight: 600;">
+        Please wait {{ details.retry_after }} seconds before trying again.
+    </p>
+</div>
+{% endif %}
+
+<div class="action-buttons">
+    <a href="javascript:location.reload()" class="btn btn-primary">Retry</a>
+    <a href="/admin/dashboard" class="btn btn-secondary">Dashboard</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information (Admin Only)</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Experiencing persistent rate limits? <a href="/admin/support">Contact Support</a>
+</div>
+{% endblock %}

app/templates/admin/errors/500.html

@@ -0,0 +1,44 @@
+{% extends "admin/errors/base.html" %}
+
+{% block icon %}⚙️{% endblock %}
+
+{% block title %}500 - Server Error{% endblock %}
+
+{% block content %}
+<div class="error-icon">⚙️</div>
+<div class="status-code">500</div>
+<div class="status-name">Internal Server Error</div>
+<div class="error-message">
+    Something went wrong on our end. Our team has been notified and is working to fix the issue.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+<div class="action-buttons">
+    <a href="/admin/dashboard" class="btn btn-primary">Go to Dashboard</a>
+    <a href="javascript:location.reload()" class="btn btn-secondary">Retry</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information (Admin Only)</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Issue persisting? <a href="/admin/support">Report this error</a>
+</div>
+{% endblock %}

app/templates/admin/errors/502.html

@@ -0,0 +1,44 @@
+{% extends "admin/errors/base.html" %}
+
+{% block icon %}🔌{% endblock %}
+
+{% block title %}502 - Bad Gateway{% endblock %}
+
+{% block content %}
+<div class="error-icon">🔌</div>
+<div class="status-code">502</div>
+<div class="status-name">Bad Gateway</div>
+<div class="error-message">
+    We're unable to reach the service right now. This is usually temporary. Please try again in a moment.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+<div class="action-buttons">
+    <a href="javascript:location.reload()" class="btn btn-primary">Retry</a>
+    <a href="/admin/dashboard" class="btn btn-secondary">Dashboard</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information (Admin Only)</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Service unavailable for extended period? <a href="/admin/support">Check Status</a>
+</div>
+{% endblock %}

app/templates/admin/errors/base.html

@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}{{ status_code }} - {{ status_name }}{% endblock %} | Admin Portal</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #1f2937;
+            padding: 2rem;
+        }
+
+        .error-container {
+            background: white;
+            border-radius: 1rem;
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            max-width: 600px;
+            width: 100%;
+            padding: 3rem;
+            text-align: center;
+        }
+
+        .error-icon {
+            font-size: 5rem;
+            margin-bottom: 1rem;
+        }
+
+        .status-code {
+            font-size: 6rem;
+            font-weight: 700;
+            color: #667eea;
+            line-height: 1;
+            margin-bottom: 0.5rem;
+        }
+
+        .status-name {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #374151;
+            margin-bottom: 1rem;
+        }
+
+        .error-message {
+            font-size: 1.1rem;
+            color: #6b7280;
+            margin-bottom: 2rem;
+            line-height: 1.6;
+        }
+
+        .error-code {
+            display: inline-block;
+            background: #f3f4f6;
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            font-family: 'Courier New', monospace;
+            font-size: 0.875rem;
+            color: #6b7280;
+            margin-bottom: 2rem;
+        }
+
+        .action-buttons {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.5rem;
+            font-weight: 600;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            border: none;
+            cursor: pointer;
+            font-size: 1rem;
+        }
+
+        .btn-primary {
+            background: #667eea;
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: #5568d3;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+
+        .btn-secondary {
+            background: #f3f4f6;
+            color: #374151;
+        }
+
+        .btn-secondary:hover {
+            background: #e5e7eb;
+            transform: translateY(-2px);
+        }
+
+        .debug-info {
+            margin-top: 2rem;
+            padding: 1.5rem;
+            background: #fef3c7;
+            border-left: 4px solid #f59e0b;
+            border-radius: 0.5rem;
+            text-align: left;
+        }
+
+        .debug-info h3 {
+            color: #92400e;
+            font-size: 1rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .debug-info pre {
+            background: white;
+            padding: 1rem;
+            border-radius: 0.25rem;
+            overflow-x: auto;
+            font-size: 0.875rem;
+            color: #374151;
+            margin-top: 0.5rem;
+        }
+
+        .debug-item {
+            margin-bottom: 0.75rem;
+        }
+
+        .debug-label {
+            font-weight: 600;
+            color: #92400e;
+            display: inline-block;
+            min-width: 100px;
+        }
+
+        .debug-value {
+            color: #1f2937;
+            font-family: 'Courier New', monospace;
+            font-size: 0.875rem;
+        }
+
+        .support-link {
+            margin-top: 2rem;
+            padding-top: 2rem;
+            border-top: 1px solid #e5e7eb;
+            font-size: 0.875rem;
+            color: #6b7280;
+        }
+
+        .support-link a {
+            color: #667eea;
+            text-decoration: none;
+            font-weight: 600;
+        }
+
+        .support-link a:hover {
+            text-decoration: underline;
+        }
+
+        {% block extra_styles %}{% endblock %}
+    </style>
+</head>
+<body>
+    <div class="error-container">
+        {% block content %}
+        <div class="error-icon">{% block icon %}⚠️{% endblock %}</div>
+        <div class="status-code">{{ status_code }}</div>
+        <div class="status-name">{{ status_name }}</div>
+        <div class="error-message">{{ message }}</div>
+        <div class="error-code">Error Code: {{ error_code }}</div>
+
+        <div class="action-buttons">
+            {% block action_buttons %}
+            <a href="/admin/dashboard" class="btn btn-primary">Go to Dashboard</a>
+            <a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
+            {% endblock %}
+        </div>
+
+        {% if show_debug %}
+        <div class="debug-info">
+            <h3>🔧 Debug Information (Admin Only)</h3>
+            <div class="debug-item">
+                <span class="debug-label">Path:</span>
+                <span class="debug-value">{{ path }}</span>
+            </div>
+            <div class="debug-item">
+                <span class="debug-label">Error Code:</span>
+                <span class="debug-value">{{ error_code }}</span>
+            </div>
+            {% if details %}
+            <div class="debug-item">
+                <span class="debug-label">Details:</span>
+                <pre>{{ details | tojson(indent=2) }}</pre>
+            </div>
+            {% endif %}
+        </div>
+        {% endif %}
+
+        {% block extra_content %}{% endblock %}
+
+        <div class="support-link">
+            {% block support_link %}
+            Need help? <a href="/admin/support">Contact Support</a>
+            {% endblock %}
+        </div>
+        {% endblock %}
+    </div>
+</body>
+</html>

app/templates/admin/errors/generic.html

@@ -0,0 +1,42 @@
+{% extends "admin/errors/base.html" %}
+
+{% block icon %}⚠️{% endblock %}
+
+{% block title %}{{ status_code }} - {{ status_name }}{% endblock %}
+
+{% block content %}
+<div class="error-icon">⚠️</div>
+<div class="status-code">{{ status_code }}</div>
+<div class="status-name">{{ status_name }}</div>
+<div class="error-message">{{ message }}</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+<div class="action-buttons">
+    <a href="/admin/dashboard" class="btn btn-primary">Go to Dashboard</a>
+    <a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information (Admin Only)</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Need assistance? <a href="/admin/support">Contact Support</a>
+</div>
+{% endblock %}

app/templates/fallback/404.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>404 - Page Not Found</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+        }
+        .container {
+            text-align: center;
+            padding: 2rem;
+            max-width: 600px;
+        }
+        h1 {
+            font-size: 8rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+        }
+        h2 {
+            font-size: 2rem;
+            font-weight: 400;
+            margin-bottom: 1rem;
+        }
+        p {
+            font-size: 1.2rem;
+            margin-bottom: 2rem;
+            opacity: 0.9;
+        }
+        .btn {
+            display: inline-block;
+            padding: 1rem 2.5rem;
+            background: white;
+            color: #667eea;
+            text-decoration: none;
+            border-radius: 50px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+        }
+        .path {
+            margin-top: 2rem;
+            font-size: 0.9rem;
+            opacity: 0.7;
+            font-family: 'Courier New', monospace;
+            word-break: break-all;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>404</h1>
+        <h2>Page Not Found</h2>
+        <p>Sorry, the page you're looking for doesn't exist or has been moved.</p>
+        <a href="/" class="btn">Go Home</a>
+        <div class="path">Path: {{ path }}</div>
+    </div>
+</body>
+</html>

app/templates/fallback/500.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>500 - Server Error</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+        }
+        .container {
+            text-align: center;
+            padding: 2rem;
+            max-width: 600px;
+        }
+        h1 {
+            font-size: 8rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+        }
+        h2 {
+            font-size: 2rem;
+            font-weight: 400;
+            margin-bottom: 1rem;
+        }
+        p {
+            font-size: 1.2rem;
+            margin-bottom: 2rem;
+            opacity: 0.9;
+        }
+        .btn {
+            display: inline-block;
+            padding: 1rem 2.5rem;
+            background: white;
+            color: #667eea;
+            text-decoration: none;
+            border-radius: 50px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            margin: 0 0.5rem;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+        }
+        .error-code {
+            margin-top: 2rem;
+            font-size: 0.9rem;
+            opacity: 0.7;
+            font-family: 'Courier New', monospace;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>500</h1>
+        <h2>Internal Server Error</h2>
+        <p>Something went wrong on our end. We're working to fix it.</p>
+        <div>
+            <a href="/" class="btn">Go Home</a>
+            <a href="javascript:location.reload()" class="btn">Retry</a>
+        </div>
+        <div class="error-code">Error Code: {{ error_code }}</div>
+    </div>
+</body>
+</html>

app/templates/fallback/generic.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ status_code }} - Error</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+        }
+        .container {
+            text-align: center;
+            padding: 2rem;
+            max-width: 600px;
+        }
+        h1 {
+            font-size: 8rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+        }
+        h2 {
+            font-size: 2rem;
+            font-weight: 400;
+            margin-bottom: 1rem;
+        }
+        p {
+            font-size: 1.2rem;
+            margin-bottom: 2rem;
+            opacity: 0.9;
+        }
+        .btn {
+            display: inline-block;
+            padding: 1rem 2.5rem;
+            background: white;
+            color: #667eea;
+            text-decoration: none;
+            border-radius: 50px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            margin: 0 0.5rem;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+        }
+        .error-code {
+            margin-top: 2rem;
+            font-size: 0.9rem;
+            opacity: 0.7;
+            font-family: 'Courier New', monospace;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>{{ status_code }}</h1>
+        <h2>{{ status_name }}</h2>
+        <p>{{ message }}</p>
+        <div>
+            <a href="/" class="btn">Go Home</a>
+            <a href="javascript:history.back()" class="btn">Go Back</a>
+        </div>
+        <div class="error-code">Error Code: {{ error_code }}</div>
+    </div>
+</body>
+</html>

app/templates/shop/errors/400.html

@@ -0,0 +1,33 @@
+{% extends "shop/errors/base.html" %}
+
+{% block icon %}❌{% endblock %}
+
+{% block title %}400 - Invalid Request{% endblock %}
+
+{% block content %}
+{% if vendor and theme and theme.branding and theme.branding.logo %}
+<img src="{{ theme.branding.logo }}" alt="{{ vendor.name }}" class="vendor-logo">
+{% endif %}
+
+<div class="error-icon">❌</div>
+<div class="status-code">400</div>
+<div class="status-name">Invalid Request</div>
+<div class="error-message">
+    The request couldn't be processed. This might be due to invalid information or a technical issue.
+</div>
+
+<div class="action-buttons">
+    <a href="javascript:history.back()" class="btn btn-primary">Go Back</a>
+    <a href="/" class="btn btn-secondary">Go to Home</a>
+</div>
+
+<div class="support-link">
+    Need help? <a href="/contact">Contact us</a>
+</div>
+
+{% if vendor %}
+<div class="vendor-info">
+    {{ vendor.name }}
+</div>
+{% endif %}
+{% endblock %}

app/templates/shop/errors/401.html

@@ -0,0 +1,33 @@
+{% extends "shop/errors/base.html" %}
+
+{% block icon %}🔐{% endblock %}
+
+{% block title %}401 - Authentication Required{% endblock %}
+
+{% block content %}
+{% if vendor and theme and theme.branding and theme.branding.logo %}
+<img src="{{ theme.branding.logo }}" alt="{{ vendor.name }}" class="vendor-logo">
+{% endif %}
+
+<div class="error-icon">🔐</div>
+<div class="status-code">401</div>
+<div class="status-name">Please Log In</div>
+<div class="error-message">
+    You need to be logged in to access this page. Please sign in to continue shopping.
+</div>
+
+<div class="action-buttons">
+    <a href="/login" class="btn btn-primary">Log In</a>
+    <a href="/register" class="btn btn-secondary">Create Account</a>
+</div>
+
+<div class="support-link">
+    Don't have an account? <a href="/register">Sign up now</a>
+</div>
+
+{% if vendor %}
+<div class="vendor-info">
+    {{ vendor.name }}
+</div>
+{% endif %}
+{% endblock %}

app/templates/shop/errors/403.html

@@ -0,0 +1,33 @@
+{% extends "shop/errors/base.html" %}
+
+{% block icon %}🔒{% endblock %}
+
+{% block title %}403 - Access Restricted{% endblock %}
+
+{% block content %}
+{% if vendor and theme and theme.branding and theme.branding.logo %}
+<img src="{{ theme.branding.logo }}" alt="{{ vendor.name }}" class="vendor-logo">
+{% endif %}
+
+<div class="error-icon">🔒</div>
+<div class="status-code">403</div>
+<div class="status-name">Access Restricted</div>
+<div class="error-message">
+    This page requires authentication or special permissions to access. Please log in to continue.
+</div>
+
+<div class="action-buttons">
+    <a href="/login" class="btn btn-primary">Log In</a>
+    <a href="/" class="btn btn-secondary">Go to Home</a>
+</div>
+
+<div class="support-link">
+    Need help accessing your account? <a href="/contact">Contact support</a>
+</div>
+
+{% if vendor %}
+<div class="vendor-info">
+    {{ vendor.name }}
+</div>
+{% endif %}
+{% endblock %}

app/templates/shop/errors/404.html

@@ -0,0 +1,33 @@
+{% extends "shop/errors/base.html" %}
+
+{% block icon %}🔍{% endblock %}
+
+{% block title %}404 - Page Not Found{% endblock %}
+
+{% block content %}
+{% if vendor and theme and theme.branding and theme.branding.logo %}
+<img src="{{ theme.branding.logo }}" alt="{{ vendor.name }}" class="vendor-logo">
+{% endif %}
+
+<div class="error-icon">🔍</div>
+<div class="status-code">404</div>
+<div class="status-name">Page Not Found</div>
+<div class="error-message">
+    Sorry, we couldn't find the page you're looking for. The product or page may have been moved or is no longer available.
+</div>
+
+<div class="action-buttons">
+    <a href="/" class="btn btn-primary">Continue Shopping</a>
+    <a href="/products" class="btn btn-secondary">View All Products</a>
+</div>
+
+<div class="support-link">
+    Can't find what you're looking for? <a href="/contact">Contact us</a> and we'll help you find it.
+</div>
+
+{% if vendor %}
+<div class="vendor-info">
+    {{ vendor.name }}
+</div>
+{% endif %}
+{% endblock %}

app/templates/shop/errors/422.html

@@ -0,0 +1,46 @@
+{% extends "shop/errors/base.html" %}
+
+{% block icon %}📝{% endblock %}
+
+{% block title %}422 - Invalid Information{% endblock %}
+
+{% block content %}
+{% if vendor and theme and theme.branding and theme.branding.logo %}
+<img src="{{ theme.branding.logo }}" alt="{{ vendor.name }}" class="vendor-logo">
+{% endif %}
+
+<div class="error-icon">📝</div>
+<div class="status-code">422</div>
+<div class="status-name">Please Check Your Information</div>
+<div class="error-message">
+    Some of the information you provided isn't valid. Please review the form and try again.
+</div>
+
+{% if details and details.validation_errors %}
+<div style="margin: 2rem auto; max-width: 400px; text-align: left; background: #fef2f2; padding: 1.5rem; border-radius: 0.75rem; border-left: 4px solid var(--color-primary);">
+    <h3 style="color: var(--color-text); font-size: 0.875rem; margin-bottom: 0.75rem; font-weight: 600;">Please correct:</h3>
+    <ul style="list-style: none; padding: 0; margin: 0;">
+    {% for error in details.validation_errors %}
+        <li style="margin-bottom: 0.5rem; color: #7f1d1d; font-size: 0.875rem;">
+            • {{ error.msg }}
+        </li>
+    {% endfor %}
+    </ul>
+</div>
+{% endif %}
+
+<div class="action-buttons">
+    <a href="javascript:history.back()" class="btn btn-primary">Go Back and Fix</a>
+    <a href="/" class="btn btn-secondary">Go to Home</a>
+</div>
+
+<div class="support-link">
+    Having trouble? <a href="/contact">We're here to help</a>
+</div>
+
+{% if vendor %}
+<div class="vendor-info">
+    {{ vendor.name }}
+</div>
+{% endif %}
+{% endblock %}

app/templates/shop/errors/429.html

@@ -0,0 +1,41 @@
+{% extends "shop/errors/base.html" %}
+
+{% block icon %}⏱️{% endblock %}
+
+{% block title %}429 - Please Slow Down{% endblock %}
+
+{% block content %}
+{% if vendor and theme and theme.branding and theme.branding.logo %}
+<img src="{{ theme.branding.logo }}" alt="{{ vendor.name }}" class="vendor-logo">
+{% endif %}
+
+<div class="error-icon">⏱️</div>
+<div class="status-code">429</div>
+<div class="status-name">Please Slow Down</div>
+<div class="error-message">
+    You're browsing a bit too fast! Please wait a moment before continuing.
+</div>
+
+{% if details and details.retry_after %}
+<div style="margin: 1.5rem 0; padding: 1rem; background: #fef3c7; border-radius: 0.75rem;">
+    <p style="color: #92400e; font-weight: 600;">
+        Please wait {{ details.retry_after }} seconds
+    </p>
+</div>
+{% endif %}
+
+<div class="action-buttons">
+    <a href="javascript:location.reload()" class="btn btn-primary">Try Again</a>
+    <a href="/" class="btn btn-secondary">Go to Home</a>
+</div>
+
+<div class="support-link">
+    Questions? <a href="/contact">Contact us</a>
+</div>
+
+{% if vendor %}
+<div class="vendor-info">
+    {{ vendor.name }}
+</div>
+{% endif %}
+{% endblock %}

app/templates/shop/errors/500.html

@@ -0,0 +1,33 @@
+{% extends "shop/errors/base.html" %}
+
+{% block icon %}😔{% endblock %}
+
+{% block title %}500 - Something Went Wrong{% endblock %}
+
+{% block content %}
+{% if vendor and theme and theme.branding and theme.branding.logo %}
+<img src="{{ theme.branding.logo }}" alt="{{ vendor.name }}" class="vendor-logo">
+{% endif %}
+
+<div class="error-icon">😔</div>
+<div class="status-code">500</div>
+<div class="status-name">Oops! Something Went Wrong</div>
+<div class="error-message">
+    We're experiencing technical difficulties. Our team has been notified and is working to fix the issue. Please try again in a few moments.
+</div>
+
+<div class="action-buttons">
+    <a href="/" class="btn btn-primary">Go to Home</a>
+    <a href="javascript:location.reload()" class="btn btn-secondary">Try Again</a>
+</div>
+
+<div class="support-link">
+    Issue persisting? <a href="/contact">Let us know</a> and we'll help you out.
+</div>
+
+{% if vendor %}
+<div class="vendor-info">
+    {{ vendor.name }}
+</div>
+{% endif %}
+{% endblock %}

app/templates/shop/errors/502.html

@@ -0,0 +1,33 @@
+{% extends "shop/errors/base.html" %}
+
+{% block icon %}🔧{% endblock %}
+
+{% block title %}502 - Service Temporarily Unavailable{% endblock %}
+
+{% block content %}
+{% if vendor and theme and theme.branding and theme.branding.logo %}
+<img src="{{ theme.branding.logo }}" alt="{{ vendor.name }}" class="vendor-logo">
+{% endif %}
+
+<div class="error-icon">🔧</div>
+<div class="status-code">502</div>
+<div class="status-name">Temporarily Unavailable</div>
+<div class="error-message">
+    We're having trouble connecting to our systems. This is usually temporary. Please try again in a few moments.
+</div>
+
+<div class="action-buttons">
+    <a href="javascript:location.reload()" class="btn btn-primary">Try Again</a>
+    <a href="/" class="btn btn-secondary">Go to Home</a>
+</div>
+
+<div class="support-link">
+    If this continues, <a href="/contact">let us know</a>
+</div>
+
+{% if vendor %}
+<div class="vendor-info">
+    {{ vendor.name }}
+</div>
+{% endif %}
+{% endblock %}

app/templates/shop/errors/base.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}{{ status_code }} - {{ status_name }}{% endblock %}{% if vendor %} | {{ vendor.name }}{% endif %}</title>
+    <style>
+        :root {
+            /* Default theme colors (fallback) */
+            --color-primary: {{ theme.colors.primary if theme and theme.colors else '#6366f1' }};
+            --color-secondary: {{ theme.colors.secondary if theme and theme.colors else '#8b5cf6' }};
+            --color-accent: {{ theme.colors.accent if theme and theme.colors else '#ec4899' }};
+            --color-background: {{ theme.colors.background if theme and theme.colors else '#ffffff' }};
+            --color-text: {{ theme.colors.text if theme and theme.colors else '#1f2937' }};
+            --color-border: {{ theme.colors.border if theme and theme.colors else '#e5e7eb' }};
+            --font-heading: {{ theme.fonts.heading if theme and theme.fonts else "'Inter', sans-serif" }};
+            --font-body: {{ theme.fonts.body if theme and theme.fonts else "'Inter', sans-serif" }};
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: var(--font-body);
+            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--color-text);
+            padding: 2rem;
+        }
+
+        .error-container {
+            background: var(--color-background);
+            border-radius: 1.5rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+            max-width: 600px;
+            width: 100%;
+            padding: 3rem;
+            text-align: center;
+        }
+
+        {% if vendor and vendor.logo %}
+        .vendor-logo {
+            max-width: 150px;
+            max-height: 60px;
+            margin-bottom: 2rem;
+        }
+        {% endif %}
+
+        .error-icon {
+            font-size: 5rem;
+            margin-bottom: 1rem;
+        }
+
+        .status-code {
+            font-size: 6rem;
+            font-weight: 700;
+            color: var(--color-primary);
+            line-height: 1;
+            margin-bottom: 0.5rem;
+            font-family: var(--font-heading);
+        }
+
+        .status-name {
+            font-size: 1.75rem;
+            font-weight: 600;
+            color: var(--color-text);
+            margin-bottom: 1rem;
+            font-family: var(--font-heading);
+        }
+
+        .error-message {
+            font-size: 1.125rem;
+            color: #6b7280;
+            margin-bottom: 2.5rem;
+            line-height: 1.6;
+        }
+
+        .action-buttons {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin-top: 2rem;
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            padding: 1rem 2rem;
+            border-radius: 0.75rem;
+            font-weight: 600;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            border: none;
+            cursor: pointer;
+            font-size: 1rem;
+        }
+
+        .btn-primary {
+            background: var(--color-primary);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            opacity: 0.9;
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+
+        .btn-secondary {
+            background: transparent;
+            color: var(--color-primary);
+            border: 2px solid var(--color-primary);
+        }
+
+        .btn-secondary:hover {
+            background: var(--color-primary);
+            color: white;
+            transform: translateY(-2px);
+        }
+
+        .support-link {
+            margin-top: 2.5rem;
+            padding-top: 2rem;
+            border-top: 1px solid var(--color-border);
+            font-size: 0.875rem;
+            color: #6b7280;
+        }
+
+        .support-link a {
+            color: var(--color-primary);
+            text-decoration: none;
+            font-weight: 600;
+        }
+
+        .support-link a:hover {
+            text-decoration: underline;
+        }
+
+        .vendor-info {
+            margin-top: 2rem;
+            font-size: 0.875rem;
+            color: #9ca3af;
+        }
+
+        {% block extra_styles %}{% endblock %}
+    </style>
+    {% if theme and theme.custom_css %}
+    <style>
+        {{ theme.custom_css | safe }}
+    </style>
+    {% endif %}
+</head>
+<body>
+    <div class="error-container">
+        {% if vendor and theme and theme.branding and theme.branding.logo %}
+        <img src="{{ theme.branding.logo }}" alt="{{ vendor.name }}" class="vendor-logo">
+        {% endif %}
+
+        {% block content %}
+        <div class="error-icon">{% block icon %}⚠️{% endblock %}</div>
+        <div class="status-code">{{ status_code }}</div>
+        <div class="status-name">{{ status_name }}</div>
+        <div class="error-message">{{ message }}</div>
+
+        <div class="action-buttons">
+            {% block action_buttons %}
+            <a href="/" class="btn btn-primary">Continue Shopping</a>
+            <a href="/contact" class="btn btn-secondary">Contact Us</a>
+            {% endblock %}
+        </div>
+
+        {% block extra_content %}{% endblock %}
+
+        <div class="support-link">
+            {% block support_link %}
+            Need help? <a href="/contact">Contact our support team</a>
+            {% endblock %}
+        </div>
+
+        {% if vendor %}
+        <div class="vendor-info">
+            {{ vendor.name }}
+        </div>
+        {% endif %}
+        {% endblock %}
+    </div>
+</body>
+</html>

app/templates/shop/errors/generic.html

@@ -0,0 +1,31 @@
+{% extends "shop/errors/base.html" %}
+
+{% block icon %}⚠️{% endblock %}
+
+{% block title %}{{ status_code }} - {{ status_name }}{% endblock %}
+
+{% block content %}
+{% if vendor and theme and theme.branding and theme.branding.logo %}
+<img src="{{ theme.branding.logo }}" alt="{{ vendor.name }}" class="vendor-logo">
+{% endif %}
+
+<div class="error-icon">⚠️</div>
+<div class="status-code">{{ status_code }}</div>
+<div class="status-name">{{ status_name }}</div>
+<div class="error-message">{{ message }}</div>
+
+<div class="action-buttons">
+    <a href="/" class="btn btn-primary">Continue Shopping</a>
+    <a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
+</div>
+
+<div class="support-link">
+    Need assistance? <a href="/contact">Contact us</a>
+</div>
+
+{% if vendor %}
+<div class="vendor-info">
+    {{ vendor.name }}
+</div>
+{% endif %}
+{% endblock %}

app/templates/vendor/errors/400.html

@@ -0,0 +1,44 @@
+{% extends "vendor/errors/base.html" %}
+
+{% block icon %}❌{% endblock %}
+
+{% block title %}400 - Bad Request{% endblock %}
+
+{% block content %}
+<div class="error-icon">❌</div>
+<div class="status-code">400</div>
+<div class="status-name">Bad Request</div>
+<div class="error-message">
+    The request could not be processed due to invalid data or malformed syntax.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+<div class="action-buttons">
+    <a href="javascript:history.back()" class="btn btn-primary">Go Back</a>
+    <a href="/vendor/dashboard" class="btn btn-secondary">Dashboard</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Need help? <a href="/vendor/support">Contact Support</a>
+</div>
+{% endblock %}

app/templates/vendor/errors/401.html

@@ -0,0 +1,44 @@
+{% extends "vendor/errors/base.html" %}
+
+{% block icon %}🔐{% endblock %}
+
+{% block title %}401 - Authentication Required{% endblock %}
+
+{% block content %}
+<div class="error-icon">🔐</div>
+<div class="status-code">401</div>
+<div class="status-name">Authentication Required</div>
+<div class="error-message">
+    You need to be authenticated to access this vendor resource.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+<div class="action-buttons">
+    <a href="/vendor/login" class="btn btn-primary">Log In</a>
+    <a href="/vendor/dashboard" class="btn btn-secondary">Dashboard</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Having login issues? <a href="/vendor/support">Contact Support</a>
+</div>
+{% endblock %}

app/templates/vendor/errors/403.html

@@ -0,0 +1,44 @@
+{% extends "vendor/errors/base.html" %}
+
+{% block icon %}🚫{% endblock %}
+
+{% block title %}403 - Access Denied{% endblock %}
+
+{% block content %}
+<div class="error-icon">🚫</div>
+<div class="status-code">403</div>
+<div class="status-name">Access Denied</div>
+<div class="error-message">
+    You don't have permission to access this vendor resource. Please check with your shop owner or manager.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+<div class="action-buttons">
+    <a href="/vendor/dashboard" class="btn btn-primary">Go to Dashboard</a>
+    <a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Need elevated permissions? <a href="/vendor/support">Contact Your Manager</a>
+</div>
+{% endblock %}

app/templates/vendor/errors/404.html

@@ -0,0 +1,44 @@
+{% extends "vendor/errors/base.html" %}
+
+{% block icon %}🔍{% endblock %}
+
+{% block title %}404 - Page Not Found{% endblock %}
+
+{% block content %}
+<div class="error-icon">🔍</div>
+<div class="status-code">404</div>
+<div class="status-name">Page Not Found</div>
+<div class="error-message">
+    The vendor dashboard page you're looking for doesn't exist or has been moved.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+<div class="action-buttons">
+    <a href="/vendor/dashboard" class="btn btn-primary">Go to Dashboard</a>
+    <a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Can't find what you're looking for? <a href="/vendor/support">Contact Support</a>
+</div>
+{% endblock %}

app/templates/vendor/errors/422.html

@@ -0,0 +1,58 @@
+{% extends "vendor/errors/base.html" %}
+
+{% block icon %}📋{% endblock %}
+
+{% block title %}422 - Validation Error{% endblock %}
+
+{% block content %}
+<div class="error-icon">📋</div>
+<div class="status-code">422</div>
+<div class="status-name">Validation Error</div>
+<div class="error-message">
+    The data you submitted contains errors. Please review and correct the highlighted fields.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+{% if details and details.validation_errors %}
+<div class="validation-errors" style="margin: 2rem 0; text-align: left;">
+    <h3 style="color: #dc2626; font-size: 1rem; margin-bottom: 1rem;">Validation Errors:</h3>
+    <ul style="list-style: none; padding: 0;">
+    {% for error in details.validation_errors %}
+        <li style="padding: 0.5rem; margin-bottom: 0.5rem; background: #fef2f2; border-left: 3px solid #dc2626; border-radius: 0.25rem;">
+            <strong style="color: #991b1b;">{{ error.loc | join(' → ') }}:</strong>
+            <span style="color: #7f1d1d;">{{ error.msg }}</span>
+        </li>
+    {% endfor %}
+    </ul>
+</div>
+{% endif %}
+
+<div class="action-buttons">
+    <a href="javascript:history.back()" class="btn btn-primary">Go Back</a>
+    <a href="/vendor/dashboard" class="btn btn-secondary">Dashboard</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Still having issues? <a href="/vendor/support">Contact Support</a>
+</div>
+{% endblock %}

app/templates/vendor/errors/429.html

@@ -0,0 +1,52 @@
+{% extends "vendor/errors/base.html" %}
+
+{% block icon %}⏱️{% endblock %}
+
+{% block title %}429 - Too Many Requests{% endblock %}
+
+{% block content %}
+<div class="error-icon">⏱️</div>
+<div class="status-code">429</div>
+<div class="status-name">Too Many Requests</div>
+<div class="error-message">
+    You've made too many requests in a short period. Please slow down and try again in a moment.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+{% if details and details.retry_after %}
+<div style="margin: 1.5rem 0; padding: 1rem; background: #fef3c7; border-radius: 0.5rem;">
+    <p style="color: #92400e; font-weight: 600;">
+        Please wait {{ details.retry_after }} seconds before trying again.
+    </p>
+</div>
+{% endif %}
+
+<div class="action-buttons">
+    <a href="javascript:location.reload()" class="btn btn-primary">Retry</a>
+    <a href="/vendor/dashboard" class="btn btn-secondary">Dashboard</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Experiencing persistent rate limits? <a href="/vendor/support">Contact Support</a>
+</div>
+{% endblock %}

app/templates/vendor/errors/500.html

@@ -0,0 +1,44 @@
+{% extends "vendor/errors/base.html" %}
+
+{% block icon %}⚙️{% endblock %}
+
+{% block title %}500 - Server Error{% endblock %}
+
+{% block content %}
+<div class="error-icon">⚙️</div>
+<div class="status-code">500</div>
+<div class="status-name">Internal Server Error</div>
+<div class="error-message">
+    Something went wrong on our end. Our team has been notified and is working to fix the issue.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+<div class="action-buttons">
+    <a href="/vendor/dashboard" class="btn btn-primary">Go to Dashboard</a>
+    <a href="javascript:location.reload()" class="btn btn-secondary">Retry</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Issue persisting? <a href="/vendor/support">Report this error</a>
+</div>
+{% endblock %}

app/templates/vendor/errors/502.html

@@ -0,0 +1,44 @@
+{% extends "vendor/errors/base.html" %}
+
+{% block icon %}🔌{% endblock %}
+
+{% block title %}502 - Bad Gateway{% endblock %}
+
+{% block content %}
+<div class="error-icon">🔌</div>
+<div class="status-code">502</div>
+<div class="status-name">Bad Gateway</div>
+<div class="error-message">
+    We're unable to reach the service right now. This is usually temporary. Please try again in a moment.
+</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+<div class="action-buttons">
+    <a href="javascript:location.reload()" class="btn btn-primary">Retry</a>
+    <a href="/vendor/dashboard" class="btn btn-secondary">Dashboard</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Service unavailable for extended period? <a href="/vendor/support">Check Status</a>
+</div>
+{% endblock %}

app/templates/vendor/errors/base.html

@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}{{ status_code }} - {{ status_name }}{% endblock %} | Vendor Portal</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #1f2937;
+            padding: 2rem;
+        }
+
+        .error-container {
+            background: white;
+            border-radius: 1rem;
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            max-width: 600px;
+            width: 100%;
+            padding: 3rem;
+            text-align: center;
+        }
+
+        .error-icon {
+            font-size: 5rem;
+            margin-bottom: 1rem;
+        }
+
+        .status-code {
+            font-size: 6rem;
+            font-weight: 700;
+            color: #8b5cf6;
+            line-height: 1;
+            margin-bottom: 0.5rem;
+        }
+
+        .status-name {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #374151;
+            margin-bottom: 1rem;
+        }
+
+        .error-message {
+            font-size: 1.1rem;
+            color: #6b7280;
+            margin-bottom: 2rem;
+            line-height: 1.6;
+        }
+
+        .error-code {
+            display: inline-block;
+            background: #f3f4f6;
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            font-family: 'Courier New', monospace;
+            font-size: 0.875rem;
+            color: #6b7280;
+            margin-bottom: 2rem;
+        }
+
+        .action-buttons {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.5rem;
+            font-weight: 600;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            border: none;
+            cursor: pointer;
+            font-size: 1rem;
+        }
+
+        .btn-primary {
+            background: #8b5cf6;
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: #7c3aed;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+
+        .btn-secondary {
+            background: #f3f4f6;
+            color: #374151;
+        }
+
+        .btn-secondary:hover {
+            background: #e5e7eb;
+            transform: translateY(-2px);
+        }
+
+        .debug-info {
+            margin-top: 2rem;
+            padding: 1.5rem;
+            background: #fef3c7;
+            border-left: 4px solid #f59e0b;
+            border-radius: 0.5rem;
+            text-align: left;
+        }
+
+        .debug-info h3 {
+            color: #92400e;
+            font-size: 1rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .debug-info pre {
+            background: white;
+            padding: 1rem;
+            border-radius: 0.25rem;
+            overflow-x: auto;
+            font-size: 0.875rem;
+            color: #374151;
+            margin-top: 0.5rem;
+        }
+
+        .debug-item {
+            margin-bottom: 0.75rem;
+        }
+
+        .debug-label {
+            font-weight: 600;
+            color: #92400e;
+            display: inline-block;
+            min-width: 100px;
+        }
+
+        .debug-value {
+            color: #1f2937;
+            font-family: 'Courier New', monospace;
+            font-size: 0.875rem;
+        }
+
+        .support-link {
+            margin-top: 2rem;
+            padding-top: 2rem;
+            border-top: 1px solid #e5e7eb;
+            font-size: 0.875rem;
+            color: #6b7280;
+        }
+
+        .support-link a {
+            color: #8b5cf6;
+            text-decoration: none;
+            font-weight: 600;
+        }
+
+        .support-link a:hover {
+            text-decoration: underline;
+        }
+
+        {% block extra_styles %}{% endblock %}
+    </style>
+</head>
+<body>
+    <div class="error-container">
+        {% block content %}
+        <div class="error-icon">{% block icon %}⚠️{% endblock %}</div>
+        <div class="status-code">{{ status_code }}</div>
+        <div class="status-name">{{ status_name }}</div>
+        <div class="error-message">{{ message }}</div>
+        <div class="error-code">Error Code: {{ error_code }}</div>
+
+        <div class="action-buttons">
+            {% block action_buttons %}
+            <a href="/vendor/dashboard" class="btn btn-primary">Go to Dashboard</a>
+            <a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
+            {% endblock %}
+        </div>
+
+        {% if show_debug %}
+        <div class="debug-info">
+            <h3>🔧 Debug Information</h3>
+            <div class="debug-item">
+                <span class="debug-label">Path:</span>
+                <span class="debug-value">{{ path }}</span>
+            </div>
+            <div class="debug-item">
+                <span class="debug-label">Error Code:</span>
+                <span class="debug-value">{{ error_code }}</span>
+            </div>
+            {% if details %}
+            <div class="debug-item">
+                <span class="debug-label">Details:</span>
+                <pre>{{ details | tojson(indent=2) }}</pre>
+            </div>
+            {% endif %}
+        </div>
+        {% endif %}
+
+        {% block extra_content %}{% endblock %}
+
+        <div class="support-link">
+            {% block support_link %}
+            Need help? <a href="/vendor/support">Contact Vendor Support</a>
+            {% endblock %}
+        </div>
+        {% endblock %}
+    </div>
+</body>
+</html>

app/templates/vendor/errors/generic.html

@@ -0,0 +1,42 @@
+{% extends "vendor/errors/base.html" %}
+
+{% block icon %}⚠️{% endblock %}
+
+{% block title %}{{ status_code }} - {{ status_name }}{% endblock %}
+
+{% block content %}
+<div class="error-icon">⚠️</div>
+<div class="status-code">{{ status_code }}</div>
+<div class="status-name">{{ status_name }}</div>
+<div class="error-message">{{ message }}</div>
+<div class="error-code">Error Code: {{ error_code }}</div>
+
+<div class="action-buttons">
+    <a href="/vendor/dashboard" class="btn btn-primary">Go to Dashboard</a>
+    <a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
+</div>
+
+{% if show_debug %}
+<div class="debug-info">
+    <h3>🔧 Debug Information</h3>
+    <div class="debug-item">
+        <span class="debug-label">Path:</span>
+        <span class="debug-value">{{ path }}</span>
+    </div>
+    <div class="debug-item">
+        <span class="debug-label">Error Code:</span>
+        <span class="debug-value">{{ error_code }}</span>
+    </div>
+    {% if details %}
+    <div class="debug-item">
+        <span class="debug-label">Details:</span>
+        <pre>{{ details | tojson(indent=2) }}</pre>
+    </div>
+    {% endif %}
+</div>
+{% endif %}
+
+<div class="support-link">
+    Need assistance? <a href="/vendor/support">Contact Support</a>
+</div>
+{% endblock %}