From e94ec1ce92117fff917655611076d6d5d7964422 Mon Sep 17 00:00:00 2001
From: Arcade69 <65565653+Arcade69@users.noreply.github.com>
Date: Wed, 2 Apr 2025 21:37:57 +0200
Subject: [PATCH 1/6] Add files via upload

Ajout des pages Admin
---
 projet_admin/css/styles.css       | 256 ++++++++++++++++++++++++++++++
 projet_admin/database/logs.json   |   0
 projet_admin/database/points.json |   0
 projet_admin/database/users.json  |   0
 projet_admin/http/User.php        | 132 +++++++++++++++
 projet_admin/http/frontend.php    |  17 ++
 projet_admin/http/index.js        |  10 ++
 projet_admin/http/sidebar.php     |  52 ++++++
 projet_admin/js/script.js         | 106 +++++++++++++
 9 files changed, 573 insertions(+)
 create mode 100644 projet_admin/css/styles.css
 create mode 100644 projet_admin/database/logs.json
 create mode 100644 projet_admin/database/points.json
 create mode 100644 projet_admin/database/users.json
 create mode 100644 projet_admin/http/User.php
 create mode 100644 projet_admin/http/frontend.php
 create mode 100644 projet_admin/http/index.js
 create mode 100644 projet_admin/http/sidebar.php
 create mode 100644 projet_admin/js/script.js

