Bootstrap
Admin
Stats
Dashboard
Html
Template Bootstrap d'administration avec statistiques détaillées, graphiques et métriques avancées.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Admin Detailed Stats | AngularForAll</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
body {
background-color: #f4f7f6;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.card-modern {
border: none;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
height: 100%;
background: #fff;
}
.card-modern:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.card-header-custom {
padding: 1.25rem;
background: transparent;
border-bottom: 1px solid #f0f0f0;
display: flex;
align-items: center;
}
.icon-box {
width: 38px;
height: 38px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
}
.card-title-main {
font-size: 1rem;
font-weight: 700;
color: #333;
margin: 0;
}
/* Liste de catégories */
.stat-list {
list-style: none;
padding: 0;
margin: 0;
}
.stat-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
border-bottom: 1px solid #f9f9f9;
transition: background 0.2s;
}
.stat-item:last-child {
border-bottom: none;
}
.stat-item:hover {
background-color: #fcfcfc;
}
.stat-label {
font-size: 0.9rem;
color: #666;
}
.stat-value {
font-size: 0.9rem;
font-weight: 600;
color: #333;
}
/* Status badges */
.status-dot {
height: 8px;
width: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.bg-on {
background-color: #2ecc71;
box-shadow: 0 0 5px #2ecc71;
}
.bg-off {
background-color: #e74c3c;
}
/* Couleurs thématiques */
.c-user {
background: rgba(78, 115, 223, 0.1);
color: #4e73df;
}
.c-module {
background: rgba(102, 16, 242, 0.1);
color: #6610f2;
}
.c-role {
background: rgba(54, 185, 204, 0.1);
color: #36b9cc;
}
.c-order {
background: rgba(28, 200, 138, 0.1);
color: #1cc88a;
}
.c-ticket {
background: rgba(231, 74, 59, 0.1);
color: #e74a3b;
}
</style>
</head>
<body class="p-4">
<div class="container-fluid">
<div class="row">
<!-- CARD USERS -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card card-modern">
<div class="card-header-custom">
<div class="icon-box c-user"><i class="fas fa-users"></i></div>
<h3 class="card-title-main">Utilisateurs</h3>
</div>
<div class="card-body p-0">
<ul class="stat-list">
<li class="stat-item">
<span class="stat-label">Administrateurs</span>
<span class="stat-value">5</span>
</li>
<li class="stat-item">
<span class="stat-label">Clients</span>
<span class="stat-value">1,240</span>
</li>
<li class="stat-item">
<span class="stat-label">Inactifs</span>
<span class="stat-value text-muted">42</span>
</li>
</ul>
</div>
</div>
</div>
<!-- CARD MODULES (On/Off style) -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card card-modern">
<div class="card-header-custom">
<div class="icon-box c-module"><i class="fas fa-cubes"></i></div>
<h3 class="card-title-main">Modules</h3>
</div>
<div class="card-body p-0">
<ul class="stat-list">
<li class="stat-item">
<span class="stat-label">Module Paiement</span>
<span class="stat-value">
<span class="status-dot bg-on"></span>
En ligne
</span>
</li>
<li class="stat-item">
<span class="stat-label">Module Email</span>
<span class="stat-value">
<span class="status-dot bg-on"></span>
En ligne
</span>
</li>
<li class="stat-item">
<span class="stat-label">Module Stock</span>
<span class="stat-value">
<span class="status-dot bg-off"></span>
Hors ligne
</span>
</li>
</ul>
</div>
</div>
</div>
<!-- CARD ROLES -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card card-modern">
<div class="card-header-custom">
<div class="icon-box c-role"><i class="fas fa-user-shield"></i></div>
<h3 class="card-title-main">Rôles & Permissions</h3>
</div>
<div class="card-body p-0">
<ul class="stat-list">
<li class="stat-item">
<span class="stat-label">Admin</span>
<span class="stat-value badge badge-light">1</span>
</li>
<li class="stat-item">
<span class="stat-label">Supadmin</span>
<span class="stat-value badge badge-light">2</span>
</li>
<li class="stat-item">
<span class="stat-label">Editor</span>
<span class="stat-value badge badge-light">3</span>
</li>
</ul>
</div>
</div>
</div>
<!-- CARD COMMANDES -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card card-modern">
<div class="card-header-custom">
<div class="icon-box c-order"><i class="fas fa-shopping-cart"></i></div>
<h3 class="card-title-main">Commandes</h3>
</div>
<div class="card-body p-0">
<ul class="stat-list">
<li class="stat-item">
<span class="stat-label">Livrées</span>
<span class="stat-value text-success">128</span>
</li>
<li class="stat-item">
<span class="stat-label">En attente</span>
<span class="stat-value text-warning">14</span>
</li>
<li class="stat-item">
<span class="stat-label">Annulées</span>
<span class="stat-value">3</span>
</li>
</ul>
</div>
</div>
</div>
<!-- CARD SUPPORT TICKETS -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card card-modern">
<div class="card-header-custom">
<div class="icon-box c-ticket"><i class="fas fa-headset"></i></div>
<h3 class="card-title-main">Support Tickets</h3>
</div>
<div class="card-body p-0">
<ul class="stat-list">
<li class="stat-item">
<span class="stat-label">Ouverts</span>
<span class="stat-value badge badge-danger">5</span>
</li>
<li class="stat-item">
<span class="stat-label">En cours</span>
<span class="stat-value">8</span>
</li>
<li class="stat-item">
<span class="stat-label">Résolus</span>
<span class="stat-value">245</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>