<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - eCommerce</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Font: Poppins (used for a clean, modern dashboard look) -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Leaflet (OpenStreetMap) for interactive maps (no API key required)
SRI added with the verified SHA-256 hash so browsers will accept the resource.
Computed SHA-256 (base64): p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=
-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="anonymous" />
<style>
:root {
--primary-color: #1E90FF;
/* changed from violet to blue (DodgerBlue) */
--secondary-color: #63A4FF;
/* complementary lighter blue */
--success-color: #28C76F;
--danger-color: #EA5455;
--warning-color: #FF9F43;
--info-color: #00CFE8;
--dark-color: #2E2E59;
--light-color: #F7F7FC;
--sidebar-width: 260px;
--header-height: 65px;
--card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--card-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* Use Poppins for a modern, friendly UI; fall back to common system fonts */
font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #F0F0F5;
color: #626262;
overflow-x: hidden;
}
/* Layout Structure */
.app-container {
display: flex;
min-height: 100vh;
}
/* Sidebar Styles */
.sidebar {
width: var(--sidebar-width);
background-color: white;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
position: fixed;
height: 100vh;
overflow-y: auto;
z-index: 100;
transition: transform 0.3s ease;
}
.sidebar-header {
padding: 1.5rem;
border-bottom: 1px solid #EAEAEF;
display: flex;
align-items: center;
}
.logo {
display: flex;
align-items: center;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}
.logo i {
margin-right: 0.5rem;
font-size: 1.8rem;
}
.nav-menu {
padding: 1rem 0;
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
padding: 0.75rem 1.5rem;
color: #626262;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
.nav-link:hover {
color: var(--primary-color);
background-color: rgba(115, 103, 240, 0.08);
}
.nav-link.active {
color: white;
background-color: var(--primary-color);
}
.nav-link.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background-color: var(--secondary-color);
}
.nav-link i {
width: 24px;
margin-right: 0.75rem;
font-size: 1.1rem;
}
.nav-text {
font-size: 0.95rem;
font-weight: 500;
}
.nav-badge {
margin-left: auto;
background-color: var(--danger-color);
color: white;
font-size: 0.7rem;
padding: 0.15rem 0.4rem;
border-radius: 10px;
}
/* Main Content */
.main-content {
flex: 1;
margin-left: var(--sidebar-width);
transition: margin-left 0.3s ease;
}
/* Header */
.header {
background-color: white;
height: var(--header-height);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 50;
}
.header-left {
display: flex;
align-items: center;
}
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: var(--dark-color);
cursor: pointer;
margin-right: 1rem;
}
.search-bar {
position: relative;
width: 300px;
}
.search-bar input {
width: 100%;
padding: 0.5rem 2.5rem 0.5rem 1rem;
border: 1px solid #EAEAEF;
border-radius: 5px;
background-color: #F7F7FC;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.search-bar input:focus {
outline: none;
border-color: var(--primary-color);
background-color: white;
}
.search-bar i {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: #A5A3AE;
}
.header-right {
display: flex;
align-items: center;
}
.header-item {
position: relative;
margin-left: 1.5rem;
cursor: pointer;
}
.header-item i {
font-size: 1.2rem;
color: #626262;
transition: color 0.3s ease;
}
.header-item:hover i {
color: var(--primary-color);
}
.notification-badge {
position: absolute;
top: -5px;
right: -5px;
width: 18px;
height: 18px;
background-color: var(--danger-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
font-weight: 600;
}
.user-profile {
display: flex;
align-items: center;
margin-left: 1.5rem;
cursor: pointer;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.user-info {
margin-left: 0.75rem;
}
.user-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--dark-color);
}
.user-role {
font-size: 0.75rem;
color: #A5A3AE;
}
/* Dashboard Content */
.dashboard-content {
padding: 2rem;
}
.page-title {
font-size: 1.75rem;
font-weight: 600;
color: var(--dark-color);
margin-bottom: 0.5rem;
}
.breadcrumb {
display: flex;
align-items: center;
margin-bottom: 2rem;
font-size: 0.9rem;
}
.breadcrumb-item {
color: #A5A3AE;
}
.breadcrumb-item:not(:last-child)::after {
content: '/';
margin: 0 0.5rem;
}
.breadcrumb-item.active {
color: var(--primary-color);
}
/* Welcome Card */
.welcome-card {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 12px;
padding: 2rem;
color: white;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
box-shadow: var(--card-shadow);
}
.welcome-card::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.welcome-content {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
.welcome-text h2 {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.welcome-text p {
font-size: 1rem;
opacity: 0.9;
margin-bottom: 1.5rem;
}
.welcome-stats {
display: flex;
gap: 2rem;
}
.welcome-stat {
text-align: center;
}
.welcome-stat-value {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.welcome-stat-label {
font-size: 0.85rem;
opacity: 0.8;
}
.welcome-image {
width: 180px;
height: 180px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
/* Stats Cards */
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background-color: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: var(--card-hover-shadow);
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
border-radius: 50%;
transform: translate(30px, -30px);
}
.stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.stat-title {
font-size: 0.85rem;
color: #A5A3AE;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.stat-icon.primary {
background-color: rgba(115, 103, 240, 0.1);
color: var(--primary-color);
}
.stat-icon.success {
background-color: rgba(40, 199, 111, 0.1);
color: var(--success-color);
}
.stat-icon.danger {
background-color: rgba(234, 84, 85, 0.1);
color: var(--danger-color);
}
.stat-icon.warning {
background-color: rgba(255, 159, 67, 0.1);
color: var(--warning-color);
}
.stat-icon.info {
background-color: rgba(0, 207, 232, 0.1);
color: var(--info-color);
}
.stat-value {
font-size: 1.75rem;
font-weight: 700;
color: var(--dark-color);
margin-bottom: 0.5rem;
}
.stat-change {
display: flex;
align-items: center;
font-size: 0.85rem;
}
.stat-change.positive {
color: var(--success-color);
}
.stat-change.negative {
color: var(--danger-color);
}
.stat-change i {
margin-right: 0.25rem;
}
/* Chart Cards */
.charts-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.chart-card {
background-color: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: var(--card-shadow);
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.chart-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--dark-color);
}
.chart-options {
display: flex;
}
.chart-option {
padding: 0.25rem 0.75rem;
margin-left: 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s ease;
}
.chart-option.active {
background-color: var(--primary-color);
color: white;
}
.chart-option:not(.active) {
background-color: #F0F0F5;
color: #626262;
}
.chart-option:not(.active):hover {
background-color: #EAEAEF;
}
.chart-container {
height: 300px;
position: relative;
}
/* Product List */
.product-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.product-item {
display: flex;
align-items: center;
padding: 1rem;
background-color: #F9F9FC;
border-radius: 8px;
transition: all 0.3s ease;
}
.product-item:hover {
background-color: #F0F0F5;
transform: translateX(5px);
}
.product-image {
width: 60px;
height: 60px;
border-radius: 8px;
object-fit: cover;
margin-right: 1rem;
}
.product-info {
flex: 1;
}
.product-name {
font-weight: 600;
color: var(--dark-color);
margin-bottom: 0.25rem;
}
.product-category {
font-size: 0.85rem;
color: #A5A3AE;
}
.product-price {
font-weight: 700;
color: var(--primary-color);
font-size: 1.1rem;
}
/* Order Map */
.order-map {
height: 350px;
background-color: #F9F9FC;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
/* Ensure the map element fills the order-map container */
#orderMap {
width: 100%;
height: 100%;
}
.map-placeholder {
text-align: center;
color: #A5A3AE;
}
.map-placeholder i {
font-size: 3rem;
margin-bottom: 1rem;
color: #D0D0D8;
}
/* Order Stats */
.order-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-top: 1.5rem;
}
.order-stat {
display: flex;
align-items: center;
padding: 0.75rem;
background-color: #F9F9FC;
border-radius: 8px;
}
.order-stat-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
}
.order-stat-info {
flex: 1;
}
.order-stat-value {
font-weight: 700;
color: var(--dark-color);
}
.order-stat-label {
font-size: 0.85rem;
color: #A5A3AE;
}
/* Simple Chart CSS */
.bar-chart {
display: flex;
align-items: flex-end;
height: 100%;
padding: 1rem 0;
}
.bar-group {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.bar {
width: 70%;
background: linear-gradient(to top, var(--primary-color), var(--secondary-color));
border-radius: 4px 4px 0 0;
position: relative;
transition: all 0.3s ease;
}
.bar:hover {
opacity: 0.8;
}
.bar-label {
margin-top: 0.5rem;
font-size: 0.8rem;
color: #A5A3AE;
}
/* Progress Bars */
.progress-container {
margin-bottom: 1.5rem;
}
.progress-header {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.progress-title {
font-size: 0.9rem;
font-weight: 500;
color: var(--dark-color);
}
.progress-value {
font-size: 0.85rem;
font-weight: 600;
color: var(--primary-color);
}
.progress-bar {
height: 8px;
background-color: #F0F0F5;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
border-radius: 4px;
transition: width 1s ease;
}
/* Responsive */
@media (max-width: 1200px) {
.charts-container {
grid-template-columns: 1fr;
}
}
@media (max-width: 992px) {
.stats-container {
grid-template-columns: repeat(2, 1fr);
}
.welcome-content {
flex-direction: column;
text-align: center;
}
.welcome-image {
margin-top: 1.5rem;
}
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.active {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
.menu-toggle {
display: block;
}
.search-bar {
display: none;
}
.user-info {
display: none;
}
.stats-container {
grid-template-columns: 1fr;
}
.welcome-stats {
flex-direction: column;
gap: 1rem;
}
.order-stats {
grid-template-columns: 1fr;
}
}
/* Loading Animation */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255, 255, 255, .3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Tooltip */
.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background-color: var(--dark-color);
color: white;
padding: 0.5rem 0.75rem;
border-radius: 4px;
font-size: 0.75rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.tooltip:hover::after {
opacity: 1;
}
</style>
</head>
<body>
<div class="app-container">
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<div class="logo">
<i class="fas fa-cube"></i>
<span>NovaDash</span>
</div>
</div>
<nav class="nav-menu">
<div class="nav-item">
<a href="index.html" class="nav-link">
<i class="fas fa-home"></i>
<span class="nav-text">Dashboards</span>
</a>
</div>
<div class="nav-item">
<a href="crm.html" class="nav-link">
<i class="fas fa-briefcase"></i>
<span class="nav-text">CRM</span>
</a>
</div>
<div class="nav-item">
<a href="ecommerce.html" class="nav-link active">
<i class="fas fa-shopping-cart"></i>
<span class="nav-text">Ecommerce</span>
<span class="nav-badge">5</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-envelope"></i>
<span class="nav-text">Email</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-comment"></i>
<span class="nav-text">Chat</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-check-square"></i>
<span class="nav-text">Todo</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-calendar"></i>
<span class="nav-text">Calendar</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-file-alt"></i>
<span class="nav-text">Invoice</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-users"></i>
<span class="nav-text">Users</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-key"></i>
<span class="nav-text">Roles & Permissions</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-pager"></i>
<span class="nav-text">Pages</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-file-alt"></i>
<span class="nav-text">Documentation</span>
</a>
</div>
</nav>
</aside>
<!-- Main Content -->
<main class="main-content">
<!-- Header -->
<header class="header">
<div class="header-left">
<button class="menu-toggle" id="menuToggle">
<i class="fas fa-bars"></i>
</button>
<div class="search-bar">
<input type="text" placeholder="Search...">
<i class="fas fa-search"></i>
</div>
</div>
<div class="header-right">
<div class="header-item tooltip" data-tooltip="Notifications">
<i class="fas fa-bell"></i>
<span class="notification-badge">3</span>
</div>
<div class="header-item tooltip" data-tooltip="Settings">
<i class="fas fa-cog"></i>
</div>
<div class="user-profile">
<img src="https://picsum.photos/seed/user123/40/40.jpg" alt="User" class="user-avatar">
<div class="user-info">
<div class="user-name">John Doe</div>
<div class="user-role">Admin</div>
</div>
</div>
</div>
</header>
<!-- Dashboard Content -->
<div class="dashboard-content">
<h1 class="page-title">eCommerce Dashboard</h1>
<div class="breadcrumb">
<span class="breadcrumb-item">Home</span>
<span class="breadcrumb-item">Dashboards</span>
<span class="breadcrumb-item active">eCommerce</span>
</div>
<!-- Welcome Card -->
<div class="welcome-card">
<div class="welcome-content">
<div class="welcome-text">
<h2>Congratulations John! 🎉</h2>
<p>You are the seller of the month</p>
<div class="welcome-stats">
<div class="welcome-stat">
<div class="welcome-stat-value">$48.9k</div>
<div class="welcome-stat-label">Total Sales</div>
</div>
<div class="welcome-stat">
<div class="welcome-stat-value">526</div>
<div class="welcome-stat-label">Products Sold</div>
</div>
</div>
</div>
<div class="welcome-image">
<i class="fas fa-trophy"></i>
</div>
</div>
</div>
<!-- Stats Cards -->
<div class="stats-container">
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">Revenue</div>
<div class="stat-icon primary">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<div class="stat-value">$230k</div>
<div class="stat-change positive">
<i class="fas fa-arrow-up"></i>
<span>+20.1% from last month</span>
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">Customers</div>
<div class="stat-icon success">
<i class="fas fa-users"></i>
</div>
</div>
<div class="stat-value">8.549k</div>
<div class="stat-change positive">
<i class="fas fa-arrow-up"></i>
<span>+15.3% from last month</span>
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">Orders</div>
<div class="stat-icon warning">
<i class="fas fa-shopping-bag"></i>
</div>
</div>
<div class="stat-value">1.245k</div>
<div class="stat-change negative">
<i class="fas fa-arrow-down"></i>
<span>-5.4% from last month</span>
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-title">Profit</div>
<div class="stat-icon info">
<i class="fas fa-chart-line"></i>
</div>
</div>
<div class="stat-value">$97.5k</div>
<div class="stat-change positive">
<i class="fas fa-arrow-up"></i>
<span>+8.2% from last month</span>
</div>
</div>
</div>
<!-- Charts Container -->
<div class="charts-container">
<div class="chart-card">
<div class="chart-header">
<h3 class="chart-title">Revenue Report</h3>
<div class="chart-options">
<button class="chart-option active">Monthly</button>
<button class="chart-option">Weekly</button>
<button class="chart-option">Daily</button>
</div>
</div>
<div class="chart-container">
<div class="bar-chart" id="revenueChart">
<!-- Chart bars will be generated by JavaScript -->
</div>
</div>
</div>
<div class="chart-card">
<div class="chart-header">
<h3 class="chart-title">Top Products</h3>
<div class="chart-options">
<button class="chart-option active">This Month</button>
<button class="chart-option">Last Month</button>
</div>
</div>
<div class="product-list">
<div class="product-item">
<img src="https://picsum.photos/seed/iphone13/60/60.jpg" alt="Product" class="product-image">
<div class="product-info">
<div class="product-name">Apple iPhone 13</div>
<div class="product-category">Electronics</div>
</div>
<div class="product-price">$999.29</div>
</div>
<div class="product-item">
<img src="https://picsum.photos/seed/macbook/60/60.jpg" alt="Product" class="product-image">
<div class="product-info">
<div class="product-name">MacBook Pro M1</div>
<div class="product-category">Electronics</div>
</div>
<div class="product-price">$1,299.00</div>
</div>
<div class="product-item">
<img src="https://picsum.photos/seed/airpods/60/60.jpg" alt="Product" class="product-image">
<div class="product-info">
<div class="product-name">AirPods Pro</div>
<div class="product-category">Accessories</div>
</div>
<div class="product-price">$249.00</div>
</div>
<div class="product-item">
<img src="https://picsum.photos/seed/ipad/60/60.jpg" alt="Product" class="product-image">
<div class="product-info">
<div class="product-name">iPad Air</div>
<div class="product-category">Electronics</div>
</div>
<div class="product-price">$599.00</div>
</div>
</div>
</div>
</div>
<!-- Order Map Card -->
<div class="chart-card">
<div class="chart-header">
<h3 class="chart-title">Order Distribution</h3>
<div class="chart-options">
<button class="chart-option active">World</button>
<button class="chart-option">Country</button>
<button class="chart-option">City</button>
</div>
</div>
<div class="order-map">
<!-- Leaflet map will be initialized here -->
<div id="orderMap" style="width:100%; height:100%; border-radius: 8px; overflow: hidden; outline: 2px dashed rgba(0,0,0,0.05);"></div>
</div>
<div class="order-stats">
<div class="order-stat">
<div class="order-stat-icon primary">
<i class="fas fa-box"></i>
</div>
<div class="order-stat-info">
<div class="order-stat-value">1,245</div>
<div class="order-stat-label">Total Orders</div>
</div>
</div>
<div class="order-stat">
<div class="order-stat-icon success">
<i class="fas fa-truck"></i>
</div>
<div class="order-stat-info">
<div class="order-stat-value">892</div>
<div class="order-stat-label">Delivered</div>
</div>
</div>
<div class="order-stat">
<div class="order-stat-icon warning">
<i class="fas fa-clock"></i>
</div>
<div class="order-stat-info">
<div class="order-stat-value">287</div>
<div class="order-stat-label">In Transit</div>
</div>
</div>
<div class="order-stat">
<div class="order-stat-icon danger">
<i class="fas fa-exclamation-circle"></i>
</div>
<div class="order-stat-info">
<div class="order-stat-value">66</div>
<div class="order-stat-label">Pending</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script>
// DOM Elements
const menuToggle = document.getElementById('menuToggle');
const sidebar = document.getElementById('sidebar');
const revenueChart = document.getElementById('revenueChart');
const chartOptions = document.querySelectorAll('.chart-option');
// Toggle Sidebar
menuToggle.addEventListener('click', () => {
sidebar.classList.toggle('active');
});
// Close sidebar when clicking outside on mobile
document.addEventListener('click', (e) => {
if (window.innerWidth <= 768) {
if (!sidebar.contains(e.target) && !menuToggle.contains(e.target)) {
sidebar.classList.remove('active');
}
}
});
// Generate Bar Chart
function generateBarChart(containerId, data) {
const container = document.getElementById(containerId);
container.innerHTML = '';
data.forEach(item => {
const barGroup = document.createElement('div');
barGroup.className = 'bar-group';
const bar = document.createElement('div');
bar.className = 'bar';
bar.style.height = `${item.value}%`;
const label = document.createElement('div');
label.className = 'bar-label';
label.textContent = item.label;
barGroup.appendChild(bar);
barGroup.appendChild(label);
container.appendChild(barGroup);
// Animate bars on load
setTimeout(() => {
bar.style.height = `${item.value}%`;
}, 100);
});
}
// Revenue Chart Data
const revenueData = [
{label: 'Jan', value: 45},
{label: 'Feb', value: 52},
{label: 'Mar', value: 68},
{label: 'Apr', value: 74},
{label: 'May', value: 82},
{label: 'Jun', value: 95},
{label: 'Jul', value: 88},
{label: 'Aug', value: 92},
{label: 'Sep', value: 78},
{label: 'Oct', value: 85},
{label: 'Nov', value: 90},
{label: 'Dec', value: 98}
];
// Initialize Chart
generateBarChart('revenueChart', revenueData);
// Chart Options Click Handler
chartOptions.forEach(option => {
option.addEventListener('click', function() {
// Remove active class from all options in the same group
const parent = this.parentElement;
parent.querySelectorAll('.chart-option').forEach(opt => {
opt.classList.remove('active');
});
// Add active class to clicked option
this.classList.add('active');
// Regenerate chart with new data (in a real app, this would fetch different data)
if (parent.parentElement.parentElement.querySelector('#revenueChart')) {
// Randomize data for demo purposes
const newData = revenueData.map(item => ({
...item,
value: Math.floor(Math.random() * 60) + 40
}));
generateBarChart('revenueChart', newData);
}
});
});
// Handle window resize
window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
sidebar.classList.remove('active');
}
});
// Simulate real-time data updates
setInterval(() => {
// Update a random stat card
const statValues = document.querySelectorAll('.stat-value');
const randomIndex = Math.floor(Math.random() * statValues.length);
const statValue = statValues[randomIndex];
// Store original value
const originalValue = statValue.textContent;
// Add loading animation
statValue.innerHTML = '<span class="loading"></span>';
// Simulate data fetch
setTimeout(() => {
// Restore with slight change
if (originalValue.includes('k')) {
const numValue = parseFloat(originalValue.replace(/[$,k]/g, ''));
const change = Math.floor(Math.random() * 10 - 5);
statValue.textContent = `$${((numValue + change).toFixed(1))}k`;
} else if (originalValue.includes('$')) {
const numValue = parseFloat(originalValue.replace(/[$,]/g, ''));
const change = Math.floor(Math.random() * 1000 - 500);
statValue.textContent = `$${(numValue + change).toLocaleString()}`;
}
}, 1000);
}, 12000); // Update every 12 seconds
/* ============ Leaflet Map Initialization (Order Distribution) ============ */
// Load Leaflet script dynamically to avoid blocking
(function loadLeaflet() {
const script = document.createElement('script');
script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
// Verified SHA-256 (base64) SRI for Leaflet 1.9.4
script.integrity = 'sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=';
script.crossOrigin = 'anonymous';
script.onload = initOrderMap;
document.body.appendChild(script);
})();
function initOrderMap() {
console.log('initOrderMap called');
// Create map
const map = L.map('orderMap', {zoomControl: false}).setView([20, 0], 2);
console.log('Map object created, adding tile layer...');
// Add OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
console.log('Tile layer added');
// Sample markers (replace with real order locations)
const sampleLocations = [
{lat: 40.7128, lng: -74.0060, title: 'New York: 342 orders'},
{lat: 51.5074, lng: -0.1278, title: 'London: 210 orders'},
{lat: 28.6139, lng: 77.2090, title: 'Delhi: 156 orders'},
{lat: -33.8688, lng: 151.2093, title: 'Sydney: 98 orders'},
{lat: 35.6895, lng: 139.6917, title: 'Tokyo: 210 orders'}
];
sampleLocations.forEach(loc => {
const marker = L.circleMarker([loc.lat, loc.lng], {
radius: 8,
fillColor: '#7367F0',
color: '#fff',
weight: 1,
opacity: 1,
fillOpacity: 0.9
}).addTo(map);
marker.bindPopup(loc.title);
});
// Fit bounds to markers
const latlngs = sampleLocations.map(l => [l.lat, l.lng]);
if (latlngs.length) {
map.fitBounds(latlngs, {padding: [40, 40]});
}
// Some layouts (flex/grid, hidden-to-visible) require Leaflet to be
// notified so it can calculate sizes. Call invalidateSize() immediately
// and again after a short delay to ensure the tiles and markers render.
try {
map.invalidateSize();
setTimeout(() => map.invalidateSize(), 250);
} catch (e) {
// ignore if map is not ready for some reason
console.warn('Could not invalidate map size:', e);
}
}
</script>
</body>
</html>