sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

migrating vendor frontend to new architecture

Browse Source
This commit is contained in:
Samir Boulahtit
2025-10-28 22:58:55 +01:00
parent b0cc0385f8
commit cd5097fc04
28 changed files with 312 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
static/admin/js/components.js
View File

@@ -1,14 +1,8 @@
// static/admin/js/components.js
// Setup logging
const COMPONENTS_LOG_LEVEL = 3;
const componentsLog = {
error: (...args) => COMPONENTS_LOG_LEVEL >= 1 && console.error('❌ [COMPONENTS ERROR]', ...args),
warn: (...args) => COMPONENTS_LOG_LEVEL >= 2 && console.warn('⚠️ [COMPONENTS WARN]', ...args),
info: (...args) => COMPONENTS_LOG_LEVEL >= 3 && console.info('ℹ️ [COMPONENTS INFO]', ...args),
debug: (...args) => COMPONENTS_LOG_LEVEL >= 4 && console.log('🔍 [COMPONENTS DEBUG]', ...args)
};
// ✅ Use centralized logger - ONE LINE!
// Create custom logger for components page
const componentsLog = window.LogConfig.createLogger('COMPONENTS');
/**
* Components Library Alpine.js Component
@@ -132,7 +126,7 @@ function adminComponents() {
}
componentsLog.debug('Code copied to clipboard');
} catch (error) {
componentsLog.error('Failed to copy code:', error);
window.LogConfig.logError(error, 'Copy Code');
if (typeof Utils !== 'undefined' && Utils.showToast) {
Utils.showToast('Failed to copy code', 'error');
}
@@ -150,6 +144,8 @@ function adminComponents() {
info: 'Here is some information.'
};
componentsLog.info('Showing toast example:', type);
if (typeof Utils !== 'undefined' && Utils.showToast) {
Utils.showToast(messages[type] || messages.info, type);
} else {
@@ -170,6 +166,7 @@ function adminComponents() {
}
componentsLog.info('Initializing charts...');
componentsLog.time('Chart Initialization');
// Pie Chart
const pieCanvas = document.getElementById('examplePieChart');
@@ -284,9 +281,10 @@ function adminComponents() {
componentsLog.debug('Bar chart initialized');
}
componentsLog.timeEnd('Chart Initialization');
componentsLog.info('All charts initialized successfully');
} catch (error) {
componentsLog.error('Error initializing charts:', error);
window.LogConfig.logError(error, 'Initialize Charts');
}
}
};

63
static/admin/js/dashboard.js
View File

@@ -1,14 +1,7 @@
// static/admin/js/dashboard.js
// Log levels: 0 = None, 1 = Error, 2 = Warning, 3 = Info, 4 = Debug
const DASHBOARD_LOG_LEVEL = 3; // Set to 3 for production, 4 for full debugging
const dashLog = {
error: (...args) => DASHBOARD_LOG_LEVEL >= 1 && console.error('❌ [DASHBOARD ERROR]', ...args),
warn: (...args) => DASHBOARD_LOG_LEVEL >= 2 && console.warn('⚠️ [DASHBOARD WARN]', ...args),
info: (...args) => DASHBOARD_LOG_LEVEL >= 3 && console.info('ℹ️ [DASHBOARD INFO]', ...args),
debug: (...args) => DASHBOARD_LOG_LEVEL >= 4 && console.log('🔍 [DASHBOARD DEBUG]', ...args)
};
// ✅ Use centralized logger - ONE LINE!
const dashLog = window.LogConfig.loggers.dashboard;
function adminDashboard() {
return {
@@ -49,7 +42,11 @@ function adminDashboard() {
window._dashboardInitialized = true;
dashLog.debug('Dashboard initialization flag set');
const startTime = performance.now();
await this.loadDashboard();
const duration = performance.now() - startTime;
window.LogConfig.logPerformance('Dashboard Init', duration);
dashLog.info('=== DASHBOARD INITIALIZATION COMPLETE ===');
},
@@ -63,8 +60,8 @@ function adminDashboard() {
dashLog.debug('Dashboard state: loading=true, error=null');
try {
dashLog.info('Starting parallel data fetch...');
const startTime = Date.now();
dashLog.group('Loading dashboard data');
const startTime = performance.now();
// Load stats and vendors in parallel
await Promise.all([
@@ -72,17 +69,14 @@ function adminDashboard() {
this.loadRecentVendors()
]);
const duration = Date.now() - startTime;
const duration = performance.now() - startTime;
dashLog.groupEnd();
window.LogConfig.logPerformance('Load Dashboard Data', duration);
dashLog.info(`Dashboard data loaded successfully in ${duration}ms`);
} catch (error) {
dashLog.error('Dashboard load error:', error);
dashLog.error('Error details:', {
message: error.message,
name: error.name,
stack: error.stack
});
window.LogConfig.logError(error, 'Dashboard Load');
this.error = error.message;
Utils.showToast('Failed to load dashboard data', 'error');
@@ -98,15 +92,17 @@ function adminDashboard() {
*/
async loadStats() {
dashLog.info('Loading platform statistics...');
dashLog.debug('API endpoint: /admin/dashboard/stats/platform');
const url = '/admin/dashboard/stats/platform';
window.LogConfig.logApiCall('GET', url, null, 'request');
try {
const startTime = Date.now();
const data = await apiClient.get('/admin/dashboard/stats/platform');
const duration = Date.now() - startTime;
const startTime = performance.now();
const data = await apiClient.get(url);
const duration = performance.now() - startTime;
dashLog.info(`Stats loaded in ${duration}ms`);
dashLog.debug('Raw stats data:', data);
window.LogConfig.logApiCall('GET', url, data, 'response');
window.LogConfig.logPerformance('Load Stats', duration);
// Map API response to stats cards
this.stats = {
@@ -129,18 +125,17 @@ function adminDashboard() {
*/
async loadRecentVendors() {
dashLog.info('Loading recent vendors...');
dashLog.debug('API endpoint: /admin/dashboard');
const url = '/admin/dashboard';
window.LogConfig.logApiCall('GET', url, null, 'request');
try {
const startTime = Date.now();
const data = await apiClient.get('/admin/dashboard');
const duration = Date.now() - startTime;
const startTime = performance.now();
const data = await apiClient.get(url);
const duration = performance.now() - startTime;
dashLog.info(`Recent vendors loaded in ${duration}ms`);
dashLog.debug('Vendors data:', {
count: data.recent_vendors?.length || 0,
hasData: !!data.recent_vendors
});
window.LogConfig.logApiCall('GET', url, data, 'response');
window.LogConfig.logPerformance('Load Recent Vendors', duration);
this.recentVendors = data.recent_vendors || [];

21
static/admin/js/icons-page.js
View File

@@ -1,14 +1,8 @@
// static/admin/js/icons-page.js
// Setup logging
const ICONS_PAGE_LOG_LEVEL = 3;
const iconsLog = {
error: (...args) => ICONS_PAGE_LOG_LEVEL >= 1 && console.error('❌ [ICONS PAGE ERROR]', ...args),
warn: (...args) => ICONS_PAGE_LOG_LEVEL >= 2 && console.warn('⚠️ [ICONS PAGE WARN]', ...args),
info: (...args) => ICONS_PAGE_LOG_LEVEL >= 3 && console.info('ℹ️ [ICONS PAGE INFO]', ...args),
debug: (...args) => ICONS_PAGE_LOG_LEVEL >= 4 && console.log('🔍 [ICONS PAGE DEBUG]', ...args)
};
// ✅ Use centralized logger - ONE LINE!
// Create custom logger since icons page is not pre-configured
const iconsLog = window.LogConfig.createLogger('ICONS');
/**
* Icons Browser Alpine.js Component
@@ -60,9 +54,14 @@ function adminIcons() {
}
window._iconsPageInitialized = true;
const startTime = performance.now();
// Load icons from global Icons object
this.loadIcons();
const duration = performance.now() - startTime;
window.LogConfig.logPerformance('Icons Page Init', duration);
iconsLog.info('=== ICONS PAGE INITIALIZATION COMPLETE ===');
},
@@ -169,7 +168,7 @@ function adminIcons() {
Utils.showToast(`'${iconName}' code copied!`, 'success');
iconsLog.debug('Icon usage code copied:', iconName);
} catch (error) {
iconsLog.error('Failed to copy code:', error);
window.LogConfig.logError(error, 'Copy Icon Usage');
Utils.showToast('Failed to copy code', 'error');
}
},
@@ -183,7 +182,7 @@ function adminIcons() {
Utils.showToast(`'${iconName}' copied!`, 'success');
iconsLog.debug('Icon name copied:', iconName);
} catch (error) {
iconsLog.error('Failed to copy name:', error);
window.LogConfig.logError(error, 'Copy Icon Name');
Utils.showToast('Failed to copy name', 'error');
}
},

127
static/admin/js/login.js
View File

@@ -1,14 +1,8 @@
// static/admin/js/login.js
// Log levels: 0 = None, 1 = Error, 2 = Warning, 3 = Info, 4 = Debug
const LOG_LEVEL = 4; // Set to 4 for full debugging, 1 for errors only
const log = {
error: (...args) => LOG_LEVEL >= 1 && console.error('❌ [ERROR]', ...args),
warn: (...args) => LOG_LEVEL >= 2 && console.warn('⚠️ [WARN]', ...args),
info: (...args) => LOG_LEVEL >= 3 && console.info('ℹ️ [INFO]', ...args),
debug: (...args) => LOG_LEVEL >= 4 && console.log('🔍 [DEBUG]', ...args)
};
// ✅ Use centralized logger - ONE LINE!
// Create custom logger for login page
const loginLog = window.LogConfig.createLogger('LOGIN');
function adminLogin() {
return {
@@ -23,37 +17,37 @@ function adminLogin() {
errors: {},
init() {
log.info('Login page initializing...');
log.debug('Current pathname:', window.location.pathname);
log.debug('Current URL:', window.location.href);
loginLog.info('=== LOGIN PAGE INITIALIZING ===');
loginLog.debug('Current pathname:', window.location.pathname);
loginLog.debug('Current URL:', window.location.href);
// Just set theme - NO auth checking, NO token clearing!
this.dark = localStorage.getItem('theme') === 'dark';
log.debug('Dark mode:', this.dark);
loginLog.debug('Dark mode:', this.dark);
// DON'T clear tokens on init!
// If user lands here with a valid token, they might be navigating manually
// or got redirected. Let them try to login or navigate away.
const token = localStorage.getItem('admin_token');
if (token) {
log.warn('Found existing token on login page');
log.debug('Token preview:', token.substring(0, 20) + '...');
log.info('Not clearing token - user may have navigated here manually');
loginLog.warn('Found existing token on login page');
loginLog.debug('Token preview:', token.substring(0, 20) + '...');
loginLog.info('Not clearing token - user may have navigated here manually');
} else {
log.debug('No existing token found');
loginLog.debug('No existing token found');
}
log.info('Login page initialization complete');
loginLog.info('=== LOGIN PAGE INITIALIZATION COMPLETE ===');
},
clearTokens() {
log.debug('Clearing all auth tokens...');
loginLog.debug('Clearing all auth tokens...');
const tokensBefore = {
admin_token: !!localStorage.getItem('admin_token'),
admin_user: !!localStorage.getItem('admin_user'),
token: !!localStorage.getItem('token')
};
log.debug('Tokens before clear:', tokensBefore);
loginLog.debug('Tokens before clear:', tokensBefore);
localStorage.removeItem('admin_token');
localStorage.removeItem('admin_user');
@@ -64,67 +58,77 @@ function adminLogin() {
admin_user: !!localStorage.getItem('admin_user'),
token: !!localStorage.getItem('token')
};
log.debug('Tokens after clear:', tokensAfter);
loginLog.debug('Tokens after clear:', tokensAfter);
},
clearErrors() {
log.debug('Clearing form errors');
loginLog.debug('Clearing form errors');
this.error = null;
this.success = null;
this.errors = {};
},
validateForm() {
log.debug('Validating login form...');
loginLog.debug('Validating login form...');
this.clearErrors();
let isValid = true;
if (!this.credentials.username.trim()) {
this.errors.username = 'Username is required';
log.warn('Validation failed: Username is required');
loginLog.warn('Validation failed: Username is required');
isValid = false;
}
if (!this.credentials.password) {
this.errors.password = 'Password is required';
log.warn('Validation failed: Password is required');
loginLog.warn('Validation failed: Password is required');
isValid = false;
} else if (this.credentials.password.length < 6) {
this.errors.password = 'Password must be at least 6 characters';
log.warn('Validation failed: Password too short');
loginLog.warn('Validation failed: Password too short');
isValid = false;
}
log.info('Form validation result:', isValid ? 'VALID' : 'INVALID');
loginLog.info('Form validation result:', isValid ? 'VALID' : 'INVALID');
return isValid;
},
async handleLogin() {
log.info('=== LOGIN ATTEMPT STARTED ===');
loginLog.info('=== LOGIN ATTEMPT STARTED ===');
if (!this.validateForm()) {
log.warn('Form validation failed, aborting login');
loginLog.warn('Form validation failed, aborting login');
return;
}
this.loading = true;
this.clearErrors();
log.debug('Login state set to loading');
loginLog.debug('Login state set to loading');
try {
log.info('Calling login API endpoint...');
log.debug('Username:', this.credentials.username);
log.debug('API endpoint: /api/v1/admin/auth/login');
loginLog.info('Calling login API endpoint...');
loginLog.debug('Username:', this.credentials.username);
const startTime = Date.now();
const response = await apiClient.post('/admin/auth/login', {
const url = '/admin/auth/login';
const payload = {
username: this.credentials.username.trim(),
password: this.credentials.password
});
const duration = Date.now() - startTime;
};
log.info(`Login API response received in ${duration}ms`);
log.debug('Response structure:', {
window.LogConfig.logApiCall('POST', url, { username: payload.username }, 'request');
const startTime = performance.now();
const response = await apiClient.post(url, payload);
const duration = performance.now() - startTime;
window.LogConfig.logApiCall('POST', url, {
hasToken: !!response.access_token,
user: response.user?.username
}, 'response');
window.LogConfig.logPerformance('Login', duration);
loginLog.info(`Login API response received in ${duration}ms`);
loginLog.debug('Response structure:', {
hasToken: !!response.access_token,
hasUser: !!response.user,
userRole: response.user?.role,
@@ -133,27 +137,27 @@ function adminLogin() {
// Validate response
if (!response.access_token) {
log.error('Invalid response: No access token');
loginLog.error('Invalid response: No access token');
throw new Error('Invalid response from server - no token');
}
if (response.user && response.user.role !== 'admin') {
log.error('Authorization failed: User is not admin', {
loginLog.error('Authorization failed: User is not admin', {
actualRole: response.user.role
});
throw new Error('Access denied. Admin privileges required.');
}
log.info('Login successful, storing authentication data...');
loginLog.info('Login successful, storing authentication data...');
// Store authentication data
localStorage.setItem('admin_token', response.access_token);
localStorage.setItem('token', response.access_token);
log.debug('Token stored, length:', response.access_token.length);
loginLog.debug('Token stored, length:', response.access_token.length);
if (response.user) {
localStorage.setItem('admin_user', JSON.stringify(response.user));
log.debug('User data stored:', {
loginLog.debug('User data stored:', {
username: response.user.username,
role: response.user.role,
id: response.user.id
@@ -163,7 +167,7 @@ function adminLogin() {
// Verify storage
const storedToken = localStorage.getItem('admin_token');
const storedUser = localStorage.getItem('admin_user');
log.info('Storage verification:', {
loginLog.info('Storage verification:', {
tokenStored: !!storedToken,
userStored: !!storedUser,
tokenLength: storedToken?.length
@@ -171,44 +175,41 @@ function adminLogin() {
// Show success message
this.success = 'Login successful! Redirecting...';
log.info('Success message displayed to user');
loginLog.info('Success message displayed to user');
log.info('Redirecting to dashboard immediately...');
log.info('=== EXECUTING REDIRECT ===');
log.debug('Target URL: /admin/dashboard');
log.debug('Redirect method: window.location.href');
loginLog.info('Redirecting to dashboard immediately...');
loginLog.info('=== EXECUTING REDIRECT ===');
loginLog.debug('Target URL: /admin/dashboard');
loginLog.debug('Redirect method: window.location.href');
// Use href instead of replace to allow back button
// But redirect IMMEDIATELY - don't wait!
window.location.href = '/admin/dashboard';
} catch (error) {
log.error('Login failed:', error);
log.error('Error details:', {
message: error.message,
name: error.name,
stack: error.stack
});
window.LogConfig.logError(error, 'Login');
this.error = error.message || 'Invalid username or password. Please try again.';
log.info('Error message displayed to user:', this.error);
loginLog.info('Error message displayed to user:', this.error);
// Only clear tokens on login FAILURE
this.clearTokens();
log.info('Tokens cleared after error');
loginLog.info('Tokens cleared after error');
} finally {
this.loading = false;
log.debug('Login state set to not loading');
log.info('=== LOGIN ATTEMPT FINISHED ===');
loginLog.debug('Login state set to not loading');
loginLog.info('=== LOGIN ATTEMPT FINISHED ===');
}
},
toggleDarkMode() {
log.debug('Toggling dark mode...');
loginLog.debug('Toggling dark mode...');
this.dark = !this.dark;
localStorage.setItem('theme', this.dark ? 'dark' : 'light');
log.info('Dark mode:', this.dark ? 'ON' : 'OFF');
loginLog.info('Dark mode:', this.dark ? 'ON' : 'OFF');
}
}
}
}
loginLog.info('Login module loaded');

12
static/admin/js/testing-hub.js
View File

@@ -1,14 +1,8 @@
// static/admin/js/testing-hub.js
// Setup logging
const TESTING_HUB_LOG_LEVEL = 3;
const testingLog = {
error: (...args) => TESTING_HUB_LOG_LEVEL >= 1 && console.error('❌ [TESTING HUB ERROR]', ...args),
warn: (...args) => TESTING_HUB_LOG_LEVEL >= 2 && console.warn('⚠️ [TESTING HUB WARN]', ...args),
info: (...args) => TESTING_HUB_LOG_LEVEL >= 3 && console.info('ℹ️ [TESTING HUB INFO]', ...args),
debug: (...args) => TESTING_HUB_LOG_LEVEL >= 4 && console.log('🔍 [TESTING HUB DEBUG]', ...args)
};
// ✅ Use centralized logger - ONE LINE!
// Create custom logger for testing hub
const testingLog = window.LogConfig.createLogger('TESTING-HUB');
/**
* Testing Hub Alpine.js Component

104
static/admin/js/users.js
View File

@@ -1,5 +1,16 @@
// 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,
@@ -22,15 +33,27 @@ function adminUsers() {
},
// Initialization
init() {
Logger.info('Users page initialized', 'USERS');
this.loadUsers();
this.loadStats();
async init() {
usersLog.info('=== USERS PAGE INITIALIZING ===');
// Prevent multiple initializations
if (window._usersInitialized) {
usersLog.warn('Users page already initialized, skipping...');
return;
}
window._usersInitialized = true;
await this.loadUsers();
await this.loadStats();
usersLog.info('=== USERS PAGE INITIALIZATION COMPLETE ===');
},
// Load users from API
async loadUsers() {
usersLog.info('Loading users...');
this.loading = true;
try {
const params = new URLSearchParams({
page: this.pagination.page,
@@ -38,15 +61,24 @@ function adminUsers() {
...this.filters
});
const response = await ApiClient.get(`/admin/users?${params}`);
const url = `/admin/users?${params}`;
window.LogConfig.logApiCall('GET', url, null, 'request');
const startTime = performance.now();
const response = await apiClient.get(url); // ✅ Fixed: lowercase apiClient
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;
usersLog.info(`Loaded ${this.users.length} users`);
}
} catch (error) {
Logger.error('Failed to load users', 'USERS', error);
window.LogConfig.logError(error, 'Load Users');
Utils.showToast('Failed to load users', 'error');
} finally {
this.loading = false;
@@ -55,18 +87,28 @@ function adminUsers() {
// Load statistics
async loadStats() {
usersLog.info('Loading user statistics...');
try {
const response = await ApiClient.get('/admin/users/stats');
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) {
Logger.error('Failed to load stats', 'USERS', error);
window.LogConfig.logError(error, 'Load Stats');
}
},
// Search with debounce
debouncedSearch: Utils.debounce(function() {
usersLog.info('Search triggered:', this.filters.search);
this.pagination.page = 1;
this.loadUsers();
}, 500),
@@ -75,6 +117,7 @@ function adminUsers() {
nextPage() {
if (this.pagination.page < this.pagination.pages) {
this.pagination.page++;
usersLog.info('Next page:', this.pagination.page);
this.loadUsers();
}
},
@@ -82,59 +125,80 @@ function adminUsers() {
previousPage() {
if (this.pagination.page > 1) {
this.pagination.page--;
usersLog.info('Previous page:', this.pagination.page);
this.loadUsers();
}
},
// Actions
viewUser(user) {
Logger.info('View user', 'USERS', user);
usersLog.info('View user:', user.username);
// TODO: Open view modal
},
editUser(user) {
Logger.info('Edit user', 'USERS', user);
usersLog.info('Edit user:', user.username);
// TODO: Open edit modal
},
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 {
await ApiClient.put(`/admin/users/${user.id}/status`, {
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');
this.loadUsers();
this.loadStats();
usersLog.info(`User ${action}d successfully`);
await this.loadUsers();
await this.loadStats();
} catch (error) {
Logger.error(`Failed to ${action} user`, 'USERS', 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 {
await ApiClient.delete(`/admin/users/${user.id}`);
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');
this.loadUsers();
this.loadStats();
usersLog.info('User deleted successfully');
await this.loadUsers();
await this.loadStats();
} catch (error) {
Logger.error('Failed to delete user', 'USERS', error);
window.LogConfig.logError(error, 'Delete User');
Utils.showToast('Failed to delete user', 'error');
}
},
openCreateModal() {
Logger.info('Open create user modal', 'USERS');
usersLog.info('Open create user modal');
// TODO: Open create modal
}
};
}
}
usersLog.info('Users module loaded');

35
static/admin/js/vendor-detail.js
View File

@@ -1,14 +1,8 @@
// static/admin/js/vendor-detail.js
// Log levels: 0 = None, 1 = Error, 2 = Warning, 3 = Info, 4 = Debug
const VENDOR_DETAIL_LOG_LEVEL = 3;
const detailLog = {
error: (...args) => VENDOR_DETAIL_LOG_LEVEL >= 1 && console.error('❌ [VENDOR_DETAIL ERROR]', ...args),
warn: (...args) => VENDOR_DETAIL_LOG_LEVEL >= 2 && console.warn('⚠️ [VENDOR_DETAIL WARN]', ...args),
info: (...args) => VENDOR_DETAIL_LOG_LEVEL >= 3 && console.info('ℹ️ [VENDOR_DETAIL INFO]', ...args),
debug: (...args) => VENDOR_DETAIL_LOG_LEVEL >= 4 && console.log('🔍 [VENDOR_DETAIL DEBUG]', ...args)
};
// ✅ Use centralized logger - ONE LINE!
// Create custom logger for vendor detail
const detailLog = window.LogConfig.createLogger('VENDOR-DETAIL');
function adminVendorDetail() {
return {
@@ -57,9 +51,15 @@ function adminVendorDetail() {
this.error = null;
try {
const startTime = Date.now();
const response = await apiClient.get(`/admin/vendors/${this.vendorCode}`);
const duration = Date.now() - startTime;
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;
@@ -72,7 +72,7 @@ function adminVendorDetail() {
detailLog.debug('Full vendor data:', this.vendor);
} catch (error) {
detailLog.error('Failed to load vendor:', 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 {
@@ -107,8 +107,13 @@ function adminVendorDetail() {
}
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(`/admin/vendors/${this.vendorCode}?confirm=true`);
await apiClient.delete(url);
window.LogConfig.logApiCall('DELETE', url, null, 'response');
Utils.showToast('Vendor deleted successfully', 'success');
detailLog.info('Vendor deleted successfully');
@@ -117,7 +122,7 @@ function adminVendorDetail() {
setTimeout(() => window.location.href = '/admin/vendors', 1500);
} catch (error) {
detailLog.error('Failed to delete vendor:', error);
window.LogConfig.logError(error, 'Delete Vendor');
Utils.showToast(error.message || 'Failed to delete vendor', 'error');
}
},

71
static/admin/js/vendor-edit.js
View File

@@ -1,14 +1,8 @@
// static/admin/js/vendor-edit.js
// Log levels: 0 = None, 1 = Error, 2 = Warning, 3 = Info, 4 = Debug
const VENDOR_EDIT_LOG_LEVEL = 3;
const editLog = {
error: (...args) => VENDOR_EDIT_LOG_LEVEL >= 1 && console.error('❌ [VENDOR_EDIT ERROR]', ...args),
warn: (...args) => VENDOR_EDIT_LOG_LEVEL >= 2 && console.warn('⚠️ [VENDOR_EDIT WARN]', ...args),
info: (...args) => VENDOR_EDIT_LOG_LEVEL >= 3 && console.info('ℹ️ [VENDOR_EDIT INFO]', ...args),
debug: (...args) => VENDOR_EDIT_LOG_LEVEL >= 4 && console.log('🔍 [VENDOR_EDIT DEBUG]', ...args)
};
// ✅ Use centralized logger - ONE LINE!
// Create custom logger for vendor edit
const editLog = window.LogConfig.createLogger('VENDOR-EDIT');
function adminVendorEdit() {
return {
@@ -58,9 +52,15 @@ function adminVendorEdit() {
this.loadingVendor = true;
try {
const startTime = Date.now();
const response = await apiClient.get(`/admin/vendors/${this.vendorCode}`);
const duration = Date.now() - startTime;
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;
@@ -83,7 +83,7 @@ function adminVendorEdit() {
editLog.debug('Form data initialized:', this.formData);
} catch (error) {
editLog.error('Failed to load vendor:', error);
window.LogConfig.logError(error, 'Load Vendor');
Utils.showToast('Failed to load vendor', 'error');
setTimeout(() => window.location.href = '/admin/vendors', 2000);
} finally {
@@ -108,12 +108,15 @@ function adminVendorEdit() {
this.saving = true;
try {
const startTime = Date.now();
const response = await apiClient.put(
`/admin/vendors/${this.vendorCode}`,
this.formData
);
const duration = Date.now() - startTime;
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');
@@ -123,7 +126,7 @@ function adminVendorEdit() {
// setTimeout(() => window.location.href = '/admin/vendors', 1500);
} catch (error) {
editLog.error('Failed to update vendor:', error);
window.LogConfig.logError(error, 'Update Vendor');
// Handle validation errors
if (error.details && error.details.validation_errors) {
@@ -155,17 +158,21 @@ function adminVendorEdit() {
this.saving = true;
try {
const response = await apiClient.put(
`/admin/vendors/${this.vendorCode}/verification`,
{ is_verified: !this.vendor.is_verified }
);
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) {
editLog.error(`Failed to ${action} vendor:`, error);
window.LogConfig.logError(error, `Toggle Verification (${action})`);
Utils.showToast(`Failed to ${action} vendor`, 'error');
} finally {
this.saving = false;
@@ -184,17 +191,21 @@ function adminVendorEdit() {
this.saving = true;
try {
const response = await apiClient.put(
`/admin/vendors/${this.vendorCode}/status`,
{ is_active: !this.vendor.is_active }
);
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) {
editLog.error(`Failed to ${action} vendor:`, error);
window.LogConfig.logError(error, `Toggle Active Status (${action})`);
Utils.showToast(`Failed to ${action} vendor`, 'error');
} finally {
this.saving = false;

54
static/admin/js/vendors.js
View File

@@ -1,14 +1,7 @@
// static/admin/js/vendors.js
// Log levels: 0 = None, 1 = Error, 2 = Warning, 3 = Info, 4 = Debug
const VENDORS_LOG_LEVEL = 3;
const vendorsLog = {
error: (...args) => VENDORS_LOG_LEVEL >= 1 && console.error('❌ [VENDORS ERROR]', ...args),
warn: (...args) => VENDORS_LOG_LEVEL >= 2 && console.warn('⚠️ [VENDORS WARN]', ...args),
info: (...args) => VENDORS_LOG_LEVEL >= 3 && console.info('ℹ️ [VENDORS INFO]', ...args),
debug: (...args) => VENDORS_LOG_LEVEL >= 4 && console.log('🔍 [VENDORS DEBUG]', ...args)
};
// ✅ Use centralized logger - ONE LINE!
const vendorsLog = window.LogConfig.loggers.vendors;
// ============================================
// VENDOR LIST FUNCTION
@@ -47,8 +40,10 @@ function adminVendors() {
}
window._vendorsInitialized = true;
vendorsLog.group('Loading vendors data');
await this.loadVendors();
await this.loadStats();
vendorsLog.groupEnd();
vendorsLog.info('=== VENDORS PAGE INITIALIZATION COMPLETE ===');
},
@@ -122,9 +117,15 @@ function adminVendors() {
this.error = null;
try {
const startTime = Date.now();
const response = await apiClient.get('/admin/vendors');
const duration = Date.now() - startTime;
const url = '/admin/vendors';
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 different response structures
this.vendors = response.vendors || response.items || response || [];
@@ -142,7 +143,7 @@ function adminVendors() {
this.page = 1;
} catch (error) {
vendorsLog.error('Failed to load vendors:', error);
window.LogConfig.logError(error, 'Load Vendors');
this.error = error.message || 'Failed to load vendors';
Utils.showToast('Failed to load vendors', 'error');
} finally {
@@ -155,15 +156,21 @@ function adminVendors() {
vendorsLog.info('Loading vendor statistics...');
try {
const startTime = Date.now();
const response = await apiClient.get('/admin/vendors/stats');
const duration = Date.now() - startTime;
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) {
vendorsLog.error('Failed to load stats:', error);
window.LogConfig.logError(error, 'Load Vendor Stats');
// Don't show error toast for stats, just log it
}
},
@@ -230,8 +237,13 @@ function adminVendors() {
}
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(`/admin/vendors/${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');
@@ -241,7 +253,7 @@ function adminVendors() {
await this.loadStats();
} catch (error) {
vendorsLog.error('Failed to delete vendor:', error);
window.LogConfig.logError(error, 'Delete Vendor');
Utils.showToast(error.message || 'Failed to delete vendor', 'error');
}
},
@@ -249,8 +261,12 @@ function adminVendors() {
// 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 ===');
}

1
static/shared/js/icons.js
View File

@@ -106,6 +106,7 @@ const Icons = {
// Testing & QA Icons
'clipboard-list': `<svg class="{{classes}}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>`,
'check-circle': `<svg class="{{classes}}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>`,
'x-circle': `<svg class="{{classes}}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>`,
'lightning-bolt': `<svg class="{{classes}}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>`,
'clock': `<svg class="{{classes}}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>`,
'lock-closed': `<svg class="{{classes}}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>`,

11
static/vendor/admin/customers.html vendored
View File

@@ -1,11 +0,0 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer management</title>
</head>
<body>
<-- Customer management -->
</body>
</html>

11
static/vendor/admin/inventory.html vendored
View File

@@ -1,11 +0,0 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inventory management - catalog products</title>
</head>
<body>
<-- Inventory management - catalog products -->
</body>
</html>

11
static/vendor/admin/marketplace/browse.html vendored
View File

@@ -1,11 +0,0 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Browse marketplace products - staging</title>
</head>
<body>
<-- Browse marketplace products - staging -->
</body>
</html>

11
static/vendor/admin/marketplace/config.html vendored
View File

@@ -1,11 +0,0 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marketplace configuration</title>
</head>
<body>
<-- Marketplace configuration -->
</body>
</html>

11
static/vendor/admin/marketplace/imports.html vendored
View File

@@ -1,11 +0,0 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Import jobs and history</title>
</head>
<body>
<-- Import jobs and history -->
</body>
</html>

11
static/vendor/admin/marketplace/selected.html vendored
View File

@@ -1,11 +0,0 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selected products - pre-publish</title>
</head>
<body>
<-- Selected products - pre-publish -->
</body>
</html>

11
static/vendor/admin/media.html vendored
View File

@@ -1,11 +0,0 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media library</title>
</head>
<body>
<-- Media library -->
</body>
</html>

11
static/vendor/admin/notifications.html vendored
View File

@@ -1,11 +0,0 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notification templates and logs</title>
</head>
<body>
<-- Notification templates and logs -->
</body>
</html>

11
static/vendor/admin/orders.html vendored
View File

@@ -1,11 +0,0 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order management</title>
</head>
<body>
<-- Order management -->
</body>
</html>

11
static/vendor/admin/payments.html vendored
View File

@@ -1,11 +0,0 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment configuration</title>
</head>
<body>
<-- Payment configuration -->
</body>
</html>

11
static/vendor/admin/products.html vendored
View File

@@ -1,11 +0,0 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalog management - Product table</title>
</head>
<body>
<-- Catalog management - Product table -->
</body>
</html>

11
static/vendor/admin/settings.html vendored
View File

@@ -1,11 +0,0 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vendor settings</title>
</head>
<body>
<-- Vendor settings -->
</body>
</html>

11
static/vendor/admin/teams.html vendored
View File

@@ -1,11 +0,0 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Team management</title>
</head>
<body>
<-- Team management -->
</body>
</html>

160
static/vendor/dashboard.html vendored
View File

@@ -1,160 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vendor Dashboard - Multi-Tenant Ecommerce Platform</title>
<link rel="stylesheet" href="/static/css/shared/base.css">
<link rel="stylesheet" href="/static/css/admin/admin.css">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body x-data="vendorDashboard()" x-init="init()" x-cloak>
<!-- Header -->
<header class="admin-header">
<div class="header-left">
<h1>🏪 <span x-text="vendor?.name || 'Vendor Dashboard'"></span></h1>
</div>
<div class="header-right">
<span class="user-info">
Welcome, <strong x-text="currentUser.username"></strong>
<span class="badge badge-primary" x-text="vendorRole" style="margin-left: 8px;"></span>
</span>
<button class="btn-logout" @click="handleLogout">Logout</button>
</div>
</header>
<!-- Main Container -->
<div class="admin-container">
<!-- Sidebar -->
<aside class="admin-sidebar">
<nav>
<ul class="nav-menu">
<li class="nav-item">
<a href="#"
class="nav-link active"
@click.prevent="currentSection = 'dashboard'">
📊 Dashboard
</a>
</li>
<li class="nav-item">
<a href="#"
class="nav-link"
@click.prevent="currentSection = 'products'">
📦 Products
</a>
</li>
<li class="nav-item">
<a href="#"
class="nav-link"
@click.prevent="currentSection = 'orders'">
🛒 Orders
</a>
</li>
<li class="nav-item">
<a href="#"
class="nav-link"
@click.prevent="currentSection = 'customers'">
👥 Customers
</a>
</li>
<li class="nav-item">
<a href="#"
class="nav-link"
@click.prevent="currentSection = 'marketplace'">
🌐 Marketplace
</a>
</li>
</ul>
</nav>
</aside>
<!-- Main Content -->
<main class="admin-content">
<!-- Dashboard View -->
<div x-show="currentSection === 'dashboard'">
<!-- Vendor Info Card -->
<div class="content-section" style="margin-bottom: 24px;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<h2 style="margin: 0;" x-text="vendor?.name"></h2>
<p style="margin: 4px 0 0 0; color: var(--text-secondary);">
<strong x-text="vendor?.vendor_code"></strong> •
<span x-text="vendor?.subdomain"></span>
</p>
</div>
<div>
<span class="badge"
:class="vendor?.is_verified ? 'badge-success' : 'badge-warning'"
x-text="vendor?.is_verified ? 'Verified' : 'Pending Verification'"></span>
<span class="badge"
:class="vendor?.is_active ? 'badge-success' : 'badge-danger'"
x-text="vendor?.is_active ? 'Active' : 'Inactive'"></span>
</div>
</div>
</div>
<!-- Stats Grid -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">Products</div>
<div class="stat-icon">📦</div>
</div>
<div class="stat-value" x-text="stats.products_count || 0"></div>
<div class="stat-subtitle">in catalog</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">Orders</div>
<div class="stat-icon">🛒</div>
</div>
<div class="stat-value" x-text="stats.orders_count || 0"></div>
<div class="stat-subtitle">total orders</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">Customers</div>
<div class="stat-icon">👥</div>
</div>
<div class="stat-value" x-text="stats.customers_count || 0"></div>
<div class="stat-subtitle">registered</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">Revenue</div>
<div class="stat-icon">💰</div>
</div>
<div class="stat-value">€<span x-text="stats.revenue || 0"></span></div>
<div class="stat-subtitle">total revenue</div>
</div>
</div>
<!-- Coming Soon Notice -->
<div class="content-section" style="text-align: center; padding: 48px;">
<h3>🚀 Getting Started</h3>
<p class="text-muted" style="margin: 16px 0;">
Welcome to your vendor dashboard! Start by importing products from the marketplace.
</p>
<button class="btn btn-primary" @click="currentSection = 'marketplace'">
Go to Marketplace Import
</button>
</div>
</div>
<!-- Other sections -->
<div x-show="currentSection !== 'dashboard'">
<div class="content-section">
<h2 x-text="currentSection.charAt(0).toUpperCase() + currentSection.slice(1)"></h2>
<p class="text-muted">This section is coming soon in the next development slice.</p>
</div>
</div>
</main>
</div>
<script src="/static/shared/js/api-client.js"></script>
<script src="/static/js/vendor/dashboard.js"></script>
</body>
</html>

121
static/vendor/login.html vendored
View File

@@ -1,121 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vendor Login - Multi-Tenant Ecommerce Platform</title>
<link rel="stylesheet" href="/static/css/shared/base.css">
<link rel="stylesheet" href="/static/css/shared/auth.css">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<div class="auth-page" x-data="vendorLogin()" x-init="init()" x-cloak>
<div class="login-container">
<!-- Vendor Info -->
<template x-if="vendor">
<div class="vendor-info" style="margin-bottom: 24px;">
<h2 x-text="vendor.name" style="margin: 0; color: var(--primary-color);"></h2>
<p class="text-muted" style="margin: 4px 0 0 0; font-size: var(--font-sm);">
<strong x-text="vendor.vendor_code"></strong>
</p>
</div>
</template>
<div class="login-header">
<div class="auth-logo">🏪</div>
<h1>Vendor Portal</h1>
<p>Sign in to manage your store</p>
</div>
<!-- Alert Messages -->
<div x-show="error"
x-text="error"
class="alert alert-error"
x-transition></div>
<div x-show="success"
x-text="success"
class="alert alert-success"
x-transition></div>
<!-- Login Form (only show if vendor found) -->
<template x-if="vendor">
<form @submit.prevent="handleLogin">
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
id="username"
x-model="credentials.username"
:class="{ 'error': errors.username }"
required
autocomplete="username"
placeholder="Enter your username"
:disabled="loading"
@input="clearErrors"
>
<div x-show="errors.username"
x-text="errors.username"
class="error-message show"
x-transition></div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
x-model="credentials.password"
:class="{ 'error': errors.password }"
required
autocomplete="current-password"
placeholder="Enter your password"
:disabled="loading"
@input="clearErrors"
>
<div x-show="errors.password"
x-text="errors.password"
class="error-message show"
x-transition></div>
</div>
<button type="submit"
class="btn-login"
:disabled="loading">
<template x-if="!loading">
<span>Sign In</span>
</template>
<template x-if="loading">
<span>
<span class="loading-spinner"></span>
Signing in...
</span>
</template>
</button>
</form>
</template>
<!-- Vendor Not Found -->
<template x-if="!vendor && !loading && checked">
<div class="empty-state">
<div class="empty-state-icon">🏪</div>
<h3>Vendor Not Found</h3>
<p>The vendor you're trying to access doesn't exist or is inactive.</p>
<a href="/admin/login.html" class="btn btn-primary" style="margin-top: 16px;">
Go to Admin Login
</a>
</div>
</template>
<!-- Loading State -->
<div x-show="loading && !vendor" class="loading">
<span class="loading-spinner loading-spinner-lg"></span>
<p class="loading-text">Loading vendor information...</p>
</div>
</div>
</div>
<script src="/static/shared/js/api-client.js"></script>
<script src="/static/js/vendor/login.js"></script>
</body>
</html>