Bootstrap
Bootstrap4
Dashboard
Admin
Template
Html
Template Bootstrap 4 de dashboard d'administration avec sidebar, navigation et layout principal pour applications web.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Boitify Admin - Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap 5 -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<!-- Icons (Bootstrap Icons) -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
/>
<style>
:root {
--sidebar-width: 260px;
--sidebar-bg: #1f2933;
--sidebar-bg-dark: #111827;
--sidebar-link: #9ca3af;
--sidebar-link-active: #ffffff;
--sidebar-link-hover: #e5e7eb;
--topbar-height: 60px;
--body-bg: #f3f4f6;
--card-radius: 0.75rem;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background-color: var(--body-bg);
overflow-x: hidden;
}
.layout-wrapper {
display: flex;
min-height: 100vh;
}
/* Sidebar */
.sidebar {
width: var(--sidebar-width);
background: linear-gradient(180deg, var(--sidebar-bg-dark), var(--sidebar-bg));
color: #e5e7eb;
position: fixed;
top: 0;
left: 0;
bottom: 0;
display: flex;
flex-direction: column;
z-index: 1030;
}
.sidebar-brand {
height: var(--topbar-height);
display: flex;
align-items: center;
padding: 0 1.25rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}
.sidebar-brand span.logo {
font-weight: 700;
letter-spacing: 0.06em;
font-size: 1.1rem;
text-transform: uppercase;
}
.sidebar-brand small {
font-size: 0.7rem;
opacity: 0.7;
}
.sidebar-nav {
flex: 1;
padding: 1rem 0.75rem 1.5rem;
overflow-y: auto;
}
.sidebar-section-title {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6b7280;
margin: 1rem 0.75rem 0.5rem;
}
.sidebar .nav-link {
color: var(--sidebar-link);
font-size: 0.9rem;
border-radius: 0.5rem;
padding: 0.55rem 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.15s ease;
}
.sidebar .nav-link i {
font-size: 1rem;
width: 1.25rem;
text-align: center;
}
.sidebar .nav-link:hover {
color: var(--sidebar-link-hover);
background-color: rgba(148, 163, 184, 0.15);
}
.sidebar .nav-link.active {
color: var(--sidebar-link-active);
background: linear-gradient(90deg, #2563eb, #4f46e5);
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.4);
}
.sidebar-footer {
padding: 0.75rem 1rem 1rem;
border-top: 1px solid rgba(148, 163, 184, 0.25);
font-size: 0.8rem;
color: #9ca3af;
}
/* Main content */
.main {
margin-left: var(--sidebar-width);
flex: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Topbar */
.topbar {
height: var(--topbar-height);
background-color: #ffffff;
border-bottom: 1px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.25rem;
position: sticky;
top: 0;
z-index: 1020;
}
.topbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.topbar-title {
font-size: 1rem;
font-weight: 600;
}
.topbar-search {
max-width: 260px;
}
.topbar-right {
display: flex;
align-items: center;
gap: 1rem;
}
.avatar {
width: 32px;
height: 32px;
border-radius: 999px;
background: linear-gradient(135deg, #2563eb, #4f46e5);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.85rem;
font-weight: 600;
}
/* Content */
.content {
padding: 1.5rem 1.5rem 2rem;
}
.page-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.page-subtitle {
font-size: 0.9rem;
color: #6b7280;
margin-bottom: 1.25rem;
}
.card {
border-radius: var(--card-radius);
border: 1px solid #e5e7eb;
}
.card-header {
border-bottom: 1px solid #e5e7eb;
background-color: #f9fafb;
border-top-left-radius: var(--card-radius);
border-top-right-radius: var(--card-radius);
}
.stat-card {
border: none;
border-radius: var(--card-radius);
background: linear-gradient(135deg, #ffffff, #eff6ff);
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}
.stat-icon {
width: 40px;
height: 40px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.stat-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6b7280;
}
.stat-value {
font-size: 1.4rem;
font-weight: 700;
}
.stat-trend {
font-size: 0.8rem;
}
.badge-soft-success {
background-color: rgba(22, 163, 74, 0.12);
color: #15803d;
}
.badge-soft-danger {
background-color: rgba(220, 38, 38, 0.12);
color: #b91c1c;
}
.badge-soft-primary {
background-color: rgba(37, 99, 235, 0.12);
color: #1d4ed8;
}
.table thead th {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7280;
border-bottom-width: 1px;
}
.table tbody td {
vertical-align: middle;
font-size: 0.9rem;
}
.status-pill {
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 0.75rem;
}
.status-pill.active {
background-color: rgba(22, 163, 74, 0.12);
color: #15803d;
}
.status-pill.pending {
background-color: rgba(234, 179, 8, 0.12);
color: #b45309;
}
.status-pill.disabled {
background-color: rgba(148, 163, 184, 0.18);
color: #4b5563;
}
footer {
padding: 1rem 1.5rem 1.5rem;
font-size: 0.8rem;
color: #9ca3af;
margin-top: auto;
}
/* Responsive */
@media (max-width: 991.98px) {
.sidebar {
transform: translateX(-100%);
transition: transform 0.2s ease;
}
.sidebar.open {
transform: translateX(0);
}
.main {
margin-left: 0;
}
.topbar {
padding-inline: 0.75rem;
}
.content {
padding-inline: 0.75rem;
}
}
</style>
</head>
<body>
<div class="layout-wrapper">
<!-- Sidebar -->
<nav class="sidebar" id="sidebar">
<div class="sidebar-brand d-flex justify-content-between align-items-center">
<div>
<span class="logo">Boitify</span><br />
<small>PowerAdmin Inspired</small>
</div>
<button
class="btn btn-sm btn-outline-light d-lg-none"
id="sidebarCloseBtn"
>
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="sidebar-nav">
<div class="sidebar-section-title">Navigation</div>
<a href="#" class="nav-link active">
<i class="bi bi-speedometer2"></i>
<span>Dashboard</span>
</a>
<a href="#" class="nav-link">
<i class="bi bi-diagram-3"></i>
<span>Projects</span>
</a>
<a href="#" class="nav-link">
<i class="bi bi-people"></i>
<span>Clients</span>
</a>
<a href="#" class="nav-link">
<i class="bi bi-magic"></i>
<span>Agents IA</span>
</a>
<div class="sidebar-section-title">SaaS</div>
<a href="#" class="nav-link">
<i class="bi bi-credit-card"></i>
<span>Billing</span>
</a>
<a href="#" class="nav-link">
<i class="bi bi-gear"></i>
<span>Settings</span>
</a>
<a href="#" class="nav-link">
<i class="bi bi-shield-lock"></i>
<span>Security</span>
</a>
</div>
<div class="sidebar-footer">
<div class="d-flex align-items-center mb-1">
<i class="bi bi-cloud-check me-2"></i>
<span>Cloud status: <strong>OK</strong></span>
</div>
<div>Boitify © <span id="year"></span></div>
</div>
</nav>
<!-- Main -->
<div class="main">
<!-- Topbar -->
<header class="topbar">
<div class="topbar-left">
<button
class="btn btn-outline-secondary btn-sm d-lg-none me-2"
id="sidebarToggleBtn"
>
<i class="bi bi-list"></i>
</button>
<div>
<div class="topbar-title">Dashboard</div>
<small class="text-muted">Vue globale de ton SaaS Boitify</small>
</div>
</div>
<div class="topbar-right">
<form class="topbar-search d-none d-md-block">
<div class="input-group input-group-sm">
<span class="input-group-text bg-white border-end-0">
<i class="bi bi-search"></i>
</span>
<input
type="text"
class="form-control border-start-0"
placeholder="Rechercher..."
/>
</div>
</form>
<button class="btn btn-link text-secondary position-relative">
<i class="bi bi-bell"></i>
<span
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
style="font-size: 0.6rem;"
>
3
</span>
</button>
<div class="dropdown">
<button
class="btn btn-light btn-sm d-flex align-items-center gap-2"
data-bs-toggle="dropdown"
>
<span class="avatar">S</span>
<span class="d-none d-sm-inline">Said</span>
<i class="bi bi-chevron-down small"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">Connecté en tant que Said</h6></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-person me-2"></i>Profil</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-sliders me-2"></i>Paramètres</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item text-danger" href="#"><i class="bi bi-box-arrow-right me-2"></i>Déconnexion</a></li>
</ul>
</div>
</div>
</header>
<!-- Content -->
<main class="content">
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
<div>
<h1 class="page-title">Vue d’ensemble</h1>
<p class="page-subtitle">
Suivi des projets, clients, agents IA et activité globale de ta plateforme.
</p>
</div>
<div class="d-flex gap-2">
<button class="btn btn-outline-primary btn-sm">
<i class="bi bi-download me-1"></i>Exporter
</button>
<button class="btn btn-primary btn-sm">
<i class="bi bi-plus-lg me-1"></i>Nouveau projet
</button>
</div>
</div>
<!-- Stats row -->
<div class="row g-3 mb-3">
<div class="col-md-3 col-sm-6">
<div class="card stat-card p-3">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="stat-label">Projets actifs</div>
<div class="stat-value">32</div>
<div class="stat-trend text-success">
<i class="bi bi-arrow-up-right"></i> +8% ce mois
</div>
</div>
<div class="stat-icon bg-primary-subtle text-primary">
<i class="bi bi-kanban"></i>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="card stat-card p-3">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="stat-label">Clients</div>
<div class="stat-value">14</div>
<div class="stat-trend text-success">
<i class="bi bi-arrow-up-right"></i> +3 nouveaux
</div>
</div>
<div class="stat-icon bg-success-subtle text-success">
<i class="bi bi-people"></i>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="card stat-card p-3">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="stat-label">Agents IA</div>
<div class="stat-value">7</div>
<div class="stat-trend text-primary">
<i class="bi bi-lightning-charge"></i> Orchestration active
</div>
</div>
<div class="stat-icon bg-warning-subtle text-warning">
<i class="bi bi-cpu"></i>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="card stat-card p-3">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="stat-label">MRR estimé</div>
<div class="stat-value">3 250 €</div>
<div class="stat-trend text-success">
<i class="bi bi-graph-up"></i> +18% vs dernier mois
</div>
</div>
<div class="stat-icon bg-danger-subtle text-danger">
<i class="bi bi-cash-coin"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Row: table + side card -->
<div class="row g-3">
<div class="col-lg-8">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">Projets récents</h5>
<button class="btn btn-sm btn-outline-secondary">
Voir tout
</button>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table mb-0 align-middle">
<thead>
<tr>
<th>Projet</th>
<th>Client</th>
<th>Statut</th>
<th>Progression</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>Onboarding SaaS Fintech</strong><br />
<small class="text-muted">Wizard multi‑étapes + scoring</small>
</td>
<td>NovaPay</td>
<td>
<span class="status-pill active">Actif</span>
</td>
<td>
<div class="d-flex align-items-center gap-2">
<div class="progress flex-grow-1" style="height: 6px;">
<div class="progress-bar bg-success" style="width: 72%;"></div>
</div>
<small class="text-muted">72%</small>
</div>
</td>
<td class="text-end">
<button class="btn btn-sm btn-outline-primary">
<i class="bi bi-box-arrow-up-right"></i>
</button>
</td>
</tr>
<tr>
<td>
<strong>Portail clients Boitify</strong><br />
<small class="text-muted">Microfrontends + multi‑tenant</small>
</td>
<td>Interne</td>
<td>
<span class="status-pill pending">En cours</span>
</td>
<td>
<div class="d-flex align-items-center gap-2">
<div class="progress flex-grow-1" style="height: 6px;">
<div class="progress-bar bg-warning" style="width: 45%;"></div>
</div>
<small class="text-muted">45%</small>
</div>
</td>
<td class="text-end">
<button class="btn btn-sm btn-outline-primary">
<i class="bi bi-box-arrow-up-right"></i>
</button>
</td>
</tr>
<tr>
<td>
<strong>Agent IA Orchestrateur</strong><br />
<small class="text-muted">Ollama + Open WebUI + Fastify</small>
</td>
<td>Lab interne</td>
<td>
<span class="status-pill disabled">Prototype</span>
</td>
<td>
<div class="d-flex align-items-center gap-2">
<div class="progress flex-grow-1" style="height: 6px;">
<div class="progress-bar bg-secondary" style="width: 20%;"></div>
</div>
<small class="text-muted">20%</small>
</div>
</td>
<td class="text-end">
<button class="btn btn-sm btn-outline-primary">
<i class="bi bi-box-arrow-up-right"></i>
</button>
</td>
</tr>
<tr>
<td>
<strong>Template UI Boitify</strong><br />
<small class="text-muted">Design system Angular + B5</small>
</td>
<td>Interne</td>
<td>
<span class="status-pill active">Actif</span>
</td>
<td>
<div class="d-flex align-items-center gap-2">
<div class="progress flex-grow-1" style="height: 6px;">
<div class="progress-bar bg-primary" style="width: 90%;"></div>
</div>
<small class="text-muted">90%</small>
</div>
</td>
<td class="text-end">
<button class="btn btn-sm btn-outline-primary">
<i class="bi bi-box-arrow-up-right"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer text-end">
<small class="text-muted">Dernière mise à jour : il y a 5 min</small>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card mb-3">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">Activité récente</h5>
<span class="badge badge-soft-primary rounded-pill">Temps réel</span>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="mb-3 d-flex">
<div class="me-2 text-primary">
<i class="bi bi-check-circle"></i>
</div>
<div>
<div><strong>Nouveau client</strong> ajouté : NovaPay</div>
<small class="text-muted">Il y a 12 minutes</small>
</div>
</li>
<li class="mb-3 d-flex">
<div class="me-2 text-success">
<i class="bi bi-lightning-charge"></i>
</div>
<div>
<div>Agent IA <strong>Onboarding Wizard</strong> mis à jour</div>
<small class="text-muted">Il y a 27 minutes</small>
</div>
</li>
<li class="mb-3 d-flex">
<div class="me-2 text-warning">
<i class="bi bi-exclamation-triangle"></i>
</div>
<div>
<div>Quota API proche de la limite pour un tenant</div>
<small class="text-muted">Il y a 1 heure</small>
</div>
</li>
<li class="d-flex">
<div class="me-2 text-secondary">
<i class="bi bi-three-dots"></i>
</div>
<div>
<div>Plus d’événements disponibles dans les logs détaillés</div>
<small class="text-muted">Voir la page Observabilité</small>
</div>
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="mb-0">Plan & usage</h5>
</div>
<div class="card-body">
<p class="mb-1">
<strong>Plan actuel :</strong> Pro Studio
</p>
<p class="text-muted small">
Idéal pour les fondateurs qui orchestrent plusieurs projets SaaS avec agents IA.
</p>
<div class="mb-2 d-flex justify-content-between small">
<span>Projets</span>
<span>32 / 50</span>
</div>
<div class="progress mb-3" style="height: 6px;">
<div class="progress-bar bg-primary" style="width: 64%;"></div>
</div>
<div class="mb-2 d-flex justify-content-between small">
<span>Agents IA</span>
<span>7 / 10</span>
</div>
<div class="progress mb-3" style="height: 6px;">
<div class="progress-bar bg-success" style="width: 70%;"></div>
</div>
<button class="btn btn-outline-primary btn-sm w-100">
Gérer l’abonnement
</button>
</div>
</div>
</div>
</div>
</main>
<footer>
Boitify — Template admin inspirée de PowerAdmin, construite avec Bootstrap 5.
</footer>
</div>
</div>
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Année dynamique
document.getElementById("year").textContent = new Date().getFullYear();
// Sidebar toggle mobile
const sidebar = document.getElementById("sidebar");
const sidebarToggleBtn = document.getElementById("sidebarToggleBtn");
const sidebarCloseBtn = document.getElementById("sidebarCloseBtn");
if (sidebarToggleBtn) {
sidebarToggleBtn.addEventListener("click", () => {
sidebar.classList.add("open");
});
}
if (sidebarCloseBtn) {
sidebarCloseBtn.addEventListener("click", () => {
sidebar.classList.remove("open");
});
}
// Fermer la sidebar si on clique en dehors (mobile)
document.addEventListener("click", (e) => {
if (
window.innerWidth < 992 &&
sidebar.classList.contains("open") &&
!sidebar.contains(e.target) &&
!sidebarToggleBtn.contains(e.target)
) {
sidebar.classList.remove("open");
}
});
</script>
</body>
</html>