Bootstrap
Dashboard
Table
Kpi
Html
Template Bootstrap de dashboard centralisé avec vue d'ensemble globale, KPIs et tableaux récapitulatifs.
<!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>Dashboard Centralisé - Vue d'ensemble | AngularForAll</title>
<!-- Google Fonts & Bootstrap -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
<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>
:root {
--primary: #4e73df;
--secondary-bg: #f8f9fc;
--border-color: #eaecf4;
--text-main: #5a5c69;
}
body {
background-color: #f4f6f9;
font-family: 'Inter', sans-serif;
color: var(--text-main);
}
/* Conteneur principal */
.master-card {
border: none;
border-radius: 12px;
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
background: #fff;
margin-bottom: 30px;
}
/* Sections des Tables */
.table-section {
padding: 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.table-section:last-child {
border-bottom: none;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.25rem;
}
.section-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
}
/* Style des Tables */
.table {
margin-bottom: 0;
}
.table thead th {
border-top: none;
border-bottom: 2px solid var(--border-color);
background-color: var(--secondary-bg);
text-transform: uppercase;
font-size: 0.75rem;
color: #b7b9cc;
font-weight: 800;
}
.table td {
vertical-align: middle;
border-bottom: 1px solid var(--border-color);
padding: 0.75rem;
font-size: 0.9rem;
}
.table tbody tr:hover {
background-color: #fcfcfd;
}
/* Avatars & Icônes */
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 10px;
object-fit: cover;
}
.icon-module {
width: 32px;
height: 32px;
background: rgba(78, 115, 223, 0.1);
color: var(--primary);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
margin-right: 10px;
}
/* Badges */
.badge-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.status-pill {
padding: 0.35em 0.8em;
font-size: 0.75rem;
font-weight: 700;
border-radius: 50rem;
}
</style>
</head>
<body class="py-5">
<div class="container">
<div class="master-card">
<!-- SECTION 1: USERS -->
<div class="table-section">
<div class="section-header">
<h2 class="section-title">
<i class="fas fa-users mr-2"></i>
Utilisateurs
</h2>
<button class="btn btn-sm btn-light border text-primary font-weight-bold">Voir tout</button>
</div>
<div class="table-responsive">
<table class="table" aria-label="Liste des utilisateurs">
<thead>
<tr>
<th scope="col">Profil</th>
<th scope="col">Rôle</th>
<th scope="col">Permissions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="public/avatar.png" class="avatar" alt="" />
<strong>Samir Chen</strong>
</td>
<td><span class="status-pill badge-primary badge">Admin</span></td>
<td><span class="text-muted small">Full Access</span></td>
</tr>
<tr>
<td>
<img src="public/avatar.png" class="avatar" alt="" />
<strong>Léa Vasseur</strong>
</td>
<td><span class="status-pill badge-info badge">Editeur</span></td>
<td><span class="text-muted small">Write / Edit</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- SECTION 2: LOG USER -->
<div class="table-section">
<div class="section-header">
<h2 class="section-title">
<i class="fas fa-history mr-2"></i>
Dernières Activités
</h2>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Utilisateur</th>
<th scope="col">Date</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center">
<img src="public/avatar.png" class="avatar" alt="" />
Samir
</div>
</td>
<td><small class="text-secondary">Aujourd'hui, 10:45</small></td>
<td>
<span class="badge badge-light border">
Modification du profil utilisateur
<strong>#12</strong>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- SECTION 3: ORDERS -->
<div class="table-section">
<div class="section-header">
<h2 class="section-title">
<i class="fas fa-shopping-cart mr-2"></i>
Commandes Récentes
</h2>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">N° Order</th>
<th scope="col">Client</th>
<th scope="col">Date</th>
<th scope="col">État</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-weight-bold">#ORD-9921</td>
<td>
<img src="public/avatar.png" class="avatar" alt="" />
Julie Doré
</td>
<td>14/11/2023</td>
<td><span class="status-pill badge-success badge">Livrable</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- SECTION 4: SUPPORT -->
<div class="table-section">
<div class="section-header">
<h2 class="section-title">
<i class="fas fa-headset mr-2"></i>
Support & Tickets
</h2>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">N° Support</th>
<th scope="col">Demandeur</th>
<th scope="col">Date</th>
<th scope="col">État</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-weight-bold">#TK-441</td>
<td>
<img src="public/avatar.png" class="avatar" alt="" />
Marc Lefebvre
</td>
<td>Hier</td>
<td><span class="status-pill badge-danger badge">Critique</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- SECTION 5: MODULES -->
<div class="table-section">
<div class="section-header">
<h2 class="section-title">
<i class="fas fa-puzzle-piece mr-2"></i>
État des Modules
</h2>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Module</th>
<th scope="col">Nom du Module</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="icon-module"><i class="fas fa-bolt"></i></div>
</td>
<td class="font-weight-bold">API Gateway</td>
<td>
<span class="badge-dot bg-success"></span>
<span class="small font-weight-bold text-success">Actif</span>
</td>
</tr>
<tr>
<td>
<div
class="icon-module"
style="background: rgba(231, 74, 59, 0.1); color: #e74a3b"
>
<i class="fas fa-envelope"></i>
</div>
</td>
<td class="font-weight-bold">Email Service</td>
<td>
<span class="badge-dot bg-danger"></span>
<span class="small font-weight-bold text-danger">Hors ligne</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- End Master Card -->
</div>
</body>
</html>