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>
2026-01-01 15:34:38 +01:00
parent d803e1c911
commit 463e1b67d5
18 changed files with 4100 additions and 374 deletions
--- a/static/vendor/js/profile.js
+++ b/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 = {};
+        }
+    };
+}