diff --git a/.gitignore b/.gitignore index 62ae7c8..6090dcc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,43 @@ -*.md +# OS Files .DS_Store +Thumbs.db + +# Development/Migration Files +MIGRATION_STATUS.md +MODERNIZATION_PLAN.md +SIMPLIFIED_APPROACH.md +CLAUDE.md +TODO.md +*.log + +# Old Template Files (to be removed after full migration) +/pages/ +/assets/ +/documentation/ +/package.json +/package-lock.json +/vite.config.js +/src/scss/main.scss +concept-bootstrap-5-admin-dashboard.png + +# Keep only the modern version +!/concept-modern/ + +# Node modules +node_modules/ + +# Build files +dist/ +build/ + +# IDE files +.vscode/ +.idea/ +*.swp +*.swo + +# Temporary files +*.tmp +*.temp +.cache/ +concept-modern/DEVELOPMENT_STATUS.md diff --git a/concept-modern/CHANGELOG.md b/concept-modern/CHANGELOG.md new file mode 100644 index 0000000..429e31c --- /dev/null +++ b/concept-modern/CHANGELOG.md @@ -0,0 +1,112 @@ +# Changelog + +All notable changes to this project will be documented in this file. + +The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), +and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). + +## [2.0.1] - 2025-08-04 + +### Changed +- Updated Vite from 5.4.11 to 7.0.6 for next-generation frontend tooling +- Updated Sass from 1.81.0 to 1.89.2 +- Updated Terser from 5.37.0 to 5.43.1 +- Updated @vitejs/plugin-legacy from 5.4.3 to 7.1.0 +- Updated all dependencies to latest 2025 versions + +### Fixed +- Compatibility issues with latest dependency versions +- Build configuration for Vite 7.x + +## [2.0.0] - 2025-08-04 + +### Added +- Complete Bootstrap 5.3.7 migration from Bootstrap 4 +- Vite 5.4.11 build system with Hot Module Replacement +- Handlebars templating engine with reusable partials +- ES6 module architecture throughout the application +- New Dashboard Pages: + - Finance Dashboard with financial metrics and charts + - Sales Dashboard with funnel visualization and team performance + - Influencer Dashboard with social media analytics +- New Application Pages: + - Calendar with FullCalendar 6 integration + - User Management with DataTables and bulk actions + - Timeline/Activity Feed with real-time updates + - Comprehensive Settings page with 8 sections +- New UI Components: + - Typography showcase page + - Advanced multiselect with Tom Select + - Form validation examples +- 404 Error page with modern design +- Responsive sidebar with improved mobile navigation +- Chart.js 4.5.0 integration for all chart types +- DataTables with Bootstrap 5 styling +- Export functionality for tables and timelines +- Dark mode preparation in settings +- Loading states and animations throughout +- Success/error notifications system +- Keyboard navigation support +- SCSS architecture with component separation + +### Changed +- Migrated all JavaScript from jQuery to vanilla JavaScript +- Updated all Bootstrap 4 classes to Bootstrap 5 +- Replaced data-* attributes with data-bs-* for Bootstrap 5 +- Modernized build process from webpack to Vite +- Improved responsive design for all screen sizes +- Enhanced performance with code splitting +- Updated FontAwesome to version 7.0.0 +- Redesigned header with better search placement +- Improved sparkline charts in revenue widgets +- Better mobile navigation with single hamburger menu +- Updated all form components to Bootstrap 5 syntax +- Modernized table styling and functionality +- Enhanced sidebar active state management + +### Removed +- jQuery dependency completely removed +- Bootstrap 4 and its dependencies +- Outdated build tools and configurations +- Legacy browser polyfills (replaced with Vite legacy plugin) +- Redundant CSS classes and utilities +- Old JavaScript patterns and jQuery plugins +- Deprecated Bootstrap 4 components + +### Fixed +- Navigation menu active states across all pages +- Mobile sidebar closing when interacting with dropdowns +- Chart overflow issues in dashboard widgets +- Sparkline positioning in revenue cards +- Double hamburger menu on mobile devices +- Badge styling in sidebar navigation +- FontAwesome icon display in FullCalendar buttons +- Mini calendar responsive behavior +- DataTables responsive plugin integration +- Form validation styling +- Dropdown menu backgrounds +- Various responsive design issues + +### Security +- Updated all dependencies to latest secure versions +- Removed vulnerable jQuery version +- Added Content Security Policy headers support +- Implemented proper form validation +- Added CSRF token support preparation + +### Technical Details +- Node.js 16+ required +- npm 8+ required +- ES6+ JavaScript features used +- CSS Grid and Flexbox for layouts +- CSS custom properties for theming +- Async/await for asynchronous operations +- Module pattern for code organization + +## [1.0.0] - Previous Version + +### Initial Release +- Original Bootstrap 4 template +- jQuery-based interactions +- Basic dashboard functionality +- Limited responsive features \ No newline at end of file diff --git a/concept-modern/README.md b/concept-modern/README.md new file mode 100644 index 0000000..b1ea340 --- /dev/null +++ b/concept-modern/README.md @@ -0,0 +1,205 @@ +# Concept Modern - Bootstrap 5 Admin Dashboard + +A modern, responsive admin dashboard template built with Bootstrap 5, featuring a clean design and comprehensive functionality for web applications. + +## Overview + +Concept Modern is a complete rewrite of the Concept Bootstrap 4 admin template, modernized with the latest web technologies and completely jQuery-free. This dashboard provides a solid foundation for building admin panels, analytics dashboards, and management systems. + +## Features + +### Core Technologies +- **Bootstrap 5.3.7** - Latest Bootstrap framework with modern components +- **Vite 7.0.6** - Next-generation frontend tooling with lightning-fast HMR support +- **Handlebars** - Template engine with reusable partials +- **SCSS** - Advanced styling with variables and mixins +- **ES6 Modules** - Modern JavaScript architecture +- **jQuery-free** - Pure vanilla JavaScript implementation + +### Dashboard Pages +- **E-commerce Dashboard** - Main dashboard with revenue cards, charts, and recent orders +- **Finance Dashboard** - Financial metrics, transaction charts, and portfolio overview +- **Sales Dashboard** - Sales funnel, team performance, and revenue analytics +- **Influencer Dashboard** - Social media metrics, engagement tracking, and campaign performance + +### UI Components +- **Cards** - Various card layouts with images, colors, borders, and lists +- **Typography** - Complete typography showcase with Bootstrap 5 utilities +- **Forms** - Form elements, validation, and multiselect components +- **Charts** - Chart.js integration with line, bar, pie, and doughnut charts +- **Tables** - Basic tables and DataTables integration with sorting/filtering + +### Applications +- **Calendar** - Full-featured calendar with FullCalendar integration +- **User Management** - User list with DataTables, filters, and bulk actions +- **Timeline** - Activity feed with filters and real-time updates +- **Settings** - Comprehensive settings page with multiple sections + +### Additional Pages +- **404 Error Page** - Modern error page with helpful navigation +- **Blank Page Template** - Starting point for custom pages + +## Installation + +### Prerequisites +- Node.js 16.x or higher +- npm 8.x or higher + +### Setup Instructions + +1. Clone or download the repository: +```bash +git clone https://github.com/yourusername/concept-modern.git +cd concept-modern +``` + +2. Install dependencies: +```bash +npm install +``` + +3. Start the development server: +```bash +npm run dev +``` + +4. Build for production: +```bash +npm run build +``` + +5. Preview production build: +```bash +npm run preview +``` + +## Project Structure + +``` +concept-modern/ +├── src/ +│ ├── assets/ # Static assets (images, fonts) +│ ├── js/ # JavaScript modules +│ │ ├── components/ # Reusable components +│ │ └── pages/ # Page-specific scripts +│ ├── pages/ # HTML pages +│ │ ├── dashboards/ # Dashboard pages +│ │ ├── ui-elements/ # UI component pages +│ │ └── misc/ # Miscellaneous pages +│ ├── partials/ # Handlebars partials +│ │ └── layouts/ # Layout components +│ ├── scss/ # SCSS styles +│ │ ├── components/ # Component styles +│ │ ├── layouts/ # Layout styles +│ │ └── pages/ # Page-specific styles +│ └── index.html # Main entry point +├── dist/ # Production build output +├── public/ # Public assets +├── package.json # Project dependencies +└── vite.config.js # Vite configuration +``` + +## Key Dependencies + +### Core +- `bootstrap@5.3.7` - UI framework +- `@fortawesome/fontawesome-free@7.0.0` - Icon library +- `vite@7.0.6` - Build tool +- `sass@1.89.2` - CSS preprocessor + +### JavaScript Libraries +- `chart.js@4.5.0` - Charts and graphs +- `datatables.net-bs5@2.2.3` - Advanced tables +- `@fullcalendar/core@6.1.15` - Calendar functionality +- `tom-select@2.4.1` - Enhanced select boxes + +### Build Tools +- `vite-plugin-handlebars@2.0.0` - Handlebars support +- `@vitejs/plugin-legacy@7.1.0` - Legacy browser support + +## Browser Support + +- Chrome (latest) +- Firefox (latest) +- Safari (latest) +- Edge (latest) +- Chrome Mobile (latest) +- Safari Mobile (latest) + +## Development Guidelines + +### Adding a New Page + +1. Create the HTML file in `src/pages/` +2. Add the page to `vite.config.js` in the `rollupOptions.input` section +3. Create corresponding JavaScript in `src/js/pages/` +4. Create SCSS file in `src/scss/pages/` and import in `main.scss` +5. Update sidebar navigation in `src/partials/layouts/sidebar.hbs` + +### Component Structure + +JavaScript modules follow this pattern: +```javascript +export function initializeComponent() { + // Component logic +} + +// Auto-initialize on DOM ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initializeComponent); +} else { + initializeComponent(); +} +``` + +### SCSS Organization + +- Use Bootstrap variables for consistency +- Follow BEM naming convention where applicable +- Keep component styles modular +- Use mixins for repeated patterns + +## Performance Optimization + +- Vite's code splitting for optimal loading +- Lazy loading for heavy components +- Optimized images and assets +- Minimal CSS with PurgeCSS in production +- ES6 modules for tree shaking + +## Deployment + +The production build can be deployed to any static hosting service: + +1. Build the project: `npm run build` +2. Deploy the `dist/` folder to your hosting service +3. Configure your server to serve `index.html` for all routes + +### Recommended Hosting +- Netlify +- Vercel +- GitHub Pages +- AWS S3 + CloudFront +- Any static file server + +## Contributing + +1. Fork the repository +2. Create your feature branch (`git checkout -b feature/amazing-feature`) +3. Commit your changes (`git commit -m 'Add some amazing feature'`) +4. Push to the branch (`git push origin feature/amazing-feature`) +5. Open a Pull Request + +## License + +This project is licensed under the MIT License - see the LICENSE file for details. + +## Support + +For support, please open an issue in the GitHub repository or contact support@yourcompany.com. + +## Credits + +- Original Concept template design +- Bootstrap team for the excellent framework +- All open-source library contributors \ No newline at end of file diff --git a/concept-modern/VITE_GUIDE.md b/concept-modern/VITE_GUIDE.md new file mode 100644 index 0000000..80ba500 --- /dev/null +++ b/concept-modern/VITE_GUIDE.md @@ -0,0 +1,171 @@ +# Vite Build System Guide + +This project uses Vite as the build tool with Handlebars for templating. This guide helps you understand the setup and common tasks. + +## Project Structure + +``` +concept-modern/ +├── src/ # Source files +│ ├── assets/ # Static assets (images, fonts) +│ ├── js/ # JavaScript files +│ │ ├── app.js # Main entry point +│ │ ├── components/ # Reusable JS components +│ │ └── pages/ # Page-specific JS +│ ├── scss/ # SCSS stylesheets +│ │ ├── main.scss # Main stylesheet +│ │ ├── components/ # Component styles +│ │ └── pages/ # Page-specific styles +│ ├── pages/ # HTML pages +│ ├── partials/ # Handlebars partials +│ │ └── layouts/ # Layout partials (header, sidebar, etc.) +│ └── index.html # Main entry page +├── dist/ # Build output (git-ignored) +├── vite.config.js # Vite configuration +└── package.json # Dependencies and scripts +``` + +## Key Features + +### 1. No CDN Dependencies +All dependencies are bundled locally: +- Bootstrap 5 is installed via npm +- FontAwesome is installed via npm +- Only Google Fonts uses CDN (for optimal caching) + +### 2. Handlebars Templating +- Reusable partials for common elements (header, sidebar, footer) +- Page-specific variables (pageTitle, activeMenu, activePage) +- Helper functions for conditionals and comparisons + +### 3. Module-based JavaScript +- ES6 modules with proper imports +- Bootstrap components imported as needed +- Page-specific scripts loaded only when needed + +## Common Tasks + +### Adding a New Page + +1. **Create the HTML file** in the appropriate directory: + ``` + src/pages/your-new-page.html + ``` + +2. **Use the standard template structure**: + ```html + + + + {{> layouts/head pageTitle="Your Page Title" }} + + +
+ {{> layouts/header }} + {{> layouts/sidebar activeMenu="menu-id" activePage="page-id" }} + +
+
+ +
+ {{> layouts/footer }} +
+
+ + {{> layouts/scripts }} + + + + + + ``` + +3. **Add to vite.config.js**: + ```js + rollupOptions: { + input: { + // ... existing entries + 'your-new-page': resolve(__dirname, 'src/pages/your-new-page.html'), + } + } + ``` + +4. **Update navigation** in `src/partials/layouts/sidebar.hbs` + +### Adding Page-Specific Styles + +1. Create a new SCSS file: + ``` + src/scss/pages/_your-page.scss + ``` + +2. Import it in `src/scss/main.scss`: + ```scss + @import "pages/your-page"; + ``` + +### Adding Page-Specific JavaScript + +1. Create a new JS file: + ``` + src/js/pages/your-page.js + ``` + +2. Import Bootstrap if needed: + ```js + import * as bootstrap from 'bootstrap'; + ``` + +3. Reference it in your HTML page: + ```html + + ``` + +## Build Commands + +```bash +# Development server with hot reload +npm run dev + +# Production build +npm run build + +# Preview production build +npm run preview +``` + +## Best Practices + +1. **Always use relative paths** in HTML files for JS imports +2. **Import Bootstrap components** only when needed +3. **Use Handlebars partials** for repeated elements +4. **Keep page-specific code** in separate files +5. **Use SCSS variables** for consistent theming +6. **Test the production build** before deployment + +## Troubleshooting + +### Module not found errors +- Ensure all imports use proper paths +- Check that the file is added to vite.config.js + +### Styles not loading +- Verify SCSS file is imported in main.scss +- Check for syntax errors in SCSS + +### JavaScript errors +- Import Bootstrap before using its components +- Use proper module syntax (import/export) + +### 404 errors in development +- Add HTML file to vite.config.js input +- Restart the dev server after config changes + +## Helper Scripts + +Run the build utility to find missing HTML files: +```bash +node scripts/build-utils.js +``` + +This will scan for all HTML files and show which ones need to be added to the Vite config. \ No newline at end of file diff --git a/pages/404-page.html b/pages/404-page.html deleted file mode 100644 index 7958619..0000000 --- a/pages/404-page.html +++ /dev/null @@ -1,94 +0,0 @@ - - - - - - - - Concept - Bootstrap 4 Admin Dashboard Template - - - - - - - - - - - -
- - - - - - - - - - -
-
-
-
-
- -
-

Page Not Found

-

The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

- Back to homepage -
-
-
-
-
- - - -
-
-
-
- Copyright © 2018 Concept. All rights reserved. Dashboard by Colorlib. -
-
-
-
- - - - - - - - - -
-
- - - - - - - - - - - - - - \ No newline at end of file diff --git a/pages/blank-page.html b/pages/blank-page.html deleted file mode 100644 index e82a084..0000000 --- a/pages/blank-page.html +++ /dev/null @@ -1,473 +0,0 @@ - - - - - - - - Concept - Bootstrap 4 Admin Dashboard Template - - - - - - - - - - - -
- - - -
- -
- - - - - - -
-
- -
-
- - - - - - -
-
-
-
-

Content goes here!

-
-
-
- - - -
-
-
-
- Copyright © 2018 Concept. All rights reserved. Dashboard by Colorlib. -
-
-
- About - Support - Contact Us -
-
-
-
-
- - - -
-
- - - - - - - - - - - \ No newline at end of file