feat: complete vendor frontend parity with admin

Phase 1 - Sidebar Refactor:
- Refactor sidebar to use collapsible sections with Alpine.js
- Add localStorage persistence for section states
- Reorganize navigation into logical groups

Phase 2 - Core JS Files:
- Add products.js: product CRUD, search, filtering, toggle active/featured
- Add orders.js: order list, status management, filtering
- Add inventory.js: stock tracking, adjust/set quantity modals
- Add customers.js: customer list, order history, messaging
- Add team.js: member invite, role management, remove members
- Add profile.js: profile editing with form validation
- Add settings.js: tabbed settings (general, marketplace, notifications)

Templates updated from placeholders to full functional UIs.
Vendor frontend now at ~90% parity with admin.

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

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

static/vendor/js/customers.js

@@ -0,0 +1,309 @@
+// static/vendor/js/customers.js
+/**
+ * Vendor customers management page logic
+ * View and manage customer relationships
+ */
+
+const vendorCustomersLog = window.LogConfig.loggers.vendorCustomers ||
+    window.LogConfig.createLogger('vendorCustomers', false);
+
+vendorCustomersLog.info('Loading...');
+
+function vendorCustomers() {
+    vendorCustomersLog.info('vendorCustomers() called');
+
+    return {
+        // Inherit base layout state
+        ...data(),
+
+        // Set page identifier
+        currentPage: 'customers',
+
+        // Loading states
+        loading: true,
+        error: '',
+        saving: false,
+
+        // Customers data
+        customers: [],
+        stats: {
+            total: 0,
+            active: 0,
+            new_this_month: 0
+        },
+
+        // Filters
+        filters: {
+            search: '',
+            status: ''
+        },
+
+        // Pagination
+        pagination: {
+            page: 1,
+            per_page: 20,
+            total: 0,
+            pages: 0
+        },
+
+        // Modal states
+        showDetailModal: false,
+        showOrdersModal: false,
+        selectedCustomer: null,
+        customerOrders: [],
+
+        // Debounce timer
+        searchTimeout: null,
+
+        // Computed: Total 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: Page numbers for pagination
+        get pageNumbers() {
+            const pages = [];
+            const totalPages = this.totalPages;
+            const current = this.pagination.page;
+
+            if (totalPages <= 7) {
+                for (let i = 1; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            } else {
+                pages.push(1);
+                if (current > 3) pages.push('...');
+                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('...');
+                pages.push(totalPages);
+            }
+            return pages;
+        },
+
+        async init() {
+            vendorCustomersLog.info('Customers init() called');
+
+            // Guard against multiple initialization
+            if (window._vendorCustomersInitialized) {
+                vendorCustomersLog.warn('Already initialized, skipping');
+                return;
+            }
+            window._vendorCustomersInitialized = true;
+
+            // Load platform settings for rows per page
+            if (window.PlatformSettings) {
+                this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
+            }
+
+            try {
+                await this.loadCustomers();
+            } catch (error) {
+                vendorCustomersLog.error('Init failed:', error);
+                this.error = 'Failed to initialize customers page';
+            }
+
+            vendorCustomersLog.info('Customers initialization complete');
+        },
+
+        /**
+         * Load customers with filtering and pagination
+         */
+        async loadCustomers() {
+            this.loading = true;
+            this.error = '';
+
+            try {
+                const params = new URLSearchParams({
+                    skip: (this.pagination.page - 1) * this.pagination.per_page,
+                    limit: this.pagination.per_page
+                });
+
+                // Add filters
+                if (this.filters.search) {
+                    params.append('search', this.filters.search);
+                }
+                if (this.filters.status) {
+                    params.append('status', this.filters.status);
+                }
+
+                const response = await apiClient.get(`/vendor/${this.vendorCode}/customers?${params.toString()}`);
+
+                this.customers = response.customers || [];
+                this.pagination.total = response.total || 0;
+                this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
+
+                // Calculate stats
+                this.stats = {
+                    total: this.pagination.total,
+                    active: this.customers.filter(c => c.is_active !== false).length,
+                    new_this_month: this.customers.filter(c => {
+                        if (!c.created_at) return false;
+                        const created = new Date(c.created_at);
+                        const now = new Date();
+                        return created.getMonth() === now.getMonth() && created.getFullYear() === now.getFullYear();
+                    }).length
+                };
+
+                vendorCustomersLog.info('Loaded customers:', this.customers.length, 'of', this.pagination.total);
+            } catch (error) {
+                vendorCustomersLog.error('Failed to load customers:', error);
+                this.error = error.message || 'Failed to load customers';
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        /**
+         * Debounced search handler
+         */
+        debouncedSearch() {
+            clearTimeout(this.searchTimeout);
+            this.searchTimeout = setTimeout(() => {
+                this.pagination.page = 1;
+                this.loadCustomers();
+            }, 300);
+        },
+
+        /**
+         * Apply filter and reload
+         */
+        applyFilter() {
+            this.pagination.page = 1;
+            this.loadCustomers();
+        },
+
+        /**
+         * Clear all filters
+         */
+        clearFilters() {
+            this.filters = {
+                search: '',
+                status: ''
+            };
+            this.pagination.page = 1;
+            this.loadCustomers();
+        },
+
+        /**
+         * View customer details
+         */
+        async viewCustomer(customer) {
+            this.loading = true;
+            try {
+                const response = await apiClient.get(`/vendor/${this.vendorCode}/customers/${customer.id}`);
+                this.selectedCustomer = response;
+                this.showDetailModal = true;
+                vendorCustomersLog.info('Loaded customer details:', customer.id);
+            } catch (error) {
+                vendorCustomersLog.error('Failed to load customer details:', error);
+                Utils.showToast(error.message || 'Failed to load customer details', 'error');
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        /**
+         * View customer orders
+         */
+        async viewCustomerOrders(customer) {
+            this.loading = true;
+            try {
+                const response = await apiClient.get(`/vendor/${this.vendorCode}/customers/${customer.id}/orders`);
+                this.selectedCustomer = customer;
+                this.customerOrders = response.orders || [];
+                this.showOrdersModal = true;
+                vendorCustomersLog.info('Loaded customer orders:', customer.id, this.customerOrders.length);
+            } catch (error) {
+                vendorCustomersLog.error('Failed to load customer orders:', error);
+                Utils.showToast(error.message || 'Failed to load customer orders', 'error');
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        /**
+         * Send message to customer
+         */
+        messageCustomer(customer) {
+            window.location.href = `/vendor/${this.vendorCode}/messages?customer=${customer.id}`;
+        },
+
+        /**
+         * Get customer initials for avatar
+         */
+        getInitials(customer) {
+            const first = customer.first_name || '';
+            const last = customer.last_name || '';
+            return (first.charAt(0) + last.charAt(0)).toUpperCase() || '?';
+        },
+
+        /**
+         * Format date for display
+         */
+        formatDate(dateStr) {
+            if (!dateStr) return '-';
+            return new Date(dateStr).toLocaleDateString('de-DE', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric'
+            });
+        },
+
+        /**
+         * Format price for display
+         */
+        formatPrice(cents) {
+            if (!cents && cents !== 0) return '-';
+            return new Intl.NumberFormat('de-DE', {
+                style: 'currency',
+                currency: 'EUR'
+            }).format(cents / 100);
+        },
+
+        /**
+         * Pagination: Previous page
+         */
+        previousPage() {
+            if (this.pagination.page > 1) {
+                this.pagination.page--;
+                this.loadCustomers();
+            }
+        },
+
+        /**
+         * Pagination: Next page
+         */
+        nextPage() {
+            if (this.pagination.page < this.totalPages) {
+                this.pagination.page++;
+                this.loadCustomers();
+            }
+        },
+
+        /**
+         * Pagination: Go to specific page
+         */
+        goToPage(pageNum) {
+            if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
+                this.pagination.page = pageNum;
+                this.loadCustomers();
+            }
+        }
+    };
+}

static/vendor/js/init-alpine.js

@@ -9,6 +9,36 @@ const vendorLog = window.LogConfig.log;
 
 console.log('[VENDOR INIT-ALPINE] Loading...');
 
+// Sidebar section state persistence
+const VENDOR_SIDEBAR_STORAGE_KEY = 'vendor_sidebar_sections';
+
+function getVendorSidebarSectionsFromStorage() {
+    try {
+        const stored = localStorage.getItem(VENDOR_SIDEBAR_STORAGE_KEY);
+        if (stored) {
+            return JSON.parse(stored);
+        }
+    } catch (e) {
+        console.warn('[VENDOR INIT-ALPINE] Failed to load sidebar state from localStorage:', e);
+    }
+    // Default: all sections open
+    return {
+        products: true,
+        sales: true,
+        customers: true,
+        shop: true,
+        account: true
+    };
+}
+
+function saveVendorSidebarSectionsToStorage(sections) {
+    try {
+        localStorage.setItem(VENDOR_SIDEBAR_STORAGE_KEY, JSON.stringify(sections));
+    } catch (e) {
+        console.warn('[VENDOR INIT-ALPINE] Failed to save sidebar state to localStorage:', e);
+    }
+}
+
 function data() {
     console.log('[VENDOR INIT-ALPINE] data() function called');
     return {
@@ -21,6 +51,9 @@ function data() {
         vendor: null,
         vendorCode: null,
 
+        // Sidebar collapsible sections state
+        openSections: getVendorSidebarSectionsFromStorage(),
+
         init() {
             // Set current page from URL
             const path = window.location.pathname;
@@ -109,6 +142,12 @@ function data() {
             localStorage.setItem('theme', this.dark ? 'dark' : 'light');
         },
 
+        // Sidebar section toggle with persistence
+        toggleSection(section) {
+            this.openSections[section] = !this.openSections[section];
+            saveVendorSidebarSectionsToStorage(this.openSections);
+        },
+
         async handleLogout() {
             console.log('🚪 Logging out vendor user...');
 

static/vendor/js/inventory.js

@@ -0,0 +1,365 @@
+// static/vendor/js/inventory.js
+/**
+ * Vendor inventory management page logic
+ * View and manage stock levels
+ */
+
+const vendorInventoryLog = window.LogConfig.loggers.vendorInventory ||
+    window.LogConfig.createLogger('vendorInventory', false);
+
+vendorInventoryLog.info('Loading...');
+
+function vendorInventory() {
+    vendorInventoryLog.info('vendorInventory() called');
+
+    return {
+        // Inherit base layout state
+        ...data(),
+
+        // Set page identifier
+        currentPage: 'inventory',
+
+        // Loading states
+        loading: true,
+        error: '',
+        saving: false,
+
+        // Inventory data
+        inventory: [],
+        stats: {
+            total_entries: 0,
+            total_quantity: 0,
+            low_stock_count: 0,
+            out_of_stock_count: 0
+        },
+
+        // Filters
+        filters: {
+            search: '',
+            location: '',
+            low_stock: ''
+        },
+
+        // Available locations for filter dropdown
+        locations: [],
+
+        // Pagination
+        pagination: {
+            page: 1,
+            per_page: 20,
+            total: 0,
+            pages: 0
+        },
+
+        // Modal states
+        showAdjustModal: false,
+        showSetModal: false,
+        selectedItem: null,
+
+        // Form data
+        adjustForm: {
+            quantity: 0,
+            reason: ''
+        },
+        setForm: {
+            quantity: 0
+        },
+
+        // Debounce timer
+        searchTimeout: null,
+
+        // Computed: Total 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: Page numbers for pagination
+        get pageNumbers() {
+            const pages = [];
+            const totalPages = this.totalPages;
+            const current = this.pagination.page;
+
+            if (totalPages <= 7) {
+                for (let i = 1; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            } else {
+                pages.push(1);
+                if (current > 3) pages.push('...');
+                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('...');
+                pages.push(totalPages);
+            }
+            return pages;
+        },
+
+        async init() {
+            vendorInventoryLog.info('Inventory init() called');
+
+            // Guard against multiple initialization
+            if (window._vendorInventoryInitialized) {
+                vendorInventoryLog.warn('Already initialized, skipping');
+                return;
+            }
+            window._vendorInventoryInitialized = true;
+
+            // Load platform settings for rows per page
+            if (window.PlatformSettings) {
+                this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
+            }
+
+            try {
+                await this.loadInventory();
+            } catch (error) {
+                vendorInventoryLog.error('Init failed:', error);
+                this.error = 'Failed to initialize inventory page';
+            }
+
+            vendorInventoryLog.info('Inventory initialization complete');
+        },
+
+        /**
+         * Load inventory with filtering and pagination
+         */
+        async loadInventory() {
+            this.loading = true;
+            this.error = '';
+
+            try {
+                const params = new URLSearchParams({
+                    skip: (this.pagination.page - 1) * this.pagination.per_page,
+                    limit: this.pagination.per_page
+                });
+
+                // Add filters
+                if (this.filters.search) {
+                    params.append('search', this.filters.search);
+                }
+                if (this.filters.location) {
+                    params.append('location', this.filters.location);
+                }
+                if (this.filters.low_stock) {
+                    params.append('low_stock', this.filters.low_stock);
+                }
+
+                const response = await apiClient.get(`/vendor/${this.vendorCode}/inventory?${params.toString()}`);
+
+                this.inventory = response.items || [];
+                this.pagination.total = response.total || 0;
+                this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
+
+                // Extract unique locations
+                this.extractLocations();
+
+                // Calculate stats
+                this.calculateStats();
+
+                vendorInventoryLog.info('Loaded inventory:', this.inventory.length, 'of', this.pagination.total);
+            } catch (error) {
+                vendorInventoryLog.error('Failed to load inventory:', error);
+                this.error = error.message || 'Failed to load inventory';
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        /**
+         * Extract unique locations from inventory
+         */
+        extractLocations() {
+            const locationSet = new Set(this.inventory.map(i => i.location).filter(Boolean));
+            this.locations = Array.from(locationSet).sort();
+        },
+
+        /**
+         * Calculate inventory statistics
+         */
+        calculateStats() {
+            this.stats = {
+                total_entries: this.pagination.total,
+                total_quantity: this.inventory.reduce((sum, i) => sum + (i.quantity || 0), 0),
+                low_stock_count: this.inventory.filter(i => i.quantity > 0 && i.quantity <= (i.low_stock_threshold || 5)).length,
+                out_of_stock_count: this.inventory.filter(i => i.quantity <= 0).length
+            };
+        },
+
+        /**
+         * Debounced search handler
+         */
+        debouncedSearch() {
+            clearTimeout(this.searchTimeout);
+            this.searchTimeout = setTimeout(() => {
+                this.pagination.page = 1;
+                this.loadInventory();
+            }, 300);
+        },
+
+        /**
+         * Apply filter and reload
+         */
+        applyFilter() {
+            this.pagination.page = 1;
+            this.loadInventory();
+        },
+
+        /**
+         * Clear all filters
+         */
+        clearFilters() {
+            this.filters = {
+                search: '',
+                location: '',
+                low_stock: ''
+            };
+            this.pagination.page = 1;
+            this.loadInventory();
+        },
+
+        /**
+         * Open adjust stock modal
+         */
+        openAdjustModal(item) {
+            this.selectedItem = item;
+            this.adjustForm = {
+                quantity: 0,
+                reason: ''
+            };
+            this.showAdjustModal = true;
+        },
+
+        /**
+         * Open set quantity modal
+         */
+        openSetModal(item) {
+            this.selectedItem = item;
+            this.setForm = {
+                quantity: item.quantity || 0
+            };
+            this.showSetModal = true;
+        },
+
+        /**
+         * Execute stock adjustment
+         */
+        async executeAdjust() {
+            if (!this.selectedItem || this.adjustForm.quantity === 0) return;
+
+            this.saving = true;
+            try {
+                await apiClient.post(`/vendor/${this.vendorCode}/inventory/adjust`, {
+                    product_id: this.selectedItem.product_id,
+                    location: this.selectedItem.location,
+                    quantity: this.adjustForm.quantity,
+                    reason: this.adjustForm.reason || null
+                });
+
+                vendorInventoryLog.info('Adjusted inventory:', this.selectedItem.id);
+
+                this.showAdjustModal = false;
+                this.selectedItem = null;
+
+                Utils.showToast('Stock adjusted successfully', 'success');
+
+                await this.loadInventory();
+            } catch (error) {
+                vendorInventoryLog.error('Failed to adjust inventory:', error);
+                Utils.showToast(error.message || 'Failed to adjust stock', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        /**
+         * Execute set quantity
+         */
+        async executeSet() {
+            if (!this.selectedItem || this.setForm.quantity < 0) return;
+
+            this.saving = true;
+            try {
+                await apiClient.post(`/vendor/${this.vendorCode}/inventory/set`, {
+                    product_id: this.selectedItem.product_id,
+                    location: this.selectedItem.location,
+                    quantity: this.setForm.quantity
+                });
+
+                vendorInventoryLog.info('Set inventory quantity:', this.selectedItem.id);
+
+                this.showSetModal = false;
+                this.selectedItem = null;
+
+                Utils.showToast('Quantity set successfully', 'success');
+
+                await this.loadInventory();
+            } catch (error) {
+                vendorInventoryLog.error('Failed to set inventory:', error);
+                Utils.showToast(error.message || 'Failed to set quantity', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        /**
+         * Get stock status class
+         */
+        getStockStatus(item) {
+            if (item.quantity <= 0) return 'out';
+            if (item.quantity <= (item.low_stock_threshold || 5)) return 'low';
+            return 'ok';
+        },
+
+        /**
+         * Format number with locale
+         */
+        formatNumber(num) {
+            if (num === null || num === undefined) return '0';
+            return new Intl.NumberFormat('en-US').format(num);
+        },
+
+        /**
+         * Pagination: Previous page
+         */
+        previousPage() {
+            if (this.pagination.page > 1) {
+                this.pagination.page--;
+                this.loadInventory();
+            }
+        },
+
+        /**
+         * Pagination: Next page
+         */
+        nextPage() {
+            if (this.pagination.page < this.totalPages) {
+                this.pagination.page++;
+                this.loadInventory();
+            }
+        },
+
+        /**
+         * Pagination: Go to specific page
+         */
+        goToPage(pageNum) {
+            if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
+                this.pagination.page = pageNum;
+                this.loadInventory();
+            }
+        }
+    };
+}

static/vendor/js/orders.js

@@ -0,0 +1,354 @@
+// static/vendor/js/orders.js
+/**
+ * Vendor orders management page logic
+ * View and manage vendor's orders
+ */
+
+const vendorOrdersLog = window.LogConfig.loggers.vendorOrders ||
+    window.LogConfig.createLogger('vendorOrders', false);
+
+vendorOrdersLog.info('Loading...');
+
+function vendorOrders() {
+    vendorOrdersLog.info('vendorOrders() called');
+
+    return {
+        // Inherit base layout state
+        ...data(),
+
+        // Set page identifier
+        currentPage: 'orders',
+
+        // Loading states
+        loading: true,
+        error: '',
+        saving: false,
+
+        // Orders data
+        orders: [],
+        stats: {
+            total: 0,
+            pending: 0,
+            processing: 0,
+            completed: 0,
+            cancelled: 0
+        },
+
+        // Order statuses for filter and display
+        statuses: [
+            { value: 'pending', label: 'Pending', color: 'yellow' },
+            { value: 'processing', label: 'Processing', color: 'blue' },
+            { value: 'shipped', label: 'Shipped', color: 'indigo' },
+            { value: 'delivered', label: 'Delivered', color: 'green' },
+            { value: 'completed', label: 'Completed', color: 'green' },
+            { value: 'cancelled', label: 'Cancelled', color: 'red' },
+            { value: 'refunded', label: 'Refunded', color: 'gray' }
+        ],
+
+        // Filters
+        filters: {
+            search: '',
+            status: '',
+            date_from: '',
+            date_to: ''
+        },
+
+        // Pagination
+        pagination: {
+            page: 1,
+            per_page: 20,
+            total: 0,
+            pages: 0
+        },
+
+        // Modal states
+        showDetailModal: false,
+        showStatusModal: false,
+        selectedOrder: null,
+        newStatus: '',
+
+        // Debounce timer
+        searchTimeout: null,
+
+        // Computed: Total 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: Page numbers for pagination
+        get pageNumbers() {
+            const pages = [];
+            const totalPages = this.totalPages;
+            const current = this.pagination.page;
+
+            if (totalPages <= 7) {
+                for (let i = 1; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            } else {
+                pages.push(1);
+                if (current > 3) pages.push('...');
+                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('...');
+                pages.push(totalPages);
+            }
+            return pages;
+        },
+
+        async init() {
+            vendorOrdersLog.info('Orders init() called');
+
+            // Guard against multiple initialization
+            if (window._vendorOrdersInitialized) {
+                vendorOrdersLog.warn('Already initialized, skipping');
+                return;
+            }
+            window._vendorOrdersInitialized = true;
+
+            // Load platform settings for rows per page
+            if (window.PlatformSettings) {
+                this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
+            }
+
+            try {
+                await this.loadOrders();
+            } catch (error) {
+                vendorOrdersLog.error('Init failed:', error);
+                this.error = 'Failed to initialize orders page';
+            }
+
+            vendorOrdersLog.info('Orders initialization complete');
+        },
+
+        /**
+         * Load orders with filtering and pagination
+         */
+        async loadOrders() {
+            this.loading = true;
+            this.error = '';
+
+            try {
+                const params = new URLSearchParams({
+                    skip: (this.pagination.page - 1) * this.pagination.per_page,
+                    limit: this.pagination.per_page
+                });
+
+                // Add filters
+                if (this.filters.search) {
+                    params.append('search', this.filters.search);
+                }
+                if (this.filters.status) {
+                    params.append('status', this.filters.status);
+                }
+                if (this.filters.date_from) {
+                    params.append('date_from', this.filters.date_from);
+                }
+                if (this.filters.date_to) {
+                    params.append('date_to', this.filters.date_to);
+                }
+
+                const response = await apiClient.get(`/vendor/${this.vendorCode}/orders?${params.toString()}`);
+
+                this.orders = response.orders || [];
+                this.pagination.total = response.total || 0;
+                this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
+
+                // Calculate stats
+                this.calculateStats();
+
+                vendorOrdersLog.info('Loaded orders:', this.orders.length, 'of', this.pagination.total);
+            } catch (error) {
+                vendorOrdersLog.error('Failed to load orders:', error);
+                this.error = error.message || 'Failed to load orders';
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        /**
+         * Calculate order statistics
+         */
+        calculateStats() {
+            this.stats = {
+                total: this.pagination.total,
+                pending: this.orders.filter(o => o.status === 'pending').length,
+                processing: this.orders.filter(o => o.status === 'processing').length,
+                completed: this.orders.filter(o => ['completed', 'delivered'].includes(o.status)).length,
+                cancelled: this.orders.filter(o => o.status === 'cancelled').length
+            };
+        },
+
+        /**
+         * Debounced search handler
+         */
+        debouncedSearch() {
+            clearTimeout(this.searchTimeout);
+            this.searchTimeout = setTimeout(() => {
+                this.pagination.page = 1;
+                this.loadOrders();
+            }, 300);
+        },
+
+        /**
+         * Apply filter and reload
+         */
+        applyFilter() {
+            this.pagination.page = 1;
+            this.loadOrders();
+        },
+
+        /**
+         * Clear all filters
+         */
+        clearFilters() {
+            this.filters = {
+                search: '',
+                status: '',
+                date_from: '',
+                date_to: ''
+            };
+            this.pagination.page = 1;
+            this.loadOrders();
+        },
+
+        /**
+         * View order details
+         */
+        async viewOrder(order) {
+            this.loading = true;
+            try {
+                const response = await apiClient.get(`/vendor/${this.vendorCode}/orders/${order.id}`);
+                this.selectedOrder = response;
+                this.showDetailModal = true;
+                vendorOrdersLog.info('Loaded order details:', order.id);
+            } catch (error) {
+                vendorOrdersLog.error('Failed to load order details:', error);
+                Utils.showToast(error.message || 'Failed to load order details', 'error');
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        /**
+         * Open status change modal
+         */
+        openStatusModal(order) {
+            this.selectedOrder = order;
+            this.newStatus = order.status;
+            this.showStatusModal = true;
+        },
+
+        /**
+         * Update order status
+         */
+        async updateStatus() {
+            if (!this.selectedOrder || !this.newStatus) return;
+
+            this.saving = true;
+            try {
+                await apiClient.put(`/vendor/${this.vendorCode}/orders/${this.selectedOrder.id}/status`, {
+                    status: this.newStatus
+                });
+
+                Utils.showToast('Order status updated', 'success');
+                vendorOrdersLog.info('Updated order status:', this.selectedOrder.id, this.newStatus);
+
+                this.showStatusModal = false;
+                this.selectedOrder = null;
+                await this.loadOrders();
+            } catch (error) {
+                vendorOrdersLog.error('Failed to update status:', error);
+                Utils.showToast(error.message || 'Failed to update status', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        /**
+         * Get status color class
+         */
+        getStatusColor(status) {
+            const statusObj = this.statuses.find(s => s.value === status);
+            return statusObj ? statusObj.color : 'gray';
+        },
+
+        /**
+         * Get status label
+         */
+        getStatusLabel(status) {
+            const statusObj = this.statuses.find(s => s.value === status);
+            return statusObj ? statusObj.label : status;
+        },
+
+        /**
+         * Format price for display
+         */
+        formatPrice(cents) {
+            if (!cents && cents !== 0) return '-';
+            return new Intl.NumberFormat('de-DE', {
+                style: 'currency',
+                currency: 'EUR'
+            }).format(cents / 100);
+        },
+
+        /**
+         * Format date for display
+         */
+        formatDate(dateStr) {
+            if (!dateStr) return '-';
+            return new Date(dateStr).toLocaleDateString('de-DE', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+        },
+
+        /**
+         * Pagination: Previous page
+         */
+        previousPage() {
+            if (this.pagination.page > 1) {
+                this.pagination.page--;
+                this.loadOrders();
+            }
+        },
+
+        /**
+         * Pagination: Next page
+         */
+        nextPage() {
+            if (this.pagination.page < this.totalPages) {
+                this.pagination.page++;
+                this.loadOrders();
+            }
+        },
+
+        /**
+         * Pagination: Go to specific page
+         */
+        goToPage(pageNum) {
+            if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
+                this.pagination.page = pageNum;
+                this.loadOrders();
+            }
+        }
+    };
+}

static/vendor/js/products.js

@@ -0,0 +1,340 @@
+// static/vendor/js/products.js
+/**
+ * Vendor products management page logic
+ * View, edit, and manage vendor's product catalog
+ */
+
+const vendorProductsLog = window.LogConfig.loggers.vendorProducts ||
+    window.LogConfig.createLogger('vendorProducts', false);
+
+vendorProductsLog.info('Loading...');
+
+function vendorProducts() {
+    vendorProductsLog.info('vendorProducts() called');
+
+    return {
+        // Inherit base layout state
+        ...data(),
+
+        // Set page identifier
+        currentPage: 'products',
+
+        // Loading states
+        loading: true,
+        error: '',
+        saving: false,
+
+        // Products data
+        products: [],
+        stats: {
+            total: 0,
+            active: 0,
+            inactive: 0,
+            featured: 0
+        },
+
+        // Filters
+        filters: {
+            search: '',
+            status: '',  // 'active', 'inactive', ''
+            featured: '' // 'true', 'false', ''
+        },
+
+        // Pagination
+        pagination: {
+            page: 1,
+            per_page: 20,
+            total: 0,
+            pages: 0
+        },
+
+        // Modal states
+        showDeleteModal: false,
+        showDetailModal: false,
+        selectedProduct: null,
+
+        // Debounce timer
+        searchTimeout: null,
+
+        // Computed: Total 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: Page numbers for pagination
+        get pageNumbers() {
+            const pages = [];
+            const totalPages = this.totalPages;
+            const current = this.pagination.page;
+
+            if (totalPages <= 7) {
+                for (let i = 1; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            } else {
+                pages.push(1);
+                if (current > 3) pages.push('...');
+                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('...');
+                pages.push(totalPages);
+            }
+            return pages;
+        },
+
+        async init() {
+            vendorProductsLog.info('Products init() called');
+
+            // Guard against multiple initialization
+            if (window._vendorProductsInitialized) {
+                vendorProductsLog.warn('Already initialized, skipping');
+                return;
+            }
+            window._vendorProductsInitialized = true;
+
+            // Load platform settings for rows per page
+            if (window.PlatformSettings) {
+                this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
+            }
+
+            try {
+                await this.loadProducts();
+            } catch (error) {
+                vendorProductsLog.error('Init failed:', error);
+                this.error = 'Failed to initialize products page';
+            }
+
+            vendorProductsLog.info('Products initialization complete');
+        },
+
+        /**
+         * Load products with filtering and pagination
+         */
+        async loadProducts() {
+            this.loading = true;
+            this.error = '';
+
+            try {
+                const params = new URLSearchParams({
+                    skip: (this.pagination.page - 1) * this.pagination.per_page,
+                    limit: this.pagination.per_page
+                });
+
+                // Add filters
+                if (this.filters.search) {
+                    params.append('search', this.filters.search);
+                }
+                if (this.filters.status) {
+                    params.append('is_active', this.filters.status === 'active');
+                }
+                if (this.filters.featured) {
+                    params.append('is_featured', this.filters.featured === 'true');
+                }
+
+                const response = await apiClient.get(`/vendor/${this.vendorCode}/products?${params.toString()}`);
+
+                this.products = response.products || [];
+                this.pagination.total = response.total || 0;
+                this.pagination.pages = Math.ceil(this.pagination.total / this.pagination.per_page);
+
+                // Calculate stats from response or products
+                this.stats = {
+                    total: response.total || this.products.length,
+                    active: this.products.filter(p => p.is_active).length,
+                    inactive: this.products.filter(p => !p.is_active).length,
+                    featured: this.products.filter(p => p.is_featured).length
+                };
+
+                vendorProductsLog.info('Loaded products:', this.products.length, 'of', this.pagination.total);
+            } catch (error) {
+                vendorProductsLog.error('Failed to load products:', error);
+                this.error = error.message || 'Failed to load products';
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        /**
+         * Debounced search handler
+         */
+        debouncedSearch() {
+            clearTimeout(this.searchTimeout);
+            this.searchTimeout = setTimeout(() => {
+                this.pagination.page = 1;
+                this.loadProducts();
+            }, 300);
+        },
+
+        /**
+         * Apply filter and reload
+         */
+        applyFilter() {
+            this.pagination.page = 1;
+            this.loadProducts();
+        },
+
+        /**
+         * Clear all filters
+         */
+        clearFilters() {
+            this.filters = {
+                search: '',
+                status: '',
+                featured: ''
+            };
+            this.pagination.page = 1;
+            this.loadProducts();
+        },
+
+        /**
+         * Toggle product active status
+         */
+        async toggleActive(product) {
+            this.saving = true;
+            try {
+                await apiClient.put(`/vendor/${this.vendorCode}/products/${product.id}/toggle-active`);
+                product.is_active = !product.is_active;
+                Utils.showToast(
+                    product.is_active ? 'Product activated' : 'Product deactivated',
+                    'success'
+                );
+                vendorProductsLog.info('Toggled product active:', product.id, product.is_active);
+            } catch (error) {
+                vendorProductsLog.error('Failed to toggle active:', error);
+                Utils.showToast(error.message || 'Failed to update product', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        /**
+         * Toggle product featured status
+         */
+        async toggleFeatured(product) {
+            this.saving = true;
+            try {
+                await apiClient.put(`/vendor/${this.vendorCode}/products/${product.id}/toggle-featured`);
+                product.is_featured = !product.is_featured;
+                Utils.showToast(
+                    product.is_featured ? 'Product marked as featured' : 'Product unmarked as featured',
+                    'success'
+                );
+                vendorProductsLog.info('Toggled product featured:', product.id, product.is_featured);
+            } catch (error) {
+                vendorProductsLog.error('Failed to toggle featured:', error);
+                Utils.showToast(error.message || 'Failed to update product', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        /**
+         * View product details
+         */
+        viewProduct(product) {
+            this.selectedProduct = product;
+            this.showDetailModal = true;
+        },
+
+        /**
+         * Confirm delete product
+         */
+        confirmDelete(product) {
+            this.selectedProduct = product;
+            this.showDeleteModal = true;
+        },
+
+        /**
+         * Execute delete product
+         */
+        async deleteProduct() {
+            if (!this.selectedProduct) return;
+
+            this.saving = true;
+            try {
+                await apiClient.delete(`/vendor/${this.vendorCode}/products/${this.selectedProduct.id}`);
+                Utils.showToast('Product deleted successfully', 'success');
+                vendorProductsLog.info('Deleted product:', this.selectedProduct.id);
+
+                this.showDeleteModal = false;
+                this.selectedProduct = null;
+                await this.loadProducts();
+            } catch (error) {
+                vendorProductsLog.error('Failed to delete product:', error);
+                Utils.showToast(error.message || 'Failed to delete product', 'error');
+            } finally {
+                this.saving = false;
+            }
+        },
+
+        /**
+         * Navigate to edit product page
+         */
+        editProduct(product) {
+            window.location.href = `/vendor/${this.vendorCode}/products/${product.id}/edit`;
+        },
+
+        /**
+         * Navigate to create product page
+         */
+        createProduct() {
+            window.location.href = `/vendor/${this.vendorCode}/products/create`;
+        },
+
+        /**
+         * Format price for display
+         */
+        formatPrice(cents) {
+            if (!cents && cents !== 0) return '-';
+            return new Intl.NumberFormat('de-DE', {
+                style: 'currency',
+                currency: 'EUR'
+            }).format(cents / 100);
+        },
+
+        /**
+         * Pagination: Previous page
+         */
+        previousPage() {
+            if (this.pagination.page > 1) {
+                this.pagination.page--;
+                this.loadProducts();
+            }
+        },
+
+        /**
+         * Pagination: Next page
+         */
+        nextPage() {
+            if (this.pagination.page < this.totalPages) {
+                this.pagination.page++;
+                this.loadProducts();
+            }
+        },
+
+        /**
+         * Pagination: Go to specific page
+         */
+        goToPage(pageNum) {
+            if (pageNum !== '...' && pageNum >= 1 && pageNum <= this.totalPages) {
+                this.pagination.page = pageNum;
+                this.loadProducts();
+            }
+        }
+    };
+}

static/vendor/js/profile.js

@@ -0,0 +1,190 @@
+// 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;
+
+            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/${this.vendorCode}/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/${this.vendorCode}/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 = {};
+        }
+    };
+}

static/vendor/js/settings.js

@@ -0,0 +1,178 @@
+// 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
+        settings: null,
+
+        // Active section
+        activeSection: 'general',
+
+        // Sections for navigation
+        sections: [
+            { id: 'general', label: 'General', icon: 'cog' },
+            { id: 'marketplace', label: 'Marketplace', icon: 'shopping-cart' },
+            { id: 'notifications', label: 'Notifications', icon: 'bell' }
+        ],
+
+        // Forms for different sections
+        generalForm: {
+            subdomain: '',
+            is_active: true
+        },
+
+        marketplaceForm: {
+            letzshop_csv_url_fr: '',
+            letzshop_csv_url_en: '',
+            letzshop_csv_url_de: ''
+        },
+
+        notificationForm: {
+            email_notifications: true,
+            order_notifications: true,
+            marketing_emails: false
+        },
+
+        // Track changes
+        hasChanges: false,
+
+        async init() {
+            vendorSettingsLog.info('Settings init() called');
+
+            // Guard against multiple initialization
+            if (window._vendorSettingsInitialized) {
+                vendorSettingsLog.warn('Already initialized, skipping');
+                return;
+            }
+            window._vendorSettingsInitialized = true;
+
+            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/${this.vendorCode}/settings`);
+
+                this.settings = response;
+
+                // Populate forms
+                this.generalForm = {
+                    subdomain: response.subdomain || '',
+                    is_active: response.is_active !== false
+                };
+
+                this.marketplaceForm = {
+                    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 || ''
+                };
+
+                this.hasChanges = 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 form as changed
+         */
+        markChanged() {
+            this.hasChanges = true;
+        },
+
+        /**
+         * Save marketplace settings
+         */
+        async saveMarketplaceSettings() {
+            this.saving = true;
+            try {
+                await apiClient.put(`/vendor/${this.vendorCode}/settings/marketplace`, this.marketplaceForm);
+
+                Utils.showToast('Marketplace settings saved', 'success');
+                vendorSettingsLog.info('Marketplace settings updated');
+
+                this.hasChanges = 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;
+        }
+    };
+}

static/vendor/js/team.js

@@ -0,0 +1,268 @@
+// 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;
+
+            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/${this.vendorCode}/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/${this.vendorCode}/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/${this.vendorCode}/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/${this.vendorCode}/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 '-';
+            return new Date(dateStr).toLocaleDateString('de-DE', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric'
+            });
+        }
+    };
+}