Material
Design
Dashboard
Admin
Moderne
Html
Template d'administration avec design Material inspiré pour une interface moderne et intuitive.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Matzon — E-Commerce Dashboard</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/>
<!-- Charts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<style>
/* ═══════════════════════════════════════════
TOKENS
═══════════════════════════════════════════ */
:root {
--primary: #3f51b5;
--primary-dark: #303f9f;
--primary-light: #7986cb;
--primary-50: #e8eaf6;
--accent: #ff4081;
--accent-light: #ff80ab;
--sidebar-bg: #1a237e; /* deep indigo */
--sidebar-dark: #121858;
--sidebar-hover: rgba(255,255,255,.07);
--sidebar-active: rgba(255,255,255,.13);
--sidebar-text: rgba(255,255,255,.72);
--sidebar-text-h: #ffffff;
--sidebar-border: rgba(255,255,255,.08);
--sidebar-width: 260px;
--sidebar-mini: 64px;
--header-bg: #ffffff;
--header-h: 64px;
--header-shadow: 0 2px 4px rgba(0,0,0,.08);
--bg: #f0f2f5;
--card: #ffffff;
--border: #e0e0e0;
--border-light: #f5f5f5;
--text: #212121;
--text-sec: #616161;
--text-hint: #9e9e9e;
--success: #4caf50;
--warning: #ff9800;
--danger: #f44336;
--info: #2196f3;
--purple: #9c27b0;
--teal: #009688;
--radius-sm: 4px;
--radius: 8px;
--radius-lg: 12px;
--shadow-1: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
--shadow-2: 0 3px 6px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.08);
--shadow-3: 0 10px 20px rgba(0,0,0,.1), 0 3px 6px rgba(0,0,0,.06);
--t: .22s cubic-bezier(.4,0,.2,1);
}
/* ═══════════════════════════════════════════
RESET
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: 'Roboto', sans-serif;
font-size: 14px;
background: var(--bg);
color: var(--text);
display: flex;
overflow: hidden;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
ul { list-style: none; }
/* ═══════════════════════════════════════════
SIDEBAR
═══════════════════════════════════════════ */
.sidebar {
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
display: flex;
flex-direction: column;
flex-shrink: 0;
overflow: hidden;
transition: width var(--t);
z-index: 300;
}
.sidebar.mini { width: var(--sidebar-mini); }
/* Logo */
.s-logo {
height: var(--header-h);
display: flex;
align-items: center;
padding: 0 16px;
gap: 12px;
border-bottom: 1px solid var(--sidebar-border);
flex-shrink: 0;
overflow: hidden;
white-space: nowrap;
}
.s-logo-icon {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--accent);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(255,64,129,.4);
}
.s-logo-icon .material-icons-round { font-size: 20px; color: #fff; }
.s-logo-text { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: .5px; }
.s-logo-text span { color: var(--accent-light); }
/* Nav scroll */
.s-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0 20px; }
.s-nav::-webkit-scrollbar { width: 3px; }
.s-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }
/* Section label */
.s-label {
font-size: 10px; font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,.3);
padding: 18px 16px 5px;
white-space: nowrap;
overflow: hidden;
}
.sidebar.mini .s-label { visibility: hidden; }
/* Nav row */
.s-item {
display: flex;
align-items: center;
gap: 0;
padding: 0 8px;
margin: 1px 0;
cursor: pointer;
position: relative;
overflow: hidden;
white-space: nowrap;
}
.s-item-inner {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 10px;
border-radius: var(--radius-sm);
flex: 1;
transition: background var(--t), color var(--t);
color: var(--sidebar-text);
overflow: hidden;
}
.s-item:hover .s-item-inner { background: var(--sidebar-hover); color: var(--sidebar-text-h); }
.s-item.active .s-item-inner {
background: var(--sidebar-active);
color: #fff;
}
.s-item.active .s-item-inner::before {
display: none;
}
.s-item.active > .s-item-inner {
position: relative;
}
.s-item.active > .s-item-inner::after {
content: '';
position: absolute;
right: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 70%;
background: var(--accent);
border-radius: 3px 0 0 3px;
}
.s-icon { font-size: 20px; flex-shrink: 0; }
.s-text { font-size: 13.5px; font-weight: 400; flex: 1; }
.s-badge {
font-size: 10px; font-weight: 700;
padding: 1px 6px; border-radius: 20px;
flex-shrink: 0; line-height: 1.6;
}
.badge-accent { background: var(--accent); color: #fff; }
.badge-success { background: var(--success); color: #fff; }
.badge-warning { background: var(--warning); color: #fff; }
.badge-info { background: var(--info); color: #fff; }
.badge-danger { background: var(--danger); color: #fff; }
.s-chevron {
font-size: 16px !important;
color: rgba(255,255,255,.3);
transition: transform var(--t);
flex-shrink: 0;
}
.s-item.open .s-chevron { transform: rotate(90deg); }
.sidebar.mini .s-text,
.sidebar.mini .s-badge,
.sidebar.mini .s-chevron { display: none; }
.sidebar.mini .s-item { padding: 0 6px; }
.sidebar.mini .s-item-inner { padding: 10px; justify-content: center; }
/* Sub */
.s-sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.s-sub.open { max-height: 400px; }
.sidebar.mini .s-sub { display: none; }
.s-sub-item {
display: flex; align-items: center; gap: 8px;
padding: 8px 16px 8px 52px;
margin: 1px 8px;
border-radius: var(--radius-sm);
cursor: pointer;
color: rgba(255,255,255,.55);
font-size: 13px;
transition: background var(--t), color var(--t);
white-space: nowrap;
}
.s-sub-item::before {
content: '';
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
opacity: .5;
flex-shrink: 0;
}
.s-sub-item:hover { background: var(--sidebar-hover); color: rgba(255,255,255,.85); }
.s-sub-item.active { color: var(--accent-light); font-weight: 500; }
.s-sub-item.active::before { opacity: 1; background: var(--accent); }
/* Divider */
.s-div { height: 1px; background: var(--sidebar-border); margin: 8px 16px; }
/* Footer */
.s-foot {
border-top: 1px solid var(--sidebar-border);
padding: 12px 16px;
display: flex; align-items: center; gap: 10px;
overflow: hidden; white-space: nowrap; flex-shrink: 0;
}
.s-foot-av {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; color: #fff;
flex-shrink: 0;
}
.s-foot-info { flex: 1; overflow: hidden; }
.s-foot-name { font-size: 13px; font-weight: 500; color: #fff; }
.s-foot-role { font-size: 11px; color: rgba(255,255,255,.4); }
.s-foot-btn {
background: none;
color: rgba(255,255,255,.4);
border-radius: 6px;
padding: 4px;
transition: color var(--t), background var(--t);
font-size: 13px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.s-foot-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar.mini .s-foot { justify-content: center; padding: 12px 0; }
.sidebar.mini .s-foot-info, .sidebar.mini .s-foot-btn { display: none; }
/* Tooltip on mini */
.sidebar.mini .s-item { position: relative; }
.sidebar.mini .s-item:hover::after {
content: attr(data-label);
position: absolute;
left: calc(var(--sidebar-mini) - 4px);
top: 50%; transform: translateY(-50%);
background: #1a237e;
color: #fff;
font-size: 12px;
font-weight: 500;
padding: 5px 10px;
border-radius: var(--radius-sm);
white-space: nowrap;
z-index: 999;
box-shadow: var(--shadow-2);
pointer-events: none;
}
/* ═══════════════════════════════════════════
MAIN
═══════════════════════════════════════════ */
.main { flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; min-width: 0; }
/* ═══════════════════════════════════════════
HEADER
═══════════════════════════════════════════ */
.header {
height: var(--header-h);
background: var(--header-bg);
box-shadow: var(--header-shadow);
display: flex; align-items: center;
padding: 0 24px;
gap: 12px;
flex-shrink: 0;
z-index: 200;
}
.h-toggle {
width: 40px; height: 40px;
background: none;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--text-sec);
transition: background var(--t);
}
.h-toggle:hover { background: rgba(0,0,0,.05); }
.h-toggle .material-icons-round { font-size: 22px; }
.h-search {
display: flex; align-items: center; gap: 8px;
background: #f5f5f5;
border-radius: 4px;
padding: 0 14px;
height: 40px;
flex: 1; max-width: 400px;
border: 1px solid transparent;
transition: border-color var(--t), background var(--t);
}
.h-search:focus-within { background: #fff; border-color: var(--primary); }
.h-search .material-icons-round { color: var(--text-hint); font-size: 20px; }
.h-search input {
background: none; border: none; outline: none;
font-family: 'Roboto', sans-serif;
font-size: 14px; color: var(--text);
width: 100%;
}
.h-search input::placeholder { color: var(--text-hint); }
.h-spacer { flex: 1; }
.h-actions { display: flex; align-items: center; gap: 4px; }
.h-btn {
width: 40px; height: 40px;
background: none;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--text-sec);
position: relative;
transition: background var(--t), color var(--t);
}
.h-btn:hover { background: rgba(0,0,0,.05); color: var(--primary); }
.h-btn .material-icons-round { font-size: 22px; }
.h-dot {
position: absolute; top: 8px; right: 8px;
width: 8px; height: 8px;
border-radius: 50%;
border: 2px solid #fff;
}
.dot-red { background: var(--danger); }
.dot-green { background: var(--success); }
.dot-orange { background: var(--warning); }
.h-div { width: 1px; height: 28px; background: var(--border); margin: 0 8px; }
.h-avatar {
display: flex; align-items: center; gap: 10px;
padding: 4px 8px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--t);
}
.h-avatar:hover { background: rgba(0,0,0,.04); }
.h-av {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; color: #fff;
}
.h-av-info { line-height: 1.3; }
.h-av-name { font-size: 13px; font-weight: 500; }
.h-av-role { font-size: 11px; color: var(--text-hint); }
.h-av-icon { color: var(--text-hint); font-size: 18px !important; }
/* ═══════════════════════════════════════════
PAGE
═══════════════════════════════════════════ */
.page {
flex: 1; overflow-y: auto;
padding: 24px;
}
.page::-webkit-scrollbar { width: 6px; }
.page::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
/* Page header */
.page-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 24px;
}
.page-title { font-size: 20px; font-weight: 500; }
.breadcrumb {
display: flex; align-items: center; gap: 4px;
font-size: 13px; color: var(--text-hint);
}
.breadcrumb .material-icons-round { font-size: 14px; }
.breadcrumb .bc-active { color: var(--primary); font-weight: 500; }
.page-actions { display: flex; gap: 10px; }
/* Buttons */
.btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 0 16px; height: 36px;
border-radius: var(--radius-sm);
font-size: 13.5px; font-weight: 500;
letter-spacing: .3px;
transition: box-shadow var(--t), opacity var(--t);
line-height: 1;
}
.btn:hover { opacity: .9; }
.btn .material-icons-round { font-size: 18px; }
.btn-primary {
background: var(--primary); color: #fff;
box-shadow: 0 2px 8px rgba(63,81,181,.4);
}
.btn-primary:hover { box-shadow: 0 4px 14px rgba(63,81,181,.5); }
.btn-accent {
background: var(--accent); color: #fff;
box-shadow: 0 2px 8px rgba(255,64,129,.4);
}
.btn-outline {
background: #fff; border: 1px solid var(--border);
color: var(--text-sec);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-text { background: none; color: var(--primary); padding: 0 8px; }
.btn-text:hover { background: var(--primary-50); }
/* ═══════════════════════════════════════════
GRID UTILITIES
═══════════════════════════════════════════ */
.row { display: grid; gap: 20px; margin-bottom: 20px; }
.cols-4 { grid-template-columns: repeat(4,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-7-5 { grid-template-columns: 7fr 5fr; }
.cols-5-7 { grid-template-columns: 5fr 7fr; }
.cols-3-2-2 { grid-template-columns: 3fr 2fr 2fr; }
.cols-2-1 { grid-template-columns: 2fr 1fr; }
.cols-1-2 { grid-template-columns: 1fr 2fr; }
/* Card */
.card {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow-1);
overflow: hidden;
}
.card-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border-light);
}
.card-title { font-size: 15px; font-weight: 500; }
.card-sub { font-size: 12px; color: var(--text-hint); margin-top: 2px; }
.card-body { padding: 20px; }
.card-body-sm { padding: 12px 20px; }
.card-foot {
padding: 12px 20px;
border-top: 1px solid var(--border-light);
display: flex; align-items: center; justify-content: space-between;
}
/* Card menu btn */
.card-menu {
width: 32px; height: 32px;
border-radius: 50%;
background: none;
display: flex; align-items: center; justify-content: center;
color: var(--text-hint);
transition: background var(--t);
}
.card-menu:hover { background: rgba(0,0,0,.05); }
.card-menu .material-icons-round { font-size: 20px; }
/* ═══════════════════════════════════════════
STAT CARDS
═══════════════════════════════════════════ */
.stat-card {
border-radius: var(--radius);
padding: 20px;
color: #fff;
display: flex; flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-2);
}
.stat-card::after {
content: '';
position: absolute;
right: -20px; top: -20px;
width: 100px; height: 100px;
border-radius: 50%;
background: rgba(255,255,255,.08);
}
.stat-card::before {
content: '';
position: absolute;
right: 10px; bottom: -30px;
width: 80px; height: 80px;
border-radius: 50%;
background: rgba(255,255,255,.05);
}
.sc-indigo { background: linear-gradient(135deg,#3f51b5,#5c6bc0); }
.sc-pink { background: linear-gradient(135deg,#e91e63,#f06292); }
.sc-teal { background: linear-gradient(135deg,#009688,#4db6ac); }
.sc-orange { background: linear-gradient(135deg,#ff5722,#ff8a65); }
.sc-purple { background: linear-gradient(135deg,#7b1fa2,#ab47bc); }
.sc-cyan { background: linear-gradient(135deg,#0097a7,#4dd0e1); }
.sc-green { background: linear-gradient(135deg,#388e3c,#81c784); }
.sc-amber { background: linear-gradient(135deg,#f57c00,#ffb74d); }
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; }
.stat-icon-wrap {
width: 48px; height: 48px;
border-radius: 10px;
background: rgba(255,255,255,.2);
display: flex; align-items: center; justify-content: center;
}
.stat-icon-wrap .material-icons-round { font-size: 24px; color: #fff; }
.stat-trend {
font-size: 12px; font-weight: 500;
padding: 3px 8px; border-radius: 20px;
background: rgba(255,255,255,.2);
display: flex; align-items: center; gap: 3px;
}
.stat-trend .material-icons-round { font-size: 14px; }
.stat-value { font-size: 28px; font-weight: 700; line-height: 1; }
.stat-label { font-size: 13px; opacity: .85; margin-top: 2px; }
.stat-foot { font-size: 12px; opacity: .7; display: flex; align-items: center; gap: 4px; }
.stat-foot .material-icons-round { font-size: 14px; }
/* ═══════════════════════════════════════════
MINI METRIC CARDS
═══════════════════════════════════════════ */
.metric-card {
padding: 18px 20px;
display: flex; align-items: center; gap: 16px;
}
.metric-icon {
width: 48px; height: 48px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.metric-icon .material-icons-round { font-size: 22px; }
.mi-indigo { background: #e8eaf6; color: var(--primary); }
.mi-pink { background: #fce4ec; color: #e91e63; }
.mi-teal { background: #e0f2f1; color: var(--teal); }
.mi-orange { background: #fbe9e7; color: #ff5722; }
.mi-purple { background: #f3e5f5; color: var(--purple); }
.mi-green { background: #e8f5e9; color: var(--success); }
.mi-amber { background: #fff3e0; color: var(--warning); }
.mi-cyan { background: #e0f7fa; color: #0097a7; }
.metric-body { flex: 1; }
.metric-val { font-size: 22px; font-weight: 700; }
.metric-lbl { font-size: 12.5px; color: var(--text-hint); margin-top: 1px; }
.metric-chg { font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 3px; margin-top: 4px; }
.chg-up { color: var(--success); }
.chg-dn { color: var(--danger); }
.chg-icon { font-size: 14px !important; }
/* ═══════════════════════════════════════════
PROGRESS LIST
═══════════════════════════════════════════ */
.prog-item { margin-bottom: 14px; }
.prog-item:last-child { margin-bottom: 0; }
.prog-head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; }
.prog-head .prog-lbl { color: var(--text-sec); }
.prog-head .prog-val { font-weight: 500; }
.prog-bar { height: 6px; background: #f0f0f0; border-radius: 4px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 4px; transition: width .8s ease; }
.pf-indigo { background: var(--primary); }
.pf-pink { background: var(--accent); }
.pf-teal { background: var(--teal); }
.pf-orange { background: #ff5722; }
.pf-purple { background: var(--purple); }
.pf-green { background: var(--success); }
.pf-amber { background: var(--warning); }
/* ═══════════════════════════════════════════
TABLE
═══════════════════════════════════════════ */
.mat-table { width: 100%; border-collapse: collapse; }
.mat-table thead th {
font-size: 11.5px;
font-weight: 500;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--text-hint);
padding: 10px 16px;
text-align: left;
background: #fafafa;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.mat-table tbody tr { transition: background var(--t); }
.mat-table tbody tr:hover { background: #f9f9ff; }
.mat-table tbody td {
padding: 13px 16px;
border-bottom: 1px solid var(--border-light);
font-size: 13.5px;
vertical-align: middle;
}
.mat-table tbody tr:last-child td { border-bottom: none; }
/* User cell */
.user-cell { display: flex; align-items: center; gap: 10px; }
.uc-av {
width: 34px; height: 34px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12.5px; font-weight: 700; color: #fff;
flex-shrink: 0;
}
.uc-name { font-weight: 500; font-size: 13.5px; }
.uc-email { font-size: 12px; color: var(--text-hint); }
/* Product cell */
.prod-cell { display: flex; align-items: center; gap: 12px; }
.prod-img {
width: 40px; height: 40px;
border-radius: var(--radius-sm);
background: #f5f5f5;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
flex-shrink: 0;
border: 1px solid var(--border);
}
.prod-name { font-weight: 500; font-size: 13.5px; }
.prod-cat { font-size: 12px; color: var(--text-hint); }
/* Chip status */
.chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; border-radius: 20px;
font-size: 12px; font-weight: 500;
white-space: nowrap;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-success { background: #e8f5e9; color: #388e3c; }
.chip-warning { background: #fff3e0; color: #f57c00; }
.chip-danger { background: #ffebee; color: #c62828; }
.chip-info { background: #e3f2fd; color: #1565c0; }
.chip-purple { background: #f3e5f5; color: #6a1b9a; }
.chip-grey { background: #f5f5f5; color: #616161; }
/* Stars */
.stars { color: #ffc107; font-size: 14px; display: flex; align-items: center; gap: 1px; }
.stars .empty { color: #e0e0e0; }
.stars span { font-size: 12px; color: var(--text-hint); margin-left: 4px; }
/* ═══════════════════════════════════════════
ACTIVITY / TIMELINE
═══════════════════════════════════════════ */
.timeline { padding: 4px 0; }
.tl-item {
display: flex; gap: 14px;
padding: 0 0 18px;
position: relative;
}
.tl-item:not(:last-child)::before {
content: '';
position: absolute;
left: 15px; top: 32px; bottom: 0;
width: 2px;
background: var(--border);
}
.tl-dot {
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
z-index: 1;
}
.tl-dot .material-icons-round { font-size: 16px; color: #fff; }
.tl-body { flex: 1; padding-top: 4px; }
.tl-title { font-size: 13.5px; font-weight: 500; }
.tl-sub { font-size: 12px; color: var(--text-hint); margin-top: 2px; }
.tl-time { font-size: 11.5px; color: var(--text-hint); margin-top: 4px; display: flex; align-items: center; gap: 3px; }
.tl-time .material-icons-round { font-size: 13px; }
/* ═══════════════════════════════════════════
TOP PRODUCTS MINI LIST
═══════════════════════════════════════════ */
.top-prod-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border-light);
}
.top-prod-item:last-child { border-bottom: none; }
.tp-rank {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--primary-50);
color: var(--primary);
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
flex-shrink: 0;
}
.tp-img {
width: 38px; height: 38px;
border-radius: var(--radius-sm);
background: #f5f5f5;
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.tp-info { flex: 1; min-width: 0; }
.tp-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-cat { font-size: 11.5px; color: var(--text-hint); }
.tp-rev { text-align: right; flex-shrink: 0; }
.tp-rev-val { font-size: 13.5px; font-weight: 700; color: var(--primary); }
.tp-rev-cnt { font-size: 11px; color: var(--text-hint); }
/* ═══════════════════════════════════════════
TRAFFIC SOURCES
═══════════════════════════════════════════ */
.traffic-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border-light);
}
.traffic-item:last-child { border-bottom: none; }
.tr-icon {
width: 36px; height: 36px;
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.tr-label { flex: 1; }
.tr-name { font-size: 13px; font-weight: 500; }
.tr-val { font-size: 12px; color: var(--text-hint); }
.tr-bar { width: 80px; }
.tr-pct { font-size: 13px; font-weight: 700; text-align: right; min-width: 36px; }
/* ═══════════════════════════════════════════
CHAT MESSAGES
═══════════════════════════════════════════ */
.chat-list { display: flex; flex-direction: column; gap: 14px; }
.chat-item { display: flex; align-items: flex-start; gap: 10px; }
.chat-av {
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; color: #fff;
flex-shrink: 0;
}
.chat-body { flex: 1; }
.chat-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.chat-name { font-size: 13px; font-weight: 500; }
.chat-time { font-size: 11px; color: var(--text-hint); }
.chat-msg {
font-size: 13px; color: var(--text-sec);
background: #f5f5f5;
padding: 8px 12px;
border-radius: 0 8px 8px 8px;
line-height: 1.5;
display: inline-block;
max-width: 100%;
}
/* ═══════════════════════════════════════════
DONUT LEGEND
═══════════════════════════════════════════ */
.donut-legend { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.dl-item { display: flex; align-items: center; justify-content: space-between; }
.dl-left { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dl-pct { font-weight: 700; font-size: 13px; }
.dl-bar { flex: 1; height: 4px; background: #f0f0f0; border-radius: 4px; overflow: hidden; margin: 0 10px; }
.dl-fill { height: 100%; border-radius: 4px; }
/* ═══════════════════════════════════════════
NOTIFICATION LIST
═══════════════════════════════════════════ */
.notif-item {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border-light);
cursor: pointer;
transition: background var(--t);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #fafafa; }
.notif-icon {
width: 38px; height: 38px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.notif-icon .material-icons-round { font-size: 18px; }
.notif-body { flex: 1; }
.notif-title { font-size: 13px; font-weight: 500; }
.notif-text { font-size: 12px; color: var(--text-hint); margin-top: 2px; line-height: 1.4; }
.notif-time { font-size: 11px; color: var(--text-hint); flex-shrink: 0; margin-top: 2px; }
/* ═══════════════════════════════════════════
COUNTRY LIST
═══════════════════════════════════════════ */
.country-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--border-light);
}
.country-item:last-child { border-bottom: none; }
.country-flag { font-size: 22px; flex-shrink: 0; }
.country-name { flex: 1; font-size: 13.5px; font-weight: 500; }
.country-rev { font-size: 13px; font-weight: 700; color: var(--primary); }
.country-pct { font-size: 11.5px; color: var(--text-hint); min-width: 36px; text-align: right; }
/* ═══════════════════════════════════════════
TASK LIST
═══════════════════════════════════════════ */
.task-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border-light);
}
.task-item:last-child { border-bottom: none; }
.task-cb {
width: 18px; height: 18px;
border-radius: 4px;
border: 2px solid var(--border);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all var(--t);
font-size: 12px; color: #fff;
}
.task-cb.on { background: var(--success); border-color: var(--success); }
.task-txt { flex: 1; font-size: 13.5px; }
.task-txt.done { text-decoration: line-through; color: var(--text-hint); }
.task-pri {
font-size: 11px; font-weight: 500;
padding: 2px 8px; border-radius: 4px;
flex-shrink: 0;
}
.pri-h { background: #ffebee; color: var(--danger); }
.pri-m { background: #fff3e0; color: var(--warning); }
.pri-l { background: #e8f5e9; color: var(--success); }
/* ═══════════════════════════════════════════
INFO TILES
═══════════════════════════════════════════ */
.info-tile {
padding: 20px;
text-align: center;
border-right: 1px solid var(--border-light);
}
.info-tile:last-child { border-right: none; }
.it-val { font-size: 24px; font-weight: 700; }
.it-lbl { font-size: 12px; color: var(--text-hint); margin-top: 4px; }
.it-chg { font-size: 11.5px; font-weight: 500; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 3px; }
.it-chg .material-icons-round { font-size: 14px; }
/* ═══════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1200px) {
.cols-4 { grid-template-columns: repeat(2,1fr); }
.cols-3-2-2 { grid-template-columns: 1fr 1fr; }
.cols-7-5, .cols-5-7, .cols-2-1, .cols-1-2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.cols-3 { grid-template-columns: 1fr 1fr; }
.cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.cols-4, .cols-3, .cols-2 { grid-template-columns: 1fr; }
.page { padding: 14px; }
.h-search { display: none; }
.h-av-info, .h-av-icon { display: none; }
}
</style>
</head>
<body>
<!-- ══════════════════════════════════════
SIDEBAR
══════════════════════════════════════ -->
<aside class="sidebar" id="sidebar">
<!-- Logo -->
<div class="s-logo">
<div class="s-logo-icon">
<span class="material-icons-round">shopping_bag</span>
</div>
<div class="s-logo-text">Mat<span>zon</span></div>
</div>
<!-- Nav -->
<div class="s-nav">
<div class="s-label">Main Menu</div>
<div class="s-item active" data-label="Dashboard" onclick="navActive(this)">
<div class="s-item-inner">
<span class="material-icons-round s-icon">dashboard</span>
<span class="s-text">Dashboard</span>
</div>
</div>
<div class="s-item" data-label="E-Commerce" onclick="navToggle(this)">
<div class="s-item-inner">
<span class="material-icons-round s-icon">store</span>
<span class="s-text">E-Commerce</span>
<span class="material-icons-round s-chevron">chevron_right</span>
</div>
</div>
<div class="s-sub open">
<div class="s-sub-item active" onclick="subActive(this)">Overview</div>
<div class="s-sub-item" onclick="subActive(this)">Products</div>
<div class="s-sub-item" onclick="subActive(this)">Orders</div>
<div class="s-sub-item" onclick="subActive(this)">Customers</div>
<div class="s-sub-item" onclick="subActive(this)">Coupons</div>
</div>
<div class="s-item" data-label="Analytics" onclick="navActive(this)">
<div class="s-item-inner">
<span class="material-icons-round s-icon">bar_chart</span>
<span class="s-text">Analytics</span>
</div>
</div>
<div class="s-item" data-label="Reports" onclick="navActive(this)">
<div class="s-item-inner">
<span class="material-icons-round s-icon">assessment</span>
<span class="s-text">Reports</span>
<span class="s-badge badge-accent">3</span>
</div>
</div>
<div class="s-div"></div>
<div class="s-label">Management</div>
<div class="s-item" data-label="Users" onclick="navActive(this)">
<div class="s-item-inner">
<span class="material-icons-round s-icon">people</span>
<span class="s-text">Users</span>
</div>
</div>
<div class="s-item" data-label="Inventory" onclick="navToggle(this)">
<div class="s-item-inner">
<span class="material-icons-round s-icon">inventory_2</span>
<span class="s-text">Inventory</span>
<span class="material-icons-round s-chevron">chevron_right</span>
</div>
</div>
<div class="s-sub">
<div class="s-sub-item" onclick="subActive(this)">Stock</div>
<div class="s-sub-item" onclick="subActive(this)">Suppliers</div>
<div class="s-sub-item" onclick="subActive(this)">Warehouses</div>
</div>
<div class="s-item" data-label="Messages" onclick="navActive(this)">
<div class="s-item-inner">
<span class="material-icons-round s-icon">chat_bubble_outline</span>
<span class="s-text">Messages</span>
<span class="s-badge badge-success">8</span>
</div>
</div>
<div class="s-item" data-label="Calendar" onclick="navActive(this)">
<div class="s-item-inner">
<span class="material-icons-round s-icon">calendar_today</span>
<span class="s-text">Calendar</span>
</div>
</div>
<div class="s-div"></div>
<div class="s-label">System</div>
<div class="s-item" data-label="Notifications" onclick="navActive(this)">
<div class="s-item-inner">
<span class="material-icons-round s-icon">notifications_none</span>
<span class="s-text">Notifications</span>
<span class="s-badge badge-danger">5</span>
</div>
</div>
<div class="s-item" data-label="Settings" onclick="navToggle(this)">
<div class="s-item-inner">
<span class="material-icons-round s-icon">settings</span>
<span class="s-text">Settings</span>
<span class="material-icons-round s-chevron">chevron_right</span>
</div>
</div>
<div class="s-sub">
<div class="s-sub-item" onclick="subActive(this)">Profile</div>
<div class="s-sub-item" onclick="subActive(this)">Security</div>
<div class="s-sub-item" onclick="subActive(this)">Preferences</div>
<div class="s-sub-item" onclick="subActive(this)">Billing</div>
</div>
<div class="s-item" data-label="Help Center" onclick="navActive(this)">
<div class="s-item-inner">
<span class="material-icons-round s-icon">help_outline</span>
<span class="s-text">Help Center</span>
</div>
</div>
</div>
<!-- Footer -->
<div class="s-foot">
<div class="s-foot-av">JD</div>
<div class="s-foot-info">
<div class="s-foot-name">John Doe</div>
<div class="s-foot-role">Administrator</div>
</div>
<button class="s-foot-btn" title="Logout"><i class="fas fa-right-from-bracket"></i></button>
</div>
</aside>
<!-- ══════════════════════════════════════
MAIN
══════════════════════════════════════ -->
<div class="main">
<!-- HEADER -->
<header class="header">
<button class="h-toggle" id="toggleBtn">
<span class="material-icons-round">menu</span>
</button>
<div class="h-search">
<span class="material-icons-round">search</span>
<input type="text" placeholder="Search products, orders, customers…"/>
</div>
<div class="h-spacer"></div>
<div class="h-actions">
<button class="h-btn" title="Notifications">
<span class="material-icons-round">notifications_none</span>
<span class="h-dot dot-red"></span>
</button>
<button class="h-btn" title="Messages">
<span class="material-icons-round">mail_outline</span>
<span class="h-dot dot-green"></span>
</button>
<button class="h-btn" title="Cart">
<span class="material-icons-round">shopping_cart_outlined</span>
<span class="h-dot dot-orange"></span>
</button>
<button class="h-btn" title="Fullscreen" id="fsBtn">
<span class="material-icons-round">fullscreen</span>
</button>
<div class="h-div"></div>
<div class="h-avatar">
<div class="h-av">JD</div>
<div class="h-av-info">
<div class="h-av-name">John Doe</div>
<div class="h-av-role">Admin</div>
</div>
<span class="material-icons-round h-av-icon">expand_more</span>
</div>
</div>
</header>
<!-- PAGE -->
<div class="page">
<!-- Page head -->
<div class="page-head">
<div>
<div class="page-title">E-Commerce Dashboard</div>
<div class="breadcrumb" style="margin-top:4px">
<span>Home</span>
<span class="material-icons-round">chevron_right</span>
<span>Dashboards</span>
<span class="material-icons-round">chevron_right</span>
<span class="bc-active">E-Commerce</span>
</div>
</div>
<div class="page-actions">
<button class="btn btn-outline">
<span class="material-icons-round">file_download</span> Export
</button>
<button class="btn btn-primary">
<span class="material-icons-round">add</span> Add Product
</button>
</div>
</div>
<!-- ── ROW 1 : STAT CARDS ── -->
<div class="row cols-4">
<div class="stat-card sc-indigo">
<div class="stat-top">
<div class="stat-icon-wrap">
<span class="material-icons-round">attach_money</span>
</div>
<div class="stat-trend"><span class="material-icons-round">arrow_upward</span> 14.2%</div>
</div>
<div>
<div class="stat-value">$84,200</div>
<div class="stat-label">Total Revenue</div>
</div>
<div class="stat-foot">
<span class="material-icons-round">trending_up</span>
<span>+$9,400 vs last month</span>
</div>
</div>
<div class="stat-card sc-pink">
<div class="stat-top">
<div class="stat-icon-wrap">
<span class="material-icons-round">receipt_long</span>
</div>
<div class="stat-trend"><span class="material-icons-round">arrow_upward</span> 7.8%</div>
</div>
<div>
<div class="stat-value">3,842</div>
<div class="stat-label">Total Orders</div>
</div>
<div class="stat-foot">
<span class="material-icons-round">shopping_cart</span>
<span>+280 vs last month</span>
</div>
</div>
<div class="stat-card sc-teal">
<div class="stat-top">
<div class="stat-icon-wrap">
<span class="material-icons-round">group</span>
</div>
<div class="stat-trend"><span class="material-icons-round">arrow_upward</span> 11.5%</div>
</div>
<div>
<div class="stat-value">24,521</div>
<div class="stat-label">Total Customers</div>
</div>
<div class="stat-foot">
<span class="material-icons-round">person_add</span>
<span>+1,240 new this month</span>
</div>
</div>
<div class="stat-card sc-orange">
<div class="stat-top">
<div class="stat-icon-wrap">
<span class="material-icons-round">inventory</span>
</div>
<div class="stat-trend"><span class="material-icons-round">arrow_downward</span> 2.3%</div>
</div>
<div>
<div class="stat-value">1,280</div>
<div class="stat-label">Products Listed</div>
</div>
<div class="stat-foot">
<span class="material-icons-round">warning_amber</span>
<span>42 low stock items</span>
</div>
</div>
</div>
<!-- ── ROW 2 : METRIC CARDS ── -->
<div class="row cols-4">
<div class="card"><div class="metric-card">
<div class="metric-icon mi-indigo"><span class="material-icons-round">percent</span></div>
<div class="metric-body">
<div class="metric-val">3.24%</div>
<div class="metric-lbl">Conversion Rate</div>
<div class="metric-chg chg-up"><span class="material-icons-round chg-icon">arrow_upward</span>+0.4% this week</div>
</div>
</div></div>
<div class="card"><div class="metric-card">
<div class="metric-icon mi-pink"><span class="material-icons-round">local_shipping</span></div>
<div class="metric-body">
<div class="metric-val">96.2%</div>
<div class="metric-lbl">Delivery Rate</div>
<div class="metric-chg chg-up"><span class="material-icons-round chg-icon">arrow_upward</span>+1.1% this week</div>
</div>
</div></div>
<div class="card"><div class="metric-card">
<div class="metric-icon mi-orange"><span class="material-icons-round">cancel</span></div>
<div class="metric-body">
<div class="metric-val">1.8%</div>
<div class="metric-lbl">Return Rate</div>
<div class="metric-chg chg-dn"><span class="material-icons-round chg-icon">arrow_downward</span>-0.3% this week</div>
</div>
</div></div>
<div class="card"><div class="metric-card">
<div class="metric-icon mi-teal"><span class="material-icons-round">star</span></div>
<div class="metric-body">
<div class="metric-val">4.7/5</div>
<div class="metric-lbl">Avg Rating</div>
<div class="metric-chg chg-up"><span class="material-icons-round chg-icon">arrow_upward</span>+0.2 this month</div>
</div>
</div></div>
</div>
<!-- ── ROW 3 : REVENUE CHART + CATEGORY DONUT ── -->
<div class="row cols-7-5">
<!-- Revenue Chart -->
<div class="card">
<div class="card-head">
<div>
<div class="card-title">Revenue Overview</div>
<div class="card-sub">Monthly revenue & expenses — 2024</div>
</div>
<div style="display:flex;gap:8px;align-items:center">
<button class="btn btn-outline" style="height:30px;font-size:12px;padding:0 12px">Weekly</button>
<button class="btn btn-primary" style="height:30px;font-size:12px;padding:0 12px">Monthly</button>
<button class="card-menu"><span class="material-icons-round">more_vert</span></button>
</div>
</div>
<div class="card-body" style="padding:14px 16px 10px">
<div id="revenueChart"></div>
</div>
</div>
<!-- Donut -->
<div class="card">
<div class="card-head">
<div>
<div class="card-title">Sales by Category</div>
<div class="card-sub">Distribution this month</div>
</div>
<button class="card-menu"><span class="material-icons-round">more_vert</span></button>
</div>
<div class="card-body">
<div id="donutChart"></div>
<div class="donut-legend">
<div class="dl-item">
<div class="dl-left"><div class="dl-dot" style="background:#3f51b5"></div>Electronics</div>
<div class="dl-bar"><div class="dl-fill" style="width:38%;background:#3f51b5"></div></div>
<div class="dl-pct" style="color:#3f51b5">38%</div>
</div>
<div class="dl-item">
<div class="dl-left"><div class="dl-dot" style="background:#e91e63"></div>Clothing</div>
<div class="dl-bar"><div class="dl-fill" style="width:24%;background:#e91e63"></div></div>
<div class="dl-pct" style="color:#e91e63">24%</div>
</div>
<div class="dl-item">
<div class="dl-left"><div class="dl-dot" style="background:#009688"></div>Home & Garden</div>
<div class="dl-bar"><div class="dl-fill" style="width:18%;background:#009688"></div></div>
<div class="dl-pct" style="color:#009688">18%</div>
</div>
<div class="dl-item">
<div class="dl-left"><div class="dl-dot" style="background:#ff5722"></div>Sports</div>
<div class="dl-bar"><div class="dl-fill" style="width:12%;background:#ff5722"></div></div>
<div class="dl-pct" style="color:#ff5722">12%</div>
</div>
<div class="dl-item">
<div class="dl-left"><div class="dl-dot" style="background:#9c27b0"></div>Other</div>
<div class="dl-bar"><div class="dl-fill" style="width:8%;background:#9c27b0"></div></div>
<div class="dl-pct" style="color:#9c27b0">8%</div>
</div>
</div>
</div>
</div>
</div>
<!-- ── ROW 4 : ORDERS BAR + TRAFFIC SOURCES + TOP PRODUCTS ── -->
<div class="row cols-3-2-2">
<!-- Orders Bar -->
<div class="card">
<div class="card-head">
<div>
<div class="card-title">Orders This Week</div>
<div class="card-sub">Daily order volume</div>
</div>
<button class="card-menu"><span class="material-icons-round">more_vert</span></button>
</div>
<div class="card-body" style="padding:14px 16px 10px">
<div id="ordersChart"></div>
</div>
</div>
<!-- Traffic Sources -->
<div class="card">
<div class="card-head">
<div>
<div class="card-title">Traffic Sources</div>
<div class="card-sub">Last 30 days</div>
</div>
<button class="card-menu"><span class="material-icons-round">more_vert</span></button>
</div>
<div class="card-body" style="padding:8px 20px 16px">
<div class="traffic-item">
<div class="tr-icon" style="background:#e8eaf6;color:#3f51b5"><i class="fab fa-google" style="font-size:16px"></i></div>
<div class="tr-label"><div class="tr-name">Google</div><div class="tr-val">34,210 visits</div></div>
<div class="tr-bar"><div class="prog-bar"><div class="prog-fill pf-indigo" style="width:72%"></div></div></div>
<div class="tr-pct" style="color:#3f51b5">72%</div>
</div>
<div class="traffic-item">
<div class="tr-icon" style="background:#fce4ec;color:#e91e63"><i class="fab fa-facebook" style="font-size:16px"></i></div>
<div class="tr-label"><div class="tr-name">Facebook</div><div class="tr-val">12,580 visits</div></div>
<div class="tr-bar"><div class="prog-bar"><div class="prog-fill pf-pink" style="width:48%"></div></div></div>
<div class="tr-pct" style="color:#e91e63">48%</div>
</div>
<div class="traffic-item">
<div class="tr-icon" style="background:#e0f7fa;color:#0097a7"><i class="fab fa-twitter" style="font-size:16px"></i></div>
<div class="tr-label"><div class="tr-name">Twitter</div><div class="tr-val">6,140 visits</div></div>
<div class="tr-bar"><div class="prog-bar"><div class="prog-fill pf-teal" style="width:32%"></div></div></div>
<div class="tr-pct" style="color:#0097a7">32%</div>
</div>
<div class="traffic-item">
<div class="tr-icon" style="background:#fbe9e7;color:#ff5722"><i class="fab fa-instagram" style="font-size:16px"></i></div>
<div class="tr-label"><div class="tr-name">Instagram</div><div class="tr-val">8,920 visits</div></div>
<div class="tr-bar"><div class="prog-bar"><div class="prog-fill pf-orange" style="width:44%"></div></div></div>
<div class="tr-pct" style="color:#ff5722">44%</div>
</div>
<div class="traffic-item">
<div class="tr-icon" style="background:#f5f5f5;color:#616161"><i class="fas fa-globe" style="font-size:14px"></i></div>
<div class="tr-label"><div class="tr-name">Direct</div><div class="tr-val">4,400 visits</div></div>
<div class="tr-bar"><div class="prog-bar"><div class="prog-fill" style="width:22%;background:#9e9e9e"></div></div></div>
<div class="tr-pct" style="color:#9e9e9e">22%</div>
</div>
</div>
</div>
<!-- Top Products -->
<div class="card">
<div class="card-head">
<div>
<div class="card-title">Top Products</div>
<div class="card-sub">By revenue</div>
</div>
<button class="btn btn-text" style="font-size:12px;height:28px">View All</button>
</div>
<div class="card-body" style="padding:8px 20px 16px">
<div class="top-prod-item">
<div class="tp-rank">1</div>
<div class="tp-img">💻</div>
<div class="tp-info"><div class="tp-name">MacBook Pro 16"</div><div class="tp-cat">Electronics</div></div>
<div class="tp-rev"><div class="tp-rev-val">$42,800</div><div class="tp-rev-cnt">186 sold</div></div>
</div>
<div class="top-prod-item">
<div class="tp-rank">2</div>
<div class="tp-img">📱</div>
<div class="tp-info"><div class="tp-name">iPhone 15 Pro Max</div><div class="tp-cat">Electronics</div></div>
<div class="tp-rev"><div class="tp-rev-val">$28,600</div><div class="tp-rev-cnt">240 sold</div></div>
</div>
<div class="top-prod-item">
<div class="tp-rank">3</div>
<div class="tp-img">🎧</div>
<div class="tp-info"><div class="tp-name">Sony WH-1000XM5</div><div class="tp-cat">Electronics</div></div>
<div class="tp-rev"><div class="tp-rev-val">$12,400</div><div class="tp-rev-cnt">356 sold</div></div>
</div>
<div class="top-prod-item">
<div class="tp-rank">4</div>
<div class="tp-img">👟</div>
<div class="tp-info"><div class="tp-name">Nike Air Max 2024</div><div class="tp-cat">Sports</div></div>
<div class="tp-rev"><div class="tp-rev-val">$9,800</div><div class="tp-rev-cnt">420 sold</div></div>
</div>
<div class="top-prod-item">
<div class="tp-rank">5</div>
<div class="tp-img">⌚</div>
<div class="tp-info"><div class="tp-name">Apple Watch Ultra 2</div><div class="tp-cat">Wearables</div></div>
<div class="tp-rev"><div class="tp-rev-val">$8,200</div><div class="tp-rev-cnt">103 sold</div></div>
</div>
</div>
</div>
</div>
<!-- ── ROW 5 : RECENT ORDERS TABLE ── -->
<div class="card" style="margin-bottom:20px">
<div class="card-head">
<div>
<div class="card-title">Recent Orders</div>
<div class="card-sub">Latest 8 transactions</div>
</div>
<div style="display:flex;gap:8px">
<button class="btn btn-outline" style="height:32px;font-size:12.5px;padding:0 12px">
<span class="material-icons-round" style="font-size:16px">filter_list</span> Filter
</button>
<button class="btn btn-primary" style="height:32px;font-size:12.5px;padding:0 12px">View All</button>
</div>
</div>
<table class="mat-table">
<thead>
<tr>
<th>Order ID</th>
<th>Customer</th>
<th>Product</th>
<th>Amount</th>
<th>Status</th>
<th>Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>#ORD-4521</strong></td>
<td><div class="user-cell"><div class="uc-av" style="background:#3f51b5">AM</div><div><div class="uc-name">Alice Martin</div><div class="uc-email">alice@mail.com</div></div></div></td>
<td><div class="prod-cell"><div class="prod-img">💻</div><div><div class="prod-name">MacBook Pro 16"</div><div class="prod-cat">Electronics</div></div></div></td>
<td><strong>$2,499</strong></td>
<td><span class="chip chip-success">Delivered</span></td>
<td style="color:var(--text-hint)">Apr 4, 2026</td>
<td><button class="h-btn" style="width:32px;height:32px"><span class="material-icons-round" style="font-size:18px">visibility</span></button></td>
</tr>
<tr>
<td><strong>#ORD-4520</strong></td>
<td><div class="user-cell"><div class="uc-av" style="background:#009688">BC</div><div><div class="uc-name">Bob Chen</div><div class="uc-email">bob@mail.com</div></div></div></td>
<td><div class="prod-cell"><div class="prod-img">📱</div><div><div class="prod-name">iPhone 15 Pro</div><div class="prod-cat">Electronics</div></div></div></td>
<td><strong>$1,199</strong></td>
<td><span class="chip chip-info">Shipped</span></td>
<td style="color:var(--text-hint)">Apr 3, 2026</td>
<td><button class="h-btn" style="width:32px;height:32px"><span class="material-icons-round" style="font-size:18px">visibility</span></button></td>
</tr>
<tr>
<td><strong>#ORD-4519</strong></td>
<td><div class="user-cell"><div class="uc-av" style="background:#e91e63">SK</div><div><div class="uc-name">Sara Kim</div><div class="uc-email">sara@mail.com</div></div></div></td>
<td><div class="prod-cell"><div class="prod-img">🎧</div><div><div class="prod-name">Sony WH-1000XM5</div><div class="prod-cat">Audio</div></div></div></td>
<td><strong>$349</strong></td>
<td><span class="chip chip-warning">Processing</span></td>
<td style="color:var(--text-hint)">Apr 3, 2026</td>
<td><button class="h-btn" style="width:32px;height:32px"><span class="material-icons-round" style="font-size:18px">visibility</span></button></td>
</tr>
<tr>
<td><strong>#ORD-4518</strong></td>
<td><div class="user-cell"><div class="uc-av" style="background:#ff5722">MR</div><div><div class="uc-name">Marc Roux</div><div class="uc-email">marc@mail.com</div></div></div></td>
<td><div class="prod-cell"><div class="prod-img">🖥️</div><div><div class="prod-name">Dell 4K Monitor</div><div class="prod-cat">Electronics</div></div></div></td>
<td><strong>$799</strong></td>
<td><span class="chip chip-danger">Cancelled</span></td>
<td style="color:var(--text-hint)">Apr 2, 2026</td>
<td><button class="h-btn" style="width:32px;height:32px"><span class="material-icons-round" style="font-size:18px">visibility</span></button></td>
</tr>
<tr>
<td><strong>#ORD-4517</strong></td>
<td><div class="user-cell"><div class="uc-av" style="background:#2196f3">NL</div><div><div class="uc-name">Nina López</div><div class="uc-email">nina@mail.com</div></div></div></td>
<td><div class="prod-cell"><div class="prod-img">📟</div><div><div class="prod-name">iPad Air 5th Gen</div><div class="prod-cat">Electronics</div></div></div></td>
<td><strong>$749</strong></td>
<td><span class="chip chip-success">Delivered</span></td>
<td style="color:var(--text-hint)">Apr 1, 2026</td>
<td><button class="h-btn" style="width:32px;height:32px"><span class="material-icons-round" style="font-size:18px">visibility</span></button></td>
</tr>
<tr>
<td><strong>#ORD-4516</strong></td>
<td><div class="user-cell"><div class="uc-av" style="background:#9c27b0">TD</div><div><div class="uc-name">Tom Dupont</div><div class="uc-email">tom@mail.com</div></div></div></td>
<td><div class="prod-cell"><div class="prod-img">👟</div><div><div class="prod-name">Nike Air Max 2024</div><div class="prod-cat">Sports</div></div></div></td>
<td><strong>$189</strong></td>
<td><span class="chip chip-info">Shipped</span></td>
<td style="color:var(--text-hint)">Apr 1, 2026</td>
<td><button class="h-btn" style="width:32px;height:32px"><span class="material-icons-round" style="font-size:18px">visibility</span></button></td>
</tr>
<tr>
<td><strong>#ORD-4515</strong></td>
<td><div class="user-cell"><div class="uc-av" style="background:#f57c00">LB</div><div><div class="uc-name">Laura Blanc</div><div class="uc-email">laura@mail.com</div></div></div></td>
<td><div class="prod-cell"><div class="prod-img">⌚</div><div><div class="prod-name">Apple Watch Ultra 2</div><div class="prod-cat">Wearables</div></div></div></td>
<td><strong>$799</strong></td>
<td><span class="chip chip-purple">On Hold</span></td>
<td style="color:var(--text-hint)">Mar 31, 2026</td>
<td><button class="h-btn" style="width:32px;height:32px"><span class="material-icons-round" style="font-size:18px">visibility</span></button></td>
</tr>
<tr>
<td><strong>#ORD-4514</strong></td>
<td><div class="user-cell"><div class="uc-av" style="background:#00796b">KS</div><div><div class="uc-name">Kevin Singh</div><div class="uc-email">kevin@mail.com</div></div></div></td>
<td><div class="prod-cell"><div class="prod-img">🎮</div><div><div class="prod-name">PlayStation 5</div><div class="prod-cat">Gaming</div></div></div></td>
<td><strong>$499</strong></td>
<td><span class="chip chip-success">Delivered</span></td>
<td style="color:var(--text-hint)">Mar 30, 2026</td>
<td><button class="h-btn" style="width:32px;height:32px"><span class="material-icons-round" style="font-size:18px">visibility</span></button></td>
</tr>
</tbody>
</table>
</div>
<!-- ── ROW 6 : CUSTOMER REVIEWS + ACTIVITY + NOTIFICATIONS ── -->
<div class="row cols-3">
<!-- Reviews -->
<div class="card">
<div class="card-head">
<div><div class="card-title">Customer Reviews</div><div class="card-sub">Last 30 days</div></div>
<button class="card-menu"><span class="material-icons-round">more_vert</span></button>
</div>
<div class="card-body">
<!-- Summary -->
<div style="display:flex;align-items:center;gap:20px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-light)">
<div style="text-align:center">
<div style="font-size:40px;font-weight:700;color:var(--primary);line-height:1">4.7</div>
<div class="stars" style="justify-content:center;margin-top:4px">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
<i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
</div>
<div style="font-size:11px;color:var(--text-hint);margin-top:4px">1,284 reviews</div>
</div>
<div style="flex:1">
<div class="prog-item">
<div class="prog-head"><span class="prog-lbl">5 ★</span><span class="prog-val">62%</span></div>
<div class="prog-bar"><div class="prog-fill pf-indigo" style="width:62%"></div></div>
</div>
<div class="prog-item">
<div class="prog-head"><span class="prog-lbl">4 ★</span><span class="prog-val">21%</span></div>
<div class="prog-bar"><div class="prog-fill pf-teal" style="width:21%"></div></div>
</div>
<div class="prog-item">
<div class="prog-head"><span class="prog-lbl">3 ★</span><span class="prog-val">10%</span></div>
<div class="prog-bar"><div class="prog-fill pf-amber" style="width:10%"></div></div>
</div>
<div class="prog-item">
<div class="prog-head"><span class="prog-lbl">2 ★</span><span class="prog-val">5%</span></div>
<div class="prog-bar"><div class="prog-fill pf-orange" style="width:5%"></div></div>
</div>
<div class="prog-item">
<div class="prog-head"><span class="prog-lbl">1 ★</span><span class="prog-val">2%</span></div>
<div class="prog-bar"><div class="prog-fill pf-pink" style="width:2%"></div></div>
</div>
</div>
</div>
<!-- Review items -->
<div style="display:flex;flex-direction:column;gap:12px">
<div style="padding-bottom:12px;border-bottom:1px solid var(--border-light)">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
<div class="uc-av" style="background:#3f51b5;width:28px;height:28px;font-size:11px">AM</div>
<div style="font-size:13px;font-weight:500">Alice Martin</div>
<div class="stars" style="margin-left:auto">
<i class="fas fa-star" style="font-size:12px"></i><i class="fas fa-star" style="font-size:12px"></i>
<i class="fas fa-star" style="font-size:12px"></i><i class="fas fa-star" style="font-size:12px"></i>
<i class="fas fa-star" style="font-size:12px"></i>
</div>
</div>
<div style="font-size:12.5px;color:var(--text-sec);line-height:1.5">"Excellent product! Fast delivery and great quality. Highly recommend."</div>
</div>
<div style="padding-bottom:12px;border-bottom:1px solid var(--border-light)">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
<div class="uc-av" style="background:#e91e63;width:28px;height:28px;font-size:11px">SK</div>
<div style="font-size:13px;font-weight:500">Sara Kim</div>
<div class="stars" style="margin-left:auto">
<i class="fas fa-star" style="font-size:12px"></i><i class="fas fa-star" style="font-size:12px"></i>
<i class="fas fa-star" style="font-size:12px"></i><i class="fas fa-star" style="font-size:12px"></i>
<i class="far fa-star" style="font-size:12px"></i>
</div>
</div>
<div style="font-size:12.5px;color:var(--text-sec);line-height:1.5">"Good product overall. Packaging could be better but the item works perfectly."</div>
</div>
<div>
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
<div class="uc-av" style="background:#ff5722;width:28px;height:28px;font-size:11px">MR</div>
<div style="font-size:13px;font-weight:500">Marc Roux</div>
<div class="stars" style="margin-left:auto">
<i class="fas fa-star" style="font-size:12px"></i><i class="fas fa-star" style="font-size:12px"></i>
<i class="fas fa-star" style="font-size:12px"></i><i class="far fa-star" style="font-size:12px"></i>
<i class="far fa-star" style="font-size:12px"></i>
</div>
</div>
<div style="font-size:12.5px;color:var(--text-sec);line-height:1.5">"Average quality for the price. Expected more from the description."</div>
</div>
</div>
</div>
</div>
<!-- Activity Timeline -->
<div class="card">
<div class="card-head">
<div><div class="card-title">Recent Activity</div><div class="card-sub">Last 24 hours</div></div>
<button class="card-menu"><span class="material-icons-round">more_vert</span></button>
</div>
<div class="card-body">
<div class="timeline">
<div class="tl-item">
<div class="tl-dot" style="background:#3f51b5"><span class="material-icons-round">shopping_bag</span></div>
<div class="tl-body">
<div class="tl-title">New order placed</div>
<div class="tl-sub">Alice Martin — MacBook Pro 16" × 1 ($2,499)</div>
<div class="tl-time"><span class="material-icons-round">schedule</span>2 minutes ago</div>
</div>
</div>
<div class="tl-item">
<div class="tl-dot" style="background:#4caf50"><span class="material-icons-round">payment</span></div>
<div class="tl-body">
<div class="tl-title">Payment received</div>
<div class="tl-sub">Order #ORD-4521 — $2,499.00 via Stripe</div>
<div class="tl-time"><span class="material-icons-round">schedule</span>5 minutes ago</div>
</div>
</div>
<div class="tl-item">
<div class="tl-dot" style="background:#e91e63"><span class="material-icons-round">person_add</span></div>
<div class="tl-body">
<div class="tl-title">New customer registered</div>
<div class="tl-sub">Tom Dupont joined via Google OAuth</div>
<div class="tl-time"><span class="material-icons-round">schedule</span>18 minutes ago</div>
</div>
</div>
<div class="tl-item">
<div class="tl-dot" style="background:#ff9800"><span class="material-icons-round">inventory</span></div>
<div class="tl-body">
<div class="tl-title">Low stock alert</div>
<div class="tl-sub">iPhone 15 Pro — only 4 units remaining</div>
<div class="tl-time"><span class="material-icons-round">schedule</span>35 minutes ago</div>
</div>
</div>
<div class="tl-item">
<div class="tl-dot" style="background:#9c27b0"><span class="material-icons-round">local_shipping</span></div>
<div class="tl-body">
<div class="tl-title">Order shipped</div>
<div class="tl-sub">Order #ORD-4516 dispatched via FedEx</div>
<div class="tl-time"><span class="material-icons-round">schedule</span>1 hour ago</div>
</div>
</div>
<div class="tl-item">
<div class="tl-dot" style="background:#f44336"><span class="material-icons-round">cancel</span></div>
<div class="tl-body">
<div class="tl-title">Order cancelled</div>
<div class="tl-sub">Order #ORD-4518 — Customer request</div>
<div class="tl-time"><span class="material-icons-round">schedule</span>2 hours ago</div>
</div>
</div>
<div class="tl-item">
<div class="tl-dot" style="background:#2196f3"><span class="material-icons-round">star</span></div>
<div class="tl-body">
<div class="tl-title">New 5-star review</div>
<div class="tl-sub">Alice Martin reviewed MacBook Pro 16"</div>
<div class="tl-time"><span class="material-icons-round">schedule</span>3 hours ago</div>
</div>
</div>
</div>
</div>
</div>
<!-- Notifications -->
<div class="card">
<div class="card-head">
<div><div class="card-title">Notifications</div><div class="card-sub">5 unread messages</div></div>
<button class="btn btn-text" style="font-size:12px;height:28px">Mark all read</button>
</div>
<div class="card-body" style="padding:4px 20px 16px">
<div class="notif-item">
<div class="notif-icon mi-indigo"><span class="material-icons-round">shopping_bag</span></div>
<div class="notif-body">
<div class="notif-title">New order received</div>
<div class="notif-text">Order #ORD-4521 — $2,499 from Alice Martin</div>
</div>
<div class="notif-time">2m</div>
</div>
<div class="notif-item">
<div class="notif-icon mi-orange"><span class="material-icons-round">warning_amber</span></div>
<div class="notif-body">
<div class="notif-title">Low stock warning</div>
<div class="notif-text">iPhone 15 Pro has only 4 units left in stock</div>
</div>
<div class="notif-time">35m</div>
</div>
<div class="notif-item">
<div class="notif-icon mi-pink"><span class="material-icons-round">person_add</span></div>
<div class="notif-body">
<div class="notif-title">New customer</div>
<div class="notif-text">Tom Dupont registered a new account</div>
</div>
<div class="notif-time">1h</div>
</div>
<div class="notif-item">
<div class="notif-icon mi-green"><span class="material-icons-round">local_shipping</span></div>
<div class="notif-body">
<div class="notif-title">Shipment dispatched</div>
<div class="notif-text">Order #ORD-4516 shipped via FedEx Express</div>
</div>
<div class="notif-time">2h</div>
</div>
<div class="notif-item">
<div class="notif-icon" style="background:#ffebee;color:#c62828"><span class="material-icons-round">cancel</span></div>
<div class="notif-body">
<div class="notif-title">Order cancelled</div>
<div class="notif-text">Order #ORD-4518 was cancelled by customer</div>
</div>
<div class="notif-time">3h</div>
</div>
</div>
</div>
</div>
<!-- ── ROW 7 : COUNTRY SALES + TASKS + CHAT ── -->
<div class="row cols-3">
<!-- Country Sales -->
<div class="card">
<div class="card-head">
<div><div class="card-title">Sales by Country</div><div class="card-sub">Top performing regions</div></div>
<button class="card-menu"><span class="material-icons-round">more_vert</span></button>
</div>
<div class="card-body" style="padding:8px 20px 16px">
<div class="country-item">
<div class="country-flag">🇺🇸</div>
<div class="country-name">United States</div>
<div class="prog-bar" style="width:90px"><div class="prog-fill pf-indigo" style="width:68%"></div></div>
<div class="country-rev">$28,400</div>
<div class="country-pct">34%</div>
</div>
<div class="country-item">
<div class="country-flag">🇬🇧</div>
<div class="country-name">United Kingdom</div>
<div class="prog-bar" style="width:90px"><div class="prog-fill pf-pink" style="width:42%"></div></div>
<div class="country-rev">$14,200</div>
<div class="country-pct">17%</div>
</div>
<div class="country-item">
<div class="country-flag">🇩🇪</div>
<div class="country-name">Germany</div>
<div class="prog-bar" style="width:90px"><div class="prog-fill pf-teal" style="width:33%"></div></div>
<div class="country-rev">$10,800</div>
<div class="country-pct">13%</div>
</div>
<div class="country-item">
<div class="country-flag">🇫🇷</div>
<div class="country-name">France</div>
<div class="prog-bar" style="width:90px"><div class="prog-fill pf-orange" style="width:25%"></div></div>
<div class="country-rev">$8,600</div>
<div class="country-pct">10%</div>
</div>
<div class="country-item">
<div class="country-flag">🇨🇦</div>
<div class="country-name">Canada</div>
<div class="prog-bar" style="width:90px"><div class="prog-fill pf-purple" style="width:20%"></div></div>
<div class="country-rev">$6,400</div>
<div class="country-pct">8%</div>
</div>
<div class="country-item">
<div class="country-flag">🇦🇺</div>
<div class="country-name">Australia</div>
<div class="prog-bar" style="width:90px"><div class="prog-fill pf-amber" style="width:15%"></div></div>
<div class="country-rev">$5,200</div>
<div class="country-pct">6%</div>
</div>
<div class="country-item">
<div class="country-flag">🌍</div>
<div class="country-name">Other</div>
<div class="prog-bar" style="width:90px"><div class="prog-fill" style="width:10%;background:#9e9e9e"></div></div>
<div class="country-rev">$10,600</div>
<div class="country-pct">12%</div>
</div>
</div>
</div>
<!-- Tasks -->
<div class="card">
<div class="card-head">
<div><div class="card-title">Task List</div><div class="card-sub">5 tasks remaining</div></div>
<button class="btn btn-primary" style="height:30px;font-size:12px;padding:0 12px">
<span class="material-icons-round" style="font-size:16px">add</span> Add
</button>
</div>
<div class="card-body" style="padding:8px 20px 16px">
<div class="task-item">
<div class="task-cb on" onclick="toggleTask(this)"><i class="fas fa-check"></i></div>
<div class="task-txt done">Update product catalog with Q2 items</div>
<span class="task-pri pri-h">High</span>
</div>
<div class="task-item">
<div class="task-cb on" onclick="toggleTask(this)"><i class="fas fa-check"></i></div>
<div class="task-txt done">Review pending refund requests</div>
<span class="task-pri pri-m">Med</span>
</div>
<div class="task-item">
<div class="task-cb" onclick="toggleTask(this)"></div>
<div class="task-txt">Set up flash sale for electronics</div>
<span class="task-pri pri-h">High</span>
</div>
<div class="task-item">
<div class="task-cb" onclick="toggleTask(this)"></div>
<div class="task-txt">Write email campaign for new arrivals</div>
<span class="task-pri pri-m">Med</span>
</div>
<div class="task-item">
<div class="task-cb" onclick="toggleTask(this)"></div>
<div class="task-txt">Negotiate with new suppliers</div>
<span class="task-pri pri-l">Low</span>
</div>
<div class="task-item">
<div class="task-cb" onclick="toggleTask(this)"></div>
<div class="task-txt">Optimize checkout funnel performance</div>
<span class="task-pri pri-h">High</span>
</div>
<div class="task-item">
<div class="task-cb" onclick="toggleTask(this)"></div>
<div class="task-txt">Audit SEO for top 50 product pages</div>
<span class="task-pri pri-m">Med</span>
</div>
<div class="task-item">
<div class="task-cb" onclick="toggleTask(this)"></div>
<div class="task-txt">Update return & refund policy page</div>
<span class="task-pri pri-l">Low</span>
</div>
</div>
</div>
<!-- Live Chat -->
<div class="card" style="display:flex;flex-direction:column">
<div class="card-head">
<div><div class="card-title">Support Chat</div><div class="card-sub">3 active conversations</div></div>
<button class="card-menu"><span class="material-icons-round">more_vert</span></button>
</div>
<div class="card-body" style="flex:1;padding:8px 20px 16px">
<div class="chat-list">
<div class="chat-item">
<div class="chat-av" style="background:#3f51b5">AM</div>
<div class="chat-body">
<div class="chat-top"><span class="chat-name">Alice Martin</span><span class="chat-time">2m ago</span></div>
<div class="chat-msg">Hi, I haven't received my order yet. It's been 5 days.</div>
</div>
</div>
<div class="chat-item" style="flex-direction:row-reverse">
<div class="chat-av" style="background:#e91e63">JD</div>
<div class="chat-body" style="text-align:right">
<div class="chat-top" style="justify-content:flex-end"><span class="chat-time">1m ago</span><span class="chat-name">You</span></div>
<div class="chat-msg" style="background:#e8eaf6;color:#3f51b5;border-radius:8px 0 8px 8px">I'm sorry to hear that! Let me check your order status right now.</div>
</div>
</div>
<div class="chat-item">
<div class="chat-av" style="background:#009688">BC</div>
<div class="chat-body">
<div class="chat-top"><span class="chat-name">Bob Chen</span><span class="chat-time">10m ago</span></div>
<div class="chat-msg">Can I exchange my iPhone 15 Pro for a different color?</div>
</div>
</div>
<div class="chat-item">
<div class="chat-av" style="background:#ff5722">SK</div>
<div class="chat-body">
<div class="chat-top"><span class="chat-name">Sara Kim</span><span class="chat-time">18m ago</span></div>
<div class="chat-msg">The headphones I received are defective. One ear is not working.</div>
</div>
</div>
</div>
</div>
<div class="card-foot">
<input type="text" placeholder="Type a message…" style="flex:1;border:1px solid var(--border);border-radius:4px;padding:8px 12px;font-family:Roboto;font-size:13px;outline:none;background:#fafafa"/>
<button class="btn btn-primary" style="height:36px;padding:0 14px;margin-left:8px">
<span class="material-icons-round" style="font-size:18px">send</span>
</button>
</div>
</div>
</div>
<!-- ── ROW 8 : AREA CHART + RADAR ── -->
<div class="row cols-2">
<!-- Area Chart -->
<div class="card">
<div class="card-head">
<div><div class="card-title">Visitors & Conversions</div><div class="card-sub">30-day trend</div></div>
<button class="card-menu"><span class="material-icons-round">more_vert</span></button>
</div>
<div class="card-body" style="padding:14px 16px 10px">
<div id="areaChart"></div>
</div>
</div>
<!-- Radar Chart -->
<div class="card">
<div class="card-head">
<div><div class="card-title">Performance Metrics</div><div class="card-sub">This vs last month</div></div>
<button class="card-menu"><span class="material-icons-round">more_vert</span></button>
</div>
<div class="card-body" style="padding:14px 16px 10px">
<div id="radarChart"></div>
</div>
</div>
</div>
<!-- ── ROW 9 : STATS INFO TILES + SMALL CHARTS ── -->
<div class="row cols-2" style="margin-bottom:20px">
<!-- Info tiles -->
<div class="card">
<div class="card-head">
<div><div class="card-title">Monthly Summary</div><div class="card-sub">April 2026</div></div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr">
<div class="info-tile">
<div class="it-val" style="color:#3f51b5">$84.2k</div>
<div class="it-lbl">Revenue</div>
<div class="it-chg chg-up"><span class="material-icons-round">arrow_upward</span>14.2%</div>
</div>
<div class="info-tile">
<div class="it-val" style="color:#e91e63">3,842</div>
<div class="it-lbl">Orders</div>
<div class="it-chg chg-up"><span class="material-icons-round">arrow_upward</span>7.8%</div>
</div>
<div class="info-tile">
<div class="it-val" style="color:#009688">24.5k</div>
<div class="it-lbl">Customers</div>
<div class="it-chg chg-up"><span class="material-icons-round">arrow_upward</span>11.5%</div>
</div>
<div class="info-tile" style="border-right:none">
<div class="it-val" style="color:#ff5722">1,280</div>
<div class="it-lbl">Products</div>
<div class="it-chg chg-dn"><span class="material-icons-round">arrow_downward</span>2.3%</div>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;border-top:1px solid var(--border-light)">
<div class="info-tile">
<div class="it-val" style="color:#9c27b0;font-size:20px">3.24%</div>
<div class="it-lbl">Conversion</div>
<div class="it-chg chg-up"><span class="material-icons-round">arrow_upward</span>0.4%</div>
</div>
<div class="info-tile">
<div class="it-val" style="color:#2196f3;font-size:20px">$21.9</div>
<div class="it-lbl">Avg. Order</div>
<div class="it-chg chg-up"><span class="material-icons-round">arrow_upward</span>3.1%</div>
</div>
<div class="info-tile">
<div class="it-val" style="color:#4caf50;font-size:20px">96.2%</div>
<div class="it-lbl">Delivery</div>
<div class="it-chg chg-up"><span class="material-icons-round">arrow_upward</span>1.1%</div>
</div>
<div class="info-tile" style="border-right:none">
<div class="it-val" style="color:#f44336;font-size:20px">1.8%</div>
<div class="it-lbl">Returns</div>
<div class="it-chg chg-dn"><span class="material-icons-round">arrow_downward</span>0.3%</div>
</div>
</div>
</div>
<!-- Horizontal Bar -->
<div class="card">
<div class="card-head">
<div><div class="card-title">Revenue by Channel</div><div class="card-sub">This month</div></div>
<button class="card-menu"><span class="material-icons-round">more_vert</span></button>
</div>
<div class="card-body" style="padding:14px 16px 10px">
<div id="hbarChart"></div>
</div>
</div>
</div>
</div><!-- /page -->
</div><!-- /main -->
<!-- ══════════════════════════════════════
SCRIPTS
══════════════════════════════════════ -->
<script>
/* ── Sidebar toggle ─────────────────────── */
const sidebar = document.getElementById('sidebar');
document.getElementById('toggleBtn').addEventListener('click', () => {
sidebar.classList.toggle('mini');
});
/* ── Nav ───────────────────────────────── */
function navActive(el) {
document.querySelectorAll('.s-item').forEach(i => i.classList.remove('active'));
el.classList.add('active');
}
function navToggle(el) {
const sub = el.nextElementSibling;
if (!sub || !sub.classList.contains('s-sub')) return;
const isOpen = sub.classList.contains('open');
document.querySelectorAll('.s-sub.open').forEach(s => { s.classList.remove('open'); s.previousElementSibling?.classList.remove('open'); });
if (!isOpen) { sub.classList.add('open'); el.classList.add('open'); }
else el.classList.remove('open');
}
function subActive(el) {
document.querySelectorAll('.s-sub-item').forEach(i => i.classList.remove('active'));
el.classList.add('active');
}
/* ── Tasks ─────────────────────────────── */
function toggleTask(cb) {
cb.classList.toggle('on');
const txt = cb.nextElementSibling;
if (cb.classList.contains('on')) { cb.innerHTML = '<i class="fas fa-check"></i>'; txt.classList.add('done'); }
else { cb.innerHTML = ''; txt.classList.remove('done'); }
}
/* ── Fullscreen ────────────────────────── */
document.getElementById('fsBtn').addEventListener('click', () => {
if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); }
else document.exitFullscreen();
});
/* ══════════════════════════════════════════
CHARTS — ApexCharts
══════════════════════════════════════════ */
// 1. Revenue (line + column mixed)
new ApexCharts(document.getElementById('revenueChart'), {
series: [
{ name: 'Revenue', type: 'area', data: [38,42,35,52,49,63,58,71,66,80,74,84] },
{ name: 'Expenses', type: 'column', data: [22,25,21,30,28,36,33,40,37,44,41,46] }
],
chart: { height: 260, type: 'line', toolbar: { show: false }, fontFamily: 'Roboto,sans-serif' },
colors: ['#3f51b5','#e0e0e0'],
fill: { type: ['gradient','solid'], gradient: { shadeIntensity: .5, opacityFrom: .3, opacityTo: .01, stops: [0,100] } },
stroke: { width: [2.5, 0], curve: 'smooth' },
plotOptions: { bar: { columnWidth: '45%', borderRadius: 4 } },
dataLabels: { enabled: false },
xaxis: { categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], axisBorder: { show: false }, axisTicks: { show: false }, labels: { style: { colors: '#9e9e9e', fontSize: '12px' } } },
yaxis: { labels: { formatter: v => '$' + v + 'k', style: { colors: '#9e9e9e', fontSize: '12px' } } },
grid: { borderColor: '#f5f5f5' },
legend: { position: 'top', horizontalAlign: 'right', fontSize: '12px', markers: { radius: 10 } },
tooltip: { shared: true, intersect: false, y: { formatter: v => '$' + v + ',000' } }
}).render();
// 2. Category Donut
new ApexCharts(document.getElementById('donutChart'), {
series: [38, 24, 18, 12, 8],
chart: { height: 220, type: 'donut', fontFamily: 'Roboto,sans-serif' },
labels: ['Electronics','Clothing','Home & Garden','Sports','Other'],
colors: ['#3f51b5','#e91e63','#009688','#ff5722','#9c27b0'],
plotOptions: { pie: { donut: { size: '70%', labels: { show: true, total: { show: true, label: 'Total', fontSize: '14px', color: '#9e9e9e', formatter: () => '$84.2k' } } } } },
dataLabels: { enabled: false },
legend: { show: false },
stroke: { width: 0 }
}).render();
// 3. Orders Bar
new ApexCharts(document.getElementById('ordersChart'), {
series: [{ name: 'Orders', data: [145, 210, 178, 264, 198, 88, 120] }],
chart: { height: 230, type: 'bar', toolbar: { show: false }, fontFamily: 'Roboto,sans-serif' },
colors: ['#e91e63'],
plotOptions: { bar: { columnWidth: '50%', borderRadius: 5, distributed: false } },
dataLabels: { enabled: false },
xaxis: { categories: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'], axisBorder: { show: false }, axisTicks: { show: false }, labels: { style: { colors: '#9e9e9e', fontSize: '12px' } } },
yaxis: { labels: { style: { colors: '#9e9e9e', fontSize: '12px' } } },
grid: { borderColor: '#f5f5f5' },
fill: { type: 'gradient', gradient: { type: 'vertical', shadeIntensity: 1, opacityFrom: .9, opacityTo: .5 } }
}).render();
// 4. Area Chart (Visitors)
new ApexCharts(document.getElementById('areaChart'), {
series: [
{ name: 'Visitors', data: [1200,1900,1400,2100,1800,2800,2400,3100,2600,3400,2900,3200,2800,3800,3300,4200,3700,4600,4100,4800,4300,5100,4600,5400,4900,5700,5200,6000,5500,6200] },
{ name: 'Conversions', data: [38,60,45,68,58,91,78,101,84,110,94,104,91,123,107,136,120,149,133,155,139,165,149,175,159,185,168,194,178,201] }
],
chart: { height: 250, type: 'area', toolbar: { show: false }, fontFamily: 'Roboto,sans-serif' },
colors: ['#3f51b5','#e91e63'],
fill: { type: 'gradient', gradient: { shadeIntensity: .5, opacityFrom: .25, opacityTo: .01, stops: [0,100] } },
stroke: { width: 2, curve: 'smooth' },
dataLabels: { enabled: false },
xaxis: { type: 'numeric', labels: { style: { colors: '#9e9e9e', fontSize: '11px' } }, axisBorder: { show: false } },
yaxis: { labels: { style: { colors: '#9e9e9e', fontSize: '11px' } } },
grid: { borderColor: '#f5f5f5' },
legend: { position: 'top', horizontalAlign: 'right', fontSize: '12px' },
tooltip: { shared: true, intersect: false }
}).render();
// 5. Radar
new ApexCharts(document.getElementById('radarChart'), {
series: [
{ name: 'This Month', data: [80, 74, 92, 68, 85, 78] },
{ name: 'Last Month', data: [65, 60, 78, 55, 72, 64] }
],
chart: { height: 250, type: 'radar', toolbar: { show: false }, fontFamily: 'Roboto,sans-serif' },
colors: ['#3f51b5','#e91e63'],
fill: { opacity: .15 },
stroke: { width: 2 },
markers: { size: 4 },
xaxis: { categories: ['Revenue','Orders','Customers','Conversion','Delivery','Rating'] },
yaxis: { show: false },
legend: { position: 'top', horizontalAlign: 'right', fontSize: '12px' }
}).render();
// 6. Horizontal Bar (Revenue by channel)
new ApexCharts(document.getElementById('hbarChart'), {
series: [{ name: 'Revenue', data: [28400, 22600, 14800, 10200, 8200] }],
chart: { height: 250, type: 'bar', toolbar: { show: false }, fontFamily: 'Roboto,sans-serif' },
colors: ['#3f51b5'],
plotOptions: { bar: { horizontal: true, borderRadius: 4, barHeight: '55%',
distributed: false,
} },
dataLabels: { enabled: true, formatter: v => '$' + (v/1000).toFixed(1) + 'k', style: { fontSize: '12px', colors: ['#fff'] } },
xaxis: { categories: ['Online Store','Mobile App','Marketplace','Social Shop','Referral'], labels: { formatter: v => '$' + (v/1000).toFixed(0) + 'k', style: { colors: '#9e9e9e', fontSize: '12px' } }, axisBorder: { show: false } },
yaxis: { labels: { style: { colors: '#424242', fontSize: '13px', fontWeight: 500 } } },
grid: { borderColor: '#f5f5f5' },
fill: { type: 'gradient', gradient: { type: 'horizontal', shadeIntensity: .5, opacityFrom: 1, opacityTo: .7 } }
}).render();
</script>
</body>
</html>