mise a jours de User et le Dashboard
This commit is contained in:
Arcade69
parent
922af8455d
commit
daa1460283
@ -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 (
|
||||
<header className="bg-white shadow-sm">
|
||||
<header className="bg-white shadow-sm relative">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold text-indigo-600">VigiMétéo</h1>
|
||||
<nav>
|
||||
<ul className="flex gap-4">
|
||||
<ul className="flex gap-4 relative">
|
||||
<li>
|
||||
<Link to="/" className="text-gray-600 hover:text-indigo-600">Accueil</Link>
|
||||
<Link to="/" className="text-gray-600 hover:text-indigo-600">
|
||||
Accueil
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/about" className="text-gray-600 hover:text-indigo-600">A propos</Link>
|
||||
<Link
|
||||
to="/about"
|
||||
className="text-gray-600 hover:text-indigo-600"
|
||||
>
|
||||
A propos
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/gestion" className="text-gray-600 hover:text-indigo-600">Gestion</Link>
|
||||
<Link
|
||||
to="/gestion"
|
||||
className="text-gray-600 hover:text-indigo-600"
|
||||
>
|
||||
Gestion
|
||||
</Link>
|
||||
</li>
|
||||
{/* Onglet déroulant "Admin" */}
|
||||
<li className="relative">
|
||||
<button
|
||||
onClick={toggleAdminDropdown}
|
||||
className="flex items-center text-gray-600 hover:text-indigo-600 focus:outline-none"
|
||||
>
|
||||
Admin
|
||||
<svg
|
||||
className="ml-1 h-4 w-4 fill-current"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
|
||||
</svg>
|
||||
</button>
|
||||
{showAdminDropdown && (
|
||||
<div className="absolute top-full left-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-50">
|
||||
{/* En cliquant sur le lien "Dashboard", on ferme le menu */}
|
||||
<Link
|
||||
to="/dashboard"
|
||||
className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
|
||||
onClick={() => setShowAdminDropdown(false)}
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
<Link
|
||||
to="/user"
|
||||
className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
|
||||
onClick={() => setShowAdminDropdown(false)}
|
||||
>
|
||||
Gestion des Utilisateurs
|
||||
</Link>
|
||||
<Link
|
||||
to="/adminobjet"
|
||||
className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
|
||||
onClick={() => setShowAdminDropdown(false)}
|
||||
>
|
||||
Gestion des Objets Connectés
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div className="flex gap-4">
|
||||
{token ? (
|
||||
<>
|
||||
<Link to="/settings" className="flex items-center gap-2 text-gray-600 hover:text-indigo-600">
|
||||
<Settings size={20} />
|
||||
<span></span>
|
||||
</Link>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-red-600"
|
||||
>
|
||||
<LogOut size={20} />
|
||||
<span>Déconnexion</span>
|
||||
</button>
|
||||
<Link
|
||||
to="/settings"
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-indigo-600"
|
||||
>
|
||||
<Settings size={20} />
|
||||
<span></span>
|
||||
</Link>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-red-600"
|
||||
>
|
||||
<LogOut size={20} />
|
||||
<span>Déconnexion</span>
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/login" className="flex items-center gap-2 text-gray-600 hover:text-indigo-600">
|
||||
<Link
|
||||
to="/login"
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-indigo-600"
|
||||
>
|
||||
<LogIn size={20} />
|
||||
<span>Connexion</span>
|
||||
</Link>
|
||||
<Link to="/signup" className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">
|
||||
<Link
|
||||
to="/signup"
|
||||
className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"
|
||||
>
|
||||
<UserPlus size={20} />
|
||||
<span>Inscription</span>
|
||||
</Link>
|
||||
|
||||
@ -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 (
|
||||
<div style={{ display: "flex", minHeight: "100vh" }}>
|
||||
<div className="flex min-h-screen">
|
||||
<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>
|
||||
<main className="flex-1 bg-gradient-to-br from-blue-50 to-indigo-50 p-8 overflow-auto">
|
||||
{/* En-tête : titre + bouton pour activer/désactiver le mode gestion */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-3xl font-bold">Dashboard</h1>
|
||||
<button
|
||||
onClick={() => setManageMode(!manageMode)}
|
||||
className="flex items-center px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-md"
|
||||
>
|
||||
<Settings className="mr-2" size={20} />
|
||||
{manageMode ? "Terminer la gestion" : "Gérer les widgets"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Grille des widgets */}
|
||||
<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>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{widgets.map((widget) => (
|
||||
<div
|
||||
key={widget.id}
|
||||
className="relative bg-white p-6 rounded-xl shadow hover:shadow-md"
|
||||
>
|
||||
{/* Bouton de suppression, visible en mode gestion */}
|
||||
{manageMode && (
|
||||
<button
|
||||
onClick={() => handleDeleteWidget(widget.id)}
|
||||
className="absolute top-2 right-2 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center"
|
||||
>
|
||||
–
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Contenu du widget selon son type */}
|
||||
{widget.type === "summary" && (
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">
|
||||
Dashboard Summary
|
||||
</h2>
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-medium">Total Users</h3>
|
||||
<p className="text-2xl">{users.length}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium">Dernier Log</h3>
|
||||
{logs.length > 0 ? (
|
||||
<p>
|
||||
{logs[logs.length - 1].username} -{" "}
|
||||
{logs[logs.length - 1].action}
|
||||
</p>
|
||||
) : (
|
||||
<p>Aucun log</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{widget.type === "users" && (
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">
|
||||
Gestion des Utilisateurs
|
||||
</h2>
|
||||
<table className="w-full border border-gray-200">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-2 py-1 border border-gray-200 bg-gray-100 text-left">
|
||||
Username
|
||||
</th>
|
||||
<th className="px-2 py-1 border border-gray-200 bg-gray-100 text-left">
|
||||
Email
|
||||
</th>
|
||||
<th className="px-2 py-1 border border-gray-200 bg-gray-100 text-left">
|
||||
Access
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.slice(0, 5).map((user) => (
|
||||
<tr key={user.id}>
|
||||
<td className="px-2 py-1 border border-gray-200">
|
||||
{user.username}
|
||||
</td>
|
||||
<td className="px-2 py-1 border border-gray-200">
|
||||
{user.email}
|
||||
</td>
|
||||
<td className="px-2 py-1 border border-gray-200">
|
||||
{user.accessLevel}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{users.length === 0 && (
|
||||
<tr>
|
||||
<td
|
||||
colSpan="3"
|
||||
className="px-2 py-1 border border-gray-200 text-center"
|
||||
>
|
||||
Aucun utilisateur disponible
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<button
|
||||
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md"
|
||||
onClick={() => (window.location.href = "/user")}
|
||||
>
|
||||
Voir plus
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{widget.type === "objects" && (
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">
|
||||
Gestion des Objets Connectés
|
||||
</h2>
|
||||
<div className="mb-4">
|
||||
<a
|
||||
href="/gestionObjets"
|
||||
className="flex items-center text-indigo-600 hover:text-indigo-700"
|
||||
>
|
||||
<RadioTower size={24} className="mr-2" />
|
||||
Consulter les objets connectés
|
||||
<ArrowRight size={16} className="ml-2" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="/adminobjet"
|
||||
className="flex items-center text-indigo-600 hover:text-indigo-700"
|
||||
>
|
||||
<BadgePlus size={24} className="mr-2" />
|
||||
Ajouter un nouvel objet
|
||||
<ArrowRight size={16} className="ml-2" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{widget.type === "adminobjet" && (
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">
|
||||
Liste des Objets et Outils/Services
|
||||
</h2>
|
||||
{/* Afficher seulement les 2 premiers objets */}
|
||||
<ul className="mb-4 space-y-2">
|
||||
{adminObjects.slice(0, 2).map((obj) => (
|
||||
<li
|
||||
key={obj.id}
|
||||
className="border border-gray-200 p-2 rounded"
|
||||
>
|
||||
<p className="font-medium">{obj.nom}</p>
|
||||
<p className="text-sm text-gray-500">{obj.type}</p>
|
||||
<p className="text-sm text-gray-500">{obj.status}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button
|
||||
onClick={() => (window.location.href = "/adminobjet")}
|
||||
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md"
|
||||
>
|
||||
Voir plus
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Case pour ajouter un widget */}
|
||||
<div
|
||||
onClick={openAddWidgetModal}
|
||||
className="flex items-center justify-center border-2 border-dashed border-gray-300 rounded-xl p-6 hover:bg-gray-50 cursor-pointer"
|
||||
>
|
||||
<button className="flex items-center">
|
||||
<span className="text-3xl font-bold mr-2">+</span>
|
||||
<span>Ajouter un widget</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Modal de sélection du type de widget */}
|
||||
{showAddWidgetModal && (
|
||||
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
|
||||
<div className="bg-white rounded-lg p-6 w-80">
|
||||
<h3 className="text-xl font-semibold mb-4">
|
||||
Choisir un type de widget
|
||||
</h3>
|
||||
<div className="flex flex-col gap-4">
|
||||
<button
|
||||
onClick={() => handleWidgetSelection("summary")}
|
||||
className="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-md text-left"
|
||||
>
|
||||
Dashboard Summary
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleWidgetSelection("users")}
|
||||
className="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-md text-left"
|
||||
>
|
||||
Gestion des Utilisateurs
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleWidgetSelection("objects")}
|
||||
className="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-md text-left"
|
||||
>
|
||||
Gestion des Objets Connectés
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleWidgetSelection("adminobjet")}
|
||||
className="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-md text-left"
|
||||
>
|
||||
Liste des Objets et Outils/Services
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowAddWidgetModal(false)}
|
||||
className="mt-4 px-4 py-2 bg-red-500 text-white rounded-md w-full"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -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 (
|
||||
<div style={{ display: "flex", minHeight: "100vh" }}>
|
||||
<div className="flex min-h-screen">
|
||||
<Sidebar />
|
||||
<main style={styles.mainContent}>
|
||||
<section style={styles.userManagement}>
|
||||
<h1>User Management</h1>
|
||||
<p>Manage users from this panel.</p>
|
||||
<main className="flex-grow p-5">
|
||||
<section className="mt-5">
|
||||
<h1 className="text-2xl font-bold mb-4">User Management</h1>
|
||||
<p className="mb-5">Manage users from this panel.</p>
|
||||
{/* Formulaire d'ajout d'utilisateur */}
|
||||
<form style={styles.userForm} onSubmit={handleAddUser}>
|
||||
<form
|
||||
className="grid grid-cols-[1fr_1fr_auto] gap-[10px] mb-5"
|
||||
onSubmit={handleAddUser}
|
||||
>
|
||||
<input
|
||||
style={styles.input}
|
||||
type="text"
|
||||
id="username"
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
className="p-2.5 border border-gray-300 rounded-md"
|
||||
/>
|
||||
<input
|
||||
style={styles.input}
|
||||
type="email"
|
||||
id="email"
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
className="p-2.5 border border-gray-300 rounded-md"
|
||||
/>
|
||||
<button style={styles.button} type="submit">
|
||||
<button
|
||||
type="submit"
|
||||
className="p-2.5 bg-green-600 text-white rounded-md cursor-pointer"
|
||||
>
|
||||
Add User
|
||||
</button>
|
||||
</form>
|
||||
{/* Tableau des utilisateurs */}
|
||||
<table style={styles.userTable}>
|
||||
<table className="w-full border-collapse">
|
||||
<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>
|
||||
<th className="p-2.5 border border-gray-300 bg-gray-100 text-left">
|
||||
Username
|
||||
</th>
|
||||
<th className="p-2.5 border border-gray-300 bg-gray-100 text-left">
|
||||
Email
|
||||
</th>
|
||||
<th className="p-2.5 border border-gray-300 bg-gray-100 text-left">
|
||||
Access Level
|
||||
</th>
|
||||
<th className="p-2.5 border border-gray-300 bg-gray-100 text-left">
|
||||
Points
|
||||
</th>
|
||||
<th className="p-2.5 border border-gray-300 bg-gray-100 text-left">
|
||||
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 */}
|
||||
<td className="p-2.5 border border-gray-300 text-left">
|
||||
{user.username}
|
||||
</td>
|
||||
<td className="p-2.5 border border-gray-300 text-left">
|
||||
{user.email}
|
||||
</td>
|
||||
<td className="p-2.5 border border-gray-300 text-left">
|
||||
<select
|
||||
value={user.accessLevel}
|
||||
onChange={(e) =>
|
||||
handleChangeAccessLevel(user.id, e.target.value)
|
||||
}
|
||||
style={{ padding: "5px", borderRadius: "5px" }}
|
||||
className="p-1 rounded-md border border-gray-300"
|
||||
>
|
||||
<option value="Admin">Admin</option>
|
||||
<option value="User">User</option>
|
||||
<option value="Guest">Guest</option>
|
||||
</select>
|
||||
</td>
|
||||
<td style={styles.thTd}>
|
||||
<td className="p-2.5 border border-gray-300 text-left">
|
||||
<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) =>
|
||||
@ -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"
|
||||
/>
|
||||
<button
|
||||
style={{
|
||||
...styles.button,
|
||||
padding: "5px 10px",
|
||||
marginLeft: "5px",
|
||||
}}
|
||||
onClick={() => handleAdjustPoints(user.id)}
|
||||
className="py-1 px-2.5 ml-2 bg-green-600 text-white rounded-md cursor-pointer"
|
||||
>
|
||||
Adjust
|
||||
</button>
|
||||
</td>
|
||||
<td style={styles.thTd}>
|
||||
{/* Bouton de suppression */}
|
||||
<td className="p-2.5 border border-gray-300 text-left">
|
||||
<button
|
||||
style={{
|
||||
...styles.button,
|
||||
backgroundColor: "#dc3545",
|
||||
padding: "5px 10px",
|
||||
}}
|
||||
onClick={() => handleDeleteUser(user.id)}
|
||||
className="py-1 px-2.5 bg-red-600 text-white rounded-md cursor-pointer"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
@ -224,22 +189,36 @@ function User() {
|
||||
</table>
|
||||
</section>
|
||||
{/* Tableau des logs */}
|
||||
<section className="user-logs" style={{ marginTop: "40px" }}>
|
||||
<h2>Login History and Action Logs</h2>
|
||||
<table style={styles.userTable}>
|
||||
<section className="mt-10">
|
||||
<h2 className="text-xl font-bold mb-4">
|
||||
Login History and Action Logs
|
||||
</h2>
|
||||
<table className="w-full border-collapse">
|
||||
<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>
|
||||
<th className="p-2.5 border border-gray-300 bg-gray-100 text-left">
|
||||
Username
|
||||
</th>
|
||||
<th className="p-2.5 border border-gray-300 bg-gray-100 text-left">
|
||||
Action
|
||||
</th>
|
||||
<th className="p-2.5 border border-gray-300 bg-gray-100 text-left">
|
||||
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>
|
||||
<td className="p-2.5 border border-gray-300 text-left">
|
||||
{log.username}
|
||||
</td>
|
||||
<td className="p-2.5 border border-gray-300 text-left">
|
||||
{log.action}
|
||||
</td>
|
||||
<td className="p-2.5 border border-gray-300 text-left">
|
||||
{log.timestamp}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
@ -1,9 +1,27 @@
|
||||
import React from "react";
|
||||
import { Menu, X } from "lucide-react";
|
||||
|
||||
function Sidebar() {
|
||||
function Sidebar({ isOpen, toggleSidebar }) {
|
||||
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>
|
||||
<aside
|
||||
className={`
|
||||
bg-gray-800 text-white p-5 h-screen w-64 fixed top-0 left-0 z-40
|
||||
transform transition-transform duration-200 ease-in-out
|
||||
${isOpen ? "translate-x-0" : "-translate-x-full"}
|
||||
md:static md:translate-x-0
|
||||
`}
|
||||
>
|
||||
{/* En-tête visible sur mobile avec bouton de fermeture */}
|
||||
<div className="flex justify-between items-center md:hidden mb-4">
|
||||
<h2 className="text-xl font-bold">Admin Panel</h2>
|
||||
<button onClick={toggleSidebar} className="focus:outline-none">
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
{/* En-tête pour les écrans md+ */}
|
||||
<div className="hidden md:block mb-4">
|
||||
<h2 className="text-xl font-bold">Admin Panel</h2>
|
||||
</div>
|
||||
<nav>
|
||||
<ul className="list-none p-0">
|
||||
<li className="mb-3">
|
||||
@ -43,13 +61,4 @@ function Sidebar() {
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
export default Sidebar;
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { Calendar, Settings, LayoutDashboard } from "lucide-react";
|
||||
|
||||
function AdminDashboard() {
|
||||
|
||||
const [activeTab, setActiveTab] = useState('dashboard');
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* SideMenu */}
|
||||
<div className="w-64 bg-white rounded-lg shadow-sm p-4">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Administration
|
||||
</h2>
|
||||
<nav className="flex flex-col space-y-2">
|
||||
<button
|
||||
onClick={() => setActiveTab('events')}
|
||||
className={`w-full flex items-center gap-2 px-4 py-2 rounded-lg ${
|
||||
activeTab === 'events'
|
||||
? 'bg-red-50 text-red-600'
|
||||
: 'text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<Calendar size={20} />
|
||||
Events
|
||||
</button>
|
||||
|
||||
<button onClick="" className="">
|
||||
<LayoutDashboard size="15" />
|
||||
Layout
|
||||
</button>
|
||||
|
||||
<button onClick="">
|
||||
<Settings size="15" />
|
||||
Settings
|
||||
</button>
|
||||
</nav>
|
||||
<h2>Test</h2>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AdminDashboard;
|
||||
Loading…
Reference in New Issue
Block a user