CHANGELOG.md

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[3.3.0] - 2026-01-26

Responsive Layout Overhaul - Mobile & Sidebar Rework

Complete rework of the mobile experience and sidebar toggle system for a polished, production-ready responsive layout.

Fixed

• Mobile layout completely broken - Sidebar, header, footer, and cards all had layout issues below the lg breakpoint
• Sidebar never toggled on desktop - SidebarManager module existed but was never imported or initialized in main.js
• Duplicate sidebar toggle handlers - Inline <script> blocks in all 21 HTML pages conflicted with SidebarManager, causing desktop toggle clicks to cancel out (both handlers fired, toggling the class on then off)
• Dropdowns pushed layout on mobile - Bootstrap's navbar-expand-lg sets .dropdown-menu to position: static below the lg breakpoint; forced to position: absolute for proper overlay behavior
• Inconsistent mobile breakpoints - Some components used 768px, others 991.98px; standardized to 991.98px (lg) throughout
• Hamburger menu hidden behind logo - Repositioned hamburger into the header navbar flow and pinned it at the sidebar edge on desktop

Changed

• Sidebar toggle architecture - Single source of truth via SidebarManager module; removed all 21 inline sidebar toggle <script> blocks from HTML pages
• Hamburger menu placement - Moved from floating position: fixed element to header navbar; absolutely positioned at sidebar edge on desktop, normal flow on mobile
• Mobile sidebar behavior - Now uses off-screen transform: translateX(-100%) with overlay backdrop instead of broken margin/width toggling
• Desktop sidebar collapse - Clean mini-sidebar (70px) with hidden labels, badges, and submenus; content area adjusts via margin-left transition
• Footer responsive - Resets margin-left to 0 below lg breakpoint

Added

• SidebarManager initialization - Imported and instantiated in main.js (was previously dead code)
• Sidebar backdrop - Added .sidebar-backdrop overlay element to all 21 HTML pages for mobile sidebar
• Mobile sidebar features - Escape key closes sidebar, backdrop click closes, body scroll lock when open, resize handler cleans up state when crossing breakpoints
• Responsive card styles - Smaller padding and icon sizes on mobile for stats cards
• Compact header buttons - Reduced button padding on small screens
• Header dropdown fix - .navbar-nav .dropdown-menu { position: absolute } override in _header.scss

---

[3.2.1] - 2026-01-24

🔧 Maintenance Release - Dependency Updates & Config Improvements

This release updates all dependencies to their latest stable versions and improves the ESLint configuration for better maintainability.

📦 Updated Production Dependencies

• Alpine.js 3.15.2 → 3.15.4 - Bug fixes and performance improvements
• SweetAlert2 11.26.3 → 11.26.17 - Enhanced notification features

📦 Updated Development Dependencies

• Vite 7.2.4 → 7.3.1 - Build performance improvements
• Sass 1.94.2 → 1.97.3 - Latest SCSS compiler with bug fixes
• ESLint 9.39.1 → 9.39.2 - Updated linting rules
• @eslint/js 9.39.1 → 9.39.2 - ESLint JavaScript plugin update
• Prettier 3.7.2 → 3.8.1 - Improved code formatting
• Autoprefixer 10.4.22 → 10.4.23 - Better CSS compatibility

✨ Added

• globals package - Cleaner ESLint configuration using standard browser globals
• if-function deprecation silencing - Suppress Sass deprecation warnings from Bootstrap

🔧 Changed

• ESLint Configuration - Now uses globals package instead of manually listing browser globals
• ECMAScript Version - Updated from 2022 to 2024 in ESLint config
• Vite SCSS Config - Added if-function to silenced deprecations for Bootstrap compatibility

📝 Notes

• Lucide Icons - Rolled back to v0.469.0 due to a packaging bug in newer versions (v0.560+) where ESM entry points are missing. Monitor for fix before upgrading.
• Bootstrap SCSS - Bootstrap uses Sass's deprecated if() function which will be fixed in a future Bootstrap release

🔒 Security

• 0 Vulnerabilities - All dependencies audited with no known security issues

---

[3.2.0] - 2025-11-29

🎉 Maintenance Release - Dependencies, Build Optimization & DX Improvements

This release brings all dependencies to their latest versions, significantly improves build performance through chunk splitting, and enhances developer experience with new configuration files.

🚀 Build Performance Improvements

• Vendor Chunk Splitting - Main bundle reduced from 993KB to 33KB
  • vendor-bootstrap.js (82KB) - Bootstrap & Popper
  • vendor-ui.js (123KB) - Alpine.js, SweetAlert2, Day.js
  • vendor-charts.js (756KB) - Chart.js, ApexCharts