diff --git a/projet_admin/css/styles.css b/projet_admin/css/styles.css
new file mode 100644
index 0000000..1408995
--- /dev/null
+++ b/projet_admin/css/styles.css
@@ -0,0 +1,256 @@
+/* General Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+}
+
+/* Container */
+.container {
+    display: flex;
+    height: 100vh;
+}
+
+/* Sidebar */
+.sidebar h2 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.sidebar nav ul {
+    list-style: none;
+}
+
+.sidebar nav ul li {
+    margin: 15px 0;
+}
+
+.sidebar nav ul li a {
+    color: #fff;
+    text-decoration: none;
+    padding: 10px;
+    display: block;
+    border-radius: 5px;
+}
+
+.sidebar nav ul li a:hover {
+    background-color: #555;
+}
+
+/* Main Content */
+.main-content {
+    flex-grow: 1;
+    padding: 20px;
+    background-color: #fff;
+    overflow-y: auto;
+}
+
+header {
+    margin-bottom: 20px;
+}
+
+header h1 {
+    margin-bottom: 10px;
+}
+
+/* Cards Section */
+.cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+}
+
+.card {
+    background: #e3e3e3;
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.card h3 {
+    margin-bottom: 10px;
+}
+
+/* Media Query for Responsive Design */
+@media (max-width: 768px) {
+    .sidebar {
+        width: 70px;
+        text-align: center;
+    }
+    
+    .sidebar h2 {
+        font-size: 16px;
+    }
+    
+    .sidebar nav ul li {
+        margin: 10px 0;
+    }
+
+    .sidebar nav ul li a {
+        padding: 5px;
+    }
+    
+    .main-content {
+        padding: 10px;
+    }
+}
+
+/* User Management Section */
+.user-management {
+    margin-top: 20px;
+}
+
+.user-form {
+    display: grid;
+    grid-template-columns: 1fr 1fr auto;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.user-form input {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.user-form button {
+    padding: 10px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.user-form button:hover {
+    background-color: #218838;
+}
+
+.user-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.user-table th, .user-table td {
+    padding: 10px;
+    border: 1px solid #ccc;
+    text-align: left;
+}
+
+.user-table th {
+    background-color: #f4f4f4;
+}
+
+.action-button {
+    background-color: #dc3545;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.action-button:hover {
+    background-color: #c82333;
+}
+
+/* Add this to your existing CSS */
+
+/* User Management Section */
+.user-management {
+    margin-top: 20px;
+}
+
+.user-form {
+    display: grid;
+    grid-template-columns: 1fr 1fr auto;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.user-form input {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.user-form button {
+    padding: 10px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.user-form button:hover {
+    background-color: #218838;
+}
+
+.user-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.user-table th, .user-table td {
+    padding: 10px;
+    border: 1px solid #ccc;
+    text-align: left;
+}
+
+.user-table th {
+    background-color: #f4f4f4;
+}
+
+.access-level {
+    margin-right: 10px;
+}
+
+.assign-button, .revoke-button, .adjust-points-button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.assign-button:hover {
+    background-color: #0069d9;
+}
+
+.revoke-button {
+    background-color: #dc3545;
+}
+
+.revoke-button:hover {
+    background-color: #c82333;
+}
+
+/* Add this to your existing CSS */
+
+/* User Logs Section */
+.user-logs {
+    margin-top: 40px;
+}
+
+.log-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.log-table th, .log-table td {
+    padding: 10px;
+    border: 1px solid #ccc;
+    text-align: left;
+}
+
+.log-table th {
+    background-color: #f4f4f4;
+}
\ No newline at end of file
diff --git a/projet_admin/database/logs.json b/projet_admin/database/logs.json
new file mode 100644
index 0000000..e69de29
diff --git a/projet_admin/database/points.json b/projet_admin/database/points.json
new file mode 100644
index 0000000..e69de29
diff --git a/projet_admin/database/users.json b/projet_admin/database/users.json
new file mode 100644
index 0000000..e69de29
diff --git a/projet_admin/http/User.php b/projet_admin/http/User.php
new file mode 100644
index 0000000..b7a7251
--- /dev/null
+++ b/projet_admin/http/User.php
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/styles.css">
+    <title>User</title>
+    <style>
+        /* Add this to your existing CSS */
+
+        /* User Management Section */
+        .user-management {
+            margin-top: 20px;
+        }
+
+        .user-form {
+            display: grid;
+            grid-template-columns: 1fr 1fr auto;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+
+        .user-form input {
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        .user-form button {
+            padding: 10px;
+            background-color: #28a745;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .user-form button:hover {
+            background-color: #218838;
+        }
+
+        .user-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        .user-table th,
+        .user-table td {
+            padding: 10px;
+            border: 1px solid #ccc;
+            text-align: left;
+        }
+
+        .user-table th {
+            background-color: #f4f4f4;
+        }
+
+        .access-level {
+            margin-right: 10px;
+        }
+
+        .assign-button,
+        .revoke-button {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .assign-button:hover {
+            background-color: #0069d9;
+        }
+
+        .revoke-button {
+            background-color: #dc3545;
+        }
+
+        .revoke-button:hover {
+            background-color: #c82333;
+        }
+    </style>
+</head>
+<?php include("sidebar.php"); ?>
+
+<body>
+    <main class="main-content">
+        <header>
+            <h1>User Management</h1>
+            <p>Manage users from this panel.</p>
+        </header>
+        <section class="user-management">
+            <form id="userForm" class="user-form">
+                <input type="text" id="username" placeholder="Username" required>
+                <input type="email" id="email" placeholder="Email" required>
+                <button type="submit">Add User</button>
+            </form>
+            <table class="user-table">
+                <thead>
+                    <tr>
+                        <th>Username</th>
+                        <th>Email</th>
+                        <th>Access Level</th>
+                        <th>Points</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody id="userList">
+                </tbody>
+            </table>
+        </section>
+        <section class="user-logs">
+            <h2>Login History and Action Logs</h2>
+            <table class="log-table">
+                <thead>
+                    <tr>
+                        <th>Username</th>
+                        <th>Action</th>
+                        <th>Timestamp</th>
+                    </tr>
+                </thead>
+                <tbody id="logList">
+                </tbody>
+            </table>
+        </section>
+    </main>
+</body>
+<script src="../js/script.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/projet_admin/http/frontend.php b/projet_admin/http/frontend.php
new file mode 100644
index 0000000..0390c07
--- /dev/null
+++ b/projet_admin/http/frontend.php
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Dashboard - User Management</title>
+    <link rel="stylesheet" href="../css/styles.css">
+</head>
+<?php include("sidebar.php"); ?>
+
+<body>
+    <nav id="navigation"></nav>
+    <script src="../js/script.js"></script>
+</body>
+
+</html>
diff --git a/projet_admin/http/index.js b/projet_admin/http/index.js
new file mode 100644
index 0000000..df83c42
--- /dev/null
+++ b/projet_admin/http/index.js
@@ -0,0 +1,10 @@
+import { createRoot } from 'react-dom/client';
+
+function NavigationBar() {
+  // TODO: Actually implement a navigation bar
+  return <h1>Hello from React!</h1>;
+}
+
+const domNode = document.getElementById('navigation');
+const root = createRoot(domNode);
+root.render(<NavigationBar />);
diff --git a/projet_admin/http/sidebar.php b/projet_admin/http/sidebar.php
new file mode 100644
index 0000000..4e06c90
--- /dev/null
+++ b/projet_admin/http/sidebar.php
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><i class="fas fa-head-side-brain"></i></title>
+    <link rel="stylesheet" href="../css/styles.css">
+    <style>
+        body {
+            display: flex;
+        }
+
+        main {
+            flex-grow: 1; /* Permet au contenu principal de prendre tout l'espace restant */
+            padding: 20px;
+        }
+        html,
+        body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        .sidebar {
+            width: 250px;
+            background-color: #333;
+            color: #fff;
+            padding: 20px;
+            height: 100vh;
+            /* Sidebar prend toute la hauteur visible de l'écran */
+            box-sizing: border-box;
+            /* inclut padding dans la largeur/hauteur */
+        }
+    </style>
+</head>
+
+<body>
+    <aside class="sidebar">
+        <h2>Admin Panel</h2>
+        <nav>
+            <ul>
+                <li><a href="frontend.php">Dashboard</a></li>
+                <li><a href="User.php">Users</a></li>
+                <li><a href="#">Settings</a></li>
+                <li><a href="#">Reports</a></li>
+            </ul>
+        </nav>
+    </aside>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/projet_admin/js/script.js b/projet_admin/js/script.js
new file mode 100644
index 0000000..58f66a4
--- /dev/null
+++ b/projet_admin/js/script.js
@@ -0,0 +1,106 @@
+// script.js
+
+let users = [];
+let logs = [];
+
+document.getElementById('userForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+    
+    const username = document.getElementById('username').value;
+    const email = document.getElementById('email').value;
+    
+    const user = {
+        id: Date.now(),
+        username: username,
+        email: email,
+        accessLevel: 'User',  // Default access level
+        points: 0,             // Default points
+        logins: []             // Array to track login timestamps     
+    };
+    
+    users.push(user);
+    logAction(username, 'User added');
+    renderUserList();
+    this.reset();  // Clear the form
+});
+
+function renderUserList() {
+    const userList = document.getElementById('userList');
+    userList.innerHTML = '';  // Clear the list before rendering
+    
+    users.forEach((user) => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td>${user.username}</td>
+            <td>${user.email}</td>
+            <td>
+                <select class="access-level" onchange="changeAccessLevel(${user.id}, this.value)">
+                    <option value="Admin" ${user.accessLevel === 'Admin' ? 'selected' : ''}>Admin</option>
+                    <option value="User" ${user.accessLevel === 'User' ? 'selected' : ''}>User</option>
+                    <option value="Guest" ${user.accessLevel === 'Guest' ? 'selected' : ''}>Guest</option>
+                </select>
+            </td>
+            <td>
+                <span>${user.points}</span>
+                <input type="number" min="0" id="points-${user.id}" style="width:60px" placeholder="Adjust" />
+                <button class="adjust-points-button" onclick="adjustPoints(${user.id})">Adjust</button>
+            </td>
+            <td>
+                <button class="action-button" onclick="deleteUser(${user.id})">Delete</button>
+            </td>
+        `;
+        userList.appendChild(row);
+    });
+}
+
+function deleteUser(userId) {
+    const user = users.find(user => user.id === userId);
+    if (user) {
+        logAction(user.username, 'User deleted');
+    }
+    users = users.filter(user => user.id !== userId);
+    renderUserList();
+}
+
+function changeAccessLevel(userId, newLevel) {
+    const user = users.find(user => user.id === userId);
+    if (user) {
+        const oldLevel = user.accessLevel;
+        user.accessLevel = newLevel;
+        logAction(user.username, `Access level changed from ${oldLevel} to ${newLevel}`);
+    }
+}
+
+function adjustPoints(userId) {
+    const inputField = document.getElementById(`points-${userId}`);
+    const pointsToAdd = parseInt(inputField.value) || 0;
+
+    const user = users.find(user => user.id === userId);
+    if (user) {
+        user.points += pointsToAdd;  // Adjust points based on the input value
+        logAction(user.username, `Points adjusted by ${pointsToAdd}`);
+        inputField.value = '';  // Clear the input
+        renderUserList();  // Re-render the user list
+    }
+}
+
+function logAction(username, action) {
+    const timestamp = new Date().toLocaleString();
+    logs.push({username, action, timestamp});
+    renderLogList();
+}
+
+function renderLogList() {
+    const logList = document.getElementById('logList');
+    logList.innerHTML = '';  // Clear the list before rendering
+
+    logs.forEach(log => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td>${log.username}</td>
+            <td>${log.action}</td>
+            <td>${log.timestamp}</td>
+        `;
+        logList.appendChild(row);
+    });
+}
\ No newline at end of file

From eee571713f2bae0e7c070dd478e6c3932e1d2eb6 Mon Sep 17 00:00:00 2001
From: Arcade69 <65565653+Arcade69@users.noreply.github.com>
Date: Tue, 8 Apr 2025 10:01:45 +0200
Subject: [PATCH 2/6] Delete projet_admin directory

---
 projet_admin/css/styles.css       | 256 ------------------------------
 projet_admin/database/logs.json   |   0
 projet_admin/database/points.json |   0
 projet_admin/database/users.json  |   0
 projet_admin/http/User.php        | 132 ---------------
 projet_admin/http/frontend.php    |  17 --
 projet_admin/http/index.js        |  10 --
 projet_admin/http/sidebar.php     |  52 ------
 projet_admin/js/script.js         | 106 -------------
 9 files changed, 573 deletions(-)
 delete mode 100644 projet_admin/css/styles.css
 delete mode 100644 projet_admin/database/logs.json
 delete mode 100644 projet_admin/database/points.json
 delete mode 100644 projet_admin/database/users.json
 delete mode 100644 projet_admin/http/User.php
 delete mode 100644 projet_admin/http/frontend.php
 delete mode 100644 projet_admin/http/index.js
 delete mode 100644 projet_admin/http/sidebar.php
 delete mode 100644 projet_admin/js/script.js

diff --git a/projet_admin/css/styles.css b/projet_admin/css/styles.css
deleted file mode 100644
index 1408995..0000000
--- a/projet_admin/css/styles.css
+++ /dev/null
@@ -1,256 +0,0 @@
-/* General Reset */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: Arial, sans-serif;
-    background-color: #f4f4f4;
-}
-
-/* Container */
-.container {
-    display: flex;
-    height: 100vh;
-}
-
-/* Sidebar */
-.sidebar h2 {
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.sidebar nav ul {
-    list-style: none;
-}
-
-.sidebar nav ul li {
-    margin: 15px 0;
-}
-
-.sidebar nav ul li a {
-    color: #fff;
-    text-decoration: none;
-    padding: 10px;
-    display: block;
-    border-radius: 5px;
-}
-
-.sidebar nav ul li a:hover {
-    background-color: #555;
-}
-
-/* Main Content */
-.main-content {
-    flex-grow: 1;
-    padding: 20px;
-    background-color: #fff;
-    overflow-y: auto;
-}
-
-header {
-    margin-bottom: 20px;
-}
-
-header h1 {
-    margin-bottom: 10px;
-}
-
-/* Cards Section */
-.cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 20px;
-}
-
-.card {
-    background: #e3e3e3;
-    padding: 20px;
-    border-radius: 8px;
-    text-align: center;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-.card h3 {
-    margin-bottom: 10px;
-}
-
-/* Media Query for Responsive Design */
-@media (max-width: 768px) {
-    .sidebar {
-        width: 70px;
-        text-align: center;
-    }
-    
-    .sidebar h2 {
-        font-size: 16px;
-    }
-    
-    .sidebar nav ul li {
-        margin: 10px 0;
-    }
-
-    .sidebar nav ul li a {
-        padding: 5px;
-    }
-    
-    .main-content {
-        padding: 10px;
-    }
-}
-
-/* User Management Section */
-.user-management {
-    margin-top: 20px;
-}
-
-.user-form {
-    display: grid;
-    grid-template-columns: 1fr 1fr auto;
-    gap: 10px;
-    margin-bottom: 20px;
-}
-
-.user-form input {
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-}
-
-.user-form button {
-    padding: 10px;
-    background-color: #28a745;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.user-form button:hover {
-    background-color: #218838;
-}
-
-.user-table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.user-table th, .user-table td {
-    padding: 10px;
-    border: 1px solid #ccc;
-    text-align: left;
-}
-
-.user-table th {
-    background-color: #f4f4f4;
-}
-
-.action-button {
-    background-color: #dc3545;
-    color: white;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.action-button:hover {
-    background-color: #c82333;
-}
-
-/* Add this to your existing CSS */
-
-/* User Management Section */
-.user-management {
-    margin-top: 20px;
-}
-
-.user-form {
-    display: grid;
-    grid-template-columns: 1fr 1fr auto;
-    gap: 10px;
-    margin-bottom: 20px;
-}
-
-.user-form input {
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-}
-
-.user-form button {
-    padding: 10px;
-    background-color: #28a745;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.user-form button:hover {
-    background-color: #218838;
-}
-
-.user-table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.user-table th, .user-table td {
-    padding: 10px;
-    border: 1px solid #ccc;
-    text-align: left;
-}
-
-.user-table th {
-    background-color: #f4f4f4;
-}
-
-.access-level {
-    margin-right: 10px;
-}
-
-.assign-button, .revoke-button, .adjust-points-button {
-    background-color: #007bff;
-    color: white;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.assign-button:hover {
-    background-color: #0069d9;
-}
-
-.revoke-button {
-    background-color: #dc3545;
-}
-
-.revoke-button:hover {
-    background-color: #c82333;
-}
-
-/* Add this to your existing CSS */
-
-/* User Logs Section */
-.user-logs {
-    margin-top: 40px;
-}
-
-.log-table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.log-table th, .log-table td {
-    padding: 10px;
-    border: 1px solid #ccc;
-    text-align: left;
-}
-
-.log-table th {
-    background-color: #f4f4f4;
-}
\ No newline at end of file
diff --git a/projet_admin/database/logs.json b/projet_admin/database/logs.json
deleted file mode 100644
index e69de29..0000000
diff --git a/projet_admin/database/points.json b/projet_admin/database/points.json
deleted file mode 100644
index e69de29..0000000
diff --git a/projet_admin/database/users.json b/projet_admin/database/users.json
deleted file mode 100644
index e69de29..0000000
diff --git a/projet_admin/http/User.php b/projet_admin/http/User.php
deleted file mode 100644
index b7a7251..0000000
--- a/projet_admin/http/User.php
+++ /dev/null
@@ -1,132 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="../css/styles.css">
-    <title>User</title>
-    <style>
-        /* Add this to your existing CSS */
-
-        /* User Management Section */
-        .user-management {
-            margin-top: 20px;
-        }
-
-        .user-form {
-            display: grid;
-            grid-template-columns: 1fr 1fr auto;
-            gap: 10px;
-            margin-bottom: 20px;
-        }
-
-        .user-form input {
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-        }
-
-        .user-form button {
-            padding: 10px;
-            background-color: #28a745;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-
-        .user-form button:hover {
-            background-color: #218838;
-        }
-
-        .user-table {
-            width: 100%;
-            border-collapse: collapse;
-        }
-
-        .user-table th,
-        .user-table td {
-            padding: 10px;
-            border: 1px solid #ccc;
-            text-align: left;
-        }
-
-        .user-table th {
-            background-color: #f4f4f4;
-        }
-
-        .access-level {
-            margin-right: 10px;
-        }
-
-        .assign-button,
-        .revoke-button {
-            background-color: #007bff;
-            color: white;
-            border: none;
-            padding: 5px 10px;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-
-        .assign-button:hover {
-            background-color: #0069d9;
-        }
-
-        .revoke-button {
-            background-color: #dc3545;
-        }
-
-        .revoke-button:hover {
-            background-color: #c82333;
-        }
-    </style>
-</head>
-<?php include("sidebar.php"); ?>
-
-<body>
-    <main class="main-content">
-        <header>
-            <h1>User Management</h1>
-            <p>Manage users from this panel.</p>
-        </header>
-        <section class="user-management">
-            <form id="userForm" class="user-form">
-                <input type="text" id="username" placeholder="Username" required>
-                <input type="email" id="email" placeholder="Email" required>
-                <button type="submit">Add User</button>
-            </form>
-            <table class="user-table">
-                <thead>
-                    <tr>
-                        <th>Username</th>
-                        <th>Email</th>
-                        <th>Access Level</th>
-                        <th>Points</th>
-                        <th>Actions</th>
-                    </tr>
-                </thead>
-                <tbody id="userList">
-                </tbody>
-            </table>
-        </section>
-        <section class="user-logs">
-            <h2>Login History and Action Logs</h2>
-            <table class="log-table">
-                <thead>
-                    <tr>
-                        <th>Username</th>
-                        <th>Action</th>
-                        <th>Timestamp</th>
-                    </tr>
-                </thead>
-                <tbody id="logList">
-                </tbody>
-            </table>
-        </section>
-    </main>
-</body>
-<script src="../js/script.js"></script>
-
-</html>
\ No newline at end of file
diff --git a/projet_admin/http/frontend.php b/projet_admin/http/frontend.php
deleted file mode 100644
index 0390c07..0000000
--- a/projet_admin/http/frontend.php
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Admin Dashboard - User Management</title>
-    <link rel="stylesheet" href="../css/styles.css">
-</head>
-<?php include("sidebar.php"); ?>
-
-<body>
-    <nav id="navigation"></nav>
-    <script src="../js/script.js"></script>
-</body>
-
-</html>
diff --git a/projet_admin/http/index.js b/projet_admin/http/index.js
deleted file mode 100644
index df83c42..0000000
--- a/projet_admin/http/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { createRoot } from 'react-dom/client';
-
-function NavigationBar() {
-  // TODO: Actually implement a navigation bar
-  return <h1>Hello from React!</h1>;
-}
-
-const domNode = document.getElementById('navigation');
-const root = createRoot(domNode);
-root.render(<NavigationBar />);
diff --git a/projet_admin/http/sidebar.php b/projet_admin/http/sidebar.php
deleted file mode 100644
index 4e06c90..0000000
--- a/projet_admin/http/sidebar.php
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><i class="fas fa-head-side-brain"></i></title>
-    <link rel="stylesheet" href="../css/styles.css">
-    <style>
-        body {
-            display: flex;
-        }
-
-        main {
-            flex-grow: 1; /* Permet au contenu principal de prendre tout l'espace restant */
-            padding: 20px;
-        }
-        html,
-        body {
-            height: 100%;
-            margin: 0;
-            padding: 0;
-        }
-
-        .sidebar {
-            width: 250px;
-            background-color: #333;
-            color: #fff;
-            padding: 20px;
-            height: 100vh;
-            /* Sidebar prend toute la hauteur visible de l'écran */
-            box-sizing: border-box;
-            /* inclut padding dans la largeur/hauteur */
-        }
-    </style>
-</head>
-
-<body>
-    <aside class="sidebar">
-        <h2>Admin Panel</h2>
-        <nav>
-            <ul>
-                <li><a href="frontend.php">Dashboard</a></li>
-                <li><a href="User.php">Users</a></li>
-                <li><a href="#">Settings</a></li>
-                <li><a href="#">Reports</a></li>
-            </ul>
-        </nav>
-    </aside>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/projet_admin/js/script.js b/projet_admin/js/script.js
deleted file mode 100644
index 58f66a4..0000000
--- a/projet_admin/js/script.js
+++ /dev/null
@@ -1,106 +0,0 @@
-// script.js
-
-let users = [];
-let logs = [];
-
-document.getElementById('userForm').addEventListener('submit', function(event) {
-    event.preventDefault();
-    
-    const username = document.getElementById('username').value;
-    const email = document.getElementById('email').value;
-    
-    const user = {
-        id: Date.now(),
-        username: username,
-        email: email,
-        accessLevel: 'User',  // Default access level
-        points: 0,             // Default points
-        logins: []             // Array to track login timestamps     
-    };
-    
-    users.push(user);
-    logAction(username, 'User added');
-    renderUserList();
-    this.reset();  // Clear the form
-});
-
-function renderUserList() {
-    const userList = document.getElementById('userList');
-    userList.innerHTML = '';  // Clear the list before rendering
-    
-    users.forEach((user) => {
-        const row = document.createElement('tr');
-        row.innerHTML = `
-            <td>${user.username}</td>
-            <td>${user.email}</td>
-            <td>
-                <select class="access-level" onchange="changeAccessLevel(${user.id}, this.value)">
-                    <option value="Admin" ${user.accessLevel === 'Admin' ? 'selected' : ''}>Admin</option>
-                    <option value="User" ${user.accessLevel === 'User' ? 'selected' : ''}>User</option>
-                    <option value="Guest" ${user.accessLevel === 'Guest' ? 'selected' : ''}>Guest</option>
-                </select>
-            </td>
-            <td>
-                <span>${user.points}</span>
-                <input type="number" min="0" id="points-${user.id}" style="width:60px" placeholder="Adjust" />
-                <button class="adjust-points-button" onclick="adjustPoints(${user.id})">Adjust</button>
-            </td>
-            <td>
-                <button class="action-button" onclick="deleteUser(${user.id})">Delete</button>
-            </td>
-        `;
-        userList.appendChild(row);
-    });
-}
-
-function deleteUser(userId) {
-    const user = users.find(user => user.id === userId);
-    if (user) {
-        logAction(user.username, 'User deleted');
-    }
-    users = users.filter(user => user.id !== userId);
-    renderUserList();
-}
-
-function changeAccessLevel(userId, newLevel) {
-    const user = users.find(user => user.id === userId);
-    if (user) {
-        const oldLevel = user.accessLevel;
-        user.accessLevel = newLevel;
-        logAction(user.username, `Access level changed from ${oldLevel} to ${newLevel}`);
-    }
-}
-
-function adjustPoints(userId) {
-    const inputField = document.getElementById(`points-${userId}`);
-    const pointsToAdd = parseInt(inputField.value) || 0;
-
-    const user = users.find(user => user.id === userId);
-    if (user) {
-        user.points += pointsToAdd;  // Adjust points based on the input value
-        logAction(user.username, `Points adjusted by ${pointsToAdd}`);
-        inputField.value = '';  // Clear the input
-        renderUserList();  // Re-render the user list
-    }
-}
-
-function logAction(username, action) {
-    const timestamp = new Date().toLocaleString();
-    logs.push({username, action, timestamp});
-    renderLogList();
-}
-
-function renderLogList() {
-    const logList = document.getElementById('logList');
-    logList.innerHTML = '';  // Clear the list before rendering
-
-    logs.forEach(log => {
-        const row = document.createElement('tr');
-        row.innerHTML = `
-            <td>${log.username}</td>
-            <td>${log.action}</td>
-            <td>${log.timestamp}</td>
-        `;
-        logList.appendChild(row);
-    });
-}
\ No newline at end of file

From f9a22d418be534e5c5e548701337b0d1abd26d26 Mon Sep 17 00:00:00 2001
From: Arcade69 <rubenarcade69@gmail.com>
Date: Tue, 8 Apr 2025 10:08:52 +0200
Subject: [PATCH 3/6] Partie admin

---
 package-lock.json                 |   6 +
 projet_admin/css/styles.css       | 256 ++++++++++++++++++++++++++++++
 projet_admin/database/logs.json   |   0
 projet_admin/database/points.json |   0
 projet_admin/database/users.json  |   0
 projet_admin/http/User.php        | 132 +++++++++++++++
 projet_admin/http/frontend.php    |  17 ++
 projet_admin/http/index.js        |  10 ++
 projet_admin/http/sidebar.php     |  52 ++++++
 projet_admin/js/script.js         | 106 +++++++++++++
 10 files changed, 579 insertions(+)
 create mode 100644 package-lock.json
 create mode 100644 projet_admin/css/styles.css
 create mode 100644 projet_admin/database/logs.json
 create mode 100644 projet_admin/database/points.json
 create mode 100644 projet_admin/database/users.json
 create mode 100644 projet_admin/http/User.php
 create mode 100644 projet_admin/http/frontend.php
 create mode 100644 projet_admin/http/index.js
 create mode 100644 projet_admin/http/sidebar.php
 create mode 100644 projet_admin/js/script.js

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..cb77e89
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Projet-Dev-Web-Ing1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/projet_admin/css/styles.css b/projet_admin/css/styles.css
new file mode 100644
index 0000000..823c0e6
--- /dev/null
+++ b/projet_admin/css/styles.css
@@ -0,0 +1,256 @@
+/* General Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+}
+
+/* Container */
+.container {
+    display: flex;
+    height: 100vh;
+}
+
+/* Sidebar */
+.sidebar h2 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.sidebar nav ul {
+    list-style: none;
+}
+
+.sidebar nav ul li {
+    margin: 15px 0;
+}
+
+.sidebar nav ul li a {
+    color: #fff;
+    text-decoration: none;
+    padding: 10px;
+    display: block;
+    border-radius: 5px;
+}
+
+.sidebar nav ul li a:hover {
+    background-color: #555;
+}
+
+/* Main Content */
+.main-content {
+    flex-grow: 1;
+    padding: 20px;
+    background-color: #fff;
+    overflow-y: auto;
+}
+
+header {
+    margin-bottom: 20px;
+}
+
+header h1 {
+    margin-bottom: 10px;
+}
+
+/* Cards Section */
+.cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+}
+
+.card {
+    background: #e3e3e3;
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.card h3 {
+    margin-bottom: 10px;
+}
+
+/* Media Query for Responsive Design */
+@media (max-width: 768px) {
+    .sidebar {
+        width: 70px;
+        text-align: center;
+    }
+    
+    .sidebar h2 {
+        font-size: 16px;
+    }
+    
+    .sidebar nav ul li {
+        margin: 10px 0;
+    }
+
+    .sidebar nav ul li a {
+        padding: 5px;
+    }
+    
+    .main-content {
+        padding: 10px;
+    }
+}
+
+/* User Management Section */
+.user-management {
+    margin-top: 20px;
+}
+
+.user-form {
+    display: grid;
+    grid-template-columns: 1fr 1fr auto;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.user-form input {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.user-form button {
+    padding: 10px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.user-form button:hover {
+    background-color: #218838;
+}
+
+.user-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.user-table th, .user-table td {
+    padding: 10px;
+    border: 1px solid #ccc;
+    text-align: left;
+}
+
+.user-table th {
+    background-color: #f4f4f4;
+}
+
+.action-button {
+    background-color: #dc3545;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.action-button:hover {
+    background-color: #c82333;
+}
+
+/* Add this to your existing CSS */
+
+/* User Management Section */
+.user-management {
+    margin-top: 20px;
+}
+
+.user-form {
+    display: grid;
+    grid-template-columns: 1fr 1fr auto;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.user-form input {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.user-form button {
+    padding: 10px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.user-form button:hover {
+    background-color: #218838;
+}
+
+.user-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.user-table th, .user-table td {
+    padding: 10px;
+    border: 1px solid #ccc;
+    text-align: left;
+}
+
+.user-table th {
+    background-color: #f4f4f4;
+}
+
+.access-level {
+    margin-right: 10px;
+}
+
+.assign-button, .revoke-button, .adjust-points-button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.assign-button:hover {
+    background-color: #0069d9;
+}
+
+.revoke-button {
+    background-color: #dc3545;
+}
+
+.revoke-button:hover {
+    background-color: #c82333;
+}
+
+/* Add this to your existing CSS */
+
+/* User Logs Section */
+.user-logs {
+    margin-top: 40px;
+}
+
+.log-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.log-table th, .log-table td {
+    padding: 10px;
+    border: 1px solid #ccc;
+    text-align: left;
+}
+
+.log-table th {
+    background-color: #f4f4f4;
+}
\ No newline at end of file
diff --git a/projet_admin/database/logs.json b/projet_admin/database/logs.json
new file mode 100644
index 0000000..e69de29
diff --git a/projet_admin/database/points.json b/projet_admin/database/points.json
new file mode 100644
index 0000000..e69de29
diff --git a/projet_admin/database/users.json b/projet_admin/database/users.json
new file mode 100644
index 0000000..e69de29
diff --git a/projet_admin/http/User.php b/projet_admin/http/User.php
new file mode 100644
index 0000000..7ffa2c6
--- /dev/null
+++ b/projet_admin/http/User.php
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/styles.css">
+    <title>User</title>
+    <style>
+        /* Add this to your existing CSS */
+
+        /* User Management Section */
+        .user-management {
+            margin-top: 20px;
+        }
+
+        .user-form {
+            display: grid;
+            grid-template-columns: 1fr 1fr auto;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+
+        .user-form input {
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        .user-form button {
+            padding: 10px;
+            background-color: #28a745;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .user-form button:hover {
+            background-color: #218838;
+        }
+
+        .user-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        .user-table th,
+        .user-table td {
+            padding: 10px;
+            border: 1px solid #ccc;
+            text-align: left;
+        }
+
+        .user-table th {
+            background-color: #f4f4f4;
+        }
+
+        .access-level {
+            margin-right: 10px;
+        }
+
+        .assign-button,
+        .revoke-button {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .assign-button:hover {
+            background-color: #0069d9;
+        }
+
+        .revoke-button {
+            background-color: #dc3545;
+        }
+
+        .revoke-button:hover {
+            background-color: #c82333;
+        }
+    </style>
+</head>
+<?php include("sidebar.php"); ?>
+
+<body>
+    <main class="main-content">
+        <header>
+            <h1>User Management</h1>
+            <p>Manage users from this panel.</p>
+        </header>
+        <section class="user-management">
+            <form id="userForm" class="user-form">
+                <input type="text" id="username" placeholder="Username" required>
+                <input type="email" id="email" placeholder="Email" required>
+                <button type="submit">Add User</button>
+            </form>
+            <table class="user-table">
+                <thead>
+                    <tr>
+                        <th>Username</th>
+                        <th>Email</th>
+                        <th>Access Level</th>
+                        <th>Points</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody id="userList">
+                </tbody>
+            </table>
+        </section>
+        <section class="user-logs">
+            <h2>Login History and Action Logs</h2>
+            <table class="log-table">
+                <thead>
+                    <tr>
+                        <th>Username</th>
+                        <th>Action</th>
+                        <th>Timestamp</th>
+                    </tr>
+                </thead>
+                <tbody id="logList">
+                </tbody>
+            </table>
+        </section>
+    </main>
+</body>
+<script src="../js/script.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/projet_admin/http/frontend.php b/projet_admin/http/frontend.php
new file mode 100644
index 0000000..2fc4a58
--- /dev/null
+++ b/projet_admin/http/frontend.php
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Dashboard - User Management</title>
+    <link rel="stylesheet" href="../css/styles.css">
+</head>
+<?php include("sidebar.php"); ?>
+
+<body>
+    <nav id="navigation"></nav>
+    <script src="../js/script.js"></script>
+</body>
+
+</html>
diff --git a/projet_admin/http/index.js b/projet_admin/http/index.js
new file mode 100644
index 0000000..b1f539a
--- /dev/null
+++ b/projet_admin/http/index.js
@@ -0,0 +1,10 @@
+import { createRoot } from 'react-dom/client';
+
+function NavigationBar() {
+  // TODO: Actually implement a navigation bar
+  return <h1>Hello from React!</h1>;
+}
+
+const domNode = document.getElementById('navigation');
+const root = createRoot(domNode);
+root.render(<NavigationBar />);
diff --git a/projet_admin/http/sidebar.php b/projet_admin/http/sidebar.php
new file mode 100644
index 0000000..fb802e1
--- /dev/null
+++ b/projet_admin/http/sidebar.php
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><i class="fas fa-head-side-brain"></i></title>
+    <link rel="stylesheet" href="../css/styles.css">
+    <style>
+        body {
+            display: flex;
+        }
+
+        main {
+            flex-grow: 1; /* Permet au contenu principal de prendre tout l'espace restant */
+            padding: 20px;
+        }
+        html,
+        body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        .sidebar {
+            width: 250px;
+            background-color: #333;
+            color: #fff;
+            padding: 20px;
+            height: 100vh;
+            /* Sidebar prend toute la hauteur visible de l'écran */
+            box-sizing: border-box;
+            /* inclut padding dans la largeur/hauteur */
+        }
+    </style>
+</head>
+
+<body>
+    <aside class="sidebar">
+        <h2>Admin Panel</h2>
+        <nav>
+            <ul>
+                <li><a href="frontend.php">Dashboard</a></li>
+                <li><a href="User.php">Users</a></li>
+                <li><a href="#">Settings</a></li>
+                <li><a href="#">Reports</a></li>
+            </ul>
+        </nav>
+    </aside>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/projet_admin/js/script.js b/projet_admin/js/script.js
new file mode 100644
index 0000000..3d61a5a
--- /dev/null
+++ b/projet_admin/js/script.js
@@ -0,0 +1,106 @@
+// script.js
+
+let users = [];
+let logs = [];
+
+document.getElementById('userForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+    
+    const username = document.getElementById('username').value;
+    const email = document.getElementById('email').value;
+    
+    const user = {
+        id: Date.now(),
+        username: username,
+        email: email,
+        accessLevel: 'User',  // Default access level
+        points: 0,             // Default points
+        logins: []             // Array to track login timestamps     
+    };
+    
+    users.push(user);
+    logAction(username, 'User added');
+    renderUserList();
+    this.reset();  // Clear the form
+});
+
+function renderUserList() {
+    const userList = document.getElementById('userList');
+    userList.innerHTML = '';  // Clear the list before rendering
+    
+    users.forEach((user) => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td>${user.username}</td>
+            <td>${user.email}</td>
+            <td>
+                <select class="access-level" onchange="changeAccessLevel(${user.id}, this.value)">
+                    <option value="Admin" ${user.accessLevel === 'Admin' ? 'selected' : ''}>Admin</option>
+                    <option value="User" ${user.accessLevel === 'User' ? 'selected' : ''}>User</option>
+                    <option value="Guest" ${user.accessLevel === 'Guest' ? 'selected' : ''}>Guest</option>
+                </select>
+            </td>
+            <td>
+                <span>${user.points}</span>
+                <input type="number" min="0" id="points-${user.id}" style="width:60px" placeholder="Adjust" />
+                <button class="adjust-points-button" onclick="adjustPoints(${user.id})">Adjust</button>
+            </td>
+            <td>
+                <button class="action-button" onclick="deleteUser(${user.id})">Delete</button>
+            </td>
+        `;
+        userList.appendChild(row);
+    });
+}
+
+function deleteUser(userId) {
+    const user = users.find(user => user.id === userId);
+    if (user) {
+        logAction(user.username, 'User deleted');
+    }
+    users = users.filter(user => user.id !== userId);
+    renderUserList();
+}
+
+function changeAccessLevel(userId, newLevel) {
+    const user = users.find(user => user.id === userId);
+    if (user) {
+        const oldLevel = user.accessLevel;
+        user.accessLevel = newLevel;
+        logAction(user.username, `Access level changed from ${oldLevel} to ${newLevel}`);
+    }
+}
+
+function adjustPoints(userId) {
+    const inputField = document.getElementById(`points-${userId}`);
+    const pointsToAdd = parseInt(inputField.value) || 0;
+
+    const user = users.find(user => user.id === userId);
+    if (user) {
+        user.points += pointsToAdd;  // Adjust points based on the input value
+        logAction(user.username, `Points adjusted by ${pointsToAdd}`);
+        inputField.value = '';  // Clear the input
+        renderUserList();  // Re-render the user list
+    }
+}
+
+function logAction(username, action) {
+    const timestamp = new Date().toLocaleString();
+    logs.push({username, action, timestamp});
+    renderLogList();
+}
+
+function renderLogList() {
+    const logList = document.getElementById('logList');
+    logList.innerHTML = '';  // Clear the list before rendering
+
+    logs.forEach(log => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td>${log.username}</td>
+            <td>${log.action}</td>
+            <td>${log.timestamp}</td>
+        `;
+        logList.appendChild(row);
+    });
+}
\ No newline at end of file

From 26887af14af97392c187298ba47f23f59d440639 Mon Sep 17 00:00:00 2001
From: Arcade69 <rubenarcade69@gmail.com>
Date: Tue, 8 Apr 2025 10:10:51 +0200
Subject: [PATCH 4/6] pages admin en jsx

---
 Front-end/src/App.jsx                    |  10 +
 Front-end/src/pages/Admin/AdminObjet.jsx | 443 +++++++++++++++++++++++
 Front-end/src/pages/Admin/Dashboard.jsx  | 118 ++++++
 Front-end/src/pages/Admin/User.jsx       | 231 ++++++++++++
 Front-end/src/pages/Admin/sidebar.jsx    |  55 +++
 5 files changed, 857 insertions(+)
 create mode 100644 Front-end/src/pages/Admin/AdminObjet.jsx
 create mode 100644 Front-end/src/pages/Admin/Dashboard.jsx
 create mode 100644 Front-end/src/pages/Admin/User.jsx
 create mode 100644 Front-end/src/pages/Admin/sidebar.jsx

diff --git a/Front-end/src/App.jsx b/Front-end/src/App.jsx
index d76005c..ddc4e46 100644
--- a/Front-end/src/App.jsx
+++ b/Front-end/src/App.jsx
@@ -6,6 +6,11 @@ import Header from "./components/Header.jsx";
 import ObjectManagement from "./pages/Gestion/ObjectManagement.jsx";
 import Objet from "./pages/Gestion/Objet.jsx";
 import AddObject from "./pages/Gestion/AddObject.jsx";
+import Sidebar from './pages/Admin/sidebar.jsx'; 
+import User from './pages/Admin/User.jsx'; 
+import Dashboard from "./pages/Admin/Dashboard.jsx";
+import AdminObjet from "./pages/Admin/AdminObjet.jsx";
+
 function App() {
 
   return (
@@ -19,6 +24,11 @@ function App() {
           <Route path="/gestionObjets" element={<ObjectManagement />} />
           <Route path="/objet" element={<Objet />} />
           <Route path="/ajouterObjet" element={<AddObject />} />
+          <Route path="/sidebar" element={<Sidebar />} />
+          <Route path="/user" element={<User />} />
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="/adminobjet" element={<AdminObjet />} />
+          
         </Routes>
       </div>
     </Router>
diff --git a/Front-end/src/pages/Admin/AdminObjet.jsx b/Front-end/src/pages/Admin/AdminObjet.jsx
new file mode 100644
index 0000000..0ed9ce9
--- /dev/null
+++ b/Front-end/src/pages/Admin/AdminObjet.jsx
@@ -0,0 +1,443 @@
+import React, { useState } from "react";
+import Sidebar from "./sidebar.jsx";
+
+function AdminObjet() {
+  // Gestion des catégories
+  const [categories, setCategories] = useState(["Catégorie 1", "Catégorie 2"]);
+  const [newCategory, setNewCategory] = useState("");
+
+  const handleAddCategory = () => {
+    const trimmed = newCategory.trim();
+    if (trimmed !== "" && !categories.includes(trimmed)) {
+      setCategories([...categories, trimmed]);
+      setNewCategory("");
+    }
+  };
+
+  const handleDeleteCategory = (categoryToDelete) => {
+    setCategories(categories.filter((cat) => cat !== categoryToDelete));
+  };
+
+  // Gestion des objets et outils/services
+  // On ajoute maintenant le champ "propriétaire"
+  const [objects, setObjects] = useState([]);
+
+  // Champs du formulaire d'ajout d'objet (inspiré de AddObject.jsx)
+  const [nom, setNom] = useState("");
+  const [description, setDescription] = useState("");
+  const [type, setType] = useState("");
+  const [localisation, setLocalisation] = useState("");
+  const [proprietaire, setProprietaire] = useState("");
+  const [status, setStatus] = useState("active");
+  const [isActive, setIsActive] = useState(true);
+  const [verif, setVerif] = useState(false);
+  const [enregistre, setEnregistre] = useState(false);
+  const [messRequete, setMessRequete] = useState("");
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (verif) {
+      const newObj = {
+        id: Date.now(),
+        nom: nom.trim(),
+        description: description.trim(),
+        type: type.trim(),
+        localisation: localisation.trim(),
+        proprietaire: proprietaire.trim(),
+        status: status,
+      };
+      setObjects([...objects, newObj]);
+      setMessRequete("Votre objet a bien été enregistré !");
+      setEnregistre(true);
+      setVerif(false);
+      resetForm();
+    } else {
+      setVerif(true);
+    }
+  };
+
+  const resetForm = () => {
+    setNom("");
+    setDescription("");
+    setType("");
+    setLocalisation("");
+    setProprietaire("");
+    setStatus("active");
+    setIsActive(true);
+  };
+
+  const handleCancel = () => {
+    if (verif) {
+      setVerif(false);
+    } else {
+      resetForm();
+    }
+  };
+
+  const handleStatusChange = () => {
+    setIsActive((prev) => {
+      const newIsActive = !prev;
+      setStatus(newIsActive ? "active" : "inactive");
+      return newIsActive;
+    });
+  };
+
+  const handleDeleteObject = (id) => {
+    setObjects(objects.filter((obj) => obj.id !== id));
+  };
+
+  // Tri des objets en fonction d'une catégorie sélectionnée
+  const [sortCriteria, setSortCriteria] = useState("");
+
+  const sortedObjects = [...objects].sort((a, b) => {
+    if (!sortCriteria) return 0;
+    let fieldA = a[sortCriteria] || "";
+    let fieldB = b[sortCriteria] || "";
+    return fieldA.localeCompare(fieldB);
+  });
+
+  // Règles globales
+  const [energyPriority, setPriority] = useState("");
+  const [alertSettings, setAlertSettings] = useState("");
+
+  const handleSaveGlobalRules = () => {
+    console.log("Règles globales enregistrées :", {
+      energyPriority,
+      alertSettings,
+    });
+    alert("Les règles globales ont été enregistrées");
+  };
+
+  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="max-w-7xl mx-auto">
+          <h1 className="text-4xl font-bold text-gray-900 text-center mb-12">
+            Administration des Objets et Outils/Services
+          </h1>
+
+          {/* Gestion des catégories */}
+          <section className="bg-white p-6 rounded-xl shadow-md mb-12">
+            <h2 className="text-2xl font-semibold mb-4">
+              Gestion des Catégories
+            </h2>
+            <div className="flex items-center mb-4">
+              <input
+                type="text"
+                placeholder="Nouvelle catégorie"
+                value={newCategory}
+                onChange={(e) => setNewCategory(e.target.value)}
+                className="flex-1 border border-gray-300 rounded-lg p-2 mr-4"
+              />
+              <button
+                onClick={handleAddCategory}
+                className="bg-indigo-600 text-white px-4 py-2 rounded-lg"
+              >
+                Ajouter
+              </button>
+            </div>
+            <ul>
+              {categories.map((cat, index) => (
+                <li
+                  key={index}
+                  className="flex justify-between items-center border-b border-gray-200 py-2"
+                >
+                  <span>{cat}</span>
+                  <button
+                    onClick={() => handleDeleteCategory(cat)}
+                    className="text-red-600 hover:underline"
+                  >
+                    Supprimer
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </section>
+
+          {/* Formulaire d'ajout d'objet */}
+          <section className="bg-white p-6 rounded-xl shadow-md mb-12">
+            <div className="flex items-center gap-4 mb-5">
+              <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
+                <span className="text-indigo-600 text-xl">+</span>
+              </div>
+              <h2 className="text-2xl font-bold text-gray-900">
+                {!verif
+                  ? "Entrez les données de votre nouvel objet"
+                  : "Êtes-vous sûr de ces données ?"}
+              </h2>
+            </div>
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <div>
+                <label
+                  htmlFor="nom"
+                  className="block mb-2 text-sm font-medium text-gray-900"
+                >
+                  Nom :
+                </label>
+                <input
+                  id="nom"
+                  type="text"
+                  value={nom}
+                  onChange={(e) => setNom(e.target.value)}
+                  required
+                  disabled={verif}
+                  className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="description"
+                  className="block mb-2 text-sm font-medium text-gray-900"
+                >
+                  Description :
+                </label>
+                <input
+                  id="description"
+                  type="text"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  required
+                  disabled={verif}
+                  className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="type"
+                  className="block mb-2 text-sm font-medium text-gray-900"
+                >
+                  Type :
+                </label>
+                <input
+                  id="type"
+                  type="text"
+                  value={type}
+                  onChange={(e) => setType(e.target.value)}
+                  required
+                  disabled={verif}
+                  className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="localisation"
+                  className="block mb-2 text-sm font-medium text-gray-900"
+                >
+                  Localisation :
+                </label>
+                <input
+                  id="localisation"
+                  type="text"
+                  value={localisation}
+                  onChange={(e) => setLocalisation(e.target.value)}
+                  required
+                  disabled={verif}
+                  className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="proprietaire"
+                  className="block mb-2 text-sm font-medium text-gray-900"
+                >
+                  Propriétaire :
+                </label>
+                <input
+                  id="proprietaire"
+                  type="text"
+                  value={proprietaire}
+                  onChange={(e) => setProprietaire(e.target.value)}
+                  required
+                  disabled={verif}
+                  className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
+                />
+              </div>
+              <div>
+                <label className="block mb-2 text-sm font-medium text-gray-900">
+                  Status :
+                </label>
+                <div className="flex items-center gap-2">
+                  <label
+                    htmlFor="switch-component-on"
+                    className="text-slate-600 text-sm cursor-pointer"
+                  >
+                    Inactive
+                  </label>
+                  <div className="relative inline-block w-11 h-5">
+                    <input
+                      id="switch-component-on"
+                      type="checkbox"
+                      checked={isActive}
+                      onChange={handleStatusChange}
+                      disabled={verif}
+                      className="peer appearance-none w-11 h-5 bg-slate-100 rounded-full cursor-pointer transition-colors duration-300"
+                    />
+                    <label
+                      htmlFor="switch-component-on"
+                      className="absolute top-0 left-0 w-5 h-5 bg-white rounded-full border border-slate-300 shadow-sm transition-transform duration-300 peer-checked:translate-x-6 peer-checked:border-slate-800 cursor-pointer"
+                    ></label>
+                  </div>
+                  <label
+                    htmlFor="switch-component-on"
+                    className="text-slate-600 text-sm cursor-pointer"
+                  >
+                    Active
+                  </label>
+                </div>
+              </div>
+              <div className="flex flex-col">
+                <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>
+              </div>
+              <p className={enregistre ? "text-green-700" : "text-red-700"}>
+                {messRequete}
+              </p>
+            </form>
+          </section>
+
+          {/* 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">
+                Liste des Objets et Outils/Services
+              </h2>
+              <select
+                value={sortCriteria}
+                onChange={(e) => setSortCriteria(e.target.value)}
+                className="border border-gray-300 rounded-lg p-2"
+              >
+                <option value="">-- Trier par --</option>
+                <option value="proprietaire">Propriétaire</option>
+                <option value="localisation">Lieux</option>
+                <option value="type">Type</option>
+                <option value="status">Status</option>
+              </select>
+            </div>
+            <div>
+              <table className="min-w-full 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">
+                      Nom
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Description
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Type
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Localisation
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Propriétaire
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Status
+                    </th>
+                    <th className="px-6 py-3"></th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {sortedObjects.map((obj) => (
+                    <tr key={obj.id}>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                        {obj.nom}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {obj.description}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {obj.type}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {obj.localisation}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {obj.proprietaire}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {obj.status}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        <button
+                          onClick={() => handleDeleteObject(obj.id)}
+                          className="text-red-600 hover:underline"
+                        >
+                          Supprimer
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                  {objects.length === 0 && (
+                    <tr>
+                      <td
+                        colSpan="7"
+                        className="px-6 py-4 text-center text-sm text-gray-500"
+                      >
+                        Aucun objet ou service disponible.
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </section>
+
+          {/* 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">
+              <div className="flex flex-col">
+                <label className="mb-2 font-medium text-gray-700">
+                  Priorité
+                </label>
+                <input
+                  type="text"
+                  placeholder="Définir la priorité énergétique"
+                  value={energyPriority}
+                  onChange={(e) => setPriority(e.target.value)}
+                  className="border border-gray-300 rounded-lg p-2"
+                />
+              </div>
+              <div className="flex flex-col">
+                <label className="mb-2 font-medium text-gray-700">
+                  Gestion des alertes
+                </label>
+                <input
+                  type="text"
+                  placeholder="Définir les règles d'alerte"
+                  value={alertSettings}
+                  onChange={(e) => setAlertSettings(e.target.value)}
+                  className="border border-gray-300 rounded-lg p-2"
+                />
+              </div>
+            </div>
+            <button
+              onClick={handleSaveGlobalRules}
+              className="bg-green-600 text-white px-4 py-2 rounded-lg"
+            >
+              Enregistrer les règles globales
+            </button>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AdminObjet;
diff --git a/Front-end/src/pages/Admin/Dashboard.jsx b/Front-end/src/pages/Admin/Dashboard.jsx
new file mode 100644
index 0000000..3e2e51b
--- /dev/null
+++ b/Front-end/src/pages/Admin/Dashboard.jsx
@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import Sidebar from './sidebar.jsx';
+
+const dashboardStyles = {
+  mainContent: {
+    flexGrow: 1,
+    padding: '20px',
+  },
+  summaryContainer: {
+    display: 'flex',
+    gap: '20px',
+    marginBottom: '20px',
+  },
+  summaryCard: {
+    background: '#f4f4f4',
+    padding: '20px',
+    flex: 1,
+    borderRadius: '5px',
+    textAlign: 'center'
+  },
+  table: {
+    width: '100%',
+    borderCollapse: 'collapse',
+  },
+  tableHeader: {
+    padding: '10px',
+    border: '1px solid #ccc',
+    backgroundColor: '#f4f4f4',
+  },
+  tableCell: {
+    padding: '10px',
+    border: '1px solid #ccc',
+    textAlign: 'left',
+  },
+  viewMoreButton: {
+    marginTop: '10px',
+    padding: '10px 15px',
+    backgroundColor: '#007bff',
+    color: '#fff',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer',
+  }
+};
+
+function Dashboard() {
+  // États simulés (dans une vraie application, ils viendraient d'une API ou d'un store global)
+  const [users, setUsers] = useState([
+    { id: 1, username: 'Alice', email: 'alice@example.com', accessLevel: 'Admin' },
+    { id: 2, username: 'Bob', email: 'bob@example.com', accessLevel: 'User' },
+    { id: 3, username: 'Charlie', email: 'charlie@example.com', accessLevel: 'Guest' },
+    { id: 4, username: 'David', email: 'david@example.com', accessLevel: 'User' },
+    { id: 5, username: 'Eva', email: 'eva@example.com', accessLevel: 'User' },
+    { id: 6, username: 'Frank', email: 'frank@example.com', accessLevel: 'Admin' },
+  ]);
+  const [logs, setLogs] = useState([
+    { id: 1, username: 'Alice', action: 'User added', timestamp: new Date().toLocaleString() },
+    { id: 2, username: 'Bob', action: 'Access assigned', timestamp: new Date().toLocaleString() },
+  ]);
+
+  return (
+    <div style={{ display: 'flex', minHeight: '100vh' }}>
+      <Sidebar />
+      <main style={dashboardStyles.mainContent}>
+        <h1>Dashboard</h1>
+        <div style={dashboardStyles.summaryContainer}>
+          <div style={dashboardStyles.summaryCard}>
+            <h2>Total Users</h2>
+            <p>{users.length}</p>
+          </div>
+          <div style={dashboardStyles.summaryCard}>
+            <h2>Dernier Log</h2>
+            {logs.length > 0 ? (
+              <p>
+                {logs[logs.length - 1].username} - {logs[logs.length - 1].action}
+              </p>
+            ) : (
+              <p>Aucun log</p>
+            )}
+          </div>
+        </div>
+
+        <section>
+          <h2>Aperçu des Utilisateurs</h2>
+          <table style={dashboardStyles.table}>
+            <thead>
+              <tr>
+                <th style={dashboardStyles.tableHeader}>Username</th>
+                <th style={dashboardStyles.tableHeader}>Email</th>
+                <th style={dashboardStyles.tableHeader}>Access Level</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.slice(0, 5).map(user => (
+                <tr key={user.id}>
+                  <td style={dashboardStyles.tableCell}>{user.username}</td>
+                  <td style={dashboardStyles.tableCell}>{user.email}</td>
+                  <td style={dashboardStyles.tableCell}>{user.accessLevel}</td>
+                </tr>
+              ))}
+              {users.length === 0 && (
+                <tr>
+                  <td colSpan="3" style={dashboardStyles.tableCell}>Aucun utilisateur disponible</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+          {/* Bouton pour accéder à la page complète */}
+          <button style={dashboardStyles.viewMoreButton} onClick={() => window.location.href = '/user'}>
+            Voir plus
+          </button>
+        </section>
+      </main>
+    </div>
+  );
+}
+
+export default Dashboard;
diff --git a/Front-end/src/pages/Admin/User.jsx b/Front-end/src/pages/Admin/User.jsx
new file mode 100644
index 0000000..2a9619b
--- /dev/null
+++ b/Front-end/src/pages/Admin/User.jsx
@@ -0,0 +1,231 @@
+import React, { useState } from 'react';
+import Sidebar from './sidebar.jsx';
+  
+const styles = {
+  mainContent: {
+    flexGrow: 1,
+    padding: '20px',
+  },
+  header: {
+    marginBottom: '20px',
+  },
+  userManagement: {
+    marginTop: '20px',
+  },
+  userForm: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr auto',
+    gap: '10px',
+    marginBottom: '20px',
+  },
+  input: {
+    padding: '10px',
+    border: '1px solid #ccc',
+    borderRadius: '5px',
+  },
+  button: {
+    padding: '10px',
+    backgroundColor: '#28a745',
+    color: 'white',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer',
+  },
+  userTable: {
+    width: '100%',
+    borderCollapse: 'collapse',
+  },
+  thTd: {
+    padding: '10px',
+    border: '1px solid #ccc',
+    textAlign: 'left',
+  },
+  th: {
+    backgroundColor: '#f4f4f4',
+  }
+};
+
+function User() {
+  // États pour la gestion des utilisateurs, des logs, des champs du formulaire et des ajustements de points
+  const [users, setUsers] = useState([]);
+  const [logs, setLogs] = useState([]);
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [pointsInput, setPointsInput] = useState({});
+
+  // Ajout d'un utilisateur
+  const handleAddUser = (e) => {
+    e.preventDefault();
+    const newUser = {
+      id: Date.now(),
+      username,
+      email,
+      accessLevel: 'User', // Niveau d'accès par défaut
+      points: 0,
+    };
+    setUsers([...users, newUser]);
+    logAction(username, 'User added');
+    setUsername('');
+    setEmail('');
+  };
+
+  // Suppression d'un utilisateur (fonction présente dans script.js)
+  const handleDeleteUser = (userId) => {
+    const user = users.find(u => u.id === userId);
+    if (user) {
+      logAction(user.username, 'User deleted');
+    }
+    setUsers(users.filter(u => u.id !== userId));
+  };
+
+  // Changement du niveau d'accès via le menu déroulant (fonction issue de script.js)
+  const handleChangeAccessLevel = (userId, newLevel) => {
+    setUsers(users.map(user => {
+      if (user.id === userId) {
+        const oldLevel = user.accessLevel;
+        user.accessLevel = newLevel;
+        logAction(user.username, `Access level changed from ${oldLevel} to ${newLevel}`);
+      }
+      return user;
+    }));
+  };
+
+  // Ajustement des points d'un utilisateur (fonction issue de script.js)
+  const handleAdjustPoints = (userId) => {
+    const pointsToAdd = parseInt(pointsInput[userId]) || 0;
+    setUsers(users.map(user => {
+      if (user.id === userId) {
+        user.points += pointsToAdd;
+        logAction(user.username, `Points adjusted by ${pointsToAdd}`);
+      }
+      return user;
+    }));
+    // Réinitialiser la valeur de l'input pour cet utilisateur
+    setPointsInput({ ...pointsInput, [userId]: '' });
+  };
+
+  // Fonction de journalisation des actions (définie dans script.js)
+  const logAction = (username, action) => {
+    const timestamp = new Date().toLocaleString();
+    setLogs([...logs, { id: Date.now(), username, action, timestamp }]);
+  };
+
+  return (
+    <div style={{ display: 'flex', minHeight: '100vh' }}>
+      <Sidebar />
+      <main style={styles.mainContent}>
+        <section style={styles.userManagement}>
+        <h1>User Management</h1>
+        <p>Manage users from this panel.</p>
+          {/* Formulaire d'ajout d'utilisateur */}
+          <form style={styles.userForm} onSubmit={handleAddUser}>
+            <input
+              style={styles.input}
+              type="text"
+              id="username"
+              placeholder="Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+            />
+            <input
+              style={styles.input}
+              type="email"
+              id="email"
+              placeholder="Email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+            <button style={styles.button} type="submit">Add User</button>
+          </form>
+          {/* Tableau des utilisateurs */}
+          <table style={styles.userTable}>
+            <thead>
+              <tr>
+                <th style={{ ...styles.thTd, ...styles.th }}>Username</th>
+                <th style={{ ...styles.thTd, ...styles.th }}>Email</th>
+                <th style={{ ...styles.thTd, ...styles.th }}>Access Level</th>
+                <th style={{ ...styles.thTd, ...styles.th }}>Points</th>
+                <th style={{ ...styles.thTd, ...styles.th }}>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map(user => (
+                <tr key={user.id}>
+                  <td style={styles.thTd}>{user.username}</td>
+                  <td style={styles.thTd}>{user.email}</td>
+                  <td style={styles.thTd}>
+                    {/* Menu déroulant pour changer le niveau d'accès */}
+                    <select
+                      value={user.accessLevel}
+                      onChange={(e) => handleChangeAccessLevel(user.id, e.target.value)}
+                      style={{ padding: '5px', borderRadius: '5px' }}
+                    >
+                      <option value="Admin">Admin</option>
+                      <option value="User">User</option>
+                      <option value="Guest">Guest</option>
+                    </select>
+                  </td>
+                  <td style={styles.thTd}>
+                    <span>{user.points}</span>
+                    {/* Input et bouton pour ajuster les points */}
+                    <input
+                      type="number"
+                      min="0"
+                      style={{ width: '60px', marginLeft: '10px' }}
+                      placeholder="Adjust"
+                      value={pointsInput[user.id] || ''}
+                      onChange={(e) =>
+                        setPointsInput({ ...pointsInput, [user.id]: e.target.value })
+                      }
+                    />
+                    <button
+                      style={{ ...styles.button, padding: '5px 10px', marginLeft: '5px' }}
+                      onClick={() => handleAdjustPoints(user.id)}
+                    >
+                      Adjust
+                    </button>
+                  </td>
+                  <td style={styles.thTd}>
+                    {/* Bouton de suppression */}
+                    <button
+                      style={{ ...styles.button, backgroundColor: '#dc3545', padding: '5px 10px' }}
+                      onClick={() => handleDeleteUser(user.id)}
+                    >
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </section>
+        {/* Tableau des logs */}
+        <section className="user-logs" style={{ marginTop: '40px' }}>
+          <h2>Login History and Action Logs</h2>
+          <table style={styles.userTable}>
+            <thead>
+              <tr>
+                <th style={{ ...styles.thTd, ...styles.th }}>Username</th>
+                <th style={{ ...styles.thTd, ...styles.th }}>Action</th>
+                <th style={{ ...styles.thTd, ...styles.th }}>Timestamp</th>
+              </tr>
+            </thead>
+            <tbody>
+              {logs.map(log => (
+                <tr key={log.id}>
+                  <td style={styles.thTd}>{log.username}</td>
+                  <td style={styles.thTd}>{log.action}</td>
+                  <td style={styles.thTd}>{log.timestamp}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </section>
+      </main>
+    </div>
+  );
+}
+
+export default User;
diff --git a/Front-end/src/pages/Admin/sidebar.jsx b/Front-end/src/pages/Admin/sidebar.jsx
new file mode 100644
index 0000000..dd5b1bf
--- /dev/null
+++ b/Front-end/src/pages/Admin/sidebar.jsx
@@ -0,0 +1,55 @@
+import React from "react";
+
+function Sidebar() {
+  return (
+    <aside className="w-[250px] bg-gray-800 text-white p-5 h-screen box-border">
+      <h2 className="text-xl font-bold mb-4">Admin Panel</h2>
+      <nav>
+        <ul className="list-none p-0">
+          <li className="mb-3">
+            <a
+              className="text-white no-underline hover:underline"
+              href="/dashboard"
+            >
+              Dashboard
+            </a>
+          </li>
+          <li className="mb-3">
+            <a className="text-white no-underline hover:underline" href="/user">
+              Users
+            </a>
+          </li>
+          <li className="mb-3">
+            <a
+              className="text-white no-underline hover:underline"
+              href="/adminobjet"
+            >
+              AdminObjet
+            </a>
+          </li>
+          <li className="mb-3">
+            <a className="text-white no-underline hover:underline" href="#">
+              Settings
+            </a>
+          </li>
+          <li className="mb-3">
+            <a className="text-white no-underline hover:underline" href="#">
+              Reports
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </aside>
+  );
+}
+
+function App() {
+  return (
+    <div className="flex h-screen m-0 p-0">
+      <Sidebar />
+      <main className="flex-1 ">{/* Ajoutez ici le contenu principal */}</main>
+    </div>
+  );
+}
+
+export default App;

From 453a7f571f477c2f3bc6c75f8c30080979f82f74 Mon Sep 17 00:00:00 2001
From: Arcade69 <65565653+Arcade69@users.noreply.github.com>
Date: Tue, 8 Apr 2025 10:15:52 +0200
Subject: [PATCH 5/6] page admin avec user et adminobjet

---
 Front-end/src/pages/Admin/AdminObjet.jsx | 443 +++++++++++++++++++++++
 Front-end/src/pages/Admin/Dashboard.jsx  | 118 ++++++
 Front-end/src/pages/Admin/User.jsx       | 231 ++++++++++++
 Front-end/src/pages/Admin/sidebar.jsx    |  55 +++
 4 files changed, 847 insertions(+)
 create mode 100644 Front-end/src/pages/Admin/AdminObjet.jsx
 create mode 100644 Front-end/src/pages/Admin/Dashboard.jsx
 create mode 100644 Front-end/src/pages/Admin/User.jsx
 create mode 100644 Front-end/src/pages/Admin/sidebar.jsx

diff --git a/Front-end/src/pages/Admin/AdminObjet.jsx b/Front-end/src/pages/Admin/AdminObjet.jsx
new file mode 100644
index 0000000..679f62c
--- /dev/null
+++ b/Front-end/src/pages/Admin/AdminObjet.jsx
@@ -0,0 +1,443 @@
+import React, { useState } from "react";
+import Sidebar from "./sidebar.jsx";
+
+function AdminObjet() {
+  // Gestion des catégories
+  const [categories, setCategories] = useState(["Catégorie 1", "Catégorie 2"]);
+  const [newCategory, setNewCategory] = useState("");
+
+  const handleAddCategory = () => {
+    const trimmed = newCategory.trim();
+    if (trimmed !== "" && !categories.includes(trimmed)) {
+      setCategories([...categories, trimmed]);
+      setNewCategory("");
+    }
+  };
+
+  const handleDeleteCategory = (categoryToDelete) => {
+    setCategories(categories.filter((cat) => cat !== categoryToDelete));
+  };
+
+  // Gestion des objets et outils/services
+  // On ajoute maintenant le champ "propriétaire"
+  const [objects, setObjects] = useState([]);
+
+  // Champs du formulaire d'ajout d'objet (inspiré de AddObject.jsx)
+  const [nom, setNom] = useState("");
+  const [description, setDescription] = useState("");
+  const [type, setType] = useState("");
+  const [localisation, setLocalisation] = useState("");
+  const [proprietaire, setProprietaire] = useState("");
+  const [status, setStatus] = useState("active");
+  const [isActive, setIsActive] = useState(true);
+  const [verif, setVerif] = useState(false);
+  const [enregistre, setEnregistre] = useState(false);
+  const [messRequete, setMessRequete] = useState("");
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (verif) {
+      const newObj = {
+        id: Date.now(),
+        nom: nom.trim(),
+        description: description.trim(),
+        type: type.trim(),
+        localisation: localisation.trim(),
+        proprietaire: proprietaire.trim(),
+        status: status,
+      };
+      setObjects([...objects, newObj]);
+      setMessRequete("Votre objet a bien été enregistré !");
+      setEnregistre(true);
+      setVerif(false);
+      resetForm();
+    } else {
+      setVerif(true);
+    }
+  };
+
+  const resetForm = () => {
+    setNom("");
+    setDescription("");
+    setType("");
+    setLocalisation("");
+    setProprietaire("");
+    setStatus("active");
+    setIsActive(true);
+  };
+
+  const handleCancel = () => {
+    if (verif) {
+      setVerif(false);
+    } else {
+      resetForm();
+    }
+  };
+
+  const handleStatusChange = () => {
+    setIsActive((prev) => {
+      const newIsActive = !prev;
+      setStatus(newIsActive ? "active" : "inactive");
+      return newIsActive;
+    });
+  };
+
+  const handleDeleteObject = (id) => {
+    setObjects(objects.filter((obj) => obj.id !== id));
+  };
+
+  // Tri des objets en fonction d'une catégorie sélectionnée
+  const [sortCriteria, setSortCriteria] = useState("");
+
+  const sortedObjects = [...objects].sort((a, b) => {
+    if (!sortCriteria) return 0;
+    let fieldA = a[sortCriteria] || "";
+    let fieldB = b[sortCriteria] || "";
+    return fieldA.localeCompare(fieldB);
+  });
+
+  // Règles globales
+  const [energyPriority, setPriority] = useState("");
+  const [alertSettings, setAlertSettings] = useState("");
+
+  const handleSaveGlobalRules = () => {
+    console.log("Règles globales enregistrées :", {
+      energyPriority,
+      alertSettings,
+    });
+    alert("Les règles globales ont été enregistrées");
+  };
+
+  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="max-w-7xl mx-auto">
+          <h1 className="text-4xl font-bold text-gray-900 text-center mb-12">
+            Administration des Objets et Outils/Services
+          </h1>
+
+          {/* Gestion des catégories */}
+          <section className="bg-white p-6 rounded-xl shadow-md mb-12">
+            <h2 className="text-2xl font-semibold mb-4">
+              Gestion des Catégories
+            </h2>
+            <div className="flex items-center mb-4">
+              <input
+                type="text"
+                placeholder="Nouvelle catégorie"
+                value={newCategory}
+                onChange={(e) => setNewCategory(e.target.value)}
+                className="flex-1 border border-gray-300 rounded-lg p-2 mr-4"
+              />
+              <button
+                onClick={handleAddCategory}
+                className="bg-indigo-600 text-white px-4 py-2 rounded-lg"
+              >
+                Ajouter
+              </button>
+            </div>
+            <ul>
+              {categories.map((cat, index) => (
+                <li
+                  key={index}
+                  className="flex justify-between items-center border-b border-gray-200 py-2"
+                >
+                  <span>{cat}</span>
+                  <button
+                    onClick={() => handleDeleteCategory(cat)}
+                    className="text-red-600 hover:underline"
+                  >
+                    Supprimer
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </section>
+
+          {/* Formulaire d'ajout d'objet */}
+          <section className="bg-white p-6 rounded-xl shadow-md mb-12">
+            <div className="flex items-center gap-4 mb-5">
+              <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
+                <span className="text-indigo-600 text-xl">+</span>
+              </div>
+              <h2 className="text-2xl font-bold text-gray-900">
+                {!verif
+                  ? "Entrez les données de votre nouvel objet"
+                  : "Êtes-vous sûr de ces données ?"}
+              </h2>
+            </div>
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <div>
+                <label
+                  htmlFor="nom"
+                  className="block mb-2 text-sm font-medium text-gray-900"
+                >
+                  Nom :
+                </label>
+                <input
+                  id="nom"
+                  type="text"
+                  value={nom}
+                  onChange={(e) => setNom(e.target.value)}
+                  required
+                  disabled={verif}
+                  className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="description"
+                  className="block mb-2 text-sm font-medium text-gray-900"
+                >
+                  Description :
+                </label>
+                <input
+                  id="description"
+                  type="text"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  required
+                  disabled={verif}
+                  className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="type"
+                  className="block mb-2 text-sm font-medium text-gray-900"
+                >
+                  Type :
+                </label>
+                <input
+                  id="type"
+                  type="text"
+                  value={type}
+                  onChange={(e) => setType(e.target.value)}
+                  required
+                  disabled={verif}
+                  className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="localisation"
+                  className="block mb-2 text-sm font-medium text-gray-900"
+                >
+                  Localisation :
+                </label>
+                <input
+                  id="localisation"
+                  type="text"
+                  value={localisation}
+                  onChange={(e) => setLocalisation(e.target.value)}
+                  required
+                  disabled={verif}
+                  className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="proprietaire"
+                  className="block mb-2 text-sm font-medium text-gray-900"
+                >
+                  Propriétaire :
+                </label>
+                <input
+                  id="proprietaire"
+                  type="text"
+                  value={proprietaire}
+                  onChange={(e) => setProprietaire(e.target.value)}
+                  required
+                  disabled={verif}
+                  className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
+                />
+              </div>
+              <div>
+                <label className="block mb-2 text-sm font-medium text-gray-900">
+                  Status :
+                </label>
+                <div className="flex items-center gap-2">
+                  <label
+                    htmlFor="switch-component-on"
+                    className="text-slate-600 text-sm cursor-pointer"
+                  >
+                    Inactive
+                  </label>
+                  <div className="relative inline-block w-11 h-5">
+                    <input
+                      id="switch-component-on"
+                      type="checkbox"
+                      checked={isActive}
+                      onChange={handleStatusChange}
+                      disabled={verif}
+                      className="peer appearance-none w-11 h-5 bg-slate-100 rounded-full cursor-pointer transition-colors duration-300"
+                    />
+                    <label
+                      htmlFor="switch-component-on"
+                      className="absolute top-0 left-0 w-5 h-5 bg-white rounded-full border border-slate-300 shadow-sm transition-transform duration-300 peer-checked:translate-x-6 peer-checked:border-slate-800 cursor-pointer"
+                    ></label>
+                  </div>
+                  <label
+                    htmlFor="switch-component-on"
+                    className="text-slate-600 text-sm cursor-pointer"
+                  >
+                    Active
+                  </label>
+                </div>
+              </div>
+              <div className="flex flex-col">
+                <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>
+              </div>
+              <p className={enregistre ? "text-green-700" : "text-red-700"}>
+                {messRequete}
+              </p>
+            </form>
+          </section>
+
+          {/* 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">
+                Liste des Objets et Outils/Services
+              </h2>
+              <select
+                value={sortCriteria}
+                onChange={(e) => setSortCriteria(e.target.value)}
+                className="border border-gray-300 rounded-lg p-2"
+              >
+                <option value="">-- Trier par --</option>
+                <option value="proprietaire">Propriétaire</option>
+                <option value="localisation">Lieux</option>
+                <option value="type">Type</option>
+                <option value="status">Status</option>
+              </select>
+            </div>
+            <div>
+              <table className="min-w-full 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">
+                      Nom
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Description
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Type
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Localisation
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Propriétaire
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Status
+                    </th>
+                    <th className="px-6 py-3"></th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {sortedObjects.map((obj) => (
+                    <tr key={obj.id}>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                        {obj.nom}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {obj.description}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {obj.type}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {obj.localisation}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {obj.proprietaire}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {obj.status}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        <button
+                          onClick={() => handleDeleteObject(obj.id)}
+                          className="text-red-600 hover:underline"
+                        >
+                          Supprimer
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                  {objects.length === 0 && (
+                    <tr>
+                      <td
+                        colSpan="7"
+                        className="px-6 py-4 text-center text-sm text-gray-500"
+                      >
+                        Aucun objet ou service disponible.
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </section>
+
+          {/* 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">
+              <div className="flex flex-col">
+                <label className="mb-2 font-medium text-gray-700">
+                  Priorité
+                </label>
+                <input
+                  type="text"
+                  placeholder="Définir la priorité énergétique"
+                  value={energyPriority}
+                  onChange={(e) => setPriority(e.target.value)}
+                  className="border border-gray-300 rounded-lg p-2"
+                />
+              </div>
+              <div className="flex flex-col">
+                <label className="mb-2 font-medium text-gray-700">
+                  Gestion des alertes
+                </label>
+                <input
+                  type="text"
+                  placeholder="Définir les règles d'alerte"
+                  value={alertSettings}
+                  onChange={(e) => setAlertSettings(e.target.value)}
+                  className="border border-gray-300 rounded-lg p-2"
+                />
+              </div>
+            </div>
+            <button
+              onClick={handleSaveGlobalRules}
+              className="bg-green-600 text-white px-4 py-2 rounded-lg"
+            >
+              Enregistrer les règles globales
+            </button>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AdminObjet;
diff --git a/Front-end/src/pages/Admin/Dashboard.jsx b/Front-end/src/pages/Admin/Dashboard.jsx
new file mode 100644
index 0000000..7f00602
--- /dev/null
+++ b/Front-end/src/pages/Admin/Dashboard.jsx
@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import Sidebar from './sidebar.jsx';
+
+const dashboardStyles = {
+  mainContent: {
+    flexGrow: 1,
+    padding: '20px',
+  },
+  summaryContainer: {
+    display: 'flex',
+    gap: '20px',
+    marginBottom: '20px',
+  },
+  summaryCard: {
+    background: '#f4f4f4',
+    padding: '20px',
+    flex: 1,
+    borderRadius: '5px',
+    textAlign: 'center'
+  },
+  table: {
+    width: '100%',
+    borderCollapse: 'collapse',
+  },
+  tableHeader: {
+    padding: '10px',
+    border: '1px solid #ccc',
+    backgroundColor: '#f4f4f4',
+  },
+  tableCell: {
+    padding: '10px',
+    border: '1px solid #ccc',
+    textAlign: 'left',
+  },
+  viewMoreButton: {
+    marginTop: '10px',
+    padding: '10px 15px',
+    backgroundColor: '#007bff',
+    color: '#fff',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer',
+  }
+};
+
+function Dashboard() {
+  // États simulés (dans une vraie application, ils viendraient d'une API ou d'un store global)
+  const [users, setUsers] = useState([
+    { id: 1, username: 'Alice', email: 'alice@example.com', accessLevel: 'Admin' },
+    { id: 2, username: 'Bob', email: 'bob@example.com', accessLevel: 'User' },
+    { id: 3, username: 'Charlie', email: 'charlie@example.com', accessLevel: 'Guest' },
+    { id: 4, username: 'David', email: 'david@example.com', accessLevel: 'User' },
+    { id: 5, username: 'Eva', email: 'eva@example.com', accessLevel: 'User' },
+    { id: 6, username: 'Frank', email: 'frank@example.com', accessLevel: 'Admin' },
+  ]);
+  const [logs, setLogs] = useState([
+    { id: 1, username: 'Alice', action: 'User added', timestamp: new Date().toLocaleString() },
+    { id: 2, username: 'Bob', action: 'Access assigned', timestamp: new Date().toLocaleString() },
+  ]);
+
+  return (
+    <div style={{ display: 'flex', minHeight: '100vh' }}>
+      <Sidebar />
+      <main style={dashboardStyles.mainContent}>
+        <h1>Dashboard</h1>
+        <div style={dashboardStyles.summaryContainer}>
+          <div style={dashboardStyles.summaryCard}>
+            <h2>Total Users</h2>
+            <p>{users.length}</p>
+          </div>
+          <div style={dashboardStyles.summaryCard}>
+            <h2>Dernier Log</h2>
+            {logs.length > 0 ? (
+              <p>
+                {logs[logs.length - 1].username} - {logs[logs.length - 1].action}
+              </p>
+            ) : (
+              <p>Aucun log</p>
+            )}
+          </div>
+        </div>
+
+        <section>
+          <h2>Aperçu des Utilisateurs</h2>
+          <table style={dashboardStyles.table}>
+            <thead>
+              <tr>
+                <th style={dashboardStyles.tableHeader}>Username</th>
+                <th style={dashboardStyles.tableHeader}>Email</th>
+                <th style={dashboardStyles.tableHeader}>Access Level</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.slice(0, 5).map(user => (
+                <tr key={user.id}>
+                  <td style={dashboardStyles.tableCell}>{user.username}</td>
+                  <td style={dashboardStyles.tableCell}>{user.email}</td>
+                  <td style={dashboardStyles.tableCell}>{user.accessLevel}</td>
+                </tr>
+              ))}
+              {users.length === 0 && (
+                <tr>
+                  <td colSpan="3" style={dashboardStyles.tableCell}>Aucun utilisateur disponible</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+          {/* Bouton pour accéder à la page complète */}
+          <button style={dashboardStyles.viewMoreButton} onClick={() => window.location.href = '/user'}>
+            Voir plus
+          </button>
+        </section>
+      </main>
+    </div>
+  );
+}
+
+export default Dashboard;
diff --git a/Front-end/src/pages/Admin/User.jsx b/Front-end/src/pages/Admin/User.jsx
new file mode 100644
index 0000000..d96fc90
--- /dev/null
+++ b/Front-end/src/pages/Admin/User.jsx
@@ -0,0 +1,231 @@
+import React, { useState } from 'react';
+import Sidebar from './sidebar.jsx';
+  
+const styles = {
+  mainContent: {
+    flexGrow: 1,
+    padding: '20px',
+  },
+  header: {
+    marginBottom: '20px',
+  },
+  userManagement: {
+    marginTop: '20px',
+  },
+  userForm: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr auto',
+    gap: '10px',
+    marginBottom: '20px',
+  },
+  input: {
+    padding: '10px',
+    border: '1px solid #ccc',
+    borderRadius: '5px',
+  },
+  button: {
+    padding: '10px',
+    backgroundColor: '#28a745',
+    color: 'white',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer',
+  },
+  userTable: {
+    width: '100%',
+    borderCollapse: 'collapse',
+  },
+  thTd: {
+    padding: '10px',
+    border: '1px solid #ccc',
+    textAlign: 'left',
+  },
+  th: {
+    backgroundColor: '#f4f4f4',
+  }
+};
+
+function User() {
+  // États pour la gestion des utilisateurs, des logs, des champs du formulaire et des ajustements de points
+  const [users, setUsers] = useState([]);
+  const [logs, setLogs] = useState([]);
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [pointsInput, setPointsInput] = useState({});
+
+  // Ajout d'un utilisateur
+  const handleAddUser = (e) => {
+    e.preventDefault();
+    const newUser = {
+      id: Date.now(),
+      username,
+      email,
+      accessLevel: 'User', // Niveau d'accès par défaut
+      points: 0,
+    };
+    setUsers([...users, newUser]);
+    logAction(username, 'User added');
+    setUsername('');
+    setEmail('');
+  };
+
+  // Suppression d'un utilisateur (fonction présente dans script.js)
+  const handleDeleteUser = (userId) => {
+    const user = users.find(u => u.id === userId);
+    if (user) {
+      logAction(user.username, 'User deleted');
+    }
+    setUsers(users.filter(u => u.id !== userId));
+  };
+
+  // Changement du niveau d'accès via le menu déroulant (fonction issue de script.js)
+  const handleChangeAccessLevel = (userId, newLevel) => {
+    setUsers(users.map(user => {
+      if (user.id === userId) {
+        const oldLevel = user.accessLevel;
+        user.accessLevel = newLevel;
+        logAction(user.username, `Access level changed from ${oldLevel} to ${newLevel}`);
+      }
+      return user;
+    }));
+  };
+
+  // Ajustement des points d'un utilisateur (fonction issue de script.js)
+  const handleAdjustPoints = (userId) => {
+    const pointsToAdd = parseInt(pointsInput[userId]) || 0;
+    setUsers(users.map(user => {
+      if (user.id === userId) {
+        user.points += pointsToAdd;
+        logAction(user.username, `Points adjusted by ${pointsToAdd}`);
+      }
+      return user;
+    }));
+    // Réinitialiser la valeur de l'input pour cet utilisateur
+    setPointsInput({ ...pointsInput, [userId]: '' });
+  };
+
+  // Fonction de journalisation des actions (définie dans script.js)
+  const logAction = (username, action) => {
+    const timestamp = new Date().toLocaleString();
+    setLogs([...logs, { id: Date.now(), username, action, timestamp }]);
+  };
+
+  return (
+    <div style={{ display: 'flex', minHeight: '100vh' }}>
+      <Sidebar />
+      <main style={styles.mainContent}>
+        <section style={styles.userManagement}>
+        <h1>User Management</h1>
+        <p>Manage users from this panel.</p>
+          {/* Formulaire d'ajout d'utilisateur */}
+          <form style={styles.userForm} onSubmit={handleAddUser}>
+            <input
+              style={styles.input}
+              type="text"
+              id="username"
+              placeholder="Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+            />
+            <input
+              style={styles.input}
+              type="email"
+              id="email"
+              placeholder="Email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+            <button style={styles.button} type="submit">Add User</button>
+          </form>
+          {/* Tableau des utilisateurs */}
+          <table style={styles.userTable}>
+            <thead>
+              <tr>
+                <th style={{ ...styles.thTd, ...styles.th }}>Username</th>
+                <th style={{ ...styles.thTd, ...styles.th }}>Email</th>
+                <th style={{ ...styles.thTd, ...styles.th }}>Access Level</th>
+                <th style={{ ...styles.thTd, ...styles.th }}>Points</th>
+                <th style={{ ...styles.thTd, ...styles.th }}>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map(user => (
+                <tr key={user.id}>
+                  <td style={styles.thTd}>{user.username}</td>
+                  <td style={styles.thTd}>{user.email}</td>
+                  <td style={styles.thTd}>
+                    {/* Menu déroulant pour changer le niveau d'accès */}
+                    <select
+                      value={user.accessLevel}
+                      onChange={(e) => handleChangeAccessLevel(user.id, e.target.value)}
+                      style={{ padding: '5px', borderRadius: '5px' }}
+                    >
+                      <option value="Admin">Admin</option>
+                      <option value="User">User</option>
+                      <option value="Guest">Guest</option>
+                    </select>
+                  </td>
+                  <td style={styles.thTd}>
+                    <span>{user.points}</span>
+                    {/* Input et bouton pour ajuster les points */}
+                    <input
+                      type="number"
+                      min="0"
+                      style={{ width: '60px', marginLeft: '10px' }}
+                      placeholder="Adjust"
+                      value={pointsInput[user.id] || ''}
+                      onChange={(e) =>
+                        setPointsInput({ ...pointsInput, [user.id]: e.target.value })
+                      }
+                    />
+                    <button
+                      style={{ ...styles.button, padding: '5px 10px', marginLeft: '5px' }}
+                      onClick={() => handleAdjustPoints(user.id)}
+                    >
+                      Adjust
+                    </button>
+                  </td>
+                  <td style={styles.thTd}>
+                    {/* Bouton de suppression */}
+                    <button
+                      style={{ ...styles.button, backgroundColor: '#dc3545', padding: '5px 10px' }}
+                      onClick={() => handleDeleteUser(user.id)}
+                    >
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </section>
+        {/* Tableau des logs */}
+        <section className="user-logs" style={{ marginTop: '40px' }}>
+          <h2>Login History and Action Logs</h2>
+          <table style={styles.userTable}>
+            <thead>
+              <tr>
+                <th style={{ ...styles.thTd, ...styles.th }}>Username</th>
+                <th style={{ ...styles.thTd, ...styles.th }}>Action</th>
+                <th style={{ ...styles.thTd, ...styles.th }}>Timestamp</th>
+              </tr>
+            </thead>
+            <tbody>
+              {logs.map(log => (
+                <tr key={log.id}>
+                  <td style={styles.thTd}>{log.username}</td>
+                  <td style={styles.thTd}>{log.action}</td>
+                  <td style={styles.thTd}>{log.timestamp}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </section>
+      </main>
+    </div>
+  );
+}
+
+export default User;
diff --git a/Front-end/src/pages/Admin/sidebar.jsx b/Front-end/src/pages/Admin/sidebar.jsx
new file mode 100644
index 0000000..db33ef2
--- /dev/null
+++ b/Front-end/src/pages/Admin/sidebar.jsx
@@ -0,0 +1,55 @@
+import React from "react";
+
+function Sidebar() {
+  return (
+    <aside className="w-[250px] bg-gray-800 text-white p-5 h-screen box-border">
+      <h2 className="text-xl font-bold mb-4">Admin Panel</h2>
+      <nav>
+        <ul className="list-none p-0">
+          <li className="mb-3">
+            <a
+              className="text-white no-underline hover:underline"
+              href="/dashboard"
+            >
+              Dashboard
+            </a>
+          </li>
+          <li className="mb-3">
+            <a className="text-white no-underline hover:underline" href="/user">
+              Users
+            </a>
+          </li>
+          <li className="mb-3">
+            <a
+              className="text-white no-underline hover:underline"
+              href="/adminobjet"
+            >
+              AdminObjet
+            </a>
+          </li>
+          <li className="mb-3">
+            <a className="text-white no-underline hover:underline" href="#">
+              Settings
+            </a>
+          </li>
+          <li className="mb-3">
+            <a className="text-white no-underline hover:underline" href="#">
+              Reports
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </aside>
+  );
+}
+
+function App() {
+  return (
+    <div className="flex h-screen m-0 p-0">
+      <Sidebar />
+      <main className="flex-1 ">{/* Ajoutez ici le contenu principal */}</main>
+    </div>
+  );
+}
+
+export default App;

From 392badcfc61502d9a2d4a5545595dcf084a2b4ab Mon Sep 17 00:00:00 2001
From: Arcade69 <65565653+Arcade69@users.noreply.github.com>
Date: Tue, 8 Apr 2025 10:16:40 +0200
Subject: [PATCH 6/6] Update App.jsx pour les page admin

---
 Front-end/src/App.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/Front-end/src/App.jsx b/Front-end/src/App.jsx
index d76005c..ddc4e46 100644
--- a/Front-end/src/App.jsx
+++ b/Front-end/src/App.jsx
@@ -6,6 +6,11 @@ import Header from "./components/Header.jsx";
 import ObjectManagement from "./pages/Gestion/ObjectManagement.jsx";
 import Objet from "./pages/Gestion/Objet.jsx";
 import AddObject from "./pages/Gestion/AddObject.jsx";
+import Sidebar from './pages/Admin/sidebar.jsx'; 
+import User from './pages/Admin/User.jsx'; 
+import Dashboard from "./pages/Admin/Dashboard.jsx";
+import AdminObjet from "./pages/Admin/AdminObjet.jsx";
+
 function App() {
 
   return (
@@ -19,6 +24,11 @@ function App() {
           <Route path="/gestionObjets" element={<ObjectManagement />} />
           <Route path="/objet" element={<Objet />} />
           <Route path="/ajouterObjet" element={<AddObject />} />
+          <Route path="/sidebar" element={<Sidebar />} />
+          <Route path="/user" element={<User />} />
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="/adminobjet" element={<AdminObjet />} />
+          
         </Routes>
       </div>
     </Router>