Front + gestion des utilisateurs + affichage indice, tri et creation action

This commit is contained in:
2026-08-20 17:28:26 +00:00
parent 566ddf06b1
commit 71cf430d39
7 changed files with 2695 additions and 609 deletions
+49 -26
View File
@@ -2,6 +2,7 @@
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sécurité - Giraud Finance</title>
@@ -13,57 +14,55 @@
href="../images/dollars.ico"
/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- CSS général -->
<link rel="stylesheet" href="../css/style.css" />
</head>
<body class="bg-slate-900 text-slate-100 min-h-screen">
<div class="max-w-7xl mx-auto p-6">
<!-- =====================================================
EN-TÊTE
HEADER
===================================================== -->
<div
<header
class="bg-slate-800 border border-slate-700 rounded-2xl shadow-xl p-6 mb-6"
>
<div
class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
class="flex flex-col md:flex-row justify-between items-center gap-5"
>
<!-- Logo -->
<div class="flex items-center">
<img
src="../images/GFBlanc.png"
alt="Logo Giraud Finance"
class="h-12 w-auto object-contain"
/>
</div>
<!-- Titre -->
<div>
<h1 class="text-2xl font-bold text-white">Sécurité</h1>
<div class="text-center">
<h1 class="text-xl font-bold text-white tracking-tight">
Espace d'Administration
</h1>
<p class="text-sm text-slate-400 mt-1">Gestion des utilisateurs</p>
<p class="text-xs text-slate-400 mt-1">Sécurité du compte</p>
</div>
<!-- Boutons -->
<div class="flex items-center gap-3">
<!-- Nouveau utilisateur -->
<button
id="btnNouvelUtilisateur"
type="button"
class="bg-emerald-600 hover:bg-emerald-500 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg transition-all border border-emerald-500"
>
+ Nouvel utilisateur
</button>
<!-- Retour au menu -->
<a
href="./admin.html"
class="bg-slate-700 hover:bg-slate-600 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg transition-all border border-slate-600"
class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-slate-600"
>
← Retour au menu
</a>
</div>
</div>
</div>
</header>
<!-- =====================================================
MESSAGE
@@ -81,10 +80,36 @@
<div
class="bg-slate-800 border border-slate-700 rounded-2xl shadow-xl overflow-hidden"
>
<!-- En-tête tableau -->
<div
class="px-6 py-5 border-b border-slate-700 flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
>
<div>
<h2 class="text-lg font-bold text-white">
Gestion des utilisateurs
</h2>
<p class="text-xs text-slate-400 mt-1">
Gestion des comptes administrateurs.
</p>
</div>
<!-- Nouveau utilisateur -->
<button
id="btnNouvelUtilisateur"
type="button"
class="bg-emerald-600 hover:bg-emerald-500 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg transition-all border border-emerald-500"
>
+ Nouvel utilisateur
</button>
</div>
<!-- Tableau -->
<div class="overflow-x-auto">
<table class="w-full">
<!-- En-tête -->
<thead class="bg-slate-950 text-slate-300">
<tr>
<th
@@ -119,8 +144,6 @@
</tr>
</thead>
<!-- Utilisateurs -->
<tbody
id="listeUtilisateurs"
class="divide-y divide-slate-700"