• Better Browser Caching - Vendor chunks cached separately from app code
• Optimized Dependency Pre-bundling - Faster dev server startup

📦 Updated Production Dependencies

• Font Awesome 7.0.1 → 7.1.0 - New icons and improvements
• Alpine.js 3.15.0 → 3.15.2 - Bug fixes and enhancements
• ApexCharts 5.3.5 → 5.3.6 - Chart rendering improvements
• Chart.js 4.5.0 → 4.5.1 - Bug fixes
• Day.js 1.11.18 → 1.11.19 - Date utilities update
• SweetAlert2 11.23.0 → 11.26.3 - Enhanced notification features
• Lucide 0.544.0 → 0.555.0 - More icon options

📦 Updated Development Dependencies

• Vite 7.1.7 → 7.2.4 - Build performance improvements
• Sass 1.93.2 → 1.94.2 - Latest SCSS compiler
• ESLint 9.36.0 → 9.39.1 - Updated linting rules
• Prettier 3.6.2 → 3.7.2 - Improved code formatting
• Autoprefixer 10.4.20 → 10.4.22 - Better CSS compatibility
• PostCSS 8.5.2 → 8.5.6 - CSS processing updates
• Rimraf 6.0.1 → 6.1.2 - Cleanup utility update

✨ Added

• .prettierrc.json - Standardized code formatting configuration
• .prettierignore - Exclude build artifacts from formatting
• .editorconfig - IDE-agnostic coding standards
• postcss.config.js - PostCSS/Autoprefixer configuration
• .env.example - Environment variable template for easy onboarding
• DEVELOPMENT.md - Comprehensive development documentation
• ESLint v9 Configuration - New eslint.config.js flat config format
• New npm scripts:
  • npm run serve - Build and preview in one command
  • npm run lint:fix - Auto-fix linting issues
  • npm run format:check - Check formatting without changes
  • npm run check - Run lint + format check
  • npm run clean:all - Deep clean including node_modules

🐛 Fixed

• Duplicate Method Error - Fixed duplicate changePassword() in security component
• Unused Bootstrap Imports - Removed unused Alert, Button, Carousel, ScrollSpy imports
• ESLint Warnings - Fixed all 16 warnings (now 0 errors, 0 warnings)

🔧 Changed

• Vite Configuration - Cleaner syntax with __dirname helper
• CLAUDE.md - Streamlined to quick reference, detailed docs moved to DEVELOPMENT.md
• .gitignore - Added environment file patterns, removed CLAUDE.md exclusion

🔒 Security

• 0 Vulnerabilities - All dependencies updated with no known security issues

---

[3.1.0] - 2025-09-29

🎉 Enhanced Release - Dependency Updates & Optimization

This release brings the template to the latest standards with updated dependencies, bug fixes, and codebase cleanup.

✨ Added

• CLAUDE.md - Comprehensive AI assistant configuration for better development experience
• Responsive Chart Handling - Improved chart overflow protection with responsive breakpoints
• Window Resize Handlers - Charts now properly resize with browser window changes

📦 Updated Dependencies

• Bootstrap 5.3.7 → 5.3.8 - Latest Bootstrap framework version
• Alpine.js 3.14.9 → 3.15.0 - Enhanced reactive framework
• ApexCharts 4.7.0 → 5.3.5 - Major version upgrade with new features
• Font Awesome 6.7.2 → 7.0.1 - Major version upgrade with new icons
• Vite 7.0.4 → 7.1.7 - Improved build performance
• Sass 1.89.2 → 1.93.2 - Latest SCSS compiler
• ESLint 9.18.0 → 9.36.0 - Updated linting rules
• Prettier 3.4.2 → 3.6.2 - Improved code formatting
• Day.js 1.11.13 → 1.11.18 - Date utilities update
• SweetAlert2 11.22.1 → 11.23.0 - Enhanced notifications
• Lucide 0.469.0 → 0.544.0 - More icon options
• @vitejs/plugin-legacy 7.0.0 → 7.2.1 - Better browser compatibility

🐛 Fixed

• Chart Overflow Issue - Revenue Analytics chart now properly contains itself within card boundaries
• ApexCharts Responsive Rendering - Charts properly resize and redraw on container changes
• CSS Overflow Protection - Added proper overflow handling in chart containers

🧹 Removed (Cleanup)

• Legacy Configuration Files
  • Removed .babelrc (obsolete with Vite)
  • Removed .jshintrc (replaced by ESLint)
  • Removed .travis.yml (outdated CI/CD)
  • Removed .verb.md (old documentation generator)
