merged list and create ji in one page

src/App.tsx

@@ -10,7 +10,7 @@ import LoginPage from "./pages/Login";
 import PageTest from "./pages/PageTest";
 import CreateTp from "./pages/admin/CreateTp";
 import CreateSite from "./pages/admin/CreateSite";
-import CreateJi from "./pages/admin/CreateJi";
+import Jis from "./pages/admin/Jis";
 import BulkUsers from "./pages/admin/BulkCreateUser";
 import Users from "./pages/admin/Users";
 import Sites from "./pages/admin/Sites";
@@ -34,7 +34,7 @@ function App() {
           <Route path="admin" element={<AdminPage />} />
           <Route path="/admin/jdmi" element={<BulkUsers />} />
           <Route path="/admin/tps" element={<CreateTp />} />
-          <Route path="/admin/ji-create" element={<CreateJi />} />
+          <Route path="/admin/ji" element={<Jis />} />
           <Route path="/admin/users" element={<Users />} />
           <Route path="/admin/sites" element={<Sites />} />
           <Route path="/settings" element={<CreateTp />} />

src/pages/admin/CreateJi.tsx

@@ -1,122 +0,0 @@
-import axios from "axios";
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-
-function CreateJi() {
-  const [ji, setJi] = useState({
-    name: "",
-    respo: "",
-    site_id: "",
-    date: "",
-  });
-  const navigate = useNavigate();
-
-  const handleInputChange = (
-    e: React.ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >,
-  ) => {
-    const { name, value } = e.target;
-    setJi({ ...ji, [name]: value });
-  };
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    
-    // Créer les query parameters
-    const params = new URLSearchParams({
-      name: ji.name,
-      respo: ji.respo,
-      site_id: ji.site_id,
-      date: ji.date,
-    });
-
-    axios.post(`/api/ji/create?${params.toString()}`).then((res) => {
-      if (res.status === 200) {
-        navigate(`/immersion/${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 Ji
-        </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={ji.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 ji name"
-              required
-            />
-          </div>
-
-          <div>
-            <label className="block text-gray-700 font-semibold mb-2">
-              Description:
-            </label>
-            <textarea
-              type="text"
-              name="desc"
-              value={ji.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 ji description"
-              rows={4}
-              required
-            ></textarea>
-          </div>
-
-          <div>
-            <label className="block text-gray-700 font-semibold mb-2">
-              Site ID:
-            </label>
-            <input
-              type="text"
-              name="site_id"
-              value={ji.site_id}
-              onChange={handleInputChange}
-              className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder="Enter ji's address"
-              required
-            />
-          </div>
-
-          <div>
-            <label className="block text-gray-700 font-semibold mb-2">
-              Date:
-            </label>
-            <input
-              type="date"
-              name="date"
-              value={ji.date}
-              onChange={handleInputChange}
-              className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              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 Ji
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}
-
-export default CreateJi;

src/pages/admin/Jis.tsx

@@ -0,0 +1,200 @@
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { Ji } from "../../type/JiType";
+
+function Jis() {
+  const [jis, setJis] = useState([]);
+  const [reload, setReload] = useState(0);
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [newJi, setNewJi] = useState({
+    name: "",
+    desc: "",
+    respo: "",
+    site_id: "",
+    date: "",
+  });
+
+  useEffect(() => {
+    axios.get("/api/ji/listall").then((res) => {
+      setJis(res.data);
+    });
+  }, [reload]);
+
+  const handleEditJi = (jiId: number) => {
+    alert(`Edit ji with ID: ${jiId}`);
+  };
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setNewJi({ ...newJi, [name]: value });
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    
+    const params = new URLSearchParams({
+      name: newJi.name,
+      respo: newJi.respo,
+      site_id: newJi.site_id,
+      date: newJi.date,
+    });
+
+    axios.post(`/api/ji/create?${params.toString()}`).then((res) => {
+      if (res.status === 200) {
+        setNewJi({ name: "", desc: "", respo: "", site_id: "", date: "" });
+        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">
+            Manage JIs
+          </h1>
+          <button
+            onClick={() => setShowCreateForm(!showCreateForm)}
+            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 JI"}
+          </button>
+        </div>
+
+        {/* Create JI 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 JI
+            </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={newJi.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 JI name"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-gray-700 font-semibold mb-2">
+                  Description:
+                </label>
+                <textarea
+                  name="desc"
+                  value={newJi.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 JI description"
+                  rows={4}
+                  required
+                ></textarea>
+              </div>
+
+              <div>
+                <label className="block text-gray-700 font-semibold mb-2">
+                  Responsable:
+                </label>
+                <input
+                  type="text"
+                  name="respo"
+                  value={newJi.respo}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="Enter responsable name"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-gray-700 font-semibold mb-2">
+                  Site ID:
+                </label>
+                <input
+                  type="text"
+                  name="site_id"
+                  value={newJi.site_id}
+                  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 ID"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-gray-700 font-semibold mb-2">
+                  Date:
+                </label>
+                <input
+                  type="date"
+                  name="date"
+                  value={newJi.date}
+                  onChange={handleInputChange}
+                  className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  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 JI
+                </button>
+              </div>
+            </form>
+          </div>
+        )}
+
+        {/* JIs Table */}
+        <div className="overflow-x-auto">
+          <table className="table w-full">
+            <thead>
+              <tr>
+                <th className="p-4">#</th>
+                <th className="p-4">Name</th>
+                <th className="p-4">Responsable</th>
+                <th className="p-4">Site ID</th>
+                <th className="p-4">Date</th>
+                <th className="p-4">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {jis.map((ji: Ji, index: number) => (
+                <tr key={ji.id} className="hover:bg-gray-100">
+                  <td className="p-4">{index + 1}</td>
+                  <td className="p-4">{ji.name}</td>
+                  <td className="p-4">{ji.respo}</td>
+                  <td className="p-4">{ji.site_id}</td>
+                  <td className="p-4">{ji.date}</td>
+                  <td className="p-4">
+                    <button
+                      className="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-400"
+                      onClick={() => handleEditJi(ji.id)}
+                    >
+                      Edit
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Jis;

src/pages/admin/ListJi.tsx

@@ -1,75 +0,0 @@
-import axios from "axios";
-import { useEffect, useState } from "react";
-import { Ji } from "../../type/JiType";
-
-function ListJI() {
-  const [jis, setJis] = useState([]);
-  const [reload, setReload] = useState(0);
-
-  useEffect(() => {
-    axios.get("/api/ji/listall").then((res) => {
-      setJis(res.data);
-    });
-  }, [reload]);
-
-  const handleEditJi = (jiId: number) => {
-    alert(`Edit ji with ID: ${siteId}`);
-  };
-
-  /*const deleteJis = () => {
-    axios.delete("/api/jis").then(() => {
-      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">
-            Manage Jis
-          </h1>
-                {/*<button className="btn btn-error" onClick={deleteJDMIUsers}>
-            Delete JDMI jis
-          </button>*/}
-        </div>
-
-        {/* Users Table */}
-        <div className="overflow-x-auto">
-          <table className="table w-full">
-            <thead>
-              <tr>
-                <th className="p-4">#</th>
-                <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>
-              {jis.map((site: Ji, index: number) => (
-                <tr key={ji.id} className="hover:bg-gray-100">
-                  <td className="p-4">{index + 1}</td>
-                  <td className="p-4">{ji.name}</td>
-                  <td className="p-4">{ji.address}</td>
-                  <td className="p-4">{ji.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"
-                      onClick={() => handleEditJi(ji.id)}
-                    >
-                      Edit
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Jis;