diff --git a/Front-end/src/components/Header.jsx b/Front-end/src/components/Header.jsx index 9bbd666..88a8764 100644 --- a/Front-end/src/components/Header.jsx +++ b/Front-end/src/components/Header.jsx @@ -1,51 +1,118 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import { LogIn, UserPlus, LogOut, Settings } from "lucide-react"; import { Link } from "react-router-dom"; import { useAuth } from "../AuthContext"; function Header() { const { token, logout } = useAuth(); + const [showAdminDropdown, setShowAdminDropdown] = useState(false); + + const toggleAdminDropdown = () => { + setShowAdminDropdown((prev) => !prev); + }; return ( -
+

VigiMétéo

{token ? ( <> - - - - - + + + + + ) : ( <> - + Connexion - + Inscription diff --git a/Front-end/src/pages/Admin/Dashboard.jsx b/Front-end/src/pages/Admin/Dashboard.jsx index a69d224..9a26e7c 100644 --- a/Front-end/src/pages/Admin/Dashboard.jsx +++ b/Front-end/src/pages/Admin/Dashboard.jsx @@ -1,50 +1,16 @@ import React, { useState } from "react"; import Sidebar from "./sidebar.jsx"; +import { RadioTower, ArrowRight, BadgePlus, Settings } from "lucide-react"; -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", - }, -}; +// Widgets initiaux pour le dashboard +const initialWidgets = [ + { id: 1, type: "summary" }, + { id: 2, type: "users" }, + { id: 3, type: "objects" }, +]; function Dashboard() { - // États simulés (dans une vraie application, ils viendraient d'une API ou d'un store global) + // États simulés (données fictives pour l'exemple) const [users, setUsers] = useState([ { id: 1, @@ -73,6 +39,7 @@ function Dashboard() { accessLevel: "Admin", }, ]); + const [logs, setLogs] = useState([ { id: 1, @@ -88,64 +55,285 @@ function Dashboard() { }, ]); + // État pour simuler les objets présents dans la section AdminObjet.jsx + const [adminObjects, setAdminObjects] = useState([ + { + id: 101, + nom: "Objet A", + description: "Description A", + type: "Type A", + localisation: "Localisation A", + proprietaire: "Propriétaire A", + status: "active", + }, + { + id: 102, + nom: "Objet B", + description: "Description B", + type: "Type B", + localisation: "Localisation B", + proprietaire: "Propriétaire B", + status: "inactive", + }, + { + id: 103, + nom: "Objet C", + description: "Description C", + type: "Type C", + localisation: "Localisation C", + proprietaire: "Propriétaire C", + status: "active", + }, + ]); + + // Gestion du mode de gestion et des widgets + const [manageMode, setManageMode] = useState(false); + const [widgets, setWidgets] = useState(initialWidgets); + + // Contrôle d'affichage du modal de sélection de widget + const [showAddWidgetModal, setShowAddWidgetModal] = useState(false); + + // Suppression d'un widget + const handleDeleteWidget = (id) => { + setWidgets(widgets.filter((widget) => widget.id !== id)); + }; + + // Ouvre le modal pour ajouter un widget + const openAddWidgetModal = () => { + setShowAddWidgetModal(true); + }; + + // Ajoute le widget sélectionné en fonction du type choisi + const handleWidgetSelection = (widgetType) => { + const newWidget = { id: Date.now(), type: widgetType }; + setWidgets([...widgets, newWidget]); + setShowAddWidgetModal(false); + }; + return ( -
+
-
-

Dashboard

-
-
-

Total Users

-

{users.length}

-
-
-

Dernier Log

- {logs.length > 0 ? ( -

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

- ) : ( -

Aucun log

- )} -
+
+ {/* En-tête : titre + bouton pour activer/désactiver le mode gestion */} +
+

Dashboard

+
+ {/* Grille des widgets */}
-

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 */} - +
+ {widgets.map((widget) => ( +
+ {/* Bouton de suppression, visible en mode gestion */} + {manageMode && ( + + )} + + {/* Contenu du widget selon son type */} + {widget.type === "summary" && ( +
+

+ Dashboard Summary +

+
+

Total Users

+

{users.length}

+
+
+

Dernier Log

+ {logs.length > 0 ? ( +

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

+ ) : ( +

Aucun log

+ )} +
+
+ )} + + {widget.type === "users" && ( +
+

+ Gestion des Utilisateurs +

+ + + + + + + + + + {users.slice(0, 5).map((user) => ( + + + + + + ))} + {users.length === 0 && ( + + + + )} + +
+ Username + + Email + + Access +
+ {user.username} + + {user.email} + + {user.accessLevel} +
+ Aucun utilisateur disponible +
+ +
+ )} + + {widget.type === "objects" && ( + + )} + + {widget.type === "adminobjet" && ( +
+

+ Liste des Objets et Outils/Services +

+ {/* Afficher seulement les 2 premiers objets */} +
    + {adminObjects.slice(0, 2).map((obj) => ( +
  • +

    {obj.nom}

    +

    {obj.type}

    +

    {obj.status}

    +
    • + ))} +
+ +
+ )} +
+ ))} + + {/* Case pour ajouter un widget */} +
+ +
+
+ + {/* Modal de sélection du type de widget */} + {showAddWidgetModal && ( +
+
+

+ Choisir un type de widget +

+
+ + + + +
+ +
+
+ )}
); diff --git a/Front-end/src/pages/Admin/User.jsx b/Front-end/src/pages/Admin/User.jsx index 3bae034..ceabf9f 100644 --- a/Front-end/src/pages/Admin/User.jsx +++ b/Front-end/src/pages/Admin/User.jsx @@ -1,52 +1,8 @@ +// User.jsx 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(""); @@ -69,7 +25,7 @@ function User() { setEmail(""); }; - // Suppression d'un utilisateur (fonction présente dans script.js) + // Suppression d'un utilisateur const handleDeleteUser = (userId) => { const user = users.find((u) => u.id === userId); if (user) { @@ -78,7 +34,7 @@ function User() { setUsers(users.filter((u) => u.id !== userId)); }; - // Changement du niveau d'accès via le menu déroulant (fonction issue de script.js) + // Changement du niveau d'accès via le menu déroulant const handleChangeAccessLevel = (userId, newLevel) => { setUsers( users.map((user) => { @@ -95,7 +51,7 @@ function User() { ); }; - // Ajustement des points d'un utilisateur (fonction issue de script.js) + // Ajustement des points d'un utilisateur const handleAdjustPoints = (userId) => { const pointsToAdd = parseInt(pointsInput[userId]) || 0; setUsers( @@ -111,80 +67,97 @@ function User() { setPointsInput({ ...pointsInput, [userId]: "" }); }; - // Fonction de journalisation des actions (définie dans script.js) + // Fonction de journalisation des actions 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.

+
+
+

User Management

+

Manage users from this panel.

{/* Formulaire d'ajout d'utilisateur */} -
+ setUsername(e.target.value)} required + className="p-2.5 border border-gray-300 rounded-md" /> setEmail(e.target.value)} required + className="p-2.5 border border-gray-300 rounded-md" /> -
{/* Tableau des utilisateurs */} - +
- - - - - + + + + + {users.map((user) => ( - - - + + - -
UsernameEmailAccess LevelPointsActions + Username + + Email + + Access Level + + Points + + Actions +
{user.username}{user.email} - {/* Menu déroulant pour changer le niveau d'accès */} + + {user.username} + + {user.email} + + {user.points} - {/* Input et bouton pour ajuster les points */} @@ -193,27 +166,19 @@ function User() { [user.id]: e.target.value, }) } + className="w-[60px] ml-2.5 p-1 border border-gray-300 rounded-md" /> - {/* Bouton de suppression */} + @@ -224,22 +189,36 @@ function User() {
{/* Tableau des logs */} -
-

Login History and Action Logs

- +
+

+ Login History and Action Logs +

+
- - - + + + {logs.map((log) => ( - - - + + + ))} diff --git a/Front-end/src/pages/Admin/sidebar.jsx b/Front-end/src/pages/Admin/sidebar.jsx index dd5b1bf..31f7eeb 100644 --- a/Front-end/src/pages/Admin/sidebar.jsx +++ b/Front-end/src/pages/Admin/sidebar.jsx @@ -1,9 +1,27 @@ import React from "react"; +import { Menu, X } from "lucide-react"; -function Sidebar() { +function Sidebar({ isOpen, toggleSidebar }) { return ( -
UsernameActionTimestamp + Username + + Action + + Timestamp +
{log.username}{log.action}{log.timestamp} + {log.username} + + {log.action} + + {log.timestamp} +