Add Bootstrap 5 upgrade plan and fix gauge.js loading

BOOTSTRAP5_UPGRADE_PLAN.md

@@ -0,0 +1,168 @@
+# Bootstrap 5 Modernization Plan 🚀
+
+## Project Overview
+Upgrade Gentelella Admin Template from Bootstrap 4.6.2 to Bootstrap 5.3.6 with modern dependencies while maintaining functionality and layout.
+
+## Phase 1: Dependency Analysis & Planning ✅ COMPLETE
+
+### Current Dependencies Status
+| Package | Current | Target | Breaking Changes |
+|---------|---------|--------|------------------|
+| bootstrap | 4.6.2 | 5.3.6 | MAJOR - jQuery removal, class renames |
+| chart.js | 2.9.4 | 4.4.2 | MAJOR - API changes, new options structure |
+| jquery | 3.6.1 | REMOVE | Bootstrap 5 no longer needs jQuery |
+| font-awesome | 4.7.0 | 6.6.0 | MINOR - new icons, class structure |
+| jquery-ui | 1.14.1 | KEEP | Still needed for some widgets |
+| datatables.net | 2.3.2 | 2.x.x | Update to latest |
+| moment | 2.30.1 | dayjs | Replace with modern alternative |
+
+## Phase 2: Bootstrap 5 Core Migration
+
+### 2.1 Bootstrap Installation & Configuration
+- [ ] Update Bootstrap to 5.3.6
+- [ ] Remove jQuery dependency from Bootstrap components
+- [ ] Update Popper.js to v2.x (required by Bootstrap 5)
+- [ ] Configure Bootstrap 5 with custom Sass variables
+
+### 2.2 CSS Class Migration
+Bootstrap 5 class changes to apply:
+- [ ] `.ml-*`, `.mr-*` → `.ms-*`, `.me-*` (margin start/end)
+- [ ] `.pl-*`, `.pr-*` → `.ps-*`, `.pe-*` (padding start/end)
+- [ ] `.text-left`, `.text-right` → `.text-start`, `.text-end`
+- [ ] `.float-left`, `.float-right` → `.float-start`, `.float-end`
+- [ ] `.badge-*` → `.bg-*` for background colors
+- [ ] `.btn-block` → `.d-grid` wrapper
+- [ ] `.form-group` → remove (use margins/utilities)
+- [ ] `.form-control-file` → `.form-control`
+- [ ] `.custom-select` → `.form-select`
+- [ ] `.no-gutters` → `.g-0`
+
+### 2.3 Component Updates
+- [ ] **Cards**: Update `.card-deck` → CSS Grid layout
+- [ ] **Forms**: Migrate to new form structure
+- [ ] **Navbars**: Add required container structure
+- [ ] **Dropdowns**: Update data attributes `data-toggle` → `data-bs-toggle`
+- [ ] **Modals**: Update data attributes and remove jQuery dependency
+- [ ] **Tooltips/Popovers**: Update to Bootstrap 5 JS API
+
+### 2.4 Data Attribute Migration
+- [ ] `data-toggle` → `data-bs-toggle`
+- [ ] `data-target` → `data-bs-target`
+- [ ] `data-dismiss` → `data-bs-dismiss`
+- [ ] `data-slide` → `data-bs-slide`
+- [ ] `data-parent` → `data-bs-parent`
+
+## Phase 3: JavaScript Modernization
+
+### 3.1 Bootstrap JS Migration
+- [ ] Remove jQuery dependencies from Bootstrap components
+- [ ] Update Bootstrap component initialization
+- [ ] Migrate event listeners to vanilla JS
+- [ ] Update component APIs (Modal, Dropdown, etc.)
+
+### 3.2 Chart.js v4 Migration
+- [ ] Update Chart.js to 4.4.2
+- [ ] Migrate chart configurations:
+  - `scales.yAxes` → `scales.y`
+  - `scales.xAxes` → `scales.x`
+  - Update responsive options
+  - Update legend configuration
+  - Update tooltip configuration
+
+### 3.3 Widget Library Updates
+- [ ] **jQuery UI**: Keep for progressbar, maintain compatibility
+- [ ] **DataTables**: Update to latest compatible version
+- [ ] **Gauge.js**: Fix loading issues, ensure compatibility
+- [ ] **jqVMap**: Test compatibility or find alternative
+- [ ] **Bootstrap-progressbar**: Find Bootstrap 5 compatible version
+
+### 3.4 Custom JavaScript Refactoring
+- [ ] Update `src/js/sidebar.js` for Bootstrap 5 navbar
+- [ ] Update `src/js/init.js` for new component initialization
+- [ ] Replace jQuery utilities with vanilla JS where possible
+- [ ] Maintain jQuery for specific widgets that require it
+
+## Phase 4: Modern Dependencies
+
+### 4.1 Package Updates
+- [ ] Font Awesome 4.7.0 → 6.6.0
+- [ ] Moment.js → Day.js (smaller, modern)
+- [ ] Update all vendor CSS/JS to latest versions
+- [ ] Remove deprecated packages
+
+### 4.2 Build System Optimization
+- [ ] Optimize Vite configuration for Bootstrap 5
+- [ ] Update CSS preprocessing for Bootstrap 5 Sass structure
+- [ ] Configure proper tree-shaking for reduced bundle size
+- [ ] Add CSS/JS minification for production
+
+## Phase 5: Testing & Quality Assurance
+
+### 5.1 Visual Testing
+- [ ] Dashboard layout consistency
+- [ ] All widget functionality
+- [ ] Responsive design across breakpoints
+- [ ] Dark mode compatibility (if implementing)
+
+### 5.2 Functionality Testing
+- [ ] All charts rendering correctly
+- [ ] Forms validation working
+- [ ] Modal/dropdown interactions
+- [ ] Data table operations
+- [ ] Navigation and sidebar
+
+### 5.3 Performance Testing
+- [ ] Bundle size optimization
+- [ ] Loading speed improvements
+- [ ] Memory usage validation
+
+## Phase 6: Outstanding Issues Resolution
+
+### 6.1 Current TODOs
+- [x] ~~Fix gauge.js loading~~ ✅ **COMPLETED**
+- [ ] Investigate broken map.html page
+- [ ] Add proper error handling for widget failures
+- [ ] Implement fallbacks for failed library loads
+
+### 6.2 New Modern Features
+- [ ] Add CSS custom properties for easy theming
+- [ ] Implement CSS Grid layouts where appropriate
+- [ ] Add accessibility improvements (ARIA labels, focus management)
+- [ ] Consider adding dark mode support
+- [ ] Add PWA capabilities (optional)
+
+## Implementation Timeline
+
+### Week 1: Core Bootstrap Migration
+- Days 1-2: Install Bootstrap 5, update basic layouts
+- Days 3-4: CSS class migration across all HTML files
+- Days 5-7: Component structure updates
+
+### Week 2: JavaScript & Charts
+- Days 1-3: Bootstrap JS component migration
+- Days 4-5: Chart.js v4 migration
+- Days 6-7: Widget library updates
+
+### Week 3: Testing & Polish
+- Days 1-3: Comprehensive testing
+- Days 4-5: Bug fixes and optimizations
+- Days 6-7: Documentation and cleanup
+
+## Success Metrics
+- ✅ Zero console errors
+- ✅ All widgets functional
+- ✅ Responsive design maintained
+- ✅ Loading speed improved by 20%+
+- ✅ Bundle size optimized
+- ✅ Future-proof dependencies
+
+## Risk Mitigation
+- Create feature branch for each phase
+- Maintain backup of working version
+- Test individual components before integration
+- Document all custom modifications
+- Plan rollback strategy for critical issues
+
+---
+
+**Next Steps**: Begin Phase 2 with Bootstrap 5 installation and basic CSS migration. 