• Legacy Directories
  • Removed docs/ directory with outdated Bootstrap 3 documentation
  • Confirmed removal of old src/ and dist/ directories
• Gitignore Cleanup
  • Removed references to bower_components
  • Removed grunt-html-validation entries
  • Cleaned up vendor directory references

🔧 Changed

• Chart Container Mixin - Enhanced with better overflow protection and responsive handling
• Analytics Component - Added proper chart cleanup and resize event handlers
• Project Structure - Streamlined to only modern Bootstrap 5 codebase

[3.0.0] - 2025-07-08

🚀 Major Release - Complete Modernization

This is a complete rewrite of the Metis Admin Template with modern web technologies and best practices.

✨ Added

Framework & Technology Stack

• Bootstrap 5.3.7 - Complete upgrade from Bootstrap 3
• Alpine.js - Lightweight reactive framework replacing jQuery
• Vite Build System - Modern build tool with HMR and optimizations
• ES6+ JavaScript - Modern JavaScript with modules and async/await
• SCSS Architecture - Organized, maintainable stylesheet structure
• Bootstrap Icons - 1,800+ modern SVG icons

New Dashboard Pages

• 📈 Analytics Dashboard - Advanced charts and KPI tracking
• 👥 User Management - Complete CRUD operations with data tables
• 📦 Product Management - E-commerce ready product listings with filtering
• 🛒 Order Management - Order tracking and status management
• 📁 File Manager - Modern file browser with upload/download capabilities
• 📅 Calendar - Full-featured event management with modal dialogs
• 💬 Messages - Modern chat interface with real-time styling
• 📊 Reports - Advanced data tables with export functionality
• ⚙️ Settings - Comprehensive admin configuration panels
• 🔒 Security - User permissions and security settings
• ❓ Help & Support - FAQ system, documentation, and support tickets

Design System

• Dark/Light Mode - Seamless theme switching with persistence
• CSS Custom Properties - Full theme customization support
• Modern Typography - Inter font family for enhanced readability
• Responsive Design - Mobile-first approach with adaptive layouts
• Component Library - Reusable UI components with consistent styling
• Animation System - Smooth transitions and micro-interactions

Developer Experience

• Hot Module Replacement - Instant development feedback
• Component Architecture - Modular, reusable JavaScript components
• TypeScript Ready - Full TypeScript support (optional)
• Modern Build Pipeline - Optimized assets with tree shaking
• Source Maps - Better debugging experience
• Linting & Formatting - Code quality tools integration

Interactive Features

• Advanced Forms - Modern form controls with validation
• Data Tables - Sortable, filterable, and searchable tables
• Modal Dialogs - Enhanced user interactions
• Toast Notifications - Rich feedback system
• Search Functionality - Global search with results dropdown
• Keyboard Shortcuts - Improved accessibility and UX
• Fullscreen Toggle - Immersive dashboard experience

🔄 Changed

Complete Technology Migration

• jQuery → Alpine.js - Modern reactive framework (95% smaller bundle)
• LESS → SCSS - More powerful CSS preprocessing
• Gulp → Vite - Lightning-fast build system
• Bootstrap 3 → Bootstrap 5 - Latest framework with utilities
• Font Awesome → Bootstrap Icons - Native Bootstrap icon system
• Static HTML → Interactive Components - Rich, app-like experience

Architecture Improvements

• Modular JavaScript - ES6 modules for better organization
• Component-Based CSS - ITCSS methodology with BEM naming
• Performance Optimization - Tree shaking, code splitting, asset optimization
• Browser Support - Modern browsers only (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)

Design Evolution

• Modern Color Palette - Updated with contemporary design trends
• Enhanced Spacing - Improved visual hierarchy and breathing room
• Professional Typography - Better readability and information density
• Accessibility Improvements - WCAG 2.1 AA compliance
• Mobile Experience - Touch-optimized interactions

📦 Technical Improvements

Performance

• 90%+ Lighthouse Score - Optimized for Core Web Vitals
• Faster Load Times - Modern bundling and asset optimization
• Smaller Bundle Size - Tree shaking and dead code elimination
• Efficient Caching - Better browser caching strategies

Code Quality

• Modern JavaScript - ES6+, async/await, destructuring
• Type Safety - Optional TypeScript support
• Consistent Styling - Prettier and ESLint integration
• Documentation - Comprehensive code comments and guides

Build System

• Development Server - Fast HMR with Vite
• Production Builds - Optimized, minified assets
• Asset Handling - Automatic image optimization
• Environment Support - Development, staging, production configs

