Bootstrap
Dashboard
Admin
Table
Html
Template Bootstrap d'administration avec 5 tableaux de données côte à côte pour une vue centralisée.
<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 Dashboard - 5 Tables | AngularForAll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/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: #f4f6f9;
font-family: 'Segoe UI', sans-serif;
color: #444;
}
/* Cartes & Tableaux */
.card-table {
border: none;
border-radius: 10px;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
margin-bottom: 1.5rem;
background: #fff;
}
.card-header {
background-color: #fff;
border-bottom: 1px solid #edf2f9;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.card-header h6 {
margin: 0;
font-weight: 700;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.5px;
}
/* Styles Table */
.table {
margin-bottom: 0;
}
.table thead th {
background-color: #f9fbfd;
border-top: none;
border-bottom: 1px solid #edf2f9;
color: #95aac9;
font-size: 0.75rem;
text-transform: uppercase;
padding: 1rem;
}
.table td {
vertical-align: middle;
padding: 0.85rem 1rem;
border-top: 1px solid #edf2f9;
font-size: 0.9rem;
}
.table-hover tbody tr:hover {
background-color: #f8faff;
transition: 0.2s;
}
/* Composants visuels */
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 10px;
}
.badge-soft {
padding: 0.4em 0.75em;
border-radius: 6px;
font-weight: 600;
font-size: 0.75rem;
}
.dot {
height: 8px;
width: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
/* Couleurs d'icônes */
.icon-box {
width: 30px;
height: 30px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
font-size: 0.9rem;
}
.bg-users {
background: #e7eefd;
color: #2c7be5;
}
.bg-support {
background: #fdf2f2;
color: #e63757;
}
.bg-orders {
background: #eafaf1;
color: #00d97e;
}
.bg-mods {
background: #fef8e7;
color: #f6c343;
}
.bg-hist {
background: #f2f5f9;
color: #6e84a3;
}
</style>
</head>
<body>
<div class="container-fluid py-4">
<div class="row">
<!-- 1. TABLE USERS -->
<div class="col-lg-8">
<div class="card card-table">
<div class="card-header">
<div class="d-flex align-items-center">
<div class="icon-box bg-users"><i class="fas fa-users"></i></div>
<h6>Effectif Utilisateurs</h6>
</div>
<button class="btn btn-sm btn-outline-primary border-0" aria-label="Ajouter un nouvel utilisateur">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Utilisateur</th>
<th>Rôle</th>
<th>Abonnement</th>
<th>Statut</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="public/avatar.png" class="avatar" alt="Avatar de Jean Dupont" />
<strong>Jean Dupont</strong>
</td>
<td>Admin</td>
<td><span class="badge badge-light">Enterprise</span></td>
<td>
<span class="text-success">
<span class="dot bg-success"></span>
En ligne
</span>
</td>
</tr>
<tr>
<td>
<img src="public/avatar.png" class="avatar" alt="Avatar de Marie Durand" />
<strong>Marie Durand</strong>
</td>
<td>Éditeur</td>
<td><span class="badge badge-light">Premium</span></td>
<td>
<span class="text-muted">
<span class="dot bg-secondary"></span>
Hors ligne
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 2. TABLE SUPPORT -->
<div class="col-lg-4">
<div class="card card-table">
<div class="card-header">
<div class="d-flex align-items-center">
<div class="icon-box bg-support"><i class="fas fa-headset"></i></div>
<h6>Support Tickets</h6>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Priorité</th>
<th>Statut</th>
</tr>
</thead>
<tbody>
<tr>
<td>#8841</td>
<td><span class="badge badge-danger badge-soft text-danger">Haute</span></td>
<td><i class="fas fa-clock text-warning"></i></td>
</tr>
<tr>
<td>#8839</td>
<td><span class="badge badge-info badge-soft text-info">Basse</span></td>
<td><i class="fas fa-check-circle text-success"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 3. TABLE COMMANDES -->
<div class="col-lg-6">
<div class="card card-table">
<div class="card-header">
<div class="d-flex align-items-center">
<div class="icon-box bg-orders"><i class="fas fa-shopping-cart"></i></div>
<h6>Commandes Enregistrées</h6>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Réf</th>
<th>Date</th>
<th>Montant</th>
<th>Paiement</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>CMD-990</strong></td>
<td>12 Oct 2023</td>
<td class="font-weight-bold">149.00 €</td>
<td><span class="badge badge-success badge-soft text-success">Validé</span></td>
</tr>
<tr>
<td><strong>CMD-989</strong></td>
<td>11 Oct 2023</td>
<td class="font-weight-bold">89.00 €</td>
<td>
<span class="badge badge-warning badge-soft text-warning">Attente</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 4. TABLE FONCTIONNALITÉS (MODULES) -->
<div class="col-lg-6">
<div class="card card-table">
<div class="card-header">
<div class="d-flex align-items-center">
<div class="icon-box bg-mods"><i class="fas fa-cubes"></i></div>
<h6>Modules Disponibles</h6>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Module</th>
<th>Usage</th>
<th>Statut</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>API Connect</td>
<td>
<div class="progress" style="height: 5px; width: 60px">
<div class="progress-bar bg-info" style="width: 75%"></div>
</div>
</td>
<td><span class="badge badge-pill badge-success">Actif</span></td>
<td><i class="fas fa-cog text-muted"></i></td>
</tr>
<tr>
<td>Cloud Sync</td>
<td>
<div class="progress" style="height: 5px; width: 60px">
<div class="progress-bar bg-info" style="width: 30%"></div>
</div>
</td>
<td><span class="badge badge-pill badge-secondary">Désactivé</span></td>
<td><i class="fas fa-cog text-muted"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 5. TABLE HISTORIQUE UTILISATEURS -->
<div class="col-12">
<div class="card card-table">
<div class="card-header">
<div class="d-flex align-items-center">
<div class="icon-box bg-hist"><i class="fas fa-history"></i></div>
<h6>Historiques Utilisateurs</h6>
</div>
<small class="text-muted">Dernières 24 heures</small>
</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Heure</th>
<th>Utilisateur</th>
<th>Action effectuée</th>
<th>Adresse IP</th>
<th>Appareil</th>
</tr>
</thead>
<tbody>
<tr>
<td>14:20:05</td>
<td><strong>J. Dupont</strong></td>
<td>Modification de l'abonnement #CMD-990</td>
<td>192.168.1.45</td>
<td>
<i class="fas fa-desktop mr-1"></i>
Chrome / Win10
</td>
</tr>
<tr>
<td>13:45:12</td>
<td><strong>M. Durand</strong></td>
<td>Connexion au module API Connect</td>
<td>172.16.254.1</td>
<td>
<i class="fas fa-mobile-alt mr-1"></i>
Safari / iOS
</td>
</tr>
<tr>
<td>12:10:33</td>
<td><strong>Système</strong></td>
<td class="text-danger">Échec de sauvegarde automatique</td>
<td>---</td>
<td>
<i class="fas fa-server mr-1"></i>
Server-01
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>