Bootstrap
Admin
Table
Tabs
Html
Interface Bootstrap d'administration professionnelle avec tables de données organisées en onglets.
<!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>Administration Pro - Tables | 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: #f0f2f5;
font-family:
'Inter',
system-ui,
-apple-system,
sans-serif;
}
/* Card Container Styling */
.tabs-manager-table {
border: none;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
background: #fff;
overflow: hidden;
}
/* Custom Tabs */
.tabs-manager-table .nav-tabs-custom {
background-color: #f8f9fa;
border-bottom: 2px solid #edf2f7;
padding: 0 15px;
}
.tabs-manager-table .nav-tabs-custom .nav-link {
border: none;
padding: 1.25rem 1rem;
color: #718096;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
}
.tabs-manager-table .nav-tabs-custom .nav-link.active {
background: transparent;
color: #4e73df;
border-bottom-color: #4e73df;
}
.tabs-manager-table .nav-tabs-custom .nav-link:hover:not(.active) {
border-color: transparent;
color: #2d3748;
background: #f1f5f9;
}
/* Table Styling */
.tabs-manager-table .table thead th {
background-color: #fcfcfd;
border-top: none;
border-bottom: 2px solid #edf2f7;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05em;
color: #a0aec0;
padding: 1rem;
}
.tabs-manager-table .table td {
vertical-align: middle;
padding: 1rem;
color: #4a5568;
border-bottom: 1px solid #f1f5f9;
}
/* Avatar Styling */
.tabs-manager-table .avatar {
width: 35px;
height: 35px;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
border: 2px solid #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Status Badges */
.tabs-manager-table .badge-status {
padding: 0.4em 0.8em;
border-radius: 6px;
font-weight: 600;
font-size: 0.75rem;
}
/* Responsive refinement */
.tabs-manager-table .table-responsive {
border-radius: 0 0 15px 15px;
}
</style>
</head>
<body class="py-5">
<div class="container-fluid px-lg-5">
<div class="tabs-manager-table">
<!-- Tab Navigation -->
<ul class="nav nav-tabs nav-tabs-custom" id="adminTabs" role="tablist">
<li class="nav-item">
<a
class="nav-link active"
id="users-tab"
data-toggle="tab"
href="#users"
role="tab"
aria-controls="users"
aria-selected="true"
>
<i class="fas fa-users mr-2"></i>
Utilisateurs
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="logs-tab"
data-toggle="tab"
href="#logs"
role="tab"
aria-controls="logs"
aria-selected="false"
>
<i class="fas fa-history mr-2"></i>
Logs Activité
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="orders-tab"
data-toggle="tab"
href="#orders"
role="tab"
aria-controls="orders"
aria-selected="false"
>
<i class="fas fa-shopping-bag mr-2"></i>
Commandes
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="support-tab"
data-toggle="tab"
href="#support"
role="tab"
aria-controls="support"
aria-selected="false"
>
<i class="fas fa-headset mr-2"></i>
Support
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="modules-tab"
data-toggle="tab"
href="#modules"
role="tab"
aria-controls="modules"
aria-selected="false"
>
<i class="fas fa-puzzle-piece mr-2"></i>
Modules
</a>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="adminTabsContent">
<!-- Table 1: Users -->
<div class="tab-pane fade show active" id="users" role="tabpanel" aria-labelledby="users-tab">
<div class="table-responsive">
<table class="table mb-0" aria-label="Table des utilisateurs">
<thead>
<tr>
<th scope="col">Utilisateur</th>
<th scope="col">Rôle</th>
<th scope="col">Permissions</th>
<th scope="col" class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center">
<img src="public/avatar.png" class="avatar" alt="" />
<span class="font-weight-bold">Jean Dupont</span>
</div>
</td>
<td><span class="badge badge-light border">Administrateur</span></td>
<td><small class="text-muted">Lecture, Écriture, Suppression</small></td>
<td class="text-right">
<button class="btn btn-sm btn-outline-primary shadow-sm" aria-label="Modifier les permissions de Jean Dupont">
<i class="fas fa-edit"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Table 2: LogUser -->
<div class="tab-pane fade" id="logs" role="tabpanel" aria-labelledby="logs-tab">
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">Utilisateur</th>
<th scope="col">Date</th>
<th scope="col">Activité</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center">
<img src="public/avatar.png" class="avatar" alt="" />
<span>Marc Levy</span>
</div>
</td>
<td><small class="text-muted">Aujourd'hui, 14:20</small></td>
<td>
<span class="text-info font-weight-600">Connexion réussie</span>
depuis IP 192.168.1.1
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Table 3: Orders -->
<div class="tab-pane fade" id="orders" role="tabpanel" aria-labelledby="orders-tab">
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">N° Commande</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 text-primary">#ORD-8852</td>
<td>
<div class="d-flex align-items-center">
<img src="public/avatar.png" class="avatar" alt="" />
<span>Alice Wonder</span>
</div>
</td>
<td>12/10/2023</td>
<td><span class="badge badge-status badge-success">Payé</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Table 4: Support -->
<div class="tab-pane fade" id="support" role="tabpanel" aria-labelledby="support-tab">
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">ID Ticket</th>
<th scope="col">Demandeur</th>
<th scope="col">Date</th>
<th scope="col">Statut</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-weight-600">#TK-441</td>
<td>
<div class="d-flex align-items-center">
<img src="public/avatar.png" class="avatar" alt="" />
<span>Bob Sponge</span>
</div>
</td>
<td>Il y a 2h</td>
<td><span class="badge badge-status badge-danger">Urgent</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Table 5: Modules -->
<div class="tab-pane fade" id="modules" role="tabpanel" aria-labelledby="modules-tab">
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">Module</th>
<th scope="col">Nom</th>
<th scope="col">État</th>
<th scope="col" class="text-right">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center font-size-lg text-primary" style="width: 80px">
<i class="fas fa-credit-card fa-lg"></i>
</td>
<td class="font-weight-bold">Passerelle Stripe</td>
<td><span class="badge badge-pill badge-primary">Actif</span></td>
<td class="text-right">
<div class="custom-control custom-switch">
<input
type="checkbox"
class="custom-control-input"
id="switch1"
checked
/>
<label class="custom-control-label" for="switch1"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- End Tab Content -->
</div>
</div>
<!-- JS Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>