🗑️ Removed

Legacy Dependencies

• jQuery - Replaced with Alpine.js
• Bootstrap 3 - Upgraded to Bootstrap 5
• LESS - Migrated to SCSS
• Gulp Build System - Replaced with Vite
• Bower - Removed in favor of npm
• Grunt - No longer needed with Vite

Outdated Features

• IE11 Support - Focus on modern browsers
• Legacy Browser Fallbacks - Simplified for modern web
• Outdated JavaScript Patterns - Replaced with modern alternatives
• Static HTML Includes - Replaced with component architecture

Cleanup

• Unused CSS - Removed redundant styles
• Dead JavaScript Code - Eliminated unused functions
• Legacy Assets - Removed outdated images and icons
• Development Cruft - Cleaned build artifacts and temporary files

🛠️ Migration Guide

For Developers

1. Node.js 18+ required (previously no Node.js requirement)
2. npm install replaces bower install
3. npm run dev replaces gulp serve
4. src-modern/ contains new source files
5. Alpine.js syntax replaces jQuery code

For Customization

1. SCSS Variables in src-modern/styles/scss/abstracts/_variables.scss
2. Component Styles in src-modern/styles/scss/components/
3. JavaScript Components in src-modern/scripts/components/
4. Vite Configuration in vite.config.js

📈 Breaking Changes

• Node.js 18+ Required - Modern development environment needed
• Browser Support - IE11 and legacy browsers no longer supported
• Build System - Complete change from Gulp to Vite
• JavaScript API - Alpine.js replaces jQuery patterns
• CSS Structure - SCSS architecture replaces LESS files
• File Organization - New directory structure in src-modern/

🎯 Upgrade Path

1. Backup Current Implementation - Save existing customizations
2. Install Dependencies - npm install with Node.js 18+
3. Review New Structure - Familiarize with src-modern/ organization
4. Migrate Customizations - Port themes and custom code
5. Test Functionality - Verify all features work as expected
6. Deploy New Version - Use npm run build for production

---

[2.3.2] - 2015-01-12 (Legacy)

Added

• Bootstrap 3.3.6 support
• Many plugins updated
• RTL language support
• Gulp build system
• jQuery-based interactions

Features

• Basic admin dashboard
• Form components
• Data tables
• Chart integration
• File upload functionality

---

[2.3.1] - 2014-11-01 (Legacy)

Added

• Bootstrap 3.3.0 support
• Fixed jquery-timepicker stylesheet
• Added metisMenu plugin
• Many plugins updated

---

[2.2.7] - 2014-07-18 (Legacy)

Added

• Added some layouts sample

---

[2.2.6] - 2014-07-07 (Legacy)

Added

• Bootstrap 3.2.0 support

---

[2.2.5] - 2014-06-04 (Legacy)

Added

• Fixed side panel(s) code
• Deprecated main.js
• Added core.js & app.js

---

[2.2.4] - 2014-04-23 (Legacy)

Added

• RTL version added
• Remove CLEditor
• Added CKEditor

---

[2.2.3] - 2014-04-13 (Legacy)

Added

• Rewrite all code

---

[2.2.2] - 2014-04-10 (Legacy)

Added

• Remove alterne.html
• Right panel available

---

[2.2.1] - 2014-04-07 (Legacy)

Added

• All dependency require bower & npm

---

[2.2.0] - 2014-02-28 (Legacy)

Added

• Rewrite menu, layout, etc

---

[2.1.4] - 2014-02-16 (Legacy)

Added

• Update bootstrap 3.1.1
• Add screenfull.js
• Fixed #menu

---

[2.1.3] - 2014-01-19 (Legacy)

Added

• Add suitcss's flex-embed component

---

[2.1.2] - 2013-11-30 (Legacy)

Added

• Create menu plugin
• Rewrite menu.less

---

[2.1.1.2] - 2013-10-28 (Legacy)

Added

• Add bower

---

[2.1.1.1] - 2013-10-28 (Legacy)

Added

• Remove bootstrap, font awesome, gmaps submodule

---

[2.1.1] - 2013-10-23 (Legacy)

Added

• Added bgimage.html
• Added bgcolor.html pages

---

[2.1] - 2013-10-22 (Legacy)

Added

• Various improvements

---

[1.0] - 2013-02-14 (Legacy)

Added

• Initial release
• Bootstrap 2.3.2 framework
• Basic admin layout
• Essential components

---

Note: Versions prior to 3.0.0 are considered legacy and are no longer actively maintained. Please upgrade to 3.0.0 for the latest features, security updates, and modern web standards compliance.