/** * Admin Dashboard Component * Extends adminLayout with dashboard-specific functionality */ function adminDashboard() { return { // Inherit all adminLayout functionality ...window.adminLayout(), // Dashboard-specific state currentSection: 'dashboard', stats: { vendors: {}, users: {}, imports: {} }, vendors: [], users: [], imports: [], recentVendors: [], recentImports: [], loading: false, /** * Initialize dashboard */ async init() { // Call parent init from adminLayout this.currentPage = this.getCurrentPage(); await this.loadUserData(); // Load dashboard data await this.loadDashboardData(); }, /** * Load all dashboard data */ async loadDashboardData() { this.loading = true; try { await Promise.all([ this.loadStats(), this.loadRecentVendors(), this.loadRecentImports() ]); } catch (error) { console.error('Error loading dashboard data:', error); this.showErrorModal({ message: 'Failed to load dashboard data', details: error.message }); } finally { this.loading = false; } }, /** * Load statistics */ async loadStats() { try { const response = await apiClient.get('/admin/stats'); this.stats = response; } catch (error) { console.error('Failed to load stats:', error); // Don't show error modal for stats, just log it } }, /** * Load recent vendors */ async loadRecentVendors() { try { const response = await apiClient.get('/admin/vendors', { skip: 0, limit: 5 }); this.recentVendors = response.vendors || response; } 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; } }, /** * 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; } } }; }