mirror of https://github.com/ColorlibHQ/gentelella
Navigation and index.html changes
Aigars Silkalns
parent
2f9a826015
commit
d240e8a693
|
|
@ -1,159 +0,0 @@
|
|||
# Performance Optimizations Summary
|
||||
|
||||
## **๐ Major Improvements Implemented**
|
||||
|
||||
### **Before Optimization:**
|
||||
- **Single Bundle**: 779 KB JS (241 KB gzipped) - Everything loaded on every page
|
||||
- **No Code Splitting**: Monolithic loading causing slow initial page loads
|
||||
- **Unused Dependencies**: Chart.js, DataTables, etc. loaded even on simple pages
|
||||
- **Large Images**: Unoptimized 290KB+ images
|
||||
- **Poor Caching**: No intelligent asset naming for browser caching
|
||||
|
||||
### **After Optimization:**
|
||||
- **Split Bundles**: Code split into logical chunks (5 vendor chunks + main)
|
||||
- **Conditional Loading**: Page-specific modules load only when needed
|
||||
- **Asset Optimization**: Intelligent file naming and organization
|
||||
- **Build Optimization**: Console logs removed, terser minification enabled
|
||||
|
||||
---
|
||||
|
||||
## **๐ Bundle Size Improvements**
|
||||
|
||||
### **JavaScript Bundles:**
|
||||
- **main.js**: 79 KB (was 779 KB) - **90% reduction!**
|
||||
- **vendor-core**: 164 KB (Bootstrap, jQuery, essentials)
|
||||
- **vendor-charts**: 219 KB (Chart.js, JQVMap - only loads on chart pages)
|
||||
- **vendor-forms**: 200 KB (Select2, DatePickers - only loads on form pages)
|
||||
- **vendor-ui**: 13 KB (jQuery UI components)
|
||||
- **vendor-utils**: 74 KB (Utilities like dayjs, sparkline)
|
||||
|
||||
### **Total Initial Load** (typical page):
|
||||
- **Before**: 779 KB JS + 527 KB CSS = **1.3 MB**
|
||||
- **After**: 79 KB + 164 KB + 527 KB = **770 KB** - **40% reduction!**
|
||||
|
||||
---
|
||||
|
||||
## **๐ฏ Optimization Strategy Details**
|
||||
|
||||
### **1. Code Splitting & Modular Loading**
|
||||
```javascript
|
||||
// Pages now load only what they need
|
||||
// Dashboard pages: main + vendor-core + vendor-charts + vendor-ui
|
||||
// Form pages: main + vendor-core + vendor-forms
|
||||
// Simple pages: main + vendor-core only
|
||||
|
||||
// Dynamic loading system
|
||||
await loadModule('charts'); // Only loads when charts are needed
|
||||
await loadModule('forms'); // Only loads when forms are needed
|
||||
```
|
||||
|
||||
### **2. Intelligent Asset Management**
|
||||
```javascript
|
||||
// Organized asset structure for better caching
|
||||
dist/
|
||||
โโโ js/[name]-[hash].js // JavaScript with cache-busting
|
||||
โโโ images/[name]-[hash].* // Images with cache-busting
|
||||
โโโ fonts/[name]-[hash].* // Fonts with cache-busting
|
||||
โโโ assets/[name]-[hash].* // Other assets
|
||||
```
|
||||
|
||||
### **3. Build Optimizations**
|
||||
- โ
**Terser minification** with console.log removal
|
||||
- โ
**Manual chunk splitting** for optimal loading
|
||||
- โ
**Asset optimization** with intelligent naming
|
||||
- โ
**Dead code elimination** in production builds
|
||||
|
||||
---
|
||||
|
||||
## **๐ Performance Impact**
|
||||
|
||||
### **Page Load Times** (estimated improvements):
|
||||
- **Dashboard Pages**: 40-50% faster initial load
|
||||
- **Form Pages**: 50-60% faster initial load
|
||||
- **Simple Pages**: 60-70% faster initial load
|
||||
- **Chart Pages**: 30-40% faster (charts load on-demand)
|
||||
|
||||
### **User Experience Improvements:**
|
||||
- โ
**Faster Time to Interactive** - Critical code loads first
|
||||
- โ
**Better Caching** - Vendor code cached separately from app code
|
||||
- โ
**Progressive Loading** - Pages usable before all features load
|
||||
- โ
**Reduced Memory Usage** - Only necessary code in memory
|
||||
|
||||
---
|
||||
|
||||
## **๐ง Implementation Details**
|
||||
|
||||
### **Core Files Created:**
|
||||
- `src/main-core.js` - Essential libraries only (79 KB)
|
||||
- `src/modules/charts.js` - Chart-specific code (219 KB)
|
||||
- `src/modules/forms.js` - Form-specific code (200 KB)
|
||||
- `src/modules/tables.js` - Table-specific code
|
||||
- `src/modules/dashboard.js` - Dashboard widgets
|
||||
|
||||
### **Dynamic Loading System:**
|
||||
```javascript
|
||||
// Automatic loading based on page needs
|
||||
if (document.querySelector('.chart-container')) {
|
||||
await loadModule('charts');
|
||||
}
|
||||
if (document.querySelector('form.advanced')) {
|
||||
await loadModule('forms');
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## **๐ Additional Benefits**
|
||||
|
||||
### **Development Benefits:**
|
||||
- โ
**Faster Development Builds** - Better hot module replacement
|
||||
- โ
**Easier Debugging** - Smaller, focused bundles
|
||||
- โ
**Better Error Tracking** - Clear module boundaries
|
||||
- โ
**Simplified Testing** - Isolated functionality
|
||||
|
||||
### **SEO & Performance Benefits:**
|
||||
- โ
**Better Core Web Vitals** - Improved LCP, FID, CLS scores
|
||||
- โ
**Mobile Performance** - Crucial for mobile users
|
||||
- โ
**Search Engine Ranking** - Page speed is a ranking factor
|
||||
- โ
**User Retention** - Faster pages = better user experience
|
||||
|
||||
---
|
||||
|
||||
## **๐ Next Steps & Recommendations**
|
||||
|
||||
### **Immediate Opportunities:**
|
||||
1. **Image Optimization**: Convert 290KB images to WebP format (60-80% size reduction)
|
||||
2. **Lazy Loading**: Implement lazy loading for images and heavy components
|
||||
3. **Service Worker**: Add caching strategy for offline support
|
||||
|
||||
### **Advanced Optimizations:**
|
||||
1. **Route-based Code Splitting**: Split based on navigation routes
|
||||
2. **Component-level Splitting**: Split individual UI components
|
||||
3. **Preloading Strategy**: Preload likely-needed modules
|
||||
|
||||
### **Monitoring:**
|
||||
- Use `npm run build:analyze` to track bundle sizes over time
|
||||
- Monitor Core Web Vitals in production
|
||||
- Set up performance budgets for CI/CD
|
||||
|
||||
---
|
||||
|
||||
## **๐ Commands**
|
||||
|
||||
```bash
|
||||
# Build with optimization analysis
|
||||
npm run build:analyze
|
||||
|
||||
# Run optimization analysis only
|
||||
npm run optimize
|
||||
|
||||
# Development with optimizations
|
||||
npm run dev
|
||||
|
||||
# Production build
|
||||
npm run build
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Result**: From 1.3MB initial load to 770KB (40% reduction) with much better caching and progressive loading!
|
||||
|
|
@ -264,7 +264,7 @@ Gentelella has been integrated into various frameworks:
|
|||
- **[Django](https://github.com/GiriB/django-gentelella)** - Python Django app
|
||||
- **[Angular](https://github.com/kmkatsma/angular2-webpack-starter-gentelella)** - Angular integration
|
||||
- **[React](https://github.com/thomaslwq/react-admin)** - React implementation
|
||||
- **[Symfony](https://github.com/mamless/Gentella-admin-Symfony-5)** - Symfony 5 integration
|
||||
- **[Symfony](https://github.com/mamless/Gentella-admin-Symfony-6)** - Symfony 6 integration
|
||||
- **[Yii](https://github.com/yiister/yii2-gentelella)** - Yii framework integration
|
||||
- **[Flask](https://github.com/afourmy/flask-gentelella)** - Python Flask app
|
||||
- **[CakePHP](https://github.com/backstageel/cakephp-gentelella-theme)** - CakePHP integration
|
||||
|
|
|
|||
|
|
@ -1,686 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Performance Guide
|
||||
nav_order: 5
|
||||
---
|
||||
|
||||
# Performance Optimization
|
||||
{: .no_toc }
|
||||
|
||||
Complete guide to optimizing Gentelella Admin Template for maximum performance
|
||||
{: .fs-6 .fw-300 }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Performance Overview
|
||||
|
||||
Gentelella v2.0 includes significant performance improvements over the original version:
|
||||
|
||||
### Performance Metrics
|
||||
|
||||
| Metric | v1.0 | v2.0 | Improvement |
|
||||
|--------|------|------|-------------|
|
||||
| **Initial Bundle Size** | 779 KB | 79 KB | **90% smaller** |
|
||||
| **Total Page Load** | 1.3 MB | 770 KB | **40% reduction** |
|
||||
| **First Contentful Paint** | 2.1s | 0.8s | **62% faster** |
|
||||
| **Time to Interactive** | 3.5s | 1.2s | **66% faster** |
|
||||
| **Largest Contentful Paint** | 2.8s | 1.1s | **61% faster** |
|
||||
| **Cumulative Layout Shift** | 0.15 | 0.03 | **80% improvement** |
|
||||
|
||||
---
|
||||
|
||||
## Smart Loading System
|
||||
|
||||
### Core vs. Module Architecture
|
||||
|
||||
The template uses a two-tier loading system:
|
||||
|
||||
#### Core Bundle (79KB) - Always Loaded
|
||||
Essential functionality that every page needs:
|
||||
|
||||
```javascript
|
||||
// src/main-core.js
|
||||
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
|
||||
import './js/custom.min.js';
|
||||
|
||||
// Initialize tooltips and popovers
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Bootstrap components initialization
|
||||
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
||||
tooltips.forEach(tooltip => new bootstrap.Tooltip(tooltip));
|
||||
|
||||
const popovers = document.querySelectorAll('[data-bs-toggle="popover"]');
|
||||
popovers.forEach(popover => new bootstrap.Popover(popover));
|
||||
});
|
||||
```
|
||||
|
||||
#### Conditional Modules - Loaded on Demand
|
||||
|
||||
**Charts Module** (219KB)
|
||||
```javascript
|
||||
// Only loads when chart elements are detected
|
||||
if (document.querySelector('.chart-container')) {
|
||||
const charts = await import('./modules/charts.js');
|
||||
charts.initializeCharts();
|
||||
}
|
||||
```
|
||||
|
||||
**Forms Module** (200KB)
|
||||
```javascript
|
||||
// Only loads on pages with enhanced forms
|
||||
if (document.querySelector('.select2, .datepicker, .form-wizard')) {
|
||||
const forms = await import('./modules/forms.js');
|
||||
forms.initializeForms();
|
||||
}
|
||||
```
|
||||
|
||||
**Tables Module**
|
||||
```javascript
|
||||
// Only loads when DataTables are needed
|
||||
if (document.querySelector('.datatable')) {
|
||||
const tables = await import('./modules/tables.js');
|
||||
tables.initializeTables();
|
||||
}
|
||||
```
|
||||
|
||||
### Module Loading Strategy
|
||||
|
||||
```javascript
|
||||
// Smart module detection and loading
|
||||
export async function loadRequiredModules() {
|
||||
const modules = [];
|
||||
|
||||
// Check for chart requirements
|
||||
if (document.querySelector('canvas, .morris-chart, .sparkline')) {
|
||||
modules.push(import('./modules/charts.js'));
|
||||
}
|
||||
|
||||
// Check for form enhancements
|
||||
if (document.querySelector('.select2, .datepicker, .ion-range-slider')) {
|
||||
modules.push(import('./modules/forms.js'));
|
||||
}
|
||||
|
||||
// Check for table features
|
||||
if (document.querySelector('.datatable, table[data-table]')) {
|
||||
modules.push(import('./modules/tables.js'));
|
||||
}
|
||||
|
||||
// Check for dashboard widgets
|
||||
if (document.querySelector('.dashboard-widget, .tile_count')) {
|
||||
modules.push(import('./modules/dashboard.js'));
|
||||
}
|
||||
|
||||
// Load all required modules in parallel
|
||||
const loadedModules = await Promise.all(modules);
|
||||
|
||||
// Initialize each module
|
||||
loadedModules.forEach(module => {
|
||||
if (module.initialize) {
|
||||
module.initialize();
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Bundle Optimization
|
||||
|
||||
### Manual Chunk Splitting
|
||||
|
||||
The Vite configuration includes optimized chunk splitting:
|
||||
|
||||
```javascript
|
||||
// vite.config.js
|
||||
export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
// Core vendor libraries (loaded on every page)
|
||||
'vendor-core': [
|
||||
'bootstrap',
|
||||
'@popperjs/core'
|
||||
],
|
||||
|
||||
// Chart libraries (loaded only when needed)
|
||||
'vendor-charts': [
|
||||
'chart.js',
|
||||
'morris.js',
|
||||
'gauge.js',
|
||||
'jquery-sparkline'
|
||||
],
|
||||
|
||||
// Form enhancement libraries
|
||||
'vendor-forms': [
|
||||
'select2',
|
||||
'tempus-dominus',
|
||||
'ion-rangeslider',
|
||||
'switchery'
|
||||
],
|
||||
|
||||
// Table functionality
|
||||
'vendor-tables': [
|
||||
'datatables.net',
|
||||
'datatables.net-bs5',
|
||||
'datatables.net-responsive',
|
||||
'datatables.net-buttons'
|
||||
],
|
||||
|
||||
// Utility libraries
|
||||
'vendor-utils': [
|
||||
'dayjs',
|
||||
'nprogress',
|
||||
'autosize'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Tree Shaking
|
||||
|
||||
Import only what you need:
|
||||
|
||||
```javascript
|
||||
// โ Bad - imports entire library
|
||||
import * as dayjs from 'dayjs';
|
||||
|
||||
// โ
Good - imports only specific functions
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
|
||||
// โ Bad - imports entire Chart.js
|
||||
import Chart from 'chart.js';
|
||||
|
||||
// โ
Good - imports only needed components
|
||||
import {
|
||||
Chart,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from 'chart.js';
|
||||
|
||||
Chart.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend
|
||||
);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Asset Optimization
|
||||
|
||||
### Image Optimization
|
||||
|
||||
#### Responsive Images
|
||||
```html
|
||||
<!-- Use responsive images with srcset -->
|
||||
<img src="images/thumb-400.jpg"
|
||||
srcset="images/thumb-400.jpg 400w,
|
||||
images/thumb-800.jpg 800w,
|
||||
images/thumb-1200.jpg 1200w"
|
||||
sizes="(max-width: 768px) 100vw,
|
||||
(max-width: 1200px) 50vw,
|
||||
33vw"
|
||||
alt="Dashboard preview"
|
||||
loading="lazy">
|
||||
```
|
||||
|
||||
#### WebP Format with Fallback
|
||||
```html
|
||||
<picture>
|
||||
<source srcset="images/dashboard.webp" type="image/webp">
|
||||
<source srcset="images/dashboard.jpg" type="image/jpeg">
|
||||
<img src="images/dashboard.jpg" alt="Dashboard" loading="lazy">
|
||||
</picture>
|
||||
```
|
||||
|
||||
#### Lazy Loading
|
||||
```html
|
||||
<!-- Native lazy loading -->
|
||||
<img src="images/placeholder.jpg"
|
||||
data-src="images/actual-image.jpg"
|
||||
loading="lazy"
|
||||
alt="Description">
|
||||
|
||||
<!-- Intersection Observer approach -->
|
||||
<img class="lazy"
|
||||
src="images/placeholder.jpg"
|
||||
data-src="images/actual-image.jpg"
|
||||
alt="Description">
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Lazy loading implementation
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
img.classList.remove('lazy');
|
||||
observer.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('img[data-src]').forEach(img => {
|
||||
imageObserver.observe(img);
|
||||
});
|
||||
```
|
||||
|
||||
### Font Optimization
|
||||
|
||||
#### Font Loading Strategy
|
||||
```html
|
||||
<!-- Preload critical fonts -->
|
||||
<link rel="preload" href="/fonts/roboto-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/roboto-bold.woff2" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
<!-- Font display swap for better performance -->
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/roboto-regular.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### Subset Fonts
|
||||
```css
|
||||
/* Load only the characters you need */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Caching Strategies
|
||||
|
||||
### Browser Caching
|
||||
|
||||
#### Vite Asset Hashing
|
||||
```javascript
|
||||
// vite.config.js
|
||||
export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
output: {
|
||||
// Add hash to filenames for cache busting
|
||||
entryFileNames: `assets/[name].[hash].js`,
|
||||
chunkFileNames: `assets/[name].[hash].js`,
|
||||
assetFileNames: `assets/[name].[hash].[ext]`
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### Service Worker Implementation
|
||||
```javascript
|
||||
// sw.js - Service Worker for caching
|
||||
const CACHE_NAME = 'gentelella-v2.0.0';
|
||||
const urlsToCache = [
|
||||
'/',
|
||||
'/assets/vendor-core.js',
|
||||
'/assets/main-core.js',
|
||||
'/assets/main.css',
|
||||
'/images/favicon.ico'
|
||||
];
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME)
|
||||
.then(cache => cache.addAll(urlsToCache))
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', event => {
|
||||
event.respondWith(
|
||||
caches.match(event.request)
|
||||
.then(response => {
|
||||
// Return cached version or fetch from network
|
||||
return response || fetch(event.request);
|
||||
})
|
||||
);
|
||||
});
|
||||
```
|
||||
|
||||
### CDN Integration
|
||||
|
||||
```javascript
|
||||
// vite.config.js - CDN configuration
|
||||
export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
external: ['jquery', 'bootstrap'],
|
||||
output: {
|
||||
globals: {
|
||||
jquery: 'jQuery',
|
||||
bootstrap: 'bootstrap'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- Load popular libraries from CDN -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Runtime Performance
|
||||
|
||||
### Efficient DOM Manipulation
|
||||
|
||||
#### Batch DOM Updates
|
||||
```javascript
|
||||
// โ Bad - multiple reflows
|
||||
function updateMultipleElements(data) {
|
||||
data.forEach(item => {
|
||||
const element = document.getElementById(item.id);
|
||||
element.style.width = item.width + 'px';
|
||||
element.style.height = item.height + 'px';
|
||||
element.textContent = item.text;
|
||||
});
|
||||
}
|
||||
|
||||
// โ
Good - single reflow
|
||||
function updateMultipleElements(data) {
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
data.forEach(item => {
|
||||
const element = document.getElementById(item.id).cloneNode(true);
|
||||
element.style.width = item.width + 'px';
|
||||
element.style.height = item.height + 'px';
|
||||
element.textContent = item.text;
|
||||
fragment.appendChild(element);
|
||||
});
|
||||
|
||||
document.body.appendChild(fragment);
|
||||
}
|
||||
```
|
||||
|
||||
#### Event Delegation
|
||||
```javascript
|
||||
// โ Bad - multiple event listeners
|
||||
document.querySelectorAll('.btn').forEach(btn => {
|
||||
btn.addEventListener('click', handleClick);
|
||||
});
|
||||
|
||||
// โ
Good - single delegated listener
|
||||
document.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('btn')) {
|
||||
handleClick(e);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Memory Management
|
||||
|
||||
#### Cleanup Event Listeners
|
||||
```javascript
|
||||
class Component {
|
||||
constructor(element) {
|
||||
this.element = element;
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
this.element.addEventListener('click', this.handleClick);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
// Clean up event listeners
|
||||
this.element.removeEventListener('click', this.handleClick);
|
||||
this.element = null;
|
||||
}
|
||||
|
||||
handleClick(e) {
|
||||
// Handle click
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Debounce Expensive Operations
|
||||
```javascript
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
// Usage for search
|
||||
const debouncedSearch = debounce(performSearch, 300);
|
||||
document.getElementById('search').addEventListener('input', debouncedSearch);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Monitoring and Analysis
|
||||
|
||||
### Performance Monitoring
|
||||
|
||||
#### Core Web Vitals
|
||||
```javascript
|
||||
// Monitor Core Web Vitals
|
||||
import {getCLS, getFID, getFCP, getLCP, getTTFB} from 'web-vitals';
|
||||
|
||||
function sendToAnalytics(metric) {
|
||||
// Send to your analytics service
|
||||
console.log(metric);
|
||||
}
|
||||
|
||||
getCLS(sendToAnalytics);
|
||||
getFID(sendToAnalytics);
|
||||
getFCP(sendToAnalytics);
|
||||
getLCP(sendToAnalytics);
|
||||
getTTFB(sendToAnalytics);
|
||||
```
|
||||
|
||||
#### Performance Observer
|
||||
```javascript
|
||||
// Monitor long tasks
|
||||
const observer = new PerformanceObserver((list) => {
|
||||
for (const entry of list.getEntries()) {
|
||||
console.log('Long task detected:', entry);
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe({entryTypes: ['longtask']});
|
||||
|
||||
// Monitor resource loading
|
||||
const resourceObserver = new PerformanceObserver((list) => {
|
||||
for (const entry of list.getEntries()) {
|
||||
if (entry.duration > 1000) {
|
||||
console.log('Slow resource:', entry.name, entry.duration);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
resourceObserver.observe({entryTypes: ['resource']});
|
||||
```
|
||||
|
||||
### Bundle Analysis
|
||||
|
||||
#### Webpack Bundle Analyzer
|
||||
```bash
|
||||
# Analyze your bundles
|
||||
npm run build:analyze
|
||||
```
|
||||
|
||||
```javascript
|
||||
// scripts/analyze.js
|
||||
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
process.env.ANALYZE && new BundleAnalyzerPlugin()
|
||||
].filter(Boolean)
|
||||
});
|
||||
```
|
||||
|
||||
#### Lighthouse CI
|
||||
```yaml
|
||||
# .github/workflows/lighthouse.yml
|
||||
name: Lighthouse CI
|
||||
on: [push]
|
||||
jobs:
|
||||
lighthouse:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Use Node.js
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: '16'
|
||||
- run: npm install
|
||||
- run: npm run build
|
||||
- name: Run Lighthouse CI
|
||||
uses: treosh/lighthouse-ci-action@v8
|
||||
with:
|
||||
configPath: './lighthouserc.json'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Performance Checklist
|
||||
|
||||
### Development Phase
|
||||
|
||||
- [ ] **Code Splitting**: Implement route-based and component-based splitting
|
||||
- [ ] **Tree Shaking**: Import only needed functions and components
|
||||
- [ ] **Module Loading**: Use dynamic imports for non-critical code
|
||||
- [ ] **Bundle Analysis**: Regularly analyze bundle sizes
|
||||
- [ ] **Dead Code**: Remove unused CSS and JavaScript
|
||||
|
||||
### Asset Optimization
|
||||
|
||||
- [ ] **Images**: Optimize, use WebP format, implement lazy loading
|
||||
- [ ] **Fonts**: Subset fonts, use font-display: swap
|
||||
- [ ] **Icons**: Use icon fonts or SVG sprites
|
||||
- [ ] **Compression**: Enable gzip/brotli compression
|
||||
- [ ] **Minification**: Minify CSS, JavaScript, and HTML
|
||||
|
||||
### Caching Strategy
|
||||
|
||||
- [ ] **Browser Caching**: Set appropriate cache headers
|
||||
- [ ] **CDN**: Use CDN for static assets
|
||||
- [ ] **Service Worker**: Implement for offline functionality
|
||||
- [ ] **Versioning**: Use file hashing for cache busting
|
||||
|
||||
### Runtime Performance
|
||||
|
||||
- [ ] **Event Delegation**: Use for dynamic content
|
||||
- [ ] **Debouncing**: Implement for expensive operations
|
||||
- [ ] **Memory Leaks**: Clean up event listeners and timers
|
||||
- [ ] **DOM Manipulation**: Batch updates and use DocumentFragment
|
||||
|
||||
### Monitoring
|
||||
|
||||
- [ ] **Core Web Vitals**: Monitor LCP, FID, CLS
|
||||
- [ ] **Performance API**: Track loading times
|
||||
- [ ] **Error Tracking**: Monitor JavaScript errors
|
||||
- [ ] **User Experience**: Track real user metrics
|
||||
|
||||
---
|
||||
|
||||
## Advanced Optimization Techniques
|
||||
|
||||
### Preloading Strategies
|
||||
|
||||
#### Module Preloading
|
||||
```html
|
||||
<!-- Preload critical modules -->
|
||||
<link rel="modulepreload" href="/assets/vendor-core.js">
|
||||
<link rel="modulepreload" href="/assets/main-core.js">
|
||||
|
||||
<!-- Prefetch likely-needed modules -->
|
||||
<link rel="prefetch" href="/assets/vendor-charts.js">
|
||||
<link rel="prefetch" href="/assets/vendor-forms.js">
|
||||
```
|
||||
|
||||
#### Predictive Loading
|
||||
```javascript
|
||||
// Preload modules based on user behavior
|
||||
const observeNavigation = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const href = entry.target.getAttribute('href');
|
||||
|
||||
// Preload likely modules for the target page
|
||||
if (href.includes('charts')) {
|
||||
import('./modules/charts.js');
|
||||
} else if (href.includes('forms')) {
|
||||
import('./modules/forms.js');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Observe navigation links
|
||||
document.querySelectorAll('a[href]').forEach(link => {
|
||||
observeNavigation.observe(link);
|
||||
});
|
||||
```
|
||||
|
||||
### Critical Path Optimization
|
||||
|
||||
#### Critical CSS Inlining
|
||||
```html
|
||||
<style>
|
||||
/* Inline critical CSS for above-the-fold content */
|
||||
.header, .sidebar, .main-content { /* critical styles */ }
|
||||
</style>
|
||||
|
||||
<!-- Load full CSS asynchronously -->
|
||||
<link rel="preload" href="/assets/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
|
||||
```
|
||||
|
||||
#### Resource Hints
|
||||
```html
|
||||
<!-- DNS prefetch for external resources -->
|
||||
<link rel="dns-prefetch" href="//fonts.googleapis.com">
|
||||
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">
|
||||
|
||||
<!-- Preconnect to critical third-party origins -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
- **[Deployment Guide]({{ site.baseurl }}/docs/deployment/)** - Deploy optimized builds
|
||||
- **[Monitoring Guide]({{ site.baseurl }}/docs/monitoring/)** - Set up performance monitoring
|
||||
- **[Troubleshooting]({{ site.baseurl }}/docs/troubleshooting/)** - Solve performance issues
|
||||
|
||||
---
|
||||
|
||||
{: .highlight }
|
||||
๐ก **Pro Tip**: Use the `npm run optimize` command to analyze your current bundle and get personalized optimization recommendations based on your specific usage patterns.
|
||||
|
|
@ -24,7 +24,6 @@
|
|||
"echarts": "^5.6.0",
|
||||
"fastclick": "^1.0.6",
|
||||
"flot": "^4.2.6",
|
||||
"gauge.js": "^0.2.1",
|
||||
"gaugeJS": "^1.3.9",
|
||||
"icheck": "^1.0.2",
|
||||
"ion-rangeslider": "^2.3.1",
|
||||
|
|
@ -1582,12 +1581,6 @@
|
|||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/gauge.js": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/gauge.js/-/gauge.js-0.2.1.tgz",
|
||||
"integrity": "sha512-kkpKXyL5uKg1wdU9q6XQ67s2klhH4Cuw0NzU5rCvMHqRy70MB4w/6MUk3Y22+IjJJ9hERFkqLhi3iafjtmcvFg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/gaugeJS": {
|
||||
"version": "1.3.9",
|
||||
"resolved": "https://registry.npmjs.org/gaugeJS/-/gaugeJS-1.3.9.tgz",
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@
|
|||
"echarts": "^5.6.0",
|
||||
"fastclick": "^1.0.6",
|
||||
"flot": "^4.2.6",
|
||||
"gauge.js": "^0.2.1",
|
||||
"gaugeJS": "^1.3.9",
|
||||
"icheck": "^1.0.2",
|
||||
"ion-rangeslider": "^2.3.1",
|
||||
|
|
|
|||
|
|
@ -49,9 +49,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -42,9 +42,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -42,9 +42,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,12 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
<li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
@ -574,32 +577,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Gauge</h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="#">Settings 1</a>
|
||||
<a class="dropdown-item" href="#">Settings 2</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="btn-close-link"><i class="fas fa-times"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<div id="echart_gauge" style="height:370px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -44,9 +44,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -44,9 +44,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -44,9 +44,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -44,9 +44,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -48,9 +48,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -48,9 +48,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -49,9 +49,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" href="images/favicon.ico" type="image/ico" />
|
||||
|
||||
<title>Gentelella Alela!</title>
|
||||
<title>Dashboard 1 - Gentelella</title>
|
||||
|
||||
|
||||
|
||||
|
|
@ -48,9 +48,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
<li><a href="index4.html">Dashboard 4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
@ -261,39 +262,63 @@
|
|||
<div class="right_col" role="main">
|
||||
<!-- top tiles -->
|
||||
<div class="row">
|
||||
<div class="tile_count">
|
||||
<div class="col-md-2 col-sm-4 tile_stats_count">
|
||||
<span class="count_top"><i class="fa fa-user"></i> Total Users</span>
|
||||
<div class="count">2500</div>
|
||||
<span class="count_bottom"><i class="green">4% </i> From last Week</span>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-4 tile_stats_count">
|
||||
<span class="count_top"><i class="fa fa-clock-o"></i> Average Time</span>
|
||||
<div class="count">123.50</div>
|
||||
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-4 tile_stats_count">
|
||||
<span class="count_top"><i class="fa fa-user"></i> Total Males</span>
|
||||
<div class="count green">2,500</div>
|
||||
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-4 tile_stats_count">
|
||||
<span class="count_top"><i class="fa fa-user"></i> Total Females</span>
|
||||
<div class="count">4,567</div>
|
||||
<span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-4 tile_stats_count">
|
||||
<span class="count_top"><i class="fa fa-user"></i> Total Collections</span>
|
||||
<div class="count">2,315</div>
|
||||
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-4 tile_stats_count">
|
||||
<span class="count_top"><i class="fa fa-user"></i> Total Connections</span>
|
||||
<div class="count">7,325</div>
|
||||
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
|
||||
<div class="tile_count" style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; width: 100%;">
|
||||
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count" style="flex: 1; min-width: 180px; height: 120px; display: flex; flex-direction: column; justify-content: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 5px; padding: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.12);">
|
||||
<span class="count_top" style="display: flex; align-items: center; margin-bottom: 8px;">
|
||||
<i class="fas fa-users" style="color: #3498db; font-size: 32px; margin-right: 12px;"></i>
|
||||
<div>
|
||||
<div class="count" style="font-size: 24px; font-weight: bold; color: #34495e; line-height: 1;">2,500</div>
|
||||
<span class="count_bottom" style="font-size: 12px; color: #7f8c8d; text-transform: uppercase;">Total Users</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count" style="flex: 1; min-width: 180px; height: 120px; display: flex; flex-direction: column; justify-content: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 5px; padding: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.12);">
|
||||
<span class="count_top" style="display: flex; align-items: center; margin-bottom: 8px;">
|
||||
<i class="fas fa-clock" style="color: #e74c3c; font-size: 32px; margin-right: 12px;"></i>
|
||||
<div>
|
||||
<div class="count" style="font-size: 24px; font-weight: bold; color: #34495e; line-height: 1;">123.5<small>min</small></div>
|
||||
<span class="count_bottom" style="font-size: 12px; color: #7f8c8d; text-transform: uppercase;">Average Time</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count" style="flex: 1; min-width: 180px; height: 120px; display: flex; flex-direction: column; justify-content: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 5px; padding: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.12);">
|
||||
<span class="count_top" style="display: flex; align-items: center; margin-bottom: 8px;">
|
||||
<i class="fas fa-shopping-cart" style="color: #f39c12; font-size: 32px; margin-right: 12px;"></i>
|
||||
<div>
|
||||
<div class="count" style="font-size: 24px; font-weight: bold; color: #34495e; line-height: 1;">1,240</div>
|
||||
<span class="count_bottom" style="font-size: 12px; color: #7f8c8d; text-transform: uppercase;">Total Orders</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count" style="flex: 1; min-width: 180px; height: 120px; display: flex; flex-direction: column; justify-content: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 5px; padding: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.12);">
|
||||
<span class="count_top" style="display: flex; align-items: center; margin-bottom: 8px;">
|
||||
<i class="fas fa-dollar-sign" style="color: #2ecc71; font-size: 32px; margin-right: 12px;"></i>
|
||||
<div>
|
||||
<div class="count" style="font-size: 24px; font-weight: bold; color: #34495e; line-height: 1;">$24,567</div>
|
||||
<span class="count_bottom" style="font-size: 12px; color: #7f8c8d; text-transform: uppercase;">Total Revenue</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count" style="flex: 1; min-width: 180px; height: 120px; display: flex; flex-direction: column; justify-content: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 5px; padding: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.12);">
|
||||
<span class="count_top" style="display: flex; align-items: center; margin-bottom: 8px;">
|
||||
<i class="fas fa-chart-line" style="color: #9b59b6; font-size: 32px; margin-right: 12px;"></i>
|
||||
<div>
|
||||
<div class="count" style="font-size: 24px; font-weight: bold; color: #34495e; line-height: 1;">2,315</div>
|
||||
<span class="count_bottom" style="font-size: 12px; color: #7f8c8d; text-transform: uppercase;">Conversions</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count" style="flex: 1; min-width: 180px; height: 120px; display: flex; flex-direction: column; justify-content: center; background: #fff; border: 1px solid #e6e9ed; border-radius: 5px; padding: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.12);">
|
||||
<span class="count_top" style="display: flex; align-items: center; margin-bottom: 8px;">
|
||||
<i class="fas fa-eye" style="color: #1abc9c; font-size: 32px; margin-right: 12px;"></i>
|
||||
<div>
|
||||
<div class="count" style="font-size: 24px; font-weight: bold; color: #34495e; line-height: 1;">47,325</div>
|
||||
<span class="count_bottom" style="font-size: 12px; color: #7f8c8d; text-transform: uppercase;">Page Views</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /top tiles -->
|
||||
|
||||
<div class="row">
|
||||
|
|
@ -606,10 +631,9 @@
|
|||
|
||||
<div class="sidebar-widget">
|
||||
<h4>Profile Completion</h4>
|
||||
<canvas width="150" height="80" id="chart_gauge_01" class="" style="width: 160px; height: 100px;"></canvas>
|
||||
<div id="profile_completion_gauge" style="width:160px;height:120px;margin:0 auto;"></div>
|
||||
<div class="goal-wrapper">
|
||||
<span id="gauge-text" class="gauge-value pull-left">0</span>
|
||||
<span class="gauge-value pull-left">%</span>
|
||||
<span class="goal-value pull-left">67%</span>
|
||||
<span id="goal-text" class="goal-value pull-right">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -643,18 +667,18 @@
|
|||
</div>
|
||||
<div class="x_content">
|
||||
<div class="dashboard-widget-content">
|
||||
|
||||
<ul class="list-unstyled timeline widget">
|
||||
<div class="activities-scroll">
|
||||
<ul class="list-unstyled timeline widget">
|
||||
<li>
|
||||
<div class="block">
|
||||
<div class="block_content">
|
||||
<h2 class="title">
|
||||
<a>Who Needs Sundance When You've Got Crowdfunding?</a>
|
||||
</h2>
|
||||
<a><i class="fas fa-shopping-cart" style="color: #26B99A; margin-right: 8px;"></i>New Order Received</a>
|
||||
</h2>
|
||||
<div class="byline">
|
||||
<span>13 hours ago</span> by <a>Jane Smith</a>
|
||||
<span>2 minutes ago</span> by <a>Customer #12455</a>
|
||||
</div>
|
||||
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they'd pay to Fast-forward andโฆ <a>Read More</a>
|
||||
<p class="excerpt">Order #ORD-12455 for $2,350.00 has been placed. Customer ordered premium package with expedited shipping. <a>View Details</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -663,12 +687,12 @@
|
|||
<div class="block">
|
||||
<div class="block_content">
|
||||
<h2 class="title">
|
||||
<a>Who Needs Sundance When You've Got Crowdfunding?</a>
|
||||
</h2>
|
||||
<a><i class="fas fa-user-plus" style="color: #3498DB; margin-right: 8px;"></i>New User Registration</a>
|
||||
</h2>
|
||||
<div class="byline">
|
||||
<span>13 hours ago</span> by <a>Jane Smith</a>
|
||||
<span>15 minutes ago</span> by <a>john.doe@example.com</a>
|
||||
</div>
|
||||
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they'd pay to Fast-forward andโฆ <a>Read More</a>
|
||||
<p class="excerpt">New user registered with premium membership. Account verified and welcome email sent successfully. <a>View Profile</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -677,12 +701,12 @@
|
|||
<div class="block">
|
||||
<div class="block_content">
|
||||
<h2 class="title">
|
||||
<a>Who Needs Sundance When You've Got Crowdfunding?</a>
|
||||
</h2>
|
||||
<a><i class="fas fa-credit-card" style="color: #F39C12; margin-right: 8px;"></i>Payment Processed</a>
|
||||
</h2>
|
||||
<div class="byline">
|
||||
<span>13 hours ago</span> by <a>Jane Smith</a>
|
||||
<span>32 minutes ago</span> by <a>Payment Gateway</a>
|
||||
</div>
|
||||
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they'd pay to Fast-forward andโฆ <a>Read More</a>
|
||||
<p class="excerpt">Payment of $1,250.00 successfully processed for Order #ORD-12453. Funds have been deposited to merchant account. <a>View Transaction</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -691,26 +715,298 @@
|
|||
<div class="block">
|
||||
<div class="block_content">
|
||||
<h2 class="title">
|
||||
<a>Who Needs Sundance When You've Got Crowdfunding?</a>
|
||||
</h2>
|
||||
<a><i class="fas fa-star" style="color: #E74C3C; margin-right: 8px;"></i>Product Review Submitted</a>
|
||||
</h2>
|
||||
<div class="byline">
|
||||
<span>13 hours ago</span> by <a>Jane Smith</a>
|
||||
<span>1 hour ago</span> by <a>Sarah Johnson</a>
|
||||
</div>
|
||||
<p class="excerpt">Film festivals used to be do-or-die moments for movie makers. They were where you met the producers that could fund your project, and if the buyers liked your flick, they'd pay to Fast-forward andโฆ <a>Read More</a>
|
||||
<p class="excerpt">5-star review submitted for "Premium Wireless Headphones". Customer praised excellent sound quality and fast delivery. <a>Read Review</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<li>
|
||||
<div class="block">
|
||||
<div class="block_content">
|
||||
<h2 class="title">
|
||||
<a><i class="fas fa-truck" style="color: #9B59B6; margin-right: 8px;"></i>Shipment Dispatched</a>
|
||||
</h2>
|
||||
<div class="byline">
|
||||
<span>2 hours ago</span> by <a>Logistics Team</a>
|
||||
</div>
|
||||
<p class="excerpt">Order #ORD-12448 has been shipped via Express Delivery. Tracking number: EX123456789. Expected delivery: Tomorrow. <a>Track Package</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="block">
|
||||
<div class="block_content">
|
||||
<h2 class="title">
|
||||
<a><i class="fas fa-chart-line" style="color: #2ECC71; margin-right: 8px;"></i>Sales Milestone Achieved</a>
|
||||
</h2>
|
||||
<div class="byline">
|
||||
<span>3 hours ago</span> by <a>System</a>
|
||||
</div>
|
||||
<p class="excerpt">Congratulations! Monthly sales target of $50,000 achieved with 5 days remaining. Current total: $52,450. <a>View Report</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="block">
|
||||
<div class="block_content">
|
||||
<h2 class="title">
|
||||
<a><i class="fas fa-exclamation-triangle" style="color: #E67E22; margin-right: 8px;"></i>Inventory Alert</a>
|
||||
</h2>
|
||||
<div class="byline">
|
||||
<span>4 hours ago</span> by <a>Inventory System</a>
|
||||
</div>
|
||||
<p class="excerpt">Low stock alert: "Wireless Mouse Model X" has only 5 units remaining. Consider reordering to avoid stockouts. <a>Reorder Now</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sales Statistics Widget -->
|
||||
<div class="x_panel" style="min-height: 450px;">
|
||||
<div class="x_title">
|
||||
<h2>Sales Statistics <small>Monthly overview</small></h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="#">Settings 1</a>
|
||||
<a class="dropdown-item" href="#">Settings 2</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="btn-close-link"><i class="fas fa-times"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
|
||||
<!-- Chart Area -->
|
||||
<div style="position: relative; height: 120px; margin-bottom: 20px;">
|
||||
<svg viewBox="0 0 280 80" style="width: 100%; height: 100%;">
|
||||
<defs>
|
||||
<linearGradient id="salesGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#26B99A;stop-opacity:0.3" />
|
||||
<stop offset="100%" style="stop-color:#26B99A;stop-opacity:0.05" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Area under curve -->
|
||||
<path d="M 20 60 Q 70 40 120 30 T 260 20 L 260 70 L 20 70 Z" fill="url(#salesGradient)"/>
|
||||
<!-- Main line -->
|
||||
<path d="M 20 60 Q 70 40 120 30 T 260 20" stroke="#26B99A" stroke-width="2.5" fill="none"/>
|
||||
<!-- Data points -->
|
||||
<circle cx="20" cy="60" r="3" fill="#26B99A"/>
|
||||
<circle cx="70" cy="40" r="3" fill="#26B99A"/>
|
||||
<circle cx="120" cy="30" r="4" fill="#26B99A"/>
|
||||
<circle cx="180" cy="25" r="3" fill="#26B99A"/>
|
||||
<circle cx="260" cy="20" r="3" fill="#26B99A"/>
|
||||
</svg>
|
||||
|
||||
<!-- Floating info card -->
|
||||
<div style="position: absolute; top: 5px; right: 10px; background: white; border: 1px solid #E6E9ED; border-radius: 5px; padding: 6px 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
||||
<div style="color: #73879C; font-size: 9px; margin-bottom: 2px;">March</div>
|
||||
<div style="color: #2A3F54; font-size: 11px; font-weight: 600;">$45k profit</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metrics Grid -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Weekly Sales -->
|
||||
<div class="col-md-6 col-sm-6" style="margin-bottom: 10px;">
|
||||
<div style="background: #f7f7f7; border: 1px solid #E6E9ED; border-radius: 3px; padding: 12px;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 6px;">
|
||||
<div style="display: flex; gap: 3px;">
|
||||
<div style="width: 5px; height: 5px; background: #26B99A; border-radius: 1px;"></div>
|
||||
<div style="width: 5px; height: 5px; background: #3498DB; border-radius: 1px;"></div>
|
||||
<div style="width: 5px; height: 5px; background: #E74C3C; border-radius: 1px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 style="color: #2A3F54; font-size: 12px; font-weight: 600; margin: 0;">Weekly Sales</h5>
|
||||
<p style="color: #73879C; font-size: 10px; margin: 3px 0 0;">$12.4k this week</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New Users -->
|
||||
<div class="col-md-6 col-sm-6" style="margin-bottom: 10px;">
|
||||
<div style="background: #f7f7f7; border: 1px solid #E6E9ED; border-radius: 3px; padding: 12px;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 6px;">
|
||||
<div style="width: 18px; height: 18px; background: rgba(52, 152, 219, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="fas fa-user-plus" style="color: #3498DB; font-size: 8px;"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h5 style="color: #2A3F54; font-size: 12px; font-weight: 600; margin: 0;">New Users</h5>
|
||||
<p style="color: #73879C; font-size: 10px; margin: 3px 0 0;">+245 this month</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item Orders -->
|
||||
<div class="col-md-6 col-sm-6" style="margin-bottom: 10px;">
|
||||
<div style="background: #f7f7f7; border: 1px solid #E6E9ED; border-radius: 3px; padding: 12px;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 6px;">
|
||||
<div style="width: 18px; height: 18px; background: rgba(243, 156, 18, 0.1); border-radius: 3px; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="fas fa-shopping-bag" style="color: #F39C12; font-size: 8px;"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h5 style="color: #2A3F54; font-size: 12px; font-weight: 600; margin: 0;">Item Orders</h5>
|
||||
<p style="color: #73879C; font-size: 10px; margin: 3px 0 0;">1,240 orders</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Growth Rate -->
|
||||
<div class="col-md-6 col-sm-6" style="margin-bottom: 10px;">
|
||||
<div style="background: #f7f7f7; border: 1px solid #E6E9ED; border-radius: 3px; padding: 12px;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 6px;">
|
||||
<div style="width: 18px; height: 18px; background: rgba(38, 185, 154, 0.1); border-radius: 3px; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="fas fa-chart-line" style="color: #26B99A; font-size: 8px;"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h5 style="color: #2A3F54; font-size: 12px; font-weight: 600; margin: 0;">Growth Rate</h5>
|
||||
<p style="color: #73879C; font-size: 10px; margin: 3px 0 0;">+18.2% growth</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Sales Statistics Widget -->
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-8 col-sm-8">
|
||||
|
||||
|
||||
<!-- Recent Orders Section -->
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Recent Orders <small>Latest transactions</small></h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false"><i class="fas fa-wrench"></i></a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="#">Settings 1</a>
|
||||
<a class="dropdown-item" href="#">Settings 2</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="btn-close-link"><i class="fas fa-times"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<div class="recent-orders-scroll">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped jambo_table bulk_action">
|
||||
<thead>
|
||||
<tr class="headings">
|
||||
<th class="column-title">Order ID</th>
|
||||
<th class="column-title">Customer</th>
|
||||
<th class="column-title">Product</th>
|
||||
<th class="column-title">Amount</th>
|
||||
<th class="column-title">Status</th>
|
||||
<th class="column-title">Date</th>
|
||||
<th class="column-title no-link last"><span class="nobr">Action</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="even pointer">
|
||||
<td class=" "><strong>#ORD-12455</strong></td>
|
||||
<td class=" ">John Smith</td>
|
||||
<td class=" ">Premium Wireless Headphones</td>
|
||||
<td class=" "><strong>$299.99</strong></td>
|
||||
<td class=" "><span class="badge bg-success">Completed</span></td>
|
||||
<td class=" ">Jan 15, 2024</td>
|
||||
<td class=" last"><a href="#" class="btn btn-sm btn-primary">View</a></td>
|
||||
</tr>
|
||||
<tr class="odd pointer">
|
||||
<td class=" "><strong>#ORD-12454</strong></td>
|
||||
<td class=" ">Emily Johnson</td>
|
||||
<td class=" ">Smart Watch Pro</td>
|
||||
<td class=" "><strong>$899.99</strong></td>
|
||||
<td class=" "><span class="badge bg-warning text-dark">Processing</span></td>
|
||||
<td class=" ">Jan 15, 2024</td>
|
||||
<td class=" last"><a href="#" class="btn btn-sm btn-primary">View</a></td>
|
||||
</tr>
|
||||
<tr class="even pointer">
|
||||
<td class=" "><strong>#ORD-12453</strong></td>
|
||||
<td class=" ">Michael Chen</td>
|
||||
<td class=" ">Gaming Laptop Elite</td>
|
||||
<td class=" "><strong>$1,899.99</strong></td>
|
||||
<td class=" "><span class="badge bg-info">Shipped</span></td>
|
||||
<td class=" ">Jan 14, 2024</td>
|
||||
<td class=" last"><a href="#" class="btn btn-sm btn-primary">View</a></td>
|
||||
</tr>
|
||||
<tr class="odd pointer">
|
||||
<td class=" "><strong>#ORD-12452</strong></td>
|
||||
<td class=" ">Sarah Davis</td>
|
||||
<td class=" ">Wireless Mouse Deluxe</td>
|
||||
<td class=" "><strong>$79.99</strong></td>
|
||||
<td class=" "><span class="badge bg-success">Completed</span></td>
|
||||
<td class=" ">Jan 14, 2024</td>
|
||||
<td class=" last"><a href="#" class="btn btn-sm btn-primary">View</a></td>
|
||||
</tr>
|
||||
<tr class="even pointer">
|
||||
<td class=" "><strong>#ORD-12451</strong></td>
|
||||
<td class=" ">Robert Wilson</td>
|
||||
<td class=" ">4K Monitor Pro</td>
|
||||
<td class=" "><strong>$649.99</strong></td>
|
||||
<td class=" "><span class="badge bg-danger">Cancelled</span></td>
|
||||
<td class=" ">Jan 13, 2024</td>
|
||||
<td class=" last"><a href="#" class="btn btn-sm btn-primary">View</a></td>
|
||||
</tr>
|
||||
<tr class="odd pointer">
|
||||
<td class=" "><strong>#ORD-12450</strong></td>
|
||||
<td class=" ">Lisa Brown</td>
|
||||
<td class=" ">Bluetooth Speaker Premium</td>
|
||||
<td class=" "><strong>$199.99</strong></td>
|
||||
<td class=" "><span class="badge bg-success">Completed</span></td>
|
||||
<td class=" ">Jan 13, 2024</td>
|
||||
<td class=" last"><a href="#" class="btn btn-sm btn-primary">View</a></td>
|
||||
</tr>
|
||||
<tr class="even pointer">
|
||||
<td class=" "><strong>#ORD-12449</strong></td>
|
||||
<td class=" ">David Garcia</td>
|
||||
<td class=" ">Mechanical Keyboard RGB</td>
|
||||
<td class=" "><strong>$159.99</strong></td>
|
||||
<td class=" "><span class="badge bg-warning text-dark">Processing</span></td>
|
||||
<td class=" ">Jan 12, 2024</td>
|
||||
<td class=" last"><a href="#" class="btn btn-sm btn-primary">View</a></td>
|
||||
</tr>
|
||||
<tr class="odd pointer">
|
||||
<td class=" "><strong>#ORD-12448</strong></td>
|
||||
<td class=" ">Anna Martinez</td>
|
||||
<td class=" ">Tablet Pro 12-inch</td>
|
||||
<td class=" "><strong>$799.99</strong></td>
|
||||
<td class=" "><span class="badge bg-info">Shipped</span></td>
|
||||
<td class=" ">Jan 12, 2024</td>
|
||||
<td class=" last"><a href="#" class="btn btn-sm btn-primary">View</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Recent Orders Section -->
|
||||
|
||||
<div class="row">
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Gentelella Alela! | </title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
|
||||
<title>Dashboard 2 - Gentelella</title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
|
||||
<script type="module" src="/src/main-minimal.js"></script>
|
||||
</head>
|
||||
|
||||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
<li><a href="index4.html">Dashboard 4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
@ -354,60 +355,98 @@
|
|||
<a class="dropdown-item" href="#">Settings 2</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="btn-close-link"><i class="fas fa-times"></i></a>
|
||||
<li><a class="close-link"><i class="fas fa-times"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<ul class="list-unstyled top_profiles scroll-view">
|
||||
<ul class="list-unstyled top_profiles scroll-view page-index2-profiles">
|
||||
<li class="media event">
|
||||
<a class="pull-left border-aero profile_thumb">
|
||||
<i class="fas fa-user aero"></i>
|
||||
<img src="images/img.jpg" alt="User" class="profile_img">
|
||||
</a>
|
||||
<div class="d-flex-body">
|
||||
<div class="media-body">
|
||||
<a class="title" href="#">Sarah Johnson</a>
|
||||
<p><strong>$4,850.</strong> Top Agent Sales</p>
|
||||
<p><small>18 Sales Today</small></p>
|
||||
<p> <small>18 Sales Today</small>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media event">
|
||||
<a class="pull-left border-green profile_thumb">
|
||||
<i class="fas fa-user green"></i>
|
||||
<img src="images/user.png" alt="User" class="profile_img">
|
||||
</a>
|
||||
<div class="d-flex-body">
|
||||
<div class="media-body">
|
||||
<a class="title" href="#">Michael Chen</a>
|
||||
<p><strong>$3,920.</strong> Senior Agent Sales</p>
|
||||
<p><small>15 Sales Today</small></p>
|
||||
<p> <small>15 Sales Today</small>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media event">
|
||||
<a class="pull-left border-blue profile_thumb">
|
||||
<i class="fas fa-user blue"></i>
|
||||
<img src="images/picture.jpg" alt="User" class="profile_img">
|
||||
</a>
|
||||
<div class="d-flex-body">
|
||||
<div class="media-body">
|
||||
<a class="title" href="#">Emily Rodriguez</a>
|
||||
<p><strong>$3,450.</strong> Agent Average Sales</p>
|
||||
<p><small>12 Sales Today</small></p>
|
||||
<p> <small>12 Sales Today</small>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media event">
|
||||
<a class="pull-left border-red profile_thumb">
|
||||
<i class="fas fa-user red"></i>
|
||||
<img src="images/img.jpg" alt="User" class="profile_img">
|
||||
</a>
|
||||
<div class="d-flex-body">
|
||||
<div class="media-body">
|
||||
<a class="title" href="#">David Wilson</a>
|
||||
<p><strong>$3,180.</strong> Agent Sales</p>
|
||||
<p><small>10 Sales Today</small></p>
|
||||
<p> <small>10 Sales Today</small>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media event">
|
||||
<a class="pull-left border-purple profile_thumb">
|
||||
<i class="fas fa-user purple"></i>
|
||||
<img src="images/user.png" alt="User" class="profile_img">
|
||||
</a>
|
||||
<div class="d-flex-body">
|
||||
<div class="media-body">
|
||||
<a class="title" href="#">Amanda Foster</a>
|
||||
<p><strong>$2,890.</strong> Agent Sales</p>
|
||||
<p><small>9 Sales Today</small></p>
|
||||
<p> <small>9 Sales Today</small>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media event">
|
||||
<a class="pull-left border-aero profile_thumb">
|
||||
<img src="images/picture.jpg" alt="User" class="profile_img">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<a class="title" href="#">Jessica Martinez</a>
|
||||
<p><strong>$2,750.</strong> Agent Sales</p>
|
||||
<p> <small>9 Sales Today</small>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media event">
|
||||
<a class="pull-left border-green profile_thumb">
|
||||
<img src="images/img.jpg" alt="User" class="profile_img">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<a class="title" href="#">Daniel Lee</a>
|
||||
<p><strong>$2,610.</strong> Agent Sales</p>
|
||||
<p> <small>8 Sales Today</small>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media event">
|
||||
<a class="pull-left border-blue profile_thumb">
|
||||
<img src="images/user.png" alt="User" class="profile_img">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<a class="title" href="#">Laura Taylor</a>
|
||||
<p><strong>$2,440.</strong> Agent Sales</p>
|
||||
<p> <small>7 Sales Today</small>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -442,28 +481,31 @@
|
|||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
|
||||
<div class="row" style="border-bottom: 1px solid #E0E0E0; padding-bottom: 5px; margin-bottom: 5px;">
|
||||
<div class="col-md-7" style="overflow:hidden;">
|
||||
<span class="sparkline_one" style="height: 160px; padding: 10px 25px;"></span>
|
||||
<h4 style="margin:18px">Weekly sales progress</h4>
|
||||
<div class="row">
|
||||
<!-- Weekly Sales Trend -->
|
||||
<div class="col-md-8">
|
||||
<h4>Weekly Sales Trend</h4>
|
||||
<div id="weeklySalesChart" style="height: 300px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="row" style="text-align: center;">
|
||||
<div class="col-md-4">
|
||||
<canvas class="canvasDoughnut" height="110" width="110" style="margin: 5px 10px 10px 0"></canvas>
|
||||
<h4 style="margin:0; font-size: 14px;">Bounce Rate</h4>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<canvas class="canvasDoughnut" height="110" width="110" style="margin: 5px 10px 10px 0"></canvas>
|
||||
<h4 style="margin:0; font-size: 14px;">Conversion Rate</h4>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<canvas class="canvasDoughnut" height="110" width="110" style="margin: 5px 10px 10px 0"></canvas>
|
||||
<h4 style="margin:0; font-size: 14px;">Mobile Traffic</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sales Distribution -->
|
||||
<div class="col-md-4">
|
||||
<h4>Sales Distribution</h4>
|
||||
<div id="salesDistributionChart" style="height: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="margin-top: 20px;">
|
||||
<!-- Daily Activity -->
|
||||
<div class="col-md-6">
|
||||
<h4>Daily Activity</h4>
|
||||
<div id="dailyActivityChart" style="height: 300px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Performance Metrics -->
|
||||
<div class="col-md-6">
|
||||
<h4>Performance Metrics</h4>
|
||||
<div id="performanceMetricsChart" style="height: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,473 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<!-- Meta, title, CSS, favicons, etc. -->
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Gentelella Alela! | Store Analytics</title> <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
|
||||
<script type="module" src="/src/main-minimal.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="nav-md page-index4">
|
||||
<div class="container body">
|
||||
<div class="main_container">
|
||||
<div class="col-md-3 left_col">
|
||||
<div class="left_col scroll-view">
|
||||
<div class="navbar nav_title" style="border: 0;">
|
||||
<a href="index.html" class="site_title"><i class="fas fa-paw"></i> <span>Gentelella Alela!</span></a>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<!-- menu profile quick info -->
|
||||
<div class="profile clearfix">
|
||||
<div class="profile_pic">
|
||||
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
|
||||
</div>
|
||||
<div class="profile_info">
|
||||
<span>Welcome,</span>
|
||||
<h2>John Doe</h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /menu profile quick info -->
|
||||
|
||||
<br />
|
||||
|
||||
<!-- sidebar menu -->
|
||||
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
|
||||
<div class="menu_section">
|
||||
<h3>General</h3>
|
||||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
<li><a href="index4.html">Dashboard 4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="form.html">General Form</a></li>
|
||||
<li><a href="form_advanced.html">Advanced Components</a></li>
|
||||
<li><a href="form_validation.html">Form Validation</a></li>
|
||||
<li><a href="form_wizards.html">Form Wizard</a></li>
|
||||
<li><a href="form_upload.html">Form Upload</a></li>
|
||||
<li><a href="form_buttons.html">Form Buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-desktop"></i> UI Elements <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="general_elements.html">General Elements</a></li>
|
||||
<li><a href="media_gallery.html">Media Gallery</a></li>
|
||||
<li><a href="typography.html">Typography</a></li>
|
||||
<li><a href="icons.html">Icons</a></li>
|
||||
<li><a href="glyphicons.html">Glyphicons</a></li>
|
||||
<li><a href="widgets.html">Widgets</a></li>
|
||||
<li><a href="invoice.html">Invoice</a></li>
|
||||
<li><a href="inbox.html">Inbox</a></li>
|
||||
<li><a href="calendar.html">Calendar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-table"></i> Tables <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="tables.html">Tables</a></li>
|
||||
<li><a href="tables_dynamic.html">Table Dynamic</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-chart-column"></i> Data Presentation <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="chartjs.html">Chart JS</a></li>
|
||||
<li><a href="chartjs2.html">Chart JS2</a></li>
|
||||
<li><a href="morisjs.html">Moris JS</a></li>
|
||||
<li><a href="echarts.html">ECharts</a></li>
|
||||
<li><a href="other_charts.html">Other Charts</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-clone"></i>Layouts <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
|
||||
<li><a href="fixed_footer.html">Fixed Footer</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="menu_section">
|
||||
<h3>Live On</h3>
|
||||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-bug"></i> Additional Pages <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="e_commerce.html">E-commerce</a></li>
|
||||
<li><a href="projects.html">Projects</a></li>
|
||||
<li><a href="project_detail.html">Project Detail</a></li>
|
||||
<li><a href="contacts.html">Contacts</a></li>
|
||||
<li><a href="profile.html">Profile</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-window-restore"></i> Extras <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="page_403.html">403 Error</a></li>
|
||||
<li><a href="page_404.html">404 Error</a></li>
|
||||
<li><a href="page_500.html">500 Error</a></li>
|
||||
<li><a href="plain_page.html">Plain Page</a></li>
|
||||
<li><a href="login.html">Login Page</a></li>
|
||||
<li><a href="pricing_tables.html">Pricing Tables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-sitemap"></i> Multilevel Menu <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="#level1_1">Level One</a>
|
||||
<li><a>Level One<span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li class="sub_menu"><a href="level2.html">Level Two</a>
|
||||
</li>
|
||||
<li><a href="#level2_1">Level Two</a>
|
||||
</li>
|
||||
<li><a href="#level2_2">Level Two</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#level1_2">Level One</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="javascript:void(0)"><i class="fas fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /sidebar menu -->
|
||||
|
||||
<!-- /menu footer buttons -->
|
||||
<div class="sidebar-footer hidden-small">
|
||||
<a data-bs-toggle="tooltip" data-placement="top" title="Settings">
|
||||
<span class="fas fa-cog" aria-hidden="true"></span>
|
||||
</a>
|
||||
<a data-bs-toggle="tooltip" data-placement="top" title="FullScreen">
|
||||
<span class="fas fa-expand" aria-hidden="true"></span>
|
||||
</a>
|
||||
<a data-bs-toggle="tooltip" data-placement="top" title="Lock">
|
||||
<span class="fas fa-eye-slash" aria-hidden="true"></span>
|
||||
</a>
|
||||
<a data-bs-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
|
||||
<span class="fas fa-power-off" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- /menu footer buttons -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- top navigation -->
|
||||
<div class="top_nav">
|
||||
<div class="nav_menu">
|
||||
<div class="nav toggle">
|
||||
<a id="menu_toggle"><i class="fas fa-bars"></i></a>
|
||||
</div>
|
||||
<nav class="nav navbar-nav">
|
||||
<ul class="navbar-right">
|
||||
<li class="nav-item dropdown open" style="padding-left: 15px;">
|
||||
<a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="images/img.jpg" alt="">John Doe
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
|
||||
<a class="dropdown-item" href="javascript:;"> Profile</a>
|
||||
<a class="dropdown-item" href="javascript:;">
|
||||
<span class="badge bg-red pull-right">50%</span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="javascript:;">Help</a>
|
||||
<a class="dropdown-item" href="login.html"><i class="fas fa-sign-out-alt pull-right"></i> Log Out</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li role="presentation" class="nav-item dropdown open">
|
||||
<a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="fas fa-envelope"></i>
|
||||
<span class="badge bg-green">6</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
|
||||
<li class="nav-item">
|
||||
<a class="dropdown-item">
|
||||
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
|
||||
<span>
|
||||
<span>John Smith</span>
|
||||
<span class="time">3 mins ago</span>
|
||||
</span>
|
||||
<span class="message">
|
||||
Film festivals used to be do-or-die moments for movie makers. They were where...
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="dropdown-item">
|
||||
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
|
||||
<span>
|
||||
<span>John Smith</span>
|
||||
<span class="time">3 mins ago</span>
|
||||
</span>
|
||||
<span class="message">
|
||||
Film festivals used to be do-or-die moments for movie makers. They were where...
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="dropdown-item">
|
||||
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
|
||||
<span>
|
||||
<span>John Smith</span>
|
||||
<span class="time">3 mins ago</span>
|
||||
</span>
|
||||
<span class="message">
|
||||
Film festivals used to be do-or-die moments for movie makers. They were where...
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="dropdown-item">
|
||||
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
|
||||
<span>
|
||||
<span>John Smith</span>
|
||||
<span class="time">3 mins ago</span>
|
||||
</span>
|
||||
<span class="message">
|
||||
Film festivals used to be do-or-die moments for movie makers. They were where...
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="text-center">
|
||||
<a class="dropdown-item">
|
||||
<strong>See All Alerts</strong>
|
||||
<i class="fas fa-angle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /top navigation -->
|
||||
|
||||
<!-- page content -->
|
||||
<div class="right_col" role="main">
|
||||
<!-- top tiles -->
|
||||
<div class="row" style="display: inline-block;" >
|
||||
<div class="tile_count">
|
||||
<div class="col-md-3 col-sm-4 tile_stats_count">
|
||||
<span class="count_top"><i class="fas fa-dollar-sign"></i> Top Sale</span>
|
||||
<div class="count">$8,450.00</div>
|
||||
<span class="count_bottom"><i class="green"><i class="fas fa-sort-up"></i>4% </i> From last Week</span>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-4 tile_stats_count">
|
||||
<span class="count_top"><i class="fas fa-chart-line"></i> Total Profit</span>
|
||||
<div class="count">$24,380.00</div>
|
||||
<span class="count_bottom"><i class="green"><i class="fas fa-sort-up"></i>12% </i> From last Week</span>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-4 tile_stats_count">
|
||||
<span class="count_top"><i class="fas fa-shopping-cart"></i> New Orders</span>
|
||||
<div class="count">1,204</div>
|
||||
<span class="count_bottom"><i class="green"><i class="fas fa-sort-up"></i>25% </i> From last Week</span>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-4 tile_stats_count">
|
||||
<span class="count_top"><i class="fas fa-users"></i> New Customers</span>
|
||||
<div class="count">43</div>
|
||||
<span class="count_bottom"><i class="red"><i class="fas fa-sort-down"></i>-5% </i> From last Week</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /top tiles -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Sales Statistics <small>Sales vs Orders</small></h2>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<canvas id="salesStatisticsChart" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Weekly Sales <small>Last 7 days</small></h2>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<canvas id="weeklySalesChart" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-4">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Top Selling Products</h2>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<ul class="list-unstyled top_products_scroll">
|
||||
<!-- Product items will be dynamically inserted or hardcoded here -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Revenue by Location</h2>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<div id="revenueMap" style="height: 350px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Latest Orders</h2>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<table id="latestOrdersTable" class="table table-striped table-bordered" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order ID</th>
|
||||
<th>Customer</th>
|
||||
<th>Date</th>
|
||||
<th>Total</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>#ORD-12345</strong></td>
|
||||
<td>John Smith</td>
|
||||
<td>2024-01-15</td>
|
||||
<td><strong>$1,250.00</strong></td>
|
||||
<td><span class="badge bg-success">Completed</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>#ORD-12346</strong></td>
|
||||
<td>Emily Johnson</td>
|
||||
<td>2024-01-15</td>
|
||||
<td><strong>$875.50</strong></td>
|
||||
<td><span class="badge bg-warning text-dark">Processing</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>#ORD-12347</strong></td>
|
||||
<td>Michael Chen</td>
|
||||
<td>2024-01-14</td>
|
||||
<td><strong>$2,150.75</strong></td>
|
||||
<td><span class="badge bg-success">Completed</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>#ORD-12348</strong></td>
|
||||
<td>Sarah Davis</td>
|
||||
<td>2024-01-14</td>
|
||||
<td><strong>$650.00</strong></td>
|
||||
<td><span class="badge bg-info">Shipped</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>#ORD-12349</strong></td>
|
||||
<td>Robert Wilson</td>
|
||||
<td>2024-01-13</td>
|
||||
<td><strong>$1,480.25</strong></td>
|
||||
<td><span class="badge bg-danger">Cancelled</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>#ORD-12350</strong></td>
|
||||
<td>Lisa Brown</td>
|
||||
<td>2024-01-13</td>
|
||||
<td><strong>$920.00</strong></td>
|
||||
<td><span class="badge bg-success">Completed</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>#ORD-12351</strong></td>
|
||||
<td>David Garcia</td>
|
||||
<td>2024-01-12</td>
|
||||
<td><strong>$1,125.50</strong></td>
|
||||
<td><span class="badge bg-warning text-dark">Processing</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>#ORD-12352</strong></td>
|
||||
<td>Anna Martinez</td>
|
||||
<td>2024-01-12</td>
|
||||
<td><strong>$775.00</strong></td>
|
||||
<td><span class="badge bg-info">Shipped</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>#ORD-12353</strong></td>
|
||||
<td>James Taylor</td>
|
||||
<td>2024-01-11</td>
|
||||
<td><strong>$2,340.00</strong></td>
|
||||
<td><span class="badge bg-success">Completed</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>#ORD-12354</strong></td>
|
||||
<td>Maria Rodriguez</td>
|
||||
<td>2024-01-11</td>
|
||||
<td><strong>$560.75</strong></td>
|
||||
<td><span class="badge bg-warning text-dark">Processing</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /page content -->
|
||||
|
||||
<!-- footer content -->
|
||||
<footer>
|
||||
<div class="pull-right">
|
||||
Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</footer>
|
||||
<!-- /footer content -->
|
||||
</div>
|
||||
</div> <!-- Compiled JavaScript (includes jQuery, Bootstrap, and all vendor scripts) -->
|
||||
|
||||
<!-- Initialize linked Tempus Dominus pickers for date range -->
|
||||
<script type="text/javascript">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (typeof TempusDominus !== 'undefined') {
|
||||
const startPicker = new TempusDominus(document.getElementById('startDatePicker'), {
|
||||
display: { components: { clock: false } },
|
||||
localization: { format: 'MM/dd/yyyy' }
|
||||
});
|
||||
const endPicker = new TempusDominus(document.getElementById('endDatePicker'), {
|
||||
display: { components: { clock: false } },
|
||||
localization: { format: 'MM/dd/yyyy' }
|
||||
});
|
||||
// Link pickers
|
||||
document.getElementById('startDatePicker').addEventListener('change.td', function(e) {
|
||||
endPicker.updateOptions({ restrictions: { minDate: e.detail.date } });
|
||||
});
|
||||
document.getElementById('endDatePicker').addEventListener('change.td', function(e) {
|
||||
startPicker.updateOptions({ restrictions: { maxDate: e.detail.date } });
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,555 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<!-- Meta, title, CSS, favicons, etc. -->
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" href="images/favicon.ico" type="image/ico" />
|
||||
|
||||
<title>Dashboard 5 - Gentelella</title>
|
||||
|
||||
|
||||
|
||||
<!-- Vite Entry Point - will bundle all styles -->
|
||||
<script type="module" src="/src/main-minimal.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="nav-md page-index5">
|
||||
<div class="container body">
|
||||
<div class="main_container">
|
||||
<div class="col-md-3 left_col">
|
||||
<div class="left_col scroll-view">
|
||||
<div class="navbar nav_title" style="border: 0;">
|
||||
<a href="index.html" class="site_title"><i class="fas fa-paw"></i> <span>Gentelella Alela!</span></a>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<!-- menu profile quick info -->
|
||||
<div class="profile clearfix">
|
||||
<div class="profile_pic">
|
||||
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
|
||||
</div>
|
||||
<div class="profile_info">
|
||||
<span>Welcome,</span>
|
||||
<h2>John Doe</h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /menu profile quick info -->
|
||||
|
||||
<br />
|
||||
|
||||
<!-- sidebar menu -->
|
||||
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
|
||||
<div class="menu_section">
|
||||
<h3>General</h3>
|
||||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index5.html">Dashboard 5</a></li>
|
||||
<li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index5.html">Dashboard 5</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="form.html">General Form</a></li>
|
||||
<li><a href="form_advanced.html">Advanced Components</a></li>
|
||||
<li><a href="form_validation.html">Form Validation</a></li>
|
||||
<li><a href="form_wizards.html">Form Wizard</a></li>
|
||||
<li><a href="form_upload.html">Form Upload</a></li>
|
||||
<li><a href="form_buttons.html">Form Buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-desktop"></i> UI Elements <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="general_elements.html">General Elements</a></li>
|
||||
<li><a href="media_gallery.html">Media Gallery</a></li>
|
||||
<li><a href="typography.html">Typography</a></li>
|
||||
<li><a href="icons.html">Icons</a></li>
|
||||
<li><a href="glyphicons.html">Glyphicons</a></li>
|
||||
<li><a href="widgets.html">Widgets</a></li>
|
||||
<li><a href="invoice.html">Invoice</a></li>
|
||||
<li><a href="inbox.html">Inbox</a></li>
|
||||
<li><a href="calendar.html">Calendar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-table"></i> Tables <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="tables.html">Tables</a></li>
|
||||
<li><a href="tables_dynamic.html">Table Dynamic</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-chart-column"></i> Data Presentation <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="chartjs.html">Chart JS</a></li>
|
||||
<li><a href="chartjs2.html">Chart JS2</a></li>
|
||||
<li><a href="morisjs.html">Moris JS</a></li>
|
||||
<li><a href="echarts.html">ECharts</a></li>
|
||||
<li><a href="other_charts.html">Other Charts</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-clone"></i>Layouts <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
|
||||
<li><a href="fixed_footer.html">Fixed Footer</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="menu_section">
|
||||
<h3>Live On</h3>
|
||||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-bug"></i> Additional Pages <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="e_commerce.html">E-commerce</a></li>
|
||||
<li><a href="projects.html">Projects</a></li>
|
||||
<li><a href="project_detail.html">Project Detail</a></li>
|
||||
<li><a href="contacts.html">Contacts</a></li>
|
||||
<li><a href="profile.html">Profile</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-window-restore"></i> Extras <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="page_403.html">403 Error</a></li>
|
||||
<li><a href="page_404.html">404 Error</a></li>
|
||||
<li><a href="page_500.html">500 Error</a></li>
|
||||
<li><a href="plain_page.html">Plain Page</a></li>
|
||||
<li><a href="login.html">Login Page</a></li>
|
||||
<li><a href="pricing_tables.html">Pricing Tables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-sitemap"></i> Multilevel Menu <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="#level1_1">Level One</a>
|
||||
<li><a>Level One<span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li class="sub_menu"><a href="level2.html">Level Two</a>
|
||||
</li>
|
||||
<li><a href="#level2_1">Level Two</a>
|
||||
</li>
|
||||
<li><a href="#level2_2">Level Two</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#level1_2">Level One</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="javascript:void(0)"><i class="fas fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /sidebar menu -->
|
||||
|
||||
<!-- /menu footer buttons -->
|
||||
<div class="sidebar-footer hidden-small">
|
||||
<a data-bs-toggle="tooltip" data-placement="top" title="Settings">
|
||||
<span class="fas fa-cog" aria-hidden="true"></span>
|
||||
</a>
|
||||
<a data-bs-toggle="tooltip" data-placement="top" title="FullScreen">
|
||||
<span class="fas fa-expand" aria-hidden="true"></span>
|
||||
</a>
|
||||
<a data-bs-toggle="tooltip" data-placement="top" title="Lock">
|
||||
<span class="fas fa-eye-slash" aria-hidden="true"></span>
|
||||
</a>
|
||||
<a data-bs-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
|
||||
<span class="fas fa-power-off" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- /menu footer buttons -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- top navigation -->
|
||||
<div class="top_nav">
|
||||
<div class="nav_menu">
|
||||
<div class="nav toggle">
|
||||
<a id="menu_toggle"><i class="fas fa-bars"></i></a>
|
||||
</div>
|
||||
<nav class="nav navbar-nav">
|
||||
<ul class="navbar-right">
|
||||
<li class="nav-item dropdown open" style="padding-left: 15px;">
|
||||
<a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="images/img.jpg" alt="">John Doe
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
|
||||
<a class="dropdown-item" href="javascript:;"> Profile</a>
|
||||
<a class="dropdown-item" href="javascript:;">
|
||||
<span class="badge bg-red pull-right">50%</span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="javascript:;">Help</a>
|
||||
<a class="dropdown-item" href="login.html"><i class="fas fa-sign-out-alt pull-right"></i> Log Out</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li role="presentation" class="nav-item dropdown open">
|
||||
<a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="fas fa-envelope"></i>
|
||||
<span class="badge bg-green">6</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
|
||||
<li class="nav-item">
|
||||
<a class="dropdown-item">
|
||||
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
|
||||
<span>
|
||||
<span>John Smith</span>
|
||||
<span class="time">3 mins ago</span>
|
||||
</span>
|
||||
<span class="message">
|
||||
Film festivals used to be do-or-die moments for movie makers. They were where...
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="dropdown-item">
|
||||
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
|
||||
<span>
|
||||
<span>John Smith</span>
|
||||
<span class="time">3 mins ago</span>
|
||||
</span>
|
||||
<span class="message">
|
||||
Film festivals used to be do-or-die moments for movie makers. They were where...
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="dropdown-item">
|
||||
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
|
||||
<span>
|
||||
<span>John Smith</span>
|
||||
<span class="time">3 mins ago</span>
|
||||
</span>
|
||||
<span class="message">
|
||||
Film festivals used to be do-or-die moments for movie makers. They were where...
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="dropdown-item">
|
||||
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
|
||||
<span>
|
||||
<span>John Smith</span>
|
||||
<span class="time">3 mins ago</span>
|
||||
</span>
|
||||
<span class="message">
|
||||
Film festivals used to be do-or-die moments for movie makers. They were where...
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="text-center">
|
||||
<a class="dropdown-item">
|
||||
<strong>See All Alerts</strong>
|
||||
<i class="fas fa-angle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /top navigation -->
|
||||
|
||||
<!-- page content -->
|
||||
<div class="right_col" role="main">
|
||||
<!-- Stat Cards Row -->
|
||||
<div class="row" style="margin-bottom: 24px;">
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="tile-stats modern-tile">
|
||||
<div class="icon"><i class="fas fa-dollar-sign"></i></div>
|
||||
<div class="count">$24,500</div>
|
||||
<h3>Revenue</h3>
|
||||
<p>+8.2% this week</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="tile-stats modern-tile">
|
||||
<div class="icon"><i class="fas fa-shopping-cart"></i></div>
|
||||
<div class="count">1,204</div>
|
||||
<h3>Orders</h3>
|
||||
<p>+2.1% this week</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="tile-stats modern-tile">
|
||||
<div class="icon"><i class="fas fa-users"></i></div>
|
||||
<div class="count">3,890</div>
|
||||
<h3>Customers</h3>
|
||||
<p>+5.4% this week</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="tile-stats modern-tile">
|
||||
<div class="icon"><i class="fas fa-chart-line"></i></div>
|
||||
<div class="count">$7,200</div>
|
||||
<h3>Profit</h3>
|
||||
<p>+1.7% this week</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Analytics Row -->
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Sales Overview <small>Last 30 days</small></h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
|
||||
<li><a class="btn-close-link"><i class="fas fa-times"></i></a></li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<div id="salesOverviewChart" style="height: 350px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Revenue Breakdown</h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
|
||||
<li><a class="btn-close-link"><i class="fas fa-times"></i></a></li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<div id="revenueBreakdownChart" style="height: 350px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Orders and Activity Row -->
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Recent Orders</h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
|
||||
<li><a class="btn-close-link"><i class="fas fa-times"></i></a></li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped jambo_table bulk_action">
|
||||
<thead>
|
||||
<tr class="headings">
|
||||
<th class="column-title">Order ID </th>
|
||||
<th class="column-title">Customer </th>
|
||||
<th class="column-title">Product </th>
|
||||
<th class="column-title">Amount </th>
|
||||
<th class="column-title">Status </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="even pointer">
|
||||
<td>#12345</td>
|
||||
<td>John Doe</td>
|
||||
<td>Product 1</td>
|
||||
<td>$100</td>
|
||||
<td><span class="badge bg-success">Completed</span></td>
|
||||
</tr>
|
||||
<tr class="odd pointer">
|
||||
<td>#12346</td>
|
||||
<td>Jane Smith</td>
|
||||
<td>Product 2</td>
|
||||
<td>$200</td>
|
||||
<td><span class="badge bg-warning">Pending</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Recent Activity</h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
|
||||
<li><a class="btn-close-link"><i class="fas fa-times"></i></a></li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<div class="dashboard-widget-content">
|
||||
<ul class="list-unstyled timeline widget">
|
||||
<li>
|
||||
<div class="block">
|
||||
<div class="block_content">
|
||||
<h2 class="title">New Order</h2>
|
||||
<p class="excerpt">Order #12345 has been placed</p>
|
||||
<div class="byline">
|
||||
<span>13 minutes ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="block">
|
||||
<div class="block_content">
|
||||
<h2 class="title">New Customer</h2>
|
||||
<p class="excerpt">John Doe has registered</p>
|
||||
<div class="byline">
|
||||
<span>2 hours ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Analytics Row -->
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Top Products</h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
|
||||
<li><a class="btn-close-link"><i class="fas fa-times"></i></a></li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<div id="topProductsChart" style="height: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Conversion Funnel</h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
|
||||
<li><a class="btn-close-link"><i class="fas fa-times"></i></a></li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<div id="conversionFunnelChart" style="height: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
<h2>Traffic Sources</h2>
|
||||
<ul class="nav navbar-right panel_toolbox">
|
||||
<li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
|
||||
<li><a class="btn-close-link"><i class="fas fa-times"></i></a></li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<div id="trafficSourcesChart" style="height: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /page content -->
|
||||
|
||||
<!-- footer content -->
|
||||
<footer>
|
||||
<div class="pull-right">
|
||||
Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</footer>
|
||||
<!-- /footer content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date Range Picker Logic -->
|
||||
<script type="text/javascript">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (typeof TempusDominus !== 'undefined') {
|
||||
// Initialize the date pickers
|
||||
const startPicker = new TempusDominus(document.getElementById('startDatePicker'), {
|
||||
display: {
|
||||
components: {
|
||||
clock: false,
|
||||
seconds: false,
|
||||
useTwentyfourHour: false
|
||||
}
|
||||
},
|
||||
localization: {
|
||||
format: 'MM/dd/yyyy'
|
||||
}
|
||||
});
|
||||
|
||||
const endPicker = new TempusDominus(document.getElementById('endDatePicker'), {
|
||||
display: {
|
||||
components: {
|
||||
clock: false,
|
||||
seconds: false,
|
||||
useTwentyfourHour: false
|
||||
}
|
||||
},
|
||||
localization: {
|
||||
format: 'MM/dd/yyyy'
|
||||
}
|
||||
});
|
||||
|
||||
// Set default dates (last 30 days)
|
||||
const today = new Date();
|
||||
const thirtyDaysAgo = new Date(today.getTime() - (30 * 24 * 60 * 60 * 1000));
|
||||
|
||||
// Format dates properly for Tempus Dominus using DateTime
|
||||
try {
|
||||
if (typeof DateTime !== 'undefined') {
|
||||
startPicker.dates.setValue(new DateTime(thirtyDaysAgo));
|
||||
endPicker.dates.setValue(new DateTime(today));
|
||||
} else {
|
||||
// Fallback without DateTime wrapper
|
||||
startPicker.dates.setValue(thirtyDaysAgo);
|
||||
endPicker.dates.setValue(today);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Error setting default dates:', error);
|
||||
// Final fallback: set dates using string format
|
||||
const todayStr = today.toLocaleDateString('en-US');
|
||||
const thirtyDaysAgoStr = thirtyDaysAgo.toLocaleDateString('en-US');
|
||||
|
||||
const startInput = document.querySelector('#startDatePicker input[data-td-target="#startDatePicker"]');
|
||||
const endInput = document.querySelector('#endDatePicker input[data-td-target="#endDatePicker"]');
|
||||
|
||||
if (startInput) startInput.value = thirtyDaysAgoStr;
|
||||
if (endInput) endInput.value = todayStr;
|
||||
}
|
||||
|
||||
// Link pickers without summary display
|
||||
document.getElementById('startDatePicker').addEventListener('change.td', function(e) {
|
||||
endPicker.updateOptions({ restrictions: { minDate: e.detail.date } });
|
||||
});
|
||||
|
||||
document.getElementById('endDatePicker').addEventListener('change.td', function(e) {
|
||||
startPicker.updateOptions({ restrictions: { maxDate: e.detail.date } });
|
||||
});
|
||||
} else {
|
||||
console.warn('TempusDominus is not available');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -48,9 +48,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -44,9 +44,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
</li>
|
||||
<li><a href="index2.html">Dashboard2</a>
|
||||
</li>
|
||||
<li><a href="index3.html">Dashboard3</a>
|
||||
<li><a href="index3.html">Dashboard 3</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -49,9 +49,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -62,9 +62,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
@ -316,7 +317,7 @@
|
|||
<h4>Easy Pie Charts - Performance Metrics</h4>
|
||||
</div>
|
||||
|
||||
<p>Interactive gauge charts showing various performance metrics and KPIs with color-coded indicators.</p>
|
||||
<p>Interactive pie charts showing various performance metrics and KPIs with color-coded indicators.</p>
|
||||
|
||||
<!-- Three Column Layout -->
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -44,9 +44,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -48,9 +48,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
|
|||
|
|
@ -436,10 +436,7 @@ function init_chart_doughnut() {
|
|||
|
||||
}
|
||||
|
||||
// Gauge initialization is now handled in src/js/init.js initializeGauges() function
|
||||
function init_gauge() {
|
||||
console.log('init_gauge: Gauge initialization is now handled centrally in init.js');
|
||||
}
|
||||
|
||||
|
||||
/* SPARKLINES */
|
||||
|
||||
|
|
@ -2624,49 +2621,7 @@ function init_echarts() {
|
|||
}
|
||||
}
|
||||
},
|
||||
gauge: {
|
||||
startAngle: 225,
|
||||
endAngle: -45,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: [[0.2, '#86b379'], [0.8, '#68a54a'], [1, '#408829']],
|
||||
width: 8
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
splitNumber: 10,
|
||||
length: 12,
|
||||
lineStyle: {
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
length: 18,
|
||||
lineStyle: {
|
||||
color: 'auto'
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
length: '90%',
|
||||
color: 'auto'
|
||||
},
|
||||
title: {
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
textStyle: {
|
||||
color: 'auto'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
textStyle: {
|
||||
fontFamily: 'Arial, Verdana, sans-serif'
|
||||
}
|
||||
|
|
@ -2881,126 +2836,6 @@ function init_echarts() {
|
|||
|
||||
}
|
||||
|
||||
//echart Gauge
|
||||
|
||||
if ($('#echart_gauge').length) {
|
||||
|
||||
var echartGauge = echarts.init(document.getElementById('echart_gauge'), theme);
|
||||
|
||||
echartGauge.setOption({
|
||||
tooltip: {
|
||||
formatter: "{a} <br/>{b} : {c}%"
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
restore: {
|
||||
show: true,
|
||||
title: "Restore"
|
||||
},
|
||||
saveAsImage: {
|
||||
show: true,
|
||||
title: "Save Image"
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Performance',
|
||||
type: 'gauge',
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 140,
|
||||
endAngle: -140,
|
||||
min: 0,
|
||||
max: 100,
|
||||
precision: 0,
|
||||
splitNumber: 10,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: [
|
||||
[0.2, 'lightgreen'],
|
||||
[0.4, 'orange'],
|
||||
[0.8, 'skyblue'],
|
||||
[1, '#ff4500']
|
||||
],
|
||||
width: 30
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
splitNumber: 5,
|
||||
length: 8,
|
||||
lineStyle: {
|
||||
color: '#eee',
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
formatter: function (v) {
|
||||
switch (v + '') {
|
||||
case '10':
|
||||
return 'a';
|
||||
case '30':
|
||||
return 'b';
|
||||
case '60':
|
||||
return 'c';
|
||||
case '90':
|
||||
return 'd';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
length: 30,
|
||||
lineStyle: {
|
||||
color: '#eee',
|
||||
width: 2,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
pointer: {
|
||||
length: '80%',
|
||||
width: 8,
|
||||
color: 'auto'
|
||||
},
|
||||
title: {
|
||||
show: true,
|
||||
offsetCenter: ['-65%', -10],
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
show: true,
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
borderWidth: 0,
|
||||
borderColor: '#ccc',
|
||||
width: 100,
|
||||
height: 40,
|
||||
offsetCenter: ['-60%', 10],
|
||||
formatter: '{value}%',
|
||||
textStyle: {
|
||||
color: 'auto',
|
||||
fontSize: 30
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
value: 50,
|
||||
name: 'Performance'
|
||||
}]
|
||||
}]
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
//echart Line
|
||||
|
||||
if ($('#echart_line').length) {
|
||||
|
|
@ -4758,7 +4593,6 @@ $(document).ready(function () {
|
|||
init_validator();
|
||||
init_DataTables();
|
||||
init_chart_doughnut();
|
||||
init_gauge();
|
||||
init_PNotify();
|
||||
init_starrr();
|
||||
init_calendar();
|
||||
|
|
|
|||
1067
src/js/init.js
1067
src/js/init.js
File diff suppressed because it is too large
Load Diff
|
|
@ -25,11 +25,6 @@ import { TempusDominus } from '@eonasdan/tempus-dominus';
|
|||
window.TempusDominus = TempusDominus;
|
||||
console.log('โ
TempusDominus loaded');
|
||||
|
||||
// GaugeJS - Modern gauge library (Bootstrap 5 compatible)
|
||||
import Gauge from 'gauge.js';
|
||||
window.Gauge = Gauge;
|
||||
console.log('โ
GaugeJS loaded');
|
||||
|
||||
// Chart.js v4 - No jQuery dependency
|
||||
import { Chart, registerables } from 'chart.js';
|
||||
Chart.register(...registerables);
|
||||
|
|
|
|||
|
|
@ -69,10 +69,6 @@ import { TempusDominus, DateTime } from '@eonasdan/tempus-dominus';
|
|||
window.TempusDominus = TempusDominus;
|
||||
window.DateTime = DateTime;
|
||||
|
||||
// GaugeJS - Modern gauge library (Bootstrap 5 compatible)
|
||||
import { Gauge } from 'gaugejs';
|
||||
window.Gauge = Gauge;
|
||||
|
||||
// jQuery Sparkline (Small charts)
|
||||
import 'jquery-sparkline';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
// SCSS files using @use (must come first)
|
||||
@use "bootstrap/scss/bootstrap";
|
||||
@use "./scss/custom.scss";
|
||||
@use "./scss/index2.scss";
|
||||
@use "./scss/index4.scss";
|
||||
|
||||
// CSS files using @import (legacy approach for .css files)
|
||||
@import "@fortawesome/fontawesome-free/css/all.min.css";
|
||||
|
|
@ -19,8 +21,7 @@
|
|||
// jqvmap
|
||||
// @import "jqvmap/dist/jqvmap.min.css";
|
||||
|
||||
// Custom Theme Style
|
||||
@import "scss/custom.scss";
|
||||
// Custom Theme Style is now handled with @use at the top
|
||||
|
||||
// Page-specific styles
|
||||
@import "scss/index2.scss";
|
||||
|
|
@ -15,10 +15,6 @@ import SkyconsFactory from 'skycons';
|
|||
const Skycons = SkyconsFactory(window);
|
||||
window.Skycons = Skycons;
|
||||
|
||||
// GaugeJS for gauge charts
|
||||
import { Gauge } from 'gaugejs';
|
||||
window.Gauge = Gauge;
|
||||
|
||||
// jQuery Sparkline for mini charts
|
||||
import 'jquery-sparkline';
|
||||
|
||||
|
|
@ -28,6 +24,5 @@ import 'jquery-sparkline';
|
|||
export default {
|
||||
Chart,
|
||||
Skycons,
|
||||
Gauge,
|
||||
initialized: true
|
||||
};
|
||||
|
|
@ -4680,3 +4680,167 @@ ul.notifications {
|
|||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Improved Tile Stats Layout */
|
||||
.tile-stats-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.tile_stats_count {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
height: 120px; /* Fixed height for equal height widgets */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border: 1px solid #e6e9ed;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tile_stats_count:hover {
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.tile_stats_count .tile-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
margin-right: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tile_stats_count .tile-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tile_stats_count .tile-content .count {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
margin-bottom: 5px;
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.tile_stats_count .tile-content span {
|
||||
font-size: 14px;
|
||||
color: #7f8c8d;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Icon color themes */
|
||||
.tile-icon.icon-users { background-color: #3498db; color: white; }
|
||||
.tile-icon.icon-time { background-color: #e74c3c; color: white; }
|
||||
.tile-icon.icon-orders { background-color: #f39c12; color: white; }
|
||||
.tile-icon.icon-revenue { background-color: #2ecc71; color: white; }
|
||||
.tile-icon.icon-conversions { background-color: #9b59b6; color: white; }
|
||||
.tile-icon.icon-views { background-color: #1abc9c; color: white; }
|
||||
|
||||
/* Scrollable widgets */
|
||||
.scrollable-widget {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scrollable-widget::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.scrollable-widget::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.scrollable-widget::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.scrollable-widget::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
/* Recent Orders table scrollable */
|
||||
.recent-orders-scroll {
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.recent-orders-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.recent-orders-scroll::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.recent-orders-scroll::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.recent-orders-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
/* Recent Activities scrollable */
|
||||
.activities-scroll {
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.activities-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.activities-scroll::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.activities-scroll::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.activities-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.tile-stats-container {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.tile_stats_count {
|
||||
max-width: none;
|
||||
height: auto;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.tile_stats_count .tile-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.tile_stats_count .tile-content .count {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,39 +23,37 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
padding: 3px;
|
||||
|
||||
.profile_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.border-aero {
|
||||
background-color: #1ABB9C;
|
||||
border: 2px solid #1ABB9C;
|
||||
}
|
||||
|
||||
&.border-green {
|
||||
background-color: #26B99A;
|
||||
border: 2px solid #26B99A;
|
||||
}
|
||||
|
||||
&.border-blue {
|
||||
background-color: #3498DB;
|
||||
border: 2px solid #3498DB;
|
||||
}
|
||||
|
||||
&.border-red {
|
||||
background-color: #E74C3C;
|
||||
border: 2px solid #E74C3C;
|
||||
}
|
||||
|
||||
&.border-purple {
|
||||
background-color: #9B59B6;
|
||||
border: 2px solid #9B59B6;
|
||||
}
|
||||
}
|
||||
|
||||
.d-flex-body {
|
||||
.media-body {
|
||||
flex: 1;
|
||||
|
||||
.title {
|
||||
|
|
@ -121,6 +119,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Engagement Metrics Styling */
|
||||
.metric {
|
||||
margin-bottom: 15px;
|
||||
|
||||
p {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 14px;
|
||||
|
||||
.metric-label {
|
||||
color: #73879C;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.progress.progress_sm {
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tiles Styling for Statistics */
|
||||
.tiles {
|
||||
.tile {
|
||||
|
|
@ -150,8 +172,8 @@
|
|||
}
|
||||
|
||||
/* Scroll View for Lists - Only apply to Top Profiles */
|
||||
.top_profiles.scroll-view {
|
||||
max-height: 300px;
|
||||
.top_profiles.scroll-view.page-index2-profiles {
|
||||
max-height: 385px;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
|
|
@ -175,10 +197,10 @@
|
|||
/* Media Object Flexbox Support */
|
||||
.media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.d-flex-body {
|
||||
.media-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
/*
|
||||
* index4.scss
|
||||
* ------------------
|
||||
* Styles for the Store Analytics dashboard page (index4.html).
|
||||
*/
|
||||
|
||||
// Custom styles for the new widgets will go here.
|
||||
|
||||
.top_products_scroll {
|
||||
max-height: 340px;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.media.event {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.product_img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:hover {
|
||||
color: #1ABB9C;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
|
||||
strong {
|
||||
color: #1ABB9C;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom badge color for 'Pending' status
|
||||
.badge.bg-orange {
|
||||
background-color: #f39c12 !important;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -46,9 +46,11 @@
|
|||
<ul class="nav side-menu">
|
||||
<li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
|
||||
<ul class="nav child_menu">
|
||||
<li><a href="index.html">Dashboard</a></li>
|
||||
<li><a href="index2.html">Dashboard2</a></li>
|
||||
<li><a href="index3.html">Dashboard3</a></li>
|
||||
<li><a href="index.html">Dashboard 1</a></li>
|
||||
<li><a href="index2.html">Dashboard 2</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
<li><a href="index4.html">Dashboard 4</a></li>
|
||||
<li><a href="index3.html">Dashboard 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
|
||||
|
|
@ -592,10 +594,9 @@
|
|||
|
||||
<div class="sidebar-widget">
|
||||
<h4>Profile Completion</h4>
|
||||
<canvas width="150" height="80" id="chart_gauge_01" class="" style="width: 160px; height: 100px;"></canvas>
|
||||
<div id="profile_completion_gauge_test" style="width:160px;height:120px;margin:0 auto;"></div>
|
||||
<div class="goal-wrapper">
|
||||
<span id="gauge-text" class="gauge-value pull-left">0</span>
|
||||
<span class="gauge-value pull-left">%</span>
|
||||
<span class="goal-value pull-left">75%</span>
|
||||
<span id="goal-text" class="goal-value pull-right">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default defineConfig({
|
|||
'vendor-charts': ['chart.js', 'echarts', 'leaflet'],
|
||||
'vendor-forms': ['select2', 'ion-rangeslider', 'autosize', 'switchery', '@eonasdan/tempus-dominus'],
|
||||
'vendor-ui': ['jquery-ui', 'nprogress', 'datatables.net', 'datatables.net-bs5'],
|
||||
'vendor-utils': ['dayjs', 'jquery-sparkline', 'skycons', 'gaugejs']
|
||||
'vendor-utils': ['dayjs', 'jquery-sparkline', 'skycons']
|
||||
},
|
||||
assetFileNames: (assetInfo) => {
|
||||
const info = assetInfo.name.split('.');
|
||||
|
|
@ -36,6 +36,7 @@ export default defineConfig({
|
|||
main: 'production/index.html',
|
||||
index2: 'production/index2.html',
|
||||
index3: 'production/index3.html',
|
||||
index4: 'production/index4.html',
|
||||
|
||||
form: 'production/form.html',
|
||||
form_advanced: 'production/form_advanced.html',
|
||||
|
|
|
|||
Loadingโฆ
Reference in New Issue