Bootstrap 5
Dashboard Admin
Responsive
Template
Html
Css
Javascript
Admin
Template de dashboard administrateur responsive avec Bootstrap 5, cartes KPI, tableau de commandes, activité d'équipe, graphiques et navigation latérale mobile.
<!DOCTYPE html>
<html lang="fr" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template Dashbord Bootstrap 5 2026 04291055 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--af-sidebar: #0f172a;
--af-sidebar-soft: #18233b;
--af-surface: #ffffff;
--af-surface-muted: #f5f7fb;
--af-border: #e5e7eb;
--af-text: #0f172a;
--af-text-soft: #64748b;
--af-primary: #0d6efd;
--af-success: #198754;
--af-warning: #f59e0b;
--af-danger: #dc3545;
--af-shadow: 0 18px 60px rgba(15, 23, 42, 0.08);
--af-radius: 22px;
--af-sidebar-width: 290px;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: var(--af-text);
background:
radial-gradient(circle at top right, rgba(13, 110, 253, 0.14), transparent 24%),
radial-gradient(circle at bottom left, rgba(25, 135, 84, 0.10), transparent 26%),
#eef3f9;
}
.admin-shell { min-height: 100vh; }
.sidebar-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 1030;
}
.sidebar-backdrop.show {
opacity: 1;
visibility: visible;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: var(--af-sidebar-width);
height: 100vh;
padding: 1.5rem 1rem;
color: #e2e8f0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 24%),
linear-gradient(160deg, var(--af-sidebar) 0%, var(--af-sidebar-soft) 100%);
box-shadow: 20px 0 60px rgba(15, 23, 42, 0.16);
overflow-y: auto;
transition: transform 0.3s ease;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.8rem 0.9rem 1.2rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.brand-mark {
width: 48px;
height: 48px;
display: grid;
place-items: center;
font-size: 1.4rem;
border-radius: 16px;
color: #fff;
background: linear-gradient(135deg, #0d6efd, #14b8a6);
box-shadow: 0 10px 24px rgba(13, 110, 253, 0.28);
}
.brand-copy h1 {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
}
.brand-copy p {
margin: 0.15rem 0 0;
color: rgba(226, 232, 240, 0.72);
font-size: 0.86rem;
}
.sidebar-label {
margin: 1.2rem 0 0.55rem;
padding: 0 0.9rem;
font-size: 0.73rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(226, 232, 240, 0.55);
}
.sidebar-nav {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-nav a {
display: flex;
align-items: center;
gap: 0.9rem;
margin: 0.18rem 0;
padding: 0.88rem 0.95rem;
color: rgba(226, 232, 240, 0.84);
text-decoration: none;
border-radius: 16px;
transition: background-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.sidebar-nav a:hover,
.sidebar-nav a.active {
color: #fff;
background: rgba(255, 255, 255, 0.1);
transform: translateX(4px);
}
.sidebar-nav i {
font-size: 1.1rem;
width: 20px;
text-align: center;
}
.sidebar-promo {
margin: 1.4rem 0.5rem 0;
padding: 1rem;
border-radius: 20px;
background: linear-gradient(135deg, rgba(13, 110, 253, 0.22), rgba(20, 184, 166, 0.14));
border: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-promo h2 {
font-size: 1rem;
margin: 0 0 0.35rem;
}
.sidebar-promo p {
font-size: 0.88rem;
margin: 0 0 0.9rem;
color: rgba(226, 232, 240, 0.78);
}
.main-content {
min-height: 100vh;
margin-left: var(--af-sidebar-width);
padding: 1.4rem;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.1rem;
margin-bottom: 1.4rem;
border: 1px solid rgba(229, 231, 235, 0.7);
border-radius: 26px;
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(16px);
box-shadow: var(--af-shadow);
position: sticky;
top: 1rem;
z-index: 1000;
}
.topbar-left {
display: flex;
align-items: center;
gap: 0.85rem;
}
.topbar-title h2 {
margin: 0;
font-size: 1.28rem;
font-weight: 700;
}
.topbar-title p {
margin: 0.15rem 0 0;
color: var(--af-text-soft);
font-size: 0.9rem;
}
.icon-btn {
width: 44px;
height: 44px;
border: 1px solid var(--af-border);
border-radius: 14px;
background: #fff;
color: var(--af-text);
display: inline-grid;
place-items: center;
}
.search-wrap {
position: relative;
flex: 1 1 320px;
max-width: 440px;
}
.search-wrap input {
width: 100%;
padding: 0.9rem 1rem 0.9rem 2.8rem;
border: 1px solid var(--af-border);
border-radius: 16px;
background: var(--af-surface-muted);
}
.search-wrap i {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--af-text-soft);
}
.topbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
}
#salesChart{
width: 100% !important;
height: 400px !important;
}
.profile-chip {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.45rem 0.55rem 0.45rem 0.8rem;
border: 1px solid var(--af-border);
border-radius: 999px;
background: #fff;
}
.profile-chip img {
width: 42px;
height: 42px;
object-fit: cover;
border-radius: 50%;
}
.card-panel {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(229, 231, 235, 0.7);
border-radius: var(--af-radius);
box-shadow: var(--af-shadow);
}
.stat-card {
padding: 1.25rem;
height: 100%;
}
.stat-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.stat-icon {
width: 54px;
height: 54px;
border-radius: 18px;
display: grid;
place-items: center;
font-size: 1.35rem;
color: #fff;
}
.stat-value {
margin: 1rem 0 0.25rem;
font-size: 2rem;
font-weight: 800;
line-height: 1;
}
.stat-meta,
.muted-text {
color: var(--af-text-soft);
font-size: 0.92rem;
}
.progress-soft {
height: 8px;
background: #e9eef7;
border-radius: 999px;
overflow: hidden;
}
.progress-soft span {
display: block;
height: 100%;
border-radius: inherit;
}
.widget-card {
height: 100%;
padding: 1.25rem;
}
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.section-head h3 {
margin: 0;
font-size: 1.08rem;
font-weight: 700;
}
.mini-pills {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.mini-pills span {
padding: 0.45rem 0.8rem;
border-radius: 999px;
background: #edf4ff;
color: #0d6efd;
font-size: 0.82rem;
font-weight: 600;
}
.task-item,
.feed-item {
display: flex;
align-items: flex-start;
gap: 0.9rem;
padding: 0.85rem 0;
border-bottom: 1px solid #eef2f7;
}
.task-item:last-child,
.feed-item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.task-check { margin-top: 0.2rem; }
.timeline-dot {
width: 14px;
height: 14px;
border-radius: 50%;
margin-top: 0.35rem;
box-shadow: 0 0 0 6px rgba(13, 110, 253, 0.12);
flex: 0 0 auto;
}
.table thead th {
color: var(--af-text-soft);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
background: transparent;
border-bottom-width: 1px;
}
.table > :not(caption) > * > * {
padding-top: 0.95rem;
padding-bottom: 0.95rem;
}
.status-badge {
padding: 0.4rem 0.7rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
}
.agent-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.95rem 1rem;
margin-bottom: 0.8rem;
border-radius: 18px;
background: #f8fbff;
}
.agent-card:last-child { margin-bottom: 0; }
.reveal {
opacity: 0;
transform: translateY(18px);
animation: revealUp 0.55s ease forwards;
}
.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }
@keyframes revealUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1199.98px) {
.topbar { flex-wrap: wrap; }
.search-wrap {
order: 3;
max-width: none;
flex-basis: 100%;
}
}
@media (max-width: 991.98px) {
.sidebar { transform: translateX(-100%); }
.sidebar.show { transform: translateX(0); }
.main-content {
margin-left: 0;
padding: 1rem;
}
.topbar { top: 0.75rem; }
}
@media (max-width: 575.98px) {
.topbar-title h2 { font-size: 1.08rem; }
.profile-chip strong,
.profile-chip small { display: none; }
.stat-value { font-size: 1.6rem; }
}
</style>
</head>
<body>
<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
<div class="admin-shell">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<div class="brand-mark">
<i aria-hidden="true" class="bi bi-grid-1x2-fill"></i>
</div>
<div class="brand-copy">
<h1>Nova Admin</h1>
<p>Pilotage produits et équipe</p>
</div>
</div>
<div class="sidebar-label">Navigation</div>
<ul class="sidebar-nav">
<li><a class="active" href="#"><i aria-hidden="true" class="bi bi-speedometer2"></i><span>Dashboard</span></a></li>
<li><a href="#"><i aria-hidden="true" class="bi bi-bag-check"></i><span>Commandes</span></a></li>
<li><a href="#"><i aria-hidden="true" class="bi bi-people"></i><span>Clients</span></a></li>
<li><a href="#"><i aria-hidden="true" class="bi bi-box-seam"></i><span>Produits</span></a></li>
<li><a href="#"><i aria-hidden="true" class="bi bi-graph-up-arrow"></i><span>Analytics</span></a></li>
</ul>
<div class="sidebar-label">Système</div>
<ul class="sidebar-nav">
<li><a href="#"><i aria-hidden="true" class="bi bi-chat-square-dots"></i><span>Support</span></a></li>
<li><a href="#"><i aria-hidden="true" class="bi bi-bell"></i><span>Notifications</span></a></li>
<li><a href="#"><i aria-hidden="true" class="bi bi-shield-check"></i><span>Sécurité</span></a></li>
<li><a href="#"><i aria-hidden="true" class="bi bi-gear"></i><span>Paramètres</span></a></li>
</ul>
<div class="sidebar-promo">
<h2>Rapport hebdomadaire</h2>
<p>12 KPI mis à jour automatiquement et prêts à être exportés.</p>
<button class="btn btn-light btn-sm rounded-pill px-3 fw-semibold">Télécharger</button>
</div>
</aside>
<main class="main-content">
<header class="topbar">
<div class="topbar-left">
<button class="icon-btn d-lg-none" id="sidebarToggle" type="button" aria-label="Ouvrir le menu">
<i aria-hidden="true" class="bi bi-list"></i>
</button>
<div class="topbar-title">
<h2>Dashboard administrateur</h2>
<p>Suivi des ventes, des tâches et de l'activité en temps réel.</p>
</div>
</div>
<div class="search-wrap">
<i aria-hidden="true" class="bi bi-search"></i>
<input type="search" placeholder="Rechercher un produit, un client ou une commande" />
</div>
<div class="topbar-right">
<button class="icon-btn" type="button" aria-label="Notifications">
<i aria-hidden="true" class="bi bi-bell"></i>
</button>
<button class="icon-btn" type="button" aria-label="Messages">
<i aria-hidden="true" class="bi bi-chat-left-text"></i>
</button>
<div class="profile-chip">
<div>
<strong class="d-block">Sanae M.</strong>
<small class="text-secondary">Admin principale</small>
</div>
<img src="public/avatar.png" alt="Avatar administrateur" />
</div>
</div>
</header>
<section class="container-fluid px-0">
<div class="row g-4 mb-4">
<div class="col-12 col-sm-6 col-xl-3">
<div class="card-panel stat-card reveal">
<div class="stat-head">
<div>
<span class="badge text-bg-primary-subtle text-primary rounded-pill px-3 py-2">Ventes</span>
<div class="stat-value">€48.2k</div>
<div class="stat-meta">+18,4% sur les 30 derniers jours</div>
</div>
<div class="stat-icon" style="background: linear-gradient(135deg, #0d6efd, #60a5fa);">
<i aria-hidden="true" class="bi bi-currency-euro"></i>
</div>
</div>
<div class="mt-3 progress-soft"><span style="width: 74%; background: linear-gradient(90deg, #0d6efd, #60a5fa);"></span></div>
</div>
</div>
<div class="col-12 col-sm-6 col-xl-3">
<div class="card-panel stat-card reveal delay-1">
<div class="stat-head">
<div>
<span class="badge text-bg-success-subtle text-success rounded-pill px-3 py-2">Clients</span>
<div class="stat-value">3 864</div>
<div class="stat-meta">248 nouveaux profils cette semaine</div>
</div>
<div class="stat-icon" style="background: linear-gradient(135deg, #198754, #34d399);">
<i aria-hidden="true" class="bi bi-people-fill"></i>
</div>
</div>
<div class="mt-3 progress-soft"><span style="width: 61%; background: linear-gradient(90deg, #198754, #34d399);"></span></div>
</div>
</div>
<div class="col-12 col-sm-6 col-xl-3">
<div class="card-panel stat-card reveal delay-2">
<div class="stat-head">
<div>
<span class="badge text-bg-warning-subtle text-warning rounded-pill px-3 py-2">Tâches</span>
<div class="stat-value">27</div>
<div class="stat-meta">9 urgentes à traiter aujourd'hui</div>
</div>
<div class="stat-icon" style="background: linear-gradient(135deg, #f59e0b, #fbbf24);">
<i aria-hidden="true" class="bi bi-lightning-charge-fill"></i>
</div>
</div>
<div class="mt-3 progress-soft"><span style="width: 42%; background: linear-gradient(90deg, #f59e0b, #fbbf24);"></span></div>
</div>
</div>
<div class="col-12 col-sm-6 col-xl-3">
<div class="card-panel stat-card reveal delay-3">
<div class="stat-head">
<div>
<span class="badge text-bg-danger-subtle text-danger rounded-pill px-3 py-2">Incidents</span>
<div class="stat-value">04</div>
<div class="stat-meta">Temps moyen de résolution: 21 min</div>
</div>
<div class="stat-icon" style="background: linear-gradient(135deg, #dc3545, #fb7185);">
<i aria-hidden="true" class="bi bi-shield-exclamation"></i>
</div>
</div>
<div class="mt-3 progress-soft"><span style="width: 28%; background: linear-gradient(90deg, #dc3545, #fb7185);"></span></div>
</div>
</div>
</div>
<div class="row g-4 mb-4">
<div class="col-12 col-xl-8">
<div class="card-panel widget-card reveal delay-1">
<div class="section-head">
<div>
<h3>Performance mensuelle</h3>
<p class="muted-text mb-0">Vue globale des revenus et conversions.</p>
</div>
<div class="mini-pills">
<span>Desktop 62%</span>
<span>Mobile 31%</span>
<span>Tablette 7%</span>
</div>
</div>
<canvas id="salesChart" height="120"></canvas>
</div>
</div>
<div class="col-12 col-xl-4">
<div class="card-panel widget-card reveal delay-2">
<div class="section-head">
<div>
<h3>Objectifs équipe</h3>
<p class="muted-text mb-0">Progression des objectifs du trimestre.</p>
</div>
</div>
<div class="mb-4">
<div class="d-flex justify-content-between mb-2">
<strong>Ventes B2B</strong>
<span class="muted-text">82%</span>
</div>
<div class="progress-soft"><span style="width: 82%; background: linear-gradient(90deg, #0d6efd, #06b6d4);"></span></div>
</div>
<div class="mb-4">
<div class="d-flex justify-content-between mb-2">
<strong>Support premium</strong>
<span class="muted-text">67%</span>
</div>
<div class="progress-soft"><span style="width: 67%; background: linear-gradient(90deg, #198754, #22c55e);"></span></div>
</div>
<div class="mb-4">
<div class="d-flex justify-content-between mb-2">
<strong>Refonte catalogue</strong>
<span class="muted-text">49%</span>
</div>
<div class="progress-soft"><span style="width: 49%; background: linear-gradient(90deg, #f59e0b, #f97316);"></span></div>
</div>
<div class="card border-0 rounded-4 bg-dark text-white">
<div class="card-body">
<small class="text-white-50">Prévision IA</small>
<h4 class="mt-2 mb-2">+12% de croissance</h4>
<p class="mb-0 text-white-50">Projection basée sur les 90 derniers jours et la saisonnalité.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row g-4 mb-4">
<div class="col-12 col-xl-7">
<div class="card-panel widget-card reveal delay-2">
<div class="section-head">
<div>
<h3>Commandes récentes</h3>
<p class="muted-text mb-0">Les dernières opérations enregistrées.</p>
</div>
<button class="btn btn-outline-primary rounded-pill px-3">Exporter CSV</button>
</div>
<div class="table-responsive">
<table class="table align-middle mb-0">
<thead>
<tr>
<th>Commande</th>
<th>Client</th>
<th>Montant</th>
<th>Statut</th>
</tr>
</thead>
<tbody>
<tr>
<td>#AF-2048</td>
<td>Yasmine Benali</td>
<td>€1 240</td>
<td><span class="status-badge text-bg-success-subtle text-success">Payée</span></td>
</tr>
<tr>
<td>#AF-2047</td>
<td>Studio Atlas</td>
<td>€860</td>
<td><span class="status-badge text-bg-warning-subtle text-warning">En attente</span></td>
</tr>
<tr>
<td>#AF-2046</td>
<td>Karim Lahlou</td>
<td>€430</td>
<td><span class="status-badge text-bg-info-subtle text-info">Préparation</span></td>
</tr>
<tr>
<td>#AF-2045</td>
<td>Nova Logistic</td>
<td>€2 180</td>
<td><span class="status-badge text-bg-danger-subtle text-danger">Incident</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-12 col-xl-5">
<div class="card-panel widget-card reveal delay-3">
<div class="section-head">
<div>
<h3>Activité de l'équipe</h3>
<p class="muted-text mb-0">Flux opérationnel de la journée.</p>
</div>
</div>
<div class="feed-item">
<span class="timeline-dot" style="background:#0d6efd;"></span>
<div>
<strong>Nadia a validé 12 commandes</strong>
<div class="muted-text">Il y a 14 minutes</div>
</div>
</div>
<div class="feed-item">
<span class="timeline-dot" style="background:#198754;"></span>
<div>
<strong>Mise à jour du stock sur 48 références</strong>
<div class="muted-text">Synchronisation ERP terminée</div>
</div>
</div>
<div class="feed-item">
<span class="timeline-dot" style="background:#f59e0b;"></span>
<div>
<strong>Campagne email programmée</strong>
<div class="muted-text">Diffusion prévue à 18:30</div>
</div>
</div>
<div class="feed-item">
<span class="timeline-dot" style="background:#dc3545;"></span>
<div>
<strong>Alerte paiement sur la passerelle Stripe</strong>
<div class="muted-text">Investigation en cours par l'équipe finance</div>
</div>
</div>
</div>
</div>
</div>
<div class="row g-4">
<div class="col-12 col-lg-5">
<div class="card-panel widget-card reveal delay-3">
<div class="section-head">
<div>
<h3>To-do prioritaire</h3>
<p class="muted-text mb-0">Actions à suivre aujourd'hui.</p>
</div>
<span class="badge text-bg-dark rounded-pill">7 tâches</span>
</div>
<label class="task-item">
<input class="form-check-input task-check" type="checkbox" checked />
<div>
<strong>Valider le rapport financier du matin</strong>
<div class="muted-text">Comptabilité • 09:30</div>
</div>
</label>
<label class="task-item">
<input class="form-check-input task-check" type="checkbox" />
<div>
<strong>Planifier la maintenance serveur</strong>
<div class="muted-text">Infra • 11:00</div>
</div>
</label>
<label class="task-item">
<input class="form-check-input task-check" type="checkbox" />
<div>
<strong>Relancer les paniers abandonnés premium</strong>
<div class="muted-text">Marketing • 14:00</div>
</div>
</label>
<label class="task-item">
<input class="form-check-input task-check" type="checkbox" />
<div>
<strong>Tester la nouvelle page de facturation</strong>
<div class="muted-text">Produit • 16:45</div>
</div>
</label>
</div>
</div>
<div class="col-12 col-lg-7">
<div class="card-panel widget-card reveal delay-4">
<div class="section-head">
<div>
<h3>Agents connectés</h3>
<p class="muted-text mb-0">Disponibilité et niveau de charge.</p>
</div>
</div>
<div class="agent-card">
<div>
<strong>Support client</strong>
<div class="muted-text">14 conversations actives</div>
</div>
<span class="status-badge text-bg-success-subtle text-success">Stable</span>
</div>
<div class="agent-card">
<div>
<strong>Modération catalogue</strong>
<div class="muted-text">23 produits à relire</div>
</div>
<span class="status-badge text-bg-warning-subtle text-warning">Charge haute</span>
</div>
<div class="agent-card">
<div>
<strong>Facturation</strong>
<div class="muted-text">3 incidents en revue</div>
</div>
<span class="status-badge text-bg-danger-subtle text-danger">Urgent</span>
</div>
<div class="agent-card">
<div>
<strong>Analytics</strong>
<div class="muted-text">Exports automatiques planifiés</div>
</div>
<span class="status-badge text-bg-info-subtle text-info">Planifié</span>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const sidebar = document.getElementById('sidebar');
const sidebarBackdrop = document.getElementById('sidebarBackdrop');
const sidebarToggle = document.getElementById('sidebarToggle');
function closeSidebar() {
sidebar.classList.remove('show');
sidebarBackdrop.classList.remove('show');
}
function openSidebar() {
sidebar.classList.add('show');
sidebarBackdrop.classList.add('show');
}
if (sidebarToggle) {
sidebarToggle.addEventListener('click', function () {
if (sidebar.classList.contains('show')) {
closeSidebar();
} else {
openSidebar();
}
});
}
sidebarBackdrop.addEventListener('click', closeSidebar);
window.addEventListener('resize', function () {
if (window.innerWidth >= 992) {
closeSidebar();
}
});
const salesChartCanvas = document.getElementById('salesChart');
if (salesChartCanvas) {
new Chart(salesChartCanvas, {
type: 'line',
data: {
labels: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'Revenus',
data: [12, 16, 14, 22, 25, 24, 29, 35, 33, 39, 42, 48],
borderColor: '#0d6efd',
backgroundColor: 'rgba(13, 110, 253, 0.14)',
borderWidth: 3,
fill: true,
tension: 0.35,
pointRadius: 0,
pointHoverRadius: 5
},
{
label: 'Conversions',
data: [8, 10, 9, 14, 16, 18, 17, 21, 23, 24, 27, 31],
borderColor: '#14b8a6',
backgroundColor: 'rgba(20, 184, 166, 0.08)',
borderWidth: 3,
fill: true,
tension: 0.35,
pointRadius: 0,
pointHoverRadius: 5
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
usePointStyle: true,
boxWidth: 10,
color: '#475569'
}
}
},
scales: {
x: {
grid: { display: false },
ticks: { color: '#64748b' }
},
y: {
beginAtZero: true,
grid: { color: 'rgba(148, 163, 184, 0.16)' },
ticks: { color: '#64748b' }
}
}
}
});
}
</script>
</body>
</html>
Télécharger le fichier source