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