# Concept - Bootstrap 5 Admin Dashboard

A modern, responsive admin dashboard template built with Bootstrap 5, featuring a clean design and comprehensive functionality for web applications.

![Concept Bootstrap 5 Admin Dashboard](concept-bootstrap-5-admin-dashboard.png)

## 🌟 Live Demo

Experience the full power of Concept dashboard:

**[View Live Demo →](https://colorlib.com/polygon/concept/index.html)**

Explore all features, pages, and components in action. Perfect for evaluating the template before implementation.

## Overview

Concept is a modern admin template built from the ground up with Bootstrap 5.3.8, Vite 7.2.6, and ES6 modules. This jQuery-free dashboard provides a solid foundation for building admin panels, analytics dashboards, and management systems.

## Features

### Core Technologies
- **Bootstrap 5.3.8** - Latest Bootstrap framework with modern components
- **Vite 7.2.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/puikinsh/concept.git
cd concept
```

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
```

### Code Quality Scripts

```bash
# Lint JavaScript files
npm run lint        # Auto-fix issues
npm run lint:check  # Check only

# Format code with Prettier
npm run format       # Auto-format files
npm run format:check # Check formatting
```

## Project Structure

```
concept/
├── 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
├── docs/                # Documentation
├── scripts/             # Build and utility scripts
├── package.json         # Project dependencies
└── vite.config.js       # Vite configuration
```

## Key Dependencies

### Core
- `bootstrap@5.3.8` - UI framework
- `@fortawesome/fontawesome-free@7.1.0` - Icon library
- `vite@7.2.6` - Build tool
- `sass@1.94.2` - CSS preprocessor

### JavaScript Libraries
- `chart.js@4.5.1` - Charts and graphs
- `datatables.net-bs5@2.3.5` - Advanced tables
- `@fullcalendar/core@6.1.19` - Calendar functionality
- `tom-select@2.4.3` - Enhanced select boxes

### Build Tools
- `vite-plugin-handlebars@2.0.0` - Handlebars support
- `@vitejs/plugin-legacy@7.2.1` - 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

## 📚 Documentation

Comprehensive documentation is available in the `docs/` directory:

- **[Getting Started](docs/getting-started/introduction.md)** - Introduction and overview
- **[Quick Start Guide](docs/getting-started/quick-start.md)** - Get running in 5 minutes
- **[Visual Installation Guide](docs/getting-started/visual-guide.md)** - Step-by-step with screenshots
- **[Dashboard Overview](docs/dashboard-overview.md)** - All dashboard variants explained
- **[Component Showcase](docs/components/showcase.md)** - Visual component examples
- **[Deployment Guide](docs/deployment/complete-guide.md)** - Deploy to any platform
- **[Customization](docs/customization/)** - Theme and component customization

### 🚀 Important: Deployment Fix Applied

Navigation links have been updated to work with static hosting. The template now deploys correctly to:
- Netlify (with `_redirects` file included)
- Vercel
- GitHub Pages  
- Traditional web servers
- Docker containers

See the [Complete Deployment Guide](docs/deployment/complete-guide.md) for details.

## 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.

## 🔗 Related Resources

### Premium Dashboard Collections

**[DashboardPack.com](https://dashboardpack.com/)** - Premium dashboard templates and UI kits marketplace featuring Bootstrap, React, Vue, and Angular admin templates with live demos and multiple licensing options.

### Colorlib Admin Dashboard Articles

**[Colorlib.com](https://colorlib.com/)** - Free web design resources and template collections:

- **[42 Free Bootstrap Admin Dashboard Templates 2025](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/)** - Comprehensive collection including AdminLTE, Adminator, ArchitectUI, and more
- **[42 Free HTML5 Admin Dashboard Templates 2025](https://colorlib.com/wp/free-html5-admin-dashboard-templates/)** - HTML5-based admin templates with responsive designs and Bootstrap framework

### Popular Template Categories
- **Finance & Analytics Dashboards** - Templates for financial data and reporting
- **E-commerce Admin Panels** - Store management and inventory solutions  
- **CRM & Sales Dashboards** - Customer relationship management interfaces
- **Project Management** - Team collaboration and task tracking templates

## Support

For support, please open an issue in the GitHub repository.

## Changelog

### Version 3.1.0 (2025-12-02)
- Fixed js-yaml prototype pollution security vulnerability
- Updated Vite to 7.2.6
- Updated ESLint to 9.39.1
- Updated all dependencies to latest stable versions
- Zero security vulnerabilities
- See [CHANGELOG.md](CHANGELOG.md) for detailed changes

### Version 3.0.0 (2025-08-27)
- Updated Bootstrap to 5.3.8
- Added comprehensive CLAUDE.md documentation for AI-assisted development
- ESLint and Prettier integration for code quality
- See [CHANGELOG.md](CHANGELOG.md) for detailed changes