Skip to main content

Frontend Components

Introduction​

The Frontend Components of the ESG Management System provide a comprehensive and intuitive user interface that enables users to effectively manage, monitor, and analyze ESG data. Built on the Frappe framework's robust UI components, the frontend delivers a modern, responsive, and feature-rich experience across all ESG management functions.

1. ESG Dashboard - Central Command Center​

Comprehensive Dashboard Architecture​

The ESG Dashboard serves as the central command center, providing real-time visibility into all ESG metrics and initiatives:

Multi-Tab Navigation System​

frappe.pages['esg-dashboard'].on_page_load = function(wrapper) {
  var page = frappe.ui.make_app_page({
    parent: wrapper,
    title: 'ESG Dashboard',
    single_column: true
  });
  
  // Add CSS and create content container
  frappe.require(['esg_dashboard.bundle.css']);
  let $content = $('<div class="esg-dashboard-wrapper"></div>').appendTo(page.main);
  
  // Multi-category tab system
  $content.html(`
    <div class="esg-tabs-container">
      <div class="esg-tabs-nav">
        <div class="esg-category-tab active" data-tab="main">
          <i class="fa fa-home"></i> Main
        </div>
        <div class="esg-category-tab" data-tab="energy">
          <i class="fa fa-bolt"></i> Energy
        </div>
        <div class="esg-category-tab" data-tab="water">
          <i class="fa fa-tint"></i> Water
        </div>
        <div class="esg-category-tab" data-tab="emissions">
          <i class="fa fa-cloud"></i> Emissions
        </div>
        <div class="esg-category-tab" data-tab="waste">
          <i class="fa fa-recycle"></i> Waste
        </div>
        <div class="esg-category-tab" data-tab="biodiversity">
          <i class="fa fa-tree"></i> Biodiversity
        </div>
      </div>
    </div>
  `);
}

Key Performance Indicators (KPI) Cards​

// KPI stat cards with progress indicators
<div class="esg-stat-cards">
  <div class="esg-stat-card">
    <div class="esg-stat-label">CARBON FOOTPRINT</div>
    <div class="esg-stat-value">86%</div>
    <div class="esg-progress-container">
      <div class="esg-progress-bar" data-progress="86"></div>
    </div>
    <div>Reduction Goal Met</div>
  </div>
  
  <div class="esg-stat-card">
    <div class="esg-stat-label">ENERGY EFFICIENCY</div>
    <div class="esg-stat-value">73%</div>
    <div class="esg-progress-container">
      <div class="esg-progress-bar" data-progress="73"></div>
    </div>
    <div>Renewable Energy Adoption</div>
  </div>
</div>

Interactive Tab System​

function initTabSystem() {
  const tabs = document.querySelectorAll('.esg-category-tab');
  
  // Apply active style and handle tab switching
  const applyActiveStyle = (tab) => {
    tab.style.backgroundColor = '#f1f5f9';
    tab.style.color = '#2e7d32';
    tab.style.fontWeight = '600';
    tab.style.borderBottom = '3px solid #2e7d32';
    
    const icon = tab.querySelector('i');
    if (icon) icon.style.color = '#2e7d32';
  };
  
  // Add hover effects and click handlers
  tabs.forEach(tab => {
    tab.addEventListener('click', function() {
      const tabId = this.getAttribute('data-tab');
      showTabContent(container, tabId);
      updateActiveTabIndicator(tabId);
    });
  });
}

Category-Specific Dashboard Views​

Environmental Pillars Organization​

