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() { } /> } /> } /> + } /> + } /> + } /> + } /> + 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 ( +
+ +
+
+

+ Administration des Objets et Outils/Services +

+ + {/* Gestion des catégories */} +
+

+ Gestion des Catégories +

+
+ setNewCategory(e.target.value)} + className="flex-1 border border-gray-300 rounded-lg p-2 mr-4" + /> + +
+
    + {categories.map((cat, index) => ( +
  • + {cat} + +
    • + ))} +
+
+ + {/* Formulaire d'ajout d'objet */} +
+
+
+ + +
+

+ {!verif + ? "Entrez les données de votre nouvel objet" + : "Êtes-vous sûr de ces données ?"} +

+
+
+
+ + setNom(e.target.value)} + required + disabled={verif} + className="w-full p-2 border border-gray-300 rounded-lg text-gray-600" + /> +
+
+ + setDescription(e.target.value)} + required + disabled={verif} + className="w-full p-2 border border-gray-300 rounded-lg text-gray-600" + /> +
+
+ + setType(e.target.value)} + required + disabled={verif} + className="w-full p-2 border border-gray-300 rounded-lg text-gray-600" + /> +
+
+ + setLocalisation(e.target.value)} + required + disabled={verif} + className="w-full p-2 border border-gray-300 rounded-lg text-gray-600" + /> +
+
+ + setProprietaire(e.target.value)} + required + disabled={verif} + className="w-full p-2 border border-gray-300 rounded-lg text-gray-600" + /> +
+
+ +
+ +
+ + +
+ +
+
+
+ + +
+

+ {messRequete} +

+
+
+ + {/* Tri des objets */} +
+
+

+ Liste des Objets et Outils/Services +

+ +
+
+ + + + + + + + + + + + + + {sortedObjects.map((obj) => ( + + + + + + + + + + ))} + {objects.length === 0 && ( + + + + )} + +
+ Nom + + Description + + Type + + Localisation + + Propriétaire + + Status +
+ {obj.nom} + + {obj.description} + + {obj.type} + + {obj.localisation} + + {obj.proprietaire} + + {obj.status} + + +
+ Aucun objet ou service disponible. +
+
+
+ + {/* Règles globales */} +
+

Règles Globales

+
+
+ + setPriority(e.target.value)} + className="border border-gray-300 rounded-lg p-2" + /> +
+
+ + setAlertSettings(e.target.value)} + className="border border-gray-300 rounded-lg p-2" + /> +
+
+ +
+
+
+
+ ); +} + +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 ( +
+ +
+

Dashboard

+
+
+

Total Users

+

{users.length}

+
+
+

Dernier Log

+ {logs.length > 0 ? ( +

+ {logs[logs.length - 1].username} - {logs[logs.length - 1].action} +

+ ) : ( +

Aucun log

+ )} +
+
+ +
+

Aperçu des Utilisateurs

+ + + + + + + + + + {users.slice(0, 5).map(user => ( + + + + + + ))} + {users.length === 0 && ( + + + + )} + +
UsernameEmailAccess Level
{user.username}{user.email}{user.accessLevel}
Aucun utilisateur disponible
+ {/* Bouton pour accéder à la page complète */} + +
+
+
+ ); +} + +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 ( +
+ +
+
+

User Management

+

Manage users from this panel.

+ {/* Formulaire d'ajout d'utilisateur */} +
+ setUsername(e.target.value)} + required + /> + setEmail(e.target.value)} + required + /> + +
+ {/* Tableau des utilisateurs */} + + + + + + + + + + + + {users.map(user => ( + + + + + + + + ))} + +
UsernameEmailAccess LevelPointsActions
{user.username}{user.email} + {/* Menu déroulant pour changer le niveau d'accès */} + + + {user.points} + {/* Input et bouton pour ajuster les points */} + + setPointsInput({ ...pointsInput, [user.id]: e.target.value }) + } + /> + + + {/* Bouton de suppression */} + +
+
+ {/* Tableau des logs */} +
+

Login History and Action Logs

+ + + + + + + + + + {logs.map(log => ( + + + + + + ))} + +
UsernameActionTimestamp
{log.username}{log.action}{log.timestamp}
+
+
+
+ ); +} + +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 ( + + ); +} + +function App() { + return ( +
+ +
{/* Ajoutez ici le contenu principal */}
+
+ ); +} + +export default App;