src/jquery-setup.js

@@ -8,12 +8,6 @@ if (typeof window !== 'undefined') {
   // Verify the assignment worked
   if (!window.jQuery || !window.$) {
     console.error('CRITICAL: jQuery global assignment failed!');
-  } else {
-    console.log('✓ jQuery globally available:', {
-      version: $.fn.jquery,
-      jQuery: !!window.jQuery,
-      $: !!window.$
-    });
   }
 }
 

src/js/init.js

@@ -66,6 +66,58 @@
       $('.progress .progress-bar').progressbar();
     }
 
+    // Bootstrap Progressbar with data-transitiongoal (for Top Campaign Performance)
+    if ($(".progress .progress-bar[data-transitiongoal]").length) {
+      $(".progress .progress-bar[data-transitiongoal]").each(function() {
+        var $this = $(this);
+        var goal = $this.data('transitiongoal');
+        $this.progressbar({
+          transition_delay: 1000,
+          refresh_speed: 50,
+          display_text: 'none'
+        });
+      });
+    }
+
+    // Gauge Chart (for Quick Settings Profile Completion)
+    // Temporarily disabled due to library loading issues
+    // TODO: Fix gauge.js loading
+    if ($('#chart_gauge_01').length && typeof Gauge !== 'undefined') {
+      var gauge = new Gauge(document.getElementById("chart_gauge_01")).setOptions({
+        colorStart: '#55BF3B',
+        colorStop: '#55BF3B',
+        strokeColor: '#E0E0E0',
+        generateGradient: true,
+        percentColors: [[0.0, "#a9d70b"], [0.50, "#f9c802"], [1.0, "#ff0000"]]
+      });
+      gauge.maxValue = 100;
+      gauge.animationSpeed = 32;
+      gauge.set(75); // Set to 75%
+      document.getElementById("gauge-text").innerHTML = "75";
+    }
+
+    // World Map (for Visitors Location)
+    if ($('#world-map-gdp').length) {
+      $('#world-map-gdp').vectorMap({
+        map: 'world_en',
+        backgroundColor: null,
+        color: '#ffffff',
+        hoverOpacity: 0.7,
+        selectedColor: '#1de9b6',
+        enableZoom: true,
+        showTooltip: true,
+        values: {
+          'us': 33,
+          'fr': 27,
+          'de': 16,
+          'es': 11,
+          'gb': 10
+        },
+        scaleColors: ['#E2E2E2', '#1de9b6'],
+        normalizeFunction: 'polynomial'
+      });
+    }
+
     // Chart.js initialization - Main Dashboard Chart
     console.log("Chart.js init script started");
     if (typeof Chart !== 'undefined') {

src/main.js

@@ -9,8 +9,10 @@ import 'jquery-ui/ui/widgets/progressbar.js';
 import Chart from 'chart.js/dist/Chart.bundle.js';
 window.Chart = Chart;
 
-console.log('✓ Chart.js loaded:', !!window.Chart);
+// Import additional vendor libraries for dashboard widgets
-console.log('✓ jQuery UI progressbar available:', !!$.fn.progressbar);
+import '../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js';
+import '../vendors/jqvmap/dist/jquery.vmap.js';
+import '../vendors/jqvmap/dist/maps/jquery.vmap.world.js';
 
 // Global styles 
 import './main.scss';
@@ -21,4 +23,27 @@ import 'bootstrap/dist/js/bootstrap.bundle.min.js';
 // Legacy scripts that depend on global jQuery
 import './js/helpers/smartresize.js';
 import './js/sidebar.js';
-import './js/init.js'; 
+import './js/init.js';
+
+// Load gauge.js after everything else
+setTimeout(() => {
+  const script = document.createElement('script');
+  script.src = '/vendors/gauge.js/dist/gauge.min.js';
+  script.onload = () => {
+    // Re-enable gauge functionality after library loads
+    if (typeof Gauge !== 'undefined' && $('#chart_gauge_01').length) {
+      var gauge = new Gauge(document.getElementById("chart_gauge_01")).setOptions({
+        colorStart: '#55BF3B',
+        colorStop: '#55BF3B',
+        strokeColor: '#E0E0E0',
+        generateGradient: true,
+        percentColors: [[0.0, "#a9d70b"], [0.50, "#f9c802"], [1.0, "#ff0000"]]
+      });
+      gauge.maxValue = 100;
+      gauge.animationSpeed = 32;
+      gauge.set(75);
+      document.getElementById("gauge-text").innerHTML = "75";
+    }
+  };
+  document.head.appendChild(script);
+}, 1000); 

src/main.scss

@@ -5,5 +5,9 @@
 @import "jquery-ui/dist/themes/ui-lightness/jquery-ui.css";
 @import "./css/switchery.min.css";
 
+// Vendor CSS for dashboard widgets
+@import "../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css";
+@import "../vendors/jqvmap/dist/jqvmap.min.css";
+
 // Your existing custom SCSS
 @import "./scss/custom.scss";