// Main dashboard with three pillars
<div class="esg-pillars">
  <!-- Environmental Pillar -->
  <div class="esg-pillar environmental">
    <div class="esg-pillar-header">
      <div class="esg-pillar-icon"><i class="fa fa-leaf"></i></div>
      <h2>Environmental</h2>
    </div>
    <div class="esg-features">
      <div class="esg-feature">
        <a href="/app/energy-consumption">
          <i class="fa fa-bolt"></i>
          <span>Energy Consumption</span>
        </a>
      </div>
      <div class="esg-feature">
        <a href="/app/water-consumption">
          <i class="fa fa-tint"></i>
          <span>Water Management</span>
        </a>
      </div>
    </div>
  </div>
  
  <!-- Sustainable Initiatives Pillar -->
  <div class="esg-pillar sustainable-initiatives">
    <!-- Similar structure for sustainable initiatives -->
  </div>
  
  <!-- Compliance & Reporting Pillar -->
  <div class="esg-pillar compliance-reporting">
    <!-- Similar structure for compliance -->
  </div>
</div>

2. Form-Based Data Entry Components​

Intelligent Form Validation and Enhancement​

Biodiversity Initiative Management​

frappe.ui.form.on('Biodiversity_Initiative', {
    refresh: function(frm) {
        // Add custom buttons for actions
        frm.add_custom_button(__('Generate Impact Report'), function() {
            generate_impact_report(frm);
        }, __('Actions'));
        
        // Highlight initiative types with impact indicators
        highlight_initiative_type(frm);
        
        // Toggle fields based on status
        toggle_fields_by_status(frm);
    },
    
    initiative_type: function(frm) {
        highlight_initiative_type(frm);
    },
    
    status: function(frm) {
        toggle_fields_by_status(frm);
    }
});

function highlight_initiative_type(frm) {
    if(!frm.doc.initiative_type) return;
    
    let initiative_impacts = {
        'Reforestation': { color: 'green', message: 'High carbon sequestration and habitat creation' },
        'Wildlife Conservation': { color: 'blue', message: 'Direct protection of endangered species' },
        'Wetland Restoration': { color: 'green', message: 'High impact on water quality and biodiversity' },
        'Pollinator Habitats': { color: 'blue', message: 'Critical for agricultural sustainability' }
    };
    
    let impact = initiative_impacts[frm.doc.initiative_type] || { color: 'gray', message: '' };
    frm.set_df_property('initiative_type', 'description', 
        `<span style="color:${impact.color}">${impact.message}</span>`);
}

Renewable Energy Projects Validation​

frappe.ui.form.on('Renewable_Energy_Projects', {
    validate: function(frm) {
        // Capacity validation
        if (frm.doc.capacity_mw <= 0) {
            frappe.throw(__('Capacity must be greater than 0 MW'));
        }
        
        // CO2 reduction validation
        if (frm.doc.co2_reduction_tons_per_year < 0) {
            frappe.throw(__('CO2 reduction cannot be negative'));
        }
    },
    
    status: function(frm) {
        if (frm.doc.status === 'Operational' && !frm.doc.operational_date) {
            frappe.msgprint(__('Please set an Operational Date for operational projects'));
        }
        
        // Show/hide fields based on status
        frm.toggle_reqd('operational_date', frm.doc.status === 'Operational');
        frm.toggle_display('co2_reduction_tons_per_year', frm.doc.status !== 'Planned');
    },
    
    energy_type: function(frm) {
        // Auto-populate description based on energy type
        if (!frm.doc.description) {
            let descriptions = {
                'Solar': 'Solar energy project to generate renewable electricity from sunlight.',
                'Wind': 'Wind energy project to generate renewable electricity from wind power.',
                'Hydro': 'Hydroelectric project utilizing water flow for clean energy generation.',
                'Geothermal': 'Geothermal energy project harnessing earth\'s natural heat.'
            };
            
            if (descriptions[frm.doc.energy_type]) {
                frm.set_value('description', descriptions[frm.doc.energy_type]);
            }
        }
    }
});

Material Waste Management Interface​

frappe.ui.form.on('Material_Waste_Management', {
    refresh: function(frm) {
        add_waste_reduction_alerts(frm);
        update_sustainability_info(frm);
    },
    
    waste_generated_ton: function(frm) {
        check_waste_reduction_target(frm, 'ton');
    },
    
    waste_generated_kg: function(frm) {
        check_waste_reduction_target(frm, 'kg');
    },
    
    treatment_method: function(frm) {
        update_sustainability_info(frm);
    }
});

