refactor: migrate templates and static files to self-contained modules

Templates Migration:
- Migrate admin templates to modules (tenancy, billing, monitoring, marketplace, etc.)
- Migrate vendor templates to modules (tenancy, billing, orders, messaging, etc.)
- Migrate storefront templates to modules (catalog, customers, orders, cart, checkout, cms)
- Migrate public templates to modules (billing, marketplace, cms)
- Keep shared templates in app/templates/ (base.html, errors/, partials/, macros/)
- Migrate letzshop partials to marketplace module

Static Files Migration:
- Migrate admin JS to modules: tenancy (23 files), core (5 files), monitoring (1 file)
- Migrate vendor JS to modules: tenancy (4 files), core (2 files)
- Migrate shared JS: vendor-selector.js to core, media-picker.js to cms
- Migrate storefront JS: storefront-layout.js to core
- Keep framework JS in static/ (api-client, utils, money, icons, log-config, lib/)
- Update all template references to use module_static paths

Naming Consistency:
- Rename static/platform/ to static/public/
- Rename app/templates/platform/ to app/templates/public/
- Update all extends and static references

Documentation:
- Update module-system.md with shared templates documentation
- Update frontend-structure.md with new module JS organization

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

app/modules/tenancy/routes/api/__init__.py

@@ -2,6 +2,15 @@
 """
 Tenancy module API routes.
 
+Admin routes:
+- /auth/* - Admin authentication (login, logout, /me, platform selection)
+- /admin-users/* - Admin user management
+- /users/* - Platform user management
+- /companies/* - Company management
+- /platforms/* - Platform management
+- /vendors/* - Vendor management
+- /vendor-domains/* - Vendor domain configuration
+
 Vendor routes:
 - /info/{vendor_code} - Public vendor info lookup
 - /auth/* - Vendor authentication (login, logout, /me)
@@ -9,12 +18,14 @@ Vendor routes:
 - /team/* - Team member management, roles, permissions
 """
 
+from .admin import admin_router
 from .vendor import vendor_router
 from .vendor_auth import vendor_auth_router
 from .vendor_profile import vendor_profile_router
 from .vendor_team import vendor_team_router
 
 __all__ = [
+    "admin_router",
     "vendor_router",
     "vendor_auth_router",
     "vendor_profile_router",

app/modules/tenancy/routes/api/admin.py

@@ -0,0 +1,36 @@
+# app/modules/tenancy/routes/api/admin.py
+"""
+Tenancy module admin API routes.
+
+Aggregates all admin tenancy routes:
+- /auth/* - Admin authentication (login, logout, /me, platform selection)
+- /admin-users/* - Admin user management (super admin only)
+- /users/* - Platform user management
+- /companies/* - Company management
+- /platforms/* - Platform management (super admin only)
+- /vendors/* - Vendor management
+- /vendor-domains/* - Vendor domain configuration
+
+The tenancy module owns identity and organizational hierarchy.
+"""
+
+from fastapi import APIRouter
+
+from .admin_auth import admin_auth_router
+from .admin_users import admin_users_router
+from .admin_platform_users import admin_platform_users_router
+from .admin_companies import admin_companies_router
+from .admin_platforms import admin_platforms_router
+from .admin_vendors import admin_vendors_router
+from .admin_vendor_domains import admin_vendor_domains_router
+
+admin_router = APIRouter()
+
+# Aggregate all tenancy admin routes
+admin_router.include_router(admin_auth_router, tags=["admin-auth"])
+admin_router.include_router(admin_users_router, tags=["admin-admin-users"])
+admin_router.include_router(admin_platform_users_router, tags=["admin-users"])
+admin_router.include_router(admin_companies_router, tags=["admin-companies"])
+admin_router.include_router(admin_platforms_router, tags=["admin-platforms"])
+admin_router.include_router(admin_vendors_router, tags=["admin-vendors"])
+admin_router.include_router(admin_vendor_domains_router, tags=["admin-vendor-domains"])

app/modules/tenancy/routes/api/admin_auth.py

@@ -0,0 +1,221 @@
+# app/modules/tenancy/routes/api/admin_auth.py
+"""
+Admin authentication endpoints.
+
+Implements dual token storage with path restriction:
+- Sets HTTP-only cookie with path=/admin (restricted to admin routes only)
+- Returns token in response for localStorage (API calls)
+
+This prevents admin cookies from being sent to vendor routes.
+"""
+
+import logging
+
+from fastapi import APIRouter, Depends, Response
+from sqlalchemy.orm import Session
+
+from app.api.deps import get_current_admin_api, get_current_admin_from_cookie_or_header
+from app.core.database import get_db
+from app.core.environment import should_use_secure_cookies
+from app.modules.tenancy.exceptions import InsufficientPermissionsException, InvalidCredentialsException
+from app.modules.tenancy.services.admin_platform_service import admin_platform_service
+from app.modules.core.services.auth_service import auth_service
+from middleware.auth import AuthManager
+from models.database.platform import Platform  # noqa: API-007 - Admin needs to query platforms
+from models.schema.auth import UserContext
+from models.schema.auth import LoginResponse, LogoutResponse, UserLogin, UserResponse
+
+admin_auth_router = APIRouter(prefix="/auth")
+logger = logging.getLogger(__name__)
+
+
+@admin_auth_router.post("/login", response_model=LoginResponse)
+def admin_login(
+    user_credentials: UserLogin, response: Response, db: Session = Depends(get_db)
+):
+    """
+    Admin login endpoint.
+
+    Only allows users with 'admin' role to login.
+    Returns JWT token for authenticated admin users.
+
+    Sets token in two places:
+    1. HTTP-only cookie with path=/admin (for browser page navigation)
+    2. Response body (for localStorage and API calls)
+
+    The cookie is restricted to /admin/* routes only to prevent
+    it from being sent to vendor or other routes.
+    """
+    # Authenticate user
+    login_result = auth_service.login_user(db=db, user_credentials=user_credentials)
+
+    # Verify user is admin
+    if login_result["user"].role != "admin":
+        logger.warning(
+            f"Non-admin user attempted admin login: {user_credentials.email_or_username}"
+        )
+        raise InvalidCredentialsException("Admin access required")
+
+    logger.info(f"Admin login successful: {login_result['user'].username}")
+
+    # Set HTTP-only cookie for browser navigation
+    # CRITICAL: path=/admin restricts cookie to admin routes only
+    response.set_cookie(
+        key="admin_token",
+        value=login_result["token_data"]["access_token"],
+        httponly=True,  # JavaScript cannot access (XSS protection)
+        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
+    )
+
+    logger.debug(
+        f"Set admin_token cookie with {login_result['token_data']['expires_in']}s expiry "
+        f"(path=/admin, httponly=True, secure={should_use_secure_cookies()})"
+    )
+
+    # Also return token in response for localStorage (API calls)
+    return LoginResponse(
+        access_token=login_result["token_data"]["access_token"],
+        token_type=login_result["token_data"]["token_type"],
+        expires_in=login_result["token_data"]["expires_in"],
+        user=login_result["user"],
+    )
+
+
+@admin_auth_router.get("/me", response_model=UserResponse)
+def get_current_admin(current_user: UserContext = Depends(get_current_admin_api)):
+    """
+    Get current authenticated admin user.
+
+    This endpoint validates the token and ensures the user has admin privileges.
+    Returns the current user's information.
+
+    Token can come from:
+    - Authorization header (API calls)
+    - admin_token cookie (browser navigation, path=/admin only)
+    """
+    logger.info(f"Admin user info requested: {current_user.username}")
+    return current_user
+
+
+@admin_auth_router.post("/logout", response_model=LogoutResponse)
+def admin_logout(response: Response):
+    """
+    Admin logout endpoint.
+
+    Clears the admin_token cookie.
+    Client should also remove token from localStorage.
+    """
+    logger.info("Admin logout")
+
+    # Clear the cookie (must match path used when setting)
+    response.delete_cookie(
+        key="admin_token",
+        path="/admin",
+    )
+
+    # Also clear legacy cookie with path=/ (from before path isolation was added)
+    # This handles users who logged in before the path=/admin change
+    response.delete_cookie(
+        key="admin_token",
+        path="/",
+    )
+
+    logger.debug("Deleted admin_token cookies (both /admin and / paths)")
+
+    return LogoutResponse(message="Logged out successfully")
+
+
+@admin_auth_router.get("/accessible-platforms")
+def get_accessible_platforms(
+    db: Session = Depends(get_db),
+    current_user: UserContext = Depends(get_current_admin_from_cookie_or_header),
+):
+    """
+    Get list of platforms this admin can access.
+
+    Returns:
+        - For super admins: All active platforms
+        - For platform admins: Only assigned platforms
+    """
+    if current_user.is_super_admin:
+        platforms = admin_platform_service.get_all_active_platforms(db)
+    else:
+        platforms = admin_platform_service.get_platforms_for_admin(db, current_user.id)
+
+    return {
+        "platforms": [
+            {
+                "id": p.id,
+                "code": p.code,
+                "name": p.name,
+                "logo": p.logo,
+            }
+            for p in platforms
+        ],
+        "is_super_admin": current_user.is_super_admin,
+        "requires_platform_selection": not current_user.is_super_admin and len(platforms) > 0,
+    }
+
+
+@admin_auth_router.post("/select-platform")
+def select_platform(
+    platform_id: int,
+    response: Response,
+    db: Session = Depends(get_db),
+    current_user: UserContext = Depends(get_current_admin_from_cookie_or_header),
+):
+    """
+    Select platform context for platform admin.
+
+    Issues a new JWT token with platform context.
+    Super admins skip this step (they have global access).
+
+    Args:
+        platform_id: Platform ID to select
+
+    Returns:
+        LoginResponse with new token containing platform context
+    """
+    if current_user.is_super_admin:
+        raise InvalidCredentialsException(
+            "Super admins don't need platform selection - they have global access"
+        )
+
+    # Verify admin has access to this platform (raises exception if not)
+    admin_platform_service.validate_admin_platform_access(current_user, platform_id)
+
+    # Load platform
+    platform = admin_platform_service.get_platform_by_id(db, platform_id)
+    if not platform:
+        raise InvalidCredentialsException("Platform not found")
+
+    # Issue new token with platform context
+    auth_manager = AuthManager()
+    token_data = auth_manager.create_access_token(
+        user=current_user,
+        platform_id=platform.id,
+        platform_code=platform.code,
+    )
+
+    # Set cookie with new token
+    response.set_cookie(
+        key="admin_token",
+        value=token_data["access_token"],
+        httponly=True,
+        secure=should_use_secure_cookies(),
+        samesite="lax",
+        max_age=token_data["expires_in"],
+        path="/admin",
+    )
+
+    logger.info(f"Admin {current_user.username} selected platform {platform.code}")
+
+    return LoginResponse(
+        access_token=token_data["access_token"],
+        token_type=token_data["token_type"],
+        expires_in=token_data["expires_in"],
+        user=current_user,
+    )

app/modules/tenancy/routes/api/admin_companies.py

@@ -0,0 +1,365 @@
+# app/modules/tenancy/routes/api/admin_companies.py
+"""
+Company management endpoints for admin.
+"""
+
+import logging
+from datetime import UTC, datetime
+
+from fastapi import APIRouter, Body, Depends, Path, Query
+from sqlalchemy.orm import Session
+
+from app.api.deps import get_current_admin_api
+from app.core.database import get_db
+from app.modules.tenancy.exceptions import CompanyHasVendorsException, ConfirmationRequiredException
+from app.modules.tenancy.services.company_service import company_service
+from models.schema.auth import UserContext
+from models.schema.company import (
+    CompanyCreate,
+    CompanyCreateResponse,
+    CompanyDetailResponse,
+    CompanyListResponse,
+    CompanyResponse,
+    CompanyTransferOwnership,
+    CompanyTransferOwnershipResponse,
+    CompanyUpdate,
+)
+
+admin_companies_router = APIRouter(prefix="/companies")
+logger = logging.getLogger(__name__)
+
+
+@admin_companies_router.post("", response_model=CompanyCreateResponse)
+def create_company_with_owner(
+    company_data: CompanyCreate,
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Create a new company with owner user account (Admin only).
+
+    This endpoint:
+    1. Creates a new company record
+    2. Creates an owner user account with owner_email (if not exists)
+    3. Returns credentials (temporary password shown ONCE if new user created)
+
+    **Email Fields:**
+    - `owner_email`: Used for owner's login/authentication (stored in users.email)
+    - `contact_email`: Public business contact (stored in companies.contact_email)
+
+    Returns company details with owner credentials.
+    """
+    company, owner_user, temp_password = company_service.create_company_with_owner(
+        db, company_data
+    )
+
+    db.commit()  # ✅ ARCH: Commit at API level for transaction control
+
+    return CompanyCreateResponse(
+        company=CompanyResponse(
+            id=company.id,
+            name=company.name,
+            description=company.description,
+            owner_user_id=company.owner_user_id,
+            contact_email=company.contact_email,
+            contact_phone=company.contact_phone,
+            website=company.website,
+            business_address=company.business_address,
+            tax_number=company.tax_number,
+            is_active=company.is_active,
+            is_verified=company.is_verified,
+            created_at=company.created_at.isoformat(),
+            updated_at=company.updated_at.isoformat(),
+        ),
+        owner_user_id=owner_user.id,
+        owner_username=owner_user.username,
+        owner_email=owner_user.email,
+        temporary_password=temp_password or "N/A (Existing user)",
+        login_url="http://localhost:8000/admin/login",
+    )
+
+
+@admin_companies_router.get("", response_model=CompanyListResponse)
+def get_all_companies(
+    skip: int = Query(0, ge=0),
+    limit: int = Query(100, ge=1, le=1000),
+    search: str | None = Query(None, description="Search by company name"),
+    is_active: bool | None = Query(None),
+    is_verified: bool | None = Query(None),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """Get all companies with filtering (Admin only)."""
+    companies, total = company_service.get_companies(
+        db,
+        skip=skip,
+        limit=limit,
+        search=search,
+        is_active=is_active,
+        is_verified=is_verified,
+    )
+
+    return CompanyListResponse(
+        companies=[
+            CompanyResponse(
+                id=c.id,
+                name=c.name,
+                description=c.description,
+                owner_user_id=c.owner_user_id,
+                contact_email=c.contact_email,
+                contact_phone=c.contact_phone,
+                website=c.website,
+                business_address=c.business_address,
+                tax_number=c.tax_number,
+                is_active=c.is_active,
+                is_verified=c.is_verified,
+                created_at=c.created_at.isoformat(),
+                updated_at=c.updated_at.isoformat(),
+            )
+            for c in companies
+        ],
+        total=total,
+        skip=skip,
+        limit=limit,
+    )
+
+
+@admin_companies_router.get("/{company_id}", response_model=CompanyDetailResponse)
+def get_company_details(
+    company_id: int = Path(..., description="Company ID"),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Get detailed company information including vendor counts (Admin only).
+    """
+    company = company_service.get_company_by_id(db, company_id)
+
+    # Count vendors
+    vendor_count = len(company.vendors)
+    active_vendor_count = sum(1 for v in company.vendors if v.is_active)
+
+    # Build vendors list for detail view
+    vendors_list = [
+        {
+            "id": v.id,
+            "vendor_code": v.vendor_code,
+            "name": v.name,
+            "subdomain": v.subdomain,
+            "is_active": v.is_active,
+            "is_verified": v.is_verified,
+        }
+        for v in company.vendors
+    ]
+
+    return CompanyDetailResponse(
+        id=company.id,
+        name=company.name,
+        description=company.description,
+        owner_user_id=company.owner_user_id,
+        owner_email=company.owner.email if company.owner else None,
+        owner_username=company.owner.username if company.owner else None,
+        contact_email=company.contact_email,
+        contact_phone=company.contact_phone,
+        website=company.website,
+        business_address=company.business_address,
+        tax_number=company.tax_number,
+        is_active=company.is_active,
+        is_verified=company.is_verified,
+        created_at=company.created_at.isoformat(),
+        updated_at=company.updated_at.isoformat(),
+        vendor_count=vendor_count,
+        active_vendor_count=active_vendor_count,
+        vendors=vendors_list,
+    )
+
+
+@admin_companies_router.put("/{company_id}", response_model=CompanyResponse)
+def update_company(
+    company_id: int = Path(..., description="Company ID"),
+    company_update: CompanyUpdate = Body(...),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Update company information (Admin only).
+
+    **Can update:**
+    - Basic info: name, description
+    - Business contact: contact_email, contact_phone, website
+    - Business details: business_address, tax_number
+    - Status: is_active, is_verified
+
+    **Cannot update:**
+    - `owner_user_id` (would require ownership transfer feature)
+    """
+    company = company_service.update_company(db, company_id, company_update)
+    db.commit()  # ✅ ARCH: Commit at API level for transaction control
+
+    return CompanyResponse(
+        id=company.id,
+        name=company.name,
+        description=company.description,
+        owner_user_id=company.owner_user_id,
+        contact_email=company.contact_email,
+        contact_phone=company.contact_phone,
+        website=company.website,
+        business_address=company.business_address,
+        tax_number=company.tax_number,
+        is_active=company.is_active,
+        is_verified=company.is_verified,
+        created_at=company.created_at.isoformat(),
+        updated_at=company.updated_at.isoformat(),
+    )
+
+
+@admin_companies_router.put("/{company_id}/verification", response_model=CompanyResponse)
+def toggle_company_verification(
+    company_id: int = Path(..., description="Company ID"),
+    verification_data: dict = Body(..., example={"is_verified": True}),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Toggle company verification status (Admin only).
+
+    Request body: { "is_verified": true/false }
+    """
+    is_verified = verification_data.get("is_verified", False)
+    company = company_service.toggle_verification(db, company_id, is_verified)
+    db.commit()  # ✅ ARCH: Commit at API level for transaction control
+
+    return CompanyResponse(
+        id=company.id,
+        name=company.name,
+        description=company.description,
+        owner_user_id=company.owner_user_id,
+        contact_email=company.contact_email,
+        contact_phone=company.contact_phone,
+        website=company.website,
+        business_address=company.business_address,
+        tax_number=company.tax_number,
+        is_active=company.is_active,
+        is_verified=company.is_verified,
+        created_at=company.created_at.isoformat(),
+        updated_at=company.updated_at.isoformat(),
+    )
+
+
+@admin_companies_router.put("/{company_id}/status", response_model=CompanyResponse)
+def toggle_company_status(
+    company_id: int = Path(..., description="Company ID"),
+    status_data: dict = Body(..., example={"is_active": True}),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Toggle company active status (Admin only).
+
+    Request body: { "is_active": true/false }
+    """
+    is_active = status_data.get("is_active", True)
+    company = company_service.toggle_active(db, company_id, is_active)
+    db.commit()  # ✅ ARCH: Commit at API level for transaction control
+
+    return CompanyResponse(
+        id=company.id,
+        name=company.name,
+        description=company.description,
+        owner_user_id=company.owner_user_id,
+        contact_email=company.contact_email,
+        contact_phone=company.contact_phone,
+        website=company.website,
+        business_address=company.business_address,
+        tax_number=company.tax_number,
+        is_active=company.is_active,
+        is_verified=company.is_verified,
+        created_at=company.created_at.isoformat(),
+        updated_at=company.updated_at.isoformat(),
+    )
+
+
+@admin_companies_router.post(
+    "/{company_id}/transfer-ownership",
+    response_model=CompanyTransferOwnershipResponse,
+)
+def transfer_company_ownership(
+    company_id: int = Path(..., description="Company ID"),
+    transfer_data: CompanyTransferOwnership = Body(...),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Transfer company ownership to another user (Admin only).
+
+    **This is a critical operation that:**
+    - Changes the company's owner_user_id
+    - Updates all associated vendors' owner_user_id
+    - Creates audit trail
+
+    ⚠️ **This action is logged and should be used carefully.**
+
+    **Requires:**
+    - `new_owner_user_id`: ID of user who will become owner
+    - `confirm_transfer`: Must be true
+    - `transfer_reason`: Optional reason for audit trail
+    """
+    company, old_owner, new_owner = company_service.transfer_ownership(
+        db, company_id, transfer_data
+    )
+    db.commit()  # ✅ ARCH: Commit at API level for transaction control
+
+    return CompanyTransferOwnershipResponse(
+        message="Ownership transferred successfully",
+        company_id=company.id,
+        company_name=company.name,
+        old_owner={
+            "id": old_owner.id,
+            "username": old_owner.username,
+            "email": old_owner.email,
+        },
+        new_owner={
+            "id": new_owner.id,
+            "username": new_owner.username,
+            "email": new_owner.email,
+        },
+        transferred_at=datetime.now(UTC),
+        transfer_reason=transfer_data.transfer_reason,
+    )
+
+
+@admin_companies_router.delete("/{company_id}")
+def delete_company(
+    company_id: int = Path(..., description="Company ID"),
+    confirm: bool = Query(False, description="Must be true to confirm deletion"),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Delete company and all associated vendors (Admin only).
+
+    ⚠️ **WARNING: This is destructive and will delete:**
+    - Company account
+    - All vendors under this company
+    - All products under those vendors
+    - All orders, customers, team members
+
+    Requires confirmation parameter: `confirm=true`
+    """
+    if not confirm:
+        raise ConfirmationRequiredException(
+            operation="delete_company",
+            message="Deletion requires confirmation parameter: confirm=true",
+        )
+
+    # Get company to check vendor count
+    company = company_service.get_company_by_id(db, company_id)
+    vendor_count = len(company.vendors)
+
+    if vendor_count > 0:
+        raise CompanyHasVendorsException(company_id, vendor_count)
+
+    company_service.delete_company(db, company_id)
+    db.commit()  # ✅ ARCH: Commit at API level for transaction control
+
+    return {"message": f"Company {company_id} deleted successfully"}

app/modules/tenancy/routes/api/admin_platform_users.py

@@ -0,0 +1,236 @@
+# app/modules/tenancy/routes/api/admin_platform_users.py
+"""
+User management endpoints for admin.
+
+All endpoints use the admin_service for business logic.
+Domain exceptions are raised by the service and converted to HTTP responses
+by the global exception handler.
+"""
+
+import logging
+
+from fastapi import APIRouter, Body, Depends, Path, Query
+from sqlalchemy.orm import Session
+
+from app.api.deps import get_current_admin_api
+from app.core.database import get_db
+from app.modules.tenancy.services.admin_service import admin_service
+from app.modules.analytics.services.stats_service import stats_service
+from models.schema.auth import UserContext
+from models.schema.auth import (
+    UserCreate,
+    UserDeleteResponse,
+    UserDetailResponse,
+    UserListResponse,
+    UserResponse,
+    UserSearchResponse,
+    UserStatusToggleResponse,
+    UserUpdate,
+)
+
+admin_platform_users_router = APIRouter(prefix="/users")
+logger = logging.getLogger(__name__)
+
+
+@admin_platform_users_router.get("", response_model=UserListResponse)
+def get_all_users(
+    page: int = Query(1, ge=1),
+    per_page: int = Query(10, ge=1, le=100),
+    search: str = Query("", description="Search by username or email"),
+    role: str = Query("", description="Filter by role"),
+    is_active: str = Query("", description="Filter by active status"),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """Get paginated list of all users (Admin only)."""
+    # Convert string params to proper types
+    is_active_bool = None
+    if is_active:
+        is_active_bool = is_active.lower() == "true"
+
+    users, total, pages = admin_service.list_users(
+        db=db,
+        page=page,
+        per_page=per_page,
+        search=search if search else None,
+        role=role if role else None,
+        is_active=is_active_bool,
+    )
+
+    return UserListResponse(
+        items=[UserResponse.model_validate(user) for user in users],
+        total=total,
+        page=page,
+        per_page=per_page,
+        pages=pages,
+    )
+
+
+@admin_platform_users_router.post("", response_model=UserDetailResponse)
+def create_user(
+    user_data: UserCreate = Body(...),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """Create a new user (Admin only)."""
+    user = admin_service.create_user(
+        db=db,
+        email=user_data.email,
+        username=user_data.username,
+        password=user_data.password,
+        first_name=user_data.first_name,
+        last_name=user_data.last_name,
+        role=user_data.role,
+        current_admin_id=current_admin.id,
+    )
+    db.commit()
+
+    return UserDetailResponse(
+        id=user.id,
+        email=user.email,
+        username=user.username,
+        role=user.role,
+        is_active=user.is_active,
+        last_login=user.last_login,
+        created_at=user.created_at,
+        updated_at=user.updated_at,
+        first_name=user.first_name,
+        last_name=user.last_name,
+        full_name=user.full_name,
+        is_email_verified=user.is_email_verified,
+        owned_companies_count=len(user.owned_companies) if user.owned_companies else 0,
+        vendor_memberships_count=len(user.vendor_memberships)
+        if user.vendor_memberships
+        else 0,
+    )
+
+
+@admin_platform_users_router.get("/stats")
+def get_user_statistics(
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """Get user statistics for admin dashboard (Admin only)."""
+    return stats_service.get_user_statistics(db)
+
+
+@admin_platform_users_router.get("/search", response_model=UserSearchResponse)
+def search_users(
+    q: str = Query(..., min_length=2, description="Search query (username or email)"),
+    limit: int = Query(10, ge=1, le=50),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Search users by username or email (Admin only).
+
+    Used for autocomplete in ownership transfer.
+    """
+    users = admin_service.search_users(db=db, query=q, limit=limit)
+    return UserSearchResponse(users=users)
+
+
+@admin_platform_users_router.get("/{user_id}", response_model=UserDetailResponse)
+def get_user_details(
+    user_id: int = Path(..., description="User ID"),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """Get detailed user information (Admin only)."""
+    user = admin_service.get_user_details(db=db, user_id=user_id)
+
+    return UserDetailResponse(
+        id=user.id,
+        email=user.email,
+        username=user.username,
+        role=user.role,
+        is_active=user.is_active,
+        last_login=user.last_login,
+        created_at=user.created_at,
+        updated_at=user.updated_at,
+        first_name=user.first_name,
+        last_name=user.last_name,
+        full_name=user.full_name,
+        is_email_verified=user.is_email_verified,
+        owned_companies_count=len(user.owned_companies) if user.owned_companies else 0,
+        vendor_memberships_count=len(user.vendor_memberships)
+        if user.vendor_memberships
+        else 0,
+    )
+
+
+@admin_platform_users_router.put("/{user_id}", response_model=UserDetailResponse)
+def update_user(
+    user_id: int = Path(..., description="User ID"),
+    user_update: UserUpdate = Body(...),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """Update user information (Admin only)."""
+    update_data = user_update.model_dump(exclude_unset=True)
+
+    user = admin_service.update_user(
+        db=db,
+        user_id=user_id,
+        current_admin_id=current_admin.id,
+        email=update_data.get("email"),
+        username=update_data.get("username"),
+        first_name=update_data.get("first_name"),
+        last_name=update_data.get("last_name"),
+        role=update_data.get("role"),
+        is_active=update_data.get("is_active"),
+    )
+    db.commit()
+
+    return UserDetailResponse(
+        id=user.id,
+        email=user.email,
+        username=user.username,
+        role=user.role,
+        is_active=user.is_active,
+        last_login=user.last_login,
+        created_at=user.created_at,
+        updated_at=user.updated_at,
+        first_name=user.first_name,
+        last_name=user.last_name,
+        full_name=user.full_name,
+        is_email_verified=user.is_email_verified,
+        owned_companies_count=len(user.owned_companies) if user.owned_companies else 0,
+        vendor_memberships_count=len(user.vendor_memberships)
+        if user.vendor_memberships
+        else 0,
+    )
+
+
+@admin_platform_users_router.put("/{user_id}/status", response_model=UserStatusToggleResponse)
+def toggle_user_status(
+    user_id: int = Path(..., description="User ID"),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """Toggle user active status (Admin only)."""
+    user, message = admin_service.toggle_user_status(
+        db=db,
+        user_id=user_id,
+        current_admin_id=current_admin.id,
+    )
+    db.commit()
+
+    return UserStatusToggleResponse(message=message, is_active=user.is_active)
+
+
+@admin_platform_users_router.delete("/{user_id}", response_model=UserDeleteResponse)
+def delete_user(
+    user_id: int = Path(..., description="User ID"),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """Delete a user (Admin only)."""
+    message = admin_service.delete_user(
+        db=db,
+        user_id=user_id,
+        current_admin_id=current_admin.id,
+    )
+    db.commit()
+
+    return UserDeleteResponse(message=message)

app/modules/tenancy/routes/api/admin_platforms.py

@@ -0,0 +1,224 @@
+# app/modules/tenancy/routes/api/admin_platforms.py
+"""
+Admin API endpoints for Platform management (Multi-Platform CMS).
+
+Provides CRUD operations for platforms:
+- GET /platforms - List all platforms
+- GET /platforms/{code} - Get platform details
+- PUT /platforms/{code} - Update platform settings
+- GET /platforms/{code}/stats - Get platform statistics
+
+Platforms are business offerings (OMS, Loyalty, Site Builder) with their own:
+- Marketing pages (homepage, pricing, features)
+- Vendor defaults (about, terms, privacy)
+- Configuration and branding
+"""
+
+import logging
+from typing import Any
+
+from fastapi import APIRouter, Depends, Path, Query
+from pydantic import BaseModel, Field
+from sqlalchemy.orm import Session
+
+from app.api.deps import get_current_admin_from_cookie_or_header, get_db
+from app.modules.tenancy.services.platform_service import platform_service
+from models.schema.auth import UserContext
+
+logger = logging.getLogger(__name__)
+admin_platforms_router = APIRouter(prefix="/platforms")
+
+
+# =============================================================================
+# Pydantic Schemas
+# =============================================================================
+
+
+class PlatformResponse(BaseModel):
+    """Platform response schema."""
+
+    id: int
+    code: str
+    name: str
+    description: str | None = None
+    domain: str | None = None
+    path_prefix: str | None = None
+    logo: str | None = None
+    logo_dark: str | None = None
+    favicon: str | None = None
+    theme_config: dict[str, Any] = Field(default_factory=dict)
+    default_language: str = "fr"
+    supported_languages: list[str] = Field(default_factory=lambda: ["fr", "de", "en"])
+    is_active: bool = True
+    is_public: bool = True
+    settings: dict[str, Any] = Field(default_factory=dict)
+    created_at: str
+    updated_at: str
+
+    # Computed fields (added by endpoint)
+    vendor_count: int = 0
+    platform_pages_count: int = 0
+    vendor_defaults_count: int = 0
+
+    class Config:
+        from_attributes = True
+
+
+class PlatformListResponse(BaseModel):
+    """Response for platform list."""
+
+    platforms: list[PlatformResponse]
+    total: int
+
+
+class PlatformUpdateRequest(BaseModel):
+    """Request schema for updating a platform."""
+
+    name: str | None = None
+    description: str | None = None
+    domain: str | None = None
+    path_prefix: str | None = None
+    logo: str | None = None
+    logo_dark: str | None = None
+    favicon: str | None = None
+    theme_config: dict[str, Any] | None = None
+    default_language: str | None = None
+    supported_languages: list[str] | None = None
+    is_active: bool | None = None
+    is_public: bool | None = None
+    settings: dict[str, Any] | None = None
+
+
+class PlatformStatsResponse(BaseModel):
+    """Platform statistics response."""
+
+    platform_id: int
+    platform_code: str
+    platform_name: str
+    vendor_count: int
+    platform_pages_count: int
+    vendor_defaults_count: int
+    vendor_overrides_count: int
+    published_pages_count: int
+    draft_pages_count: int
+
+
+# =============================================================================
+# Helper Functions
+# =============================================================================
+
+
+def _build_platform_response(db: Session, platform) -> PlatformResponse:
+    """Build PlatformResponse from Platform model with computed fields."""
+    return PlatformResponse(
+        id=platform.id,
+        code=platform.code,
+        name=platform.name,
+        description=platform.description,
+        domain=platform.domain,
+        path_prefix=platform.path_prefix,
+        logo=platform.logo,
+        logo_dark=platform.logo_dark,
+        favicon=platform.favicon,
+        theme_config=platform.theme_config or {},
+        default_language=platform.default_language,
+        supported_languages=platform.supported_languages or ["fr", "de", "en"],
+        is_active=platform.is_active,
+        is_public=platform.is_public,
+        settings=platform.settings or {},
+        created_at=platform.created_at.isoformat(),
+        updated_at=platform.updated_at.isoformat(),
+        vendor_count=platform_service.get_vendor_count(db, platform.id),
+        platform_pages_count=platform_service.get_platform_pages_count(db, platform.id),
+        vendor_defaults_count=platform_service.get_vendor_defaults_count(db, platform.id),
+    )
+
+
+# =============================================================================
+# API Endpoints
+# =============================================================================
+
+
+@admin_platforms_router.get("", response_model=PlatformListResponse)
+async def list_platforms(
+    db: Session = Depends(get_db),
+    current_user: UserContext = Depends(get_current_admin_from_cookie_or_header),
+    include_inactive: bool = Query(False, description="Include inactive platforms"),
+):
+    """
+    List all platforms with their statistics.
+
+    Returns all platforms (OMS, Loyalty, etc.) with vendor counts and page counts.
+    """
+    platforms = platform_service.list_platforms(db, include_inactive=include_inactive)
+
+    result = [_build_platform_response(db, platform) for platform in platforms]
+
+    logger.info(f"[PLATFORMS] Listed {len(result)} platforms")
+
+    return PlatformListResponse(platforms=result, total=len(result))
+
+
+@admin_platforms_router.get("/{code}", response_model=PlatformResponse)
+async def get_platform(
+    code: str = Path(..., description="Platform code (oms, loyalty, etc.)"),
+    db: Session = Depends(get_db),
+    current_user: UserContext = Depends(get_current_admin_from_cookie_or_header),
+):
+    """
+    Get platform details by code.
+
+    Returns full platform configuration including statistics.
+    """
+    platform = platform_service.get_platform_by_code(db, code)
+    return _build_platform_response(db, platform)
+
+
+@admin_platforms_router.put("/{code}", response_model=PlatformResponse)
+async def update_platform(
+    update_data: PlatformUpdateRequest,
+    code: str = Path(..., description="Platform code"),
+    db: Session = Depends(get_db),
+    current_user: UserContext = Depends(get_current_admin_from_cookie_or_header),
+):
+    """
+    Update platform settings.
+
+    Allows updating name, description, branding, and configuration.
+    """
+    platform = platform_service.get_platform_by_code(db, code)
+
+    update_dict = update_data.model_dump(exclude_unset=True)
+    platform = platform_service.update_platform(db, platform, update_dict)
+
+    db.commit()
+    db.refresh(platform)
+
+    return _build_platform_response(db, platform)
+
+
+@admin_platforms_router.get("/{code}/stats", response_model=PlatformStatsResponse)
+async def get_platform_stats(
+    code: str = Path(..., description="Platform code"),
+    db: Session = Depends(get_db),
+    current_user: UserContext = Depends(get_current_admin_from_cookie_or_header),
+):
+    """
+    Get detailed statistics for a platform.
+
+    Returns counts for vendors, pages, and content breakdown.
+    """
+    platform = platform_service.get_platform_by_code(db, code)
+    stats = platform_service.get_platform_stats(db, platform)
+
+    return PlatformStatsResponse(
+        platform_id=stats.platform_id,
+        platform_code=stats.platform_code,
+        platform_name=stats.platform_name,
+        vendor_count=stats.vendor_count,
+        platform_pages_count=stats.platform_pages_count,
+        vendor_defaults_count=stats.vendor_defaults_count,
+        vendor_overrides_count=stats.vendor_overrides_count,
+        published_pages_count=stats.published_pages_count,
+        draft_pages_count=stats.draft_pages_count,
+    )

app/modules/tenancy/routes/api/admin_users.py

@@ -0,0 +1,397 @@
+# app/modules/tenancy/routes/api/admin_users.py
+"""
+Admin user management endpoints (Super Admin only).
+
+This module provides endpoints for:
+- Listing all admin users with their platform assignments
+- Creating platform admins and super admins
+- Assigning/removing platform access
+- Promoting/demoting super admin status
+- Toggling admin status
+- Deleting admin users
+"""
+
+import logging
+from datetime import datetime
+from typing import Optional
+
+from fastapi import APIRouter, Body, Depends, Path, Query
+from pydantic import BaseModel, EmailStr
+from sqlalchemy.orm import Session
+
+from app.api.deps import get_current_super_admin, get_current_super_admin_api
+from app.core.database import get_db
+from app.exceptions import ValidationException
+from app.modules.tenancy.services.admin_platform_service import admin_platform_service
+from models.database.user import User  # noqa: API-007 - Internal helper uses User model
+from models.schema.auth import UserContext
+
+admin_users_router = APIRouter(prefix="/admin-users")
+logger = logging.getLogger(__name__)
+
+
+# ============================================================================
+# SCHEMAS
+# ============================================================================
+
+
+class PlatformAssignmentResponse(BaseModel):
+    """Response for a platform assignment."""
+
+    platform_id: int
+    platform_code: str
+    platform_name: str
+    is_active: bool
+
+    class Config:
+        from_attributes = True
+
+
+class AdminUserResponse(BaseModel):
+    """Response for an admin user."""
+
+    id: int
+    email: str
+    username: str
+    first_name: Optional[str] = None
+    last_name: Optional[str] = None
+    is_active: bool
+    is_super_admin: bool
+    platform_assignments: list[PlatformAssignmentResponse] = []
+    created_at: datetime
+    updated_at: datetime
+    last_login: Optional[datetime] = None
+
+    class Config:
+        from_attributes = True
+
+
+class AdminUserListResponse(BaseModel):
+    """Response for listing admin users."""
+
+    admins: list[AdminUserResponse]
+    total: int
+
+
+class CreateAdminUserRequest(BaseModel):
+    """Request to create a new admin user (platform admin or super admin)."""
+
+    email: EmailStr
+    username: str
+    password: str
+    first_name: Optional[str] = None
+    last_name: Optional[str] = None
+    is_super_admin: bool = False
+    platform_ids: list[int] = []
+
+
+class AssignPlatformRequest(BaseModel):
+    """Request to assign admin to platform."""
+
+    platform_id: int
+
+
+class ToggleSuperAdminRequest(BaseModel):
+    """Request to toggle super admin status."""
+
+    is_super_admin: bool
+
+
+# ============================================================================
+# HELPER FUNCTIONS
+# ============================================================================
+
+
+def _build_admin_response(admin: User) -> AdminUserResponse:
+    """Build AdminUserResponse from User model."""
+    assignments = []
+    if not admin.is_super_admin:
+        for ap in admin.admin_platforms:
+            if ap.is_active and ap.platform:
+                assignments.append(
+                    PlatformAssignmentResponse(
+                        platform_id=ap.platform_id,
+                        platform_code=ap.platform.code,
+                        platform_name=ap.platform.name,
+                        is_active=ap.is_active,
+                    )
+                )
+
+    return AdminUserResponse(
+        id=admin.id,
+        email=admin.email,
+        username=admin.username,
+        first_name=admin.first_name,
+        last_name=admin.last_name,
+        is_active=admin.is_active,
+        is_super_admin=admin.is_super_admin,
+        platform_assignments=assignments,
+        created_at=admin.created_at,
+        updated_at=admin.updated_at,
+        last_login=admin.last_login,
+    )
+
+
+# ============================================================================
+# ENDPOINTS
+# ============================================================================
+
+
+@admin_users_router.get("", response_model=AdminUserListResponse)
+def list_admin_users(
+    skip: int = Query(0, ge=0),
+    limit: int = Query(100, ge=1, le=500),
+    include_super_admins: bool = Query(True),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_super_admin),
+):
+    """
+    List all admin users with their platform assignments.
+
+    Super admin only.
+    """
+    admins, total = admin_platform_service.list_admin_users(
+        db=db,
+        skip=skip,
+        limit=limit,
+        include_super_admins=include_super_admins,
+    )
+
+    admin_responses = [_build_admin_response(admin) for admin in admins]
+
+    return AdminUserListResponse(admins=admin_responses, total=total)
+
+
+@admin_users_router.post("", response_model=AdminUserResponse)
+def create_admin_user(
+    request: CreateAdminUserRequest,
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_super_admin_api),
+):
+    """
+    Create a new admin user (super admin or platform admin).
+
+    Super admin only.
+    """
+    # Validate platform_ids required for non-super admin
+    if not request.is_super_admin and not request.platform_ids:
+        raise ValidationException(
+            "Platform admins must be assigned to at least one platform",
+            field="platform_ids",
+        )
+
+    if request.is_super_admin:
+        # Create super admin using service
+        user = admin_platform_service.create_super_admin(
+            db=db,
+            email=request.email,
+            username=request.username,
+            password=request.password,
+            created_by_user_id=current_admin.id,
+            first_name=request.first_name,
+            last_name=request.last_name,
+        )
+        db.commit()
+        db.refresh(user)
+
+        return AdminUserResponse(
+            id=user.id,
+            email=user.email,
+            username=user.username,
+            first_name=user.first_name,
+            last_name=user.last_name,
+            is_active=user.is_active,
+            is_super_admin=user.is_super_admin,
+            platform_assignments=[],
+        )
+    else:
+        # Create platform admin with assignments using service
+        user, assignments = admin_platform_service.create_platform_admin(
+            db=db,
+            email=request.email,
+            username=request.username,
+            password=request.password,
+            platform_ids=request.platform_ids,
+            created_by_user_id=current_admin.id,
+            first_name=request.first_name,
+            last_name=request.last_name,
+        )
+        db.commit()
+        db.refresh(user)
+
+        return _build_admin_response(user)
+
+
+@admin_users_router.get("/{user_id}", response_model=AdminUserResponse)
+def get_admin_user(
+    user_id: int = Path(...),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_super_admin),
+):
+    """
+    Get admin user details with platform assignments.
+
+    Super admin only.
+    """
+    admin = admin_platform_service.get_admin_user(db=db, user_id=user_id)
+    return _build_admin_response(admin)
+
+
+@admin_users_router.post("/{user_id}/platforms/{platform_id}")
+def assign_admin_to_platform(
+    user_id: int = Path(...),
+    platform_id: int = Path(...),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_super_admin_api),
+):
+    """
+    Assign an admin to a platform.
+
+    Super admin only.
+    """
+    admin_platform_service.assign_admin_to_platform(
+        db=db,
+        admin_user_id=user_id,
+        platform_id=platform_id,
+        assigned_by_user_id=current_admin.id,
+    )
+    db.commit()
+
+    return {
+        "message": "Admin assigned to platform successfully",
+        "platform_id": platform_id,
+        "user_id": user_id,
+    }
+
+
+@admin_users_router.delete("/{user_id}/platforms/{platform_id}")
+def remove_admin_from_platform(
+    user_id: int = Path(...),
+    platform_id: int = Path(...),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_super_admin_api),
+):
+    """
+    Remove an admin's access to a platform.
+
+    Super admin only.
+    """
+    admin_platform_service.remove_admin_from_platform(
+        db=db,
+        admin_user_id=user_id,
+        platform_id=platform_id,
+        removed_by_user_id=current_admin.id,
+    )
+    db.commit()
+
+    return {
+        "message": "Admin removed from platform successfully",
+        "platform_id": platform_id,
+        "user_id": user_id,
+    }
+
+
+@admin_users_router.put("/{user_id}/super-admin")
+def toggle_super_admin_status(
+    user_id: int = Path(...),
+    request: ToggleSuperAdminRequest = Body(...),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_super_admin_api),
+):
+    """
+    Promote or demote an admin to/from super admin.
+
+    Super admin only.
+    """
+    user = admin_platform_service.toggle_super_admin(
+        db=db,
+        user_id=user_id,
+        is_super_admin=request.is_super_admin,
+        current_admin_id=current_admin.id,
+    )
+    db.commit()
+
+    action = "promoted to" if request.is_super_admin else "demoted from"
+
+    return {
+        "message": f"Admin {action} super admin successfully",
+        "user_id": user_id,
+        "is_super_admin": user.is_super_admin,
+    }
+
+
+@admin_users_router.get("/{user_id}/platforms")
+def get_admin_platforms(
+    user_id: int = Path(...),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_super_admin),
+):
+    """
+    Get all platforms assigned to an admin.
+
+    Super admin only.
+    """
+    platforms = admin_platform_service.get_platforms_for_admin(db, user_id)
+
+    return {
+        "platforms": [
+            {
+                "id": p.id,
+                "code": p.code,
+                "name": p.name,
+            }
+            for p in platforms
+        ],
+        "user_id": user_id,
+    }
+
+
+@admin_users_router.put("/{user_id}/status")
+def toggle_admin_status(
+    user_id: int = Path(...),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_super_admin_api),
+):
+    """
+    Toggle admin user active status.
+
+    Super admin only. Cannot deactivate yourself.
+    """
+    admin = admin_platform_service.toggle_admin_status(
+        db=db,
+        user_id=user_id,
+        current_admin_id=current_admin.id,
+    )
+    db.commit()
+
+    action = "activated" if admin.is_active else "deactivated"
+
+    return {
+        "message": f"Admin user {action} successfully",
+        "user_id": user_id,
+        "is_active": admin.is_active,
+    }
+
+
+@admin_users_router.delete("/{user_id}")
+def delete_admin_user(
+    user_id: int = Path(...),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_super_admin_api),
+):
+    """
+    Delete an admin user.
+
+    Super admin only. Cannot delete yourself.
+    """
+    admin_platform_service.delete_admin_user(
+        db=db,
+        user_id=user_id,
+        current_admin_id=current_admin.id,
+    )
+    db.commit()
+
+    return {
+        "message": "Admin user deleted successfully",
+        "user_id": user_id,
+    }

app/modules/tenancy/routes/api/admin_vendor_domains.py

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

app/modules/tenancy/routes/api/admin_vendors.py

@@ -0,0 +1,492 @@
+# app/modules/tenancy/routes/api/admin_vendors.py
+"""
+Vendor management endpoints for admin.
+
+Architecture Notes:
+- All business logic is in vendor_service (no direct DB operations here)
+- Uses domain exceptions from app/exceptions/vendor.py
+- Exception handler middleware converts domain exceptions to HTTP responses
+"""
+
+import logging
+
+from fastapi import APIRouter, Body, Depends, Path, Query
+from sqlalchemy.orm import Session
+
+from app.api.deps import get_current_admin_api
+from app.core.database import get_db
+from app.modules.tenancy.exceptions import ConfirmationRequiredException
+from app.modules.tenancy.services.admin_service import admin_service
+from app.modules.analytics.services.stats_service import stats_service
+from app.modules.tenancy.services.vendor_service import vendor_service
+from models.schema.auth import UserContext
+from app.modules.analytics.schemas import VendorStatsResponse
+from models.schema.vendor import (
+    LetzshopExportRequest,
+    LetzshopExportResponse,
+    VendorCreate,
+    VendorCreateResponse,
+    VendorDetailResponse,
+    VendorListResponse,
+    VendorUpdate,
+)
+
+admin_vendors_router = APIRouter(prefix="/vendors")
+logger = logging.getLogger(__name__)
+
+
+@admin_vendors_router.post("", response_model=VendorCreateResponse)
+def create_vendor(
+    vendor_data: VendorCreate,
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Create a new vendor (storefront/brand) under an existing company (Admin only).
+
+    This endpoint:
+    1. Validates that the parent company exists
+    2. Creates a new vendor record linked to the company
+    3. Sets up default roles (Owner, Manager, Editor, Viewer)
+
+    The vendor inherits owner and contact information from its parent company.
+    """
+    vendor = admin_service.create_vendor(db=db, vendor_data=vendor_data)
+    db.commit()
+
+    return VendorCreateResponse(
+        # Vendor fields
+        id=vendor.id,
+        vendor_code=vendor.vendor_code,
+        subdomain=vendor.subdomain,
+        name=vendor.name,
+        description=vendor.description,
+        company_id=vendor.company_id,
+        letzshop_csv_url_fr=vendor.letzshop_csv_url_fr,
+        letzshop_csv_url_en=vendor.letzshop_csv_url_en,
+        letzshop_csv_url_de=vendor.letzshop_csv_url_de,
+        is_active=vendor.is_active,
+        is_verified=vendor.is_verified,
+        created_at=vendor.created_at,
+        updated_at=vendor.updated_at,
+        # Company info
+        company_name=vendor.company.name,
+        company_contact_email=vendor.company.contact_email,
+        company_contact_phone=vendor.company.contact_phone,
+        company_website=vendor.company.website,
+        # Owner info (from company)
+        owner_email=vendor.company.owner.email,
+        owner_username=vendor.company.owner.username,
+        login_url=f"http://localhost:8000/vendor/{vendor.subdomain}/login",
+    )
+
+
+@admin_vendors_router.get("", response_model=VendorListResponse)
+def get_all_vendors_admin(
+    skip: int = Query(0, ge=0),
+    limit: int = Query(100, ge=1, le=1000),
+    search: str | None = Query(None, description="Search by name or vendor code"),
+    is_active: bool | None = Query(None),
+    is_verified: bool | None = Query(None),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """Get all vendors with filtering (Admin only)."""
+    vendors, total = admin_service.get_all_vendors(
+        db=db,
+        skip=skip,
+        limit=limit,
+        search=search,
+        is_active=is_active,
+        is_verified=is_verified,
+    )
+    return VendorListResponse(vendors=vendors, total=total, skip=skip, limit=limit)
+
+
+@admin_vendors_router.get("/stats", response_model=VendorStatsResponse)
+def get_vendor_statistics_endpoint(
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """Get vendor statistics for admin dashboard (Admin only)."""
+    stats = stats_service.get_vendor_statistics(db)
+
+    # Use schema-compatible keys (with fallback to legacy keys)
+    return VendorStatsResponse(
+        total=stats.get("total", stats.get("total_vendors", 0)),
+        verified=stats.get("verified", stats.get("verified_vendors", 0)),
+        pending=stats.get("pending", stats.get("pending_vendors", 0)),
+        inactive=stats.get("inactive", stats.get("inactive_vendors", 0)),
+    )
+
+
+def _build_vendor_detail_response(vendor) -> VendorDetailResponse:
+    """
+    Helper to build VendorDetailResponse with resolved contact info.
+
+    Contact fields are resolved using vendor override or company fallback.
+    Inheritance flags indicate if value comes from company.
+    """
+    contact_info = vendor.get_contact_info_with_inheritance()
+
+    return VendorDetailResponse(
+        # Vendor fields
+        id=vendor.id,
+        vendor_code=vendor.vendor_code,
+        subdomain=vendor.subdomain,
+        name=vendor.name,
+        description=vendor.description,
+        company_id=vendor.company_id,
+        letzshop_csv_url_fr=vendor.letzshop_csv_url_fr,
+        letzshop_csv_url_en=vendor.letzshop_csv_url_en,
+        letzshop_csv_url_de=vendor.letzshop_csv_url_de,
+        is_active=vendor.is_active,
+        is_verified=vendor.is_verified,
+        created_at=vendor.created_at,
+        updated_at=vendor.updated_at,
+        # Company info
+        company_name=vendor.company.name,
+        # Owner details (from company)
+        owner_email=vendor.company.owner.email,
+        owner_username=vendor.company.owner.username,
+        # Resolved contact info with inheritance flags
+        **contact_info,
+        # Original company values for UI reference
+        company_contact_email=vendor.company.contact_email,
+        company_contact_phone=vendor.company.contact_phone,
+        company_website=vendor.company.website,
+        company_business_address=vendor.company.business_address,
+        company_tax_number=vendor.company.tax_number,
+    )
+
+
+@admin_vendors_router.get("/{vendor_identifier}", response_model=VendorDetailResponse)
+def get_vendor_details(
+    vendor_identifier: str = Path(..., description="Vendor ID or vendor_code"),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Get detailed vendor information including company and owner details (Admin only).
+
+    Accepts either vendor ID (integer) or vendor_code (string).
+
+    Returns vendor info with company contact details, owner info, and
+    resolved contact fields (vendor override or company default).
+
+    Raises:
+        VendorNotFoundException: If vendor not found (404)
+    """
+    vendor = vendor_service.get_vendor_by_identifier(db, vendor_identifier)
+    return _build_vendor_detail_response(vendor)
+
+
+@admin_vendors_router.put("/{vendor_identifier}", response_model=VendorDetailResponse)
+def update_vendor(
+    vendor_identifier: str = Path(..., description="Vendor ID or vendor_code"),
+    vendor_update: VendorUpdate = Body(...),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Update vendor information (Admin only).
+
+    Accepts either vendor ID (integer) or vendor_code (string).
+
+    **Can update:**
+    - Basic info: name, description, subdomain
+    - Marketplace URLs
+    - Status: is_active, is_verified
+    - Contact info: contact_email, contact_phone, website, business_address, tax_number
+      (these override company defaults; set to empty to reset to inherit)
+
+    **Cannot update:**
+    - `vendor_code` (immutable)
+
+    Raises:
+        VendorNotFoundException: If vendor not found (404)
+    """
+    vendor = vendor_service.get_vendor_by_identifier(db, vendor_identifier)
+    vendor = admin_service.update_vendor(db, vendor.id, vendor_update)
+    db.commit()
+    return _build_vendor_detail_response(vendor)
+
+
+# NOTE: Ownership transfer is now at the Company level.
+# Use PUT /api/v1/admin/companies/{id}/transfer-ownership instead.
+# This endpoint is kept for backwards compatibility but may be removed in future versions.
+
+
+@admin_vendors_router.put("/{vendor_identifier}/verification", response_model=VendorDetailResponse)
+def toggle_vendor_verification(
+    vendor_identifier: str = Path(..., description="Vendor ID or vendor_code"),
+    verification_data: dict = Body(..., example={"is_verified": True}),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Set vendor verification status (Admin only).
+
+    Accepts either vendor ID (integer) or vendor_code (string).
+
+    Request body: { "is_verified": true/false }
+
+    Raises:
+        VendorNotFoundException: If vendor not found (404)
+    """
+    vendor = vendor_service.get_vendor_by_identifier(db, vendor_identifier)
+
+    if "is_verified" in verification_data:
+        vendor, message = vendor_service.set_verification(
+            db, vendor.id, verification_data["is_verified"]
+        )
+        db.commit()  # ✅ ARCH: Commit at API level for transaction control
+        logger.info(f"Vendor verification updated: {message}")
+
+    return _build_vendor_detail_response(vendor)
+
+
+@admin_vendors_router.put("/{vendor_identifier}/status", response_model=VendorDetailResponse)
+def toggle_vendor_status(
+    vendor_identifier: str = Path(..., description="Vendor ID or vendor_code"),
+    status_data: dict = Body(..., example={"is_active": True}),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Set vendor active status (Admin only).
+
+    Accepts either vendor ID (integer) or vendor_code (string).
+
+    Request body: { "is_active": true/false }
+
+    Raises:
+        VendorNotFoundException: If vendor not found (404)
+    """
+    vendor = vendor_service.get_vendor_by_identifier(db, vendor_identifier)
+
+    if "is_active" in status_data:
+        vendor, message = vendor_service.set_status(
+            db, vendor.id, status_data["is_active"]
+        )
+        db.commit()  # ✅ ARCH: Commit at API level for transaction control
+        logger.info(f"Vendor status updated: {message}")
+
+    return _build_vendor_detail_response(vendor)
+
+
+@admin_vendors_router.delete("/{vendor_identifier}")
+def delete_vendor(
+    vendor_identifier: str = Path(..., description="Vendor ID or vendor_code"),
+    confirm: bool = Query(False, description="Must be true to confirm deletion"),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Delete vendor and all associated data (Admin only).
+
+    Accepts either vendor ID (integer) or vendor_code (string).
+
+    ⚠️ **WARNING: This is destructive and will delete:**
+    - Vendor account
+    - All products
+    - All orders
+    - All customers
+    - All team members
+
+    Requires confirmation parameter: `confirm=true`
+
+    Raises:
+        ConfirmationRequiredException: If confirm=true not provided (400)
+        VendorNotFoundException: If vendor not found (404)
+    """
+    if not confirm:
+        raise ConfirmationRequiredException(
+            operation="delete_vendor",
+            message="Deletion requires confirmation parameter: confirm=true",
+        )
+
+    vendor = vendor_service.get_vendor_by_identifier(db, vendor_identifier)
+    message = admin_service.delete_vendor(db, vendor.id)
+    db.commit()
+    return {"message": message}
+
+
+# ============================================================================
+# LETZSHOP EXPORT
+# ============================================================================
+
+
+@admin_vendors_router.get("/{vendor_identifier}/export/letzshop")
+def export_vendor_products_letzshop(
+    vendor_identifier: str = Path(..., description="Vendor ID or vendor_code"),
+    language: str = Query(
+        "en", description="Language for title/description (en, fr, de)"
+    ),
+    include_inactive: bool = Query(False, description="Include inactive products"),
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Export vendor products in Letzshop CSV format (Admin only).
+
+    Generates a Google Shopping compatible CSV file for Letzshop marketplace.
+    The file uses tab-separated values and includes all required Letzshop fields.
+
+    **Supported languages:** en, fr, de
+
+    **CSV Format:**
+    - Delimiter: Tab (\\t)
+    - Encoding: UTF-8
+    - Fields: id, title, description, price, availability, image_link, etc.
+
+    Returns:
+        CSV file as attachment (vendor_code_letzshop_export.csv)
+    """
+    from fastapi.responses import Response
+
+    from app.modules.marketplace.services.letzshop_export_service import letzshop_export_service
+
+    vendor = vendor_service.get_vendor_by_identifier(db, vendor_identifier)
+
+    csv_content = letzshop_export_service.export_vendor_products(
+        db=db,
+        vendor_id=vendor.id,
+        language=language,
+        include_inactive=include_inactive,
+    )
+
+    filename = f"{vendor.vendor_code.lower()}_letzshop_export.csv"
+
+    return Response(
+        content=csv_content,
+        media_type="text/csv; charset=utf-8",
+        headers={
+            "Content-Disposition": f'attachment; filename="{filename}"',
+        },
+    )
+
+
+@admin_vendors_router.post("/{vendor_identifier}/export/letzshop", response_model=LetzshopExportResponse)
+def export_vendor_products_letzshop_to_folder(
+    vendor_identifier: str = Path(..., description="Vendor ID or vendor_code"),
+    request: LetzshopExportRequest = None,
+    db: Session = Depends(get_db),
+    current_admin: UserContext = Depends(get_current_admin_api),
+):
+    """
+    Export vendor products to Letzshop pickup folder (Admin only).
+
+    Generates CSV files for all languages (FR, DE, EN) and places them in a folder
+    that Letzshop scheduler can fetch from. This is the preferred method for
+    automated product sync.
+
+    **Behavior:**
+    - When Celery is enabled: Queues export as background task, returns immediately
+    - When Celery is disabled: Runs synchronously and returns file paths
+    - Creates CSV files for each language (fr, de, en)
+    - Places files in: exports/letzshop/{vendor_code}/
+    - Filename format: {vendor_code}_products_{language}.csv
+
+    Returns:
+        JSON with export status and file paths (or task_id if async)
+    """
+    import os
+    from datetime import UTC, datetime
+    from pathlib import Path as FilePath
+
+    from app.core.config import settings
+    from app.modules.marketplace.services.letzshop_export_service import letzshop_export_service
+
+    vendor = vendor_service.get_vendor_by_identifier(db, vendor_identifier)
+    include_inactive = request.include_inactive if request else False
+
+    # If Celery is enabled, dispatch as async task
+    if settings.use_celery:
+        from app.tasks.dispatcher import task_dispatcher
+
+        celery_task_id = task_dispatcher.dispatch_product_export(
+            vendor_id=vendor.id,
+            triggered_by=f"admin:{current_admin.id}",
+            include_inactive=include_inactive,
+        )
+
+        return {
+            "success": True,
+            "message": f"Export task queued for vendor {vendor.vendor_code}. Check Flower for status.",
+            "vendor_code": vendor.vendor_code,
+            "export_directory": f"exports/letzshop/{vendor.vendor_code.lower()}",
+            "files": [],
+            "celery_task_id": celery_task_id,
+            "is_async": True,
+        }
+
+    # Synchronous export (when Celery is disabled)
+    started_at = datetime.now(UTC)
+
+    # Create export directory
+    export_dir = FilePath(f"exports/letzshop/{vendor.vendor_code.lower()}")
+    export_dir.mkdir(parents=True, exist_ok=True)
+
+    exported_files = []
+    languages = ["fr", "de", "en"]
+    total_records = 0
+    failed_count = 0
+
+    for lang in languages:
+        try:
+            csv_content = letzshop_export_service.export_vendor_products(
+                db=db,
+                vendor_id=vendor.id,
+                language=lang,
+                include_inactive=include_inactive,
+            )
+
+            filename = f"{vendor.vendor_code.lower()}_products_{lang}.csv"
+            filepath = export_dir / filename
+
+            with open(filepath, "w", encoding="utf-8") as f:
+                f.write(csv_content)
+
+            # Count lines (minus header)
+            line_count = csv_content.count("\n")
+            if line_count > 0:
+                total_records = max(total_records, line_count - 1)
+
+            exported_files.append({
+                "language": lang,
+                "filename": filename,
+                "path": str(filepath),
+                "size_bytes": os.path.getsize(filepath),
+            })
+        except Exception as e:
+            failed_count += 1
+            exported_files.append({
+                "language": lang,
+                "error": str(e),
+            })
+
+    # Log the export operation via service
+    completed_at = datetime.now(UTC)
+    letzshop_export_service.log_export(
+        db=db,
+        vendor_id=vendor.id,
+        started_at=started_at,
+        completed_at=completed_at,
+        files_processed=len(languages),
+        files_succeeded=len(languages) - failed_count,
+        files_failed=failed_count,
+        products_exported=total_records,
+        triggered_by=f"admin:{current_admin.id}",
+        error_details={"files": exported_files} if failed_count > 0 else None,
+    )
+    db.commit()
+
+    return {
+        "success": True,
+        "message": f"Exported {len([f for f in exported_files if 'error' not in f])} language(s) to {export_dir}",
+        "vendor_code": vendor.vendor_code,
+        "export_directory": str(export_dir),
+        "files": exported_files,
+        "is_async": False,
+    }

app/modules/tenancy/routes/api/vendor.py

@@ -17,7 +17,7 @@ from fastapi import APIRouter, Depends, Path
 from sqlalchemy.orm import Session
 
 from app.core.database import get_db
-from app.services.vendor_service import vendor_service  # noqa: mod-004
+from app.modules.tenancy.services.vendor_service import vendor_service  # noqa: mod-004
 from models.schema.vendor import VendorDetailResponse
 
 vendor_router = APIRouter()

app/modules/tenancy/routes/api/vendor_auth.py

@@ -21,8 +21,8 @@ from sqlalchemy.orm import Session
 from app.api.deps import get_current_vendor_api
 from app.core.database import get_db
 from app.core.environment import should_use_secure_cookies
-from app.exceptions import InvalidCredentialsException
-from app.services.auth_service import auth_service
+from app.modules.tenancy.exceptions import InvalidCredentialsException
+from app.modules.core.services.auth_service import auth_service
 from middleware.vendor_context import get_current_vendor
 from models.schema.auth import UserContext
 from models.schema.auth import LogoutResponse, UserLogin, VendorUserResponse

app/modules/tenancy/routes/api/vendor_profile.py

@@ -13,7 +13,7 @@ from sqlalchemy.orm import Session
 
 from app.api.deps import get_current_vendor_api
 from app.core.database import get_db
-from app.services.vendor_service import vendor_service
+from app.modules.tenancy.services.vendor_service import vendor_service
 from models.schema.auth import UserContext
 from models.schema.vendor import VendorResponse, VendorUpdate
 

app/modules/tenancy/routes/api/vendor_team.py

@@ -23,7 +23,7 @@ from app.api.deps import (
 )
 from app.core.database import get_db
 from app.core.permissions import VendorPermissions
-from app.services.vendor_team_service import vendor_team_service
+from app.modules.tenancy.services.vendor_team_service import vendor_team_service
 from models.schema.auth import UserContext
 from models.schema.team import (
     BulkRemoveRequest,
@@ -237,7 +237,7 @@ def get_team_member(
 
     member = next((m for m in members if m["id"] == user_id), None)
     if not member:
-        from app.exceptions import UserNotFoundException
+        from app.modules.tenancy.exceptions import UserNotFoundException
 
         raise UserNotFoundException(str(user_id))
 

app/modules/tenancy/routes/pages/__init__.py

@@ -0,0 +1,2 @@
+# app/modules/tenancy/routes/pages/__init__.py
+"""Tenancy module page routes."""

app/modules/tenancy/routes/pages/admin.py

@@ -0,0 +1,548 @@
+# app/modules/tenancy/routes/pages/admin.py
+"""
+Tenancy Admin Page Routes (HTML rendering).
+
+Admin pages for multi-tenant management:
+- Companies
+- Vendors
+- Vendor domains
+- Vendor themes
+- Admin users
+- Platforms
+"""
+
+from fastapi import APIRouter, Depends, Path, Request
+from fastapi.responses import HTMLResponse, RedirectResponse
+from sqlalchemy.orm import Session
+
+from app.api.deps import get_db, require_menu_access
+from app.modules.core.utils.page_context import get_admin_context
+from app.templates_config import templates
+from models.database.admin_menu_config import FrontendType
+from models.database.user import User
+
+router = APIRouter()
+
+
+# ============================================================================
+# COMPANY MANAGEMENT ROUTES
+# ============================================================================
+
+
+@router.get("/companies", response_class=HTMLResponse, include_in_schema=False)
+async def admin_companies_list_page(
+    request: Request,
+    current_user: User = Depends(require_menu_access("companies", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render companies management page.
+    Shows list of all companies with stats.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/companies.html",
+        get_admin_context(request, current_user),
+    )
+
+
+@router.get("/companies/create", response_class=HTMLResponse, include_in_schema=False)
+async def admin_company_create_page(
+    request: Request,
+    current_user: User = Depends(require_menu_access("companies", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render company creation form.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/company-create.html",
+        get_admin_context(request, current_user),
+    )
+
+
+@router.get(
+    "/companies/{company_id}", response_class=HTMLResponse, include_in_schema=False
+)
+async def admin_company_detail_page(
+    request: Request,
+    company_id: int = Path(..., description="Company ID"),
+    current_user: User = Depends(require_menu_access("companies", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render company detail view.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/company-detail.html",
+        get_admin_context(request, current_user, company_id=company_id),
+    )
+
+
+@router.get(
+    "/companies/{company_id}/edit",
+    response_class=HTMLResponse,
+    include_in_schema=False,
+)
+async def admin_company_edit_page(
+    request: Request,
+    company_id: int = Path(..., description="Company ID"),
+    current_user: User = Depends(require_menu_access("companies", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render company edit form.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/company-edit.html",
+        get_admin_context(request, current_user, company_id=company_id),
+    )
+
+
+# ============================================================================
+# VENDOR MANAGEMENT ROUTES
+# ============================================================================
+
+
+@router.get("/vendors", response_class=HTMLResponse, include_in_schema=False)
+async def admin_vendors_list_page(
+    request: Request,
+    current_user: User = Depends(require_menu_access("vendors", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render vendors management page.
+    Shows list of all vendors with stats.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/vendors.html",
+        get_admin_context(request, current_user),
+    )
+
+
+@router.get("/vendors/create", response_class=HTMLResponse, include_in_schema=False)
+async def admin_vendor_create_page(
+    request: Request,
+    current_user: User = Depends(require_menu_access("vendors", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render vendor creation form.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/vendor-create.html",
+        get_admin_context(request, current_user),
+    )
+
+
+@router.get(
+    "/vendors/{vendor_code}", response_class=HTMLResponse, include_in_schema=False
+)
+async def admin_vendor_detail_page(
+    request: Request,
+    vendor_code: str = Path(..., description="Vendor code"),
+    current_user: User = Depends(require_menu_access("vendors", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render vendor detail page.
+    Shows full vendor information.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/vendor-detail.html",
+        get_admin_context(request, current_user, vendor_code=vendor_code),
+    )
+
+
+@router.get(
+    "/vendors/{vendor_code}/edit", response_class=HTMLResponse, include_in_schema=False
+)
+async def admin_vendor_edit_page(
+    request: Request,
+    vendor_code: str = Path(..., description="Vendor code"),
+    current_user: User = Depends(require_menu_access("vendors", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render vendor edit form.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/vendor-edit.html",
+        get_admin_context(request, current_user, vendor_code=vendor_code),
+    )
+
+
+# ============================================================================
+# VENDOR DOMAINS ROUTES
+# ============================================================================
+
+
+@router.get(
+    "/vendors/{vendor_code}/domains",
+    response_class=HTMLResponse,
+    include_in_schema=False,
+)
+async def admin_vendor_domains_page(
+    request: Request,
+    vendor_code: str = Path(..., description="Vendor code"),
+    current_user: User = Depends(require_menu_access("vendors", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render vendor domains management page.
+    Shows custom domains, verification status, and DNS configuration.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/vendor-domains.html",
+        get_admin_context(request, current_user, vendor_code=vendor_code),
+    )
+
+
+# ============================================================================
+# VENDOR THEMES ROUTES
+# ============================================================================
+
+
+@router.get("/vendor-themes", response_class=HTMLResponse, include_in_schema=False)
+async def admin_vendor_themes_page(
+    request: Request,
+    current_user: User = Depends(
+        require_menu_access("vendor-themes", FrontendType.ADMIN)
+    ),
+    db: Session = Depends(get_db),
+):
+    """
+    Render vendor themes selection page.
+    Allows admins to select a vendor to customize their theme.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/vendor-themes.html",
+        get_admin_context(request, current_user),
+    )
+
+
+@router.get(
+    "/vendors/{vendor_code}/theme",
+    response_class=HTMLResponse,
+    include_in_schema=False,
+)
+async def admin_vendor_theme_page(
+    request: Request,
+    vendor_code: str = Path(..., description="Vendor code"),
+    current_user: User = Depends(
+        require_menu_access("vendor-themes", FrontendType.ADMIN)
+    ),
+    db: Session = Depends(get_db),
+):
+    """
+    Render vendor theme customization page.
+    Allows admins to customize colors, fonts, layout, and branding.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/vendor-theme.html",
+        get_admin_context(request, current_user, vendor_code=vendor_code),
+    )
+
+
+# ============================================================================
+# ADMIN USER MANAGEMENT ROUTES (Super Admin Only)
+# ============================================================================
+
+
+@router.get("/admin-users", response_class=HTMLResponse, include_in_schema=False)
+async def admin_users_list_page(
+    request: Request,
+    current_user: User = Depends(
+        require_menu_access("admin-users", FrontendType.ADMIN)
+    ),
+    db: Session = Depends(get_db),
+):
+    """
+    Render admin users management page.
+    Shows list of all admin users (super admins and platform admins).
+    Super admin only (menu is in super_admin_only section).
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/admin-users.html",
+        get_admin_context(request, current_user),
+    )
+
+
+@router.get(
+    "/admin-users/create", response_class=HTMLResponse, include_in_schema=False
+)
+async def admin_user_create_page(
+    request: Request,
+    current_user: User = Depends(
+        require_menu_access("admin-users", FrontendType.ADMIN)
+    ),
+    db: Session = Depends(get_db),
+):
+    """
+    Render admin user creation form.
+    Super admin only (menu is in super_admin_only section).
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/user-create.html",
+        get_admin_context(request, current_user),
+    )
+
+
+@router.get(
+    "/admin-users/{user_id}", response_class=HTMLResponse, include_in_schema=False
+)
+async def admin_user_detail_page(
+    request: Request,
+    user_id: int = Path(..., description="User ID"),
+    current_user: User = Depends(
+        require_menu_access("admin-users", FrontendType.ADMIN)
+    ),
+    db: Session = Depends(get_db),
+):
+    """
+    Render admin user detail view.
+    Super admin only (menu is in super_admin_only section).
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/admin-user-detail.html",
+        get_admin_context(request, current_user, user_id=user_id),
+    )
+
+
+@router.get(
+    "/admin-users/{user_id}/edit", response_class=HTMLResponse, include_in_schema=False
+)
+async def admin_user_edit_page(
+    request: Request,
+    user_id: int = Path(..., description="User ID"),
+    current_user: User = Depends(
+        require_menu_access("admin-users", FrontendType.ADMIN)
+    ),
+    db: Session = Depends(get_db),
+):
+    """
+    Render admin user edit form.
+    Super admin only (menu is in super_admin_only section).
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/admin-user-edit.html",
+        get_admin_context(request, current_user, user_id=user_id),
+    )
+
+
+# ============================================================================
+# USER MANAGEMENT ROUTES (Legacy - Redirects)
+# ============================================================================
+
+
+@router.get("/users", response_class=RedirectResponse, include_in_schema=False)
+async def admin_users_page_redirect():
+    """
+    Redirect old /admin/users to /admin/admin-users.
+    """
+    return RedirectResponse(url="/admin/admin-users", status_code=302)
+
+
+@router.get("/users/create", response_class=RedirectResponse, include_in_schema=False)
+async def admin_user_create_page_redirect():
+    """
+    Redirect old /admin/users/create to /admin/admin-users/create.
+    """
+    return RedirectResponse(url="/admin/admin-users/create", status_code=302)
+
+
+@router.get(
+    "/users/{user_id}", response_class=RedirectResponse, include_in_schema=False
+)
+async def admin_user_detail_page_redirect(
+    user_id: int = Path(..., description="User ID"),
+):
+    """
+    Redirect old /admin/users/{id} to /admin/admin-users/{id}.
+    """
+    return RedirectResponse(url=f"/admin/admin-users/{user_id}", status_code=302)
+
+
+@router.get(
+    "/users/{user_id}/edit", response_class=RedirectResponse, include_in_schema=False
+)
+async def admin_user_edit_page_redirect(
+    user_id: int = Path(..., description="User ID"),
+):
+    """
+    Redirect old /admin/users/{id}/edit to /admin/admin-users/{id}/edit.
+    """
+    return RedirectResponse(url=f"/admin/admin-users/{user_id}/edit", status_code=302)
+
+
+# ============================================================================
+# PLATFORM MANAGEMENT ROUTES (Multi-Platform Support)
+# ============================================================================
+
+
+@router.get("/platforms", response_class=HTMLResponse, include_in_schema=False)
+async def admin_platforms_list(
+    request: Request,
+    current_user: User = Depends(require_menu_access("platforms", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render platforms management page.
+    Shows all platforms (OMS, Loyalty, etc.) with their configuration.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/platforms.html",
+        get_admin_context(request, current_user),
+    )
+
+
+@router.get(
+    "/platforms/{platform_code}", response_class=HTMLResponse, include_in_schema=False
+)
+async def admin_platform_detail(
+    request: Request,
+    platform_code: str = Path(..., description="Platform code (oms, loyalty, etc.)"),
+    current_user: User = Depends(require_menu_access("platforms", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render platform detail page.
+    Shows platform configuration, marketing pages, and vendor defaults.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/platform-detail.html",
+        get_admin_context(request, current_user, platform_code=platform_code),
+    )
+
+
+@router.get(
+    "/platforms/{platform_code}/edit",
+    response_class=HTMLResponse,
+    include_in_schema=False,
+)
+async def admin_platform_edit(
+    request: Request,
+    platform_code: str = Path(..., description="Platform code"),
+    current_user: User = Depends(require_menu_access("platforms", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render platform edit form.
+    Allows editing platform settings, branding, and configuration.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/platform-edit.html",
+        get_admin_context(request, current_user, platform_code=platform_code),
+    )
+
+
+@router.get(
+    "/platforms/{platform_code}/menu-config",
+    response_class=HTMLResponse,
+    include_in_schema=False,
+)
+async def admin_platform_menu_config(
+    request: Request,
+    platform_code: str = Path(..., description="Platform code"),
+    current_user: User = Depends(require_menu_access("platforms", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render platform menu configuration page.
+    Super admin only - allows configuring which menu items are visible
+    for the platform's admin and vendor frontends.
+    """
+    if not current_user.is_super_admin:
+        return RedirectResponse(
+            url=f"/admin/platforms/{platform_code}", status_code=302
+        )
+
+    return templates.TemplateResponse(
+        "tenancy/admin/platform-menu-config.html",
+        get_admin_context(request, current_user, platform_code=platform_code),
+    )
+
+
+@router.get(
+    "/platforms/{platform_code}/modules",
+    response_class=HTMLResponse,
+    include_in_schema=False,
+)
+async def admin_platform_modules(
+    request: Request,
+    platform_code: str = Path(..., description="Platform code"),
+    current_user: User = Depends(require_menu_access("platforms", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render platform module configuration page.
+    Super admin only - allows enabling/disabling feature modules
+    for the platform.
+    """
+    if not current_user.is_super_admin:
+        return RedirectResponse(
+            url=f"/admin/platforms/{platform_code}", status_code=302
+        )
+
+    return templates.TemplateResponse(
+        "tenancy/admin/platform-modules.html",
+        get_admin_context(request, current_user, platform_code=platform_code),
+    )
+
+
+@router.get(
+    "/platforms/{platform_code}/modules/{module_code}",
+    response_class=HTMLResponse,
+    include_in_schema=False,
+)
+async def admin_module_info(
+    request: Request,
+    platform_code: str = Path(..., description="Platform code"),
+    module_code: str = Path(..., description="Module code"),
+    current_user: User = Depends(require_menu_access("platforms", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render module info/detail page.
+    Shows module details including features, menu items, dependencies,
+    and self-contained module information.
+    """
+    if not current_user.is_super_admin:
+        return RedirectResponse(
+            url=f"/admin/platforms/{platform_code}", status_code=302
+        )
+
+    return templates.TemplateResponse(
+        "tenancy/admin/module-info.html",
+        get_admin_context(
+            request, current_user, platform_code=platform_code, module_code=module_code
+        ),
+    )
+
+
+@router.get(
+    "/platforms/{platform_code}/modules/{module_code}/config",
+    response_class=HTMLResponse,
+    include_in_schema=False,
+)
+async def admin_module_config(
+    request: Request,
+    platform_code: str = Path(..., description="Platform code"),
+    module_code: str = Path(..., description="Module code"),
+    current_user: User = Depends(require_menu_access("platforms", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render module configuration page.
+    Allows configuring module-specific settings.
+    """
+    if not current_user.is_super_admin:
+        return RedirectResponse(
+            url=f"/admin/platforms/{platform_code}", status_code=302
+        )
+
+    return templates.TemplateResponse(
+        "tenancy/admin/module-config.html",
+        get_admin_context(
+            request, current_user, platform_code=platform_code, module_code=module_code
+        ),
+    )

app/modules/tenancy/routes/pages/vendor.py

@@ -0,0 +1,156 @@
+# app/modules/tenancy/routes/pages/vendor.py
+"""
+Tenancy Vendor Page Routes (HTML rendering).
+
+Vendor pages for authentication and account management:
+- Root redirect
+- Login
+- Team management
+- Profile
+- Settings
+"""
+
+from fastapi import APIRouter, Depends, Path, Request
+from fastapi.responses import HTMLResponse, RedirectResponse
+from sqlalchemy.orm import Session
+
+from app.api.deps import (
+    get_current_vendor_from_cookie_or_header,
+    get_current_vendor_optional,
+    get_db,
+)
+from app.modules.core.utils.page_context import get_vendor_context
+from app.templates_config import templates
+from models.database.user import User
+
+router = APIRouter()
+
+
+# ============================================================================
+# PUBLIC ROUTES (No Authentication Required)
+# ============================================================================
+
+
+@router.get("/{vendor_code}", response_class=RedirectResponse, include_in_schema=False)
+async def vendor_root_no_slash(vendor_code: str = Path(..., description="Vendor code")):
+    """
+    Redirect /vendor/{code} (no trailing slash) to login page.
+    Handles requests without trailing slash.
+    """
+    return RedirectResponse(url=f"/vendor/{vendor_code}/login", status_code=302)
+
+
+@router.get(
+    "/{vendor_code}/", response_class=RedirectResponse, include_in_schema=False
+)
+async def vendor_root(
+    vendor_code: str = Path(..., description="Vendor code"),
+    current_user: User | None = Depends(get_current_vendor_optional),
+):
+    """
+    Redirect /vendor/{code}/ based on authentication status.
+
+    - Authenticated vendor users -> /vendor/{code}/dashboard
+    - Unauthenticated users -> /vendor/{code}/login
+    """
+    if current_user:
+        return RedirectResponse(
+            url=f"/vendor/{vendor_code}/dashboard", status_code=302
+        )
+
+    return RedirectResponse(url=f"/vendor/{vendor_code}/login", status_code=302)
+
+
+@router.get(
+    "/{vendor_code}/login", response_class=HTMLResponse, include_in_schema=False
+)
+async def vendor_login_page(
+    request: Request,
+    vendor_code: str = Path(..., description="Vendor code"),
+    current_user: User | None = Depends(get_current_vendor_optional),
+):
+    """
+    Render vendor login page.
+
+    If user is already authenticated as vendor, redirect to dashboard.
+    Otherwise, show login form.
+
+    JavaScript will:
+    - Load vendor info via API
+    - Handle login form submission
+    - Redirect to dashboard on success
+    """
+    if current_user:
+        return RedirectResponse(
+            url=f"/vendor/{vendor_code}/dashboard", status_code=302
+        )
+
+    return templates.TemplateResponse(
+        "tenancy/vendor/login.html",
+        {
+            "request": request,
+            "vendor_code": vendor_code,
+        },
+    )
+
+
+# ============================================================================
+# AUTHENTICATED ROUTES (Vendor Users Only)
+# ============================================================================
+
+
+@router.get(
+    "/{vendor_code}/team", response_class=HTMLResponse, include_in_schema=False
+)
+async def vendor_team_page(
+    request: Request,
+    vendor_code: str = Path(..., description="Vendor code"),
+    current_user: User = Depends(get_current_vendor_from_cookie_or_header),
+    db: Session = Depends(get_db),
+):
+    """
+    Render team management page.
+    JavaScript loads team members via API.
+    """
+    return templates.TemplateResponse(
+        "tenancy/vendor/team.html",
+        get_vendor_context(request, db, current_user, vendor_code),
+    )
+
+
+@router.get(
+    "/{vendor_code}/profile", response_class=HTMLResponse, include_in_schema=False
+)
+async def vendor_profile_page(
+    request: Request,
+    vendor_code: str = Path(..., description="Vendor code"),
+    current_user: User = Depends(get_current_vendor_from_cookie_or_header),
+    db: Session = Depends(get_db),
+):
+    """
+    Render vendor profile page.
+    User can manage their personal profile information.
+    """
+    return templates.TemplateResponse(
+        "tenancy/vendor/profile.html",
+        get_vendor_context(request, db, current_user, vendor_code),
+    )
+
+
+@router.get(
+    "/{vendor_code}/settings", response_class=HTMLResponse, include_in_schema=False
+)
+async def vendor_settings_page(
+    request: Request,
+    vendor_code: str = Path(..., description="Vendor code"),
+    current_user: User = Depends(get_current_vendor_from_cookie_or_header),
+    db: Session = Depends(get_db),
+):
+    """
+    Render vendor settings page.
+    JavaScript loads settings via API.
+    """
+    return templates.TemplateResponse(
+        "tenancy/vendor/settings.html",
+        get_vendor_context(request, db, current_user, vendor_code),
+    )

app/modules/tenancy/services/__init__.py

@@ -3,11 +3,64 @@
 Tenancy module services.
 
 Business logic for platform, company, vendor, and admin user management.
-Currently services remain in app/services/ - this package is a placeholder
-for future migration.
+
+Services:
+- vendor_service: Vendor operations and product catalog
+- admin_service: Admin user and vendor management
+- admin_platform_service: Admin-platform assignments
+- vendor_team_service: Team member management
+- vendor_domain_service: Custom domain management
+- company_service: Company CRUD operations
+- platform_service: Platform operations
+- team_service: Team operations
 """
 
-# Services will be migrated here from app/services/
-# For now, import from legacy location if needed:
-# from app.services.vendor_service import vendor_service
-# from app.services.company_service import company_service
+from app.modules.tenancy.services.admin_platform_service import (
+    AdminPlatformService,
+    admin_platform_service,
+)
+from app.modules.tenancy.services.admin_service import AdminService, admin_service
+from app.modules.tenancy.services.company_service import CompanyService, company_service
+from app.modules.tenancy.services.platform_service import (
+    PlatformService,
+    PlatformStats,
+    platform_service,
+)
+from app.modules.tenancy.services.team_service import TeamService, team_service
+from app.modules.tenancy.services.vendor_domain_service import (
+    VendorDomainService,
+    vendor_domain_service,
+)
+from app.modules.tenancy.services.vendor_service import VendorService, vendor_service
+from app.modules.tenancy.services.vendor_team_service import (
+    VendorTeamService,
+    vendor_team_service,
+)
+
+__all__ = [
+    # Vendor
+    "VendorService",
+    "vendor_service",
+    # Admin
+    "AdminService",
+    "admin_service",
+    # Admin Platform
+    "AdminPlatformService",
+    "admin_platform_service",
+    # Vendor Team
+    "VendorTeamService",
+    "vendor_team_service",
+    # Vendor Domain
+    "VendorDomainService",
+    "vendor_domain_service",
+    # Company
+    "CompanyService",
+    "company_service",
+    # Platform
+    "PlatformService",
+    "PlatformStats",
+    "platform_service",
+    # Team
+    "TeamService",
+    "team_service",
+]

app/modules/tenancy/services/admin_platform_service.py

@@ -0,0 +1,663 @@
+# app/modules/tenancy/services/admin_platform_service.py
+"""
+Admin Platform service for managing admin-platform assignments.
+
+This module provides:
+- Assigning platform admins to platforms
+- Removing platform admin access
+- Listing platforms for an admin
+- Listing admins for a platform
+- Promoting/demoting super admin status
+"""
+
+import logging
+from datetime import UTC, datetime
+
+from sqlalchemy.orm import Session, joinedload
+
+from app.exceptions import ValidationException
+from app.modules.tenancy.exceptions import (
+    AdminOperationException,
+    CannotModifySelfException,
+)
+from models.database.admin_platform import AdminPlatform
+from models.database.platform import Platform
+from models.database.user import User
+
+logger = logging.getLogger(__name__)
+
+
+class AdminPlatformService:
+    """Service class for admin-platform assignment operations."""
+
+    # ============================================================================
+    # ADMIN-PLATFORM ASSIGNMENTS
+    # ============================================================================
+
+    def assign_admin_to_platform(
+        self,
+        db: Session,
+        admin_user_id: int,
+        platform_id: int,
+        assigned_by_user_id: int,
+    ) -> AdminPlatform:
+        """
+        Assign a platform admin to a platform.
+
+        Args:
+            db: Database session
+            admin_user_id: User ID of the admin to assign
+            platform_id: Platform ID to assign to
+            assigned_by_user_id: Super admin making the assignment
+
+        Returns:
+            AdminPlatform: The created assignment
+
+        Raises:
+            ValidationException: If user is not an admin or is a super admin
+            AdminOperationException: If assignment already exists
+        """
+        # Verify target user exists and is an admin
+        user = db.query(User).filter(User.id == admin_user_id).first()
+        if not user:
+            raise ValidationException("User not found", field="admin_user_id")
+        if not user.is_admin:
+            raise ValidationException(
+                "User must be an admin to be assigned to platforms",
+                field="admin_user_id",
+            )
+        if user.is_super_admin:
+            raise ValidationException(
+                "Super admins don't need platform assignments - they have access to all platforms",
+                field="admin_user_id",
+            )
+
+        # Verify platform exists
+        platform = db.query(Platform).filter(Platform.id == platform_id).first()
+        if not platform:
+            raise ValidationException("Platform not found", field="platform_id")
+
+        # Check if assignment already exists
+        existing = (
+            db.query(AdminPlatform)
+            .filter(
+                AdminPlatform.user_id == admin_user_id,
+                AdminPlatform.platform_id == platform_id,
+            )
+            .first()
+        )
+        if existing:
+            if existing.is_active:
+                raise AdminOperationException(
+                    operation="assign_admin_to_platform",
+                    reason=f"Admin already assigned to platform '{platform.code}'",
+                )
+            # Reactivate existing assignment
+            existing.is_active = True
+            existing.assigned_at = datetime.now(UTC)
+            existing.assigned_by_user_id = assigned_by_user_id
+            existing.updated_at = datetime.now(UTC)
+            db.flush()
+            db.refresh(existing)
+            logger.info(
+                f"Reactivated admin {admin_user_id} access to platform {platform.code} "
+                f"by admin {assigned_by_user_id}"
+            )
+            return existing
+
+        # Create new assignment
+        assignment = AdminPlatform(
+            user_id=admin_user_id,
+            platform_id=platform_id,
+            assigned_by_user_id=assigned_by_user_id,
+            is_active=True,
+        )
+        db.add(assignment)
+        db.flush()
+        db.refresh(assignment)
+
+        logger.info(
+            f"Assigned admin {admin_user_id} to platform {platform.code} "
+            f"by admin {assigned_by_user_id}"
+        )
+
+        return assignment
+
+    def remove_admin_from_platform(
+        self,
+        db: Session,
+        admin_user_id: int,
+        platform_id: int,
+        removed_by_user_id: int,
+    ) -> None:
+        """
+        Remove admin's access to a platform.
+
+        This soft-deletes by setting is_active=False for audit purposes.
+
+        Args:
+            db: Database session
+            admin_user_id: User ID of the admin to remove
+            platform_id: Platform ID to remove from
+            removed_by_user_id: Super admin making the removal
+
+        Raises:
+            ValidationException: If assignment doesn't exist
+        """
+        assignment = (
+            db.query(AdminPlatform)
+            .filter(
+                AdminPlatform.user_id == admin_user_id,
+                AdminPlatform.platform_id == platform_id,
+            )
+            .first()
+        )
+
+        if not assignment:
+            raise ValidationException(
+                "Admin is not assigned to this platform",
+                field="platform_id",
+            )
+
+        assignment.is_active = False
+        assignment.updated_at = datetime.now(UTC)
+        db.flush()
+
+        logger.info(
+            f"Removed admin {admin_user_id} from platform {platform_id} "
+            f"by admin {removed_by_user_id}"
+        )
+
+    def get_platforms_for_admin(
+        self,
+        db: Session,
+        admin_user_id: int,
+        include_inactive: bool = False,
+    ) -> list[Platform]:
+        """
+        Get all platforms an admin can access.
+
+        Args:
+            db: Database session
+            admin_user_id: User ID of the admin
+            include_inactive: Whether to include inactive assignments
+
+        Returns:
+            List of Platform objects the admin can access
+        """
+        query = (
+            db.query(Platform)
+            .join(AdminPlatform)
+            .filter(AdminPlatform.user_id == admin_user_id)
+        )
+
+        if not include_inactive:
+            query = query.filter(AdminPlatform.is_active == True)
+
+        return query.all()
+
+    def get_all_active_platforms(self, db: Session) -> list[Platform]:
+        """
+        Get all active platforms (for super admin access).
+
+        Args:
+            db: Database session
+
+        Returns:
+            List of all active Platform objects
+        """
+        return db.query(Platform).filter(Platform.is_active == True).all()
+
+    def get_platform_by_id(self, db: Session, platform_id: int) -> Platform | None:
+        """
+        Get a platform by ID.
+
+        Args:
+            db: Database session
+            platform_id: Platform ID
+
+        Returns:
+            Platform object or None if not found
+        """
+        return db.query(Platform).filter(Platform.id == platform_id).first()
+
+    def validate_admin_platform_access(
+        self,
+        user: User,
+        platform_id: int,
+    ) -> None:
+        """
+        Validate that an admin has access to a platform.
+
+        Args:
+            user: User object
+            platform_id: Platform ID to check
+
+        Raises:
+            InsufficientPermissionsException: If user doesn't have access
+        """
+        from app.modules.tenancy.exceptions import InsufficientPermissionsException
+
+        if not user.can_access_platform(platform_id):
+            raise InsufficientPermissionsException(
+                "You don't have access to this platform"
+            )
+
+    def get_admins_for_platform(
+        self,
+        db: Session,
+        platform_id: int,
+        include_inactive: bool = False,
+    ) -> list[User]:
+        """
+        Get all admins assigned to a platform.
+
+        Args:
+            db: Database session
+            platform_id: Platform ID
+            include_inactive: Whether to include inactive assignments
+
+        Returns:
+            List of User objects assigned to the platform
+        """
+        # Explicit join condition needed because AdminPlatform has two FKs to User
+        # (user_id and assigned_by_user_id)
+        query = (
+            db.query(User)
+            .join(AdminPlatform, AdminPlatform.user_id == User.id)
+            .filter(AdminPlatform.platform_id == platform_id)
+        )
+
+        if not include_inactive:
+            query = query.filter(AdminPlatform.is_active == True)
+
+        return query.all()
+
+    def get_admin_assignments(
+        self,
+        db: Session,
+        admin_user_id: int,
+    ) -> list[AdminPlatform]:
+        """
+        Get all platform assignments for an admin with platform details.
+
+        Args:
+            db: Database session
+            admin_user_id: User ID of the admin
+
+        Returns:
+            List of AdminPlatform objects with platform relationship loaded
+        """
+        return (
+            db.query(AdminPlatform)
+            .options(joinedload(AdminPlatform.platform))
+            .filter(
+                AdminPlatform.user_id == admin_user_id,
+                AdminPlatform.is_active == True,
+            )
+            .all()
+        )
+
+    # ============================================================================
+    # SUPER ADMIN MANAGEMENT
+    # ============================================================================
+
+    def toggle_super_admin(
+        self,
+        db: Session,
+        user_id: int,
+        is_super_admin: bool,
+        current_admin_id: int,
+    ) -> User:
+        """
+        Promote or demote a user to/from super admin.
+
+        When demoting from super admin, the admin will have no platform access
+        until explicitly assigned via assign_admin_to_platform.
+
+        Args:
+            db: Database session
+            user_id: User ID to modify
+            is_super_admin: True to promote, False to demote
+            current_admin_id: Super admin making the change
+
+        Returns:
+            Updated User object
+
+        Raises:
+            CannotModifySelfException: If trying to demote self
+            ValidationException: If user is not an admin
+        """
+        if user_id == current_admin_id and not is_super_admin:
+            raise CannotModifySelfException(
+                user_id=user_id,
+                operation="demote from super admin",
+            )
+
+        user = db.query(User).filter(User.id == user_id).first()
+        if not user:
+            raise ValidationException("User not found", field="user_id")
+        if not user.is_admin:
+            raise ValidationException(
+                "User must be an admin to be promoted to super admin",
+                field="user_id",
+            )
+
+        old_status = user.is_super_admin
+        user.is_super_admin = is_super_admin
+        user.updated_at = datetime.now(UTC)
+        db.flush()
+        db.refresh(user)
+
+        action = "promoted to" if is_super_admin else "demoted from"
+        logger.info(
+            f"User {user.username} {action} super admin by admin {current_admin_id}"
+        )
+
+        return user
+
+    def create_platform_admin(
+        self,
+        db: Session,
+        email: str,
+        username: str,
+        password: str,
+        platform_ids: list[int],
+        created_by_user_id: int,
+        first_name: str | None = None,
+        last_name: str | None = None,
+    ) -> tuple[User, list[AdminPlatform]]:
+        """
+        Create a new platform admin with platform assignments.
+
+        Args:
+            db: Database session
+            email: Admin email
+            username: Admin username
+            password: Admin password
+            platform_ids: List of platform IDs to assign
+            created_by_user_id: Super admin creating the account
+            first_name: Optional first name
+            last_name: Optional last name
+
+        Returns:
+            Tuple of (User, list of AdminPlatform assignments)
+        """
+        from middleware.auth import AuthManager
+
+        auth_manager = AuthManager()
+
+        # Check for existing user
+        existing = db.query(User).filter(
+            (User.email == email) | (User.username == username)
+        ).first()
+        if existing:
+            field = "email" if existing.email == email else "username"
+            raise ValidationException(f"{field.capitalize()} already exists", field=field)
+
+        # Create admin user
+        user = User(
+            email=email,
+            username=username,
+            hashed_password=auth_manager.hash_password(password),
+            first_name=first_name,
+            last_name=last_name,
+            role="admin",
+            is_active=True,
+            is_super_admin=False,  # Platform admin, not super admin
+        )
+        db.add(user)
+        db.flush()
+
+        # Create platform assignments
+        assignments = []
+        for platform_id in platform_ids:
+            assignment = AdminPlatform(
+                user_id=user.id,
+                platform_id=platform_id,
+                assigned_by_user_id=created_by_user_id,
+                is_active=True,
+            )
+            db.add(assignment)
+            assignments.append(assignment)
+
+        db.flush()
+        db.refresh(user)
+
+        logger.info(
+            f"Created platform admin {username} with access to platforms "
+            f"{platform_ids} by admin {created_by_user_id}"
+        )
+
+        return user, assignments
+
+
+    # ============================================================================
+    # ADMIN USER CRUD OPERATIONS
+    # ============================================================================
+
+    def list_admin_users(
+        self,
+        db: Session,
+        skip: int = 0,
+        limit: int = 100,
+        include_super_admins: bool = True,
+        is_active: bool | None = None,
+        search: str | None = None,
+    ) -> tuple[list[User], int]:
+        """
+        List all admin users with optional filtering.
+
+        Args:
+            db: Database session
+            skip: Number of records to skip
+            limit: Maximum records to return
+            include_super_admins: Whether to include super admins
+            is_active: Filter by active status
+            search: Search term for username/email/name
+
+        Returns:
+            Tuple of (list of User objects, total count)
+        """
+        query = db.query(User).filter(User.role == "admin")
+
+        if not include_super_admins:
+            query = query.filter(User.is_super_admin == False)
+
+        if is_active is not None:
+            query = query.filter(User.is_active == is_active)
+
+        if search:
+            search_term = f"%{search}%"
+            query = query.filter(
+                (User.username.ilike(search_term))
+                | (User.email.ilike(search_term))
+                | (User.first_name.ilike(search_term))
+                | (User.last_name.ilike(search_term))
+            )
+
+        total = query.count()
+
+        admins = (
+            query.options(joinedload(User.admin_platforms))
+            .offset(skip)
+            .limit(limit)
+            .all()
+        )
+
+        return admins, total
+
+    def get_admin_user(
+        self,
+        db: Session,
+        user_id: int,
+    ) -> User:
+        """
+        Get a single admin user by ID with platform assignments.
+
+        Args:
+            db: Database session
+            user_id: User ID
+
+        Returns:
+            User object with admin_platforms loaded
+
+        Raises:
+            ValidationException: If user not found or not an admin
+        """
+        admin = (
+            db.query(User)
+            .options(joinedload(User.admin_platforms))
+            .filter(User.id == user_id, User.role == "admin")
+            .first()
+        )
+
+        if not admin:
+            raise ValidationException("Admin user not found", field="user_id")
+
+        return admin
+
+    def create_super_admin(
+        self,
+        db: Session,
+        email: str,
+        username: str,
+        password: str,
+        created_by_user_id: int,
+        first_name: str | None = None,
+        last_name: str | None = None,
+    ) -> User:
+        """
+        Create a new super admin user.
+
+        Args:
+            db: Database session
+            email: Admin email
+            username: Admin username
+            password: Admin password
+            created_by_user_id: Super admin creating the account
+            first_name: Optional first name
+            last_name: Optional last name
+
+        Returns:
+            Created User object
+        """
+        from app.core.security import get_password_hash
+
+        # Check for existing user
+        existing = (
+            db.query(User)
+            .filter((User.email == email) | (User.username == username))
+            .first()
+        )
+        if existing:
+            field = "email" if existing.email == email else "username"
+            raise ValidationException(f"{field.capitalize()} already exists", field=field)
+
+        user = User(
+            email=email,
+            username=username,
+            hashed_password=get_password_hash(password),
+            first_name=first_name,
+            last_name=last_name,
+            role="admin",
+            is_super_admin=True,
+            is_active=True,
+        )
+        db.add(user)
+        db.flush()
+        db.refresh(user)
+
+        logger.info(
+            f"Created super admin {username} by admin {created_by_user_id}"
+        )
+
+        return user
+
+    def toggle_admin_status(
+        self,
+        db: Session,
+        user_id: int,
+        current_admin_id: int,
+    ) -> User:
+        """
+        Toggle admin user active status.
+
+        Args:
+            db: Database session
+            user_id: User ID to toggle
+            current_admin_id: Super admin making the change
+
+        Returns:
+            Updated User object
+
+        Raises:
+            CannotModifySelfException: If trying to deactivate self
+            ValidationException: If user not found or not an admin
+        """
+        if user_id == current_admin_id:
+            raise CannotModifySelfException(
+                user_id=user_id,
+                operation="deactivate own account",
+            )
+
+        admin = db.query(User).filter(User.id == user_id, User.role == "admin").first()
+
+        if not admin:
+            raise ValidationException("Admin user not found", field="user_id")
+
+        admin.is_active = not admin.is_active
+        admin.updated_at = datetime.now(UTC)
+        db.flush()
+        db.refresh(admin)
+
+        action = "activated" if admin.is_active else "deactivated"
+        logger.info(
+            f"Admin {admin.username} {action} by admin {current_admin_id}"
+        )
+
+        return admin
+
+    def delete_admin_user(
+        self,
+        db: Session,
+        user_id: int,
+        current_admin_id: int,
+    ) -> None:
+        """
+        Delete an admin user and their platform assignments.
+
+        Args:
+            db: Database session
+            user_id: User ID to delete
+            current_admin_id: Super admin making the deletion
+
+        Raises:
+            CannotModifySelfException: If trying to delete self
+            ValidationException: If user not found or not an admin
+        """
+        if user_id == current_admin_id:
+            raise CannotModifySelfException(
+                user_id=user_id,
+                operation="delete own account",
+            )
+
+        admin = db.query(User).filter(User.id == user_id, User.role == "admin").first()
+
+        if not admin:
+            raise ValidationException("Admin user not found", field="user_id")
+
+        username = admin.username
+
+        # Delete admin platform assignments first
+        db.query(AdminPlatform).filter(AdminPlatform.user_id == user_id).delete()
+
+        # Delete the admin user
+        db.delete(admin)
+        db.flush()
+
+        logger.info(f"Admin {username} deleted by admin {current_admin_id}")
+
+
+# Singleton instance
+admin_platform_service = AdminPlatformService()

app/modules/tenancy/services/admin_service.py

@@ -0,0 +1,895 @@
+# app/modules/tenancy/services/admin_service.py
+"""
+Admin service for managing users, vendors, and import jobs.
+
+This module provides classes and functions for:
+- User management and status control
+- Vendor creation with owner user generation
+- Vendor verification and activation
+- Marketplace import job monitoring
+- Platform statistics
+"""
+
+import logging
+import secrets
+import string
+from datetime import UTC, datetime
+
+from sqlalchemy import func, or_
+from sqlalchemy.orm import Session, joinedload
+
+from app.exceptions import ValidationException
+from app.modules.tenancy.exceptions import (
+    AdminOperationException,
+    CannotModifySelfException,
+    UserAlreadyExistsException,
+    UserCannotBeDeletedException,
+    UserNotFoundException,
+    UserRoleChangeException,
+    UserStatusChangeException,
+    VendorAlreadyExistsException,
+    VendorNotFoundException,
+    VendorVerificationException,
+)
+from middleware.auth import AuthManager
+from models.database.company import Company
+from app.modules.marketplace.models import MarketplaceImportJob
+from models.database.platform import Platform
+from models.database.user import User
+from models.database.vendor import Role, Vendor
+from app.modules.marketplace.schemas import MarketplaceImportJobResponse
+from models.schema.vendor import VendorCreate
+
+logger = logging.getLogger(__name__)
+
+
+class AdminService:
+    """Service class for admin operations following the application's service pattern."""
+
+    # ============================================================================
+    # USER MANAGEMENT
+    # ============================================================================
+
+    def get_all_users(self, db: Session, skip: int = 0, limit: int = 100) -> list[User]:
+        """Get paginated list of all users."""
+        try:
+            return db.query(User).offset(skip).limit(limit).all()
+        except Exception as e:
+            logger.error(f"Failed to retrieve users: {str(e)}")
+            raise AdminOperationException(
+                operation="get_all_users", reason="Database query failed"
+            )
+
+    def toggle_user_status(
+        self, db: Session, user_id: int, current_admin_id: int
+    ) -> tuple[User, str]:
+        """Toggle user active status."""
+        user = self._get_user_by_id_or_raise(db, user_id)
+
+        # Prevent self-modification
+        if user.id == current_admin_id:
+            raise CannotModifySelfException(user_id, "deactivate account")
+
+        # Check if user is another admin
+        if user.role == "admin" and user.id != current_admin_id:
+            raise UserStatusChangeException(
+                user_id=user_id,
+                current_status="admin",
+                attempted_action="toggle status",
+                reason="Cannot modify another admin user",
+            )
+
+        try:
+            original_status = user.is_active
+            user.is_active = not user.is_active
+            user.updated_at = datetime.now(UTC)
+            db.flush()
+            db.refresh(user)
+
+            status_action = "activated" if user.is_active else "deactivated"
+            message = f"User {user.username} has been {status_action}"
+
+            logger.info(f"{message} by admin {current_admin_id}")
+            return user, message
+
+        except Exception as e:
+            logger.error(f"Failed to toggle user {user_id} status: {str(e)}")
+            raise UserStatusChangeException(
+                user_id=user_id,
+                current_status="active" if original_status else "inactive",
+                attempted_action="toggle status",
+                reason="Database update failed",
+            )
+
+    def list_users(
+        self,
+        db: Session,
+        page: int = 1,
+        per_page: int = 10,
+        search: str | None = None,
+        role: str | None = None,
+        is_active: bool | None = None,
+    ) -> tuple[list[User], int, int]:
+        """
+        Get paginated list of users with filtering.
+
+        Returns:
+            Tuple of (users, total_count, total_pages)
+        """
+        import math
+
+        query = db.query(User)
+
+        # Apply filters
+        if search:
+            search_term = f"%{search.lower()}%"
+            query = query.filter(
+                or_(
+                    User.username.ilike(search_term),
+                    User.email.ilike(search_term),
+                    User.first_name.ilike(search_term),
+                    User.last_name.ilike(search_term),
+                )
+            )
+
+        if role:
+            query = query.filter(User.role == role)
+
+        if is_active is not None:
+            query = query.filter(User.is_active == is_active)
+
+        # Get total count
+        total = query.count()
+        pages = math.ceil(total / per_page) if total > 0 else 1
+
+        # Apply pagination
+        skip = (page - 1) * per_page
+        users = (
+            query.order_by(User.created_at.desc()).offset(skip).limit(per_page).all()
+        )
+
+        return users, total, pages
+
+    def create_user(
+        self,
+        db: Session,
+        email: str,
+        username: str,
+        password: str,
+        first_name: str | None = None,
+        last_name: str | None = None,
+        role: str = "customer",
+        current_admin_id: int | None = None,
+    ) -> User:
+        """
+        Create a new user.
+
+        Raises:
+            UserAlreadyExistsException: If email or username already exists
+        """
+        # Check if email exists
+        if db.query(User).filter(User.email == email).first():
+            raise UserAlreadyExistsException("Email already registered", field="email")
+
+        # Check if username exists
+        if db.query(User).filter(User.username == username).first():
+            raise UserAlreadyExistsException("Username already taken", field="username")
+
+        # Create user
+        auth_manager = AuthManager()
+        user = User(
+            email=email,
+            username=username,
+            hashed_password=auth_manager.hash_password(password),
+            first_name=first_name,
+            last_name=last_name,
+            role=role,
+            is_active=True,
+        )
+        db.add(user)
+        db.flush()
+        db.refresh(user)
+
+        logger.info(f"Admin {current_admin_id} created user {user.username}")
+        return user
+
+    def get_user_details(self, db: Session, user_id: int) -> User:
+        """
+        Get user with relationships loaded.
+
+        Raises:
+            UserNotFoundException: If user not found
+        """
+        user = (
+            db.query(User)
+            .options(
+                joinedload(User.owned_companies), joinedload(User.vendor_memberships)
+            )
+            .filter(User.id == user_id)
+            .first()
+        )
+
+        if not user:
+            raise UserNotFoundException(str(user_id))
+
+        return user
+
+    def update_user(
+        self,
+        db: Session,
+        user_id: int,
+        current_admin_id: int,
+        email: str | None = None,
+        username: str | None = None,
+        first_name: str | None = None,
+        last_name: str | None = None,
+        role: str | None = None,
+        is_active: bool | None = None,
+    ) -> User:
+        """
+        Update user information.
+
+        Raises:
+            UserNotFoundException: If user not found
+            UserAlreadyExistsException: If email/username already taken
+            UserRoleChangeException: If trying to change own admin role
+        """
+        user = self._get_user_by_id_or_raise(db, user_id)
+
+        # Prevent changing own admin status
+        if user.id == current_admin_id and role and role != "admin":
+            raise UserRoleChangeException(
+                user_id=user_id,
+                current_role=user.role,
+                target_role=role,
+                reason="Cannot change your own admin role",
+            )
+
+        # Check email uniqueness if changing
+        if email and email != user.email:
+            if db.query(User).filter(User.email == email).first():
+                raise UserAlreadyExistsException(
+                    "Email already registered", field="email"
+                )
+
+        # Check username uniqueness if changing
+        if username and username != user.username:
+            if db.query(User).filter(User.username == username).first():
+                raise UserAlreadyExistsException(
+                    "Username already taken", field="username"
+                )
+
+        # Update fields
+        if email is not None:
+            user.email = email
+        if username is not None:
+            user.username = username
+        if first_name is not None:
+            user.first_name = first_name
+        if last_name is not None:
+            user.last_name = last_name
+        if role is not None:
+            user.role = role
+        if is_active is not None:
+            user.is_active = is_active
+
+        user.updated_at = datetime.now(UTC)
+        db.flush()
+        db.refresh(user)
+
+        logger.info(f"Admin {current_admin_id} updated user {user.username}")
+        return user
+
+    def delete_user(self, db: Session, user_id: int, current_admin_id: int) -> str:
+        """
+        Delete a user.
+
+        Raises:
+            UserNotFoundException: If user not found
+            CannotModifySelfException: If trying to delete yourself
+            UserCannotBeDeletedException: If user owns companies
+        """
+        user = (
+            db.query(User)
+            .options(joinedload(User.owned_companies))
+            .filter(User.id == user_id)
+            .first()
+        )
+
+        if not user:
+            raise UserNotFoundException(str(user_id))
+
+        # Prevent deleting yourself
+        if user.id == current_admin_id:
+            raise CannotModifySelfException(user_id, "delete account")
+
+        # Prevent deleting users who own companies
+        if user.owned_companies:
+            raise UserCannotBeDeletedException(
+                user_id=user_id,
+                reason=f"User owns {len(user.owned_companies)} company(ies). Transfer ownership first.",
+                owned_count=len(user.owned_companies),
+            )
+
+        username = user.username
+        db.delete(user)
+
+        logger.info(f"Admin {current_admin_id} deleted user {username}")
+        return f"User {username} deleted successfully"
+
+    def search_users(
+        self,
+        db: Session,
+        query: str,
+        limit: int = 10,
+    ) -> list[dict]:
+        """
+        Search users by username or email.
+
+        Used for autocomplete in ownership transfer.
+        """
+        search_term = f"%{query.lower()}%"
+        users = (
+            db.query(User)
+            .filter(
+                or_(User.username.ilike(search_term), User.email.ilike(search_term))
+            )
+            .limit(limit)
+            .all()
+        )
+
+        return [
+            {
+                "id": user.id,
+                "username": user.username,
+                "email": user.email,
+                "is_active": user.is_active,
+            }
+            for user in users
+        ]
+
+    # ============================================================================
+    # VENDOR MANAGEMENT
+    # ============================================================================
+
+    def create_vendor(self, db: Session, vendor_data: VendorCreate) -> Vendor:
+        """
+        Create a vendor (storefront/brand) under an existing company.
+
+        The vendor inherits owner and contact information from its parent company.
+
+        Args:
+            db: Database session
+            vendor_data: Vendor creation data including company_id
+
+        Returns:
+            The created Vendor object with company relationship loaded
+
+        Raises:
+            ValidationException: If company not found or vendor code/subdomain exists
+            AdminOperationException: If creation fails
+        """
+        try:
+            # Validate company exists
+            company = (
+                db.query(Company).filter(Company.id == vendor_data.company_id).first()
+            )
+            if not company:
+                raise ValidationException(
+                    f"Company with ID {vendor_data.company_id} not found"
+                )
+
+            # Check if vendor code already exists
+            existing_vendor = (
+                db.query(Vendor)
+                .filter(
+                    func.upper(Vendor.vendor_code) == vendor_data.vendor_code.upper()
+                )
+                .first()
+            )
+            if existing_vendor:
+                raise VendorAlreadyExistsException(vendor_data.vendor_code)
+
+            # Check if subdomain already exists
+            existing_subdomain = (
+                db.query(Vendor)
+                .filter(func.lower(Vendor.subdomain) == vendor_data.subdomain.lower())
+                .first()
+            )
+            if existing_subdomain:
+                raise ValidationException(
+                    f"Subdomain '{vendor_data.subdomain}' is already taken"
+                )
+
+            # Create vendor linked to company
+            vendor = Vendor(
+                company_id=company.id,
+                vendor_code=vendor_data.vendor_code.upper(),
+                subdomain=vendor_data.subdomain.lower(),
+                name=vendor_data.name,
+                description=vendor_data.description,
+                letzshop_csv_url_fr=vendor_data.letzshop_csv_url_fr,
+                letzshop_csv_url_en=vendor_data.letzshop_csv_url_en,
+                letzshop_csv_url_de=vendor_data.letzshop_csv_url_de,
+                is_active=True,
+                is_verified=False,  # Needs verification by admin
+            )
+            db.add(vendor)
+            db.flush()  # Get vendor.id
+
+            # Create default roles for vendor
+            self._create_default_roles(db, vendor.id)
+
+            # Assign vendor to platforms if provided
+            if vendor_data.platform_ids:
+                from models.database.vendor_platform import VendorPlatform
+
+                for platform_id in vendor_data.platform_ids:
+                    # Verify platform exists
+                    platform = db.query(Platform).filter(Platform.id == platform_id).first()
+                    if platform:
+                        vendor_platform = VendorPlatform(
+                            vendor_id=vendor.id,
+                            platform_id=platform_id,
+                            is_active=True,
+                        )
+                        db.add(vendor_platform)
+                        logger.debug(
+                            f"Assigned vendor {vendor.vendor_code} to platform {platform.code}"
+                        )
+
+            db.flush()
+            db.refresh(vendor)
+
+            logger.info(
+                f"Vendor {vendor.vendor_code} created under company {company.name} (ID: {company.id})"
+            )
+
+            return vendor
+
+        except (VendorAlreadyExistsException, ValidationException):
+            raise
+        except Exception as e:
+            logger.error(f"Failed to create vendor: {str(e)}")
+            raise AdminOperationException(
+                operation="create_vendor",
+                reason=f"Failed to create vendor: {str(e)}",
+            )
+
+    def get_all_vendors(
+        self,
+        db: Session,
+        skip: int = 0,
+        limit: int = 100,
+        search: str | None = None,
+        is_active: bool | None = None,
+        is_verified: bool | None = None,
+    ) -> tuple[list[Vendor], int]:
+        """Get paginated list of all vendors with filtering."""
+        try:
+            # Eagerly load company relationship to avoid N+1 queries
+            query = db.query(Vendor).options(joinedload(Vendor.company))
+
+            # Apply search filter
+            if search:
+                search_term = f"%{search}%"
+                query = query.filter(
+                    or_(
+                        Vendor.name.ilike(search_term),
+                        Vendor.vendor_code.ilike(search_term),
+                        Vendor.subdomain.ilike(search_term),
+                    )
+                )
+
+            # Apply status filters
+            if is_active is not None:
+                query = query.filter(Vendor.is_active == is_active)
+            if is_verified is not None:
+                query = query.filter(Vendor.is_verified == is_verified)
+
+            # Get total count (without joinedload for performance)
+            count_query = db.query(Vendor)
+            if search:
+                search_term = f"%{search}%"
+                count_query = count_query.filter(
+                    or_(
+                        Vendor.name.ilike(search_term),
+                        Vendor.vendor_code.ilike(search_term),
+                        Vendor.subdomain.ilike(search_term),
+                    )
+                )
+            if is_active is not None:
+                count_query = count_query.filter(Vendor.is_active == is_active)
+            if is_verified is not None:
+                count_query = count_query.filter(Vendor.is_verified == is_verified)
+            total = count_query.count()
+
+            # Get paginated results
+            vendors = query.offset(skip).limit(limit).all()
+
+            return vendors, total
+        except Exception as e:
+            logger.error(f"Failed to retrieve vendors: {str(e)}")
+            raise AdminOperationException(
+                operation="get_all_vendors", reason="Database query failed"
+            )
+
+    def get_vendor_by_id(self, db: Session, vendor_id: int) -> Vendor:
+        """Get vendor by ID."""
+        return self._get_vendor_by_id_or_raise(db, vendor_id)
+
+    def verify_vendor(self, db: Session, vendor_id: int) -> tuple[Vendor, str]:
+        """Toggle vendor verification status."""
+        vendor = self._get_vendor_by_id_or_raise(db, vendor_id)
+
+        try:
+            original_status = vendor.is_verified
+            vendor.is_verified = not vendor.is_verified
+            vendor.updated_at = datetime.now(UTC)
+
+            if vendor.is_verified:
+                vendor.verified_at = datetime.now(UTC)
+
+            db.flush()
+            db.refresh(vendor)
+
+            status_action = "verified" if vendor.is_verified else "unverified"
+            message = f"Vendor {vendor.vendor_code} has been {status_action}"
+
+            logger.info(message)
+            return vendor, message
+
+        except Exception as e:
+            logger.error(f"Failed to verify vendor {vendor_id}: {str(e)}")
+            raise VendorVerificationException(
+                vendor_id=vendor_id,
+                reason="Database update failed",
+                current_verification_status=original_status,
+            )
+
+    def toggle_vendor_status(self, db: Session, vendor_id: int) -> tuple[Vendor, str]:
+        """Toggle vendor active status."""
+        vendor = self._get_vendor_by_id_or_raise(db, vendor_id)
+
+        try:
+            original_status = vendor.is_active
+            vendor.is_active = not vendor.is_active
+            vendor.updated_at = datetime.now(UTC)
+            db.flush()
+            db.refresh(vendor)
+
+            status_action = "activated" if vendor.is_active else "deactivated"
+            message = f"Vendor {vendor.vendor_code} has been {status_action}"
+
+            logger.info(message)
+            return vendor, message
+
+        except Exception as e:
+            logger.error(f"Failed to toggle vendor {vendor_id} status: {str(e)}")
+            raise AdminOperationException(
+                operation="toggle_vendor_status",
+                reason="Database update failed",
+                target_type="vendor",
+                target_id=str(vendor_id),
+            )
+
+    def delete_vendor(self, db: Session, vendor_id: int) -> str:
+        """Delete vendor and all associated data."""
+        vendor = self._get_vendor_by_id_or_raise(db, vendor_id)
+
+        try:
+            vendor_code = vendor.vendor_code
+
+            # TODO: Delete associated data in correct order
+            # - Delete orders
+            # - Delete customers
+            # - Delete products
+            # - Delete team members
+            # - Delete roles
+            # - Delete import jobs
+
+            db.delete(vendor)
+
+            logger.warning(f"Vendor {vendor_code} and all associated data deleted")
+            return f"Vendor {vendor_code} successfully deleted"
+
+        except Exception as e:
+            logger.error(f"Failed to delete vendor {vendor_id}: {str(e)}")
+            raise AdminOperationException(
+                operation="delete_vendor", reason="Database deletion failed"
+            )
+
+    def update_vendor(
+        self,
+        db: Session,
+        vendor_id: int,
+        vendor_update,  # VendorUpdate schema
+    ) -> Vendor:
+        """
+        Update vendor information (Admin only).
+
+        Can update:
+        - Vendor details (name, description, subdomain)
+        - Business contact info (contact_email, phone, etc.)
+        - Status (is_active, is_verified)
+
+        Cannot update:
+        - vendor_code (immutable)
+        - company_id (vendor cannot be moved between companies)
+
+        Note: Ownership is managed at the Company level.
+        Use company_service.transfer_ownership() for ownership changes.
+
+        Args:
+            db: Database session
+            vendor_id: ID of vendor to update
+            vendor_update: VendorUpdate schema with updated data
+
+        Returns:
+            Updated vendor object
+
+        Raises:
+            VendorNotFoundException: If vendor not found
+            ValidationException: If subdomain already taken
+        """
+        vendor = self._get_vendor_by_id_or_raise(db, vendor_id)
+
+        try:
+            # Get update data
+            update_data = vendor_update.model_dump(exclude_unset=True)
+
+            # Handle reset_contact_to_company flag
+            if update_data.pop("reset_contact_to_company", False):
+                # Reset all contact fields to None (inherit from company)
+                update_data["contact_email"] = None
+                update_data["contact_phone"] = None
+                update_data["website"] = None
+                update_data["business_address"] = None
+                update_data["tax_number"] = None
+
+            # Convert empty strings to None for contact fields (empty = inherit)
+            contact_fields = [
+                "contact_email",
+                "contact_phone",
+                "website",
+                "business_address",
+                "tax_number",
+            ]
+            for field in contact_fields:
+                if field in update_data and update_data[field] == "":
+                    update_data[field] = None
+
+            # Check subdomain uniqueness if changing
+            if (
+                "subdomain" in update_data
+                and update_data["subdomain"] != vendor.subdomain
+            ):
+                existing = (
+                    db.query(Vendor)
+                    .filter(
+                        Vendor.subdomain == update_data["subdomain"],
+                        Vendor.id != vendor_id,
+                    )
+                    .first()
+                )
+                if existing:
+                    raise ValidationException(
+                        f"Subdomain '{update_data['subdomain']}' is already taken"
+                    )
+
+            # Update vendor fields
+            for field, value in update_data.items():
+                setattr(vendor, field, value)
+
+            vendor.updated_at = datetime.now(UTC)
+
+            db.flush()
+            db.refresh(vendor)
+
+            logger.info(
+                f"Vendor {vendor_id} ({vendor.vendor_code}) updated by admin. "
+                f"Fields updated: {', '.join(update_data.keys())}"
+            )
+            return vendor
+
+        except ValidationException:
+            raise
+        except Exception as e:
+            logger.error(f"Failed to update vendor {vendor_id}: {str(e)}")
+            raise AdminOperationException(
+                operation="update_vendor", reason=f"Database update failed: {str(e)}"
+            )
+
+    # NOTE: Vendor ownership transfer is now handled at the Company level.
+    # Use company_service.transfer_ownership() instead.
+
+    # ============================================================================
+    # MARKETPLACE IMPORT JOBS
+    # ============================================================================
+
+    def get_marketplace_import_jobs(
+        self,
+        db: Session,
+        marketplace: str | None = None,
+        vendor_name: str | None = None,
+        status: str | None = None,
+        skip: int = 0,
+        limit: int = 100,
+    ) -> list[MarketplaceImportJobResponse]:
+        """Get filtered and paginated marketplace import jobs."""
+        try:
+            query = db.query(MarketplaceImportJob)
+
+            if marketplace:
+                query = query.filter(
+                    MarketplaceImportJob.marketplace.ilike(f"%{marketplace}%")
+                )
+            if vendor_name:
+                query = query.filter(
+                    MarketplaceImportJob.vendor_name.ilike(f"%{vendor_name}%")
+                )
+            if status:
+                query = query.filter(MarketplaceImportJob.status == status)
+
+            jobs = (
+                query.order_by(MarketplaceImportJob.created_at.desc())
+                .offset(skip)
+                .limit(limit)
+                .all()
+            )
+
+            return [self._convert_job_to_response(job) for job in jobs]
+
+        except Exception as e:
+            logger.error(f"Failed to retrieve marketplace import jobs: {str(e)}")
+            raise AdminOperationException(
+                operation="get_marketplace_import_jobs", reason="Database query failed"
+            )
+
+    # ============================================================================
+    # STATISTICS
+    # ============================================================================
+
+    def get_recent_vendors(self, db: Session, limit: int = 5) -> list[dict]:
+        """Get recently created vendors."""
+        try:
+            vendors = (
+                db.query(Vendor).order_by(Vendor.created_at.desc()).limit(limit).all()
+            )
+
+            return [
+                {
+                    "id": v.id,
+                    "vendor_code": v.vendor_code,
+                    "name": v.name,
+                    "subdomain": v.subdomain,
+                    "is_active": v.is_active,
+                    "is_verified": v.is_verified,
+                    "created_at": v.created_at,
+                }
+                for v in vendors
+            ]
+        except Exception as e:
+            logger.error(f"Failed to get recent vendors: {str(e)}")
+            return []
+
+    def get_recent_import_jobs(self, db: Session, limit: int = 10) -> list[dict]:
+        """Get recent marketplace import jobs."""
+        try:
+            jobs = (
+                db.query(MarketplaceImportJob)
+                .order_by(MarketplaceImportJob.created_at.desc())
+                .limit(limit)
+                .all()
+            )
+
+            return [
+                {
+                    "id": j.id,
+                    "marketplace": j.marketplace,
+                    "vendor_name": j.vendor_name,
+                    "status": j.status,
+                    "total_processed": j.total_processed or 0,
+                    "created_at": j.created_at,
+                }
+                for j in jobs
+            ]
+        except Exception as e:
+            logger.error(f"Failed to get recent import jobs: {str(e)}")
+            return []
+
+    # ============================================================================
+    # PRIVATE HELPER METHODS
+    # ============================================================================
+
+    def _get_user_by_id_or_raise(self, db: Session, user_id: int) -> User:
+        """Get user by ID or raise UserNotFoundException."""
+        user = db.query(User).filter(User.id == user_id).first()
+        if not user:
+            raise UserNotFoundException(str(user_id))
+        return user
+
+    def _get_vendor_by_id_or_raise(self, db: Session, vendor_id: int) -> Vendor:
+        """Get vendor by ID or raise VendorNotFoundException."""
+        vendor = (
+            db.query(Vendor)
+            .options(joinedload(Vendor.company).joinedload(Company.owner))
+            .filter(Vendor.id == vendor_id)
+            .first()
+        )
+        if not vendor:
+            raise VendorNotFoundException(str(vendor_id), identifier_type="id")
+        return vendor
+
+    def _generate_temp_password(self, length: int = 12) -> str:
+        """Generate secure temporary password."""
+        alphabet = string.ascii_letters + string.digits + "!@#$%^&*"
+        return "".join(secrets.choice(alphabet) for _ in range(length))
+
+    def _create_default_roles(self, db: Session, vendor_id: int):
+        """Create default roles for a new vendor."""
+        default_roles = [
+            {"name": "Owner", "permissions": ["*"]},  # Full access
+            {
+                "name": "Manager",
+                "permissions": [
+                    "products.*",
+                    "orders.*",
+                    "customers.view",
+                    "inventory.*",
+                    "team.view",
+                ],
+            },
+            {
+                "name": "Editor",
+                "permissions": [
+                    "products.view",
+                    "products.edit",
+                    "orders.view",
+                    "inventory.view",
+                ],
+            },
+            {
+                "name": "Viewer",
+                "permissions": [
+                    "products.view",
+                    "orders.view",
+                    "customers.view",
+                    "inventory.view",
+                ],
+            },
+        ]
+
+        for role_data in default_roles:
+            role = Role(
+                vendor_id=vendor_id,
+                name=role_data["name"],
+                permissions=role_data["permissions"],
+            )
+            db.add(role)
+
+    def _convert_job_to_response(
+        self, job: MarketplaceImportJob
+    ) -> MarketplaceImportJobResponse:
+        """Convert database model to response schema."""
+        return MarketplaceImportJobResponse(
+            job_id=job.id,
+            status=job.status,
+            marketplace=job.marketplace,
+            source_url=job.source_url,
+            vendor_id=job.vendor.id if job.vendor else None,
+            vendor_code=job.vendor.vendor_code if job.vendor else None,
+            vendor_name=job.vendor.name if job.vendor else None,
+            imported=job.imported_count or 0,
+            updated=job.updated_count or 0,
+            total_processed=job.total_processed or 0,
+            error_count=job.error_count or 0,
+            error_message=job.error_message,
+            created_at=job.created_at,
+            started_at=job.started_at,
+            completed_at=job.completed_at,
+        )
+
+
+# Create service instance
+admin_service = AdminService()

app/modules/tenancy/services/company_service.py

@@ -0,0 +1,330 @@
+# app/modules/tenancy/services/company_service.py
+"""
+Company service for managing company operations.
+
+This service handles CRUD operations for companies and company-vendor relationships.
+"""
+
+import logging
+import secrets
+import string
+
+from sqlalchemy import func, select
+from sqlalchemy.orm import Session, joinedload
+
+from app.modules.tenancy.exceptions import CompanyNotFoundException, UserNotFoundException
+from models.database.company import Company
+from models.database.user import User
+from models.schema.company import CompanyCreate, CompanyTransferOwnership, CompanyUpdate
+
+logger = logging.getLogger(__name__)
+
+
+class CompanyService:
+    """Service for managing companies."""
+
+    def __init__(self):
+        """Initialize company service."""
+
+    def create_company_with_owner(
+        self, db: Session, company_data: CompanyCreate
+    ) -> tuple[Company, User, str]:
+        """
+        Create a new company with an owner user account.
+
+        Args:
+            db: Database session
+            company_data: Company creation data
+
+        Returns:
+            Tuple of (company, owner_user, temporary_password)
+        """
+        # Import AuthManager for password hashing (same pattern as admin_service)
+        from middleware.auth import AuthManager
+
+        auth_manager = AuthManager()
+
+        # Check if owner email already exists
+        existing_user = db.execute(
+            select(User).where(User.email == company_data.owner_email)
+        ).scalar_one_or_none()
+
+        if existing_user:
+            # Use existing user as owner
+            owner_user = existing_user
+            temp_password = None
+            logger.info(f"Using existing user {owner_user.email} as company owner")
+        else:
+            # Generate temporary password for owner
+            temp_password = self._generate_temp_password()
+
+            # Create new owner user
+            owner_user = User(
+                username=company_data.owner_email.split("@")[0],
+                email=company_data.owner_email,
+                hashed_password=auth_manager.hash_password(temp_password),
+                role="user",
+                is_active=True,
+                is_email_verified=True,
+            )
+            db.add(owner_user)
+            db.flush()  # Get owner_user.id
+            logger.info(f"Created new owner user: {owner_user.email}")
+
+        # Create company
+        company = Company(
+            name=company_data.name,
+            description=company_data.description,
+            owner_user_id=owner_user.id,
+            contact_email=company_data.contact_email,
+            contact_phone=company_data.contact_phone,
+            website=company_data.website,
+            business_address=company_data.business_address,
+            tax_number=company_data.tax_number,
+            is_active=True,
+            is_verified=False,
+        )
+        db.add(company)
+        db.flush()
+        logger.info(f"Created company: {company.name} (ID: {company.id})")
+
+        return company, owner_user, temp_password
+
+    def get_company_by_id(self, db: Session, company_id: int) -> Company:
+        """
+        Get company by ID.
+
+        Args:
+            db: Database session
+            company_id: Company ID
+
+        Returns:
+            Company object
+
+        Raises:
+            CompanyNotFoundException: If company not found
+        """
+        company = (
+            db.execute(
+                select(Company)
+                .where(Company.id == company_id)
+                .options(joinedload(Company.vendors))
+            )
+            .unique()
+            .scalar_one_or_none()
+        )
+
+        if not company:
+            raise CompanyNotFoundException(company_id)
+
+        return company
+
+    def get_companies(
+        self,
+        db: Session,
+        skip: int = 0,
+        limit: int = 100,
+        search: str | None = None,
+        is_active: bool | None = None,
+        is_verified: bool | None = None,
+    ) -> tuple[list[Company], int]:
+        """
+        Get paginated list of companies with optional filters.
+
+        Args:
+            db: Database session
+            skip: Number of records to skip
+            limit: Maximum number of records to return
+            search: Search term for company name
+            is_active: Filter by active status
+            is_verified: Filter by verified status
+
+        Returns:
+            Tuple of (companies list, total count)
+        """
+        query = select(Company).options(joinedload(Company.vendors))
+
+        # Apply filters
+        if search:
+            query = query.where(Company.name.ilike(f"%{search}%"))
+        if is_active is not None:
+            query = query.where(Company.is_active == is_active)
+        if is_verified is not None:
+            query = query.where(Company.is_verified == is_verified)
+
+        # Get total count
+        count_query = select(func.count()).select_from(query.subquery())
+        total = db.execute(count_query).scalar()
+
+        # Apply pagination and order
+        query = query.order_by(Company.name).offset(skip).limit(limit)
+
+        # Use unique() when using joinedload with collections to avoid duplicate rows
+        companies = list(db.execute(query).scalars().unique().all())
+
+        return companies, total
+
+    def update_company(
+        self, db: Session, company_id: int, company_data: CompanyUpdate
+    ) -> Company:
+        """
+        Update company information.
+
+        Args:
+            db: Database session
+            company_id: Company ID
+            company_data: Updated company data
+
+        Returns:
+            Updated company
+
+        Raises:
+            CompanyNotFoundException: If company not found
+        """
+        company = self.get_company_by_id(db, company_id)
+
+        # Update only provided fields
+        update_data = company_data.model_dump(exclude_unset=True)
+        for field, value in update_data.items():
+            setattr(company, field, value)
+
+        db.flush()
+        logger.info(f"Updated company ID {company_id}")
+
+        return company
+
+    def delete_company(self, db: Session, company_id: int) -> None:
+        """
+        Delete a company and all associated vendors.
+
+        Args:
+            db: Database session
+            company_id: Company ID
+
+        Raises:
+            CompanyNotFoundException: If company not found
+        """
+        company = self.get_company_by_id(db, company_id)
+
+        # Due to cascade="all, delete-orphan", associated vendors will be deleted
+        db.delete(company)
+        db.flush()
+        logger.info(f"Deleted company ID {company_id} and associated vendors")
+
+    def toggle_verification(
+        self, db: Session, company_id: int, is_verified: bool
+    ) -> Company:
+        """
+        Toggle company verification status.
+
+        Args:
+            db: Database session
+            company_id: Company ID
+            is_verified: New verification status
+
+        Returns:
+            Updated company
+
+        Raises:
+            CompanyNotFoundException: If company not found
+        """
+        company = self.get_company_by_id(db, company_id)
+        company.is_verified = is_verified
+        db.flush()
+        logger.info(f"Company ID {company_id} verification set to {is_verified}")
+
+        return company
+
+    def toggle_active(self, db: Session, company_id: int, is_active: bool) -> Company:
+        """
+        Toggle company active status.
+
+        Args:
+            db: Database session
+            company_id: Company ID
+            is_active: New active status
+
+        Returns:
+            Updated company
+
+        Raises:
+            CompanyNotFoundException: If company not found
+        """
+        company = self.get_company_by_id(db, company_id)
+        company.is_active = is_active
+        db.flush()
+        logger.info(f"Company ID {company_id} active status set to {is_active}")
+
+        return company
+
+    def transfer_ownership(
+        self,
+        db: Session,
+        company_id: int,
+        transfer_data: CompanyTransferOwnership,
+    ) -> tuple[Company, User, User]:
+        """
+        Transfer company ownership to another user.
+
+        This is a critical operation that:
+        - Changes the company's owner_user_id
+        - All vendors under the company automatically inherit the new owner
+        - Logs the transfer for audit purposes
+
+        Args:
+            db: Database session
+            company_id: Company ID
+            transfer_data: Transfer ownership data
+
+        Returns:
+            Tuple of (company, old_owner, new_owner)
+
+        Raises:
+            CompanyNotFoundException: If company not found
+            UserNotFoundException: If new owner user not found
+            ValueError: If trying to transfer to current owner
+        """
+        # Get company
+        company = self.get_company_by_id(db, company_id)
+        old_owner_id = company.owner_user_id
+
+        # Get old owner
+        old_owner = db.execute(
+            select(User).where(User.id == old_owner_id)
+        ).scalar_one_or_none()
+        if not old_owner:
+            raise UserNotFoundException(str(old_owner_id))
+
+        # Get new owner
+        new_owner = db.execute(
+            select(User).where(User.id == transfer_data.new_owner_user_id)
+        ).scalar_one_or_none()
+        if not new_owner:
+            raise UserNotFoundException(str(transfer_data.new_owner_user_id))
+
+        # Prevent transferring to same owner
+        if old_owner_id == transfer_data.new_owner_user_id:
+            raise ValueError("Cannot transfer ownership to the current owner")
+
+        # Update company owner (vendors inherit ownership via company relationship)
+        company.owner_user_id = new_owner.id
+
+        db.flush()
+
+        logger.info(
+            f"Company {company.id} ({company.name}) ownership transferred "
+            f"from user {old_owner.id} ({old_owner.email}) "
+            f"to user {new_owner.id} ({new_owner.email}). "
+            f"Reason: {transfer_data.transfer_reason or 'Not specified'}"
+        )
+
+        return company, old_owner, new_owner
+
+    def _generate_temp_password(self, length: int = 12) -> str:
+        """Generate secure temporary password."""
+        alphabet = string.ascii_letters + string.digits + "!@#$%^&*"
+        return "".join(secrets.choice(alphabet) for _ in range(length))
+
+
+# Create service instance following the same pattern as other services
+company_service = CompanyService()

app/modules/tenancy/services/platform_service.py

@@ -0,0 +1,310 @@
+# app/modules/tenancy/services/platform_service.py
+"""
+Platform Service
+
+Business logic for platform management in the Multi-Platform CMS.
+
+Platforms represent different business offerings (OMS, Loyalty, Site Builder, Main Marketing).
+Each platform has its own:
+- Marketing pages (homepage, pricing, features)
+- Vendor defaults (about, terms, privacy)
+- Configuration and branding
+"""
+
+import logging
+from dataclasses import dataclass
+
+from sqlalchemy import func
+from sqlalchemy.orm import Session
+
+from app.modules.tenancy.exceptions import (
+    PlatformNotFoundException,
+)
+from app.modules.cms.models import ContentPage
+from models.database.platform import Platform
+from models.database.vendor_platform import VendorPlatform
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass
+class PlatformStats:
+    """Platform statistics."""
+
+    platform_id: int
+    platform_code: str
+    platform_name: str
+    vendor_count: int
+    platform_pages_count: int
+    vendor_defaults_count: int
+    vendor_overrides_count: int = 0
+    published_pages_count: int = 0
+    draft_pages_count: int = 0
+
+
+class PlatformService:
+    """Service for platform operations."""
+
+    @staticmethod
+    def get_platform_by_code(db: Session, code: str) -> Platform:
+        """
+        Get platform by code.
+
+        Args:
+            db: Database session
+            code: Platform code (oms, loyalty, main, etc.)
+
+        Returns:
+            Platform object
+
+        Raises:
+            PlatformNotFoundException: If platform not found
+        """
+        platform = db.query(Platform).filter(Platform.code == code).first()
+
+        if not platform:
+            raise PlatformNotFoundException(code)
+
+        return platform
+
+    @staticmethod
+    def get_platform_by_code_optional(db: Session, code: str) -> Platform | None:
+        """
+        Get platform by code, returns None if not found.
+
+        Args:
+            db: Database session
+            code: Platform code
+
+        Returns:
+            Platform object or None
+        """
+        return db.query(Platform).filter(Platform.code == code).first()
+
+    @staticmethod
+    def get_platform_by_id(db: Session, platform_id: int) -> Platform:
+        """
+        Get platform by ID.
+
+        Args:
+            db: Database session
+            platform_id: Platform ID
+
+        Returns:
+            Platform object
+
+        Raises:
+            PlatformNotFoundException: If platform not found
+        """
+        platform = db.query(Platform).filter(Platform.id == platform_id).first()
+
+        if not platform:
+            raise PlatformNotFoundException(str(platform_id))
+
+        return platform
+
+    @staticmethod
+    def list_platforms(
+        db: Session, include_inactive: bool = False
+    ) -> list[Platform]:
+        """
+        List all platforms.
+
+        Args:
+            db: Database session
+            include_inactive: Include inactive platforms
+
+        Returns:
+            List of Platform objects
+        """
+        query = db.query(Platform)
+
+        if not include_inactive:
+            query = query.filter(Platform.is_active == True)
+
+        return query.order_by(Platform.id).all()
+
+    @staticmethod
+    def get_vendor_count(db: Session, platform_id: int) -> int:
+        """
+        Get count of vendors on a platform.
+
+        Args:
+            db: Database session
+            platform_id: Platform ID
+
+        Returns:
+            Vendor count
+        """
+        return (
+            db.query(func.count(VendorPlatform.vendor_id))
+            .filter(VendorPlatform.platform_id == platform_id)
+            .scalar()
+            or 0
+        )
+
+    @staticmethod
+    def get_platform_pages_count(db: Session, platform_id: int) -> int:
+        """
+        Get count of platform marketing pages.
+
+        Args:
+            db: Database session
+            platform_id: Platform ID
+
+        Returns:
+            Platform pages count
+        """
+        return (
+            db.query(func.count(ContentPage.id))
+            .filter(
+                ContentPage.platform_id == platform_id,
+                ContentPage.vendor_id == None,
+                ContentPage.is_platform_page == True,
+            )
+            .scalar()
+            or 0
+        )
+
+    @staticmethod
+    def get_vendor_defaults_count(db: Session, platform_id: int) -> int:
+        """
+        Get count of vendor default pages.
+
+        Args:
+            db: Database session
+            platform_id: Platform ID
+
+        Returns:
+            Vendor defaults count
+        """
+        return (
+            db.query(func.count(ContentPage.id))
+            .filter(
+                ContentPage.platform_id == platform_id,
+                ContentPage.vendor_id == None,
+                ContentPage.is_platform_page == False,
+            )
+            .scalar()
+            or 0
+        )
+
+    @staticmethod
+    def get_vendor_overrides_count(db: Session, platform_id: int) -> int:
+        """
+        Get count of vendor override pages.
+
+        Args:
+            db: Database session
+            platform_id: Platform ID
+
+        Returns:
+            Vendor overrides count
+        """
+        return (
+            db.query(func.count(ContentPage.id))
+            .filter(
+                ContentPage.platform_id == platform_id,
+                ContentPage.vendor_id != None,
+            )
+            .scalar()
+            or 0
+        )
+
+    @staticmethod
+    def get_published_pages_count(db: Session, platform_id: int) -> int:
+        """
+        Get count of published pages on a platform.
+
+        Args:
+            db: Database session
+            platform_id: Platform ID
+
+        Returns:
+            Published pages count
+        """
+        return (
+            db.query(func.count(ContentPage.id))
+            .filter(
+                ContentPage.platform_id == platform_id,
+                ContentPage.is_published == True,
+            )
+            .scalar()
+            or 0
+        )
+
+    @staticmethod
+    def get_draft_pages_count(db: Session, platform_id: int) -> int:
+        """
+        Get count of draft pages on a platform.
+
+        Args:
+            db: Database session
+            platform_id: Platform ID
+
+        Returns:
+            Draft pages count
+        """
+        return (
+            db.query(func.count(ContentPage.id))
+            .filter(
+                ContentPage.platform_id == platform_id,
+                ContentPage.is_published == False,
+            )
+            .scalar()
+            or 0
+        )
+
+    @classmethod
+    def get_platform_stats(cls, db: Session, platform: Platform) -> PlatformStats:
+        """
+        Get comprehensive statistics for a platform.
+
+        Args:
+            db: Database session
+            platform: Platform object
+
+        Returns:
+            PlatformStats dataclass
+        """
+        return PlatformStats(
+            platform_id=platform.id,
+            platform_code=platform.code,
+            platform_name=platform.name,
+            vendor_count=cls.get_vendor_count(db, platform.id),
+            platform_pages_count=cls.get_platform_pages_count(db, platform.id),
+            vendor_defaults_count=cls.get_vendor_defaults_count(db, platform.id),
+            vendor_overrides_count=cls.get_vendor_overrides_count(db, platform.id),
+            published_pages_count=cls.get_published_pages_count(db, platform.id),
+            draft_pages_count=cls.get_draft_pages_count(db, platform.id),
+        )
+
+    @staticmethod
+    def update_platform(
+        db: Session, platform: Platform, update_data: dict
+    ) -> Platform:
+        """
+        Update platform fields.
+
+        Note: This method does NOT commit the transaction.
+        The caller (API endpoint) is responsible for committing.
+
+        Args:
+            db: Database session
+            platform: Platform to update
+            update_data: Dictionary of fields to update
+
+        Returns:
+            Updated Platform object (with pending changes)
+        """
+        for field, value in update_data.items():
+            if hasattr(platform, field):
+                setattr(platform, field, value)
+
+        logger.info(f"[PLATFORMS] Updated platform: {platform.code}")
+
+        return platform
+
+
+# Singleton instance for convenience
+platform_service = PlatformService()

app/modules/tenancy/services/team_service.py

@@ -0,0 +1,217 @@
+# app/modules/tenancy/services/team_service.py
+"""
+Team service for vendor team management.
+
+This module provides:
+- Team member invitation
+- Role management
+- Team member CRUD operations
+"""
+
+import logging
+from datetime import UTC, datetime
+from typing import Any
+
+from sqlalchemy.orm import Session
+
+from app.exceptions import ValidationException
+from models.database.user import User
+from models.database.vendor import Role, VendorUser
+
+logger = logging.getLogger(__name__)
+
+
+class TeamService:
+    """Service for team management operations."""
+
+    def get_team_members(
+        self, db: Session, vendor_id: int, current_user: User
+    ) -> list[dict[str, Any]]:
+        """
+        Get all team members for vendor.
+
+        Args:
+            db: Database session
+            vendor_id: Vendor ID
+            current_user: Current user
+
+        Returns:
+            List of team members
+        """
+        try:
+            vendor_users = (
+                db.query(VendorUser)
+                .filter(VendorUser.vendor_id == vendor_id, VendorUser.is_active == True)
+                .all()
+            )
+
+            members = []
+            for vu in vendor_users:
+                members.append(
+                    {
+                        "id": vu.user_id,
+                        "email": vu.user.email,
+                        "first_name": vu.user.first_name,
+                        "last_name": vu.user.last_name,
+                        "role": vu.role.name,
+                        "role_id": vu.role_id,
+                        "is_active": vu.is_active,
+                        "joined_at": vu.created_at,
+                    }
+                )
+
+            return members
+
+        except Exception as e:
+            logger.error(f"Error getting team members: {str(e)}")
+            raise ValidationException("Failed to retrieve team members")
+
+    def invite_team_member(
+        self, db: Session, vendor_id: int, invitation_data: dict, current_user: User
+    ) -> dict[str, Any]:
+        """
+        Invite a new team member.
+
+        Args:
+            db: Database session
+            vendor_id: Vendor ID
+            invitation_data: Invitation details
+            current_user: Current user
+
+        Returns:
+            Invitation result
+        """
+        try:
+            # TODO: Implement full invitation flow with email
+            # For now, return placeholder
+            return {
+                "message": "Team invitation feature coming soon",
+                "email": invitation_data.get("email"),
+                "role": invitation_data.get("role"),
+            }
+
+        except Exception as e:
+            logger.error(f"Error inviting team member: {str(e)}")
+            raise ValidationException("Failed to invite team member")
+
+    def update_team_member(
+        self,
+        db: Session,
+        vendor_id: int,
+        user_id: int,
+        update_data: dict,
+        current_user: User,
+    ) -> dict[str, Any]:
+        """
+        Update team member role or status.
+
+        Args:
+            db: Database session
+            vendor_id: Vendor ID
+            user_id: User ID to update
+            update_data: Update data
+            current_user: Current user
+
+        Returns:
+            Updated member info
+        """
+        try:
+            vendor_user = (
+                db.query(VendorUser)
+                .filter(
+                    VendorUser.vendor_id == vendor_id, VendorUser.user_id == user_id
+                )
+                .first()
+            )
+
+            if not vendor_user:
+                raise ValidationException("Team member not found")
+
+            # Update fields
+            if "role_id" in update_data:
+                vendor_user.role_id = update_data["role_id"]
+
+            if "is_active" in update_data:
+                vendor_user.is_active = update_data["is_active"]
+
+            vendor_user.updated_at = datetime.now(UTC)
+            db.flush()
+            db.refresh(vendor_user)
+
+            return {
+                "message": "Team member updated successfully",
+                "user_id": user_id,
+            }
+
+        except Exception as e:
+            logger.error(f"Error updating team member: {str(e)}")
+            raise ValidationException("Failed to update team member")
+
+    def remove_team_member(
+        self, db: Session, vendor_id: int, user_id: int, current_user: User
+    ) -> bool:
+        """
+        Remove team member from vendor.
+
+        Args:
+            db: Database session
+            vendor_id: Vendor ID
+            user_id: User ID to remove
+            current_user: Current user
+
+        Returns:
+            True if removed
+        """
+        try:
+            vendor_user = (
+                db.query(VendorUser)
+                .filter(
+                    VendorUser.vendor_id == vendor_id, VendorUser.user_id == user_id
+                )
+                .first()
+            )
+
+            if not vendor_user:
+                raise ValidationException("Team member not found")
+
+            # Soft delete
+            vendor_user.is_active = False
+            vendor_user.updated_at = datetime.now(UTC)
+
+            logger.info(f"Removed user {user_id} from vendor {vendor_id}")
+            return True
+
+        except Exception as e:
+            logger.error(f"Error removing team member: {str(e)}")
+            raise ValidationException("Failed to remove team member")
+
+    def get_vendor_roles(self, db: Session, vendor_id: int) -> list[dict[str, Any]]:
+        """
+        Get available roles for vendor.
+
+        Args:
+            db: Database session
+            vendor_id: Vendor ID
+
+        Returns:
+            List of roles
+        """
+        try:
+            roles = db.query(Role).filter(Role.vendor_id == vendor_id).all()
+
+            return [
+                {
+                    "id": role.id,
+                    "name": role.name,
+                    "permissions": role.permissions,
+                }
+                for role in roles
+            ]
+
+        except Exception as e:
+            logger.error(f"Error getting vendor roles: {str(e)}")
+            raise ValidationException("Failed to retrieve roles")
+
+
+# Create service instance
+team_service = TeamService()

app/modules/tenancy/services/vendor_domain_service.py

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

app/modules/tenancy/services/vendor_service.py

@@ -0,0 +1,708 @@
+# app/modules/tenancy/services/vendor_service.py
+"""
+Vendor service for managing vendor operations and product catalog.
+
+This module provides classes and functions for:
+- Vendor creation and management
+- Vendor access control and validation
+- Vendor product catalog operations
+- Vendor filtering and search
+"""
+
+import logging
+
+from sqlalchemy import func
+from sqlalchemy.orm import Session
+
+from app.exceptions import ValidationException
+from app.modules.catalog.exceptions import ProductAlreadyExistsException
+from app.modules.marketplace.exceptions import MarketplaceProductNotFoundException
+from app.modules.tenancy.exceptions import (
+    InvalidVendorDataException,
+    UnauthorizedVendorAccessException,
+    VendorAlreadyExistsException,
+    VendorNotFoundException,
+)
+from app.modules.marketplace.models import MarketplaceProduct
+from app.modules.catalog.models import Product
+from models.database.user import User
+from models.database.vendor import Vendor
+from app.modules.catalog.schemas import ProductCreate
+from models.schema.vendor import VendorCreate
+
+logger = logging.getLogger(__name__)
+
+
+class VendorService:
+    """Service class for vendor operations following the application's service pattern."""
+
+    def create_vendor(
+        self, db: Session, vendor_data: VendorCreate, current_user: User
+    ) -> Vendor:
+        """
+        Create a new vendor under a company.
+
+        DEPRECATED: This method is for self-service vendor creation by company owners.
+        For admin operations, use admin_service.create_vendor() instead.
+
+        The new architecture:
+        - Companies are the business entities with owners and contact info
+        - Vendors are storefronts/brands under companies
+        - The company_id is required in vendor_data
+
+        Args:
+            db: Database session
+            vendor_data: Vendor creation data (must include company_id)
+            current_user: User creating the vendor (must be company owner or admin)
+
+        Returns:
+            Created vendor object
+
+        Raises:
+            VendorAlreadyExistsException: If vendor code already exists
+            UnauthorizedVendorAccessException: If user is not company owner
+            InvalidVendorDataException: If vendor data is invalid
+        """
+        from models.database.company import Company
+
+        try:
+            # Validate company_id is provided
+            if not hasattr(vendor_data, "company_id") or not vendor_data.company_id:
+                raise InvalidVendorDataException(
+                    "company_id is required to create a vendor", field="company_id"
+                )
+
+            # Get company and verify ownership
+            company = (
+                db.query(Company).filter(Company.id == vendor_data.company_id).first()
+            )
+            if not company:
+                raise InvalidVendorDataException(
+                    f"Company with ID {vendor_data.company_id} not found",
+                    field="company_id",
+                )
+
+            # Check if user is company owner or admin
+            if (
+                current_user.role != "admin"
+                and company.owner_user_id != current_user.id
+            ):
+                raise UnauthorizedVendorAccessException(
+                    f"company-{vendor_data.company_id}", current_user.id
+                )
+
+            # Normalize vendor code to uppercase
+            normalized_vendor_code = vendor_data.vendor_code.upper()
+
+            # Check if vendor code already exists (case-insensitive check)
+            if self._vendor_code_exists(db, normalized_vendor_code):
+                raise VendorAlreadyExistsException(normalized_vendor_code)
+
+            # Create vendor linked to company
+            new_vendor = Vendor(
+                company_id=company.id,
+                vendor_code=normalized_vendor_code,
+                subdomain=vendor_data.subdomain.lower(),
+                name=vendor_data.name,
+                description=vendor_data.description,
+                letzshop_csv_url_fr=vendor_data.letzshop_csv_url_fr,
+                letzshop_csv_url_en=vendor_data.letzshop_csv_url_en,
+                letzshop_csv_url_de=vendor_data.letzshop_csv_url_de,
+                is_active=True,
+                is_verified=(current_user.role == "admin"),
+            )
+
+            db.add(new_vendor)
+            db.flush()  # Get ID without committing - endpoint handles commit
+
+            logger.info(
+                f"New vendor created: {new_vendor.vendor_code} under company {company.name} by {current_user.username}"
+            )
+            return new_vendor
+
+        except (
+            VendorAlreadyExistsException,
+            UnauthorizedVendorAccessException,
+            InvalidVendorDataException,
+        ):
+            raise  # Re-raise custom exceptions - endpoint handles rollback
+        except Exception as e:
+            logger.error(f"Error creating vendor: {str(e)}")
+            raise ValidationException("Failed to create vendor")
+
+    def get_vendors(
+        self,
+        db: Session,
+        current_user: User,
+        skip: int = 0,
+        limit: int = 100,
+        active_only: bool = True,
+        verified_only: bool = False,
+    ) -> tuple[list[Vendor], int]:
+        """
+        Get vendors with filtering.
+
+        Args:
+            db: Database session
+            current_user: Current user requesting vendors
+            skip: Number of records to skip
+            limit: Maximum number of records to return
+            active_only: Filter for active vendors only
+            verified_only: Filter for verified vendors only
+
+        Returns:
+            Tuple of (vendors_list, total_count)
+        """
+        try:
+            query = db.query(Vendor)
+
+            # Non-admin users can only see active and verified vendors, plus their own
+            if current_user.role != "admin":
+                # Get vendor IDs the user owns through companies
+                from models.database.company import Company
+
+                owned_vendor_ids = (
+                    db.query(Vendor.id)
+                    .join(Company)
+                    .filter(Company.owner_user_id == current_user.id)
+                    .subquery()
+                )
+                query = query.filter(
+                    (Vendor.is_active == True)
+                    & ((Vendor.is_verified == True) | (Vendor.id.in_(owned_vendor_ids)))
+                )
+            else:
+                # Admin can apply filters
+                if active_only:
+                    query = query.filter(Vendor.is_active == True)
+                if verified_only:
+                    query = query.filter(Vendor.is_verified == True)
+
+            total = query.count()
+            vendors = query.offset(skip).limit(limit).all()
+
+            return vendors, total
+
+        except Exception as e:
+            logger.error(f"Error getting vendors: {str(e)}")
+            raise ValidationException("Failed to retrieve vendors")
+
+    def get_vendor_by_code(
+        self, db: Session, vendor_code: str, current_user: User
+    ) -> Vendor:
+        """
+        Get vendor by vendor code with access control.
+
+        Args:
+            db: Database session
+            vendor_code: Vendor code to find
+            current_user: Current user requesting the vendor
+
+        Returns:
+            Vendor object
+
+        Raises:
+            VendorNotFoundException: If vendor not found
+            UnauthorizedVendorAccessException: If access denied
+        """
+        try:
+            vendor = (
+                db.query(Vendor)
+                .filter(func.upper(Vendor.vendor_code) == vendor_code.upper())
+                .first()
+            )
+
+            if not vendor:
+                raise VendorNotFoundException(vendor_code)
+
+            # Check access permissions
+            if not self._can_access_vendor(vendor, current_user):
+                raise UnauthorizedVendorAccessException(vendor_code, current_user.id)
+
+            return vendor
+
+        except (VendorNotFoundException, UnauthorizedVendorAccessException):
+            raise  # Re-raise custom exceptions
+        except Exception as e:
+            logger.error(f"Error getting vendor {vendor_code}: {str(e)}")
+            raise ValidationException("Failed to retrieve vendor")
+
+    def get_vendor_by_id(self, db: Session, vendor_id: int) -> Vendor:
+        """
+        Get vendor by ID (admin use - no access control).
+
+        Args:
+            db: Database session
+            vendor_id: Vendor ID to find
+
+        Returns:
+            Vendor object with company and owner loaded
+
+        Raises:
+            VendorNotFoundException: If vendor not found
+        """
+        from sqlalchemy.orm import joinedload
+
+        from models.database.company import Company
+
+        vendor = (
+            db.query(Vendor)
+            .options(joinedload(Vendor.company).joinedload(Company.owner))
+            .filter(Vendor.id == vendor_id)
+            .first()
+        )
+
+        if not vendor:
+            raise VendorNotFoundException(str(vendor_id), identifier_type="id")
+
+        return vendor
+
+    def get_vendor_by_id_optional(self, db: Session, vendor_id: int) -> Vendor | None:
+        """
+        Get vendor by ID, returns None if not found.
+
+        Args:
+            db: Database session
+            vendor_id: Vendor ID to find
+
+        Returns:
+            Vendor object or None if not found
+        """
+        return db.query(Vendor).filter(Vendor.id == vendor_id).first()
+
+    def get_active_vendor_by_code(self, db: Session, vendor_code: str) -> Vendor:
+        """
+        Get active vendor by vendor_code for public access (no auth required).
+
+        This method is specifically designed for public endpoints where:
+        - No authentication is required
+        - Only active vendors should be returned
+        - Inactive/disabled vendors are hidden
+
+        Args:
+            db: Database session
+            vendor_code: Vendor code (case-insensitive)
+
+        Returns:
+            Vendor object with company and owner loaded
+
+        Raises:
+            VendorNotFoundException: If vendor not found or inactive
+        """
+        from sqlalchemy.orm import joinedload
+
+        from models.database.company import Company
+
+        vendor = (
+            db.query(Vendor)
+            .options(joinedload(Vendor.company).joinedload(Company.owner))
+            .filter(
+                func.upper(Vendor.vendor_code) == vendor_code.upper(),
+                Vendor.is_active == True,
+            )
+            .first()
+        )
+
+        if not vendor:
+            logger.warning(f"Vendor not found or inactive: {vendor_code}")
+            raise VendorNotFoundException(vendor_code, identifier_type="code")
+
+        return vendor
+
+    def get_vendor_by_identifier(self, db: Session, identifier: str) -> Vendor:
+        """
+        Get vendor by ID or vendor_code (admin use - no access control).
+
+        Args:
+            db: Database session
+            identifier: Either vendor ID (int as string) or vendor_code (string)
+
+        Returns:
+            Vendor object with company and owner loaded
+
+        Raises:
+            VendorNotFoundException: If vendor not found
+        """
+        from sqlalchemy.orm import joinedload
+
+        from models.database.company import Company
+
+        # Try as integer ID first
+        try:
+            vendor_id = int(identifier)
+            return self.get_vendor_by_id(db, vendor_id)
+        except (ValueError, TypeError):
+            pass  # Not an integer, treat as vendor_code
+        except VendorNotFoundException:
+            pass  # ID not found, try as vendor_code
+
+        # Try as vendor_code (case-insensitive)
+        vendor = (
+            db.query(Vendor)
+            .options(joinedload(Vendor.company).joinedload(Company.owner))
+            .filter(func.upper(Vendor.vendor_code) == identifier.upper())
+            .first()
+        )
+
+        if not vendor:
+            raise VendorNotFoundException(identifier, identifier_type="code")
+
+        return vendor
+
+    def toggle_verification(self, db: Session, vendor_id: int) -> tuple[Vendor, str]:
+        """
+        Toggle vendor verification status.
+
+        Args:
+            db: Database session
+            vendor_id: Vendor ID
+
+        Returns:
+            Tuple of (updated vendor, status message)
+
+        Raises:
+            VendorNotFoundException: If vendor not found
+        """
+        vendor = self.get_vendor_by_id(db, vendor_id)
+        vendor.is_verified = not vendor.is_verified
+        # No commit here - endpoint handles transaction
+
+        status = "verified" if vendor.is_verified else "unverified"
+        logger.info(f"Vendor {vendor.vendor_code} {status}")
+        return vendor, f"Vendor {vendor.vendor_code} is now {status}"
+
+    def set_verification(
+        self, db: Session, vendor_id: int, is_verified: bool
+    ) -> tuple[Vendor, str]:
+        """
+        Set vendor verification status to specific value.
+
+        Args:
+            db: Database session
+            vendor_id: Vendor ID
+            is_verified: Target verification status
+
+        Returns:
+            Tuple of (updated vendor, status message)
+
+        Raises:
+            VendorNotFoundException: If vendor not found
+        """
+        vendor = self.get_vendor_by_id(db, vendor_id)
+        vendor.is_verified = is_verified
+        # No commit here - endpoint handles transaction
+
+        status = "verified" if is_verified else "unverified"
+        logger.info(f"Vendor {vendor.vendor_code} set to {status}")
+        return vendor, f"Vendor {vendor.vendor_code} is now {status}"
+
+    def toggle_status(self, db: Session, vendor_id: int) -> tuple[Vendor, str]:
+        """
+        Toggle vendor active status.
+
+        Args:
+            db: Database session
+            vendor_id: Vendor ID
+
+        Returns:
+            Tuple of (updated vendor, status message)
+
+        Raises:
+            VendorNotFoundException: If vendor not found
+        """
+        vendor = self.get_vendor_by_id(db, vendor_id)
+        vendor.is_active = not vendor.is_active
+        # No commit here - endpoint handles transaction
+
+        status = "active" if vendor.is_active else "inactive"
+        logger.info(f"Vendor {vendor.vendor_code} {status}")
+        return vendor, f"Vendor {vendor.vendor_code} is now {status}"
+
+    def set_status(
+        self, db: Session, vendor_id: int, is_active: bool
+    ) -> tuple[Vendor, str]:
+        """
+        Set vendor active status to specific value.
+
+        Args:
+            db: Database session
+            vendor_id: Vendor ID
+            is_active: Target active status
+
+        Returns:
+            Tuple of (updated vendor, status message)
+
+        Raises:
+            VendorNotFoundException: If vendor not found
+        """
+        vendor = self.get_vendor_by_id(db, vendor_id)
+        vendor.is_active = is_active
+        # No commit here - endpoint handles transaction
+
+        status = "active" if is_active else "inactive"
+        logger.info(f"Vendor {vendor.vendor_code} set to {status}")
+        return vendor, f"Vendor {vendor.vendor_code} is now {status}"
+
+    def add_product_to_catalog(
+        self, db: Session, vendor: Vendor, product: ProductCreate
+    ) -> Product:
+        """
+        Add existing product to vendor catalog with vendor -specific settings.
+
+        Args:
+            db: Database session
+            vendor : Vendor to add product to
+            product: Vendor product data
+
+        Returns:
+            Created Product object
+
+        Raises:
+            MarketplaceProductNotFoundException: If product not found
+            ProductAlreadyExistsException: If product already in vendor
+        """
+        try:
+            # Check if product exists
+            marketplace_product = self._get_product_by_id_or_raise(
+                db, product.marketplace_product_id
+            )
+
+            # Check if product already in vendor
+            if self._product_in_catalog(db, vendor.id, marketplace_product.id):
+                raise ProductAlreadyExistsException(
+                    vendor.vendor_code, product.marketplace_product_id
+                )
+
+            # Create vendor-product association
+            new_product = Product(
+                vendor_id=vendor.id,
+                marketplace_product_id=marketplace_product.id,
+                **product.model_dump(exclude={"marketplace_product_id"}),
+            )
+
+            db.add(new_product)
+            db.flush()  # Get ID without committing - endpoint handles commit
+
+            logger.info(
+                f"MarketplaceProduct {product.marketplace_product_id} added to vendor {vendor.vendor_code}"
+            )
+            return new_product
+
+        except (MarketplaceProductNotFoundException, ProductAlreadyExistsException):
+            raise  # Re-raise custom exceptions - endpoint handles rollback
+        except Exception as e:
+            logger.error(f"Error adding product to vendor : {str(e)}")
+            raise ValidationException("Failed to add product to vendor ")
+
+    def get_products(
+        self,
+        db: Session,
+        vendor: Vendor,
+        current_user: User,
+        skip: int = 0,
+        limit: int = 100,
+        active_only: bool = True,
+        featured_only: bool = False,
+    ) -> tuple[list[Product], int]:
+        """
+        Get products in vendor catalog with filtering.
+
+        Args:
+            db: Database session
+            vendor : Vendor to get products from
+            current_user: Current user requesting products
+            skip: Number of records to skip
+            limit: Maximum number of records to return
+            active_only: Filter for active products only
+            featured_only: Filter for featured products only
+
+        Returns:
+            Tuple of (products_list, total_count)
+
+        Raises:
+            UnauthorizedVendorAccessException: If vendor access denied
+        """
+        try:
+            # Check access permissions
+            if not self._can_access_vendor(vendor, current_user):
+                raise UnauthorizedVendorAccessException(
+                    vendor.vendor_code, current_user.id
+                )
+
+            # Query vendor products
+            query = db.query(Product).filter(Product.vendor_id == vendor.id)
+
+            if active_only:
+                query = query.filter(Product.is_active == True)
+            if featured_only:
+                query = query.filter(Product.is_featured == True)
+
+            total = query.count()
+            products = query.offset(skip).limit(limit).all()
+
+            return products, total
+
+        except UnauthorizedVendorAccessException:
+            raise  # Re-raise custom exceptions
+        except Exception as e:
+            logger.error(f"Error getting vendor products: {str(e)}")
+            raise ValidationException("Failed to retrieve vendor products")
+
+    # Private helper methods
+    def _vendor_code_exists(self, db: Session, vendor_code: str) -> bool:
+        """Check if vendor code already exists (case-insensitive)."""
+        return (
+            db.query(Vendor)
+            .filter(func.upper(Vendor.vendor_code) == vendor_code.upper())
+            .first()
+            is not None
+        )
+
+    def _get_product_by_id_or_raise(
+        self, db: Session, marketplace_product_id: int
+    ) -> MarketplaceProduct:
+        """Get marketplace product by database ID or raise exception."""
+        product = (
+            db.query(MarketplaceProduct)
+            .filter(MarketplaceProduct.id == marketplace_product_id)
+            .first()
+        )
+        if not product:
+            raise MarketplaceProductNotFoundException(str(marketplace_product_id))
+        return product
+
+    def _product_in_catalog(
+        self, db: Session, vendor_id: int, marketplace_product_id: int
+    ) -> bool:
+        """Check if product is already in vendor."""
+        return (
+            db.query(Product)
+            .filter(
+                Product.vendor_id == vendor_id,
+                Product.marketplace_product_id == marketplace_product_id,
+            )
+            .first()
+            is not None
+        )
+
+    def _can_access_vendor(self, vendor: Vendor, user: User) -> bool:
+        """Check if user can access vendor."""
+        # Admins can always access
+        if user.role == "admin":
+            return True
+
+        # Company owners can access their vendors
+        if vendor.company and vendor.company.owner_user_id == user.id:
+            return True
+
+        # Others can only access active and verified vendors
+        return vendor.is_active and vendor.is_verified
+
+    def _is_vendor_owner(self, vendor: Vendor, user: User) -> bool:
+        """Check if user is vendor owner (via company ownership)."""
+        return vendor.company and vendor.company.owner_user_id == user.id
+
+    def can_update_vendor(self, vendor: Vendor, user: User) -> bool:
+        """
+        Check if user has permission to update vendor settings.
+
+        Permission granted to:
+        - Admins (always)
+        - Vendor owners (company owner)
+        - Team members with appropriate role (owner role in VendorUser)
+        """
+        # Admins can always update
+        if user.role == "admin":
+            return True
+
+        # Check if user is vendor owner via company
+        if self._is_vendor_owner(vendor, user):
+            return True
+
+        # Check if user is owner via VendorUser relationship
+        if user.is_owner_of(vendor.id):
+            return True
+
+        return False
+
+    def update_vendor(
+        self,
+        db: Session,
+        vendor_id: int,
+        vendor_update,
+        current_user: User,
+    ) -> "Vendor":
+        """
+        Update vendor profile with permission checking.
+
+        Raises:
+            VendorNotFoundException: If vendor not found
+            InsufficientPermissionsException: If user lacks permission
+        """
+        from app.modules.tenancy.exceptions import InsufficientPermissionsException
+
+        vendor = self.get_vendor_by_id(db, vendor_id)
+
+        # Check permissions in service layer
+        if not self.can_update_vendor(vendor, current_user):
+            raise InsufficientPermissionsException(
+                required_permission="vendor:profile:update"
+            )
+
+        # Apply updates
+        update_data = vendor_update.model_dump(exclude_unset=True)
+        for field, value in update_data.items():
+            if hasattr(vendor, field):
+                setattr(vendor, field, value)
+
+        db.add(vendor)
+        db.flush()
+        db.refresh(vendor)
+        return vendor
+
+    def update_marketplace_settings(
+        self,
+        db: Session,
+        vendor_id: int,
+        marketplace_config: dict,
+        current_user: User,
+    ) -> dict:
+        """
+        Update marketplace integration settings with permission checking.
+
+        Raises:
+            VendorNotFoundException: If vendor not found
+            InsufficientPermissionsException: If user lacks permission
+        """
+        from app.modules.tenancy.exceptions import InsufficientPermissionsException
+
+        vendor = self.get_vendor_by_id(db, vendor_id)
+
+        # Check permissions in service layer
+        if not self.can_update_vendor(vendor, current_user):
+            raise InsufficientPermissionsException(
+                required_permission="vendor:settings:update"
+            )
+
+        # Update Letzshop URLs
+        if "letzshop_csv_url_fr" in marketplace_config:
+            vendor.letzshop_csv_url_fr = marketplace_config["letzshop_csv_url_fr"]
+        if "letzshop_csv_url_en" in marketplace_config:
+            vendor.letzshop_csv_url_en = marketplace_config["letzshop_csv_url_en"]
+        if "letzshop_csv_url_de" in marketplace_config:
+            vendor.letzshop_csv_url_de = marketplace_config["letzshop_csv_url_de"]
+
+        db.add(vendor)
+        db.flush()
+        db.refresh(vendor)
+
+        return {
+            "message": "Marketplace settings updated successfully",
+            "letzshop_csv_url_fr": vendor.letzshop_csv_url_fr,
+            "letzshop_csv_url_en": vendor.letzshop_csv_url_en,
+            "letzshop_csv_url_de": vendor.letzshop_csv_url_de,
+        }
+
+
+# Create service instance following the same pattern as other services
+vendor_service = VendorService()

app/modules/tenancy/services/vendor_team_service.py

@@ -0,0 +1,529 @@
+# app/modules/tenancy/services/vendor_team_service.py
+"""
+Vendor team management service.
+
+Handles:
+- Team member invitations
+- Invitation acceptance
+- Role assignment
+- Permission management
+"""
+
+import logging
+import secrets
+from datetime import datetime, timedelta
+from typing import Any
+
+from sqlalchemy.orm import Session
+
+from app.core.permissions import get_preset_permissions
+from app.modules.tenancy.exceptions import (
+    CannotRemoveOwnerException,
+    InvalidInvitationTokenException,
+    TeamInvitationAlreadyAcceptedException,
+    TeamMemberAlreadyExistsException,
+    UserNotFoundException,
+)
+from app.modules.billing.exceptions import TierLimitExceededException
+from middleware.auth import AuthManager
+from models.database.user import User
+from models.database.vendor import Role, Vendor, VendorUser, VendorUserType
+
+logger = logging.getLogger(__name__)
+
+
+class VendorTeamService:
+    """Service for managing vendor team members."""
+
+    def __init__(self):
+        self.auth_manager = AuthManager()
+
+    def invite_team_member(
+        self,
+        db: Session,
+        vendor: Vendor,
+        inviter: User,
+        email: str,
+        role_name: str,
+        custom_permissions: list[str] | None = None,
+    ) -> dict[str, Any]:
+        """
+        Invite a new team member to a vendor.
+
+        Creates:
+        1. User account (if doesn't exist)
+        2. Role (if custom permissions provided)
+        3. VendorUser relationship with invitation token
+
+        Args:
+            db: Database session
+            vendor: Vendor to invite to
+            inviter: User sending the invitation
+            email: Email of person to invite
+            role_name: Role name (manager, staff, support, etc.)
+            custom_permissions: Optional custom permissions (overrides preset)
+
+        Returns:
+            Dict with invitation details
+        """
+        try:
+            # Check team size limit from subscription
+            from app.modules.billing.services import subscription_service
+
+            subscription_service.check_team_limit(db, vendor.id)
+
+            # Check if user already exists
+            user = db.query(User).filter(User.email == email).first()
+
+            if user:
+                # Check if already a member
+                existing_membership = (
+                    db.query(VendorUser)
+                    .filter(
+                        VendorUser.vendor_id == vendor.id,
+                        VendorUser.user_id == user.id,
+                    )
+                    .first()
+                )
+
+                if existing_membership:
+                    if existing_membership.is_active:
+                        raise TeamMemberAlreadyExistsException(
+                            email, vendor.vendor_code
+                        )
+                    # Reactivate old membership
+                    existing_membership.is_active = (
+                        False  # Will be activated on acceptance
+                    )
+                    existing_membership.invitation_token = (
+                        self._generate_invitation_token()
+                    )
+                    existing_membership.invitation_sent_at = datetime.utcnow()
+                    existing_membership.invitation_accepted_at = None
+                    db.flush()
+
+                    logger.info(
+                        f"Re-invited user {email} to vendor {vendor.vendor_code}"
+                    )
+                    return {
+                        "invitation_token": existing_membership.invitation_token,
+                        "email": email,
+                        "existing_user": True,
+                    }
+            else:
+                # Create new user account (inactive until invitation accepted)
+                username = email.split("@")[0]
+                # Ensure unique username
+                base_username = username
+                counter = 1
+                while db.query(User).filter(User.username == username).first():
+                    username = f"{base_username}{counter}"
+                    counter += 1
+
+                # Generate temporary password (user will set real one on activation)
+                temp_password = secrets.token_urlsafe(16)
+
+                user = User(
+                    email=email,
+                    username=username,
+                    hashed_password=self.auth_manager.hash_password(temp_password),
+                    role="vendor",  # Platform role
+                    is_active=False,  # Will be activated when invitation accepted
+                    is_email_verified=False,
+                )
+                db.add(user)
+                db.flush()  # Get user.id
+
+                logger.info(f"Created new user account for invitation: {email}")
+
+            # Get or create role
+            role = self._get_or_create_role(
+                db=db,
+                vendor=vendor,
+                role_name=role_name,
+                custom_permissions=custom_permissions,
+            )
+
+            # Create vendor membership with invitation
+            invitation_token = self._generate_invitation_token()
+
+            vendor_user = VendorUser(
+                vendor_id=vendor.id,
+                user_id=user.id,
+                user_type=VendorUserType.TEAM_MEMBER.value,
+                role_id=role.id,
+                invited_by=inviter.id,
+                invitation_token=invitation_token,
+                invitation_sent_at=datetime.utcnow(),
+                is_active=False,  # Will be activated on acceptance
+            )
+            db.add(vendor_user)
+            db.flush()
+
+            logger.info(
+                f"Invited {email} to vendor {vendor.vendor_code} "
+                f"as {role_name} by {inviter.username}"
+            )
+
+            # TODO: Send invitation email
+            # self._send_invitation_email(email, vendor, invitation_token)
+
+            return {
+                "invitation_token": invitation_token,
+                "email": email,
+                "role": role_name,
+                "existing_user": user.is_active,
+            }
+
+        except (TeamMemberAlreadyExistsException, TierLimitExceededException):
+            raise
+        except Exception as e:
+            logger.error(f"Error inviting team member: {str(e)}")
+            raise
+
+    def accept_invitation(
+        self,
+        db: Session,
+        invitation_token: str,
+        password: str,
+        first_name: str | None = None,
+        last_name: str | None = None,
+    ) -> dict[str, Any]:
+        """
+        Accept a team invitation and activate account.
+
+        Args:
+            db: Database session
+            invitation_token: Invitation token from email
+            password: New password to set
+            first_name: Optional first name
+            last_name: Optional last name
+
+        Returns:
+            Dict with user and vendor info
+        """
+        try:
+            # Find invitation
+            vendor_user = (
+                db.query(VendorUser)
+                .filter(
+                    VendorUser.invitation_token == invitation_token,
+                )
+                .first()
+            )
+
+            if not vendor_user:
+                raise InvalidInvitationTokenException()
+
+            # Check if already accepted
+            if vendor_user.invitation_accepted_at is not None:
+                raise TeamInvitationAlreadyAcceptedException()
+
+            # Check token expiration (7 days)
+            if vendor_user.invitation_sent_at:
+                expiry_date = vendor_user.invitation_sent_at + timedelta(days=7)
+                if datetime.utcnow() > expiry_date:
+                    raise InvalidInvitationTokenException("Invitation has expired")
+
+            user = vendor_user.user
+            vendor = vendor_user.vendor
+
+            # Update user
+            user.hashed_password = self.auth_manager.hash_password(password)
+            user.is_active = True
+            user.is_email_verified = True
+            if first_name:
+                user.first_name = first_name
+            if last_name:
+                user.last_name = last_name
+
+            # Activate membership
+            vendor_user.is_active = True
+            vendor_user.invitation_accepted_at = datetime.utcnow()
+            vendor_user.invitation_token = None  # Clear token
+
+            db.flush()
+
+            logger.info(
+                f"User {user.email} accepted invitation to vendor {vendor.vendor_code}"
+            )
+
+            return {
+                "user": user,
+                "vendor": vendor,
+                "role": vendor_user.role.name if vendor_user.role else "member",
+            }
+
+        except (
+            InvalidInvitationTokenException,
+            TeamInvitationAlreadyAcceptedException,
+        ):
+            raise
+        except Exception as e:
+            logger.error(f"Error accepting invitation: {str(e)}")
+            raise
+
+    def remove_team_member(
+        self,
+        db: Session,
+        vendor: Vendor,
+        user_id: int,
+    ) -> bool:
+        """
+        Remove a team member from a vendor.
+
+        Cannot remove owner.
+
+        Args:
+            db: Database session
+            vendor: Vendor to remove from
+            user_id: User ID to remove
+
+        Returns:
+            True if removed
+        """
+        try:
+            vendor_user = (
+                db.query(VendorUser)
+                .filter(
+                    VendorUser.vendor_id == vendor.id,
+                    VendorUser.user_id == user_id,
+                )
+                .first()
+            )
+
+            if not vendor_user:
+                raise UserNotFoundException(str(user_id))
+
+            # Cannot remove owner
+            if vendor_user.is_owner:
+                raise CannotRemoveOwnerException(vendor.vendor_code)
+
+            # Soft delete - just deactivate
+            vendor_user.is_active = False
+
+            logger.info(f"Removed user {user_id} from vendor {vendor.vendor_code}")
+            return True
+
+        except (UserNotFoundException, CannotRemoveOwnerException):
+            raise
+        except Exception as e:
+            logger.error(f"Error removing team member: {str(e)}")
+            raise
+
+    def update_member_role(
+        self,
+        db: Session,
+        vendor: Vendor,
+        user_id: int,
+        new_role_name: str,
+        custom_permissions: list[str] | None = None,
+    ) -> VendorUser:
+        """
+        Update a team member's role.
+
+        Args:
+            db: Database session
+            vendor: Vendor
+            user_id: User ID
+            new_role_name: New role name
+            custom_permissions: Optional custom permissions
+
+        Returns:
+            Updated VendorUser
+        """
+        try:
+            vendor_user = (
+                db.query(VendorUser)
+                .filter(
+                    VendorUser.vendor_id == vendor.id,
+                    VendorUser.user_id == user_id,
+                )
+                .first()
+            )
+
+            if not vendor_user:
+                raise UserNotFoundException(str(user_id))
+
+            # Cannot change owner's role
+            if vendor_user.is_owner:
+                raise CannotRemoveOwnerException(vendor.vendor_code)
+
+            # Get or create new role
+            new_role = self._get_or_create_role(
+                db=db,
+                vendor=vendor,
+                role_name=new_role_name,
+                custom_permissions=custom_permissions,
+            )
+
+            vendor_user.role_id = new_role.id
+            db.flush()
+
+            logger.info(
+                f"Updated role for user {user_id} in vendor {vendor.vendor_code} "
+                f"to {new_role_name}"
+            )
+
+            return vendor_user
+
+        except (UserNotFoundException, CannotRemoveOwnerException):
+            raise
+        except Exception as e:
+            logger.error(f"Error updating member role: {str(e)}")
+            raise
+
+    def get_team_members(
+        self,
+        db: Session,
+        vendor: Vendor,
+        include_inactive: bool = False,
+    ) -> list[dict[str, Any]]:
+        """
+        Get all team members for a vendor.
+
+        Args:
+            db: Database session
+            vendor: Vendor
+            include_inactive: Include inactive members
+
+        Returns:
+            List of team member info
+        """
+        query = db.query(VendorUser).filter(
+            VendorUser.vendor_id == vendor.id,
+        )
+
+        if not include_inactive:
+            query = query.filter(VendorUser.is_active == True)
+
+        vendor_users = query.all()
+
+        members = []
+        for vu in vendor_users:
+            members.append(
+                {
+                    "id": vu.user.id,
+                    "email": vu.user.email,
+                    "username": vu.user.username,
+                    "first_name": vu.user.first_name,
+                    "last_name": vu.user.last_name,
+                    "full_name": vu.user.full_name,
+                    "user_type": vu.user_type,
+                    "role_name": vu.role.name if vu.role else "owner",
+                    "role_id": vu.role.id if vu.role else None,
+                    "permissions": vu.get_all_permissions(),
+                    "is_active": vu.is_active,
+                    "is_owner": vu.is_owner,
+                    "invitation_pending": vu.is_invitation_pending,
+                    "invited_at": vu.invitation_sent_at,
+                    "accepted_at": vu.invitation_accepted_at,
+                    "joined_at": vu.invitation_accepted_at or vu.created_at or vu.user.created_at,
+                }
+            )
+
+        return members
+
+    def get_vendor_roles(self, db: Session, vendor_id: int) -> list[dict[str, Any]]:
+        """
+        Get all roles for a vendor.
+
+        Creates default preset roles if none exist.
+
+        Args:
+            db: Database session
+            vendor_id: Vendor ID
+
+        Returns:
+            List of role info dicts
+        """
+        roles = db.query(Role).filter(Role.vendor_id == vendor_id).all()
+
+        # Create default roles if none exist
+        if not roles:
+            default_role_names = ["manager", "staff", "support", "viewer", "marketing"]
+            for role_name in default_role_names:
+                permissions = list(get_preset_permissions(role_name))
+                role = Role(
+                    vendor_id=vendor_id,
+                    name=role_name,
+                    permissions=permissions,
+                )
+                db.add(role)
+            db.flush()  # Flush to get IDs without committing (endpoint commits)
+            roles = db.query(Role).filter(Role.vendor_id == vendor_id).all()
+
+        return [
+            {
+                "id": role.id,
+                "name": role.name,
+                "permissions": role.permissions or [],
+                "vendor_id": role.vendor_id,
+                "created_at": role.created_at,
+                "updated_at": role.updated_at,
+            }
+            for role in roles
+        ]
+
+    # Private helper methods
+
+    def _generate_invitation_token(self) -> str:
+        """Generate a secure invitation token."""
+        return secrets.token_urlsafe(32)
+
+    def _get_or_create_role(
+        self,
+        db: Session,
+        vendor: Vendor,
+        role_name: str,
+        custom_permissions: list[str] | None = None,
+    ) -> Role:
+        """Get existing role or create new one with preset/custom permissions."""
+        # Try to find existing role with same name
+        role = (
+            db.query(Role)
+            .filter(
+                Role.vendor_id == vendor.id,
+                Role.name == role_name,
+            )
+            .first()
+        )
+
+        if role and custom_permissions is None:
+            # Use existing role
+            return role
+
+        # Determine permissions
+        if custom_permissions:
+            permissions = custom_permissions
+        else:
+            # Get preset permissions
+            permissions = list(get_preset_permissions(role_name))
+
+        if role:
+            # Update existing role with new permissions
+            role.permissions = permissions
+        else:
+            # Create new role
+            role = Role(
+                vendor_id=vendor.id,
+                name=role_name,
+                permissions=permissions,
+            )
+            db.add(role)
+
+        db.flush()
+        return role
+
+    def _send_invitation_email(self, email: str, vendor: Vendor, token: str):
+        """Send invitation email (TODO: implement)."""
+        # TODO: Implement email sending
+        # Should include:
+        # - Link to accept invitation: /vendor/invitation/accept?token={token}
+        # - Vendor name
+        # - Inviter name
+        # - Expiry date
+
+
+# Create service instance
+vendor_team_service = VendorTeamService()

app/modules/tenancy/static/admin/js/admin-user-detail.js

@@ -0,0 +1,196 @@
+// noqa: js-006 - async init pattern is safe, loadData has try/catch
+// static/admin/js/admin-user-detail.js
+
+// Create custom logger for admin user detail
+const adminUserDetailLog = window.LogConfig.createLogger('ADMIN-USER-DETAIL');
+
+function adminUserDetailPage() {
+    return {
+        // Inherit base layout functionality from init-alpine.js
+        ...data(),
+
+        // Admin user detail page specific state
+        currentPage: 'admin-users',
+        adminUser: null,
+        loading: false,
+        saving: false,
+        error: null,
+        userId: null,
+        currentUserId: null,
+
+        // Initialize
+        async init() {
+            adminUserDetailLog.info('=== ADMIN USER DETAIL PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._adminUserDetailInitialized) {
+                adminUserDetailLog.warn('Admin user detail page already initialized, skipping...');
+                return;
+            }
+            window._adminUserDetailInitialized = true;
+
+            // Get current user ID
+            this.currentUserId = this.adminProfile?.id || null;
+
+            // Get user ID from URL
+            const path = window.location.pathname;
+            const match = path.match(/\/admin\/admin-users\/(\d+)$/);
+
+            if (match) {
+                this.userId = match[1];
+                adminUserDetailLog.info('Viewing admin user:', this.userId);
+                await this.loadAdminUser();
+            } else {
+                adminUserDetailLog.error('No user ID in URL');
+                this.error = 'Invalid admin user URL';
+                Utils.showToast('Invalid admin user URL', 'error');
+            }
+
+            adminUserDetailLog.info('=== ADMIN USER DETAIL PAGE INITIALIZATION COMPLETE ===');
+        },
+
+        // Load admin user data
+        async loadAdminUser() {
+            adminUserDetailLog.info('Loading admin user details...');
+            this.loading = true;
+            this.error = null;
+
+            try {
+                const url = `/admin/admin-users/${this.userId}`;
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.get(url);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+                window.LogConfig.logPerformance('Load Admin User Details', duration);
+
+                // Transform API response to expected format
+                this.adminUser = {
+                    ...response,
+                    platforms: (response.platform_assignments || []).map(pa => ({
+                        id: pa.platform_id,
+                        code: pa.platform_code,
+                        name: pa.platform_name
+                    })),
+                    full_name: [response.first_name, response.last_name].filter(Boolean).join(' ') || null
+                };
+
+                adminUserDetailLog.info(`Admin user loaded in ${duration}ms`, {
+                    id: this.adminUser.id,
+                    username: this.adminUser.username,
+                    is_super_admin: this.adminUser.is_super_admin,
+                    is_active: this.adminUser.is_active
+                });
+                adminUserDetailLog.debug('Full admin user data:', this.adminUser);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load Admin User Details');
+                this.error = error.message || 'Failed to load admin user details';
+                Utils.showToast('Failed to load admin user details', 'error');
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // Format date
+        formatDate(dateString) {
+            if (!dateString) {
+                return '-';
+            }
+            return Utils.formatDate(dateString);
+        },
+
+        // Toggle admin user status
+        async toggleStatus() {
+            const action = this.adminUser.is_active ? 'deactivate' : 'activate';
+            adminUserDetailLog.info(`Toggle status: ${action}`);
+
+            // Prevent self-deactivation
+            if (this.adminUser.id === this.currentUserId) {
+                Utils.showToast('You cannot deactivate your own account', 'error');
+                return;
+            }
+
+            if (!confirm(`Are you sure you want to ${action} "${this.adminUser.username}"?`)) {
+                adminUserDetailLog.info('Status toggle cancelled by user');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/admin-users/${this.userId}/status`;
+                window.LogConfig.logApiCall('PUT', url, null, 'request');
+
+                const response = await apiClient.put(url);
+
+                window.LogConfig.logApiCall('PUT', url, response, 'response');
+
+                this.adminUser.is_active = response.is_active;
+                Utils.showToast(`Admin user ${action}d successfully`, 'success');
+                adminUserDetailLog.info(`Admin user ${action}d successfully`);
+
+            } catch (error) {
+                window.LogConfig.logError(error, `Toggle Status (${action})`);
+                Utils.showToast(error.message || `Failed to ${action} admin user`, 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // Delete admin user
+        async deleteAdminUser() {
+            adminUserDetailLog.info('Delete admin user requested:', this.userId);
+
+            // Prevent self-deletion
+            if (this.adminUser.id === this.currentUserId) {
+                Utils.showToast('You cannot delete your own account', 'error');
+                return;
+            }
+
+            if (!confirm(`Are you sure you want to delete admin user "${this.adminUser.username}"?\n\nThis action cannot be undone.`)) {
+                adminUserDetailLog.info('Delete cancelled by user');
+                return;
+            }
+
+            // Second confirmation for safety
+            if (!confirm(`FINAL CONFIRMATION\n\nAre you absolutely sure you want to delete "${this.adminUser.username}"?`)) {
+                adminUserDetailLog.info('Delete cancelled by user (second confirmation)');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/admin-users/${this.userId}`;
+                window.LogConfig.logApiCall('DELETE', url, null, 'request');
+
+                await apiClient.delete(url);
+
+                window.LogConfig.logApiCall('DELETE', url, null, 'response');
+
+                Utils.showToast('Admin user deleted successfully', 'success');
+                adminUserDetailLog.info('Admin user deleted successfully');
+
+                // Redirect to admin users list
+                setTimeout(() => window.location.href = '/admin/admin-users', 1500);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Delete Admin User');
+                Utils.showToast(error.message || 'Failed to delete admin user', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // Refresh admin user data
+        async refresh() {
+            adminUserDetailLog.info('=== ADMIN USER REFRESH TRIGGERED ===');
+            await this.loadAdminUser();
+            Utils.showToast('Admin user details refreshed', 'success');
+            adminUserDetailLog.info('=== ADMIN USER REFRESH COMPLETE ===');
+        }
+    };
+}
+
+adminUserDetailLog.info('Admin user detail module loaded');

app/modules/tenancy/static/admin/js/admin-user-edit.js

@@ -0,0 +1,339 @@
+// static/admin/js/admin-user-edit.js
+
+// Create custom logger for admin user edit
+const adminUserEditLog = window.LogConfig.createLogger('ADMIN-USER-EDIT');
+
+function adminUserEditPage() {
+    return {
+        // Inherit base layout functionality from init-alpine.js
+        ...data(),
+
+        // Admin user edit page specific state
+        currentPage: 'admin-users',
+        loading: false,
+        adminUser: null,
+        platforms: [],
+        errors: {},
+        saving: false,
+        userId: null,
+        currentUserId: null,
+
+        // Platform assignment state
+        showPlatformModal: false,
+        availablePlatforms: [],
+        selectedPlatformId: null,
+
+        // Confirmation modal state
+        showRemovePlatformModal: false,
+        platformToRemove: null,
+
+        // Initialize
+        async init() {
+            adminUserEditLog.info('=== ADMIN USER EDIT PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._adminUserEditInitialized) {
+                adminUserEditLog.warn('Admin user edit page already initialized, skipping...');
+                return;
+            }
+            window._adminUserEditInitialized = true;
+
+            // Get current user ID
+            this.currentUserId = this.adminProfile?.id || null;
+
+            // Get user ID from URL
+            const path = window.location.pathname;
+            const match = path.match(/\/admin\/admin-users\/(\d+)\/edit/);
+
+            if (match) {
+                this.userId = parseInt(match[1], 10);
+                adminUserEditLog.info('Editing admin user:', this.userId);
+                await this.loadAdminUser();
+                await this.loadAllPlatforms();
+            } else {
+                adminUserEditLog.error('No user ID in URL');
+                Utils.showToast('Invalid admin user URL', 'error');
+                setTimeout(() => window.location.href = '/admin/admin-users', 2000);
+            }
+
+            adminUserEditLog.info('=== ADMIN USER EDIT PAGE INITIALIZATION COMPLETE ===');
+        },
+
+        // Load admin user data
+        async loadAdminUser() {
+            adminUserEditLog.info('Loading admin user data...');
+            this.loading = true;
+
+            try {
+                const url = `/admin/admin-users/${this.userId}`;
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.get(url);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+                window.LogConfig.logPerformance('Load Admin User', duration);
+
+                // Transform API response
+                this.adminUser = {
+                    ...response,
+                    platforms: (response.platform_assignments || []).map(pa => ({
+                        id: pa.platform_id,
+                        code: pa.platform_code,
+                        name: pa.platform_name
+                    })),
+                    full_name: [response.first_name, response.last_name].filter(Boolean).join(' ') || null
+                };
+
+                adminUserEditLog.info(`Admin user loaded in ${duration}ms`, {
+                    id: this.adminUser.id,
+                    username: this.adminUser.username,
+                    is_super_admin: this.adminUser.is_super_admin
+                });
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load Admin User');
+                Utils.showToast('Failed to load admin user', 'error');
+                setTimeout(() => window.location.href = '/admin/admin-users', 2000);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // Load all platforms for assignment
+        async loadAllPlatforms() {
+            try {
+                adminUserEditLog.debug('Loading all platforms...');
+                const response = await apiClient.get('/admin/platforms');
+                this.platforms = response.platforms || response.items || [];
+                adminUserEditLog.debug(`Loaded ${this.platforms.length} platforms`);
+            } catch (error) {
+                adminUserEditLog.error('Failed to load platforms:', error);
+                this.platforms = [];
+            }
+        },
+
+        // Get available platforms (not yet assigned)
+        get availablePlatformsForAssignment() {
+            if (!this.adminUser || this.adminUser.is_super_admin) return [];
+            const assignedIds = (this.adminUser.platforms || []).map(p => p.id);
+            return this.platforms.filter(p => !assignedIds.includes(p.id));
+        },
+
+        // Format date
+        formatDate(dateString) {
+            if (!dateString) {
+                return '-';
+            }
+            return Utils.formatDate(dateString);
+        },
+
+        // Toggle super admin status
+        async toggleSuperAdmin() {
+            const newStatus = !this.adminUser.is_super_admin;
+            const action = newStatus ? 'promote to' : 'demote from';
+            adminUserEditLog.info(`Toggle super admin: ${action}`);
+
+            // Prevent self-demotion
+            if (this.adminUser.id === this.currentUserId && !newStatus) {
+                Utils.showToast('You cannot demote yourself from super admin', 'error');
+                return;
+            }
+
+            if (!confirm(`Are you sure you want to ${action} super admin "${this.adminUser.username}"?`)) {
+                adminUserEditLog.info('Super admin toggle cancelled by user');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/admin-users/${this.userId}/super-admin`;
+                window.LogConfig.logApiCall('PUT', url, { is_super_admin: newStatus }, 'request');
+
+                const response = await apiClient.put(url, { is_super_admin: newStatus });
+
+                window.LogConfig.logApiCall('PUT', url, response, 'response');
+
+                this.adminUser.is_super_admin = response.is_super_admin;
+                // Clear platforms if promoted to super admin
+                if (response.is_super_admin) {
+                    this.adminUser.platforms = [];
+                }
+
+                const actionDone = newStatus ? 'promoted to' : 'demoted from';
+                Utils.showToast(`Admin ${actionDone} super admin successfully`, 'success');
+                adminUserEditLog.info(`Admin ${actionDone} super admin successfully`);
+
+            } catch (error) {
+                window.LogConfig.logError(error, `Toggle Super Admin (${action})`);
+                Utils.showToast(error.message || `Failed to ${action} super admin`, 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // Toggle admin user status
+        async toggleStatus() {
+            const action = this.adminUser.is_active ? 'deactivate' : 'activate';
+            adminUserEditLog.info(`Toggle status: ${action}`);
+
+            // Prevent self-deactivation
+            if (this.adminUser.id === this.currentUserId) {
+                Utils.showToast('You cannot deactivate your own account', 'error');
+                return;
+            }
+
+            if (!confirm(`Are you sure you want to ${action} "${this.adminUser.username}"?`)) {
+                adminUserEditLog.info('Status toggle cancelled by user');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/admin-users/${this.userId}/status`;
+                window.LogConfig.logApiCall('PUT', url, null, 'request');
+
+                const response = await apiClient.put(url);
+
+                window.LogConfig.logApiCall('PUT', url, response, 'response');
+
+                this.adminUser.is_active = response.is_active;
+                Utils.showToast(`Admin user ${action}d successfully`, 'success');
+                adminUserEditLog.info(`Admin user ${action}d successfully`);
+
+            } catch (error) {
+                window.LogConfig.logError(error, `Toggle Status (${action})`);
+                Utils.showToast(error.message || `Failed to ${action} admin user`, 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // Assign platform to admin
+        async assignPlatform(platformId) {
+            if (!platformId) return;
+
+            adminUserEditLog.info('Assigning platform:', platformId);
+            this.saving = true;
+
+            try {
+                const url = `/admin/admin-users/${this.userId}/platforms/${platformId}`;
+                window.LogConfig.logApiCall('POST', url, null, 'request');
+
+                const response = await apiClient.post(url);
+
+                window.LogConfig.logApiCall('POST', url, response, 'response');
+
+                // Reload admin user to get updated platforms
+                await this.loadAdminUser();
+
+                Utils.showToast('Platform assigned successfully', 'success');
+                adminUserEditLog.info('Platform assigned successfully');
+                this.showPlatformModal = false;
+                this.selectedPlatformId = null;
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Assign Platform');
+                Utils.showToast(error.message || 'Failed to assign platform', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // Show confirmation modal for platform removal
+        removePlatform(platformId) {
+            // Validate: platform admin must have at least one platform
+            if (this.adminUser.platforms.length <= 1) {
+                Utils.showToast('Platform admin must be assigned to at least one platform', 'error');
+                return;
+            }
+
+            this.platformToRemove = this.adminUser.platforms.find(p => p.id === platformId);
+            this.showRemovePlatformModal = true;
+        },
+
+        // Confirm and execute platform removal
+        async confirmRemovePlatform() {
+            if (!this.platformToRemove) return;
+
+            const platformId = this.platformToRemove.id;
+            adminUserEditLog.info('Removing platform:', platformId);
+            this.saving = true;
+
+            try {
+                const url = `/admin/admin-users/${this.userId}/platforms/${platformId}`;
+                window.LogConfig.logApiCall('DELETE', url, null, 'request');
+
+                await apiClient.delete(url);
+
+                window.LogConfig.logApiCall('DELETE', url, null, 'response');
+
+                // Reload admin user to get updated platforms
+                await this.loadAdminUser();
+
+                Utils.showToast('Platform removed successfully', 'success');
+                adminUserEditLog.info('Platform removed successfully');
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Remove Platform');
+                Utils.showToast(error.message || 'Failed to remove platform', 'error');
+            } finally {
+                this.saving = false;
+                this.platformToRemove = null;
+            }
+        },
+
+        // Open platform assignment modal
+        openPlatformModal() {
+            this.showPlatformModal = true;
+            this.selectedPlatformId = null;
+        },
+
+        // Delete admin user
+        async deleteAdminUser() {
+            adminUserEditLog.info('Delete admin user requested:', this.userId);
+
+            // Prevent self-deletion
+            if (this.adminUser.id === this.currentUserId) {
+                Utils.showToast('You cannot delete your own account', 'error');
+                return;
+            }
+
+            if (!confirm(`Are you sure you want to delete admin user "${this.adminUser.username}"?\n\nThis action cannot be undone.`)) {
+                adminUserEditLog.info('Delete cancelled by user');
+                return;
+            }
+
+            // Second confirmation for safety
+            if (!confirm(`FINAL CONFIRMATION\n\nAre you absolutely sure you want to delete "${this.adminUser.username}"?`)) {
+                adminUserEditLog.info('Delete cancelled by user (second confirmation)');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/admin-users/${this.userId}`;
+                window.LogConfig.logApiCall('DELETE', url, null, 'request');
+
+                await apiClient.delete(url);
+
+                window.LogConfig.logApiCall('DELETE', url, null, 'response');
+
+                Utils.showToast('Admin user deleted successfully', 'success');
+                adminUserEditLog.info('Admin user deleted successfully');
+
+                // Redirect to admin users list
+                setTimeout(() => window.location.href = '/admin/admin-users', 1500);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Delete Admin User');
+                Utils.showToast(error.message || 'Failed to delete admin user', 'error');
+            } finally {
+                this.saving = false;
+            }
+        }
+    };
+}
+
+adminUserEditLog.info('Admin user edit module loaded');

app/modules/tenancy/static/admin/js/admin-users.js

@@ -0,0 +1,330 @@
+// noqa: js-006 - async init pattern is safe, loadData has try/catch
+// static/admin/js/admin-users.js
+
+// Create custom logger for admin users
+const adminUsersLog = window.LogConfig.createLogger('ADMIN-USERS');
+
+function adminUsersPage() {
+    return {
+        // Inherit base layout functionality
+        ...data(),
+
+        // Set page identifier
+        currentPage: 'admin-users',
+
+        // State
+        adminUsers: [],
+        loading: false,
+        error: null,
+        currentUserId: null,
+        filters: {
+            search: '',
+            is_super_admin: '',
+            is_active: ''
+        },
+        stats: {
+            total_admins: 0,
+            super_admins: 0,
+            platform_admins: 0,
+            active_admins: 0
+        },
+        pagination: {
+            page: 1,
+            per_page: 20,
+            total: 0,
+            pages: 0
+        },
+
+        // Initialization
+        async init() {
+            adminUsersLog.info('=== ADMIN USERS PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._adminUsersInitialized) {
+                adminUsersLog.warn('Admin users page already initialized, skipping...');
+                return;
+            }
+            window._adminUsersInitialized = true;
+
+            // Get current user ID
+            this.currentUserId = this.adminProfile?.id || null;
+
+            // Load platform settings for rows per page
+            if (window.PlatformSettings) {
+                this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
+            }
+
+            await this.loadAdminUsers();
+            await this.loadStats();
+
+            adminUsersLog.info('=== ADMIN USERS PAGE INITIALIZATION COMPLETE ===');
+        },
+
+        // Format date helper
+        formatDate(dateString) {
+            if (!dateString) return '-';
+            return Utils.formatDate(dateString);
+        },
+
+        // Computed: Total number of pages
+        get totalPages() {
+            return this.pagination.pages;
+        },
+
+        // Computed: Start index for pagination display
+        get startIndex() {
+            if (this.pagination.total === 0) return 0;
+            return (this.pagination.page - 1) * this.pagination.per_page + 1;
+        },
+
+        // Computed: End index for pagination display
+        get endIndex() {
+            const end = this.pagination.page * this.pagination.per_page;
+            return end > this.pagination.total ? this.pagination.total : end;
+        },
+
+        // Computed: Generate page numbers array with ellipsis
+        get pageNumbers() {
+            const pages = [];
+            const totalPages = this.totalPages;
+            const current = this.pagination.page;
+
+            if (totalPages <= 7) {
+                // Show all pages if 7 or fewer
+                for (let i = 1; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            } else {
+                // Always show first page
+                pages.push(1);
+
+                if (current > 3) {
+                    pages.push('...');
+                }
+
+                // Show pages around current page
+                const start = Math.max(2, current - 1);
+                const end = Math.min(totalPages - 1, current + 1);
+
+                for (let i = start; i <= end; i++) {
+                    pages.push(i);
+                }
+
+                if (current < totalPages - 2) {
+                    pages.push('...');
+                }
+
+                // Always show last page
+                pages.push(totalPages);
+            }
+
+            return pages;
+        },
+
+        // Load admin users from API
+        async loadAdminUsers() {
+            adminUsersLog.info('Loading admin users...');
+            this.loading = true;
+            this.error = null;
+
+            try {
+                const params = new URLSearchParams();
+                // Calculate skip for pagination
+                const skip = (this.pagination.page - 1) * this.pagination.per_page;
+                params.append('skip', skip);
+                params.append('limit', this.pagination.per_page);
+
+                if (this.filters.search) {
+                    params.append('search', this.filters.search);
+                }
+                if (this.filters.is_super_admin === 'false') {
+                    params.append('include_super_admins', 'false');
+                }
+                if (this.filters.is_active !== '') {
+                    params.append('is_active', this.filters.is_active);
+                }
+
+                const url = `/admin/admin-users?${params}`;
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.get(url);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+                window.LogConfig.logPerformance('Load Admin Users', duration);
+
+                // Transform API response to expected format
+                let admins = response.admins || [];
+
+                // Apply client-side filtering for search and super admin status
+                if (this.filters.search) {
+                    const searchLower = this.filters.search.toLowerCase();
+                    admins = admins.filter(admin =>
+                        admin.username?.toLowerCase().includes(searchLower) ||
+                        admin.email?.toLowerCase().includes(searchLower) ||
+                        admin.first_name?.toLowerCase().includes(searchLower) ||
+                        admin.last_name?.toLowerCase().includes(searchLower)
+                    );
+                }
+
+                // Filter by super admin status
+                if (this.filters.is_super_admin === 'true') {
+                    admins = admins.filter(admin => admin.is_super_admin);
+                }
+
+                // Filter by active status
+                if (this.filters.is_active !== '') {
+                    const isActive = this.filters.is_active === 'true';
+                    admins = admins.filter(admin => admin.is_active === isActive);
+                }
+
+                // Transform platform_assignments to platforms for template
+                this.adminUsers = admins.map(admin => ({
+                    ...admin,
+                    platforms: (admin.platform_assignments || []).map(pa => ({
+                        id: pa.platform_id,
+                        code: pa.platform_code,
+                        name: pa.platform_name
+                    })),
+                    full_name: [admin.first_name, admin.last_name].filter(Boolean).join(' ') || null
+                }));
+
+                this.pagination.total = response.total || this.adminUsers.length;
+                this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page) || 1;
+
+                adminUsersLog.info(`Loaded ${this.adminUsers.length} admin users`);
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load Admin Users');
+                this.error = error.message || 'Failed to load admin users';
+                Utils.showToast('Failed to load admin users', 'error');
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // Load statistics (computed from admin users data)
+        async loadStats() {
+            adminUsersLog.info('Loading admin user statistics...');
+
+            try {
+                // Fetch all admin users to compute stats (max 500 per API limit)
+                const url = '/admin/admin-users?skip=0&limit=500';
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+
+                const response = await apiClient.get(url);
+
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+
+                const admins = response.admins || [];
+
+                // Compute stats from the data
+                this.stats = {
+                    total_admins: admins.length,
+                    super_admins: admins.filter(a => a.is_super_admin).length,
+                    platform_admins: admins.filter(a => !a.is_super_admin).length,
+                    active_admins: admins.filter(a => a.is_active).length
+                };
+
+                adminUsersLog.debug('Stats computed:', this.stats);
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load Admin Stats');
+                // Stats are non-critical, don't show error toast
+            }
+        },
+
+        // Search with debounce
+        debouncedSearch() {
+            // Clear existing timeout
+            if (this._searchTimeout) {
+                clearTimeout(this._searchTimeout);
+            }
+            // Set new timeout
+            this._searchTimeout = setTimeout(() => {
+                adminUsersLog.info('Search triggered:', this.filters.search);
+                this.pagination.page = 1;
+                this.loadAdminUsers();
+            }, 300);
+        },
+
+        // Pagination
+        nextPage() {
+            if (this.pagination.page < this.pagination.pages) {
+                this.pagination.page++;
+                adminUsersLog.info('Next page:', this.pagination.page);
+                this.loadAdminUsers();
+            }
+        },
+
+        previousPage() {
+            if (this.pagination.page > 1) {
+                this.pagination.page--;
+                adminUsersLog.info('Previous page:', this.pagination.page);
+                this.loadAdminUsers();
+            }
+        },
+
+        goToPage(pageNum) {
+            if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
+                this.pagination.page = pageNum;
+                adminUsersLog.info('Go to page:', this.pagination.page);
+                this.loadAdminUsers();
+            }
+        },
+
+        // Actions
+        viewAdminUser(admin) {
+            adminUsersLog.info('View admin user:', admin.username);
+            window.location.href = `/admin/admin-users/${admin.id}`;
+        },
+
+        editAdminUser(admin) {
+            adminUsersLog.info('Edit admin user:', admin.username);
+            window.location.href = `/admin/admin-users/${admin.id}/edit`;
+        },
+
+        async deleteAdminUser(admin) {
+            adminUsersLog.warn('Delete admin user requested:', admin.username);
+
+            // Prevent self-deletion
+            if (admin.id === this.currentUserId) {
+                Utils.showToast('You cannot delete your own account', 'error');
+                return;
+            }
+
+            if (!confirm(`Are you sure you want to delete admin user "${admin.username}"?\n\nThis action cannot be undone.`)) {
+                adminUsersLog.info('Delete cancelled by user');
+                return;
+            }
+
+            // Second confirmation for safety
+            if (!confirm(`FINAL CONFIRMATION\n\nAre you absolutely sure you want to delete "${admin.username}"?`)) {
+                adminUsersLog.info('Delete cancelled by user (second confirmation)');
+                return;
+            }
+
+            try {
+                const url = `/admin/admin-users/${admin.id}`;
+                window.LogConfig.logApiCall('DELETE', url, null, 'request');
+
+                await apiClient.delete(url);
+
+                Utils.showToast('Admin user deleted successfully', 'success');
+                adminUsersLog.info('Admin user deleted successfully');
+
+                await this.loadAdminUsers();
+                await this.loadStats();
+            } catch (error) {
+                window.LogConfig.logError(error, 'Delete Admin User');
+                Utils.showToast(error.message || 'Failed to delete admin user', 'error');
+            }
+        },
+
+        openCreateModal() {
+            adminUsersLog.info('Open create admin user page');
+            window.location.href = '/admin/admin-users/create';
+        }
+    };
+}
+
+adminUsersLog.info('Admin users module loaded');

app/modules/tenancy/static/admin/js/companies.js

@@ -0,0 +1,278 @@
+// noqa: js-006 - async init pattern is safe, loadData has try/catch
+// static/admin/js/companies.js
+
+// ✅ Use centralized logger
+const companiesLog = window.LogConfig.loggers.companies || window.LogConfig.createLogger('companies');
+
+// ============================================
+// COMPANY LIST FUNCTION
+// ============================================
+function adminCompanies() {
+    return {
+        // Inherit base layout functionality
+        ...data(),
+
+        // Page identifier for sidebar active state
+        currentPage: 'companies',
+
+        // Companies page specific state
+        companies: [],
+        stats: {
+            total: 0,
+            verified: 0,
+            active: 0,
+            totalVendors: 0
+        },
+        loading: false,
+        error: null,
+
+        // Search and filters
+        filters: {
+            search: '',
+            is_active: '',
+            is_verified: ''
+        },
+
+        // Pagination state
+        pagination: {
+            page: 1,
+            per_page: 20,
+            total: 0,
+            pages: 0
+        },
+
+        // Initialize
+        async init() {
+            companiesLog.info('=== COMPANIES PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._companiesInitialized) {
+                companiesLog.warn('Companies page already initialized, skipping...');
+                return;
+            }
+            window._companiesInitialized = true;
+
+            // Load platform settings for rows per page
+            if (window.PlatformSettings) {
+                this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
+            }
+
+            companiesLog.group('Loading companies data');
+            await this.loadCompanies();
+            companiesLog.groupEnd();
+
+            companiesLog.info('=== COMPANIES PAGE INITIALIZATION COMPLETE ===');
+        },
+
+        // Debounced search
+        debouncedSearch() {
+            if (this._searchTimeout) {
+                clearTimeout(this._searchTimeout);
+            }
+            this._searchTimeout = setTimeout(() => {
+                companiesLog.info('Search triggered:', this.filters.search);
+                this.pagination.page = 1;
+                this.loadCompanies();
+            }, 300);
+        },
+
+        // Computed: Get companies for current page (already paginated from server)
+        get paginatedCompanies() {
+            return this.companies;
+        },
+
+        // Computed: Total number of pages
+        get totalPages() {
+            return this.pagination.pages;
+        },
+
+        // Computed: Start index for pagination display
+        get startIndex() {
+            if (this.pagination.total === 0) return 0;
+            return (this.pagination.page - 1) * this.pagination.per_page + 1;
+        },
+
+        // Computed: End index for pagination display
+        get endIndex() {
+            const end = this.pagination.page * this.pagination.per_page;
+            return end > this.pagination.total ? this.pagination.total : end;
+        },
+
+        // Computed: Generate page numbers array with ellipsis
+        get pageNumbers() {
+            const pages = [];
+            const totalPages = this.totalPages;
+            const current = this.pagination.page;
+
+            if (totalPages <= 7) {
+                // Show all pages if 7 or fewer
+                for (let i = 1; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            } else {
+                // Always show first page
+                pages.push(1);
+
+                if (current > 3) {
+                    pages.push('...');
+                }
+
+                // Show pages around current page
+                const start = Math.max(2, current - 1);
+                const end = Math.min(totalPages - 1, current + 1);
+
+                for (let i = start; i <= end; i++) {
+                    pages.push(i);
+                }
+
+                if (current < totalPages - 2) {
+                    pages.push('...');
+                }
+
+                // Always show last page
+                pages.push(totalPages);
+            }
+
+            return pages;
+        },
+
+        // Load companies with search and pagination
+        async loadCompanies() {
+            this.loading = true;
+            this.error = null;
+
+            try {
+                companiesLog.info('Fetching companies from API...');
+
+                const params = new URLSearchParams();
+                params.append('skip', (this.pagination.page - 1) * this.pagination.per_page);
+                params.append('limit', this.pagination.per_page);
+
+                if (this.filters.search) {
+                    params.append('search', this.filters.search);
+                }
+                if (this.filters.is_active) {
+                    params.append('is_active', this.filters.is_active);
+                }
+                if (this.filters.is_verified) {
+                    params.append('is_verified', this.filters.is_verified);
+                }
+
+                const response = await apiClient.get(`/admin/companies?${params}`);
+
+                if (response.companies) {
+                    this.companies = response.companies;
+                    this.pagination.total = response.total;
+                    this.pagination.pages = Math.ceil(response.total / this.pagination.per_page);
+
+                    // Calculate stats from all companies (need separate call for accurate stats)
+                    this.stats.total = response.total;
+                    this.stats.verified = this.companies.filter(c => c.is_verified).length;
+                    this.stats.active = this.companies.filter(c => c.is_active).length;
+                    this.stats.totalVendors = this.companies.reduce((sum, c) => sum + (c.vendor_count || 0), 0);
+
+                    companiesLog.info(`Loaded ${this.companies.length} companies (total: ${response.total})`);
+                } else {
+                    companiesLog.warn('No companies in response');
+                    this.companies = [];
+                }
+            } catch (error) {
+                companiesLog.error('Failed to load companies:', error);
+                this.error = error.message || 'Failed to load companies';
+                this.companies = [];
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // Edit company
+        editCompany(companyId) {
+            companiesLog.info('Edit company:', companyId);
+            // TODO: Navigate to edit page
+            window.location.href = `/admin/companies/${companyId}/edit`;
+        },
+
+        // Delete company
+        async deleteCompany(company) {
+            if (company.vendor_count > 0) {
+                companiesLog.warn('Cannot delete company with vendors');
+                Utils.showToast(`Cannot delete "${company.name}" because it has ${company.vendor_count} vendor(s). Please delete or reassign the vendors first.`, 'warning');
+                return;
+            }
+
+            const confirmed = confirm(
+                `Are you sure you want to delete "${company.name}"?\n\nThis action cannot be undone.`
+            );
+
+            if (!confirmed) {
+                companiesLog.info('Delete cancelled by user');
+                return;
+            }
+
+            try {
+                companiesLog.info('Deleting company:', company.id);
+
+                await apiClient.delete(`/admin/companies/${company.id}?confirm=true`);
+
+                companiesLog.info('Company deleted successfully');
+
+                // Reload companies
+                await this.loadCompanies();
+                await this.loadStats();
+
+                Utils.showToast(`Company "${company.name}" deleted successfully`, 'success');
+            } catch (error) {
+                companiesLog.error('Failed to delete company:', error);
+                Utils.showToast(`Failed to delete company: ${error.message}`, 'error');
+            }
+        },
+
+        // Pagination methods
+        previousPage() {
+            if (this.pagination.page > 1) {
+                this.pagination.page--;
+                companiesLog.info('Previous page:', this.pagination.page);
+                this.loadCompanies();
+            }
+        },
+
+        nextPage() {
+            if (this.pagination.page < this.totalPages) {
+                this.pagination.page++;
+                companiesLog.info('Next page:', this.pagination.page);
+                this.loadCompanies();
+            }
+        },
+
+        goToPage(pageNum) {
+            if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
+                this.pagination.page = pageNum;
+                companiesLog.info('Go to page:', this.pagination.page);
+                this.loadCompanies();
+            }
+        },
+
+        // Format date for display
+        formatDate(dateString) {
+            if (!dateString) return 'N/A';
+            try {
+                const date = new Date(dateString);
+                return date.toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric'
+                });
+            } catch (e) {
+                companiesLog.error('Date parsing error:', e);
+                return dateString;
+            }
+        }
+    };
+}
+
+// Register logger for configuration
+if (!window.LogConfig.loggers.companies) {
+    window.LogConfig.loggers.companies = window.LogConfig.createLogger('companies');
+}
+
+companiesLog.info('✅ Companies module loaded');

app/modules/tenancy/static/admin/js/company-detail.js

@@ -0,0 +1,146 @@
+// noqa: js-006 - async init pattern is safe, loadData has try/catch
+// static/admin/js/company-detail.js
+
+// Create custom logger for company detail
+const companyDetailLog = window.LogConfig.createLogger('COMPANY-DETAIL');
+
+function adminCompanyDetail() {
+    return {
+        // Inherit base layout functionality from init-alpine.js
+        ...data(),
+
+        // Company detail page specific state
+        currentPage: 'company-detail',
+        company: null,
+        loading: false,
+        error: null,
+        companyId: null,
+
+        // Initialize
+        async init() {
+            companyDetailLog.info('=== COMPANY DETAIL PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._companyDetailInitialized) {
+                companyDetailLog.warn('Company detail page already initialized, skipping...');
+                return;
+            }
+            window._companyDetailInitialized = true;
+
+            // Get company ID from URL
+            const path = window.location.pathname;
+            const match = path.match(/\/admin\/companies\/(\d+)$/);
+
+            if (match) {
+                this.companyId = match[1];
+                companyDetailLog.info('Viewing company:', this.companyId);
+                await this.loadCompany();
+            } else {
+                companyDetailLog.error('No company ID in URL');
+                this.error = 'Invalid company URL';
+                Utils.showToast('Invalid company URL', 'error');
+            }
+
+            companyDetailLog.info('=== COMPANY DETAIL PAGE INITIALIZATION COMPLETE ===');
+        },
+
+        // Load company data
+        async loadCompany() {
+            companyDetailLog.info('Loading company details...');
+            this.loading = true;
+            this.error = null;
+
+            try {
+                const url = `/admin/companies/${this.companyId}`;
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.get(url);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+                window.LogConfig.logPerformance('Load Company Details', duration);
+
+                this.company = response;
+
+                companyDetailLog.info(`Company loaded in ${duration}ms`, {
+                    id: this.company.id,
+                    name: this.company.name,
+                    is_verified: this.company.is_verified,
+                    is_active: this.company.is_active,
+                    vendor_count: this.company.vendor_count
+                });
+                companyDetailLog.debug('Full company data:', this.company);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load Company Details');
+                this.error = error.message || 'Failed to load company details';
+                Utils.showToast('Failed to load company details', 'error');
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // Format date (matches dashboard pattern)
+        formatDate(dateString) {
+            if (!dateString) {
+                companyDetailLog.debug('formatDate called with empty dateString');
+                return '-';
+            }
+            const formatted = Utils.formatDate(dateString);
+            companyDetailLog.debug(`Date formatted: ${dateString} -> ${formatted}`);
+            return formatted;
+        },
+
+        // Delete company
+        async deleteCompany() {
+            companyDetailLog.info('Delete company requested:', this.companyId);
+
+            if (this.company?.vendor_count > 0) {
+                Utils.showToast(`Cannot delete company with ${this.company.vendor_count} vendor(s). Delete vendors first.`, 'error');
+                return;
+            }
+
+            if (!confirm(`Are you sure you want to delete company "${this.company.name}"?\n\nThis action cannot be undone.`)) {
+                companyDetailLog.info('Delete cancelled by user');
+                return;
+            }
+
+            // Second confirmation for safety
+            if (!confirm(`FINAL CONFIRMATION\n\nAre you absolutely sure you want to delete "${this.company.name}"?`)) {
+                companyDetailLog.info('Delete cancelled by user (second confirmation)');
+                return;
+            }
+
+            try {
+                const url = `/admin/companies/${this.companyId}?confirm=true`;
+                window.LogConfig.logApiCall('DELETE', url, null, 'request');
+
+                companyDetailLog.info('Deleting company:', this.companyId);
+                await apiClient.delete(url);
+
+                window.LogConfig.logApiCall('DELETE', url, null, 'response');
+
+                Utils.showToast('Company deleted successfully', 'success');
+                companyDetailLog.info('Company deleted successfully');
+
+                // Redirect to companies list
+                setTimeout(() => window.location.href = '/admin/companies', 1500);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Delete Company');
+                Utils.showToast(error.message || 'Failed to delete company', 'error');
+            }
+        },
+
+        // Refresh company data
+        async refresh() {
+            companyDetailLog.info('=== COMPANY REFRESH TRIGGERED ===');
+            await this.loadCompany();
+            Utils.showToast('Company details refreshed', 'success');
+            companyDetailLog.info('=== COMPANY REFRESH COMPLETE ===');
+        }
+    };
+}
+
+companyDetailLog.info('Company detail module loaded');

app/modules/tenancy/static/admin/js/company-edit.js

@@ -0,0 +1,392 @@
+// static/admin/js/company-edit.js
+
+// Create custom logger for company edit
+const companyEditLog = window.LogConfig.createLogger('COMPANY-EDIT');
+
+function adminCompanyEdit() {
+    return {
+        // Inherit base layout functionality from init-alpine.js
+        ...data(),
+
+        // Company edit page specific state
+        currentPage: 'company-edit',
+        loading: false,
+        company: null,
+        formData: {},
+        errors: {},
+        loadingCompany: false,
+        saving: false,
+        companyId: null,
+
+        // Transfer ownership state
+        showTransferOwnershipModal: false,
+        transferring: false,
+        transferData: {
+            new_owner_user_id: null,
+            confirm_transfer: false,
+            transfer_reason: ''
+        },
+
+        // User search state
+        userSearchQuery: '',
+        userSearchResults: [],
+        selectedUser: null,
+        showUserDropdown: false,
+        searchingUsers: false,
+        searchDebounceTimer: null,
+        showConfirmError: false,
+        showOwnerError: false,
+
+        // Initialize
+        async init() {
+            companyEditLog.info('=== COMPANY EDIT PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._companyEditInitialized) {
+                companyEditLog.warn('Company edit page already initialized, skipping...');
+                return;
+            }
+            window._companyEditInitialized = true;
+
+            try {
+                // Get company ID from URL
+                const path = window.location.pathname;
+                const match = path.match(/\/admin\/companies\/(\d+)\/edit/);
+
+                if (match) {
+                    this.companyId = parseInt(match[1], 10);
+                    companyEditLog.info('Editing company:', this.companyId);
+                    await this.loadCompany();
+                } else {
+                    companyEditLog.error('No company ID in URL');
+                    Utils.showToast('Invalid company URL', 'error');
+                    setTimeout(() => window.location.href = '/admin/companies', 2000);
+                }
+
+                companyEditLog.info('=== COMPANY EDIT PAGE INITIALIZATION COMPLETE ===');
+            } catch (error) {
+                window.LogConfig.logError(error, 'Company Edit Init');
+                Utils.showToast('Failed to initialize page', 'error');
+            }
+        },
+
+        // Load company data
+        async loadCompany() {
+            companyEditLog.info('Loading company data...');
+            this.loadingCompany = true;
+
+            try {
+                const url = `/admin/companies/${this.companyId}`;
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.get(url);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+                window.LogConfig.logPerformance('Load Company', duration);
+
+                this.company = response;
+
+                // Initialize form data
+                this.formData = {
+                    name: response.name || '',
+                    description: response.description || '',
+                    contact_email: response.contact_email || '',
+                    contact_phone: response.contact_phone || '',
+                    website: response.website || '',
+                    business_address: response.business_address || '',
+                    tax_number: response.tax_number || ''
+                };
+
+                companyEditLog.info(`Company loaded in ${duration}ms`, {
+                    company_id: this.company.id,
+                    name: this.company.name
+                });
+                companyEditLog.debug('Form data initialized:', this.formData);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load Company');
+                Utils.showToast('Failed to load company', 'error');
+                setTimeout(() => window.location.href = '/admin/companies', 2000);
+            } finally {
+                this.loadingCompany = false;
+            }
+        },
+
+        // Submit form
+        async handleSubmit() {
+            companyEditLog.info('=== SUBMITTING COMPANY UPDATE ===');
+            companyEditLog.debug('Form data:', this.formData);
+
+            this.errors = {};
+            this.saving = true;
+
+            try {
+                const url = `/admin/companies/${this.companyId}`;
+                window.LogConfig.logApiCall('PUT', url, this.formData, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.put(url, this.formData);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('PUT', url, response, 'response');
+                window.LogConfig.logPerformance('Update Company', duration);
+
+                this.company = response;
+                Utils.showToast('Company updated successfully', 'success');
+                companyEditLog.info(`Company updated successfully in ${duration}ms`, response);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Update Company');
+
+                // Handle validation errors
+                if (error.details && error.details.validation_errors) {
+                    error.details.validation_errors.forEach(err => {
+                        const field = err.loc?.[1] || err.loc?.[0];
+                        if (field) {
+                            this.errors[field] = err.msg;
+                        }
+                    });
+                    companyEditLog.debug('Validation errors:', this.errors);
+                }
+
+                Utils.showToast(error.message || 'Failed to update company', 'error');
+            } finally {
+                this.saving = false;
+                companyEditLog.info('=== COMPANY UPDATE COMPLETE ===');
+            }
+        },
+
+        // Toggle verification
+        async toggleVerification() {
+            const action = this.company.is_verified ? 'unverify' : 'verify';
+            companyEditLog.info(`Toggle verification: ${action}`);
+
+            if (!confirm(`Are you sure you want to ${action} this company?`)) {
+                companyEditLog.info('Verification toggle cancelled by user');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/companies/${this.companyId}/verification`;
+                const payload = { is_verified: !this.company.is_verified };
+
+                window.LogConfig.logApiCall('PUT', url, payload, 'request');
+
+                const response = await apiClient.put(url, payload);
+
+                window.LogConfig.logApiCall('PUT', url, response, 'response');
+
+                this.company = response;
+                Utils.showToast(`Company ${action}ed successfully`, 'success');
+                companyEditLog.info(`Company ${action}ed successfully`);
+
+            } catch (error) {
+                window.LogConfig.logError(error, `Toggle Verification (${action})`);
+                Utils.showToast(`Failed to ${action} company`, 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // Toggle active status
+        async toggleActive() {
+            const action = this.company.is_active ? 'deactivate' : 'activate';
+            companyEditLog.info(`Toggle active status: ${action}`);
+
+            if (!confirm(`Are you sure you want to ${action} this company?\n\nThis will affect all vendors under this company.`)) {
+                companyEditLog.info('Active status toggle cancelled by user');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/companies/${this.companyId}/status`;
+                const payload = { is_active: !this.company.is_active };
+
+                window.LogConfig.logApiCall('PUT', url, payload, 'request');
+
+                const response = await apiClient.put(url, payload);
+
+                window.LogConfig.logApiCall('PUT', url, response, 'response');
+
+                this.company = response;
+                Utils.showToast(`Company ${action}d successfully`, 'success');
+                companyEditLog.info(`Company ${action}d successfully`);
+
+            } catch (error) {
+                window.LogConfig.logError(error, `Toggle Active Status (${action})`);
+                Utils.showToast(`Failed to ${action} company`, 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // Transfer company ownership
+        async transferOwnership() {
+            companyEditLog.info('=== TRANSFERRING COMPANY OWNERSHIP ===');
+            companyEditLog.debug('Transfer data:', this.transferData);
+
+            if (!this.transferData.new_owner_user_id) {
+                this.showOwnerError = true;
+                return;
+            }
+
+            if (!this.transferData.confirm_transfer) {
+                this.showConfirmError = true;
+                return;
+            }
+
+            // Clear errors
+            this.showOwnerError = false;
+            this.showConfirmError = false;
+
+            this.transferring = true;
+            try {
+                const url = `/admin/companies/${this.companyId}/transfer-ownership`;
+                const payload = {
+                    new_owner_user_id: parseInt(this.transferData.new_owner_user_id, 10),
+                    confirm_transfer: true,
+                    transfer_reason: this.transferData.transfer_reason || null
+                };
+
+                window.LogConfig.logApiCall('POST', url, payload, 'request');
+
+                const response = await apiClient.post(url, payload);
+
+                window.LogConfig.logApiCall('POST', url, response, 'response');
+
+                Utils.showToast('Ownership transferred successfully', 'success');
+                companyEditLog.info('Ownership transferred successfully', response);
+
+                // Close modal and reload company data
+                this.showTransferOwnershipModal = false;
+                this.resetTransferData();
+                await this.loadCompany();
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Transfer Ownership');
+                Utils.showToast(error.message || 'Failed to transfer ownership', 'error');
+            } finally {
+                this.transferring = false;
+                companyEditLog.info('=== OWNERSHIP TRANSFER COMPLETE ===');
+            }
+        },
+
+        // Reset transfer data
+        resetTransferData() {
+            this.transferData = {
+                new_owner_user_id: null,
+                confirm_transfer: false,
+                transfer_reason: ''
+            };
+            this.userSearchQuery = '';
+            this.userSearchResults = [];
+            this.selectedUser = null;
+            this.showUserDropdown = false;
+            this.showConfirmError = false;
+            this.showOwnerError = false;
+        },
+
+        // Search users for transfer ownership
+        searchUsers() {
+            // Debounce search
+            clearTimeout(this.searchDebounceTimer);
+
+            if (this.userSearchQuery.length < 2) {
+                this.userSearchResults = [];
+                this.showUserDropdown = false;
+                return;
+            }
+
+            this.searchDebounceTimer = setTimeout(async () => {
+                companyEditLog.info('Searching users:', this.userSearchQuery);
+                this.searchingUsers = true;
+                this.showUserDropdown = true;
+
+                try {
+                    const url = `/admin/users/search?q=${encodeURIComponent(this.userSearchQuery)}&limit=10`;
+                    const response = await apiClient.get(url);
+
+                    this.userSearchResults = response.users || response || [];
+                    companyEditLog.debug('User search results:', this.userSearchResults);
+
+                } catch (error) {
+                    window.LogConfig.logError(error, 'Search Users');
+                    this.userSearchResults = [];
+                } finally {
+                    this.searchingUsers = false;
+                }
+            }, 300);
+        },
+
+        // Select a user from search results
+        selectUser(user) {
+            companyEditLog.info('Selected user:', user);
+            this.selectedUser = user;
+            this.transferData.new_owner_user_id = user.id;
+            this.userSearchQuery = user.username;
+            this.showUserDropdown = false;
+            this.userSearchResults = [];
+        },
+
+        // Clear selected user
+        clearSelectedUser() {
+            this.selectedUser = null;
+            this.transferData.new_owner_user_id = null;
+            this.userSearchQuery = '';
+            this.userSearchResults = [];
+        },
+
+        // Delete company
+        async deleteCompany() {
+            companyEditLog.info('=== DELETING COMPANY ===');
+
+            if (this.company.vendor_count > 0) {
+                Utils.showToast(`Cannot delete company with ${this.company.vendor_count} vendors. Remove vendors first.`, 'error');
+                return;
+            }
+
+            if (!confirm(`Are you sure you want to delete company "${this.company.name}"?\n\nThis action cannot be undone.`)) {
+                companyEditLog.info('Company deletion cancelled by user');
+                return;
+            }
+
+            // Double confirmation for critical action
+            if (!confirm(`FINAL CONFIRMATION: Delete "${this.company.name}"?\n\nThis will permanently delete the company and all its data.`)) {
+                companyEditLog.info('Company deletion cancelled at final confirmation');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/companies/${this.companyId}?confirm=true`;
+
+                window.LogConfig.logApiCall('DELETE', url, null, 'request');
+
+                const response = await apiClient.delete(url);
+
+                window.LogConfig.logApiCall('DELETE', url, response, 'response');
+
+                Utils.showToast('Company deleted successfully', 'success');
+                companyEditLog.info('Company deleted successfully');
+
+                // Redirect to companies list
+                setTimeout(() => {
+                    window.location.href = '/admin/companies';
+                }, 1500);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Delete Company');
+                Utils.showToast(error.message || 'Failed to delete company', 'error');
+            } finally {
+                this.saving = false;
+                companyEditLog.info('=== COMPANY DELETION COMPLETE ===');
+            }
+        }
+    };
+}
+
+companyEditLog.info('Company edit module loaded');

app/modules/tenancy/static/admin/js/platform-detail.js

@@ -0,0 +1,139 @@
+/**
+ * Platform Detail - Alpine.js Component
+ *
+ * Displays platform overview, stats, and quick actions.
+ */
+
+const platformDetailLog = window.LogConfig.createLogger('PLATFORM_DETAIL');
+
+function platformDetail() {
+  return {
+    // Inherit base layout functionality from init-alpine.js
+    ...data(),
+
+    // Page identification
+    currentPage: 'platform-detail',
+
+    // State
+    platform: null,
+    stats: null,
+    recentPages: [],
+    loading: true,
+    error: null,
+    platformCode: null,
+
+    // Lifecycle
+    async init() {
+      platformDetailLog.info('=== PLATFORM DETAIL PAGE INITIALIZING ===');
+
+      // Duplicate initialization guard
+      if (window._platformDetailInitialized) {
+        platformDetailLog.warn('Platform detail page already initialized, skipping...');
+        return;
+      }
+      window._platformDetailInitialized = true;
+
+      try {
+        // Extract platform code from URL
+        const path = window.location.pathname;
+        const match = path.match(/\/admin\/platforms\/([^\/]+)$/);
+
+        if (match) {
+          this.platformCode = match[1];
+          platformDetailLog.info('Viewing platform:', this.platformCode);
+          await Promise.all([
+            this.loadPlatform(),
+            this.loadRecentPages(),
+          ]);
+        } else {
+          platformDetailLog.error('No platform code in URL');
+          this.error = 'Platform code not found in URL';
+          this.loading = false;
+        }
+
+        platformDetailLog.info('=== PLATFORM DETAIL PAGE INITIALIZATION COMPLETE ===');
+      } catch (error) {
+        window.LogConfig.logError(error, 'Platform Detail Init');
+        this.error = 'Failed to initialize page';
+        this.loading = false;
+      }
+    },
+
+    // API Methods
+    async loadPlatform() {
+      try {
+        const response = await apiClient.get(`/admin/platforms/${this.platformCode}`);
+        this.platform = response;
+        platformDetailLog.info(`Loaded platform: ${this.platformCode}`);
+      } catch (err) {
+        platformDetailLog.error('Error loading platform:', err);
+        this.error = err.message || 'Failed to load platform';
+        throw err;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async loadRecentPages() {
+      try {
+        // Load recent content pages for this platform
+        const response = await apiClient.get(`/admin/content-pages?platform_code=${this.platformCode}&limit=5`);
+        this.recentPages = response.items || response || [];
+        platformDetailLog.info(`Loaded ${this.recentPages.length} recent pages`);
+      } catch (err) {
+        platformDetailLog.error('Error loading recent pages:', err);
+        // Non-fatal - don't throw
+        this.recentPages = [];
+      }
+    },
+
+    // Helper Methods
+    getPlatformIcon(code) {
+      const icons = {
+        main: 'home',
+        oms: 'clipboard-list',
+        loyalty: 'star',
+        sitebuilder: 'template',
+      };
+      return icons[code] || 'globe-alt';
+    },
+
+    getPageTypeLabel(page) {
+      if (page.is_platform_page) return 'Marketing';
+      if (page.vendor_id) return 'Vendor Override';
+      return 'Vendor Default';
+    },
+
+    getPageTypeBadgeClass(page) {
+      if (page.is_platform_page) {
+        return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
+      }
+      if (page.vendor_id) {
+        return 'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200';
+      }
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+    },
+
+    formatDate(dateString) {
+      if (!dateString) return '—';
+      const date = new Date(dateString);
+      return date.toLocaleDateString('fr-LU', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      });
+    },
+
+    getPlatformUrl() {
+      if (!this.platform) return '#';
+      if (this.platform.domain) {
+        return `https://${this.platform.domain}`;
+      }
+      // Development URL
+      if (this.platform.code === 'main') {
+        return '/';
+      }
+      return `/platforms/${this.platform.code}/`;
+    },
+  };
+}

app/modules/tenancy/static/admin/js/platform-edit.js

@@ -0,0 +1,230 @@
+/**
+ * Platform Edit - Alpine.js Component
+ *
+ * Handles platform editing for multi-platform CMS.
+ */
+
+const platformEditLog = window.LogConfig.createLogger('PLATFORM_EDIT');
+
+function platformEdit() {
+  return {
+    // Inherit base layout functionality from init-alpine.js
+    ...data(),
+
+    // Page identification
+    currentPage: 'platform-edit',
+
+    // State
+    platform: null,
+    loading: true,
+    saving: false,
+    error: null,
+    success: null,
+    platformCode: null,
+
+    // Form data
+    formData: {
+      name: '',
+      description: '',
+      domain: '',
+      path_prefix: '',
+      logo: '',
+      logo_dark: '',
+      favicon: '',
+      default_language: 'fr',
+      supported_languages: ['fr', 'de', 'en'],
+      is_active: true,
+      is_public: true,
+      theme_config: {},
+      settings: {},
+    },
+
+    errors: {},
+
+    // Available languages
+    availableLanguages: [
+      { code: 'fr', name: 'French' },
+      { code: 'de', name: 'German' },
+      { code: 'en', name: 'English' },
+      { code: 'lu', name: 'Luxembourgish' },
+    ],
+
+    // Lifecycle
+    async init() {
+      platformEditLog.info('=== PLATFORM EDIT PAGE INITIALIZING ===');
+
+      // Duplicate initialization guard
+      if (window._platformEditInitialized) {
+        platformEditLog.warn('Platform edit page already initialized, skipping...');
+        return;
+      }
+      window._platformEditInitialized = true;
+
+      try {
+        // Extract platform code from URL
+        const path = window.location.pathname;
+        const match = path.match(/\/admin\/platforms\/([^\/]+)\/edit/);
+
+        if (match) {
+          this.platformCode = match[1];
+          platformEditLog.info('Editing platform:', this.platformCode);
+          await this.loadPlatform();
+        } else {
+          platformEditLog.error('No platform code in URL');
+          this.error = 'Platform code not found in URL';
+          this.loading = false;
+        }
+
+        platformEditLog.info('=== PLATFORM EDIT PAGE INITIALIZATION COMPLETE ===');
+      } catch (error) {
+        window.LogConfig.logError(error, 'Platform Edit Init');
+        this.error = 'Failed to initialize page';
+        this.loading = false;
+      }
+    },
+
+    // API Methods
+    async loadPlatform() {
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const response = await apiClient.get(`/admin/platforms/${this.platformCode}`);
+        this.platform = response;
+
+        // Populate form data
+        this.formData = {
+          name: response.name || '',
+          description: response.description || '',
+          domain: response.domain || '',
+          path_prefix: response.path_prefix || '',
+          logo: response.logo || '',
+          logo_dark: response.logo_dark || '',
+          favicon: response.favicon || '',
+          default_language: response.default_language || 'fr',
+          supported_languages: response.supported_languages || ['fr', 'de', 'en'],
+          is_active: response.is_active ?? true,
+          is_public: response.is_public ?? true,
+          theme_config: response.theme_config || {},
+          settings: response.settings || {},
+        };
+
+        platformEditLog.info(`Loaded platform: ${this.platformCode}`);
+      } catch (err) {
+        platformEditLog.error('Error loading platform:', err);
+        this.error = err.message || 'Failed to load platform';
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async handleSubmit() {
+      this.saving = true;
+      this.error = null;
+      this.success = null;
+      this.errors = {};
+
+      try {
+        // Build update payload (only changed fields)
+        const payload = {
+          name: this.formData.name,
+          description: this.formData.description || null,
+          domain: this.formData.domain || null,
+          path_prefix: this.formData.path_prefix || null,
+          logo: this.formData.logo || null,
+          logo_dark: this.formData.logo_dark || null,
+          favicon: this.formData.favicon || null,
+          default_language: this.formData.default_language,
+          supported_languages: this.formData.supported_languages,
+          is_active: this.formData.is_active,
+          is_public: this.formData.is_public,
+        };
+
+        const response = await apiClient.put(
+          `/admin/platforms/${this.platformCode}`,
+          payload
+        );
+
+        this.platform = response;
+        this.success = 'Platform updated successfully';
+        platformEditLog.info(`Updated platform: ${this.platformCode}`);
+
+        // Clear success message after 3 seconds
+        setTimeout(() => {
+          this.success = null;
+        }, 3000);
+      } catch (err) {
+        platformEditLog.error('Error updating platform:', err);
+        this.error = err.message || 'Failed to update platform';
+
+        // Handle validation errors
+        if (err.details) {
+          this.errors = err.details;
+        }
+      } finally {
+        this.saving = false;
+      }
+    },
+
+    async toggleActive() {
+      try {
+        this.formData.is_active = !this.formData.is_active;
+        await this.handleSubmit();
+      } catch (err) {
+        platformEditLog.error('Error toggling active status:', err);
+        // Revert on error
+        this.formData.is_active = !this.formData.is_active;
+      }
+    },
+
+    async togglePublic() {
+      try {
+        this.formData.is_public = !this.formData.is_public;
+        await this.handleSubmit();
+      } catch (err) {
+        platformEditLog.error('Error toggling public status:', err);
+        // Revert on error
+        this.formData.is_public = !this.formData.is_public;
+      }
+    },
+
+    // Helper Methods
+    isLanguageSupported(code) {
+      return this.formData.supported_languages.includes(code);
+    },
+
+    toggleLanguage(code) {
+      const index = this.formData.supported_languages.indexOf(code);
+      if (index > -1) {
+        // Don't allow removing the last language
+        if (this.formData.supported_languages.length > 1) {
+          this.formData.supported_languages.splice(index, 1);
+        }
+      } else {
+        this.formData.supported_languages.push(code);
+      }
+    },
+
+    getPlatformIcon(code) {
+      const icons = {
+        main: 'home',
+        oms: 'clipboard-list',
+        loyalty: 'star',
+        sitebuilder: 'template',
+      };
+      return icons[code] || 'globe-alt';
+    },
+
+    formatDate(dateString) {
+      if (!dateString) return '—';
+      const date = new Date(dateString);
+      return date.toLocaleDateString('fr-LU', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+    },
+  };
+}

app/modules/tenancy/static/admin/js/platform-homepage.js

@@ -0,0 +1,155 @@
+// noqa: js-006 - async init pattern is safe, loadData has try/catch
+// static/admin/js/platform-homepage.js
+
+// Use centralized logger
+const platformHomepageLog = window.LogConfig.loggers.platformHomepage || window.LogConfig.createLogger('platformHomepage');
+
+// ============================================
+// PLATFORM HOMEPAGE MANAGER FUNCTION
+// ============================================
+function platformHomepageManager() {
+    return {
+        // Inherit base layout functionality from init-alpine.js
+        ...data(),
+
+        // Page identifier for sidebar active state
+        currentPage: 'platform-homepage',
+
+        // Platform homepage specific state
+        page: null,
+        loading: false,
+        saving: false,
+        error: null,
+        successMessage: null,
+
+        // Initialize
+        async init() {
+            platformHomepageLog.info('=== PLATFORM HOMEPAGE MANAGER INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._platformHomepageInitialized) {
+                platformHomepageLog.warn('Platform homepage manager already initialized, skipping...');
+                return;
+            }
+            window._platformHomepageInitialized = true;
+
+            platformHomepageLog.group('Loading platform homepage');
+            await this.loadPlatformHomepage();
+            platformHomepageLog.groupEnd();
+
+            platformHomepageLog.info('=== PLATFORM HOMEPAGE MANAGER INITIALIZATION COMPLETE ===');
+        },
+
+        // Load platform homepage from API
+        async loadPlatformHomepage() {
+            this.loading = true;
+            this.error = null;
+
+            try {
+                platformHomepageLog.info('Fetching platform homepage...');
+
+                // Fetch all platform pages
+                const response = await apiClient.get('/admin/content-pages/platform?include_unpublished=true');
+
+                platformHomepageLog.debug('API Response:', response);
+
+                if (!response) {
+                    throw new Error('Invalid API response');
+                }
+
+                // Handle response - API returns array directly
+                const pages = Array.isArray(response) ? response : (response.data || response.items || []);
+
+                // Find the homepage page (slug='home')
+                const homepage = pages.find(page => page.slug === 'home');
+
+                if (!homepage) {
+                    platformHomepageLog.warn('Platform homepage not found, creating default...');
+                    // Initialize with default values
+                    this.page = {
+                        id: null,
+                        slug: 'home',
+                        title: 'Welcome to Our Multi-Vendor Marketplace',
+                        content: '<p>Connect vendors with customers worldwide. Build your online store and reach millions of shoppers.</p>',
+                        template: 'default',
+                        content_format: 'html',
+                        meta_description: 'Leading multi-vendor marketplace platform. Connect with thousands of vendors and discover millions of products.',
+                        meta_keywords: 'marketplace, multi-vendor, e-commerce, online shopping',
+                        is_published: false,
+                        show_in_header: false,
+                        show_in_footer: false,
+                        display_order: 0
+                    };
+                } else {
+                    this.page = { ...homepage };
+                    platformHomepageLog.info('Platform homepage loaded:', this.page);
+                }
+
+            } catch (err) {
+                platformHomepageLog.error('Error loading platform homepage:', err);
+                this.error = err.message || 'Failed to load platform homepage';
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // Save platform homepage
+        async savePage() {
+            if (this.saving) return;
+
+            this.saving = true;
+            this.error = null;
+            this.successMessage = null;
+
+            try {
+                platformHomepageLog.info('Saving platform homepage...');
+
+                const payload = {
+                    slug: 'platform_homepage',
+                    title: this.page.title,
+                    content: this.page.content,
+                    content_format: this.page.content_format || 'html',
+                    template: this.page.template,
+                    meta_description: this.page.meta_description,
+                    meta_keywords: this.page.meta_keywords,
+                    is_published: this.page.is_published,
+                    show_in_header: false,  // Homepage never in header
+                    show_in_footer: false,  // Homepage never in footer
+                    display_order: 0,
+                    vendor_id: null  // Platform default
+                };
+
+                platformHomepageLog.debug('Payload:', payload);
+
+                let response;
+                if (this.page.id) {
+                    // Update existing page
+                    response = await apiClient.put(`/admin/content-pages/${this.page.id}`, payload);
+                    platformHomepageLog.info('Platform homepage updated');
+                } else {
+                    // Create new page
+                    response = await apiClient.post('/admin/content-pages/platform', payload);
+                    platformHomepageLog.info('Platform homepage created');
+                }
+
+                if (response) {
+                    // Handle response - API returns object directly
+                    const pageData = response.data || response;
+                    this.page = { ...pageData };
+                    this.successMessage = 'Platform homepage saved successfully!';
+
+                    // Clear success message after 3 seconds
+                    setTimeout(() => {
+                        this.successMessage = null;
+                    }, 3000);
+                }
+
+            } catch (err) {
+                platformHomepageLog.error('Error saving platform homepage:', err);
+                this.error = err.message || 'Failed to save platform homepage';
+            } finally {
+                this.saving = false;
+            }
+        }
+    };
+}

app/modules/tenancy/static/admin/js/platform-menu-config.js

@@ -0,0 +1,212 @@
+// static/admin/js/platform-menu-config.js
+// Platform menu configuration management
+//
+// TODO: BUG - Sidebar menu doesn't update immediately after changes.
+// See my-menu-config.js for details and possible solutions.
+
+const menuConfigLog = window.LogConfig?.loggers?.menuConfig || window.LogConfig?.createLogger?.('menuConfig') || console;
+
+function adminPlatformMenuConfig(platformCode) {
+    return {
+        // Inherit base layout functionality from init-alpine.js
+        ...data(),
+
+        // Page-specific state
+        currentPage: 'platforms',
+        platformCode: platformCode,
+        loading: true,
+        error: null,
+        successMessage: null,
+        saving: false,
+
+        // Data
+        platform: null,
+        menuConfig: null,
+        frontendType: 'admin',
+
+        // Computed grouped items
+        get groupedItems() {
+            if (!this.menuConfig?.items) return [];
+
+            // Group items by section
+            const sections = {};
+            for (const item of this.menuConfig.items) {
+                const sectionId = item.section_id;
+                if (!sections[sectionId]) {
+                    sections[sectionId] = {
+                        id: sectionId,
+                        label: item.section_label,
+                        isSuperAdminOnly: item.is_super_admin_only,
+                        items: [],
+                        visibleCount: 0
+                    };
+                }
+                sections[sectionId].items.push(item);
+                if (item.is_visible) {
+                    sections[sectionId].visibleCount++;
+                }
+            }
+
+            // Convert to array and maintain order
+            return Object.values(sections);
+        },
+
+        async init() {
+            // Guard against duplicate initialization
+            if (window._platformMenuConfigInitialized) {
+                menuConfigLog.warn('Already initialized, skipping');
+                return;
+            }
+            window._platformMenuConfigInitialized = true;
+
+            menuConfigLog.info('=== PLATFORM MENU CONFIG PAGE INITIALIZING ===');
+            menuConfigLog.info('Platform code:', this.platformCode);
+
+            try {
+                await this.loadPlatform();
+                await this.loadPlatformMenuConfig();
+                menuConfigLog.info('=== PLATFORM MENU CONFIG PAGE INITIALIZED ===');
+            } catch (error) {
+                menuConfigLog.error('Failed to initialize menu config page:', error);
+                this.error = 'Failed to load page data. Please refresh.';
+            }
+        },
+
+        async refresh() {
+            this.error = null;
+            this.successMessage = null;
+            await this.loadPlatformMenuConfig();
+        },
+
+        async loadPlatform() {
+            try {
+                this.platform = await apiClient.get(`/admin/platforms/${this.platformCode}`);
+                menuConfigLog.info('Loaded platform:', this.platform?.name);
+            } catch (error) {
+                menuConfigLog.error('Failed to load platform:', error);
+                throw error;
+            }
+        },
+
+        async loadPlatformMenuConfig() {
+            this.loading = true;
+            this.error = null;
+
+            try {
+                const platformId = this.platform?.id;
+                if (!platformId) {
+                    throw new Error('Platform not loaded');
+                }
+
+                const params = new URLSearchParams({ frontend_type: this.frontendType });
+                this.menuConfig = await apiClient.get(`/admin/menu-config/platforms/${platformId}?${params}`);
+                menuConfigLog.info('Loaded menu config:', {
+                    frontendType: this.frontendType,
+                    totalItems: this.menuConfig?.total_items,
+                    visibleItems: this.menuConfig?.visible_items
+                });
+            } catch (error) {
+                menuConfigLog.error('Failed to load menu config:', error);
+                this.error = error.message || 'Failed to load menu configuration';
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        async toggleVisibility(item) {
+            if (item.is_mandatory) {
+                menuConfigLog.warn('Cannot toggle mandatory item:', item.id);
+                return;
+            }
+
+            this.saving = true;
+            this.error = null;
+            this.successMessage = null;
+
+            const newVisibility = !item.is_visible;
+
+            try {
+                const platformId = this.platform?.id;
+                const params = new URLSearchParams({ frontend_type: this.frontendType });
+
+                await apiClient.put(`/admin/menu-config/platforms/${platformId}?${params}`, {
+                    menu_item_id: item.id,
+                    is_visible: newVisibility
+                });
+
+                // Update local state
+                item.is_visible = newVisibility;
+
+                // Update counts
+                if (newVisibility) {
+                    this.menuConfig.visible_items++;
+                    this.menuConfig.hidden_items--;
+                } else {
+                    this.menuConfig.visible_items--;
+                    this.menuConfig.hidden_items++;
+                }
+
+                menuConfigLog.info('Toggled visibility:', item.id, newVisibility);
+
+                // Reload the page to refresh sidebar
+                window.location.reload();
+            } catch (error) {
+                menuConfigLog.error('Failed to toggle visibility:', error);
+                this.error = error.message || 'Failed to update menu visibility';
+                this.saving = false;
+            }
+        },
+
+        async showAll() {
+            if (!confirm('This will show all menu items. Continue?')) {
+                return;
+            }
+
+            this.saving = true;
+            this.error = null;
+            this.successMessage = null;
+
+            try {
+                const platformId = this.platform?.id;
+                const params = new URLSearchParams({ frontend_type: this.frontendType });
+
+                await apiClient.post(`/admin/menu-config/platforms/${platformId}/show-all?${params}`);
+
+                menuConfigLog.info('Showed all menu items');
+
+                // Reload the page to refresh sidebar
+                window.location.reload();
+            } catch (error) {
+                menuConfigLog.error('Failed to show all menu items:', error);
+                this.error = error.message || 'Failed to show all menu items';
+                this.saving = false;
+            }
+        },
+
+        async resetToDefaults() {
+            if (!confirm('This will hide all menu items (except mandatory ones). You can then enable the ones you want. Continue?')) {
+                return;
+            }
+
+            this.saving = true;
+            this.error = null;
+            this.successMessage = null;
+
+            try {
+                const platformId = this.platform?.id;
+                const params = new URLSearchParams({ frontend_type: this.frontendType });
+
+                await apiClient.post(`/admin/menu-config/platforms/${platformId}/reset?${params}`);
+
+                menuConfigLog.info('Reset menu config to defaults');
+
+                // Reload the page to refresh sidebar
+                window.location.reload();
+            } catch (error) {
+                menuConfigLog.error('Failed to reset menu config:', error);
+                this.error = error.message || 'Failed to reset menu configuration';
+                this.saving = false;
+            }
+        }
+    };
+}

app/modules/tenancy/static/admin/js/platform-modules.js

@@ -0,0 +1,237 @@
+// static/admin/js/platform-modules.js
+// Platform module configuration management
+
+const moduleConfigLog = window.LogConfig?.loggers?.moduleConfig || window.LogConfig?.createLogger?.('moduleConfig') || console;
+
+function adminPlatformModules(platformCode) {
+    return {
+        // Inherit base layout functionality from init-alpine.js
+        ...data(),
+
+        // Page-specific state
+        currentPage: 'platforms',
+        platformCode: platformCode,
+        loading: true,
+        error: null,
+        successMessage: null,
+        saving: false,
+
+        // Data
+        platform: null,
+        moduleConfig: null,
+
+        // Computed properties
+        get coreModules() {
+            if (!this.moduleConfig?.modules) return [];
+            return this.moduleConfig.modules.filter(m => m.is_core);
+        },
+
+        get optionalModules() {
+            if (!this.moduleConfig?.modules) return [];
+            return this.moduleConfig.modules.filter(m => !m.is_core);
+        },
+
+        get coreModulesCount() {
+            return this.coreModules.length;
+        },
+
+        get enabledOptionalCount() {
+            return this.optionalModules.filter(m => m.is_enabled).length;
+        },
+
+        // Module icons mapping (must match icons.js definitions)
+        getModuleIcon(moduleCode) {
+            const icons = {
+                'core': 'home',
+                'platform-admin': 'office-building',
+                'billing': 'credit-card',
+                'inventory': 'archive',
+                'orders': 'shopping-cart',
+                'marketplace': 'shopping-bag',
+                'customers': 'users',
+                'cms': 'document-text',
+                'analytics': 'chart-bar',
+                'messaging': 'chat',
+                'dev-tools': 'code',
+                'monitoring': 'chart-pie'
+            };
+            return icons[moduleCode] || 'puzzle-piece';
+        },
+
+        // Modules with configuration options
+        hasConfig(moduleCode) {
+            return ['billing', 'inventory', 'orders', 'marketplace',
+                    'customers', 'cms', 'analytics', 'messaging', 'monitoring'].includes(moduleCode);
+        },
+
+        async init() {
+            // Guard against duplicate initialization
+            if (window._platformModulesInitialized) {
+                moduleConfigLog.warn('Already initialized, skipping');
+                return;
+            }
+            window._platformModulesInitialized = true;
+
+            moduleConfigLog.info('=== PLATFORM MODULES PAGE INITIALIZING ===');
+            moduleConfigLog.info('Platform code:', this.platformCode);
+
+            try {
+                await this.loadPlatform();
+                await this.loadModuleConfig();
+                moduleConfigLog.info('=== PLATFORM MODULES PAGE INITIALIZED ===');
+            } catch (error) {
+                moduleConfigLog.error('Failed to initialize modules page:', error);
+                this.error = 'Failed to load page data. Please refresh.';
+            }
+        },
+
+        async refresh() {
+            this.error = null;
+            this.successMessage = null;
+            await this.loadModuleConfig();
+        },
+
+        async loadPlatform() {
+            try {
+                this.platform = await apiClient.get(`/admin/platforms/${this.platformCode}`);
+                moduleConfigLog.info('Loaded platform:', this.platform?.name);
+            } catch (error) {
+                moduleConfigLog.error('Failed to load platform:', error);
+                throw error;
+            }
+        },
+
+        async loadModuleConfig() {
+            this.loading = true;
+            this.error = null;
+
+            try {
+                const platformId = this.platform?.id;
+                if (!platformId) {
+                    throw new Error('Platform not loaded');
+                }
+
+                this.moduleConfig = await apiClient.get(`/admin/modules/platforms/${platformId}`);
+                moduleConfigLog.info('Loaded module config:', {
+                    total: this.moduleConfig?.total,
+                    enabled: this.moduleConfig?.enabled,
+                    disabled: this.moduleConfig?.disabled
+                });
+            } catch (error) {
+                moduleConfigLog.error('Failed to load module config:', error);
+                this.error = error.message || 'Failed to load module configuration';
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        async toggleModule(module) {
+            if (module.is_core) {
+                moduleConfigLog.warn('Cannot toggle core module:', module.code);
+                return;
+            }
+
+            this.saving = true;
+            this.error = null;
+            this.successMessage = null;
+
+            const action = module.is_enabled ? 'disable' : 'enable';
+
+            try {
+                const platformId = this.platform?.id;
+                const endpoint = `/admin/modules/platforms/${platformId}/${action}`;
+
+                const result = await apiClient.post(endpoint, {
+                    module_code: module.code
+                });
+
+                moduleConfigLog.info(`${action}d module:`, module.code, result);
+
+                // Show success message
+                if (result.also_enabled?.length > 0) {
+                    this.successMessage = `Module '${module.name}' enabled. Also enabled dependencies: ${result.also_enabled.join(', ')}`;
+                } else if (result.also_disabled?.length > 0) {
+                    this.successMessage = `Module '${module.name}' disabled. Also disabled dependents: ${result.also_disabled.join(', ')}`;
+                } else {
+                    this.successMessage = `Module '${module.name}' ${action}d successfully`;
+                }
+
+                // Reload module config to get updated state
+                await this.loadModuleConfig();
+
+                // Clear success message after delay
+                setTimeout(() => {
+                    this.successMessage = null;
+                }, 5000);
+
+            } catch (error) {
+                moduleConfigLog.error(`Failed to ${action} module:`, error);
+                this.error = error.message || `Failed to ${action} module`;
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        async enableAll() {
+            if (!confirm('This will enable all modules. Continue?')) {
+                return;
+            }
+
+            this.saving = true;
+            this.error = null;
+            this.successMessage = null;
+
+            try {
+                const platformId = this.platform?.id;
+                const result = await apiClient.post(`/admin/modules/platforms/${platformId}/enable-all`);
+
+                moduleConfigLog.info('Enabled all modules:', result);
+                this.successMessage = `All ${result.enabled_count} modules enabled`;
+
+                // Reload module config
+                await this.loadModuleConfig();
+
+                setTimeout(() => {
+                    this.successMessage = null;
+                }, 5000);
+
+            } catch (error) {
+                moduleConfigLog.error('Failed to enable all modules:', error);
+                this.error = error.message || 'Failed to enable all modules';
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        async disableOptional() {
+            if (!confirm('This will disable all optional modules, keeping only core modules. Continue?')) {
+                return;
+            }
+
+            this.saving = true;
+            this.error = null;
+            this.successMessage = null;
+
+            try {
+                const platformId = this.platform?.id;
+                const result = await apiClient.post(`/admin/modules/platforms/${platformId}/disable-optional`);
+
+                moduleConfigLog.info('Disabled optional modules:', result);
+                this.successMessage = `Optional modules disabled. Core modules kept: ${result.core_modules.join(', ')}`;
+
+                // Reload module config
+                await this.loadModuleConfig();
+
+                setTimeout(() => {
+                    this.successMessage = null;
+                }, 5000);
+
+            } catch (error) {
+                moduleConfigLog.error('Failed to disable optional modules:', error);
+                this.error = error.message || 'Failed to disable optional modules';
+            } finally {
+                this.saving = false;
+            }
+        }
+    };
+}

app/modules/tenancy/static/admin/js/platforms.js

@@ -0,0 +1,80 @@
+/**
+ * Platforms Manager - Alpine.js Component
+ *
+ * Handles platform listing and management for multi-platform CMS.
+ */
+
+const platformsLog = window.LogConfig.createLogger('PLATFORMS');
+
+function platformsManager() {
+  return {
+    // Inherit base layout functionality from init-alpine.js
+    ...data(),
+
+    // Page identification
+    currentPage: "platforms",
+
+    // State
+    platforms: [],
+    loading: true,
+    error: null,
+
+    // Lifecycle
+    async init() {
+      platformsLog.info('=== PLATFORMS PAGE INITIALIZING ===');
+
+      // Duplicate initialization guard
+      if (window._adminPlatformsInitialized) {
+        platformsLog.warn('Platforms page already initialized, skipping...');
+        return;
+      }
+      window._adminPlatformsInitialized = true;
+
+      try {
+        await this.loadPlatforms();
+        platformsLog.info('=== PLATFORMS PAGE INITIALIZATION COMPLETE ===');
+      } catch (error) {
+        window.LogConfig.logError(error, 'Platforms Init');
+        this.error = 'Failed to initialize page';
+      }
+    },
+
+    // API Methods
+    async loadPlatforms() {
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const response = await apiClient.get("/admin/platforms");
+        this.platforms = response.platforms || [];
+        platformsLog.info(`Loaded ${this.platforms.length} platforms`);
+      } catch (err) {
+        platformsLog.error("Error loading platforms:", err);
+        this.error = err.message || "Failed to load platforms";
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // Helper Methods
+    getPlatformIcon(code) {
+      const icons = {
+        oms: "clipboard-list",
+        loyalty: "star",
+        sitebuilder: "template",
+        default: "globe-alt",
+      };
+      return icons[code] || icons.default;
+    },
+
+    formatDate(dateString) {
+      if (!dateString) return "—";
+      const date = new Date(dateString);
+      return date.toLocaleDateString("fr-LU", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+    },
+  };
+}

app/modules/tenancy/static/admin/js/select-platform.js

@@ -0,0 +1,158 @@
+// static/admin/js/select-platform.js
+// Platform selection page for platform admins
+
+const platformLog = window.LogConfig ? window.LogConfig.createLogger('PLATFORM_SELECT') : console;
+
+function selectPlatform() {
+    return {
+        dark: false,
+        loading: true,
+        selecting: false,
+        error: null,
+        platforms: [],
+        isSuperAdmin: false,
+
+        async init() {
+            platformLog.info('=== PLATFORM SELECTION PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._platformSelectInitialized) {
+                platformLog.warn('Platform selection page already initialized, skipping...');
+                return;
+            }
+            window._platformSelectInitialized = true;
+
+            // Set theme
+            this.dark = localStorage.getItem('theme') === 'dark';
+
+            // Check if user is logged in
+            const token = localStorage.getItem('admin_token');
+            if (!token) {
+                platformLog.warn('No token found, redirecting to login');
+                window.location.href = '/admin/login';
+                return;
+            }
+
+            // Load accessible platforms
+            await this.loadPlatforms();
+        },
+
+        async loadPlatforms() {
+            this.loading = true;
+            this.error = null;
+
+            try {
+                platformLog.info('Fetching accessible platforms...');
+                const response = await apiClient.get('/admin/auth/accessible-platforms');
+                platformLog.debug('Platforms response:', response);
+
+                this.isSuperAdmin = response.is_super_admin;
+                this.platforms = response.platforms || [];
+
+                if (this.isSuperAdmin) {
+                    platformLog.info('User is super admin, redirecting to dashboard...');
+                    setTimeout(() => {
+                        window.location.href = '/admin/dashboard';
+                    }, 1500);
+                    return;
+                }
+
+                if (!response.requires_platform_selection && this.platforms.length === 1) {
+                    // Only one platform assigned, auto-select it
+                    platformLog.info('Single platform assigned, auto-selecting...');
+                    await this.selectPlatform(this.platforms[0]);
+                    return;
+                }
+
+                platformLog.info(`Loaded ${this.platforms.length} platforms`);
+
+            } catch (error) {
+                platformLog.error('Failed to load platforms:', error);
+
+                if (error.message && error.message.includes('401')) {
+                    // Token expired or invalid
+                    window.location.href = '/admin/login';
+                    return;
+                }
+
+                this.error = error.message || 'Failed to load platforms. Please try again.';
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        async selectPlatform(platform) {
+            if (this.selecting) return;
+
+            this.selecting = true;
+            this.error = null;
+            platformLog.info(`Selecting platform: ${platform.code}`);
+
+            try {
+                const response = await apiClient.post(
+                    `/admin/auth/select-platform?platform_id=${platform.id}`
+                );
+
+                platformLog.debug('Platform selection response:', response);
+
+                if (response.access_token) {
+                    // Store new token with platform context
+                    localStorage.setItem('admin_token', response.access_token);
+                    localStorage.setItem('token', response.access_token);
+
+                    // Store selected platform info
+                    localStorage.setItem('admin_platform', JSON.stringify({
+                        id: platform.id,
+                        code: platform.code,
+                        name: platform.name
+                    }));
+
+                    // Update user data if provided
+                    if (response.user) {
+                        localStorage.setItem('admin_user', JSON.stringify(response.user));
+                    }
+
+                    platformLog.info('Platform selected successfully, redirecting to dashboard...');
+
+                    // Redirect to dashboard or last visited page
+                    const lastPage = localStorage.getItem('admin_last_visited_page');
+                    const redirectTo = (lastPage && lastPage.startsWith('/admin/') && !lastPage.includes('/login') && !lastPage.includes('/select-platform'))
+                        ? lastPage
+                        : '/admin/dashboard';
+
+                    window.location.href = redirectTo;
+                } else {
+                    throw new Error('No token received from server');
+                }
+
+            } catch (error) {
+                platformLog.error('Platform selection failed:', error);
+                this.error = error.message || 'Failed to select platform. Please try again.';
+                this.selecting = false;
+            }
+        },
+
+        async logout() {
+            platformLog.info('Logging out...');
+
+            try {
+                await apiClient.post('/admin/auth/logout');
+            } catch (error) {
+                platformLog.error('Logout API error:', error);
+            } finally {
+                localStorage.removeItem('admin_token');
+                localStorage.removeItem('admin_user');
+                localStorage.removeItem('admin_platform');
+                localStorage.removeItem('token');
+                window.location.href = '/admin/login';
+            }
+        },
+
+        toggleDarkMode() {
+            this.dark = !this.dark;
+            localStorage.setItem('theme', this.dark ? 'dark' : 'light');
+        }
+    };
+}
+
+platformLog.info('Platform selection module loaded');

app/modules/tenancy/static/admin/js/user-create.js

@@ -0,0 +1,157 @@
+// static/admin/js/user-create.js
+
+// Create custom logger for admin user create
+const userCreateLog = window.LogConfig.createLogger('ADMIN-USER-CREATE');
+
+function adminUserCreate() {
+    return {
+        // Inherit base layout functionality from init-alpine.js
+        ...data(),
+
+        // Admin user create page specific state
+        currentPage: 'admin-users',
+        loading: false,
+        formData: {
+            username: '',
+            email: '',
+            password: '',
+            first_name: '',
+            last_name: '',
+            is_super_admin: false,
+            platform_ids: []
+        },
+        platforms: [],
+        errors: {},
+        saving: false,
+
+        // Initialize
+        async init() {
+            userCreateLog.info('=== ADMIN USER CREATE PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._userCreateInitialized) {
+                userCreateLog.warn('Admin user create page already initialized, skipping...');
+                return;
+            }
+            window._userCreateInitialized = true;
+
+            // Load platforms for admin assignment
+            await this.loadPlatforms();
+
+            userCreateLog.info('=== ADMIN USER CREATE PAGE INITIALIZATION COMPLETE ===');
+        },
+
+        // Load available platforms
+        async loadPlatforms() {
+            try {
+                userCreateLog.debug('Loading platforms...');
+                const response = await apiClient.get('/admin/platforms');
+                this.platforms = response.platforms || response.items || [];
+                userCreateLog.debug(`Loaded ${this.platforms.length} platforms`);
+            } catch (error) {
+                userCreateLog.error('Failed to load platforms:', error);
+                this.platforms = [];
+            }
+        },
+
+        // Validate form
+        validateForm() {
+            this.errors = {};
+
+            if (!this.formData.username.trim()) {
+                this.errors.username = 'Username is required';
+            }
+            if (!this.formData.email.trim()) {
+                this.errors.email = 'Email is required';
+            }
+            if (!this.formData.password || this.formData.password.length < 6) {
+                this.errors.password = 'Password must be at least 6 characters';
+            }
+
+            // Platform admin validation: must have at least one platform
+            if (!this.formData.is_super_admin) {
+                if (!this.formData.platform_ids || this.formData.platform_ids.length === 0) {
+                    this.errors.platform_ids = 'Platform admins must be assigned to at least one platform';
+                }
+            }
+
+            return Object.keys(this.errors).length === 0;
+        },
+
+        // Submit form
+        async handleSubmit() {
+            userCreateLog.info('=== CREATING ADMIN USER ===');
+            userCreateLog.debug('Form data:', { ...this.formData, password: '[REDACTED]' });
+
+            if (!this.validateForm()) {
+                userCreateLog.warn('Validation failed:', this.errors);
+                Utils.showToast('Please fix the errors before submitting', 'error');
+                return;
+            }
+
+            this.saving = true;
+
+            try {
+                // Use admin-users endpoint for creating admin users
+                const url = '/admin/admin-users';
+                const payload = {
+                    email: this.formData.email,
+                    username: this.formData.username,
+                    password: this.formData.password,
+                    first_name: this.formData.first_name || null,
+                    last_name: this.formData.last_name || null,
+                    is_super_admin: this.formData.is_super_admin,
+                    platform_ids: this.formData.is_super_admin ? [] : this.formData.platform_ids.map(id => parseInt(id))
+                };
+
+                window.LogConfig.logApiCall('POST', url, { ...payload, password: '[REDACTED]' }, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.post(url, payload);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('POST', url, response, 'response');
+                window.LogConfig.logPerformance('Create Admin User', duration);
+
+                const userType = this.formData.is_super_admin ? 'Super admin' : 'Platform admin';
+                Utils.showToast(`${userType} created successfully`, 'success');
+                userCreateLog.info(`${userType} created successfully in ${duration}ms`, response);
+
+                // Redirect to the admin users list
+                setTimeout(() => {
+                    window.location.href = `/admin/admin-users/${response.id}`;
+                }, 1500);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Create Admin User');
+
+                // Handle validation errors
+                if (error.details && error.details.validation_errors) {
+                    error.details.validation_errors.forEach(err => {
+                        const field = err.loc?.[1] || err.loc?.[0];
+                        if (field) {
+                            this.errors[field] = err.msg;
+                        }
+                    });
+                    userCreateLog.debug('Validation errors:', this.errors);
+                }
+
+                // Handle specific errors
+                if (error.message) {
+                    if (error.message.includes('Email already')) {
+                        this.errors.email = 'This email is already registered';
+                    } else if (error.message.includes('Username already')) {
+                        this.errors.username = 'This username is already taken';
+                    }
+                }
+
+                Utils.showToast(error.message || 'Failed to create admin user', 'error');
+            } finally {
+                this.saving = false;
+                userCreateLog.info('=== ADMIN USER CREATION COMPLETE ===');
+            }
+        }
+    };
+}
+
+userCreateLog.info('Admin user create module loaded');

app/modules/tenancy/static/admin/js/user-detail.js

@@ -0,0 +1,176 @@
+// noqa: js-006 - async init pattern is safe, loadData has try/catch
+// static/admin/js/user-detail.js
+
+// Create custom logger for user detail
+const userDetailLog = window.LogConfig.createLogger('USER-DETAIL');
+
+function adminUserDetail() {
+    return {
+        // Inherit base layout functionality from init-alpine.js
+        ...data(),
+
+        // User detail page specific state
+        currentPage: 'user-detail',
+        user: null,
+        loading: false,
+        saving: false,
+        error: null,
+        userId: null,
+
+        // Initialize
+        async init() {
+            userDetailLog.info('=== USER DETAIL PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._userDetailInitialized) {
+                userDetailLog.warn('User detail page already initialized, skipping...');
+                return;
+            }
+            window._userDetailInitialized = true;
+
+            // Get user ID from URL
+            const path = window.location.pathname;
+            const match = path.match(/\/admin\/users\/(\d+)$/);
+
+            if (match) {
+                this.userId = match[1];
+                userDetailLog.info('Viewing user:', this.userId);
+                await this.loadUser();
+            } else {
+                userDetailLog.error('No user ID in URL');
+                this.error = 'Invalid user URL';
+                Utils.showToast('Invalid user URL', 'error');
+            }
+
+            userDetailLog.info('=== USER DETAIL PAGE INITIALIZATION COMPLETE ===');
+        },
+
+        // Load user data
+        async loadUser() {
+            userDetailLog.info('Loading user details...');
+            this.loading = true;
+            this.error = null;
+
+            try {
+                const url = `/admin/users/${this.userId}`;
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.get(url);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+                window.LogConfig.logPerformance('Load User Details', duration);
+
+                this.user = response;
+
+                userDetailLog.info(`User loaded in ${duration}ms`, {
+                    id: this.user.id,
+                    username: this.user.username,
+                    role: this.user.role,
+                    is_active: this.user.is_active
+                });
+                userDetailLog.debug('Full user data:', this.user);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load User Details');
+                this.error = error.message || 'Failed to load user details';
+                Utils.showToast('Failed to load user details', 'error');
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // Format date
+        formatDate(dateString) {
+            if (!dateString) {
+                return '-';
+            }
+            return Utils.formatDate(dateString);
+        },
+
+        // Toggle user status
+        async toggleStatus() {
+            const action = this.user.is_active ? 'deactivate' : 'activate';
+            userDetailLog.info(`Toggle status: ${action}`);
+
+            if (!confirm(`Are you sure you want to ${action} ${this.user.username}?`)) {
+                userDetailLog.info('Status toggle cancelled by user');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/users/${this.userId}/status`;
+                window.LogConfig.logApiCall('PUT', url, null, 'request');
+
+                const response = await apiClient.put(url);
+
+                window.LogConfig.logApiCall('PUT', url, response, 'response');
+
+                this.user.is_active = response.is_active;
+                Utils.showToast(`User ${action}d successfully`, 'success');
+                userDetailLog.info(`User ${action}d successfully`);
+
+            } catch (error) {
+                window.LogConfig.logError(error, `Toggle Status (${action})`);
+                Utils.showToast(error.message || `Failed to ${action} user`, 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // Delete user
+        async deleteUser() {
+            userDetailLog.info('Delete user requested:', this.userId);
+
+            if (this.user?.owned_companies_count > 0) {
+                Utils.showToast(`Cannot delete user who owns ${this.user.owned_companies_count} company(ies). Transfer ownership first.`, 'error');
+                return;
+            }
+
+            if (!confirm(`Are you sure you want to delete "${this.user.username}"?\n\nThis action cannot be undone.`)) {
+                userDetailLog.info('Delete cancelled by user');
+                return;
+            }
+
+            // Second confirmation for safety
+            if (!confirm(`FINAL CONFIRMATION\n\nAre you absolutely sure you want to delete "${this.user.username}"?`)) {
+                userDetailLog.info('Delete cancelled by user (second confirmation)');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/users/${this.userId}`;
+                window.LogConfig.logApiCall('DELETE', url, null, 'request');
+
+                await apiClient.delete(url);
+
+                window.LogConfig.logApiCall('DELETE', url, null, 'response');
+
+                Utils.showToast('User deleted successfully', 'success');
+                userDetailLog.info('User deleted successfully');
+
+                // Redirect to users list
+                setTimeout(() => window.location.href = '/admin/users', 1500);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Delete User');
+                Utils.showToast(error.message || 'Failed to delete user', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // Refresh user data
+        async refresh() {
+            userDetailLog.info('=== USER REFRESH TRIGGERED ===');
+            await this.loadUser();
+            Utils.showToast('User details refreshed', 'success');
+            userDetailLog.info('=== USER REFRESH COMPLETE ===');
+        }
+    };
+}
+
+userDetailLog.info('User detail module loaded');

app/modules/tenancy/static/admin/js/user-edit.js

@@ -0,0 +1,229 @@
+// static/admin/js/user-edit.js
+
+// Create custom logger for user edit
+const userEditLog = window.LogConfig.createLogger('USER-EDIT');
+
+function adminUserEdit() {
+    return {
+        // Inherit base layout functionality from init-alpine.js
+        ...data(),
+
+        // User edit page specific state
+        currentPage: 'user-edit',
+        loading: false,
+        user: null,
+        formData: {},
+        errors: {},
+        loadingUser: false,
+        saving: false,
+        userId: null,
+
+        // Initialize
+        async init() {
+            userEditLog.info('=== USER EDIT PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._userEditInitialized) {
+                userEditLog.warn('User edit page already initialized, skipping...');
+                return;
+            }
+            window._userEditInitialized = true;
+
+            try {
+                // Get user ID from URL
+                const path = window.location.pathname;
+                const match = path.match(/\/admin\/users\/(\d+)\/edit/);
+
+                if (match) {
+                    this.userId = parseInt(match[1], 10);
+                    userEditLog.info('Editing user:', this.userId);
+                    await this.loadUser();
+                } else {
+                    userEditLog.error('No user ID in URL');
+                    Utils.showToast('Invalid user URL', 'error');
+                    setTimeout(() => window.location.href = '/admin/users', 2000);
+                }
+
+                userEditLog.info('=== USER EDIT PAGE INITIALIZATION COMPLETE ===');
+            } catch (error) {
+                window.LogConfig.logError(error, 'User Edit Init');
+                Utils.showToast('Failed to initialize page', 'error');
+            }
+        },
+
+        // Load user data
+        async loadUser() {
+            userEditLog.info('Loading user data...');
+            this.loadingUser = true;
+
+            try {
+                const url = `/admin/users/${this.userId}`;
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.get(url);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+                window.LogConfig.logPerformance('Load User', duration);
+
+                this.user = response;
+
+                // Initialize form data
+                this.formData = {
+                    username: response.username || '',
+                    email: response.email || '',
+                    first_name: response.first_name || '',
+                    last_name: response.last_name || '',
+                    role: response.role || 'vendor',
+                    is_email_verified: response.is_email_verified || false
+                };
+
+                userEditLog.info(`User loaded in ${duration}ms`, {
+                    user_id: this.user.id,
+                    username: this.user.username
+                });
+                userEditLog.debug('Form data initialized:', this.formData);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load User');
+                Utils.showToast('Failed to load user', 'error');
+                setTimeout(() => window.location.href = '/admin/users', 2000);
+            } finally {
+                this.loadingUser = false;
+            }
+        },
+
+        // Format date
+        formatDate(dateString) {
+            if (!dateString) {
+                return '-';
+            }
+            return Utils.formatDate(dateString);
+        },
+
+        // Submit form
+        async handleSubmit() {
+            userEditLog.info('=== SUBMITTING USER UPDATE ===');
+            userEditLog.debug('Form data:', this.formData);
+
+            this.errors = {};
+            this.saving = true;
+
+            try {
+                const url = `/admin/users/${this.userId}`;
+                window.LogConfig.logApiCall('PUT', url, this.formData, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.put(url, this.formData);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('PUT', url, response, 'response');
+                window.LogConfig.logPerformance('Update User', duration);
+
+                this.user = response;
+                Utils.showToast('User updated successfully', 'success');
+                userEditLog.info(`User updated successfully in ${duration}ms`, response);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Update User');
+
+                // Handle validation errors
+                if (error.details && error.details.validation_errors) {
+                    error.details.validation_errors.forEach(err => {
+                        const field = err.loc?.[1] || err.loc?.[0];
+                        if (field) {
+                            this.errors[field] = err.msg;
+                        }
+                    });
+                    userEditLog.debug('Validation errors:', this.errors);
+                }
+
+                Utils.showToast(error.message || 'Failed to update user', 'error');
+            } finally {
+                this.saving = false;
+                userEditLog.info('=== USER UPDATE COMPLETE ===');
+            }
+        },
+
+        // Toggle user status
+        async toggleStatus() {
+            const action = this.user.is_active ? 'deactivate' : 'activate';
+            userEditLog.info(`Toggle status: ${action}`);
+
+            if (!confirm(`Are you sure you want to ${action} ${this.user.username}?`)) {
+                userEditLog.info('Status toggle cancelled by user');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/users/${this.userId}/status`;
+                window.LogConfig.logApiCall('PUT', url, null, 'request');
+
+                const response = await apiClient.put(url);
+
+                window.LogConfig.logApiCall('PUT', url, response, 'response');
+
+                this.user.is_active = response.is_active;
+                Utils.showToast(`User ${action}d successfully`, 'success');
+                userEditLog.info(`User ${action}d successfully`);
+
+            } catch (error) {
+                window.LogConfig.logError(error, `Toggle Status (${action})`);
+                Utils.showToast(error.message || `Failed to ${action} user`, 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // Delete user
+        async deleteUser() {
+            userEditLog.info('=== DELETING USER ===');
+
+            if (this.user.owned_companies_count > 0) {
+                Utils.showToast(`Cannot delete user who owns ${this.user.owned_companies_count} company(ies). Transfer ownership first.`, 'error');
+                return;
+            }
+
+            if (!confirm(`Are you sure you want to delete user "${this.user.username}"?\n\nThis action cannot be undone.`)) {
+                userEditLog.info('User deletion cancelled by user');
+                return;
+            }
+
+            // Double confirmation for critical action
+            if (!confirm(`FINAL CONFIRMATION: Delete "${this.user.username}"?\n\nThis will permanently delete the user.`)) {
+                userEditLog.info('User deletion cancelled at final confirmation');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/users/${this.userId}`;
+
+                window.LogConfig.logApiCall('DELETE', url, null, 'request');
+
+                await apiClient.delete(url);
+
+                window.LogConfig.logApiCall('DELETE', url, null, 'response');
+
+                Utils.showToast('User deleted successfully', 'success');
+                userEditLog.info('User deleted successfully');
+
+                // Redirect to users list
+                setTimeout(() => {
+                    window.location.href = '/admin/users';
+                }, 1500);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Delete User');
+                Utils.showToast(error.message || 'Failed to delete user', 'error');
+            } finally {
+                this.saving = false;
+                userEditLog.info('=== USER DELETION COMPLETE ===');
+            }
+        }
+    };
+}
+
+userEditLog.info('User edit module loaded');

app/modules/tenancy/static/admin/js/users.js

@@ -0,0 +1,299 @@
+// noqa: js-006 - async init pattern is safe, loadData has try/catch
+// static/admin/js/users.js
+
+// ✅ Use centralized logger - ONE LINE!
+const usersLog = window.LogConfig.loggers.users;
+
+function adminUsers() {
+    return {
+        // Inherit base layout functionality
+        ...data(),
+
+        // Set page identifier
+        currentPage: 'users',
+
+        // State
+        users: [],
+        loading: false,
+        error: null,
+        filters: {
+            search: '',
+            role: '',
+            is_active: ''
+        },
+        stats: {
+            total_users: 0,
+            active_users: 0,
+            inactive_users: 0,
+            admin_users: 0
+        },
+        pagination: {
+            page: 1,
+            per_page: 20,
+            total: 0,
+            pages: 0
+        },
+
+        // Initialization
+        async init() {
+            usersLog.info('=== USERS PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._usersInitialized) {
+                usersLog.warn('Users page already initialized, skipping...');
+                return;
+            }
+            window._usersInitialized = true;
+
+            // Load platform settings for rows per page
+            if (window.PlatformSettings) {
+                this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
+            }
+
+            await this.loadUsers();
+            await this.loadStats();
+
+            usersLog.info('=== USERS PAGE INITIALIZATION COMPLETE ===');
+        },
+
+        // Format date helper
+        formatDate(dateString) {
+            if (!dateString) return '-';
+            return Utils.formatDate(dateString);
+        },
+
+        // Computed: Total number of pages
+        get totalPages() {
+            return this.pagination.pages;
+        },
+
+        // Computed: Start index for pagination display
+        get startIndex() {
+            if (this.pagination.total === 0) return 0;
+            return (this.pagination.page - 1) * this.pagination.per_page + 1;
+        },
+
+        // Computed: End index for pagination display
+        get endIndex() {
+            const end = this.pagination.page * this.pagination.per_page;
+            return end > this.pagination.total ? this.pagination.total : end;
+        },
+
+        // Computed: Generate page numbers array with ellipsis
+        get pageNumbers() {
+            const pages = [];
+            const totalPages = this.totalPages;
+            const current = this.pagination.page;
+
+            if (totalPages <= 7) {
+                // Show all pages if 7 or fewer
+                for (let i = 1; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            } else {
+                // Always show first page
+                pages.push(1);
+
+                if (current > 3) {
+                    pages.push('...');
+                }
+
+                // Show pages around current page
+                const start = Math.max(2, current - 1);
+                const end = Math.min(totalPages - 1, current + 1);
+
+                for (let i = start; i <= end; i++) {
+                    pages.push(i);
+                }
+
+                if (current < totalPages - 2) {
+                    pages.push('...');
+                }
+
+                // Always show last page
+                pages.push(totalPages);
+            }
+
+            return pages;
+        },
+
+        // Load users from API
+        async loadUsers() {
+            usersLog.info('Loading users...');
+            this.loading = true;
+            this.error = null;
+
+            try {
+                const params = new URLSearchParams();
+                params.append('page', this.pagination.page);
+                params.append('per_page', this.pagination.per_page);
+
+                if (this.filters.search) {
+                    params.append('search', this.filters.search);
+                }
+                if (this.filters.role) {
+                    params.append('role', this.filters.role);
+                }
+                if (this.filters.is_active) {
+                    params.append('is_active', this.filters.is_active);
+                }
+
+                const url = `/admin/users?${params}`;
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.get(url);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+                window.LogConfig.logPerformance('Load Users', duration);
+
+                if (response.items) {
+                    this.users = response.items;
+                    this.pagination.total = response.total;
+                    this.pagination.pages = response.pages;
+                    this.pagination.page = response.page;
+                    this.pagination.per_page = response.per_page;
+                    usersLog.info(`Loaded ${this.users.length} users`);
+                }
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load Users');
+                this.error = error.message || 'Failed to load users';
+                Utils.showToast('Failed to load users', 'error');
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // Load statistics
+        async loadStats() {
+            usersLog.info('Loading user statistics...');
+            
+            try {
+                const url = '/admin/users/stats';
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+                
+                const response = await apiClient.get(url);  // ✅ Fixed: lowercase apiClient
+                
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+                
+                if (response) {
+                    this.stats = response;
+                    usersLog.debug('Stats loaded:', this.stats);
+                }
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load Stats');
+            }
+        },
+
+        // Search with debounce
+        debouncedSearch() {
+            // Clear existing timeout
+            if (this._searchTimeout) {
+                clearTimeout(this._searchTimeout);
+            }
+            // Set new timeout
+            this._searchTimeout = setTimeout(() => {
+                usersLog.info('Search triggered:', this.filters.search);
+                this.pagination.page = 1;
+                this.loadUsers();
+            }, 300);
+        },
+
+        // Pagination
+        nextPage() {
+            if (this.pagination.page < this.pagination.pages) {
+                this.pagination.page++;
+                usersLog.info('Next page:', this.pagination.page);
+                this.loadUsers();
+            }
+        },
+
+        previousPage() {
+            if (this.pagination.page > 1) {
+                this.pagination.page--;
+                usersLog.info('Previous page:', this.pagination.page);
+                this.loadUsers();
+            }
+        },
+
+        goToPage(pageNum) {
+            if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
+                this.pagination.page = pageNum;
+                usersLog.info('Go to page:', this.pagination.page);
+                this.loadUsers();
+            }
+        },
+
+        // Actions
+        viewUser(user) {
+            usersLog.info('View user:', user.username);
+            window.location.href = `/admin/users/${user.id}`;
+        },
+
+        editUser(user) {
+            usersLog.info('Edit user:', user.username);
+            window.location.href = `/admin/users/${user.id}/edit`;
+        },
+
+        async toggleUserStatus(user) {
+            const action = user.is_active ? 'deactivate' : 'activate';
+            usersLog.info(`Toggle user status: ${action}`, user.username);
+            
+            if (!confirm(`Are you sure you want to ${action} ${user.username}?`)) {
+                usersLog.info('Status toggle cancelled by user');
+                return;
+            }
+
+            try {
+                const url = `/admin/users/${user.id}/status`;
+                window.LogConfig.logApiCall('PUT', url, { is_active: !user.is_active }, 'request');
+                
+                await apiClient.put(url, {  // ✅ Fixed: lowercase apiClient
+                    is_active: !user.is_active
+                });
+                
+                Utils.showToast(`User ${action}d successfully`, 'success');
+                usersLog.info(`User ${action}d successfully`);
+                
+                await this.loadUsers();
+                await this.loadStats();
+            } catch (error) {
+                window.LogConfig.logError(error, `Toggle User Status (${action})`);
+                Utils.showToast(`Failed to ${action} user`, 'error');
+            }
+        },
+
+        async deleteUser(user) {
+            usersLog.warn('Delete user requested:', user.username);
+            
+            if (!confirm(`Are you sure you want to delete ${user.username}? This action cannot be undone.`)) {
+                usersLog.info('Delete cancelled by user');
+                return;
+            }
+
+            try {
+                const url = `/admin/users/${user.id}`;
+                window.LogConfig.logApiCall('DELETE', url, null, 'request');
+                
+                await apiClient.delete(url);  // ✅ Fixed: lowercase apiClient
+                
+                Utils.showToast('User deleted successfully', 'success');
+                usersLog.info('User deleted successfully');
+                
+                await this.loadUsers();
+                await this.loadStats();
+            } catch (error) {
+                window.LogConfig.logError(error, 'Delete User');
+                Utils.showToast('Failed to delete user', 'error');
+            }
+        },
+
+        openCreateModal() {
+            usersLog.info('Open create user modal');
+            window.location.href = '/admin/users/create';
+        }
+    };
+}
+
+usersLog.info('Users module loaded');

app/modules/tenancy/static/admin/js/vendor-create.js

@@ -0,0 +1,206 @@
+// static/admin/js/vendor-create.js
+/**
+ * Admin Vendor Create Page
+ * Handles vendor creation form with company selection
+ */
+
+// Use centralized logger
+const vendorCreateLog = window.LogConfig.loggers.vendors;
+
+vendorCreateLog.info('Loading vendor create module...');
+
+function adminVendorCreate() {
+    vendorCreateLog.debug('adminVendorCreate() called');
+
+    return {
+        // Inherit base layout functionality
+        ...data(),
+
+        // Page identifier
+        currentPage: 'vendors',
+
+        // Companies list for dropdown
+        companies: [],
+        loadingCompanies: true,
+
+        // Platforms list for selection
+        platforms: [],
+
+        // Form data matching VendorCreate schema
+        formData: {
+            company_id: '',
+            vendor_code: '',
+            subdomain: '',
+            name: '',
+            description: '',
+            letzshop_csv_url_fr: '',
+            letzshop_csv_url_en: '',
+            letzshop_csv_url_de: '',
+            platform_ids: []
+        },
+
+        // UI state
+        loading: false,
+        successMessage: false,
+        errorMessage: '',
+        createdVendor: null,
+
+        // Initialize
+        async init() {
+            // Guard against multiple initialization
+            if (window._adminVendorCreateInitialized) return;
+            window._adminVendorCreateInitialized = true;
+
+            try {
+                vendorCreateLog.info('Initializing vendor create page');
+                await Promise.all([
+                    this.loadCompanies(),
+                    this.loadPlatforms()
+                ]);
+            } catch (error) {
+                vendorCreateLog.error('Failed to initialize vendor create:', error);
+            }
+        },
+
+        // Load companies for dropdown
+        async loadCompanies() {
+            this.loadingCompanies = true;
+            try {
+                const response = await apiClient.get('/admin/companies?limit=1000');
+                this.companies = response.companies || [];
+                vendorCreateLog.debug('Loaded companies:', this.companies.length);
+            } catch (error) {
+                vendorCreateLog.error('Failed to load companies:', error);
+                this.errorMessage = 'Failed to load companies. Please refresh the page.';
+            } finally {
+                this.loadingCompanies = false;
+            }
+        },
+
+        // Load platforms for selection
+        async loadPlatforms() {
+            try {
+                const response = await apiClient.get('/admin/platforms');
+                this.platforms = response.platforms || response.items || [];
+                vendorCreateLog.debug('Loaded platforms:', this.platforms.length);
+            } catch (error) {
+                vendorCreateLog.error('Failed to load platforms:', error);
+                this.platforms = [];
+            }
+        },
+
+        // Auto-generate subdomain from vendor name
+        autoGenerateSubdomain() {
+            if (!this.formData.name) {
+                return;
+            }
+
+            // Convert name to subdomain format
+            const subdomain = this.formData.name
+                .toLowerCase()
+                .replace(/[^a-z0-9\s-]/g, '') // Remove special chars
+                .replace(/\s+/g, '-')          // Replace spaces with hyphens
+                .replace(/-+/g, '-')           // Replace multiple hyphens with single
+                .replace(/^-|-$/g, '');        // Remove leading/trailing hyphens
+
+            this.formData.subdomain = subdomain;
+            vendorCreateLog.debug('Auto-generated subdomain:', subdomain);
+        },
+
+        // Create vendor
+        async createVendor() {
+            this.loading = true;
+            this.errorMessage = '';
+            this.successMessage = false;
+            this.createdVendor = null;
+
+            try {
+                vendorCreateLog.info('Creating vendor:', {
+                    company_id: this.formData.company_id,
+                    vendor_code: this.formData.vendor_code,
+                    name: this.formData.name
+                });
+
+                // Prepare payload - only include non-empty values
+                const payload = {
+                    company_id: parseInt(this.formData.company_id),
+                    vendor_code: this.formData.vendor_code.toUpperCase(),
+                    subdomain: this.formData.subdomain.toLowerCase(),
+                    name: this.formData.name
+                };
+
+                // Add optional fields if provided
+                if (this.formData.description) {
+                    payload.description = this.formData.description;
+                }
+                if (this.formData.letzshop_csv_url_fr) {
+                    payload.letzshop_csv_url_fr = this.formData.letzshop_csv_url_fr;
+                }
+                if (this.formData.letzshop_csv_url_en) {
+                    payload.letzshop_csv_url_en = this.formData.letzshop_csv_url_en;
+                }
+                if (this.formData.letzshop_csv_url_de) {
+                    payload.letzshop_csv_url_de = this.formData.letzshop_csv_url_de;
+                }
+
+                // Add platform assignments
+                if (this.formData.platform_ids && this.formData.platform_ids.length > 0) {
+                    payload.platform_ids = this.formData.platform_ids.map(id => parseInt(id));
+                }
+
+                const response = await apiClient.post('/admin/vendors', payload);
+
+                vendorCreateLog.info('Vendor created successfully:', response.vendor_code);
+
+                // Store created vendor details
+                this.createdVendor = {
+                    vendor_code: response.vendor_code,
+                    name: response.name,
+                    subdomain: response.subdomain,
+                    company_name: response.company_name
+                };
+
+                this.successMessage = true;
+
+                // Reset form
+                this.formData = {
+                    company_id: '',
+                    vendor_code: '',
+                    subdomain: '',
+                    name: '',
+                    description: '',
+                    letzshop_csv_url_fr: '',
+                    letzshop_csv_url_en: '',
+                    letzshop_csv_url_de: '',
+                    platform_ids: []
+                };
+
+                // Scroll to top to show success message
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+
+                // Redirect after 3 seconds
+                setTimeout(() => {
+                    window.location.href = `/admin/vendors/${response.vendor_code}`;
+                }, 3000);
+
+            } catch (error) {
+                vendorCreateLog.error('Failed to create vendor:', error);
+
+                // Parse error message
+                if (error.message) {
+                    this.errorMessage = error.message;
+                } else if (error.detail) {
+                    this.errorMessage = error.detail;
+                } else {
+                    this.errorMessage = 'Failed to create vendor. Please try again.';
+                }
+
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            } finally {
+                this.loading = false;
+            }
+        }
+    };
+}
+
+vendorCreateLog.info('Vendor create module loaded');

app/modules/tenancy/static/admin/js/vendor-detail.js

@@ -0,0 +1,223 @@
+// noqa: js-006 - async init pattern is safe, loadData has try/catch
+// static/admin/js/vendor-detail.js
+
+// ✅ Use centralized logger - ONE LINE!
+// Create custom logger for vendor detail
+const detailLog = window.LogConfig.createLogger('VENDOR-DETAIL');
+
+function adminVendorDetail() {
+    return {
+        // Inherit base layout functionality from init-alpine.js
+        ...data(),
+
+        // Vendor detail page specific state
+        currentPage: 'vendor-detail',
+        vendor: null,
+        subscription: null,
+        loading: false,
+        error: null,
+        vendorCode: null,
+        showSubscriptionModal: false,
+
+        // Initialize
+        async init() {
+            detailLog.info('=== VENDOR DETAIL PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._vendorDetailInitialized) {
+                detailLog.warn('Vendor detail page already initialized, skipping...');
+                return;
+            }
+            window._vendorDetailInitialized = true;
+
+            // Get vendor code from URL
+            const path = window.location.pathname;
+            const match = path.match(/\/admin\/vendors\/([^\/]+)$/);
+
+            if (match) {
+                this.vendorCode = match[1];
+                detailLog.info('Viewing vendor:', this.vendorCode);
+                await this.loadVendor();
+                // Load subscription after vendor is loaded
+                if (this.vendor?.id) {
+                    await this.loadSubscription();
+                }
+            } else {
+                detailLog.error('No vendor code in URL');
+                this.error = 'Invalid vendor URL';
+                Utils.showToast('Invalid vendor URL', 'error');
+            }
+
+            detailLog.info('=== VENDOR DETAIL PAGE INITIALIZATION COMPLETE ===');
+        },
+
+        // Load vendor data
+        async loadVendor() {
+            detailLog.info('Loading vendor details...');
+            this.loading = true;
+            this.error = null;
+
+            try {
+                const url = `/admin/vendors/${this.vendorCode}`;
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.get(url);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+                window.LogConfig.logPerformance('Load Vendor Details', duration);
+
+                this.vendor = response;
+
+                detailLog.info(`Vendor loaded in ${duration}ms`, {
+                    vendor_code: this.vendor.vendor_code,
+                    name: this.vendor.name,
+                    is_verified: this.vendor.is_verified,
+                    is_active: this.vendor.is_active
+                });
+                detailLog.debug('Full vendor data:', this.vendor);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load Vendor Details');
+                this.error = error.message || 'Failed to load vendor details';
+                Utils.showToast('Failed to load vendor details', 'error');
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // Format date (matches dashboard pattern)
+        formatDate(dateString) {
+            if (!dateString) {
+                detailLog.debug('formatDate called with empty dateString');
+                return '-';
+            }
+            const formatted = Utils.formatDate(dateString);
+            detailLog.debug(`Date formatted: ${dateString} -> ${formatted}`);
+            return formatted;
+        },
+
+        // Load subscription data for this vendor
+        async loadSubscription() {
+            if (!this.vendor?.id) {
+                detailLog.warn('Cannot load subscription: no vendor ID');
+                return;
+            }
+
+            detailLog.info('Loading subscription for vendor:', this.vendor.id);
+
+            try {
+                const url = `/admin/subscriptions/${this.vendor.id}`;
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+
+                const response = await apiClient.get(url);
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+
+                this.subscription = response;
+                detailLog.info('Subscription loaded:', {
+                    tier: this.subscription?.tier,
+                    status: this.subscription?.status,
+                    orders_this_period: this.subscription?.orders_this_period
+                });
+
+            } catch (error) {
+                // 404 means no subscription exists - that's OK
+                if (error.status === 404) {
+                    detailLog.info('No subscription found for vendor');
+                    this.subscription = null;
+                } else {
+                    detailLog.warn('Failed to load subscription:', error.message);
+                }
+            }
+        },
+
+        // Get usage bar color based on percentage
+        getUsageBarColor(current, limit) {
+            if (!limit || limit === 0) return 'bg-blue-500';
+            const percent = (current / limit) * 100;
+            if (percent >= 90) return 'bg-red-500';
+            if (percent >= 75) return 'bg-yellow-500';
+            return 'bg-green-500';
+        },
+
+        // Create a new subscription for this vendor
+        async createSubscription() {
+            if (!this.vendor?.id) {
+                Utils.showToast('No vendor loaded', 'error');
+                return;
+            }
+
+            detailLog.info('Creating subscription for vendor:', this.vendor.id);
+
+            try {
+                // Create a trial subscription with default tier
+                const url = `/admin/subscriptions/${this.vendor.id}`;
+                const data = {
+                    tier: 'essential',
+                    status: 'trial',
+                    trial_days: 14,
+                    is_annual: false
+                };
+
+                window.LogConfig.logApiCall('POST', url, data, 'request');
+                const response = await apiClient.post(url, data);
+                window.LogConfig.logApiCall('POST', url, response, 'response');
+
+                this.subscription = response;
+                Utils.showToast('Subscription created successfully', 'success');
+                detailLog.info('Subscription created:', this.subscription);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Create Subscription');
+                Utils.showToast(error.message || 'Failed to create subscription', 'error');
+            }
+        },
+
+        // Delete vendor
+        async deleteVendor() {
+            detailLog.info('Delete vendor requested:', this.vendorCode);
+
+            if (!confirm(`Are you sure you want to delete vendor "${this.vendor.name}"?\n\nThis action cannot be undone and will delete:\n- All products\n- All orders\n- All customers\n- All team members`)) {
+                detailLog.info('Delete cancelled by user');
+                return;
+            }
+
+            // Second confirmation for safety
+            if (!confirm(`FINAL CONFIRMATION\n\nType the vendor code to confirm: ${this.vendor.vendor_code}\n\nAre you absolutely sure?`)) {
+                detailLog.info('Delete cancelled by user (second confirmation)');
+                return;
+            }
+
+            try {
+                const url = `/admin/vendors/${this.vendorCode}?confirm=true`;
+                window.LogConfig.logApiCall('DELETE', url, null, 'request');
+
+                detailLog.info('Deleting vendor:', this.vendorCode);
+                await apiClient.delete(url);
+
+                window.LogConfig.logApiCall('DELETE', url, null, 'response');
+
+                Utils.showToast('Vendor deleted successfully', 'success');
+                detailLog.info('Vendor deleted successfully');
+
+                // Redirect to vendors list
+                setTimeout(() => window.location.href = '/admin/vendors', 1500);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Delete Vendor');
+                Utils.showToast(error.message || 'Failed to delete vendor', 'error');
+            }
+        },
+
+        // Refresh vendor data
+        async refresh() {
+            detailLog.info('=== VENDOR REFRESH TRIGGERED ===');
+            await this.loadVendor();
+            Utils.showToast('Vendor details refreshed', 'success');
+            detailLog.info('=== VENDOR REFRESH COMPLETE ===');
+        }
+    };
+}
+
+detailLog.info('Vendor detail module loaded');

app/modules/tenancy/static/admin/js/vendor-edit.js

@@ -0,0 +1,311 @@
+// static/admin/js/vendor-edit.js
+
+// ✅ Use centralized logger - ONE LINE!
+// Create custom logger for vendor edit
+const editLog = window.LogConfig.createLogger('VENDOR-EDIT');
+
+function adminVendorEdit() {
+    return {
+        // Inherit base layout functionality from init-alpine.js
+        ...data(),
+
+        // Vendor edit page specific state
+        currentPage: 'vendor-edit',
+        loading: false,
+        vendor: null,
+        formData: {},
+        errors: {},
+        loadingVendor: false,
+        saving: false,
+        vendorCode: null,
+
+        // Initialize
+        async init() {
+            editLog.info('=== VENDOR EDIT PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._vendorEditInitialized) {
+                editLog.warn('Vendor edit page already initialized, skipping...');
+                return;
+            }
+            window._vendorEditInitialized = true;
+
+            try {
+                // Get vendor code from URL
+                const path = window.location.pathname;
+                const match = path.match(/\/admin\/vendors\/([^\/]+)\/edit/);
+
+                if (match) {
+                    this.vendorCode = match[1];
+                    editLog.info('Editing vendor:', this.vendorCode);
+                    await this.loadVendor();
+                } else {
+                    editLog.error('No vendor code in URL');
+                    Utils.showToast('Invalid vendor URL', 'error');
+                    setTimeout(() => window.location.href = '/admin/vendors', 2000);
+                }
+
+                editLog.info('=== VENDOR EDIT PAGE INITIALIZATION COMPLETE ===');
+            } catch (error) {
+                window.LogConfig.logError(error, 'Vendor Edit Init');
+                Utils.showToast('Failed to initialize page', 'error');
+            }
+        },
+
+        // Load vendor data
+        async loadVendor() {
+            editLog.info('Loading vendor data...');
+            this.loadingVendor = true;
+
+            try {
+                const url = `/admin/vendors/${this.vendorCode}`;
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.get(url);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+                window.LogConfig.logPerformance('Load Vendor', duration);
+
+                this.vendor = response;
+
+                // Initialize form data
+                // For contact fields: empty if inherited (shows placeholder), actual value if override
+                this.formData = {
+                    name: response.name || '',
+                    subdomain: response.subdomain || '',
+                    description: response.description || '',
+                    // Contact fields: empty string for inherited (will show company value as placeholder)
+                    contact_email: response.contact_email_inherited ? '' : (response.contact_email || ''),
+                    contact_phone: response.contact_phone_inherited ? '' : (response.contact_phone || ''),
+                    website: response.website_inherited ? '' : (response.website || ''),
+                    business_address: response.business_address_inherited ? '' : (response.business_address || ''),
+                    tax_number: response.tax_number_inherited ? '' : (response.tax_number || ''),
+                    // Marketplace URLs (no inheritance)
+                    letzshop_csv_url_fr: response.letzshop_csv_url_fr || '',
+                    letzshop_csv_url_en: response.letzshop_csv_url_en || '',
+                    letzshop_csv_url_de: response.letzshop_csv_url_de || ''
+                };
+
+                editLog.info(`Vendor loaded in ${duration}ms`, {
+                    vendor_code: this.vendor.vendor_code,
+                    name: this.vendor.name
+                });
+                editLog.debug('Form data initialized:', this.formData);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load Vendor');
+                Utils.showToast('Failed to load vendor', 'error');
+                setTimeout(() => window.location.href = '/admin/vendors', 2000);
+            } finally {
+                this.loadingVendor = false;
+            }
+        },
+
+        // Format subdomain
+        formatSubdomain() {
+            this.formData.subdomain = this.formData.subdomain
+                .toLowerCase()
+                .replace(/[^a-z0-9-]/g, '');
+            editLog.debug('Subdomain formatted:', this.formData.subdomain);
+        },
+
+        // Submit form
+        async handleSubmit() {
+            editLog.info('=== SUBMITTING VENDOR UPDATE ===');
+            editLog.debug('Form data:', this.formData);
+
+            this.errors = {};
+            this.saving = true;
+
+            try {
+                const url = `/admin/vendors/${this.vendorCode}`;
+                window.LogConfig.logApiCall('PUT', url, this.formData, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.put(url, this.formData);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('PUT', url, response, 'response');
+                window.LogConfig.logPerformance('Update Vendor', duration);
+
+                this.vendor = response;
+                Utils.showToast('Vendor updated successfully', 'success');
+                editLog.info(`Vendor updated successfully in ${duration}ms`, response);
+
+                // Optionally redirect back to list
+                // setTimeout(() => window.location.href = '/admin/vendors', 1500);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Update Vendor');
+
+                // Handle validation errors
+                if (error.details && error.details.validation_errors) {
+                    error.details.validation_errors.forEach(err => {
+                        const field = err.loc?.[1] || err.loc?.[0];
+                        if (field) {
+                            this.errors[field] = err.msg;
+                        }
+                    });
+                    editLog.debug('Validation errors:', this.errors);
+                }
+
+                Utils.showToast(error.message || 'Failed to update vendor', 'error');
+            } finally {
+                this.saving = false;
+                editLog.info('=== VENDOR UPDATE COMPLETE ===');
+            }
+        },
+
+        // Toggle verification
+        async toggleVerification() {
+            const action = this.vendor.is_verified ? 'unverify' : 'verify';
+            editLog.info(`Toggle verification: ${action}`);
+
+            if (!confirm(`Are you sure you want to ${action} this vendor?`)) {
+                editLog.info('Verification toggle cancelled by user');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/vendors/${this.vendorCode}/verification`;
+                const payload = { is_verified: !this.vendor.is_verified };
+
+                window.LogConfig.logApiCall('PUT', url, payload, 'request');
+
+                const response = await apiClient.put(url, payload);
+
+                window.LogConfig.logApiCall('PUT', url, response, 'response');
+
+                this.vendor = response;
+                Utils.showToast(`Vendor ${action}ed successfully`, 'success');
+                editLog.info(`Vendor ${action}ed successfully`);
+
+            } catch (error) {
+                window.LogConfig.logError(error, `Toggle Verification (${action})`);
+                Utils.showToast(`Failed to ${action} vendor`, 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // Toggle active status
+        async toggleActive() {
+            const action = this.vendor.is_active ? 'deactivate' : 'activate';
+            editLog.info(`Toggle active status: ${action}`);
+
+            if (!confirm(`Are you sure you want to ${action} this vendor?\n\nThis will affect their operations.`)) {
+                editLog.info('Active status toggle cancelled by user');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/vendors/${this.vendorCode}/status`;
+                const payload = { is_active: !this.vendor.is_active };
+
+                window.LogConfig.logApiCall('PUT', url, payload, 'request');
+
+                const response = await apiClient.put(url, payload);
+
+                window.LogConfig.logApiCall('PUT', url, response, 'response');
+
+                this.vendor = response;
+                Utils.showToast(`Vendor ${action}d successfully`, 'success');
+                editLog.info(`Vendor ${action}d successfully`);
+
+            } catch (error) {
+                window.LogConfig.logError(error, `Toggle Active Status (${action})`);
+                Utils.showToast(`Failed to ${action} vendor`, 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // Delete vendor
+        async deleteVendor() {
+            editLog.info('Delete vendor requested');
+
+            const vendorName = this.vendor?.name || this.vendorCode;
+            if (!confirm(`Are you sure you want to delete "${vendorName}"?\n\n⚠️ WARNING: This will permanently delete:\n• All products\n• All orders\n• All customers\n• All team members\n\nThis action cannot be undone!`)) {
+                editLog.info('Delete cancelled by user');
+                return;
+            }
+
+            // Double confirmation for safety
+            if (!confirm(`FINAL CONFIRMATION\n\nType OK to permanently delete "${vendorName}" and ALL associated data.`)) {
+                editLog.info('Delete cancelled at final confirmation');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const url = `/admin/vendors/${this.vendorCode}?confirm=true`;
+                window.LogConfig.logApiCall('DELETE', url, null, 'request');
+
+                const response = await apiClient.delete(url);
+
+                window.LogConfig.logApiCall('DELETE', url, response, 'response');
+
+                Utils.showToast('Vendor deleted successfully', 'success');
+                editLog.info('Vendor deleted successfully');
+
+                // Redirect to vendors list
+                setTimeout(() => {
+                    window.location.href = '/admin/vendors';
+                }, 1500);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Delete Vendor');
+                Utils.showToast(error.message || 'Failed to delete vendor', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // ===== Contact Field Inheritance Methods =====
+
+        /**
+         * Reset a single contact field to inherit from company.
+         * Sets the field to empty string, which the backend converts to null (inherit).
+         * @param {string} fieldName - The contact field to reset
+         */
+        resetFieldToCompany(fieldName) {
+            const contactFields = ['contact_email', 'contact_phone', 'website', 'business_address', 'tax_number'];
+            if (!contactFields.includes(fieldName)) {
+                editLog.warn('Invalid contact field:', fieldName);
+                return;
+            }
+
+            editLog.info(`Resetting ${fieldName} to inherit from company`);
+            this.formData[fieldName] = '';
+        },
+
+        /**
+         * Reset all contact fields to inherit from company.
+         */
+        resetAllContactToCompany() {
+            editLog.info('Resetting all contact fields to inherit from company');
+
+            const contactFields = ['contact_email', 'contact_phone', 'website', 'business_address', 'tax_number'];
+            contactFields.forEach(field => {
+                this.formData[field] = '';
+            });
+
+            Utils.showToast('All contact fields reset to company defaults', 'info');
+        },
+
+        /**
+         * Check if any contact field has a value (not empty = has override).
+         * @returns {boolean} True if at least one contact field has a value
+         */
+        hasAnyContactOverride() {
+            const contactFields = ['contact_email', 'contact_phone', 'website', 'business_address', 'tax_number'];
+            return contactFields.some(field => this.formData[field]);
+        }
+    };
+}
+
+editLog.info('Vendor edit module loaded');

app/modules/tenancy/static/admin/js/vendor-theme.js

@@ -0,0 +1,332 @@
+// static/admin/js/vendor-theme.js (FIXED VERSION)
+/**
+ * Vendor Theme Editor - Alpine.js Component
+ * Manages theme customization for vendor shops
+ *
+ * REQUIRES: log-config.js to be loaded first
+ */
+
+// ============================================================================
+// LOGGING CONFIGURATION (using centralized logger)
+// ============================================================================
+
+// Use the pre-configured theme logger from centralized log-config.js
+const themeLog = window.LogConfig.loggers.vendorTheme;
+
+// ============================================================================
+// ALPINE.JS COMPONENT
+// ============================================================================
+
+function adminVendorTheme() {
+    return {
+        // ✅ CRITICAL: Inherit base layout functionality
+        ...data(),
+
+        // ✅ CRITICAL: Set page identifier
+        currentPage: 'vendor-theme',
+
+        // Page state
+        vendorCode: null,
+        vendor: null,
+        loading: true,
+        saving: false,
+        error: null,
+
+        // Theme data structure matching VendorTheme model
+        themeData: {
+            theme_name: 'default',
+            colors: {
+                primary: '#6366f1',
+                secondary: '#8b5cf6',
+                accent: '#ec4899',
+                background: '#ffffff',
+                text: '#1f2937',
+                border: '#e5e7eb'
+            },
+            fonts: {
+                heading: 'Inter, sans-serif',
+                body: 'Inter, sans-serif',
+                size_base: '16px',
+                size_heading: '2rem'
+            },
+            layout: {
+                style: 'grid',
+                header_position: 'fixed',
+                product_card_style: 'card',
+                sidebar_position: 'left'
+            },
+            branding: {
+                logo_url: '',
+                favicon_url: '',
+                banner_url: ''
+            },
+            custom_css: '',
+            social_links: {
+                facebook: '',
+                instagram: '',
+                twitter: '',
+                linkedin: ''
+            }
+        },
+
+        // Available presets
+        presets: [],
+        selectedPreset: null,
+
+        // ====================================================================
+        // INITIALIZATION
+        // ====================================================================
+
+        async init() {
+            // Guard against multiple initialization
+            if (window._adminVendorThemeInitialized) return;
+            window._adminVendorThemeInitialized = true;
+
+            themeLog.info('Initializing vendor theme editor');
+
+            // Start performance timer
+            const startTime = performance.now();
+
+            try {
+                // Extract vendor code from URL
+                const urlParts = window.location.pathname.split('/');
+                this.vendorCode = urlParts[urlParts.indexOf('vendors') + 1];
+
+                themeLog.debug('Vendor code from URL:', this.vendorCode);
+
+                if (!this.vendorCode) {
+                    throw new Error('Vendor code not found in URL');
+                }
+
+                // Load data in parallel
+                themeLog.group('Loading theme data');
+
+                await Promise.all([
+                    this.loadVendor(),
+                    this.loadTheme(),
+                    this.loadPresets()
+                ]);
+
+                themeLog.groupEnd();
+
+                // Log performance
+                const duration = performance.now() - startTime;
+                window.LogConfig.logPerformance('Theme Editor Init', duration);
+
+                themeLog.info('Theme editor initialized successfully');
+
+            } catch (error) {
+                // Use centralized error logger
+                window.LogConfig.logError(error, 'Theme Editor Init');
+
+                this.error = error.message || 'Failed to initialize theme editor';
+                Utils.showToast(this.error, 'error');
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // ====================================================================
+        // DATA LOADING
+        // ====================================================================
+
+        async loadVendor() {
+            themeLog.info('Loading vendor data');
+
+            const url = `/admin/vendors/${this.vendorCode}`;
+            window.LogConfig.logApiCall('GET', url, null, 'request');
+
+            try {
+                // ✅ FIX: apiClient returns data directly, not response.data
+                const response = await apiClient.get(url);
+
+                // ✅ Direct assignment - response IS the data
+                this.vendor = response;
+
+                window.LogConfig.logApiCall('GET', url, this.vendor, 'response');
+                themeLog.debug('Vendor loaded:', this.vendor);
+
+            } catch (error) {
+                themeLog.error('Failed to load vendor:', error);
+                throw error;
+            }
+        },
+
+        async loadTheme() {
+            themeLog.info('Loading theme data');
+
+            const url = `/admin/vendor-themes/${this.vendorCode}`;
+            window.LogConfig.logApiCall('GET', url, null, 'request');
+
+            try {
+                // ✅ FIX: apiClient returns data directly
+                const response = await apiClient.get(url);
+
+                // Merge with default theme data
+                this.themeData = {
+                    ...this.themeData,
+                    ...response
+                };
+
+                window.LogConfig.logApiCall('GET', url, this.themeData, 'response');
+                themeLog.debug('Theme loaded:', this.themeData);
+
+            } catch (error) {
+                themeLog.warn('Failed to load theme, using defaults:', error);
+                // Continue with default theme
+            }
+        },
+
+        async loadPresets() {
+            themeLog.info('Loading theme presets');
+
+            const url = '/admin/vendor-themes/presets';
+            window.LogConfig.logApiCall('GET', url, null, 'request');
+
+            try {
+                // ✅ FIX: apiClient returns data directly
+                const response = await apiClient.get(url);
+
+                // ✅ Access presets directly from response, not response.data.presets
+                this.presets = response.presets || [];
+
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+                themeLog.debug(`Loaded ${this.presets.length} presets`);
+
+            } catch (error) {
+                themeLog.error('Failed to load presets:', error);
+                this.presets = [];
+            }
+        },
+
+        // ====================================================================
+        // THEME OPERATIONS
+        // ====================================================================
+
+        async saveTheme() {
+            if (this.saving) return;
+
+            themeLog.info('Saving theme changes');
+            this.saving = true;
+            this.error = null;
+
+            const startTime = performance.now();
+
+            try {
+                const url = `/admin/vendor-themes/${this.vendorCode}`;
+                window.LogConfig.logApiCall('PUT', url, this.themeData, 'request');
+
+                // ✅ FIX: apiClient returns data directly
+                const response = await apiClient.put(url, this.themeData);
+
+                window.LogConfig.logApiCall('PUT', url, response, 'response');
+
+                const duration = performance.now() - startTime;
+                window.LogConfig.logPerformance('Save Theme', duration);
+
+                themeLog.info('Theme saved successfully');
+                Utils.showToast('Theme saved successfully', 'success');
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Save Theme');
+                this.error = 'Failed to save theme';
+                Utils.showToast(this.error, 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        async applyPreset(presetName) {
+            themeLog.info(`Applying preset: ${presetName}`);
+            this.saving = true;
+
+            try {
+                const url = `/admin/vendor-themes/${this.vendorCode}/preset/${presetName}`;
+                window.LogConfig.logApiCall('POST', url, null, 'request');
+
+                // ✅ FIX: apiClient returns data directly
+                const response = await apiClient.post(url);
+
+                window.LogConfig.logApiCall('POST', url, response, 'response');
+
+                // ✅ FIX: Access theme directly from response, not response.data.theme
+                if (response && response.theme) {
+                    this.themeData = {
+                        ...this.themeData,
+                        ...response.theme
+                    };
+                }
+
+                themeLog.info(`Preset '${presetName}' applied successfully`);
+                Utils.showToast(`Applied ${presetName} preset`, 'success');
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Apply Preset');
+                Utils.showToast('Failed to apply preset', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        async resetTheme() {
+            if (!confirm('Reset theme to default? This cannot be undone.')) {
+                return;
+            }
+
+            themeLog.warn('Resetting theme to default');
+            this.saving = true;
+
+            try {
+                const url = `/admin/vendor-themes/${this.vendorCode}`;
+                window.LogConfig.logApiCall('DELETE', url, null, 'request');
+
+                await apiClient.delete(url);
+
+                window.LogConfig.logApiCall('DELETE', url, null, 'response');
+
+                // Reload theme data
+                await this.loadTheme();
+
+                themeLog.info('Theme reset successfully');
+                Utils.showToast('Theme reset to default', 'success');
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Reset Theme');
+                Utils.showToast('Failed to reset theme', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // ====================================================================
+        // UTILITY METHODS
+        // ====================================================================
+
+        previewTheme() {
+            themeLog.debug('Opening theme preview');
+            const previewUrl = `/vendor/${this.vendor?.subdomain || this.vendorCode}`;
+            window.open(previewUrl, '_blank');
+        },
+
+        updateColor(key, value) {
+            themeLog.debug(`Color updated: ${key} = ${value}`);
+            this.themeData.colors[key] = value;
+        },
+
+        updateFont(type, value) {
+            themeLog.debug(`Font updated: ${type} = ${value}`);
+            this.themeData.fonts[type] = value;
+        },
+
+        updateLayout(key, value) {
+            themeLog.debug(`Layout updated: ${key} = ${value}`);
+            this.themeData.layout[key] = value;
+        }
+    };
+}
+
+// ============================================================================
+// MODULE LOADED
+// ============================================================================
+
+themeLog.info('Vendor theme editor module loaded');

app/modules/tenancy/static/admin/js/vendor-themes.js

@@ -0,0 +1,171 @@
+// noqa: js-006 - async init pattern is safe, loadData has try/catch
+// static/admin/js/vendor-themes.js
+/**
+ * Admin vendor themes selection page
+ */
+
+// ✅ Use centralized logger
+const vendorThemesLog = window.LogConfig.loggers.vendorTheme;
+
+vendorThemesLog.info('Loading...');
+
+function adminVendorThemes() {
+    vendorThemesLog.debug('adminVendorThemes() called');
+
+    return {
+        // Inherit base layout state
+        ...data(),
+
+        // Set page identifier
+        currentPage: 'vendor-theme',
+
+        // State
+        loading: false,
+        error: '',
+        vendors: [],
+        selectedVendorCode: '',
+
+        // Selected vendor for filter (Tom Select)
+        selectedVendor: null,
+        vendorSelector: null,
+
+        // Search/filter
+        searchQuery: '',
+
+        async init() {
+            // Guard against multiple initialization
+            if (window._adminVendorThemesInitialized) {
+                return;
+            }
+            window._adminVendorThemesInitialized = true;
+
+            vendorThemesLog.info('Vendor Themes init() called');
+
+            // Initialize vendor selector (Tom Select)
+            this.$nextTick(() => {
+                this.initVendorSelector();
+            });
+
+            // Check localStorage for saved vendor
+            const savedVendorId = localStorage.getItem('vendor_themes_selected_vendor_id');
+            if (savedVendorId) {
+                vendorThemesLog.info('Restoring saved vendor:', savedVendorId);
+                await this.loadVendors();
+                // Restore vendor after vendors are loaded
+                setTimeout(async () => {
+                    await this.restoreSavedVendor(parseInt(savedVendorId));
+                }, 200);
+            } else {
+                await this.loadVendors();
+            }
+
+            vendorThemesLog.info('Vendor Themes initialization complete');
+        },
+
+        /**
+         * Restore saved vendor from localStorage
+         */
+        async restoreSavedVendor(vendorId) {
+            try {
+                const vendor = await apiClient.get(`/admin/vendors/${vendorId}`);
+                if (this.vendorSelector && vendor) {
+                    // Use the vendor selector's setValue method
+                    this.vendorSelector.setValue(vendor.id, vendor);
+
+                    // Set the filter state
+                    this.selectedVendor = vendor;
+
+                    vendorThemesLog.info('Restored vendor:', vendor.name);
+                }
+            } catch (error) {
+                vendorThemesLog.warn('Failed to restore saved vendor, clearing localStorage:', error);
+                localStorage.removeItem('vendor_themes_selected_vendor_id');
+            }
+        },
+
+        /**
+         * Initialize vendor selector with Tom Select
+         */
+        initVendorSelector() {
+            if (!this.$refs.vendorSelect) {
+                vendorThemesLog.warn('Vendor select element not found');
+                return;
+            }
+
+            this.vendorSelector = initVendorSelector(this.$refs.vendorSelect, {
+                placeholder: 'Search vendor...',
+                onSelect: (vendor) => {
+                    vendorThemesLog.info('Vendor selected:', vendor);
+                    this.selectedVendor = vendor;
+                    // Save to localStorage
+                    localStorage.setItem('vendor_themes_selected_vendor_id', vendor.id.toString());
+                },
+                onClear: () => {
+                    vendorThemesLog.info('Vendor filter cleared');
+                    this.selectedVendor = null;
+                    // Clear from localStorage
+                    localStorage.removeItem('vendor_themes_selected_vendor_id');
+                }
+            });
+        },
+
+        /**
+         * Clear vendor filter
+         */
+        clearVendorFilter() {
+            if (this.vendorSelector) {
+                this.vendorSelector.clear();
+            }
+            this.selectedVendor = null;
+            // Clear from localStorage
+            localStorage.removeItem('vendor_themes_selected_vendor_id');
+        },
+
+        async loadVendors() {
+            this.loading = true;
+            this.error = '';
+
+            try {
+                const response = await apiClient.get('/admin/vendors?limit=1000');
+                this.vendors = response.vendors || [];
+                vendorThemesLog.debug('Loaded vendors:', this.vendors.length);
+            } catch (error) {
+                vendorThemesLog.error('Failed to load vendors:', error);
+                this.error = error.message || 'Failed to load vendors';
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        /**
+         * Computed: Filtered vendors based on search and selected vendor
+         */
+        get filteredVendors() {
+            let filtered = this.vendors;
+
+            // If a vendor is selected via Tom Select, show only that vendor
+            if (this.selectedVendor) {
+                filtered = this.vendors.filter(v => v.id === this.selectedVendor.id);
+            }
+            // Otherwise filter by search query
+            else if (this.searchQuery) {
+                const query = this.searchQuery.toLowerCase();
+                filtered = this.vendors.filter(v =>
+                    v.name.toLowerCase().includes(query) ||
+                    (v.vendor_code && v.vendor_code.toLowerCase().includes(query))
+                );
+            }
+
+            return filtered;
+        },
+
+        navigateToTheme() {
+            if (!this.selectedVendorCode) {
+                return;
+            }
+            window.location.href = `/admin/vendors/${this.selectedVendorCode}/theme`;
+        }
+    };
+}
+
+vendorThemesLog.info('Module loaded');

app/modules/tenancy/static/admin/js/vendors.js

@@ -0,0 +1,329 @@
+// noqa: js-006 - async init pattern is safe, loadData has try/catch
+// static/admin/js/vendors.js
+
+// ✅ Use centralized logger - ONE LINE!
+const vendorsLog = window.LogConfig.loggers.vendors;
+
+// ============================================
+// VENDOR LIST FUNCTION
+// ============================================
+function adminVendors() {
+    return {
+        // Inherit base layout functionality from init-alpine.js
+        ...data(),
+
+        // ✅ CRITICAL: Page identifier for sidebar active state
+        currentPage: 'vendors',
+
+        // Vendors page specific state
+        vendors: [],
+        stats: {
+            total: 0,
+            verified: 0,
+            pending: 0,
+            inactive: 0
+        },
+        loading: false,
+        error: null,
+
+        // Search and filters
+        filters: {
+            search: '',
+            is_active: '',
+            is_verified: ''
+        },
+
+        // Pagination state (server-side)
+        pagination: {
+            page: 1,
+            per_page: 20,
+            total: 0,
+            pages: 0
+        },
+
+        // Initialize
+        async init() {
+            vendorsLog.info('=== VENDORS PAGE INITIALIZING ===');
+
+            // Prevent multiple initializations
+            if (window._vendorsInitialized) {
+                vendorsLog.warn('Vendors page already initialized, skipping...');
+                return;
+            }
+            window._vendorsInitialized = true;
+
+            // Load platform settings for rows per page
+            if (window.PlatformSettings) {
+                this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
+            }
+
+            vendorsLog.group('Loading vendors data');
+            await this.loadVendors();
+            await this.loadStats();
+            vendorsLog.groupEnd();
+
+            vendorsLog.info('=== VENDORS PAGE INITIALIZATION COMPLETE ===');
+        },
+
+        // Debounced search
+        debouncedSearch() {
+            if (this._searchTimeout) {
+                clearTimeout(this._searchTimeout);
+            }
+            this._searchTimeout = setTimeout(() => {
+                vendorsLog.info('Search triggered:', this.filters.search);
+                this.pagination.page = 1;
+                this.loadVendors();
+            }, 300);
+        },
+
+        // Computed: Get vendors for current page (already paginated from server)
+        get paginatedVendors() {
+            return this.vendors;
+        },
+
+        // Computed: Total number of pages
+        get totalPages() {
+            return this.pagination.pages;
+        },
+
+        // Computed: Start index for pagination display
+        get startIndex() {
+            if (this.pagination.total === 0) return 0;
+            return (this.pagination.page - 1) * this.pagination.per_page + 1;
+        },
+
+        // Computed: End index for pagination display
+        get endIndex() {
+            const end = this.pagination.page * this.pagination.per_page;
+            return end > this.pagination.total ? this.pagination.total : end;
+        },
+
+        // Computed: Generate page numbers array with ellipsis
+        get pageNumbers() {
+            const pages = [];
+            const totalPages = this.totalPages;
+            const current = this.pagination.page;
+
+            if (totalPages <= 7) {
+                // Show all pages if 7 or fewer
+                for (let i = 1; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            } else {
+                // Always show first page
+                pages.push(1);
+
+                if (current > 3) {
+                    pages.push('...');
+                }
+
+                // Show pages around current page
+                const start = Math.max(2, current - 1);
+                const end = Math.min(totalPages - 1, current + 1);
+
+                for (let i = start; i <= end; i++) {
+                    pages.push(i);
+                }
+
+                if (current < totalPages - 2) {
+                    pages.push('...');
+                }
+
+                // Always show last page
+                pages.push(totalPages);
+            }
+
+            return pages;
+        },
+
+        // Load vendors list with search and pagination
+        async loadVendors() {
+            vendorsLog.info('Loading vendors list...');
+            this.loading = true;
+            this.error = null;
+
+            try {
+                // Build query parameters
+                const params = new URLSearchParams();
+                params.append('skip', (this.pagination.page - 1) * this.pagination.per_page);
+                params.append('limit', this.pagination.per_page);
+
+                if (this.filters.search) {
+                    params.append('search', this.filters.search);
+                }
+                if (this.filters.is_active !== '') {
+                    params.append('is_active', this.filters.is_active);
+                }
+                if (this.filters.is_verified !== '') {
+                    params.append('is_verified', this.filters.is_verified);
+                }
+
+                const url = `/admin/vendors?${params}`;
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.get(url);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+                window.LogConfig.logPerformance('Load Vendors', duration);
+
+                // Handle response with pagination info
+                if (response.vendors) {
+                    this.vendors = response.vendors;
+                    this.pagination.total = response.total;
+                    this.pagination.pages = Math.ceil(response.total / this.pagination.per_page);
+
+                    vendorsLog.info(`Loaded ${this.vendors.length} vendors (total: ${response.total})`);
+                } else {
+                    // Fallback for different response structures
+                    this.vendors = response.items || response || [];
+                    this.pagination.total = this.vendors.length;
+                    this.pagination.pages = Math.ceil(this.vendors.length / this.pagination.per_page);
+
+                    vendorsLog.info(`Vendors loaded in ${duration}ms`, {
+                        count: this.vendors.length,
+                        hasVendors: this.vendors.length > 0
+                    });
+                }
+
+                if (this.vendors.length > 0) {
+                    vendorsLog.debug('First vendor:', this.vendors[0]);
+                }
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load Vendors');
+                this.error = error.message || 'Failed to load vendors';
+                Utils.showToast('Failed to load vendors', 'error');
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // Load statistics
+        async loadStats() {
+            vendorsLog.info('Loading vendor statistics...');
+
+            try {
+                const url = '/admin/vendors/stats';
+                window.LogConfig.logApiCall('GET', url, null, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.get(url);
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('GET', url, response, 'response');
+                window.LogConfig.logPerformance('Load Vendor Stats', duration);
+
+                this.stats = response;
+                vendorsLog.info(`Stats loaded in ${duration}ms`, this.stats);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load Vendor Stats');
+                // Don't show error toast for stats, just log it
+            }
+        },
+
+        // Pagination: Go to specific page
+        goToPage(pageNum) {
+            if (pageNum === '...' || pageNum < 1 || pageNum > this.totalPages) {
+                return;
+            }
+            vendorsLog.info('Going to page:', pageNum);
+            this.pagination.page = pageNum;
+            this.loadVendors();
+        },
+
+        // Pagination: Go to next page
+        nextPage() {
+            if (this.pagination.page < this.totalPages) {
+                vendorsLog.info('Going to next page');
+                this.pagination.page++;
+                this.loadVendors();
+            }
+        },
+
+        // Pagination: Go to previous page
+        previousPage() {
+            if (this.pagination.page > 1) {
+                vendorsLog.info('Going to previous page');
+                this.pagination.page--;
+                this.loadVendors();
+            }
+        },
+
+        // Format date (matches dashboard pattern)
+        formatDate(dateString) {
+            if (!dateString) {
+                vendorsLog.debug('formatDate called with empty dateString');
+                return '-';
+            }
+            const formatted = Utils.formatDate(dateString);
+            vendorsLog.debug(`Date formatted: ${dateString} -> ${formatted}`);
+            return formatted;
+        },
+
+        // View vendor details
+        viewVendor(vendorCode) {
+            vendorsLog.info('Navigating to vendor details:', vendorCode);
+            const url = `/admin/vendors/${vendorCode}`;
+            vendorsLog.debug('Navigation URL:', url);
+            window.location.href = url;
+        },
+
+        // Edit vendor
+        editVendor(vendorCode) {
+            vendorsLog.info('Navigating to vendor edit:', vendorCode);
+            const url = `/admin/vendors/${vendorCode}/edit`;
+            vendorsLog.debug('Navigation URL:', url);
+            window.location.href = url;
+        },
+
+        // Delete vendor
+        async deleteVendor(vendor) {
+            vendorsLog.info('Delete vendor requested:', vendor.vendor_code);
+
+            if (!confirm(`Are you sure you want to delete vendor "${vendor.name}"?\n\nThis action cannot be undone.`)) {
+                vendorsLog.info('Delete cancelled by user');
+                return;
+            }
+
+            try {
+                const url = `/admin/vendors/${vendor.vendor_code}`;
+                window.LogConfig.logApiCall('DELETE', url, null, 'request');
+
+                vendorsLog.info('Deleting vendor:', vendor.vendor_code);
+                await apiClient.delete(url);
+
+                window.LogConfig.logApiCall('DELETE', url, null, 'response');
+
+                Utils.showToast('Vendor deleted successfully', 'success');
+                vendorsLog.info('Vendor deleted successfully');
+
+                // Reload data
+                await this.loadVendors();
+                await this.loadStats();
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Delete Vendor');
+                Utils.showToast(error.message || 'Failed to delete vendor', 'error');
+            }
+        },
+
+        // Refresh vendors list
+        async refresh() {
+            vendorsLog.info('=== VENDORS REFRESH TRIGGERED ===');
+
+            vendorsLog.group('Refreshing vendors data');
+            await this.loadVendors();
+            await this.loadStats();
+            vendorsLog.groupEnd();
+
+            Utils.showToast('Vendors list refreshed', 'success');
+            vendorsLog.info('=== VENDORS REFRESH COMPLETE ===');
+        }
+    };
+}
+
+vendorsLog.info('Vendors module loaded');

app/modules/tenancy/static/vendor/js/login.js

@@ -0,0 +1,174 @@
+// app/static/vendor/js/login.js
+// noqa: js-003 - Standalone login page without vendor layout
+// noqa: js-004 - Standalone page has no currentPage sidebar highlight
+/**
+ * Vendor login page logic
+ */
+
+// Create custom logger for vendor login page
+const vendorLoginLog = window.LogConfig.createLogger('VENDOR-LOGIN');
+
+function vendorLogin() {
+    return {
+        credentials: {
+            username: '',
+            password: ''
+        },
+        vendor: null,
+        vendorCode: null,
+        loading: false,
+        checked: false,
+        error: '',
+        success: '',
+        errors: {},
+        dark: false,
+
+        async init() {
+            // Guard against multiple initialization
+            if (window._vendorLoginInitialized) return;
+            window._vendorLoginInitialized = true;
+
+            try {
+                vendorLoginLog.info('=== VENDOR LOGIN PAGE INITIALIZING ===');
+
+                // Load theme
+                const theme = localStorage.getItem('theme');
+                if (theme === 'dark') {
+                    this.dark = true;
+                }
+                vendorLoginLog.debug('Dark mode:', this.dark);
+
+                // Get vendor code from URL path
+                const pathSegments = window.location.pathname.split('/').filter(Boolean);
+                if (pathSegments[0] === 'vendor' && pathSegments[1]) {
+                    this.vendorCode = pathSegments[1];
+                    vendorLoginLog.debug('Vendor code from URL:', this.vendorCode);
+                    await this.loadVendor();
+                }
+                this.checked = true;
+                vendorLoginLog.info('=== VENDOR LOGIN PAGE INITIALIZATION COMPLETE ===');
+            } catch (error) {
+                vendorLoginLog.error('Failed to initialize login page:', error);
+                this.checked = true;
+            }
+        },
+
+        async loadVendor() {
+            vendorLoginLog.info('Loading vendor information...');
+            this.loading = true;
+            try {
+                const response = await apiClient.get(`/vendor/info/${this.vendorCode}`);
+                this.vendor = response;
+                vendorLoginLog.info('Vendor loaded successfully:', {
+                    code: this.vendor.code,
+                    name: this.vendor.name
+                });
+            } catch (error) {
+                window.LogConfig.logError(error, 'Load Vendor');
+                this.error = 'Failed to load vendor information';
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        async handleLogin() {
+            vendorLoginLog.info('=== VENDOR LOGIN ATTEMPT STARTED ===');
+            this.clearErrors();
+            this.loading = true;
+
+            try {
+                if (!this.credentials.username) {
+                    this.errors.username = 'Username is required';
+                }
+                if (!this.credentials.password) {
+                    this.errors.password = 'Password is required';
+                }
+
+                if (Object.keys(this.errors).length > 0) {
+                    vendorLoginLog.warn('Validation failed:', this.errors);
+                    this.loading = false;
+                    return;
+                }
+
+                vendorLoginLog.info('Calling vendor login API...');
+                vendorLoginLog.debug('Username:', this.credentials.username);
+                vendorLoginLog.debug('Vendor code:', this.vendorCode);
+
+                window.LogConfig.logApiCall('POST', '/vendor/auth/login', {
+                    username: this.credentials.username,
+                    vendor_code: this.vendorCode
+                }, 'request');
+
+                const startTime = performance.now();
+                const response = await apiClient.post('/vendor/auth/login', {
+                    email_or_username: this.credentials.username,
+                    password: this.credentials.password,
+                    vendor_code: this.vendorCode
+                });
+                const duration = performance.now() - startTime;
+
+                window.LogConfig.logApiCall('POST', '/vendor/auth/login', {
+                    hasToken: !!response.access_token,
+                    user: response.user?.username
+                }, 'response');
+                window.LogConfig.logPerformance('Vendor Login', duration);
+
+                vendorLoginLog.info('Login successful!');
+                vendorLoginLog.debug('Storing authentication data...');
+
+                // Store token with correct key that apiClient expects
+                localStorage.setItem('vendor_token', response.access_token);
+                localStorage.setItem('currentUser', JSON.stringify(response.user));
+                localStorage.setItem('vendorCode', this.vendorCode);
+                vendorLoginLog.debug('Token stored as vendor_token in localStorage');
+
+                this.success = 'Login successful! Redirecting...';
+
+                // Check for last visited page (saved before logout)
+                const lastPage = localStorage.getItem('vendor_last_visited_page');
+                const validLastPage = lastPage &&
+                    lastPage.startsWith(`/vendor/${this.vendorCode}/`) &&
+                    !lastPage.includes('/login') &&
+                    !lastPage.includes('/onboarding');
+                const redirectTo = validLastPage ? lastPage : `/vendor/${this.vendorCode}/dashboard`;
+
+                vendorLoginLog.info('Last visited page:', lastPage);
+                vendorLoginLog.info('Redirecting to:', redirectTo);
+
+                setTimeout(() => {
+                    window.location.href = redirectTo;
+                }, 1000);
+
+            } catch (error) {
+                window.LogConfig.logError(error, 'Vendor Login');
+
+                if (error.status === 401) {
+                    this.error = 'Invalid username or password';
+                } else if (error.status === 403) {
+                    this.error = 'Your account does not have access to this vendor';
+                } else {
+                    this.error = error.message || 'Login failed. Please try again.';
+                }
+                vendorLoginLog.info('Error message displayed to user:', this.error);
+            } finally {
+                this.loading = false;
+                vendorLoginLog.info('=== VENDOR LOGIN ATTEMPT FINISHED ===');
+            }
+        },
+
+        clearErrors() {
+            vendorLoginLog.debug('Clearing form errors');
+            this.error = '';
+            this.errors = {};
+        },
+
+        toggleDarkMode() {
+            vendorLoginLog.debug('Toggling dark mode...');
+            this.dark = !this.dark;
+            localStorage.setItem('theme', this.dark ? 'dark' : 'light');
+            vendorLoginLog.info('Dark mode:', this.dark ? 'ON' : 'OFF');
+        }
+    };
+}
+
+vendorLoginLog.info('Vendor login module loaded');

app/modules/tenancy/static/vendor/js/profile.js

@@ -0,0 +1,196 @@
+// static/vendor/js/profile.js
+/**
+ * Vendor profile management page logic
+ * Edit vendor business profile and contact information
+ */
+
+const vendorProfileLog = window.LogConfig.loggers.vendorProfile ||
+    window.LogConfig.createLogger('vendorProfile', false);
+
+vendorProfileLog.info('Loading...');
+
+function vendorProfile() {
+    vendorProfileLog.info('vendorProfile() called');
+
+    return {
+        // Inherit base layout state
+        ...data(),
+
+        // Set page identifier
+        currentPage: 'profile',
+
+        // Loading states
+        loading: true,
+        error: '',
+        saving: false,
+
+        // Profile data
+        profile: null,
+
+        // Edit form
+        form: {
+            name: '',
+            contact_email: '',
+            contact_phone: '',
+            website: '',
+            business_address: '',
+            tax_number: '',
+            description: ''
+        },
+
+        // Form validation
+        errors: {},
+
+        // Track if form has changes
+        hasChanges: false,
+
+        async init() {
+            vendorProfileLog.info('Profile init() called');
+
+            // Guard against multiple initialization
+            if (window._vendorProfileInitialized) {
+                vendorProfileLog.warn('Already initialized, skipping');
+                return;
+            }
+            window._vendorProfileInitialized = true;
+
+            // IMPORTANT: Call parent init first to set vendorCode from URL
+            const parentInit = data().init;
+            if (parentInit) {
+                await parentInit.call(this);
+            }
+
+            try {
+                await this.loadProfile();
+            } catch (error) {
+                vendorProfileLog.error('Init failed:', error);
+                this.error = 'Failed to initialize profile page';
+            }
+
+            vendorProfileLog.info('Profile initialization complete');
+        },
+
+        /**
+         * Load vendor profile
+         */
+        async loadProfile() {
+            this.loading = true;
+            this.error = '';
+
+            try {
+                const response = await apiClient.get(`/vendor/profile`);
+
+                this.profile = response;
+                this.form = {
+                    name: response.name || '',
+                    contact_email: response.contact_email || '',
+                    contact_phone: response.contact_phone || '',
+                    website: response.website || '',
+                    business_address: response.business_address || '',
+                    tax_number: response.tax_number || '',
+                    description: response.description || ''
+                };
+
+                this.hasChanges = false;
+                vendorProfileLog.info('Loaded profile:', this.profile.vendor_code);
+            } catch (error) {
+                vendorProfileLog.error('Failed to load profile:', error);
+                this.error = error.message || 'Failed to load profile';
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        /**
+         * Mark form as changed
+         */
+        markChanged() {
+            this.hasChanges = true;
+        },
+
+        /**
+         * Validate form
+         */
+        validateForm() {
+            this.errors = {};
+
+            if (!this.form.name?.trim()) {
+                this.errors.name = 'Business name is required';
+            }
+
+            if (this.form.contact_email && !this.isValidEmail(this.form.contact_email)) {
+                this.errors.contact_email = 'Invalid email address';
+            }
+
+            if (this.form.website && !this.isValidUrl(this.form.website)) {
+                this.errors.website = 'Invalid URL format';
+            }
+
+            return Object.keys(this.errors).length === 0;
+        },
+
+        /**
+         * Check if email is valid
+         */
+        isValidEmail(email) {
+            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+        },
+
+        /**
+         * Check if URL is valid
+         */
+        isValidUrl(url) {
+            try {
+                new URL(url);
+                return true;
+            } catch {
+                return url.match(/^(https?:\/\/)?[\w-]+(\.[\w-]+)+/) !== null;
+            }
+        },
+
+        /**
+         * Save profile changes
+         */
+        async saveProfile() {
+            if (!this.validateForm()) {
+                Utils.showToast('Please fix the errors before saving', 'error');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                await apiClient.put(`/vendor/profile`, this.form);
+
+                Utils.showToast('Profile updated successfully', 'success');
+                vendorProfileLog.info('Profile updated');
+
+                this.hasChanges = false;
+                await this.loadProfile();
+            } catch (error) {
+                vendorProfileLog.error('Failed to save profile:', error);
+                Utils.showToast(error.message || 'Failed to save profile', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        /**
+         * Reset form to original values
+         */
+        resetForm() {
+            if (this.profile) {
+                this.form = {
+                    name: this.profile.name || '',
+                    contact_email: this.profile.contact_email || '',
+                    contact_phone: this.profile.contact_phone || '',
+                    website: this.profile.website || '',
+                    business_address: this.profile.business_address || '',
+                    tax_number: this.profile.tax_number || '',
+                    description: this.profile.description || ''
+                };
+            }
+            this.hasChanges = false;
+            this.errors = {};
+        }
+    };
+}

app/modules/tenancy/static/vendor/js/settings.js

@@ -0,0 +1,576 @@
+// static/vendor/js/settings.js
+/**
+ * Vendor settings management page logic
+ * Configure vendor preferences and integrations
+ */
+
+const vendorSettingsLog = window.LogConfig.loggers.vendorSettings ||
+    window.LogConfig.createLogger('vendorSettings', false);
+
+vendorSettingsLog.info('Loading...');
+
+function vendorSettings() {
+    vendorSettingsLog.info('vendorSettings() called');
+
+    return {
+        // Inherit base layout state
+        ...data(),
+
+        // Set page identifier
+        currentPage: 'settings',
+
+        // Loading states
+        loading: true,
+        error: '',
+        saving: false,
+
+        // Settings data from API
+        settings: null,
+
+        // Active section
+        activeSection: 'general',
+
+        // Sections for navigation
+        sections: [
+            { id: 'general', label: 'General', icon: 'cog' },
+            { id: 'business', label: 'Business Info', icon: 'office-building' },
+            { id: 'localization', label: 'Localization', icon: 'globe' },
+            { id: 'marketplace', label: 'Marketplace', icon: 'shopping-cart' },
+            { id: 'invoices', label: 'Invoices', icon: 'document-text' },
+            { id: 'branding', label: 'Branding', icon: 'color-swatch' },
+            { id: 'domains', label: 'Domains', icon: 'globe-alt' },
+            { id: 'api', label: 'API & Payments', icon: 'key' },
+            { id: 'notifications', label: 'Notifications', icon: 'bell' },
+            { id: 'email', label: 'Email', icon: 'envelope' }
+        ],
+
+        // Forms for different sections
+        generalForm: {
+            subdomain: '',
+            is_active: true
+        },
+
+        businessForm: {
+            name: '',
+            description: '',
+            contact_email: '',
+            contact_phone: '',
+            website: '',
+            business_address: '',
+            tax_number: ''
+        },
+
+        // Track which fields are inherited from company
+        businessInherited: {
+            contact_email: false,
+            contact_phone: false,
+            website: false,
+            business_address: false,
+            tax_number: false
+        },
+
+        // Company name for display
+        companyName: '',
+
+        marketplaceForm: {
+            letzshop_csv_url_fr: '',
+            letzshop_csv_url_en: '',
+            letzshop_csv_url_de: '',
+            letzshop_default_tax_rate: null,
+            letzshop_boost_sort: '',
+            letzshop_delivery_method: '',
+            letzshop_preorder_days: null
+        },
+
+        notificationForm: {
+            email_notifications: true,
+            order_notifications: true,
+            marketing_emails: false
+        },
+
+        localizationForm: {
+            default_language: 'fr',
+            dashboard_language: 'fr',
+            storefront_language: 'fr',
+            storefront_languages: ['fr', 'de', 'en'],
+            storefront_locale: ''
+        },
+
+        // Email settings
+        emailSettings: null,
+        emailSettingsLoading: false,
+        emailProviders: [],
+        emailForm: {
+            from_email: '',
+            from_name: '',
+            reply_to_email: '',
+            signature_text: '',
+            signature_html: '',
+            provider: 'smtp',
+            // SMTP
+            smtp_host: '',
+            smtp_port: 587,
+            smtp_username: '',
+            smtp_password: '',
+            smtp_use_tls: true,
+            smtp_use_ssl: false,
+            // SendGrid
+            sendgrid_api_key: '',
+            // Mailgun
+            mailgun_api_key: '',
+            mailgun_domain: '',
+            // SES
+            ses_access_key_id: '',
+            ses_secret_access_key: '',
+            ses_region: 'eu-west-1'
+        },
+        testEmailAddress: '',
+        sendingTestEmail: false,
+        hasEmailChanges: false,
+
+        // Track changes per section
+        hasChanges: false,
+        hasBusinessChanges: false,
+        hasLocalizationChanges: false,
+        hasMarketplaceChanges: false,
+
+        async init() {
+            vendorSettingsLog.info('Settings init() called');
+
+            // Guard against multiple initialization
+            if (window._vendorSettingsInitialized) {
+                vendorSettingsLog.warn('Already initialized, skipping');
+                return;
+            }
+            window._vendorSettingsInitialized = true;
+
+            // IMPORTANT: Call parent init first to set vendorCode from URL
+            const parentInit = data().init;
+            if (parentInit) {
+                await parentInit.call(this);
+            }
+
+            try {
+                await this.loadSettings();
+            } catch (error) {
+                vendorSettingsLog.error('Init failed:', error);
+                this.error = 'Failed to initialize settings page';
+            }
+
+            vendorSettingsLog.info('Settings initialization complete');
+        },
+
+        /**
+         * Load vendor settings
+         */
+        async loadSettings() {
+            this.loading = true;
+            this.error = '';
+
+            try {
+                const response = await apiClient.get(`/vendor/settings`);
+
+                this.settings = response;
+
+                // Populate general form
+                this.generalForm = {
+                    subdomain: response.subdomain || '',
+                    is_active: response.is_active !== false
+                };
+
+                // Populate business info form with inheritance tracking
+                const biz = response.business_info || {};
+                this.businessForm = {
+                    name: response.name || '',
+                    description: response.description || '',
+                    contact_email: biz.contact_email_override || '',
+                    contact_phone: biz.contact_phone_override || '',
+                    website: biz.website_override || '',
+                    business_address: biz.business_address_override || '',
+                    tax_number: biz.tax_number_override || ''
+                };
+                this.businessInherited = {
+                    contact_email: biz.contact_email_inherited || false,
+                    contact_phone: biz.contact_phone_inherited || false,
+                    website: biz.website_inherited || false,
+                    business_address: biz.business_address_inherited || false,
+                    tax_number: biz.tax_number_inherited || false
+                };
+                this.companyName = biz.company_name || '';
+
+                // Populate localization form from nested structure
+                const loc = response.localization || {};
+                this.localizationForm = {
+                    default_language: loc.default_language || 'fr',
+                    dashboard_language: loc.dashboard_language || 'fr',
+                    storefront_language: loc.storefront_language || 'fr',
+                    storefront_languages: loc.storefront_languages || ['fr', 'de', 'en'],
+                    storefront_locale: loc.storefront_locale || ''
+                };
+
+                // Populate marketplace form from nested structure
+                const lz = response.letzshop || {};
+                this.marketplaceForm = {
+                    letzshop_csv_url_fr: lz.csv_url_fr || '',
+                    letzshop_csv_url_en: lz.csv_url_en || '',
+                    letzshop_csv_url_de: lz.csv_url_de || '',
+                    letzshop_default_tax_rate: lz.default_tax_rate,
+                    letzshop_boost_sort: lz.boost_sort || '',
+                    letzshop_delivery_method: lz.delivery_method || '',
+                    letzshop_preorder_days: lz.preorder_days
+                };
+
+                // Reset all change flags
+                this.hasChanges = false;
+                this.hasBusinessChanges = false;
+                this.hasLocalizationChanges = false;
+                this.hasMarketplaceChanges = false;
+
+                vendorSettingsLog.info('Loaded settings');
+            } catch (error) {
+                vendorSettingsLog.error('Failed to load settings:', error);
+                this.error = error.message || 'Failed to load settings';
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        /**
+         * Mark general form as changed
+         */
+        markChanged() {
+            this.hasChanges = true;
+        },
+
+        /**
+         * Mark business form as changed
+         */
+        markBusinessChanged() {
+            this.hasBusinessChanges = true;
+        },
+
+        /**
+         * Mark localization form as changed
+         */
+        markLocalizationChanged() {
+            this.hasLocalizationChanges = true;
+        },
+
+        /**
+         * Mark marketplace form as changed
+         */
+        markMarketplaceChanged() {
+            this.hasMarketplaceChanges = true;
+        },
+
+        /**
+         * Get effective value for a business field (override or inherited)
+         */
+        getEffectiveBusinessValue(field) {
+            const override = this.businessForm[field];
+            if (override) return override;
+            // Return the effective value from settings (includes company inheritance)
+            return this.settings?.business_info?.[field] || '';
+        },
+
+        /**
+         * Check if field is using inherited value
+         */
+        isFieldInherited(field) {
+            return this.businessInherited[field] && !this.businessForm[field];
+        },
+
+        /**
+         * Reset a business field to inherit from company
+         */
+        resetToCompany(field) {
+            this.businessForm[field] = '';
+            this.hasBusinessChanges = true;
+        },
+
+        /**
+         * Save business info
+         */
+        async saveBusinessInfo() {
+            this.saving = true;
+            try {
+                // Determine which fields should be reset to company values
+                const resetFields = [];
+                for (const field of ['contact_email', 'contact_phone', 'website', 'business_address', 'tax_number']) {
+                    if (!this.businessForm[field] && this.settings?.business_info?.[field]) {
+                        resetFields.push(field);
+                    }
+                }
+
+                const payload = {
+                    name: this.businessForm.name,
+                    description: this.businessForm.description,
+                    contact_email: this.businessForm.contact_email || null,
+                    contact_phone: this.businessForm.contact_phone || null,
+                    website: this.businessForm.website || null,
+                    business_address: this.businessForm.business_address || null,
+                    tax_number: this.businessForm.tax_number || null,
+                    reset_to_company: resetFields
+                };
+
+                await apiClient.put(`/vendor/settings/business-info`, payload);
+
+                Utils.showToast('Business info saved', 'success');
+                vendorSettingsLog.info('Business info updated');
+
+                // Reload to get updated inheritance flags
+                await this.loadSettings();
+                this.hasBusinessChanges = false;
+            } catch (error) {
+                vendorSettingsLog.error('Failed to save business info:', error);
+                Utils.showToast(error.message || 'Failed to save business info', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        /**
+         * Save marketplace settings (Letzshop)
+         */
+        async saveMarketplaceSettings() {
+            this.saving = true;
+            try {
+                await apiClient.put(`/vendor/settings/letzshop`, this.marketplaceForm);
+
+                Utils.showToast('Marketplace settings saved', 'success');
+                vendorSettingsLog.info('Marketplace settings updated');
+
+                this.hasMarketplaceChanges = false;
+            } catch (error) {
+                vendorSettingsLog.error('Failed to save marketplace settings:', error);
+                Utils.showToast(error.message || 'Failed to save settings', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        /**
+         * Test Letzshop CSV URL
+         */
+        async testLetzshopUrl(lang) {
+            const url = this.marketplaceForm[`letzshop_csv_url_${lang}`];
+            if (!url) {
+                Utils.showToast('Please enter a URL first', 'error');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                // Try to fetch the URL to validate it
+                const response = await fetch(url, { method: 'HEAD', mode: 'no-cors' });
+                Utils.showToast(`URL appears to be valid`, 'success');
+            } catch (error) {
+                Utils.showToast('Could not validate URL - it may still work', 'warning');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        /**
+         * Reset settings to saved values
+         */
+        resetSettings() {
+            this.loadSettings();
+        },
+
+        /**
+         * Switch active section
+         */
+        setSection(sectionId) {
+            this.activeSection = sectionId;
+        },
+
+        /**
+         * Toggle a storefront language
+         */
+        toggleStorefrontLanguage(langCode) {
+            const index = this.localizationForm.storefront_languages.indexOf(langCode);
+            if (index === -1) {
+                this.localizationForm.storefront_languages.push(langCode);
+            } else {
+                this.localizationForm.storefront_languages.splice(index, 1);
+            }
+            this.hasLocalizationChanges = true;
+        },
+
+        /**
+         * Save localization settings
+         */
+        async saveLocalizationSettings() {
+            this.saving = true;
+            try {
+                await apiClient.put(`/vendor/settings/localization`, this.localizationForm);
+
+                Utils.showToast('Localization settings saved', 'success');
+                vendorSettingsLog.info('Localization settings updated');
+
+                this.hasLocalizationChanges = false;
+            } catch (error) {
+                vendorSettingsLog.error('Failed to save localization settings:', error);
+                Utils.showToast(error.message || 'Failed to save settings', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        // =====================================================================
+        // EMAIL SETTINGS
+        // =====================================================================
+
+        /**
+         * Load email settings when email tab is activated
+         */
+        async loadEmailSettings() {
+            if (this.emailSettings !== null) {
+                return; // Already loaded
+            }
+
+            this.emailSettingsLoading = true;
+            try {
+                // Load settings and providers in parallel
+                const [settingsResponse, providersResponse] = await Promise.all([
+                    apiClient.get('/vendor/email-settings'),
+                    apiClient.get('/vendor/email-settings/providers')
+                ]);
+
+                this.emailProviders = providersResponse.providers || [];
+
+                if (settingsResponse.configured && settingsResponse.settings) {
+                    this.emailSettings = settingsResponse.settings;
+                    this.populateEmailForm(settingsResponse.settings);
+                } else {
+                    this.emailSettings = { is_configured: false, is_verified: false };
+                }
+
+                vendorSettingsLog.info('Loaded email settings');
+            } catch (error) {
+                vendorSettingsLog.error('Failed to load email settings:', error);
+                Utils.showToast('Failed to load email settings', 'error');
+            } finally {
+                this.emailSettingsLoading = false;
+            }
+        },
+
+        /**
+         * Populate email form from settings
+         */
+        populateEmailForm(settings) {
+            this.emailForm = {
+                from_email: settings.from_email || '',
+                from_name: settings.from_name || '',
+                reply_to_email: settings.reply_to_email || '',
+                signature_text: settings.signature_text || '',
+                signature_html: settings.signature_html || '',
+                provider: settings.provider || 'smtp',
+                // SMTP - don't populate password
+                smtp_host: settings.smtp_host || '',
+                smtp_port: settings.smtp_port || 587,
+                smtp_username: settings.smtp_username || '',
+                smtp_password: '', // Never populate password
+                smtp_use_tls: settings.smtp_use_tls !== false,
+                smtp_use_ssl: settings.smtp_use_ssl || false,
+                // SendGrid - don't populate API key
+                sendgrid_api_key: '',
+                // Mailgun - don't populate API key
+                mailgun_api_key: '',
+                mailgun_domain: settings.mailgun_domain || '',
+                // SES - don't populate secrets
+                ses_access_key_id: '',
+                ses_secret_access_key: '',
+                ses_region: settings.ses_region || 'eu-west-1'
+            };
+            this.hasEmailChanges = false;
+        },
+
+        /**
+         * Mark email form as changed
+         */
+        markEmailChanged() {
+            this.hasEmailChanges = true;
+        },
+
+        /**
+         * Save email settings
+         */
+        async saveEmailSettings() {
+            // Validate required fields
+            if (!this.emailForm.from_email || !this.emailForm.from_name) {
+                Utils.showToast('From Email and From Name are required', 'error');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                const response = await apiClient.put('/vendor/email-settings', this.emailForm);
+
+                if (response.success) {
+                    Utils.showToast('Email settings saved', 'success');
+                    vendorSettingsLog.info('Email settings updated');
+
+                    // Update local state
+                    this.emailSettings = response.settings;
+                    this.hasEmailChanges = false;
+                } else {
+                    Utils.showToast(response.message || 'Failed to save email settings', 'error');
+                }
+            } catch (error) {
+                vendorSettingsLog.error('Failed to save email settings:', error);
+                Utils.showToast(error.message || 'Failed to save email settings', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        /**
+         * Send test email
+         */
+        async sendTestEmail() {
+            if (!this.testEmailAddress) {
+                Utils.showToast('Please enter a test email address', 'error');
+                return;
+            }
+
+            if (!this.emailSettings?.is_configured) {
+                Utils.showToast('Please save your email settings first', 'error');
+                return;
+            }
+
+            this.sendingTestEmail = true;
+            try {
+                const response = await apiClient.post('/vendor/email-settings/verify', {
+                    test_email: this.testEmailAddress
+                });
+
+                if (response.success) {
+                    Utils.showToast('Test email sent! Check your inbox.', 'success');
+                    // Update verification status
+                    this.emailSettings.is_verified = true;
+                } else {
+                    Utils.showToast(response.message || 'Failed to send test email', 'error');
+                }
+            } catch (error) {
+                vendorSettingsLog.error('Failed to send test email:', error);
+                Utils.showToast(error.message || 'Failed to send test email', 'error');
+            } finally {
+                this.sendingTestEmail = false;
+            }
+        },
+
+        /**
+         * Switch active section - with email loading hook
+         */
+        setSection(sectionId) {
+            this.activeSection = sectionId;
+
+            // Load email settings when email tab is activated
+            if (sectionId === 'email' && this.emailSettings === null) {
+                this.loadEmailSettings();
+            }
+        }
+    };
+}

app/modules/tenancy/static/vendor/js/team.js

@@ -0,0 +1,275 @@
+// static/vendor/js/team.js
+/**
+ * Vendor team management page logic
+ * Manage team members, invitations, and roles
+ */
+
+const vendorTeamLog = window.LogConfig.loggers.vendorTeam ||
+    window.LogConfig.createLogger('vendorTeam', false);
+
+vendorTeamLog.info('Loading...');
+
+function vendorTeam() {
+    vendorTeamLog.info('vendorTeam() called');
+
+    return {
+        // Inherit base layout state
+        ...data(),
+
+        // Set page identifier
+        currentPage: 'team',
+
+        // Loading states
+        loading: true,
+        error: '',
+        saving: false,
+
+        // Team data
+        members: [],
+        roles: [],
+        stats: {
+            total: 0,
+            active_count: 0,
+            pending_invitations: 0
+        },
+
+        // Modal states
+        showInviteModal: false,
+        showEditModal: false,
+        showRemoveModal: false,
+        selectedMember: null,
+
+        // Invite form
+        inviteForm: {
+            email: '',
+            first_name: '',
+            last_name: '',
+            role_name: 'staff'
+        },
+
+        // Edit form
+        editForm: {
+            role_id: null,
+            is_active: true
+        },
+
+        // Available role names for invite
+        roleOptions: [
+            { value: 'owner', label: 'Owner', description: 'Full access to all features' },
+            { value: 'manager', label: 'Manager', description: 'Manage orders, products, and team' },
+            { value: 'staff', label: 'Staff', description: 'Handle orders and products' },
+            { value: 'support', label: 'Support', description: 'Customer support access' },
+            { value: 'viewer', label: 'Viewer', description: 'Read-only access' },
+            { value: 'marketing', label: 'Marketing', description: 'Content and promotions' }
+        ],
+
+        async init() {
+            vendorTeamLog.info('Team init() called');
+
+            // Guard against multiple initialization
+            if (window._vendorTeamInitialized) {
+                vendorTeamLog.warn('Already initialized, skipping');
+                return;
+            }
+            window._vendorTeamInitialized = true;
+
+            // IMPORTANT: Call parent init first to set vendorCode from URL
+            const parentInit = data().init;
+            if (parentInit) {
+                await parentInit.call(this);
+            }
+
+            try {
+                await Promise.all([
+                    this.loadMembers(),
+                    this.loadRoles()
+                ]);
+            } catch (error) {
+                vendorTeamLog.error('Init failed:', error);
+                this.error = 'Failed to initialize team page';
+            }
+
+            vendorTeamLog.info('Team initialization complete');
+        },
+
+        /**
+         * Load team members
+         */
+        async loadMembers() {
+            this.loading = true;
+            this.error = '';
+
+            try {
+                const response = await apiClient.get(`/vendor/team/members?include_inactive=true`);
+
+                this.members = response.members || [];
+                this.stats = {
+                    total: response.total || 0,
+                    active_count: response.active_count || 0,
+                    pending_invitations: response.pending_invitations || 0
+                };
+
+                vendorTeamLog.info('Loaded team members:', this.members.length);
+            } catch (error) {
+                vendorTeamLog.error('Failed to load team members:', error);
+                this.error = error.message || 'Failed to load team members';
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        /**
+         * Load available roles
+         */
+        async loadRoles() {
+            try {
+                const response = await apiClient.get(`/vendor/team/roles`);
+                this.roles = response.roles || [];
+                vendorTeamLog.info('Loaded roles:', this.roles.length);
+            } catch (error) {
+                vendorTeamLog.error('Failed to load roles:', error);
+            }
+        },
+
+        /**
+         * Open invite modal
+         */
+        openInviteModal() {
+            this.inviteForm = {
+                email: '',
+                first_name: '',
+                last_name: '',
+                role_name: 'staff'
+            };
+            this.showInviteModal = true;
+        },
+
+        /**
+         * Send invitation
+         */
+        async sendInvitation() {
+            if (!this.inviteForm.email) {
+                Utils.showToast('Email is required', 'error');
+                return;
+            }
+
+            this.saving = true;
+            try {
+                await apiClient.post(`/vendor/team/invite`, this.inviteForm);
+
+                Utils.showToast('Invitation sent successfully', 'success');
+                vendorTeamLog.info('Invitation sent to:', this.inviteForm.email);
+
+                this.showInviteModal = false;
+                await this.loadMembers();
+            } catch (error) {
+                vendorTeamLog.error('Failed to send invitation:', error);
+                Utils.showToast(error.message || 'Failed to send invitation', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        /**
+         * Open edit member modal
+         */
+        openEditModal(member) {
+            this.selectedMember = member;
+            this.editForm = {
+                role_id: member.role_id,
+                is_active: member.is_active
+            };
+            this.showEditModal = true;
+        },
+
+        /**
+         * Update team member
+         */
+        async updateMember() {
+            if (!this.selectedMember) return;
+
+            this.saving = true;
+            try {
+                await apiClient.put(
+                    `/vendor/${this.vendorCode}/team/members/${this.selectedMember.user_id}`,
+                    this.editForm
+                );
+
+                Utils.showToast('Team member updated', 'success');
+                vendorTeamLog.info('Updated team member:', this.selectedMember.user_id);
+
+                this.showEditModal = false;
+                this.selectedMember = null;
+                await this.loadMembers();
+            } catch (error) {
+                vendorTeamLog.error('Failed to update team member:', error);
+                Utils.showToast(error.message || 'Failed to update team member', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        /**
+         * Confirm remove member
+         */
+        confirmRemove(member) {
+            this.selectedMember = member;
+            this.showRemoveModal = true;
+        },
+
+        /**
+         * Remove team member
+         */
+        async removeMember() {
+            if (!this.selectedMember) return;
+
+            this.saving = true;
+            try {
+                await apiClient.delete(`/vendor/team/members/${this.selectedMember.user_id}`);
+
+                Utils.showToast('Team member removed', 'success');
+                vendorTeamLog.info('Removed team member:', this.selectedMember.user_id);
+
+                this.showRemoveModal = false;
+                this.selectedMember = null;
+                await this.loadMembers();
+            } catch (error) {
+                vendorTeamLog.error('Failed to remove team member:', error);
+                Utils.showToast(error.message || 'Failed to remove team member', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        /**
+         * Get role display name
+         */
+        getRoleName(member) {
+            if (member.role_name) return member.role_name;
+            const role = this.roles.find(r => r.id === member.role_id);
+            return role ? role.name : 'Unknown';
+        },
+
+        /**
+         * Get member initials for avatar
+         */
+        getInitials(member) {
+            const first = member.first_name || member.email?.charAt(0) || '';
+            const last = member.last_name || '';
+            return (first.charAt(0) + last.charAt(0)).toUpperCase() || '?';
+        },
+
+        /**
+         * Format date for display
+         */
+        formatDate(dateStr) {
+            if (!dateStr) return '-';
+            const locale = window.VENDOR_CONFIG?.locale || 'en-GB';
+            return new Date(dateStr).toLocaleDateString(locale, {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric'
+            });
+        }
+    };
+}

app/modules/tenancy/templates/tenancy/admin/admin-user-detail.html

@@ -0,0 +1,238 @@
+{# app/templates/admin/admin-user-detail.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/headers.html' import detail_page_header %}
+
+{% block title %}Admin User Details{% endblock %}
+
+{% block alpine_data %}adminUserDetailPage(){% endblock %}
+
+{% block content %}
+{% call detail_page_header("adminUser?.full_name || adminUser?.username || 'Admin User Details'", '/admin/admin-users', subtitle_show='adminUser') %}
+    @<span x-text="adminUser?.username"></span>
+    <span class="text-gray-400 mx-2">|</span>
+    <span x-text="adminUser?.email"></span>
+{% endcall %}
+
+{{ loading_state('Loading admin user details...') }}
+
+{{ error_state('Error loading admin user') }}
+
+<!-- Admin User Details -->
+<div x-show="!loading && adminUser">
+    <!-- Quick Actions Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Quick Actions
+        </h3>
+        <div class="flex flex-wrap items-center gap-3">
+            <a
+                :href="`/admin/admin-users/${userId}/edit`"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
+                <span x-html="$icon('edit', 'w-4 h-4 mr-2')"></span>
+                Edit Admin User
+            </a>
+            <button
+                @click="toggleStatus()"
+                :disabled="saving || adminUser?.id === currentUserId"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 border border-transparent rounded-lg focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+                :class="adminUser?.is_active ? 'bg-orange-600 hover:bg-orange-700' : 'bg-green-600 hover:bg-green-700'"
+                :title="adminUser?.id === currentUserId ? 'Cannot deactivate yourself' : ''">
+                <span x-html="$icon(adminUser?.is_active ? 'user-x' : 'user-check', 'w-4 h-4 mr-2')"></span>
+                <span x-text="adminUser?.is_active ? 'Deactivate' : 'Activate'"></span>
+            </button>
+            <button
+                @click="deleteAdminUser()"
+                :disabled="saving || adminUser?.id === currentUserId"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red disabled:opacity-50 disabled:cursor-not-allowed"
+                :title="adminUser?.id === currentUserId ? 'Cannot delete yourself' : 'Delete admin user'">
+                <span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
+                Delete Admin User
+            </button>
+        </div>
+    </div>
+
+    <!-- Status Cards -->
+    <div class="grid gap-6 mb-8 md:grid-cols-4">
+        <!-- Admin Type -->
+        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+            <div class="p-3 mr-4 rounded-full"
+                 :class="adminUser?.is_super_admin
+                     ? 'text-orange-500 bg-orange-100 dark:text-orange-100 dark:bg-orange-500'
+                     : 'text-purple-500 bg-purple-100 dark:text-purple-100 dark:bg-purple-500'">
+                <span x-html="$icon(adminUser?.is_super_admin ? 'star' : 'shield', 'w-5 h-5')"></span>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                    Admin Type
+                </p>
+                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="adminUser?.is_super_admin ? 'Super Admin' : 'Platform Admin'">
+                    -
+                </p>
+            </div>
+        </div>
+
+        <!-- Active Status -->
+        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+            <div class="p-3 mr-4 rounded-full"
+                 :class="adminUser?.is_active ? 'text-green-500 bg-green-100 dark:text-green-100 dark:bg-green-500' : 'text-red-500 bg-red-100 dark:text-red-100 dark:bg-red-500'">
+                <span x-html="$icon(adminUser?.is_active ? 'check-circle' : 'x-circle', 'w-5 h-5')"></span>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                    Status
+                </p>
+                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="adminUser?.is_active ? 'Active' : 'Inactive'">
+                    -
+                </p>
+            </div>
+        </div>
+
+        <!-- Platforms Access -->
+        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+            <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
+                <span x-html="$icon('globe-alt', 'w-5 h-5')"></span>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                    Platforms
+                </p>
+                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="adminUser?.is_super_admin ? 'All' : ((adminUser?.platforms || []).length || 0)">
+                    0
+                </p>
+            </div>
+        </div>
+
+        <!-- Created Date -->
+        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+            <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
+                <span x-html="$icon('calendar', 'w-5 h-5')"></span>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                    Created
+                </p>
+                <p class="text-sm font-semibold text-gray-700 dark:text-gray-200" x-text="formatDate(adminUser?.created_at)">
+                    -
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Info Cards -->
+    <div class="grid gap-6 mb-8 md:grid-cols-2">
+        <!-- Account Information -->
+        <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Account Information
+            </h3>
+            <div class="space-y-3">
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Username</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300">@<span x-text="adminUser?.username || '-'"></span></p>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Email</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="adminUser?.email || '-'">-</p>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Email Verified</p>
+                    <span
+                        class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full"
+                        :class="adminUser?.is_email_verified ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100'"
+                        x-text="adminUser?.is_email_verified ? 'Verified' : 'Not Verified'">
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Personal Information -->
+        <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Personal Information
+            </h3>
+            <div class="space-y-3">
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Full Name</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="adminUser?.full_name || 'Not provided'">-</p>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">First Name</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="adminUser?.first_name || 'Not provided'">-</p>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Last Name</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="adminUser?.last_name || 'Not provided'">-</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Platform Access (for platform admins) -->
+    <template x-if="!adminUser?.is_super_admin">
+        <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Platform Access
+            </h3>
+            <template x-if="(adminUser?.platforms || []).length === 0">
+                <p class="text-sm text-gray-500 dark:text-gray-400">No platforms assigned. This admin cannot access any platform.</p>
+            </template>
+            <template x-if="(adminUser?.platforms || []).length > 0">
+                <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                    <template x-for="platform in (adminUser?.platforms || [])" :key="platform.id">
+                        <div class="flex items-center p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
+                            <div class="p-2 mr-3 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-600">
+                                <span x-html="$icon('globe-alt', 'w-4 h-4')"></span>
+                            </div>
+                            <div>
+                                <p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="platform.name"></p>
+                                <p class="text-xs text-gray-500 dark:text-gray-400" x-text="platform.code"></p>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </template>
+        </div>
+    </template>
+
+    <!-- Super Admin Notice -->
+    <template x-if="adminUser?.is_super_admin">
+        <div class="px-4 py-3 mb-8 bg-orange-50 dark:bg-orange-900/20 rounded-lg border border-orange-200 dark:border-orange-800">
+            <div class="flex items-center">
+                <span x-html="$icon('star', 'w-5 h-5 text-orange-500 mr-3')"></span>
+                <div>
+                    <h4 class="text-sm font-medium text-orange-800 dark:text-orange-300">Super Admin Access</h4>
+                    <p class="text-sm text-orange-600 dark:text-orange-400">
+                        This user has full access to all platforms and can manage other admin users.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <!-- Activity Information -->
+    <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Activity Information
+        </h3>
+        <div class="grid gap-6 md:grid-cols-3">
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Last Login</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="adminUser?.last_login ? formatDate(adminUser.last_login) : 'Never'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Created At</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="formatDate(adminUser?.created_at)">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Last Updated</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="formatDate(adminUser?.updated_at)">-</p>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='admin/js/admin-user-detail.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/admin-user-edit.html

@@ -0,0 +1,272 @@
+{# app/templates/admin/admin-user-edit.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state %}
+{% from 'shared/macros/headers.html' import edit_page_header %}
+{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}
+
+{% block title %}Edit Admin User{% endblock %}
+
+{% block alpine_data %}adminUserEditPage(){% endblock %}
+
+{% block content %}
+{% call edit_page_header('Edit Admin User', '/admin/admin-users', subtitle_show='adminUser', back_label='Back to Admin Users') %}
+    @<span x-text="adminUser?.username"></span>
+{% endcall %}
+
+{{ loading_state('Loading admin user...', show_condition='loading') }}
+
+<!-- Edit Content -->
+<div x-show="!loading && adminUser">
+    <!-- Quick Actions Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Quick Actions
+        </h3>
+        <div class="flex flex-wrap items-center gap-3">
+            <!-- Toggle Active Status -->
+            <button
+                @click="toggleStatus()"
+                :disabled="saving || adminUser?.id === currentUserId"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none disabled:opacity-50"
+                :class="adminUser?.is_active ? 'bg-orange-600 hover:bg-orange-700' : 'bg-green-600 hover:bg-green-700'"
+                :title="adminUser?.id === currentUserId ? 'Cannot deactivate yourself' : ''">
+                <span x-html="$icon(adminUser?.is_active ? 'user-x' : 'user-check', 'w-4 h-4 mr-2')"></span>
+                <span x-text="adminUser?.is_active ? 'Deactivate' : 'Activate'"></span>
+            </button>
+
+            <!-- Toggle Super Admin -->
+            <button
+                @click="toggleSuperAdmin()"
+                :disabled="saving || (adminUser?.id === currentUserId && adminUser?.is_super_admin)"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none disabled:opacity-50"
+                :class="adminUser?.is_super_admin ? 'bg-yellow-600 hover:bg-yellow-700' : 'bg-purple-600 hover:bg-purple-700'"
+                :title="adminUser?.id === currentUserId && adminUser?.is_super_admin ? 'Cannot demote yourself' : ''">
+                <span x-html="$icon(adminUser?.is_super_admin ? 'shield-x' : 'shield-check', 'w-4 h-4 mr-2')"></span>
+                <span x-text="adminUser?.is_super_admin ? 'Demote from Super Admin' : 'Promote to Super Admin'"></span>
+            </button>
+
+            <!-- Status Badges -->
+            <div class="ml-auto flex items-center gap-2">
+                <span
+                    x-show="adminUser?.is_super_admin"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-yellow-700 bg-yellow-100 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
+                    Super Admin
+                </span>
+                <span
+                    x-show="!adminUser?.is_super_admin"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-purple-700 bg-purple-100 rounded-full dark:bg-purple-700 dark:text-purple-100">
+                    Platform Admin
+                </span>
+                <span
+                    x-show="adminUser?.is_active"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
+                    Active
+                </span>
+                <span
+                    x-show="!adminUser?.is_active"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
+                    Inactive
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Admin Info Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Admin Information
+        </h3>
+        <div class="grid gap-6 md:grid-cols-2">
+            <!-- Left Column -->
+            <div class="space-y-4">
+                <div>
+                    <span class="text-sm text-gray-600 dark:text-gray-400">User ID</span>
+                    <p class="text-gray-800 dark:text-gray-200 font-medium" x-text="adminUser?.id"></p>
+                </div>
+                <div>
+                    <span class="text-sm text-gray-600 dark:text-gray-400">Username</span>
+                    <p class="text-gray-800 dark:text-gray-200 font-medium" x-text="adminUser?.username"></p>
+                </div>
+                <div>
+                    <span class="text-sm text-gray-600 dark:text-gray-400">Email</span>
+                    <p class="text-gray-800 dark:text-gray-200 font-medium" x-text="adminUser?.email"></p>
+                </div>
+            </div>
+            <!-- Right Column -->
+            <div class="space-y-4">
+                <div>
+                    <span class="text-sm text-gray-600 dark:text-gray-400">First Name</span>
+                    <p class="text-gray-800 dark:text-gray-200 font-medium" x-text="adminUser?.first_name || '-'"></p>
+                </div>
+                <div>
+                    <span class="text-sm text-gray-600 dark:text-gray-400">Last Name</span>
+                    <p class="text-gray-800 dark:text-gray-200 font-medium" x-text="adminUser?.last_name || '-'"></p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Platform Assignments Card (Only for Platform Admins) -->
+    <template x-if="!adminUser?.is_super_admin">
+        <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Platform Assignments
+                </h3>
+                <button
+                    @click="openPlatformModal()"
+                    :disabled="saving || availablePlatformsForAssignment.length === 0"
+                    class="flex items-center px-3 py-1.5 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none disabled:opacity-50">
+                    <span x-html="$icon('plus', 'w-4 h-4 mr-1')"></span>
+                    Add Platform
+                </button>
+            </div>
+
+            <!-- Assigned Platforms List -->
+            <div x-show="adminUser?.platforms?.length > 0" class="space-y-2">
+                <template x-for="platform in adminUser?.platforms" :key="platform.id">
+                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
+                        <div class="flex items-center">
+                            <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center mr-3">
+                                <span class="text-lg font-bold text-purple-600 dark:text-purple-400" x-text="platform.code.charAt(0).toUpperCase()"></span>
+                            </div>
+                            <div>
+                                <p class="font-medium text-gray-800 dark:text-gray-200" x-text="platform.name"></p>
+                                <p class="text-sm text-gray-500 dark:text-gray-400" x-text="platform.code"></p>
+                            </div>
+                        </div>
+                        <button
+                            @click="removePlatform(platform.id)"
+                            :disabled="saving || adminUser?.platforms?.length <= 1"
+                            class="p-2 text-red-600 hover:bg-red-100 dark:hover:bg-red-900/20 rounded-lg transition-colors disabled:opacity-50"
+                            :title="adminUser?.platforms?.length <= 1 ? 'Must have at least one platform' : 'Remove platform'">
+                            <span x-html="$icon('x', 'w-5 h-5')"></span>
+                        </button>
+                    </div>
+                </template>
+            </div>
+
+            <!-- No Platforms Message -->
+            <div x-show="!adminUser?.platforms?.length" class="text-center py-6">
+                <span x-html="$icon('exclamation', 'mx-auto h-12 w-12 text-gray-400')"></span>
+                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">No platforms assigned</p>
+            </div>
+
+            <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">
+                <span x-html="$icon('information-circle', 'w-4 h-4 inline mr-1')"></span>
+                Platform admins must be assigned to at least one platform.
+            </p>
+        </div>
+    </template>
+
+    <!-- Super Admin Notice -->
+    <template x-if="adminUser?.is_super_admin">
+        <div class="px-4 py-3 mb-6 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+            <div class="flex items-center">
+                <span x-html="$icon('shield-check', 'w-6 h-6 text-yellow-600 dark:text-yellow-400 mr-3')"></span>
+                <div>
+                    <h4 class="font-medium text-yellow-800 dark:text-yellow-200">Super Admin Access</h4>
+                    <p class="text-sm text-yellow-700 dark:text-yellow-300">This user has full access to all platforms and administrative functions.</p>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <!-- Danger Zone Card -->
+    <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800 border border-red-200 dark:border-red-800">
+        <h3 class="mb-4 text-lg font-semibold text-red-700 dark:text-red-400">
+            Danger Zone
+        </h3>
+        <div class="flex flex-wrap items-center gap-3">
+            <!-- Delete Admin User Button -->
+            <button
+                @click="deleteAdminUser()"
+                :disabled="saving || adminUser?.id === currentUserId"
+                class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red disabled:opacity-50"
+                :title="adminUser?.id === currentUserId ? 'Cannot delete yourself' : 'Delete this admin user'">
+                <span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
+                Delete Admin User
+            </button>
+        </div>
+        <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">
+            <span x-html="$icon('exclamation', 'w-4 h-4 inline mr-1 text-red-500')"></span>
+            Deleting an admin user is permanent and cannot be undone.
+        </p>
+    </div>
+</div>
+
+<!-- Platform Assignment Modal -->
+<div
+    x-show="showPlatformModal"
+    x-cloak
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+    @click.self="showPlatformModal = false"
+    @keydown.escape.window="showPlatformModal = false">
+    <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-xl dark:bg-gray-800">
+        <div class="flex items-center justify-between mb-4">
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Assign Platform
+            </h3>
+            <button
+                @click="showPlatformModal = false"
+                class="p-1 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
+                <span x-html="$icon('x', 'w-5 h-5')"></span>
+            </button>
+        </div>
+
+        <div class="mb-4">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                Select Platform
+            </label>
+            <select
+                x-model="selectedPlatformId"
+                class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select">
+                <option value="">Choose a platform...</option>
+                <template x-for="platform in availablePlatformsForAssignment" :key="platform.id">
+                    <option :value="platform.id" x-text="`${platform.name} (${platform.code})`"></option>
+                </template>
+            </select>
+        </div>
+
+        <div x-show="availablePlatformsForAssignment.length === 0" class="mb-4 p-3 bg-gray-100 dark:bg-gray-700 rounded-lg">
+            <p class="text-sm text-gray-600 dark:text-gray-400">
+                All available platforms have been assigned to this admin.
+            </p>
+        </div>
+
+        <div class="flex justify-end gap-3">
+            <button
+                @click="showPlatformModal = false"
+                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
+                Cancel
+            </button>
+            <button
+                @click="assignPlatform(selectedPlatformId)"
+                :disabled="!selectedPlatformId || saving"
+                class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none disabled:opacity-50">
+                <span x-show="!saving">Assign Platform</span>
+                <span x-show="saving" class="flex items-center">
+                    <span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
+                    Assigning...
+                </span>
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Remove Platform Confirmation Modal -->
+{{ confirm_modal_dynamic(
+    'removePlatformModal',
+    'Remove Platform',
+    "'Are you sure you want to remove \"' + (platformToRemove?.name || '') + '\" from this admin?'",
+    'confirmRemovePlatform()',
+    'showRemovePlatformModal',
+    'Remove',
+    'Cancel',
+    'warning'
+) }}
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='admin/js/admin-user-edit.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/admin-users.html

@@ -0,0 +1,262 @@
+{# app/templates/admin/admin-users.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/pagination.html' import pagination %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
+
+{% block title %}Admin Users{% endblock %}
+
+{% block alpine_data %}adminUsersPage(){% endblock %}
+
+{% block content %}
+{{ page_header('Admin User Management', subtitle='Manage super admins and platform admins', action_label='Create Admin User', action_url='/admin/admin-users/create', action_icon='user-plus') }}
+
+{{ loading_state('Loading admin users...') }}
+
+{{ error_state('Error loading admin users') }}
+
+<!-- Stats Cards -->
+<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
+    <!-- Card: Total Admin Users -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
+            <span x-html="$icon('shield', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Total Admins
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total_admins || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Super Admins -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
+            <span x-html="$icon('star', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Super Admins
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.super_admins || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Platform Admins -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
+            <span x-html="$icon('globe-alt', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Platform Admins
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.platform_admins || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Active Admins -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
+            <span x-html="$icon('user-check', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Active
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.active_admins || 0">
+                0
+            </p>
+        </div>
+    </div>
+</div>
+
+<!-- Search and Filters -->
+<div x-show="!loading" class="mb-6 px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <!-- Search Bar -->
+        <div class="flex-1 max-w-md">
+            <div class="relative">
+                <input
+                    type="text"
+                    x-model="filters.search"
+                    @input="debouncedSearch()"
+                    placeholder="Search by name, email, or username..."
+                    class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:bg-gray-700 dark:text-gray-300"
+                >
+                <div class="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Filters -->
+        <div class="flex flex-wrap gap-3">
+            <!-- Admin Type Filter -->
+            <select
+                x-model="filters.is_super_admin"
+                @change="pagination.page = 1; loadAdminUsers()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Admin Types</option>
+                <option value="true">Super Admins</option>
+                <option value="false">Platform Admins</option>
+            </select>
+
+            <!-- Status Filter -->
+            <select
+                x-model="filters.is_active"
+                @change="pagination.page = 1; loadAdminUsers()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Status</option>
+                <option value="true">Active</option>
+                <option value="false">Inactive</option>
+            </select>
+
+            <!-- Refresh Button -->
+            <button
+                @click="loadAdminUsers(); loadStats()"
+                class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                title="Refresh admin users"
+            >
+                <span x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
+                Refresh
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Admin Users Table -->
+<div x-show="!loading">
+    {% call table_wrapper() %}
+            {{ table_header(['Admin', 'Email', 'Type', 'Platforms', 'Status', 'Last Login', 'Actions']) }}
+            <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
+                <!-- Empty State -->
+                <template x-if="adminUsers.length === 0">
+                    <tr>
+                        <td colspan="7" class="px-4 py-8 text-center text-gray-600 dark:text-gray-400">
+                            <div class="flex flex-col items-center">
+                                <span x-html="$icon('shield', 'w-12 h-12 text-gray-400 mb-4')"></span>
+                                <p class="text-lg font-medium">No admin users found</p>
+                                <p class="text-sm" x-text="filters.search ? 'Try adjusting your search or filters' : 'Create your first admin user to get started'"></p>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+
+                <!-- Admin User Rows -->
+                <template x-for="admin in adminUsers" :key="admin.id">
+                    <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
+                        <!-- Admin Info -->
+                        <td class="px-4 py-3">
+                            <div class="flex items-center text-sm">
+                                <div class="relative hidden w-8 h-8 mr-3 rounded-full md:block">
+                                    <div class="absolute inset-0 rounded-full flex items-center justify-center text-white font-semibold text-sm"
+                                         :class="admin.is_super_admin ? 'bg-orange-500' : 'bg-purple-500'"
+                                         x-text="(admin.username || 'A').charAt(0).toUpperCase()">
+                                    </div>
+                                </div>
+                                <div>
+                                    <p class="font-semibold" x-text="admin.username"></p>
+                                    <p class="text-xs text-gray-600 dark:text-gray-400" x-text="admin.full_name || ''"></p>
+                                </div>
+                            </div>
+                        </td>
+
+                        <!-- Email -->
+                        <td class="px-4 py-3 text-sm" x-text="admin.email"></td>
+
+                        <!-- Type -->
+                        <td class="px-4 py-3 text-xs">
+                            <span class="px-2 py-1 font-semibold leading-tight rounded-full"
+                                  :class="admin.is_super_admin
+                                      ? 'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100'
+                                      : 'text-purple-700 bg-purple-100 dark:bg-purple-700 dark:text-purple-100'"
+                                  x-text="admin.is_super_admin ? 'Super Admin' : 'Platform Admin'">
+                            </span>
+                        </td>
+
+                        <!-- Platforms -->
+                        <td class="px-4 py-3 text-sm">
+                            <template x-if="admin.is_super_admin">
+                                <span class="text-gray-500 dark:text-gray-400 italic">All platforms</span>
+                            </template>
+                            <template x-if="!admin.is_super_admin">
+                                <div class="flex flex-wrap gap-1">
+                                    <template x-for="platform in (admin.platforms || []).slice(0, 3)" :key="platform.id">
+                                        <span class="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-700 rounded" x-text="platform.code"></span>
+                                    </template>
+                                    <template x-if="(admin.platforms || []).length > 3">
+                                        <span class="px-2 py-0.5 text-xs text-gray-500" x-text="'+' + ((admin.platforms || []).length - 3) + ' more'"></span>
+                                    </template>
+                                    <template x-if="(admin.platforms || []).length === 0">
+                                        <span class="text-gray-500 dark:text-gray-400 italic">None assigned</span>
+                                    </template>
+                                </div>
+                            </template>
+                        </td>
+
+                        <!-- Status -->
+                        <td class="px-4 py-3 text-xs">
+                            <span class="px-2 py-1 font-semibold leading-tight rounded-full"
+                                  :class="admin.is_active ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100'"
+                                  x-text="admin.is_active ? 'Active' : 'Inactive'">
+                            </span>
+                        </td>
+
+                        <!-- Last Login -->
+                        <td class="px-4 py-3 text-sm" x-text="admin.last_login ? formatDate(admin.last_login) : 'Never'"></td>
+
+                        <!-- Actions -->
+                        <td class="px-4 py-3">
+                            <div class="flex items-center space-x-2 text-sm">
+                                <!-- View Button -->
+                                <a
+                                    :href="'/admin/admin-users/' + admin.id"
+                                    class="flex items-center justify-center p-2 text-blue-600 rounded-lg hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                                    title="View admin user"
+                                >
+                                    <span x-html="$icon('eye', 'w-5 h-5')"></span>
+                                </a>
+
+                                <!-- Edit Button -->
+                                <a
+                                    :href="'/admin/admin-users/' + admin.id + '/edit'"
+                                    class="flex items-center justify-center p-2 text-purple-600 rounded-lg hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                                    title="Edit admin user"
+                                >
+                                    <span x-html="$icon('edit', 'w-5 h-5')"></span>
+                                </a>
+
+                                <!-- Delete Button (disabled for self) -->
+                                <button
+                                    @click="deleteAdminUser(admin)"
+                                    :disabled="admin.id === currentUserId"
+                                    class="flex items-center justify-center p-2 text-red-600 rounded-lg hover:bg-red-50 dark:text-red-400 dark:hover:bg-gray-700 focus:outline-none transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                    :title="admin.id === currentUserId ? 'Cannot delete yourself' : 'Delete admin user'"
+                                >
+                                    <span x-html="$icon('delete', 'w-5 h-5')"></span>
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </tbody>
+    {% endcall %}
+
+    {{ pagination() }}
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='admin/js/admin-users.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/companies.html

@@ -0,0 +1,249 @@
+{# app/templates/admin/companies.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/pagination.html' import pagination %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
+
+{% block title %}Companies{% endblock %}
+
+{% block alpine_data %}adminCompanies(){% endblock %}
+
+{% block content %}
+{{ page_header('Company Management', action_label='Create Company', action_url='/admin/companies/create') }}
+
+{{ loading_state('Loading companies...') }}
+
+{{ error_state('Error loading companies') }}
+
+<!-- Stats Cards -->
+<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
+    <!-- Card: Total Companies -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
+            <span x-html="$icon('office-building', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Total Companies
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Verified Companies -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
+            <span x-html="$icon('badge-check', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Verified
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.verified || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Active Companies -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
+            <span x-html="$icon('check-circle', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Active
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.active || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Total Vendors -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
+            <span x-html="$icon('shopping-bag', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Total Vendors
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.totalVendors || 0">
+                0
+            </p>
+        </div>
+    </div>
+</div>
+
+<!-- Search and Filters Bar -->
+<div x-show="!loading" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <!-- Search Input -->
+        <div class="flex-1 max-w-md">
+            <div class="relative">
+                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
+                </span>
+                <input
+                    type="text"
+                    x-model="filters.search"
+                    @input="debouncedSearch()"
+                    placeholder="Search by name or email..."
+                    class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
+                >
+            </div>
+        </div>
+
+        <!-- Filters -->
+        <div class="flex flex-wrap gap-3">
+            <!-- Status Filter -->
+            <select
+                x-model="filters.is_active"
+                @change="pagination.page = 1; loadCompanies()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Status</option>
+                <option value="true">Active</option>
+                <option value="false">Inactive</option>
+            </select>
+
+            <!-- Verification Filter -->
+            <select
+                x-model="filters.is_verified"
+                @change="pagination.page = 1; loadCompanies()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Verification</option>
+                <option value="true">Verified</option>
+                <option value="false">Unverified</option>
+            </select>
+
+            <!-- Refresh Button -->
+            <button
+                @click="loadCompanies()"
+                class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                title="Refresh companies"
+            >
+                <span x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
+                Refresh
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Companies Table -->
+<div x-show="!loading">
+    {% call table_wrapper() %}
+            {{ table_header(['Company', 'Owner', 'Vendors', 'Status', 'Created', 'Actions']) }}
+            <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
+                <!-- Empty State -->
+                <template x-if="paginatedCompanies.length === 0">
+                    <tr>
+                        <td colspan="6" class="px-4 py-8 text-center text-gray-600 dark:text-gray-400">
+                            <div class="flex flex-col items-center">
+                                <span x-html="$icon('office-building', 'w-12 h-12 mb-2 text-gray-300')"></span>
+                                <p class="font-medium">No companies found</p>
+                                <p class="text-xs mt-1" x-text="filters.search || filters.is_active || filters.is_verified ? 'Try adjusting your search or filters' : 'Create your first company to get started'"></p>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+
+                <!-- Company Rows -->
+                <template x-for="company in paginatedCompanies" :key="company.id">
+                    <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                        <!-- Company Info -->
+                        <td class="px-4 py-3">
+                            <div class="flex items-center text-sm">
+                                <div class="relative hidden w-8 h-8 mr-3 rounded-full md:block">
+                                    <div class="absolute inset-0 rounded-full bg-blue-100 dark:bg-blue-600 flex items-center justify-center">
+                                        <span class="text-xs font-semibold text-blue-600 dark:text-blue-100"
+                                              x-text="company.name?.charAt(0).toUpperCase() || '?'"></span>
+                                    </div>
+                                </div>
+                                <div>
+                                    <p class="font-semibold" x-text="company.name"></p>
+                                    <p class="text-xs text-gray-600 dark:text-gray-400" x-text="company.contact_email"></p>
+                                </div>
+                            </div>
+                        </td>
+
+                        <!-- Owner Email -->
+                        <td class="px-4 py-3 text-sm">
+                            <p x-text="company.owner_email || 'N/A'"></p>
+                        </td>
+
+                        <!-- Vendor Count -->
+                        <td class="px-4 py-3 text-sm">
+                            <span class="px-2 py-1 font-semibold leading-tight text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100"
+                                  x-text="company.vendor_count || 0">
+                                0
+                            </span>
+                        </td>
+
+                        <!-- Status Badges -->
+                        <td class="px-4 py-3 text-xs">
+                            <div class="flex gap-1">
+                                <span class="inline-flex items-center px-2 py-1 font-semibold leading-tight rounded-full"
+                                      :class="company.is_active ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-gray-700 bg-gray-100 dark:text-gray-100 dark:bg-gray-700'">
+                                    <span x-text="company.is_active ? 'Active' : 'Inactive'"></span>
+                                </span>
+                                <span x-show="company.is_verified" class="inline-flex items-center px-2 py-1 font-semibold leading-tight text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100">
+                                    <span x-html="$icon('badge-check', 'w-3 h-3 mr-1')"></span>
+                                    Verified
+                                </span>
+                            </div>
+                        </td>
+
+                        <!-- Created Date -->
+                        <td class="px-4 py-3 text-sm" x-text="formatDate(company.created_at)"></td>
+
+                        <!-- Actions -->
+                        <td class="px-4 py-3">
+                            <div class="flex items-center space-x-2 text-sm">
+                                <!-- View Button -->
+                                <a
+                                    :href="'/admin/companies/' + company.id"
+                                    class="flex items-center justify-center p-2 text-blue-600 rounded-lg hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                                    title="View company"
+                                >
+                                    <span x-html="$icon('eye', 'w-5 h-5')"></span>
+                                </a>
+
+                                <!-- Edit Button -->
+                                <button
+                                    @click="editCompany(company.id)"
+                                    class="flex items-center justify-center p-2 text-purple-600 rounded-lg hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                                    title="Edit company"
+                                >
+                                    <span x-html="$icon('edit', 'w-5 h-5')"></span>
+                                </button>
+
+                                <!-- Delete Button -->
+                                <button
+                                    @click="deleteCompany(company)"
+                                    class="flex items-center justify-center p-2 text-red-600 rounded-lg hover:bg-red-50 dark:text-red-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                                    title="Delete company"
+                                    :disabled="company.vendor_count > 0"
+                                    :class="company.vendor_count > 0 ? 'opacity-50 cursor-not-allowed' : ''"
+                                >
+                                    <span x-html="$icon('delete', 'w-5 h-5')"></span>
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </tbody>
+    {% endcall %}
+
+    {{ pagination() }}
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='admin/js/companies.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/company-create.html

@@ -0,0 +1,285 @@
+{# app/templates/admin/company-create.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import error_state %}
+
+{% block title %}Create Company{% endblock %}
+
+{% block alpine_data %}adminCompanyCreate(){% endblock %}
+
+{% block content %}
+{{ page_header('Create New Company', subtitle='Create a company account with an owner user', back_url='/admin/companies', back_label='Back to Companies') }}
+
+<!-- Success Message -->
+<div x-show="successMessage" x-cloak class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
+    <div class="flex items-start">
+        <span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
+        <div class="flex-1">
+            <p class="font-semibold">Company Created Successfully!</p>
+            <template x-if="ownerCredentials">
+                <div class="mt-2 p-3 bg-white rounded border border-green-300">
+                    <p class="text-sm font-semibold mb-2">Owner Login Credentials (Save these!):</p>
+                    <div class="space-y-1 text-sm font-mono">
+                        <div><span class="font-bold">Email:</span> <span x-text="ownerCredentials.email"></span></div>
+                        <div><span class="font-bold">Password:</span> <span x-text="ownerCredentials.password" class="bg-yellow-100 px-2 py-1 rounded"></span></div>
+                        <div><span class="font-bold">Login URL:</span> <span x-text="ownerCredentials.login_url"></span></div>
+                    </div>
+                    <p class="mt-2 text-xs text-red-600">⚠️ The password will only be shown once. Please save it now!</p>
+                </div>
+            </template>
+        </div>
+    </div>
+</div>
+
+{{ error_state('Error Creating Company', error_var='errorMessage', show_condition='errorMessage') }}
+
+<!-- Create Company Form -->
+<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+    <form @submit.prevent="createCompany">
+        <!-- Company Information Section -->
+        <div class="mb-6">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Company Information</h3>
+
+            <div class="grid gap-6 mb-4 md:grid-cols-2">
+                <!-- Company Name -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                        Company Name <span class="text-red-500">*</span>
+                    </label>
+                    <input
+                        type="text"
+                        x-model="formData.name"
+                        required
+                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                        placeholder="ACME Corporation"
+                    />
+                </div>
+
+                <!-- Contact Email (Business) -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                        Business Contact Email <span class="text-red-500">*</span>
+                    </label>
+                    <input
+                        type="email"
+                        x-model="formData.contact_email"
+                        required
+                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                        placeholder="info@acmecorp.com"
+                    />
+                    <p class="mt-1 text-xs text-gray-500">Public business contact email</p>
+                </div>
+            </div>
+
+            <!-- Description -->
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                    Description
+                </label>
+                <textarea
+                    x-model="formData.description"
+                    rows="3"
+                    class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                    placeholder="Brief description of the company..."
+                ></textarea>
+            </div>
+
+            <div class="grid gap-6 mb-4 md:grid-cols-2">
+                <!-- Contact Phone -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                        Phone Number
+                    </label>
+                    <input
+                        type="tel"
+                        x-model="formData.contact_phone"
+                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                        placeholder="+352 123 456 789"
+                    />
+                </div>
+
+                <!-- Website -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                        Website
+                    </label>
+                    <input
+                        type="url"
+                        x-model="formData.website"
+                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                        placeholder="https://www.acmecorp.com"
+                    />
+                </div>
+            </div>
+
+            <div class="grid gap-6 mb-4 md:grid-cols-2">
+                <!-- Business Address -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                        Business Address
+                    </label>
+                    <textarea
+                        x-model="formData.business_address"
+                        rows="2"
+                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                        placeholder="123 Main Street, Luxembourg City"
+                    ></textarea>
+                </div>
+
+                <!-- Tax Number -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                        Tax/VAT Number
+                    </label>
+                    <input
+                        type="text"
+                        x-model="formData.tax_number"
+                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                        placeholder="LU12345678"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <!-- Owner Information Section -->
+        <div class="mb-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Owner Account</h3>
+            <div class="p-4 mb-4 bg-blue-50 border border-blue-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
+                <p class="text-sm text-blue-800 dark:text-blue-300">
+                    <span x-html="$icon('information-circle', 'w-4 h-4 inline mr-1')"></span>
+                    A user account will be created for the company owner. If the email already exists, that user will be assigned as owner.
+                </p>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                    Owner Email (Login) <span class="text-red-500">*</span>
+                </label>
+                <input
+                    type="email"
+                    x-model="formData.owner_email"
+                    required
+                    class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                    placeholder="john.smith@acmecorp.com"
+                />
+                <p class="mt-1 text-xs text-gray-500">This email will be used for owner login. Can be different from business contact email.</p>
+            </div>
+        </div>
+
+        <!-- Form Actions -->
+        <div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
+            <button
+                type="button"
+                @click="window.location.href='/admin/companies'"
+                class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-500 focus:outline-none focus:shadow-outline-gray"
+            >
+                Cancel
+            </button>
+            <button
+                type="submit"
+                :disabled="loading"
+                class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+                <span x-show="!loading">Create Company</span>
+                <span x-show="loading" class="flex items-center">
+                    <span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
+                    Creating...
+                </span>
+            </button>
+        </div>
+    </form>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Company Create Alpine Component
+function adminCompanyCreate() {
+    return {
+        // Inherit base layout functionality
+        ...data(),
+
+        // Page identifier
+        currentPage: 'companies',
+
+        // Form data
+        formData: {
+            name: '',
+            description: '',
+            owner_email: '',
+            contact_email: '',
+            contact_phone: '',
+            website: '',
+            business_address: '',
+            tax_number: ''
+        },
+
+        // UI state
+        loading: false,
+        successMessage: false,
+        errorMessage: '',
+        ownerCredentials: null,
+
+        // Initialize
+        init() {
+            console.log('Company Create page initialized');
+        },
+
+        // Create company
+        async createCompany() {
+            this.loading = true;
+            this.errorMessage = '';
+            this.successMessage = false;
+            this.ownerCredentials = null;
+
+            try {
+                console.log('Creating company:', this.formData);
+
+                const response = await apiClient.post('/admin/companies', this.formData);
+
+                console.log('Company created successfully:', response);
+
+                // Store owner credentials
+                if (response.temporary_password && response.temporary_password !== 'N/A (Existing user)') {
+                    this.ownerCredentials = {
+                        email: response.owner_email,
+                        password: response.temporary_password,
+                        login_url: response.login_url
+                    };
+                }
+
+                this.successMessage = true;
+
+                // Reset form
+                this.formData = {
+                    name: '',
+                    description: '',
+                    owner_email: '',
+                    contact_email: '',
+                    contact_phone: '',
+                    website: '',
+                    business_address: '',
+                    tax_number: ''
+                };
+
+                // Scroll to top to show success message
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+
+                // Redirect after 10 seconds if credentials shown, or 3 seconds otherwise
+                const redirectDelay = this.ownerCredentials ? 10000 : 3000;
+                setTimeout(() => {
+                    window.location.href = '/admin/companies';
+                }, redirectDelay);
+
+            } catch (error) {
+                console.error('Failed to create company:', error);
+                this.errorMessage = error.message || 'Failed to create company';
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            } finally {
+                this.loading = false;
+            }
+        }
+    };
+}
+</script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/company-detail.html

@@ -0,0 +1,269 @@
+{# app/templates/admin/company-detail.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/headers.html' import detail_page_header %}
+
+{% block title %}Company Details{% endblock %}
+
+{% block alpine_data %}adminCompanyDetail(){% endblock %}
+
+{% block content %}
+{% call detail_page_header("company?.name || 'Company Details'", '/admin/companies', subtitle_show='company') %}
+    ID: <span x-text="companyId"></span>
+    <span class="text-gray-400 mx-2">|</span>
+    <span x-text="company?.vendor_count || 0"></span> vendor(s)
+{% endcall %}
+
+{{ loading_state('Loading company details...') }}
+
+{{ error_state('Error loading company') }}
+
+<!-- Company Details -->
+<div x-show="!loading && company">
+    <!-- Quick Actions Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Quick Actions
+        </h3>
+        <div class="flex flex-wrap items-center gap-3">
+            <a
+                :href="`/admin/companies/${companyId}/edit`"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
+                <span x-html="$icon('edit', 'w-4 h-4 mr-2')"></span>
+                Edit Company
+            </a>
+            <button
+                @click="deleteCompany()"
+                :disabled="company?.vendor_count > 0"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red disabled:opacity-50 disabled:cursor-not-allowed"
+                :title="company?.vendor_count > 0 ? 'Cannot delete company with vendors' : 'Delete company'">
+                <span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
+                Delete Company
+            </button>
+        </div>
+    </div>
+
+    <!-- Status Cards -->
+    <div class="grid gap-6 mb-8 md:grid-cols-4">
+        <!-- Verification Status -->
+        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+            <div class="p-3 mr-4 rounded-full"
+                 :class="company?.is_verified ? 'text-green-500 bg-green-100 dark:text-green-100 dark:bg-green-500' : 'text-orange-500 bg-orange-100 dark:text-orange-100 dark:bg-orange-500'">
+                <span x-html="$icon(company?.is_verified ? 'badge-check' : 'clock', 'w-5 h-5')"></span>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                    Verification
+                </p>
+                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="company?.is_verified ? 'Verified' : 'Pending'">
+                    -
+                </p>
+            </div>
+        </div>
+
+        <!-- Active Status -->
+        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+            <div class="p-3 mr-4 rounded-full"
+                 :class="company?.is_active ? 'text-green-500 bg-green-100 dark:text-green-100 dark:bg-green-500' : 'text-red-500 bg-red-100 dark:text-red-100 dark:bg-red-500'">
+                <span x-html="$icon(company?.is_active ? 'check-circle' : 'x-circle', 'w-5 h-5')"></span>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                    Status
+                </p>
+                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="company?.is_active ? 'Active' : 'Inactive'">
+                    -
+                </p>
+            </div>
+        </div>
+
+        <!-- Vendor Count -->
+        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+            <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
+                <span x-html="$icon('shopping-bag', 'w-5 h-5')"></span>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                    Vendors
+                </p>
+                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="company?.vendor_count || 0">
+                    0
+                </p>
+            </div>
+        </div>
+
+        <!-- Created Date -->
+        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+            <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
+                <span x-html="$icon('calendar', 'w-5 h-5')"></span>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                    Created
+                </p>
+                <p class="text-sm font-semibold text-gray-700 dark:text-gray-200" x-text="formatDate(company?.created_at)">
+                    -
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Info Cards -->
+    <div class="grid gap-6 mb-8 md:grid-cols-2">
+        <!-- Basic Information -->
+        <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Basic Information
+            </h3>
+            <div class="space-y-3">
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Company Name</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="company?.name || '-'">-</p>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Description</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="company?.description || 'No description provided'">-</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Contact Information -->
+        <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Contact Information
+            </h3>
+            <div class="space-y-3">
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Contact Email</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="company?.contact_email || '-'">-</p>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Phone</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="company?.contact_phone || '-'">-</p>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Website</p>
+                    <a
+                        x-show="company?.website"
+                        :href="company?.website"
+                        target="_blank"
+                        class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400"
+                        x-text="company?.website">
+                    </a>
+                    <span x-show="!company?.website" class="text-sm text-gray-700 dark:text-gray-300">-</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Business Details -->
+    <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Business Details
+        </h3>
+        <div class="grid gap-6 md:grid-cols-2">
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Business Address</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line" x-text="company?.business_address || 'No address provided'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Tax Number</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="company?.tax_number || 'Not provided'">-</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Owner Information -->
+    <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Owner Information
+        </h3>
+        <div class="grid gap-6 md:grid-cols-3">
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Owner User ID</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="company?.owner_user_id || '-'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Owner Username</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="company?.owner_username || '-'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Owner Email</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="company?.owner_email || '-'">-</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Vendors Section -->
+    <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800" x-show="company?.vendors && company?.vendors.length > 0">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            <span x-html="$icon('shopping-bag', 'inline w-5 h-5 mr-2')"></span>
+            Vendors (<span x-text="company?.vendors?.length || 0"></span>)
+        </h3>
+        <div class="overflow-x-auto">
+            <table class="w-full whitespace-no-wrap">
+                <thead>
+                    <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-700">
+                        <th class="px-4 py-3">Vendor</th>
+                        <th class="px-4 py-3">Subdomain</th>
+                        <th class="px-4 py-3">Status</th>
+                        <th class="px-4 py-3">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
+                    <template x-for="vendor in company?.vendors || []" :key="vendor.id">
+                        <tr class="text-gray-700 dark:text-gray-400">
+                            <td class="px-4 py-3">
+                                <div class="flex items-center text-sm">
+                                    <div>
+                                        <p class="font-semibold" x-text="vendor.name"></p>
+                                        <p class="text-xs text-gray-600 dark:text-gray-400" x-text="vendor.vendor_code"></p>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-4 py-3 text-sm" x-text="vendor.subdomain"></td>
+                            <td class="px-4 py-3 text-xs">
+                                <span class="px-2 py-1 font-semibold leading-tight rounded-full"
+                                      :class="vendor.is_active ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100'"
+                                      x-text="vendor.is_active ? 'Active' : 'Inactive'">
+                                </span>
+                            </td>
+                            <td class="px-4 py-3">
+                                <a :href="'/admin/vendors/' + vendor.vendor_code"
+                                   class="text-blue-600 hover:text-blue-700 dark:text-blue-400 text-sm">
+                                    View
+                                </a>
+                            </td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <!-- More Actions -->
+    <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            More Actions
+        </h3>
+        <div class="flex flex-wrap gap-3">
+            <!-- Create Vendor Button -->
+            <a
+                href="/admin/vendors/create"
+                class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-green-600 border border-transparent rounded-lg hover:bg-green-700 focus:outline-none focus:shadow-outline-green"
+            >
+                <span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
+                Create Vendor
+            </a>
+        </div>
+        <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">
+            <span x-html="$icon('information-circle', 'w-4 h-4 inline mr-1')"></span>
+            Vendors created will be associated with this company.
+        </p>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='admin/js/company-detail.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/company-edit.html

@@ -0,0 +1,449 @@
+{# app/templates/admin/company-edit.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state %}
+{% from 'shared/macros/inputs.html' import search_autocomplete, selected_item_display %}
+{% from 'shared/macros/headers.html' import edit_page_header %}
+
+{% block title %}Edit Company{% endblock %}
+
+{% block alpine_data %}adminCompanyEdit(){% endblock %}
+
+{% block content %}
+{% call edit_page_header('Edit Company', '/admin/companies', subtitle_show='company', back_label='Back to Companies') %}
+    <span x-text="company?.name"></span>
+{% endcall %}
+
+{{ loading_state('Loading company...', show_condition='loadingCompany') }}
+
+<!-- Edit Form -->
+<div x-show="!loadingCompany && company">
+    <!-- Quick Actions Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Quick Actions
+        </h3>
+        <div class="flex flex-wrap items-center gap-3">
+            <button
+                @click="toggleVerification()"
+                :disabled="saving"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
+                :class="{ 'bg-orange-600 hover:bg-orange-700': company && company.is_verified, 'bg-green-600 hover:bg-green-700': company && !company.is_verified }">
+                <span x-html="$icon(company?.is_verified ? 'x-circle' : 'badge-check', 'w-4 h-4 mr-2')"></span>
+                <span x-text="company?.is_verified ? 'Unverify Company' : 'Verify Company'"></span>
+            </button>
+
+            <button
+                @click="toggleActive()"
+                :disabled="saving"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
+                :class="{ 'bg-red-600 hover:bg-red-700': company && company.is_active, 'bg-green-600 hover:bg-green-700': company && !company.is_active }">
+                <span x-html="$icon(company?.is_active ? 'lock-closed' : 'lock-open', 'w-4 h-4 mr-2')"></span>
+                <span x-text="company?.is_active ? 'Deactivate' : 'Activate'"></span>
+            </button>
+
+            <!-- Status Badges -->
+            <div class="ml-auto flex items-center gap-2">
+                <span
+                    x-show="company?.is_verified"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
+                    <span x-html="$icon('badge-check', 'w-3 h-3 mr-1')"></span>
+                    Verified
+                </span>
+                <span
+                    x-show="!company?.is_verified"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:bg-orange-700 dark:text-orange-100">
+                    <span x-html="$icon('clock', 'w-3 h-3 mr-1')"></span>
+                    Pending
+                </span>
+                <span
+                    x-show="company?.is_active"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
+                    Active
+                </span>
+                <span
+                    x-show="!company?.is_active"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
+                    Inactive
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Form Card -->
+    <form @submit.prevent="handleSubmit" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <div class="grid gap-6 mb-8 md:grid-cols-2">
+            <!-- Left Column: Basic Info -->
+            <div>
+                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Basic Information
+                </h3>
+
+                <!-- Company ID (readonly) -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Company ID
+                    </span>
+                    <input
+                        type="text"
+                        :value="company?.id"
+                        disabled
+                        class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
+                    >
+                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                        System-generated identifier
+                    </span>
+                </label>
+
+                <!-- Name -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Company Name <span class="text-red-600">*</span>
+                    </span>
+                    <input
+                        type="text"
+                        x-model="formData.name"
+                        required
+                        maxlength="255"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                        :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.name }"
+                    >
+                    <span x-show="errors.name" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.name"></span>
+                </label>
+
+                <!-- Description -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Description
+                    </span>
+                    <textarea
+                        x-model="formData.description"
+                        rows="3"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
+                    ></textarea>
+                </label>
+            </div>
+
+            <!-- Right Column: Contact Info -->
+            <div>
+                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Contact Information
+                </h3>
+
+                <!-- Owner Info (readonly) -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Owner
+                    </span>
+                    <input
+                        type="text"
+                        :value="company?.owner_username ? company.owner_username + ' (' + company.owner_email + ')' : 'User ID: ' + company?.owner_user_id"
+                        disabled
+                        class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
+                    >
+                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                        Use "Transfer Ownership" in More Actions to change
+                    </span>
+                </label>
+
+                <!-- Contact Email -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Contact Email <span class="text-red-600">*</span>
+                    </span>
+                    <input
+                        type="email"
+                        x-model="formData.contact_email"
+                        required
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                        :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.contact_email }"
+                    >
+                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                        Public business contact email
+                    </span>
+                    <span x-show="errors.contact_email" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.contact_email"></span>
+                </label>
+
+                <!-- Phone -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Phone
+                    </span>
+                    <input
+                        type="tel"
+                        x-model="formData.contact_phone"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    >
+                </label>
+
+                <!-- Website -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Website
+                    </span>
+                    <input
+                        type="url"
+                        x-model="formData.website"
+                        :disabled="saving"
+                        placeholder="https://example.com"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    >
+                </label>
+            </div>
+        </div>
+
+        <!-- Business Details -->
+        <div class="mb-8">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Business Details
+            </h3>
+
+            <div class="grid gap-6 md:grid-cols-2">
+                <!-- Business Address -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Business Address
+                    </span>
+                    <textarea
+                        x-model="formData.business_address"
+                        rows="3"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
+                    ></textarea>
+                </label>
+
+                <!-- Tax Number -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Tax Number
+                    </span>
+                    <input
+                        type="text"
+                        x-model="formData.tax_number"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    >
+                </label>
+            </div>
+        </div>
+
+        <!-- Company Statistics (readonly) -->
+        <template x-if="company?.vendor_count !== undefined">
+            <div class="mb-8">
+                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Company Statistics
+                </h3>
+                <div class="grid gap-4 md:grid-cols-2">
+                    <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-700">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">Total Vendors</p>
+                        <p class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="company.vendor_count || 0"></p>
+                    </div>
+                    <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-700">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">Active Vendors</p>
+                        <p class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="company.active_vendor_count || 0"></p>
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        <!-- Save Button -->
+        <div class="flex items-center justify-end gap-3 pt-6 border-t dark:border-gray-700">
+            <a
+                href="/admin/companies"
+                class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
+                Cancel
+            </a>
+            <button
+                type="submit"
+                :disabled="saving"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
+                <span x-show="!saving">
+                    <span x-html="$icon('check', 'w-4 h-4 mr-2 inline')"></span>
+                    Save Changes
+                </span>
+                <span x-show="saving" class="flex items-center">
+                    <span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
+                    Saving...
+                </span>
+            </button>
+        </div>
+    </form>
+
+    <!-- More Actions Section -->
+    <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            More Actions
+        </h3>
+        <div class="flex flex-wrap gap-3">
+            <!-- Transfer Ownership Button -->
+            <button
+                @click="showTransferOwnershipModal = true"
+                :disabled="saving"
+                class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-orange-600 border border-transparent rounded-lg hover:bg-orange-700 focus:outline-none focus:shadow-outline-orange disabled:opacity-50"
+            >
+                <span x-html="$icon('switch-horizontal', 'w-4 h-4 mr-2')"></span>
+                Transfer Ownership
+            </button>
+
+            <!-- Delete Company Button -->
+            <button
+                @click="deleteCompany()"
+                :disabled="saving || (company?.vendor_count > 0)"
+                class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red disabled:opacity-50"
+                :title="company?.vendor_count > 0 ? 'Cannot delete company with vendors' : 'Delete this company'"
+            >
+                <span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
+                Delete Company
+            </button>
+        </div>
+        <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">
+            <span x-html="$icon('information-circle', 'w-4 h-4 inline mr-1')"></span>
+            Ownership transfer affects all vendors under this company.
+            <span x-show="company?.vendor_count > 0" class="text-orange-600 dark:text-orange-400">
+                Company cannot be deleted while it has vendors (<span x-text="company?.vendor_count"></span> vendors).
+            </span>
+        </p>
+    </div>
+
+    {# noqa: FE-004 - Complex form modal with dynamic user search and transfer functionality #}
+    <!-- Transfer Ownership Modal -->
+    <div
+        x-show="showTransferOwnershipModal"
+        x-cloak
+        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50"
+        @keydown.escape.window="showTransferOwnershipModal = false"
+    >
+        <div
+            @click.away="showTransferOwnershipModal = false"
+            class="w-full max-w-md bg-white rounded-lg shadow-lg dark:bg-gray-800"
+        >
+            <!-- Modal Header -->
+            <div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
+                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Transfer Company Ownership
+                </h3>
+                <button
+                    @click="showTransferOwnershipModal = false"
+                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+                >
+                    <span x-html="$icon('x', 'w-5 h-5')"></span>
+                </button>
+            </div>
+
+            <!-- Modal Body -->
+            <div class="p-4">
+                <div class="mb-4 p-3 bg-orange-100 border border-orange-300 text-orange-700 rounded-lg dark:bg-orange-900 dark:border-orange-700 dark:text-orange-300">
+                    <p class="flex items-start text-sm">
+                        <span x-html="$icon('exclamation', 'w-5 h-5 mr-2 flex-shrink-0')"></span>
+                        <span>
+                            <strong>Warning:</strong> This will transfer ownership of the company
+                            "<span x-text="company?.name"></span>" and all its vendors to another user.
+                        </span>
+                    </p>
+                </div>
+
+                <form @submit.prevent="transferOwnership()">
+                    <!-- New Owner Search -->
+                    <label class="block mb-4 text-sm">
+                        <span class="text-gray-700 dark:text-gray-400">
+                            New Owner <span class="text-red-600">*</span>
+                        </span>
+                        {{ search_autocomplete(
+                            search_var='userSearchQuery',
+                            results_var='userSearchResults',
+                            show_dropdown_var='showUserDropdown',
+                            loading_var='searchingUsers',
+                            disabled_var='transferring',
+                            search_action='searchUsers()',
+                            select_action='selectUser(item)',
+                            selected_check='transferData.new_owner_user_id === item.id',
+                            display_field='username',
+                            secondary_field='email',
+                            placeholder='Search by name or email...',
+                            no_results_text='No users found'
+                        ) }}
+                        {{ selected_item_display(
+                            selected_var='selectedUser',
+                            display_field='username',
+                            secondary_field='email',
+                            clear_action='clearSelectedUser()'
+                        ) }}
+                        <span class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                            Current owner: <span x-text="company?.owner_username || 'User ID ' + company?.owner_user_id"></span>
+                        </span>
+                        <p x-show="showOwnerError && !transferData.new_owner_user_id" class="mt-1 text-xs text-red-600 dark:text-red-400">
+                            <span x-html="$icon('exclamation', 'w-4 h-4 inline mr-1')"></span>
+                            Please select a new owner
+                        </p>
+                    </label>
+
+                    <!-- Transfer Reason -->
+                    <label class="block mb-4 text-sm">
+                        <span class="text-gray-700 dark:text-gray-400">
+                            Reason (optional)
+                        </span>
+                        <textarea
+                            x-model="transferData.transfer_reason"
+                            rows="2"
+                            :disabled="transferring"
+                            placeholder="Enter reason for transfer (for audit log)"
+                            class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
+                        ></textarea>
+                    </label>
+
+                    <!-- Confirmation Checkbox -->
+                    <label class="flex items-center text-sm">
+                        <input
+                            type="checkbox"
+                            x-model="transferData.confirm_transfer"
+                            :disabled="transferring"
+                            class="form-checkbox text-purple-600"
+                        >
+                        <span class="ml-2 text-gray-700 dark:text-gray-400">
+                            I confirm I want to transfer ownership
+                        </span>
+                    </label>
+                    <p x-show="showConfirmError && !transferData.confirm_transfer" class="mt-1 mb-4 text-xs text-red-600 dark:text-red-400">
+                        <span x-html="$icon('exclamation', 'w-4 h-4 inline mr-1')"></span>
+                        Please confirm the transfer by checking the box above
+                    </p>
+                    <div x-show="!showConfirmError || transferData.confirm_transfer" class="mb-4"></div>
+
+                    <!-- Modal Actions -->
+                    <div class="flex justify-end gap-3">
+                        <button
+                            type="button"
+                            @click="showTransferOwnershipModal = false"
+                            :disabled="transferring"
+                            class="px-4 py-2 text-sm font-medium text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none disabled:opacity-50"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            :disabled="transferring"
+                            class="flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-orange-600 border border-transparent rounded-lg hover:bg-orange-700 focus:outline-none focus:shadow-outline-orange disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            <span x-show="!transferring">
+                                <span x-html="$icon('switch-horizontal', 'w-4 h-4 mr-2 inline')"></span>
+                                Transfer Ownership
+                            </span>
+                            <span x-show="transferring" class="flex items-center">
+                                <span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
+                                Transferring...
+                            </span>
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='admin/js/company-edit.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/login.html

@@ -0,0 +1,140 @@
+{# app/templates/admin/login.html #}
+<!DOCTYPE html>
+<html :class="{ 'dark': dark }" x-data="adminLogin()" lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Admin Login - Multi-Tenant Platform</title>
+    <!-- Fonts: Local fallback + Google Fonts -->
+    <link href="/static/shared/fonts/inter.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="{{ url_for('static', path='admin/css/tailwind.output.css') }}" />
+    <style>
+        [x-cloak] { display: none !important; }
+    </style>
+</head>
+<body>
+    <div class="flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900" x-cloak>
+        <div class="flex-1 h-full max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800">
+            <div class="flex flex-col overflow-y-auto md:flex-row">
+                <div class="h-32 md:h-auto md:w-1/2">
+                    <img aria-hidden="true" class="object-cover w-full h-full dark:hidden"
+                         src="{{ url_for('static', path='admin/img/login-office.jpeg') }}" alt="Office" />
+                    <img aria-hidden="true" class="hidden object-cover w-full h-full dark:block"
+                         src="{{ url_for('static', path='admin/img/login-office-dark.jpeg') }}" alt="Office" />
+                </div>
+                <div class="flex items-center justify-center p-6 sm:p-12 md:w-1/2">
+                    <div class="w-full">
+                        <h1 class="mb-4 text-xl font-semibold text-gray-700 dark:text-gray-200">
+                            Admin Login
+                        </h1>
+
+                        <!-- Alert Messages -->
+                        <div x-show="error" x-text="error"
+                             class="px-4 py-3 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800"
+                             x-transition></div>
+
+                        <div x-show="success" x-text="success"
+                             class="px-4 py-3 mb-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800"
+                             x-transition></div>
+
+                        <!-- Login Form -->
+                        <form @submit.prevent="handleLogin">
+                            <label class="block text-sm">
+                                <span class="text-gray-700 dark:text-gray-400">Username</span>
+                                <input x-model="credentials.username"
+                                       :disabled="loading"
+                                       @input="clearErrors"
+                                       class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
+                                       :class="{ 'border-red-600': errors.username }"
+                                       placeholder="Enter your username"
+                                       autocomplete="username"
+                                       required />
+                                <span x-show="errors.username" x-text="errors.username"
+                                      class="text-xs text-red-600 dark:text-red-400"></span>
+                            </label>
+
+                            <label class="block mt-4 text-sm">
+                                <span class="text-gray-700 dark:text-gray-400">Password</span>
+                                <input x-model="credentials.password"
+                                       :disabled="loading"
+                                       @input="clearErrors"
+                                       class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
+                                       :class="{ 'border-red-600': errors.password }"
+                                       placeholder="***************"
+                                       type="password"
+                                       autocomplete="current-password"
+                                       required />
+                                <span x-show="errors.password" x-text="errors.password"
+                                      class="text-xs text-red-600 dark:text-red-400"></span>
+                            </label>
+
+                            {# noqa: FE-002 - Inline spinner SVG for loading state #}
+                            <button type="submit" :disabled="loading"
+                                    class="block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
+                                <span x-show="!loading">Sign in</span>
+                                <span x-show="loading" class="flex items-center justify-center">
+                                    <svg class="inline w-4 h-4 mr-2 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                    </svg>
+                                    Signing in...
+                                </span>
+                            </button>
+                        </form>
+
+                        <hr class="my-8" />
+
+                        <p class="mt-4">
+                            <a class="text-sm font-medium text-purple-600 dark:text-purple-400 hover:underline"
+                               href="#">
+                                Forgot your password?
+                            </a>
+                        </p>
+                        <p class="mt-2">
+                            <a class="text-sm font-medium text-gray-600 dark:text-gray-400 hover:underline"
+                               href="/">
+                                ← Back to Platform
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts - ORDER MATTERS! -->
+
+    <!-- 1. Log Configuration -->
+    <script src="{{ url_for('static', path='shared/js/log-config.js') }}"></script>
+
+    <!-- 2. Icons -->
+    <script src="{{ url_for('static', path='shared/js/icons.js') }}"></script>
+
+    <!-- 3. Utils -->
+    <script src="{{ url_for('static', path='shared/js/utils.js') }}"></script>
+
+    <!-- 4. API Client -->
+    <script src="{{ url_for('static', path='shared/js/api-client.js') }}"></script>
+
+    <!-- 5. Alpine.js v3 with CDN fallback -->
+    <script>
+    (function() {
+        var script = document.createElement('script');
+        script.defer = true;
+        script.src = 'https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js';
+        script.onerror = function() {
+            console.warn('Alpine.js CDN failed, loading local copy...');
+            var fallbackScript = document.createElement('script');
+            fallbackScript.defer = true;
+            fallbackScript.src = '{{ url_for("static", path="shared/js/lib/alpine.min.js") }}';
+            document.head.appendChild(fallbackScript);
+        };
+        document.head.appendChild(script);
+    })();
+    </script>
+
+    <!-- 6. Login Logic -->
+    <script src="{{ url_for('tenancy_static', path='admin/js/login.js') }}"></script>
+</body>
+</html>

app/modules/tenancy/templates/tenancy/admin/module-config.html

@@ -0,0 +1,148 @@
+{# app/templates/admin/module-config.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
+{% from 'shared/macros/headers.html' import page_header %}
+
+{% block title %}Module Configuration{% endblock %}
+
+{% block alpine_data %}adminModuleConfig('{{ platform_code }}', '{{ module_code }}'){% endblock %}
+
+{% block content %}
+{{ page_header('Module Configuration', back_url='/admin/platforms/' + platform_code + '/modules') }}
+
+{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
+{{ error_state('Error', show_condition='error') }}
+
+<!-- Module Info -->
+<div class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+    <div class="flex items-center justify-between">
+        <div>
+            <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="moduleInfo?.module_name || 'Loading...'"></h2>
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+                Configure settings for this module on <span x-text="platformName" class="font-medium"></span>.
+            </p>
+        </div>
+        <span class="px-3 py-1 text-sm font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200" x-text="moduleInfo?.module_code?.toUpperCase()"></span>
+    </div>
+</div>
+
+<!-- Loading State -->
+<div x-show="loading" class="flex items-center justify-center py-12 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+    <span x-html="$icon('refresh', 'w-8 h-8 animate-spin text-purple-600')"></span>
+    <span class="ml-3 text-gray-500 dark:text-gray-400">Loading configuration...</span>
+</div>
+
+<!-- Configuration Form -->
+<div x-show="!loading" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
+    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
+        <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200">Configuration Options</h3>
+    </div>
+
+    <!-- Config Fields -->
+    <div class="p-4 space-y-6">
+        <template x-if="moduleInfo?.schema_info?.length > 0">
+            <div class="space-y-6">
+                <template x-for="field in moduleInfo.schema_info" :key="field.key">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2" x-text="field.label"></label>
+
+                        <!-- Boolean field -->
+                        <template x-if="field.type === 'boolean'">
+                            <div class="flex items-center">
+                                <button
+                                    @click="config[field.key] = !config[field.key]"
+                                    :class="{
+                                        'bg-purple-600': config[field.key],
+                                        'bg-gray-200 dark:bg-gray-600': !config[field.key]
+                                    }"
+                                    class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                                    role="switch"
+                                    :aria-checked="config[field.key]"
+                                >
+                                    <span
+                                        :class="{
+                                            'translate-x-5': config[field.key],
+                                            'translate-x-0': !config[field.key]
+                                        }"
+                                        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                                    ></span>
+                                </button>
+                                <span class="ml-3 text-sm text-gray-500 dark:text-gray-400" x-text="config[field.key] ? 'Enabled' : 'Disabled'"></span>
+                            </div>
+                        </template>
+
+                        <!-- Number field (dynamic Alpine.js template - cannot use static macro) --> {# noqa: FE-008 #}
+                        <template x-if="field.type === 'number'">
+                            <input
+                                type="number"
+                                x-model.number="config[field.key]"
+                                :min="field.min"
+                                :max="field.max"
+                                class="block w-full max-w-xs px-3 py-2 text-sm leading-5 text-gray-700 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring focus:ring-purple-400"
+                            >
+                        </template>
+
+                        <!-- String field -->
+                        <template x-if="field.type === 'string'">
+                            <input
+                                type="text"
+                                x-model="config[field.key]"
+                                class="block w-full max-w-md px-3 py-2 text-sm leading-5 text-gray-700 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring focus:ring-purple-400"
+                            >
+                        </template>
+
+                        <!-- Select field -->
+                        <template x-if="field.type === 'select'">
+                            <select
+                                x-model="config[field.key]"
+                                class="block w-full max-w-xs px-3 py-2 text-sm leading-5 text-gray-700 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring focus:ring-purple-400"
+                            >
+                                <template x-for="option in field.options" :key="option">
+                                    <option :value="option" x-text="option"></option>
+                                </template>
+                            </select>
+                        </template>
+
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400" x-text="field.description"></p>
+                    </div>
+                </template>
+            </div>
+        </template>
+
+        <!-- No config options -->
+        <template x-if="!moduleInfo?.schema_info?.length">
+            <div class="text-center py-8">
+                <span x-html="$icon('cog', 'w-12 h-12 mx-auto text-gray-400')"></span>
+                <p class="mt-4 text-gray-500 dark:text-gray-400">No configuration options available for this module.</p>
+            </div>
+        </template>
+    </div>
+
+    <!-- Actions -->
+    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
+        <button
+            @click="resetToDefaults()"
+            :disabled="saving"
+            class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600 disabled:opacity-50"
+        >
+            <span x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
+            Reset to Defaults
+        </button>
+
+        <button
+            @click="saveConfig()"
+            :disabled="saving"
+            class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none focus:ring focus:ring-purple-400 disabled:opacity-50"
+        >
+            <span x-show="saving" x-html="$icon('refresh', 'w-4 h-4 mr-2 animate-spin')"></span>
+            <span x-show="!saving" x-html="$icon('check', 'w-4 h-4 mr-2')"></span>
+            <span x-text="saving ? 'Saving...' : 'Save Configuration'"></span>
+        </button>
+    </div>
+</div>
+
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', path='admin/js/module-config.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/module-info.html

@@ -0,0 +1,274 @@
+{# app/templates/admin/module-info.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import alert_dynamic, error_state, loading_state %}
+{% from 'shared/macros/headers.html' import page_header %}
+
+{% block title %}Module Details{% endblock %}
+
+{% block alpine_data %}adminModuleInfo('{{ platform_code }}', '{{ module_code }}'){% endblock %}
+
+{% block content %}
+<!-- Header with Back Button -->
+<div class="flex items-center justify-between my-6">
+    <div class="flex items-center">
+        <a :href="`/admin/platforms/${platformCode}/modules`" class="mr-4 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+            <span x-html="$icon('arrow-left', 'w-5 h-5 text-gray-600 dark:text-gray-400')"></span>
+        </a>
+        <div>
+            <div class="flex items-center">
+                <span x-html="$icon(getModuleIcon(moduleCode), 'w-8 h-8 text-purple-600 dark:text-purple-400 mr-3')"></span>
+                <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="module?.name || 'Loading...'"></h2>
+                <code class="ml-3 text-sm bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded" x-text="moduleCode"></code>
+            </div>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-text="module?.description || ''"></p>
+        </div>
+    </div>
+    <div class="flex items-center gap-3">
+        <!-- Configure Button -->
+        <a x-show="hasConfig(moduleCode)"
+           :href="`/admin/platforms/${platformCode}/modules/${moduleCode}/config`"
+           class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none focus:ring focus:ring-purple-400">
+            <span x-html="$icon('cog', 'w-4 h-4 mr-2')"></span>
+            Configure
+        </a>
+        <!-- Status Badge & Toggle -->
+        <div class="flex items-center gap-3">
+            <span x-show="module?.is_enabled"
+                  class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                Enabled
+            </span>
+            <span x-show="!module?.is_enabled && !module?.is_core"
+                  class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
+                Disabled
+            </span>
+            <span x-show="module?.is_core"
+                  class="px-3 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
+                Core
+            </span>
+            <!-- Toggle (only for non-core modules) -->
+            <button
+                x-show="!module?.is_core"
+                @click="toggleModule()"
+                :disabled="saving"
+                :class="{
+                    'bg-purple-600': module?.is_enabled,
+                    'bg-gray-200 dark:bg-gray-600': !module?.is_enabled
+                }"
+                class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                role="switch"
+                :aria-checked="module?.is_enabled"
+            >
+                <span
+                    :class="{
+                        'translate-x-5': module?.is_enabled,
+                        'translate-x-0': !module?.is_enabled
+                    }"
+                    class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                ></span>
+            </button>
+        </div>
+    </div>
+</div>
+
+{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
+{{ error_state('Error', show_condition='error') }}
+{{ loading_state('Loading module details...') }}
+
+<!-- Main Content -->
+<div x-show="!loading && module" class="space-y-6">
+
+    <!-- Description Card -->
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Description</h3>
+        <p class="text-gray-600 dark:text-gray-400" x-text="module?.description || 'No description available.'"></p>
+    </div>
+
+    <!-- Features -->
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Features</h3>
+        <div x-show="module?.features?.length > 0" class="flex flex-wrap gap-2">
+            <template x-for="feature in module?.features" :key="feature">
+                <span class="px-3 py-1 text-sm rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300" x-text="feature"></span>
+            </template>
+        </div>
+        <p x-show="!module?.features?.length" class="text-gray-500 dark:text-gray-400 text-sm">No features defined for this module.</p>
+    </div>
+
+    <!-- Menu Items -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <!-- Admin Menu Items -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                <span x-html="$icon('office-building', 'w-5 h-5 inline mr-2 text-purple-600 dark:text-purple-400')"></span>
+                Admin Menu Items
+            </h3>
+            <div x-show="module?.admin_menu_items?.length > 0" class="space-y-2">
+                <template x-for="item in module?.admin_menu_items" :key="item">
+                    <div class="flex items-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded">
+                        <span x-html="$icon('menu-alt-2', 'w-4 h-4 text-gray-500 mr-2')"></span>
+                        <span class="text-sm text-gray-700 dark:text-gray-300" x-text="item"></span>
+                    </div>
+                </template>
+            </div>
+            <p x-show="!module?.admin_menu_items?.length" class="text-gray-500 dark:text-gray-400 text-sm">No admin menu items.</p>
+        </div>
+
+        <!-- Vendor Menu Items -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                <span x-html="$icon('building-storefront', 'w-5 h-5 inline mr-2 text-teal-600 dark:text-teal-400')"></span>
+                Vendor Menu Items
+            </h3>
+            <div x-show="module?.vendor_menu_items?.length > 0" class="space-y-2">
+                <template x-for="item in module?.vendor_menu_items" :key="item">
+                    <div class="flex items-center p-2 bg-gray-50 dark:bg-gray-700/50 rounded">
+                        <span x-html="$icon('menu-alt-2', 'w-4 h-4 text-gray-500 mr-2')"></span>
+                        <span class="text-sm text-gray-700 dark:text-gray-300" x-text="item"></span>
+                    </div>
+                </template>
+            </div>
+            <p x-show="!module?.vendor_menu_items?.length" class="text-gray-500 dark:text-gray-400 text-sm">No vendor menu items.</p>
+        </div>
+    </div>
+
+    <!-- Dependencies -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <!-- Requires (Dependencies) -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                <span x-html="$icon('link', 'w-5 h-5 inline mr-2 text-amber-600 dark:text-amber-400')"></span>
+                Dependencies
+                <span class="text-xs font-normal text-gray-500 dark:text-gray-400 ml-2">(requires)</span>
+            </h3>
+            <div x-show="module?.requires?.length > 0" class="flex flex-wrap gap-2">
+                <template x-for="dep in module?.requires" :key="dep">
+                    <a :href="`/admin/platforms/${platformCode}/modules/${dep}`"
+                       class="px-3 py-1 text-sm rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 hover:bg-amber-200 dark:hover:bg-amber-900/50 transition-colors"
+                       x-text="dep"></a>
+                </template>
+            </div>
+            <p x-show="!module?.requires?.length" class="text-gray-500 dark:text-gray-400 text-sm">No dependencies.</p>
+        </div>
+
+        <!-- Dependents (Required By) -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                <span x-html="$icon('users', 'w-5 h-5 inline mr-2 text-blue-600 dark:text-blue-400')"></span>
+                Dependents
+                <span class="text-xs font-normal text-gray-500 dark:text-gray-400 ml-2">(required by)</span>
+            </h3>
+            <div x-show="module?.dependent_modules?.length > 0" class="flex flex-wrap gap-2">
+                <template x-for="dep in module?.dependent_modules" :key="dep">
+                    <a :href="`/admin/platforms/${platformCode}/modules/${dep}`"
+                       class="px-3 py-1 text-sm rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors"
+                       x-text="dep"></a>
+                </template>
+            </div>
+            <p x-show="!module?.dependent_modules?.length" class="text-gray-500 dark:text-gray-400 text-sm">No modules depend on this one.</p>
+        </div>
+    </div>
+
+    <!-- Self-Contained Module Info (if applicable) -->
+    <div x-show="module?.is_self_contained" class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            <span x-html="$icon('puzzle', 'w-5 h-5 inline mr-2 text-green-600 dark:text-green-400')"></span>
+            Self-Contained Module
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- Services -->
+            <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                <span x-show="module?.self_contained_info?.services_path" x-html="$icon('check-circle', 'w-5 h-5 text-green-500 mr-3')"></span>
+                <span x-show="!module?.self_contained_info?.services_path" x-html="$icon('x-circle', 'w-5 h-5 text-gray-400 mr-3')"></span>
+                <div>
+                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Services</p>
+                    <code x-show="module?.self_contained_info?.services_path" class="text-xs text-gray-500 dark:text-gray-400" x-text="module?.self_contained_info?.services_path"></code>
+                    <p x-show="!module?.self_contained_info?.services_path" class="text-xs text-gray-400">Not defined</p>
+                </div>
+            </div>
+
+            <!-- Models -->
+            <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                <span x-show="module?.self_contained_info?.models_path" x-html="$icon('check-circle', 'w-5 h-5 text-green-500 mr-3')"></span>
+                <span x-show="!module?.self_contained_info?.models_path" x-html="$icon('x-circle', 'w-5 h-5 text-gray-400 mr-3')"></span>
+                <div>
+                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Models</p>
+                    <code x-show="module?.self_contained_info?.models_path" class="text-xs text-gray-500 dark:text-gray-400" x-text="module?.self_contained_info?.models_path"></code>
+                    <p x-show="!module?.self_contained_info?.models_path" class="text-xs text-gray-400">Not defined</p>
+                </div>
+            </div>
+
+            <!-- Templates -->
+            <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                <span x-show="module?.self_contained_info?.templates_path" x-html="$icon('check-circle', 'w-5 h-5 text-green-500 mr-3')"></span>
+                <span x-show="!module?.self_contained_info?.templates_path" x-html="$icon('x-circle', 'w-5 h-5 text-gray-400 mr-3')"></span>
+                <div>
+                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Templates</p>
+                    <code x-show="module?.self_contained_info?.templates_path" class="text-xs text-gray-500 dark:text-gray-400" x-text="module?.self_contained_info?.templates_path"></code>
+                    <p x-show="!module?.self_contained_info?.templates_path" class="text-xs text-gray-400">Not defined</p>
+                </div>
+            </div>
+
+            <!-- Locales -->
+            <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                <span x-show="module?.self_contained_info?.locales_path" x-html="$icon('check-circle', 'w-5 h-5 text-green-500 mr-3')"></span>
+                <span x-show="!module?.self_contained_info?.locales_path" x-html="$icon('x-circle', 'w-5 h-5 text-gray-400 mr-3')"></span>
+                <div>
+                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Locales</p>
+                    <code x-show="module?.self_contained_info?.locales_path" class="text-xs text-gray-500 dark:text-gray-400" x-text="module?.self_contained_info?.locales_path"></code>
+                    <p x-show="!module?.self_contained_info?.locales_path" class="text-xs text-gray-400">Not defined</p>
+                </div>
+            </div>
+
+            <!-- Static Files -->
+            <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                <span x-show="module?.self_contained_info?.static_path" x-html="$icon('check-circle', 'w-5 h-5 text-green-500 mr-3')"></span>
+                <span x-show="!module?.self_contained_info?.static_path" x-html="$icon('x-circle', 'w-5 h-5 text-gray-400 mr-3')"></span>
+                <div>
+                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Static Files</p>
+                    <code x-show="module?.self_contained_info?.static_path" class="text-xs text-gray-500 dark:text-gray-400" x-text="module?.self_contained_info?.static_path"></code>
+                    <p x-show="!module?.self_contained_info?.static_path" class="text-xs text-gray-400">Not defined</p>
+                </div>
+            </div>
+
+            <!-- API Routes -->
+            <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                <span x-show="module?.self_contained_info?.api_path" x-html="$icon('check-circle', 'w-5 h-5 text-green-500 mr-3')"></span>
+                <span x-show="!module?.self_contained_info?.api_path" x-html="$icon('x-circle', 'w-5 h-5 text-gray-400 mr-3')"></span>
+                <div>
+                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">API Routes</p>
+                    <code x-show="module?.self_contained_info?.api_path" class="text-xs text-gray-500 dark:text-gray-400" x-text="module?.self_contained_info?.api_path"></code>
+                    <p x-show="!module?.self_contained_info?.api_path" class="text-xs text-gray-400">Not defined</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Module Type Info -->
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Module Information</h3>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
+                <span class="text-gray-600 dark:text-gray-400">Module Type</span>
+                <span x-show="module?.is_core" class="px-2 py-1 text-xs font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">Core</span>
+                <span x-show="!module?.is_core" class="px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">Optional</span>
+            </div>
+            <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
+                <span class="text-gray-600 dark:text-gray-400">Self-Contained</span>
+                <span x-show="module?.is_self_contained" class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Yes</span>
+                <span x-show="!module?.is_self_contained" class="px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">No</span>
+            </div>
+            <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
+                <span class="text-gray-600 dark:text-gray-400">Has Configuration</span>
+                <span x-show="hasConfig(moduleCode)" class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Yes</span>
+                <span x-show="!hasConfig(moduleCode)" class="px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">No</span>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', path='admin/js/module-info.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/platform-detail.html

@@ -0,0 +1,301 @@
+{# app/templates/admin/platform-detail.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/headers.html' import page_header %}
+
+{% block title %}Platform Details{% endblock %}
+
+{% block alpine_data %}platformDetail(){% endblock %}
+
+{% block content %}
+<!-- Header with Back Button -->
+<div class="flex items-center justify-between my-6">
+    <div class="flex items-center">
+        <a href="/admin/platforms" class="mr-4 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+            <span x-html="$icon('arrow-left', 'w-5 h-5 text-gray-600 dark:text-gray-400')"></span>
+        </a>
+        <div>
+            <div class="flex items-center">
+                <span x-html="$icon(getPlatformIcon(platformCode), 'w-8 h-8 text-purple-600 dark:text-purple-400 mr-3')"></span>
+                <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="platform?.name || 'Loading...'"></h2>
+                <code class="ml-3 text-sm bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded" x-text="platformCode"></code>
+            </div>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-text="platform?.description || ''"></p>
+        </div>
+    </div>
+    <div class="flex items-center gap-2">
+        <!-- Status Badges -->
+        <span
+            x-show="platform?.is_active"
+            class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+            Active
+        </span>
+        <span
+            x-show="!platform?.is_active"
+            class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
+            Inactive
+        </span>
+    </div>
+</div>
+
+{{ loading_state('Loading platform details...') }}
+{{ error_state('Error loading platform') }}
+
+<!-- Main Content -->
+<div x-show="!loading && platform" class="space-y-6">
+
+    <!-- Quick Actions -->
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Quick Actions</h3>
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <!-- Edit Settings -->
+            <a :href="`/admin/platforms/${platformCode}/edit`"
+               class="flex items-center p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-900/40 transition-colors">
+                <span x-html="$icon('cog', 'w-8 h-8 text-purple-600 dark:text-purple-400')"></span>
+                <div class="ml-3">
+                    <p class="font-semibold text-gray-900 dark:text-white">Edit Settings</p>
+                    <p class="text-sm text-gray-600 dark:text-gray-400">Branding, domain, languages</p>
+                </div>
+            </a>
+
+            <!-- Edit Homepage -->
+            <a :href="`/admin/content-pages?platform_code=${platformCode}&slug=home`"
+               class="flex items-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors">
+                <span x-html="$icon('home', 'w-8 h-8 text-blue-600 dark:text-blue-400')"></span>
+                <div class="ml-3">
+                    <p class="font-semibold text-gray-900 dark:text-white">Edit Homepage</p>
+                    <p class="text-sm text-gray-600 dark:text-gray-400">Platform landing page</p>
+                </div>
+            </a>
+
+            <!-- Manage Pages -->
+            <a :href="`/admin/content-pages?platform_code=${platformCode}`"
+               class="flex items-center p-4 bg-teal-50 dark:bg-teal-900/20 rounded-lg hover:bg-teal-100 dark:hover:bg-teal-900/40 transition-colors">
+                <span x-html="$icon('document-text', 'w-8 h-8 text-teal-600 dark:text-teal-400')"></span>
+                <div class="ml-3">
+                    <p class="font-semibold text-gray-900 dark:text-white">Manage Pages</p>
+                    <p class="text-sm text-gray-600 dark:text-gray-400">All content pages</p>
+                </div>
+            </a>
+
+            <!-- View Platform -->
+            <a :href="getPlatformUrl()" target="_blank"
+               class="flex items-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+                <span x-html="$icon('external-link', 'w-8 h-8 text-gray-600 dark:text-gray-400')"></span>
+                <div class="ml-3">
+                    <p class="font-semibold text-gray-900 dark:text-white">View Platform</p>
+                    <p class="text-sm text-gray-600 dark:text-gray-400">Open in new tab</p>
+                </div>
+            </a>
+        </div>
+    </div>
+
+    <!-- Super Admin Actions (Menu Configuration) -->
+    <div x-show="isSuperAdmin" class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            <span class="inline-flex items-center">
+                Super Admin
+                <span class="ml-2 px-2 py-0.5 text-xs font-medium rounded bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">Admin Only</span>
+            </span>
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <!-- Module Configuration -->
+            <a :href="`/admin/platforms/${platformCode}/modules`"
+               class="flex items-center p-4 bg-green-50 dark:bg-green-900/20 rounded-lg hover:bg-green-100 dark:hover:bg-green-900/40 transition-colors">
+                <span x-html="$icon('puzzle', 'w-8 h-8 text-green-600 dark:text-green-400')"></span>
+                <div class="ml-3">
+                    <p class="font-semibold text-gray-900 dark:text-white">Module Configuration</p>
+                    <p class="text-sm text-gray-600 dark:text-gray-400">Enable/disable features</p>
+                </div>
+            </a>
+
+            <!-- Menu Configuration -->
+            <a :href="`/admin/platforms/${platformCode}/menu-config`"
+               class="flex items-center p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg hover:bg-amber-100 dark:hover:bg-amber-900/40 transition-colors">
+                <span x-html="$icon('view-grid', 'w-8 h-8 text-amber-600 dark:text-amber-400')"></span>
+                <div class="ml-3">
+                    <p class="font-semibold text-gray-900 dark:text-white">Menu Configuration</p>
+                    <p class="text-sm text-gray-600 dark:text-gray-400">Admin & vendor menus</p>
+                </div>
+            </a>
+        </div>
+    </div>
+
+    <!-- Stats Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+        <!-- Vendors -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+            <div class="flex items-center justify-between">
+                <div>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Vendors</p>
+                    <p class="text-3xl font-bold text-purple-600 dark:text-purple-400" x-text="platform?.vendor_count || 0"></p>
+                </div>
+                <div class="p-3 bg-purple-100 dark:bg-purple-900/50 rounded-full">
+                    <span x-html="$icon('building-storefront', 'w-6 h-6 text-purple-600 dark:text-purple-400')"></span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Marketing Pages -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+            <div class="flex items-center justify-between">
+                <div>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Marketing Pages</p>
+                    <p class="text-3xl font-bold text-blue-600 dark:text-blue-400" x-text="platform?.platform_pages_count || 0"></p>
+                </div>
+                <div class="p-3 bg-blue-100 dark:bg-blue-900/50 rounded-full">
+                    <span x-html="$icon('megaphone', 'w-6 h-6 text-blue-600 dark:text-blue-400')"></span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Vendor Defaults -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+            <div class="flex items-center justify-between">
+                <div>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Vendor Defaults</p>
+                    <p class="text-3xl font-bold text-teal-600 dark:text-teal-400" x-text="platform?.vendor_defaults_count || 0"></p>
+                </div>
+                <div class="p-3 bg-teal-100 dark:bg-teal-900/50 rounded-full">
+                    <span x-html="$icon('document-duplicate', 'w-6 h-6 text-teal-600 dark:text-teal-400')"></span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Language -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+            <div class="flex items-center justify-between">
+                <div>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Default Language</p>
+                    <p class="text-3xl font-bold text-gray-700 dark:text-gray-300" x-text="platform?.default_language?.toUpperCase() || '—'"></p>
+                </div>
+                <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-full">
+                    <span x-html="$icon('language', 'w-6 h-6 text-gray-600 dark:text-gray-400')"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Platform Configuration -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <!-- Routing Info -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Routing Configuration</h3>
+            <div class="space-y-3">
+                <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
+                    <span class="text-gray-600 dark:text-gray-400">Production Domain</span>
+                    <code x-show="platform?.domain" class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded" x-text="platform?.domain"></code>
+                    <span x-show="!platform?.domain" class="text-gray-400 dark:text-gray-500 text-sm">Not configured</span>
+                </div>
+                <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
+                    <span class="text-gray-600 dark:text-gray-400">Dev Path Prefix</span>
+                    <code x-show="platform?.path_prefix" class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded" x-text="`/platforms/${platform?.path_prefix}/`"></code>
+                    <span x-show="!platform?.path_prefix" class="text-gray-400 dark:text-gray-500 text-sm">Root path</span>
+                </div>
+                <div class="flex justify-between items-center py-2">
+                    <span class="text-gray-600 dark:text-gray-400">Supported Languages</span>
+                    <div class="flex gap-1">
+                        <template x-for="lang in (platform?.supported_languages || [])" :key="lang">
+                            <span class="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded" x-text="lang.toUpperCase()"></span>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Branding -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Branding</h3>
+            <div class="space-y-3">
+                <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
+                    <span class="text-gray-600 dark:text-gray-400">Logo</span>
+                    <template x-if="platform?.logo">
+                        <img :src="platform.logo" alt="Logo" class="h-8 max-w-32 object-contain">
+                    </template>
+                    <span x-show="!platform?.logo" class="text-gray-400 dark:text-gray-500 text-sm">Not configured</span>
+                </div>
+                <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
+                    <span class="text-gray-600 dark:text-gray-400">Logo (Dark)</span>
+                    <template x-if="platform?.logo_dark">
+                        <img :src="platform.logo_dark" alt="Logo Dark" class="h-8 max-w-32 object-contain bg-gray-800 rounded p-1">
+                    </template>
+                    <span x-show="!platform?.logo_dark" class="text-gray-400 dark:text-gray-500 text-sm">Not configured</span>
+                </div>
+                <div class="flex justify-between items-center py-2">
+                    <span class="text-gray-600 dark:text-gray-400">Favicon</span>
+                    <template x-if="platform?.favicon">
+                        <img :src="platform.favicon" alt="Favicon" class="h-6 w-6 object-contain">
+                    </template>
+                    <span x-show="!platform?.favicon" class="text-gray-400 dark:text-gray-500 text-sm">Not configured</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Recent Pages -->
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+        <div class="p-6 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Content Pages</h3>
+            <a :href="`/admin/content-pages?platform_code=${platformCode}`"
+               class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300">
+                View All →
+            </a>
+        </div>
+        <div x-show="recentPages.length > 0">
+            <table class="w-full">
+                <thead class="bg-gray-50 dark:bg-gray-700/50">
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Title</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Slug</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Type</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Status</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Updated</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                    <template x-for="page in recentPages" :key="page.id">
+                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+                            <td class="px-6 py-4">
+                                <a :href="`/admin/content-pages/${page.id}/edit`"
+                                   class="text-gray-900 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 font-medium"
+                                   x-text="page.title"></a>
+                            </td>
+                            <td class="px-6 py-4">
+                                <code class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded" x-text="page.slug"></code>
+                            </td>
+                            <td class="px-6 py-4">
+                                <span class="px-2 py-1 text-xs font-semibold rounded-full"
+                                      :class="getPageTypeBadgeClass(page)"
+                                      x-text="getPageTypeLabel(page)"></span>
+                            </td>
+                            <td class="px-6 py-4">
+                                <span x-show="page.is_published" class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Published</span>
+                                <span x-show="!page.is_published" class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">Draft</span>
+                            </td>
+                            <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400" x-text="formatDate(page.updated_at)"></td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
+        </div>
+        <div x-show="recentPages.length === 0" class="p-6 text-center text-gray-500 dark:text-gray-400">
+            <span x-html="$icon('document-text', 'w-12 h-12 mx-auto mb-2 opacity-50')"></span>
+            <p>No content pages yet.</p>
+            <a :href="`/admin/content-pages/create?platform_code=${platformCode}`"
+               class="inline-block mt-2 text-purple-600 hover:text-purple-700 dark:text-purple-400">
+                Create your first page →
+            </a>
+        </div>
+    </div>
+
+    <!-- Timestamps -->
+    <div class="text-sm text-gray-500 dark:text-gray-400">
+        <p>Created: <span x-text="formatDate(platform?.created_at)"></span></p>
+        <p>Last Updated: <span x-text="formatDate(platform?.updated_at)"></span></p>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="/static/admin/js/platform-detail.js"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/platform-edit.html

@@ -0,0 +1,324 @@
+{# app/templates/admin/platform-edit.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state %}
+{% from 'shared/macros/headers.html' import edit_page_header %}
+
+{% block title %}Edit Platform{% endblock %}
+
+{% block alpine_data %}platformEdit(){% endblock %}
+
+{% block content %}
+{% call edit_page_header('Edit Platform', '/admin/platforms', subtitle_show='platform', back_label='Back to Platforms') %}
+    <span x-text="platform?.name"></span>
+    <span class="text-gray-400">•</span>
+    <code class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded" x-text="platform?.code"></code>
+{% endcall %}
+
+{{ loading_state('Loading platform...', show_condition='loading') }}
+
+<!-- Error State -->
+<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg dark:bg-red-900/50 dark:border-red-600 dark:text-red-200">
+    <div class="flex items-center">
+        <span x-html="$icon('exclamation-circle', 'w-5 h-5 mr-2')"></span>
+        <span x-text="error"></span>
+    </div>
+</div>
+
+<!-- Success State -->
+<div x-show="success" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg dark:bg-green-900/50 dark:border-green-600 dark:text-green-200">
+    <div class="flex items-center">
+        <span x-html="$icon('check-circle', 'w-5 h-5 mr-2')"></span>
+        <span x-text="success"></span>
+    </div>
+</div>
+
+<!-- Edit Form -->
+<div x-show="!loading && platform">
+    <!-- Quick Actions Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Quick Actions
+        </h3>
+        <div class="flex flex-wrap items-center gap-3">
+            <button
+                @click="toggleActive()"
+                :disabled="saving"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
+                :class="formData.is_active ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'">
+                <span x-html="$icon(formData.is_active ? 'pause' : 'play', 'w-4 h-4 mr-2')"></span>
+                <span x-text="formData.is_active ? 'Deactivate' : 'Activate'"></span>
+            </button>
+
+            <button
+                @click="togglePublic()"
+                :disabled="saving"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
+                :class="formData.is_public ? 'bg-orange-600 hover:bg-orange-700' : 'bg-blue-600 hover:bg-blue-700'">
+                <span x-html="$icon(formData.is_public ? 'eye-off' : 'eye', 'w-4 h-4 mr-2')"></span>
+                <span x-text="formData.is_public ? 'Make Private' : 'Make Public'"></span>
+            </button>
+
+            <!-- Status Badges -->
+            <div class="ml-auto flex items-center gap-2">
+                <span
+                    x-show="formData.is_active"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
+                    <span x-html="$icon('check-circle', 'w-3 h-3 mr-1')"></span>
+                    Active
+                </span>
+                <span
+                    x-show="!formData.is_active"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
+                    <span x-html="$icon('x-circle', 'w-3 h-3 mr-1')"></span>
+                    Inactive
+                </span>
+                <span
+                    x-show="formData.is_public"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100">
+                    <span x-html="$icon('globe-alt', 'w-3 h-3 mr-1')"></span>
+                    Public
+                </span>
+                <span
+                    x-show="!formData.is_public"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-gray-700 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-100">
+                    <span x-html="$icon('lock-closed', 'w-3 h-3 mr-1')"></span>
+                    Private
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Form Card -->
+    <form @submit.prevent="handleSubmit" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <div class="grid gap-6 mb-8 md:grid-cols-2">
+            <!-- Left Column: Basic Info -->
+            <div>
+                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Basic Information
+                </h3>
+
+                <!-- Platform Code (readonly) -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Platform Code
+                    </span>
+                    <input
+                        type="text"
+                        :value="platform?.code || ''"
+                        disabled
+                        class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
+                    >
+                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                        Cannot be changed after creation
+                    </span>
+                </label>
+
+                <!-- Name -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Platform Name <span class="text-red-600">*</span>
+                    </span>
+                    <input
+                        type="text"
+                        x-model="formData.name"
+                        required
+                        maxlength="100"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                        :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.name }"
+                    >
+                    <span x-show="errors.name" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.name"></span>
+                </label>
+
+                <!-- Description -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Description
+                    </span>
+                    <textarea
+                        x-model="formData.description"
+                        rows="3"
+                        maxlength="500"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
+                    ></textarea>
+                </label>
+
+                <!-- Default Language -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Default Language
+                    </span>
+                    <select
+                        x-model="formData.default_language"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-select"
+                    >
+                        <template x-for="lang in availableLanguages" :key="lang.code">
+                            <option :value="lang.code" x-text="lang.name"></option>
+                        </template>
+                    </select>
+                </label>
+
+                <!-- Supported Languages -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Supported Languages
+                    </span>
+                    <div class="mt-2 flex flex-wrap gap-2">
+                        <template x-for="lang in availableLanguages" :key="lang.code">
+                            <button
+                                type="button"
+                                @click="toggleLanguage(lang.code)"
+                                :disabled="saving"
+                                class="px-3 py-1 text-sm rounded-full transition-colors"
+                                :class="isLanguageSupported(lang.code)
+                                    ? 'bg-purple-600 text-white'
+                                    : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'"
+                            >
+                                <span x-text="lang.name"></span>
+                            </button>
+                        </template>
+                    </div>
+                </label>
+            </div>
+
+            <!-- Right Column: Routing & Branding -->
+            <div>
+                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Routing & Branding
+                </h3>
+
+                <!-- Domain -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Production Domain
+                    </span>
+                    <input
+                        type="text"
+                        x-model="formData.domain"
+                        placeholder="e.g., oms.lu"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    >
+                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                        Domain used in production for this platform
+                    </span>
+                </label>
+
+                <!-- Path Prefix -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Development Path Prefix
+                    </span>
+                    <input
+                        type="text"
+                        x-model="formData.path_prefix"
+                        placeholder="e.g., oms"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    >
+                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                        Used for /platforms/{prefix}/ routing in development
+                    </span>
+                </label>
+
+                <!-- Logo URL -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Logo URL (Light Mode)
+                    </span>
+                    <input
+                        type="url"
+                        x-model="formData.logo"
+                        placeholder="https://..."
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    >
+                </label>
+
+                <!-- Logo Dark URL -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Logo URL (Dark Mode)
+                    </span>
+                    <input
+                        type="url"
+                        x-model="formData.logo_dark"
+                        placeholder="https://..."
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    >
+                </label>
+
+                <!-- Favicon URL -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Favicon URL
+                    </span>
+                    <input
+                        type="url"
+                        x-model="formData.favicon"
+                        placeholder="https://..."
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    >
+                </label>
+            </div>
+        </div>
+
+        <!-- Platform Stats (Read Only) -->
+        <div class="mb-8 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Platform Statistics
+            </h3>
+            <div class="grid grid-cols-3 gap-4 text-center">
+                <div>
+                    <p class="text-2xl font-bold text-purple-600 dark:text-purple-400" x-text="platform?.vendor_count || 0"></p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Vendors</p>
+                </div>
+                <div>
+                    <p class="text-2xl font-bold text-blue-600 dark:text-blue-400" x-text="platform?.platform_pages_count || 0"></p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Marketing Pages</p>
+                </div>
+                <div>
+                    <p class="text-2xl font-bold text-teal-600 dark:text-teal-400" x-text="platform?.vendor_defaults_count || 0"></p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Vendor Defaults</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Submit Button -->
+        <div class="flex justify-end gap-3">
+            <a
+                href="/admin/platforms"
+                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
+            >
+                Cancel
+            </a>
+            <button
+                type="submit"
+                :disabled="saving"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
+            >
+                <span x-show="saving" x-html="$icon('refresh', 'w-4 h-4 mr-2 animate-spin')"></span>
+                <span x-text="saving ? 'Saving...' : 'Save Changes'"></span>
+            </button>
+        </div>
+    </form>
+
+    <!-- Timestamps -->
+    <div class="text-sm text-gray-500 dark:text-gray-400">
+        <p>
+            Created: <span x-text="formatDate(platform?.created_at)"></span>
+        </p>
+        <p>
+            Last Updated: <span x-text="formatDate(platform?.updated_at)"></span>
+        </p>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="/static/admin/js/platform-edit.js"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/platform-menu-config.html

@@ -0,0 +1,200 @@
+{# app/templates/admin/platform-menu-config.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
+{% from 'shared/macros/headers.html' import page_header %}
+
+{% block title %}Menu Configuration{% endblock %}
+
+{% block alpine_data %}adminPlatformMenuConfig('{{ platform_code }}'){% endblock %}
+
+{% block content %}
+{{ page_header('Menu Configuration', back_url='/admin/platforms/' + platform_code) }}
+
+{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
+{{ error_state('Error', show_condition='error') }}
+
+<!-- Platform Info -->
+<div class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+    <div class="flex items-center justify-between">
+        <div>
+            <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="platform?.name || 'Loading...'"></h2>
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+                Configure which menu items are visible for admins and vendors on this platform.
+            </p>
+        </div>
+        <span class="px-3 py-1 text-sm font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200" x-text="platform?.code?.toUpperCase()"></span>
+    </div>
+</div>
+
+<!-- Frontend Type Tabs -->
+<div class="mb-6">
+    <div class="flex space-x-1 bg-gray-100 dark:bg-gray-700 rounded-lg p-1 w-fit">
+        <button
+            @click="frontendType = 'admin'; loadPlatformMenuConfig()"
+            :class="{
+                'bg-white dark:bg-gray-800 shadow': frontendType === 'admin',
+                'text-gray-600 dark:text-gray-400': frontendType !== 'admin'
+            }"
+            class="px-4 py-2 text-sm font-medium rounded-md transition-all"
+        >
+            <span x-html="$icon('shield', 'w-4 h-4 inline mr-2')"></span>
+            Admin Frontend
+        </button>
+        <button
+            @click="frontendType = 'vendor'; loadPlatformMenuConfig()"
+            :class="{
+                'bg-white dark:bg-gray-800 shadow': frontendType === 'vendor',
+                'text-gray-600 dark:text-gray-400': frontendType !== 'vendor'
+            }"
+            class="px-4 py-2 text-sm font-medium rounded-md transition-all"
+        >
+            <span x-html="$icon('shopping-bag', 'w-4 h-4 inline mr-2')"></span>
+            Vendor Frontend
+        </button>
+    </div>
+</div>
+
+<!-- Stats Cards -->
+<div class="grid gap-4 mb-6 md:grid-cols-3">
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
+            <span x-html="$icon('view-grid', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Total Items</p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="menuConfig?.total_items || 0"></p>
+        </div>
+    </div>
+
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
+            <span x-html="$icon('eye', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Visible</p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="menuConfig?.visible_items || 0"></p>
+        </div>
+    </div>
+
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-gray-500 bg-gray-100 rounded-full dark:text-gray-100 dark:bg-gray-600">
+            <span x-html="$icon('eye-off', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Hidden</p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="menuConfig?.hidden_items || 0"></p>
+        </div>
+    </div>
+</div>
+
+<!-- Actions -->
+<div class="mb-4 flex items-center justify-between">
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+        Toggle visibility for menu items. Mandatory items cannot be hidden.
+    </p>
+    <div class="flex gap-2">
+        <button
+            @click="showAll()"
+            :disabled="saving"
+            class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
+        >
+            <span x-html="$icon('eye', 'w-4 h-4 mr-2')"></span>
+            Show All
+        </button>
+        <button
+            @click="resetToDefaults()"
+            :disabled="saving"
+            class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
+        >
+            <span x-html="$icon('eye-off', 'w-4 h-4 mr-2')"></span>
+            Hide All
+        </button>
+    </div>
+</div>
+
+<!-- Loading State -->
+<div x-show="loading" class="flex items-center justify-center py-12 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+    <span x-html="$icon('refresh', 'w-8 h-8 animate-spin text-purple-600')"></span>
+    <span class="ml-3 text-gray-500 dark:text-gray-400">Loading menu configuration...</span>
+</div>
+
+<!-- Menu Items by Section -->
+<div x-show="!loading" class="space-y-6">
+    <template x-for="section in groupedItems" :key="section.id">
+        <div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
+            <!-- Section Header -->
+            <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center">
+                        <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200" x-text="section.label || 'Main'"></h3>
+                        <span
+                            x-show="section.isSuperAdminOnly"
+                            class="ml-2 px-2 py-0.5 text-xs font-medium rounded bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"
+                        >
+                            Super Admin Only
+                        </span>
+                    </div>
+                    <span class="text-xs text-gray-500 dark:text-gray-400" x-text="`${section.visibleCount}/${section.items.length} visible`"></span>
+                </div>
+            </div>
+
+            <!-- Section Items -->
+            <div class="divide-y divide-gray-100 dark:divide-gray-700">
+                <template x-for="item in section.items" :key="item.id">
+                    <div class="flex items-center justify-between px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/30">
+                        <div class="flex items-center">
+                            <span x-html="$icon(item.icon, 'w-5 h-5 text-gray-400 mr-3')"></span>
+                            <div>
+                                <p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="item.label"></p>
+                                <p class="text-xs text-gray-400 dark:text-gray-500" x-text="item.url"></p>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <!-- Mandatory Badge -->
+                            <span
+                                x-show="item.is_mandatory"
+                                class="px-2 py-0.5 text-xs font-medium rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
+                            >
+                                Mandatory
+                            </span>
+
+                            <!-- Toggle Switch -->
+                            <button
+                                @click="toggleVisibility(item)"
+                                :disabled="item.is_mandatory || saving"
+                                :class="{
+                                    'bg-purple-600': item.is_visible,
+                                    'bg-gray-200 dark:bg-gray-600': !item.is_visible,
+                                    'opacity-50 cursor-not-allowed': item.is_mandatory
+                                }"
+                                class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                                role="switch"
+                                :aria-checked="item.is_visible"
+                            >
+                                <span
+                                    :class="{
+                                        'translate-x-5': item.is_visible,
+                                        'translate-x-0': !item.is_visible
+                                    }"
+                                    class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                                ></span>
+                            </button>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </template>
+
+    <!-- Empty State -->
+    <div x-show="groupedItems.length === 0" class="bg-white rounded-lg shadow-xs dark:bg-gray-800 p-8 text-center">
+        <span x-html="$icon('view-grid', 'w-12 h-12 mx-auto text-gray-400')"></span>
+        <p class="mt-4 text-gray-500 dark:text-gray-400">No menu items configured for this frontend type.</p>
+    </div>
+</div>
+
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='admin/js/platform-menu-config.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/platform-modules.html

@@ -0,0 +1,282 @@
+{# app/templates/admin/platform-modules.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
+{% from 'shared/macros/headers.html' import page_header %}
+
+{% block title %}Module Configuration{% endblock %}
+
+{% block alpine_data %}adminPlatformModules('{{ platform_code }}'){% endblock %}
+
+{% block content %}
+{{ page_header('Module Configuration', back_url='/admin/platforms/' + platform_code) }}
+
+{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
+{{ error_state('Error', show_condition='error') }}
+
+<!-- Platform Info -->
+<div class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+    <div class="flex items-center justify-between">
+        <div>
+            <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="platform?.name || 'Loading...'"></h2>
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+                Enable or disable feature modules for this platform. Core modules cannot be disabled.
+            </p>
+        </div>
+        <span class="px-3 py-1 text-sm font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200" x-text="platform?.code?.toUpperCase()"></span>
+    </div>
+</div>
+
+<!-- Stats Cards -->
+<div class="grid gap-4 mb-6 md:grid-cols-4">
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
+            <span x-html="$icon('puzzle', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Total Modules</p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="moduleConfig?.total || 0"></p>
+        </div>
+    </div>
+
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
+            <span x-html="$icon('check-circle', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Enabled</p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="moduleConfig?.enabled || 0"></p>
+        </div>
+    </div>
+
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-gray-500 bg-gray-100 rounded-full dark:text-gray-100 dark:bg-gray-600">
+            <span x-html="$icon('x-circle', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Disabled</p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="moduleConfig?.disabled || 0"></p>
+        </div>
+    </div>
+
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
+            <span x-html="$icon('shield', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Core Modules</p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="coreModulesCount"></p>
+        </div>
+    </div>
+</div>
+
+<!-- Actions -->
+<div class="mb-4 flex items-center justify-between">
+    <p class="text-sm text-gray-500 dark:text-gray-400">
+        Toggle modules on/off. Dependencies are resolved automatically.
+    </p>
+    <div class="flex gap-2">
+        <button
+            @click="enableAll()"
+            :disabled="saving"
+            class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
+        >
+            <span x-html="$icon('check-circle', 'w-4 h-4 mr-2')"></span>
+            Enable All
+        </button>
+        <button
+            @click="disableOptional()"
+            :disabled="saving"
+            class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
+        >
+            <span x-html="$icon('x-circle', 'w-4 h-4 mr-2')"></span>
+            Core Only
+        </button>
+    </div>
+</div>
+
+<!-- Loading State -->
+<div x-show="loading" class="flex items-center justify-center py-12 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+    <span x-html="$icon('refresh', 'w-8 h-8 animate-spin text-purple-600')"></span>
+    <span class="ml-3 text-gray-500 dark:text-gray-400">Loading module configuration...</span>
+</div>
+
+<!-- Module Groups -->
+<div x-show="!loading" class="space-y-6">
+    <!-- Core Modules -->
+    <div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
+        <div class="px-4 py-3 bg-purple-50 dark:bg-purple-900/20 border-b border-purple-200 dark:border-purple-800">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <span x-html="$icon('shield', 'w-5 h-5 text-purple-600 dark:text-purple-400 mr-2')"></span>
+                    <h3 class="text-sm font-semibold text-purple-800 dark:text-purple-200">Core Modules</h3>
+                    <span class="ml-2 px-2 py-0.5 text-xs font-medium rounded bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
+                        Always Enabled
+                    </span>
+                </div>
+                <span class="text-xs text-purple-600 dark:text-purple-400" x-text="`${coreModulesCount} modules`"></span>
+            </div>
+        </div>
+        <div class="divide-y divide-gray-100 dark:divide-gray-700">
+            <template x-for="module in coreModules" :key="module.code">
+                <div class="flex items-center justify-between px-4 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/30">
+                    <div class="flex items-center flex-1">
+                        <div class="p-2 mr-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
+                            <span x-html="$icon(getModuleIcon(module.code), 'w-5 h-5 text-purple-600 dark:text-purple-400')"></span>
+                        </div>
+                        <div class="flex-1">
+                            <p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="module.name"></p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400" x-text="module.description"></p>
+                            <!-- Features -->
+                            <div x-show="module.features?.length > 0" class="mt-1 flex flex-wrap gap-1">
+                                <template x-for="feature in module.features.slice(0, 3)" :key="feature">
+                                    <span class="px-1.5 py-0.5 text-xs rounded bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400" x-text="feature"></span>
+                                </template>
+                                <span x-show="module.features?.length > 3" class="text-xs text-gray-400" x-text="`+${module.features.length - 3} more`"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-3 ml-4">
+                        <!-- View Details Button -->
+                        <a :href="`/admin/platforms/${platformCode}/modules/${module.code}`"
+                           class="p-1.5 rounded-lg text-gray-500 hover:text-purple-600 hover:bg-purple-50 dark:text-gray-400 dark:hover:text-purple-400 dark:hover:bg-purple-900/20 transition-colors"
+                           title="View Details">
+                            <span x-html="$icon('eye', 'w-4 h-4')"></span>
+                        </a>
+
+                        <!-- Configure Button (if has config) -->
+                        <a x-show="hasConfig(module.code)"
+                           :href="`/admin/platforms/${platformCode}/modules/${module.code}/config`"
+                           class="p-1.5 rounded-lg text-gray-500 hover:text-blue-600 hover:bg-blue-50 dark:text-gray-400 dark:hover:text-blue-400 dark:hover:bg-blue-900/20 transition-colors"
+                           title="Configure">
+                            <span x-html="$icon('cog', 'w-4 h-4')"></span>
+                        </a>
+
+                        <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                            Enabled
+                        </span>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+
+    <!-- Optional Modules -->
+    <div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
+        <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <span x-html="$icon('puzzle', 'w-5 h-5 text-gray-600 dark:text-gray-400 mr-2')"></span>
+                    <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200">Optional Modules</h3>
+                </div>
+                <span class="text-xs text-gray-500 dark:text-gray-400" x-text="`${enabledOptionalCount}/${optionalModules.length} enabled`"></span>
+            </div>
+        </div>
+        <div class="divide-y divide-gray-100 dark:divide-gray-700">
+            <template x-for="module in optionalModules" :key="module.code">
+                <div class="flex items-center justify-between px-4 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/30">
+                    <div class="flex items-center flex-1">
+                        <div class="p-2 mr-3 rounded-lg"
+                             :class="module.is_enabled ? 'bg-green-100 dark:bg-green-900/30' : 'bg-gray-100 dark:bg-gray-700'">
+                            <span x-html="$icon(getModuleIcon(module.code), 'w-5 h-5')"
+                                  :class="module.is_enabled ? 'text-green-600 dark:text-green-400' : 'text-gray-400'"></span>
+                        </div>
+                        <div class="flex-1">
+                            <div class="flex items-center gap-2">
+                                <p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="module.name"></p>
+                                <!-- Dependencies Badge -->
+                                <template x-if="module.requires?.length > 0">
+                                    <span class="px-1.5 py-0.5 text-xs rounded bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
+                                          :title="`Requires: ${module.requires.join(', ')}`">
+                                        <span x-html="$icon('link', 'w-3 h-3 inline')"></span>
+                                        <span x-text="module.requires.length"></span>
+                                    </span>
+                                </template>
+                                <!-- Dependents Badge -->
+                                <template x-if="module.dependent_modules?.length > 0">
+                                    <span class="px-1.5 py-0.5 text-xs rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
+                                          :title="`Required by: ${module.dependent_modules.join(', ')}`">
+                                        <span x-html="$icon('users', 'w-3 h-3 inline')"></span>
+                                        <span x-text="module.dependent_modules.length"></span>
+                                    </span>
+                                </template>
+                            </div>
+                            <p class="text-xs text-gray-500 dark:text-gray-400" x-text="module.description"></p>
+                            <!-- Dependencies Info -->
+                            <div x-show="module.requires?.length > 0" class="mt-1">
+                                <span class="text-xs text-amber-600 dark:text-amber-400">
+                                    Requires: <span x-text="module.requires.join(', ')"></span>
+                                </span>
+                            </div>
+                            <!-- Features -->
+                            <div x-show="module.features?.length > 0" class="mt-1 flex flex-wrap gap-1">
+                                <template x-for="feature in module.features.slice(0, 3)" :key="feature">
+                                    <span class="px-1.5 py-0.5 text-xs rounded bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400" x-text="feature"></span>
+                                </template>
+                                <span x-show="module.features?.length > 3" class="text-xs text-gray-400" x-text="`+${module.features.length - 3} more`"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-3 ml-4">
+                        <!-- View Details Button -->
+                        <a :href="`/admin/platforms/${platformCode}/modules/${module.code}`"
+                           class="p-1.5 rounded-lg text-gray-500 hover:text-purple-600 hover:bg-purple-50 dark:text-gray-400 dark:hover:text-purple-400 dark:hover:bg-purple-900/20 transition-colors"
+                           title="View Details">
+                            <span x-html="$icon('eye', 'w-4 h-4')"></span>
+                        </a>
+
+                        <!-- Configure Button (if has config) -->
+                        <a x-show="hasConfig(module.code)"
+                           :href="`/admin/platforms/${platformCode}/modules/${module.code}/config`"
+                           class="p-1.5 rounded-lg text-gray-500 hover:text-blue-600 hover:bg-blue-50 dark:text-gray-400 dark:hover:text-blue-400 dark:hover:bg-blue-900/20 transition-colors"
+                           title="Configure">
+                            <span x-html="$icon('cog', 'w-4 h-4')"></span>
+                        </a>
+
+                        <!-- Status Badge -->
+                        <span x-show="module.is_enabled"
+                              class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                            Enabled
+                        </span>
+                        <span x-show="!module.is_enabled"
+                              class="px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
+                            Disabled
+                        </span>
+
+                        <!-- Toggle Switch -->
+                        <button
+                            @click="toggleModule(module)"
+                            :disabled="saving"
+                            :class="{
+                                'bg-purple-600': module.is_enabled,
+                                'bg-gray-200 dark:bg-gray-600': !module.is_enabled
+                            }"
+                            class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                            role="switch"
+                            :aria-checked="module.is_enabled"
+                        >
+                            <span
+                                :class="{
+                                    'translate-x-5': module.is_enabled,
+                                    'translate-x-0': !module.is_enabled
+                                }"
+                                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                            ></span>
+                        </button>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+
+    <!-- Empty State -->
+    <div x-show="moduleConfig?.modules?.length === 0" class="bg-white rounded-lg shadow-xs dark:bg-gray-800 p-8 text-center">
+        <span x-html="$icon('puzzle', 'w-12 h-12 mx-auto text-gray-400')"></span>
+        <p class="mt-4 text-gray-500 dark:text-gray-400">No modules available.</p>
+    </div>
+</div>
+
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='admin/js/platform-modules.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/platforms.html

@@ -0,0 +1,162 @@
+{# app/templates/admin/platforms.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+
+{% block title %}Platforms{% endblock %}
+
+{% block alpine_data %}platformsManager(){% endblock %}
+
+{% block content %}
+{{ page_header('Platforms', subtitle='Manage platform configurations for OMS, Loyalty, and other business offerings') }}
+
+{{ loading_state('Loading platforms...') }}
+
+{{ error_state('Error loading platforms') }}
+
+<!-- Platforms Grid -->
+<div x-show="!loading && platforms.length > 0" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-3">
+    <template x-for="platform in platforms" :key="platform.id">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+            <!-- Platform Header -->
+            <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center">
+                        <!-- Platform Icon -->
+                        <div class="flex items-center justify-center w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900/50">
+                            <span x-html="$icon(getPlatformIcon(platform.code), 'w-6 h-6 text-purple-600 dark:text-purple-400')"></span>
+                        </div>
+                        <div class="ml-4">
+                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white" x-text="platform.name"></h3>
+                            <code class="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded" x-text="platform.code"></code>
+                        </div>
+                    </div>
+                    <!-- Status Badge -->
+                    <span
+                        class="px-3 py-1 text-xs font-semibold rounded-full"
+                        :class="platform.is_active ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'"
+                        x-text="platform.is_active ? 'Active' : 'Inactive'"
+                    ></span>
+                </div>
+                <p class="mt-3 text-sm text-gray-600 dark:text-gray-400" x-text="platform.description || 'No description'"></p>
+            </div>
+
+            <!-- Platform Stats -->
+            <div class="px-6 py-4 bg-gray-50 dark:bg-gray-800/50">
+                <div class="grid grid-cols-3 gap-4 text-center">
+                    <div>
+                        <p class="text-2xl font-bold text-purple-600 dark:text-purple-400" x-text="platform.vendor_count"></p>
+                        <p class="text-xs text-gray-500 dark:text-gray-400">Vendors</p>
+                    </div>
+                    <div>
+                        <p class="text-2xl font-bold text-blue-600 dark:text-blue-400" x-text="platform.platform_pages_count"></p>
+                        <p class="text-xs text-gray-500 dark:text-gray-400">Marketing Pages</p>
+                    </div>
+                    <div>
+                        <p class="text-2xl font-bold text-teal-600 dark:text-teal-400" x-text="platform.vendor_defaults_count"></p>
+                        <p class="text-xs text-gray-500 dark:text-gray-400">Vendor Defaults</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Platform Info -->
+            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
+                <div class="space-y-2 text-sm">
+                    <div class="flex justify-between" x-show="platform.domain">
+                        <span class="text-gray-500 dark:text-gray-400">Domain:</span>
+                        <span class="text-gray-900 dark:text-white" x-text="platform.domain"></span>
+                    </div>
+                    <div class="flex justify-between" x-show="platform.path_prefix">
+                        <span class="text-gray-500 dark:text-gray-400">Path Prefix:</span>
+                        <code class="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded" x-text="platform.path_prefix"></code>
+                    </div>
+                    <div class="flex justify-between">
+                        <span class="text-gray-500 dark:text-gray-400">Language:</span>
+                        <span class="text-gray-900 dark:text-white" x-text="platform.default_language.toUpperCase()"></span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Platform Actions -->
+            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
+                <div class="flex justify-between items-center">
+                    <a
+                        :href="`/admin/platforms/${platform.code}`"
+                        class="inline-flex items-center text-sm font-medium text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300"
+                    >
+                        <span x-html="$icon('eye', 'w-4 h-4 mr-1')"></span>
+                        View Details
+                    </a>
+                    <div class="flex space-x-2">
+                        <a
+                            :href="`/admin/content-pages?platform_code=${platform.code}&slug=home`"
+                            class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
+                            title="Edit platform homepage"
+                        >
+                            <span x-html="$icon('home', 'w-4 h-4 mr-1')"></span>
+                            Homepage
+                        </a>
+                        <a
+                            :href="`/admin/content-pages?platform_code=${platform.code}`"
+                            class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
+                            title="View all content pages for this platform"
+                        >
+                            <span x-html="$icon('document-text', 'w-4 h-4 mr-1')"></span>
+                            Pages
+                        </a>
+                        <a
+                            :href="`/admin/platforms/${platform.code}/edit`"
+                            class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
+                            title="Edit platform settings"
+                        >
+                            <span x-html="$icon('cog', 'w-4 h-4 mr-1')"></span>
+                            Settings
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+</div>
+
+<!-- Empty State -->
+<div x-show="!loading && platforms.length === 0" class="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow-md">
+    <span x-html="$icon('globe-alt', 'inline w-16 h-16 text-gray-400 mb-4')"></span>
+    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">No platforms found</h3>
+    <p class="text-gray-500 dark:text-gray-400 mb-4">
+        No platforms have been configured yet.
+    </p>
+</div>
+
+<!-- Page Tier Legend -->
+<div x-show="!loading && platforms.length > 0" class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+    <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-4">Content Page Tiers</h4>
+    <div class="grid md:grid-cols-3 gap-6">
+        <div class="flex items-start">
+            <span class="inline-block w-3 h-3 rounded-full bg-blue-500 mt-1.5 mr-3"></span>
+            <div>
+                <p class="font-medium text-gray-900 dark:text-white">Platform Marketing Pages</p>
+                <p class="text-sm text-gray-500 dark:text-gray-400">Public pages like homepage, pricing, features. Not inherited by vendors.</p>
+            </div>
+        </div>
+        <div class="flex items-start">
+            <span class="inline-block w-3 h-3 rounded-full bg-teal-500 mt-1.5 mr-3"></span>
+            <div>
+                <p class="font-medium text-gray-900 dark:text-white">Vendor Defaults</p>
+                <p class="text-sm text-gray-500 dark:text-gray-400">Default pages inherited by all vendors (about, terms, privacy).</p>
+            </div>
+        </div>
+        <div class="flex items-start">
+            <span class="inline-block w-3 h-3 rounded-full bg-purple-500 mt-1.5 mr-3"></span>
+            <div>
+                <p class="font-medium text-gray-900 dark:text-white">Vendor Overrides</p>
+                <p class="text-sm text-gray-500 dark:text-gray-400">Custom pages created by individual vendors.</p>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='admin/js/platforms.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/select-platform.html

@@ -0,0 +1,121 @@
+{# app/templates/admin/select-platform.html #}
+{# standalone - This template does not extend base.html because it's shown before platform selection #}
+<!DOCTYPE html>
+<html :class="{ 'dark': dark }" x-data="selectPlatform()" lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Select Platform - Admin Panel</title>
+    <link href="/static/shared/fonts/inter.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="{{ url_for('static', path='admin/css/tailwind.output.css') }}" />
+    <style>[x-cloak] { display: none !important; }</style>
+</head>
+<body x-cloak>
+    <div class="flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900">
+        <div class="flex-1 h-full max-w-xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800">
+            <div class="flex flex-col overflow-y-auto">
+                <div class="flex items-center justify-center p-6 sm:p-12">
+                    <div class="w-full">
+                        <!-- Header -->
+                        <div class="text-center mb-8">
+                            <h1 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
+                                Select Platform
+                            </h1>
+                            <p class="mt-2 text-gray-600 dark:text-gray-400">
+                                Choose a platform to manage
+                            </p>
+                        </div>
+
+                        <!-- Loading State -->
+                        <div x-show="loading" class="flex justify-center py-8">
+                            <span x-html="$icon('spinner', 'h-8 w-8 text-purple-600')"></span>
+                        </div>
+
+                        <!-- Error State -->
+                        <div x-show="error" x-cloak class="mb-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                            <p class="text-red-700 dark:text-red-400" x-text="error"></p>
+                        </div>
+
+                        <!-- Super Admin Notice -->
+                        <div x-show="isSuperAdmin && !loading" x-cloak class="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+                            <p class="text-blue-700 dark:text-blue-400">
+                                You are a Super Admin with access to all platforms. Redirecting to dashboard...
+                            </p>
+                        </div>
+
+                        <!-- Platform List -->
+                        <div x-show="!loading && !isSuperAdmin && platforms.length > 0" x-cloak class="space-y-3">
+                            <template x-for="platform in platforms" :key="platform.id">
+                                <button
+                                    @click="selectPlatform(platform)"
+                                    :disabled="selecting"
+                                    class="w-full flex items-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border-2 border-transparent hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                                >
+                                    <!-- Platform Icon/Logo -->
+                                    <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center mr-4">
+                                        <template x-if="platform.logo">
+                                            <img :src="platform.logo" :alt="platform.name" class="w-8 h-8 object-contain">
+                                        </template>
+                                        <template x-if="!platform.logo">
+                                            <span class="text-xl font-bold text-purple-600 dark:text-purple-400" x-text="platform.code.charAt(0).toUpperCase()"></span>
+                                        </template>
+                                    </div>
+
+                                    <!-- Platform Info -->
+                                    <div class="flex-1 text-left">
+                                        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200" x-text="platform.name"></h3>
+                                        <p class="text-sm text-gray-500 dark:text-gray-400" x-text="platform.code"></p>
+                                    </div>
+
+                                    <!-- Arrow -->
+                                    <div class="flex-shrink-0 ml-4">
+                                        <span x-html="$icon('chevron-right', 'w-5 h-5 text-gray-400')"></span>
+                                    </div>
+                                </button>
+                            </template>
+                        </div>
+
+                        <!-- No Platforms -->
+                        <div x-show="!loading && !isSuperAdmin && platforms.length === 0" x-cloak class="text-center py-8">
+                            <span x-html="$icon('exclamation', 'mx-auto h-12 w-12 text-gray-400')"></span>
+                            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-200">No platforms assigned</h3>
+                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Contact your administrator to get platform access.</p>
+                        </div>
+
+                        <!-- Logout Link -->
+                        <div class="mt-8 text-center">
+                            <button
+                                @click="logout()"
+                                class="text-sm text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 underline"
+                            >
+                                Sign out and use a different account
+                            </button>
+                        </div>
+
+                        <!-- Theme Toggle -->
+                        <div class="mt-4 flex justify-center">
+                            <button
+                                @click="toggleDarkMode()"
+                                class="p-2 text-gray-500 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none"
+                                aria-label="Toggle dark mode"
+                            >
+                                <span x-show="!dark" x-html="$icon('moon', 'w-5 h-5')"></span>
+                                <span x-show="dark" x-html="$icon('sun', 'w-5 h-5')"></span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="{{ url_for('static', path='shared/js/log-config.js') }}"></script>
+    <script src="{{ url_for('static', path='shared/js/utils.js') }}"></script>
+    <script src="{{ url_for('static', path='shared/js/api-client.js') }}"></script>
+    <script src="{{ url_for('static', path='shared/js/icons.js') }}"></script>
+    <script src="{{ url_for('tenancy_static', path='admin/js/select-platform.js') }}"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></script>
+</body>
+</html>

app/modules/tenancy/templates/tenancy/admin/user-create.html

@@ -0,0 +1,193 @@
+{# app/templates/admin/user-create.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
+
+{% block title %}Create Admin User{% endblock %}
+
+{% block alpine_data %}adminUserCreate(){% endblock %}
+
+{% block content %}
+{{ page_header('Create Admin User', subtitle='Add a new admin user to manage platforms', back_url='/admin/admin-users', back_label='Back to Admin Users') }}
+
+<!-- Create Form -->
+<form @submit.prevent="handleSubmit" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+    <div class="grid gap-6 mb-8 md:grid-cols-2">
+        <!-- Left Column: Account Info -->
+        <div>
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Account Information
+            </h3>
+
+            <!-- Username -->
+            <label class="block mb-4 text-sm">
+                <span class="text-gray-700 dark:text-gray-400">
+                    Username <span class="text-red-600">*</span>
+                </span>
+                <input
+                    type="text"
+                    x-model="formData.username"
+                    required
+                    maxlength="50"
+                    :disabled="saving"
+                    placeholder="johndoe"
+                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.username }"
+                >
+                <span x-show="errors.username" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.username"></span>
+                <span x-show="!errors.username" class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                    Letters, numbers, and underscores only
+                </span>
+            </label>
+
+            <!-- Email -->
+            <label class="block mb-4 text-sm">
+                <span class="text-gray-700 dark:text-gray-400">
+                    Email <span class="text-red-600">*</span>
+                </span>
+                <input
+                    type="email"
+                    x-model="formData.email"
+                    required
+                    :disabled="saving"
+                    placeholder="john@example.com"
+                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.email }"
+                >
+                <span x-show="errors.email" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.email"></span>
+            </label>
+
+            <!-- Password -->
+            <label class="block mb-4 text-sm">
+                <span class="text-gray-700 dark:text-gray-400">
+                    Password <span class="text-red-600">*</span>
+                </span>
+                <input
+                    type="password"
+                    x-model="formData.password"
+                    required
+                    minlength="6"
+                    :disabled="saving"
+                    placeholder="Minimum 6 characters"
+                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.password }"
+                >
+                <span x-show="errors.password" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.password"></span>
+            </label>
+
+            <!-- Admin Settings -->
+            <div class="mt-4 p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
+                <h4 class="text-sm font-medium text-purple-800 dark:text-purple-300 mb-3">Admin Settings</h4>
+
+                    <!-- Super Admin Toggle -->
+                    <label class="flex items-center mb-4">
+                        <input
+                            type="checkbox"
+                            x-model="formData.is_super_admin"
+                            :disabled="saving"
+                            class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500 dark:border-gray-600 dark:bg-gray-700"
+                        >
+                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">
+                            Super Admin
+                        </span>
+                    </label>
+                    <p class="text-xs text-gray-600 dark:text-gray-400 mb-4 -mt-2 ml-6">
+                        Super admins have access to all platforms and can manage other admins.
+                    </p>
+
+                <!-- Platform Assignment (only if not super admin) -->
+                <template x-if="!formData.is_super_admin">
+                    <div>
+                        <label class="block text-sm">
+                            <span class="text-gray-700 dark:text-gray-400">
+                                Assigned Platforms <span class="text-red-600">*</span>
+                            </span>
+                            <div class="mt-2 space-y-2 max-h-48 overflow-y-auto">
+                                <template x-for="platform in platforms" :key="platform.id">
+                                    <label class="flex items-center p-2 rounded hover:bg-purple-100 dark:hover:bg-purple-900/30 cursor-pointer">
+                                        <input
+                                            type="checkbox"
+                                            :value="platform.id"
+                                            x-model="formData.platform_ids"
+                                            :disabled="saving"
+                                            class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500 dark:border-gray-600 dark:bg-gray-700"
+                                        >
+                                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300" x-text="platform.name"></span>
+                                        <span class="ml-2 text-xs text-gray-500 dark:text-gray-400" x-text="'(' + platform.code + ')'"></span>
+                                    </label>
+                                </template>
+                            </div>
+                            <p x-show="platforms.length === 0" class="text-sm text-gray-500 dark:text-gray-400 mt-2">
+                                No platforms available. Create a platform first.
+                            </p>
+                            <span x-show="errors.platform_ids" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.platform_ids"></span>
+                        </label>
+                    </div>
+                </template>
+            </div>
+        </div>
+
+        <!-- Right Column: Personal Info -->
+        <div>
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Personal Information
+            </h3>
+
+            <!-- First Name -->
+            <label class="block mb-4 text-sm">
+                <span class="text-gray-700 dark:text-gray-400">
+                    First Name
+                </span>
+                <input
+                    type="text"
+                    x-model="formData.first_name"
+                    maxlength="100"
+                    :disabled="saving"
+                    placeholder="John"
+                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                >
+            </label>
+
+            <!-- Last Name -->
+            <label class="block mb-4 text-sm">
+                <span class="text-gray-700 dark:text-gray-400">
+                    Last Name
+                </span>
+                <input
+                    type="text"
+                    x-model="formData.last_name"
+                    maxlength="100"
+                    :disabled="saving"
+                    placeholder="Doe"
+                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                >
+            </label>
+        </div>
+    </div>
+
+    <!-- Submit Button -->
+    <div class="flex items-center justify-end gap-3 pt-6 border-t dark:border-gray-700">
+        <a
+            href="/admin/admin-users"
+            class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
+            Cancel
+        </a>
+        <button
+            type="submit"
+            :disabled="saving"
+            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
+            <span x-show="!saving">
+                <span x-html="$icon('user-plus', 'w-4 h-4 mr-2 inline')"></span>
+                Create Admin User
+            </span>
+            <span x-show="saving" class="flex items-center">
+                <span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
+                Creating...
+            </span>
+        </button>
+    </div>
+</form>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='admin/js/user-create.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/vendor-create.html

@@ -0,0 +1,283 @@
+{# app/templates/admin/vendor-create.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import error_state %}
+
+{% block title %}Create Vendor{% endblock %}
+
+{% block alpine_data %}adminVendorCreate(){% endblock %}
+
+{% block content %}
+{{ page_header('Create New Vendor', subtitle='Create a vendor (storefront/brand) under an existing company', back_url='/admin/vendors', back_label='Back to Vendors') }}
+
+{# noqa: FE-003 - Custom success message with nested template #}
+<!-- Success Message -->
+<div x-show="successMessage" x-cloak class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
+    <div class="flex items-start">
+        <span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
+        <div class="flex-1">
+            <p class="font-semibold">Vendor Created Successfully!</p>
+            <template x-if="createdVendor">
+                <div class="mt-2 p-3 bg-white rounded border border-green-300">
+                    <p class="text-sm font-semibold mb-2">Vendor Details:</p>
+                    <div class="space-y-1 text-sm">
+                        <div><span class="font-bold">Vendor Code:</span> <span x-text="createdVendor.vendor_code"></span></div>
+                        <div><span class="font-bold">Name:</span> <span x-text="createdVendor.name"></span></div>
+                        <div><span class="font-bold">Subdomain:</span> <span x-text="createdVendor.subdomain"></span></div>
+                        <div><span class="font-bold">Company:</span> <span x-text="createdVendor.company_name"></span></div>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</div>
+
+{{ error_state('Error Creating Vendor', error_var='errorMessage', show_condition='errorMessage') }}
+
+<!-- Loading Companies -->
+<div x-show="loadingCompanies" class="mb-6 p-4 bg-blue-50 border border-blue-200 text-blue-700 rounded-lg">
+    <div class="flex items-center">
+        <span x-html="$icon('spinner', 'w-5 h-5 mr-3 animate-spin')"></span>
+        <span>Loading companies...</span>
+    </div>
+</div>
+
+<!-- Create Vendor Form -->
+<div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+    <form @submit.prevent="createVendor">
+        <!-- Parent Company Selection -->
+        <div class="mb-6">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Parent Company</h3>
+            <div class="p-4 mb-4 bg-blue-50 border border-blue-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
+                <p class="text-sm text-blue-800 dark:text-blue-300">
+                    <span x-html="$icon('information-circle', 'w-4 h-4 inline mr-1')"></span>
+                    Vendors are storefronts/brands under a company. Select the parent company for this vendor.
+                </p>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                    Company <span class="text-red-500">*</span>
+                </label>
+                <select
+                    x-model="formData.company_id"
+                    required
+                    :disabled="loadingCompanies"
+                    class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                >
+                    <option value="">Select a company...</option>
+                    <template x-for="company in companies" :key="company.id">
+                        <option :value="company.id" x-text="`${company.name} (ID: ${company.id})`"></option>
+                    </template>
+                </select>
+                <p class="mt-1 text-xs text-gray-500">The company this vendor belongs to</p>
+            </div>
+        </div>
+
+        <!-- Vendor Information Section -->
+        <div class="mb-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Vendor Information</h3>
+
+            <div class="grid gap-6 mb-4 md:grid-cols-2">
+                <!-- Vendor Code -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                        Vendor Code <span class="text-red-500">*</span>
+                    </label>
+                    <input
+                        type="text"
+                        x-model="formData.vendor_code"
+                        required
+                        minlength="2"
+                        maxlength="50"
+                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600 uppercase"
+                        placeholder="TECHSTORE"
+                        @input="formData.vendor_code = $event.target.value.toUpperCase()"
+                    />
+                    <p class="mt-1 text-xs text-gray-500">Unique identifier (uppercase, 2-50 chars)</p>
+                </div>
+
+                <!-- Subdomain -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                        Subdomain <span class="text-red-500">*</span>
+                    </label>
+                    <div class="flex items-center">
+                        <input
+                            type="text"
+                            x-model="formData.subdomain"
+                            required
+                            minlength="2"
+                            maxlength="100"
+                            pattern="[a-z0-9][a-z0-9-]*[a-z0-9]"
+                            class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                            placeholder="techstore"
+                            @input="formData.subdomain = $event.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '')"
+                        />
+                        <span class="ml-2 text-sm text-gray-500">.example.com</span>
+                    </div>
+                    <p class="mt-1 text-xs text-gray-500">Lowercase letters, numbers, and hyphens only</p>
+                </div>
+            </div>
+
+            <div class="grid gap-6 mb-4 md:grid-cols-2">
+                <!-- Vendor Name -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                        Display Name <span class="text-red-500">*</span>
+                    </label>
+                    <input
+                        type="text"
+                        x-model="formData.name"
+                        required
+                        minlength="2"
+                        maxlength="255"
+                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                        placeholder="Tech Store Luxembourg"
+                    />
+                </div>
+
+                <!-- Auto-generate subdomain from name -->
+                <div class="flex items-end">
+                    <button
+                        type="button"
+                        @click="autoGenerateSubdomain()"
+                        class="px-4 py-2 text-sm font-medium text-purple-600 border border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-gray-700"
+                    >
+                        <span class="flex items-center">
+                            <span x-html="$icon('sparkles', 'w-4 h-4 mr-2')"></span>
+                            Auto-generate Subdomain
+                        </span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Description -->
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                    Description
+                </label>
+                <textarea
+                    x-model="formData.description"
+                    rows="3"
+                    class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                    placeholder="Brief description of the vendor/brand..."
+                ></textarea>
+            </div>
+        </div>
+
+        <!-- Platform Selection Section -->
+        <div class="mb-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Platform Access</h3>
+            <div class="p-4 mb-4 bg-blue-50 border border-blue-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
+                <p class="text-sm text-blue-800 dark:text-blue-300">
+                    <span x-html="$icon('information-circle', 'w-4 h-4 inline mr-1')"></span>
+                    Select which platforms this vendor should have access to. Each platform can have different settings and features.
+                </p>
+            </div>
+
+            <div class="space-y-2 max-h-48 overflow-y-auto">
+                <template x-for="platform in platforms" :key="platform.id">
+                    <label class="flex items-center p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-purple-50 dark:hover:bg-purple-900/20 cursor-pointer transition-colors">
+                        <input
+                            type="checkbox"
+                            :value="platform.id"
+                            x-model="formData.platform_ids"
+                            class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500 dark:border-gray-600 dark:bg-gray-700"
+                        >
+                        <div class="ml-3 flex-1">
+                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="platform.name"></span>
+                            <span class="ml-2 text-xs text-gray-500 dark:text-gray-400" x-text="'(' + platform.code + ')'"></span>
+                        </div>
+                        <template x-if="platform.description">
+                            <span class="text-xs text-gray-500 dark:text-gray-400" x-text="platform.description"></span>
+                        </template>
+                    </label>
+                </template>
+            </div>
+            <p x-show="platforms.length === 0" class="text-sm text-gray-500 dark:text-gray-400 mt-2">
+                No platforms available. Create a platform first.
+            </p>
+            <p x-show="formData.platform_ids.length === 0 && platforms.length > 0" class="text-xs text-amber-600 dark:text-amber-400 mt-2">
+                <span x-html="$icon('exclamation-triangle', 'w-4 h-4 inline mr-1')"></span>
+                Select at least one platform for the vendor to be accessible.
+            </p>
+        </div>
+
+        <!-- Marketplace URLs Section (Optional) -->
+        <div class="mb-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Marketplace URLs (Optional)</h3>
+            <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+                CSV feed URLs for product import from Letzshop marketplace
+            </p>
+
+            <div class="grid gap-6 md:grid-cols-1">
+                <!-- French CSV URL -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                        French CSV URL
+                    </label>
+                    <input
+                        type="url"
+                        x-model="formData.letzshop_csv_url_fr"
+                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                        placeholder="https://letzshop.lu/feeds/vendor-fr.csv"
+                    />
+                </div>
+
+                <!-- English CSV URL -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                        English CSV URL
+                    </label>
+                    <input
+                        type="url"
+                        x-model="formData.letzshop_csv_url_en"
+                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                        placeholder="https://letzshop.lu/feeds/vendor-en.csv"
+                    />
+                </div>
+
+                <!-- German CSV URL -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
+                        German CSV URL
+                    </label>
+                    <input
+                        type="url"
+                        x-model="formData.letzshop_csv_url_de"
+                        class="block w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600"
+                        placeholder="https://letzshop.lu/feeds/vendor-de.csv"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <!-- Form Actions -->
+        <div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
+            <button
+                type="button"
+                @click="window.location.href='/admin/vendors'"
+                class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-500 focus:outline-none focus:shadow-outline-gray"
+            >
+                Cancel
+            </button>
+            <button
+                type="submit"
+                :disabled="loading || loadingCompanies || !formData.company_id"
+                class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+                <span x-show="!loading">Create Vendor</span>
+                <span x-show="loading" class="flex items-center">
+                    <span x-html="$icon('spinner', 'w-4 h-4 mr-2 animate-spin')"></span>
+                    Creating...
+                </span>
+            </button>
+        </div>
+    </form>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="/static/admin/js/vendor-create.js"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/vendor-detail.html

@@ -0,0 +1,420 @@
+{# app/templates/admin/vendor-detail.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/headers.html' import detail_page_header %}
+
+{% block title %}Vendor Details{% endblock %}
+
+{% block alpine_data %}adminVendorDetail(){% endblock %}
+
+{% block content %}
+{% call detail_page_header("vendor?.name || 'Vendor Details'", '/admin/vendors', subtitle_show='vendor') %}
+    <span x-text="vendorCode"></span>
+    <span class="text-gray-400 mx-2">•</span>
+    <span x-text="vendor?.subdomain"></span>
+{% endcall %}
+
+{{ loading_state('Loading vendor details...') }}
+
+{{ error_state('Error loading vendor') }}
+
+<!-- Vendor Details -->
+<div x-show="!loading && vendor">
+    <!-- Quick Actions Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Quick Actions
+        </h3>
+        <div class="flex flex-wrap items-center gap-3">
+            <a
+                :href="`/admin/vendors/${vendorCode}/edit`"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
+                <span x-html="$icon('edit', 'w-4 h-4 mr-2')"></span>
+                Edit Vendor
+            </a>
+            <button
+                @click="deleteVendor()"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:shadow-outline-red">
+                <span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
+                Delete Vendor
+            </button>
+        </div>
+    </div>
+
+    <!-- Status Cards -->
+    <div class="grid gap-6 mb-8 md:grid-cols-4">
+        <!-- Verification Status -->
+        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+            <div class="p-3 mr-4 rounded-full" 
+                 :class="vendor?.is_verified ? 'text-green-500 bg-green-100 dark:text-green-100 dark:bg-green-500' : 'text-orange-500 bg-orange-100 dark:text-orange-100 dark:bg-orange-500'">
+                <span x-html="$icon(vendor?.is_verified ? 'badge-check' : 'clock', 'w-5 h-5')"></span>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                    Verification
+                </p>
+                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="vendor?.is_verified ? 'Verified' : 'Pending'">
+                    -
+                </p>
+            </div>
+        </div>
+
+        <!-- Active Status -->
+        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+            <div class="p-3 mr-4 rounded-full"
+                 :class="vendor?.is_active ? 'text-green-500 bg-green-100 dark:text-green-100 dark:bg-green-500' : 'text-red-500 bg-red-100 dark:text-red-100 dark:bg-red-500'">
+                <span x-html="$icon(vendor?.is_active ? 'check-circle' : 'x-circle', 'w-5 h-5')"></span>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                    Status
+                </p>
+                <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="vendor?.is_active ? 'Active' : 'Inactive'">
+                    -
+                </p>
+            </div>
+        </div>
+
+        <!-- Created Date -->
+        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+            <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
+                <span x-html="$icon('calendar', 'w-5 h-5')"></span>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                    Created
+                </p>
+                <p class="text-sm font-semibold text-gray-700 dark:text-gray-200" x-text="formatDate(vendor?.created_at)">
+                    -
+                </p>
+            </div>
+        </div>
+
+        <!-- Updated Date -->
+        <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+            <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
+                <span x-html="$icon('refresh', 'w-5 h-5')"></span>
+            </div>
+            <div>
+                <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                    Last Updated
+                </p>
+                <p class="text-sm font-semibold text-gray-700 dark:text-gray-200" x-text="formatDate(vendor?.updated_at)">
+                    -
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Subscription Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800" x-show="subscription">
+        <div class="flex items-center justify-between mb-4">
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Subscription
+            </h3>
+            <button
+                @click="showSubscriptionModal = true"
+                class="flex items-center px-3 py-1.5 text-sm font-medium text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300">
+                <span x-html="$icon('edit', 'w-4 h-4 mr-1')"></span>
+                Edit
+            </button>
+        </div>
+
+        <!-- Tier and Status -->
+        <div class="flex flex-wrap items-center gap-4 mb-4">
+            <div class="flex items-center gap-2">
+                <span class="text-sm text-gray-600 dark:text-gray-400">Tier:</span>
+                <span class="px-2.5 py-0.5 text-sm font-medium rounded-full"
+                      :class="{
+                          'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300': subscription?.tier === 'essential',
+                          'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300': subscription?.tier === 'professional',
+                          'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300': subscription?.tier === 'business',
+                          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300': subscription?.tier === 'enterprise'
+                      }"
+                      x-text="subscription?.tier ? subscription.tier.charAt(0).toUpperCase() + subscription.tier.slice(1) : '-'">
+                </span>
+            </div>
+            <div class="flex items-center gap-2">
+                <span class="text-sm text-gray-600 dark:text-gray-400">Status:</span>
+                <span class="px-2.5 py-0.5 text-sm font-medium rounded-full"
+                      :class="{
+                          'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300': subscription?.status === 'active',
+                          'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300': subscription?.status === 'trial',
+                          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300': subscription?.status === 'past_due',
+                          'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300': subscription?.status === 'cancelled' || subscription?.status === 'expired'
+                      }"
+                      x-text="subscription?.status ? subscription.status.replace('_', ' ').charAt(0).toUpperCase() + subscription.status.slice(1) : '-'">
+                </span>
+            </div>
+            <template x-if="subscription?.is_annual">
+                <span class="px-2.5 py-0.5 text-xs font-medium text-purple-800 bg-purple-100 rounded-full dark:bg-purple-900 dark:text-purple-300">
+                    Annual
+                </span>
+            </template>
+        </div>
+
+        <!-- Period Info -->
+        <div class="flex flex-wrap gap-4 mb-4 text-sm">
+            <div>
+                <span class="text-gray-600 dark:text-gray-400">Period:</span>
+                <span class="ml-1 text-gray-700 dark:text-gray-300" x-text="formatDate(subscription?.period_start)"></span>
+                <span class="text-gray-400">→</span>
+                <span class="text-gray-700 dark:text-gray-300" x-text="formatDate(subscription?.period_end)"></span>
+            </div>
+            <template x-if="subscription?.trial_ends_at">
+                <div>
+                    <span class="text-gray-600 dark:text-gray-400">Trial ends:</span>
+                    <span class="ml-1 text-gray-700 dark:text-gray-300" x-text="formatDate(subscription?.trial_ends_at)"></span>
+                </div>
+            </template>
+        </div>
+
+        <!-- Usage Meters -->
+        <div class="grid gap-4 md:grid-cols-3">
+            <!-- Orders Usage -->
+            <div class="p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
+                <div class="flex items-center justify-between mb-2">
+                    <span class="text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">Orders This Period</span>
+                </div>
+                <div class="flex items-baseline gap-1">
+                    <span class="text-xl font-bold text-gray-700 dark:text-gray-200" x-text="subscription?.orders_this_period || 0"></span>
+                    <span class="text-sm text-gray-500 dark:text-gray-400">
+                        / <span x-text="subscription?.orders_limit || '∞'"></span>
+                    </span>
+                </div>
+                <div class="mt-2 h-1.5 bg-gray-200 rounded-full dark:bg-gray-600" x-show="subscription?.orders_limit">
+                    <div class="h-1.5 rounded-full transition-all"
+                         :class="getUsageBarColor(subscription?.orders_this_period, subscription?.orders_limit)"
+                         :style="`width: ${Math.min(100, (subscription?.orders_this_period / subscription?.orders_limit) * 100)}%`">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Products Usage -->
+            <div class="p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
+                <div class="flex items-center justify-between mb-2">
+                    <span class="text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">Products</span>
+                </div>
+                <div class="flex items-baseline gap-1">
+                    <span class="text-xl font-bold text-gray-700 dark:text-gray-200" x-text="subscription?.products_count || 0"></span>
+                    <span class="text-sm text-gray-500 dark:text-gray-400">
+                        / <span x-text="subscription?.products_limit || '∞'"></span>
+                    </span>
+                </div>
+                <div class="mt-2 h-1.5 bg-gray-200 rounded-full dark:bg-gray-600" x-show="subscription?.products_limit">
+                    <div class="h-1.5 rounded-full transition-all"
+                         :class="getUsageBarColor(subscription?.products_count, subscription?.products_limit)"
+                         :style="`width: ${Math.min(100, (subscription?.products_count / subscription?.products_limit) * 100)}%`">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Team Members Usage -->
+            <div class="p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
+                <div class="flex items-center justify-between mb-2">
+                    <span class="text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">Team Members</span>
+                </div>
+                <div class="flex items-baseline gap-1">
+                    <span class="text-xl font-bold text-gray-700 dark:text-gray-200" x-text="subscription?.team_count || 0"></span>
+                    <span class="text-sm text-gray-500 dark:text-gray-400">
+                        / <span x-text="subscription?.team_members_limit || '∞'"></span>
+                    </span>
+                </div>
+                <div class="mt-2 h-1.5 bg-gray-200 rounded-full dark:bg-gray-600" x-show="subscription?.team_members_limit">
+                    <div class="h-1.5 rounded-full transition-all"
+                         :class="getUsageBarColor(subscription?.team_count, subscription?.team_members_limit)"
+                         :style="`width: ${Math.min(100, (subscription?.team_count / subscription?.team_members_limit) * 100)}%`">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- No Subscription Notice -->
+    <div class="px-4 py-3 mb-6 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800" x-show="!subscription && !loading">
+        <div class="flex items-center gap-3">
+            <span x-html="$icon('exclamation', 'w-5 h-5 text-yellow-600 dark:text-yellow-400')"></span>
+            <div>
+                <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">No Subscription Found</p>
+                <p class="text-sm text-yellow-700 dark:text-yellow-300">This vendor doesn't have a subscription yet.</p>
+            </div>
+            <button
+                @click="createSubscription()"
+                class="ml-auto px-3 py-1.5 text-sm font-medium text-white bg-yellow-600 rounded-lg hover:bg-yellow-700">
+                Create Subscription
+            </button>
+        </div>
+    </div>
+
+    <!-- Main Info Cards -->
+    <div class="grid gap-6 mb-8 md:grid-cols-2">
+        <!-- Basic Information -->
+        <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Basic Information
+            </h3>
+            <div class="space-y-3">
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Vendor Code</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="vendor?.vendor_code || '-'">-</p>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Name</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="vendor?.name || '-'">-</p>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Subdomain</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="vendor?.subdomain || '-'">-</p>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Description</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="vendor?.description || 'No description provided'">-</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Contact Information -->
+        <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Contact Information
+            </h3>
+            <div class="space-y-3">
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Owner Email</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="vendor?.owner_email || '-'">-</p>
+                    <p class="text-xs text-gray-500 dark:text-gray-400">Owner's authentication email</p>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Contact Email</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="vendor?.contact_email || '-'">-</p>
+                    <p class="text-xs text-gray-500 dark:text-gray-400">Public business contact</p>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Phone</p>
+                    <p class="text-sm text-gray-700 dark:text-gray-300" x-text="vendor?.contact_phone || '-'">-</p>
+                </div>
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Website</p>
+                    <a 
+                        x-show="vendor?.website"
+                        :href="vendor?.website" 
+                        target="_blank"
+                        class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400" 
+                        x-text="vendor?.website">
+                    </a>
+                    <span x-show="!vendor?.website" class="text-sm text-gray-700 dark:text-gray-300">-</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Business Details -->
+    <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Business Details
+        </h3>
+        <div class="grid gap-6 md:grid-cols-2">
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Business Address</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line" x-text="vendor?.business_address || 'No address provided'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Tax Number</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="vendor?.tax_number || 'Not provided'">-</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Owner Information -->
+    <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Owner Information
+        </h3>
+        <div class="grid gap-6 md:grid-cols-3">
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Owner User ID</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="vendor?.owner_user_id || '-'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Owner Username</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="vendor?.owner_username || '-'">-</p>
+            </div>
+            <div>
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-2">Owner Email</p>
+                <p class="text-sm text-gray-700 dark:text-gray-300" x-text="vendor?.owner_email || '-'">-</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Marketplace URLs -->
+    <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800" x-show="vendor?.letzshop_csv_url_fr || vendor?.letzshop_csv_url_en || vendor?.letzshop_csv_url_de">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Marketplace CSV URLs
+        </h3>
+        <div class="space-y-3">
+            <div x-show="vendor?.letzshop_csv_url_fr">
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-1">French (FR)</p>
+                <a 
+                    :href="vendor?.letzshop_csv_url_fr" 
+                    target="_blank"
+                    class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 break-all" 
+                    x-text="vendor?.letzshop_csv_url_fr">
+                </a>
+            </div>
+            <div x-show="vendor?.letzshop_csv_url_en">
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-1">English (EN)</p>
+                <a 
+                    :href="vendor?.letzshop_csv_url_en" 
+                    target="_blank"
+                    class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 break-all" 
+                    x-text="vendor?.letzshop_csv_url_en">
+                </a>
+            </div>
+            <div x-show="vendor?.letzshop_csv_url_de">
+                <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase mb-1">German (DE)</p>
+                <a 
+                    :href="vendor?.letzshop_csv_url_de" 
+                    target="_blank"
+                    class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 break-all" 
+                    x-text="vendor?.letzshop_csv_url_de">
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <!-- More Actions -->
+    <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            More Actions
+        </h3>
+        <div class="flex flex-wrap gap-3">
+            <!-- View Parent Company -->
+            <a
+                :href="'/admin/companies/' + vendor?.company_id + '/edit'"
+                class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue"
+            >
+                <span x-html="$icon('office-building', 'w-4 h-4 mr-2')"></span>
+                View Parent Company
+            </a>
+
+            <!-- Customize Theme -->
+            <a
+                :href="`/admin/vendors/${vendorCode}/theme`"
+                class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
+            >
+                <span x-html="$icon('color-swatch', 'w-4 h-4 mr-2')"></span>
+                Customize Theme
+            </a>
+        </div>
+        <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">
+            <span x-html="$icon('information-circle', 'w-4 h-4 inline mr-1')"></span>
+            This vendor belongs to company: <strong x-text="vendor?.company_name"></strong>.
+            Contact info and ownership are managed at the company level.
+        </p>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='admin/js/vendor-detail.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/vendor-edit.html

@@ -0,0 +1,432 @@
+{# app/templates/admin/vendor-edit.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state %}
+{% from 'shared/macros/headers.html' import edit_page_header %}
+
+{% block title %}Edit Vendor{% endblock %}
+
+{% block alpine_data %}adminVendorEdit(){% endblock %}
+
+{% block content %}
+{% call edit_page_header('Edit Vendor', '/admin/vendors', subtitle_show='vendor', back_label='Back to Vendors') %}
+    <span x-text="vendor?.name"></span>
+    <span class="text-gray-400">•</span>
+    <span x-text="vendor?.vendor_code"></span>
+{% endcall %}
+
+{{ loading_state('Loading vendor...', show_condition='loadingVendor') }}
+
+<!-- Edit Form -->
+<div x-show="!loadingVendor && vendor">
+    <!-- Quick Actions Card -->
+    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+            Quick Actions
+        </h3>
+        <div class="flex flex-wrap items-center gap-3">
+            <button
+                @click="toggleVerification()"
+                :disabled="saving"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
+                :class="vendor?.is_verified ? 'bg-orange-600 hover:bg-orange-700' : 'bg-green-600 hover:bg-green-700'">
+                <span x-html="$icon(vendor?.is_verified ? 'x-circle' : 'badge-check', 'w-4 h-4 mr-2')"></span>
+                <span x-text="vendor?.is_verified ? 'Unverify Vendor' : 'Verify Vendor'"></span>
+            </button>
+
+            <button
+                @click="toggleActive()"
+                :disabled="saving"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
+                :class="vendor?.is_active ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'">
+                <span x-html="$icon(vendor?.is_active ? 'lock-closed' : 'lock-open', 'w-4 h-4 mr-2')"></span>
+                <span x-text="vendor?.is_active ? 'Deactivate' : 'Activate'"></span>
+            </button>
+
+            <!-- Status Badges -->
+            <div class="ml-auto flex items-center gap-2">
+                <span
+                    x-show="vendor?.is_verified"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
+                    <span x-html="$icon('badge-check', 'w-3 h-3 mr-1')"></span>
+                    Verified
+                </span>
+                <span
+                    x-show="!vendor?.is_verified"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:bg-orange-700 dark:text-orange-100">
+                    <span x-html="$icon('clock', 'w-3 h-3 mr-1')"></span>
+                    Pending
+                </span>
+                <span
+                    x-show="vendor?.is_active"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
+                    Active
+                </span>
+                <span
+                    x-show="!vendor?.is_active"
+                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
+                    Inactive
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Form Card -->
+    <form @submit.prevent="handleSubmit" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <div class="grid gap-6 mb-8 md:grid-cols-2">
+            <!-- Left Column: Basic Info -->
+            <div>
+                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Basic Information
+                </h3>
+
+                <!-- Vendor Code (readonly) -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Vendor Code
+                    </span>
+                    <input
+                        type="text"
+                        :value="vendor?.vendor_code || ''"
+                        disabled
+                        class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
+                    >
+                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                        Cannot be changed after creation
+                    </span>
+                </label>
+
+                <!-- Name -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Vendor Name <span class="text-red-600">*</span>
+                    </span>
+                    <input
+                        type="text"
+                        x-model="formData.name"
+                        required
+                        maxlength="255"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                        :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.name }"
+                    >
+                    <span x-show="errors.name" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.name"></span>
+                </label>
+
+                <!-- Subdomain -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Subdomain <span class="text-red-600">*</span>
+                    </span>
+                    <input
+                        type="text"
+                        x-model="formData.subdomain"
+                        @input="formatSubdomain()"
+                        required
+                        maxlength="100"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                        :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.subdomain }"
+                    >
+                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                        Lowercase letters, numbers, and hyphens only
+                    </span>
+                    <span x-show="errors.subdomain" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.subdomain"></span>
+                </label>
+
+                <!-- Description -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Description
+                    </span>
+                    <textarea
+                        x-model="formData.description"
+                        rows="3"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
+                    ></textarea>
+                </label>
+            </div>
+
+            <!-- Right Column: Contact Info -->
+            <div>
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
+                        Contact Information
+                    </h3>
+                    <button
+                        type="button"
+                        @click="resetAllContactToCompany()"
+                        :disabled="saving || !hasAnyContactOverride()"
+                        class="text-xs px-2 py-1 text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 disabled:opacity-50 disabled:cursor-not-allowed"
+                        title="Reset all contact fields to inherit from company">
+                        <span x-html="$icon('refresh', 'w-3 h-3 inline mr-1')"></span>
+                        Reset All to Company
+                    </button>
+                </div>
+
+                <!-- Owner Email (readonly) -->
+                <label class="block mb-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        Owner Email
+                    </span>
+                    <input
+                        type="email"
+                        :value="vendor?.owner_email || ''"
+                        disabled
+                        class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
+                    >
+                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                        Owner's authentication email
+                    </span>
+                </label>
+
+                <!-- Contact Email -->
+                <label class="block mb-4 text-sm">
+                    <div class="flex items-center justify-between">
+                        <span class="text-gray-700 dark:text-gray-400">
+                            Contact Email
+                            <span x-show="!formData.contact_email"
+                                  class="ml-1 text-xs text-purple-500 dark:text-purple-400"
+                                  title="Inherited from company">
+                                (from company)
+                            </span>
+                        </span>
+                        <button
+                            type="button"
+                            x-show="formData.contact_email"
+                            @click="resetFieldToCompany('contact_email')"
+                            :disabled="saving"
+                            class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
+                            Reset
+                        </button>
+                    </div>
+                    <input
+                        type="email"
+                        x-model="formData.contact_email"
+                        :placeholder="vendor?.company_contact_email || 'contact@company.com'"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                        :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.contact_email }"
+                    >
+                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                        <span x-show="!formData.contact_email">Using company value. Enter a value to override.</span>
+                        <span x-show="formData.contact_email">Custom value (clear to inherit from company)</span>
+                    </span>
+                    <span x-show="errors.contact_email" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.contact_email"></span>
+                </label>
+
+                <!-- Phone -->
+                <label class="block mb-4 text-sm">
+                    <div class="flex items-center justify-between">
+                        <span class="text-gray-700 dark:text-gray-400">
+                            Phone
+                            <span x-show="!formData.contact_phone"
+                                  class="ml-1 text-xs text-purple-500 dark:text-purple-400">
+                                (from company)
+                            </span>
+                        </span>
+                        <button
+                            type="button"
+                            x-show="formData.contact_phone"
+                            @click="resetFieldToCompany('contact_phone')"
+                            :disabled="saving"
+                            class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
+                            Reset
+                        </button>
+                    </div>
+                    <input
+                        type="tel"
+                        x-model="formData.contact_phone"
+                        :placeholder="vendor?.company_contact_phone || '+352 XXX XXX'"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    >
+                </label>
+
+                <!-- Website -->
+                <label class="block mb-4 text-sm">
+                    <div class="flex items-center justify-between">
+                        <span class="text-gray-700 dark:text-gray-400">
+                            Website
+                            <span x-show="!formData.website"
+                                  class="ml-1 text-xs text-purple-500 dark:text-purple-400">
+                                (from company)
+                            </span>
+                        </span>
+                        <button
+                            type="button"
+                            x-show="formData.website"
+                            @click="resetFieldToCompany('website')"
+                            :disabled="saving"
+                            class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
+                            Reset
+                        </button>
+                    </div>
+                    <input
+                        type="url"
+                        x-model="formData.website"
+                        :placeholder="vendor?.company_website || 'https://company.com'"
+                        :disabled="saving"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    >
+                </label>
+            </div>
+        </div>
+
+        <!-- Business Details -->
+        <div class="mb-8">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Business Details
+            </h3>
+
+            <div class="grid gap-6 md:grid-cols-2">
+                <!-- Business Address -->
+                <label class="block text-sm">
+                    <div class="flex items-center justify-between">
+                        <span class="text-gray-700 dark:text-gray-400">
+                            Business Address
+                            <span x-show="!formData.business_address"
+                                  class="ml-1 text-xs text-purple-500 dark:text-purple-400">
+                                (from company)
+                            </span>
+                        </span>
+                        <button
+                            type="button"
+                            x-show="formData.business_address"
+                            @click="resetFieldToCompany('business_address')"
+                            :disabled="saving"
+                            class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
+                            Reset
+                        </button>
+                    </div>
+                    <textarea
+                        x-model="formData.business_address"
+                        rows="3"
+                        :disabled="saving"
+                        :placeholder="vendor?.company_business_address || 'No company address'"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
+                    ></textarea>
+                </label>
+
+                <!-- Tax Number -->
+                <label class="block text-sm">
+                    <div class="flex items-center justify-between">
+                        <span class="text-gray-700 dark:text-gray-400">
+                            Tax Number
+                            <span x-show="!formData.tax_number"
+                                  class="ml-1 text-xs text-purple-500 dark:text-purple-400">
+                                (from company)
+                            </span>
+                        </span>
+                        <button
+                            type="button"
+                            x-show="formData.tax_number"
+                            @click="resetFieldToCompany('tax_number')"
+                            :disabled="saving"
+                            class="text-xs text-purple-600 hover:text-purple-800 dark:text-purple-400">
+                            Reset
+                        </button>
+                    </div>
+                    <input
+                        type="text"
+                        x-model="formData.tax_number"
+                        :disabled="saving"
+                        :placeholder="vendor?.company_tax_number || 'No company tax number'"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    >
+                </label>
+            </div>
+        </div>
+
+        <!-- Marketplace Integration -->
+        <div class="mb-8">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                <span x-html="$icon('shopping-bag', 'inline w-5 h-5 mr-2')"></span>
+                Letzshop Marketplace URLs
+            </h3>
+            <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+                Configure CSV feed URLs for automatic product imports from Letzshop marketplace
+            </p>
+
+            <div class="space-y-4">
+                <!-- French CSV URL -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        French CSV URL
+                    </span>
+                    <input
+                        type="url"
+                        x-model="formData.letzshop_csv_url_fr"
+                        :disabled="saving"
+                        placeholder="https://letzshop.lu/feed/fr/products.csv"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    >
+                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                        URL for French language product feed
+                    </span>
+                </label>
+
+                <!-- English CSV URL -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        English CSV URL
+                    </span>
+                    <input
+                        type="url"
+                        x-model="formData.letzshop_csv_url_en"
+                        :disabled="saving"
+                        placeholder="https://letzshop.lu/feed/en/products.csv"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    >
+                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                        URL for English language product feed
+                    </span>
+                </label>
+
+                <!-- German CSV URL -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                        German CSV URL
+                    </span>
+                    <input
+                        type="url"
+                        x-model="formData.letzshop_csv_url_de"
+                        :disabled="saving"
+                        placeholder="https://letzshop.lu/feed/de/products.csv"
+                        class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    >
+                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                        URL for German language product feed
+                    </span>
+                </label>
+            </div>
+        </div>
+
+        <!-- Save Button -->
+        <div class="flex items-center justify-end gap-3 pt-6 border-t dark:border-gray-700">
+            <a
+                href="/admin/vendors"
+                class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 hover:border-gray-400 focus:outline-none">
+                Cancel
+            </a>
+            <button
+                type="submit"
+                :disabled="saving"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
+                <span x-show="!saving">
+                    <span x-html="$icon('check', 'w-4 h-4 mr-2 inline')"></span>
+                    Save Changes
+                </span>
+                <span x-show="saving" class="flex items-center">
+                    <span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
+                    Saving...
+                </span>
+            </button>
+        </div>
+    </form>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='admin/js/vendor-edit.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/vendor-theme.html

@@ -0,0 +1,450 @@
+{# app/templates/admin/vendor-theme.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/headers.html' import page_header_flex %}
+
+{% block title %}Theme Editor - {{ vendor_code }}{% endblock %}
+
+{# ✅ CRITICAL: Binds to adminVendorTheme() function in vendor-theme.js #}
+{% block alpine_data %}adminVendorTheme(){% endblock %}
+
+{% block content %}
+{% call page_header_flex(title='Theme Editor', subtitle_var="'Customize appearance for ' + (vendor?.name || '...')") %}
+    <a :href="`/admin/vendors/${vendorCode}`"
+       class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
+        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
+        Back to Vendor
+    </a>
+{% endcall %}
+
+{{ loading_state('Loading theme...') }}
+
+{{ error_state('Error', show_condition='error && !loading') }}
+
+<!-- Main Content -->
+<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-3">
+
+    <!-- Theme Configuration Form (2 columns) -->
+    <div class="md:col-span-2 space-y-6">
+
+        <!-- Theme Presets -->
+        <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                <span x-html="$icon('palette', 'inline w-5 h-5 mr-2')"></span>
+                Choose a Preset
+            </h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                Start with a pre-designed theme, then customize it to match your brand.
+            </p>
+
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+                <!-- Default Preset -->
+                <button @click="applyPreset('default')"
+                        :disabled="saving"
+                        :class="themeData.theme_name === 'default' ? 'ring-2 ring-purple-500' : ''"
+                        class="p-3 text-sm font-medium bg-white border-2 border-gray-200 rounded-lg hover:border-purple-300 transition-all disabled:opacity-50 dark:bg-gray-900 dark:border-gray-700">
+                    <div class="flex items-center justify-center space-x-2 mb-2">
+                        <div class="w-4 h-4 rounded bg-indigo-500"></div>
+                        <div class="w-4 h-4 rounded bg-purple-500"></div>
+                        <div class="w-4 h-4 rounded bg-pink-500"></div>
+                    </div>
+                    <p class="text-gray-700 dark:text-gray-300">Default</p>
+                </button>
+
+                <!-- Modern Preset -->
+                <button @click="applyPreset('modern')"
+                        :disabled="saving"
+                        :class="themeData.theme_name === 'modern' ? 'ring-2 ring-purple-500' : ''"
+                        class="p-3 text-sm font-medium bg-white border-2 border-gray-200 rounded-lg hover:border-purple-300 transition-all disabled:opacity-50 dark:bg-gray-900 dark:border-gray-700">
+                    <div class="flex items-center justify-center space-x-2 mb-2">
+                        <div class="w-4 h-4 rounded bg-indigo-500"></div>
+                        <div class="w-4 h-4 rounded bg-purple-600"></div>
+                        <div class="w-4 h-4 rounded bg-pink-500"></div>
+                    </div>
+                    <p class="text-gray-700 dark:text-gray-300">Modern</p>
+                </button>
+
+                <!-- Classic Preset -->
+                <button @click="applyPreset('classic')"
+                        :disabled="saving"
+                        :class="themeData.theme_name === 'classic' ? 'ring-2 ring-purple-500' : ''"
+                        class="p-3 text-sm font-medium bg-white border-2 border-gray-200 rounded-lg hover:border-blue-300 transition-all disabled:opacity-50 dark:bg-gray-900 dark:border-gray-700">
+                    <div class="flex items-center justify-center space-x-2 mb-2">
+                        <div class="w-4 h-4 rounded bg-blue-800"></div>
+                        <div class="w-4 h-4 rounded bg-purple-700"></div>
+                        <div class="w-4 h-4 rounded bg-red-600"></div>
+                    </div>
+                    <p class="text-gray-700 dark:text-gray-300">Classic</p>
+                </button>
+
+                <!-- Minimal Preset -->
+                <button @click="applyPreset('minimal')"
+                        :disabled="saving"
+                        :class="themeData.theme_name === 'minimal' ? 'ring-2 ring-purple-500' : ''"
+                        class="p-3 text-sm font-medium bg-white border-2 border-gray-200 rounded-lg hover:border-gray-400 transition-all disabled:opacity-50 dark:bg-gray-900 dark:border-gray-700">
+                    <div class="flex items-center justify-center space-x-2 mb-2">
+                        <div class="w-4 h-4 rounded bg-black"></div>
+                        <div class="w-4 h-4 rounded bg-gray-600"></div>
+                        <div class="w-4 h-4 rounded bg-gray-400"></div>
+                    </div>
+                    <p class="text-gray-700 dark:text-gray-300">Minimal</p>
+                </button>
+
+                <!-- Vibrant Preset -->
+                <button @click="applyPreset('vibrant')"
+                        :disabled="saving"
+                        :class="themeData.theme_name === 'vibrant' ? 'ring-2 ring-purple-500' : ''"
+                        class="p-3 text-sm font-medium bg-white border-2 border-gray-200 rounded-lg hover:border-orange-300 transition-all disabled:opacity-50 dark:bg-gray-900 dark:border-gray-700">
+                    <div class="flex items-center justify-center space-x-2 mb-2">
+                        <div class="w-4 h-4 rounded bg-orange-500"></div>
+                        <div class="w-4 h-4 rounded bg-red-500"></div>
+                        <div class="w-4 h-4 rounded bg-purple-600"></div>
+                    </div>
+                    <p class="text-gray-700 dark:text-gray-300">Vibrant</p>
+                </button>
+
+                <!-- Elegant Preset -->
+                <button @click="applyPreset('elegant')"
+                        :disabled="saving"
+                        :class="themeData.theme_name === 'elegant' ? 'ring-2 ring-purple-500' : ''"
+                        class="p-3 text-sm font-medium bg-white border-2 border-gray-200 rounded-lg hover:border-gray-400 transition-all disabled:opacity-50 dark:bg-gray-900 dark:border-gray-700">
+                    <div class="flex items-center justify-center space-x-2 mb-2">
+                        <div class="w-4 h-4 rounded bg-gray-500"></div>
+                        <div class="w-4 h-4 rounded bg-gray-700"></div>
+                        <div class="w-4 h-4 rounded bg-amber-600"></div>
+                    </div>
+                    <p class="text-gray-700 dark:text-gray-300">Elegant</p>
+                </button>
+
+                <!-- Nature Preset -->
+                <button @click="applyPreset('nature')"
+                        :disabled="saving"
+                        :class="themeData.theme_name === 'nature' ? 'ring-2 ring-purple-500' : ''"
+                        class="p-3 text-sm font-medium bg-white border-2 border-gray-200 rounded-lg hover:border-green-300 transition-all disabled:opacity-50 dark:bg-gray-900 dark:border-gray-700">
+                    <div class="flex items-center justify-center space-x-2 mb-2">
+                        <div class="w-4 h-4 rounded bg-green-600"></div>
+                        <div class="w-4 h-4 rounded bg-emerald-500"></div>
+                        <div class="w-4 h-4 rounded bg-amber-500"></div>
+                    </div>
+                    <p class="text-gray-700 dark:text-gray-300">Nature</p>
+                </button>
+            </div>
+        </div>
+
+        <!-- Colors Section -->
+        <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                <span x-html="$icon('color-swatch', 'inline w-5 h-5 mr-2')"></span>
+                Colors
+            </h3>
+            <div class="grid gap-4 md:grid-cols-2">
+                <!-- Primary Color -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400 font-medium">Primary Color</span>
+                    <p class="text-xs text-gray-500 mb-2">Main brand color for buttons and links</p>
+                    <div class="flex items-center mt-1 space-x-2">
+                        <input type="color"
+                               x-model="themeData.colors.primary"
+                               class="h-10 w-20 border border-gray-300 rounded cursor-pointer dark:border-gray-600">
+                        <input type="text"
+                               x-model="themeData.colors.primary"
+                               class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input rounded">
+                    </div>
+                </label>
+
+                <!-- Secondary Color -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400 font-medium">Secondary Color</span>
+                    <p class="text-xs text-gray-500 mb-2">Supporting color for accents</p>
+                    <div class="flex items-center mt-1 space-x-2">
+                        <input type="color"
+                               x-model="themeData.colors.secondary"
+                               class="h-10 w-20 border border-gray-300 rounded cursor-pointer dark:border-gray-600">
+                        <input type="text"
+                               x-model="themeData.colors.secondary"
+                               class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input rounded">
+                    </div>
+                </label>
+
+                <!-- Accent Color -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400 font-medium">Accent Color</span>
+                    <p class="text-xs text-gray-500 mb-2">Call-to-action and highlights</p>
+                    <div class="flex items-center mt-1 space-x-2">
+                        <input type="color"
+                               x-model="themeData.colors.accent"
+                               class="h-10 w-20 border border-gray-300 rounded cursor-pointer dark:border-gray-600">
+                        <input type="text"
+                               x-model="themeData.colors.accent"
+                               class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input rounded">
+                    </div>
+                </label>
+
+                <!-- Background Color -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400 font-medium">Background Color</span>
+                    <p class="text-xs text-gray-500 mb-2">Page background</p>
+                    <div class="flex items-center mt-1 space-x-2">
+                        <input type="color"
+                               x-model="themeData.colors.background"
+                               class="h-10 w-20 border border-gray-300 rounded cursor-pointer dark:border-gray-600">
+                        <input type="text"
+                               x-model="themeData.colors.background"
+                               class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input rounded">
+                    </div>
+                </label>
+
+                <!-- Text Color -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400 font-medium">Text Color</span>
+                    <p class="text-xs text-gray-500 mb-2">Primary text color</p>
+                    <div class="flex items-center mt-1 space-x-2">
+                        <input type="color"
+                               x-model="themeData.colors.text"
+                               class="h-10 w-20 border border-gray-300 rounded cursor-pointer dark:border-gray-600">
+                        <input type="text"
+                               x-model="themeData.colors.text"
+                               class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input rounded">
+                    </div>
+                </label>
+
+                <!-- Border Color -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400 font-medium">Border Color</span>
+                    <p class="text-xs text-gray-500 mb-2">Borders and dividers</p>
+                    <div class="flex items-center mt-1 space-x-2">
+                        <input type="color"
+                               x-model="themeData.colors.border"
+                               class="h-10 w-20 border border-gray-300 rounded cursor-pointer dark:border-gray-600">
+                        <input type="text"
+                               x-model="themeData.colors.border"
+                               class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input rounded">
+                    </div>
+                </label>
+            </div>
+        </div>
+
+        <!-- Typography Section -->
+        <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                <span x-html="$icon('document', 'inline w-5 h-5 mr-2')"></span>
+                Typography
+            </h3>
+            <div class="grid gap-4 md:grid-cols-2">
+                <!-- Heading Font -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400 font-medium">Heading Font</span>
+                    <p class="text-xs text-gray-500 mb-2">For titles and headings</p>
+                    <select x-model="themeData.fonts.heading"
+                            class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select rounded">
+                        <option value="Inter, sans-serif">Inter (Modern)</option>
+                        <option value="Roboto, sans-serif">Roboto (Clean)</option>
+                        <option value="Poppins, sans-serif">Poppins (Friendly)</option>
+                        <option value="Playfair Display, serif">Playfair Display (Elegant)</option>
+                        <option value="Merriweather, serif">Merriweather (Classic)</option>
+                        <option value="Georgia, serif">Georgia (Traditional)</option>
+                        <option value="Helvetica, sans-serif">Helvetica (Minimal)</option>
+                        <option value="Montserrat, sans-serif">Montserrat (Bold)</option>
+                    </select>
+                </label>
+
+                <!-- Body Font -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400 font-medium">Body Font</span>
+                    <p class="text-xs text-gray-500 mb-2">For body text and content</p>
+                    <select x-model="themeData.fonts.body"
+                            class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select rounded">
+                        <option value="Inter, sans-serif">Inter (Modern)</option>
+                        <option value="Roboto, sans-serif">Roboto (Clean)</option>
+                        <option value="Open Sans, sans-serif">Open Sans (Readable)</option>
+                        <option value="Lato, sans-serif">Lato (Friendly)</option>
+                        <option value="Arial, sans-serif">Arial (Universal)</option>
+                        <option value="Georgia, serif">Georgia (Traditional)</option>
+                        <option value="Helvetica, sans-serif">Helvetica (Minimal)</option>
+                    </select>
+                </label>
+            </div>
+        </div>
+
+        <!-- Layout Section -->
+        <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                <span x-html="$icon('view-grid', 'inline w-5 h-5 mr-2')"></span>
+                Layout
+            </h3>
+            <div class="grid gap-4 md:grid-cols-3">
+                <!-- Product Layout Style -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400 font-medium">Product Layout</span>
+                    <select x-model="themeData.layout.style"
+                            class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select rounded">
+                        <option value="grid">Grid</option>
+                        <option value="list">List</option>
+                        <option value="masonry">Masonry</option>
+                    </select>
+                </label>
+
+                <!-- Header Style -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400 font-medium">Header Style</span>
+                    <select x-model="themeData.layout.header"
+                            class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select rounded">
+                        <option value="fixed">Fixed</option>
+                        <option value="static">Static</option>
+                        <option value="transparent">Transparent</option>
+                    </select>
+                </label>
+
+                <!-- Product Card Style -->
+                <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400 font-medium">Product Card</span>
+                    <select x-model="themeData.layout.product_card"
+                            class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select rounded">
+                        <option value="modern">Modern</option>
+                        <option value="classic">Classic</option>
+                        <option value="minimal">Minimal</option>
+                    </select>
+                </label>
+            </div>
+        </div>
+
+        <!-- Custom CSS Section -->
+        <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                <span x-html="$icon('code', 'inline w-5 h-5 mr-2')"></span>
+                Advanced: Custom CSS
+            </h3>
+            <label class="block text-sm">
+                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
+                    Add custom CSS rules for advanced styling (use with caution)
+                </p>
+                <textarea x-model="themeData.custom_css"
+                          rows="6"
+                          placeholder=".my-custom-class {
+  color: red;
+  font-weight: bold;
+}"
+                          class="block w-full mt-1 text-sm font-mono dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-textarea rounded"></textarea>
+            </label>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="flex justify-between items-center">
+            <button @click="resetToDefault()"
+                    :disabled="saving"
+                    class="px-4 py-2 text-sm font-medium leading-5 text-red-700 transition-colors duration-150 bg-white border border-red-300 rounded-lg hover:bg-red-50 focus:outline-none disabled:opacity-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-600">
+                <span x-html="$icon('refresh', 'inline w-4 h-4 mr-2')"></span>
+                Reset to Default
+            </button>
+            <button @click="saveTheme()"
+                    :disabled="saving"
+                    class="flex items-center px-6 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none disabled:opacity-50">
+                <span x-show="!saving">
+                    <span x-html="$icon('save', 'inline w-4 h-4 mr-2')"></span>
+                    Save Theme
+                </span>
+                <span x-show="saving" class="flex items-center">
+                    <span x-html="$icon('spinner', 'inline w-4 h-4 mr-2 animate-spin')"></span>
+                    Saving...
+                </span>
+            </button>
+        </div>
+    </div>
+
+    <!-- Preview Panel (1 column) -->
+    <div class="md:col-span-1">
+        <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800 sticky top-6">
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                <span x-html="$icon('eye', 'inline w-5 h-5 mr-2')"></span>
+                Preview
+            </h3>
+
+            <!-- Theme Preview -->
+            <div class="space-y-4">
+                <!-- Current Theme Name -->
+                <div class="p-3 bg-purple-50 dark:bg-purple-900 dark:bg-opacity-20 rounded-lg">
+                    <p class="text-xs font-semibold text-purple-800 dark:text-purple-200 mb-1">ACTIVE THEME</p>
+                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300 capitalize" x-text="themeData.theme_name"></p>
+                </div>
+
+                <!-- Colors Preview -->
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">COLORS</p>
+                    <div class="grid grid-cols-3 gap-2">
+                        <div class="text-center">
+                            <div class="h-12 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm"
+                                 :style="`background-color: ${themeData.colors.primary}`"></div>
+                            <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Primary</p>
+                        </div>
+                        <div class="text-center">
+                            <div class="h-12 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm"
+                                 :style="`background-color: ${themeData.colors.secondary}`"></div>
+                            <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Secondary</p>
+                        </div>
+                        <div class="text-center">
+                            <div class="h-12 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm"
+                                 :style="`background-color: ${themeData.colors.accent}`"></div>
+                            <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Accent</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Typography Preview -->
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">TYPOGRAPHY</p>
+                    <div class="space-y-2 p-3 bg-gray-50 dark:bg-gray-900 rounded-lg">
+                        <p class="text-lg font-bold" :style="`font-family: ${themeData.fonts.heading}`">
+                            Heading Font
+                        </p>
+                        <p class="text-sm" :style="`font-family: ${themeData.fonts.body}`">
+                            This is body text font example. It will be used for paragraphs and descriptions.
+                        </p>
+                    </div>
+                </div>
+
+                <!-- Button Preview -->
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">BUTTONS</p>
+                    <button class="px-4 py-2 text-sm font-medium text-white rounded-lg w-full shadow-sm"
+                            :style="`background-color: ${themeData.colors.primary}`">
+                        Primary Button
+                    </button>
+                </div>
+
+                <!-- Layout Preview -->
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">LAYOUT</p>
+                    <div class="text-xs space-y-1 p-3 bg-gray-50 dark:bg-gray-900 rounded-lg">
+                        <p class="text-gray-700 dark:text-gray-300">
+                            <span class="font-semibold">Product Layout:</span>
+                            <span class="capitalize" x-text="themeData.layout.style"></span>
+                        </p>
+                        <p class="text-gray-700 dark:text-gray-300">
+                            <span class="font-semibold">Header:</span>
+                            <span class="capitalize" x-text="themeData.layout.header"></span>
+                        </p>
+                        <p class="text-gray-700 dark:text-gray-300">
+                            <span class="font-semibold">Product Card:</span>
+                            <span class="capitalize" x-text="themeData.layout.product_card"></span>
+                        </p>
+                    </div>
+                </div>
+
+                <!-- Preview Link -->
+                <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
+                    <a :href="`http://${vendor?.subdomain}.localhost:8000`"
+                       target="_blank"
+                       class="flex items-center justify-center px-4 py-2 text-sm font-medium text-purple-700 bg-purple-50 border border-purple-300 rounded-lg hover:bg-purple-100 dark:bg-purple-900 dark:bg-opacity-20 dark:text-purple-300 dark:border-purple-700 transition-colors">
+                        <span x-html="$icon('external-link', 'w-4 h-4 mr-2')"></span>
+                        View Live Shop
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='admin/js/vendor-theme.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/vendor-themes.html

@@ -0,0 +1,129 @@
+{# app/templates/admin/vendor-themes.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+
+{% block title %}Vendor Themes{% endblock %}
+
+{% block extra_head %}
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
+<style>
+    .ts-wrapper { width: 100%; }
+    .ts-control {
+        background-color: rgb(249 250 251) !important;
+        border-color: rgb(209 213 219) !important;
+        border-radius: 0.5rem !important;
+        padding: 0.5rem 0.75rem !important;
+    }
+    .dark .ts-control {
+        background-color: rgb(55 65 81) !important;
+        border-color: rgb(75 85 99) !important;
+        color: rgb(229 231 235) !important;
+    }
+    .ts-dropdown {
+        border-radius: 0.5rem !important;
+        border-color: rgb(209 213 219) !important;
+    }
+    .dark .ts-dropdown {
+        background-color: rgb(55 65 81) !important;
+        border-color: rgb(75 85 99) !important;
+    }
+    .dark .ts-dropdown .option {
+        color: rgb(229 231 235) !important;
+    }
+    .dark .ts-dropdown .option.active {
+        background-color: rgb(75 85 99) !important;
+    }
+</style>
+{% endblock %}
+
+{% block alpine_data %}adminVendorThemes(){% endblock %}
+
+{% block content %}
+{{ page_header('Vendor Themes', subtitle='Customize vendor theme colors and branding') }}
+
+<!-- Selected Vendor Display (when filtered) -->
+<div x-show="selectedVendor" x-cloak class="mb-6">
+    <div class="px-4 py-3 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <span x-html="$icon('color-swatch', 'w-6 h-6 text-purple-600')"></span>
+                <div>
+                    <p class="text-sm font-medium text-purple-700 dark:text-purple-300">Filtered by Vendor</p>
+                    <p class="text-lg font-semibold text-purple-900 dark:text-purple-100" x-text="selectedVendor?.name"></p>
+                </div>
+            </div>
+            <button
+                @click="clearVendorFilter()"
+                class="flex items-center gap-1 px-3 py-1.5 text-sm text-purple-700 dark:text-purple-300 bg-purple-100 dark:bg-purple-800 rounded-md hover:bg-purple-200 dark:hover:bg-purple-700 transition-colors"
+            >
+                <span x-html="$icon('x-mark', 'w-4 h-4')"></span>
+                Clear Filter
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Vendor Search/Filter -->
+<div class="px-4 py-6 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+    <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+        Search Vendor
+    </h3>
+    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+        Search for a vendor to customize their theme
+    </p>
+
+    <div class="max-w-md">
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Vendor
+        </label>
+        <select x-ref="vendorSelect" placeholder="Search vendor by name or code..."></select>
+    </div>
+</div>
+
+{{ loading_state('Loading vendors...') }}
+
+{{ error_state('Error loading vendors') }}
+
+<!-- Vendors List -->
+<div x-show="!loading && filteredVendors.length > 0">
+    <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
+        <div class="flex items-center justify-between mb-4">
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
+                <span x-text="selectedVendor ? 'Selected Vendor' : 'All Vendors'"></span>
+                <span class="text-sm font-normal text-gray-500 dark:text-gray-400" x-text="`(${filteredVendors.length})`"></span>
+            </h3>
+        </div>
+        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <template x-for="vendor in filteredVendors" :key="vendor.vendor_code">
+                <a
+                    :href="`/admin/vendors/${vendor.vendor_code}/theme`"
+                    class="block p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-purple-500 dark:hover:border-purple-500 hover:shadow-md transition-all"
+                >
+                    <div class="flex items-center justify-between mb-2">
+                        <h4 class="font-semibold text-gray-700 dark:text-gray-200" x-text="vendor.name"></h4>
+                        <span x-html="$icon('color-swatch', 'w-5 h-5 text-purple-600')"></span>
+                    </div>
+                    <p class="text-sm text-gray-600 dark:text-gray-400" x-text="vendor.vendor_code"></p>
+                    <div class="mt-3 flex items-center text-xs text-purple-600 dark:text-purple-400">
+                        <span>Customize theme</span>
+                        <span x-html="$icon('chevron-right', 'w-4 h-4 ml-1')"></span>
+                    </div>
+                </a>
+            </template>
+        </div>
+    </div>
+</div>
+
+<!-- Empty State -->
+<div x-show="!loading && filteredVendors.length === 0" class="text-center py-12">
+    <span x-html="$icon('shopping-bag', 'inline w-12 h-12 text-gray-400 mb-4')"></span>
+    <p class="text-gray-600 dark:text-gray-400">No vendors found</p>
+</div>
+
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
+<script src="{{ url_for('tenancy_static', path='admin/js/vendor-themes.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/vendors.html

@@ -0,0 +1,232 @@
+{# app/templates/admin/vendors.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/pagination.html' import pagination %}
+{% from 'shared/macros/headers.html' import page_header %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
+
+{% block title %}Vendors{% endblock %}
+
+{% block alpine_data %}adminVendors(){% endblock %}
+
+{% block content %}
+{{ page_header('Vendor Management', action_label='Create Vendor', action_url='/admin/vendors/create') }}
+
+{{ loading_state('Loading vendors...') }}
+
+{{ error_state('Error loading vendors') }}
+
+<!-- Stats Cards -->
+<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
+    <!-- Card: Total Vendors -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
+            <span x-html="$icon('user-group', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Total Vendors
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Verified Vendors -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
+            <span x-html="$icon('badge-check', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Verified Vendors
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.verified || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Pending Verification -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
+            <span x-html="$icon('clock', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Pending
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.pending || 0">
+                0
+            </p>
+        </div>
+    </div>
+
+    <!-- Card: Inactive Vendors -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-teal-500 bg-teal-100 rounded-full dark:text-teal-100 dark:bg-teal-500">
+            <span x-html="$icon('x-circle', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
+                Inactive
+            </p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.inactive || 0">
+                0
+            </p>
+        </div>
+    </div>
+</div>
+
+<!-- Search and Filters Bar -->
+<div x-show="!loading" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <!-- Search Input -->
+        <div class="flex-1 max-w-md">
+            <div class="relative">
+                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
+                </span>
+                <input
+                    type="text"
+                    x-model="filters.search"
+                    @input="debouncedSearch()"
+                    placeholder="Search by name or vendor code..."
+                    class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
+                >
+            </div>
+        </div>
+
+        <!-- Filters -->
+        <div class="flex flex-wrap gap-3">
+            <!-- Status Filter -->
+            <select
+                x-model="filters.is_active"
+                @change="pagination.page = 1; loadVendors()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Status</option>
+                <option value="true">Active</option>
+                <option value="false">Inactive</option>
+            </select>
+
+            <!-- Verification Filter -->
+            <select
+                x-model="filters.is_verified"
+                @change="pagination.page = 1; loadVendors()"
+                class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
+            >
+                <option value="">All Verification</option>
+                <option value="true">Verified</option>
+                <option value="false">Pending</option>
+            </select>
+
+            <!-- Refresh Button -->
+            <button
+                @click="refresh()"
+                class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                title="Refresh vendors"
+            >
+                <span x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
+                Refresh
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Vendors Table with Pagination -->
+<div x-show="!loading">
+    {% call table_wrapper() %}
+            {{ table_header(['Vendor', 'Subdomain', 'Status', 'Created', 'Actions']) }}
+            <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
+                <!-- Empty State -->
+                <template x-if="paginatedVendors.length === 0">
+                    <tr>
+                        <td colspan="5" class="px-4 py-8 text-center text-gray-600 dark:text-gray-400">
+                            <div class="flex flex-col items-center">
+                                <span x-html="$icon('user-group', 'w-12 h-12 mb-2 text-gray-300')"></span>
+                                <p class="font-medium">No vendors found</p>
+                                <p class="text-xs mt-1" x-text="filters.search || filters.is_active || filters.is_verified ? 'Try adjusting your search or filters' : 'Create your first vendor to get started'"></p>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+
+                <!-- Vendor Rows -->
+                <template x-for="vendor in paginatedVendors" :key="vendor.id || vendor.vendor_code">
+                    <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                        <!-- Vendor Info with Avatar -->
+                        <td class="px-4 py-3">
+                            <div class="flex items-center text-sm">
+                                <div class="relative hidden w-8 h-8 mr-3 rounded-full md:block">
+                                    <div class="absolute inset-0 rounded-full bg-purple-100 dark:bg-purple-600 flex items-center justify-center">
+                                        <span class="text-xs font-semibold text-purple-600 dark:text-purple-100"
+                                              x-text="vendor.name?.charAt(0).toUpperCase() || '?'"></span>
+                                    </div>
+                                </div>
+                                <div>
+                                    <p class="font-semibold" x-text="vendor.name"></p>
+                                    <p class="text-xs text-gray-600 dark:text-gray-400" x-text="vendor.vendor_code"></p>
+                                </div>
+                            </div>
+                        </td>
+
+                        <!-- Subdomain -->
+                        <td class="px-4 py-3 text-sm" x-text="vendor.subdomain"></td>
+
+                        <!-- Status Badge -->
+                        <td class="px-4 py-3 text-xs">
+                            <span class="inline-flex items-center px-2 py-1 font-semibold leading-tight rounded-full"
+                                  :class="vendor.is_verified ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-orange-700 bg-orange-100 dark:text-white dark:bg-orange-600'">
+                                <span x-show="vendor.is_verified" x-html="$icon('badge-check', 'w-3 h-3 mr-1')"></span>
+                                <span x-text="vendor.is_verified ? 'Verified' : 'Pending'"></span>
+                            </span>
+                        </td>
+
+                        <!-- Created Date -->
+                        <td class="px-4 py-3 text-sm" x-text="formatDate(vendor.created_at)"></td>
+
+                        <!-- Actions -->
+                        <td class="px-4 py-3">
+                            <div class="flex items-center space-x-2 text-sm">
+                                <!-- View Button -->
+                                <button
+                                    @click="viewVendor(vendor.vendor_code)"
+                                    class="flex items-center justify-center p-2 text-blue-600 rounded-lg hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                                    title="View details"
+                                >
+                                    <span x-html="$icon('eye', 'w-5 h-5')"></span>
+                                </button>
+
+                                <!-- Edit Button -->
+                                <button
+                                    @click="editVendor(vendor.vendor_code)"
+                                    class="flex items-center justify-center p-2 text-purple-600 rounded-lg hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                                    title="Edit vendor"
+                                >
+                                    <span x-html="$icon('edit', 'w-5 h-5')"></span>
+                                </button>
+
+                                <!-- Delete Button -->
+                                <button
+                                    @click="deleteVendor(vendor)"
+                                    class="flex items-center justify-center p-2 text-red-600 rounded-lg hover:bg-red-50 dark:text-red-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                                    title="Delete vendor"
+                                >
+                                    <span x-html="$icon('delete', 'w-5 h-5')"></span>
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </tbody>
+    {% endcall %}
+
+    {{ pagination() }}
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='admin/js/vendors.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/vendor/login.html

@@ -0,0 +1,160 @@
+{# app/templates/vendor/login.html #}
+<!DOCTYPE html>
+<html :class="{ 'dark': dark }" x-data="vendorLogin()" lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vendor Login - Multi-Tenant Platform</title>
+    <!-- Fonts: Local fallback + Google Fonts -->
+    <link href="/static/shared/fonts/inter.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="{{ url_for('static', path='vendor/css/tailwind.output.css') }}" />
+    <style>
+        [x-cloak] { display: none !important; }
+    </style>
+</head>
+<body>
+    <div class="flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900" x-cloak>
+        <div class="flex-1 h-full max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800">
+            <div class="flex flex-col overflow-y-auto md:flex-row">
+                <div class="h-32 md:h-auto md:w-1/2">
+                    <img aria-hidden="true" class="object-cover w-full h-full dark:hidden"
+                         src="{{ url_for('static', path='vendor/img/login-office.jpeg') }}" alt="Office" />
+                    <img aria-hidden="true" class="hidden object-cover w-full h-full dark:block"
+                         src="{{ url_for('static', path='vendor/img/login-office-dark.jpeg') }}" alt="Office" />
+                </div>
+                <div class="flex items-center justify-center p-6 sm:p-12 md:w-1/2">
+                    <div class="w-full">
+                        <!-- Vendor Info -->
+                        <template x-if="vendor">
+                            <div class="mb-6 text-center">
+                                <div class="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-purple-100 dark:bg-purple-600">
+                                    <span class="text-2xl font-bold text-purple-600 dark:text-purple-100"
+                                          x-text="vendor.name?.charAt(0).toUpperCase() || '🏪'"></span>
+                                </div>
+                                <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200" x-text="vendor.name"></h2>
+                                <p class="text-sm text-gray-600 dark:text-gray-400">
+                                    <strong x-text="vendor.vendor_code"></strong>
+                                </p>
+                            </div>
+                        </template>
+
+                        <h1 class="mb-4 text-xl font-semibold text-gray-700 dark:text-gray-200">
+                            Vendor Portal Login
+                        </h1>
+
+                        <!-- Alert Messages -->
+                        <div x-show="error" x-text="error"
+                             class="px-4 py-3 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800"
+                             x-transition></div>
+
+                        <div x-show="success" x-text="success"
+                             class="px-4 py-3 mb-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800"
+                             x-transition></div>
+
+                        <!-- Login Form (only show if vendor found) -->
+                        <template x-if="vendor">
+                            <form @submit.prevent="handleLogin">
+                                <label class="block text-sm">
+                                    <span class="text-gray-700 dark:text-gray-400">Username</span>
+                                    <input x-model="credentials.username"
+                                           :disabled="loading"
+                                           @input="clearErrors"
+                                           class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
+                                           :class="{ 'border-red-600': errors.username }"
+                                           placeholder="Enter your username"
+                                           autocomplete="username"
+                                           required />
+                                    <span x-show="errors.username" x-text="errors.username"
+                                          class="text-xs text-red-600 dark:text-red-400"></span>
+                                </label>
+
+                                <label class="block mt-4 text-sm">
+                                    <span class="text-gray-700 dark:text-gray-400">Password</span>
+                                    <input x-model="credentials.password"
+                                           :disabled="loading"
+                                           @input="clearErrors"
+                                           class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
+                                           :class="{ 'border-red-600': errors.password }"
+                                           placeholder="***************"
+                                           type="password"
+                                           autocomplete="current-password"
+                                           required />
+                                    <span x-show="errors.password" x-text="errors.password"
+                                          class="text-xs text-red-600 dark:text-red-400"></span>
+                                </label>
+
+                                <button type="submit" :disabled="loading"
+                                        class="block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
+                                    <span x-show="!loading">Sign in</span>
+                                    <span x-show="loading" class="flex items-center justify-center">
+                                        <span class="inline w-4 h-4 mr-2" x-html="$icon('spinner', 'w-4 h-4 animate-spin')"></span>
+                                        Signing in...
+                                    </span>
+                                </button>
+                            </form>
+                        </template>
+
+                        <!-- Vendor Not Found -->
+                        <template x-if="!vendor && !loading && checked">
+                            <div class="text-center py-8">
+                                <div class="text-6xl mb-4">🏪</div>
+                                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">
+                                    Vendor Not Found
+                                </h3>
+                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                                    The vendor you're trying to access doesn't exist or is inactive.
+                                </p>
+                                <a href="/" class="inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
+                                    Go to Platform Home
+                                </a>
+                            </div>
+                        </template>
+
+                        <!-- Loading State -->
+                        <div x-show="loading && !vendor" class="text-center py-8">
+                            <span class="inline-block w-8 h-8 text-purple-600" x-html="$icon('spinner', 'w-8 h-8 animate-spin')"></span>
+                            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Loading vendor information...</p>
+                        </div>
+
+                        <hr class="my-8" />
+
+                        <p class="mt-4">
+                            <a class="text-sm font-medium text-purple-600 dark:text-purple-400 hover:underline"
+                               href="#">
+                                Forgot your password?
+                            </a>
+                        </p>
+                        <p class="mt-2">
+                            <a class="text-sm font-medium text-gray-600 dark:text-gray-400 hover:underline"
+                               href="/">
+                                ← Back to Platform
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts - ORDER MATTERS! -->
+
+    <!-- 1. Log Configuration -->
+    <script src="{{ url_for('static', path='shared/js/log-config.js') }}"></script>
+
+    <!-- 2. Icons -->
+    <script src="{{ url_for('static', path='shared/js/icons.js') }}"></script>
+
+    <!-- 3. Utils -->
+    <script src="{{ url_for('static', path='shared/js/utils.js') }}"></script>
+
+    <!-- 4. API Client -->
+    <script src="{{ url_for('static', path='shared/js/api-client.js') }}"></script>
+
+    <!-- 5. Alpine.js v3 -->
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
+
+    <!-- 6. Login Logic -->
+    <script src="{{ url_for('tenancy_static', path='vendor/js/login.js') }}"></script>
+</body>
+</html>

app/modules/tenancy/templates/tenancy/vendor/profile.html

@@ -0,0 +1,206 @@
+{# app/templates/vendor/profile.html #}
+{% extends "vendor/base.html" %}
+{% from 'shared/macros/headers.html' import page_header_flex %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+
+{% block title %}Profile{% endblock %}
+
+{% block alpine_data %}vendorProfile(){% endblock %}
+
+{% block content %}
+<!-- Page Header -->
+{% call page_header_flex(title='Profile', subtitle='Manage your business information') %}
+    <div class="flex items-center gap-4">
+        <button
+            x-show="hasChanges"
+            @click="resetForm()"
+            class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
+        >
+            Reset
+        </button>
+        <button
+            @click="saveProfile()"
+            :disabled="saving || !hasChanges"
+            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
+        >
+            <span x-html="$icon('check', 'w-4 h-4 mr-2')"></span>
+            <span x-show="!saving">Save Changes</span>
+            <span x-show="saving">Saving...</span>
+        </button>
+    </div>
+{% endcall %}
+
+{{ loading_state('Loading profile...') }}
+
+{{ error_state('Error loading profile') }}
+
+<!-- Profile Form -->
+<div x-show="!loading && !error" class="w-full mb-8">
+    <!-- Business Information -->
+    <div class="mb-8 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-4 border-b dark:border-gray-700">
+            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Business Information</h3>
+            <p class="text-sm text-gray-500 dark:text-gray-400">Basic information about your business</p>
+        </div>
+        <div class="p-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <!-- Business Name -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Business Name *
+                    </label>
+                    <input
+                        type="text"
+                        x-model="form.name"
+                        @input="markChanged()"
+                        :class="{'border-red-500': errors.name}"
+                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                    />
+                    <p x-show="errors.name" class="mt-1 text-xs text-red-500" x-text="errors.name"></p>
+                </div>
+
+                <!-- Tax Number -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Tax Number / VAT ID
+                    </label>
+                    <input
+                        type="text"
+                        x-model="form.tax_number"
+                        @input="markChanged()"
+                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                        placeholder="LU12345678"
+                    />
+                </div>
+
+                <!-- Business Address -->
+                <div class="md:col-span-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Business Address
+                    </label>
+                    <textarea
+                        x-model="form.business_address"
+                        @input="markChanged()"
+                        rows="3"
+                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                        placeholder="123 Business Street&#10;City, Postal Code&#10;Country"
+                    ></textarea>
+                </div>
+
+                <!-- Description -->
+                <div class="md:col-span-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Business Description
+                    </label>
+                    <textarea
+                        x-model="form.description"
+                        @input="markChanged()"
+                        rows="4"
+                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                        placeholder="Tell customers about your business..."
+                    ></textarea>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Contact Information -->
+    <div class="mb-8 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-4 border-b dark:border-gray-700">
+            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Contact Information</h3>
+            <p class="text-sm text-gray-500 dark:text-gray-400">How customers can reach you</p>
+        </div>
+        <div class="p-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <!-- Contact Email -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Contact Email
+                    </label>
+                    <input
+                        type="email"
+                        x-model="form.contact_email"
+                        @input="markChanged()"
+                        :class="{'border-red-500': errors.contact_email}"
+                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                        placeholder="contact@yourbusiness.com"
+                    />
+                    <p x-show="errors.contact_email" class="mt-1 text-xs text-red-500" x-text="errors.contact_email"></p>
+                </div>
+
+                <!-- Contact Phone -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Contact Phone
+                    </label>
+                    <input
+                        type="tel"
+                        x-model="form.contact_phone"
+                        @input="markChanged()"
+                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                        placeholder="+352 123 456 789"
+                    />
+                </div>
+
+                <!-- Website -->
+                <div class="md:col-span-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Website
+                    </label>
+                    <input
+                        type="url"
+                        x-model="form.website"
+                        @input="markChanged()"
+                        :class="{'border-red-500': errors.website}"
+                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                        placeholder="https://www.yourbusiness.com"
+                    />
+                    <p x-show="errors.website" class="mt-1 text-xs text-red-500" x-text="errors.website"></p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Vendor Info (Read Only) -->
+    <div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-4 border-b dark:border-gray-700">
+            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Account Information</h3>
+            <p class="text-sm text-gray-500 dark:text-gray-400">Your vendor account details (read-only)</p>
+        </div>
+        <div class="p-4">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <!-- Vendor Code -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Vendor Code</label>
+                    <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="profile?.vendor_code"></p>
+                </div>
+
+                <!-- Subdomain -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Subdomain</label>
+                    <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="profile?.subdomain || '-'"></p>
+                </div>
+
+                <!-- Status -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Status</label>
+                    <span
+                        :class="profile?.is_active
+                            ? 'px-2 py-1 text-xs font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100'
+                            : 'px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-100'"
+                        x-text="profile?.is_active ? 'Active' : 'Inactive'"
+                    ></span>
+                    <span
+                        x-show="profile?.is_verified"
+                        class="ml-2 px-2 py-1 text-xs font-semibold text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100"
+                    >Verified</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='vendor/js/profile.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/vendor/team.html

@@ -0,0 +1,293 @@
+{# app/templates/vendor/team.html #}
+{% extends "vendor/base.html" %}
+{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
+{% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/modals.html' import modal_simple %}
+{% from 'shared/macros/tables.html' import table_wrapper %}
+
+{% block title %}Team{% endblock %}
+
+{% block alpine_data %}vendorTeam(){% endblock %}
+
+{% block content %}
+<!-- Page Header -->
+{% call page_header_flex(title='Team', subtitle='Manage your team members and roles') %}
+    <div class="flex items-center gap-4">
+        {{ refresh_button(loading_var='loading', onclick='loadMembers()', variant='secondary') }}
+        <button
+            @click="openInviteModal()"
+            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
+        >
+            <span x-html="$icon('user-plus', 'w-4 h-4 mr-2')"></span>
+            Invite Member
+        </button>
+    </div>
+{% endcall %}
+
+{{ loading_state('Loading team...') }}
+
+{{ error_state('Error loading team') }}
+
+<!-- Stats Cards -->
+<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-3">
+    <!-- Total Members -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
+            <span x-html="$icon('users', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Members</p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total">0</p>
+        </div>
+    </div>
+
+    <!-- Active Members -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
+            <span x-html="$icon('check-circle', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Active</p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.active_count">0</p>
+        </div>
+    </div>
+
+    <!-- Pending Invitations -->
+    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
+        <div class="p-3 mr-4 text-yellow-500 bg-yellow-100 rounded-full dark:text-yellow-100 dark:bg-yellow-500">
+            <span x-html="$icon('clock', 'w-5 h-5')"></span>
+        </div>
+        <div>
+            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Pending Invitations</p>
+            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.pending_invitations">0</p>
+        </div>
+    </div>
+</div>
+
+<!-- Team Members Table -->
+<div x-show="!loading && !error" class="mb-8">
+{% call table_wrapper() %}
+    <thead>
+        <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
+            <th class="px-4 py-3">Member</th>
+            <th class="px-4 py-3">Role</th>
+            <th class="px-4 py-3">Status</th>
+            <th class="px-4 py-3">Joined</th>
+            <th class="px-4 py-3">Actions</th>
+        </tr>
+    </thead>
+    <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
+        <template x-for="member in members" :key="member.user_id">
+            <tr class="text-gray-700 dark:text-gray-400">
+                <!-- Member Info -->
+                <td class="px-4 py-3">
+                    <div class="flex items-center text-sm">
+                        <div class="relative w-10 h-10 mr-3 rounded-full overflow-hidden bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
+                            <span class="text-sm font-semibold text-purple-600 dark:text-purple-300" x-text="getInitials(member)"></span>
+                        </div>
+                        <div>
+                            <p class="font-semibold" x-text="`${member.first_name || ''} ${member.last_name || ''}`.trim() || member.email"></p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400" x-text="member.email"></p>
+                        </div>
+                    </div>
+                </td>
+                <!-- Role -->
+                <td class="px-4 py-3 text-sm">
+                    <span
+                        class="px-2 py-1 font-semibold leading-tight text-purple-700 bg-purple-100 rounded-full dark:bg-purple-700 dark:text-purple-100"
+                        x-text="getRoleName(member)"
+                    ></span>
+                </td>
+                <!-- Status -->
+                <td class="px-4 py-3 text-xs">
+                    <span
+                        :class="{
+                            'px-2 py-1 font-semibold leading-tight rounded-full': true,
+                            'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': member.is_active && !member.invitation_pending,
+                            'text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100': member.invitation_pending,
+                            'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-100': !member.is_active
+                        }"
+                        x-text="member.invitation_pending ? 'Pending' : (member.is_active ? 'Active' : 'Inactive')"
+                    ></span>
+                </td>
+                <!-- Joined -->
+                <td class="px-4 py-3 text-sm" x-text="formatDate(member.joined_at)"></td>
+                <!-- Actions -->
+                <td class="px-4 py-3">
+                    <div class="flex items-center space-x-2 text-sm">
+                        <!-- Edit button - not for owners -->
+                        <button
+                            @click="openEditModal(member)"
+                            class="p-1 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
+                            title="Edit"
+                            x-show="!member.is_owner"
+                        >
+                            <span x-html="$icon('pencil', 'w-5 h-5')"></span>
+                        </button>
+                        <!-- Owner badge -->
+                        <span x-show="member.is_owner" class="text-xs text-gray-400 dark:text-gray-500 italic">Owner</span>
+                        <!-- Remove button - not for owners -->
+                        <button
+                            @click="confirmRemove(member)"
+                            class="p-1 text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400"
+                            title="Remove"
+                            x-show="!member.is_owner"
+                        >
+                            <span x-html="$icon('trash', 'w-5 h-5')"></span>
+                        </button>
+                    </div>
+                </td>
+            </tr>
+        </template>
+        <!-- Empty State -->
+        <tr x-show="members.length === 0">
+            <td colspan="5" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+                <div class="flex flex-col items-center">
+                    <span x-html="$icon('users', 'w-12 h-12 text-gray-300 dark:text-gray-600 mb-4')"></span>
+                    <p class="text-lg font-medium">No team members yet</p>
+                    <p class="text-sm">Invite your first team member to get started</p>
+                    <button
+                        @click="openInviteModal()"
+                        class="mt-4 px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
+                    >
+                        Invite Member
+                    </button>
+                </div>
+            </td>
+        </tr>
+    </tbody>
+{% endcall %}
+</div>
+
+<!-- Invite Modal -->
+<div x-show="showInviteModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50">
+    <div class="w-full max-w-md bg-white rounded-lg shadow-xl dark:bg-gray-800" @click.away="showInviteModal = false">
+        <div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
+            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Invite Team Member</h3>
+            <button @click="showInviteModal = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
+                <span x-html="$icon('x', 'w-5 h-5')"></span>
+            </button>
+        </div>
+        <div class="p-4">
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email *</label>
+                <input
+                    type="email"
+                    x-model="inviteForm.email"
+                    class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                    placeholder="colleague@example.com"
+                />
+            </div>
+            <div class="grid grid-cols-2 gap-4 mb-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">First Name</label>
+                    <input
+                        type="text"
+                        x-model="inviteForm.first_name"
+                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                    />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Name</label>
+                    <input
+                        type="text"
+                        x-model="inviteForm.last_name"
+                        class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                    />
+                </div>
+            </div>
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Role</label>
+                <select
+                    x-model="inviteForm.role_name"
+                    class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                >
+                    <template x-for="role in roleOptions" :key="role.value">
+                        <option :value="role.value" x-text="role.label"></option>
+                    </template>
+                </select>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400" x-text="roleOptions.find(r => r.value === inviteForm.role_name)?.description"></p>
+            </div>
+        </div>
+        <div class="flex justify-end gap-2 p-4 border-t dark:border-gray-700">
+            <button @click="showInviteModal = false" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
+                Cancel
+            </button>
+            <button
+                @click="sendInvitation()"
+                :disabled="saving || !inviteForm.email"
+                class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
+            >
+                <span x-show="!saving">Send Invitation</span>
+                <span x-show="saving">Sending...</span>
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Edit Modal -->
+{% call modal_simple('editTeamMemberModal', 'Edit Team Member', show_var='showEditModal', size='sm') %}
+<div class="space-y-4">
+    <template x-if="selectedMember">
+        <div>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                Edit <span class="font-semibold" x-text="selectedMember.email"></span>
+            </p>
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Role</label>
+                <select
+                    x-model="editForm.role_id"
+                    class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                >
+                    <template x-for="role in roles" :key="role.id">
+                        <option :value="role.id" x-text="role.name"></option>
+                    </template>
+                </select>
+            </div>
+            <div class="flex items-center">
+                <input type="checkbox" x-model="editForm.is_active" id="is_active" class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500" />
+                <label for="is_active" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Active</label>
+            </div>
+        </div>
+    </template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showEditModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="updateMember()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Save</button>
+    </div>
+</div>
+{% endcall %}
+
+<!-- Remove Confirmation Modal -->
+{% call modal_simple('removeTeamMemberModal', 'Remove Team Member', show_var='showRemoveModal', size='sm') %}
+<div class="space-y-4">
+    <template x-if="selectedMember">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
+            Are you sure you want to remove <span class="font-semibold" x-text="selectedMember.email"></span> from the team?
+            They will lose access to this vendor.
+        </p>
+    </template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showRemoveModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="removeMember()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+        >Remove</button>
+    </div>
+</div>
+{% endcall %}
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('tenancy_static', path='vendor/js/team.js') }}"></script>
+{% endblock %}