feat: port, instance bulk

src/pages/admin/BulkCreateUser.tsx

@@ -1,109 +1,121 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { User } from "../../type/UserType";
-import { Tp } from "../../type/TpType";
 
 function BulkUsers() {
-  const [userData, setUserData] = useState([]);
-  const [practical, setPractical] = useState("0");
-  const navigate = useNavigate();
-  const [tps, setTps] = useState([]);
+    const [userData, setUserData] = useState([]);
+    const [practical, setPractical] = useState("0");
+    const navigate = useNavigate();
+    const [tps, setTps] = useState([]);
 
-  const handlePracticalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setPractical(e.target.value);
-  };
-
-  useEffect(() => {
-    axios.get("/api/tps").then((res) => {
-      setTps(res.data);
-    });
-  }, []);
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFile = event.target.files[0];
-    parseCSV(selectedFile);
-  };
-
-  const parseCSV = (file: File) => {
-    const reader = new FileReader();
-    reader.onload = (event: ProgressEvent<FileReader>) => {
-      const text = event.target.result;
-      const rows = text.split("\n").map((row) => row.split(","));
-      const formattedData = rows.map((row) => ({
-        name: row[0],
-        email: row[1],
-        // Add other fields as necessary
-      }));
-      setUserData(formattedData);
+    const handlePracticalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        setPractical(e.target.value);
     };
-    reader.readAsText(file);
-  };
 
-  const handleSubmit = () => {
-    // Handle submission logic (e.g., sending data to the backend)
-    console.log(practical);
-    axios
-      .post("/api/users/jdmi", {
-        users: userData.filter((user) => user.name !== ""),
-        tpId: practical,
-      })
-      .then(() => navigate(`/admin/users`));
-  };
+    useEffect(() => {
+        axios.get("/api/tps").then((res) => {
+            setTps(res.data);
+        });
+    }, []);
 
-  return (
-    <div className="max-w-md mx-auto p-5">
-      <h2 className="text-2xl font-bold mb-4">Bulk User Creation</h2>
-      <input
-        type="file"
-        accept=".csv"
-        onChange={handleFileChange}
-        className="file-input file-input-bordered w-full mb-4"
-      />
-      {userData.length > 0 && (
-        <div className="overflow-x-auto">
-          <table className="table w-full">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Email</th>
-              </tr>
-            </thead>
-            <tbody>
-              {userData.map((user, index) => (
-                <tr key={index}>
-                  <td>{user.name}</td>
-                  <td>{user.email}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const selectedFile = event.target.files[0];
+        parseCSV(selectedFile);
+    };
+
+    const parseCSV = (file: File) => {
+        const reader = new FileReader();
+        reader.onload = (event: ProgressEvent<FileReader>) => {
+            const text = event.target.result;
+            const rows = text.split("\n").map((row) => row.split(","));
+            const formattedData = rows.map((row) => ({
+                name: row[0],
+                email: row[1],
+                password: row[2],
+                instance_name: row[3],
+                instance_ssh: row[4],
+                instance_port: row[5],
+                instance_pwd: row[6],
+            }));
+            setUserData(formattedData);
+        };
+        reader.readAsText(file);
+    };
+
+    const handleSubmit = () => {
+        // Handle submission logic (e.g., sending data to the backend)
+        console.log(practical);
+        axios
+            .post("/api/users/jdmi", {
+                users: userData.filter((user) => user.name !== ""),
+                tpId: practical,
+            })
+            .then(() => navigate(`/admin/users`));
+    };
+
+    return (
+        <div className="max-w-md mx-auto p-5">
+            <h2 className="text-2xl font-bold mb-4">Bulk User Creation</h2>
+            <input
+                type="file"
+                accept=".csv"
+                onChange={handleFileChange}
+                className="file-input file-input-bordered w-full mb-4"
+            />
+            {userData.length > 0 && (
+                <div className="overflow-x-auto">
+                    <table className="table w-full">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Email</th>
+                                <th>Password</th>
+                                <th>Instance name</th>
+                                <th>Instance ssh</th>
+                                <th>Instance port</th>
+                                <th>Instance pwd</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {userData.map((user, index) => (
+                                <tr key={index}>
+                                    <td>{user.name}</td>
+                                    <td>{user.email}</td>
+                                    <td>{user.password}</td>
+                                    <td>{user.instance_name}</td>
+                                    <td>{user.instance_ssh}</td>
+                                    <td>{user.instance_port}</td>
+                                    <td>{user.instance_pwd}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+
+            <div>
+                <label className="block text-gray-700 font-semibold mb-2">Tp:</label>
+                <select
+                    name="practical"
+                    value={practical}
+                    onChange={handlePracticalChange}
+                    className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                    return <option value="0">Empty</option>;
+                    {tps.map((tp: TpType.Tp) => {
+                        return <option value={tp.id}>{tp.name}</option>;
+                    })}
+                </select>
+            </div>
+            <button
+                onClick={handleSubmit}
+                className="btn btn-primary mt-4"
+                disabled={userData.length === 0}
+            >
+                Create Users
+            </button>
         </div>
-      )}
-
-      <div>
-        <label className="block text-gray-700 font-semibold mb-2">Tp:</label>
-        <select
-          name="practical"
-          value={practical}
-          onChange={() => handlePracticalChange}
-          className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          return <option value="0">Empty</option>;
-          {tps.map((tp: Tp) => {
-            return <option value={tp.id}>{tp.name}</option>;
-          })}
-        </select>
-      </div>
-      <button
-        onClick={handleSubmit}
-        className="btn btn-primary mt-4"
-        disabled={userData.length === 0}
-      >
-        Create Users
-      </button>
-    </div>
-  );
+    );
 }
 
 export default BulkUsers;