function check_waste_reduction_target(frm, unit) {
    let waste_field = unit === 'ton' ? 'waste_generated_ton' : 'waste_generated_kg';
    let goal_field = unit === 'ton' ? 'waste_reduction_goal_ton' : 'waste_reduction_goal_kg';
    
    if(frm.doc[waste_field] && frm.doc[goal_field]) {
        if(frm.doc[waste_field] > frm.doc[goal_field]) {
            frappe.show_alert({
                message: __(`Waste generated (${unit}) exceeds reduction goal. Consider implementing waste reduction strategies.`),
                indicator: 'orange'
            }, 7);
        }
    }
}

3. Water Quality Monitoring Interface​

Advanced Dashboard Indicators​

frappe.ui.form.on('Water Quality', {
    refresh: function(frm) {
        add_summary_cards(frm);
        
        // Add compliance status indicator
        if (frm.doc.compliance_status) {
            frm.dashboard.add_indicator(
                __(frm.doc.compliance_status),
                frm.doc.compliance_status === 'Compliant' ? 'green' : 'red'
            );
        }
        
        // Add sample type indicator
        if (frm.doc.sample_type) {
            frm.dashboard.add_indicator(
                __('Sample Type: ' + frm.doc.sample_type),
                'blue'
            );
        }
        
        // Add print button for water quality reports
        frm.add_custom_button(__('Print Water Quality Report'), function() {
            print_water_quality_report(frm);
        }, __('Actions'));
    },
    
    ph_level: function(frm) {
        validate_ph_range(frm);
    },
    
    dissolved_oxygen: function(frm) {
        validate_oxygen_levels(frm);
    }
});

function add_summary_cards(frm) {
    // Create summary cards for key water quality parameters
    let summary_html = `
        <div class="water-quality-summary">
            <div class="summary-card">
                <h4>pH Level</h4>
                <div class="value ${get_ph_status_class(frm.doc.ph_level)}">${frm.doc.ph_level || 'N/A'}</div>
            </div>
            <div class="summary-card">
                <h4>Dissolved Oxygen</h4>
                <div class="value">${frm.doc.dissolved_oxygen || 'N/A'} mg/L</div>
            </div>
            <div class="summary-card">
                <h4>Turbidity</h4>
                <div class="value">${frm.doc.turbidity || 'N/A'} NTU</div>
            </div>
        </div>
    `;
    
    frm.dashboard.add_section(summary_html);
}

4. Interactive Data Visualization Components​

Progress Bar Initialization​

function initProgressBars() {
    const progressBars = document.querySelectorAll('.esg-progress-bar');
    
    progressBars.forEach(bar => {
        const progress = bar.getAttribute('data-progress');
        if (progress) {
            // Animate progress bar
            setTimeout(() => {
                bar.style.width = progress + '%';
                
                // Add color coding based on progress
                if (progress >= 80) {
                    bar.style.backgroundColor = '#4caf50'; // Green
                } else if (progress >= 60) {
                    bar.style.backgroundColor = '#ff9800'; // Orange
                } else {
                    bar.style.backgroundColor = '#f44336'; // Red
                }
            }, 500);
        }
    });
}

Dynamic Content Loading​

function showTabContent(container, tabId) {
    // Hide all tab contents
    const allContents = container.querySelectorAll('.esg-tab-content');
    allContents.forEach(content => {
        content.classList.add('hide');
    });
    
    // Show selected tab content
    const selectedContent = container.querySelector(`#${tabId}-tab`);
    if (selectedContent) {
        selectedContent.classList.remove('hide');
        
        // Load dynamic content if needed
        if (tabId === 'energy') {
            loadEnergyMetrics(selectedContent);
        } else if (tabId === 'water') {
            loadWaterMetrics(selectedContent);
        }
    }
}

5. Responsive Design and Mobile Support​

