release: dev -> main (P1 conception v0.2 + front P5 + admin shell) #1

Merged
Corentin merged 34 commits from dev into main 2026-06-04 17:44:30 +02:00
Showing only changes of commit b9a5414c37 - Show all commits

View file

@ -0,0 +1,411 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau de bord — Wakdo Admin</title>
<link rel="stylesheet" href="assets/css/admin.css">
</head>
<body>
<div class="admin-layout">
<!-- Topbar -->
<header class="topbar">
<div class="topbar-logo">
<img src="assets/images/logo.png" alt="Wakdo">
<div>
<span class="topbar-logo-text">Wakdo</span>
<span class="topbar-logo-sub">Administration</span>
</div>
</div>
<div class="topbar-search">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input type="text" placeholder="Rechercher une commande, un produit...">
</div>
<div class="topbar-actions">
<div class="topbar-user">
<button class="topbar-user-btn" id="userMenuBtn" type="button" aria-haspopup="true" aria-expanded="false">
<div class="topbar-user-avatar">CJ</div>
<div>
<div class="topbar-user-name">Corentin J.</div>
<div class="topbar-user-role">Administrateur</div>
</div>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<div class="dropdown-menu" id="userMenu">
<a href="#">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"></circle><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"></path></svg>
Mon profil
</a>
<a href="#">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"></path></svg>
Parametres
</a>
<div class="divider"></div>
<button class="danger" type="button">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Se deconnecter
</button>
</div>
</div>
</div>
</header>
<!-- Sidebar -->
<nav class="sidebar">
<div class="sidebar-section">
<div class="sidebar-section-label">Vue d'ensemble</div>
<a href="dashboard.html" class="sidebar-item active">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect></svg>
Tableau de bord
</a>
</div>
<div class="sidebar-section">
<div class="sidebar-section-label">Catalogue</div>
<a href="catalogue.html" class="sidebar-item sidebar-item-sub">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>
Categories
</a>
<a href="catalogue.html" class="sidebar-item sidebar-item-sub">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path></svg>
Produits
</a>
<a href="catalogue.html" class="sidebar-item sidebar-item-sub">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"></path><rect x="9" y="3" width="6" height="4" rx="2"></rect></svg>
Menus
</a>
</div>
<div class="sidebar-section">
<div class="sidebar-section-label">Operations</div>
<a href="commandes.html" class="sidebar-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
Commandes
</a>
<a href="cuisine.html" class="sidebar-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path><line x1="6" y1="1" x2="6" y2="4"></line><line x1="10" y1="1" x2="10" y2="4"></line><line x1="14" y1="1" x2="14" y2="4"></line></svg>
Cuisine
</a>
</div>
<div class="sidebar-section">
<div class="sidebar-section-label">Administration</div>
<a href="users.html" class="sidebar-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
Utilisateurs
</a>
<a href="#" class="sidebar-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
Roles
</a>
<a href="#" class="sidebar-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"></path></svg>
Parametres
</a>
</div>
</nav>
<!-- Content -->
<main class="content">
<div class="page-header">
<div>
<h1 class="page-title">Tableau de bord</h1>
<p class="page-subtitle">Samedi 9 mai 2026 — Service en cours</p>
</div>
<div class="page-actions">
<select class="filter-select" id="periodFilter">
<option value="today" selected>Aujourd'hui</option>
<option value="7d">7 derniers jours</option>
<option value="30d">30 derniers jours</option>
<option value="custom">Personnalise</option>
</select>
<button class="btn btn-secondary" type="button" id="refreshBtn">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
Actualiser
</button>
</div>
</div>
<!-- KPI Cards -->
<div class="kpi-grid">
<div class="kpi-card">
<div class="kpi-label">Ventes du jour</div>
<div class="kpi-value">2 847,50 &euro;</div>
<div>
<span class="kpi-delta up">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>
+12,4 %
</span>
<span class="kpi-delta-sub">vs hier</span>
</div>
</div>
<div class="kpi-card">
<div class="kpi-label">Commandes du jour</div>
<div class="kpi-value">231</div>
<div>
<span class="kpi-delta up">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>
+8,2 %
</span>
<span class="kpi-delta-sub">vs hier</span>
</div>
</div>
<div class="kpi-card">
<div class="kpi-label">Panier moyen</div>
<div class="kpi-value">12,33 &euro;</div>
<div>
<span class="kpi-delta down">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
-1,8 %
</span>
<span class="kpi-delta-sub">vs hier</span>
</div>
</div>
<div class="kpi-card">
<div class="kpi-label">Produits actifs</div>
<div class="kpi-value">53</div>
<div>
<span class="kpi-delta neutral">
&mdash;
</span>
<span class="kpi-delta-sub">inchange</span>
</div>
</div>
</div>
<!-- Recent Orders -->
<div class="section-block">
<div class="card-header">
<span class="card-title">Dernieres commandes</span>
<a href="commandes.html" class="btn btn-ghost btn-sm">
Voir tout
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
</a>
</div>
<div class="toolbar" style="padding: 12px 16px 0; margin-bottom: 0;">
<div class="toolbar-left">
<div class="search-field">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<input type="text" placeholder="N° de commande..." id="orderSearch">
</div>
<select class="filter-select">
<option value="">Tous les statuts</option>
<option value="pending">En attente</option>
<option value="preparing">En preparation</option>
<option value="ready">Prete</option>
<option value="delivered">Livree</option>
<option value="cancelled">Annulee</option>
</select>
</div>
</div>
<div class="table-wrapper">
<table id="ordersTable">
<thead>
<tr>
<th class="sortable" data-col="0"><span class="sort-icon">&#8597;</span></th>
<th class="sortable" data-col="1">Heure <span class="sort-icon">&#8597;</span></th>
<th>Mode</th>
<th>Statut</th>
<th class="sortable" data-col="4">Total <span class="sort-icon">&#8597;</span></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="mono fw-600">#1087</td>
<td class="muted">13:42</td>
<td><span class="pill pill-info">Sur place</span></td>
<td><span class="pill pill-success">Livree</span></td>
<td class="fw-600">18,70 &euro;</td>
<td>
<div class="action-menu">
<button class="action-menu-btn" type="button" aria-label="Actions">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
<div class="action-menu-dropdown">
<a href="#">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
Voir detail
</a>
<div class="divider"></div>
<button class="danger" type="button">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path></svg>
Annuler
</button>
</div>
</div>
</td>
</tr>
<tr>
<td class="mono fw-600">#1086</td>
<td class="muted">13:38</td>
<td><span class="pill pill-neutral">A emporter</span></td>
<td><span class="pill pill-warning">En preparation</span></td>
<td class="fw-600">24,30 &euro;</td>
<td>
<div class="action-menu">
<button class="action-menu-btn" type="button" aria-label="Actions">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
<div class="action-menu-dropdown">
<a href="#">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
Voir detail
</a>
<div class="divider"></div>
<button class="danger" type="button">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path></svg>
Annuler
</button>
</div>
</div>
</td>
</tr>
<tr>
<td class="mono fw-600">#1085</td>
<td class="muted">13:31</td>
<td><span class="pill pill-info">Sur place</span></td>
<td><span class="pill pill-success">Livree</span></td>
<td class="fw-600">11,40 &euro;</td>
<td>
<div class="action-menu">
<button class="action-menu-btn" type="button" aria-label="Actions">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
<div class="action-menu-dropdown">
<a href="#"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>Voir detail</a>
<div class="divider"></div>
<button class="danger" type="button"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path></svg>Annuler</button>
</div>
</div>
</td>
</tr>
<tr>
<td class="mono fw-600">#1084</td>
<td class="muted">13:27</td>
<td><span class="pill pill-neutral">A emporter</span></td>
<td><span class="pill pill-success">Livree</span></td>
<td class="fw-600">8,80 &euro;</td>
<td>
<div class="action-menu">
<button class="action-menu-btn" type="button" aria-label="Actions">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
<div class="action-menu-dropdown">
<a href="#"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>Voir detail</a>
<div class="divider"></div>
<button class="danger" type="button"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path></svg>Annuler</button>
</div>
</div>
</td>
</tr>
<tr>
<td class="mono fw-600">#1083</td>
<td class="muted">13:19</td>
<td><span class="pill pill-info">Sur place</span></td>
<td><span class="pill pill-neutral">Annulee</span></td>
<td class="fw-600 text-muted">6,40 &euro;</td>
<td>
<div class="action-menu">
<button class="action-menu-btn" type="button" aria-label="Actions">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
<div class="action-menu-dropdown">
<a href="#"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>Voir detail</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="mono fw-600">#1082</td>
<td class="muted">13:14</td>
<td><span class="pill pill-info">Sur place</span></td>
<td><span class="pill pill-success">Livree</span></td>
<td class="fw-600">32,10 &euro;</td>
<td>
<div class="action-menu">
<button class="action-menu-btn" type="button" aria-label="Actions">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
<div class="action-menu-dropdown">
<a href="#"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>Voir detail</a>
<div class="divider"></div>
<button class="danger" type="button"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path></svg>Annuler</button>
</div>
</div>
</td>
</tr>
<tr>
<td class="mono fw-600">#1081</td>
<td class="muted">13:08</td>
<td><span class="pill pill-neutral">A emporter</span></td>
<td><span class="pill pill-success">Livree</span></td>
<td class="fw-600">10,90 &euro;</td>
<td>
<div class="action-menu">
<button class="action-menu-btn" type="button" aria-label="Actions">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
<div class="action-menu-dropdown">
<a href="#"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>Voir detail</a>
<div class="divider"></div>
<button class="danger" type="button"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path></svg>Annuler</button>
</div>
</div>
</td>
</tr>
<tr>
<td class="mono fw-600">#1080</td>
<td class="muted">12:58</td>
<td><span class="pill pill-info">Sur place</span></td>
<td><span class="pill pill-success">Livree</span></td>
<td class="fw-600">15,60 &euro;</td>
<td>
<div class="action-menu">
<button class="action-menu-btn" type="button" aria-label="Actions">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
<div class="action-menu-dropdown">
<a href="#"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>Voir detail</a>
<div class="divider"></div>
<button class="danger" type="button"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path></svg>Annuler</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="pagination">
<span class="pagination-info">Affichage de 8 sur 231 commandes</span>
<div class="pagination-controls">
<button class="pagination-btn" disabled type="button">&laquo;</button>
<button class="pagination-btn active" type="button">1</button>
<button class="pagination-btn" type="button">2</button>
<button class="pagination-btn" type="button">3</button>
<span style="padding: 0 4px; color: var(--color-text-muted); font-size: 12px;">...</span>
<button class="pagination-btn" type="button">29</button>
<button class="pagination-btn" type="button">&raquo;</button>
</div>
</div>
</div>
</main>
</div>
<script src="assets/js/admin.js"></script>
</body>
</html>