Working state before icon/utils fixes - Oct 22
This commit is contained in:
@@ -1,72 +1,126 @@
|
||||
/**
|
||||
* Admin Dashboard Component
|
||||
* Extends adminLayout with dashboard-specific functionality
|
||||
*/
|
||||
// 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)
|
||||
};
|
||||
|
||||
function adminDashboard() {
|
||||
return {
|
||||
// Inherit all adminLayout functionality
|
||||
...window.adminLayout(),
|
||||
// Inherit base layout functionality from init-alpine.js
|
||||
...data(),
|
||||
|
||||
// Dashboard-specific state
|
||||
currentSection: 'dashboard',
|
||||
currentPage: 'dashboard',
|
||||
stats: {
|
||||
vendors: {},
|
||||
users: {},
|
||||
imports: {}
|
||||
totalVendors: 0,
|
||||
activeUsers: 0,
|
||||
verifiedVendors: 0,
|
||||
importJobs: 0
|
||||
},
|
||||
vendors: [],
|
||||
users: [],
|
||||
imports: [],
|
||||
recentVendors: [],
|
||||
recentImports: [],
|
||||
loading: false,
|
||||
loading: true,
|
||||
error: null,
|
||||
|
||||
/**
|
||||
* Initialize dashboard
|
||||
*/
|
||||
async init() {
|
||||
// Call parent init from adminLayout
|
||||
this.currentPage = this.getCurrentPage();
|
||||
await this.loadUserData();
|
||||
dashLog.info('=== DASHBOARD INITIALIZING ===');
|
||||
dashLog.debug('Current URL:', window.location.href);
|
||||
dashLog.debug('Current pathname:', window.location.pathname);
|
||||
|
||||
// Load dashboard data
|
||||
await this.loadDashboardData();
|
||||
const token = localStorage.getItem('admin_token');
|
||||
dashLog.debug('Has admin_token?', !!token);
|
||||
if (token) {
|
||||
dashLog.debug('Token preview:', token.substring(0, 20) + '...');
|
||||
}
|
||||
|
||||
// Prevent multiple initializations
|
||||
if (window._dashboardInitialized) {
|
||||
dashLog.warn('Dashboard already initialized, skipping...');
|
||||
return;
|
||||
}
|
||||
window._dashboardInitialized = true;
|
||||
dashLog.debug('Dashboard initialization flag set');
|
||||
|
||||
await this.loadDashboard();
|
||||
dashLog.info('=== DASHBOARD INITIALIZATION COMPLETE ===');
|
||||
},
|
||||
|
||||
/**
|
||||
* Load all dashboard data
|
||||
*/
|
||||
async loadDashboardData() {
|
||||
async loadDashboard() {
|
||||
dashLog.info('Loading dashboard data...');
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
dashLog.debug('Dashboard state: loading=true, error=null');
|
||||
|
||||
try {
|
||||
dashLog.info('Starting parallel data fetch...');
|
||||
const startTime = Date.now();
|
||||
|
||||
// Load stats and vendors in parallel
|
||||
await Promise.all([
|
||||
this.loadStats(),
|
||||
this.loadRecentVendors(),
|
||||
this.loadRecentImports()
|
||||
this.loadRecentVendors()
|
||||
]);
|
||||
|
||||
const duration = Date.now() - startTime;
|
||||
dashLog.info(`Dashboard data loaded successfully in ${duration}ms`);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading dashboard data:', error);
|
||||
this.showErrorModal({
|
||||
message: 'Failed to load dashboard data',
|
||||
details: error.message
|
||||
dashLog.error('Dashboard load error:', error);
|
||||
dashLog.error('Error details:', {
|
||||
message: error.message,
|
||||
name: error.name,
|
||||
stack: error.stack
|
||||
});
|
||||
|
||||
this.error = error.message;
|
||||
Utils.showToast('Failed to load dashboard data', 'error');
|
||||
|
||||
} finally {
|
||||
this.loading = false;
|
||||
dashLog.debug('Dashboard state: loading=false');
|
||||
dashLog.info('Dashboard load attempt finished');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load statistics
|
||||
* Load platform statistics
|
||||
*/
|
||||
async loadStats() {
|
||||
dashLog.info('Loading platform statistics...');
|
||||
dashLog.debug('API endpoint: /admin/dashboard/stats/platform');
|
||||
|
||||
try {
|
||||
const response = await apiClient.get('/admin/stats');
|
||||
this.stats = response;
|
||||
const startTime = Date.now();
|
||||
const data = await apiClient.get('/admin/dashboard/stats/platform');
|
||||
const duration = Date.now() - startTime;
|
||||
|
||||
dashLog.info(`Stats loaded in ${duration}ms`);
|
||||
dashLog.debug('Raw stats data:', data);
|
||||
|
||||
// Map API response to stats cards
|
||||
this.stats = {
|
||||
totalVendors: data.vendors?.total_vendors || 0,
|
||||
activeUsers: data.users?.active_users || 0,
|
||||
verifiedVendors: data.vendors?.verified_vendors || 0,
|
||||
importJobs: data.imports?.total_imports || 0
|
||||
};
|
||||
|
||||
dashLog.info('Stats mapped:', this.stats);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to load stats:', error);
|
||||
// Don't show error modal for stats, just log it
|
||||
dashLog.error('Failed to load stats:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -74,111 +128,32 @@ function adminDashboard() {
|
||||
* Load recent vendors
|
||||
*/
|
||||
async loadRecentVendors() {
|
||||
dashLog.info('Loading recent vendors...');
|
||||
dashLog.debug('API endpoint: /admin/dashboard');
|
||||
|
||||
try {
|
||||
const response = await apiClient.get('/admin/vendors', {
|
||||
skip: 0,
|
||||
limit: 5
|
||||
const startTime = Date.now();
|
||||
const data = await apiClient.get('/admin/dashboard');
|
||||
const duration = Date.now() - startTime;
|
||||
|
||||
dashLog.info(`Recent vendors loaded in ${duration}ms`);
|
||||
dashLog.debug('Vendors data:', {
|
||||
count: data.recent_vendors?.length || 0,
|
||||
hasData: !!data.recent_vendors
|
||||
});
|
||||
this.recentVendors = response.vendors || response;
|
||||
|
||||
this.recentVendors = data.recent_vendors || [];
|
||||
|
||||
if (this.recentVendors.length > 0) {
|
||||
dashLog.info(`Loaded ${this.recentVendors.length} recent vendors`);
|
||||
dashLog.debug('First vendor:', this.recentVendors[0]);
|
||||
} else {
|
||||
dashLog.warn('No recent vendors found');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to load recent vendors:', error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load recent import jobs
|
||||
*/
|
||||
async loadRecentImports() {
|
||||
try {
|
||||
const response = await apiClient.get('/admin/imports', {
|
||||
skip: 0,
|
||||
limit: 5
|
||||
});
|
||||
this.recentImports = response.imports || response;
|
||||
} catch (error) {
|
||||
console.error('Failed to load recent imports:', error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Show different sections
|
||||
*/
|
||||
async showSection(section) {
|
||||
this.currentSection = section;
|
||||
|
||||
// Load data based on section
|
||||
if (section === 'vendors' && this.vendors.length === 0) {
|
||||
await this.loadAllVendors();
|
||||
} else if (section === 'users' && this.users.length === 0) {
|
||||
await this.loadAllUsers();
|
||||
} else if (section === 'imports' && this.imports.length === 0) {
|
||||
await this.loadAllImports();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load all vendors
|
||||
*/
|
||||
async loadAllVendors() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await apiClient.get('/admin/vendors', {
|
||||
skip: 0,
|
||||
limit: 100
|
||||
});
|
||||
this.vendors = response.vendors || response;
|
||||
} catch (error) {
|
||||
console.error('Failed to load vendors:', error);
|
||||
this.showErrorModal({
|
||||
message: 'Failed to load vendors',
|
||||
details: error.message
|
||||
});
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load all users
|
||||
*/
|
||||
async loadAllUsers() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await apiClient.get('/admin/users', {
|
||||
skip: 0,
|
||||
limit: 100
|
||||
});
|
||||
this.users = response.users || response;
|
||||
} catch (error) {
|
||||
console.error('Failed to load users:', error);
|
||||
this.showErrorModal({
|
||||
message: 'Failed to load users',
|
||||
details: error.message
|
||||
});
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load all import jobs
|
||||
*/
|
||||
async loadAllImports() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await apiClient.get('/admin/imports', {
|
||||
skip: 0,
|
||||
limit: 100
|
||||
});
|
||||
this.imports = response.imports || response;
|
||||
} catch (error) {
|
||||
console.error('Failed to load import jobs:', error);
|
||||
this.showErrorModal({
|
||||
message: 'Failed to load import jobs',
|
||||
details: error.message
|
||||
});
|
||||
} finally {
|
||||
this.loading = false;
|
||||
dashLog.error('Failed to load recent vendors:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -186,18 +161,35 @@ function adminDashboard() {
|
||||
* Format date for display
|
||||
*/
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '-';
|
||||
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
} catch (error) {
|
||||
return dateString;
|
||||
if (!dateString) {
|
||||
dashLog.debug('formatDate called with empty dateString');
|
||||
return '-';
|
||||
}
|
||||
const formatted = Utils.formatDate(dateString);
|
||||
dashLog.debug(`Date formatted: ${dateString} -> ${formatted}`);
|
||||
return formatted;
|
||||
},
|
||||
|
||||
/**
|
||||
* Navigate to vendor detail page
|
||||
*/
|
||||
viewVendor(vendorCode) {
|
||||
dashLog.info('Navigating to vendor:', vendorCode);
|
||||
const url = `/admin/vendors?code=${vendorCode}`;
|
||||
dashLog.debug('Navigation URL:', url);
|
||||
window.location.href = url;
|
||||
},
|
||||
|
||||
/**
|
||||
* Refresh dashboard data
|
||||
*/
|
||||
async refresh() {
|
||||
dashLog.info('=== DASHBOARD REFRESH TRIGGERED ===');
|
||||
await this.loadDashboard();
|
||||
Utils.showToast('Dashboard refreshed', 'success');
|
||||
dashLog.info('=== DASHBOARD REFRESH COMPLETE ===');
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
dashLog.info('Dashboard module loaded');
|
||||
Reference in New Issue
Block a user