Mobile-First Approach​

The frontend components are designed with a mobile-first approach, ensuring optimal user experience across all devices:

Responsive Grid System​

.esg-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

@media (max-width: 768px) {
    .esg-category-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }
    
    .esg-stat-cards {
        flex-direction: column;
    }
    
    .esg-tabs-nav {
        overflow-x: auto;
        white-space: nowrap;
    }
}

Touch-Friendly Interface​

  • Large Touch Targets: All interactive elements are sized for easy touch interaction
  • Swipe Navigation: Support for swipe gestures on mobile devices
  • Responsive Typography: Text scales appropriately across different screen sizes
  • Optimized Loading: Progressive loading for better mobile performance

6. Real-time Data Updates​

WebSocket Integration​

// Real-time data updates via WebSocket
frappe.realtime.on('esg_metric_update', function(data) {
    if (data.metric_type && data.value) {
        updateDashboardMetric(data.metric_type, data.value);
        showUpdateNotification(data);
    }
});

function updateDashboardMetric(metricType, value) {
    const metricCard = document.querySelector(`[data-metric="${metricType}"]`);
    if (metricCard) {
        const valueElement = metricCard.querySelector('.esg-stat-value');
        const progressBar = metricCard.querySelector('.esg-progress-bar');
        
        // Animate value change
        animateValueChange(valueElement, value);
        
        // Update progress bar
        if (progressBar) {
            progressBar.style.width = value + '%';
        }
    }
}

Live Notifications​

function showUpdateNotification(data) {
    frappe.show_alert({
        message: `${data.metric_name} updated to ${data.value}${data.unit}`,
        indicator: 'green'
    }, 5);
}

7. Accessibility Features​

WCAG 2.1 Compliance​

The frontend components are designed to meet WCAG 2.1 AA standards:

Keyboard Navigation​

  • Tab Order: Logical tab order for keyboard navigation
  • Focus Indicators: Clear visual focus indicators
  • Keyboard Shortcuts: Custom keyboard shortcuts for common actions
  • Screen Reader Support: ARIA labels and descriptions

Visual Accessibility​

  • Color Contrast: High contrast ratios for text and backgrounds
  • Alternative Text: Descriptive alt text for all images and icons
  • Scalable Text: Support for text scaling up to 200%
  • Color Independence: Information not conveyed by color alone

8. Performance Optimization​

Frontend Performance Features​

  • Lazy Loading: Components load only when needed
  • Code Splitting: JavaScript bundles split for optimal loading
  • Caching Strategy: Intelligent caching of static assets
  • Minification: Compressed CSS and JavaScript files
  • Image Optimization: Optimized images with appropriate formats

User Experience Enhancements​

  • Loading States: Clear loading indicators for all async operations
  • Error Handling: User-friendly error messages and recovery options
  • Offline Support: Basic offline functionality for critical features
  • Progressive Enhancement: Core functionality works without JavaScript

Key Features Summary​

Dashboard Capabilities​

  • Multi-Category Views: Organized tabs for different ESG categories
  • Real-time KPIs: Live performance indicators with progress visualization
  • Interactive Charts: Dynamic data visualization with drill-down capabilities
  • Customizable Layout: User-configurable dashboard arrangements

Form Enhancements​

  • Smart Validation: Context-aware validation with helpful messages
  • Auto-completion: Intelligent field population based on selections
  • Visual Indicators: Color-coded status and impact indicators
  • Custom Actions: Specialized buttons for category-specific operations

User Experience​

  • Responsive Design: Optimal experience across all device types
  • Accessibility: WCAG 2.1 compliant interface design
  • Performance: Optimized loading and smooth interactions
  • Real-time Updates: Live data updates via WebSocket connections

Conclusion​

The Frontend Components of the ESG Management System provide a comprehensive, user-friendly interface that enables effective ESG data management and analysis. The combination of modern web technologies, responsive design, and accessibility features ensures that users can efficiently manage their sustainability initiatives across all devices and environments.