From 01d40027203c295fc40ac49c0b70619781677f9e Mon Sep 17 00:00:00 2001
From: Arcade69 <rubenarcade69@gmail.com>
Date: Thu, 10 Apr 2025 21:06:18 +0200
Subject: [PATCH] mise a jour User.jsx

---
 Front-end/src/pages/Admin/AdminObjet.jsx | 53 +++++-----------
 Front-end/src/pages/Admin/Dashboard.jsx  | 80 ++++++++++++------------
 Front-end/src/pages/Admin/User.jsx       | 30 +++++++--
 Front-end/src/pages/Admin/sidebar.jsx    |  2 +-
 4 files changed, 80 insertions(+), 85 deletions(-)

diff --git a/Front-end/src/pages/Admin/AdminObjet.jsx b/Front-end/src/pages/Admin/AdminObjet.jsx
index 0ed9ce9..90a5ee1 100644
--- a/Front-end/src/pages/Admin/AdminObjet.jsx
+++ b/Front-end/src/pages/Admin/AdminObjet.jsx
@@ -111,7 +111,7 @@ function AdminObjet() {
   return (
     <div className="flex h-screen">
       <Sidebar />
-      <div className="flex-1 bg-gradient-to-br from-blue-50 to-indigo-50 p-8 overflow-auto">
+      <div className="flex-1 bg-gradient-to-br from-blue-50 to-indigo-50 p-8 overflow-auto scrollbar-hide">
         <div className="max-w-7xl mx-auto">
           <h1 className="text-4xl font-bold text-gray-900 text-center mb-12">
             Administration des Objets et Outils/Services
@@ -169,10 +169,7 @@ function AdminObjet() {
             </div>
             <form onSubmit={handleSubmit} className="space-y-5">
               <div>
-                <label
-                  htmlFor="nom"
-                  className="block mb-2 text-sm font-medium text-gray-900"
-                >
+                <label htmlFor="nom" className="block mb-2 text-sm font-medium text-gray-900">
                   Nom :
                 </label>
                 <input
@@ -186,10 +183,7 @@ function AdminObjet() {
                 />
               </div>
               <div>
-                <label
-                  htmlFor="description"
-                  className="block mb-2 text-sm font-medium text-gray-900"
-                >
+                <label htmlFor="description" className="block mb-2 text-sm font-medium text-gray-900">
                   Description :
                 </label>
                 <input
@@ -203,10 +197,7 @@ function AdminObjet() {
                 />
               </div>
               <div>
-                <label
-                  htmlFor="type"
-                  className="block mb-2 text-sm font-medium text-gray-900"
-                >
+                <label htmlFor="type" className="block mb-2 text-sm font-medium text-gray-900">
                   Type :
                 </label>
                 <input
@@ -220,10 +211,7 @@ function AdminObjet() {
                 />
               </div>
               <div>
-                <label
-                  htmlFor="localisation"
-                  className="block mb-2 text-sm font-medium text-gray-900"
-                >
+                <label htmlFor="localisation" className="block mb-2 text-sm font-medium text-gray-900">
                   Localisation :
                 </label>
                 <input
@@ -237,10 +225,7 @@ function AdminObjet() {
                 />
               </div>
               <div>
-                <label
-                  htmlFor="proprietaire"
-                  className="block mb-2 text-sm font-medium text-gray-900"
-                >
+                <label htmlFor="proprietaire" className="block mb-2 text-sm font-medium text-gray-900">
                   Propriétaire :
                 </label>
                 <input
@@ -287,20 +272,11 @@ function AdminObjet() {
                 </div>
               </div>
               <div className="flex flex-col">
-                <button
-                  type="submit"
-                  className="text-blue-500 hover:underline mb-2"
-                >
+                <button type="submit" className="text-blue-500 hover:underline mb-2">
                   {!verif ? "Confirmer les informations" : "Oui je suis sûr !"}
                 </button>
-                <button
-                  type="button"
-                  onClick={handleCancel}
-                  className="text-red-500 hover:underline"
-                >
-                  {!verif
-                    ? "Supprimer les informations"
-                    : "Non je veux changer !"}
+                <button type="button" onClick={handleCancel} className="text-red-500 hover:underline">
+                  {!verif ? "Supprimer les informations" : "Non je veux changer !"}
                 </button>
               </div>
               <p className={enregistre ? "text-green-700" : "text-red-700"}>
@@ -308,8 +284,7 @@ function AdminObjet() {
               </p>
             </form>
           </section>
-
-          {/* Tri des objets */}
+          {/* TRI DES OBJETS */}
           <section className="bg-white p-6 rounded-xl shadow-md mb-12">
             <div className="flex items-center justify-between mb-4">
               <h2 className="text-2xl font-semibold">
@@ -327,8 +302,9 @@ function AdminObjet() {
                 <option value="status">Status</option>
               </select>
             </div>
-            <div>
-              <table className="min-w-full divide-y divide-gray-200">
+            {/* Conteneur pour le scroll horizontal */}
+            <div className="overflow-x-auto">
+              <table className="w-full min-w-[640px] divide-y divide-gray-200">
                 <thead>
                   <tr>
                     <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -397,8 +373,7 @@ function AdminObjet() {
               </table>
             </div>
           </section>
-
-          {/* Règles globales */}
+          {/* RÈGLES GLOBALES */}
           <section className="bg-white p-6 rounded-xl shadow-md mt-12">
             <h2 className="text-2xl font-semibold mb-4">Règles Globales</h2>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
diff --git a/Front-end/src/pages/Admin/Dashboard.jsx b/Front-end/src/pages/Admin/Dashboard.jsx
index 9a26e7c..2015ff5 100644
--- a/Front-end/src/pages/Admin/Dashboard.jsx
+++ b/Front-end/src/pages/Admin/Dashboard.jsx
@@ -167,52 +167,53 @@ function Dashboard() {
                     </div>
                   </div>
                 )}
-
                 {widget.type === "users" && (
                   <div>
                     <h2 className="text-xl font-semibold mb-4">
                       Gestion des Utilisateurs
                     </h2>
-                    <table className="w-full border border-gray-200">
-                      <thead>
-                        <tr>
-                          <th className="px-2 py-1 border border-gray-200 bg-gray-100 text-left">
-                            Username
-                          </th>
-                          <th className="px-2 py-1 border border-gray-200 bg-gray-100 text-left">
-                            Email
-                          </th>
-                          <th className="px-2 py-1 border border-gray-200 bg-gray-100 text-left">
-                            Access
-                          </th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {users.slice(0, 5).map((user) => (
-                          <tr key={user.id}>
-                            <td className="px-2 py-1 border border-gray-200">
-                              {user.username}
-                            </td>
-                            <td className="px-2 py-1 border border-gray-200">
-                              {user.email}
-                            </td>
-                            <td className="px-2 py-1 border border-gray-200">
-                              {user.accessLevel}
-                            </td>
-                          </tr>
-                        ))}
-                        {users.length === 0 && (
+                    <div className="overflow-x-auto">
+                      <table className="min-w-[320px] w-full border border-gray-200">
+                        <thead>
                           <tr>
-                            <td
-                              colSpan="3"
-                              className="px-2 py-1 border border-gray-200 text-center"
-                            >
-                              Aucun utilisateur disponible
-                            </td>
+                            <th className="px-2 py-1 border border-gray-200 bg-gray-100 text-left">
+                              Username
+                            </th>
+                            <th className="px-2 py-1 border border-gray-200 bg-gray-100 text-left">
+                              Email
+                            </th>
+                            <th className="px-2 py-1 border border-gray-200 bg-gray-100 text-left">
+                              Access
+                            </th>
                           </tr>
-                        )}
-                      </tbody>
-                    </table>
+                        </thead>
+                        <tbody>
+                          {users.slice(0, 5).map((user) => (
+                            <tr key={user.id}>
+                              <td className="px-2 py-1 border border-gray-200">
+                                {user.username}
+                              </td>
+                              <td className="px-2 py-1 border border-gray-200">
+                                {user.email}
+                              </td>
+                              <td className="px-2 py-1 border border-gray-200">
+                                {user.accessLevel}
+                              </td>
+                            </tr>
+                          ))}
+                          {users.length === 0 && (
+                            <tr>
+                              <td
+                                colSpan="3"
+                                className="px-2 py-1 border border-gray-200 text-center"
+                              >
+                                Aucun utilisateur disponible
+                              </td>
+                            </tr>
+                          )}
+                        </tbody>
+                      </table>
+                    </div>
                     <button
                       className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md"
                       onClick={() => (window.location.href = "/user")}
@@ -221,7 +222,6 @@ function Dashboard() {
                     </button>
                   </div>
                 )}
-
                 {widget.type === "objects" && (
                   <div>
                     <h2 className="text-xl font-semibold mb-4">
diff --git a/Front-end/src/pages/Admin/User.jsx b/Front-end/src/pages/Admin/User.jsx
index ceabf9f..db131ff 100644
--- a/Front-end/src/pages/Admin/User.jsx
+++ b/Front-end/src/pages/Admin/User.jsx
@@ -1,4 +1,3 @@
-// User.jsx
 import React, { useState } from "react";
 import Sidebar from "./sidebar.jsx";
 
@@ -63,7 +62,7 @@ function User() {
         return user;
       })
     );
-    // Réinitialiser la valeur de l'input pour cet utilisateur
+    // Réinitialiser l'input pour cet utilisateur
     setPointsInput({ ...pointsInput, [userId]: "" });
   };
 
@@ -73,13 +72,27 @@ function User() {
     setLogs([...logs, { id: Date.now(), username, action, timestamp }]);
   };
 
+  // Fonction pour générer et télécharger le fichier txt des logs
+  const downloadLogs = () => {
+    const logText = logs
+      .map((log) => `${log.timestamp} - ${log.username} - ${log.action}`)
+      .join("\n");
+    const blob = new Blob([logText], { type: "text/plain;charset=utf-8" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = "logs.txt";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
   return (
-    <div className="flex min-h-screen">
+    <div className="flex h-screen">
       <Sidebar />
       <main className="flex-grow p-5">
         <section className="mt-5">
-          <h1 className="text-2xl font-bold mb-4">User Management</h1>
-          <p className="mb-5">Manage users from this panel.</p>
+          <h1 className="text-2xl font-bold mb-4">Gestion des utilisateurs</h1>
+          <p className="mb-5">Gérez les utilisateurs à partir de ce panneau.</p>
           {/* Formulaire d'ajout d'utilisateur */}
           <form
             className="grid grid-cols-[1fr_1fr_auto] gap-[10px] mb-5"
@@ -223,6 +236,13 @@ function User() {
               ))}
             </tbody>
           </table>
+          {/* Bouton de téléchargement des logs */}
+          <button
+            onClick={downloadLogs}
+            className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md"
+          >
+            Télécharger les logs
+          </button>
         </section>
       </main>
     </div>
diff --git a/Front-end/src/pages/Admin/sidebar.jsx b/Front-end/src/pages/Admin/sidebar.jsx
index 31f7eeb..f83597a 100644
--- a/Front-end/src/pages/Admin/sidebar.jsx
+++ b/Front-end/src/pages/Admin/sidebar.jsx
@@ -3,7 +3,7 @@ import { Menu, X } from "lucide-react";
 
 function Sidebar({ isOpen, toggleSidebar }) {
   return (
-    <aside
+    <aside 
       className={`
         bg-gray-800 text-white p-5 h-screen w-64 fixed top-0 left-0 z-40
         transform transition-transform duration-200 ease-in-out