orion/static/admin/js/dashboard.js

/**
 * 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;
            }
        }
    };
}