src/App.tsx

@@ -34,7 +34,6 @@ function App() {
           <Route path="admin" element={<AdminPage />} />
           <Route path="/admin/jdmi" element={<BulkUsers />} />
           <Route path="/admin/tps" element={<CreateTp />} />
-          <Route path="/admin/sites-create" element={<CreateSite />} />
           <Route path="/admin/ji-create" element={<CreateJi />} />
           <Route path="/admin/users" element={<Users />} />
           <Route path="/admin/sites" element={<Sites />} />

src/component/Navigation/Navigation.tsx

@@ -146,17 +146,6 @@ const Navigation: React.FC<NavigationProps> = ({
                             </Link>
                           </div>
                         </li>
-                        <li>
-                          <div>
-                            <Link
-                              to="/admin/sites-create"
-                              onClick={toggleDrawer}
-                              className="w-60"
-                            >
-                              Create Site
-                            </Link>
-                          </div>
-                        </li>
                         <li>
                           <div>
                             <Link
@@ -176,7 +165,7 @@ const Navigation: React.FC<NavigationProps> = ({
                               onClick={toggleDrawer}
                               className="w-60"
                             >
-                              List Sites
+                              Sites
                             </Link>
                           </div>
                         </li>

src/pages/admin/CreateSite.tsx

@@ -1,106 +0,0 @@
-import axios from "axios";
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-
-function CreateSite() {
-  const [site, setSite] = useState({
-    name: "",
-    desc: "",
-    address: "",
-  });
-  const navigate = useNavigate();
-
-  const handleInputChange = (
-    e: React.ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >,
-  ) => {
-    const { name, value } = e.target;
-    setSite({ ...site, [name]: value });
-  };
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    
-    // Créer les query parameters
-    const params = new URLSearchParams({
-      name: site.name,
-      description: site.description,
-      address: site.address,
-    });
-
-    axios.post(`/api/sites?${params.toString()}`).then((res) => {
-      if (res.status === 200) {
-        navigate(`/site/${res.data.id}`);
-      }
-    });
-  };
-  return (
-    <div className="container mx-auto p-6">
-      <div className="shadow-lg rounded-lg p-6">
-        <h1 className="text-3xl font-bold text-blue-600 mb-6">
-          Create Site
-        </h1>
-
-        <form onSubmit={handleSubmit} className="space-y-6">
-          <div>
-            <label className="block text-gray-700 font-semibold mb-2">
-              Name:
-            </label>
-            <input
-              type="text"
-              name="name"
-              value={site.name}
-              onChange={handleInputChange}
-              className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder="Enter site name"
-              required
-            />
-          </div>
-
-          <div>
-            <label className="block text-gray-700 font-semibold mb-2">
-              Description:
-            </label>
-            <textarea
-              type="text"
-              name="desc"
-              value={site.desc}
-              onChange={handleInputChange}
-              className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder="Enter site description"
-              rows={4}
-              required
-            ></textarea>
-          </div>
-
-          <div>
-            <label className="block text-gray-700 font-semibold mb-2">
-              Address:
-            </label>
-            <input
-              type="text"
-              name="address"
-              value={site.address}
-              onChange={handleInputChange}
-              className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder="Enter site's address"
-              required
-            />
-          </div>
-
-          <div className="text-right">
-            <button
-              type="submit"
-              className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            >
-              Create Site
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}
-
-export default CreateSite;

src/pages/admin/Sites.tsx

@@ -1,10 +1,15 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
-import { Site } from "../../type/SiteType";
 
 function Sites() {
   const [sites, setSites] = useState([]);
   const [reload, setReload] = useState(0);
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [site, setSite] = useState({
+    name: "",
+    desc: "",
+    address: "",
+  });
 
   useEffect(() => {
     axios.get("/api/sites").then((res) => {
@@ -12,29 +17,113 @@ function Sites() {
     });
   }, [reload]);
 
-  const handleEditSite = (siteId: number) => {
+  const handleEditSite = (siteId) => {
     alert(`Edit site with ID: ${siteId}`);
   };
 
-  /*const deleteSites = () => {
+  const handleInputChange = (e) => {
-    axios.delete("/api/sites").then(() => {
+    const { name, value } = e.target;
-      setReload(reload + 1);
+    setSite({ ...site, [name]: value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    
+    const params = new URLSearchParams({
+      name: site.name,
+      description: site.desc,
+      address: site.address,
     });
-  };*/
+
+    axios.post(`/api/sites?${params.toString()}`).then((res) => {
+      if (res.status === 200) {
+        setSite({ name: "", desc: "", address: "" });
+        setShowCreateForm(false);
+        setReload(reload + 1);
+      }
+    });
+  };
 
   return (
     <div className="container mx-auto p-6">
       <div className="bg-white shadow-lg rounded-lg p-6">
         <div className="flex justify-between items-center mb-6">
-          <h1 className="text-3xl font-bold text-blue-600 mb-6">
+          <h1 className="text-3xl font-bold text-blue-600">
             Manage Sites
           </h1>
-                {/*<button className="btn btn-error" onClick={deleteJDMIUsers}>
+          <button
-            Delete JDMI sites
+            onClick={() => setShowCreateForm(!showCreateForm)}
-          </button>*/}
+            className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            {showCreateForm ? "Cancel" : "Create New Site"}
+          </button>
         </div>
 
-        {/* Users Table */}
+        {/* Create Site Form */}
+        {showCreateForm && (
+          <div className="mb-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">
+              Create New Site
+            </h2>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="block text-gray-700 font-semibold mb-2">
+                  Name:
+                </label>
+                <input
+                  type="text"
+                  name="name"
+                  value={site.name}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="Enter site name"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-gray-700 font-semibold mb-2">
+                  Description:
+                </label>
+                <textarea
+                  name="desc"
+                  value={site.desc}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="Enter site description"
+                  rows={4}
+                  required
+                ></textarea>
+              </div>
+
+              <div>
+                <label className="block text-gray-700 font-semibold mb-2">
+                  Address:
+                </label>
+                <input
+                  type="text"
+                  name="address"
+                  value={site.address}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="Enter site's address"
+                  required
+                />
+              </div>
+
+              <div className="text-right">
+                <button
+                  type="submit"
+                  className="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-500"
+                >
+                  Create Site
+                </button>
+              </div>
+            </form>
+          </div>
+        )}
+
+        {/* Sites Table */}
         <div className="overflow-x-auto">
           <table className="table w-full">
             <thead>
@@ -43,12 +132,11 @@ function Sites() {
                 <th className="p-4">Name</th>
                 <th className="p-4">Address</th>
                 <th className="p-4">Roles</th>
-                <th className="p-4">Instances</th>
                 <th className="p-4">Actions</th>
               </tr>
             </thead>
             <tbody>
-              {sites.map((site: Site, index: number) => (
+              {sites.map((site, index) => (
                 <tr key={site.id} className="hover:bg-gray-100">
                   <td className="p-4">{index + 1}</td>
                   <td className="p-4">{site.name}</td>
@@ -56,7 +144,7 @@ function Sites() {
                   <td className="p-4">{site.listJi}</td>
                   <td className="p-4">
                     <button
-                      className="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-400 mr-2"
+                      className="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-400"
                       onClick={() => handleEditSite(site.id)}
                     >
                       Edit